/* ═══════════════════════════════════════════════════════════════
   Narek Ohanyan — personal site
   Palette and type are pinned to the hero image: near-black ground,
   warm bone text, and the muted gold picked out of the sweater.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── type ──────────────────────────────────────────────────────────
     Display serif for headings; a sans at 400 for body copy (the previous
     light serif read thin at text sizes); Inter for nav, labels and UI. */
  --display: "Playfair Display", "Didot", Georgia, serif;
  --body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ui:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* ── surface ── */
  --bg:              #050505;
  --bg-raise:        #0c0c0d;
  --stage:           #000000;

  /* ── text ── */
  --fg:              #F2EEE7;   /* 18.4:1 on --bg */
  --fg-muted:        #A6A099;   /* 7.6:1  on --bg */
  --fg-faint:        #6E6862;   /* 3.4:1  — decorative / large only */

  /* ── accent (sampled from the sweater in the photograph) ── */
  --accent:          #C9A66B;
  --accent-soft:     rgba(201, 166, 107, .16);

  --line:            rgba(242, 238, 231, .14);
  --line-strong:     rgba(242, 238, 231, .32);

  /* ── brand light mode ──────────────────────────────────────────────
     Contrast on white: charcoal 16.9:1 · forest 11.9:1.
     On forest: white 11.9:1 · lemon 9.8:1. Charcoal on lemon 14.0:1.
     Lemon is 1.2:1 on white — background only, never text on light. */
  --white:      #FFFFFF;
  --alabaster:  #FBFBFB;
  --forest:     #1B3E26;
  --lemon:      #F5EC9A;
  --charcoal:   #1A1D20;

  /* ── rhythm ── */
  --gut:   clamp(1.25rem, 4vw, 4.5rem);
  --s-sm:  clamp(1rem, 2vw, 1.75rem);
  --s-md:  clamp(2rem, 5vw, 4rem);
  --s-lg:  clamp(3rem, 7vw, 5.5rem);
  --s-xl:  clamp(3.75rem, 8vw, 7rem);

  --ease:  cubic-bezier(.22, .61, .36, 1);
}

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

/* Paper on the canvas so overscrolling past the footer stays in daylight;
   the fixed black stage covers the viewport for the whole dark opening. */
html {
  background: var(--white);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: transparent;
  color: var(--fg);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }

a { color: inherit; }

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

.skip-link {
  position: fixed;
  top: -100px; left: var(--gut);
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--fg);
  color: var(--bg);
  font-family: var(--ui);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

.label {
  margin: 0;
  font-family: var(--ui);
  font-size: clamp(.62rem, 1.15vmin, .75rem);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ═══════════════════════════════════════════════════════════════
   NAV — transparent over both the portal and the video
   ═══════════════════════════════════════════════════════════════ */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.4vw, 1.85rem) var(--gut);
  padding-top: max(clamp(1rem, 2.4vw, 1.85rem), env(safe-area-inset-top));
  color: var(--fg);
  transition: color .5s var(--ease);
}

/* The bar's surface lives on a pseudo-element, never on .nav itself.
   backdrop-filter (like filter and transform) makes an element the
   containing block for its fixed-position descendants — with it on .nav,
   the mobile drawer's top:0/bottom:0 resolved against the 77px bar and
   the menu opened only a sliver tall. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .5s var(--ease), border-color .5s var(--ease),
              backdrop-filter .5s var(--ease);
}
/* over the video: a soft gradient is enough */
.nav[data-scrim="on"]::before {
  background: linear-gradient(to bottom, rgba(5,5,5,.55), rgba(5,5,5,0));
}
/* over the page: daylight surface, and the bar's ink flips with it */
.nav[data-scrim="solid"] { color: var(--charcoal); }
.nav[data-scrim="solid"]::before {
  background: rgba(255, 255, 255, .92);
  border-bottom-color: rgba(26, 29, 32, .10);
}
@supports (backdrop-filter: blur(1px)) {
  .nav[data-scrim="solid"]::before {
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(18px) saturate(140%);
  }
}
/* the supplied logo is white artwork — invert it against the paper bar */
.nav[data-scrim="solid"] .nav__mark-glyph img { filter: invert(1); }

.nav__mark {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  font-family: var(--ui);
  font-size: clamp(.8rem, 1.4vmin, .92rem);
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
}
/* The supplied logo carries a lot of transparent padding — the mark itself
   sits at 23.2–76.8% across and 1.5–66.3% down. These offsets crop to it so
   it optically fills the bar instead of floating in its own whitespace. */
.nav__mark-glyph {
  position: relative;
  flex: none;
  width: 46px;
  height: 24px;              /* mark aspect ≈ 1.905 */
  overflow: hidden;
  opacity: .9;
  transition: opacity .25s var(--ease);
}
.nav__mark-glyph img {
  position: absolute;
  width: 186.3%;
  height: 154.4%;
  left: -43.17%;
  top: -2.36%;
  max-width: none;
}
.nav__mark:hover .nav__mark-glyph { opacity: 1; }
@media (max-width: 560px) { .nav__mark-text { display: none; } }

.nav__links {
  display: flex;
  gap: clamp(1rem, 2.6vw, 2.5rem);
}
.nav__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* touch target */
  padding: 0 .15rem;
  font-family: var(--ui);
  font-size: clamp(.82rem, 1.45vmin, .95rem);
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  /* Two-word items ("Media & News") were breaking onto a second line in a
     single-row bar once the viewport tightened toward ~1280px. */
  white-space: nowrap;
  color: inherit;
  opacity: .92;
  cursor: pointer;
  transition: opacity .25s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: calc(50% - .72em);   /* text is centred in a 44px target */
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { transform: scaleX(1); }

/* Current page is marked by weight alone — no rule, so it never competes
   with the hover underline. */
.nav__links a[aria-current="page"] { opacity: 1; font-weight: 700; }
.nav__sub a[aria-current="page"] { background: rgba(245, 236, 154, .18); opacity: 1; font-weight: 600; }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  min-width: 44px;               /* full touch target when label is hidden */
  padding: .5rem .75rem;
  margin-inline-end: -.75rem;
  background: none;
  border: 0;
  color: inherit;
  font-family: var(--ui);
  font-size: clamp(.72rem, 1.25vmin, .82rem);
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .75;
  cursor: pointer;
  transition: opacity .25s var(--ease);
}
.nav__toggle:hover { opacity: 1; }
.nav__toggle-icon { width: 13px; height: 13px; }
.nav__toggle-icon svg { width: 100%; height: 100%; }
.nav__toggle .i-play { display: none; }
.nav__toggle[aria-pressed="true"] .i-play  { display: block; }
.nav__toggle[aria-pressed="true"] .i-pause { display: none; }
@media (max-width: 720px) { .nav__toggle-label { display: none; } }

/* ── dropdown ─────────────────────────────────────────────────────────── */
.nav__group { position: relative; }
.nav__group-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 44px;
  padding: 0 .15rem;
  background: none;
  border: 0;
  font-family: var(--ui);
  font-size: clamp(.82rem, 1.45vmin, .95rem);
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: inherit;
  opacity: .92;
  cursor: pointer;
  transition: opacity .25s var(--ease);
}
.nav__group-btn:hover { opacity: 1; }
.nav__chev { width: 14px; height: 14px; transition: transform .35s var(--ease); }
.nav__group-btn[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

.nav__sub {
  position: absolute;
  top: calc(100% + .5rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 250px;
  padding: .5rem;
  /* The .5rem gap above was a dead zone: moving the pointer down from the
     button left the group and closed the menu before it could be reached.
     This bridges it so the travel path stays inside the hover target. */
  background: var(--forest);
  border-radius: 1.25rem .3rem 1.25rem .3rem;   /* leaf */
  box-shadow: 0 26px 50px -22px rgba(10, 25, 15, .6);
  z-index: 30;
}
.nav__sub::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -.75rem;
  height: .75rem;
}
.nav__sub[hidden] { display: none; }
/* A wider hit area than the label, so the pointer has room to travel. */
.nav__sub a { position: relative; }
.nav__sub a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem .9rem;
  border-radius: .6rem;
  font-family: var(--ui);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: none;
  text-decoration: none;
  color: #fff;
  opacity: .9;
  white-space: nowrap;
  transition: background-color .25s var(--ease), opacity .25s var(--ease);
}
.nav__sub a::after { display: none; }
.nav__sub a:hover { background: rgba(245, 236, 154, .16); opacity: 1; }

/* ── tools + burger ───────────────────────────────────────────────────── */
/* Above the drawer (z-index 25) so the burger stays reachable as the close
   control once the panel is open. */
.nav__tools {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: .35rem;
  transition: color .3s var(--ease);
}
/* With the drawer open these controls sit on the dark panel, not on the
   bar — so they take the panel's ink rather than inheriting the bar's,
   which left the close button charcoal-on-forest and nearly invisible. */
.nav__links[data-open="true"] ~ .nav__tools { color: #fff; }

.nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}
.nav__burger-bars { display: block; width: 22px; height: 14px; position: relative; }
.nav__burger-bars i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.6px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.nav__burger-bars i:nth-child(1) { top: 0; }
.nav__burger-bars i:nth-child(2) { top: 6.2px; }
.nav__burger-bars i:nth-child(3) { top: 12.4px; }
.nav__burger[aria-expanded="true"] .nav__burger-bars i:nth-child(1) { transform: translateY(6.2px) rotate(45deg); }
.nav__burger[aria-expanded="true"] .nav__burger-bars i:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] .nav__burger-bars i:nth-child(3) { transform: translateY(-6.2px) rotate(-45deg); }

.nav__backdrop {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: rgba(8, 18, 12, .55);
  backdrop-filter: blur(3px);
  animation: fade-in .35s var(--ease);
}
.nav__backdrop[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }

/* ── drawer ───────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .nav__burger { display: inline-flex; }

  /* Off-canvas panel. Forest green so it reads the same whether it opens
     over the dark opening or the white page. */
  .nav__links {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 25;
    width: min(360px, 86vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: .2rem;
    padding: calc(env(safe-area-inset-top) + 5.5rem) 1.5rem 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--forest);
    color: #fff;
    box-shadow: -30px 0 60px -30px rgba(0,0,0,.6);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .5s var(--ease), visibility .5s var(--ease);
  }
  .nav__links[data-open="true"] { transform: none; visibility: visible; }

  .nav__links > a,
  .nav__group-btn {
    justify-content: space-between;
    min-height: 52px;
    padding: .5rem .25rem;
    font-size: 1rem;
    letter-spacing: .05em;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.12);
    border-radius: 0;
  }
  .nav__links > a::after { display: none; }
  .nav__group { width: 100%; }
  .nav__group-btn { width: 100%; }

  /* Accordion rather than a floating panel on small screens */
  .nav__sub {
    position: static;
    transform: none;
    min-width: 0;
    padding: .25rem 0 .5rem .75rem;
    background: none;
    box-shadow: none;
    border-radius: 0;
  }
  .nav__sub a { color: rgba(255,255,255,.86); font-size: .95rem; }
}

/* ── translated navigation that no longer fits ──────────────────────────
   Armenian, German and Russian labels run far longer than the English
   ones — the Armenian bar overflowed by 85px at 1440px and pushed the
   language switcher off screen. site.js measures the real width and
   sets data-cramped, so the drawer takes over at whatever width that
   particular language stops fitting, instead of a guessed breakpoint
   per locale. */

  .nav[data-cramped="true"] .nav__burger { display: inline-flex; }

  /* Off-canvas panel. Forest green so it reads the same whether it opens
     over the dark opening or the white page. */
  .nav[data-cramped="true"] .nav__links {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 25;
    width: min(360px, 86vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: .2rem;
    padding: calc(env(safe-area-inset-top) + 5.5rem) 1.5rem 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--forest);
    color: #fff;
    box-shadow: -30px 0 60px -30px rgba(0,0,0,.6);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .5s var(--ease), visibility .5s var(--ease);
  }
  .nav[data-cramped="true"] .nav__links[data-open="true"] { transform: none; visibility: visible; }

  .nav[data-cramped="true"] .nav__links > a, .nav[data-cramped="true"] .nav__group-btn {
    justify-content: space-between;
    min-height: 52px;
    padding: .5rem .25rem;
    font-size: 1rem;
    letter-spacing: .05em;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.12);
    border-radius: 0;
  }
  .nav[data-cramped="true"] .nav__links > a::after { display: none; }
  .nav[data-cramped="true"] .nav__group { width: 100%; }
  .nav[data-cramped="true"] .nav__group-btn { width: 100%; }

  /* Accordion rather than a floating panel on small screens */
  .nav[data-cramped="true"] .nav__sub {
    position: static;
    transform: none;
    min-width: 0;
    padding: .25rem 0 .5rem .75rem;
    background: none;
    box-shadow: none;
    border-radius: 0;
  }
  .nav[data-cramped="true"] .nav__sub a { color: rgba(255,255,255,.86); font-size: .95rem; }



/* ═══════════════════════════════════════════════════════════════
   STAGE — fixed viewport theatre for the portal transition
   ═══════════════════════════════════════════════════════════════ */

.stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: var(--stage);
}

/* The video is never scaled to fit the hole — it always renders as a
   full-bleed layer and the *opening* is what grows. That keeps the
   arrival frame pixel-perfect instead of an upscaled crop. */
.stage__video-wrap {
  position: absolute;
  inset: 0;
  will-change: clip-path;
}
.stage__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 50%;
  will-change: transform;
}

.stage__portal {
  position: absolute;
  top: 0; left: 0;          /* real geometry is written by main.js */
  width: auto; height: auto;
  max-width: none;
  will-change: transform, opacity;
  user-select: none;
  -webkit-user-drag: none;
}

/* Locked to the photograph's own box and scaled with it, so the frame
   always resolves to pure black exactly at the image edge. Anything
   outside is the black stage, which makes the boundary invisible. */
.stage__vignette {
  position: absolute;
  top: 0; left: 0;          /* geometry mirrors the portal, set by main.js */
  pointer-events: none;
  background:
    radial-gradient(ellipse farthest-side at 48.145% 41.584%,
      rgba(0,0,0,0)   54%,
      rgba(0,0,0,.30) 68%,
      rgba(0,0,0,.78) 84%,
      rgba(0,0,0,.97) 94%,
      #000            100%);
  will-change: transform, opacity;
}

/* Top band carries the nav, bottom band carries the arrival copy, and the
   middle is left clear so the footage still reads. */
.stage__scrim {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.66) 0%,
    rgba(0,0,0,.18) 20%,
    rgba(0,0,0,0)   40%,
    rgba(0,0,0,.38) 62%,
    rgba(0,0,0,.88) 100%);
  will-change: opacity;
}

/* ── loading readout, centred in the opening ── */
.loader {
  position: absolute;
  left: var(--hx, 50%);
  top: var(--hy, 48%);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: baseline;
  gap: .12em;
  font-family: var(--ui);
  color: var(--fg-muted);
  letter-spacing: .04em;
  pointer-events: none;
  transition: opacity .7s var(--ease);
}
.loader__num { font-size: clamp(1.1rem, 3vmin, 1.8rem); color: var(--fg); }
.loader__pct { font-size: clamp(.6rem, 1.3vmin, .8rem); }
.loader__label {
  margin-inline-start: .7em;
  font-size: clamp(.55rem, 1.1vmin, .68rem);
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .6;
}
.loader[hidden] { display: flex; opacity: 0; }

/* ═══════════════════════════════════════════════════════════════
   HERO TITLE — overlapping serif arrangement around the opening
   ═══════════════════════════════════════════════════════════════ */

.hero {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: opacity, transform;
}

.hero__title {
  position: absolute;
  inset: 0;
  margin: 0;
  font-weight: 400;
}

.hero__pre,
.hero__word,
.hero__amp {
  position: absolute;
  display: block;
  font-family: var(--display);
  color: var(--fg);
  line-height: .92;
  white-space: nowrap;
  /* Layered so the type holds up over any frame of the video */
  text-shadow:
    0 1px 2px  rgba(0,0,0,.55),
    0 4px 22px rgba(0,0,0,.70),
    0 0 70px   rgba(0,0,0,.55);
}

/* ── Everything below is anchored to the measured opening (--hx/--hy/--rx/--ry,
   written by main.js) rather than to viewport percentages. That keeps the
   arrangement in the same relationship to the circle at every desktop size,
   and is what guarantees "& Activism" always sits inside the window rather
   than dangling below it on short or wide screens. ── */

.hero__pre {
  left: max(var(--gut), calc(var(--hx) - var(--rx) * 1.17));
  top:  calc(var(--hy) - var(--ry) * 0.81);
  font-size: clamp(1.05rem, 4.4vmin, 2.5rem);
  font-weight: 400;
  letter-spacing: .01em;
}

.hero__word {
  font-weight: 700;
  letter-spacing: -.015em;
  font-size: clamp(2.3rem, 11.4vmin, 9.5rem);
}
.hero__word--a {
  left: max(var(--gut), calc(var(--hx) - var(--rx) * 1.17));
  top:  calc(var(--hy) - var(--ry) * 0.44);
}
/* 0.58 is as low as this can sit: the display line is 0.338 of the radius
   tall at the worst aspect ratio, so anything past ~0.66 would push the
   word below the opening on some desktop size. */
.hero__word--b {
  left: calc(var(--hx) + var(--rx) * 0.58);
  top:  calc(var(--hy) + var(--ry) * 0.58);
}

.hero__amp {
  left: calc(var(--hx) + var(--rx) * 0.50);
  top:  calc(var(--hy) + var(--ry) * 0.16);
  font-size: clamp(1.5rem, 5.6vmin, 3.4rem);
  font-style: italic;
}

/* Cap the display size against viewport width too, so a long word like
   "Activism" cannot run off the right edge on a wide, short window. */
@media (min-width: 701px) {
  .hero__word { font-size: clamp(2.7rem, min(11.4vmin, 7.4vw), 9.5rem); }
}

.hero__year {
  position: absolute;
  right: 7%;
  top: 20%;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.9rem, 8vmin, 5.2rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 238, 231, .38);
  text-align: end;
}
/* "since" is set solid and small above the outlined numerals */
.hero__since {
  display: block;
  margin-bottom: .5em;
  font-family: var(--ui);
  font-size: max(.62rem, .21em);   /* never drops below legible on mobile */
  font-weight: 500;
  letter-spacing: .3em;
  text-indent: .3em;              /* optical: balances the trailing track */
  text-transform: uppercase;
  color: var(--fg-muted);
  -webkit-text-stroke: 0;
}

/* ── scroll cue, mirroring the arc in the reference ── */
.hero__scroll {
  position: absolute;
  left: 5.5%;
  top: 58%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}
.hero__scroll-arc {
  position: absolute;
  left: 50%;
  top: -1.6rem;
  width: clamp(7rem, 17vmin, 11rem);
  height: clamp(7rem, 17vmin, 11rem);
  transform: translateX(-50%);
  border: 1px solid rgba(242, 238, 231, .17);
  border-radius: 50%;
  pointer-events: none;
}
.hero__scroll-text {
  writing-mode: vertical-rl;
  font-family: var(--ui);
  font-size: clamp(.55rem, 1.1vmin, .7rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.hero__scroll-line {
  width: 1px;
  height: clamp(2.2rem, 6vmin, 4rem);
  background: linear-gradient(to bottom, var(--fg-muted), transparent);
}
.hero__scroll-line::after {
  content: "";
  display: block;
  position: relative;
  top: 100%;
  left: -3px;
  width: 7px; height: 7px;
  border-inline-end: 1px solid var(--fg-muted);
  border-bottom: 1px solid var(--fg-muted);
  transform: translateY(-8px) rotate(45deg);
  opacity: .8;
}

/* ── Opening sequence ──────────────────────────────────────────────────
   The parts rise in sequence once the display face has loaded. Only the
   children animate: main.js owns opacity/transform on .hero itself for
   the scroll transition, so the two never fight over the same property. */

.hero__pre,
.hero__word,
.hero__amp,
.hero__year,
.hero__scroll {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity   1s   var(--ease),
    transform 1.2s var(--ease);
}
.hero__caption {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  transition:
    opacity   1s   var(--ease),
    transform 1.2s var(--ease);
}

.hero.is-ready .hero__pre,
.hero.is-ready .hero__word,
.hero.is-ready .hero__amp,
.hero.is-ready .hero__year,
.hero.is-ready .hero__scroll { opacity: 1; transform: none; }
.hero.is-ready .hero__caption { opacity: 1; transform: translateX(-50%); }

.hero.is-ready .hero__pre       { transition-delay: .10s; }
.hero.is-ready .hero__word--a   { transition-delay: .26s; }
.hero.is-ready .hero__amp       { transition-delay: .50s; }
.hero.is-ready .hero__word--b   { transition-delay: .60s; }
.hero.is-ready .hero__year      { transition-delay: .86s; }
.hero.is-ready .hero__scroll    { transition-delay: 1.00s; }
.hero.is-ready .hero__caption   { transition-delay: 1.10s; }

.hero__caption {
  position: absolute;
  left: 50%;
  bottom: 7%;
  margin: 0;
  width: max-content;
  max-width: 84vw;
  text-align: center;
  text-wrap: balance;
  font-family: var(--ui);
  font-size: clamp(.55rem, 1.15vmin, .72rem);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ═══════════════════════════════════════════════════════════════
   ARRIVAL — the state once you are inside the video
   ═══════════════════════════════════════════════════════════════ */

.arrival {
  position: absolute;
  left: var(--gut);
  right: var(--gut);
  bottom: clamp(3.5rem, 10vh, 7rem);
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.arrival__name {
  margin: 0 0 .55rem;
  font-family: var(--display);
  font-size: clamp(2.6rem, 9vmin, 6.5rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.028em;
  text-shadow:
    0 1px 2px  rgba(0,0,0,.5),
    0 4px 26px rgba(0,0,0,.65);
}
/* The role line carries real information, so it is set for reading rather
   than for display: body face, generous measure, full foreground weight. */
.arrival__line {
  margin: 0;
  max-width: 40ch;
  text-wrap: pretty;
  font-family: var(--body);
  font-size: clamp(1.15rem, 3vmin, 1.75rem);
  font-weight: 300;
  line-height: 1.45;
  color: var(--fg);
  text-shadow:
    0 1px 2px  rgba(0,0,0,.55),
    0 2px 20px rgba(0,0,0,.7);
}
.arrival__cue {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-shadow: 0 1px 12px rgba(0,0,0,.8);
  margin-top: clamp(1.5rem, 4vh, 2.75rem);
  min-height: 44px;              /* touch target */
  font-family: var(--ui);
  font-size: clamp(.62rem, 1.15vmin, .75rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
  cursor: pointer;
  transition: gap .3s var(--ease), color .3s var(--ease);
}
.arrival__cue svg { width: 15px; height: 15px; }
.arrival__cue:hover { gap: 1rem; color: var(--accent); }
.stage[data-state="arrived"] .arrival { pointer-events: auto; }

/* Runway for the transition. Deliberately long: the portal completes at
   ~2.7 viewports, leaving well over a full screen of scrolling to sit in
   the arrival state before the page begins to encroach. */
.scroll-zone { height: 420vh; }

/* ═══════════════════════════════════════════════════════════════
   CONTENT — daylight brand palette
   ═══════════════════════════════════════════════════════════════ */

/* Past the portal the page turns over into the brand light mode.
   Redefining the semantic tokens here re-themes everything below.
   Contrast on white: charcoal 16.9:1 · forest 11.9:1.
   Lemon is a BACKGROUND ONLY — it is 1.2:1 on white and must never
   carry text on a light surface. */
.content {
  position: relative;
  z-index: 2;

  --fg:          var(--charcoal);
  --fg-muted:    #4A5057;
  --fg-faint:    #6B7178;
  --bg:          var(--white);
  --accent:      var(--forest);
  --line:        rgba(26, 29, 32, .12);
  --line-strong: rgba(26, 29, 32, .28);

  background: var(--white);
  color: var(--charcoal);
}
/* Dissolve out of the footage into the page. */
.content--portal::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -20vh;
  height: 20vh;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0)   0%,
    rgba(255,255,255,.12) 42%,
    rgba(255,255,255,.55) 74%,
    rgba(255,255,255,.92) 92%,
    var(--white)          100%);
  pointer-events: none;
}

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

/* ── shared type ─────────────────────────────────────────────────────── */
.eyebrow {
  margin: 0;
  font-family: var(--ui);
  font-size: clamp(.7rem, 1.15vmin, .78rem);
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--forest);
}
.eyebrow--on-dark { color: var(--lemon); }

.section-title {
  margin: .85rem 0 0;
  font-family: var(--display);
  font-size: clamp(2.1rem, 5.6vmin, 4.2rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.025em;
  text-wrap: balance;
  color: var(--charcoal);
}
.section-title--on-dark { color: #fff; }

.content p { font-family: var(--body); }

/* ── the leaf ────────────────────────────────────────────────────────────
   One shape language across the site: two opposite corners drawn out to a
   point, two left soft. Enough to read as a leaf without becoming a motif. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 52px;
  padding: .95rem 1.9rem;
  font-family: var(--ui);
  font-size: clamp(.86rem, 1.35vmin, .96rem);
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: transform .45s var(--ease), border-radius .45s var(--ease),
              background-color .35s var(--ease), box-shadow .45s var(--ease);
}
.btn--leaf {
  margin-top: clamp(1.6rem, 3.4vh, 2.6rem);
  border-radius: 1.75rem .25rem 1.75rem .25rem;   /* leaf */
  background: var(--lemon);
  color: var(--charcoal);                          /* 14:1 on lemon */
  box-shadow: 0 1px 0 rgba(26,29,32,.06), 0 12px 30px -18px rgba(26,29,32,.5);
}
.btn--leaf:hover,
.btn--leaf:focus-visible {
  border-radius: .8rem;                            /* leaf unfurls to a box */
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(26,29,32,.06), 0 18px 38px -18px rgba(26,29,32,.55);
}
.btn--leaf span { transition: transform .45s var(--ease); }
.btn--leaf:hover span { transform: translateX(4px); }

/* ═════════ 1 · TRUST BANNER ══════════════════════════ white ═════════ */
.trust {
  /* First section under a ~104px fixed bar, so the top needs to clear it
     before any breathing room of its own is visible. */
  padding: clamp(7.5rem, 11vh, 8.5rem) 0 clamp(2.75rem, 5vh, 4rem);
  background: var(--white);
}

/* The bar is fixed and ~104px tall, so anything an anchor jumps to needs
   to clear it or the heading lands underneath. */
#main [id] { scroll-margin-top: 118px; }
.trust__head {
  padding-inline: var(--gut);
  max-width: 1400px;
  margin: 0 auto clamp(2.4rem, 5vh, 3.6rem);
  text-align: center;
}
.trust__sub {
  margin: .7rem 0 0;
  font-size: clamp(1.06rem, 2vmin, 1.24rem);
  color: var(--fg-muted);
}

/* Edge-to-edge rail; the row is cloned by main.js so the loop is seamless. */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: .5rem;
  /* A fixed, narrow fade rather than 9% of the width: at 9% the softened
     edge reached 128px on a wide screen and swallowed the first logo, which
     is the one that most needs to be legible. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 26px,
                                      #000 calc(100% - 26px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 26px,
                                      #000 calc(100% - 26px), transparent);
}
.marquee__track { display: flex; width: max-content; }
.marquee__row {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
  margin: 0;
  padding: 0 clamp(1.25rem, 2.5vw, 2.5rem);
  list-style: none;
  animation: marquee-slide 64s linear infinite;
}
.marquee__item { flex: none; display: grid; place-items: center; }
.marquee__item img {
  display: block;
  width: auto;
  height: clamp(38px, 5.4vmin, 60px);
  max-width: 170px;
  object-fit: contain;
  opacity: .95;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.marquee__item img:hover { opacity: 1; transform: scale(1.06); }

@keyframes marquee-slide { to { transform: translateX(-100%); } }

/* Pause on hover, and whenever motion is dialled down. */
.marquee:hover .marquee__row,
.marquee:focus-within .marquee__row,
.marquee[data-paused="true"] .marquee__row { animation-play-state: paused; }

/* ═════════ 2 · METRICS ═══════════════════════════════ forest ════════ */
.metrics {
  padding: clamp(3.25rem, 7vh, 5.25rem) var(--gut);
  background: var(--forest);
}
.metrics__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1.6rem, 3vw, 3rem);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.metric { text-align: center; color: #fff; }
.metric__icon {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin: 0 auto 1.1rem;
  color: var(--lemon);                 /* 9.8:1 on forest */
}
.metric__icon svg { width: 100%; height: 100%; }
.metric__value {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.4rem, 5.4vmin, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;  /* no width jitter while counting */
}
.metric__suffix { color: var(--lemon); }
.metric__label {
  display: block;
  margin-top: .85rem;
  font-family: var(--ui);
  font-size: clamp(.86rem, 1.45vmin, .96rem);
  line-height: 1.5;
  color: rgba(255,255,255,.9);
}

/* ═════════ 3 · QUOTE ═════════════════════════════════ white ═════════ */
.quote-block {
  padding: clamp(3.5rem, 8vh, 6rem) var(--gut);
  background: var(--white);
}
.quote {
  position: relative;
  max-width: 50ch;
  margin: 0 auto;
  text-align: center;
}
.quote::before {
  content: "\201C";
  display: block;
  font-family: var(--display);
  font-size: clamp(4rem, 11vmin, 8rem);
  line-height: .7;
  color: var(--lemon);
  /* Lemon is decorative here only — the quote itself is charcoal. */
}
.quote__text { margin: 0; }
.quote__text p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.9vmin, 2.15rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.36;
  letter-spacing: -.015em;
  color: var(--charcoal);
  text-wrap: pretty;
}
.quote__by {
  margin-top: clamp(1.6rem, 3.5vh, 2.4rem);
  font-family: var(--ui);
  font-size: clamp(.78rem, 1.25vmin, .88rem);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.quote__by cite { font-style: italic; text-transform: none; letter-spacing: .04em; }

/* ═════════ 4 · WELCOME / JOURNEY ═════════════════ alabaster ═════════ */
.journey {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
  padding: var(--s-xl) var(--gut);
  max-width: 1400px;
  margin-inline: auto;
}
.content > .journey { background: var(--alabaster); max-width: none; }
.journey__media { position: sticky; top: 112px; }
.journey__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  /* the leaf again, at portrait scale */
  border-radius: 42% 6% 42% 6%;
  transition: border-radius .8s var(--ease);
}
.journey__media img:hover { border-radius: 1.5rem; }
.journey__body > p {
  margin: 1.4rem 0 0;
  font-size: clamp(1.06rem, 1.9vmin, 1.2rem);
  font-weight: 400;
  line-height: 1.75;
  color: var(--fg-muted);
  max-width: 64ch;
}
.journey__body > p:first-of-type { margin-top: clamp(1.6rem, 3.5vh, 2.4rem); }

/* ═════════ 5 · PILLAR CARDS ══════════════════════════ white ═════════ */
.pillars {
  padding: var(--s-xl) var(--gut);
  max-width: 1400px;
  margin-inline: auto;
}
.pillars__head { text-align: center; margin-bottom: clamp(2.5rem, 5.5vh, 4rem); }
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.6vw, 2.25rem);
}

.leaf-card {
  position: relative;
  display: block;
  isolation: isolate;
  min-height: clamp(360px, 46vh, 480px);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  /* leaf at rest → rounded box on hover */
  border-radius: 5.5rem .5rem 5.5rem .5rem;
  transition: border-radius .65s var(--ease), transform .65s var(--ease),
              box-shadow .65s var(--ease);
}
.leaf-card:hover,
.leaf-card:focus-visible {
  border-radius: 1.25rem;
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(27, 62, 38, .55);
}
.leaf-card__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1s var(--ease);
}
.leaf-card:hover .leaf-card__bg { transform: scale(1.06); }

/* Dark tint at rest so the title always clears contrast; it lifts on hover
   while a forest wash keeps the revealed copy legible over any photo. */
.leaf-card__veil {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(10,20,14,.94) 0%, rgba(10,20,14,.72) 42%, rgba(10,20,14,.58) 100%);
  transition: background .6s var(--ease);
}
.leaf-card:hover .leaf-card__veil,
.leaf-card:focus-visible .leaf-card__veil {
  background:
    linear-gradient(to top, rgba(27,62,38,.95) 0%, rgba(27,62,38,.86) 55%, rgba(27,62,38,.72) 100%);
}

.leaf-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: inherit;
}
.leaf-card__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: auto;
  color: var(--lemon);
  transition: transform .55s var(--ease);
}
.leaf-card__icon svg { width: 100%; height: 100%; }
.leaf-card:hover .leaf-card__icon { transform: scale(1.18); }

.leaf-card__title {
  margin: 1.5rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.5vmin, 1.9rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: #fff;
  text-wrap: balance;
}
/* Held closed at rest, opened on hover — the card stays a poster until
   you ask it for detail. */
.leaf-card__copy {
  display: block;
  margin-top: .9rem;
  max-width: 52ch;
  font-family: var(--body);
  font-size: clamp(.98rem, 1.7vmin, 1.08rem);
  line-height: 1.66;
  color: rgba(255,255,255,.94);
  opacity: 0;
  max-height: 0;
  transform: translateY(10px);
  overflow: hidden;
  transition: opacity .5s var(--ease), transform .55s var(--ease),
              max-height .6s var(--ease), margin-top .5s var(--ease);
}
.leaf-card:hover .leaf-card__copy,
.leaf-card:focus-visible .leaf-card__copy {
  opacity: 1; max-height: 22em; transform: none;
}
.leaf-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  align-self: flex-start;
  min-height: 44px;
  margin-top: 1.35rem;
  padding: .7rem 1.5rem;
  font-family: var(--ui);
  font-size: clamp(.8rem, 1.3vmin, .9rem);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--charcoal);
  background: var(--lemon);
  border-radius: 1.4rem .2rem 1.4rem .2rem;
  transition: border-radius .55s var(--ease), gap .45s var(--ease);
}
.leaf-card:hover .leaf-card__cta { border-radius: .7rem; gap: .95rem; }

/* ═════════ 6 · BOOK ══════════════════════════════ alabaster ═════════ */
.book {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  padding: var(--s-xl) var(--gut);
  background: var(--alabaster);
}
.book__inner { max-width: 1400px; margin-inline: auto; }
.book__cover {
  justify-self: center;
  max-width: 420px;
  width: 100%;
}
/* The mockup is a transparent PNG, so a box-shadow would draw a rectangle
   around the artwork. drop-shadow follows the alpha instead. */
.book__cover img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 34px rgba(26, 29, 32, .28));
  transform: rotate(-2deg);
  transition: transform .7s var(--ease), filter .7s var(--ease);
}
.book__cover img:hover { filter: drop-shadow(0 32px 44px rgba(26, 29, 32, .34)); }
.book__cover img:hover { transform: rotate(0deg) translateY(-6px); }
.book__body { max-width: 62ch; }
.book__sub {
  margin: .5rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vmin, 1.7rem);
  font-style: italic;
  color: var(--fg-muted);
}
.book__by {
  margin: 1.1rem 0 0;
  font-family: var(--ui);
  font-size: clamp(.76rem, 1.2vmin, .85rem);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--forest);
}
.book__body > p:last-of-type {
  margin: 1.5rem 0 0;
  font-size: clamp(1.06rem, 1.9vmin, 1.2rem);
  font-weight: 400;
  line-height: 1.75;
  color: var(--fg-muted);
}

/* ═════════ 7 · CTA ═══════════════════════════════════ forest ════════ */
.cta {
  padding: clamp(4rem, 9vh, 6.5rem) var(--gut);
  background: var(--forest);
  text-align: center;
}
.cta__inner { max-width: 800px; margin-inline: auto; }
.cta__copy {
  margin: clamp(1.5rem, 3.5vh, 2.4rem) auto 0;
  max-width: 62ch;
  font-size: clamp(1.06rem, 1.9vmin, 1.2rem);
  font-weight: 400;
  line-height: 1.75;
  color: rgba(255,255,255,.92);
}

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding: clamp(1.75rem, 4vh, 2.5rem) var(--gut);
  background: #16321F;                  /* a shade under the CTA */
  border-top: 1px solid rgba(255,255,255,.10);
}
.footer p {
  margin: 0;
  font-family: var(--ui);
  font-size: clamp(.7rem, 1.1vmin, .78rem);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

/* ═════════ responsive ════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .metrics__grid { grid-template-columns: repeat(3, 1fr); row-gap: clamp(2.2rem, 5vh, 3rem); }
  .journey { grid-template-columns: 1fr; }
  .journey__media { position: static; max-width: 420px; }
  .book { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .pillars__grid { grid-template-columns: 1fr; }
  /* No hover on touch: the copy is shown by default so nothing is
     unreachable, and the shape stays a soft leaf. */
  .leaf-card { min-height: 0; border-radius: 3rem .4rem 3rem .4rem; }
  /* With the copy permanently over the photo, the resting veil is not
     enough — it left body text near 4:1 on the brighter images. */
  .leaf-card__veil {
    background: linear-gradient(to top,
      rgba(10,20,14,.96) 0%, rgba(10,20,14,.90) 55%, rgba(10,20,14,.76) 100%);
  }
  .leaf-card__copy { opacity: 1; max-height: none; transform: none; overflow: visible; }
  .leaf-card__icon { margin-bottom: 1.5rem; }
}
@media (max-width: 620px) {
  .metrics__grid { grid-template-columns: repeat(2, 1fr); }
  .metric:last-child { grid-column: 1 / -1; }
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════════════
   Narrow screens — the title needs a calmer arrangement
   ═══════════════════════════════════════════════════════════════ */

/* Small handsets: the bar runs out of room before anything else does, so
   tighten it rather than letting the pause control fall off the edge. */
@media (max-width: 430px) {
  :root { --gut: 1rem; }
  .nav__links { gap: .7rem; }
  /* PORTFOLIO is a <button> because it opens a submenu, so a selector that
     only names `a` leaves it at the drawer's 1rem while every link beside it
     drops to .78rem — it read a size larger than its neighbours. Both
     elements are listed here for the same reason they are listed together in
     the drawer block above. */
  .nav__links a,
  .nav__group-btn { font-size: .78rem; letter-spacing: .05em; }
  .nav__mark-glyph { width: 38px; height: 20px; }
  .nav__toggle { padding: .5rem .35rem; margin-inline-end: -.35rem; }
}

@media (max-width: 700px) {
  .hero__pre     { left: 8%;  top: 15%; }
  .hero__word--a { left: 6%;  top: 20%; }
  .hero__amp     { left: 62%; top: 68%; }
  .hero__word--b { left: 36%; top: 74.5%; }
  .hero__year    { right: 8%; top: 14%; }
  .hero__scroll  { left: 7%;  top: 50%; }
  .hero__scroll-arc { display: none; }
  .hero__caption { bottom: 5%; letter-spacing: .2em; }
  .work__item { grid-template-columns: auto 1fr; }
  .work__arrow { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Reduced motion — no scroll-scrub, no dolly. The page is delivered
   in its final readable state and the video starts paused.
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

body[data-motion="reduced"] .scroll-zone { height: 100vh; }
body[data-motion="reduced"] .hero { display: none; }
body[data-motion="reduced"] .stage__portal { display: none; }
body[data-motion="reduced"] .stage__vignette { opacity: .5; }
body[data-motion="reduced"] .arrival { opacity: 1; pointer-events: auto; }

/* ═══════════════════════════════════════════════════════════════
   ABOUT — the spiral descent
   ═══════════════════════════════════════════════════════════════ */

.about { background: var(--alabaster); }

/* ── executive bio ──────────────────────────────────────────────────── */
.bio {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2.25rem, 5vw, 5rem);
  align-items: start;
  max-width: 1400px;
  margin-inline: auto;
  padding: calc(clamp(7.5rem, 11vh, 8.5rem)) var(--gut) var(--s-lg);
}
.bio__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 38% 6% 38% 6%;          /* the house leaf */
  transition: border-radius .8s var(--ease);
}
.bio__media img:hover { border-radius: 1.25rem; }
.bio__role {
  margin: 1rem 0 0;
  font-family: var(--ui);
  font-size: clamp(.9rem, 1.5vmin, 1.02rem);
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--forest);
}
.bio__role span { opacity: .4; margin: 0 .35rem; }
.bio__body > p:not(.eyebrow):not(.bio__role) {
  margin: 1.4rem 0 0;
  font-size: clamp(1.06rem, 1.9vmin, 1.2rem);
  line-height: 1.75;
  color: var(--fg-muted);
  max-width: 66ch;
}

/* ── the descent ────────────────────────────────────────────────────── */
.spiral {
  position: relative;
  padding: var(--s-lg) var(--gut) var(--s-xl);
}
.spiral__head { text-align: center; margin-bottom: clamp(3rem, 8vh, 6rem); }

/* The axis itself: a hairline the fill travels down. */
.spiral__track { position: relative; }
.spiral__axis {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  margin-inline-start: -1.5px;
  background: rgba(27, 62, 38, .13);
  border-radius: 2px;
}
.spiral__fill {
  display: block;
  width: 100%;
  height: 0;
  background: var(--forest);
  border-radius: 2px;
  /* height is written every frame — no transition, or it would lag scroll */
}

.spiral__list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each era carries its own camera. One shared perspective across the whole
   list meant a single 3D context ~13,000px tall with 17 promoted layers
   inside it, which the compositor simply refused to paint. */
.era {
  position: relative;
  min-height: 76vh;
  display: grid;
  align-items: center;
  perspective: 1500px;
  perspective-origin: 50% 50%;
}

/* The node sits on the axis at this era's own centre, so it meets the
   filled line exactly as the card reaches focus. */
.era__node {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--alabaster);
  border: 2px solid rgba(27, 62, 38, .35);
  transition: background-color .45s var(--ease), border-color .45s var(--ease),
              box-shadow .45s var(--ease), transform .45s var(--ease);
}
.era.is-live .era__node {
  background: #FCE300;                    /* the brief's node yellow */
  border-color: #FCE300;
  transform: scale(1.35);
  box-shadow: 0 0 0 7px rgba(252, 227, 0, .22);
}

/* Full-bleed so its transform-origin coincides with the axis: rotating
   this element swings the card around the central line. */
.era__stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.era[data-side="l"] .era__media { grid-column: 1; }
.era[data-side="l"] .era__card  { grid-column: 2; }
.era[data-side="r"] .era__media { grid-column: 2; grid-row: 1; }
.era[data-side="r"] .era__card  { grid-column: 1; grid-row: 1; }

/* The archive runs from 0.56 (tall portrait) to 1.95 (wide), so nothing is
   cropped to a house ratio — each frame takes the picture's own shape and
   is bounded by height instead, which keeps the row rhythm even. */
.era__media {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.era__media img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 58vh;
  border-radius: 1.5rem .3rem 1.5rem .3rem;
  box-shadow: 0 30px 60px -34px rgba(20, 35, 25, .5);
}
/* The book cover is a transparent mockup — no card shadow behind it. */
.era__media img[src$=".png"] {
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 22px 30px rgba(20, 35, 25, .3));
}

.era__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.2vmin, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--charcoal);
  text-wrap: balance;
}
.era__title cite { font-style: italic; }
.era__text {
  margin: 1rem 0 0;
  font-size: clamp(1rem, 1.75vmin, 1.12rem);
  line-height: 1.72;
  color: var(--fg-muted);
  max-width: 46ch;
}
.era__link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  margin-top: .5rem;
  font-family: var(--ui);
  font-size: .9rem;
  font-weight: 600;
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1px solid rgba(27, 62, 38, .3);
}
.era__link:hover { border-bottom-color: var(--forest); }


/* ── education & certifications ──────────────────────────────────────────
   Three tiers of credential, each given a weight that matches how much
   it actually carries: the degree gets a full card, the two residencies
   get wide rows with a dated rail, and the eighteen certificates get a
   compact grid a reader can filter rather than wade through.

   The whole block sits on alabaster so it separates from the white
   spiral above and the forest CTA below without needing a rule. */
.creds {
  padding: var(--s-xl) var(--gut);
  background: var(--alabaster);
  border-top: 1px solid var(--line);
}
.creds__inner { max-width: 1200px; margin-inline: auto; }

.creds__head { text-align: center; margin-bottom: clamp(2.75rem, 6vh, 4.5rem); }
.creds__lede {
  max-width: 62ch;
  margin: 1.5rem auto 0;
  font-size: clamp(1rem, 1.8vmin, 1.12rem);
  line-height: 1.75;
  color: var(--fg-muted);
  text-wrap: pretty;
}

/* Sub-heading shared by the fellowship and certificate tiers. */
.creds__sub {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.2vmin, 2.15rem);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.15;
  color: var(--charcoal);
}

/* ── the degree ────────────────────────────────────────────────────── */
.degree {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2.25rem .4rem 2.25rem .4rem;      /* the house leaf */
  box-shadow: 0 24px 60px -46px rgba(26, 29, 32, .5);
}

/* A lemon rule under the dates, echoing the axis on the timeline above. */
.degree__span {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1rem;
  padding-bottom: .55rem;
  font-family: var(--ui);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--forest);
  border-bottom: 3px solid var(--lemon);
}
.degree__span span { opacity: .5; }

.degree__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.45rem, 3vmin, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--charcoal);
  text-wrap: balance;
}
.degree__minor {
  margin: .5rem 0 0;
  font-family: var(--ui);
  font-size: clamp(.95rem, 1.7vmin, 1.05rem);
  font-weight: 600;
  color: var(--forest);
}
.degree__school {
  margin: 1.15rem 0 0;
  font-family: var(--body);
  font-size: clamp(1rem, 1.8vmin, 1.1rem);
  font-weight: 600;
  color: var(--charcoal);
}
.degree__place {
  margin: .2rem 0 0;
  font-family: var(--ui);
  font-size: .88rem;
  color: var(--fg-faint);
}

.degree__points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.15rem;
}
.degree__points li {
  position: relative;
  padding-inline-start: 1.6rem;
  font-family: var(--body);
  font-size: clamp(.98rem, 1.72vmin, 1.06rem);
  line-height: 1.7;
  color: var(--fg-muted);
  max-width: 62ch;
}
/* A small leaf instead of a bullet — same shape language as the buttons. */
.degree__points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .62em;
  width: .52rem;
  height: .52rem;
  background: var(--forest);
  border-radius: 60% 6% 60% 6%;
}

/* Coursework and scholarships span the full card width beneath both
   columns, so the long chip lists get the whole measure to wrap into. */
.degree__meta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--line);
}
.degree__label {
  margin: 0 0 1.25rem;
  font-family: var(--ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.course + .course { margin-top: 1.35rem; }
.course__group {
  margin: 0 0 .6rem;
  font-family: var(--ui);
  font-size: .88rem;
  font-weight: 600;
  color: var(--charcoal);
}

/* Chips wrap rather than clip: every course name stays whole and legible
   however narrow the column gets. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chips li {
  min-inline-size: 0;
  padding: .34rem .8rem;
  font-family: var(--ui);
  font-size: .82rem;
  line-height: 1.35;
  color: var(--fg-muted);
  background: var(--alabaster);
  border: 1px solid var(--line);
  border-radius: .7rem .18rem .7rem .18rem;
  overflow-wrap: anywhere;
}

.awards { margin: 0; padding: 0; list-style: none; display: grid; gap: .85rem; }
.awards li {
  position: relative;
  padding: .85rem 1rem .85rem 1.1rem;
  font-family: var(--body);
  font-size: .95rem;
  line-height: 1.55;
  color: var(--fg-muted);
  background: rgba(245, 236, 154, .28);
  border-inline-start: 3px solid var(--lemon);
  border-radius: 0 .8rem .8rem 0;
}

/* ── fellowships ───────────────────────────────────────────────────── */
.creds__sub { margin-top: clamp(3.5rem, 8vh, 5.5rem); }
.fellows {
  margin: clamp(1.75rem, 4vh, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}
.fellow {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: clamp(1.25rem, 3.5vw, 3rem);
  padding: clamp(1.5rem, 3.2vw, 2.5rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 1.75rem .35rem 1.75rem .35rem;    /* the house leaf */
  transition: box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.fellow:hover {
  border-color: var(--line-strong);
  box-shadow: 0 22px 55px -42px rgba(26, 29, 32, .55);
}

.fellow__aside { border-inline-start: 3px solid var(--lemon); padding-inline-start: 1.1rem; }
.fellow__date {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin: 0;
  font-family: var(--ui);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--charcoal);
}
.fellow__date span { opacity: .45; }
.fellow__place,
.fellow__funder {
  margin: .45rem 0 0;
  font-family: var(--ui);
  font-size: .84rem;
  line-height: 1.5;
  color: var(--fg-faint);
}
.fellow__funder { color: var(--forest); font-weight: 600; }

.fellow__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.5vmin, 1.65rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--charcoal);
  text-wrap: pretty;
}
.fellow__host {
  margin: .55rem 0 0;
  font-family: var(--ui);
  font-size: .92rem;
  font-weight: 600;
  color: var(--forest);
}
.fellow__points {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .9rem;
}
.fellow__points li {
  position: relative;
  padding-inline-start: 1.5rem;
  font-family: var(--body);
  font-size: clamp(.95rem, 1.68vmin, 1.03rem);
  line-height: 1.7;
  color: var(--fg-muted);
  max-width: 74ch;
}
.fellow__points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .64em;
  width: .46rem;
  height: .46rem;
  background: var(--lemon);
  border: 1px solid rgba(27, 62, 38, .45);
  border-radius: 60% 6% 60% 6%;
}
.fellow__points q { font-style: italic; }

/* ── certifications ────────────────────────────────────────────────── */
.certs__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 1.5rem;
}
.certs__head .creds__sub { margin-top: 0; }
.certs { margin-top: clamp(3.5rem, 8vh, 5.5rem); }
.certs__count {
  margin: 0;
  font-family: var(--ui);
  font-size: .86rem;
  font-variant-numeric: tabular-nums;
  color: var(--fg-faint);
}

.certs__filter {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: clamp(1.35rem, 3vh, 1.85rem) 0 0;
}
.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;                       /* comfortable touch target */
  padding: .55rem 1.05rem;
  font-family: var(--ui);
  font-size: .855rem;
  font-weight: 600;
  color: var(--fg-muted);
  background: var(--white);
  /* The chip sits white-on-alabaster, so its border is the only thing
     marking it as a control — it has to clear the 3:1 non-text contrast
     bar rather than reuse --line-strong (1.7:1). */
  border: 1px solid rgba(26, 29, 32, .5);
  border-radius: 1rem .2rem 1rem .2rem;   /* the house leaf */
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), border-radius .4s var(--ease);
}
.chip-btn:hover { border-color: var(--forest); color: var(--charcoal); }
/* The global :focus-visible flattens border-radius to 2px; keep the leaf
   so the focused chip still reads as the same object. */
.chip-btn:focus-visible { border-radius: .55rem; }
.chip-btn.is-on {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;                            /* 11.4:1 on forest */
  border-radius: .55rem;                  /* the leaf unfurls when active */
}
.chip-btn__n {
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  padding: .1rem .42rem;
  border-radius: .4rem;
  background: rgba(26, 29, 32, .07);
  color: var(--fg-faint);
}
.chip-btn.is-on .chip-btn__n {
  background: rgba(245, 236, 154, .22);
  color: var(--lemon);
}

.certs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
  gap: clamp(.85rem, 2vw, 1.25rem);
  margin: clamp(1.5rem, 3.5vh, 2.25rem) 0 0;
  padding: 0;
  list-style: none;
}
.cert {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.25rem 1.35rem 1.15rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 1.15rem .22rem 1.15rem .22rem;   /* the house leaf */
  transition: transform .4s var(--ease), box-shadow .4s var(--ease),
              border-color .4s var(--ease);
}
.cert:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 18px 40px -32px rgba(26, 29, 32, .6);
}
/* Hidden by the filter. A class rather than [hidden] so the grid keeps
   its own display rules, and !important is not needed anywhere. */
.cert.is-out { display: none; }

.cert__field {
  margin: 0 0 .45rem;
  font-family: var(--ui);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--forest);
}
.cert__title {
  margin: 0;
  font-family: var(--body);
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--charcoal);
  text-wrap: pretty;
}
.cert__by {
  margin: .5rem 0 0;
  font-family: var(--ui);
  font-size: .85rem;
  color: var(--fg-muted);
}
.cert__on {
  margin: .15rem 0 0;
  font-family: var(--ui);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  color: var(--fg-faint);
}
.cert__id {
  margin: .7rem 0 0;
  font-family: var(--ui);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--fg-faint);
}
/* The one long opaque token on the page: let it reflow rather than
   push the card wider than its grid track. */
.cert__id span {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  color: var(--charcoal);
  font-weight: 600;
}

/* ── narrower screens ──────────────────────────────────────────────── */
@media (max-width: 980px) {
  .degree,
  .degree__meta,
  .fellow { grid-template-columns: minmax(0, 1fr); }

  .degree__block--awards { padding-top: .5rem; }
}

@media (max-width: 700px) {
  .degree {
    padding: 1.5rem 1.25rem;
    border-radius: 1.5rem .3rem 1.5rem .3rem;
  }
  .fellow {
    padding: 1.35rem 1.15rem;
    border-radius: 1.25rem .28rem 1.25rem .28rem;
  }
  .fellow__aside {
    border-inline-start: 0;
    border-top: 3px solid var(--lemon);
    padding: .9rem 0 0;
  }
  .certs__grid { grid-template-columns: minmax(0, 1fr); }
  /* The filter row scrolls sideways only on phones, where wrapping six
     chips would cost four lines before any credential is visible. */
  .certs__filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--gut) * -1);
    padding-inline: var(--gut);
    scroll-padding-inline: var(--gut);
  }
  .certs__filter::-webkit-scrollbar { display: none; }
  .chip-btn { flex: 0 0 auto; }
}

/* ── onward ─────────────────────────────────────────────────────────── */
.onward {
  padding: clamp(4rem, 9vh, 6.5rem) var(--gut);
  background: var(--forest);
  text-align: center;
}
.onward__inner { max-width: 900px; margin-inline: auto; }
.onward__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: flex-start;
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
}
.onward__group { position: relative; }

.btn--ghost {
  margin-top: clamp(1.6rem, 3.4vh, 2.6rem);
  border-radius: 1.75rem .25rem 1.75rem .25rem;
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45);
}
.btn--ghost:hover,
.btn--ghost[aria-expanded="true"] {
  border-radius: .8rem;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8);
}

/* Same bridged-gap treatment as the header dropdown, so the pointer can
   travel from the button into the list without losing the hover. */
.onward__menu {
  position: absolute;
  top: calc(100% + .6rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  min-width: 264px;
  padding: .5rem;
  background: #16321F;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 1.25rem .3rem 1.25rem .3rem;
  box-shadow: 0 26px 50px -22px rgba(0, 0, 0, .6);
  text-align: start;
}
.onward__menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -.85rem;
  height: .85rem;
}
.onward__menu[hidden] { display: none; }
.onward__menu a {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: .5rem .9rem;
  border-radius: .6rem;
  font-family: var(--ui);
  font-size: .92rem;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  opacity: .9;
  transition: background-color .25s var(--ease), opacity .25s var(--ease);
}
.onward__menu a:hover { background: rgba(245, 236, 154, .16); opacity: 1; }

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .bio { grid-template-columns: 1fr; }
  .bio__media { max-width: 380px; }

  /* The axis moves to the left margin and the eras become a single
     column — a spiral needs width to read, and there isn't any. */
  .era { perspective: none; }
  .spiral__axis { left: 12px; }
  .era { min-height: 0; padding: 0 0 clamp(3rem, 8vh, 5rem) 44px; }
  .era__node { left: 12px; top: 14px; }
  .era__stage {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  /* Both sides must be reset, not just the right — the left-side rules
     were still pushing the card into column 2, which grid then created
     implicitly and the single-column layout never took. */
  .era[data-side="l"] .era__media,
  .era[data-side="l"] .era__card,
  .era[data-side="r"] .era__media,
  .era[data-side="r"] .era__card { grid-column: 1; grid-row: auto; }
  .era__text { max-width: none; }
}

/* Motion off: no 3D, no blur — the timeline reads as a plain list. */
@media (prefers-reduced-motion: reduce) {
  .era { perspective: none; }
  .era__stage { transform: none !important; opacity: 1 !important; filter: none !important; }
}
body[data-motion="reduced"] .era { perspective: none; }
body[data-motion="reduced"] .era__stage {
  transform: none !important; opacity: 1 !important; filter: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   PUBLICATIONS + THE OVERSHOOT
   ═══════════════════════════════════════════════════════════════ */

.pubs, .book-pg { background: var(--white); }

/* ── masthead ───────────────────────────────────────────────────────── */
.pubs__head {
  max-width: 1400px;
  margin-inline: auto;
  padding: clamp(7.5rem, 11vh, 8.5rem) var(--gut) clamp(2.5rem, 6vh, 4rem);
}
.pubs__lede {
  margin: 1.5rem 0 0;
  max-width: 46ch;
  font-size: clamp(1.1rem, 2.1vmin, 1.35rem);
  line-height: 1.65;
  color: var(--fg-muted);
}

/* ── the book panel ─────────────────────────────────── forest ── */
.tome { padding: 0 var(--gut) var(--s-xl); max-width: 1400px; margin-inline: auto; }

.tome__panel {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(2.25rem, 5vw, 4.5rem);
  background: var(--forest);
  color: #fff;
  text-decoration: none;
  /* the house leaf, opening to a box on approach */
  border-radius: 5.5rem .5rem 5.5rem .5rem;
  transition: border-radius .65s var(--ease), transform .65s var(--ease),
              box-shadow .65s var(--ease);
}
.tome__panel:hover,
.tome__panel:focus-visible {
  border-radius: 1.5rem;
  transform: translateY(-6px);
  box-shadow: 0 34px 70px -34px rgba(27, 62, 38, .6);
}

.tome__cover { display: block; }
.tome__cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: .3rem;
  box-shadow: 0 30px 60px -26px rgba(0, 0, 0, .75);
  transform: rotate(-2.5deg);
  transition: transform .7s var(--ease);
}
.tome__panel:hover .tome__cover img { transform: rotate(0) translateY(-6px) scale(1.02); }

.tome__body { display: block; }
.tome__title {
  margin: .9rem 0 0;
  font-family: var(--display);
  font-size: clamp(2.4rem, 6.5vmin, 4.6rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.03em;
  color: #fff;
}
.tome__sub {
  margin: .35rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.3vmin, 1.6rem);
  font-style: italic;
  color: rgba(255,255,255,.78);
}
/* The hook is the loudest line in the panel — it carries the whole pitch. */
.tome__hook {
  margin: clamp(1.4rem, 3vh, 2.1rem) 0 0;
  font-family: var(--display);
  font-size: clamp(1.35rem, 3vmin, 2.1rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--lemon);              /* 9.8:1 on forest */
  text-wrap: balance;
}
.tome__blurb {
  margin: 1rem 0 0;
  max-width: 54ch;
  font-size: clamp(1rem, 1.8vmin, 1.14rem);
  line-height: 1.7;
  color: rgba(255,255,255,.9);
}
.tome__cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 48px;
  margin-top: clamp(1.5rem, 3.5vh, 2.25rem);
  padding: .85rem 1.75rem;
  font-family: var(--ui);
  font-size: clamp(.86rem, 1.35vmin, .95rem);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--charcoal);
  background: var(--lemon);
  border-radius: 1.75rem .25rem 1.75rem .25rem;
  transition: border-radius .55s var(--ease), gap .45s var(--ease);
}
.tome__panel:hover .tome__cta { border-radius: .8rem; gap: 1rem; }

/* ── articles ───────────────────────────────────────── white ── */
.writing { padding: 0 var(--gut) var(--s-xl); max-width: 1400px; margin-inline: auto; }
.writing__head { margin-bottom: clamp(2rem, 5vh, 3.25rem); }
.writing__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3.25rem);
  margin: 0; padding: 0; list-style: none;
}

.piece { display: flex; flex-direction: column; }
.piece__fig {
  display: block;
  overflow: hidden;
  border-radius: 3.5rem .4rem 3.5rem .4rem;
  transition: border-radius .6s var(--ease);
}
.piece:hover .piece__fig { border-radius: 1.1rem; }
.piece__fig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.piece:hover .piece__fig img { transform: scale(1.04); }

.piece__body { padding-top: clamp(1.25rem, 3vh, 1.75rem); }
.piece__meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  font-family: var(--ui);
  font-size: clamp(.74rem, 1.2vmin, .82rem);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--forest);
}
.piece__dot { opacity: .45; }
.piece__meta time { color: var(--fg-muted); letter-spacing: .1em; }

.piece__title {
  margin: .7rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.9vmin, 2.05rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.piece__title a {
  color: var(--charcoal);
  text-decoration: none;
  background-image: linear-gradient(var(--forest), var(--forest));
  background-size: 0 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .45s var(--ease), color .3s var(--ease);
}
.piece__title a:hover { color: var(--forest); background-size: 100% 2px; }

.piece__by {
  margin: .6rem 0 0;
  font-family: var(--ui);
  font-size: clamp(.85rem, 1.4vmin, .95rem);
  font-weight: 500;
  color: var(--fg-muted);
}
.piece__desc {
  margin: .9rem 0 0;
  max-width: 52ch;
  font-size: clamp(1rem, 1.75vmin, 1.1rem);
  line-height: 1.7;
  color: var(--fg-muted);
}
.piece__cue {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.1rem;
  font-family: var(--ui);
  font-size: .88rem;
  font-weight: 600;
  color: var(--forest);
}
.piece__cue span { transition: transform .4s var(--ease); }
.piece:hover .piece__cue span { transform: translate(3px, -3px); }

/* ═════════════ THE OVERSHOOT ═════════════════════════════════════ */

.tome-hero {
  padding: clamp(8.5rem, 13vh, 11rem) var(--gut) clamp(4rem, 9vh, 6.5rem);
  background: var(--forest);
}
.tome-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  max-width: 1400px;
  margin-inline: auto;
}
.tome-hero__cover img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-inline: auto;
  border-radius: .35rem;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.8);
}

.crumb {
  margin: 0 0 1.4rem;
  font-family: var(--ui);
  font-size: clamp(.74rem, 1.2vmin, .82rem);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.crumb a { color: var(--lemon); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb span { margin: 0 .5rem; opacity: .5; }

.tome-hero__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.8rem, 8vmin, 6rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.035em;
  color: #fff;
}
.tome-hero__sub {
  margin: .5rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.8vmin, 2rem);
  font-style: italic;
  color: rgba(255,255,255,.8);
}
.tome-hero__by {
  margin: 1.2rem 0 0;
  font-family: var(--ui);
  font-size: clamp(.76rem, 1.2vmin, .85rem);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lemon);
}
.tome-hero__hook {
  margin: clamp(1.6rem, 3.5vh, 2.4rem) 0 0;
  max-width: 20ch;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.6vmin, 2.6rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--lemon);
  text-wrap: balance;
}

/* ── premise ────────────────────────────────────── alabaster ── */
.premise {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
  padding: var(--s-xl) var(--gut);
  background: var(--alabaster);
}
.premise__text { max-width: 60ch; }
.premise__text > p:not(.eyebrow) {
  margin: 1.4rem 0 0;
  font-size: clamp(1.06rem, 1.9vmin, 1.2rem);
  line-height: 1.75;
  color: var(--fg-muted);
}
.premise__text em { font-style: italic; color: var(--charcoal); }

.premise__fig { margin: 0; position: sticky; top: 128px; }
.premise__fig img {
  width: 100%;
  height: auto;
  border-radius: 1.75rem .3rem 1.75rem .3rem;
  border: 1px solid var(--line);
}
.premise__fig figcaption {
  margin-top: 1rem;
  font-family: var(--ui);
  font-size: clamp(.82rem, 1.35vmin, .9rem);
  line-height: 1.55;
  color: var(--fg-muted);
}

/* ── narrative arc ──────────────────────────────────── white ── */
.arc { padding: var(--s-xl) var(--gut); max-width: 1400px; margin-inline: auto; }
.arc__head { text-align: center; margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.arc__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 3rem);
}
.part {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--alabaster);
  border: 1px solid var(--line);
  border-radius: 3.5rem .45rem 3.5rem .45rem;
  transition: border-radius .6s var(--ease), transform .6s var(--ease),
              box-shadow .6s var(--ease);
}
.part:hover {
  border-radius: 1.15rem;
  transform: translateY(-5px);
  box-shadow: 0 26px 50px -30px rgba(27, 62, 38, .45);
}
.part__badge {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  color: var(--forest);
  background: var(--lemon);
  border-radius: 1.35rem .25rem 1.35rem .25rem;
  transition: border-radius .55s var(--ease);
}
.part:hover .part__badge { border-radius: 50%; }
.part__badge svg { width: 26px; height: 26px; }
.part__num {
  margin: 1.4rem 0 0;
  font-family: var(--ui);
  font-size: clamp(.72rem, 1.15vmin, .8rem);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--forest);
}
.part__title {
  margin: .45rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.6vmin, 1.95rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--charcoal);
}
.part__text {
  margin: .9rem 0 0;
  font-size: clamp(.98rem, 1.7vmin, 1.08rem);
  line-height: 1.7;
  color: var(--fg-muted);
}
.part__text em { font-style: italic; color: var(--charcoal); }

/* ── manifesto ─────────────────────────────────────── forest ── */
.manifesto { padding: clamp(4rem, 9vh, 6.5rem) var(--gut); background: var(--forest); }
.manifesto__inner { max-width: 820px; margin-inline: auto; text-align: center; }
.manifesto__text {
  margin: clamp(1.5rem, 3.5vh, 2.4rem) auto 0;
  max-width: 62ch;
  font-size: clamp(1.06rem, 1.9vmin, 1.2rem);
  line-height: 1.75;
  color: rgba(255,255,255,.92);
}
.manifesto__text em { font-style: italic; color: var(--lemon); }
.manifesto__text strong { color: #fff; font-weight: 600; }

/* Ten marks for ten targets — a checklist rendered as a row of leaves. */
.scg {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem;
  margin: clamp(2rem, 4.5vh, 3rem) 0 0;
  padding: 0;
  list-style: none;
}
.scg__tick {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  font-family: var(--ui);
  font-size: .82rem;
  font-weight: 600;
  color: var(--lemon);
  border: 1.5px solid rgba(245, 236, 154, .45);
  border-radius: 1.3rem .22rem 1.3rem .22rem;
  transition: background-color .4s var(--ease), color .4s var(--ease),
              border-radius .5s var(--ease);
}
.scg__tick:hover {
  background: var(--lemon);
  color: var(--forest);
  border-radius: 50%;
}

/* ── promise ────────────────────────────────────── alabaster ── */
.promise { padding: var(--s-xl) var(--gut); background: var(--alabaster); }
.promise__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.promise__text {
  margin: clamp(1.5rem, 3.5vh, 2.2rem) auto 0;
  max-width: 60ch;
  font-size: clamp(1.06rem, 1.9vmin, 1.2rem);
  line-height: 1.75;
  color: var(--fg-muted);
}

.creed { margin: clamp(2.5rem, 6vh, 4rem) auto 0; max-width: 46ch; }
.creed::before {
  content: "\201C";
  display: block;
  font-family: var(--display);
  font-size: clamp(3.5rem, 9vmin, 6rem);
  line-height: .7;
  color: var(--lemon);
}
.creed blockquote { margin: 0; }
.creed blockquote p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.35rem, 3vmin, 2.15rem);
  font-style: italic;
  line-height: 1.32;
  letter-spacing: -.015em;
  color: var(--charcoal);
  text-wrap: pretty;
}
.creed figcaption {
  margin-top: 1.5rem;
  font-family: var(--ui);
  font-size: clamp(.78rem, 1.25vmin, .86rem);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.creed figcaption cite { font-style: italic; text-transform: none; letter-spacing: .04em; }

.promise__back { margin: clamp(2rem, 4vh, 2.75rem) 0 0; }
.promise__back a {
  font-family: var(--ui);
  font-size: .9rem;
  font-weight: 600;
  color: var(--forest);
  text-decoration: none;
}
.promise__back a:hover { text-decoration: underline; }

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .tome__panel   { grid-template-columns: 1fr; border-radius: 3.5rem .45rem 3.5rem .45rem; }
  .tome__cover   { max-width: 300px; margin-inline: auto; }
  .writing__list { grid-template-columns: 1fr; }
  .tome-hero__inner { grid-template-columns: 1fr; text-align: center; }
  .tome-hero__hook  { margin-inline: auto; }
  .crumb { text-align: center; }
  .premise { grid-template-columns: 1fr; }
  .premise__fig { position: static; }
  .arc__grid { grid-template-columns: 1fr; }
  .part { border-radius: 2.5rem .4rem 2.5rem .4rem; }
}
@media (max-width: 560px) {
  .scg__tick { width: 46px; height: 46px; }
}

/* ═══════════════════════════════════════════════════════════════
   MEDIA & NEWS
   ═══════════════════════════════════════════════════════════════ */

.media-pg, .newsroom, .entry-pg { background: var(--white); }

/* ── featured broadcast ────────────────────────────── forest ── */
.broadcast {
  padding: clamp(7.5rem, 11vh, 9rem) var(--gut) clamp(3.5rem, 8vh, 5.5rem);
  background: var(--forest);
  /* a faint scanline wash — the only place the site gets a screen texture */
  background-image:
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,.022) 0 2px, transparent 2px 4px);
}
.broadcast__inner { max-width: 1400px; margin-inline: auto; }

.onair {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 clamp(1.25rem, 3vh, 2rem);
  font-family: var(--ui);
  font-size: clamp(.72rem, 1.2vmin, .8rem);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lemon);
}
.onair__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #FCE300;
  box-shadow: 0 0 0 0 rgba(252, 227, 0, .65);
  animation: onair-pulse 2.4s var(--ease) infinite;
}
@keyframes onair-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(252,227,0,.6); }
  70%  { box-shadow: 0 0 0 12px rgba(252,227,0,0); }
  100% { box-shadow: 0 0 0 0   rgba(252,227,0,0); }
}

.broadcast__stage { position: relative; }
.broadcast__body { max-width: 68ch; margin-top: clamp(1.75rem, 4vh, 2.75rem); }
.broadcast__title {
  margin: .8rem 0 0;
  font-family: var(--display);
  font-size: clamp(2rem, 5.4vmin, 3.8rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.03em;
  color: #fff;
  text-wrap: balance;
}
.broadcast__desc {
  margin: 1.2rem 0 0;
  font-size: clamp(1.02rem, 1.8vmin, 1.16rem);
  line-height: 1.72;
  color: rgba(255,255,255,.9);
}

/* ── the video facade ───────────────────────────────────────────────── */
.broadcast__shot, .vid__shot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #0B1D12;
  cursor: pointer;
  border-radius: 3rem .5rem 3rem .5rem;          /* the house leaf */
  transition: border-radius .6s var(--ease), transform .6s var(--ease),
              box-shadow .6s var(--ease);
}
.broadcast__shot { border-radius: 5rem .6rem 5rem .6rem; }
.broadcast__shot:hover, .broadcast__shot:focus-visible,
.vid__shot:hover, .vid__shot:focus-visible {
  border-radius: 1.25rem;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
}
.vid__shot:hover { transform: translateY(-4px); }

.broadcast__shot img, .vid__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease), filter .6s var(--ease);
}
.broadcast__shot:hover img, .vid__shot:hover img { transform: scale(1.05); }

.vid__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,18,12,.62), rgba(8,18,12,.12) 55%, rgba(8,18,12,.3));
  transition: background .5s var(--ease);
}
.broadcast__shot:hover .vid__scrim, .vid__shot:hover .vid__scrim {
  background: linear-gradient(to top, rgba(27,62,38,.5), rgba(27,62,38,.06) 60%, rgba(27,62,38,.22));
}

/* The play control: lemon leaf that rounds out as you reach it. */
.vid__play {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: clamp(56px, 7vw, 82px);
  aspect-ratio: 1;
  color: var(--forest);
  background: var(--lemon);
  border-radius: 1.6rem .3rem 1.6rem .3rem;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.5);
  transition: border-radius .55s var(--ease), scale .55s var(--ease),
              background-color .4s var(--ease);
}
.vid__play svg { width: 42%; height: 42%; margin-inline-start: 6%; }
.broadcast__shot:hover .vid__play, .broadcast__shot:focus-visible .vid__play,
.vid__shot:hover .vid__play, .vid__shot:focus-visible .vid__play {
  border-radius: 50%;
  scale: 1.1;
  background: #FCE300;
}

/* once pressed, the iframe takes the facade's box */
iframe.is-live {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 1.25rem;
  background: #000;
}

/* ── the reel ───────────────────────────────────────── white ── */
.reel { padding: var(--s-xl) var(--gut); max-width: 1400px; margin-inline: auto; }
.reel__head { margin-bottom: clamp(2rem, 5vh, 3.25rem); }
.reel__note {
  margin: 1rem 0 0;
  max-width: 48ch;
  font-size: clamp(.92rem, 1.5vmin, 1rem);
  color: var(--fg-faint);
}
.reel__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin: 0; padding: 0; list-style: none;
}
.vid__meta { padding-top: clamp(1rem, 2.5vh, 1.4rem); }
.vid__chan {
  margin: 0;
  font-family: var(--ui);
  font-size: clamp(.72rem, 1.15vmin, .8rem);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--forest);
}
.vid__title {
  margin: .55rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.3vmin, 1.6rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.018em;
  color: var(--charcoal);
  text-wrap: balance;
}
.vid__desc {
  margin: .7rem 0 0;
  font-size: clamp(.95rem, 1.6vmin, 1.04rem);
  line-height: 1.66;
  color: var(--fg-muted);
}

/* ── press ─────────────────────────────────────── alabaster ── */
.press { padding: var(--s-xl) var(--gut); background: var(--alabaster); }
.press__head { max-width: 1400px; margin: 0 auto clamp(2.5rem, 6vh, 4rem); }

.tier { max-width: 1400px; margin: 0 auto clamp(2.75rem, 6vh, 4.5rem); }
.tier__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: clamp(1.5rem, 3.5vh, 2.25rem);
  border-bottom: 1px solid var(--line);
}
.tier__num {
  margin: 0;
  font-family: var(--ui);
  font-size: clamp(.7rem, 1.1vmin, .78rem);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--forest);
  white-space: nowrap;
}
.tier__name {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.2vmin, 1.65rem);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--charcoal);
}

.clips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.2vw, 1.75rem);
  margin: 0; padding: 0; list-style: none;
  align-items: start;
}
.clip { display: flex; }
.clip__link {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 2rem .35rem 2rem .35rem;
  text-decoration: none;
  overflow: hidden;
  transition: border-color .4s var(--ease), border-radius .55s var(--ease),
              transform .5s var(--ease), box-shadow .5s var(--ease);
}
.clip__link:hover, .clip__link:focus-visible {
  border-color: #FCE300;                 /* the lemon edge illuminates */
  border-radius: 1rem;
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -26px rgba(26, 29, 32, .3);
}
.clip__org {
  display: inline-block;
  align-self: flex-start;
  padding: .3rem .7rem;
  font-family: var(--ui);
  font-size: clamp(.66rem, 1.05vmin, .73rem);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--forest);
  background: rgba(27, 62, 38, .08);
  border-radius: .8rem .16rem .8rem .16rem;
}
.clip__title {
  margin: .9rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.08rem, 1.95vmin, 1.32rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.015em;
  color: var(--charcoal);
  text-wrap: pretty;
}
.clip__desc {
  margin: .7rem 0 0;
  font-size: clamp(.9rem, 1.5vmin, .98rem);
  line-height: 1.62;
  color: var(--fg-muted);
}
/* Held below the fold of the card, and lifted into view on approach. */
.clip__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  align-self: flex-start;
  min-height: 42px;
  margin-top: 0;
  padding: .6rem 1.15rem;
  font-family: var(--ui);
  font-size: .82rem;
  font-weight: 600;
  color: #fff;
  background: var(--forest);
  border-radius: 1.1rem .2rem 1.1rem .2rem;
  opacity: 0;
  max-height: 0;
  transform: translateY(10px);
  overflow: hidden;
  transition: opacity .4s var(--ease), transform .45s var(--ease),
              max-height .45s var(--ease), margin-top .4s var(--ease);
}
.clip__link:hover .clip__cta,
.clip__link:focus-visible .clip__cta {
  opacity: 1;
  max-height: 4em;
  margin-top: 1.15rem;
  transform: none;
}
.clip__cta span { transition: transform .4s var(--ease); }
.clip__link:hover .clip__cta span { transform: translateX(3px); }

/* ── newsroom teaser ───────────────────────────────── forest ── */
.teaser { padding: 0 var(--gut) var(--s-xl); max-width: 1400px; margin-inline: auto; }
.teaser__panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--forest);
  color: #fff;
  text-decoration: none;
  border-radius: 5rem .5rem 5rem .5rem;
  transition: border-radius .65s var(--ease), transform .6s var(--ease),
              box-shadow .6s var(--ease);
}
.teaser__panel:hover, .teaser__panel:focus-visible {
  border-radius: 1.4rem;
  transform: translateY(-5px);
  box-shadow: 0 32px 64px -32px rgba(27,62,38,.6);
}
.teaser__shot { display: block; overflow: hidden; border-radius: 3.5rem .4rem 3.5rem .4rem;
  transition: border-radius .6s var(--ease); }
.teaser__panel:hover .teaser__shot { border-radius: 1rem; }
.teaser__shot img {
  width: 100%; height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .9s var(--ease);
}
.teaser__panel:hover .teaser__shot img { transform: scale(1.05); }
.teaser__title {
  margin: .8rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.7rem, 4vmin, 2.9rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.028em;
  color: #fff;
}
.teaser__desc {
  margin: 1rem 0 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.75vmin, 1.12rem);
  line-height: 1.7;
  color: rgba(255,255,255,.9);
}
.teaser__cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 48px;
  margin-top: 1.5rem;
  padding: .8rem 1.6rem;
  font-family: var(--ui);
  font-size: .9rem;
  font-weight: 600;
  color: var(--charcoal);
  background: var(--lemon);
  border-radius: 1.6rem .25rem 1.6rem .25rem;
  transition: border-radius .55s var(--ease), gap .45s var(--ease);
}
.teaser__panel:hover .teaser__cta { border-radius: .8rem; gap: 1rem; }

/* ═════════════ NEWSROOM ═════════════════════════════════════════ */

.nr-head { position: relative; }
.nr-head__media { position: relative; height: clamp(340px, 52vh, 560px); overflow: hidden; }
.nr-head__media img { width: 100%; height: 100%; object-fit: cover; }
.nr-head__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,25,16,.94), rgba(11,25,16,.55) 55%, rgba(11,25,16,.62));
}
.nr-head__body {
  position: absolute;
  left: 0; right: 0; bottom: clamp(2rem, 6vh, 3.5rem);
  padding-inline: var(--gut);
  max-width: 1400px;
  margin-inline: auto;
}
.nr-head__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.4rem, 7vmin, 5rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.035em;
  color: #fff;
}
.nr-head__lede {
  margin: .8rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.4vmin, 1.65rem);
  font-style: italic;
  color: rgba(255,255,255,.86);
}

.nr-list { padding: var(--s-xl) var(--gut); max-width: 1400px; margin-inline: auto; }
.nr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin: 0; padding: 0; list-style: none;
}
.entry__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.entry__shot {
  display: block;
  overflow: hidden;
  border-radius: 3rem .4rem 3rem .4rem;
  transition: border-radius .6s var(--ease);
}
.entry__link:hover .entry__shot, .entry__link:focus-visible .entry__shot {
  border-radius: 1.1rem;
}
.entry__shot img {
  width: 100%; height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .9s var(--ease);
}
.entry__link:hover .entry__shot img { transform: scale(1.05); }
.entry__body { display: block; padding-top: clamp(1rem, 2.5vh, 1.35rem); }
.entry__meta, .post__meta {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  font-family: var(--ui);
  font-size: clamp(.72rem, 1.15vmin, .8rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.entry__tag {
  padding: .28rem .65rem;
  color: var(--forest);
  background: rgba(27,62,38,.08);
  border-radius: .8rem .16rem .8rem .16rem;
}
.entry__dot { opacity: .45; }
.entry__title {
  margin: .7rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.5vmin, 1.8rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--charcoal);
}
.entry__link:hover .entry__title { color: var(--forest); }
.entry__desc {
  margin: .65rem 0 0;
  font-size: clamp(.95rem, 1.6vmin, 1.04rem);
  line-height: 1.65;
  color: var(--fg-muted);
}
.entry__cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1rem;
  font-family: var(--ui);
  font-size: .86rem;
  font-weight: 600;
  color: var(--forest);
}
.entry__cta span { transition: transform .4s var(--ease); }
.entry__link:hover .entry__cta span { transform: translateX(4px); }

/* ═════════════ THE ENTRY + CAROUSEL ════════════════════════════ */

.post__head {
  max-width: 780px;
  margin-inline: auto;
  padding: clamp(7.5rem, 11vh, 8.5rem) var(--gut) clamp(1.5rem, 4vh, 2.5rem);
}
.post__head .crumb { color: var(--fg-muted); }
.post__head .crumb a { color: var(--forest); }
.post__title {
  margin: 1rem 0 0;
  font-family: var(--display);
  font-size: clamp(2.2rem, 6vmin, 4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.032em;
  color: var(--charcoal);
}

.shots { max-width: 1100px; margin: clamp(1.5rem, 4vh, 2.5rem) auto 0; padding-inline: var(--gut); }
.shots__frame {
  position: relative;
  overflow: hidden;
  border-radius: 3.5rem .5rem 3.5rem .5rem;
  background: #0B1D12;
}
.shots__track {
  display: flex;
  margin: 0; padding: 0; list-style: none;
  transition: transform .75s var(--ease);
  will-change: transform;
}
.shots__slide { flex: 0 0 100%; }
.shots__slide img {
  width: 100%; height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.shots__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  color: var(--charcoal);
  background: rgba(255,255,255,.86);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity .35s var(--ease), background-color .3s var(--ease),
              scale .3s var(--ease);
}
.shots__nav svg { width: 22px; height: 22px; }
.shots__nav--prev { left: clamp(.6rem, 2vw, 1.25rem); }
.shots__nav--next { right: clamp(.6rem, 2vw, 1.25rem); }
.shots:hover .shots__nav, .shots__nav:focus-visible { opacity: 1; }
.shots__nav:hover { background: #fff; scale: 1.08; }
/* Touch has no hover, so the arrows are always available there. */
@media (hover: none) { .shots__nav { opacity: 1; } }

.shots__caption {
  margin: 1rem 0 0;
  font-family: var(--ui);
  font-size: clamp(.86rem, 1.4vmin, .95rem);
  line-height: 1.55;
  color: var(--fg-muted);
  text-align: center;
}

.shots__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}
.shots__toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem 1rem;
  font-family: var(--ui);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--forest);
  background: none;
  border: 1.5px solid var(--line-ink, rgba(26,29,32,.14));
  border-radius: 1.2rem .2rem 1.2rem .2rem;
  cursor: pointer;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.shots__toggle:hover { border-color: var(--forest); background: rgba(27,62,38,.05); }
.shots__toggle-icon { width: 13px; height: 13px; }
.shots__toggle-icon svg { width: 100%; height: 100%; }
.shots__toggle .i-play { display: none; }
.shots__toggle[aria-pressed="false"] .i-play  { display: block; }
.shots__toggle[aria-pressed="false"] .i-pause { display: none; }

.shots__dots { display: flex; gap: .4rem; }
.shots__dot {
  width: 34px; height: 34px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}
.shots__dot::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(26,29,32,.22);
  transition: background-color .3s var(--ease), scale .3s var(--ease);
}
.shots__dot:hover::after { background: rgba(27,62,38,.5); }
.shots__dot[aria-current="true"]::after { background: var(--forest); scale: 1.35; }

.post {
  max-width: 68ch;
  margin-inline: auto;
  padding: clamp(2.5rem, 6vh, 4rem) var(--gut) var(--s-xl);
}
.post__lead {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.6vmin, 1.75rem);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: -.012em;
  color: var(--charcoal);
}
.post > p:not(.post__lead):not(.post__back) {
  margin: 1.5rem 0 0;
  font-size: clamp(1.06rem, 1.9vmin, 1.2rem);
  line-height: 1.78;
  color: var(--fg-muted);
}
.post a { color: var(--forest); font-weight: 500; text-decoration: underline;
  text-underline-offset: 3px; overflow-wrap: anywhere; }
.post__back { margin: clamp(2.5rem, 5vh, 3.5rem) 0 0; }
.post__back a {
  font-family: var(--ui);
  font-size: .9rem;
  font-weight: 600;
  color: var(--forest);
  text-decoration: none;
}
.post__back a:hover { text-decoration: underline; }

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .reel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clips      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teaser__panel { grid-template-columns: 1fr; border-radius: 3rem .45rem 3rem .45rem; }
}
@media (max-width: 700px) {
  .reel__grid { grid-template-columns: 1fr; }
  .clips      { grid-template-columns: 1fr; }
  .tier__head { flex-direction: column; gap: .35rem; align-items: flex-start; }
  /* No hover on touch, so the article CTA is simply always shown. */
  .clip__cta  { opacity: 1; max-height: 4em; margin-top: 1.15rem; transform: none; }
  .shots__frame { border-radius: 2rem .4rem 2rem .4rem; }
}

/* Motion off: no auto-advance ride, no scanlines, no pulse. */
@media (prefers-reduced-motion: reduce) {
  .shots__track { transition: none; }
  .onair__dot   { animation: none; }
  .broadcast    { background-image: none; }
}
body[data-motion="reduced"] .shots__track { transition: none; }
body[data-motion="reduced"] .onair__dot   { animation: none; }

/* A player can always be blocked by an extension or a strict privacy mode,
   so every video keeps a plain link out to YouTube. */
.vid__out {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  margin-top: .5rem;
  font-family: var(--ui);
  font-size: .85rem;
  font-weight: 600;
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1px solid rgba(27, 62, 38, .28);
  align-self: flex-start;
}
.vid__out:hover { border-bottom-color: var(--forest); }
.vid__out span { transition: transform .35s var(--ease); }
.vid__out:hover span { transform: translate(3px, -3px); }
.vid__out--hero {
  margin-top: 1.25rem;
  color: var(--lemon);
  border-bottom-color: rgba(245, 236, 154, .4);
}
.vid__out--hero:hover { border-bottom-color: var(--lemon); }

/* ═══════════════════════════════════════════════════════════════
   BLOG
   ═══════════════════════════════════════════════════════════════ */

.blog, .article-pg { background: var(--white); }

.blog__head {
  max-width: 1400px;
  margin-inline: auto;
  padding: clamp(7.5rem, 11vh, 8.5rem) var(--gut) clamp(1.5rem, 4vh, 2.5rem);
}
.blog__lede {
  margin: 1.4rem 0 0;
  max-width: 46ch;
  font-size: clamp(1.06rem, 2vmin, 1.28rem);
  line-height: 1.65;
  color: var(--fg-muted);
}

/* ── tag filter ─────────────────────────────────────────────────────── */
.filter {
  max-width: 1400px;
  margin-inline: auto;
  padding: 0 var(--gut) clamp(1.5rem, 3.5vh, 2.25rem);
}
.filter__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  min-height: 44px;
  padding: .5rem 1.05rem;
  font-family: var(--ui);
  font-size: clamp(.8rem, 1.3vmin, .88rem);
  font-weight: 500;
  color: var(--fg-muted);
  background: none;
  border: 1.5px solid var(--line);
  border-radius: 1.2rem .22rem 1.2rem .22rem;    /* the house leaf */
  cursor: pointer;
  transition: border-radius .45s var(--ease), border-color .3s var(--ease),
              color .3s var(--ease), background-color .3s var(--ease);
}
.chip:hover { border-color: var(--forest); color: var(--forest); }
.chip.is-on {
  color: #fff;
  background: var(--forest);
  border-color: var(--forest);
  border-radius: 1.2rem;
}
.filter__count {
  margin: 1rem 0 0;
  font-family: var(--ui);
  font-size: .85rem;
  color: var(--fg-faint);
  min-height: 1.2em;                             /* no jump as it changes */
}

/* ── post grid ──────────────────────────────────────────────────────── */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--gut);
  list-style: none;
}
.post-grid { margin-bottom: clamp(3.5rem, 8vh, 5.5rem); }
.post-grid__empty {
  max-width: 1400px;
  margin: 2rem auto 0;
  padding: 0 var(--gut);
  font-family: var(--ui);
  color: var(--fg-muted);
}
.post-card__link { display: block; text-decoration: none; color: inherit; }
.post-card__shot {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--alabaster);
  border-radius: 3.5rem .45rem 3.5rem .45rem;
  transition: border-radius .6s var(--ease);
}
.post-card__link:hover .post-card__shot,
.post-card__link:focus-visible .post-card__shot { border-radius: 1.2rem; }
.post-card__shot img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .9s var(--ease);
}
.post-card__link:hover .post-card__shot img { transform: scale(1.05); }
/* a wash of the brand green that lifts as you approach */
.post-card__glow {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(27,62,38,.32), rgba(27,62,38,0) 55%);
  opacity: 1;
  transition: opacity .5s var(--ease);
}
.post-card__link:hover .post-card__glow { opacity: .35; }

.post-card__body { display: block; padding-top: clamp(1.1rem, 2.5vh, 1.5rem); }
.post-card__meta {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--ui);
  font-size: clamp(.74rem, 1.15vmin, .82rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.post-card__dot { opacity: .45; }
.post-card__title {
  margin: .7rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.8vmin, 2rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.022em;
  color: var(--charcoal);
  text-wrap: balance;
  transition: color .3s var(--ease);
}
.post-card__link:hover .post-card__title { color: var(--forest); }
.post-card__excerpt {
  margin: .8rem 0 0;
  max-width: 54ch;
  font-size: clamp(.98rem, 1.65vmin, 1.08rem);
  line-height: 1.68;
  color: var(--fg-muted);
}
.post-card__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.tag {
  padding: .28rem .68rem;
  font-family: var(--ui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--forest);
  background: rgba(27, 62, 38, .08);
  border-radius: .8rem .16rem .8rem .16rem;
}
.post-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  margin-top: .9rem;
  font-family: var(--ui);
  font-size: .88rem;
  font-weight: 600;
  color: var(--forest);
}
.post-card__cta span { transition: transform .4s var(--ease); }
.post-card__link:hover .post-card__cta span { transform: translateX(4px); }

/* ── paging ─────────────────────────────────────────────────────────── */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2rem);
  max-width: 1400px;
  /* Lifted clear of the footer — it was sitting flush against it. */
  margin: clamp(2.5rem, 6vh, 4rem) auto clamp(3.5rem, 8vh, 5.5rem);
  padding: 0 var(--gut);
}
/* A display rule beats the browser's [hidden] { display: none }, so the
   pager stayed on screen even when the script had correctly hidden it. */
.pager[hidden] { display: none; }
.pager__btn {
  min-height: 44px;
  padding: .6rem 1.25rem;
  font-family: var(--ui);
  font-size: .86rem;
  font-weight: 600;
  color: var(--forest);
  background: none;
  border: 1.5px solid var(--line);
  border-radius: 1.2rem .22rem 1.2rem .22rem;
  cursor: pointer;
  transition: border-color .3s var(--ease), border-radius .45s var(--ease);
}
.pager__btn:hover:not(:disabled) { border-color: var(--forest); border-radius: 1.2rem; }
.pager__btn:disabled { opacity: .4; cursor: not-allowed; }
.pager__at { margin: 0; font-family: var(--ui); font-size: .85rem; color: var(--fg-muted); }

/* ═════════════ THE ESSAY ═══════════════════════════════════════ */

/* Reading progress — scaleX only, so it never triggers layout. */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 25;
  height: 3px;
  background: rgba(27, 62, 38, .1);
}
.progress__fill {
  display: block;
  height: 100%;
  background: var(--forest);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.art__head {
  max-width: 80ch;
  margin-inline: auto;
  padding: clamp(7.5rem, 11vh, 8.5rem) var(--gut) clamp(1.5rem, 3.5vh, 2.25rem);
}
.art__head .crumb { color: var(--fg-muted); }
.art__head .crumb a { color: var(--forest); }
.art__title {
  margin: 1rem 0 0;
  font-family: var(--display);
  font-size: clamp(2rem, 5.2vmin, 3.4rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.03em;
  color: var(--charcoal);
  text-wrap: balance;
}
.art__meta {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 1.2rem 0 0;
  font-family: var(--ui);
  font-size: clamp(.76rem, 1.2vmin, .84rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.art__dot { opacity: .45; }
.art__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 0; }

.art__cover {
  max-width: 1100px;
  margin: clamp(1.5rem, 4vh, 2.5rem) auto 0;
  padding-inline: var(--gut);
}
.art__cover img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 3.5rem .5rem 3.5rem .5rem;
}

.art {
  max-width: 80ch;
  margin-inline: auto;
  padding: clamp(2.5rem, 6vh, 4rem) var(--gut) 0;
}
.art__lead {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.5vmin, 1.7rem);
  font-weight: 400;
  line-height: 1.44;
  letter-spacing: -.012em;
  color: var(--charcoal);
}
.art > p {
  margin: 1.5rem 0 0;
  font-size: clamp(1.06rem, 1.9vmin, 1.2rem);
  line-height: 1.78;
  color: var(--fg-muted);
}
.art em { font-style: italic; color: var(--charcoal); }
.art strong { font-weight: 600; color: var(--charcoal); }
.art sub, .art sup { font-size: .72em; }

.art__h2 {
  margin: clamp(2.5rem, 5.5vh, 3.5rem) 0 0;
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.9vmin, 2.05rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.022em;
  color: var(--charcoal);
}
/* Numbered proofs carry a large ghosted numeral in the margin. */
.art__h2--num { position: relative; padding-top: .5rem; }
.art__h2--num::before {
  content: attr(data-n);
  position: absolute;
  top: -.45em; left: -.08em;
  font-size: 2.6em;
  font-weight: 900;
  line-height: 1;
  color: var(--lemon);
  opacity: .5;
  z-index: -1;
  pointer-events: none;
}
.art__list { margin: 1.4rem 0 0; padding-inline-start: 1.3rem; }
.art__list li {
  margin-top: .6rem;
  font-size: clamp(1.02rem, 1.8vmin, 1.14rem);
  line-height: 1.72;
  color: var(--fg-muted);
}
.art__list li::marker { color: var(--forest); }

.art a {
  color: var(--forest);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

/* pull quotes */
.pull, .pull-q { margin: clamp(2rem, 4.5vh, 3rem) 0 0; }
.pull-q blockquote, .pull { margin: 0; }
.pull p, .pull-q blockquote p {
  margin: 0;
  padding-inline-start: clamp(1.1rem, 3vw, 1.75rem);
  border-inline-start: 3px solid var(--lemon);
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.4vmin, 1.6rem);
  font-style: italic;
  line-height: 1.38;
  letter-spacing: -.012em;
  color: var(--charcoal);
}
.pull-q figcaption {
  margin-top: .9rem;
  padding-inline-start: clamp(1.1rem, 3vw, 1.75rem);
  font-family: var(--ui);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* figures */
.fig { margin: clamp(2rem, 4.5vh, 3rem) 0 0; }
.fig img {
  display: block;
  width: 100%; height: auto;
  border-radius: 1.5rem .3rem 1.5rem .3rem;
  border: 1px solid var(--line);
}
.fig figcaption {
  margin-top: .9rem;
  font-family: var(--ui);
  font-size: clamp(.82rem, 1.35vmin, .9rem);
  line-height: 1.55;
  color: var(--fg-muted);
}

/* Artwork not yet supplied: the frame holds its space and names the file
   it is waiting for, rather than collapsing or showing a broken icon. */
.is-pending {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(135deg,
      rgba(27,62,38,.05) 0 12px, rgba(27,62,38,.02) 12px 24px);
  border: 1.5px dashed rgba(27, 62, 38, .28);
  border-radius: 1.5rem .3rem 1.5rem .3rem;
}
.is-pending::after {
  content: "Image pending — " var(--pending);
  font-family: var(--ui);
  font-size: .84rem;
  font-weight: 500;
  color: var(--forest);
  opacity: .75;
  padding: 1rem;
  text-align: center;
}
.fig.is-pending, .art__cover.is-pending { padding: 0; }

/* references */
.refs {
  margin-top: clamp(3rem, 7vh, 4.5rem);
  padding-top: clamp(1.75rem, 4vh, 2.5rem);
  border-top: 1px solid var(--line);
}
.refs__h {
  margin: 0;
  font-family: var(--ui);
  font-size: clamp(.76rem, 1.2vmin, .84rem);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--forest);
}
.refs__list { margin: 1.5rem 0 0; padding-inline-start: 1.4rem; }
.refs__list li {
  margin-top: .9rem;
  font-size: clamp(.88rem, 1.45vmin, .96rem);
  line-height: 1.62;
  color: var(--fg-muted);
}
.refs__list li::marker { color: var(--forest); font-weight: 600; }
.refs__list cite { font-style: italic; }

/* prev / next */
.pn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  max-width: 900px;
  margin: clamp(3rem, 7vh, 4.5rem) auto 0;
  padding: 0 var(--gut) var(--s-xl);
}
.pn__side {
  display: block;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--alabaster);
  border: 1px solid var(--line);
  border-radius: 2rem .35rem 2rem .35rem;
  text-decoration: none;
  transition: border-radius .5s var(--ease), border-color .3s var(--ease),
              transform .5s var(--ease);
}
.pn__side:hover { border-color: var(--forest); border-radius: 1rem; transform: translateY(-3px); }
.pn__side--next { text-align: end; }
.pn__dir {
  display: block;
  font-family: var(--ui);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--forest);
}
.pn__name {
  display: block;
  margin-top: .5rem;
  font-family: var(--display);
  font-size: clamp(1.05rem, 2vmin, 1.35rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--charcoal);
}

@media (max-width: 620px) {
  .pn { grid-template-columns: 1fr; }
  .pn__side--next { text-align: start; }
  .art__h2--num::before { font-size: 2em; opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .progress__fill { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════════════════════════ */

.contact-pg { background: var(--white); }

/* ── opening ──────────────────────────────────────── forest ── */
.hail {
  padding: clamp(7.5rem, 11vh, 9rem) var(--gut) clamp(3.5rem, 8vh, 5.5rem);
  background: var(--forest);
  position: relative;
  overflow: hidden;
}
/* a slow aurora behind the type — pure transform, never layout */
.hail::before {
  content: "";
  position: absolute;
  width: 70vmax; height: 70vmax;
  top: -30vmax; right: -20vmax;
  background: radial-gradient(circle, rgba(245,236,154,.13), rgba(245,236,154,0) 62%);
  animation: drift 26s var(--ease) infinite alternate;
  pointer-events: none;
}
@keyframes drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-8vmax, 6vmax, 0) scale(1.18); }
}
.hail__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  max-width: 1400px;
  margin-inline: auto;
}
.hail__title {
  margin: .9rem 0 0;
  font-family: var(--display);
  font-size: clamp(2.3rem, 6.4vmin, 4.6rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.032em;
  color: #fff;
}
.hail__lede {
  margin: 1.4rem 0 0;
  max-width: 46ch;
  font-size: clamp(1.06rem, 1.9vmin, 1.22rem);
  line-height: 1.72;
  color: rgba(255,255,255,.9);
}
.hail__shot { margin: 0; }
.hail__shot img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 42% 6% 42% 6%;              /* the house leaf */
  transition: border-radius .8s var(--ease);
}
.hail__shot img:hover { border-radius: 1.5rem; }

/* live clock */
.clock {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  padding: .8rem 1.25rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 1.4rem .25rem 1.4rem .25rem;
}
.clock__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--lemon);
  box-shadow: 0 0 0 0 rgba(245,236,154,.6);
  animation: onair-pulse 2.6s var(--ease) infinite;
}
.clock__text { display: flex; flex-direction: column; }
.clock__label {
  font-family: var(--ui);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.clock__time {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--lemon);
  font-variant-numeric: tabular-nums;        /* no jitter as it ticks */
}
.clock__note {
  padding-inline-start: .85rem;
  border-inline-start: 1px solid rgba(255,255,255,.18);
  font-family: var(--ui);
  font-size: .82rem;
  color: rgba(255,255,255,.82);
}

/* ── direct lines ──────────────────────────────────── white ── */
.lines { padding: var(--s-xl) var(--gut); max-width: 1400px; margin-inline: auto; }
.lines__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.line {
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--alabaster);
  border: 1px solid var(--line);
  border-radius: 2.25rem .4rem 2.25rem .4rem;
  transition: border-radius .55s var(--ease), border-color .35s var(--ease);
}
.line:hover { border-radius: 1.1rem; border-color: rgba(27,62,38,.3); }
.line__k {
  margin: 0 0 1rem;
  font-family: var(--ui);
  font-size: clamp(.7rem, 1.1vmin, .78rem);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--forest);
}
.line__v {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.05rem, 2vmin, 1.35rem);
  font-weight: 700;
  color: var(--charcoal);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.line__v:hover { color: var(--forest); }

.copy {
  margin-top: .9rem;
  min-height: 40px;
  padding: .45rem 1rem;
  font-family: var(--ui);
  font-size: .8rem;
  font-weight: 600;
  color: var(--forest);
  background: none;
  border: 1.5px solid var(--line);
  border-radius: 1rem .2rem 1rem .2rem;
  cursor: pointer;
  transition: border-color .3s var(--ease), background-color .3s var(--ease),
              color .3s var(--ease);
}
.copy:hover { border-color: var(--forest); }
.copy.is-done { background: var(--lemon); border-color: var(--lemon); color: var(--charcoal); }

.line__acts { display: flex; flex-direction: column; gap: .6rem; }
.doc {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 52px;
  padding: .7rem 1rem;
  font-family: var(--ui);
  font-size: .9rem;
  font-weight: 600;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  border-radius: 1.2rem .22rem 1.2rem .22rem;
  transition: border-radius .5s var(--ease), transform .4s var(--ease),
              background-color .3s var(--ease);
}
.doc--ready { color: var(--charcoal); background: var(--lemon); border: 0; }
.doc--ask {
  color: var(--forest);
  background: none;
  border: 1.5px solid var(--line);
}
.doc:hover { border-radius: .7rem; transform: translateY(-2px); }
.doc--ask:hover { border-color: var(--forest); }
.doc__ico { flex: none; width: 20px; height: 20px; }
.doc__ico svg { width: 100%; height: 100%; }
.doc__meta {
  margin-inline-start: auto;
  font-size: .72rem;
  font-weight: 500;
  opacity: .7;
  white-space: nowrap;
}

.socs { display: flex; flex-direction: column; gap: .3rem; }
.soc {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 46px;
  padding: .4rem .6rem;
  border-radius: .9rem .18rem .9rem .18rem;
  font-family: var(--ui);
  font-size: .9rem;
  font-weight: 500;
  color: var(--charcoal);
  text-decoration: none;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.soc:hover { background: rgba(27,62,38,.07); color: var(--forest); }
.soc__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  color: var(--forest);
  background: rgba(27,62,38,.08);
  border-radius: .8rem .16rem .8rem .16rem;
  transition: border-radius .45s var(--ease), background-color .3s var(--ease);
}
.soc:hover .soc__ico { border-radius: 50%; background: var(--lemon); }
.soc__ico svg { width: 19px; height: 19px; }

/* ── availability ──────────────────────────────── alabaster ── */
.booking { padding: var(--s-xl) var(--gut); background: var(--alabaster); }
.booking__head { max-width: 1400px; margin: 0 auto clamp(2rem, 5vh, 3rem); }
.booking__note {
  margin: 1.1rem 0 0;
  max-width: 54ch;
  font-size: clamp(1rem, 1.75vmin, 1.1rem);
  line-height: 1.68;
  color: var(--fg-muted);
}
.booking__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  max-width: 1400px;
  margin-inline: auto;
  align-items: start;
}

.cal {
  padding: clamp(1.25rem, 2.4vw, 1.85rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2.25rem .4rem 2.25rem .4rem;
}
.cal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}
.cal__month {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.1vmin, 1.45rem);
  font-weight: 700;
  color: var(--charcoal);
}
.cal__nav {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  color: var(--forest);
  background: none;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.cal__nav:hover { border-color: var(--forest); background: rgba(27,62,38,.06); }
.cal__nav svg { width: 18px; height: 18px; }

.cal__dow, .cal__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .3rem;
}
.cal__dow span {
  padding-bottom: .5rem;
  font-family: var(--ui);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--fg-faint);
}
.cal__day {
  aspect-ratio: 1;
  min-height: 44px;
  font-family: var(--ui);
  font-size: .92rem;
  font-weight: 500;
  color: var(--charcoal);
  background: none;
  border: 1.5px solid transparent;
  border-radius: .9rem .18rem .9rem .18rem;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-radius .4s var(--ease), border-color .25s var(--ease);
}
.cal__day:hover:not(:disabled) { background: rgba(27,62,38,.09); border-radius: 50%; }
.cal__day.is-off { color: var(--fg-faint); opacity: .45; cursor: not-allowed; }
.cal__day.is-today { border-color: rgba(27,62,38,.35); }
.cal__day.is-picked {
  color: #fff;
  background: var(--forest);
  border-color: var(--forest);
  border-radius: 50%;
}
.cal__key {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 1.1rem 0 0;
  font-family: var(--ui);
  font-size: .78rem;
  color: var(--fg-muted);
}
.cal__key-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--forest); }

.slots {
  padding: clamp(1.25rem, 2.4vw, 1.85rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2.25rem .4rem 2.25rem .4rem;
}
.slots__empty, .slots__hint {
  margin: 0;
  font-family: var(--ui);
  font-size: .92rem;
  line-height: 1.6;
  color: var(--fg-muted);
}
.slots__day {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.2vmin, 1.5rem);
  font-weight: 700;
  color: var(--charcoal);
}
.slots__row { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.slot {
  min-height: 48px;
  padding: .7rem .5rem;
  font-family: var(--ui);
  font-size: .88rem;
  font-weight: 600;
  color: var(--forest);
  background: none;
  border: 1.5px solid var(--line);
  border-radius: 1rem .2rem 1rem .2rem;
  cursor: pointer;
  animation: slot-in .45s var(--ease) both;
  transition: border-color .25s var(--ease), background-color .25s var(--ease),
              color .25s var(--ease), border-radius .4s var(--ease);
}
@keyframes slot-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.slot:hover { border-color: var(--forest); }
.slot.is-on {
  color: #fff;
  background: var(--forest);
  border-color: var(--forest);
  border-radius: .6rem;
}
.field--kind { margin-top: 1.1rem; }
.booking__go { width: 100%; justify-content: center; margin-top: 1rem; }
.slots__hint { margin-top: .8rem; }

/* ── the form ──────────────────────────────────────── white ── */
.write { padding: var(--s-xl) var(--gut); max-width: 900px; margin-inline: auto; }
.write__head { margin-bottom: clamp(1.75rem, 4vh, 2.5rem); }
.form { display: flex; flex-direction: column; gap: 1.1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

.field { display: flex; flex-direction: column; gap: .4rem; }
.field__label {
  font-family: var(--ui);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--charcoal);
}
.req { color: #A8321E; }                      /* 5.6:1 on white */
.field__input {
  min-height: 52px;                            /* comfortable touch target */
  padding: .8rem 1rem;
  font-family: var(--body);
  font-size: 1rem;                             /* 16px — no iOS zoom on focus */
  color: var(--charcoal);
  background: var(--white);
  border: 1.5px solid var(--line-strong);
  border-radius: 1rem .2rem 1rem .2rem;
  transition: border-color .25s var(--ease), border-radius .4s var(--ease),
              box-shadow .25s var(--ease);
}
.field__input:focus {
  outline: none;
  border-color: var(--forest);
  border-radius: .6rem;
  box-shadow: 0 0 0 3px rgba(27,62,38,.14);
}
.field__input--area { resize: vertical; min-height: 160px; line-height: 1.65; }
.field__input.is-bad { border-color: #A8321E; }
.field__input.is-bad:focus { box-shadow: 0 0 0 3px rgba(168,50,30,.16); }
.field__help {
  font-family: var(--ui);
  font-size: .82rem;
  color: var(--fg-faint);
}
.field__err {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--ui);
  font-size: .84rem;
  font-weight: 500;
  color: #A8321E;
}
.field__err::before { content: "!"; font-weight: 700; }   /* not colour alone */

.form__errors {
  padding: 1.1rem 1.35rem;
  background: #FCEFEC;
  border: 1.5px solid #A8321E;
  border-radius: 1.1rem .22rem 1.1rem .22rem;
}
.form__errors:focus { outline: 2px solid #A8321E; outline-offset: 2px; }
.form__errors-h {
  margin: 0 0 .5rem;
  font-family: var(--ui);
  font-size: .95rem;
  font-weight: 600;
  color: #8A2818;
}
.form__errors ul { margin: 0; padding-inline-start: 1.2rem; }
.form__errors li { margin-top: .3rem; }
.form__errors a { color: #8A2818; font-size: .9rem; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form__foot .btn { margin-top: 0; }
.form__small { margin: 0; font-family: var(--ui); font-size: .84rem; color: var(--fg-faint); }
.form__done {
  margin: 0;
  padding: 1rem 1.25rem;
  font-family: var(--ui);
  font-size: .92rem;
  line-height: 1.6;
  color: var(--forest);
  background: rgba(27,62,38,.07);
  border-radius: 1.1rem .22rem 1.1rem .22rem;
}

/* ── FAQ ───────────────────────────────────────── alabaster ── */
.faq { padding: var(--s-xl) var(--gut); background: var(--alabaster); }
.faq__head { max-width: 900px; margin: 0 auto clamp(1.75rem, 4vh, 2.5rem); }
.faq__list { max-width: 900px; margin-inline: auto; }

.qa { border-bottom: 1px solid var(--line); }
.qa__h { margin: 0; }
.qa__btn {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem .75rem;
  width: 100%;
  min-height: 64px;
  padding: 1.25rem 0;
  text-align: start;
  background: none;
  border: 0;
  cursor: pointer;
}
.qa__cat {
  grid-column: 1;
  font-family: var(--ui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--forest);
}
.qa__q {
  grid-column: 1;
  font-family: var(--display);
  font-size: clamp(1.05rem, 2vmin, 1.35rem);
  font-weight: 700;
  line-height: 1.24;
  color: var(--charcoal);
  transition: color .25s var(--ease);
}
.qa__btn:hover .qa__q { color: var(--forest); }
/* a plus that turns into a minus */
.qa__mark {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  position: relative;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(27,62,38,.08);
  transition: background-color .3s var(--ease);
}
.qa__btn:hover .qa__mark { background: var(--lemon); }
.qa__mark i {
  position: absolute;
  left: 50%; top: 50%;
  width: 13px; height: 1.8px;
  margin: -.9px 0 0 -6.5px;
  background: var(--forest);
  border-radius: 2px;
  transition: transform .4s var(--ease);
}
.qa__mark i:last-child { transform: rotate(90deg); }
.qa__btn[aria-expanded="true"] .qa__mark i:last-child { transform: rotate(0deg); }
.qa__panel { padding: 0 0 1.5rem; max-width: 74ch; }
.qa__panel p {
  margin: 0;
  font-size: clamp(1rem, 1.8vmin, 1.12rem);
  line-height: 1.75;
  color: var(--fg-muted);
}
.qa__panel a { color: var(--forest); font-weight: 500; }

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hail__inner { grid-template-columns: 1fr; }
  .hail__shot { max-width: 340px; }
  .lines__grid { grid-template-columns: 1fr; }
  .booking__grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .form__row { grid-template-columns: 1fr; }
  .slots__row { grid-template-columns: 1fr; }
  .clock { flex-wrap: wrap; }
  .clock__note { padding-inline-start: 0; border-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hail::before { animation: none; }
  .slot { animation: none; }
}
body[data-motion="reduced"] .hail::before { animation: none; }

/* ── availability: range selection, wider slot grid ──────────────────── */
.slots__when {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.slots__when .slots__day { margin: 0; }
.slots__clear {
  flex: none;
  min-height: 36px;
  padding: .35rem .8rem;
  font-family: var(--ui);
  font-size: .78rem;
  font-weight: 600;
  color: var(--fg-muted);
  background: none;
  border: 1.5px solid var(--line);
  border-radius: .9rem .18rem .9rem .18rem;
  cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.slots__clear:hover { border-color: var(--forest); color: var(--forest); }

/* A selected run reads as one continuous band rather than separate pills. */
.cal__day.is-picked.is-mid  { border-radius: .3rem; }
.cal__day.is-picked.is-first { border-radius: 50% .3rem .3rem 50%; }
.cal__day.is-picked.is-last  { border-radius: .3rem 50% 50% .3rem; }
.cal__day.is-picked.is-first.is-last { border-radius: 50%; }

.slots__row { grid-template-columns: repeat(3, 1fr); }
.slot--all {
  grid-column: 1 / -1;
  background: rgba(27, 62, 38, .06);
  font-weight: 700;
}
.slot--all.is-on { background: var(--forest); }
.slot { font-size: .82rem; padding: .6rem .35rem; }

/* ── the booking sheet ───────────────────────────────────────────────── */
.sheet {
  width: min(680px, calc(100vw - 2rem));
  max-height: min(88vh, 900px);
  padding: 0;
  border: 0;
  background: var(--white);
  border-radius: 2rem .4rem 2rem .4rem;
  box-shadow: 0 40px 90px -40px rgba(20, 35, 25, .6);
  overflow: auto;
  overscroll-behavior: contain;
}
.sheet::backdrop { background: rgba(8, 18, 12, .58); backdrop-filter: blur(3px); }
.sheet[open] { animation: sheet-in .38s var(--ease); }
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.sheet__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.sheet__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.sheet__h {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.6vmin, 1.9rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--charcoal);
}
.sheet__x {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  color: var(--fg-muted);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.sheet__x:hover { background: rgba(26,29,32,.07); color: var(--charcoal); }
.sheet__x svg { width: 20px; height: 20px; }
.sheet__slot {
  margin: 0;
  padding: .85rem 1.1rem;
  font-family: var(--ui);
  font-size: .92rem;
  font-weight: 600;
  color: var(--forest);
  background: rgba(27, 62, 38, .08);
  border-radius: 1rem .2rem 1rem .2rem;
}
.sheet__errors {
  padding: 1rem 1.25rem;
  background: #FCEFEC;
  border: 1.5px solid #A8321E;
  border-radius: 1rem .2rem 1rem .2rem;
}
.sheet__errors ul { margin: 0; padding-inline-start: 1.2rem; }
.sheet__errors a { color: #8A2818; font-size: .9rem; }
.sheet__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .75rem;
  margin-top: .5rem;
}
.sheet__foot .btn { margin-top: 0; }
.btn--ghost-ink {
  min-height: 52px;
  padding: .95rem 1.6rem;
  color: var(--fg-muted);
  background: none;
  border: 1.5px solid var(--line-strong);
  border-radius: 1.75rem .25rem 1.75rem .25rem;
}
.btn--ghost-ink:hover { border-radius: .8rem; color: var(--charcoal); border-color: var(--charcoal); }

/* ── pending + result states ─────────────────────────────────────────── */
.spin {
  display: inline-block;
  width: 15px; height: 15px;
  margin-inline-end: .55rem;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn.is-busy { opacity: .75; cursor: progress; }

.slots__hint.is-good, .form__done {
  color: var(--forest);
}
.form__done.is-bad {
  color: #8A2818;
  background: #FCEFEC;
}
@media (prefers-reduced-motion: reduce) {
  .sheet[open] { animation: none; }
  .spin { animation-duration: 1.4s; }
}

/* Off-screen rather than display:none — bots skip hidden fields, but a
   positioned one still looks fillable to them. */
.gotcha {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Budget sits with its currency: the amount is wide, the unit is narrow. */
.form__row--money { grid-template-columns: minmax(0, 1fr) 8.5rem; align-items: start; }
@media (max-width: 620px) {
  .form__row--money { grid-template-columns: 1fr; }
}

/* A selected run of hours reads as one continuous block, matching the way a
   run of days is drawn in the calendar above it. */
.slot.is-on.is-mid   { border-radius: .3rem; }
.slot.is-on.is-first { border-radius: 1rem .3rem .3rem 1rem; }
.slot.is-on.is-last  { border-radius: .3rem 1rem 1rem .3rem; }
.slot.is-on.is-first.is-last { border-radius: .6rem; }

/* An hour that is already taken stays visible but plainly out of reach —
   showing it is more informative than silently omitting it. */
.slot.is-taken {
  color: var(--fg-faint);
  border-style: dashed;
  border-color: var(--line);
  background: repeating-linear-gradient(135deg,
    rgba(26,29,32,.035) 0 6px, transparent 6px 12px);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.slot.is-taken:hover { border-color: var(--line); }


/* ═══════════════════════════════════════════════════════════════════════
   RESEARCH
   ───────────────────────────────────────────────────────────────────────
   A descent from the landscape into the data: a photographic hero, the
   thesis in display type, the four postings as strata, then the tool
   itself on a dark ground so the screenshot reads as a lit instrument.
   ═══════════════════════════════════════════════════════════════════════ */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* One icon family: 24-grid, 1.6 stroke, round joins, no fills. */
.ico {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--lg { width: 1.75rem; height: 1.75rem; }

/* A wire button for the dark grounds, paired with .btn--leaf. */
.btn--wire {
  margin-top: clamp(1.6rem, 3.4vh, 2.6rem);
  border-radius: 1.75rem .25rem 1.75rem .25rem;   /* the house leaf */
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5);
}
.btn--wire:hover,
.btn--wire:focus-visible {
  border-radius: .8rem;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1.5px #fff;
  transform: translateY(-2px);
}

/* Anchors land below the fixed bar rather than under it. */
.research :where(#focus, #experience, #arpf, #stack, #goals) { scroll-margin-top: 96px; }

/* ── section rail ────────────────────────────────────────────────────
   A chapter index for a long page. Fixed, centred, and only where there
   is width to spare — below 1180px it would crowd the measure. */
.rail { display: none; }
@media (min-width: 1180px) {
  .rail {
    display: block;
    position: fixed;
    /* Held back over the photograph: five dots floating on the hero read as
       specks on the image rather than as navigation. They fade in with the
       first real section. */
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s var(--ease), visibility .45s var(--ease);
    z-index: 40;
    top: 50%;
    inset-inline-end: clamp(1rem, 2vw, 2rem);
    transform: translateY(-50%);
  }
  .rail[data-past-hero="true"] { opacity: 1; visibility: visible; }
  .rail__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
  .rail a {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    min-height: 34px;
    padding: .25rem .35rem;
    text-decoration: none;
    color: var(--fg-faint);
    border-radius: .5rem;
  }
  .rail__label {
    font-family: var(--ui);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity .35s var(--ease), transform .35s var(--ease);
  }
  .rail__dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: transparent;
    box-shadow: inset 0 0 0 1.5px currentColor;
    transition: background-color .35s var(--ease), transform .35s var(--ease);
  }
  /* Label appears on hover, on keyboard focus, and for the current
     section — never hover-only. */
  .rail a:hover .rail__label,
  .rail a:focus-visible .rail__label,
  .rail a[aria-current="true"] .rail__label { opacity: 1; transform: none; }

  .rail a:hover, .rail a:focus-visible { color: var(--forest); }
  .rail a[aria-current="true"] { color: var(--forest); }
  .rail a[aria-current="true"] .rail__dot { background: currentColor; transform: scale(1.25); }

  /* Over the dark ARPF and goals sections the rail flips to paper ink. */
  .rail[data-on-dark="true"] a { color: rgba(255,255,255,.6); }
  .rail[data-on-dark="true"] a:hover,
  .rail[data-on-dark="true"] a:focus-visible,
  .rail[data-on-dark="true"] a[aria-current="true"] { color: var(--lemon); }
}

/* ── hero ────────────────────────────────────────────────────────────── */
.rhero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  align-content: end;
  gap: 1rem;
  padding: 8rem var(--gut) clamp(4.5rem, 12vh, 7rem);
  background: #0B0F0C;
  overflow: hidden;
}
.rhero__media { position: absolute; inset: 0; z-index: -2; }
.rhero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  /* A slow drift that never renders the source above its native scale:
     it starts zoomed and settles, rather than growing past 1:1. */
  transform: scale(1.12);
  animation: heroDrift 26s var(--ease) forwards;
}
@keyframes heroDrift { to { transform: scale(1.02) translateY(-1.2%); } }

/* The darkening cover over the photograph.
   z-index must be POSITIVE. .rhero__media is itself a stacking context
   (absolute + z-index:-2), and inside a stacking context a negative-z child
   paints before in-flow content — so at z-index:-1 this sat *behind* the
   <img> and did nothing at all. */
.rhero__wash {
  position: absolute; inset: 0; z-index: 1;
  /* Weighted against the actual photograph, not by eye: the bright cloud
     band sits exactly behind the eyebrow and title, so the mid-stops carry
     most of the darkening. */
  background:
    linear-gradient(to top, rgba(8,22,14,.93) 0%, rgba(8,22,14,.86) 32%,
                    rgba(8,22,14,.66) 64%, rgba(8,22,14,.56) 100%);
}

.rhero__body { position: relative; max-width: 1200px; margin-inline: auto; width: 100%; }
.rhero__brow { margin-bottom: 1.1rem; }

.rhero__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.6rem, 8.4vmin, 6.4rem);
  line-height: .98;
  letter-spacing: -.03em;
  color: #fff;
}
.rhero__line { display: block; }
.rhero__line--alt { color: var(--lemon); font-style: italic; font-weight: 400; }

.rhero__lede {
  max-width: 46ch;
  margin: 1.6rem 0 0;
  font-family: var(--body);
  font-size: clamp(1.02rem, 1.95vmin, 1.22rem);
  line-height: 1.7;
  color: rgba(255,255,255,.88);            /* 12.5:1 on the wash */
}

.rhero__cue {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .4rem .9rem;
  text-decoration: none;
  color: rgba(255,255,255,.7);
  font-family: var(--ui);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.rhero__cue:hover, .rhero__cue:focus-visible { color: #fff; }
.rhero__cue-line {
  width: 1px; height: 34px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.8));
  animation: cueFall 2.4s var(--ease) infinite;
  transform-origin: top;
}
@keyframes cueFall {
  0%   { transform: scaleY(.15); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ── research focus ──────────────────────────────────────────────────── */
.focus { padding: var(--s-xl) var(--gut); background: var(--white); }
.focus__inner {
  max-width: 1180px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
/* The heading holds its own column while the prose scrolls past it. */
.focus__head { position: sticky; top: 118px; }
.focus__body > p {
  margin: 0 0 1.5rem;
  font-size: clamp(1rem, 1.82vmin, 1.1rem);
  line-height: 1.8;
  color: var(--fg-muted);
  max-width: 68ch;
}
.focus__lede {
  font-size: clamp(1.12rem, 2.2vmin, 1.4rem) !important;
  line-height: 1.65 !important;
  color: var(--charcoal) !important;
}

.thesis {
  margin: clamp(2rem, 5vh, 3.25rem) 0;
  padding: clamp(1.5rem, 3.5vw, 2.5rem) 0 clamp(1.5rem, 3.5vw, 2.5rem)
           clamp(1.35rem, 3vw, 2.25rem);
  border-inline-start: 4px solid var(--lemon);
}
.thesis p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.6vmin, 2.35rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--charcoal);
}
.thesis em { color: var(--forest); font-weight: 400; }

/* ── strata ──────────────────────────────────────────────────────────── */
.strata { padding: var(--s-xl) var(--gut); background: var(--alabaster); }
.strata__inner { max-width: 1180px; margin-inline: auto; }
.strata__head { margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.strata__list { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }

.stratum {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1.5rem, 3.2vw, 2.5rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 1.75rem .35rem 1.75rem .35rem;    /* the house leaf */
  transition: border-color .45s var(--ease), box-shadow .45s var(--ease),
              transform .45s var(--ease);
}
.stratum:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 26px 60px -46px rgba(26,29,32,.6);
}
/* The copy keeps the dominant column; the photograph is the companion,
   not the headline. */
.stratum--media { grid-template-columns: 4.5rem minmax(0, 8fr) minmax(0, 5fr); }

.stratum__rail {
  display: grid;
  justify-items: center;
  gap: .9rem;
  align-content: start;
  color: var(--forest);
}
.stratum__n {
  font-family: var(--ui);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-faint);
}
/* The icon sits in a leaf well so it reads as an object, not a sticker. */
.stratum__rail .ico--lg {
  padding: .55rem;
  box-sizing: content-box;
  background: rgba(245, 236, 154, .38);
  border-radius: 60% 10% 60% 10%;
  transition: border-radius .5s var(--ease), background-color .4s var(--ease);
}
.stratum:hover .stratum__rail .ico--lg { border-radius: .7rem; background: var(--lemon); }

.stratum__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.6vmin, 1.7rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.014em;
  color: var(--charcoal);
  text-wrap: pretty;
}
.stratum__title abbr { text-decoration: none; }
.stratum__sub {
  display: block;
  margin-top: .3rem;
  font-family: var(--ui);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--forest);
}
.stratum__role {
  margin: .6rem 0 0;
  font-family: var(--ui);
  font-size: .9rem;
  font-weight: 600;
  color: var(--fg-faint);
}
.stratum__role span { opacity: .5; margin: 0 .3rem; }
.stratum__text {
  margin: 1rem 0 0;
  font-family: var(--body);
  font-size: clamp(.97rem, 1.72vmin, 1.05rem);
  line-height: 1.72;
  color: var(--fg-muted);
  max-width: 66ch;
}
/* Roles with several distinct contributions list them. Same leaf marker as
   the degree and fellowship lists on the About page — without this the
   browser's default hollow circles show through. */
.stratum__points {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .7rem;
}
.stratum__points li {
  position: relative;
  padding-inline-start: 1.5rem;
  font-family: var(--body);
  font-size: clamp(.95rem, 1.68vmin, 1.03rem);
  line-height: 1.68;
  color: var(--fg-muted);
  max-width: 66ch;
}
.stratum__points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .62em;
  width: .46rem;
  height: .46rem;
  background: var(--lemon);
  border: 1px solid rgba(27, 62, 38, .45);
  border-radius: 60% 6% 60% 6%;
}

.stratum__more { margin: 1.15rem 0 0; }
.stratum__more a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  font-family: var(--ui);
  font-size: .9rem;
  font-weight: 600;
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1px solid rgba(27,62,38,.3);
}
.stratum__more a:hover { border-bottom-color: var(--forest); }
.stratum__more a .ico { transition: transform .4s var(--ease); }
.stratum__more a:hover .ico { transform: translateX(4px); }

.tags {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 1.15rem 0 0; padding: 0; list-style: none;
}
.tags li {
  min-inline-size: 0;
  padding: .3rem .7rem;
  font-family: var(--ui);
  font-size: .76rem;
  font-weight: 500;
  color: var(--forest);
  background: rgba(27, 62, 38, .07);
  border-radius: .65rem .16rem .65rem .16rem;
  overflow-wrap: anywhere;
}

.stratum__figure { margin: 0; align-self: stretch; }
.stratum__figure img {
  width: 100%; height: 100%;
  min-height: 210px;
  object-fit: cover;
  border-radius: 1.25rem .28rem 1.25rem .28rem;   /* the house leaf */
  transition: border-radius .5s var(--ease);
}
.stratum--media:hover .stratum__figure img { border-radius: .8rem; }

/* A book cover is an object, not a scene — cropping it to a landscape box
   would slice the title off. It sits whole on a tinted ground instead. */
.stratum__figure--object img {
  object-fit: contain;
  min-height: 0;
  max-height: 320px;
  padding: 1rem;
  background: var(--alabaster);
  border: 1px solid var(--line);
}

/* ── ARPF ────────────────────────────────────────────────────────────── */
.arpf {
  padding: var(--s-xl) var(--gut);
  background: var(--forest);
  /* A faint grid, the way a projection is drawn onto a chart ground. */
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
}
.arpf__inner { max-width: 1180px; margin-inline: auto; }
.arpf__head { max-width: 74ch; }
.arpf__sub {
  margin: 1.1rem 0 0;
  font-family: var(--ui);
  font-size: clamp(1rem, 1.9vmin, 1.15rem);
  font-weight: 600;
  color: #fff;
}
.arpf__ver {
  display: inline-block;
  margin-inline-start: .6rem;
  padding: .22rem .6rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--lemon);
  background: rgba(245, 236, 154, .14);
  border: 1px solid rgba(245, 236, 154, .4);
  border-radius: .55rem;
  vertical-align: middle;
}
.arpf__lede {
  margin: 1.15rem 0 0;
  font-family: var(--body);
  font-size: clamp(1rem, 1.85vmin, 1.12rem);
  line-height: 1.75;
  color: rgba(255,255,255,.82);            /* 9.4:1 on forest */
  max-width: 64ch;
}
.arpf__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.arpf__note {
  margin: clamp(1.75rem, 4vh, 2.5rem) 0 0;
  font-family: var(--ui);
  font-size: .84rem;
  color: rgba(255,255,255,.6);
}

/* The application window. */
.shot { margin: clamp(2.5rem, 6vh, 4rem) 0 0; }
.shot__frame {
  border-radius: .9rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 50px 110px -40px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.1);
  /* Settles from a slight recline into flat as it enters — set by JS on the
     figure, so a reduced-motion reader simply gets the flat state. */
  transform: perspective(1800px) rotateX(0deg);
  transition: transform 1.1s var(--ease);
}
.shot[data-tilt="on"] .shot__frame { transform: perspective(1800px) rotateX(7deg) scale(.97); }
.shot__bar {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem .9rem;
  background: #EDEEEF;
  border-bottom: 1px solid rgba(26,29,32,.1);
}
.shot__dots { display: flex; gap: .4rem; }
.shot__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(26,29,32,.18); }
.shot__url {
  font-family: var(--ui);
  font-size: .74rem;
  color: #55595E;                          /* 6.7:1 on the bar */
  overflow-wrap: anywhere;
}
.shot__frame img { display: block; width: 100%; height: auto; }
.shot figcaption {
  margin: 1rem 0 0;
  font-family: var(--ui);
  font-size: .82rem;
  line-height: 1.6;
  color: rgba(255,255,255,.66);
  text-align: center;
}

.arpf-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  gap: clamp(.9rem, 2vw, 1.35rem);
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  padding: 0;
  list-style: none;
}
.arpf-pillar {
  padding: clamp(1.35rem, 2.6vw, 1.85rem);
  background: rgba(255,255,255,.055);
  /* The tinted surface is only 1.18:1 against the forest ground, so the
     border carries the separation and has to be seen doing it. */
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 1.35rem .28rem 1.35rem .28rem;   /* the house leaf */
  color: var(--lemon);
  transition: background-color .45s var(--ease), border-color .45s var(--ease),
              transform .45s var(--ease);
}
.arpf-pillar:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.09);
  border-color: rgba(245,236,154,.45);
}
.arpf-pillar h3 {
  margin: 1rem 0 0;
  font-family: var(--ui);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: #fff;
}
.arpf-pillar p {
  margin: .7rem 0 0;
  font-family: var(--body);
  font-size: .94rem;
  line-height: 1.68;
  color: rgba(255,255,255,.78);            /* 8.5:1 on the pillar ground */
}

/* ── stack ───────────────────────────────────────────────────────────── */
.stack { padding: var(--s-xl) var(--gut); background: var(--white); }
.stack__inner { max-width: 1180px; margin-inline: auto; }
.stack__head { margin-bottom: clamp(2.25rem, 5vh, 3.5rem); }
.stack__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.kit {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--alabaster);
  border: 1px solid var(--line);
  border-radius: 1.5rem .3rem 1.5rem .3rem;       /* the house leaf */
  color: var(--forest);
  transition: border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.kit:hover { border-color: var(--line-strong); box-shadow: 0 22px 50px -42px rgba(26,29,32,.55); }
.kit h3 {
  margin: .9rem 0 1.1rem;
  font-family: var(--display);
  font-size: clamp(1.12rem, 2.2vmin, 1.35rem);
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--charcoal);
}

/* ── goals ───────────────────────────────────────────────────────────── */
.goals {
  padding: var(--s-xl) var(--gut);
  background: var(--charcoal);
}
.goals__inner { max-width: 820px; margin-inline: auto; text-align: center; }
.goals__text {
  margin: 1.5rem 0 0;
  font-family: var(--body);
  font-size: clamp(1rem, 1.9vmin, 1.14rem);
  line-height: 1.8;
  color: rgba(255,255,255,.8);             /* 11.2:1 on charcoal */
  text-wrap: pretty;
}
.goals__text strong { color: var(--lemon); font-weight: 600; }
.goals__actions {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
  margin-top: clamp(1rem, 2vh, 1.5rem);
}

/* ── narrower screens ────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .focus__inner { grid-template-columns: minmax(0, 1fr); }
  .focus__head { position: static; }
  .stratum--media { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .stratum__figure { grid-column: 1 / -1; }
  .stratum__figure img { min-height: 0; aspect-ratio: 16 / 9; }
  /* The book keeps its own proportions: a portrait cover letterboxed into a
     16/9 box would shrink to a stamp. */
  .stratum__figure--object img { aspect-ratio: auto; height: 300px; }
}

@media (max-width: 700px) {
  .rhero { padding-inline: var(--gut); min-height: 92svh; }
  .stratum {
    grid-template-columns: minmax(0, 1fr);
    padding: 1.35rem 1.15rem;
    border-radius: 1.35rem .3rem 1.35rem .3rem;
  }
  /* The index and icon sit as a row above the copy rather than a column
     beside it, so the text keeps the full measure. */
  .stratum__rail {
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: .8rem;
  }
  .thesis { padding-block: 1.15rem; }
}

/* ── reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rhero__media img { animation: none; transform: scale(1.02); }
  .rhero__cue-line { animation: none; opacity: .8; }
  .shot[data-tilt="on"] .shot__frame,
  .shot__frame { transform: none; transition: none; }
  .stratum:hover, .arpf-pillar:hover, .kit:hover { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   RESOURCE HUB
   ═══════════════════════════════════════════════════════════════════════ */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  width: 1.15em; height: 1.15em; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico--lg { width: 1.75rem; height: 1.75rem; }
.ico--xl { width: 2.6rem; height: 2.6rem; }

.btn--wire {
  margin-top: clamp(1.6rem, 3.4vh, 2.6rem);
  border-radius: 1.75rem .25rem 1.75rem .25rem;
  background: transparent; color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5);
}
.btn--wire:hover, .btn--wire:focus-visible {
  border-radius: .8rem; background: rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1.5px #fff; transform: translateY(-2px);
}

.rh-head { padding: calc(clamp(7.5rem, 11vh, 8.5rem)) var(--gut) var(--s-md); background: var(--white); }
.rh-head__inner {
  max-width: 1240px; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.rh-head__lede {
  max-width: 52ch; margin: 1.4rem 0 0;
  font-family: var(--body); font-size: clamp(1rem, 1.85vmin, 1.14rem);
  line-height: 1.75; color: var(--fg-muted);
}

/* the academy panel */
.academy-call {
  position: relative; isolation: isolate; display: block; overflow: hidden;
  padding: clamp(1.75rem, 3.5vw, 2.6rem);
  text-decoration: none; background: var(--forest);
  border-radius: 2.25rem .4rem 2.25rem .4rem;      /* the house leaf */
  box-shadow: 0 34px 80px -50px rgba(27,62,38,.9);
  transition: transform .5s var(--ease), border-radius .5s var(--ease);
}
.academy-call:hover, .academy-call:focus-visible {
  transform: translateY(-4px); border-radius: 1rem;
}
.academy-call__glow {
  position: absolute; inset: -40% -10% auto auto; z-index: -1;
  width: 26rem; height: 26rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,236,154,.28), transparent 68%);
  transition: transform .8s var(--ease);
}
.academy-call:hover .academy-call__glow { transform: translate(-2rem, 2rem) scale(1.12); }
.academy-call__brow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--ui); font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--lemon);
}
.academy-call__title {
  display: block; margin: .9rem 0 0;
  font-family: var(--display); font-size: clamp(1.7rem, 3.6vmin, 2.5rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: #fff;
}
.academy-call__text {
  display: block; margin: .8rem 0 0; max-width: 34ch;
  font-family: var(--body); font-size: .98rem; line-height: 1.7;
  color: rgba(255,255,255,.82);
}
.academy-call__cta {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.5rem;
  font-family: var(--ui); font-size: .92rem; font-weight: 600; color: var(--lemon);
}
.academy-call:hover .academy-call__cta .ico { transform: translateX(5px); }
.academy-call__cta .ico { transition: transform .4s var(--ease); }

.rh-lib { padding: var(--s-md) var(--gut) var(--s-xl); background: var(--alabaster); }
.rh-lib__inner { max-width: 1240px; margin-inline: auto; }
.rh-filter { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: clamp(1.75rem, 4vh, 2.5rem); }

.rh-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem); margin: 0; padding: 0; list-style: none;
}
.res {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  background: var(--white); border: 1px solid var(--line);
  border-radius: 1.6rem .32rem 1.6rem .32rem;      /* the house leaf */
  overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.res:hover { transform: translateY(-4px); border-color: var(--line-strong);
  box-shadow: 0 28px 64px -46px rgba(26,29,32,.6); }
.res.is-out { display: none; }
.res__shot { margin: 0; background: var(--alabaster); }
.res__shot img { width: 100%; height: 100%; min-height: 230px; object-fit: cover; }
.res__shot--drawn {
  display: grid; place-items: center; min-height: 230px;
  background:
    radial-gradient(circle at 30% 25%, rgba(245,236,154,.5), transparent 60%),
    linear-gradient(150deg, var(--alabaster), #EFF1EC);
}
.res__mark svg {
  width: 4.5rem; height: 4.5rem; fill: none; stroke: var(--forest);
  stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; opacity: .55;
}
/* Book covers are portrait and sit happily in the narrow slot. Product
   photographs are landscape, and cropping one into that slot throws most of
   the picture away — those stack instead, image full width on top. */
.res--wide { grid-template-columns: minmax(0, 1fr); }
.res--wide .res__shot img { min-height: 0; aspect-ratio: 16 / 10; }

.res__body { padding: clamp(1.35rem, 2.6vw, 1.85rem); }
.res__kind {
  display: flex; align-items: center; gap: .45rem; margin: 0 0 .7rem;
  font-family: var(--ui); font-size: .7rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--forest);
}
.res__role {
  margin-inline-start: auto; padding: .18rem .55rem; letter-spacing: .08em;
  background: rgba(27,62,38,.08); border-radius: .5rem; color: var(--fg-faint);
}
.res__title {
  margin: 0; font-family: var(--display); font-size: clamp(1.3rem, 2.6vmin, 1.7rem);
  font-weight: 700; line-height: 1.15; letter-spacing: -.015em; color: var(--charcoal);
}
.res__sub { margin: .35rem 0 0; font-family: var(--ui); font-size: .9rem;
  font-weight: 600; color: var(--forest); }
.res__text { margin: .85rem 0 0; font-family: var(--body); font-size: .96rem;
  line-height: 1.7; color: var(--fg-muted); }
.res__meta { margin: .85rem 0 0; font-family: var(--ui); font-size: .78rem; color: var(--fg-faint); }
.res__meta span { opacity: .5; margin: 0 .25rem; }
.res__cta { margin-top: 1.25rem; }

.rh-empty {
  display: grid; justify-items: center; gap: .6rem; text-align: center;
  padding: clamp(3rem, 8vh, 5rem) var(--gut);
  color: var(--forest);
  background: var(--white); border: 1px dashed var(--line-strong);
  border-radius: 1.6rem .32rem 1.6rem .32rem;
}
.rh-empty h3 { margin: .5rem 0 0; font-family: var(--display);
  font-size: clamp(1.25rem, 2.6vmin, 1.6rem); color: var(--charcoal); }
.rh-empty p { margin: 0; max-width: 52ch; font-family: var(--body);
  font-size: .98rem; line-height: 1.7; color: var(--fg-muted); }
.rh-empty .btn { margin-top: 1.25rem; }

@media (max-width: 980px) {
  .rh-head__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .res { grid-template-columns: minmax(0, 1fr); }
  .res__shot img { min-height: 0; aspect-ratio: 3 / 2; }
  .res__shot--drawn { min-height: 0; aspect-ratio: 3 / 2; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ACADEMY — gate, auth, dashboard
   ═══════════════════════════════════════════════════════════════════════ */

.gate {
  padding: calc(clamp(7.5rem, 11vh, 8.5rem)) var(--gut) var(--s-xl);
  background: var(--forest);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(245,236,154,.14), transparent 46%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: auto, 64px 64px, 64px 64px;
}
.gate__grid {
  max-width: 1240px; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.gate__title {
  margin: 1.1rem 0 0; font-family: var(--display);
  font-size: clamp(2.1rem, 5.2vmin, 3.6rem); font-weight: 700;
  line-height: 1.06; letter-spacing: -.025em; color: #fff; text-wrap: balance;
}
.gate__name { color: #fff; }
.gate__title em { display: block; color: var(--lemon); font-style: italic; font-weight: 400; }
.gate__lede {
  margin: 1.25rem 0 0; font-family: var(--ui);
  font-size: clamp(1rem, 2vmin, 1.2rem); font-weight: 600; color: var(--lemon);
}
.gate__text {
  margin: 1.15rem 0 0; max-width: 58ch; font-family: var(--body);
  font-size: clamp(.99rem, 1.8vmin, 1.1rem); line-height: 1.78;
  color: rgba(255,255,255,.82);                     /* 8.6:1 on forest */
}
.gate__facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: .8rem; margin: clamp(1.75rem, 4vh, 2.5rem) 0 0; padding: 0; list-style: none;
}
.gate__facts li {
  display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem;
  font-family: var(--ui); font-size: .88rem; color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.24);
  border-radius: .9rem .2rem .9rem .2rem;
}
.gate__facts .ico { color: var(--lemon); }
.gate__facts strong { color: #fff; font-weight: 600; }

.auth {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--white);
  border-radius: 1.9rem .35rem 1.9rem .35rem;      /* the house leaf */
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.7);
}
.auth__tabs { display: flex; gap: .35rem; padding: .3rem;
  background: var(--alabaster); border: 1px solid var(--line); border-radius: .8rem; }
.auth__tab {
  flex: 1; min-height: 44px; padding: .6rem .8rem;
  font-family: var(--ui); font-size: .92rem; font-weight: 600;
  color: var(--fg-muted); background: none; border: 0; border-radius: .6rem; cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.auth__tab.is-on { background: var(--forest); color: #fff; }
.auth__pane { margin-top: 1.4rem; }
.auth__go { width: 100%; justify-content: center; margin-top: 1.5rem; }
.auth__note {
  margin: 1rem 0 0; padding: .8rem 1rem; font-family: var(--ui); font-size: .86rem;
  line-height: 1.6; color: #7A3B12; background: #FFF6E8;
  border: 1px solid #E9C99A; border-radius: .7rem;
}
.auth__small {
  margin: 1.25rem 0 0; font-family: var(--ui); font-size: .78rem;
  line-height: 1.6; color: var(--fg-faint);
}
.auth__small a { color: var(--forest); }

.field__pw { position: relative; }
.field__pw .field__input { padding-inline-end: 3rem; }
.field__peek {
  position: absolute; inset-inline-end: .3rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer; color: var(--fg-faint); border-radius: .5rem;
}
.field__peek:hover { color: var(--charcoal); }
.check { display: flex; align-items: flex-start; gap: .65rem; margin-top: 1.25rem;
  font-family: var(--ui); font-size: .92rem; color: var(--fg-muted); cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: .1rem; accent-color: var(--forest); flex: 0 0 auto; }

/* ── dashboard ─────────────────────────────────────────────────────── */
.dash { padding: calc(clamp(7.5rem, 11vh, 8.5rem)) var(--gut) var(--s-xl); background: var(--white); }
.dash__inner { max-width: 1240px; margin-inline: auto; }
.dash__top {
  display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between;
  align-items: flex-end; margin-bottom: clamp(2.25rem, 5vh, 3.5rem);
}
.whoami {
  display: flex; align-items: center; gap: .9rem; padding: .8rem 1rem;
  background: var(--alabaster); border: 1px solid var(--line);
  border-radius: 1.1rem .22rem 1.1rem .22rem;
}
.whoami__ring {
  display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto;
  font-family: var(--ui); font-size: .95rem; font-weight: 700; color: #fff;
  background: var(--forest); border-radius: 60% 10% 60% 10%;
}
.whoami__id { display: grid; line-height: 1.35; min-width: 0; }
.whoami__id strong { font-family: var(--ui); font-size: .95rem; color: var(--charcoal); }
.whoami__id span { font-family: var(--ui); font-size: .8rem; color: var(--fg-faint);
  overflow-wrap: anywhere; }
.whoami__out {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px;
  margin-inline-start: .5rem; padding: 0 .7rem;
  font-family: var(--ui); font-size: .84rem; font-weight: 600; color: var(--fg-muted);
  background: none; border: 1px solid var(--line-strong); border-radius: .6rem; cursor: pointer;
}
.whoami__out:hover { color: var(--charcoal); border-color: var(--charcoal); }

.dash__block { margin-top: clamp(2.5rem, 6vh, 4rem); }
.dash__h { margin: 0 0 1.35rem; font-family: var(--display);
  font-size: clamp(1.4rem, 3vmin, 2rem); font-weight: 700; color: var(--charcoal); }
.dash__bar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  justify-content: space-between; }
.dash__bar .dash__h { margin-bottom: 0; }
.dash__search { position: relative; }
.dash__search-ico { position: absolute; inset-inline-start: .85rem; top: 50%;
  transform: translateY(-50%); color: var(--fg-faint); pointer-events: none; }
.dash__search input {
  min-height: 46px; width: min(20rem, 68vw); padding: .6rem 1rem .6rem 2.6rem;
  font-family: var(--ui); font-size: .95rem; color: var(--charcoal);
  background: var(--white); border: 1px solid var(--line-strong); border-radius: .7rem;
}
.dash__search input:focus { outline: 2px solid var(--forest); outline-offset: 2px; }
.dash__empty {
  margin: 0; padding: 1.6rem; font-family: var(--body); font-size: .98rem;
  line-height: 1.7; color: var(--fg-muted); background: var(--alabaster);
  border: 1px dashed var(--line-strong); border-radius: 1rem;
}

.course-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: clamp(1rem, 2.4vw, 1.6rem);
}
.ccard {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 1.5rem .3rem 1.5rem .3rem;        /* the house leaf */
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.ccard:hover { transform: translateY(-4px); border-color: var(--line-strong);
  box-shadow: 0 26px 60px -46px rgba(26,29,32,.6); }
.ccard__shot { position: relative; display: block; }
/* Course covers are designed artwork carrying their own title text, so the
   card matches the 16:9 they are drawn at rather than cropping words off
   the edges. */
/* height:auto matters — the <img> carries a height attribute, and without
   this the attribute supplies the used height and aspect-ratio is ignored. */
.ccard__shot img { width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; display: block; }
.ccard__price {
  position: absolute; inset-block-start: .8rem; inset-inline-start: .8rem;
  padding: .3rem .7rem; font-family: var(--ui); font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--charcoal);
  background: var(--lemon); border-radius: .5rem;
}
.ccard__body { display: flex; flex-direction: column; flex: 1;
  padding: clamp(1.15rem, 2.2vw, 1.5rem); }
.ccard__meta { margin: 0; font-family: var(--ui); font-size: .76rem;
  letter-spacing: .04em; color: var(--fg-faint); }
.ccard__meta span { opacity: .5; margin: 0 .3rem; }
.ccard__title { margin: .6rem 0 0; font-family: var(--display);
  font-size: clamp(1.15rem, 2.3vmin, 1.4rem); font-weight: 700; line-height: 1.2; }
.ccard__title a { color: var(--charcoal); text-decoration: none; }
.ccard__title a:hover { color: var(--forest); }
.ccard__text { margin: .7rem 0 0; font-family: var(--body); font-size: .92rem;
  line-height: 1.65; color: var(--fg-muted); }
.ccard__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1rem 0 0;
  padding: 0; list-style: none; }
.ccard__tags li {
  padding: .25rem .6rem; font-family: var(--ui); font-size: .72rem; color: var(--forest);
  background: rgba(27,62,38,.07); border-radius: .55rem .14rem .55rem .14rem;
}
.ccard__prog { margin-top: 1.1rem; }
.bar { height: 8px; background: rgba(26,29,32,.1); border-radius: 99px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--forest);
  border-radius: 99px; transition: width .6s var(--ease); }
.bar__label { margin: .45rem 0 0; font-family: var(--ui); font-size: .78rem;
  font-variant-numeric: tabular-nums; color: var(--fg-faint); }
.ccard__cta { margin-top: auto; align-self: flex-start; }
.ccard .btn { margin-top: 1.2rem; }

/* The pager is styled once, up in the blog block — the academy catalogue
   uses the same markup and inherits it rather than redefining it here. */

.lnote { padding: var(--s-lg) var(--gut); background: var(--alabaster);
  border-top: 1px solid var(--line); }
.lnote__inner { max-width: 70ch; margin-inline: auto; }
.lnote__h { margin: 0 0 1rem; font-family: var(--display);
  font-size: clamp(1.2rem, 2.5vmin, 1.5rem); color: var(--charcoal); }
.lnote p, .lnote li { font-family: var(--body); font-size: .95rem;
  line-height: 1.75; color: var(--fg-muted); }
.lnote p { margin: 0 0 .9rem; }
.lnote ul { margin: 0 0 .9rem; padding-inline-start: 1.2rem; }
.lnote li { margin-bottom: .4rem; }

@media (max-width: 980px) { .gate__grid { grid-template-columns: minmax(0, 1fr); } }


/* ═══════════════════════════════════════════════════════════════════════
   COURSE PLAYER
   ═══════════════════════════════════════════════════════════════════════ */

.cbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem clamp(1rem, 3vw, 1.75rem);
  background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(140%);
}
.cbar__back { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px;
  font-family: var(--ui); font-size: .88rem; font-weight: 600;
  color: var(--forest); text-decoration: none; }
.cbar__title {
  flex: 1; min-width: 0; margin: 0; font-family: var(--ui); font-size: .92rem;
  font-weight: 600; color: var(--charcoal); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cbar__right { display: flex; align-items: center; gap: .6rem; }
.cbar__who { font-family: var(--ui); font-size: .84rem; color: var(--fg-faint); }
.cbar__toc { display: none; place-items: center; width: 44px; height: 44px;
  background: none; border: 1px solid var(--line-strong); border-radius: .6rem;
  color: var(--charcoal); cursor: pointer; }

.cgate { display: grid; place-items: center; min-height: 70svh; padding: var(--s-lg) var(--gut); }
.cgate__box { display: grid; justify-items: center; gap: .8rem; text-align: center;
  max-width: 46ch; color: var(--forest); }
.cgate__box h1 { margin: .4rem 0 0; font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vmin, 2.1rem); color: var(--charcoal); }
.cgate__box p { margin: 0; font-family: var(--body); font-size: 1rem;
  line-height: 1.7; color: var(--fg-muted); }

/* .cshell, not .course — the About page already uses .course for each
   coursework group, and this grid was turning those into three columns with
   a 40px middle track, which wrapped every chip one letter per line. */
.cshell {
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr) minmax(0, 17rem);
  gap: clamp(1rem, 2.5vw, 2rem);
  max-width: 1500px; margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) var(--s-lg);
  align-items: start;
}

/* contents */
.crail {
  position: sticky; top: 4.5rem; max-height: calc(100svh - 6rem); overflow-y: auto;
  padding: 1.1rem; background: var(--alabaster); border: 1px solid var(--line);
  border-radius: 1.35rem .28rem 1.35rem .28rem; overscroll-behavior: contain;
}
.crail__head { padding: 0 .3rem .9rem; border-bottom: 1px solid var(--line); }
.crail__eyebrow { margin: 0; font-family: var(--ui); font-size: .68rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--forest); }
.crail__meta { margin: .35rem 0 0; font-family: var(--ui); font-size: .76rem; color: var(--fg-faint); }
.crail__list { margin: .9rem 0 0; padding: 0; list-style: none; }
.crail__list ol { margin: .45rem 0 0; padding: 0; list-style: none; }
.crg + .crg { margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid var(--line); }
.crg__h { display: flex; align-items: center; gap: .4rem; margin: 0;
  font-family: var(--ui); font-size: .7rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--forest); }
.crg__lock { width: .95rem; height: .95rem; }
.crg__t { margin: .3rem 0 0; font-family: var(--ui); font-size: .88rem;
  font-weight: 600; line-height: 1.35; color: var(--charcoal); }
.crg__q { margin: .25rem 0 0; font-family: var(--ui); font-size: .74rem;
  font-variant-numeric: tabular-nums; color: var(--fg-faint); }
.crg__why { margin: .4rem 0 0; font-family: var(--ui); font-size: .74rem;
  line-height: 1.5; color: var(--fg-faint); font-style: italic; }
.crg--locked .crg__t, .crg--locked .crg__h { opacity: .55; }

.cru {
  display: flex; align-items: flex-start; gap: .55rem; width: 100%;
  min-height: 44px; padding: .5rem .55rem; text-align: start;
  font-family: var(--ui); font-size: .84rem; line-height: 1.45; color: var(--fg-muted);
  background: none; border: 0; border-radius: .55rem; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.cru:hover { background: rgba(27,62,38,.07); color: var(--charcoal); }
.cru__i { margin-top: .1rem; color: var(--fg-faint); }
.cru.is-done .cru__i { color: var(--forest); }
.cru.is-at { background: var(--forest); color: #fff; font-weight: 600; }
.cru.is-at .cru__i { color: var(--lemon); }
.cru.is-locked { opacity: .45; cursor: not-allowed; }
.cru.is-locked:hover { background: none; color: var(--fg-muted); }
.crail__scrim { display: none; }

/* the unit */
.cmain { min-width: 0; }
.cmain:focus { outline: none; }
.cu__mod { margin: 0 0 .5rem; font-family: var(--ui); font-size: .76rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--forest); }
.cu__mod span { opacity: .5; margin: 0 .3rem; }
.cu__h { margin: 0 0 1.25rem; font-family: var(--display);
  font-size: clamp(1.5rem, 3.6vmin, 2.35rem); font-weight: 700; line-height: 1.15;
  letter-spacing: -.02em; color: var(--charcoal); text-wrap: pretty; }
.cu__blurb { margin: 0 0 1.25rem; max-width: 62ch; font-family: var(--body);
  font-size: 1rem; line-height: 1.7; color: var(--fg-muted); }
.cu__video { position: relative; aspect-ratio: 16 / 9; background: #0B0F0C;
  border-radius: 1rem; overflow: hidden; }
.cu__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cu__yt { margin: .7rem 0 0; font-family: var(--ui); font-size: .8rem; color: var(--fg-faint); }
.cu__yt a { color: var(--forest); }
.cu__mark { margin-top: 1.25rem; }
.cu__locked { display: grid; justify-items: center; gap: .7rem; text-align: center;
  padding: clamp(3rem, 9vh, 5rem) 1rem; color: var(--forest); }
.cu__locked p { max-width: 50ch; margin: 0; font-family: var(--body);
  font-size: .98rem; line-height: 1.7; color: var(--fg-muted); }

.cnav { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between;
  margin-top: clamp(2rem, 5vh, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--line); }
.cnav .btn { margin-top: 0; }
.cnav .btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* quizzes */
.quiz { margin-top: clamp(2rem, 5vh, 3rem); padding: clamp(1.35rem, 3vw, 2rem);
  background: var(--alabaster); border: 1px solid var(--line);
  border-radius: 1.35rem .28rem 1.35rem .28rem; }
.quiz__head { display: flex; gap: .9rem; align-items: flex-start; color: var(--forest); }
.quiz__h { margin: 0; font-family: var(--display); font-size: clamp(1.15rem, 2.4vmin, 1.45rem);
  font-weight: 700; color: var(--charcoal); }
.quiz__sub { margin: .25rem 0 0; font-family: var(--ui); font-size: .8rem; color: var(--fg-faint); }
.quiz__sub span { opacity: .5; margin: 0 .25rem; }
.quiz__list { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 1.1rem; }
.qq fieldset { margin: 0; padding: 1.1rem; border: 1px solid var(--line);
  border-radius: .9rem; background: var(--white); }
.qq__q { display: flex; gap: .6rem; padding: 0; font-family: var(--body);
  font-size: .98rem; font-weight: 600; line-height: 1.55; color: var(--charcoal); }
.qq__n { display: grid; place-items: center; flex: 0 0 auto; width: 1.6rem; height: 1.6rem;
  font-family: var(--ui); font-size: .76rem; font-weight: 700; color: var(--forest);
  background: rgba(27,62,38,.1); border-radius: 50%; }
.qq__opts { display: grid; gap: .4rem; margin-top: .9rem; }
.qo { display: flex; align-items: flex-start; gap: .6rem; min-height: 44px;
  padding: .6rem .7rem; font-family: var(--body); font-size: .93rem; line-height: 1.55;
  color: var(--fg-muted); border: 1px solid var(--line); border-radius: .6rem; cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.qo:hover { background: var(--alabaster); border-color: var(--line-strong); }
.qo input { position: absolute; opacity: 0; width: 0; height: 0; }
.qo__key { display: grid; place-items: center; flex: 0 0 auto; width: 1.5rem; height: 1.5rem;
  font-family: var(--ui); font-size: .74rem; font-weight: 700; color: var(--fg-faint);
  border: 1px solid var(--line-strong); border-radius: 50%; }
.qo:has(input:checked) { background: rgba(27,62,38,.07); border-color: var(--forest); }
.qo:has(input:checked) .qo__key { background: var(--forest); border-color: var(--forest); color: #fff; }
.qo:has(input:focus-visible) { outline: 2px solid var(--forest); outline-offset: 2px; }
.qq__why { margin: .8rem 0 0; padding: .7rem .85rem; font-family: var(--body);
  font-size: .88rem; line-height: 1.6; border-radius: .6rem; }
/* Result is never carried by colour alone — the wording says it too. */
.qq.is-right fieldset { border-color: #2E6B43; }
.qq.is-right .qq__why { background: #EDF6EF; color: #1E4A2E; }
.qq.is-wrong fieldset { border-color: #A8321E; }
.qq.is-wrong .qq__why { background: #FCEFEC; color: #7A2415; }
.qq.is-missing fieldset { border-color: #B07A18; }
.quiz__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.quiz__foot .btn { margin-top: 0; }
.quiz__result { margin: 0; font-family: var(--ui); font-size: .9rem; font-weight: 600; }
.quiz__result.is-pass { color: #1E4A2E; }
.quiz__result.is-fail { color: #A8321E; }
.quiz__result.is-warn { color: #7A3B12; }

/* progress */
.cside { position: sticky; top: 4.5rem; }
.cside__card { padding: 1.35rem; background: var(--alabaster);
  border: 1px solid var(--line); border-radius: 1.35rem .28rem 1.35rem .28rem; }
.cside__h { margin: 0 0 1.1rem; font-family: var(--ui); font-size: .72rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--forest); }
.ring { position: relative; display: grid; place-items: center; margin-inline: auto;
  width: 9.5rem; height: 9.5rem; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: rgba(26,29,32,.1); stroke-width: 9; }
.ring__fill { fill: none; stroke: var(--forest); stroke-width: 9; stroke-linecap: round;
  transition: stroke-dashoffset .8s var(--ease); }
.ring__num { position: absolute; font-family: var(--display); font-size: 1.7rem;
  font-weight: 700; font-variant-numeric: tabular-nums; color: var(--charcoal); }
.cside__stats { margin: 1.1rem 0 0; padding: 0; list-style: none; display: grid; gap: .4rem;
  font-family: var(--ui); font-size: .82rem; color: var(--fg-muted); text-align: center; }
.cside__stats span { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--charcoal); }
.cside__cert { margin-top: 1.35rem; padding-top: 1.35rem; border-top: 1px solid var(--line);
  display: grid; justify-items: center; text-align: center; gap: .35rem; color: var(--forest); }
.cside__cert-h { margin: .3rem 0 0; font-family: var(--ui); font-size: .9rem;
  font-weight: 700; color: var(--charcoal); }
.cside__cert-t { margin: 0; font-family: var(--ui); font-size: .78rem; line-height: 1.5;
  color: var(--fg-faint); }
.cside__claim { margin-top: .9rem; width: 100%; justify-content: center; }
.cside__claim:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* certificate dialog */
.certd { width: min(94vw, 62rem); padding: 0; border: 0; background: var(--white);
  border-radius: 1.2rem; box-shadow: 0 50px 120px -40px rgba(0,0,0,.7); }
.certd::backdrop { background: rgba(10,14,11,.72); backdrop-filter: blur(4px); }
.certd__bar { display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.certd__h { margin: 0; font-family: var(--display); font-size: 1.2rem; color: var(--charcoal); }
.certd__x { display: grid; place-items: center; width: 44px; height: 44px; background: none;
  border: 1px solid var(--line-strong); border-radius: .55rem; cursor: pointer; color: var(--charcoal); }
.certd__sheet { padding: 1.25rem; background: var(--alabaster); }
.certd__sheet svg { width: 100%; height: auto; display: block;
  box-shadow: 0 20px 50px -30px rgba(0,0,0,.5); }
.certd__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  justify-content: space-between; padding: 1rem 1.25rem; border-top: 1px solid var(--line); }
.certd__note { margin: 0; font-family: var(--ui); font-size: .84rem; color: var(--fg-faint); }
.certd__foot .btn { margin-top: 0; }

/* ── narrow ────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .cshell { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }
  .cside { position: static; grid-column: 1 / -1; }
  .cside__card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1.25rem; align-items: center; }
  .cside__h { grid-column: 1 / -1; margin-bottom: 0; }
  .cside__cert { margin: 0; padding: 0; border: 0; }
}
@media (max-width: 1080px) {
  .cshell { grid-template-columns: minmax(0, 1fr); }
  .cbar__toc { display: grid; }
  .cbar__who { display: none; }
  .crail {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 60;
    width: min(21rem, 88vw); max-height: none; border-radius: 0;
    transform: translateX(-102%); transition: transform .45s var(--ease);
    padding-top: 4.5rem;
  }
  .crail[data-open="true"] { transform: none; }
  .crail__scrim { display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(10,14,11,.5); }
  .crail__scrim[hidden] { display: none; }
  .cside__card { grid-template-columns: minmax(0, 1fr); justify-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .res:hover, .ccard:hover, .academy-call:hover { transform: none; }
  .ring__fill, .bar span, .crail { transition: none; }
}

/* ── [hidden] guards ───────────────────────────────────────────────────
   `[hidden]` sets display:none at specificity (0,1,0); any class rule that
   also sets display and appears later wins, and the element stays visible.
   Every class below is toggled with the hidden attribute somewhere, so each
   needs to say so explicitly. `.field__err` was showing its bare "!" marker
   under every empty field because of exactly this. */
.field__err[hidden],
.form__errors[hidden],
.auth__note[hidden],
.rh-empty[hidden],
.dash__empty[hidden],
.crail__scrim[hidden],
.cgate[hidden],
.cshell[hidden],
.qq__why[hidden],
.auth__pane[hidden] { display: none !important; }

/* The reveal button is positioned against .field__pw, so the input has to
   fill it — otherwise the button lands outside the box it belongs to. */
.field__pw .field__input { width: 100%; }


/* ═══════════════════════════════════════════════════════════════════════
   NEWSLETTER
   ═══════════════════════════════════════════════════════════════════════ */

.nr-head__sub { margin-top: clamp(1.25rem, 3vh, 1.9rem); }

.subd {
  width: min(94vw, 32rem);
  padding: 0;
  border: 0;
  background: var(--white);
  border-radius: 1.5rem .3rem 1.5rem .3rem;        /* the house leaf */
  box-shadow: 0 50px 120px -40px rgba(0,0,0,.7);
}
.subd::backdrop { background: rgba(10,14,11,.72); backdrop-filter: blur(4px); }

.subd__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--line);
}
.subd__h {
  margin: 0; font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vmin, 1.4rem); font-weight: 700; color: var(--charcoal);
}
.subd__x {
  display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto;
  background: none; border: 1px solid var(--line-strong); border-radius: .55rem;
  color: var(--charcoal); cursor: pointer;
}
.subd__x:hover { border-color: var(--charcoal); }

.subd__body { padding: 1.35rem; }
.subd__lede {
  margin: 0 0 1.35rem; font-family: var(--body); font-size: .96rem;
  line-height: 1.7; color: var(--fg-muted);
}
.field__opt { font-weight: 400; color: var(--fg-faint); }
.subd__small {
  margin: 1.1rem 0 0; font-family: var(--ui); font-size: .78rem;
  line-height: 1.6; color: var(--fg-faint);
}

.subd__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  justify-content: space-between; padding: 1.1rem 1.35rem;
  border-top: 1px solid var(--line); background: var(--alabaster);
  border-radius: 0 0 1.5rem .3rem;
}
.subd__foot .btn { margin-top: 0; }
.subd__result { margin: 0; font-family: var(--ui); font-size: .84rem; font-weight: 600; }
.subd__result.is-warn { color: #7A3B12; }        /* 7.9:1 on alabaster */

.subd__done {
  display: grid; justify-items: center; gap: .6rem; text-align: center;
  padding: clamp(2rem, 6vh, 3rem) 1.5rem; color: var(--forest);
}
.subd__done p {
  margin: 0; max-width: 40ch; font-family: var(--body); font-size: .95rem;
  line-height: 1.7; color: var(--fg-muted);
}
.subd__done .btn { margin-top: 1rem; }

/* Guards — both are toggled with the hidden attribute. */
.subd__done[hidden], #subForm[hidden] { display: none !important; }

/* The shared .field__input border is tuned for the contact page's dark
   section — rgba(242,238,231,.32), which is 1.04:1 on this white dialog and
   effectively invisible. The border is what identifies the control, so it
   has to clear the 3:1 non-text bar here. */
.subd .field__input {
  background: var(--white);
  border-color: rgba(26, 29, 32, .5);              /* 3.29:1 on white */
  color: var(--charcoal);
}
.subd .field__input::placeholder { color: var(--fg-faint); }
.subd .field__label { color: var(--charcoal); }


/* ═══════════════════════════════════════════════════════════════════════
   POLICY & LEADERSHIP
   ───────────────────────────────────────────────────────────────────────
   Four numbered strata of public work. Every class here is prefixed pl-
   so nothing collides with the pages already built.
   ═══════════════════════════════════════════════════════════════════════ */

.pl-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(9rem, 20vh, 13rem) var(--gut) clamp(4.5rem, 11vh, 7rem);
  background: var(--forest);
  color: #fff;
}
/* A faint plotted grid — the ground a chart or a treaty map is drawn on. */
.pl-hero__grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  mask-image: radial-gradient(120% 90% at 20% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 20% 0%, #000 20%, transparent 78%);
}
.pl-hero__inner { max-width: 1180px; margin-inline: auto; }
.pl-hero__title {
  margin: 1.1rem 0 0;
  font-family: var(--display);
  font-size: clamp(2.7rem, 8.2vmin, 6rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.03em;
}
.pl-hero__title span { display: block; }
.pl-hero__alt { color: var(--lemon); font-style: italic; font-weight: 400; }
.pl-hero__lede {
  max-width: 44ch;
  margin: 1.5rem 0 0;
  font-family: var(--body);
  font-size: clamp(1.02rem, 1.95vmin, 1.2rem);
  line-height: 1.7;
  color: rgba(255,255,255,.86);            /* 10.2:1 on forest */
}
.pl-hero__focus {
  display: flex; flex-wrap: wrap; gap: .6rem .75rem;
  margin: clamp(1.9rem, 4vh, 2.75rem) 0 0; padding: 0; list-style: none;
}
.pl-hero__focus li {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .95rem;
  font-family: var(--ui); font-size: .85rem; font-weight: 500;
  color: var(--lemon);
  background: rgba(255,255,255,.07);
  /* .45 rather than .4 — clears the 3:1 non-text bar against forest. */
  border: 1px solid rgba(245,236,154,.45);
  border-radius: 1rem .2rem 1rem .2rem;    /* the house leaf */
}

/* ── section ─────────────────────────────────────────────────────────── */
.pl-sec { padding: var(--s-xl) var(--gut); background: var(--white); }
.pl-sec:nth-of-type(odd) { background: var(--alabaster); }
.pl-sec--dark { background: var(--charcoal) !important; }
.pl-sec__inner { max-width: 1180px; margin-inline: auto; }
.pl-sec__head { margin-bottom: clamp(2.25rem, 5vh, 3.5rem); }
.pl-sec__n {
  margin: 0 0 .35rem;
  font-family: var(--ui);
  font-size: .8rem; font-weight: 700; letter-spacing: .3em;
  font-variant-numeric: tabular-nums;
  color: var(--forest);
}
.pl-sec--dark .pl-sec__n { color: var(--lemon); }

/* ── entry ───────────────────────────────────────────────────────────── */
.pl-entry {
  padding: clamp(1.5rem, 3.2vw, 2.5rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 1.75rem .35rem 1.75rem .35rem;   /* the house leaf */
  transition: border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.pl-entry + .pl-entry, .pl-pair + .pl-entry, .pl-entry + .pl-pair {
  margin-top: clamp(1.1rem, 2.5vw, 1.75rem);
}
.pl-entry:hover { border-color: var(--line-strong); box-shadow: 0 26px 60px -46px rgba(26,29,32,.55); }
.pl-sec--dark .pl-entry {
  /* The tinted surface is only 1.14:1 against charcoal, so the border carries
     the separation and has to be visible doing it. */
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.34);
}
.pl-sec--dark .pl-entry:hover { border-color: rgba(245,236,154,.45); box-shadow: none; }

.pl-entry__head { display: flex; gap: 1rem; align-items: flex-start; }
.pl-entry__ico {
  flex: 0 0 auto;
  padding: .5rem; box-sizing: content-box;
  color: var(--forest);
  background: rgba(245,236,154,.4);
  border-radius: 60% 10% 60% 10%;
  transition: border-radius .5s var(--ease);
}
.pl-entry:hover .pl-entry__ico { border-radius: .7rem; }
.pl-sec--dark .pl-entry__ico { color: var(--lemon); background: rgba(245,236,154,.16); }

.pl-entry__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.5vmin, 1.6rem);
  font-weight: 700; line-height: 1.2; letter-spacing: -.014em;
  color: var(--charcoal);
  text-wrap: pretty;
}
.pl-entry__title--solo { margin-bottom: 1.35rem; }
.pl-sec--dark .pl-entry__title { color: #fff; }
.pl-entry__org {
  margin: .45rem 0 0;
  font-family: var(--ui); font-size: .88rem; font-weight: 600;
  color: var(--forest);
}
.pl-sec--dark .pl-entry__org { color: var(--lemon); }

.pl-text {
  margin: 1.1rem 0 0;
  font-family: var(--body);
  font-size: clamp(.97rem, 1.72vmin, 1.05rem);
  line-height: 1.72;
  color: var(--fg-muted);
  max-width: 70ch;
}
.pl-sec--dark .pl-text { color: rgba(255,255,255,.82); }   /* 11.5:1 on charcoal */

.pl-points { margin: 1.15rem 0 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.pl-points li {
  position: relative;
  padding-inline-start: 1.5rem;
  font-family: var(--body);
  font-size: clamp(.95rem, 1.68vmin, 1.03rem);
  line-height: 1.68;
  color: var(--fg-muted);
  max-width: 70ch;
}
.pl-points li::before {
  content: "";
  position: absolute; inset-inline-start: 0; top: .62em;
  width: .46rem; height: .46rem;
  background: var(--lemon);
  border: 1px solid rgba(27,62,38,.45);
  border-radius: 60% 6% 60% 6%;
}
.pl-points b { color: var(--charcoal); font-weight: 600; }
.pl-sec--dark .pl-points li { color: rgba(255,255,255,.82); }
.pl-sec--dark .pl-points b { color: #fff; }

/* ── outcomes panel ──────────────────────────────────────────────────── */
.pl-out {
  margin: clamp(1.5rem, 3vh, 2rem) 0 0;
  padding: clamp(1.25rem, 2.6vw, 1.85rem);
  background: rgba(245,236,154,.24);
  border-inline-start: 4px solid var(--lemon);
  border-radius: 0 1rem 1rem 0;
}
.pl-out__brow {
  margin: 0 0 1rem;
  font-family: var(--ui); font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--forest);
}
.pl-out__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .95rem; }
.pl-out__list li { display: flex; gap: .8rem; align-items: flex-start; }
.pl-out__list .ico { flex: 0 0 auto; margin-top: .15rem; color: var(--forest); }
.pl-out__list div {
  font-family: var(--body); font-size: .97rem; line-height: 1.65; color: var(--fg-muted);
}
.pl-out__list b { color: var(--charcoal); font-weight: 600; }

/* ── links & files ───────────────────────────────────────────────────── */
.pl-links { margin: 1.25rem 0 0; }
.pl-links a {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px;
  font-family: var(--ui); font-size: .9rem; font-weight: 600;
  color: var(--forest); text-decoration: none;
  border-bottom: 1px solid rgba(27,62,38,.3);
}
.pl-links a:hover { border-bottom-color: var(--forest); }
.pl-links a .ico { transition: transform .4s var(--ease); }
.pl-links a:hover .ico { transform: translateX(3px); }
.pl-sec--dark .pl-links a { color: var(--lemon); border-bottom-color: rgba(245,236,154,.4); }
.pl-sec--dark .pl-links a:hover { border-bottom-color: var(--lemon); }

.pl-files {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: .75rem;
  margin: clamp(1.35rem, 3vh, 1.85rem) 0 0;
}
.pl-file {
  display: flex; align-items: center; gap: .75rem;
  min-height: 44px;
  padding: .9rem 1.05rem;
  text-decoration: none;
  background: var(--alabaster);
  border: 1px solid var(--line);
  border-radius: 1rem .2rem 1rem .2rem;
  transition: border-color .35s var(--ease), border-radius .45s var(--ease);
}
.pl-file:hover { border-color: var(--forest); border-radius: .6rem; }
.pl-file .ico { flex: 0 0 auto; color: var(--forest); }
.pl-file span { display: grid; min-inline-size: 0; }
.pl-file b {
  font-family: var(--ui); font-size: .88rem; font-weight: 600; color: var(--charcoal);
  overflow-wrap: anywhere;
}
.pl-file i { font-family: var(--ui); font-size: .76rem; font-style: normal; color: var(--fg-faint); }

/* ── gallery ────────────────────────────────────────────────────────────
   Deliberately manual. An auto-rotating gallery would need a pause control
   and would have to stop on focus and under reduced motion; a gallery the
   reader drives has none of those failure modes. Scroll-snap gives native
   touch swiping, and the buttons give the pointer and keyboard equivalent. */
/* The component's own size is the full width of whatever holds it, at 3:2.
   The education page overrides both below, because its galleries sit in a
   narrow column beside the copy; policy uses these defaults. */
.gal { margin: clamp(1.5rem, 3vh, 2rem) 0 0; }
.gal__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: .75rem;
  margin: 0; padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  border-radius: 1.25rem .28rem 1.25rem .28rem;
}
.gal__track::-webkit-scrollbar { display: none; }
.gal__slide { scroll-snap-align: center; min-inline-size: 0; }
.gal__slide img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--alabaster);
  border-radius: 1.25rem .28rem 1.25rem .28rem;
}

.gal__bar {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-top: .9rem;
}
.gal__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  color: var(--forest);
  background: none;
  border: 1.5px solid rgba(26,29,32,.5);   /* 3.3:1 — it is a control */
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.gal__btn:hover:not(:disabled) { background: var(--lemon); border-color: var(--forest); }
.gal__btn:disabled { opacity: .35; cursor: not-allowed; }
.pl-sec--dark .gal__btn { color: var(--lemon); border-color: rgba(255,255,255,.55); }
.pl-sec--dark .gal__btn:hover:not(:disabled) { background: rgba(245,236,154,.2); border-color: var(--lemon); }

.gal__dots { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; }
/* 24x24 hit area around a 7px dot — the visual mark stays small without
   making the target hard to hit. */
.gal__dot {
  width: 24px; height: 24px;
  padding: 0;
  background: none; border: 0; cursor: pointer;
  position: relative;
}
.gal__dot::after {
  content: "";
  position: absolute; inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(26,29,32,.28);
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.gal__dot.is-on::after { background: var(--forest); transform: translate(-50%,-50%) scale(1.45); }
.pl-sec--dark .gal__dot::after { background: rgba(255,255,255,.35); }
.pl-sec--dark .gal__dot.is-on::after { background: var(--lemon); }

/* ── single images & badges ──────────────────────────────────────────── */
.pl-single { margin: clamp(1.5rem, 3vh, 2rem) 0 0; }
.pl-single img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 1.25rem .28rem 1.25rem .28rem;
}
.pl-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: clamp(1.1rem, 2.5vw, 1.75rem);
  margin-top: clamp(1.1rem, 2.5vw, 1.75rem);
}
.pl-pair .pl-entry { margin-top: 0; }
.pl-badge {
  margin: 0 0 1.15rem;
  display: flex; align-items: center; justify-content: flex-start;
  height: 96px;
}
.pl-badge img { max-height: 96px; width: auto; max-width: 100%; object-fit: contain; }

/* ── the keynote count ───────────────────────────────────────────────── */
.pl-stat { display: flex; gap: clamp(1rem, 3vw, 2rem); align-items: flex-start; }
.pl-stat__n {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3rem, 9vmin, 5rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--forest);
  font-variant-numeric: tabular-nums;
}
.pl-stat__n span { color: var(--lemon); }

/* ── honours ─────────────────────────────────────────────────────────── */
.pl-honors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(.85rem, 2vw, 1.25rem);
  margin: 0; padding: 0; list-style: none;
}
.pl-honors li {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1.15rem 1.25rem;
  background: var(--alabaster);
  border: 1px solid var(--line);
  border-radius: 1.15rem .22rem 1.15rem .22rem;
}
.pl-honors .ico { flex: 0 0 auto; color: var(--forest); margin-top: .1rem; }
.pl-honors div { display: grid; gap: .25rem; min-inline-size: 0; }
.pl-honors b { font-family: var(--ui); font-size: .95rem; font-weight: 600; color: var(--charcoal); }
.pl-honors span { font-family: var(--body); font-size: .88rem; line-height: 1.55; color: var(--fg-muted); }

/* ── narrower screens ────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .pl-entry { padding: 1.35rem 1.15rem; border-radius: 1.35rem .3rem 1.35rem .3rem; }
  .pl-entry__head { flex-direction: column; gap: .85rem; }
  .pl-stat { flex-direction: column; gap: .5rem; }
  .gal__slide img { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .gal__track { scroll-behavior: auto; }
  .pl-entry:hover { box-shadow: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ENVIRONMENTAL EDUCATION
   ───────────────────────────────────────────────────────────────────────
   Prefixed ed- throughout. Galleries reuse the shared .gal component.
   ═══════════════════════════════════════════════════════════════════════ */

.ed-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 88svh;
  display: grid;
  align-content: end;
  padding: 9rem var(--gut) clamp(4.5rem, 11vh, 7rem);
  background: #0B140E;
  color: #fff;
}
.ed-hero__media { position: absolute; inset: 0; }
.ed-hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* The wash sits ABOVE the video. A negative z-index child of a positioned
   ancestor paints before in-flow content, which would put it behind the
   footage and darken nothing at all. */
.ed-hero__wash {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(6,14,9,.94) 0%, rgba(6,14,9,.86) 32%,
    rgba(6,14,9,.66) 64%, rgba(6,14,9,.56) 100%);
}
.ed-hero__inner { position: relative; z-index: 2; max-width: 1180px; margin-inline: auto; width: 100%; }

.ed-hero__title {
  margin: 1.1rem 0 0;
  font-family: var(--display);
  font-size: clamp(2.5rem, 7.6vmin, 5.6rem);
  font-weight: 700; line-height: .98; letter-spacing: -.03em;
}
.ed-hero__title span { display: block; }
.ed-hero__alt { color: var(--lemon); font-style: italic; font-weight: 400; }
.ed-hero__lede {
  max-width: 58ch;
  margin: 1.5rem 0 0;
  font-family: var(--body);
  font-size: clamp(1rem, 1.85vmin, 1.14rem);
  line-height: 1.72;
  color: rgba(255,255,255,.88);
}
.ed-hero__stats {
  display: flex; flex-wrap: wrap; gap: .8rem 2.5rem;
  margin: clamp(1.9rem, 4vh, 2.75rem) 0 0; padding: 1.35rem 0 0;
  list-style: none;
  border-top: 1px solid rgba(255,255,255,.24);
}
.ed-hero__stats li {
  font-family: var(--ui); font-size: .86rem; line-height: 1.4;
  color: rgba(255,255,255,.76);
}
.ed-hero__stats b {
  display: block;
  font-size: 1.5rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--lemon);
}

/* The video autoplays, so the reader is owed a way to stop it. */
.ed-hero__pause {
  position: absolute; z-index: 3;
  inset-block-end: 1.25rem; inset-inline-end: var(--gut);
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .5rem 1rem;
  font-family: var(--ui); font-size: .78rem; font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  background: rgba(6,14,9,.6);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 1rem .2rem 1rem .2rem;
  cursor: pointer;
  transition: background-color .3s var(--ease), border-radius .4s var(--ease);
}
.ed-hero__pause:hover { background: rgba(6,14,9,.85); border-radius: .55rem; }

/* ── sections ────────────────────────────────────────────────────────── */
.ed-sec { padding: var(--s-xl) var(--gut); background: var(--white); }
.ed-sec--dark { background: var(--forest); }
.ed-sec__inner { max-width: 1180px; margin-inline: auto; }
.ed-sec__head { margin-bottom: clamp(2.25rem, 5vh, 3.5rem); }
.ed-sec__n {
  margin: 0 0 .35rem;
  font-family: var(--ui); font-size: .8rem; font-weight: 700;
  letter-spacing: .3em; font-variant-numeric: tabular-nums;
  color: var(--forest);
}
.ed-sec--dark .ed-sec__n { color: var(--lemon); }
.ed-lede {
  max-width: 60ch; margin: 1.1rem 0 0;
  font-family: var(--body); font-size: clamp(1rem, 1.8vmin, 1.1rem);
  line-height: 1.7; color: var(--fg-muted);
}

.ed-sub {
  margin: clamp(2.5rem, 6vh, 3.5rem) 0 clamp(1.25rem, 3vh, 1.75rem);
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.8vmin, 1.9rem);
  font-weight: 700; letter-spacing: -.015em;
  color: var(--charcoal);
}
.ed-sub:first-of-type { margin-top: 0; }

/* A group heading inside the portfolio, with its own icon. */
.ed-group {
  display: flex; align-items: center; gap: .85rem;
  margin: clamp(2.75rem, 7vh, 4rem) 0 clamp(1.1rem, 2.5vh, 1.5rem);
  padding-bottom: .85rem;
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.7vmin, 1.8rem);
  font-weight: 700; letter-spacing: -.015em;
  color: var(--charcoal);
  border-bottom: 3px solid var(--lemon);
}
.ed-group .ico { flex: 0 0 auto; color: var(--forest); }
.ed-group:first-of-type { margin-top: 0; }

/* ── teaching domains ────────────────────────────────────────────────── */
.ed-domains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(.9rem, 2vw, 1.35rem);
  margin: 0; padding: 0; list-style: none;
}
.ed-domain {
  padding: clamp(1.35rem, 2.6vw, 1.85rem);
  background: var(--alabaster);
  border: 1px solid var(--line);
  border-radius: 1.5rem .3rem 1.5rem .3rem;      /* the house leaf */
  transition: border-color .45s var(--ease), transform .45s var(--ease);
}
.ed-domain:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.ed-domain .ico { color: var(--forest); }
.ed-domain h4 {
  margin: .85rem 0 1rem;
  font-family: var(--ui); font-size: 1rem; font-weight: 600;
  color: var(--charcoal);
}

/* ── responsibilities ────────────────────────────────────────────────── */
.ed-resp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(.85rem, 2vw, 1.25rem);
  margin: 0; padding: 0; list-style: none;
}
.ed-resp li {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1.15rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 1.15rem .22rem 1.15rem .22rem;
}
.ed-resp .ico { flex: 0 0 auto; margin-top: .15rem; color: var(--forest); }
.ed-resp div { display: grid; gap: .3rem; min-inline-size: 0; }
.ed-resp b { font-family: var(--ui); font-size: .95rem; font-weight: 600; color: var(--charcoal); }
.ed-resp span { font-family: var(--body); font-size: .9rem; line-height: 1.6; color: var(--fg-muted); }

/* ── entries ─────────────────────────────────────────────────────────── */
.ed-entry {
  padding: clamp(1.5rem, 3.2vw, 2.25rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 1.75rem .35rem 1.75rem .35rem;   /* the house leaf */
  transition: border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.ed-entry + .ed-entry { margin-top: clamp(1rem, 2.2vw, 1.5rem); }
.ed-entry:hover { border-color: var(--line-strong); box-shadow: 0 26px 60px -46px rgba(26,29,32,.55); }
.ed-sec--dark .ed-entry {
  /* The tinted surface is only 1.20:1 against forest, so the border does the
     separating and has to clear 3:1 to be seen doing it. */
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.38);
}
.ed-sec--dark .ed-entry:hover { border-color: rgba(245,236,154,.5); box-shadow: none; }

.ed-entry__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vmin, 1.5rem);
  font-weight: 700; line-height: 1.22; letter-spacing: -.014em;
  color: var(--charcoal);
  text-wrap: pretty;
}
.ed-sec--dark .ed-entry__title { color: #fff; }
.ed-entry__org {
  margin: .5rem 0 0;
  font-family: var(--ui); font-size: .87rem; font-weight: 600;
  line-height: 1.5;
  color: var(--forest);
}
.ed-sec--dark .ed-entry__org { color: var(--lemon); }

.ed-text {
  margin: .9rem 0 0;
  font-family: var(--body); font-size: clamp(.96rem, 1.7vmin, 1.04rem);
  line-height: 1.72; color: var(--fg-muted); max-width: 70ch;
}
.ed-sec--dark .ed-text { color: rgba(255,255,255,.84); }

.ed-points { margin: 1.1rem 0 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.ed-points li {
  position: relative;
  padding-inline-start: 1.5rem;
  font-family: var(--body); font-size: clamp(.94rem, 1.66vmin, 1.02rem);
  line-height: 1.68; color: var(--fg-muted); max-width: 72ch;
}
.ed-points li::before {
  content: "";
  position: absolute; inset-inline-start: 0; top: .62em;
  width: .46rem; height: .46rem;
  background: var(--lemon);
  border: 1px solid rgba(27,62,38,.45);
  border-radius: 60% 6% 60% 6%;
}

/* The sign-language series is a first for the country; it says so. */
.ed-entry--flag { border-color: rgba(27,62,38,.35); }
.ed-flag {
  display: inline-block;
  margin: 0 0 .75rem;
  padding: .3rem .75rem;
  font-family: var(--ui); font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--forest);
  background: var(--lemon);
  border-radius: .8rem .16rem .8rem .16rem;
}

.ed-stat { display: flex; gap: clamp(1rem, 3vw, 2rem); align-items: flex-start; }
.ed-stat__n {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3rem, 9vmin, 5rem);
  font-weight: 700; line-height: .9; letter-spacing: -.03em;
  color: var(--lemon);
  font-variant-numeric: tabular-nums;
}

/* Matched to the gallery cap, so a lone photograph does not tower over the
   carousels sitting beside it in the same list. */
.ed-single { margin: clamp(1.25rem, 3vh, 1.85rem) 0 0; max-width: 40rem; }
.ed-single img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 1.25rem .28rem 1.25rem .28rem;
}

.ed-collab {
  max-width: 60ch; margin: 1.35rem auto 0;
  font-family: var(--body); font-size: clamp(1rem, 1.8vmin, 1.1rem);
  line-height: 1.72; color: rgba(255,255,255,.82);
}

/* ── narrower screens ────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .ed-hero { min-height: 82svh; padding-top: 7rem; }
  .ed-hero__stats { gap: .9rem 1.5rem; }
  .ed-hero__stats li { flex: 1 1 40%; }
  .ed-hero__pause { inset-inline-end: 50%; transform: translateX(50%); }
  .ed-entry { padding: 1.35rem 1.15rem; border-radius: 1.35rem .3rem 1.35rem .3rem; }
  .ed-stat { flex-direction: column; gap: .5rem; }
  .ed-group { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ed-domain:hover { transform: none; }
  .ed-entry:hover { box-shadow: none; }
}


/* ── education: media beside the copy ────────────────────────────────────
   The galleries were stacking under the text, so an entry read as a wall of
   bullets followed by a picture you had to scroll to. Sitting them side by
   side lets the photograph and the claim it evidences be seen at once, and
   halves the height of the section. Only entries that actually carry media
   split; the rest keep the full measure. */
@media (min-width: 900px) {
  /* Two children — copy and media — rather than placing each text element
     into column 1 individually. The earlier version pinned the media with
     grid-row: 1 / -1, but -1 resolves against the *explicit* grid, and with
     no grid-template-rows declared that collapsed to row 1 and inflated the
     title's row to the height of the picture. A wrapper needs no line maths
     at all. */
  .ed-entry--media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
  }
  .ed-entry--media > .gal,
  .ed-entry--media > .ed-single { margin-top: 0; max-width: none; }
}

/* Education sizes its own galleries: they sit in a narrow column beside the
   copy, so they are shorter and capped. Scoped to .education so the policy
   page keeps the component's full-width 3:2 default. */
.education .gal { max-width: 40rem; }
.education .gal__slide img { aspect-ratio: 16 / 9; }

/* The webinars gallery is the one that carries the section on its own, so
   it stays large and centred rather than shrinking into a side column. */
.ed-entry--wide .gal {
  max-width: 54rem;
  margin-inline: auto;
}
.ed-entry--wide .gal__slide img { aspect-ratio: 16 / 9; }


/* ═══════════════════════════════════════════════════════════════════════
   PROJECT LEADERSHIP
   ───────────────────────────────────────────────────────────────────────
   Four tiers of scale, and the layout says so: Tier I gets full-width
   feature cards, and each tier below is narrower and lighter, with a
   scale bar that shortens as the reach does. Prefixed pj- throughout.
   ═══════════════════════════════════════════════════════════════════════ */

.pj-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(9rem, 20vh, 13rem) var(--gut) clamp(4.5rem, 11vh, 7rem);
  background: var(--charcoal);
  color: #fff;
}
/* A blueprint grid — the ground a plan is drawn on. */
.pj-hero__grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
  mask-image: radial-gradient(130% 95% at 15% 0%, #000 18%, transparent 76%);
  -webkit-mask-image: radial-gradient(130% 95% at 15% 0%, #000 18%, transparent 76%);
}
.pj-hero__inner { max-width: 1180px; margin-inline: auto; }
.pj-hero__title {
  margin: 1.1rem 0 0;
  font-family: var(--display);
  font-size: clamp(2.4rem, 7.2vmin, 5.2rem);
  font-weight: 700; line-height: 1.02; letter-spacing: -.03em;
}
.pj-hero__title span { display: block; }
.pj-hero__alt { color: var(--lemon); font-style: italic; font-weight: 400; }
.pj-hero__lede {
  max-width: 64ch; margin: 1.5rem 0 0;
  font-family: var(--body);
  font-size: clamp(1rem, 1.82vmin, 1.12rem);
  line-height: 1.75;
  color: rgba(255,255,255,.82);            /* 11.5:1 on charcoal */
}
.pj-creds {
  display: flex; flex-wrap: wrap; gap: .75rem 1rem;
  margin: clamp(1.9rem, 4vh, 2.75rem) 0 0; padding: 0; list-style: none;
}
.pj-creds li {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem 1.1rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 1rem .2rem 1rem .2rem;    /* the house leaf */
}
.pj-creds .ico { flex: 0 0 auto; color: var(--lemon); }
.pj-creds span { display: grid; gap: .1rem; min-inline-size: 0; }
.pj-creds b { font-family: var(--ui); font-size: .9rem; font-weight: 600; color: #fff; }
.pj-creds span { font-family: var(--ui); font-size: .78rem; color: rgba(255,255,255,.72); }

/* ── tiers ───────────────────────────────────────────────────────────── */
.pj-tier { padding: var(--s-xl) var(--gut); background: var(--white); }
.pj-tier:nth-of-type(even) { background: var(--alabaster); }
.pj-tier--dark { background: var(--forest) !important; }
.pj-tier__inner { max-width: 1180px; margin-inline: auto; }
.pj-tier__head { margin-bottom: clamp(2.25rem, 5vh, 3.5rem); }

.pj-tier__n {
  display: flex; align-items: center; gap: .9rem;
  margin: 0 0 .6rem;
  font-family: var(--ui); font-size: .78rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--forest);
}
.pj-tier--dark .pj-tier__n { color: var(--lemon); }
/* The bar is the tier's reach, drawn. It shortens as the scale narrows. */
.pj-tier__bar {
  flex: 1 1 auto; max-width: 16rem; height: 3px;
  background: rgba(26,29,32,.12);
  border-radius: 2px; overflow: hidden;
}
.pj-tier__bar i { display: block; height: 100%; width: var(--w); background: var(--forest); }
.pj-tier--dark .pj-tier__bar { background: rgba(255,255,255,.18); }
.pj-tier--dark .pj-tier__bar i { background: var(--lemon); }

.pj-tier__scale {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 1rem 0 0;
  font-family: var(--ui); font-size: .86rem; color: var(--fg-faint);
}
.pj-tier__scale .ico { color: var(--forest); }
.pj-tier--dark .pj-tier__scale { color: rgba(255,255,255,.72); }
.pj-tier--dark .pj-tier__scale .ico { color: var(--lemon); }

/* ── cards ───────────────────────────────────────────────────────────── */
.pj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
}
.pj-grid--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr)); }

.pj-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 1.75rem .35rem 1.75rem .35rem;   /* the house leaf */
  overflow: hidden;
  transition: border-color .45s var(--ease), box-shadow .45s var(--ease),
              transform .45s var(--ease);
}
.pj-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 26px 60px -46px rgba(26,29,32,.55);
}
.pj-tier--dark .pj-card {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.38);
}
.pj-tier--dark .pj-card:hover { border-color: rgba(245,236,154,.5); box-shadow: none; }

/* The lead card runs the full width with the plate beside the copy. */
.pj-card--lead { display: grid; grid-template-columns: minmax(0, 1fr); }
.pj-card--lead + .pj-card--lead,
.pj-card--lead + .pj-grid { margin-top: clamp(1rem, 2.2vw, 1.6rem); }
@media (min-width: 900px) {
  .pj-card--lead { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); align-items: stretch; }
  /* Tier III's lead card carries a photo gallery, which reads better after
     the copy than beside it — the images are evidence, not identity. */
  .pj-tier--dark .pj-card--lead { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); }
}

/* ── plates ──────────────────────────────────────────────────────────────
   These are logos and campaign posters, not photographs. One carries a
   headline, deadline dates and a QR code — cropping it to fill a frame
   would cut the information off. So they are contained on a ground and
   shown whole, the way an exhibit label shows an artwork. */
.pj-plate {
  margin: 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.1rem, 2.4vw, 1.75rem);
  background: var(--alabaster);
  border-bottom: 1px solid var(--line);
}
.pj-plate img {
  display: block;
  width: 100%; height: auto;
  max-height: 15rem;
  object-fit: contain;
}
.pj-plate--sm img { max-height: 9rem; }

/* The paired plates in Tier III hold one portrait photograph and one
   landscape one. Fixing the plate height rather than the image height is
   what makes them match: each picture is contained inside the same box, so
   they sit level without either being cropped.

   (This replaces an img[height="1400"] selector, which was meant for the
   one portrait photo but matched five images that happen to share that
   attribute — and outranked .pj-plate--sm, inflating two logos.) */
.pj-grid--two .pj-plate { min-height: 22rem; }
.pj-grid--two .pj-plate img { max-height: 19rem; }
.pj-card--lead .pj-plate { border-bottom: 0; border-inline-end: 1px solid var(--line); }
.pj-card--lead .pj-plate img { max-height: 18rem; }
.pj-tier--dark .pj-plate { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); }

.pj-card__body { padding: clamp(1.35rem, 2.6vw, 1.9rem); }
.pj-card__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vmin, 1.55rem);
  font-weight: 700; line-height: 1.2; letter-spacing: -.014em;
  color: var(--charcoal);
  text-wrap: pretty;
}
.pj-card--lead .pj-card__title { font-size: clamp(1.35rem, 3vmin, 2rem); }
.pj-tier--dark .pj-card__title { color: #fff; }
.pj-card__sub {
  margin: .35rem 0 0;
  font-family: var(--ui); font-size: .82rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--forest);
}
.pj-tier--dark .pj-card__sub { color: var(--lemon); }

/* Role and partners as a definition list — they are labelled facts. */
.pj-meta { margin: 1rem 0 0; display: grid; gap: .4rem; }
.pj-meta > div { display: flex; gap: .6rem; align-items: baseline; }
.pj-meta dt {
  flex: 0 0 auto;
  font-family: var(--ui); font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-faint);
  min-width: 4.2rem;
}
.pj-meta dd {
  margin: 0; min-inline-size: 0;
  font-family: var(--ui); font-size: .88rem; font-weight: 600;
  line-height: 1.5;
  color: var(--charcoal);
}
.pj-tier--dark .pj-meta dt { color: rgba(255,255,255,.66); }
.pj-tier--dark .pj-meta dd { color: #fff; }

.pj-text {
  margin: 1rem 0 0;
  font-family: var(--body); font-size: clamp(.95rem, 1.68vmin, 1.03rem);
  line-height: 1.72; color: var(--fg-muted); max-width: 68ch;
}
.pj-text b { color: var(--charcoal); font-weight: 600; }
.pj-tier--dark .pj-text { color: rgba(255,255,255,.84); }
.pj-tier--dark .pj-text b { color: #fff; }

.pj-points { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .65rem; }
.pj-points li {
  position: relative;
  padding-inline-start: 1.5rem;
  font-family: var(--body); font-size: clamp(.93rem, 1.64vmin, 1rem);
  line-height: 1.68; color: var(--fg-muted); max-width: 68ch;
}
.pj-points li::before {
  content: "";
  position: absolute; inset-inline-start: 0; top: .62em;
  width: .46rem; height: .46rem;
  background: var(--lemon);
  border: 1px solid rgba(27,62,38,.45);
  border-radius: 60% 6% 60% 6%;
}
.pj-points b { color: var(--charcoal); font-weight: 600; }
.pj-tier--dark .pj-points li { color: rgba(255,255,255,.84); }
.pj-tier--dark .pj-points b { color: #fff; }

/* The gallery inside a card needs to sit inside the card's padding. */
.pj-card--lead > .gal { padding: 0 clamp(1.35rem, 2.6vw, 1.9rem) clamp(1.35rem, 2.6vw, 1.9rem); }
@media (min-width: 900px) {
  .pj-card--lead > .gal { padding: clamp(1.35rem, 2.6vw, 1.9rem); margin-top: 0; align-self: center; }
}

/* The Youth4Climate photographs are square at source (3375x3375). In the
   component's default 3:2 frame, cover was slicing the top and bottom off
   every one of them, so this page gives the gallery a square frame — the
   ratios then match and nothing is cropped at all. Scoped to .projects so
   the policy and education galleries keep the landscape frame that suits
   their photographs. */
.projects .gal__slide img { aspect-ratio: 1 / 1; }
.projects .gal { max-width: 30rem; }

/* ── closing banner ──────────────────────────────────────────────────── */
.pj-cta {
  padding: clamp(4rem, 10vh, 6.5rem) var(--gut);
  background: var(--forest);
  text-align: center;
}
.pj-cta__inner { max-width: 760px; margin-inline: auto; }
.pj-cta__text {
  margin: 1.35rem 0 0;
  font-family: var(--body); font-size: clamp(1rem, 1.8vmin, 1.1rem);
  line-height: 1.75; color: rgba(255,255,255,.84);   /* 9.0:1 on forest */
}
.pj-cta .btn--leaf { margin-top: clamp(1.75rem, 4vh, 2.5rem); }

/* ── narrower screens ────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .pj-card { border-radius: 1.35rem .3rem 1.35rem .3rem; }
  .pj-card__body { padding: 1.25rem 1.15rem; }
  .pj-plate img { max-height: 11rem; }
  .pj-card--lead .pj-plate img { max-height: 12rem; }
  .pj-meta > div { flex-direction: column; gap: .1rem; }
  .pj-tier__bar { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pj-card:hover { transform: none; box-shadow: none; }
}