/* Embedded Nature — graphite bench, gold as metal.
   Not a SaaS landing. Not a HUD. Things sit on a bench. */

:root {
  --canvas: #0d0e12;
  --surface: #16181e;
  --surface-2: #1c1f27;
  --hairline: #2a2d36;
  --ink: #e8e4d8;
  --muted: #9a9588;
  --gold: #bf9b30;
  --gold-bright: #d4b84a;
  --on-gold: #1a1508;
  --radius: 4px;
  --nav-h: 52px;
  --gutter: 22px;
  --rail-w: 32px;
  /* One size and one tracking for every mono label on the site. They stay
     uppercase — the register/datasheet reading depends on it — so the receding
     is done by dropping tracking (was 0.12–0.16em), muting the colour, and
     going up to a size that no longer has to be squinted at. */
  --label-size: 11px;
  --label-track: 0.1em;
  /* Shared header size for the two loud bands (proof, arrival). They are peers;
     they differ by construction, not by scale. Held under .claim at every width:
     .claim is 3.8vw, this is 2.8vw, and the floors/ceilings keep that order down
     to 320px. Nothing on the page may exceed the H1. */
  --band-title-loud: clamp(1.75rem, 2.8vw, 2.5rem);
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --font-body: "Geist Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: "Commit Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-mech: cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

html {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-synthesis: none;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color-scheme: dark;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--canvas);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

::selection {
  background: var(--gold);
  color: var(--on-gold);
}

:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

@view-transition {
  navigation: auto;
}

.skip {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 30;
  padding: 8px 12px;
  background: var(--gold);
  color: var(--on-gold);
  font-size: 13px;
}

.skip:focus {
  top: 12px;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

.js-motion {
  --vel: 0;
  --glitch: 0px;
  --split: #5ec8ff;
}

.js-motion .grain {
  opacity: calc(0.04 + var(--vel) * 0.02);
}

/* —— Nav as rack ear —— */
.nav {
  position: relative;
  z-index: 20;
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--hairline);
  background: var(--canvas);
  view-transition-name: nav;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  view-transition-name: brand;
}

.brand-mark {
  width: 18px;
  height: 24px;
  object-fit: contain;
}

.brand-name {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.nav-links {
  display: flex;
  gap: 26px;
  font-size: 14px;
  color: var(--muted);
}

.nav-links a[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--gold);
}

.nav-links a:hover {
  color: var(--ink);
}

.nav-end {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 16px;
}

.email {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--muted);
  border-bottom: 1px solid transparent;
}

.email:hover,
.email:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--gold);
  outline: none;
}

.email.is-copied {
  color: var(--gold);
}

.nav-toggle {
  display: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--ink);
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 16px;
  height: 1px;
  background: currentColor;
  position: relative;
  margin: 0 auto;
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle span::before {
  top: -5px;
}

.nav-toggle span::after {
  top: 5px;
}

/* —— Sheet on the bench —— */
.sheet {
  position: relative;
  margin: 12px var(--gutter) 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background:
    linear-gradient(var(--canvas), var(--canvas)) padding-box,
    var(--canvas);
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  overflow: hidden;
}

.sheet--page {
  min-height: calc(100dvh - var(--nav-h) - 88px);
}

.tick {
  position: absolute;
  width: 11px;
  height: 11px;
  pointer-events: none;
  z-index: 3;
}

.tick--tl { top: 0; left: 0; border-top: 1px solid var(--muted); border-left: 1px solid var(--muted); }
.tick--tr { top: 0; right: 0; border-top: 1px solid var(--muted); border-right: 1px solid var(--muted); }
.tick--bl { bottom: 0; left: 0; border-bottom: 1px solid var(--muted); border-left: 1px solid var(--muted); }
.tick--br { bottom: 0; right: 0; border-bottom: 1px solid var(--muted); border-right: 1px solid var(--muted); }

.rail {
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0 14px;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--hairline) 0 1px,
    transparent 1px 24px
  );
  background-position: 50% 0;
  background-size: 7px 24px;
  background-repeat: repeat-y;
}

.rail span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  background: var(--canvas);
  padding: 6px 0;
}

.sheet-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sheet--home .hero {
  min-height: min(72vh, 720px);
}

.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-data);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--muted);
}

/* —— Home hero: instrument + claim —— */
.hero {
  display: grid;
  grid-template-columns: minmax(280px, 38%) minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  border-bottom: 1px solid var(--hairline);
}

.fixture {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 24px 32px 28px;
  border-right: 1px solid var(--hairline);
  background:
    linear-gradient(90deg, transparent 47px, rgba(42, 45, 54, 0.45) 47px, rgba(42, 45, 54, 0.45) 48px, transparent 48px),
    var(--canvas);
}

.fixture-well {
  position: relative;
  align-self: center;
  width: min(100%, 300px);
  aspect-ratio: 688 / 900;
  margin: 8px auto 0;
  view-transition-name: lion;
}

.fixture-well img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fixture-current {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.fixture-current .js-lion-load,
.fixture-current .js-lion-idle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3.4;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.fixture-current .js-lion-load {
  opacity: 0;
  mix-blend-mode: screen;
}

.fixture-current .js-lion-idle {
  stroke: var(--gold-bright);
  stroke-width: 4.2;
  opacity: 0.22;
  transition: opacity 0.7s var(--ease);
  mix-blend-mode: screen;
}

.fixture-current .js-lion-rim {
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 5.5;
  stroke-linejoin: miter;
  stroke-linecap: square;
  opacity: 0.55;
  transition: opacity 0.7s var(--ease);
}

.hero.is-awake .fixture-current .js-lion-idle {
  opacity: 0.92;
}

.hero.is-awake .fixture-current .js-lion-rim {
  opacity: 1;
}

.fixture-ticks {
  position: absolute;
  inset: -6px -8px -8px -8px;
  width: calc(100% + 16px);
  height: calc(100% + 14px);
  pointer-events: none;
  overflow: visible;
}

.fixture-ticks line {
  stroke: var(--muted);
  stroke-width: 0.7;
}

.claim-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 32px 18px 36px;
  min-width: 0;
}

.claim {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 84, "wght" 500, "SOFT" 0;
  font-size: clamp(2.35rem, 3.8vw, 3.85rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0;
  max-width: 11ch;
}

.claim em {
  color: var(--gold);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 84, "wght" 430, "SOFT" 28;
  letter-spacing: -0.04em;
}

.lede {
  margin: 18px 0 0;
  max-width: 44ch;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--muted);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 28px;
}

.cta--primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 20px;
  background: var(--gold);
  color: var(--on-gold);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius);
}

.cta--primary:hover,
.cta--primary:focus-visible {
  background: var(--gold-bright);
}

.cta--ghost {
  font-size: 14px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.cta--ghost::after {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--gold);
  transition: width 0.4s var(--ease);
}

.cta--ghost:hover::after {
  width: 56px;
}

.stamp {
  font-family: var(--font-data);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--muted);
}

/* —— Inner pages —— */
.page-body {
  padding: 32px 40px 56px;
}

.page-kicker {
  font-family: var(--font-data);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}

.page-kicker.spine {
  padding-top: 0;
}

.page-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.2vw, 3.9rem);
  font-weight: 500;
  font-variation-settings: "opsz" 84, "wght" 500, "SOFT" 0;
  letter-spacing: -0.035em;
  line-height: 0.99;
  margin: 0 0 16px;
  color: var(--ink);
  max-width: 16ch;
}

.page-title em {
  display: block;
  color: var(--gold);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 84, "wght" 430, "SOFT" 30;
}

/* A+C: RGB split scales with --glitch; scan hairline on a flick threshold. */
.js-motion .claim em,
.js-motion .page-title em,
.js-motion .band-title--proof em {
  position: relative;
}

.js-motion .claim em,
.js-motion .band-title--proof em {
  display: inline-block;
}

.js-motion.is-split .claim em,
.js-motion.is-split .page-title em,
.js-motion.is-split .band-title--proof em {
  text-shadow:
    calc(var(--glitch) * -1) 0 var(--split),
    var(--glitch) 0 var(--gold-bright);
}

.js-motion .claim em::after,
.js-motion .page-title em::after,
.js-motion .band-title--proof em::after,
.js-motion .hero.is-scan .fixture-well::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  height: 2px;
  top: 42%;
  background: var(--gold-bright);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
}

.js-motion .hero.is-scan .fixture-well::after {
  left: 6%;
  right: 6%;
}

.js-motion .claim em.is-scan::after,
.js-motion .page-title em.is-scan::after,
.js-motion .band-title--proof em.is-scan::after,
.js-motion .hero.is-scan .fixture-well::after {
  animation: scan-once 0.55s var(--ease) forwards;
}

.js-motion.is-split .hero.is-awake .fixture-current {
  filter:
    drop-shadow(calc(var(--glitch) * -1) 0 var(--split))
    drop-shadow(var(--glitch) 0 var(--gold-bright));
}

.js-motion.is-split .hero.is-awake .js-lion-idle,
.js-motion.is-split .hero.is-awake .js-lion-rim {
  transform: translateX(var(--glitch));
}

@keyframes scan-once {
  from {
    transform: scaleX(0) translateY(-8px);
    opacity: 0;
  }
  30% {
    opacity: 0.9;
  }
  to {
    transform: scaleX(1) translateY(10px);
    opacity: 0;
  }
}

.page-lede {
  margin: 0 0 32px;
  max-width: 58ch;
  color: var(--muted);
  font-size: 1.05rem;
}

/* —— About —— */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 48px;
  align-items: start;
}

.about-grid .prose p {
  color: var(--muted);
  font-size: 1.06rem;
  max-width: 48ch;
  margin: 0 0 16px;
}

.principal {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0;
  overflow: hidden;
}

.principal-head {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-data);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--muted);
}

.principal-body {
  padding: 18px 16px 20px;
}

.principal h2 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 500;
  font-variation-settings: "opsz" 24, "wght" 550, "SOFT" 0;
  margin: 0 0 6px;
}

.principal p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}

.brand-stack {
  position: relative;
  margin-top: 36px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.brand-stack header {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid var(--hairline);
}

.stack-row {
  display: grid;
  grid-template-columns: 160px 1fr 1fr 1fr 120px;
}

.stack-row > * {
  padding: 14px 16px 16px;
  border-right: 1px solid var(--hairline);
}

.stack-row > *:last-child {
  border-right: none;
}

.stack-row h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  font-variation-settings: "opsz" 18, "wght" 600, "SOFT" 0;
  margin: 6px 0 8px;
}

.stack-row h3 a {
  color: inherit;
}

.stack-row h3 a:hover,
.stack-row h3 a:focus-visible {
  color: var(--gold-bright);
}

.stack-row p {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

.stack-num {
  color: var(--gold);
  margin-right: 8px;
}

.stack-row .side {
  background: var(--canvas);
}

/* —— Footer —— */
.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0 var(--gutter) 16px;
  font-family: var(--font-data);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--muted);
}

.footer-end {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
}

.footer-end a {
  color: var(--muted);
  border-bottom: 1px solid transparent;
}

.footer-end a:hover,
.footer-end a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--gold);
  outline: none;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font-family: var(--font-data);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.toast.is-on {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .grain {
    display: none;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

}

@media (min-width: 1101px) {
  .sheet--home .hero {
    min-height: min(74vh, 760px);
  }
}

@media (max-width: 1100px) {
  .hero {
    grid-template-columns: minmax(200px, 34%) 1fr;
  }

  .fixture {
    grid-template-columns: 1fr;
  }

  .claim-block {
    padding: 24px 24px 20px 24px;
  }

  .page-body {
    padding: 28px 24px 48px;
  }

  .about-grid,
  .stack-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  :root {
    --rail-w: 0px;
    --gutter: 12px;
  }

  .rail {
    display: none;
  }

  .sheet {
    grid-template-columns: 1fr;
    margin: 10px 12px 12px;
  }

  .nav {
    grid-template-columns: 1fr auto auto;
    height: auto;
    min-height: var(--nav-h);
    gap: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .nav-toggle {
    display: grid;
    place-items: center;
  }

  .nav-end .email {
    display: inline;
  }

  .nav-links {
    display: none;
  }

  .nav.is-open {
    height: auto;
    padding-bottom: 16px;
    align-items: start;
    grid-template-columns: 1fr auto auto;
  }

  .nav.is-open .nav-links {
    display: flex;
    flex-direction: column;
    grid-column: 1 / -1;
    gap: 12px;
    padding: 12px 0 0;
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .fixture {
    border-right: none;
    border-bottom: 1px solid var(--hairline);
  }

  .fixture-well {
    width: 160px;
  }

  /* Was 2.35rem (37.6px), which the 38.4px ledger names and the 40px proof
     header both cleared. The claim has to be the largest thing at 390px too. */
  .claim {
    font-size: 2.6rem;
    max-width: none;
  }

  .case-body,
  .intake-row {
    grid-template-columns: 1fr;
  }

  .intake-row label {
    padding-bottom: 0;
  }

  .fixture-well {
    width: min(100%, 200px);
  }
}

/* —— Home bands ——
   Four sections, four weights. The proof band runs edge to edge and carries
   the page; the spec band is a reference table; the studio band is a note;
   the contact band changes material. Nothing here repeats the same entry. */
.band {
  --band-x: 48px;
  --proof-x: 28px;
  padding: 72px var(--band-x) 64px;
  border-top: 1px solid var(--hairline);
  scroll-margin-top: 20px;
}

/* Full-width label rail. Only the two loud bands (proof, arrival) get one. */
.band-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 24px;
  padding: 13px var(--band-x) 12px;
  border-bottom: 1px solid var(--hairline);
}

.strip-end {
  margin: 0;
  font-family: var(--font-data);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--muted);
}

.spine {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding-top: 0.65em;
  font-family: var(--font-data);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
}

/* Gold survives on the index numeral only. Across the site gold mono now means
   exactly one thing: position in the register (band index, ledger row number,
   the live mark in the rail) or a link off the page. The words beside it are
   category names, so they are muted. */
.spine span {
  color: var(--gold);
}

.spine i {
  font-style: normal;
  opacity: 0.55;
}

/* Base only. The per-band modifiers below must be able to win on one class,
   so nothing here may raise specificity past 0,1,0. */
.band-title {
  font-family: var(--font-display);
  font-size: var(--band-title-loud);
  font-weight: 500;
  font-variation-settings: "opsz" 40, "wght" 500, "SOFT" 0;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0;
  max-width: 20ch;
  color: var(--ink);
}

/* The gold italic clause is now an accent again, not the house voice. It is
   spent twice per page: the hero claim, and the proof band's turn from
   negation to assertion. Every other clause keeps the italic — the change of
   voice is real — but in ink. */
.band-title em {
  display: block;
  color: var(--ink);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 40, "wght" 450, "SOFT" 26;
}

/* Roman, not italic. With the arrival header's clause demoted from gold to ink,
   an italic lead directly under an italic clause made the two read as one
   voice at two sizes. This sentence is a flat instruction anyway. */
.band-lead {
  margin: 20px 0 0;
  max-width: 32ch;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.42rem);
  font-style: normal;
  line-height: 1.25;
  color: var(--ink);
  font-variation-settings: "opsz" 22, "wght" 560, "SOFT" 0;
}

.band-lede {
  margin: 14px 0 0;
  max-width: 56ch;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.5;
}

.band-lead + .band-lede {
  margin-top: 10px;
}

/* —— 01 · Proof: the band that carries the page ——
   No indented kicker column. A label rail, then a header that starts at the
   left edge, then rows that run hairline to hairline. Widest inset, tallest
   rows, largest type on the page after the claim. */
.band.band--proof {
  padding: 0 0 0;
}

.proof-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
  gap: 18px 56px;
  align-items: start;
  padding: 62px var(--proof-x) 38px;
}

/* Was clamp(2.5rem, 7.2vw, 3.5rem) — 56px, which out-sized the 54.7px H1. The
   band still carries the page, but on construction: full bleed, a column-head
   row, a register, and row names at 3.4vw. Not on a big header. */
.band-title--proof {
  font-size: var(--band-title-loud);
  line-height: 1;
  letter-spacing: -0.03em;
  max-width: 20ch;
  font-variation-settings: "opsz" 40, "wght" 500, "SOFT" 0;
}

/* The header used to be a title on the left and a caption on the right, which
   left the lower-right quadrant empty. The lede now sits under the title where
   it is read, and the right column is a register of the rows below — sized so
   both columns start and finish together and the header closes on a rule. */
.proof-claim {
  min-width: 0;
}

.proof-claim .band-lede {
  margin-top: 20px;
  max-width: 44ch;
}

.register {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding-top: 0.55em;
}

.register > div {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--hairline);
}

.register > div + div {
  padding-top: 14px;
}

.register dt {
  font-family: var(--font-data);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--muted);
}

/* A read value, not a label: ink, and tracked tighter than the label beside it
   so the pair reads as name → number. */
.register dd {
  margin: 0;
  font-family: var(--font-data);
  font-size: var(--label-size);
  letter-spacing: 0.06em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* One of the page's two gold italics. */
.band-title--proof em {
  color: var(--gold);
  font-variation-settings: "opsz" 40, "wght" 450, "SOFT" 30;
  letter-spacing: -0.032em;
}

.proof-head .band-lede {
  font-size: 1.02rem;
}

.ledger-head {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) minmax(0, max-content);
  gap: 0 32px;
  padding: 0 var(--proof-x) 10px;
  font-family: var(--font-data);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--muted);
}

.ledger-head span:last-child {
  justify-self: end;
}

.ledger-head--cases {
  grid-template-columns: 68px minmax(0, 1fr) minmax(0, max-content) 24px;
  padding: 0 0 10px;
}

.proof-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px 24px;
  padding: 30px var(--proof-x) 34px;
}

/* —— 02 · Spec: caption on the left, the table itself on the right ——
   The header joins the kicker in a narrow caption column and the data runs
   to its right, so the entry reads as a table caption rather than a section
   header. A buyer reads specifications, not three surfaced cards. */
.band.band--spec {
  padding-top: 64px;
  padding-bottom: 60px;
}

.spec-layout {
  display: grid;
  grid-template-columns: minmax(0, 310px) minmax(0, 1fr);
  gap: 24px 56px;
  align-items: start;
}

.spec-caption .spine {
  padding-top: 0;
  margin-bottom: 18px;
}

/* Deliberately smaller than the two loud bands: this is a table caption sitting
   in a 310px column beside the data, not a header standing in the open. */
.band-title--spec {
  font-size: clamp(1.55rem, 2.15vw, 1.9rem);
  line-height: 1.1;
  max-width: none;
  font-variation-settings: "opsz" 30, "wght" 520, "SOFT" 0;
}

.band-title--spec em {
  font-variation-settings: "opsz" 30, "wght" 470, "SOFT" 26;
}

.spec-caption .band-lede {
  font-size: 0.96rem;
  max-width: 34ch;
}

/* Ruled like a datasheet. The vertical column rules are the point: nothing
   else on the page has them, so the table cannot be mistaken for the studio
   note that follows it. */
/* Rules and fills bleed 14px past the text column so the head bar and the
   zebra do not crop against the type. */
.spec {
  margin-inline: -14px;
  border-top: 1px solid var(--hairline);
}

.spec-head,
.spec-row,
.spec-fit {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 0;
  padding-inline: 14px;
}

.spec-head > *,
.spec-row > * {
  padding-inline: 24px;
  border-left: 1px solid var(--hairline);
}

.spec-head > *:first-child,
.spec-row > *:first-child {
  padding-left: 0;
  border-left: 0;
}

.spec-head {
  padding-block: 10px 11px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-data);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--muted);
}

.spec-rows {
  margin: 0;
}

.spec-row {
  align-items: stretch;
  padding-block: 17px 19px;
  border-bottom: 1px solid var(--hairline);
}

.spec-row:nth-child(even) {
  background: var(--surface);
}

.spec--page {
  position: relative;
  margin: 8px 0 36px;
}

.spec-row dt,
.spec-row .spec-term {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  /* 20.8px. Under ~24px on this canvas Fraunces' thins bloom away, so opsz
     tracks the rendered size and the weight goes up rather than down. */
  font-variation-settings: "opsz" 21, "wght" 580, "SOFT" 0;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}

.spec-row .spec-term {
  margin: 0;
}

.spec-row dt i,
.spec-row .spec-term i {
  font-family: var(--font-data);
  font-style: normal;
  font-size: var(--label-size);
  font-variation-settings: normal;
  letter-spacing: var(--label-track);
  color: var(--muted);
}

.spec-row dd,
.spec-row p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--muted);
}

.spec-row .spec-after {
  color: var(--ink);
}

.spec--loop .spec-head,
.spec--loop .spec-row {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
}

.loop-kicker {
  margin: 0;
  padding: 14px 14px 0;
  font-family: var(--font-data);
  font-size: var(--label-size);
  font-weight: 400;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--muted);
}

.spec--loop .spec-head {
  padding-top: 10px;
}

/* Foot row: spans the data columns, so it drops the column rules. */
.spec-fit {
  padding-block: 18px 0;
}

.spec-fit h2,
.spec-fit h3 {
  margin: 0;
  font-family: var(--font-data);
  font-size: var(--label-size);
  font-weight: 400;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--muted);
}

.spec-fit p {
  grid-column: 2 / -1;
  padding-left: 24px;
  border-left: 1px solid var(--hairline);
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-style: italic;
  font-variation-settings: "opsz" 18, "wght" 520, "SOFT" 26;
  line-height: 1.4;
  color: var(--ink);
}

/* —— 03 · Studio: a note, not a pitch ——
   One short measure, set at a fraction of the display size, with the band's
   register out in the margin beside it rather than stacked above it. */
.band.band--aside {
  padding-top: 46px;
  padding-bottom: 46px;
}

/* Marginalia. The measure is indented onto the spec table's data column and the
   band's register — plus its one route off the page — hangs out in the margin
   to its left, across a gutter no other band opens. Column 1 is a margin, not a
   caption: nothing in it is larger than 13px, so it cannot be read as the
   caption column of the table above. Deliberately unruled — the table above it
   is nothing but rules. */
.aside-note {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 52ch);
  /* The measure spans both rows; the fr soaks up its overhang so the route
     sits directly under the register instead of being pushed down by it. */
  grid-template-rows: auto 1fr;
  /* 210 + 156 = 366: the same offset the spec caption column and its gutter
     make above, so the measure sits on the table's data rail at every width
     where this two-column form applies. */
  gap: 0 156px;
  align-items: start;
  justify-content: start;
}

.aside-note .spine {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding-top: 0.35em;
}

.aside-measure {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* The route hangs under the register in the margin, not under the prose: the
   margin holds where you are and where this goes, and the measure holds words. */
.aside-route {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  margin-top: 22px;
  font-size: 13px;
}

/* Stays small on purpose: this band is unruled indented marginalia with a short
   measure, and a small header is part of that construction. It is the one
   header that is not trying to be a band header. 20px is under the ~24px floor
   where Fraunces' thins survive on this canvas, so the weight goes to 600. */
.aside-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  font-variation-settings: "opsz" 20, "wght" 600, "SOFT" 0;
  letter-spacing: -0.018em;
  line-height: 1.3;
  color: var(--ink);
}

.aside-title em {
  color: var(--ink);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 20, "wght" 560, "SOFT" 24;
}

.aside-measure p {
  margin: 0 0 11px;
  max-width: none;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--muted);
}

.aside-measure p:last-child {
  margin-bottom: 0;
}

/* —— 04 · Arrival: the page changes material ——
   The only filled surface on the sheet, opened by a gold rule and closed by
   the sheet edge itself. The form is the band, not a panel inside it. */
.band.band--arrive {
  padding: 0;
  border-top: 1px solid var(--gold);
  background: var(--surface-2);
}

.band--arrive .band-strip {
  padding-top: 12px;
  padding-bottom: 11px;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 6px,
    rgba(191, 155, 48, 0.06) 6px,
    rgba(191, 155, 48, 0.06) 7px
  );
}

.arrive {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

/* The column ran short against the form. It is now anchored at both ends:
   the header block sits at the top, the qualifier is a footnote on a rule at
   the bottom, and the slack falls between them. */
.arrive-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 58px 48px 46px var(--band-x);
  border-right: 1px solid var(--hairline);
}

.arrive-copy .intake-note {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  max-width: 42ch;
  font-size: 0.92rem;
}

/* Peer of the proof header, to the pixel. Band 04 already announces itself by
   changing material — filled surface, gold top rule, hatched strip — so it does
   not also need to be the biggest header. */
.band-title--arrive {
  font-size: var(--band-title-loud);
  line-height: 1;
  letter-spacing: -0.03em;
  max-width: 16ch;
  font-variation-settings: "opsz" 40, "wght" 500, "SOFT" 0;
}

.band-title--arrive em {
  font-variation-settings: "opsz" 40, "wght" 450, "SOFT" 26;
}

.intake.intake--arrive {
  max-width: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.intake--arrive .intake-row {
  grid-template-columns: 148px minmax(0, 1fr);
  padding: 0 var(--band-x) 0 44px;
}

.intake--arrive .intake-foot {
  padding: 24px var(--band-x) 38px 44px;
}

/* —— Ledger: work as rows on a rule, not cards —— */
.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.ledger-row,
.ledger .case {
  border-bottom: 1px solid var(--hairline);
}

.ledger-link {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(0, max-content);
  align-items: start;
  gap: 0 28px;
  padding: 22px 4px 24px 0;
  color: inherit;
  list-style: none;
}

.ledger-link::-webkit-details-marker {
  display: none;
}

.ledger-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.5s var(--ease-mech);
}

.ledger-link:hover::after,
.ledger-link:focus-visible::after,
.ledger .case details[open] .ledger-link::after {
  width: 100%;
}

.ledger-link:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

/* Gold stays here: the row's position in the register, and the target of the
   num-live scroll timeline, which reads muted → gold as the row arrives. */
.ledger-num {
  font-family: var(--font-data);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  color: var(--gold);
  padding-top: 0.7em;
  transition: color 0.35s var(--ease);
}

.ledger-body {
  min-width: 0;
  overflow: visible;
}

.ledger-name {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  margin: 0;
  max-width: 100%;
  overflow: visible;
  font-weight: 500;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.05vw, 1.85rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ink);
  font-variation-settings: "opsz" 34, "wght" 480, "SOFT" 0;
  transition: color 0.3s var(--ease), font-variation-settings 0.45s var(--ease);
}

.ledger-name a {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  color: inherit;
}

.ledger-out {
  font-family: var(--font-body);
  font-size: 0.62em;
  color: var(--gold);
  transform: translateY(-0.15em);
  transition: transform 0.35s var(--ease-mech);
}

.ledger-note {
  display: block;
  margin-top: 9px;
  max-width: 48ch;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.ledger-stamp {
  justify-self: end;
  padding-top: 0.85em;
  font-family: var(--font-data);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.35s var(--ease);
}

.ledger-link:hover .ledger-name,
.ledger-link:focus-visible .ledger-name,
.ledger .case details[open] .ledger-name {
  color: var(--gold-bright);
  font-variation-settings: "opsz" 34, "wght" 520, "SOFT" 44;
}

.ledger-link:hover .ledger-num,
.ledger-link:focus-visible .ledger-num,
.ledger-link:hover .ledger-stamp,
.ledger .case details[open] .ledger-num {
  color: var(--ink);
}

.ledger-link:hover .ledger-out {
  transform: translate(3px, -0.32em);
}

.ledger--cases .ledger-link {
  grid-template-columns: 52px minmax(0, 1fr) minmax(0, max-content) 24px;
  cursor: pointer;
}

.ledger-toggle {
  justify-self: end;
  width: 8px;
  height: 8px;
  margin-top: 1.15em;
  border-right: 1px solid var(--muted);
  border-bottom: 1px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.4s var(--ease-mech), border-color 0.3s var(--ease);
}

.ledger-link:hover .ledger-toggle {
  border-color: var(--ink);
}

.ledger--cases details[open] .ledger-toggle {
  transform: rotate(-135deg);
  border-color: var(--gold);
}

/* Work index echoes the home proof band: rules to the sheet edge, larger names. */
.ledger--cases {
  margin-inline: -40px;
  border-top: 1px solid var(--hairline);
}

.ledger--cases .ledger-link {
  grid-template-columns: 68px minmax(0, 1fr) minmax(0, max-content) 24px;
  gap: 0 32px;
  padding: 26px 40px 28px;
}

/* 1.55rem floor keeps the row names off the ~24px mark where Fraunces' thins
   start to bloom away on this canvas. */
.ledger--cases .ledger-name {
  font-size: clamp(1.55rem, 2.9vw, 2.3rem);
  letter-spacing: -0.028em;
  font-variation-settings: "opsz" 36, "wght" 480, "SOFT" 0;
}

.ledger--cases .ledger-note {
  margin-top: 10px;
  max-width: 48ch;
  font-size: 0.98rem;
}

.ledger--cases .ledger-num {
  padding-top: 0.9em;
}

.ledger--cases .ledger-stamp {
  padding-top: 1.15em;
}

.ledger--cases .ledger-toggle {
  margin-top: 1.5em;
}

.ledger--cases .case {
  scroll-margin-top: 72px;
}

.ledger--cases .case.is-hidden {
  display: none;
}

.ledger--cases .case-body {
  margin: 0;
  padding: 2px 40px 30px 120px;
  border-top: none;
}

/* Proof scale: rows carry the argument, so they get the room and the size. */
.ledger--proof {
  border-top: 1px solid var(--hairline);
}

.ledger--proof .ledger-link {
  grid-template-columns: 68px minmax(0, 1fr) minmax(0, max-content);
  gap: 0 32px;
  padding: 32px var(--proof-x) 36px;
}

.ledger--proof .ledger-num {
  padding-top: 0.95em;
}

/* The rows are the argument, so they stay the second-largest voice on the page
   — but pinned to the claim rather than free-running. .claim is 3.8vw, this is
   3.4vw, so the names sit at ~89% of the H1 at every width instead of
   overtaking it below 1284px, which the old 5.2vw/3.05rem clamp did. */
/* The 1.9rem floor matters: below ~823px the vw term would fall under the
   28px header floor and the rows would stop being the loudest thing in their
   own band. */
.ledger--proof .ledger-name {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 45, "wght" 480, "SOFT" 0;
}

.ledger--proof .ledger-link:hover .ledger-name,
.ledger--proof .ledger-link:focus-visible .ledger-name {
  font-variation-settings: "opsz" 45, "wght" 520, "SOFT" 44;
}

.ledger--proof .ledger-note {
  margin-top: 12px;
  max-width: 46ch;
  font-size: 1rem;
}

.ledger--proof .ledger-stamp {
  padding-top: 1.25em;
}

.intake {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  max-width: 760px;
}

.contact-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 44px;
  align-items: start;
  margin-top: 8px;
}

.contact-split .intake {
  max-width: none;
}

.contact-copy .page-lede {
  margin-bottom: 0;
}

.contact-copy .intake-note {
  margin-top: 22px;
}

.intake-row {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 0 20px;
  border-bottom: 1px solid var(--hairline);
}

.intake-row label {
  padding: 16px 0;
  font-family: var(--font-data);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--muted);
}

.intake-row .opt {
  font-family: var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  font-size: 11px;
  color: var(--muted);
}

.intake-row input,
.intake-row textarea,
.intake-row select {
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 16px 0;
  color: var(--ink);
  caret-color: var(--gold);
}

.intake-row textarea {
  min-height: 120px;
  resize: vertical;
}

.intake-row input:focus-visible,
.intake-row textarea:focus-visible,
.intake-row select:focus-visible {
  outline: none;
}

.intake-row:focus-within label {
  color: var(--ink);
}

.intake-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px 18px;
}

.intake-foot p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  max-width: 38ch;
}

.intake-note {
  margin: 22px 0 0;
  max-width: 58ch;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--muted);
}

/* —— Work index (inner page) —— */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 8px;
  margin: 0 0 18px;
  font-family: var(--font-data);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--muted);
}

.toolbar button {
  color: var(--muted);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  font-family: var(--font-data);
  font-size: var(--label-size);
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
}

.toolbar button[aria-pressed="true"] {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

.toolbar .sep {
  color: var(--hairline);
  padding: 0 6px;
}

.case summary {
  cursor: pointer;
}

/* Gold stays: an actual link off the page, not a category name. */
.case-visit {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-data);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
}

.case-visit:hover,
.case-visit:focus-visible {
  color: var(--gold-bright);
  border-bottom-color: var(--gold-bright);
}

.case-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 28px;
  margin: 22px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--hairline);
}

.case-body h2,
.case-body h3 {
  font-family: var(--font-data);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
  font-weight: 400;
}

.case-body p {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.45;
}

.case-body p + p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.88rem;
}

.work-invite {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 36px;
  padding-top: 8px;
}

.work-invite p {
  margin: 0;
  max-width: 46ch;
  color: var(--muted);
}

.closer {
  margin: 40px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
}

.closer p {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 500;
  font-variation-settings: "opsz" 24, "wght" 520, "SOFT" 0;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  max-width: 22ch;
}

.prose p {
  color: var(--muted);
  font-size: 1.06rem;
  max-width: 48ch;
  margin: 0 0 16px;
}

@media (max-width: 1100px) {
  .band {
    --band-x: 28px;
    --proof-x: 20px;
    padding: 56px var(--band-x) 48px;
  }

  .proof-head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 24px;
    padding: 44px var(--proof-x) 24px;
  }

  .band-title--proof {
    max-width: none;
  }

  .proof-claim .band-lede {
    margin-top: 14px;
    max-width: 52ch;
  }

  /* Register turns into a tally strip once the header is one column. */
  .register {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 12rem));
    padding-top: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .register > div {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    padding: 0 14px 10px 0;
    border-bottom: 0;
  }

  .register > div + div {
    padding-top: 0;
  }

  .spec-layout {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .band-title--spec {
    max-width: none;
  }

  .spec-caption .band-lede {
    max-width: 52ch;
  }

  .arrive {
    grid-template-columns: 1fr;
  }

  .arrive-copy {
    gap: 26px;
    padding: 40px var(--band-x) 34px;
    border-right: none;
    border-bottom: 1px solid var(--hairline);
  }

  .intake--arrive .intake-row {
    padding-left: var(--band-x);
  }

  .intake--arrive .intake-foot {
    padding-left: var(--band-x);
  }

  .band.band--spec {
    padding-top: 52px;
    padding-bottom: 44px;
  }

  /* Below the gutter's usefulness the margin folds back into the flow: register,
     measure, route — the same order as the source. */
  .aside-note {
    grid-template-columns: minmax(0, 52ch);
    grid-template-rows: auto;
    gap: 0;
  }

  .aside-note .spine,
  .aside-measure,
  .aside-route {
    grid-column: 1;
    grid-row: auto;
  }

  .aside-note .spine {
    margin-bottom: 10px;
    padding-top: 0;
  }

  .aside-route {
    margin-top: 20px;
  }
}

/* Stacked spec rows keep their column names, so the table still reads. With
   the column rules gone, the alternating fill carries the tabular identity. */
@media (max-width: 900px) {
  .spec-head {
    display: none;
  }

  /* Once stacked the table fills the band, so the bleed is dropped: the fills
     stop at the band margin and the text indents instead. */
  .spec {
    margin-inline: 0;
  }

  .spec-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 15px 14px 17px;
  }

  .spec-row > * {
    padding-inline: 0;
    border-left: 0;
  }

  .spec-row dd::before,
  .spec-row p::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-data);
    font-size: var(--label-size);
    letter-spacing: var(--label-track);
    text-transform: uppercase;
    color: var(--muted);
  }

  .spec-fit {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 14px 0;
  }

  .spec-fit p {
    grid-column: 1;
    padding-left: 0;
    border-left: 0;
  }

  .spec--loop .spec-head,
  .spec--loop .spec-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  :root {
    --band-title-loud: 1.9rem;
  }

  .band {
    --band-x: 18px;
    --proof-x: 14px;
    padding: 40px var(--band-x) 36px;
  }

  .band.band--aside {
    padding-top: 34px;
    padding-bottom: 34px;
  }

  .band-title--proof em {
    letter-spacing: -0.024em;
  }

  .ledger-head {
    display: none;
  }

  .proof-foot {
    padding: 22px var(--proof-x) 26px;
  }

  .intake-row,
  .intake--arrive .intake-row,
  .case-body {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* —— The page as instrument: motion reads scroll, not a timer —— */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.js-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--enter, 12px), 0);
}

.js-motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--enter-ms, 620ms) var(--ease) var(--enter-delay, 0ms),
    transform var(--enter-ms, 620ms) var(--ease-mech) var(--enter-delay, 0ms);
}

.rail--spine span {
  color: var(--muted);
  transition: color 0.4s var(--ease);
}

.rail--spine span.is-active {
  color: var(--gold);
}

.fixture-lamp {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}

.fixture-lamp.is-live {
  opacity: 1;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ledger-num {
      animation: num-live linear both;
      animation-timeline: view();
      animation-range: entry 35% cover 55%;
    }

    .fixture-well {
      animation: well-drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}

/* Lion current is JS-driven (pointer on the mark, scroll as fallback).
   Page scroll-timeline froze the dash at scrollY=0, so the rim never moved in the hero. */

@keyframes num-live {
  from {
    color: var(--muted);
  }
  to {
    color: var(--gold);
  }
}

@keyframes well-drift {
  from {
    transform: translateY(-7px);
  }
  to {
    transform: translateY(9px);
  }
}

@keyframes current-travel {
  from {
    stroke-dashoffset: var(--len, 600);
  }
  to {
    stroke-dashoffset: 0;
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-group(nav),
::view-transition-group(brand),
::view-transition-group(lion) {
  animation-duration: 360ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 1ms !important;
  }

  .js-motion [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .fixture-lamp {
    display: none;
  }

  .fixture-current .js-lion-load,
  .fixture-current .js-lion-idle,
  .fixture-current .js-lion-rim {
    opacity: 0 !important;
    animation: none !important;
  }

  .js-motion.is-split .claim em,
  .js-motion.is-split .page-title em,
  .js-motion.is-split .band-title--proof em {
    text-shadow: none;
  }

  .js-motion.is-split .hero.is-awake .fixture-current {
    filter: none;
  }

  .js-motion.is-split .hero.is-awake .js-lion-idle,
  .js-motion.is-split .hero.is-awake .js-lion-rim {
    transform: none;
  }

  .claim em::after,
  .page-title em::after,
  .band-title--proof em::after,
  .hero .fixture-well::after {
    content: none !important;
    animation: none !important;
  }
}

/* —— Ledger and band responsive tail —— */
@media (max-width: 1100px) {
  .spine {
    padding-top: 0;
  }

  .contact-split {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .contact-split .intake {
    margin-top: 12px;
  }

  .ledger-link {
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, max-content);
    gap: 0 18px;
  }

  .ledger--proof .ledger-link,
  .ledger-head {
    grid-template-columns: 52px minmax(0, 1fr) minmax(0, max-content);
    gap: 0 22px;
  }

  .ledger--proof .ledger-link {
    padding: 26px var(--proof-x) 28px;
  }

  .ledger--cases {
    margin-inline: -24px;
  }

  .ledger-head--cases {
    grid-template-columns: 52px minmax(0, 1fr) minmax(0, max-content) 24px;
    gap: 0 22px;
  }

  .ledger--cases .ledger-link {
    grid-template-columns: 52px minmax(0, 1fr) minmax(0, max-content) 24px;
    gap: 0 22px;
    padding: 22px 24px 24px;
  }

  .ledger--cases .case-body {
    padding: 2px 24px 26px 76px;
  }
}

@media (max-width: 760px) {
  .ledger-link {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 0 12px;
    padding: 18px 0 20px;
  }

  /* The proof band keeps its dominance at 390px by changing construction, not
     just scale: index and status become one mono line across the top of the
     row, and the name then gets the full sheet width instead of sitting in a
     52px indent. That buys ~55px of measure, which is what lets the name run
     at 36px without wrapping. */
  .ledger--proof .ledger-link {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas:
      "num stamp"
      "body body";
    gap: 0;
    padding: 20px var(--proof-x) 26px;
  }

  .ledger--proof .ledger-num {
    grid-area: num;
    padding-top: 0;
  }

  .ledger--proof .ledger-stamp {
    grid-area: stamp;
    justify-self: end;
    padding-top: 0;
    white-space: nowrap;
  }

  .ledger--proof .ledger-body {
    grid-area: body;
    margin-top: 11px;
  }

  /* 9.9vw was the largest "Drip Coffee Labs" could run without wrapping, but it
     also put the row names above the claim. 9.4vw keeps them the loudest thing
     in the band and still under it. */
  .ledger--proof .ledger-name {
    font-size: clamp(1.95rem, 9.4vw, 2.3rem);
    letter-spacing: -0.036em;
    line-height: 1.02;
  }

  .ledger--proof .ledger-note {
    margin-top: 10px;
    font-size: 0.95rem;
    max-width: none;
  }

  .ledger-num {
    padding-top: 0.5em;
  }

  .ledger-name {
    font-size: 1.32rem;
  }

  .ledger-note {
    margin-top: 7px;
    font-size: 0.92rem;
  }

  .ledger-stamp {
    grid-column: 2;
    justify-self: start;
    padding-top: 11px;
    white-space: normal;
  }

  .ledger--cases {
    margin-inline: -18px;
  }

  /* Work index uses the same mobile row construction as the home proof band,
     with the disclosure chevron riding the mono header line. */
  .ledger--cases .ledger-link {
    grid-template-columns: minmax(0, 1fr) max-content 20px;
    grid-template-areas:
      "num  stamp toggle"
      "body body  body";
    gap: 0;
    padding: 20px 18px 24px;
  }

  .ledger--cases .ledger-num {
    grid-area: num;
    padding-top: 0;
  }

  .ledger--cases .ledger-stamp {
    grid-area: stamp;
    justify-self: end;
    padding-top: 0;
    padding-right: 12px;
    white-space: nowrap;
  }

  .ledger--cases .ledger-body {
    grid-area: body;
    margin-top: 11px;
  }

  .ledger--cases .ledger-name {
    font-size: clamp(1.8rem, 8.4vw, 2.3rem);
    letter-spacing: -0.034em;
    line-height: 1.04;
  }

  .ledger--cases .ledger-note {
    margin-top: 10px;
    font-size: 0.95rem;
  }

  .ledger-toggle {
    grid-column: 3;
    grid-row: 1;
    margin-top: 0.9em;
  }

  .ledger--cases .ledger-toggle {
    grid-area: toggle;
    margin-top: 0.2em;
  }

  .ledger--cases .case-body {
    padding: 2px 18px 26px;
  }

  .band-title {
    max-width: none;
  }

  .band-title--arrive,
  .band-title--spec {
    max-width: none;
  }

  /* The middle stretch is cut down so the ledger reads as the subject. Term,
     studio title and spec header all sit well under the ledger names. */
  .spec-row dt,
  .spec-row .spec-term {
    font-size: 1.08rem;
    font-variation-settings: "opsz" 17, "wght" 600, "SOFT" 0;
  }

  .band-title--spec {
    font-size: 1.5rem;
    font-variation-settings: "opsz" 24, "wght" 550, "SOFT" 0;
  }

  .band-title--spec em {
    font-variation-settings: "opsz" 24, "wght" 500, "SOFT" 24;
  }

  .spec-caption .spine {
    margin-bottom: 12px;
  }

  .spec-caption .band-lede {
    margin-top: 10px;
    font-size: 0.92rem;
  }

  .band.band--spec {
    padding-top: 38px;
    padding-bottom: 32px;
  }

  .aside-title {
    font-size: 1.15rem;
    font-variation-settings: "opsz" 18, "wght" 620, "SOFT" 0;
  }

  .aside-title em {
    font-variation-settings: "opsz" 18, "wght" 580, "SOFT" 24;
  }

  .aside-measure p {
    font-size: 0.92rem;
  }

  .register > div {
    padding-right: 8px;
  }
}

/* Four tallies stop fitting on one line below ~420px. */
@media (max-width: 420px) {
  .register {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 12px;
  }
}