/* StillCurrent: two ledgers. Baseline: the Mira deck system (chalk, Heat, Shade). */

/* Self-hosted Latin subsets (from Google Fonts, OFL): no third-party round trip before text paints */
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 800; font-display: swap;
  src: url(assets/fonts/bricolage-800-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(assets/fonts/hanken-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --chalk: #FAFAF8;
  --ink: #161412;
  --ink-2: #5C5650;      /* secondary on chalk, 6.9:1 */
  --rule: #E4E1DC;
  --cedar: #D35638;      /* large type on chalk only */
  --heat: #C14A2E;       /* white text 4.9:1 */
  --shade: #0E3B43;      /* white text 12:1 */
  --shade-2: #3F7880;
  --shade-3: #A8CBCD;    /* ink text 10.6:1 */
  --shade-tint: #A9C9CC; /* secondary on Shade, 6.9:1 */

  --display: "Bricolage Grotesque", "Clash Display", "Cabinet Grotesk", sans-serif;
  --body: "Hanken Grotesk", sans-serif;

  --m: clamp(20px, 5.8vw, 112px);     /* outer margin */
  --gap-section: clamp(96px, 14vw, 220px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--shade-2) var(--chalk); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.25rem);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
/* <picture> only picks the file (AVIF or WebP, by width); the <img> inside is what gets laid out */
picture { display: contents; }
source { display: none; }

::selection { background: var(--heat); color: #fff; }
.half--heat ::selection, .heat ::selection { background: var(--shade); color: #fff; }

a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--heat); outline-offset: 4px; border-radius: 4px; }
.half--heat :focus-visible, .ledger--hero :focus-visible, .nav :focus-visible { outline-color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: var(--m); top: -100px; z-index: 50;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px;
}
.skip:focus { top: 16px; }

/* ---------- Type ---------- */
.display {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.02em;
  line-height: 0.98;
  text-wrap: balance;
}
.display--xl { font-size: clamp(3.25rem, 9vw, 9rem); letter-spacing: -0.03em; line-height: 0.92; }
.display--lg { font-size: clamp(2.75rem, 6.2vw, 6.5rem); letter-spacing: -0.03em; line-height: 0.94; }
.display--md { font-size: clamp(2rem, 3.5vw, 3.75rem); }
.display--sm { font-size: clamp(1.625rem, 2.3vw, 2.5rem); }

.lede { font-size: clamp(1.125rem, 0.6vw + 0.95rem, 1.5rem); line-height: 1.42; max-width: 34ch; }
.lede--wide { max-width: 44ch; }

.tag {
  display: inline-block; vertical-align: 0.08em;
  font-weight: 500; font-size: 0.82em; line-height: 1;
  padding: 0.38em 0.7em 0.42em; border: 1.5px solid currentColor; border-radius: 999px;
  white-space: nowrap;
}

/* ---------- Pills (buttons) ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--body); font-weight: 500; font-size: 1rem; line-height: 1;
  padding: 14px 22px 15px; border-radius: 999px; text-decoration: none;
  transition: transform 300ms var(--ease-out), background-color 200ms ease, color 200ms ease;
  white-space: nowrap;
}
.pill:hover { text-decoration: none; transform: translateY(-2px); }
.pill:active { transform: translateY(0); }
.pill--chalk { background: var(--chalk); color: var(--ink); }
.pill--chalk:hover { background: #fff; }
.pill--ink { background: var(--ink); color: var(--chalk); }
.pill--lg { font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.3125rem); padding: 20px 32px 21px; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  transition: transform 300ms var(--ease-out), background-color 200ms ease;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(20px, 3vw, 40px) var(--m);
  color: #fff;
}
/* Lockup per the StillCurrent design system: symbol left of the wordmark, 12px gap,
   bottoms aligned, symbol 1.25 × the wordmark's height. */
.lockup { --wm: clamp(20px, 1.2vw + 10px, 28px); display: inline-flex; align-items: flex-end; gap: 12px; text-decoration: none; }
.lockup__wordmark { height: var(--wm); width: auto; }
.lockup__symbol { height: calc(var(--wm) * 1.25); width: auto; }
.nav nav { margin-left: auto; margin-right: clamp(8px, 1.6vw, 24px); }
.nav ul { display: flex; gap: clamp(20px, 2.6vw, 40px); }
.nav ul a { text-decoration: none; font-weight: 500; }
.nav ul a:hover { text-decoration: underline; }
/* After the hero the bar hides while scrolling down and returns, on Shade, when scrolling up */
.nav--solid { background: var(--shade); padding-top: 14px; padding-bottom: 14px; }
.nav--hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }
.nav__toggle, .nav__book { display: none; }

/* Small screens: the bar stays put (a thumb always has a way back to the menu) and the links
   live in a panel that drops from it. Without JS the links simply wrap onto a second row. */
@media (max-width: 860px) {
  :root { --nav-h: 64px; }
  .nav { flex-wrap: wrap; gap: 12px; padding: 0 var(--m); min-height: var(--nav-h); }
  .nav--hidden { transform: none; }
  .nav--solid { padding-top: 0; padding-bottom: 0; }
  .nav nav { order: 3; flex: 1 0 100%; margin: 0; padding-bottom: 14px; }
  .nav ul { flex-wrap: wrap; gap: 8px 24px; }
  .nav__cta { margin-left: auto; padding: 11px 18px 12px; font-size: 0.9375rem; }

  .nav--js { flex-wrap: nowrap; }
  .nav--js .nav__cta { margin-left: auto; }
  .nav--js .nav__toggle {
    display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: -8px;
    padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer;
  }
  .nav--js .nav__toggle:hover { background: rgba(255, 255, 255, 0.12); }
  .nav__toggle .cross { display: none; }
  .nav__toggle[aria-expanded="true"] .bars { display: none; }
  .nav__toggle[aria-expanded="true"] .cross { display: inline; }
  .nav--js nav {
    position: absolute; top: 100%; left: 0; right: 0; order: 0; flex: none;
    padding: 8px var(--m) 28px; background: var(--shade); border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path 380ms var(--ease-out), visibility 0s linear 380ms;
  }
  .nav--open nav { clip-path: inset(0 0 -40px 0); visibility: visible; transition-delay: 0s; }
  .nav--js ul { flex-direction: column; gap: 0; }
  .nav--js ul a:not(.pill) {
    display: block; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    font-family: var(--display); font-weight: 800; font-variation-settings: "opsz" 96;
    font-size: 1.75rem; letter-spacing: -0.025em; line-height: 1;
  }
  .nav--open { background: var(--shade); }
}
/* No room for the pill beside the lockup and the menu button: it moves into the panel */
@media (max-width: 560px) {
  .nav--js .nav__cta { display: none; }
  .nav--js .nav__toggle { margin-left: auto; }
  .nav--js .nav__book { display: block; margin-top: 24px; }
  .nav--js .nav__book .pill { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .nav--js nav { transition: none; } }
[id] { scroll-margin-top: 88px; }

/* ---------- Ledgers: the split ---------- */
.ledger {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  color: #fff;
}
.half { position: relative; isolation: isolate; padding: clamp(40px, 6vw, 112px) var(--m); }
.half::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--field); }
.half--shade { --field: var(--shade); background: var(--shade); }
.half--heat  { --field: var(--heat); background: var(--heat); }
.half--shade::before { transform-origin: 100% 50%; }
.half--heat::before  { transform-origin: 0 50%; }
.half--shade .lede { color: var(--shade-tint); }
.half--heat .lede  { color: #fff; }
.half .display + .lede { margin-top: clamp(24px, 2.6vw, 40px); }

/* Hero */
.ledger--hero { min-height: min(100vh, 1100px); min-height: min(100svh, 1100px); }
.ledger--hero .half {
  display: flex; flex-direction: column; justify-content: flex-start;
  padding-top: clamp(150px, 24vh, 260px); padding-bottom: clamp(160px, 20vh, 240px);
}
.ledger--hero .half--heat { padding-left: clamp(28px, 3.6vw, 72px); }
.bridge {
  position: absolute; left: 50%; bottom: clamp(32px, 6vh, 64px);
  transform: translateX(-50%); z-index: 2;
}
.bridge:hover { transform: translate(-50%, -2px); }

/* Moments */
.ledger--moment .half {
  display: flex; flex-direction: column; justify-content: flex-start;
  padding-top: clamp(150px, 13vw, 210px); padding-bottom: clamp(110px, 10vw, 170px);
}
.ledger--moment .half--heat { padding-left: clamp(28px, 3.6vw, 72px); }
.ledger--moment .lede { max-width: 38ch; }

/* Full snap on large screens, only inside "One stay, two perspectives": main.js sets .snap-stay
   while the screen is within it, so one arrow key or wheel flick moves one moment, like the deck.
   The end of the intro and the start of the belief section are the exits; elsewhere scrolling is free. */
@media (min-width: 1024px) and (min-height: 640px) {
  html.snap-stay { scroll-snap-type: y mandatory; }
  .stay > section, .belief { scroll-snap-align: start; }
  .intro { scroll-snap-align: end; }
  .ledger--moment { min-height: 100vh; min-height: 100svh; }
  .ledger--moment .half { justify-content: center; padding-top: 140px; padding-bottom: 120px; }
}
/* Firefox plays mandatory snapping as a wheel step followed by a second, corrective glide,
   which reads as stutter. There, sections settle into place only when you stop near one. */
@supports (-moz-appearance: none) {
  @media (min-width: 1024px) and (min-height: 640px) { html.snap-stay { scroll-snap-type: y proximity; } }
}
/* Full snap on tablets and phones too, again only inside "One stay": one swipe, one moment,
   and a fast flick can't skip past one (snap-stop). */
@media (max-width: 1023px) and (min-height: 480px) {
  html.snap-stay { scroll-snap-type: y mandatory; }
  .stay > section { scroll-snap-align: start; }
  .ledger--moment { scroll-snap-stop: always; }
  .belief { scroll-snap-align: start; }
  .intro { scroll-snap-align: end; }
  .ledger--moment { min-height: calc(100vh - var(--nav-h, 0px)); min-height: calc(100svh - var(--nav-h, 0px)); }
}
@media (max-width: 860px) { html { scroll-padding-top: var(--nav-h); } }
.seam-title {
  position: absolute; left: 50%; top: clamp(40px, 5vw, 72px); z-index: 2;
  transform: translateX(-50%);
  font-family: var(--display); font-weight: 800; font-variation-settings: "opsz" 96;
  font-size: clamp(1.25rem, 1.2vw + 0.8rem, 1.75rem); letter-spacing: -0.02em; line-height: 1;
  background: var(--chalk); color: var(--ink);
  padding: 14px 24px 16px; border-radius: 999px; white-space: nowrap;
}

/* Close */
.close__main { padding-top: var(--gap-section); padding-bottom: var(--gap-section); display: flex; flex-direction: column; justify-content: center; }
.close__main .lede { max-width: 40ch; }
.close__actions {
  display: flex; flex-direction: column; justify-content: center;
  padding-left: clamp(28px, 3.6vw, 72px);
}
/* Actions are set type on the Heat field: a ruled list of large links, no boxes */
.action {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(22px, 2.4vw, 36px) 0;
  border-top: 2px solid #fff;
  color: #fff; text-decoration: none;
  font-family: var(--display); font-weight: 800; font-variation-settings: "opsz" 96;
  font-size: clamp(1.875rem, 3vw, 3.25rem); letter-spacing: -0.025em; line-height: 1;
}
.action:last-of-type { border-bottom: 2px solid #fff; }
.action__label { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.16em; text-decoration-color: transparent; transition: text-decoration-color 200ms ease; }
.action svg { flex: none; transition: transform 400ms var(--ease-out); }
.action:hover .action__label { text-decoration-color: currentColor; }
.action:hover svg { transform: translateX(8px); }
.close__note { margin-top: 28px; color: #fff; font-size: 1rem; }

/* ---------- Chalk & colour sections ---------- */
.chalk { background: var(--chalk); color: var(--ink); padding: var(--gap-section) var(--m); }
.shade { background: var(--shade); color: #fff; padding: var(--gap-section) var(--m); }

.intro { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 32px; row-gap: 48px; }
.intro h2 { grid-column: 1 / span 9; }
.intro__body { grid-column: 6 / span 6; display: grid; gap: 1.1em; color: var(--ink-2); max-width: 62ch; }
.intro__claim { font-family: var(--display); font-weight: 800; font-variation-settings: "opsz" 96; font-size: clamp(1.75rem, 2.6vw, 2.75rem); line-height: 1.04; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; margin-top: 0.4em; }

.stay__head { padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(56px, 7vw, 112px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; }
.stay__key { display: flex; align-items: center; gap: 10px 28px; flex-wrap: wrap; color: var(--ink-2); font-size: 1rem; }
.stay__key > span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.swatch { width: 18px; height: 18px; border-radius: 999px; display: inline-block; }
.swatch--shade { background: var(--shade); }
.swatch--heat { background: var(--heat); }

.method { background: var(--shade-3); }
.method__steps {
  margin-top: clamp(56px, 7vw, 112px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); row-gap: 56px;
}
.method__steps li { display: flex; flex-direction: column; }
.method__steps h3 { border-top: 2px solid var(--ink); padding-top: 24px; margin-bottom: 18px; }
.method__steps p { max-width: 36ch; }

/* One piece of evidence per step: real images from real assessments */
.step__fig { margin: 0 0 32px; }
.step__fig img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--shade); }
.step__fig--pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 4px; }
.step__fig--pair img { aspect-ratio: 2 / 3; }
.step__fig--pair figcaption { grid-column: 1 / -1; }
.step__fig figcaption { margin-top: 12px; font-size: 0.9375rem; line-height: 1.45; color: var(--ink); }
.step__fig figcaption .tag { margin-right: 0.4em; }
@media (min-width: 961px) { .step__fig figcaption { min-height: calc(3 * 1.45em); } }

/* Proposal: the real deck, previewed and linked */
.proposal__head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 32px; row-gap: 28px; }
.proposal__head h2 { grid-column: 1 / span 7; }
.proposal__head .lede { grid-column: 1 / span 7; color: var(--ink-2); }
.proposal__slides { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.proposal__slides a { display: grid; gap: 12px; text-decoration: none; color: var(--ink); }
.proposal__slides img { width: 100%; height: auto; aspect-ratio: 16 / 9; outline: 1px solid var(--rule); transition: transform 400ms var(--ease-out); }
.proposal__slides a:hover img { transform: translateY(-4px); }
.proposal__slides span { font-weight: 500; }
.proposal__slides a:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
.proposal__actions { margin-top: clamp(40px, 5vw, 64px); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.proposal__pdf { font-weight: 500; }
.proposal__pdf span { color: var(--ink-2); font-weight: 400; }
@media (max-width: 760px) {
  .proposal__head h2, .proposal__head .lede { grid-column: 1 / -1; }
  .proposal__slides { grid-template-columns: minmax(0, 1fr); }
}

/* Belief: chalk ground, the statement in Heat (design-system pairing chalk/heat, 4.7:1 at display size), then the promise on balance */
.belief {
  background: var(--chalk); color: var(--ink);
  padding: var(--gap-section) var(--m);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 32px; row-gap: clamp(56px, 7vw, 112px);
}
.belief__line { grid-column: 1 / span 11; max-width: 17ch; color: var(--heat); }
.belief__body { grid-column: 6 / span 7; display: grid; gap: 20px; padding-top: 28px; border-top: 2px solid var(--ink); }
.belief__body p { max-width: 54ch; color: var(--ink-2); }

.stables { padding-top: clamp(80px, 9vw, 140px); padding-bottom: clamp(80px, 9vw, 140px); }
.stables__inner { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 32px; align-items: start; }
.stables h2 { grid-column: 1 / span 5; grid-row: 1; }
.stables .lede { grid-column: 1 / span 5; grid-row: 2; margin-top: clamp(24px, 2.4vw, 40px); color: var(--shade-tint); }
.stables__list {
  grid-column: 7 / span 6; grid-row: 1 / span 3;
  font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.3125rem); line-height: 1.35;
}
.stables__list li { padding: 16px 0; border-top: 1px solid rgba(169, 201, 204, 0.35); }
.stables__list li:last-child { border-bottom: 1px solid rgba(169, 201, 204, 0.35); }
.stables__link { grid-column: 1 / span 5; grid-row: 3; align-self: start; margin-top: 32px; font-weight: 500; font-size: 1.125rem; }

.about { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 32px; row-gap: 48px; }
/* minmax(0, 1fr): an implicit auto track would size to the photo's intrinsic 640px in Firefox,
   pushing it past the column and off the right edge */
.about__head { grid-column: 1 / span 5; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-content: start; min-width: 0; }
.about h2 { color: var(--cedar); }
.about__photo { width: 100%; max-width: 360px; min-width: 0; height: auto; aspect-ratio: 1; object-fit: cover; }
.about__body { grid-column: 6 / span 7; display: grid; gap: 1.1em; align-content: start; max-width: 64ch; color: var(--ink-2); }
.about__big { font-family: var(--display); font-weight: 800; font-variation-settings: "opsz" 96; font-size: clamp(1.75rem, 2.6vw, 2.75rem); line-height: 1.04; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 0.3em; text-wrap: balance; }
.about__link { font-weight: 500; color: var(--ink); }

/* ---------- Footer ---------- */
.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 40px var(--m) 48px; background: var(--ink); color: var(--chalk);
}
.foot__sig { display: flex; align-items: baseline; gap: 0.5em; font-size: 1.125rem; }
.foot__wordmark { height: 18px; width: auto; transform: translateY(2px); }
.foot__meta { color: var(--shade-tint); font-size: 0.9375rem; }

/* ---------- Signature: the seam ----------
   Content is visible by default. With JS and motion allowed, each split section's colour
   fields start pulled in to the seam and open outward when it scrolls in. Only transform
   and opacity animate, so the compositor does the work and scrolling stays smooth. */
@media (prefers-reduced-motion: no-preference) {
  .js .ledger--moment .half::before,
  .js .ledger--close .half::before { transition: transform 700ms var(--ease-out); }
  .js .ledger--moment .half > *,
  .js .ledger--close .half > * { transition: opacity 400ms var(--ease-out) 80ms, transform 550ms var(--ease-out) 60ms; }
  .js .ledger--moment .half,
  .js .ledger--close .half { background: transparent; }

  .js .ledger--moment:not(.is-in) .half::before,
  .js .ledger--close:not(.is-in) .half::before { transform: scaleX(0.45); }
  .js .ledger--moment:not(.is-in) .half > *,
  .js .ledger--close:not(.is-in) .half > * { opacity: 0; }
  .js .ledger--moment:not(.is-in) .half--shade > *,
  .js .ledger--close:not(.is-in) .half--shade > * { transform: translateX(24px); }
  .js .ledger--moment:not(.is-in) .half--heat > *,
  .js .ledger--close:not(.is-in) .half--heat > * { transform: translateX(-24px); }

  .js .ledger--moment .seam-title { transition: transform 500ms var(--ease-out), opacity 300ms ease; }
  .js .ledger--moment:not(.is-in) .seam-title { opacity: 0; transform: translate(-50%, 12px) scale(0.92); }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .intro h2, .intro__body,
  .about__head, .about__body,
  .stables h2, .stables .lede, .stables__list, .stables__link { grid-column: 1 / -1; }
  .stables h2, .stables .lede, .stables__list, .stables__link { grid-row: auto; }
  .stables__list { margin-top: 40px; }
  .method__steps { grid-template-columns: minmax(0, 1fr); }
  .belief__line, .belief__body { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .ledger { grid-template-columns: 1fr; }
  .ledger--hero { min-height: 0; }
  /* stacked: seams are horizontal. The master line reads whole, then the CTA sits on the
     Heat/chalk edge; each moment's label sits on the edge above its pair. */
  .ledger--hero .half { padding-top: 112px; padding-bottom: 64px; justify-content: flex-end; }
  .ledger--hero .half--heat { padding-left: var(--m); padding-top: 64px; padding-bottom: 72px; justify-content: flex-start; }
  .bridge, .bridge:hover {
    position: relative; left: auto; bottom: auto; transform: none;
    justify-self: center; width: calc(100% - 2 * var(--m));
    margin: -30px 0; white-space: normal; text-align: center;
    background: var(--ink); color: var(--chalk);
  }
  .intro { padding-top: calc(var(--gap-section) + 30px); }

  /* Stacked, one moment is one screen: Shade over Heat, the label on the seam between them,
     and a chalk gap before the next moment, so each pair reads as a unit and not a list.
     Equal rows put the seam at exactly 50%. */
  .ledger--moment { grid-auto-rows: 1fr; }
  .ledger--moment + .ledger--moment { margin-top: 12px; }
  .ledger--moment .half { padding-top: clamp(32px, 5svh, 56px); padding-bottom: clamp(32px, 5svh, 56px); }
  .ledger--moment .half--shade { padding-bottom: clamp(36px, 6svh, 60px); }
  .ledger--moment .half--heat { padding-top: clamp(36px, 6svh, 60px); }
  .ledger--moment .half--shade { justify-content: flex-end; }
  .ledger--moment .half--heat { padding-left: var(--m); justify-content: flex-start; }
  /* type scales with the screen's height too, so both halves always fit one screen */
  .ledger--moment .display--md { font-size: clamp(1.375rem, min(7.2vw, 3.8svh), 2.5rem); }
  .ledger--moment .lede { font-size: clamp(0.9375rem, 2.3svh, 1.0625rem); }
  .ledger--moment .display + .lede { margin-top: clamp(12px, 2svh, 24px); }
  .seam-title { top: 50%; transform: translate(-50%, -50%); }
  .ledger--moment { overflow-x: clip; }

  .close__actions { padding: 56px var(--m) 64px; }

  @media (prefers-reduced-motion: no-preference) {
    /* stacked, the reveal still runs sideways: Shade arrives from the left, Heat from the right,
       so the two halves meet as a pair instead of dropping in one above the other */
    .half--shade::before { transform-origin: 0 50%; }
    .half--heat::before  { transform-origin: 100% 50%; }
    .js .ledger--moment:not(.is-in) .half::before,
    .js .ledger--close:not(.is-in) .half::before { transform: scaleX(0.45); }
    .js .ledger--moment:not(.is-in) .half--shade > *,
    .js .ledger--close:not(.is-in) .half--shade > * { transform: translateX(-24px); }
    .js .ledger--moment:not(.is-in) .half--heat > *,
    .js .ledger--close:not(.is-in) .half--heat > * { transform: translateX(24px); }
    .js .ledger--moment:not(.is-in) .seam-title { transform: translate(-50%, -50%) scale(0.92); }
    .js .ledger--moment .half--heat::before,
    .js .ledger--close .half--heat::before { transition-delay: 120ms; }
    .js .ledger--close { overflow-x: clip; }
  }
}

/* ---------- Lightbox: a calm Shade 3 panel over the dimmed page ----------
   The media box has one fixed 4:3 shape for every image, sized to the screen, and the panel
   wraps it: no empty space, and the panel never changes size while paging. */
.step__fig[data-zoom] img, .step__fig[data-zoom] .sunpath { cursor: zoom-in; }
.step__fig[data-zoom] img:focus-visible, .step__fig[data-zoom] .sunpath:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.step__fig--diagram .sunpath { width: 100%; height: auto; aspect-ratio: 4 / 3; }

.lightbox {
  --lb-w: min(calc(100vw - 2 * var(--m)), calc((100dvh - 200px) * 4 / 3), 1040px);
  width: fit-content; height: fit-content; max-width: none; max-height: none; margin: auto; padding: 0; border: 0; border-radius: 0;
  background: var(--shade-3); color: var(--ink); overflow: hidden;
  opacity: 0; transform: scale(0.98);
  transition: opacity 280ms var(--ease-out), transform 380ms var(--ease-out), display 380ms allow-discrete, overlay 380ms allow-discrete;
}
.lightbox[open] { opacity: 1; transform: none; }
@starting-style { .lightbox[open] { opacity: 0; transform: scale(0.98); } }
.lightbox::backdrop { background: rgba(14, 59, 67, 0.82); transition: background-color 280ms ease, display 380ms allow-discrete, overlay 380ms allow-discrete; }
@starting-style { .lightbox[open]::backdrop { background: rgba(14, 59, 67, 0); } }

.lightbox__panel { width: var(--lb-w); display: grid; gap: 14px; padding: 14px 14px 20px; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; }
.lightbox__pager { display: flex; align-items: center; gap: 4px; }
.lightbox__count { min-width: 3.4em; text-align: center; font-size: 0.9375rem; font-weight: 500; }
.lightbox__nav {
  width: 34px; height: 34px; border: 0; border-radius: 999px; background: transparent; color: var(--ink);
  display: grid; place-items: center; cursor: pointer; padding: 0; transition: background-color 200ms ease;
}
.lightbox__nav:hover { background: rgba(22, 20, 18, 0.1); }
.lightbox__close { padding: 9px 16px 10px; font-size: 0.9375rem; }
.lightbox__media {
  width: 100%; aspect-ratio: 4 / 3; display: flex; gap: 6px; justify-content: center; align-items: center;
  touch-action: pan-y; transition: opacity 200ms ease; overflow: hidden;
}
.lightbox__media:focus { outline: none; }
.lightbox__media.is-switching { opacity: 0; }
.lightbox__media img { width: 100%; height: 100%; object-fit: cover; min-width: 0; }
.lightbox__media picture:has(+ picture) img, .lightbox__media picture + picture img { width: calc(50% - 3px); }
.lightbox__media svg { width: auto; height: 100%; max-width: 100%; }
.lightbox__caption { max-width: 64ch; min-height: calc(3 * 1.45em); margin: 0 auto; text-wrap: pretty; padding: 0 6px; text-align: center; font-size: 0.9375rem; line-height: 1.45; }
@media (max-width: 760px) {
  .lightbox { --lb-w: calc(100vw - 24px); }
  .lightbox__panel { padding: 10px 10px 16px; gap: 10px; }
  .lightbox__caption { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .lightbox, .lightbox::backdrop, .lightbox__media { transition: none; } }