/* BeargrassAI brand kit · base (drawn from the anchor at 03a45d0). Load after tokens.css.
   The square system and the components. Sections declare their time: data-time="night|dawn|day".
   Motion only under html.m (scripts on, motion allowed); html.js means scripts on. Rule order matters: a page's own
   stylesheet loads after this one and may override any rule here with the same selector. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--canvas); }
.m { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--cream); font: 400 var(--fs-body)/1.6 var(--sans); overflow-x: clip; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg, canvas { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; border-radius: 0; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
[data-time="day"] :focus-visible, .site.day :focus-visible { outline-color: var(--indigo); }
[data-time="day"] .aibox :focus-visible { outline-color: var(--gold-bright); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.nw { white-space: nowrap; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-left: var(--gut); padding-right: var(--gut-r); }
/* One reading column (Mark, 2026-10-26). Section copy and cards live in .wrap.
   On a wide screen that wrap was the full header width, so a short headline sat
   on the left edge while a card in the same section was centered. The first
   screen (.first-copy) stays on the wide measure: its words sit on the picture.
   860px is the card's own measure, so the headline, the paragraph and the card
   share one centered column. */
/* One page container: --max (1240), the same box the header uses. A long line of
   text stays inside --measure so a paragraph does not run the full container.
   --read-x is the container's content edge, for a pinned scene that is not in a .wrap.
   --frame-x is the container's outer edge, for an art panel that must stop there. */
.wrap:not(.first-copy):not(.offers) { max-width: var(--max); }
:root { --read-x: var(--gut); --frame-x: 0px; --measure: 68ch; --h1-cap: 22rem; }
@media (min-width: 900px) {
  :root {
    --frame-x: max(0px, calc((100vw - var(--max)) / 2));
    --read-x: calc(var(--frame-x) + 32px);
    /* The picture takes the right of the container; the words take the left. */
    --hero-art: min(520px, 42vw);
    --hero-copy: min(36rem, calc(100vw - (2 * var(--frame-x)) - var(--hero-art) - 72px));
  }
}

/* Time of day: night is cream on night blue, day is ink on paper; the corner marks follow. */
[data-time="night"] { --cm: rgba(240, 230, 207, 0.62); color: var(--cream); }
[data-time="day"] { --cm: var(--ink); color: var(--ink); }

/* The surveyor's marks: a "+" where lines meet and before a kicker, four L-ticks just outside every button and card. */
.x::before, .eyebrow::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 9px; background: var(--x) center / 9px no-repeat; vertical-align: 0; }
[data-time="day"] .eyebrow::before { background-image: var(--x-ink); }
.cm { position: relative; }
.cm::before { content: ""; position: absolute; inset: calc(-1 * var(--cm-off)); z-index: 1; pointer-events: none; --a: var(--cmt, var(--cm)); --b: var(--cmb, var(--cm));
  background: linear-gradient(var(--a), var(--a)) 0 0 / var(--cm-len) var(--hair), linear-gradient(var(--a), var(--a)) 0 0 / var(--hair) var(--cm-len),
    linear-gradient(var(--a), var(--a)) 100% 0 / var(--cm-len) var(--hair), linear-gradient(var(--a), var(--a)) 100% 0 / var(--hair) var(--cm-len),
    linear-gradient(var(--b), var(--b)) 0 100% / var(--cm-len) var(--hair), linear-gradient(var(--b), var(--b)) 0 100% / var(--hair) var(--cm-len),
    linear-gradient(var(--b), var(--b)) 100% 100% / var(--cm-len) var(--hair), linear-gradient(var(--b), var(--b)) 100% 100% / var(--hair) var(--cm-len);
  background-repeat: no-repeat; }

/* Type: Libre Caslon for display, Archivo for reading and labels, IBM Plex Mono for anything a reader could check. */
.eyebrow { font: 500 var(--fs-kicker)/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-2); }
h1, h2, .lines li, .card-name, .ask, .finding, .pull, .aibox h3, .record-say, .bench, .sg-k { font-family: var(--display); font-weight: 400; letter-spacing: -0.005em; }
h1, h2, .lines li, .card-name, .ask, .finding, .pull, .aibox h3 { text-wrap: balance; }
h1 { font-size: var(--fs-h1); text-wrap: balance; }
h2 { font-size: var(--fs-h2); line-height: 1.04; margin-top: 12px; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.012em; }
/* First-screen headline (Mark, 2026-10-26). Fluid, about two to four lines, and a
   nowrap phrase stays inside the column. Specificity beats a page's own h1 size. */
html body .first h1,
html body .first-in h1,
html body .first-copy h1,
html body #h1 {
  font-size: var(--fs-h1);
  width: auto;
  max-width: min(22rem, 100%);
  text-wrap: balance;
  line-height: 1.05;
}
@media (min-width: 900px) {
  html body .first h1,
  html body .first-in h1,
  html body .first-copy h1,
  html body #h1 {
    font-size: clamp(32px, 2.2vw, 52px);
    width: auto;
    max-width: min(var(--h1-cap), var(--hero-copy), calc(var(--max) - var(--hero-art) - 96px), 100%);
  }
}
/* At 1920 and 2560 the 22rem cap wrapped a short headline into a narrow stack with a
   gap before the picture. 36rem lets it use the left of the column; the picture still
   keeps its own width on the right (2026-10-26, BEA-432). */
@media (min-width: 1800px) {
  :root { --h1-cap: 36rem; }
}

/* The hero. One pattern for every page: eyebrow, headline, body, buttons, art panel, coordinate ticks.
   Measured from About at 1440×900 on preview.30 (v1.1, 2026-10-26). From 1024 up the art's left edge
   stays in the 1240 column and its right edge is the window. Below 1024 the picture fills the hero
   and the words sit over it. A page sets copy, image, --hero-focus and dark or light ground. */
.hero { position: relative; height: 100vh; height: var(--hero-h); min-height: var(--hero-narrow-min); max-height: var(--hero-h-max); background: var(--canvas); color: var(--cream); overflow: hidden; }
.hero[data-ground="light"] { background: var(--paper); color: var(--ink); }
.hero[data-ground="light"] .hero-art::after { background: linear-gradient(180deg, rgba(244, 235, 215, 0.94) 0%, rgba(244, 235, 215, 0.86) 16%, rgba(244, 235, 215, 0.68) 30%, rgba(244, 235, 215, 0.22) 44%, rgba(244, 235, 215, 0.08) 52%, rgba(244, 235, 215, 0.62) 66%, rgba(244, 235, 215, 0.88) 80%, rgba(244, 235, 215, 0.96) 100%); }
html body .hero[data-ground="light"] #h1,
.hero[data-ground="light"] .lead,
.hero[data-ground="light"] .eyebrow,
.hero[data-ground="light"] .more,
.hero[data-ground="light"] .coords { color: var(--ink); }
.hero[data-ground="light"] .more { text-decoration-color: rgba(35, 31, 26, 0.45); }
.hero:not([data-ground="light"]) .hero-ticks .x:last-child { padding: 1px 7px; background: rgba(10, 16, 36, 0.78); box-shadow: 0 0 0 5px rgba(10, 16, 36, 0.5); }
.hero[data-ground="light"] .hero-ticks .x:last-child { padding: 1px 7px; background: rgba(244, 235, 215, 0.88); box-shadow: 0 0 0 5px rgba(244, 235, 215, 0.62); }
.hero::before { content: ""; position: absolute; z-index: 6; left: 0; right: 0; top: 0; height: 160px; pointer-events: none; background: var(--hero-top-scrim); }
.hero[data-ground="light"]::before { background: var(--hero-top-scrim-light); }
.hero-art { position: absolute; inset: 0; }
.hero-art picture { display: contents; }
.hero-art > picture > img,
.hero-art > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--hero-narrow-focus); }
.hero-art::after { content: ""; position: absolute; z-index: 5; inset: 0; pointer-events: none; background: var(--hero-narrow-scrim); }
.hero-art .glow { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-in { position: absolute; z-index: 4; inset: 0; display: flex; flex-direction: column; padding: var(--hero-narrow-pad-top) var(--hero-narrow-pad-x) var(--hero-narrow-pad-bottom); }
.hero-copy { display: flex; flex-direction: column; flex: 1; width: 100%; min-height: 0; }
.hero .first-low { margin-top: auto; }
.hero .eyebrow { width: fit-content; color: var(--cream); }
.hero .lead { max-width: 34ch; font-size: var(--hero-narrow-lead); line-height: 1.45; color: var(--cream); }
.hero .actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; margin-top: 22px; }
.hero .actions .btn { min-width: 132px; }
.hero-ticks { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }
html body .hero #h1 { margin-top: 14px; color: var(--white); font-size: var(--hero-narrow-h1); line-height: 1; width: auto; max-width: none; }
@media (min-width: 600px) and (max-width: 1023px) { .hero .lead { font-size: var(--hero-tablet-lead); } }
@media (max-width: 360px) {
  .hero .lead { font-size: 16px; line-height: 1.42; }
  .hero .actions { gap: 10px 16px; margin-top: 16px; }
  .hero .actions .btn { min-width: 108px; padding-left: 18px; padding-right: 18px; }
  .hero .actions .more { font-size: 15px; gap: 7px; }
  .hero-ticks { margin-top: 14px; font-size: 11px; }
}
@media (max-height: 760px) and (max-width: 1023px) {
  .hero-in { padding-top: 72px; padding-bottom: 12px; }
  html body .hero #h1 { margin-top: 10px; }
  .hero .lead { font-size: 16.5px; line-height: 1.42; }
  .hero .actions { margin-top: 16px; }
  .hero-ticks { margin-top: 14px; }
}
@media (min-width: 1024px) {
  .hero { min-height: var(--hero-h-min); }
  .hero-art { top: 0; bottom: 0; right: 0; left: calc(max(0px, (100% - var(--hero-col)) / 2) + (var(--hero-art-left) * min(100%, var(--hero-col)))); }
  .hero-art::after { content: none; }
  .hero-art > picture > img,
  .hero-art > img { object-position: var(--hero-focus, 50% 50%); -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.5) var(--hero-fade-mid), #000 var(--hero-fade)); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.5) var(--hero-fade-mid), #000 var(--hero-fade)); }
  .hero-in { inset: auto; top: 0; bottom: 0; left: 0; right: 0; width: 100%; max-width: var(--hero-col); height: 100%; margin-inline: auto; justify-content: center; padding: 0 32px; }
  .hero-copy { flex: none; width: min(100%, var(--hero-text-w)); }
  .hero .first-low { margin-top: 28px; }
  .hero-ticks { position: absolute; left: 32px; right: 32px; bottom: 26px; margin-top: 0; }
  .hero .lead { font-size: 20px; }
  html body .hero #h1 { font-size: var(--hero-h1); max-width: var(--hero-h1-measure); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero { --hero-fade: 48%; --hero-fade-mid: 22%; }
}
/* A scene picture below the hero, on the same footing as the hero picture: to the window's right edge, fading in from the left. */
@media (min-width: 900px) {
  .edge-art.art-img, .edge-art.pic {
    --edge-left: calc(max(0px, (100% - var(--hero-col)) / 2) + (var(--hero-art-left) * min(100%, var(--hero-col))));
    position: absolute; top: 0; bottom: 0; right: auto; height: 100%; max-width: none; aspect-ratio: auto;
    left: var(--edge-left); width: calc(100% - var(--edge-left)); min-width: 0; object-fit: cover;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.5) var(--hero-fade-mid), #000 var(--hero-fade));
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.5) var(--hero-fade-mid), #000 var(--hero-fade));
  }
  .edge-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
}
/* A full-hero canvas (stars, contours) sits under the words. Named overlays stay inside the art panel. */
.hero-art { z-index: 1; }
.hero > canvas { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; }
html body .hero > .ask4 { position: absolute; z-index: 3; left: 50%; top: 46%; width: min(440px, calc(100% - 24px)); height: auto; margin: 0; padding: 0; transform: translate(-50%, -50%); pointer-events: none; }
@media (max-width: 1023px) { html body .hero > .ask4 { display: none; } }
html body .hero > .ask4 .tl4 { container-type: inline-size; }
html body .hero > .ask4 .tl4 li { font-size: clamp(7px, 2.55cqw, 12px); }
html body .hero > .plat { position: absolute; z-index: 3; margin: 0; pointer-events: none; }
@media (max-width: 1023px) {
  html body .hero > .plat .held { position: absolute; inset: auto 16px 24% auto; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; width: max-content; height: auto; margin: 0; }
  html body .hero > .plat .held li { position: relative !important; left: auto !important; top: auto !important; visibility: visible !important; width: min(168px, 44vw); margin: 0; }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  html body .hero > .plat .held { position: absolute; inset: auto 20px auto auto; top: 22%; display: flex; flex-direction: column; gap: 12px; width: max-content; height: auto; margin: 0; }
  html body .hero > .plat .held li { position: relative !important; left: auto !important; top: auto !important; visibility: visible !important; width: 168px; margin: 0; }
}
html body .hero > .first-pic { z-index: 3; }
html body .hero .hero-art > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Buttons: square and tight, the label at Archivo's widest. Barn red is the one action on a screen; the rest are outlined. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 22px; border: 1px solid transparent; font: 600 var(--fs-button)/1 var(--sans); font-stretch: 125%; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn-barn { background: var(--barn); color: #fff8ea; }
.btn-barn:hover { background: #b65543; }
.btn-line { border-color: rgba(240, 230, 207, 0.72); color: var(--cream); background: rgba(10, 16, 36, 0.38); }
.btn-line:hover { border-color: var(--cream); }
[data-time="day"] .btn-barn { --cm: var(--ink); }

/* Square form inputs, for Start and Talk to us. Wrap one in .cm for its corner marks. */
.field { display: block; width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid var(--ink-2); border-radius: 0; background: var(--paper-hi); color: var(--ink); font: 400 16px/1.4 var(--sans); }
.field:focus-visible { outline-offset: 2px; }
/* A form that sends (send.js): the button while it sends, and the note when the message did not go, with another way to
   reach Mark. The note is hidden until send.js shows it. */
.btn[aria-busy="true"] { opacity: 0.72; cursor: progress; }
.unsent { margin-top: 14px; padding: 10px 12px 11px 14px; border-left: 3px solid var(--barn); background: rgba(166, 75, 59, 0.07); color: var(--ink); font: 500 14.5px/1.5 var(--sans); outline: none; overflow-wrap: anywhere; }
.unsent[hidden] { display: none; }
.unsent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.unsent a[href^="tel:"] { white-space: nowrap; }

/* The header: transparent over the night, solid paper once the page reaches day (motion/core.js sets .bar, .day, .hide). */
.site { position: absolute; top: 0; left: 0; right: 0; z-index: 40; padding-top: env(safe-area-inset-top, 0px); }
.site-in { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; min-height: 64px; padding: 8px var(--gut-r) 8px var(--gut); max-width: var(--max); margin: 0 auto; }
.mark { display: block; padding: 9px 0; margin-right: auto; }
.mark img { height: 24px; width: auto; }
.mk-day { display: none; }
.start { order: 2; min-height: 44px; padding: 10px 16px; font-size: 12px; }
.nav { order: 3; width: 100%; }
.nav-list { display: flex; flex-wrap: wrap; gap: 0 20px; }
.nav-list a { display: inline-flex; align-items: center; min-height: 44px; font: 500 15px/1 var(--sans); text-decoration: none; color: var(--cream); }
.nav-list a:hover { text-decoration: underline; }
.menu { display: none; }
.js .site { position: fixed; transition: transform 0.38s ease, background-color 0.3s ease, box-shadow 0.3s ease; }
.js .site.hide { transform: translateY(-110%); }
.js .site.bar { background: rgba(10, 16, 36, 0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--rule); }
.js .site.bar.day { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 rgba(35, 31, 26, 0.3); }
.site.day { --cm: var(--ink); }
.site.day .mk-night { display: none; }
.site.day .mk-day { display: block; }
.site.day .nav-list a, .site.day .btn-line, .site.day .menu { color: var(--ink); }
.site.day .btn-line, .site.day .menu { border-color: var(--ink); background: transparent; }
.js .nav { order: 3; width: auto; position: relative; }
.js .menu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(240, 230, 207, 0.72); background: rgba(10, 16, 36, 0.38); color: var(--cream); cursor: pointer; }
.js .nav-list { display: none; position: absolute; right: 0; top: 54px; min-width: 220px; flex-direction: column; padding: 6px 0; background: rgba(10, 16, 36, 0.97); border: 1px solid var(--rule); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.7); }
.js .nav-list.open { display: flex; }
.js .nav-list a { width: 100%; padding: 0 18px; min-height: 48px; }
/* The phone menu's box turns to paper by day; on a laptop the links sit in the header row with no box. */
@media (max-width: 899px) { .site.day .nav-list { background: var(--paper-hi); border-color: rgba(35, 31, 26, 0.3); } }
/* Phones: the header stays one row (wordmark, Start, menu) at every width, down to a page zoomed to about
   280px wide (BGA 55, 2026-10-24: at 125% page zoom an iPhone gives the page about 314px and the menu wrapped
   over the first screen). From 390px up nothing changes; below it the wordmark, Start and the gaps narrow. */
@media (max-width: 899px) {
  .js .site-in { flex-wrap: nowrap; }
  .mark { min-width: 0; }
  .start { white-space: nowrap; }
}
@media (max-width: 389px) {
  .mark img { width: clamp(96px, 32.6vw, 127px); height: auto; }
  .start { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 340px) {
  .site-in { column-gap: 10px; }
  .start { padding-left: 10px; padding-right: 10px; }
}
/* One headline size for every page (BGA 55): on a short phone the headline steps down once, as D's always has. */
@media (max-height: 760px) and (max-width: 899px) {
  h1 { font-size: clamp(42px, 13.4vw, 64px); }
}

/* A canvas that covers its section; a quiet text link with an arrow; the coordinates line. */
.sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.more { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font: 600 16px/1 var(--sans); color: var(--cream); text-decoration: underline; text-underline-offset: 7px; text-decoration-color: rgba(240, 230, 207, 0.5); }
.more:hover { text-decoration-color: var(--cream); }
.coords { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; min-width: 0; max-width: 100%; font: 500 12px/1.3 var(--mono); letter-spacing: 0; color: var(--cream-2); font-variant-numeric: tabular-nums; }
.coords > * { min-width: 0; }

/* tiles-light: the township, 36 sections numbered in the survey's snake. They light in number order, then settle. */
.twp { --tl: rgba(240, 230, 207, 0.32); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--tl); border-left: 1px solid var(--tl); opacity: 0.5; }
.twp i { position: relative; z-index: 0; border-right: 1px solid var(--tl); border-bottom: 1px solid var(--tl); padding: 5px 6px; font: 500 9.5px/1 var(--mono); font-style: normal; letter-spacing: 0.02em; color: rgba(240, 230, 207, 0.86); }
.twp i::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(244, 196, 90, 0.34); box-shadow: inset 0 0 0 1px rgba(244, 196, 90, 0.9), 0 0 22px rgba(244, 196, 90, 0.28); opacity: 0; }
.twp i::after { content: ""; position: absolute; inset: -5.5px; pointer-events: none; background: var(--x) 0 0 / 11px no-repeat, var(--x) 100% 0 / 11px no-repeat, var(--x) 0 100% / 11px no-repeat, var(--x) 100% 100% / 11px no-repeat; }
.m .twp { opacity: 1; }
.m .twp.run { animation: settle 1.2s ease-in-out 1.6s both; }
.m .twp.run i::before { animation: lit 0.8s ease-out calc(var(--d, 0) * 42ms) both; }
@keyframes settle { from { opacity: 1; } to { opacity: 0.5; } }
@keyframes lit { 0% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: 0; } }

/* An offer tile: square, hairline, the price in mono. */
.offer { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; row-gap: 6px; min-width: 0; padding: 16px 16px 17px; border: 1px solid var(--rule); background: rgba(22, 33, 52, 0.5); scroll-margin-top: 90px; }
.offer strong { font: 600 18px/1.3 var(--sans); color: var(--white); min-width: 0; }
.offer .price { font: 500 13px/1.6 var(--mono); color: var(--cream); white-space: normal; }
.offer .say { font-size: 15.5px; line-height: 1.5; color: var(--cream-2); min-width: 0; }

/* The scroll scene (fall-and-land, feed-record, brand-burn, write-out): a still composition first, for scripts off
   and reduced motion. The step lines, the record of facts, its brand, its code, and the four tools. */
.track { position: relative; }
.stage { position: relative; padding: 64px 0 40px; }
.lines-box { position: relative; z-index: 3; width: min(100% - 32px, 760px); margin: 0 auto; }
.lines { display: grid; gap: 14px; counter-reset: s; }
.lines li { position: relative; font-size: clamp(27px, 7.4vw, 44px); line-height: 1.12; color: var(--white); padding-left: 46px; }
.lines li::before { counter-increment: s; content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 0.4em; width: 30px; height: 26px; border: 1px solid rgba(244, 196, 90, 0.7); font: 500 12px/24px var(--mono); text-align: center; color: var(--gold-bright); }
.ticks, .frags { display: none; }
.rec { position: relative; z-index: 2; display: grid; width: min(100% - 32px, 560px); margin: 36px auto 0; background: var(--glass); border: 1px solid rgba(244, 196, 90, 0.5); --cm: rgba(244, 196, 90, 0.8); }
.m .rec { border-color: var(--rule); --cm: rgba(240, 230, 207, 0.55); transition: border-color 0.5s ease; }
.m .rec.confirmed { border-color: rgba(244, 196, 90, 0.6); --cm: rgba(244, 196, 90, 0.85); }
.m .rec-face { grid-area: 1 / 1; }
.rec-lines { padding: 16px 16px 14px; }
.rec dl { display: grid; gap: 9px; }
.rl { display: grid; gap: 1px; }
.rl dt { font: 500 10px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-2); }
.rl dd { position: relative; font-size: 14px; line-height: 1.45; color: var(--cream); }
.rl dd.rec-name { font: 400 27px/1.1 var(--display); color: var(--white); padding-right: 74px; }
.rl dd .sep { color: var(--cream-2); font-style: normal; }
.rl dd .who { font-weight: 600; color: var(--white); }
.m2, .spark { display: none; }
.jsonld { margin: 0; min-width: 0; max-width: 100%; padding: 16px; border-top: 1px solid var(--rule); font: 400 12px/1.6 var(--mono); color: var(--cream); white-space: pre-wrap; overflow-wrap: anywhere; }
.jsonld .jl { display: block; min-width: 0; max-width: 100%; padding-left: 4ch; text-indent: -4ch; overflow-wrap: anywhere; }
.jsonld em, .jsonld i, .jsonld b { overflow-wrap: anywhere; white-space: pre-wrap; }
.jsonld em { display: inline-block; max-width: 100%; vertical-align: top; }
.jsonld .i2 { padding-left: 6ch; text-indent: -6ch; }
.jsonld b { font-weight: 400; color: var(--cream); }
.jsonld em { font-style: normal; color: var(--gold-bright); }

/* brand-burn: the Box V (marks/box-v.svg) as iron strokes, layered for heat, mark, ember and the cooled burn. */
.brand { position: absolute; top: 12px; right: 14px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; }
.iron { width: 54px; height: 54px; overflow: visible; }
.iron use { fill: none; stroke-width: 9; }
.b-glow { color: var(--gold-bright); stroke-width: 15 !important; filter: url(#f-glow); opacity: 0; }
.b-hot { color: #fff3cf; opacity: 0; }
.b-cool { color: #d18c3c; opacity: 1; }
.b-char { color: #6b4a2e; stroke-width: 15 !important; filter: url(#f-glow); opacity: 0.3; }
.b-ember { color: #c4502a; opacity: 0; }
.b-scorch { color: #3a2719; filter: url(#f-sear); opacity: 1; }
.b-label { font: 500 10px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-bright); text-align: right; white-space: nowrap; }
.b-label.b-night { text-transform: none; letter-spacing: 0.02em; font-size: 10.5px; }
.fx { display: none; }
.tools { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: min(100% - 24px, 640px); margin: 0 auto; padding-top: 52px; }
html:not(.m) .tools::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 26px; height: 26px; border: 2px dotted rgba(244, 196, 90, 0.85); border-bottom: 0; }
html:not(.m) .tools::after { content: ""; position: absolute; left: 50%; top: 0; height: 26px; border-left: 2px dotted rgba(244, 196, 90, 0.85); }
.tools li { font: 500 12px/1 var(--mono); text-align: center; padding: 13px 2px; border: 1px solid rgba(244, 196, 90, 0.75); color: var(--gold-bright); background: rgba(10, 16, 36, 0.82); white-space: nowrap; }

/* The scroll scene in motion: a tall track and a sticky stage. The words stay put; the work happens around them. */
.m .track { height: 620vh; }
.m .stage { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; overflow: hidden; }
.m .lines-box { position: absolute; left: 50%; top: 70px; width: min(100% - 40px, 880px); height: 122px; margin: 0; transform: translateX(-50%); }
.m .lines-box::before { content: ""; position: absolute; inset: -30px -22px; background: radial-gradient(closest-side, rgba(10, 16, 36, 0.78), rgba(10, 16, 36, 0)); pointer-events: none; }
.m .lines { display: block; position: absolute; inset: 0; }
.m .lines li { position: absolute; inset: 0 0 18px; display: grid; place-items: center; text-align: center; padding: 0; opacity: 0; font-size: clamp(28px, 7.6vw, 50px); text-shadow: 0 2px 24px rgba(10, 16, 36, 0.9); }
.m .lines li::before { content: none; }
.m .ticks { display: flex; justify-content: center; gap: 6px; position: absolute; left: 0; right: 0; bottom: 0; }
.m .ticks i { width: 22px; height: 3px; background: rgba(240, 230, 207, 0.22); transition: background-color 0.3s; }
.m .ticks i.on { background: var(--gold-bright); }
.m .frags { display: block; position: absolute; inset: 0; pointer-events: none; }
.frag { position: absolute; left: 0; top: 0; z-index: 5; padding: 5px 8px 6px 9px; transform-origin: 0 50%; white-space: nowrap; will-change: transform, opacity; opacity: 0; background: rgba(12, 19, 38, 0.9); border: 1px solid rgba(244, 196, 90, 0.36); }
.frag::before { content: ""; position: absolute; left: -3px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; background: var(--gold-bright); }
.frag .gl { position: absolute; inset: -1px; border: 1px solid rgba(244, 196, 90, 0.95); box-shadow: 0 0 16px rgba(244, 196, 90, 0.35); opacity: 0; }
.frag .t { position: relative; display: block; font: 400 12px/1.35 var(--mono); color: var(--cream); }
.frag small { position: relative; display: block; font: 400 8.5px/1.3 var(--mono); letter-spacing: 0.02em; color: #b8b0a0; margin-top: 2px; }
.frag small[hidden] { display: none; }
/* fall-and-land on a phone too small for its facts: a pixel less inside each, so rows keep a gap (2026-10-24) */
.frags.tight .frag { padding: 4px 7px 4px 8px; }
.frags.tight .frag .t { line-height: 1.25; }
.frag.echo { background: transparent; border-style: dashed; border-color: rgba(240, 230, 207, 0.3); }
.frag.echo::before, .frag.echo small { display: none; }
.frag.echo .t { color: #cfc6b0; }
.m .rec { position: absolute; left: 50%; top: 214px; margin: 0; width: min(100% - 32px, 520px); transform-origin: 50% 0; opacity: 0; will-change: transform, opacity; }
.m .jsonld { border-top: 0; align-self: center; opacity: 0; }
.m .rec [data-f], .m .rec .sep, .m .rl dt { opacity: 0; }
.m .jsonld .jl { opacity: 0; }
.m .m2 { display: block; position: absolute; left: 0; top: 0; font: 500 12px/1.6 var(--mono); color: var(--gold-bright); white-space: nowrap; opacity: 0; pointer-events: none; }
.m .spark { display: block; position: absolute; left: -22px; top: -20px; width: 60px; height: 60px; background: radial-gradient(closest-side, rgba(255, 246, 220, 0.95), rgba(244, 196, 90, 0.55) 34%, rgba(244, 196, 90, 0)); opacity: 0; pointer-events: none; }
.m .brand-night .b-glow, .m .brand-night .b-hot, .m .brand-night .b-cool, .m .brand-night .b-label { opacity: 0; }
.m .fx { display: block; position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
.m .tools { position: absolute; left: 12px; right: 12px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); width: auto; margin: 0; padding: 0; }
.m .tools li { border-color: rgba(240, 230, 207, 0.24); color: var(--cream-2); opacity: 0; transition: border-color 0.35s, color 0.35s, box-shadow 0.35s; }
.m .tools li.lit { border-color: var(--gold-bright); color: var(--gold-bright); box-shadow: 0 0 22px rgba(244, 196, 90, 0.32); }
/* Under 390px "Perplexity" sat 1.5 to 3.9px from its cell's border (BGA 55; 2026-10-24): 5px or more now */
@media (max-width: 389px) {
  .tools { gap: 5px; width: min(100% - 20px, 640px); }
  .m .tools { left: 10px; right: 10px; }
  .tools li { font-size: min(12px, 3.1vw); letter-spacing: -0.01em; padding-left: 0; padding-right: 0; }
}

/* sunrise-wipe and the record card: night glass while the sky is dark, cardstock once day comes. */
.dawn { position: relative; overflow: hidden; padding: 16px 0 64px; background: var(--dawn); }
.dawn-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sun { position: absolute; left: 50%; top: 58%; width: 520px; height: 520px; margin: -260px 0 0 -260px; background: radial-gradient(closest-side, rgba(255, 236, 178, 0.95), rgba(244, 196, 90, 0.55) 22%, rgba(244, 196, 90, 0.18) 48%, rgba(244, 196, 90, 0) 72%); pointer-events: none; will-change: transform; }
.card-wrap { position: relative; z-index: 2; }
.card-c { max-width: 980px; margin: 0 auto; --cmt: rgba(240, 230, 207, 0.85); --cmb: var(--ink); }
.card { position: relative; overflow: hidden; background: var(--paper-hi); border: 1px solid rgba(35, 31, 26, 0.3); box-shadow: 0 40px 80px -40px rgba(35, 31, 26, 0.65); }
.face { position: relative; }
.face-day { background: var(--paper-hi); }
.photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #c9bfa8; border-bottom: 1px solid rgba(35, 31, 26, 0.3); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 18px 18px 20px; color: var(--ink); }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-name { font-size: clamp(32px, 8.6vw, 46px); line-height: 1.02; margin-top: 2px; }
.card-cat { font: 600 15px/1.4 var(--sans); color: var(--ink-2); margin-top: 6px; }
.brand-day { position: relative; top: auto; right: auto; flex: 0 0 auto; align-items: center; margin: 0 0 8px; }
.brand-day .iron { width: 62px; height: 62px; }
.brand-day .b-label { color: var(--gold-ink); font-size: 10px; display: grid; gap: 1px; text-align: center; }
.brand-day .b-word { letter-spacing: 0.16em; font-size: 10.5px; font-weight: 600; }
.card-dates { display: grid; gap: 3px; margin-top: 14px; padding: 11px 0; border-top: 1px solid var(--rule-ink); border-bottom: 1px solid var(--rule-ink); font: 400 12.5px/1.5 var(--mono); color: var(--ink-2); }
.card-dates .conf { color: var(--gold-ink); }
.card-contact { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 8px; font: 500 14.5px/1.5 var(--mono); }
.card-contact a, .card-contact span { color: var(--ink); display: inline-flex; align-items: center; min-height: 44px; }
.card-list { margin-top: 10px; }
.card-list h4 { font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.chips li { font-size: 14px; line-height: 1.3; padding: 5px 9px; background: rgba(35, 31, 26, 0.04); border: 1px solid rgba(35, 31, 26, 0.2); color: var(--ink); }
.card-founder { margin-top: 3px; font: 600 17px/1.4 var(--sans); color: var(--ink); }
.offer-list { display: grid; margin-top: 4px; }
.offer-list li { position: relative; padding: 8px 0 8px 18px; font-size: 15px; line-height: 1.45; color: var(--ink); border-top: 1px solid var(--rule-ink); }
.offer-list li:first-child { border-top: 0; }
.offer-list li::before { content: ""; position: absolute; left: 1px; top: 15px; width: 6px; height: 6px; border: 1px solid var(--ink-2); }
.card-checks { margin-top: 16px; font: 500 12.5px/1.5 var(--mono); color: var(--ink-2); display: flex; align-items: center; gap: 9px; }
.card-checks::before { content: ""; width: 9px; height: 9px; background: var(--olive); box-shadow: 0 0 0 3px rgba(133, 145, 96, 0.22); flex: 0 0 auto; }
.face-night { position: absolute; inset: 0; z-index: 1; background: rgba(11, 18, 37, 0.95); color: var(--cream); }
.face-night .card-body, .face-night .card-name, .face-night .chips li, .face-night .card-contact span, .face-night .card-founder, .face-night .offer-list li { color: var(--cream); }
.face-night .offer-list li { border-color: var(--rule); }
.face-night .offer-list li::before { border-color: var(--cream-2); }
.face-night .card-cat, .face-night .card-dates, .face-night .card-list h4, .face-night .card-checks { color: var(--cream-2); }
.face-night .card-dates { border-color: var(--rule); }
.face-night .card-dates .conf { color: var(--gold-bright); }
.face-night .chips li { background: rgba(240, 230, 207, 0.06); border-color: rgba(240, 230, 207, 0.2); }
.face-night .photo img { filter: brightness(0.5) saturate(0.7) hue-rotate(-12deg); }
.wipe-o { position: relative; z-index: 2; overflow: hidden; will-change: transform; }
.wipe-i { will-change: transform; }
.edge { position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 4; pointer-events: none; opacity: 0; will-change: transform, opacity; background: linear-gradient(90deg, rgba(244, 196, 90, 0), var(--gold-bright) 22%, #fff1c2 50%, var(--gold-bright) 78%, rgba(244, 196, 90, 0)); box-shadow: 0 14px 26px 2px rgba(244, 196, 90, 0.42); }

/* The burn, once: heat, the mark, then it cools to a dark scorch with a seared edge. Opacity and a small press only. */
.m .brand-day .b-char, .m .brand-day .b-glow, .m .brand-day .b-hot, .m .brand-day .b-ember, .m .brand-day .b-scorch, .m .brand-day .b-label { opacity: 0; }
.m .brand-day.burn .iron { animation: press 2.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.m .brand-day.burn .b-glow { animation: glow 2.6s ease-out both; }
.m .brand-day.burn .b-hot { animation: hot 2.6s ease-out both; }
.m .brand-day.burn .b-ember { animation: ember 2.6s ease-out both; }
.m .brand-day.burn .b-scorch { animation: scorch 2.6s ease-out both; }
.m .brand-day.burn .b-char { animation: char 2.6s ease-out both; }
.m .brand-day.burn .b-label { animation: label 2.6s ease-out both; }
@keyframes press { 0% { transform: scale(1.14); } 12% { transform: scale(0.97); } 22%, 100% { transform: scale(1); } }
@keyframes glow { 0% { opacity: 0; } 8% { opacity: 1; } 34% { opacity: 0.85; } 70%, 100% { opacity: 0; } }
@keyframes hot { 0% { opacity: 0; } 7% { opacity: 1; } 26% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes ember { 0%, 18% { opacity: 0; } 34% { opacity: 1; } 58% { opacity: 0.55; } 80%, 100% { opacity: 0; } }
@keyframes scorch { 0%, 30% { opacity: 0; } 70%, 100% { opacity: 1; } }
@keyframes char { 0%, 20% { opacity: 0; } 60%, 100% { opacity: 0.3; } }
@keyframes label { 0%, 55% { opacity: 0; } 85%, 100% { opacity: 1; } }

/* contour-drift: paper with olive contours drawn in code, under day sections. */
.day { position: relative; background: var(--paper); color: var(--ink); --cm: var(--ink); overflow: hidden; }
/* The header takes .day too when the page turns to day; its menu drops below it, so the header never clips. */
.site.day { overflow: visible; }
.topo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
[data-time="day"] .eyebrow { color: var(--ink-2); }

/* trail-light, benchmark and meter: the sample label, the topographic map, its signs and findings. */
.sample { display: inline-block; margin-top: 18px; padding: 9px 13px 10px; border: 1px solid var(--ink); font: 500 13.5px/1.45 var(--mono); color: var(--ink); background: var(--paper-hi); }
.board { margin-top: 28px; display: grid; gap: 24px; }
.map { position: relative; border: 1px solid var(--ink-2); background: rgba(250, 245, 234, 0.5); }
.map-art { display: none; }
.trailhead { position: relative; z-index: 2; margin: 14px; padding: 16px 16px 17px; background: var(--paper-hi); border: 1px solid var(--ink-2); }
.ask { font-size: clamp(23px, 6.2vw, 32px); line-height: 1.15; color: var(--ink); }
.times { margin-top: 10px; font: 400 13.5px/1.55 var(--mono); color: var(--ink-2); }
.disk { width: 64px; height: 64px; margin: 0 auto 18px; overflow: visible; }
.d-shadow { fill: rgba(35, 31, 26, 0.18); }
.d-face { stroke: #8a6230; stroke-width: 1; }
.d-ring { fill: none; stroke: rgba(35, 31, 26, 0.55); stroke-width: 1; }
.d-ticks, .d-mark { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.d-tri { fill: var(--ink); }
.d-txt { font: 700 10px var(--sans); font-stretch: 125%; letter-spacing: 0.22em; fill: var(--ink); text-anchor: middle; }
.signs { display: none; }
.finds { display: grid; gap: 22px; }
.find { padding: 18px 18px 20px; background: var(--paper-hi); border: 1px solid var(--ink-2); }
.fd-h { font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.finding { margin-top: 10px; font-size: clamp(26px, 6.8vw, 36px); line-height: 1.12; color: var(--ink); max-width: 20ch; }
.finding .n { font: 400 0.74em/1 var(--mono); letter-spacing: -0.02em; white-space: nowrap; }
.meter { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; }
.meter i { width: 15px; height: 15px; border: 1px solid var(--ink-2); }
.meter i.on { background: var(--ink); }
.meter.alt i { border-color: var(--ink-3); }
.meter.alt i.on { background: var(--ink-3); }
.meter.old i.on { background: repeating-linear-gradient(135deg, var(--barn) 0 2px, transparent 2px 4px); border-color: var(--barn); }
.meter-k { margin-top: 14px; font: 500 11px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.meter-k + .meter { margin-top: 6px; }
.move-k { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--rule-ink); font: 600 11px/1.4 var(--sans); font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.move { margin: 6px 0 18px; font: 600 19px/1.38 var(--sans); color: var(--ink); max-width: 30ch; }
.bench { margin-top: 36px; font-size: clamp(24px, 6vw, 34px); line-height: 1.2; color: var(--ink); }
.js .map { min-height: 560px; }
.js .map-art { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.js .disk { position: absolute; z-index: 2; left: 50%; top: 0; margin: 0 0 0 -32px; }
.js .signs { display: block; }
.js .sign { position: absolute; z-index: 3; display: grid; align-content: center; gap: 3px; width: min(42%, 230px); min-height: 70px; padding: 10px 12px 11px; text-align: left; color: var(--ink); background: var(--paper-hi); border: 1px solid var(--ink); cursor: pointer; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; -webkit-tap-highlight-color: transparent; }
.js .sign:hover { background: #fffaf0; }
.js .sign[aria-expanded="true"] { background: var(--ink); color: var(--paper-hi); box-shadow: inset 0 -3px 0 var(--gold-bright); }
.sg-k { font-size: 22px; line-height: 1.05; }
.sg-q { font: 500 14px/1.3 var(--sans); }
.js .find[hidden] { display: none; }
/* trail-light walked by scroll: the map holds still while the findings go by (a day that holds it clips, not hides,
   so the map can stick) */
.day:has(.walk) { overflow: clip; }
.walk .map { position: sticky; z-index: 4; align-self: start; }
.walk.stack .map { background: var(--paper); }
.walk .find { transition: opacity 0.3s; }
.walk .find:not(.on) { opacity: 0.5; }
.js .walk .sign.on { background: var(--ink); color: var(--paper-hi); box-shadow: inset 0 -3px 0 var(--gold-bright); }
.js .walk .sign.walked { box-shadow: inset 0 -3px 0 var(--gold); }

/* Reading: prose in Archivo, pull lines in Caslon. night-panel: the AI box, the one piece of night left in the day. */
.prose { margin-top: 26px; display: grid; gap: 18px; }
.prose p { font-size: var(--fs-prose); line-height: 1.65; color: var(--ink); max-width: 62ch; }
.prose .pull { font-size: var(--fs-pull); line-height: 1.2; max-width: 24ch; }
.prose p:not(.pull) + .pull { margin-top: 12px; padding-top: 22px; border-top: 1px solid rgba(35, 31, 26, 0.3); }
.aibox { margin-top: 54px; padding: 24px 20px 22px; background: linear-gradient(180deg, var(--night-2), var(--night)); color: var(--cream); border: 1px solid rgba(35, 31, 26, 0.5); box-shadow: 0 30px 60px -34px rgba(10, 16, 36, 0.9); }
.aibox h3 { font-size: clamp(28px, 7vw, 38px); line-height: 1.1; color: var(--white); }
.aibox-say { margin-top: 10px; font-size: 16.5px; line-height: 1.55; color: var(--cream); max-width: 52ch; }
.prompt-wrap { position: relative; margin-top: 18px; }
.prompt { font: 400 13px/1.62 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--cream); background: rgba(10, 16, 36, 0.7); border: 1px solid var(--rule); padding: 15px 16px; }
/* three lines on a phone, the box 4px under the third and its fade 9px shorter: no fourth shows cut (2026-10-24) */
.js .prompt-wrap.clamp .prompt { max-height: calc(3 * 1.62em + 21px); overflow: hidden; }
.js .prompt-wrap.clamp::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 35px; background: linear-gradient(180deg, rgba(14, 22, 38, 0), rgba(14, 22, 38, 0.96)); pointer-events: none; }
.more-btn { display: none; margin-top: 8px; min-height: 44px; padding: 0 2px; background: none; border: 0; font: 600 15px/1 var(--sans); color: var(--cream); text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer; }
.js .more-btn.show { display: inline-flex; align-items: center; }
.copy-row { margin-top: 18px; }
.copy-row .btn { min-width: 210px; --cm: rgba(240, 230, 207, 0.62); }
.aibox-fine { margin-top: 12px; font: 400 13px/1.5 var(--mono); color: var(--cream-2); }
.by-hand { display: block; width: 100%; height: 180px; margin-top: 14px; padding: 12px; border: 1px solid var(--gold-bright); background: var(--canvas); color: var(--cream); font: 400 12px/1.5 var(--mono); resize: vertical; }
.by-hand[hidden] { display: none; }

/* The footer is always night, with a few trail lights and stars (twinkle), so every page closes the loop. */
.foot { position: relative; overflow: hidden; background: linear-gradient(180deg, #0c1430 0%, var(--canvas) 100%); color: var(--cream); padding: 64px 0 calc(44px + env(safe-area-inset-bottom, 0px)); }
.foot-sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.foot-in { position: relative; display: grid; gap: 14px; }
.foot-mark { width: 176px; height: auto; }
.foot-where { font-size: 15px; color: var(--cream-2); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.foot-links a, .foot-back { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--cream); }
.foot-ver { font: 400 12.5px/1.6 var(--mono); color: var(--cream-2); }

/* Laptop and up */
@media (min-width: 900px) {
  .site-in { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); min-height: 72px; }
  .mark img { height: 28px; }
  .nav, .js .nav { order: 1; width: auto; margin-right: 10px; }
  .menu, .js .menu { display: none; }
  .nav-list, .js .nav-list, .js .nav-list.open { display: flex; position: static; flex-direction: row; gap: 0 28px; min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; }
  .js .nav-list a { width: auto; padding: 0; min-height: 44px; }
  .site.day .nav-list a { color: var(--ink); }
  .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); --gut: max(32px, env(safe-area-inset-left, 0px)); --gut-r: max(32px, env(safe-area-inset-right, 0px)); }
  .m .track { height: 560vh; }
  .m .lines-box { left: var(--read-x); right: auto; top: max(86px, 10vh); width: min(520px, calc(100vw - var(--read-x) * 2)); height: 150px; transform: none; }
  .m .lines li { place-items: center start; text-align: left; }
  .m .rec { width: min(600px, 46vw); top: calc(max(86px, 10vh) + 168px); }
  .m .tools { left: var(--read-x); right: var(--read-x); width: auto; transform: none; gap: 0 min(80px, 4vw); bottom: 5vh; }
  .tools li { font-size: 14px; padding: 14px 4px; }
  .rec-lines { padding: 20px 22px 18px; }
  .rl dd { font-size: 15px; }
  .rl dd.rec-name { font-size: 32px; }
  .frag .t { font-size: 13px; }
  .frag small { font-size: 9.5px; }
  .m .m2 { font-size: 13px; }
  .jsonld { font-size: 15px; padding: 24px 26px; }
  .brand { top: 16px; right: 18px; }
  .dawn { padding: 20px 0 96px; }
  .face-day, .face-night { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
  .photo { aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: 1px solid rgba(35, 31, 26, 0.3); }
  .card-body { padding: 26px 28px 26px; }
  .js .board { grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr); align-items: start; gap: 30px; }
  .js .map { min-height: 620px; }
  .js .sign { width: 220px; }
  .js .finds { position: sticky; top: 96px; }
  .finds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .js .finds { grid-template-columns: minmax(0, 1fr); }
  .walk:not(.stack) .finds { row-gap: 14vh; padding-bottom: 14vh; }
  .bench { margin-top: 48px; }
  .prose p { font-size: 20px; }
  .aibox { padding: 34px 36px 32px; }
  .foot { padding-top: 72px; }
  /* One grid in the page container: mark and address, the links, then version,
     checked-by and the design board on one meta row. The address stays one line. */
  .foot .foot-in {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    column-gap: 28px;
    row-gap: 8px;
    align-items: center;
    max-width: var(--max);
  }
  .foot-mark { grid-column: 1; grid-row: 1; width: 168px; }
  .foot-where { grid-column: 2 / -1; grid-row: 1; white-space: nowrap; }
  .foot-links { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .foot-ver { grid-column: 1 / 3; grid-row: 3; margin: 0; }
  .foot-chk { grid-column: 3; grid-row: 3; margin: 0; white-space: nowrap; }
  .foot-in > p:has(.foot-back) { grid-column: 4; grid-row: 3; margin: 0; justify-self: end; }
  html body .ai-in,
  html body .notes-in,
  html body .limit,
  html body .cite { margin-inline: auto; }
}

/* The path (BGA 68, 71): Directory, then Scout, then DIY. A step heading on each offer, and the strip the
   assembler puts at the end of every page, with the step you are on marked and the next priced step. */
.offer .step { grid-column: 1 / -1; font: 500 11px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright); }
.path { background: var(--paper); color: var(--ink); padding: 48px 0 56px; border-top: 1px solid var(--rule-ink); }
.path .eyebrow { color: var(--ink-2); }
.path h2 { margin-top: 8px; color: var(--ink); max-width: none; }
.path-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; width: 100%; }
.path-steps a { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; row-gap: 6px; min-width: 0; height: 100%; padding: 15px 16px 16px; border: 1px solid var(--rule-ink); background: var(--paper-hi); color: var(--ink); text-decoration: none; }
.path-steps a:hover, .path-steps a:focus-visible { border-color: var(--ink-2); }
.path-steps .step { font: 500 11px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); }
.path-steps strong { font: 600 18px/1.3 var(--sans); min-width: 0; overflow-wrap: anywhere; }
.path-steps .price { font: 500 13px/1.6 var(--mono); color: var(--ink-2); white-space: normal; }
.path-steps .say { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.path-steps .is-here a { border-color: var(--gold-ink); box-shadow: inset 0 0 0 1px var(--gold-ink); }
.path-steps .here { color: var(--ink); }
.path-go { margin-top: 24px; }
.path-go .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
/* The record button names the business. On a phone the line is longer than the column, so it wraps inside the column. The words stay. */
.record-foot .btn, .path-go .btn { max-width: 100%; height: auto; white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.25; }
.record-foot p { max-width: 100%; min-width: 0; }
@media (max-width: 359px) { .path-steps a { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .path-go .btn, .record-foot .btn { width: 100%; padding-left: 12px; padding-right: 12px; letter-spacing: 0; font-stretch: 100%; }
}
@media (min-width: 900px) { .path-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }

/* ---- play (BGA 77, 79): the page's player, motion/play.js; brand/README.md has the pattern. ----
   One bar, bottom right: Still, Play and Next. A small piece of night wherever it sits, like the AI box; its corner marks
   follow the time of day just left of it (.play-day). It hides while the path or the footer is on screen (.play-away),
   rises above words at rest (a transform set by play.js) or steps aside where it cannot (.play-aside), and is not
   shown in a recording (.play-rec). Every class it sets starts play- (a bare .day is the kit's paper section). The step count (.play-n)
   sits over it inside a scene. While .play-snap is on, each scene step has a snap mark (.play-mk). */
.play { position: fixed; z-index: 38; right: calc(max(16px, env(safe-area-inset-right, 0px)) + 6px); bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 6px); display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; transition: opacity 0.25s ease, visibility 0s linear 0s, transform 0.3s ease; }
.play[hidden], .play.play-rec { display: none; }
.play.play-away, .play.play-aside { opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s, transform 0.3s ease; }
.play-bar { position: relative; display: flex; pointer-events: auto; background: rgba(10, 16, 36, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(240, 230, 207, 0.5); box-shadow: 0 14px 30px -16px rgba(6, 10, 24, 0.85); --cm: rgba(240, 230, 207, 0.62); }
.play.play-day .play-bar { --cm: var(--ink); }
.play-b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 46px; height: 46px; padding: 0 10px; border: 0; background: none; color: var(--cream); font: 600 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.play-b + .play-b { border-left: 1px solid rgba(240, 230, 207, 0.22); }
.play-b:hover { background: rgba(240, 230, 207, 0.07); }
.play-b:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -5px; }
.play-go { width: 46px; padding: 0; color: var(--gold-bright); }
.play-go .pl-pause, .play-go[aria-pressed="true"] .pl-play { display: none; }
.play-go[aria-pressed="true"] .pl-pause { display: block; }
.play-go[aria-pressed="true"] { background: rgba(244, 196, 90, 0.12); }
.play-next svg { color: var(--gold-bright); }
.play-still[aria-pressed="true"] { color: var(--gold-bright); }
.play-line { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold-bright); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; pointer-events: none; }
.play.play-going .play-line { opacity: 1; }
.play-n { margin: 0; padding: 5px 8px; background: rgba(10, 16, 36, 0.88); border: 1px solid rgba(240, 230, 207, 0.3); font: 500 11px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream); white-space: nowrap; opacity: 0; transition: opacity 0.25s; }
.play-n.play-n-on { opacity: 1; }
.play-n.play-n-off { opacity: 0; }
.play-snap { scroll-snap-type: y proximity; }
.play-mk { position: absolute; left: 0; width: 1px; height: 0; pointer-events: none; }
.play-snap .play-mk { scroll-snap-align: start; }
/* a scene's ticks go to their step: a 28 by 44 target round each 22 by 3 tick */
.play-ticks.m .ticks i { position: relative; cursor: pointer; }
.play-ticks.m .ticks i::after { content: ""; position: absolute; left: -3px; right: -3px; top: -21px; bottom: -20px; }
@media (min-width: 900px) { .play { right: calc(max(32px, env(safe-area-inset-right, 0px)) + 6px); bottom: calc(max(24px, env(safe-area-inset-bottom, 0px)) + 6px); } }
/* ---- end of play ---- */

/* Reduced motion and scripts off share the still composition: each moment shown finished. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}