/* LeVik Studio - startup hero and the AVSP pipeline cutaway.
   The cutaway is one inline SVG: three inputs converging into one stream,
   processor modules, a token that keeps the same shape through every
   station (the fixed form), two parts built once and reused, and the
   finished video at the screen. demo.js drives the step timeline. */

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 88vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.hero-dust {
  position: absolute;
  inset: 5.5rem 0 0;
  pointer-events: none;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 40% at 50% -8%, rgba(227, 164, 78, 0.13), transparent 65%),
    radial-gradient(ellipse 40% 35% at 88% 108%, rgba(120, 90, 160, 0.06), transparent 60%);
}

.hero-inner {
  position: relative;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 1.8rem;
  padding: 7rem 1.5rem 5rem;
  max-width: 62rem;
}

.hero-inner h1 {
  font-size: clamp(2.6rem, 6.2vw, 4.9rem);
}

.hero-sub {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: var(--muted);
  max-width: 42rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 0.4rem;
}

/* ---------- Header CTA ---------- */

/* ---------- The machine ---------- */

.machine {
    border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #060608, #050506);
  overflow: hidden;
}

.m-svg {
  display: block;
  width: 100%;
  height: auto;
}


/* the three inputs: portrait, voice, script */
.in-ic rect {
  fill: url(#mfill);
  stroke: rgba(236, 231, 220, 0.18);
  stroke-width: 1.6;
  transition: stroke 0.5s ease, opacity 0.6s ease;
}
.in-ic circle,
.in-ic path {
  stroke: rgba(236, 231, 220, 0.5);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  transition: stroke 0.5s ease;
}
.in-ic.on rect { stroke-width: 2; }
.ic-portrait.on rect, .ic-portrait.on circle, .ic-portrait.on path { stroke: #86d9ff; }
.ic-voice.on rect, .ic-voice.on path { stroke: var(--amber-bright); }
.ic-script.on rect, .ic-script.on path { stroke: #ff77d9; }
.in-ic.gone { opacity: 0; }

/* the converge into one stream */
.cv {
  stroke: rgba(227, 164, 78, 0.55);
  stroke-width: 1.6;
  stroke-dasharray: 4 7;
  fill: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.cv.on {
  opacity: 1;
  animation: dash-flow 1.6s linear infinite;
}
@keyframes dash-flow {
  to { stroke-dashoffset: -44; }
}
.merge-pt {
  fill: #1b130a;
  stroke: var(--amber-bright);
  stroke-width: 2;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.merge-pt.on {
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(227, 164, 78, 0.7));
}

/* the lane */
.m-lane {
  stroke: rgba(227, 164, 78, 0.28);
  stroke-width: 2.4;
  stroke-dasharray: 3 9;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.m-lane.on {
  opacity: 1;
  animation: dash-flow 1.3s linear infinite;
}

/* step 2: the neural core */
.tangle path { fill: none; stroke-linecap: round; opacity: 0; transition: opacity 0.6s ease; }
.tangle .t1 { stroke: #86d9ff; stroke-width: 1.6; }
.tangle .t2 { stroke: #86d9ff; stroke-width: 1.2; }
.tangle circle { fill: #86d9ff; opacity: 0; }
.tangle.on .t1, .tangle.on .t2, .tangle.on .t3 { opacity: 0.8; animation: tpulse 1.8s ease-in-out infinite alternate; }
.tangle.on circle { opacity: 1; }
@keyframes tpulse {
  from { opacity: 0.45; }
  to   { opacity: 0.95; }
}

/* step 3: prism, wave in, coordinates out */
.prism .tri {
  stroke: #86d9ff;
  stroke-width: 1.8;
  fill: rgba(134, 217, 255, 0.05);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.prism .wave {
  stroke: var(--amber-bright);
  stroke-width: 2;
  fill: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.prism circle {
  fill: #86d9ff;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.prism.on .tri { opacity: 1; filter: drop-shadow(0 0 8px rgba(134, 217, 255, 0.4)); }
.prism.on .wave { opacity: 0.95; animation: wave-run 1.1s linear infinite; }
.prism.on circle { opacity: 0.9; }
@keyframes wave-run {
  to { stroke-dashoffset: -24; }
}
.prism .wave { stroke-dasharray: 6 6; }

/* the wireframe face */
.faceg circle, .faceg ellipse, .faceg path {
  stroke: #86d9ff;
  stroke-width: 1.6;
  fill: none;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.faceg.on circle, .faceg.on ellipse, .faceg.on path {
  opacity: 0.9;
  filter: drop-shadow(0 0 7px rgba(134, 217, 255, 0.45));
}

/* step 4: render station inside the studio set */
.render .room {
  fill: none;
  stroke: rgba(236, 231, 220, 0.14);
  stroke-width: 1.4;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.render .paint {
  fill: rgba(185, 138, 110, 0.25);
  stroke: var(--amber-bright);
  stroke-width: 1.8;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.render .lb1, .render .lb2, .render .lb3 {
  fill: var(--amber-bright);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.render .camg rect, .render .camg path {
  stroke: #86d9ff;
  stroke-width: 1.6;
  fill: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.render.on .room { opacity: 1; }
.render.on .paint { opacity: 1; filter: drop-shadow(0 0 8px rgba(227, 164, 78, 0.45)); }
.render.on .lb1, .render.on .lb2, .render.on .lb3 { opacity: 0.95; animation: lbblink 1.6s ease-in-out infinite alternate; }
.render.on .camg rect, .render.on .camg path { opacity: 0.9; }
@keyframes lbblink {
  from { opacity: 0.5; }
  to   { opacity: 1; }
}

/* step 5: the finished host on a glass display */
.display .glassg {
  fill: rgba(12, 12, 16, 0.9);
  stroke: rgba(236, 231, 220, 0.2);
  stroke-width: 1.6;
  opacity: 0;
  transition: opacity 0.8s ease, stroke 0.6s ease, filter 0.6s ease;
}
.display .hostg {
  stroke: rgba(244, 240, 230, 0.9);
  stroke-width: 2;
  fill: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.display .standg {
  stroke: rgba(236, 231, 220, 0.4);
  stroke-width: 2;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.display.on .glassg {
  opacity: 1;
  stroke: var(--amber);
  filter: drop-shadow(0 0 16px rgba(227, 164, 78, 0.5));
}
.display.on .hostg { opacity: 1; }
.display.on .standg { opacity: 1; }

/* the travelling stream; the translate default is its rest position,
   so without JavaScript it does not sit clipped at the SVG origin */
.m-token {
  transform: translate(212px, 330px);
  transition: transform 2.1s cubic-bezier(0.45, 0.05, 0.25, 1);
}
.m-token .tk {
  fill: #1b130a;
  stroke: var(--amber-bright);
  stroke-width: 2;
  filter: drop-shadow(0 0 8px rgba(240, 184, 102, 0.6));
}

/* ---------- Reduced motion: the machine rests mid-cycle ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero-dust { display: none; }
  .m-token { display: none; }
  .cv, .m-lane, .tangle path, .prism .wave { animation: none; }
}

/* ---------- the whole-page world (3D active) ---------- */

.world3d {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
html.has-3d .world3d { display: block; }

html.has-3d body { background: #050506; }
html.has-3d main,
html.has-3d .hero,
html.has-3d .walk { position: relative; z-index: 1; }

.world3d .world-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* the hero floats over the world with no solid panel */
html.has-3d .hero {
  background: linear-gradient(180deg, rgba(10,10,13,0.94), rgba(10,10,13,0.62) 55%, rgba(10,10,13,0.1) 88%, rgba(10,10,13,0));
  border-bottom: none;
}
html.has-3d[data-theme="light"] .hero {
  background: linear-gradient(180deg, rgba(243,239,230,0.96), rgba(243,239,230,0.7) 55%, rgba(243,239,230,0.12) 88%, rgba(243,239,230,0));
}
html.has-3d .hero-dust { display: none; }
/* the hero paragraph owns its band over the living world */
html.has-3d .hero-inner { position: relative; }
html.has-3d .hero-inner::before {
  content: "";
  position: absolute;
  inset: -3rem -2rem;
  background: radial-gradient(ellipse 62% 58% at 50% 46%, rgba(10, 10, 13, 0.82), rgba(10, 10, 13, 0.4) 62%, rgba(10, 10, 13, 0) 82%);
  pointer-events: none;
}
html.has-3d .hero-inner > * { position: relative; }

/* the walk read as a document: captions sized for arm's length */
html.film-poster.has-3d .chapter p {
  font-size: clamp(1.5rem, 4.4vw, 2.1rem);
  max-width: 34rem;
}

/* ---------- the walk ---------- */

/* In the document (no 3D) the walk is a readable section: the intro, then
   the SVG cutaway of the machine, then the caption chapters. Its children
   share the site container; over the 3D world they go full-bleed. */
.walk { padding-bottom: 3rem; }
.walk > * {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

.walk-intro {
  padding: 5.5rem 1.5rem 2.5rem;
}
.walk-intro h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 40rem;
}
.walk-intro .lede {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  color: var(--muted);
  max-width: 38rem;
  margin-top: 1.1rem;
}

.chapter {
  padding: 3.2rem 1.5rem;
  border-top: 1px solid var(--line);
}
.chapter p {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.5;
  color: var(--bone);
  max-width: 34rem;
}
.chapter-end p { color: var(--amber-bright); }

.chapter .ch-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 0.55rem;
}
.chapter-end .ch-label { color: var(--amber-bright); }

.machine { margin-top: 2.5rem; }

/* Over the 3D world the walk becomes scrollytelling: each segment is one
   and a half viewports tall and its pin sticks for the middle of that span,
   so every caption sits alone, centred, for a stretch of scroll, then hands
   over to the next as the segments cross. Sticky needs the parent taller
   than the pin; equal heights would give the pin no room to hold. */
html.has-3d .walk-intro {
  height: 145vh;
  height: 145svh;
  padding: 0 1.5rem;
  max-width: none;
}
/* the closing chapter holds a shorter pin, so the film ends on the CTA
   instead of fifty viewports of empty stage */
html.has-3d .chapter.ep-end {
  height: 116vh;
  height: 116svh;
}
html.has-3d .chapter {
  height: 160vh;
  height: 160svh;
  padding: 0 1.5rem;
  max-width: none;
  border-top: none;
}
html.has-3d .walk-intro-pin,
html.has-3d .ch-pin {
  isolation: isolate;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
html.has-3d .walk-intro .lede { text-align: center; margin-left: auto; margin-right: auto; }
/* an exit for visitors who got the idea and want the substance; fixed so
   it rides above the walk for its whole length */
.walk-skip {
  display: none;
  position: fixed;
  padding: 0.4rem 0.55rem;
  bottom: 1.1rem;
  right: 1.3rem;
  /* a quiet surface of its own: the link rides above a living scene, and
     thin wireframe must never take it apart */
  background: #0a0a0d;
  border-radius: 3px;
  z-index: 6;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--faint);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-shadow: 0 1px 12px rgba(10, 10, 13, 0.9);
}
.walk-skip:hover { color: var(--bone); }
html.has-3d .walk-skip { display: inline-block; }
/* a soft dark field behind the caption so bright props passing under the
   text never take it apart; the world stays visible around it */
html.has-3d .walk-intro-pin::before,
html.has-3d .ch-pin::before {
  content: "";
  z-index: -1;
  position: absolute;
  /* a column behind the caption, not a full-width veil: the film's
     subject must stay visible beside the words */
  left: 50%;
  right: auto;
  width: min(92vw, 56rem);
  transform: translateX(-50%);
  top: 18vh;
  bottom: 18vh;
  background: radial-gradient(ellipse 74% 62% at 50% 50%, rgba(10, 10, 13, 0.78), rgba(10, 10, 13, 0.52) 62%, rgba(10, 10, 13, 0) 82%);
  pointer-events: none;
}
/* the side chapters anchor their captions left - the column follows */
html.has-3d .chapter-side .ch-pin::before {
  left: clamp(1.5rem, 9vw, 8rem);
  width: min(34rem, 80vw);
  transform: none;
}
/* mobile: a bottom-anchored band instead of the ellipse; declared after the
   desktop rule so the media query is not out-cascaded by source order */
@media (max-width: 680px) {
  html.has-3d .walk-intro-pin::before,
  html.has-3d .ch-pin::before {
    /* full-bleed: the pin's own padding would leave hard edges over the
       deeper stage */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /* subtitle band: only the lower third darkens for the caption, the
       subject keeps the upper frame like a film poster */
    background: linear-gradient(180deg,
      rgba(10, 10, 13, 0) 38%,
      rgba(10, 10, 13, 0.6) 60%,
      rgba(10, 10, 13, 0.94) 80%,
      rgba(10, 10, 13, 0.94) 100%);
  }
  html.has-3d .ch-pin,
  html.has-3d .walk-intro-pin {
    justify-content: flex-end;
    padding-bottom: 8vh;
  }
  /* the epilogue pins center later in the file at equal specificity, so
     this selector carries an extra class to win the cascade: their
     captions land in the subtitle band, not across the subject */
  html.has-3d .chapter.ep .ch-pin {
    justify-content: flex-end;
    padding-bottom: 8vh;
  }
}

/* touch screens: the footer list and the skip chip need real tap zones */
@media (pointer: coarse) {
  .site-footer .footer-col a,
  .site-footer .footer-brand a {
    display: inline-block;
    padding: 0.75rem 0.5rem;
    margin: -0.45rem -0.5rem;
  }
  .walk-skip {
    min-height: 48px;
    padding: 0.85rem 1.1rem;
  }
}
html.film-poster .ch-pin::before,
html.film-poster .walk-intro-pin::before { display: none; }

/* a phone held sideways is still a phone: the poster captions keep the
   subtitle band and the skip chip clears them, like the narrow layout */
@media (orientation: landscape) and (max-width: 949px) {
  /* a sideways phone still needs the call to action on its first screen */
  .hero-inner {
    gap: 0.8rem;
    padding: 4.6rem 1.5rem 2rem;
  }
  .hero-inner h1 {
    font-size: clamp(1.9rem, 7vh, 3rem);
  }
  .hero-inner .hero-sub {
    font-size: 0.9rem;
  }
  html.has-3d .ch-pin,
  html.has-3d .walk-intro-pin,
  html.has-3d .chapter.ep .ch-pin {
    justify-content: flex-end;
    padding-bottom: 9vh;
  }
  html.has-3d .chapter p {
    font-size: clamp(1.15rem, 2.9vh, 1.6rem);
    max-width: 44rem;
  }
}

/* very small phones: the hero h1 floor would eat the whole first
   screen, and tall captions must clear the fixed skip link */
@media (max-width: 380px) {
  .hero-inner h1 {
    font-size: clamp(2.05rem, 8.6vw, 2.6rem);
  }
  .hero-inner {
    gap: 0.85rem;
    padding: 5.2rem 1.5rem 3.2rem;
  }
  .hero-inner .hero-sub {
    font-size: 0.9rem;
  }
  html.has-3d .ch-pin,
  html.has-3d .walk-intro-pin,
  html.has-3d .chapter.ep .ch-pin {
    padding-bottom: 19vh;
  }
  /* match the film-poster selector so the smaller floor wins the
     cascade; the last caption line must clear the fixed skip link */
  html.film-poster.has-3d .chapter p,
  html.has-3d .chapter p {
    font-size: clamp(1.35rem, 4.6vw, 1.8rem);
  }
}
html.has-3d .chapter p {
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  max-width: 30rem;
  margin-top: 0.4rem;
  text-align: center;
  text-shadow: 0 2px 30px rgba(10, 10, 13, 0.9), 0 0 80px rgba(10, 10, 13, 0.8);
}
html.has-3d .chapter .ch-label {
  text-align: center;
  text-shadow: 0 2px 20px rgba(10, 10, 13, 0.9);
}

/* the display chapters: the caption takes the left column so the glass
   pane owns the right half of the frame */
html.has-3d .chapter-side .ch-pin {
  align-items: flex-start;
  text-align: left;
  padding-left: clamp(1.5rem, 9vw, 8rem);
}
html.has-3d .chapter-side .ch-label,
html.has-3d .chapter-side .ch-pin p {
  text-align: left;
}
@media (max-width: 680px) {
  html.has-3d .chapter-side .ch-pin {
    align-items: center;
    text-align: center;
    padding-left: 0;
  }
  html.has-3d .chapter-side .ch-label,
  html.has-3d .chapter-side .ch-pin p {
    text-align: center;
  }
}

/* ---------- the epilogue: film chapters to the close ---------- */

.ep .ch-pin { gap: 1.2rem; }
.ep .ch-label { margin-bottom: 0; }
.film-line {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.35;
  color: var(--bone);
  max-width: 44rem;
}
.film-line-strong { color: var(--bone); font-weight: 500; }
.film-word {
  color: var(--amber);
  font-style: italic;
}
.film-sub {
  color: var(--muted);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  max-width: 36rem;
}
html.has-3d .film-line { text-shadow: 0 2px 30px rgba(10, 10, 13, 0.95), 0 0 16px rgba(10, 10, 13, 0.85); }
html.has-3d .film-sub { text-shadow: 0 2px 20px rgba(10, 10, 13, 0.95); }
.ep .big-lines {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.4;
  color: var(--bone);
  text-align: center;
}
.ep .idea-note {
  margin-top: 1.6rem;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--faint);
}
.ep .hero-actions { margin-top: 0.6rem; }

/* document layout (no 3D): the epilogue reads as calm sections */
.ep { padding: 3.2rem 1.5rem; border-top: 1px solid var(--line); }
.ep .film-line, .ep .film-sub { text-align: left; margin-left: 0; }
.ep .film-line { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }

/* over the world: staged, centered, no borders */
html.has-3d .ep {
  height: 150vh;
  height: 150svh;
  padding: 0 1.5rem;
  border-top: none;
  max-width: none;
}
html.has-3d .ep .ch-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
html.has-3d .ep .big-lines { text-shadow: 0 2px 30px rgba(10, 10, 13, 0.95), 0 0 18px rgba(10, 10, 13, 0.9); }
html.has-3d .ep .idea-note {
  color: var(--bone);
  background: rgba(10, 10, 13, 0.72);
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
}
html.has-3d .ep.ep-end .btn { box-shadow: 0 10px 34px rgba(227, 164, 78, 0.25); }

/* when 3D runs, the SVG cutaway inside the walk steps aside */
html.has-3d .machine { display: none; }

/* the footer is a sibling of main; without its own layer the opaque world
   canvas paints over it and the page ends in a black void */
html.has-3d:not([data-theme="light"]) .site-footer {
  position: relative;
  z-index: 2;
  background: #070709;
}
html.has-3d[data-theme="light"] .site-footer {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, var(--bg), #e2dac7);
}

/* when 3D does not run there is no fixed canvas at all */
html:not(.has-3d) .world3d { display: none; }

/* ---------- light appearance: the film plays on paper ---------- */
[data-theme="light"] .machine {
  background: #f7f3ea;
}
html.has-3d[data-theme="light"] body { background: #f3efe6; }
[data-theme="light"] .walk-skip {
  background: #f4efe6;
  text-shadow: none;
}
[data-theme="light"] .chapter p,
[data-theme="light"] .chapter .ch-label,
[data-theme="light"] .walk-intro .lede {
  text-shadow: 0 1px 14px rgba(243, 239, 230, 0.9), 0 0 34px rgba(243, 239, 230, 0.8);
}
html[data-theme="light"].has-3d .chapter p,
html[data-theme="light"].has-3d .chapter .ch-label,
html[data-theme="light"].has-3d .walk-intro .lede {
  text-shadow: 0 1px 14px rgba(243, 239, 230, 0.95), 0 0 30px rgba(243, 239, 230, 0.9);
}
html[data-theme="light"].has-3d .film-line,
html[data-theme="light"].has-3d .film-sub,
html[data-theme="light"].has-3d .ep .big-lines,
html[data-theme="light"].has-3d .ep .idea-note {
  text-shadow: 0 1px 14px rgba(243, 239, 230, 0.95), 0 0 26px rgba(243, 239, 230, 0.9);
}
html[data-theme="light"].has-3d .ep .idea-note { background: rgba(243, 239, 230, 0.8); }
html[data-theme="light"].has-3d .walk-intro-pin::before,
html[data-theme="light"].has-3d .ch-pin::before {
  /* as firm as the dark theme's field: a grey prop passing behind a small
     brown label must not take it below a readable contrast */
  background: radial-gradient(ellipse 74% 62% at 50% 50%, rgba(243, 239, 230, 0.78), rgba(243, 239, 230, 0.52) 62%, rgba(243, 239, 230, 0) 82%);
}
@media (max-width: 680px) {
  html[data-theme="light"].has-3d .walk-intro-pin::before,
  html[data-theme="light"].has-3d .ch-pin::before {
    background: linear-gradient(180deg,
      rgba(243, 239, 230, 0) 38%,
      rgba(243, 239, 230, 0.5) 60%,
      rgba(243, 239, 230, 0.94) 80%,
      rgba(243, 239, 230, 0.94) 100%);
  }
}


/* ---------- the film on phones and WebGL-less wides: inline sections ----------
   The walk plays as a normal document: each chapter shows its still inline
   with its real text. Nothing is hidden, nothing is fixed, everything is
   readable, clickable and accessible. Static by nature. */
html.film-poster .walk-intro,
html.film-poster .chapter,
html.film-poster .chapter.ep,
html.film-poster .chapter-end {
  height: auto;
  min-height: 0;
  padding: 0 0 4.5rem;
}
html.film-poster .walk-intro-pin,
html.film-poster .ch-pin {
  position: static;
  height: auto;
  min-height: 0;
  padding: 0 1.5rem;
  display: block;
  justify-content: flex-start;
}
html.film-poster .ch-pin::before,
html.film-poster .walk-intro-pin::before { display: none; }
html.film-poster .walk-skip { display: none !important; }
.film-inline {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: cover;
  object-position: 50% 30%;
  margin: 0 0 2.4rem;
}
html.film-poster .chapter .ch-label { display: block; margin-bottom: 0.9rem; }
html.film-poster .chapter p { max-width: 36rem; margin: 0 auto 1.1rem; }
html.film-poster .chapter .ch-pin .btn { margin-top: 1.2rem; }
/* the closing buttons clear the home-indicator zone on notched phones */
html.film-poster .chapter-end { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px) + 1.5rem); }
@media (min-width: 950px) {
  html.film-poster .walk-intro,
  html.film-poster .chapter { padding: 0 0 6.5rem; }
  .film-inline {
    max-width: 76rem;
    margin-left: auto;
    margin-right: auto;
  }
  html.film-poster .chapter p { max-width: 34rem; }
}

/* the walk read as a document: every section is as tall as its still and
   its words. The film's pin and height rules above would otherwise fix
   each section to the screen height and let the next still cover the
   end of the text. */
html.film-poster.has-3d .walk-intro,
html.film-poster.has-3d .chapter {
  height: auto;
  min-height: 0;
}
html.film-poster.has-3d .walk-intro-pin,
html.film-poster.has-3d .ch-pin,
html.film-poster.has-3d .chapter.ep .ch-pin {
  position: static;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0 1.5rem;
}

/* narrow screens show the portrait stills, whose subject sits in the
   middle band: a 4:5 crop keeps the subject and drops the empty top and
   bottom, and the box holds its size while the image loads */
@media (max-width: 949px) {
  .film-inline {
    width: 100%;
    max-width: 28rem;
    height: auto;
    max-height: none;
    aspect-ratio: 4 / 5;
    margin: 0 auto 1.6rem;
    object-position: 50% 48%;
  }
  .chapter .ch-label { font-size: 0.8rem; }
}
/* a sideways phone has a short screen: the still becomes a card that fits it */
@media (max-width: 949px) and (orientation: landscape) {
  .film-inline {
    width: auto;
    height: 70svh;
  }
}
/* the side chapters read centred like the rest when the walk is a document;
   their left column exists to leave room for the film's glass pane */
html.film-poster.has-3d .chapter-side .ch-pin {
  align-items: center;
  text-align: center;
  padding-left: 1.5rem;
}
html.film-poster.has-3d .chapter-side .ch-label,
html.film-poster.has-3d .chapter-side .ch-pin p {
  text-align: center;
}
/* a phone held sideways: captions sized to the short screen, and the hero
   without the tall page padding, so its buttons are on the first screen */
@media (max-width: 949px) and (orientation: landscape) {
  html.film-poster.has-3d .chapter p {
    font-size: clamp(1.15rem, 5.2vh, 1.5rem);
  }
}
@media (orientation: landscape) and (max-height: 480px) {
  .hero {
    padding: 0;
  }
}


/* ---------- the film on phones and upright tablets ----------
   Each caption sits in a band at the foot of the frame that is as tall as
   the caption itself (the film measures it into --cap), so a long caption
   never runs out of its band onto a bright prop; the subject keeps the
   frame above. Upright screens (the tall and mid frames, whose shots are
   composed with the picture high) and phones held sideways get the band. */
@media (max-width: 680px), (orientation: landscape) and (max-height: 480px), (max-aspect-ratio: 1095/1000) {
  html.has-3d:not(.film-poster) .walk-intro-pin::before,
  html.has-3d:not(.film-poster) .ch-pin::before,
  html.has-3d:not(.film-poster) .chapter-side .ch-pin::before {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    transform: none;
    background: linear-gradient(0deg,
      rgba(10, 10, 13, 0.94) 0,
      rgba(10, 10, 13, 0.9) var(--cap, 45%),
      rgba(10, 10, 13, 0) calc(var(--cap, 45%) + 16vh));
  }
  html.has-3d[data-theme="light"]:not(.film-poster) .walk-intro-pin::before,
  html.has-3d[data-theme="light"]:not(.film-poster) .ch-pin::before,
  html.has-3d[data-theme="light"]:not(.film-poster) .chapter-side .ch-pin::before {
    background: linear-gradient(0deg,
      rgba(243, 239, 230, 0.95) 0,
      rgba(243, 239, 230, 0.9) var(--cap, 45%),
      rgba(243, 239, 230, 0) calc(var(--cap, 45%) + 16vh));
  }
  /* captions stand on the band, clear of the skip chip at the foot */
  html.has-3d:not(.film-poster) .ch-pin,
  html.has-3d:not(.film-poster) .walk-intro-pin,
  html.has-3d:not(.film-poster) .chapter.ep .ch-pin,
  html.has-3d:not(.film-poster) .chapter-side .ch-pin {
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    padding-left: 0;
    padding-bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
  }
  html.has-3d:not(.film-poster) .chapter-side .ch-label,
  html.has-3d:not(.film-poster) .chapter-side .ch-pin p {
    text-align: center;
  }
}
/* short screens: the captions are set smaller so the longest of them
   (the epilogue) fits between the header and the band's foot */
@media (max-width: 680px) and (max-height: 700px), (orientation: landscape) and (max-height: 480px) {
  html.has-3d:not(.film-poster) .walk-intro-pin h2 { font-size: 1.4rem; }
  html.has-3d:not(.film-poster) .walk-intro .lede { font-size: 0.9rem; }
  html.has-3d:not(.film-poster) .chapter p { font-size: 1.12rem; line-height: 1.42; }
  html.has-3d:not(.film-poster) .chapter p.film-sub { font-size: 0.88rem; }
  html.has-3d:not(.film-poster) .ep h2.film-line { font-size: 1.4rem; }
  html.has-3d:not(.film-poster) .ep .ch-pin { gap: 0.55rem; }
  html.has-3d:not(.film-poster) .ep .idea-note { margin-top: 0.5rem; font-size: 0.78rem; }
  html.has-3d:not(.film-poster) .chapter .ch-label { font-size: 0.72rem; }
}
/* a phone held sideways: the skip chip moves under the header, so the
   captions can use the foot of the short screen */
@media (orientation: landscape) and (max-height: 480px) {
  html.has-3d:not(.film-poster) .walk-skip {
    top: calc(3.9rem + env(safe-area-inset-top, 0px));
    bottom: auto;
    right: calc(1.3rem + env(safe-area-inset-right, 0px));
  }
  html.has-3d:not(.film-poster) .ch-pin,
  html.has-3d:not(.film-poster) .walk-intro-pin,
  html.has-3d:not(.film-poster) .chapter.ep .ch-pin,
  html.has-3d:not(.film-poster) .chapter-side .ch-pin {
    padding-bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px));
  }
}
/* short laptop screens (1366 x 768 and the like): the epilogue's longer
   captions are set a little smaller, so their first line stays inside the
   dark field behind them, clear of the bright rigging above the set */
@media (min-width: 681px) and (min-height: 481px) and (max-height: 820px) {
  html.has-3d:not(.film-poster) .chapter.ep p { font-size: clamp(1.15rem, 3.4vh, 1.6rem); }
  html.has-3d:not(.film-poster) .chapter.ep p.film-sub { font-size: clamp(0.92rem, 2.2vh, 1.05rem); }
  html.has-3d:not(.film-poster) .ep .ch-pin { gap: 0.8rem; }
}
/* the small chapter labels carry a tight dark halo of their own over the
   film, so a glowing prop edge just above a caption never thins them */
html.has-3d:not(.film-poster):not([data-theme="light"]) .chapter .ch-label {
  text-shadow: 0 0 8px rgba(10, 10, 13, 0.9), 0 2px 20px rgba(10, 10, 13, 0.9);
}

/* ---------- the film as video ----------
   Two layers fill the stage: the clip on screen and the one readied behind
   it; they dissolve into each other. object-fit crops the clip's frame to
   the screen's shape, which the player picks to be the nearest one. */
.world3d .film-clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.world3d .film-clip.on { opacity: 1; }