/* shish: a 1979 terminal room.
   The Bourne shell shipped in Unix V7 (1979), used at a Teletype or a DEC
   VT52/VT100. So: paper with green bars (line-printer stock) by day, a green
   phosphor screen by night, VT323 (a DEC VT320 look-alike, SIL OFL) for titles,
   reverse video for emphasis, and the `$` prompt as the only ornament.
   One accent, green, in both modes. */

@font-face {
  font-family: "VT323";
  src: url("vt323.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg:          light-dark(#f4f1ee, #0e0c09);
  --bg-raised:   light-dark(#faf8f5, #16130f);
  --bg-sunken:   light-dark(#ebe7e2, #0a0907);
  --bar:         light-dark(#eae3db, #1a150f);      /* greenbar stripe */
  --bg-code:     light-dark(#eee8e1, #15110d);
  --fg:          light-dark(#1a1815, #e6d8c8);
  --fg-muted:    light-dark(#4c4946, #a89886);
  --fg-faint:    light-dark(#716e6a, #847563);
  --line:        light-dark(#d3cdc6, #2a231a);
  --line-strong: light-dark(#a0988f, #4a3d2f);

  --accent:      light-dark(#8b5a23, #ffdfba);
  --accent-fg:   light-dark(#f4f1ee, #110c06);
  --accent-soft: light-dark(#e6ddd3, #322414);

  --t-kw:   var(--fg);
  --t-str:  var(--accent);
  --t-num:  var(--fg);
  --t-cm:   var(--fg-faint);
  --t-fn:   var(--fg);
  --t-type: var(--accent);
  --t-atom: var(--fg);
  --t-op:   var(--fg-faint);
  --t-var:  var(--fg-muted);
  --t-pre:  var(--fg-muted);

  --term-bg: #0b0906;
  --term-fg: #e6d8c8;
  --ok:  #62d98a;
  --bad: #f2f7f3;

  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: var(--mono);
  --crt:  "VT323", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: var(--crt);
  --font-brand: var(--crt);
  --heading-tracking: 0;
  --radius: 0;
  --wide: 1120px;

  --topbar-bg: var(--bg);
  --mark-bg: var(--accent);
  --mark-fg: var(--accent-fg);
  --mark-pad: 0.05em 0.4em 0.1em;
  --h2-rule: 1px dashed var(--line-strong);
  --card-bg: transparent;
  --card-shadow: none;
}

body { font-size: 15px; line-height: 1.7; }
::selection { background: var(--accent); color: var(--accent-fg); }      /* reverse video */

/* VT323 is a single-weight bitmap face: never fake a bold */
h1, h2, h3, h4, .brand, .btn, .topnav a, .badges b, .navgroup h3, .tab-btn, .playtab { font-family: var(--crt); font-weight: 400; }

/* ---------------------------------------------------------------- chrome */

.topbar { backdrop-filter: none; border-bottom: 1px dashed var(--line-strong); }
.brand { font-size: 1.9rem; letter-spacing: 0; color: var(--fg); }
.brand .mark { border-radius: 0; }
.topnav { gap: 1.6rem; font-size: 1.3rem; flex-wrap: nowrap; }
.topnav a { color: var(--fg-muted); text-decoration: none; }
.topnav a:hover { color: var(--accent-fg); background: var(--accent); }
.themetoggle { background: none; border-color: var(--line-strong); color: var(--fg); }
.themetoggle:hover { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

a { text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

code { border: 0; border-radius: 0; background: var(--bar); color: var(--fg); padding: 0.05em 0.35em; }
pre, .codeblock { border-radius: 0; border-color: var(--line-strong); }
pre code, .codeblock code { background: none; }
.t-kw { font-weight: 700; }
.t-cm, .t-comment { font-style: italic; }

/* the prompt is the only ornament */
.doc h1 { font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1; margin-bottom: 1.5rem; }
.doc h2 { font-size: 2.2rem; line-height: 1.05; }
.doc h3 { font-size: 1.65rem; line-height: 1.1; }
.doc h4 { font-size: 1.35rem; }
.doc h1::before { content: "$ "; color: var(--accent); }
.doc h2::before, .landing > section:not(.hero):not(.stats) > h2::before { content: "# "; color: var(--accent); }
.navgroup h3 { font-size: 1.05rem; letter-spacing: 0.04em; text-transform: none; color: var(--accent); }
.navgroup li a { border-radius: 0; }
.navgroup li a.here { background: var(--accent); color: var(--accent-fg); font-weight: 400; }
.doc blockquote { border-left-color: var(--accent); }
.sitefoot {
  border-top: 1px dashed var(--line-strong); text-align: left;
  max-width: calc(var(--wide) - 2 * clamp(1rem, 4vw, 2.5rem));
  width: calc(100% - 2 * clamp(1rem, 4vw, 2.5rem)); margin: 2rem auto 0; padding-inline: 0;
}

/* ------------------------------------------------------------------ hero */

.landing .hero.hero-center {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  text-align: left; gap: 0;
  min-height: min(40rem, calc(100dvh - 3.5rem - 8rem));
  padding-top: clamp(2.5rem, 8vh, 5rem); padding-bottom: clamp(2rem, 5vh, 3.5rem);
}
.hero-center h1 {
  font: 400 clamp(6rem, 26vw, 17rem)/0.78 var(--crt);
  letter-spacing: -0.01em;
  margin: 0 0 2rem;
  white-space: nowrap;
  color: var(--fg);
}
.hero h1::before { content: "$"; color: var(--accent); margin-right: 0.18em; }
.hero h1::after {
  content: ""; display: inline-block; width: 0.27em; height: 0.5em; margin-left: 0.1em;
  background: var(--accent); animation: blink 1.06s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero h1::after { animation: none; } }
:root[data-theme="dark"] .hero h1 { text-shadow: 0 0 0.12em color-mix(in srgb, var(--accent) 35%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero h1 { text-shadow: 0 0 0.12em color-mix(in srgb, var(--accent) 35%, transparent); }
}
.tagline { margin: 0; max-width: 40rem; font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.6; color: var(--fg); }
.hero-center .cta { justify-content: flex-start; margin: 2rem 0 0; gap: 0.75rem; }

.btn {
  border-radius: 0; border: 1px solid var(--accent); color: var(--accent);
  padding: 0.3rem 1.1rem 0.35rem; font-size: 1.45rem; line-height: 1.2; white-space: nowrap;
  transition: background 0.12s, color 0.12s, transform 0.08s;
}
.btn:hover { background: var(--accent); color: var(--accent-fg); }
.btn.primary { background: var(--accent); color: var(--accent-fg); }
.btn.primary:hover { background: transparent; color: var(--accent); filter: none; }
.btn:active { transform: translateY(1px); }
.btn.ghost { border-color: var(--line-strong); color: var(--fg-muted); }
.btn.ghost:hover { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); }

/* facts on green-bar stock */
.stats { padding-top: 0; padding-bottom: 0; }
.stats .badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; justify-content: stretch; color: var(--fg-muted); border-block: 1px dashed var(--line-strong); }
.stats .badges li { padding: 1.1rem 1.25rem 1.2rem; display: flex; flex-direction: column; gap: 0.2rem; }
.stats .badges li:nth-child(odd) { background: var(--bar); }
.stats .badges b { font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 0.9; color: var(--fg); }
.stats .badges span { font-size: 0.8rem; color: var(--fg-muted); }

/* --------------------------------------------------------------- sections */

.landing > section:not(.hero):not(.stats) { padding-top: clamp(3rem, 8vh, 5rem); padding-bottom: 0.5rem; }
.landing > section:not(.hero):not(.stats) h2 { margin: 0 0 1.5rem; font-size: clamp(2rem, 4vw, 2.7rem); line-height: 1.05; max-width: 40rem; text-wrap: balance; }
.landing > section:not(.hero):not(.stats) p { max-width: 42rem; color: var(--fg-muted); }
.landing > section p b, .landing > section p a { color: var(--fg); }
.promise, .status { border-top: 0; }

/* the three places: ruled rows, name left, prose right */
.pitch .cards { display: block; }
.pitch .card {
  display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); column-gap: 2rem; align-items: start;
  border: 0; border-top: 1px dashed var(--line-strong); padding: 1.5rem 0 1.75rem; background: none;
}
.pitch .card:last-child { border-bottom: 1px dashed var(--line-strong); }
.pitch .card h3 { grid-row: 1 / span 3; margin: 0; font-size: 2rem; line-height: 1; color: var(--accent); }
.pitch .card p, .pitch .card .more { grid-column: 2; }
.pitch .cards .card p { margin: 0 0 0.9rem; font-size: 0.92rem; color: var(--fg-muted); }
.pitch .card .more { font-family: var(--crt); font-size: 1.25rem; font-weight: 400; color: var(--fg); }

/* demo */
.sample { margin: 0 0 1.5rem; }
.sizes { border-collapse: separate; border-spacing: 0; max-width: 38rem; margin-top: 2rem; border-top: 1px dashed var(--line-strong); }
.sizes th, .sizes td { padding: 0.5rem 0.9rem; border-bottom: 0; }
.sizes th { font-family: var(--crt); font-size: 1.15rem; font-weight: 400; color: var(--accent); text-transform: none; letter-spacing: 0; }
.sizes tbody tr:nth-child(odd) td { background: var(--bar); }
.sizes tbody tr.me td { background: var(--accent); color: var(--accent-fg); font-weight: 700; }      /* reverse video */
.sizes td:nth-child(2) { font-variant-numeric: tabular-nums; }
.fineprint { color: var(--fg-faint); font-size: 0.8rem; }

.promise p:first-of-type { font-size: 1.08rem; color: var(--fg); }

/* ----------------------------------------------------------- responsive */

@media (max-width: 48rem) {
  .topbar { height: auto; flex-wrap: wrap; padding: 0.7rem 1rem; gap: 0.3rem 1rem; }
  .topnav { order: 3; width: 100%; margin-left: 0; gap: 0.2rem 1.1rem; flex-wrap: wrap; }
  .themetoggle { margin-left: auto; }
  .stats .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats .badges li:nth-child(odd) { background: none; }
  .stats .badges li:nth-child(1), .stats .badges li:nth-child(4) { background: var(--bar); }
  .pitch .card { grid-template-columns: minmax(0, 1fr); }
  .pitch .card h3 { grid-row: auto; margin-bottom: 0.6rem; }
  .pitch .card p, .pitch .card .more { grid-column: 1; }
  .hero-center .cta .btn { white-space: normal; }
}