/* ═══ The system's chapter stage, close and display word, copied from site.css by its banners (comments
   dropped; a test holds the copy equal). Nothing in the first screen uses them, so they stay out of the
   render-blocking page sheet: this sheet arrives right after the first paint (at once when the visit
   lands on an anchor), long before the close can scroll into view, and site.css repeats it after load. ═══ */
@layer site.components {
.chapter{position:relative}
.stage{
  --_plate-pos:var(--plate-pos-phone, 50% 50%);
  --_set-min:var(--set-min-phone, 420px);
  --_horizon:var(--horizon-phone, 62%);
  --_feet:var(--feet-phone, 92%);
  --_actor-h:var(--actor-h-phone, 42%);
  --_actor-x:var(--actor-x-phone, 60%);
  --_shadow-w:var(--shadow-w-phone, .8);
  --_shadow-x:var(--shadow-x-phone, 0%);
  --_word-size:var(--word-size-phone, min(27cqw, calc(var(--stage-vh) * .15)));
  --_word-x:var(--word-x-phone, var(--edge));
  --_word-shift:var(--word-shift-phone, 0%);
  --_word-base:var(--word-base-phone, calc(var(--_feet) - var(--_actor-h) + var(--_word-size) * .2));
  --_bust-right:var(--bust-right-phone, -30%);
  --_floor-at:var(--floor-at-phone, var(--plate-floor));
  --_stand:var(--stand-phone, 0px);
  position:relative; z-index:auto; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; min-height:var(--stage-vh); padding-top:var(--header-h);
  background:var(--surface-canvas); color:var(--text-primary)}
.stage__plate{position:absolute; inset:calc(-1 * var(--stage-plate-overscan)) 0; z-index:var(--layer-plate); pointer-events:none}
:root:not([data-js]) .public-header[data-transparent] ~ main > .chapter:first-child > .stage{padding-top:0; --stage-vh:calc(100svh - var(--header-h))}
.stage__plate img{width:100%; height:100%; max-width:none; object-fit:cover; object-position:var(--_plate-pos)}
.stage__copy{position:relative; z-index:var(--layer-copy); padding:clamp(18px, calc(var(--stage-vh) * .034), 40px) var(--edge) 0}
.stage__copy > .t-eyebrow{margin-bottom:clamp(12px, calc(var(--stage-vh) * .02), 20px)}
.stage__set{position:relative; z-index:var(--layer-word); flex:1 1 auto; min-height:var(--_set-min); container-type:inline-size}
.stage__rig{position:absolute; inset:0; z-index:var(--layer-rig)}
.stage__desk{position:absolute; left:-2%; width:104%; max-width:none; top:var(--_horizon); height:calc(100% - var(--_horizon) + 16%); object-fit:cover; object-position:50% 0}
.stage__actor{position:absolute; height:var(--_actor-h); aspect-ratio:var(--actor-ar, 1); left:var(--_actor-x); top:calc(var(--_feet) - var(--_actor-h)); translate:-50% calc(var(--actor-foot, 0) * 100%)}
.stage__actor > img{position:absolute; inset:0; width:100%; height:100%; max-width:none}
.stage__shadow{position:absolute; left:calc(50% + var(--_shadow-x)); top:calc(100% * (1 - var(--actor-foot, 0))); width:calc(100% * var(--_shadow-w)); height:var(--actor-shadow-h);
  translate:-50% -58%; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, var(--actor-shadow-ink), var(--actor-shadow-mid) 45%, rgba(44,40,37,0) 100%)}
.stage__shadow::after{content:""; position:absolute; inset:24% 14%; border-radius:50%; background:radial-gradient(closest-side, var(--actor-shadow-core), rgba(44,40,37,0))}
.stage__actor > .adapt-tint{opacity:max(var(--tint, .5), var(--tint-floor, 0)); pointer-events:none;
  -webkit-mask-image:linear-gradient(var(--tint-dir, to left), #000 15%, rgba(0,0,0,.2) 85%); mask-image:linear-gradient(var(--tint-dir, to left), #000 15%, rgba(0,0,0,.2) 85%)}
.adapt-tint[data-light="peach"]{filter:url(#light-peach)}
.adapt-tint[data-light="golden"]{filter:url(#light-golden)}
.adapt-tint[data-light="rose"]{filter:url(#light-rose)}
.adapt-tint[data-light="aqua"]{filter:url(#light-aqua)}
.adapt-tint[data-light="lavender"],.stage.close .adapt-tint:not([data-light]){filter:url(#light-lavender)}
.stage__actor > .adapt-tint:is([data-light="golden"],[data-light="peach"],[style*="light-golden"],[style*="light-peach"]){--tint-floor:.7}
.stage__bust{position:absolute; width:auto; max-width:none; height:var(--_actor-h); right:var(--_bust-right); bottom:var(--bust-bottom, -2px);
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 var(--actor-dissolve), transparent 100%); mask-image:linear-gradient(to bottom, #000 0, #000 var(--actor-dissolve), transparent 100%)}
.stage__plate--still{position:absolute; inset:0; z-index:0}
.stage__plate--still img{width:100%; height:100%; max-width:none; object-fit:cover; object-position:var(--_plate-pos)}
.stage__plate--still{-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 16%); mask-image:linear-gradient(to bottom, transparent 0, #000 16%)}
.stage:has(.stage__actor){--_box-top:var(--plate-box-top, 0%); --_box-h:var(--plate-box-h, 100%); --_plate-zoom:var(--plate-zoom, 1);
  --_floor:calc(var(--_box-top) + var(--_plate-top) + var(--plate-floor) * var(--_plate-h));
  --_feet:max(var(--_floor), var(--_stand))}
.stage:has(.stage__actor) .stage__plate--still img{--_box-h:100%}
.stage:has(.stage__actor),.stage:has(.stage__actor) .stage__plate--still img{
  --_plate-h:var(--plate-h, calc(var(--_plate-zoom) * max(var(--_box-h), 100cqw / (var(--plate-ar)))));
  --_plate-top:clamp(calc(var(--_box-h) - var(--_plate-h)), calc(var(--_floor-at) * var(--_box-h) - var(--plate-floor) * var(--_plate-h)), 0px)}
.stage:has(.stage__actor) .stage__plate--still{top:var(--_box-top); bottom:auto; height:var(--_box-h); overflow:hidden}
.stage:has(.stage__actor) .stage__plate--still img{position:absolute; left:0; top:var(--_plate-top); height:calc(var(--_plate-h) / var(--_plate-zoom));
  transform:scale(var(--_plate-zoom)); transform-origin:var(--plate-zoom-x, 50%) 0}
.stage--floor .stage__set{position:absolute; inset:0; min-height:0}
.stage--floor{padding-bottom:var(--_set-min)}
.stage--floor .stage__plate--still{-webkit-mask-image:none; mask-image:none}
.stage--floor{
  --word-base-phone:calc(var(--_horizon) + .4%); --word-base-tablet:calc(var(--_horizon) + .4%)}
.stage__rig > .stage__word{z-index:0}
.stage__actor,.stage__bust{z-index:1}
.stage__bank{position:absolute; inset:0; z-index:var(--layer-bank); pointer-events:none; display:none;
  background:linear-gradient(90deg, rgba(250,250,249,.82) 0%, rgba(250,250,249,.6) 26%, rgba(250,250,249,0) 52%)}
.stage__veil{position:absolute; inset:0; z-index:var(--layer-veil); background:var(--surface-canvas); opacity:0; pointer-events:none}
.stage__foot{position:relative; z-index:var(--layer-copy)}
@container layout (min-width:431px){
  .stage{
    --_plate-pos:var(--plate-pos-tablet, 50% 50%);
    --_set-min:var(--set-min-tablet, 460px);
    --_horizon:var(--horizon-tablet, 62%);
    --_feet:var(--feet-tablet, 92%);
    --_actor-h:var(--actor-h-tablet, 46%);
    --_actor-x:var(--actor-x-tablet, 64%);
    --_shadow-w:var(--shadow-w-tablet, .8);
    --_shadow-x:var(--shadow-x-tablet, 0%);
    --_word-size:var(--word-size-tablet, min(26cqw, calc(var(--stage-vh) * .18)));
    --_word-x:var(--word-x-tablet, var(--edge));
    --_word-shift:var(--word-shift-tablet, 0%);
    --_word-base:var(--word-base-tablet, calc(var(--_feet) - var(--_actor-h) + var(--_word-size) * .3));
    --_bust-right:var(--bust-right-tablet, -16%);
    --_floor-at:var(--floor-at-tablet, var(--plate-floor));
    --_stand:var(--stand-tablet, 0px);
  }
}
@container layout (min-width:900px){ @media (min-aspect-ratio:1/1), (min-width:1025px){
  .stage{
    --_plate-pos:var(--plate-pos-desktop, 50% 50%);
    --_horizon:var(--horizon-desktop, 66%);
    --_feet:var(--feet-desktop, 90%);
    --_actor-h:var(--actor-h-desktop, 50%);
    --_actor-x:var(--actor-x-desktop, 76%);
    --_shadow-w:var(--shadow-w-desktop, .8);
    --_shadow-x:var(--shadow-x-desktop, 0%);
    --_word-size:var(--word-size-desktop, min(22cqw, calc(var(--stage-vh) * .3)));
    --_word-x:var(--word-x-desktop, 31%);
    --_word-shift:var(--word-shift-desktop, 0%);
    --_word-base:var(--word-base-desktop, calc(var(--_horizon) + .4%));
    --_bust-right:var(--bust-right-desktop, -18%);
    --_floor-at:var(--floor-at-desktop, var(--plate-floor));
    --_stand:var(--stand-desktop, 0px);
    --_copy-top:var(--copy-top-desktop, calc(var(--stage-vh) * .09));
    --_copy-w:var(--copy-w-desktop, min(42cqi, 600px));
    display:block; height:var(--stage-vh); min-height:var(--stage-min)}
  .stage__set{position:absolute; inset:0; min-height:0}
  .stage--floor{padding-bottom:0}
  .stage__copy{position:absolute; left:var(--edge); top:calc(var(--header-h) + var(--_copy-top)); width:var(--_copy-w); padding:0}
  .stage--copy-right .stage__copy{left:auto; right:var(--edge)}
  .stage__plate--still{-webkit-mask-image:none; mask-image:none}
  .stage__bank{display:block}
  .stage--copy-right .stage__bank{background:linear-gradient(270deg, rgba(250,250,249,.82) 0%, rgba(250,250,249,.6) 26%, rgba(250,250,249,0) 52%)}
}}
.stage--hero{
  --plate-pos-phone:22% 50%; --plate-pos-tablet:30% 50%;
  --set-min-phone:clamp(200px, calc(var(--stage-vh) - 480px), 400px); --actor-h-phone:88%;
  --word-size-phone:min(31cqw, calc(var(--stage-vh) * .15)); --word-base-phone:calc(26.5% + var(--_word-size) * .22);
  --set-min-tablet:460px; --actor-h-tablet:88%;
  --word-size-tablet:min(26cqw, calc(var(--stage-vh) * .18)); --word-base-tablet:calc(26.5% + var(--_word-size) * .22);
  --actor-h-desktop:78%; --bust-right-desktop:-21%; --word-size-desktop:min(21cqw, calc(var(--stage-vh) * .33));
  --word-x-desktop:calc(100% - var(--edge)); --word-shift-desktop:-100%; --word-base-desktop:46%}
.stage--hero .stage__copy{padding-top:clamp(16px, calc(var(--stage-vh) * .03), 34px)}
.stage--hero .stage__copy > .t-eyebrow{margin-bottom:var(--space-4)}
.stage--hero .t-display{max-width:13ch}
.stage--hero .stage__foot{margin-top:-30px; padding:26px var(--edge) calc(26px + env(safe-area-inset-bottom, 0px)); background:var(--surface-canvas);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0; box-shadow:var(--shadow-sheet)}
.stage__foot .t-lede{max-width:36rem}
.stage__foot .btn-row{margin-top:22px}
.stage__foot .t-note{margin-top:14px}
@container layout (max-width:374px){ .stage--hero .t-display{font-size:2.35rem} }
@container layout (min-width:431px){ .stage--hero .t-display{max-width:12ch} }
@container layout (max-width:480px){
  .stage--hero{--_room:calc(var(--_set-min) - 31px); --set-min-tablet:var(--set-min-phone);
    --word-size-phone:min(31cqw, calc(var(--_room) * .385)); --word-size-tablet:min(31cqw, calc(var(--_room) * .385));
    --word-base-phone:calc(21px + var(--_word-size) * .77); --word-base-tablet:calc(21px + var(--_word-size) * .77);
    --actor-h-phone:calc((100% - 31px - var(--_word-size) * .77) / .836); --actor-h-tablet:calc((100% - 31px - var(--_word-size) * .77) / .836)}
  .stage--hero .stage__bust{right:12px; translate:40% 0}
}
@container layout (max-width:899px){ @media (max-height:720px){
  .stage--hero{--set-min-phone:clamp(120px, calc(var(--stage-vh) - 448px), 400px)}
} }
@container layout (max-width:480px){ @media (max-height:620px){
  .stage--hero .stage__word{display:none}
  .stage--hero{--actor-h-phone:100%; --actor-h-tablet:100%}
} }
@container layout (min-width:481px) and (max-width:899px){ @media (max-height:720px){
  .stage--hero .stage__word{display:none}
  .stage--hero{--actor-h-tablet:100%; --bust-right-tablet:-12%}
} }
@container layout (min-width:900px){ @media (min-aspect-ratio:1/1), (min-width:1025px){
  .stage--hero{display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:clamp(40px, calc(var(--stage-vh) * .085), 96px)}
  .stage--hero .stage__copy,.stage--hero .stage__foot{position:relative; left:auto; top:auto; width:min(44cqi, 640px); margin:0 0 0 var(--edge); padding:0; background:none; box-shadow:none; border-radius:0}
  .stage--hero .stage__copy > .t-eyebrow{margin-bottom:20px}
  .stage--hero .stage__foot .t-lede{margin-top:24px; max-width:33rem}
  .stage--hero .stage__foot .btn-row{margin-top:30px}
}}
@container layout (min-width:900px) and (max-width:1279px){ @media (min-aspect-ratio:1/1), (min-width:1025px){
  .stage--hero{--actor-h-desktop:64%; --bust-right-desktop:-22%; --word-size-desktop:min(17.5cqw, calc(var(--stage-vh) * .24)); --word-base-desktop:calc(100% - var(--_actor-h) * .835 + var(--_word-size) * .25)}
  .stage--hero .stage__copy,.stage--hero .stage__foot{width:min(41cqi, 520px)}
} }
@container layout (min-width:1600px){ .stage--hero{--actor-h-desktop:82%; --bust-right-desktop:-14%} }
.stage.close{--close-h:min(78svh, 760px); --stage-vh:var(--close-h); --actor-ar:1200/1514;
  --plate-ar:1585/992; --plate-floor:.68;
  --close-fade:calc(100% - 44px); --plate-pos-phone:50% 68%; --horizon-phone:68%; --stand-phone:calc(100% - 64px); --actor-h-phone:min(calc(var(--_set-min) * .72), 260px); --actor-x-phone:calc(100% - 20px - var(--_actor-h) * var(--actor-ar) / 2); --shadow-w-phone:.6;
  --set-min-phone:clamp(300px, calc(100svh - 430px), 420px); --set-min-tablet:clamp(300px, calc(var(--close-h) - 470px), 460px);
  --word-size-phone:min(17cqw, calc(var(--stage-vh) * .105));
  --plate-pos-tablet:50% 68%; --horizon-tablet:68%; --stand-tablet:84%; --actor-h-tablet:36%; --actor-x-tablet:72%; --shadow-w-tablet:.6;
  --word-x-tablet:30%; --word-base-tablet:72%; --word-size-tablet:min(30cqw, calc(var(--stage-vh) * .17));
  --plate-pos-desktop:50% 68%; --horizon-desktop:68%; --stand-desktop:83%; --actor-h-desktop:66%; --actor-x-desktop:77%; --shadow-w-desktop:.6;
  --word-size-desktop:min(21cqw, calc(var(--stage-vh) * .29)); --word-x-desktop:46%;
  --copy-top-desktop:calc(var(--stage-vh) * .06); --copy-w-desktop:min(38cqi, 540px)}
@media (max-width:360px){ .stage.close{--word-size-phone:min(14cqw, calc(var(--stage-vh) * .105))} }
@media (min-width:361px) and (max-width:400px){ .stage.close{--word-size-phone:min(15cqw, calc(var(--stage-vh) * .105))} }
@container layout (min-width:431px) and (max-width:480px){ .stage.close{
  --_plate-pos:var(--plate-pos-phone); --_set-min:var(--set-min-phone); --_horizon:var(--horizon-phone);
  --_floor-at:var(--floor-at-phone, var(--plate-floor)); --_stand:var(--stand-phone, 0px);
  --_actor-h:var(--actor-h-phone); --_actor-x:var(--actor-x-phone); --_shadow-w:var(--shadow-w-phone); --_shadow-x:var(--shadow-x-phone, 0%);
  --_word-size:var(--word-size-phone); --_word-x:var(--word-x-phone, var(--edge)); --_word-shift:var(--word-shift-phone, 0%);
  --_word-base:var(--word-base-phone, calc(var(--_feet) - var(--_actor-h) + var(--_word-size) * .2))} }
@container layout (min-width:900px) and (max-width:1279px){ @media (min-aspect-ratio:1/1), (min-width:1025px){
  .stage.close{--word-size-desktop:min(19cqw, calc(var(--stage-vh) * .26)); --actor-h-desktop:62%; --actor-x-desktop:76%; --word-x-desktop:45%}
}}
.stage.close .stage__plate--still{-webkit-mask-image:linear-gradient(to bottom, #000 0, #000 var(--close-fade, 80%), transparent 100%); mask-image:linear-gradient(to bottom, #000 0, #000 var(--close-fade, 80%), transparent 100%)}
.stage.close .stage__set{bottom:var(--close-band, 0px)}
@container layout (min-width:900px){ @media (min-aspect-ratio:1/1), (min-width:1025px){
  .stage.close{--close-fade:86%; --close-band:calc(var(--close-h) * .16); --stage-vh:calc(var(--close-h) - var(--close-band)); height:var(--close-h); padding-bottom:0}
}}
.close__copy .t-h1{max-width:11ch}
@container layout (min-width:481px) and (max-width:899px){ .close__copy{max-width:54%} }
.close__line{margin-top:20px; max-width:30rem; font-size:var(--text-lead); line-height:1.55; color:var(--text-secondary)}
.close__copy .btn-row{margin-top:26px}
.close__copy .t-note{margin-top:14px}
@container layout (max-width:480px){ .close__copy .btn-row .btn{width:100%} }
.display-word{font-family:var(--font-display); font-weight:var(--weight-stage); line-height:1; letter-spacing:var(--tracking-display); color:var(--text-primary);
  white-space:nowrap; pointer-events:none; user-select:none; -webkit-user-select:none}
.display-word__l{display:inline-block}
.stage:has(:is(.stage__plate, .stage__plate--still) img):not(.stage--word-ink) .stage__word{color:var(--word-paper)}
@container layout (max-width:430px){ .stage:has(:is(.stage__plate, .stage__plate--still) img).stage--word-ink-phone .stage__word{color:var(--text-primary)} }
.stage__word{position:absolute; z-index:var(--layer-word); margin:0; left:var(--_word-x); top:calc(var(--_word-base) - var(--metric-baseline) * 1em); translate:var(--_word-shift) 0; font-size:var(--_word-size)}
.word-behind{position:relative; isolation:isolate; container-type:inline-size; min-height:var(--wb-h, 60cqw)}
.word-behind > .display-word{position:absolute; z-index:1; left:var(--wb-x, 0); top:calc(var(--wb-base, 70%) - var(--metric-baseline) * 1em); font-size:var(--wb-size, 30cqw)}
.word-behind > .word-behind__subject{position:absolute; z-index:2; left:var(--wb-subject-x, 55%); bottom:0; height:var(--wb-subject-h, 90%); width:auto; max-width:none; translate:-50% 0}
}
/* ═══ system components copy ends ═══ */