/* ==========================================================================
   Base: reset, typography, layout primitives, and the terminal chrome.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ------------------------------------------------------------ typography */

h1, h2, h3 { color: #fff; text-wrap: balance; }

h1 {
  font-size: clamp(2.4rem, 7vw, 5.4rem);
  line-height: 1.0;
  letter-spacing: -.042em;
  font-weight: 700;
  margin: 0;
}

h2 {
  font-size: clamp(1.8rem, 4.4vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -.034em;
  font-weight: 680;
  margin: 0 0 20px;
  max-width: 20ch;
}

h3 {
  font-size: clamp(1.15rem, 2.1vw, 1.44rem);
  line-height: 1.24;
  letter-spacing: -.022em;
  font-weight: 660;
  margin: 0 0 10px;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--house);
  outline-offset: 3px;
  border-radius: 3px;
}

strong, b { color: #fff; font-weight: 640; }
code { font-family: var(--mono); font-size: .88em; }
abbr { text-decoration: none; border-bottom: 1px dotted var(--faint); cursor: help; }

.lede {
  font-size: clamp(1.04rem, 1.5vw, 1.18rem);
  color: var(--muted);
  max-width: 62ch;
  margin: 0 0 44px;
}
.lede b { color: var(--ink); font-weight: 600; }

/* The page's own voice: a note pencilled in the margin of a playscript. */
.sd {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--house);
  font-style: italic;
  margin: 0 0 16px;
  opacity: .92;
}
.sd.mid { text-align: center; }

.small { font-size: 14px; color: var(--faint); }

/* ---------------------------------------------------------------- layout */

.wrap  { max-width: var(--maxw);      margin: 0 auto; padding: 0 var(--gutter); }
.wrap-wide { max-width: var(--maxw-wide); margin: 0 auto; padding: 0 var(--gutter); }

section { padding: clamp(76px, 11vw, 148px) 0; position: relative; }
section > .wrap, section > .wrap-wide { position: relative; z-index: 1; }

/* A hairline that reads as the join between two acts rather than a divider. */
.actrule {
  border: 0;
  height: 1px;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--rule) 22%, var(--rule) 78%, transparent);
}

/* --------------------------------------------------------- the mark ----- */

.mark { display: block; height: 1em; width: auto; color: var(--ink); }
.brandlock { display: inline-flex; align-items: center; gap: 0; }

/* The name's meaning, beneath the mark. */
.gloss {
  font-family: var(--mono);
  font-size: clamp(12px, 1.5vw, 14px);
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: none;
}

/* --------------------------------------------------------- install line - */

.install {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 11px;
  background: color-mix(in srgb, var(--sunken) 82%, transparent);
  backdrop-filter: blur(8px);
  overflow: hidden;
  max-width: 100%;
  /* As a flex item this defaults to min-width:auto, which refuses to shrink
     below the un-wrappable command inside it and pushes off a phone screen
     -- taking the copy button with it. */
  min-width: 0;
}
.install code {
  font-size: 14.5px;
  padding: 13px 17px;
  color: var(--ink);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.install code::-webkit-scrollbar { display: none; }
.install code .p { color: var(--house); user-select: none; margin-right: 9px; }
.install button {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 0;
  border-left: 1px solid var(--rule);
  color: var(--muted);
  padding: 0 15px;
  cursor: pointer;
  transition: color .2s, background .2s;
  flex: none;
}
.install button:hover { color: var(--house); background: var(--surface); }
.install button.done { color: var(--ok); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 12px 20px;
  transition: border-color .22s, color .22s, background .22s;
  /* Translucent rather than transparent: these sit over the print, and a
     bare outline is unreadable against a woodblock. */
  background: color-mix(in srgb, var(--sunken) 78%, transparent);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.btn:hover { border-color: var(--house); color: var(--house); text-decoration: none; }
.btn.solid { background: var(--house); border-color: var(--house); color: #17120a; font-weight: 620; }
.btn.solid:hover { background: #eec081; border-color: #eec081; color: #17120a; }

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

.termshell {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--ground);
  overflow: hidden;
  box-shadow: 0 44px 100px -34px rgba(0, 0, 0, .9);
}
.termbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 15px;
  background: var(--sunken);
  border-bottom: 1px solid var(--rule);
}
.termbar i { width: 10px; height: 10px; border-radius: 50%; display: block; flex: none; }
.termbar i:nth-child(1) { background: var(--danger); }
.termbar i:nth-child(2) { background: var(--house); }
.termbar i:nth-child(3) { background: var(--ok); }
.termbar .t { font-family: var(--mono); font-size: 12px; color: var(--faint); margin-left: 8px; }
.termbar .live {
  margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--faint);
  display: flex; align-items: center; gap: 6px;
}
.termbar .live b { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); display: block; }

/* A terminal is a fixed matrix: it scales down to fit, and past a floor it
   scrolls inside its own box rather than taking the page sideways with it.
   min-width:0 is load-bearing anywhere a grid sits in a flex/grid track --
   without it the track refuses to shrink below the grid's min-content width
   and the whole layout is pushed past the viewport. */
.screenbox {
  background: var(--ground);
  overflow-x: auto; overflow-y: hidden;
  min-width: 0;
  /* Both halves of the same decision. The ::-webkit- rules below style the
     scrollbar in Chromium and Safari; `scrollbar-color` is what Firefox reads,
     and without it Firefox draws its default LIGHT scrollbar -- a 6px pure
     white bar across the bottom of a capture on a dark page, which is exactly
     what a reader on a phone was getting under the narrower crops. */
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
  -webkit-overflow-scrolling: touch;
}
.screenbox::-webkit-scrollbar { height: 6px; }
.screenbox::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }
.sizer { position: relative; }
/* The captures are painted in a bundled font, not the system mono stack.
   A cell has to advance exactly one column or the grid shears, and the
   braille the SYSTEM sparklines and the agent spinners are made of is absent
   from most mono faces -- it was being served by a fallback 22% too wide, so
   every sparkline and every spinner row slid right. Built and verified by
   tools/build-gridfont.py, which fails if any codepoint in frames.json is
   missing or if two advances disagree.

   `block` rather than `swap`: swapping would paint a sheared grid first and
   snap it straight, which is worse than a beat of nothing. It is 13 KB from
   the same origin.

   The three overrides are the other half of the cell, and they are not
   cosmetic. In a terminal the line box IS the cell: a rail's │ has to reach
   the │ on the row below or the rail draws dashed, so the box drawing, the
   blocks and the braille are all cut to span exactly `line-height` -- and
   these declare the line box the font was cut against instead of leaving a
   browser to derive one from whichever of hhea and OS/2 it prefers. They sum
   to 130%, which is why the leading is zero and the baseline is the same
   everywhere. tools/build-gridfont.py computes all three; `--check`, which
   preflight runs, fails if this block and the font ever disagree. */
@font-face {
  font-family: "butai-grid";
  src: url("../assets/grid.woff2") format("woff2");
  font-display: block;
  ascent-override: 99.619%;
  descent-override: 30.381%;
  line-gap-override: 0%;
}

/* line-height is the cell height, so it is a font metric here, not taste.
   Changing it means rebuilding grid.woff2 against the new number. */
.grid {
  font-family: "butai-grid", var(--mono);
  font-size: 13px;
  line-height: 1.3;
  white-space: pre;
  transform-origin: 0 0;
  width: max-content;
  padding: 10px 12px;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0;
}
.grid .row { display: block; height: 1.3em; }
.grid span { white-space: pre; }
.b { font-weight: 700; } .i { font-style: italic; }
.u { text-decoration: underline; } .dm { opacity: .6; }

.scrollhint {
  display: none;
  font-family: var(--mono); font-size: 11px; color: var(--faint);
  text-align: center; padding: 8px 0 0;
}
.scrollhint.on { display: block; }

/* ------------------------------------------------------------- utilities */

.center { text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* The skip link is the first thing a keyboard reader reaches, and it was
   invisible the whole time it was focused -- so the one control that exists
   only for keyboard readers was the one control they could not see they had.
   It unhides itself on focus and hides again the moment it is left. The
   fallbacks matter: 404.html loads tokens.css and base.css only, and --ui and
   --pill are declared in stage.css. */
.visually-hidden:focus {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  width: auto; height: auto; overflow: visible;
  clip: auto; clip-path: none;
  padding: 10px 18px;
  border-radius: var(--pill, 980px);
  background: var(--house); color: var(--deep);
  font-family: var(--ui, var(--sans)); font-size: 14px; font-weight: 600;
  text-decoration: none;
}