/* Hyperdeep — landing page
   Style: Factory-like monochrome (off-white canvas, Geist pressed tight,
   Geist Mono labels, hairlines, color only in small icon tiles) on a
   dub-style frame: two fixed vertical guides and a sticky header the page
   scrolls under. Sections are dotted panels, edge to edge, with dark L
   brackets on their corners. */

@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/GeistMono-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* light-dark(light, dark). The page ships as <html data-theme="light">;
     the toggle switches it to dark. Without data-theme it would follow the
     system setting. */
  color-scheme: light dark;
  --bg: light-dark(#F5F5F5, #101010);
  --surface: light-dark(#FFFFFF, #161514);
  --text: light-dark(#020202, #EEEEEE);
  --muted: light-dark(#8A8380, #8A8380);
  --subtle: light-dark(#B8B3B0, #4D4947);
  --stroke: light-dark(#E2DFDD, #2A2827);     /* card and input edges */
  --stroke-strong: light-dark(#A49D9A, #3D3A39); /* outline buttons */
  --ink: light-dark(#101010, #FAFAFA);       /* dark button fill */
  --on-ink: light-dark(#EEEEEE, #101010);
  --eyebrow: light-dark(#525252, #B8B3B0);   /* section names next to icon tiles */
  --logo: light-dark(#2A2A2A, #E6E6E6);      /* the dot-matrix mark */

  /* Construction lines: neutral gray and opaque, so where two rules
     coincide (the fixed page frame and a cell edge) they don't darken. */
  --rule: light-dark(#E3E3E3, #222222);
  --rule-faint: light-dark(#ECECEC, #1A1A1A);
  --guide: light-dark(#ADADAD, #4A4A4A);     /* the dotted panel edges and frame */
  --tick: light-dark(#1A1A1A, #E6E6E6);      /* L brackets on corners and dividers */
  --sel: light-dark(#BDBDBD, #4D4947);       /* selection box around charts */
  --chart-bg: light-dark(#F9F9F9, #151515);  /* the charts' own background (studio "canvas") */

  /* Color families (DESIGN.md): a pale tint for washes and tags, an ink for
     shapes and large type (3:1+ on the page) that is also the chart series
     color (studio/palette.json), a deep shade for small text on the tint
     (4.5:1+), and an icon-tile color. Crema and caramel inks are fill-only. */
  --mint-tint: light-dark(#DAFCD5, #1B2B18); --mint: light-dark(#4C9A06, #BCC25C); --mint-deep: light-dark(#2F6A00, #BCC25C);
  --crema-tint: light-dark(#F5E6C8, #2E2516); --crema: light-dark(#CF8300, #E0A93E); --crema-deep: light-dark(#875700, #E0A93E);
  --caramel-tint: light-dark(#FDE3D0, #33200F); --caramel: light-dark(#F06305, #C98A55); --caramel-deep: light-dark(#A84300, #DDA77A);
  --terracotta-tint: light-dark(#F1DDD3, #33221B); --terracotta: light-dark(#C06040, #D8694A); --terracotta-deep: light-dark(#8C3F24, #E59478);
  --vermilion-tint: light-dark(#F2D5D5, #3A1F1B); --vermilion: light-dark(#DA5336, #F07B5E); --vermilion-deep: light-dark(#A8321A, #F07B5E);
  --burgundy-tint: light-dark(#F6D9E4, #33202A); --burgundy: light-dark(#A3164A, #B2475E); --burgundy-deep: light-dark(#7C0F37, #E58BA3);
  --sage-tint: light-dark(#D5F0E6, #142821); --sage: light-dark(#11946D, #8DB39A); --sage-deep: light-dark(#0B6B4E, #8DB39A);
  --sky-tint: light-dark(#C6E6F0, #16282E); --sky: light-dark(#2B8DB3, #7CC6E2); --sky-deep: light-dark(#1A5F7C, #7CC6E2);
  --slate-tint: light-dark(#C5D1DD, #1C232C); --slate: light-dark(#4E6788, #9DB2CC); --slate-deep: light-dark(#2F435E, #9DB2CC);
  --roast-tint: light-dark(#EBDDD3, #2A1E17); --roast: light-dark(#5E3418, #8E6449); --roast-deep: light-dark(#5E3418, #C9A588);
  --cobalt-tint: light-dark(#D6E6F7, #0F1D2E); --cobalt: light-dark(#005EB7, #5B9BE6); --cobalt-deep: light-dark(#0F437F, #8CB8F0);
  --cherry-tint: light-dark(#F7D6D8, #33161A); --cherry: light-dark(#B5121B, #F0646C); --cherry-deep: light-dark(#8A0C13, #F28F95);
  --line: 1px;
  --anchor-size: 5px;
  --arm: 7px;
  --tick-w: 1.5px;
  --panel-gap: 0px;

  --page: 1200px;
  --gutter: 48px;
  --pad: 32px;
  --radius: 3px;
  --card-radius: 10px;

  --sans: "Geist", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* the hero line and the wordmark: Geist too (two faces in all, Geist and Geist Mono) */
  --display-face: var(--sans);
  /* section and shot headings */
  --heading-face: var(--brand-face);
  /* the brand face: the hero line, and the (vectorized) wordmark */
  --brand-face: "Host Grotesk", var(--sans);
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
/* Hairlines: one device pixel on retina screens. */
@media (min-resolution: 2dppx) { :root { --line: 0.5px; } }

/* Browsers without light-dark() get the light theme. */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    --bg: #F5F5F5; --surface: #FFFFFF; --text: #020202; --muted: #8A8380; --subtle: #B8B3B0;
    --stroke: #E2DFDD; --stroke-strong: #A49D9A; --ink: #101010; --on-ink: #EEEEEE; --eyebrow: #525252;
    --rule: #E3E3E3; --rule-faint: #ECECEC; --sel: #BDBDBD;
    --guide: #ADADAD; --tick: #1A1A1A;
  }
  .only-dark { display: none !important; }
  .theme-pick { display: none !important; }
}

/* Theme-specific assets (charts, logo). Hidden lazy images never download. */
:root[data-theme="light"] .only-dark,
:root[data-theme="dark"] .only-light { display: none !important; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .only-dark { display: none !important; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .only-light { display: none !important; }
}

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

html { background: var(--bg); scroll-padding-top: calc(80px + env(safe-area-inset-top, 0px)); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 24px;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--text); color: var(--bg); }

/* ---------- frame ----------
   Sections are panels stacked edge to edge. Their edges are fine dotted
   guides, one line between any two panels (each panel draws only its bottom
   edge), and every panel's corners carry a short dark L bracket, so where two
   panels meet the brackets read as a T on the frame. The two outer vertical
   guides are pinned to the viewport, so the page scrolls between them. */

body::before {
  content: "";
  position: fixed;
  z-index: 30; /* over the sticky header, so the guides run unbroken */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: var(--frame-w);
  border-inline: 1px dotted var(--guide);
  pointer-events: none;
}
:root { --frame-w: min(var(--page), 100% - 2 * var(--gutter)); }
html, body { overflow-x: clip; }
/* a word too long for its line (an XBRL tag in a note, a URL) breaks rather than widening the page:
   iPhone Safari pans sideways at any overflow, whatever the clip above says */
body { overflow-wrap: break-word; }

.band { position: relative; }
.band + .band, main > .band:first-child, .footer { margin-top: var(--panel-gap); }

.row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  width: var(--frame-w);
  margin: 0 auto;
  /* the sides are the fixed guides; a panel draws only its bottom edge, the
     one above it draws the line between them */
  border-bottom: 1px dotted var(--guide);
}
.ruler .row { border-top: 0; } /* the nav's bottom line is its top */

.cell {
  position: relative;
  grid-column: span var(--span, 12);
  border-left: 1px dotted var(--guide);
  padding: var(--pad);
  min-width: 0;
}
.row > .cell:first-child { border-left-color: transparent; }

/* L brackets on the panel's four corners, drawn as gradient strokes */
.row::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -1px 0;
  pointer-events: none;
  --h: linear-gradient(var(--tick), var(--tick));
  background:
    var(--h) left top / var(--arm) var(--tick-w) no-repeat, var(--h) left top / var(--tick-w) var(--arm) no-repeat,
    var(--h) right top / var(--arm) var(--tick-w) no-repeat, var(--h) right top / var(--tick-w) var(--arm) no-repeat,
    var(--h) left bottom / var(--arm) var(--tick-w) no-repeat, var(--h) left bottom / var(--tick-w) var(--arm) no-repeat,
    var(--h) right bottom / var(--arm) var(--tick-w) no-repeat, var(--h) right bottom / var(--tick-w) var(--arm) no-repeat;
}

/* no diagonals off the corners: the frame is lines and brackets only */
.row::after { display: none; }
/* At the top the nav and the ruler read as one panel, bracketed on its outer
   corners. Once the page scrolls the ruler slides away under the sticky nav
   (main.js sets .is-scrolled) and the nav closes its own corners. */
html:not(.is-scrolled) .site-head:has(+ .ruler) .nav .row::before {
  background:
    var(--h) left top / var(--arm) var(--tick-w) no-repeat, var(--h) left top / var(--tick-w) var(--arm) no-repeat,
    var(--h) right top / var(--arm) var(--tick-w) no-repeat, var(--h) right top / var(--tick-w) var(--arm) no-repeat;
}
.ruler .row::before {
  background:
    var(--h) left bottom / var(--arm) var(--tick-w) no-repeat, var(--h) left bottom / var(--tick-w) var(--arm) no-repeat,
    var(--h) right bottom / var(--arm) var(--tick-w) no-repeat, var(--h) right bottom / var(--tick-w) var(--arm) no-repeat;
}

/* where a divider meets the panel edge: a small dark T, top and bottom */
.cell + .cell::before,
.cell + .cell::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: -5.5px;
  width: 9px;
  height: 6px;
  pointer-events: none;
  --h: linear-gradient(var(--tick), var(--tick));
}
.cell + .cell::before { top: -1px; background: var(--h) center top / 9px var(--tick-w) no-repeat, var(--h) center top / var(--tick-w) 6px no-repeat; }
.cell + .cell::after { bottom: -1px; background: var(--h) center bottom / 9px var(--tick-w) no-repeat, var(--h) center bottom / var(--tick-w) 6px no-repeat; }

/* ---------- type ---------- */

/* headings: Host Grotesk SemiBold, the hero's face, tracked in */
.display {
  font-family: var(--heading-face);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}
/* Eyebrow: a small app-style icon tile, then the section's name. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 15px/1.3 var(--sans);
  letter-spacing: -0.01em;
  color: var(--eyebrow);
  margin: 0;
}
/* Icon tiles: the only color on the page outside the charts. The tile is a
   roast color with a soft top light; the glyph is a deep shade of it. */
.ico {
  --c: var(--ochre);
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 4.5px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 72%, #fff), var(--c));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 82%, #000), inset 0 1px 0 color-mix(in srgb, var(--c) 40%, #fff);
  color: color-mix(in srgb, var(--c) 38%, #000);
}
.ico svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* tile colors, one per color family (c-green, c-ochre, c-rose are older names) */
.c-mint, .c-green { --c: #7DBE48; }
.c-crema, .c-ochre { --c: #F2A63A; }
.c-caramel { --c: #F58A4A; }
.c-terracotta { --c: #F27B57; }
.c-vermilion { --c: #EC6A4E; }
.c-burgundy, .c-rose { --c: #E06890; }
.c-sage { --c: #4DB38C; }
.c-sky { --c: #6CB8D6; }
.c-slate { --c: #8FA4BF; }
.c-roast { --c: #C08B63; }
.c-cobalt { --c: #3D8BDB; }
.c-cherry { --c: #E04A52; }
.c-ink { --c: #2A2A2A; color: #F5F5F5; }
.muted { color: var(--muted); }

/* dub-style section head: eyebrow, large light heading, muted lede */
.section-head { display: flex; flex-direction: column; gap: 18px; padding-block: 88px 72px; }
.section-head h2 { font-size: clamp(36px, 4.8vw, 60px); line-height: 1.02; max-width: 16ch; }
.section-lede { font-size: 19px; line-height: 1.55; color: var(--muted); margin: 4px 0 0; max-width: 52ch; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius);
  font: 400 12px/1 var(--mono);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.btn-dark { background: var(--ink); color: var(--on-ink); border: var(--line) solid var(--ink); }
/* the nav's link to X: the logo in a square button; the handle itself is in the X card and the footer */
.nav-x { width: 32px; padding: 0; justify-content: center; flex: none; }
.nav-x svg { width: 13px; height: 13px; fill: currentColor; }
.btn-dark:hover { opacity: 0.86; }
.btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* ---------- header ---------- */

/* Sticky, frosted: the page scrolls up under it, inside the guides. The page runs under a phone's
   status bar (viewport-fit=cover), so the header reaches up under it too, its own padding keeping
   the brand below it: nothing scrolls into view above the header. */
.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.nav .cell { padding-block: 14px; display: flex; align-items: center; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand .mark { width: auto; height: 30px; color: var(--logo); }
/* wordmark, with the tagline under it */
.brand-text { display: flex; flex-direction: column; gap: 4px; }
/* the wordmark: Host Grotesk SemiBold, vectorized (assets/logo/wordmark.svg, symbol #ec-wordmark) */
/* the wordmark takes the tagline's width (it is tracked to span it at 17px) and keeps its aspect */
.brand-name { display: block; width: 0; min-width: 100%; height: auto; color: var(--text); } /* width 0 so the tagline alone sizes the block */
.brand-tag { font: 400 9.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
/* the same three on every page: Calendar, Track, Subscribe; the page you are on is underlined */
.nav-links { gap: clamp(14px, 2.4vw, 32px); justify-content: center; }
.nav-links a { font-size: 13px; text-decoration: none; color: var(--text); white-space: nowrap; }
.nav-links a:hover { color: var(--muted); }
.nav-links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.nav-end { justify-content: flex-end; gap: 12px; }
/* On wide screens the brand and the buttons each take the same quarter of the row on every page,
   so the links sit at its centre and stay put from page to page; the buttons have no divider of
   their own. 240px is the widest side (the home page's search, theme and X), so narrow screens
   keep the same width too; fit-content is the safety net. */
@media (min-width: 961px) {
  .nav .row { display: flex; }
  .nav .cell:first-child, .nav .cell.nav-end { flex: 0 0 max(25%, 240px); min-width: fit-content; }
  .nav .cell.nav-links { flex: 1; }
  .nav .cell.nav-end { padding-left: 0; border-left-color: transparent; }
  .nav .cell.nav-end::before, .nav .cell.nav-end::after { display: none; }
}

/* ---------- nav menu ---------- */

/* The design-explorations menu: a small outline button like the theme picker, opening a panel
   of links to every exploration page (temporary, for review). */

/* ---------- picker ---------- */

/* The page's own dropdown (kit.js picker()): a button showing the choice, opening a listbox in
   the page's style instead of the OS menu. The filings list on company pages and the theme
   control in every nav use it. */
.pick { position: relative; display: inline-flex; max-width: 100%; }
.pick-btn { display: inline-flex; align-items: center; gap: 10px; height: 30px; max-width: 100%; padding: 0 28px 0 11px; border: var(--line) solid var(--stroke-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font: 400 11px/1 var(--mono); text-transform: uppercase; cursor: pointer; position: relative; }
.pick-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-btn::after { content: ""; position: absolute; right: 11px; top: 50%; width: 5px; height: 5px; margin-top: -4px; border-right: 1.2px solid var(--muted); border-bottom: 1.2px solid var(--muted); transform: rotate(45deg); transition: transform 0.2s, margin-top 0.2s; }
.pick-btn[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: -1px; }
.pick-btn:hover, .pick-btn[aria-expanded="true"] { border-color: var(--text); }
.pick-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.pick-list { position: absolute; z-index: 30; left: 0; top: calc(100% + 6px); min-width: 100%; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 4px; list-style: none; border: var(--line) solid var(--stroke-strong); border-radius: 4px; background: var(--surface); box-shadow: 0 16px 40px -18px rgb(0 0 0 / 0.45); outline: none; }
.pick-list li { display: flex; align-items: baseline; gap: 10px; padding: 7px 10px 7px 24px; border-radius: 2px; font: 400 11px/1.3 var(--mono); text-transform: uppercase; color: var(--text); white-space: nowrap; cursor: pointer; position: relative; }
.pick-list li small { font: inherit; color: var(--muted); }
.pick-list li.on { background: color-mix(in srgb, var(--text) 6%, transparent); }
.pick-list li[aria-selected="true"]::before { content: ""; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: var(--text); }
@media (max-width: 560px) { .pick-list { max-height: 240px; } }

/* The theme picker: Light (default), Dark or System, mounted by main.js in [data-theme-pick].
   Just the icon, a half-filled dot in a square button; the choice is in its tooltip and in the
   list, which hangs from its right edge so it stays on screen at the end of the nav. */
.theme-pick { display: inline-flex; flex: none; }
.theme-pick .pick-btn { width: 32px; height: 32px; padding: 0; justify-content: center; border-color: var(--stroke); background: transparent; }
.theme-pick .pick-label { display: none; }
.theme-pick .pick-btn:hover, .theme-pick .pick-btn[aria-expanded="true"] { border-color: var(--stroke-strong); }
.theme-pick .pick-btn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; border: var(--line) solid var(--text); background: linear-gradient(90deg, var(--text) 50%, transparent 50%); }
.theme-pick .pick-btn::after { display: none; }
.theme-pick .pick-list { left: auto; right: 0; }

/* ---------- ruler ---------- */

.ruler .cell { padding: 0; height: 18px; }
.ruler .cell::before, .ruler .cell::after { display: none; }
.ruler .cell > div {
  height: 100%;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, var(--subtle) 0 1px, transparent 1px 100px) left bottom / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 50px) left bottom / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, var(--rule-faint) 0 1px, transparent 1px 10px) left bottom / 100% 4px no-repeat;
}

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

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  padding: 112px var(--pad) 120px;
  /* faint square grid behind the headline, fading out like a canvas */
  background:
    linear-gradient(to bottom, transparent 0, var(--bg) 55%) no-repeat,
    linear-gradient(var(--rule-faint) 1px, transparent 1px) center top / 48px 48px,
    linear-gradient(90deg, var(--rule-faint) 1px, transparent 1px) center top / 48px 48px;
}
/* the hero line: Host Grotesk SemiBold, the wordmark's face, in sentence case
   and set tight */
.hero h1 {
  font-family: var(--brand-face);
  font-size: clamp(46px, 8vw, 116px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.96;
  max-width: 13ch;
}
/* the market tape (main.js): one canvas over the hero, blended so it shows only on the
   background, its figures keeping clear of the text. It never takes a click or a selection. */
.hero-field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; letter-spacing: normal; word-spacing: normal; }
/* the outline words get a little air: at the hero tracking neighbouring outlines touch */
.hero h1 em { font-style: normal; color: var(--muted); white-space: nowrap; letter-spacing: -0.015em; }
/* "one shot" in outline view, like a vector editor's wireframe mode
   (the fallback until main.js swaps in the dotted version) */
@supports (-webkit-text-stroke: 1px black) {
  .hero h1 em { color: transparent; -webkit-text-stroke: 1px var(--text); }
}
/* finely dotted outlines. Units are the word's own (font-size 100), so the
   dots are ~1.6px at the desktop size; small screens get larger units to keep
   them ~1.2px rather than vanishing. */
.hero h1 em.dotted { -webkit-text-stroke: 0; }
.hero h1 .dotword { display: inline-block; overflow: visible; }
.hero h1 .dotword text {
  fill: none;
  stroke: var(--text);
  stroke-width: 1.5;
  stroke-dasharray: 0 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 560px) {
  .hero h1 .dotword text { stroke-width: 2.6; stroke-dasharray: 0 6; }
}
.lede { font: 400 14px/1.6 var(--mono); color: var(--muted); max-width: 46ch; margin: 0; text-wrap: balance; }

/* the hero's signup: the subscribe band's form, a little wider and taller, lifted like a field
   (search lives in the nav) */
.hero .signup { width: min(500px, 100%); max-width: none; margin-top: 8px; align-items: center; }
.hero .signup-row { width: 100%; box-shadow: 0 10px 30px -18px rgb(0 0 0 / 0.35); }
.hero .signup input, .hero .signup button { height: 42px; }
.hero-fig { margin: 56px 0 0; max-width: 960px; }

/* ---------- chart objects ---------- */

/* Charts are rendered a hair lighter than the page (#F9F9F9 on #F5F5F5,
   #151515 on #101010) with no border of their own: the studio's "canvas"
   in specs/landing. The only line around one is the "selected object" box:
   dotted like the panels, with the same dark L brackets on its corners,
   and a dimensions tag. */
.selected {
  --off: 10px;
  position: relative;
  width: 100%;
  margin: 0;
  outline: 1px dotted var(--guide);
  outline-offset: var(--off);
}
.selected img { width: 100%; }
/* chart-motion.js swaps the PNG for the chart's SVG and builds it in */
.selected svg.chart { display: block; width: 100%; height: auto; overflow: visible; }
.selected .h {
  position: absolute;
  width: var(--arm);
  height: var(--arm);
  --at: calc(-1 * var(--off) - 1px); /* on the outline, which sits just outside the offset */
}
.selected .h.tl { left: var(--at); top: var(--at); border-left: var(--tick-w) solid var(--tick); border-top: var(--tick-w) solid var(--tick); }
.selected .h.tr { right: var(--at); top: var(--at); border-right: var(--tick-w) solid var(--tick); border-top: var(--tick-w) solid var(--tick); }
.selected .h.bl { left: var(--at); bottom: var(--at); border-left: var(--tick-w) solid var(--tick); border-bottom: var(--tick-w) solid var(--tick); }
.selected .h.br { right: var(--at); bottom: var(--at); border-right: var(--tick-w) solid var(--tick); border-bottom: var(--tick-w) solid var(--tick); }
.selected .h.tc, .selected .h.ml, .selected .h.mr, .selected .h.bc { display: none; }
.selected .dims {
  position: absolute;
  left: 50%;
  top: calc(100% + var(--off) + 14px);
  transform: translateX(-50%);
  color: var(--muted);
  font: 400 11px/1 var(--mono);
  white-space: nowrap;
}

/* Shot charts behave like objects on a canvas: hover selects them. */
.selectable { outline-color: transparent; transition: outline-color 0.15s; }
.selectable .h { opacity: 0; transition: opacity 0.15s; }
.selectable:hover { outline-color: var(--guide); }
.selectable:hover .h { opacity: 1; }

/* ---------- signup ---------- */

.signup { display: flex; flex-direction: column; gap: 10px; max-width: 440px; }
.signup-row {
  display: flex;
  gap: 6px;
  padding: 5px;
  background: var(--surface);
  border: var(--line) solid var(--stroke);
  border-radius: 6px;
}
.signup-row:focus-within { border-color: var(--stroke-strong); }
.signup input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--text);
  font: 400 15px/1 var(--sans);
  padding: 0 10px;
  height: 36px;
  outline: none;
}
.signup input::placeholder { color: var(--subtle); }
.signup button {
  border: 0;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--on-ink);
  font: 400 12px/1 var(--mono);
  text-transform: uppercase;
  padding: 0 16px;
  height: 36px;
  cursor: pointer;
  white-space: nowrap;
}
.signup button:hover { opacity: 0.86; }
.signup button:focus-visible, .signup input:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.signup-note { font: 400 12px/1.4 var(--mono); color: var(--muted); margin: 0; min-height: 1.4em; }
.signup-note a { color: var(--text); }
.signup-note.ok { color: var(--text); }

/* ---------- brew steps ---------- */

.steps .cell { padding: 28px var(--pad) 32px; }
.step-n { font-size: 14px; }
.step-t { font: 600 21px/1.15 var(--heading-face); letter-spacing: -0.03em; margin: 22px 0 8px; }
.step-d { font-size: 14px; line-height: 1.45; color: var(--muted); margin: 0; }

/* ---------- shots ---------- */

.shot-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-block: 48px 40px;
}
.shot-copy h2 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.02; }
.shot-line { font-size: 17px; line-height: 1.55; color: var(--muted); margin: 0; max-width: 32ch; }
.shot-meta {
  margin: auto 0 0;
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px dotted var(--guide);
  font: 400 11px/1.4 var(--mono);
  text-transform: uppercase;
  color: var(--muted);
}
.shot-art { padding: 48px; }
.shot-art figure a { display: block; cursor: zoom-in; }

/* ---------- subscribe: a page of its own ---------- */

/* Full bleed and nearly a screen tall. It always takes the dark scheme: color-scheme flips every
   light-dark() token inside it, so in light mode it is the page's one night panel and in dark mode
   a lifted one. A faint 48px grid, like the hero's, fades out toward the edges. */
.cta {
  color-scheme: dark;
  display: flex;
  align-items: center;
  min-height: min(100svh, 940px);
  color: var(--text);
  background:
    radial-gradient(ellipse 75% 65% at 50% 45%, transparent 0, var(--surface) 78%) no-repeat,
    linear-gradient(var(--rule) 1px, transparent 1px) center top / 48px 48px,
    linear-gradient(90deg, var(--rule) 1px, transparent 1px) center top / 48px 48px,
    var(--surface);
}
.cta .row { border-bottom: 0; }
.cta .row::before { display: none; }
.cta-copy { display: flex; flex-direction: column; align-items: center; gap: 26px; padding-block: 120px; text-align: center; }
.cta-copy h2 { font-size: clamp(56px, 10.5vw, 160px); letter-spacing: -0.05em; line-height: 0.92; max-width: 11ch; }
.cta-copy .lede { font-size: 15px; }
.cta .signup { width: min(520px, 100%); max-width: none; margin-top: 12px; align-items: center; }
.cta .signup-row { width: 100%; background: var(--bg); border-color: var(--stroke-strong); }
.cta .signup input, .cta .signup button { height: 44px; }
.cta .signup input::placeholder { color: var(--muted); }
.cta-x { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font: 400 12px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.cta-x svg { width: 12px; height: 12px; fill: currentColor; }
.cta-x:hover { color: var(--text); }

/* ---------- footer ---------- */

/* The same on every public page: the brand and what it is, three columns of links, and a base
   line with the source and the small print. The private design pages keep the slim .footer. */
.foot-main .cell { padding-block: 56px 48px; }
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.foot-brand .brand-name { height: auto; }
.foot-about { margin: 0; max-width: 34ch; font-size: 14px; line-height: 1.55; color: var(--muted); }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.foot-h { margin: 0 0 6px; font: 400 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.foot-col a { font-size: 14px; color: var(--text); text-decoration: none; }
.foot-col a:hover { color: var(--muted); }
.foot-cos { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 24px; }
.foot-col .foot-more { margin-top: 4px; font: 400 11px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.foot-col .foot-more:hover { color: var(--text); }
.foot-base .cell { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 18px; font: 400 11px/1.5 var(--mono); color: var(--muted); }
.foot-base a { color: inherit; }
.foot-base a:hover { color: var(--text); }

.footer .cell { padding-block: 24px; display: flex; align-items: center; }
.footer .brand-name { height: auto; }
.foot-note p { margin: 0; font-size: 13px; color: var(--muted); }
.foot-links { flex-direction: column; align-items: flex-end !important; gap: 4px; font: 400 12px/1.5 var(--mono); }
.foot-links a { text-decoration: none; color: var(--muted); }
.foot-links a:hover { color: var(--text); }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

@media (max-width: 960px) {
  :root { --gutter: max(24px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); --pad: 24px; } /* clear of a notch in landscape */
  .cell { grid-column: span 12; border-left-color: transparent; }
  .cell + .cell { border-top: 1px dotted var(--guide); }
  .cell + .cell::before, .cell + .cell::after { display: none; }
  .nav .cell + .cell, .steps .cell:nth-child(even) { border-left-color: var(--guide); }
  .nav .cell { grid-column: span 6; }
  .nav .cell + .cell { border-top: 0; }
  /* the links leave the middle and take a row of their own under the brand and the buttons */
  html { scroll-padding-top: calc(120px + env(safe-area-inset-top, 0px)); }
  /* solid on phones and tablets: the page scrolls under the header, never shows through it */
  .site-head { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav .cell.nav-links { order: 3; grid-column: 1 / -1; border-left-color: transparent; border-top: 1px dotted var(--guide); padding-block: 11px; gap: 32px; }
  .shot-art { padding: 32px var(--pad) 36px; }
  .shot-copy { padding-block: 36px 28px; }
  .section-head { padding-block: 56px 48px; }
  .steps .cell { grid-column: span 6; }
  .steps .cell:nth-child(2) { border-top: 0; }
  .cta-copy { padding-block: 96px; }
  /* the footer: the brand on a row of its own, then the three columns side by side */
  .foot-main .cell { padding-block: 36px 32px; }
  .foot-main .foot-col { grid-column: span 4; }
  .foot-main .foot-col + .foot-col { border-left-color: var(--guide); }
  .foot-links { align-items: flex-start !important; }
}

@media (max-width: 560px) {
  :root { --gutter: max(12px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); --pad: 20px; }
  body { font-size: 15px; }
  .nav .cell:first-child { grid-column: span 7; }
  .nav .cell:last-child { grid-column: span 5; padding-inline: 12px; }
  html.js .nav-x { display: none; }
  .nav .cell:last-child { justify-content: flex-end; }
  .brand-name { height: auto; }
  .nav-end { gap: 6px; }
  .hero-copy { padding: 64px 16px 88px; gap: 20px; }
  .hero h1 { font-size: 46px; }
  .hero-fig { margin-top: 40px; }
  .selected { --off: 7px; }
  .shot-art { padding: 24px 16px 28px; }
  .steps .cell { grid-column: span 12; }
  .steps .cell:nth-child(even) { border-left-color: transparent; }
  .steps .cell:nth-child(2) { border-top: 1px dotted var(--guide); }
  .signup button { padding: 0 12px; }
  .cta-copy { padding-block: 80px; gap: 20px; }
  .foot-main .foot-col { grid-column: span 12; }
  .foot-main .foot-col + .foot-col { border-left-color: transparent; }
  .foot-base .cell { flex-direction: column; }
}