/* Prototype: iris's reading layout with a pinned, masked screenshot handoff. */
html {scroll-behavior:auto;}
.reveal-surface {background:var(--paper);}
.reveal-walkthrough {display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;}
.reveal-rail {grid-column:1 / span 3;align-self:start;position:sticky;top:96px;height:calc(100svh - 120px);display:flex;align-items:center;padding-left:32px;}
.reveal-rail>div {display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
.reveal-rail a {font-size:15px;line-height:1.4;color:var(--secondary);text-decoration:none;padding:12px 16px;border-radius:32px;transition:background-color 200ms,color 200ms;}
.reveal-rail a[aria-current="step"] {background:#d0e4d8;color:var(--ink);}
.reveal-story {grid-column:4 / -1;min-width:0;display:grid;grid-template-columns:minmax(0,354fr) minmax(0,564fr);gap:clamp(24px,3.333vw,48px);}
.reveal-copy-track {min-width:0;}
.reveal-chapter {min-height:calc(100svh - 120px);padding:64px 0;display:flex;align-items:center;scroll-margin-top:104px;}
.reveal-copy .eyebrow {font-size:11px;margin-bottom:24px;}
.reveal-copy h2 {font-size:clamp(28px,2.778vw,40px);line-height:1.1;letter-spacing:-.04em;margin-bottom:24px;}
.reveal-copy>p:not(.eyebrow) {font-size:clamp(18px,1.528vw,22px);line-height:1.455;color:var(--body);}
.reveal-full {display:inline-flex;gap:12px;font-size:13px;color:var(--secondary);text-decoration:none;margin-top:28px;}
.reveal-full:hover {color:var(--ink);text-decoration:underline;}
.reveal-stage {position:sticky;align-self:start;top:96px;height:calc(100svh - 120px);display:flex;align-items:center;justify-content:center;min-width:0;}
.reveal-stage>figure {width:100%;max-width:calc((100svh - 176px)*1.02);margin:0;}
.reveal-mat {background:#e9ebe3;border-radius:16px;padding:12.766% 11.702% 14.894%;}
.reveal-stack {position:relative;aspect-ratio:636/584;overflow:hidden;border-radius:10px;background:#fff;isolation:isolate;}
.reveal-layer {position:absolute;inset:0;clip-path:inset(var(--clip) 0 0 0);will-change:clip-path;}
.reveal-crop {position:relative;aspect-ratio:636/584;width:100%;overflow:hidden;background:#fff;}
.reveal-crop img {position:absolute;width:var(--image-width);max-width:none;height:auto;left:var(--image-left);top:var(--image-top);}
.reveal-stage figcaption,.reveal-mobile figcaption {display:flex;justify-content:space-between;gap:12px;padding-top:16px;font-size:11px;line-height:1.4;color:var(--secondary);}
.reveal-counter {font-family:var(--mono);white-space:nowrap;}
.reveal-mobile {display:none;}
.reveal-controls {position:fixed;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:16px;align-items:center;background:#191713;color:#f5f3ea;padding:14px 20px;border-radius:32px;font-size:12px;z-index:80;box-shadow:0 8px 24px #19171326;white-space:nowrap;}
.reveal-controls span {color:#c5c3ba;font:10px var(--mono);}
.reveal-controls a {color:inherit;text-decoration:none;padding:4px;}
.reveal-controls a:hover {text-decoration:underline;}
.reveal-rail a:focus-visible,.reveal-full:focus-visible,.reveal-controls a:focus-visible {outline:2px solid #49a981;outline-offset:4px;}
@media(max-width:999px) {
 .reveal-rail {padding-left:0;}.reveal-rail a {font-size:13px;padding:10px;}
 .reveal-story {grid-template-columns:1fr 1.3fr;gap:24px;}
 .reveal-mat {padding:7%;}.reveal-copy>p:not(.eyebrow) {font-size:18px;}
}
/* Normal document flow keeps each screenshot beside its own explanation on
   small/short screens, with reduced motion, or when JS isn't available. */
@media(max-width:719px),(max-height:540px),(prefers-reduced-motion:reduce) {
 .reveal-story {display:block;}
 .reveal-stage {display:none;}
 .reveal-chapter {display:grid;grid-template-columns:1fr 1.25fr;gap:32px;min-height:0;padding:64px 0;}
 .reveal-mobile {display:block;margin:0;min-width:0;}
 .reveal-mobile .reveal-crop {border-radius:10px;}
}
@media(max-width:719px) {
 .reveal-walkthrough {display:block;}.reveal-rail {display:none;}
 .reveal-chapter {display:flex;flex-direction:column;align-items:stretch;gap:32px;padding:48px 0 64px;}
 .reveal-copy .eyebrow {margin-bottom:16px;}.reveal-copy h2 {font-size:32px;margin-bottom:20px;}
 .reveal-copy>p:not(.eyebrow) {font-size:20px;}.reveal-full {margin-top:20px;}
 .reveal-mobile {background:#e9ebe3;border-radius:12px;padding:20px;}
 .reveal-controls {gap:10px;padding:10px 12px;bottom:10px;font-size:11px;max-width:96vw;}
 .reveal-controls span {display:none;}
}

/* Desktop hero: place the supporting copy two body lines below the two-line
   headline. Reuse its grid-scaled line size rather than nudging with offsets.
   Narrow layouts retain their flow below the Earth image. */
@media (min-width: 1200px) {
  .hero-canvas {
    --hero-title-line: calc(var(--page-width) * 112 / 1296);
    --hero-copy-line: 28px;
    padding-top: calc(var(--title-top) + var(--hero-title-line) * 2 + var(--hero-copy-line) * 2);
  }
  .hero-explanation { grid-column: 1 / span 3; }
  .hero-explanation p { line-height: var(--hero-copy-line); }
}