/* T24 owns only its narrative. Everything else is copied from released T23. */
#why{height:405svh;height:405lvh}   /* Use the same viewport as the pinned stage so the completed line holds before the letter. */
#why .why__q,#why .why__serious{max-width:18ch;line-height:1.03}
#why .why__a{max-width:29ch;font-size:clamp(30px,3.4vw,52px);line-height:1.12}
#why .why__pair{--orb:0px;--gap:0px;gap:0;translate:none}
:is(#letter,#letter-end) .letter__statement{font:inherit;margin:0}
:is(#letter,#letter-end) .letter__quotation{color:#707070;font:italic 400 16px/1.5 var(--sans);letter-spacing:0;max-width:52ch;margin:32px auto 0;text-wrap:balance}
:is(#letter,#letter-end) .letter__quotation p{font:inherit;margin:0}
:is(#letter,#letter-end) .letter__quotation cite{display:block;margin-top:10px;font:400 12px/1.4 var(--sans)}
/* T25: the quote leads its own slide at the letter's size; "That's why we're building Candor." follows beneath it, large. */
:is(#letter,#letter-end) .letter__quote-slide{max-width:none}
/* the quote starts in the middle and rises as the line beneath arrives, so that line ends up centred (letter-sequence.js) */
:is(#letter,#letter-end)[data-sequence="ready"] .letter__quote-slide{transform:translateY(calc(var(--beat-y,0px) + var(--slide-y,0px)))}
/* the quote at Sarthak's size (16px, cite 12px), upright (owner, 15 Oct) */
:is(#letter,#letter-end) .letter__quote-slide .letter__quotation{margin:0 auto;max-width:52ch;font:400 16px/1.5 var(--sans);
 color:color-mix(in srgb,#000 calc((1 - var(--then,0))*100%),#b3b3b3)}   /* black while it is read, light grey once the line beneath arrives */
:is(#letter,#letter-end) .letter__quote-slide .letter__quotation cite{margin-top:10px;font:400 12px/1.4 var(--sans);font-style:normal;color:color-mix(in srgb,#707070 calc((1 - var(--then,0))*100%),#c4c4c4)}
:is(#letter,#letter-end) .letter__then{margin:clamp(40px,7vh,64px) auto 0;max-width:17ch;font-family:var(--serif);font-weight:400;font-size:var(--t-display);line-height:1.06;letter-spacing:-.03em}
:is(#letter,#letter-end) .letter__placeholder{font-size:clamp(22px,2vw,30px);color:#707070;max-width:34ch}
:is(#letter,#letter-end) .letter__caption{display:block;margin-top:1.2em;font-size:14px;line-height:1.4;letter-spacing:.01em;color:#707070}
@media(max-width:600px){
 /* Match the large-viewport stage and leave a completed reading hold before the letter. */
 #why{height:425svh;height:425lvh}
 #why .why__q,#why .why__serious{font-size:clamp(40px,9.3vw,56px)}
 #why .why__a{font-size:clamp(28px,6.7vw,34px);max-width:24ch}
 :is(#letter,#letter-end) .letter__quotation{font-size:15px;max-width:100%;margin-top:28px}
 :is(#letter,#letter-end) .letter__quote-slide .letter__quotation{font-size:15px;margin-top:0}
 :is(#letter,#letter-end) .letter__placeholder{font-size:22px}
}
@media(prefers-reduced-motion:no-preference){
 /* Share the reading position across the opening and first narrative beat. */
 :is(#letter,#letter-end)[data-sequence="ready"]{margin-top:-55lvh;background:none}
 /* Solid colour surfaces avoid a full-narrative gradient raster. Two pixels
    of shared white cover fractional device-pixel seams at the handoff. */
 #letter[data-sequence="ready"]::before{content:"";position:absolute;top:calc(55lvh - 2px);right:0;bottom:0;left:0;background:#fff;pointer-events:none}
 :is(#letter,#letter-end)[data-sequence="ready"] .letter__col{z-index:1}
 #letter-end[data-sequence="ready"]{margin-top:0;background:#fff}   /* only the first part tucks under the transition */
 :is(#letter,#letter-end)[data-sequence="ready"][data-entry] .letter__col{overflow:visible}
}
@media(prefers-reduced-motion:reduce){#why{height:auto}}

/* On phones, reveal only after the native sticky plane reaches the viewport.
   A full-stage overlap aligns that pin with the preceding transition's exit;
   it replaces per-frame counter-scrolling of a still-flowing reading plane. */
@media(max-width:600px) and (prefers-reduced-motion:no-preference){
 :is(#letter,#letter-end)[data-sequence="ready"]{padding:0}
 #letter[data-sequence="ready"]{margin-top:-100lvh}
 #letter[data-sequence="ready"]::before{top:calc(100lvh - 2px)}
}