/* ============================================================
   Cantina Labs — cantinalabs.dev
   Dark ground, one green, a laptop on a spec sheet.

   There is no light theme and no lamp switch. The page used to
   carry both and to retint itself with each product's own colour
   as you scrolled, which meant the top of the site was orange and
   the bottom was green. One accent now, everywhere.
   ============================================================ */

:root {
  color-scheme: dark;

  --paper:      #0e1110;
  --paper-2:    #141816;
  --paper-3:    #1c211e;
  --ink:        #e9e8e2;
  --ink-2:      #a9aea8;
  --ink-3:      #7a807a;

  --accent:      #45c07a;
  --accent-deep: #2a8a54;
  --accent-soft: #7fbf9a;
  --ok:          var(--accent);

  --line:       rgba(233, 232, 226, .16);
  --line-soft:  rgba(233, 232, 226, .08);
  --sheet-bg:   #090b0a;
  --sheet-fg:   #e9e8e2;

  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-text:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gut: clamp(1.25rem, 4vw, 4.5rem);
  --measure: 34ch;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  font-weight: 400;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
  transition: background-color .5s var(--ease-in-out), color .5s var(--ease-in-out);
}

::selection { background: var(--accent); color: var(--paper); }

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

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

.skip {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  z-index: 200; background: var(--ink); color: var(--paper);
  padding: .7rem 1.2rem; font: 500 .8rem/1 var(--f-mono); letter-spacing: .04em;
}
.skip:focus { top: .6rem; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── The 3D stage ──────────────────────────────────────────── */

#stage {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s var(--ease-in-out);
  contain: strict;
}
#stage.is-lit { opacity: 1; }
#bench-canvas { display: block; width: 100%; height: 100%; }

/* Paper tooth over the render so the CG sits in the same material world
   as the rest of the page instead of floating on top of it. */
#stage-grain {
  position: absolute; inset: 0; pointer-events: none;
  /* A little sensor noise over the render. It is the cheapest thing on this
     page that makes the machine read as photographed rather than computed:
     a perfectly noiseless surface is the one thing no camera has ever made. */
  opacity: .26; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23t)' opacity='.34'/%3E%3C/svg%3E");
}

/* ── Topbar ────────────────────────────────────────────────── */

.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 1rem;
  padding: .85rem var(--gut);
  mix-blend-mode: normal;
  transition: background-color .35s, border-color .35s, padding .35s;
  border-bottom: 1px solid transparent;
}
.topbar.is-stuck {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(9px);
  border-bottom-color: var(--line);
  padding-top: .55rem; padding-bottom: .55rem;
}

.mark { display: inline-flex; align-items: center; gap: .55rem; }
.mark__glyph { width: 26px; height: 26px; color: var(--accent); flex: none; }
.mark__type {
  font: 600 .78rem/1 var(--f-mono);
  letter-spacing: .12em; text-transform: uppercase;
}

.topnav { display: flex; justify-content: center; gap: clamp(.8rem, 2.4vw, 2.2rem); }
.topnav a {
  font: 400 .74rem/1 var(--f-mono); letter-spacing: .06em;
  color: var(--ink-2); position: relative; padding-bottom: .25rem;
}
.topnav a i { font-style: normal; color: var(--accent); margin-right: .35em; }
.topnav a.is-here { color: var(--ink); }
.topnav a.is-here::after { right: 0; background: var(--accent); }
.topnav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--ink); transition: right .4s var(--ease-out);
}
.topnav a:hover { color: var(--ink); }
.topnav a:hover::after { right: 0; }
@media (max-width: 800px) { .topnav { display: none; } }

/* ── Shared bits ───────────────────────────────────────────── */

.kicker {
  font: 400 .7rem/1 var(--f-mono); letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 1.4rem;
}

.eyebrow {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .55rem 1rem; margin: 0 0 clamp(1.4rem, 4vh, 3rem);
  font: 400 .68rem/1 var(--f-mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.eyebrow span { position: relative; padding-left: 1.15rem; }
.eyebrow span::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: .7rem; height: 1px; background: var(--line);
}
.eyebrow span:first-child { padding-left: 0; color: var(--ink); }
.eyebrow span:first-child::before { display: none; }

/* ── Hero ──────────────────────────────────────────────────── */

.hero {
  position: relative; z-index: 2;
  min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  padding: clamp(6rem, 14vh, 9rem) var(--gut) 1.2rem;
}
.hero__grid { align-self: center; max-width: 100%; }

.hero__h1 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 500;
  font-variation-settings: "SOFT" 22, "WONK" 1, "opsz" 144;
  font-size: clamp(3.1rem, 11.5vw, 11rem);
  line-height: .86;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hero__h1 .line { display: block; overflow: hidden; }
/* The opening states are all behind .js, so with scripting off the page is
   simply legible rather than a column of blank space waiting on an event. */
.hero__h1 .line > span {
  display: block;
  transition: transform 1.15s var(--ease-out);
}
.js .hero__h1 .line > span { transform: translateY(105%) rotate(1.5deg); }
.hero__h1 .line:nth-child(2) > span { transition-delay: .09s; }
.is-ready .hero__h1 .line > span { transform: none; }
.hero__h1 .line:nth-child(2) { color: var(--accent); }

.hero__lede {
  max-width: 46ch;
  margin: clamp(1.6rem, 4vh, 2.6rem) 0 0;
  font-size: clamp(1.02rem, .96rem + .35vw, 1.28rem);
  line-height: 1.5;
  color: var(--ink-2);
  transition: opacity .9s .35s var(--ease-out), transform .9s .35s var(--ease-out);
}
.js .hero__lede { opacity: 0; transform: translateY(14px); }
.is-ready .hero__lede { opacity: 1; transform: none; }

.hero__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem 2.6rem;
  margin-top: clamp(1.8rem, 5vh, 3rem);
  transition: opacity .9s .6s var(--ease-out);
}
.js .hero__foot { opacity: 0; }
.is-ready .hero__foot { opacity: 1; }

.cta {
  display: inline-flex; align-items: center; gap: .9rem;
  font: 600 .8rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  padding-bottom: .55rem; border-bottom: 1px solid var(--ink);
}
.cta__rule {
  width: 2.4rem; height: 1px; background: var(--ink); position: relative;
  transition: width .45s var(--ease-out);
}
.cta__rule::after {
  content: ""; position: absolute; right: -1px; top: -3px;
  width: 7px; height: 7px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  transform: rotate(-45deg);
}
.cta:hover .cta__rule { width: 3.6rem; }

.hero__hint {
  display: flex; align-items: center; gap: .6rem; margin: 0;
  font: 400 .68rem/1 var(--f-mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.hero__hint-bar {
  display: block; width: 44px; height: 1px; background: var(--line); position: relative; overflow: hidden;
}
.hero__hint-bar::after {
  content: ""; position: absolute; inset: 0; background: var(--accent);
  animation: sweep 2.6s var(--ease-in-out) infinite;
}
@keyframes sweep {
  0%, 12%   { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}

@media (max-width: 900px) {
  /* The stage is fixed, so on a phone the type and the machine share one
     screen top to bottom. Every line the type gives back is a line the
     machine gets — and it needs several, because a phone's browser chrome
     eats the bottom of the viewport and that is exactly where the machine
     was standing. */
  .hero { min-height: auto; padding-top: 8vh; padding-bottom: 2rem; }
  .hero__h1 { font-size: clamp(2.4rem, 12vw, 3.6rem); }
  .hero__lede { max-width: 100%; font-size: .94rem; line-height: 1.5; }
  .eyebrow { margin-bottom: 1rem; gap: .4rem .8rem; font-size: .62rem; }
  .hero__foot { margin-top: 1.2rem; }
}

/* ── Bench ─────────────────────────────────────────────────── */

.bench { position: relative; z-index: 2; }
.bench__sticky {
  position: sticky; top: 0; height: 100svh;
  display: grid; grid-template-columns: 4.5rem 1fr 1fr; align-items: center;
  padding: 0 var(--gut);
  pointer-events: none;
}
.bench__sticky > * { pointer-events: auto; }

/* The rail is a jump list, not decoration — each mark scrolls the bench to
   that product, and the name only unfurls for the one you are pointing at. */
.bench__rail { grid-column: 1; align-self: center; }
.bench__rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.bench__rail button {
  display: flex; align-items: center; gap: .5rem;
  background: none; border: 0; padding: .18rem 0; margin: 0; cursor: pointer;
  font: 400 .6rem/1 var(--f-mono); color: var(--ink-3); letter-spacing: .06em;
  opacity: .45; transition: opacity .4s, color .4s;
}
.bench__rail button::before {
  content: ""; width: 14px; height: 1px; background: currentColor; flex: none;
  transition: width .45s var(--ease-out), background-color .4s;
}
.bench__rail button:hover { opacity: 1; color: var(--ink); }
.bench__rail button:hover::before { width: 24px; }
.bench__rail li.on button { opacity: 1; color: var(--accent); }
.bench__rail li.on button::before { width: 30px; }
.bench__rail .rail__name {
  max-width: 0; overflow: hidden; white-space: nowrap;
  opacity: 0; transform: translateX(-4px);
  transition: max-width .5s var(--ease-out), opacity .35s, transform .5s var(--ease-out);
}
.bench__rail button:hover .rail__name,
.bench__rail button:focus-visible .rail__name,
.bench__rail li.on .rail__name { max-width: 9rem; opacity: 1; transform: none; }
@media (max-width: 900px) { .bench__rail { display: none; } }

.bench__panels { grid-column: 3; position: relative; height: 100%; }
@media (max-width: 900px) { .bench__sticky { grid-template-columns: 1fr; } .bench__panels { grid-column: 1; } }

.panel {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-42%);
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease-in-out), transform .55s var(--ease-out), visibility 0s .5s;
  max-width: 30rem;
}
.panel.is-active {
  opacity: 1; visibility: visible; transform: translateY(-50%);
  transition: opacity .5s .06s var(--ease-in-out), transform .7s var(--ease-out), visibility 0s;
}
/* The machine is behind the words, and on a dark page a thin sans over a lit
   display is unreadable. Everything a panel says sits on its own frosted
   card, which is the only thing between the copy and the laptop. */
.panel__card {
  background: color-mix(in srgb, var(--paper-2) 74%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 1.5rem 1.6rem 1.7rem;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .85);
}
/* Where backdrop-filter is not available the card still has to be opaque
   enough to read against, so the fallback is a solid ground rather than a
   tint that lets the display through. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel__card { background: var(--paper-2); }
}

/* The product's own picture, which only the narrow layout shows. It is built
   by scripting on a phone and left in place if the window is then widened, so
   the wide layout has to say no to it rather than assume it is never there. */
.panel__shot { display: none; }

.panel__no {
  display: flex; align-items: center; gap: .8rem;
  margin: 0 0 .9rem; font: 400 .7rem/1 var(--f-mono);
  letter-spacing: .2em; color: var(--ink-3);
}
.panel__no span { color: var(--accent); }

/* Stage chip. Same vocabulary as the board further down the page, so a reader
   who has met one has met the other. */
.stage {
  font: 400 .58rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  font-style: normal; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: .4rem;
}
.stage::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.stage--live  { color: var(--accent); }
.stage--early { color: var(--accent-soft); }
.stage--build { color: var(--ink-3); }
.stage--build::before { background: none; box-shadow: inset 0 0 0 1px currentColor; }
.stage--sketch { color: var(--ink-3); }
.stage--sketch::before { background: none; box-shadow: inset 0 0 0 1px currentColor; opacity: .6; }
.panel__name {
  margin: 0; font-family: var(--f-display); font-weight: 500;
  font-variation-settings: "SOFT" 18, "WONK" 1, "opsz" 96;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: .96; letter-spacing: -.025em;
}
.panel__tag {
  margin: .7rem 0 1.1rem; font-size: 1.02rem; font-weight: 500;
  color: var(--ink); max-width: 26ch;
}
.panel__body {
  margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.6;
  max-width: 38ch;
}
.panel__meta {
  display: flex; flex-wrap: wrap; gap: 0 2.2rem; margin: 1.4rem 0 0;
  padding-top: .9rem; border-top: 1px solid var(--line);
}
.panel__meta dt {
  font: 400 .6rem/1.6 var(--f-mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.panel__meta dd { margin: 0; font-size: .85rem; font-weight: 500; }
.panel__link {
  display: inline-flex; align-items: baseline; gap: .5rem; margin-top: 1.3rem;
  font: 400 .74rem/1 var(--f-mono); letter-spacing: .02em;
  border-bottom: 1px solid var(--line); padding-bottom: .4rem;
  transition: border-color .3s, color .3s;
}
.panel__link:hover { border-bottom-color: var(--accent); color: var(--accent); }

/* Nothing behind it yet, so there is no address to print. */
.panel__soon {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  margin: 1.3rem 0 0; padding-bottom: .4rem;
  border-bottom: 1px dashed var(--line);
}
.panel__soon em {
  font: 400 .62rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  font-style: normal; color: var(--accent-soft);
  border: 1px solid currentColor; padding: .3rem .45rem;
}
.panel__soon span { font: 400 .72rem/1 var(--f-mono); color: var(--ink-3); }

.pending {
  font: 400 .58rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  font-style: normal;
  color: var(--accent-soft); border: 1px solid currentColor; padding: .22rem .4rem;
}

.panel--interlude { max-width: 44rem; }
.interlude { margin: 0; }
.interlude p {
  margin: 0; font-family: var(--f-display); font-weight: 300;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 144;
  font-size: clamp(1.8rem, 4.2vw, 3.2rem); line-height: 1.08;
  letter-spacing: -.02em; font-style: italic;
}
/* ── The bench on a phone ──────────────────────────────────────

   No laptop. One column is not enough page to hold a fourteen-inch machine and
   a card of copy at once, and the machine loses that argument every time: shrunk
   to fit above the card it is a grey lozenge with something unreadable on it.

   So the phone gets the product instead of the furniture. Each panel carries a
   picture of the thing itself — the handset four of them run on, the screen the
   other four are — standing behind the card with its foot tucked under it, the
   way a product shot on a shelf edge stands behind its label. The card is the
   fixed point at the bottom of the screen; the device takes whatever room is
   left above it and no more. */

@media (max-width: 900px) {
  /* Nothing renders into the stage on a phone, so it is not a layer worth
     keeping — and a fixed, contained, blend-mode layer over the whole viewport
     is not free to composite even when it is empty. */
  #stage { display: none; }

  .bench__sticky { align-items: stretch; padding-top: 4.4rem; padding-bottom: 5vh; }
  .panel, .panel.is-active {
    top: 0; bottom: 0; transform: none; max-width: 100%;
    display: flex; flex-direction: column; justify-content: flex-end;
  }

  /* The device. It gets the room above the card, whatever that comes to, and
     is measured to fit rather than given a size — a handset is about half as
     wide as it is tall and a screen is half again wider than it is tall, and
     the same box has to hold either without cropping one of them. */
  .panel__shot {
    display: flex; align-items: flex-end; justify-content: center;
    flex: 1 1 auto; min-height: 0; margin: 0;
  }
  .panel__shot canvas {
    display: block; width: auto; height: auto;
    max-width: 100%; max-height: 100%;
  }
  /* A landscape screen cannot fill the height a handset does: 16:10 scaled to
     a phone's width comes to about a quarter of it. Cropping it to fit would
     cost the thing the picture is of, so it takes the gutter back instead and
     runs edge to edge — as big as it can honestly get. */
  .panel__shot[data-device="screen"] { margin-inline: calc(var(--gut) * -1); }
  /* and the card is pulled up over the foot of it, which is what makes the
     device read as standing behind the card rather than resting on top of it */
  .panel__shot + .panel__card { margin-top: -2.6rem; }

  .panel__card {
    position: relative; z-index: 1;
    padding: 1rem 1.1rem 1.1rem; border-radius: 14px;
  }
  .panel__name { font-size: clamp(1.8rem, 7.6vw, 2.3rem); }
  .panel__tag { margin: .45rem 0 .6rem; font-size: .94rem; }
  /* The body is neither clipped nor clamped: the card is as tall as what it
     has to say and grows upward from the foot of the screen, so nothing is
     unreachable.

     What it must not be is a scroll container. The card sits at the bottom of
     a phone screen, which is precisely where a thumb lands, and a box with its
     own overflow swallows the swipe that was meant for the page — worse with
     `overscroll-behavior: contain`, which is a promise never to pass the
     gesture on. The card had barely anything to scroll and took the gesture
     anyway, so the page simply would not move under the one finger most likely
     to be pushing it. It is an ordinary block now, and a swipe anywhere on it
     scrolls the document, the way a swipe anywhere else on the page does. */
  .panel__body { font-size: .85rem; line-height: 1.5; max-width: 100%; }
  .panel__meta { margin-top: .8rem; padding-top: .55rem; gap: 0 1.4rem; }
  .panel__link, .panel__soon { margin-top: .8rem; }
}

/* ── Sheet (index) ─────────────────────────────────────────── */

.sheet, .board, .tab, .foot { position: relative; z-index: 3; background: var(--paper); }

.sheet {
  padding: clamp(5rem, 14vh, 9rem) var(--gut) clamp(4rem, 10vh, 7rem);
  border-top: 1px solid var(--line);
}
.sheet__head { display: grid; gap: 0; max-width: 62rem; }
.sheet h2, .board h2, .tab h2 {
  margin: 0; font-family: var(--f-display); font-weight: 500;
  font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 144;
  font-size: clamp(2.3rem, 6.4vw, 5rem); line-height: .94; letter-spacing: -.03em;
  text-wrap: balance;
}
.sheet__note {
  margin: 1.4rem 0 0; max-width: 46ch; color: var(--ink-2); font-size: .98rem;
}
.sheet__note code {
  font: 400 .85em/1 var(--f-mono); background: var(--paper-2);
  padding: .15em .35em; border-radius: 2px;
}

.ledger { margin-top: clamp(2.5rem, 7vh, 4.5rem); border-top: 1px solid var(--ink); }
.ledger__head, .ledger__row {
  display: grid;
  grid-template-columns: 3.2rem minmax(9rem, 1.1fr) minmax(10rem, 1.6fr) minmax(7rem, .8fr) minmax(11rem, 1.2fr);
  gap: 1rem; align-items: center;
  padding: 1.05rem .4rem;
  border-bottom: 1px solid var(--line);
}
.ledger__head {
  font: 400 .6rem/1 var(--f-mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
  padding-top: .7rem; padding-bottom: .7rem;
}
.ledger__row {
  position: relative; transition: background-color .35s, color .35s, padding-left .35s;
}
.ledger__row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent); transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .45s var(--ease-out);
}
a.ledger__row:hover { background: var(--paper-2); padding-left: 1.1rem; }
a.ledger__row:hover::before { transform: scaleY(1); }
.c-no { font: 400 .72rem/1 var(--f-mono); color: var(--ink-3); }
.c-name {
  font-family: var(--f-display); font-weight: 500;
  font-variation-settings: "SOFT" 16, "opsz" 60;
  font-size: 1.28rem; letter-spacing: -.015em; line-height: 1.1;
}
.c-what { color: var(--ink-2); font-size: .92rem; }
.c-plat { font: 400 .7rem/1.4 var(--f-mono); color: var(--ink-2); }
.c-addr {
  font: 400 .72rem/1.4 var(--f-mono); color: var(--ink);
  display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.c-addr i { font-style: normal; color: var(--accent); transition: transform .35s var(--ease-out); }
a.ledger__row:hover .c-addr i { transform: translate(3px, -3px); }
.ledger__row.is-pending { color: var(--ink-3); }
.ledger__row.is-pending .c-name { color: var(--ink-2); }
.ledger__row.is-pending .c-addr { color: var(--ink-3); gap: .7rem; }
a.ledger__row:hover .c-addr i.pending { transform: none; }
/* No address to visit, but there is still somewhere to go */
.ledger__row.is-pending .c-addr::after {
  content: "on the bench \2191";
  font: 400 .64rem/1 var(--f-mono); letter-spacing: .08em;
  color: var(--accent); opacity: 0; transform: translateX(-4px);
  transition: opacity .3s, transform .35s var(--ease-out);
}
a.ledger__row.is-pending:hover .c-addr::after,
a.ledger__row.is-pending:focus-visible .c-addr::after { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .ledger__head { display: none; }
  .ledger__row { grid-template-columns: 2.4rem 1fr; gap: .35rem 1rem; padding: 1.2rem .2rem; }
  .c-no { grid-row: 1 / span 4; align-self: start; padding-top: .3rem; }
  .c-name { font-size: 1.5rem; }
}

.sheet__aside {
  margin: clamp(2.5rem, 6vh, 4rem) 0 0; max-width: 52ch;
  padding-left: 1.2rem; border-left: 2px solid var(--line);
  color: var(--ink-2); font-size: .95rem;
}
.sheet__aside strong { color: var(--ink); font-weight: 600; }
/* Links inherit their colour with no underline everywhere else on this page,
   which would leave this one invisible. */
.sheet__aside a {
  color: var(--accent); border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.sheet__aside a:hover { border-bottom-color: var(--accent); }

/* ── Stage board ───────────────────────────────────────────── */

.board {
  background: var(--sheet-bg); color: var(--sheet-fg);
  padding: clamp(5rem, 14vh, 9rem) var(--gut);
  --b-line: rgba(236, 228, 212, .16);
  --b-dim:  rgba(236, 228, 212, .58);
}
.board .kicker { color: var(--accent-soft); }
.board__head {
  display: grid; gap: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end; gap: 2rem;
  margin-bottom: clamp(2.5rem, 7vh, 4rem);
}
.board__head h2 { grid-column: 1; }
.board__lede {
  grid-column: 2; margin: 0 0 .4rem; max-width: 40ch;
  font-size: .95rem; line-height: 1.6; color: var(--b-dim);
}
@media (max-width: 900px) {
  .board__head { grid-template-columns: 1fr; align-items: start; }
  .board__head h2, .board__lede { grid-column: 1; }
  .board__lede { margin-top: 1.4rem; }
  .board__head h2 br { display: none; }
}

/* filters */
.board__filters {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding-bottom: 1.4rem; border-bottom: 1px solid var(--b-line);
}
.stagebtn {
  display: inline-flex; align-items: baseline; gap: .5rem;
  background: none; color: var(--b-dim); cursor: pointer;
  border: 1px solid var(--b-line); border-radius: 999px;
  padding: .42rem .85rem;
  font: 400 .68rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  transition: color .3s, border-color .3s, background-color .3s;
}
.stagebtn b { font-weight: 400; }
.stagebtn i {
  font-style: normal; font-size: .58rem;
  color: var(--accent-soft); opacity: .8;
}
.stagebtn:hover { color: var(--sheet-fg); border-color: rgba(236, 228, 212, .4); }
.stagebtn.is-on {
  color: var(--sheet-bg); background: var(--sheet-fg); border-color: var(--sheet-fg);
}
.stagebtn.is-on i { color: var(--sheet-bg); opacity: .55; }

/* scale + rows share one column template */
.track__scale, .track__row {
  display: grid;
  grid-template-columns: 2.4rem minmax(7rem, .9fr) minmax(11rem, 1.5fr) 7.5rem minmax(12rem, 1.3fr);
  gap: 1.2rem; align-items: center;
}
.track__scale {
  margin: 1.1rem 0 .2rem; padding: 0 .2rem;
  font: 400 .58rem/1 var(--f-mono); letter-spacing: .14em;
  text-transform: uppercase; color: rgba(236, 228, 212, .38);
}
/* the four labels sit centred under the four meter cells */
.track__scale-labels {
  grid-column: 3; display: grid; grid-template-columns: repeat(4, 1fr);
}
.track__scale-labels i { font-style: normal; text-align: center; }

.track { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--b-line); }
.track__row {
  padding: 1.15rem .2rem;
  border-bottom: 1px solid var(--b-line);
  transition: opacity .45s var(--ease-in-out), background-color .35s;
}
.track__row:hover { background: rgba(236, 228, 212, .035); }
.track.is-filtered .track__row { opacity: .2; }
.track.is-filtered .track__row.is-hit { opacity: 1; }

.track__no {
  margin: 0; grid-column: 1;
  font: 400 .68rem/1 var(--f-mono); color: rgba(236, 228, 212, .34);
}
.track__name {
  margin: 0; grid-column: 2;
  font-family: var(--f-display); font-weight: 500;
  font-variation-settings: "SOFT" 16, "opsz" 60;
  font-size: 1.25rem; letter-spacing: -.015em; line-height: 1.15;
}
.track__stage {
  margin: 0; grid-column: 4;
  font: 400 .62rem/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-row, var(--accent-soft));
}
.track__row[data-stage="live"] .track__stage { color: var(--ok); }
.track__row[data-stage="early"] .track__stage { color: var(--accent-soft); }
.track__row[data-stage="build"] .track__stage,
.track__row[data-stage="sketch"] .track__stage { color: rgba(236, 228, 212, .45); }
.track__note {
  margin: 0; grid-column: 5;
  font-size: .84rem; line-height: 1.5; color: var(--b-dim);
}

/* the meter: four cells, a dot in the middle of each, filled up to the stage */
.track__meter {
  grid-column: 3; display: grid; grid-template-columns: repeat(4, 1fr);
  align-items: center; height: 22px;
}
.track__meter > span {
  position: relative; height: 1px; background: var(--b-line);
}
.track__meter > span::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: rgba(236, 228, 212, .22);
  transition: transform .5s var(--ease-out), opacity .4s, background-color .4s, box-shadow .4s;
}
/* The dots land one after another as the row arrives, but only while the row
   is still waiting to arrive — a row that never gets an observer keeps them. */
.track__row[data-reveal]:not(.in) .track__meter > span::after { transform: scale(.4); opacity: 0; }
.track__row .track__meter > span:nth-child(2)::after { transition-delay: .07s; }
.track__row .track__meter > span:nth-child(3)::after { transition-delay: .14s; }
.track__row .track__meter > span:nth-child(4)::after { transition-delay: .21s; }

/* filled segments up to the marker, and half of the marker's own segment */
.track__row[data-at="1"] .track__meter > span:nth-child(-n+1),
.track__row[data-at="2"] .track__meter > span:nth-child(-n+2),
.track__row[data-at="3"] .track__meter > span:nth-child(-n+3) { background: var(--accent); }
.track__row[data-at="0"] .track__meter > span:nth-child(1),
.track__row[data-at="1"] .track__meter > span:nth-child(2),
.track__row[data-at="2"] .track__meter > span:nth-child(3),
.track__row[data-at="3"] .track__meter > span:nth-child(4) {
  background: linear-gradient(to right, var(--accent) 50%, var(--b-line) 50%);
}
.track__row[data-at="0"] .track__meter > span:nth-child(-n+1)::after,
.track__row[data-at="1"] .track__meter > span:nth-child(-n+2)::after,
.track__row[data-at="2"] .track__meter > span:nth-child(-n+3)::after,
.track__row[data-at="3"] .track__meter > span:nth-child(-n+4)::after { background: var(--accent); }
/* the marker itself carries a ring so the eye lands on it first */
.track__row[data-at="0"] .track__meter > span:nth-child(1)::after,
.track__row[data-at="1"] .track__meter > span:nth-child(2)::after,
.track__row[data-at="2"] .track__meter > span:nth-child(3)::after,
.track__row[data-at="3"] .track__meter > span:nth-child(4)::after {
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 26%, transparent);
}
.track__row:hover .track__meter > span::after { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent); }

@media (max-width: 1000px) {
  .track__scale { display: none; }
  .track__row {
    grid-template-columns: 2.4rem 1fr auto;
    gap: .5rem 1rem; padding: 1.3rem .2rem;
  }
  .track__no { grid-column: 1; grid-row: 1; }
  .track__name { grid-column: 2; grid-row: 1; font-size: 1.4rem; }
  .track__stage { grid-column: 3; grid-row: 1; justify-self: end; }
  .track__meter { grid-column: 2 / -1; grid-row: 2; height: 18px; }
  .track__note { grid-column: 2 / -1; grid-row: 3; }
}

/* the three notes that used to be four house rules */
.board__notes {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-top: clamp(3rem, 8vh, 5rem);
  background: var(--b-line); border: 1px solid var(--b-line);
}
.board__notes > div {
  background: var(--sheet-bg);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: grid; align-content: start; gap: .8rem;
  transition: background-color .5s;
}
.board__notes > div:hover { background: var(--paper-3); }
.board__notes h3 {
  margin: 0; font-family: var(--f-display); font-weight: 500;
  font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 72;
  font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.1; letter-spacing: -.02em;
}
.board__notes p { margin: 0; font-size: .9rem; line-height: 1.62; color: var(--b-dim); }
.board__notes em { color: var(--accent-soft); font-style: normal; font-weight: 600; }

/* ── Tab (contact) ─────────────────────────────────────────── */

.tab {
  padding: clamp(5rem, 14vh, 9rem) var(--gut);
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  align-items: start;
}
.tab__lede { margin: 1.5rem 0 2rem; max-width: 38ch; color: var(--ink-2); }
.tab__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.tab__links a {
  font: 400 .82rem/1 var(--f-mono);
  border-bottom: 1px solid var(--line); padding-bottom: .35rem;
  display: inline-block; transition: border-color .3s, color .3s;
}
.tab__links a:hover { border-bottom-color: var(--accent); color: var(--accent); }

.tab__form { display: grid; gap: 1.1rem; max-width: 32rem; width: 100%; justify-self: end; }
.field { display: grid; gap: .4rem; }
.field label {
  font: 400 .62rem/1 var(--f-mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.field input, .field textarea, .field select {
  font: 400 .95rem/1.5 var(--f-text); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: .55rem .1rem; border-radius: 0; width: 100%;
  transition: border-color .3s;
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: right 8px center, right 3px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field select option { background: var(--paper); color: var(--ink); }
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-bottom-color: var(--accent);
}
.field.is-bad input, .field.is-bad textarea { border-bottom-color: var(--accent); }

.send {
  justify-self: start; display: inline-flex; align-items: center; gap: .8rem;
  margin-top: .5rem; padding: .85rem 1.5rem; cursor: pointer;
  background: var(--ink); color: var(--paper); border: 0;
  font: 600 .74rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  position: relative; overflow: hidden;
}
.send span, .send i { position: relative; z-index: 1; }
.send i { font-style: normal; transition: transform .4s var(--ease-out); }
.send::before {
  content: ""; position: absolute; inset: 0; background: var(--accent);
  transform: translateY(101%); transition: transform .45s var(--ease-out);
}
.send:hover::before { transform: none; }
.send:hover i { transform: translateX(5px); }
.send.is-done { background: var(--accent-soft); }

.tab__fineprint { margin: .3rem 0 0; font-size: .78rem; color: var(--ink-3); max-width: 40ch; }

/* ── Footer ────────────────────────────────────────────────── */

.foot { padding: clamp(3rem, 8vh, 5rem) var(--gut) 1.6rem; border-top: 1px solid var(--line); }
.foot__top {
  display: grid; gap: 2.5rem;
  grid-template-columns: minmax(12rem, 1fr) minmax(0, 2.4fr);
}
@media (max-width: 760px) { .foot__top { grid-template-columns: 1fr; } }
.mark--foot .mark__glyph { width: 34px; height: 34px; }
.mark--foot .mark__type { font-size: .86rem; }

.foot__cols {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.foot__cols h4 {
  margin: 0 0 .9rem; font: 400 .62rem/1 var(--f-mono);
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.foot__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.foot__cols li { font: 400 .74rem/1.3 var(--f-mono); }
.foot__cols a { color: var(--ink-2); transition: color .3s; }
.foot__cols a:hover { color: var(--accent); }
.foot__cols .is-muted li { color: var(--ink-3); }

.foot__legal {
  display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between;
  margin: clamp(2.5rem, 7vh, 4rem) 0 0; padding-top: 1rem; border-top: 1px solid var(--line);
  font: 400 .64rem/1.4 var(--f-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}

/* ── Reveal on scroll ──────────────────────────────────────── */

[data-reveal] { opacity: 0; transform: translateY(20px); }
.is-ready [data-reveal] {
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
[data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__h1 .line > span { transform: none; }
  .hero__lede, .hero__foot { opacity: 1; transform: none; }
  [data-reveal] { opacity: 1; transform: none; }
  .track__row[data-reveal]:not(.in) .track__meter > span::after { transform: none; opacity: 1; }
  .hero__hint-bar::after { animation: none; transform: translateX(0); }
  .panel { transition-duration: .01ms; }
  .bench__rail .rail__name { transition-duration: .01ms; }
}