/* ============================================================
   thedoctorteacher.com — main
   Warm paper ground, dark reserved for full-bleed photographic bands.
   Editorial system (11x), mobile-first.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Archivo:wght@400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-optical-sizing: auto;   /* Fraunces is a variable face with an optical size axis */
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }

/* ---- shared ---- */
.wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }

.label {                      /* sans machinery — gutter specs, eyebrows */
  font-family: var(--font-chrome);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.rule { flex: 1; height: 1px; background: var(--hairline); }

.pill {
  display: inline-block;
  font-family: var(--font-chrome);
  font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  background: var(--ink); color: var(--ground);
  border: 1px solid var(--ink);
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.pill:hover { background: transparent; color: var(--ink); }
.pill--ghost { background: transparent; color: var(--ink); }
.pill--ghost:hover { background: var(--ink); color: var(--ground); }

/* ============================ NAV ============================
   Mercury's pattern: the bar is pinned for the whole scroll and RECOLOURS as
   it crosses sections, so it stays legible over both the dark hero photography
   and the light paper below. Mercury does this with a transition on colour +
   background-color; js/main.js toggles .nav--light via IntersectionObserver. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  padding: 18px var(--gutter);
  color: var(--on-band);
  background: linear-gradient(to bottom, rgba(18,23,18,.78), rgba(18,23,18,0));
  /* NO backdrop blur over the hero — it was smearing his face on tall screens.
     The dark top gradient above already carries the nav text; the frosted blur
     is reserved for .nav--light over the paper sections lower down. */
  backdrop-filter: none;
  transition: color 500ms cubic-bezier(0,0,.6,1),
              background-color 500ms cubic-bezier(0,0,.6,1),
              backdrop-filter 500ms cubic-bezier(0,0,.6,1);
}
/* over the paper sections */
.nav--compact { padding-block: 10px; }
.nav.nav--light {
  color: var(--ink);
  background: rgba(248,244,236,.86);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--hairline);
}

/* THE WORDMARK IS THE ADVERTISEMENT.
   This is the brand's own site — the name should own the corner, not sit
   politely next to the links. Full size over the hero, then it steps down once
   you scroll past so a permanently pinned bar does not eat a third of every
   screen further down the page. */
.nav__brand { display: block; line-height: 0; text-decoration: none; flex: none; }
.nav__brand img {
  height: 132px; width: auto;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,.6));
  transition: height 420ms var(--ease-out), filter 400ms var(--ease-out);
}
.nav--light .nav__brand img { filter: drop-shadow(0 1px 4px rgba(47,42,27,.2)); }
.nav--compact .nav__brand img { height: 62px; }

@media (min-width: 2200px) { .nav__brand img { height: 220px; }
                             .nav--compact .nav__brand img { height: 104px; } }
@media (max-width: 1400px) { .nav__brand img { height: 108px; }
                             .nav--compact .nav__brand img { height: 54px; } }
@media (max-width: 1100px) { .nav__brand img { height: 88px; }
                             .nav--compact .nav__brand img { height: 46px; } }
@media (max-width: 767px)  { .nav__brand img { height: 66px; }
                             .nav--compact .nav__brand img { height: 38px; } }
@media (max-width: 420px)  { .nav__brand img { height: 54px; }
                             .nav--compact .nav__brand img { height: 32px; } }

.nav__links { display: flex; align-items: center; gap: 18px; }
.nav__links a {
  font-family: var(--font-chrome);
  font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: currentColor; opacity: .7;
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.nav__links a:hover { opacity: 1; }

/* "Free Tools" — the one nav link that should POP, neon-sign style, echoing
   the glowing "THE BUILD" title in the protein video: a bright core with a
   warm burnt-orange bloom that gently pulses. Two palettes, one over the dark
   hero film (bright core), one over the light paper sections (accent core). */
/* "Free Tools" is a glowing PILL, not just a link — a bright bordered chip
   with a real burnt-orange bloom that pulses, so it reads instantly against
   the busy hero photo. Echoes the neon "THE BUILD" title in the protein video. */
.nav__links a.nav__pop {
  opacity: 1;
  font-weight: 800;
  color: #fff;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,150,70,.95);
  background: rgba(226,86,18,.30);
  text-shadow: 0 0 6px rgba(255,160,90,.9);
  animation: navPopGlow 2.4s ease-in-out infinite;
}
@keyframes navPopGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(240,110,30,.55), 0 0 18px rgba(240,110,30,.30), inset 0 0 8px rgba(255,160,90,.20); }
  50%      { box-shadow: 0 0 14px rgba(255,140,50,.85), 0 0 30px rgba(240,110,30,.55), inset 0 0 12px rgba(255,170,100,.35); }
}
.nav__links a.nav__pop:hover {
  color: #fff;
  background: rgba(226,86,18,.55);
  border-color: #fff;
}
/* over the light paper sections: solid accent fill, still glowing */
.nav--light .nav__links a.nav__pop {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
  text-shadow: none;
  animation: navPopGlowLight 2.4s ease-in-out infinite;
}
@keyframes navPopGlowLight {
  0%, 100% { box-shadow: 0 0 8px rgba(192,69,15,.35),  0 0 16px rgba(192,69,15,.18); }
  50%      { box-shadow: 0 0 14px rgba(192,69,15,.55), 0 0 26px rgba(192,69,15,.30); }
}
.nav--light .nav__links a.nav__pop:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
@media (prefers-reduced-motion: reduce) {
  .nav__links a.nav__pop { animation: none; }
}

/* Substack — the LOUDEST element in the nav, outshouting even Free Tools:
   a solid Substack-orange pill, white bold, with the flag icon and a brighter,
   faster pulsing bloom. Same look over the dark hero and the light paper. */
.nav__links a.nav__sub {
  opacity: 1;
  font-weight: 800;
  color: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid #ff8a3d;
  background: #ff6719;                 /* Substack brand orange */
  text-shadow: none;
  animation: navSubGlow 2s ease-in-out infinite;
}
.nav__links a.nav__sub svg { width: 16px; height: 16px; }
.nav__links a.nav__sub span { display: inline; }   /* keep the word, even on medium widths */
@keyframes navSubGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(255,103,25,.65), 0 0 22px rgba(255,103,25,.38); }
  50%      { box-shadow: 0 0 18px rgba(255,125,45,.95), 0 0 40px rgba(255,103,25,.62); }
}
.nav__links a.nav__sub:hover { background: #ff7a33; border-color: #fff; }
.nav--light .nav__links a.nav__sub { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .nav__links a.nav__sub { animation: none; }
}

/* social links — icon + label, label drops away when space is tight */
.nav__soc { display: inline-flex; align-items: center; gap: 7px; }
.nav__soc svg { flex: none; }
.nav__div { width: 1px; height: 15px; background: currentColor; opacity: .22; }

/* the one filled action, Mercury-style: a single accent, used once */
.nav .nav__cta {
  opacity: 1;
  padding: 9px 18px;
  font-size: 10.5px; letter-spacing: .12em;
  background: var(--burnt); color: var(--ground);
  border: 1px solid var(--burnt);
}
.nav .nav__cta:hover { background: transparent; color: currentColor; border-color: currentColor; }

/* ---- the menu button + panel ----
   The bar stays pinned the whole scroll, so every option has to stay reachable
   from it. On phones the links move into a full-screen panel rather than
   disappearing — the hero can then run as long as it likes, because anyone can
   jump out of it at any moment. */
.nav__burger {
  display: none;
  width: 42px; height: 42px; padding: 0;
  border: 1px solid currentColor; border-radius: var(--radius-pill);
  background: transparent; color: currentColor; cursor: pointer;
  align-items: center; justify-content: center; gap: 5px; flex-direction: column;
}
.nav__burger span {
  display: block; width: 16px; height: 1.5px; background: currentColor;
  transition: transform 260ms var(--ease-out), opacity 260ms var(--ease-out);
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.nav__scrim {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(18,23,18,.55); backdrop-filter: blur(3px);
}

@media (max-width: 1100px) { .nav__soc span { display: none; } }

@media (max-width: 900px) {
  .nav__burger { display: flex; }

  .nav__links {
    position: fixed; inset: 0 0 auto 0; z-index: 58;
    flex-direction: column; align-items: stretch;
    gap: 0;
    padding: 84px var(--gutter) 26px;
    background: var(--band);
    color: var(--on-band);
    border-bottom: 1px solid var(--hairline-band);
    transform: translateY(-101%);
    /* visibility keeps the closed panel out of the tab order — a translated
       panel is off-screen but still focusable, which strands keyboard users */
    visibility: hidden;
    transition: transform 380ms var(--ease-out), visibility 0s linear 380ms;
  }
  .nav__links[data-open="true"] {
    transform: translateY(0);
    visibility: visible;
    transition: transform 380ms var(--ease-out), visibility 0s;
  }

  .nav__links a {
    opacity: 1;
    padding: 15px 2px;
    font-size: 13px; letter-spacing: .16em;
    border-bottom: 1px solid var(--hairline-band);
    color: var(--on-band);
  }
  .nav__soc { gap: 12px; }
  .nav__soc span { display: inline; }     /* labels come back inside the panel */
  .nav__div { display: none; }

  .nav .nav__cta {
    margin-top: 18px; text-align: center;
    padding: 15px 18px; font-size: 12px;
    border-bottom: 0;
    background: var(--burnt); color: var(--ground); border-color: var(--burnt);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__links { transition: none; }
  .nav__burger span { transition: none; }
}

/* ============================ HERO — 3-ACT SCROLL SEQUENCE ============================ */
/* Classroom → Operating room → Stadium. The section is tall; the stage inside
   is sticky, so scroll distance becomes the timeline. Each act cross-dissolves
   and pushes in slightly, so the frame is always alive. */
.hero {
  position: relative;
  height: 320vh;                 /* ~1 viewport of scroll per act + lead-out */
  background: var(--band);
  color: var(--on-band);
}
.hero__stage {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex; align-items: center;   /* headline floats; furniture owns the corners */
}

/* stacked act frames */
.hero__act {
  position: absolute; inset: 0; margin: 0; z-index: 0;
  opacity: 0;
  will-change: opacity, transform;
}
.hero__act.is-on { opacity: 1; }
.hero__act picture, .hero__act img { display: block; width: 100%; height: 100%; }
.hero__act img { object-fit: cover; object-position: 62% center; }

/* frame-scrub canvas — the animated "Chalk Throw" film, drawn frame-by-frame
   off scroll position. Sits on the act layer; the stills stay behind it as the
   poster / reduced-motion fallback until the sequence is ready. */
.hero__scrub {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  display: none;
  opacity: 0; transition: opacity 260ms ease-out;
}
.hero__scrub.is-active { display: block; opacity: 1; }

.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(10,16,12,.78) 0%, rgba(10,16,12,.48) 38%, rgba(10,16,12,0) 64%),
    linear-gradient(to top, rgba(10,16,12,.74) 0%, rgba(10,16,12,0) 44%);
}
.hero__inner {
  position: relative; z-index: 2; width: 100%;
  /* keep clear of the vertical badge on the right and the card/cue below */
  padding-right: 96px;
  padding-bottom: 150px;
}

/* one headline per act, cross-faded in place */
.hero__lines { position: relative; }
.hero__line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  /* Constrained to ~54% so it stays off his face, and answering to viewport
     HEIGHT as well as width — six stacked lines would otherwise push the CTA
     off screen. The upper bound is the token, so it grows on large panels
     instead of freezing at a laptop size. */
  font-size: clamp(32px, min(6vw, 9.6vh), var(--text-display-xl));
  line-height: 1.0;   /* was 0.94 — serif descenders were touching the next line */
  letter-spacing: var(--tracking-display-xl);
  color: var(--on-band-bright);
  max-width: min(15ch, 54%);
  text-wrap: balance;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
.hero__line:not(:first-child) { position: absolute; inset: 0; }
.hero__line.is-on { opacity: 1; transform: none; }

.hero__sub {
  margin: var(--space-3) 0 0;
  max-width: min(44ch, 52%);
  font-family: var(--font-chrome);
  font-size: 16px; line-height: 1.55;
  color: var(--on-band-dim);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-4); }
.hero .pill { background: var(--on-band-bright); color: var(--band); border-color: var(--on-band-bright); }
.hero .pill:hover { background: transparent; color: var(--on-band-bright); }
.hero .pill--ghost { background: transparent; color: var(--on-band-bright); }
.hero .pill--ghost:hover { background: var(--on-band-bright); color: var(--band); }
.hero .label { color: var(--on-band-faint); }
.hero .rule { background: var(--hairline-band); }
.hero__spec { display: flex; align-items: center; gap: 22px; margin-top: var(--space-6); }

/* ---------- Oryzo furniture ----------
   The signature of that page is not its palette, it is its furniture:
   a vertical badge on the edge, a frosted caption card lower-left, a video
   pill lower-right, and a scroll cue centred at the bottom. Everything below
   sits ON the photograph and stays out of the headline's way. */

.hero__eyebrow {
  display: block;
  font-family: var(--font-chrome);
  font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--on-band-faint);
  margin-bottom: var(--space-2);
}

/* vertical badge, right edge */
.hero__badge {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  padding: 18px 12px;
  border-left: 1px solid var(--hairline-band);
  background: rgba(18,23,18,.34);
  backdrop-filter: blur(7px);
}
.hero__badge span {
  display: block;
  writing-mode: vertical-rl;
  font-family: var(--font-chrome);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--on-band-dim);
  white-space: nowrap;
}

/* frosted caption card, lower left */
.hero__card {
  position: absolute; left: var(--gutter); bottom: var(--space-6);
  z-index: 3; margin: 0;
  width: 230px; padding: 16px 18px 18px;
  border: 1px solid var(--hairline-band);
  border-radius: var(--radius-card);
  background: rgba(18,23,18,.42);
  backdrop-filter: blur(10px);
}
.hero__card { transition: opacity 420ms var(--ease-out); }
.hero__card.is-hidden { opacity: 0; }
.hero__card img { width: 46px; height: auto; margin-bottom: 12px; opacity: .95; }
/* school / SpineCal logos are wide — give them room. The card widens in logo
   mode, and the final SpineCal reveal gets an extra-large treatment so it reads
   as the payoff, not a footnote. */
.hero__card.card--logo { width: 300px; }
.hero__card.card--xl   { width: 400px; padding: 20px 22px 22px; }
.hero__card-logo--wide { width: 100% !important; max-height: 150px;
  object-fit: contain; object-position: left center; margin-bottom: 2px; }
.hero__card.card--xl .hero__card-logo--wide { max-height: 210px; }
.hero__card figcaption {
  font-family: var(--font-chrome);
  font-size: 11.5px; line-height: 1.5;
  color: var(--on-band-dim);
}
.hero__card strong {
  display: block;
  font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-band-bright);
}
.hero__rule-dot {
  display: block; height: 1px; margin: 10px 0;
  background-image: linear-gradient(to right, var(--on-band-faint) 32%, transparent 0%);
  background-size: 5px 1px; background-repeat: repeat-x;
}

/* video pill, lower right */
.hero__pip {
  position: absolute; right: 84px; bottom: var(--space-6);
  z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 8px;
  border: 1px solid var(--hairline-band);
  border-radius: var(--radius-pill);
  background: rgba(18,23,18,.42);
  backdrop-filter: blur(10px);
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out);
}
.hero__pip:hover { background: rgba(18,23,18,.68); }
.hero__pip-art {
  width: 46px; height: 34px; border-radius: 8px;
  background: url('../assets/hero/act3-m.jpg') center/cover;
  filter: saturate(.9);
}
.hero__pip-play { font-size: 9px; color: var(--on-band-bright); }
.hero__pip-label {
  font-family: var(--font-chrome);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-band);
}

/* flight location captions — school names / surgical signage the chalk passes,
   set in HTML (not baked into the renders) and faded in on scroll. Top-centre,
   over the sky/aerial area so it stays legible. */
.hero__loc {
  position: absolute; z-index: 2; left: 50%; top: 15%;
  transform: translate(-50%, -8px);
  text-align: center; white-space: nowrap; pointer-events: none;
  opacity: 0;
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.hero__loc.is-on { opacity: 1; transform: translate(-50%, 0); }
.hero__loc-big {
  display: block;
  font-family: var(--font-chrome); font-weight: 700;
  font-size: clamp(20px, 3.4vw, 46px);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-band-bright);
  text-shadow: 0 2px 26px rgba(10,16,12,.6);
}
.hero__loc-sub {
  display: block; margin-top: 7px;
  font-family: var(--font-chrome); font-weight: 600;
  font-size: clamp(11px, 1.1vw, 16px);
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--on-band-dim);
  text-shadow: 0 1px 14px rgba(10,16,12,.55);
}

/* scroll cue, bottom centre — deliberately large and obvious: this is the one
   affordance that tells a first-time visitor the page keeps going. */
.hero__cue {
  position: absolute; left: 50%; bottom: 30px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-chrome);
  font-size: 13px; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--on-band-bright);
  white-space: nowrap; text-align: center;
}
.hero__chev {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid var(--on-band);
  background: rgba(18,23,18,.28);
  font-size: 26px; line-height: 1;
  animation: cueNudge 1.8s var(--ease-out) infinite;
}
.hero__cue-pct { color: var(--on-band-dim); letter-spacing: .18em; font-size: .85em; }
@keyframes cueNudge {
  0%, 62%, 100% { transform: translateY(0); }
  80%           { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) { .hero__chev { animation: none; } }

@media (max-width: 767px) {
  .hero__act img { object-position: 70% center; }
  .hero__scrim {
    background: linear-gradient(to top,
      rgba(10,16,12,.90) 0%, rgba(10,16,12,.64) 46%, rgba(10,16,12,.30) 100%);
  }
  .hero__line { max-width: 100%; }
  .hero__card, .hero__pip, .hero__badge { display: none; }
  .hero__inner { padding-right: 0; padding-bottom: 74px; }
  .hero__cue { font-size: 9.5px; letter-spacing: .16em; gap: 8px; }
}

/* No JS / reduced motion: no pin, no scrub — just the first act, static. */
@media (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero__stage { position: static; height: 100svh; }
  .hero__act:not([data-act="1"]) { display: none; }
  .hero__act[data-act="1"] { opacity: 1; }
  .hero__line:not(:first-child) { display: none; }
  .hero__line:first-child { opacity: 1; transform: none; }
}
.no-js .hero { height: auto; }
.no-js .hero__stage { position: static; }
.no-js .hero__act[data-act="1"] { opacity: 1; }
.no-js .hero__line:first-child { opacity: 1; transform: none; }

/* ============================ SECTIONS ============================ */
.section { padding-block: var(--section-gap); }
.section--alt { background: var(--ground-lift); }
.section__head { display: flex; align-items: center; gap: 22px; margin-bottom: var(--space-5); }
.section h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  color: var(--ink-bright);
  max-width: 20ch;
}
.section__lede { max-width: 56ch; color: var(--ink-dim); font-size: var(--text-subheading);
                 line-height: 1.55; margin: 0 0 var(--space-6); }

/* ============================ GUIDES ============================ */
.guides { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .guides { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .guides { grid-template-columns: repeat(3, 1fr); } }

.guide {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--paper-card, #fffaf3);
  border: 1px solid var(--hairline);
  display: flex; flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.guide:hover { transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--tint) 60%, var(--ink)); }
.guide__art { aspect-ratio: 4 / 3; background: var(--tint); overflow: hidden; }
.guide__art img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.guide__body { padding: var(--space-3); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.guide__no {
  color: var(--ink-faint);
  color: color-mix(in srgb, var(--tint) 38%, var(--ink));
}
.guide { box-shadow: none; }
.guide h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  color: var(--ink-bright);
}
.guide p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-dim); flex: 1; }
.guide__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
               margin-top: 6px; }

.guide__pick {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-chrome); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-dim); cursor: pointer; user-select: none;
  background: none; border: 0; padding: 0;
}
.guide__box {
  width: 17px; height: 17px; border-radius: 5px;
  border: 1px solid var(--ink-faint); display: grid; place-items: center;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.guide__pick[aria-pressed="true"] { color: var(--ink); }
.guide__pick[aria-pressed="true"] .guide__box { background: var(--tint); border-color: var(--tint); }
.guide__box svg { width: 11px; height: 11px; opacity: 0; }
.guide__pick[aria-pressed="true"] .guide__box svg { opacity: 1; }

.guide__dl {
  font-family: var(--font-chrome); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
  color: color-mix(in srgb, var(--tint) 30%, var(--ink));
  text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.guide__dl:hover { border-bottom-color: currentColor; }

/* ---- sticky selection bar (Silo's move) ---- */
.tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out);
  background: var(--band);
  color: var(--on-band);
  border-top: 1px solid var(--hairline-band);
  padding: 14px var(--gutter);
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}
.tray[data-open="true"] { transform: translateY(0); }
.tray__inner { max-width: var(--page-max); margin-inline: auto;
               display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.tray__count { font-family: var(--font-chrome); font-size: 12px; font-weight: 600;
               letter-spacing: .12em; text-transform: uppercase; color: var(--on-band); }
.tray__dots { display: flex; gap: 5px; margin-top: 7px; }
.tray__dot { width: 15px; height: 5px; border-radius: 3px; background: var(--hairline-band); }
.tray__dot[data-on="true"] { background: var(--tint); }
@media (max-width: 560px) { .tray__dots { display: none; } }

.tray .pill { background: var(--on-band); color: var(--band); border-color: var(--on-band); }
.tray .pill:hover { background: transparent; color: var(--on-band); }

/* ============================ VIDEOS ============================ */
.videos__empty {
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-card);
  padding: var(--space-6) var(--space-3);
  text-align: center;
}
.videos__empty p { margin: 0 auto; max-width: 44ch; color: var(--ink-dim); }

/* ============================ ABOUT ============================ */
.about { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .about { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.about__prose p { max-width: 58ch; margin: 0 0 var(--space-2); line-height: 1.6; }
.about__portrait { border-radius: var(--radius-portrait); overflow: hidden; border: 1px solid var(--hairline); }

/* ============================ FOOTER ============================ */
.foot { border-top: 1px solid var(--hairline); padding-block: var(--space-6); }
.foot__inner { display: flex; flex-wrap: wrap; gap: var(--space-3);
               justify-content: space-between; align-items: baseline; }
.foot a { color: var(--ink-dim); text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot__social { display: flex; gap: 18px; }

/* ---- scroll progress, top hairline ---- */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 0;
            background: var(--accent); z-index: 80; transition: width 90ms linear; }

/* ---- reveal on scroll ---- */
.reveal { opacity: 0; transform: translateY(18px);
          transition: opacity var(--dur-slow) var(--ease-out),
                      transform var(--dur-slow) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ============================ THE GUIDES — picker ============================
   Oryzo slot 10: their "Choose your own" tier selector. Browse the variants,
   pick one, go. Delivery is Substack, so there is no download tray here. */
.show { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .show { grid-template-columns: 1.35fr .65fr; align-items: start; } }

.show__stage {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--ground);
  border: 1px solid var(--hairline);
  aspect-ratio: 4 / 3;
}
.show__panel {
  position: absolute; inset: 0; margin: 0;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.show__panel.is-on { opacity: 1; pointer-events: auto; }
.show__panel img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.show__panel figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 18px;
  background: linear-gradient(to top, rgba(18,23,18,.92), rgba(18,23,18,0));
  color: var(--on-band);
}
.show__panel figcaption strong {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-heading-sm); letter-spacing: -.02em;
  color: var(--on-band-bright); margin-bottom: 4px;
}
.show__panel figcaption span { font-family: var(--font-chrome); font-size: 13px; color: var(--on-band-dim); }

.show__picker { display: flex; flex-direction: column; gap: 6px; }
.pick {
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-left: 3px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer; text-align: left; width: 100%;
  font-family: var(--font-chrome);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.pick:hover { background: rgba(47,42,27,.05); }
.pick[aria-pressed="true"] { border-left-color: var(--tint); background: rgba(47,42,27,.07); }
.pick__no { font-size: 11px; font-weight: 700; letter-spacing: .16em;
            color: color-mix(in srgb, var(--tint) 40%, var(--ink)); }
.pick__name { font-size: 14px; font-weight: 600; color: var(--ink); }
.pick[aria-pressed="true"] .pick__name { color: var(--ink-bright); }

.show__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: var(--space-5); }


/* ============================ LARGE SCREENS & TELEVISION ============================
   A TV is watched from several metres away and driven by a remote, not a
   cursor — so targets grow, and focus has to be visible enough to track from
   across a room. */

/* keyboard / remote focus, everywhere */
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
.hero :where(a, button):focus-visible { outline-color: var(--on-band-bright); }

@media (min-width: 2200px) {
  .nav { padding: 30px var(--gutter); }
  .nav__brand img { height: 132px; }
  .nav--compact .nav__brand img { height: 78px; }
  .nav__links { gap: 34px; }
  .nav__links a { font-size: 17px; }
  .nav .nav__cta { padding: 18px 34px; font-size: 17px; }
  .nav__soc svg { width: 26px; height: 26px; }

  .pill { padding: 22px 42px; font-size: 18px; }
  .label { font-size: 17px; }

  .hero__eyebrow { font-size: 18px; }
  .hero__sub { font-size: 26px; max-width: min(44ch, 52%); }
  .hero__card { width: 380px; padding: 26px 30px 30px; }
  .hero__card img { width: 76px; }
  .hero__card strong { font-size: 19px; }
  .hero__card figcaption { font-size: 18px; }
  .hero__badge span { font-size: 16px; letter-spacing: .3em; }
  .hero__pip { padding: 14px 26px 14px 14px; right: 130px; }
  .hero__pip-art { width: 78px; height: 56px; }
  .hero__pip-label { font-size: 16px; }
  .hero__cue { font-size: 19px; bottom: 52px; gap: 14px; }
  .hero__chev { width: 66px; height: 66px; font-size: 34px; }

  .pick { padding: 22px 26px; }
  .pick__name { font-size: 22px; }
  .pick__no { font-size: 16px; }
  .show__panel figcaption { padding: 28px 32px; }
  .show__panel figcaption span { font-size: 19px; }
  .guide p, .section__lede { font-size: var(--text-subheading); }

  /* focus needs to be findable from a sofa */
  :where(a, button, [tabindex]):focus-visible { outline-width: 5px; outline-offset: 5px; }
}

/* Televisions frequently overscan — keep the fixed chrome off the bezel. */
@media (min-width: 2200px) {
  .nav { padding-left: max(var(--gutter), 3vw); padding-right: max(var(--gutter), 3vw); }
  .hero__card { left: max(var(--gutter), 3vw); }
  .hero__pip { right: max(130px, 6vw); }
}

/* ---- about: the voice needs air ----
   Short lines and fragments only land with space around them; run together as
   a normal paragraph block they read as choppy rather than deliberate. */
.about__prose p {
  max-width: 46ch;
  margin: 0 0 var(--space-2);
  font-size: var(--text-subheading);
  line-height: 1.5;
  color: var(--ink);
}
.about__prose .about__beat {
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink-bright);
  margin: var(--space-4) 0 var(--space-4);
}
.about__prose p:last-child { color: var(--ink-dim); }