/* Three chapters, one set of rules. The normal document is the fallback. */
.story:not(.story-ready) { height: auto; overflow: visible; }
.story:not(.story-ready) main { display: block; }
.story:not(.story-ready) .story-panel { position: relative; min-height: 75svh; }
.story:not(.story-ready) .hero { min-height: 80svh; }
.story:not(.story-ready) .about-layout { min-height: 650px; height: auto; }
.story-bars { display: none; }
.story .learn-head { --learn-size: clamp(5.2rem, 11vw, 10.25rem); --learn-lh: .84; }
.story .learn-head h2 {
  margin: 0; color: var(--red);
  font: 900 var(--learn-size) / var(--learn-lh) var(--editorial);
  letter-spacing: -.045em;
}
.story-ready { height: 100dvh; min-height: 0; overflow: hidden; }
.story-ready .site-header { flex: none; position: relative; z-index: 25; }
.story-ready main { flex: 1 1 0; min-height: 0; position: relative; overflow: hidden; }
.story-ready .story-panel {
  position: absolute; inset: 0; z-index: auto;
  overflow-x: hidden; overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  background-color: var(--paper);
  padding-top: var(--ceiling, 0px);
  padding-bottom: var(--floor, 0px);
  scroll-behavior: auto;
}
.story-ready .story-panel:not(.is-active):not(.is-entering) { visibility: hidden; pointer-events: none; }
.story-ready .story-panel.is-entering { z-index: 2; }
.story-ready.is-transitioning .story-panel { overflow-y: hidden; pointer-events: none; }
.story-ready .story-home { --floor: 0px; }
.story-ready .story-learn { --ceiling: calc(var(--rule) + 16px); --floor: calc(2 * var(--rule) + var(--rgap) + 24px); }
.story-ready .story-about { --ceiling: calc(2 * var(--rule) + var(--rgap) + 12px); --floor: calc(var(--rule) + 16px); }
.story-ready .hero {
  height: var(--story-height);
  min-height: 360px;
  padding-bottom: calc(var(--rules-h) + var(--tag-h) + 20px);
}
.story-ready .hero .cta, .story-ready .hero .cat-grapple { bottom: var(--rules-h); }
.story-ready .hero .cat-peek { bottom: calc(var(--rules-h) - var(--peek-h) * .125); z-index: 21; }
.story-ready.is-transitioning .hero .cat-peek { z-index: 4; }
.story-ready .rules, .story-ready .learn-bottom-rules, .story-ready .about-rules { display: none; }
.story-ready .story-bars { display: block; position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.story-bars i { position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: var(--rule); background: var(--ink); will-change: transform; }
.story-ceiling, .story-floor { position: absolute; left: 0; right: 0; background: var(--paper); }
.story-ceiling { top: 0; }
.story-floor { bottom: 0; }
.story-ready .about-layout {
  min-height: max(460px, calc(var(--story-height) - var(--ceiling) - var(--floor) - 90px));
  height: auto; padding-bottom: 0;
}
.story-ready .about-portrait { height: clamp(350px, 62dvh, 850px); }
.story-ready .about-copy { transform: none; }
.story-ready .site-nav a[aria-current="location"] { border-bottom-color: var(--cobalt); }
.story-ready [data-story-cat] { transform-origin: 50% 90%; }
.story-ready [tabindex="-1"]:focus { outline: none; }
@media (min-width: 821px) {
  .story-ready .learn-head { grid-template-columns: max-content max-content; padding-block: 16px; }
  .story-ready .reading-cat { width: clamp(180px, 22dvh, 290px); }
  .story-ready .reading-queue { max-width: 1280px; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); gap: 36px; }
  .story-ready .feature-copy h2 { font-size: clamp(36px, 4vw, 56px); }
  .story-ready .queue-copy strong { font-size: clamp(26px, 2.5vw, 36px); }
}
@media (max-width: 820px) {
  .story .learn-head { --learn-size: clamp(5rem, 26vw, 7rem); --learn-lh: .8; }
  .story .learn-head h2 { width: 100%; text-align: center; }
  .story-ready .hero { min-height: 520px; padding-bottom: var(--rules-h); }
  .story-ready .hero-scene { margin-top: auto; padding-top: 16px; }
  .story-ready .hero .cat-peek { bottom: auto; }
  .story-ready .hero .cta { flex: none; }
  .story-ready .about-layout { min-height: 0; }
  .story-ready .about-portrait { height: 100%; }
}
@media (min-width: 821px) and (max-height: 740px) {
  .story-ready .hero h1 { font-size: clamp(4.8rem, min(13.5vw, 16.4dvh), 19rem); }
}
@media (prefers-reduced-motion: reduce) {
  .story:not(.story-ready) .story-panel { scroll-margin-top: 12px; }
}

/* Keep the same footer below the chapter stage throughout navigation. */
.story-ready > .persistent-footer, .archive-page > .persistent-footer {
  flex: none; margin: 0; padding-block: 10px; font-size: 12px;
}
.persistent-footer a { min-height: 24px; display: inline-flex; align-items: center; }
.persistent-footer .brand img { width: 82px; }
.is-releasing .story-bars i { transition: transform 180ms ease-out; }
.is-releasing .story-ceiling, .is-releasing .story-floor { transition: height 180ms ease-out; }
@media (min-width: 821px) {
  .story-ready .hero h1 { font-size: clamp(60px, min(14vw, calc((var(--story-height) - var(--rules-h) - var(--tag-h) - 110px) / 2.58)), 304px); }
}
@media (max-width: 820px) {
  .story-ready > .persistent-footer, .archive-page > .persistent-footer { row-gap: 4px; padding-block: 6px; font-size: 12px; }
  .story-ready .hero { min-height: 0; }
}
@media (min-width: 560px) and (max-width: 820px) {
  .story-ready > .persistent-footer { grid-template-columns: auto 1fr; column-gap: 16px; padding-block: 4px; }
  .story-ready > .persistent-footer .brand { grid-row: 1 / 3; align-self: center; }
  .story-ready > .persistent-footer nav { grid-column: 2; }
}
@media (max-width: 820px) and (max-height: 740px) {
  .story-ready .hero h1 { font-size: clamp(44px, 16vw, 80px); }
  .story-ready .hero .dek { font-size: 18px; margin-block: 14px 10px; }
  .story-ready .hero-scene { padding-top: 8px; }
}

/* Reserve the CTA scene first, then fit headline and cat to the remaining height. */
@media (max-width: 820px) {
  .story-ready .hero {
    --peek-w: clamp(120px, min(70vw, calc(var(--story-height) * .42)), 354px);
    --peek-h: calc(var(--peek-w) * 889 / 1768);
    --tag-h: clamp(54px, min(16vw, calc(var(--story-height) * .14)), 96px);
  }
  .story-ready .hero h1 { font-size: clamp(32px, min(17.5vw, calc(var(--story-height) * .14)), 136px); }
  .story-ready .hero .dek { font-size: clamp(16px, min(5.6vw, calc(var(--story-height) * .045)), 32px); margin-block: 16px 0; }
  .story-ready .hero-scene { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--rules-h); margin: 0; padding: 0; }
}
@media (max-width: 820px) and (max-height: 740px) {
  .story-ready .hero .dek { margin-top: 11px; }
}

/* Newspaper composition: the introduction flows beside the portrait, then below. */
.story-ready .story-about { overflow: hidden; }
.story-ready .about-layout { min-height: 0; height: calc(var(--story-height) - var(--ceiling) - var(--floor)); padding-top: clamp(12px, 2dvh, 24px); }
.story-ready .about-portrait { height: 100%; }
.story-ready .about-social { display: none; } /* The same links remain in the footer. */
@media (min-width: 821px) {
  .story-ready .about-copy .page-title { font-size: clamp(56px, min(8.3vw, 12dvh), 152px); }
  .story-ready .about-body p { font-size: clamp(14px, min(1.42vw, 2.4dvh), 21px); line-height: 1.42; }
}
@media (max-width: 820px) {
  .story-ready .about-layout { display: flow-root; padding-inline: var(--gutter); padding-top: 12px; overflow: visible; }
  .story-ready .about-portrait { float: left; width: 40%; height: auto; margin: -12px 16px 8px -6px; display: block; }
  .story-ready .about-portrait img { width: 100%; height: auto; transform: none; }
  .story-ready .about-copy { display: contents; }
  /* Caps on the shared title line; 12px is this layout's padding-top. */
  .story-ready .about-copy .page-title { padding-top: 0; font-size: clamp(42px, 12vw, 76px); line-height: .9; margin: calc(var(--title-line) - var(--ceiling) - 12px + .51em - .5lh) 0 14px; }
  .story-ready .about-copy .about-body { display: contents; padding: 0; }
  .story-ready .about-body p { font-size: clamp(14px, min(3.8vw, 2.05dvh), 18px); line-height: 1.42; }
  .story-ready .about-body p + p { margin-top: .8em; }
}
.bio-compact { display: none; }
.story-ready .story-panel { overflow: hidden; }
@media (max-width: 400px) and (max-height: 620px) {
  .story-ready .bio-full { display: none; }
  .story-ready .bio-compact { display: inline; }
  .story-ready .about-portrait { width: 34%; margin-right: 12px; }
  .story-ready .about-body p { font-size: 14px; line-height: 1.38; }
}
@media (max-width: 820px) and (min-height: 740px) {
  .story-ready .about-body p { font-size: clamp(16px, 4.3vw, 18px); line-height: 1.45; }
}

/* Desktop About is one aligned composition, not two independently centered boxes. */
@media (min-width: 821px) {
  .story-ready .about-layout {
    --portrait-w: min(36vw, calc(var(--story-height) * .60), 540px);
    grid-template-columns: var(--portrait-w) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(24px, 3vw, 48px);
    width: min(100%, 1448px);
    margin-inline: auto;
    padding: 16px var(--gutter);
    overflow: visible; /* the heading's caps rise above this box onto the title line */
  }
  .story-ready .about-portrait { width: 100%; height: auto; display: block; align-self: center; }
  .story-ready .about-portrait img { width: 100%; height: auto; transform: none; }
  .story-ready .about-copy { align-self: start; max-width: none; padding-top: 0; }
  /* Caps on the shared title line; 16px is this layout's padding-top. */
  .story-ready .about-copy .page-title { font-size: clamp(56px, min(8.3vw, calc(var(--story-height) * .16)), 132px); margin-top: calc(var(--title-line) - var(--ceiling) - 16px + .51em - .5lh); }
  .story-ready .about-body { margin-top: clamp(14px, 1.6vw, 24px); }
  .story-ready .about-body p { font-size: clamp(18px, min(1.9vw, calc(var(--story-height) * .04)), 24px); line-height: 1.42; }
}

/* The motif already supplies the header/footer dividers. Avoid doubled edges. */
.story-ready > .persistent-footer { border-top: 0; }
.story-ready[data-chapter="learn"] > .site-header,
.story-ready[data-chapter="about"] > .site-header { border-bottom-color: transparent; }