.page-story{--story-ink:#fbf8f2;--story-pine:#162D26;--story-frame:24px;--story-media-height:clamp(200px,44svh,380px);position:relative;isolation:isolate;margin:var(--story-frame);border-radius:18px;overflow:clip;background:var(--story-pine);color:var(--story-ink)}
/* The sticky artwork spans real content, rather than an empty hero runway. */
.story-stage{position:sticky;top:0;height:calc(100svh - var(--story-frame));margin-bottom:calc(-100svh + var(--story-frame));overflow:hidden;z-index:2;pointer-events:none}
.story-screen{display:none}
.story-nav{position:absolute;inset:0 0 auto;z-index:3;display:grid;grid-template-columns:auto auto;align-items:center;justify-content:space-between;gap:8px 24px;padding:24px var(--gutter);background:linear-gradient(#162D26 65%,#162D2600);pointer-events:auto}
.story-wordmark{font:400 36px/1 var(--display);text-decoration:none;letter-spacing:-1px}
/* Twilly pink (#F7BED1, the studio's lead type colour on dark grounds). */
.story-nav-join{font:400 19px/1.4 var(--body);color:#F7BED1;padding:12px 0;text-underline-offset:5px;text-decoration-thickness:1px}
.typewriter-label{display:inline-block;white-space:nowrap;border-right:1px solid transparent;padding-right:2px}
/* The return address takes the nav's second row, so Join stays level with the wordmark. */
.story-nav .mast-address{grid-column:1/-1}
/* The cursor's room is always reserved (transparent until typing), so it showing
   up does not nudge the label. */
.story-nav-join.is-typing .typewriter-label{border-right-color:currentColor}
.story-player{position:absolute;inset:0;width:100%;height:100%;opacity:0;will-change:transform}
.page-story.is-ready .story-player{opacity:1}
.story-fallback{position:absolute;width:40%;height:60%;object-fit:contain;left:75%;top:52%;transform:translate(-50%,-50%)}
.page-story.is-ready .story-fallback{display:none}
.page-story.is-hero{height:calc(100svh - var(--story-frame))}
.page-story.is-hero .page-hero{display:none}
.page-story.is-hero .story-stage{position:relative;height:100%;margin-bottom:0;background:radial-gradient(ellipse at 42% 52%,#304b3c65,transparent 65%),var(--story-pine)}
.page-story.is-hero .story-opening{position:absolute;top:13%;left:50%;width:min(85%,780px);transform:translateX(-50%);text-align:center;z-index:1;opacity:var(--opening-opacity,1);pointer-events:none}
.page-story.is-hero .story-opening h1{font:400 clamp(40px,5.3vw,76px)/.99 var(--display);letter-spacing:-.025em;margin:0;text-wrap:balance}
.page-story.is-hero .story-opening p{font:400 18px/1.6 var(--body);margin:20px auto 0;color:#cbd3c9;max-width:45ch}
.page-story.is-hero .story-final{position:absolute;left:61%;top:51%;width:min(33%,440px);z-index:2;transform:translateY(calc(-50% + var(--copy-shift,20px)));opacity:var(--final-opacity,0);visibility:hidden;pointer-events:auto}
.page-story.is-hero .story-final.is-visible{visibility:visible}
.page-story.is-hero .story-final h2{font:400 clamp(40px,4.3vw,64px)/1.02 var(--display);letter-spacing:-.025em;margin:0 0 24px;text-wrap:balance}
.page-story.is-hero .story-final p{font:400 18px/1.65 var(--body);color:#cbd3c9;max-width:34ch;margin:0 0 28px}
.story-join{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border:1px solid #C2B281;border-radius:2px;background:#C2B281;color:#162D26;font:400 15px/1.4 var(--body);text-decoration:none;transition:background .15s}
.story-join:hover{background:#dacba2}
.page-story.is-hero .story-cue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);font:400 13px/1.4 var(--body);color:#cbd3c9;opacity:var(--cue-opacity,1);margin:0}
.page-story .page-chapter{position:relative;z-index:1;display:flex;flex-direction:row;align-items:center;min-height:110svh;padding:130px 0;scroll-margin-top:0}
.page-story .page-hero{min-height:100svh}
.page-copy{width:43%;max-width:590px;margin-left:6%;min-width:0}
@media(min-width:760px) and (prefers-reduced-motion:no-preference){
  .is-travel .page-chapter+.page-chapter{margin-top:48svh}
  .is-travel #how .page-copy,.is-travel #correspondents .page-copy,.is-travel #your-letter .page-copy{margin-left:55%;width:39%}
}
.page-chapter+.page-chapter .page-copy{padding-top:0}
.page-story h1{font:400 clamp(48px,5.3vw,76px)/1 var(--display);letter-spacing:-.025em;margin:0 0 30px;text-wrap:balance}
.page-story .page-chapter h2{font:400 clamp(36px,4.1vw,58px)/1.05 var(--display);letter-spacing:-.02em;margin:0 0 28px;text-wrap:balance}
.page-story .page-lede{font:400 21px/1.65 var(--body);color:#cbd3c9;max-width:36ch;margin:0 0 30px}
.page-story .page-hero .eyebrow{color:#C2B281;margin-bottom:28px;font-size:13px;letter-spacing:.04em}
.page-continue{display:inline-flex;gap:18px;align-items:center;min-height:44px;text-underline-offset:5px;font:400 15px/1.5 var(--body)}
.page-story a:focus-visible{outline:2px solid #C2B281;outline-offset:5px}
.page-story .section .kicker{font:400 14px/1.5 'Mailgaze Special Elite',var(--mono);color:#C2B281;letter-spacing:.03em;text-transform:none;margin-bottom:20px}
.page-story .section .intro{color:#cbd3c9;max-width:40ch;font-size:19px;line-height:1.65}
.page-story .steps{grid-template-columns:1fr;gap:26px}
.page-story .step{padding-top:20px;position:relative;padding-left:42px;border-top:0}
.page-story .step .no{position:absolute;top:25px;left:0;color:#C2B281;font:400 15px/1 var(--mono)}
.page-story .step h4{font-size:28px;margin:0 0 10px}
.page-story .step p{font-size:18px;line-height:1.6;color:#cbd3c9}
.page-story .get{grid-template-columns:1fr;gap:0}
.page-story .manifest li{border-top:0;border-bottom:0;gap:18px;padding-block:26px}
.page-story .manifest .qty{color:#C2B281}
.page-story .manifest h5{font-size:28px}
.page-story .manifest p{color:#cbd3c9;font-size:18px}
.page-story .get .aside{color:#cbd3c9;font:400 16px/1.7 var(--body);max-width:40ch}
.page-story .wall{grid-template-columns:1fr;gap:24px}
.page-story .corr{padding:26px}
.page-story .wall-foot{gap:12px}
.page-story .wall-foot .btn{color:#fbf8f2;border-color:#C2B281;background:transparent;letter-spacing:.03em;text-transform:none;font:400 14px/1.5 var(--body)}
.page-story .wall-foot .btn:hover{background:#C2B281;color:#162D26}
.page-story .corr .bio{border-top:0;padding-top:0}
.page-story .corr .bio{font-size:18px;line-height:1.6}
.page-story .page-closing{border-top:0}
.page-story .page-closing{padding-bottom:65px}
.page-closing .enveloform{margin-top:36px;width:100%}
#join{scroll-margin-top:110px}
.page-footer{position:relative;z-index:1;width:43%;max-width:590px;margin-left:6%;padding:40px 0 50px;border-color:#C2B28140;text-align:left}
.page-footer{border-top:0}
.page-footer h3,.page-footer>.btn{display:none}
.page-footer .fine{margin:0;color:#cbd3c9;font:400 15px/1.8 var(--body);letter-spacing:0}
.success-scene{position:relative;height:240px;width:100%;margin:-12px auto 0}
.success-player{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.success-player[ready]{opacity:1}
.success-fallback{position:absolute;inset:0;display:grid;place-items:center}
.success-player[ready]+.success-fallback{display:none}
.confirm .success-fallback .postmark{margin:0}
.page-story .confirm h2{font-size:clamp(30px,3vw,42px);margin-bottom:18px}
.confirm h2:focus{outline:none}
/* The final sheet turns into the live form, above the remaining page copy. */
.has-envelope-ending .story-stage::before{content:'';position:absolute;inset:0;background:var(--story-pine);opacity:var(--ending-cover,0);pointer-events:none}
.page-story.has-envelope-ending .page-closing{min-height:260svh;align-items:flex-start;padding-top:130px}
.has-envelope-ending .story-player{backface-visibility:hidden}
.waitlist-back.fold{position:absolute;left:50%;width:min(820px,calc(100% - 64px));min-height:0;display:block;visibility:hidden;backface-visibility:hidden;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;pointer-events:none;background:var(--mg-white);box-shadow:0 28px 70px -24px #0009;border-radius:3px}
.waitlist-back.is-interactive{pointer-events:auto}
.waitlist-back #join{width:100%;margin:0;animation:none;box-shadow:none;min-height:0!important}
.waitlist-back .field input{font-size:16px}
.waitlist-back .ef-head .t{font-size:30px}
.waitlist-back .ef-fine{font-size:12px}
.waitlist-back .ef-head .s{font-size:11px}
.waitlist-back .page-footer{width:auto;max-width:none;margin:0;padding:0 34px 24px;text-align:center}
.waitlist-back .page-footer .fine{font-size:12px;color:#746d62}
@media(max-width:759px){
  .page-story.is-hero{height:calc(100svh - var(--story-frame))}
  .page-story.is-hero .story-opening{top:15%;width:88%}
  .page-story.is-hero .story-opening h1{font-size:clamp(38px,10.3vw,64px);max-width:12ch;margin:auto}
  .page-story.is-hero .story-opening p{font-size:16px;max-width:28ch;margin:16px auto 0}
  .page-story.is-hero .story-final{left:7%;top:auto;bottom:11%;width:86%;text-align:center;transform:translateY(var(--copy-shift,20px))}
  .page-story.is-hero .story-final h2{font-size:clamp(34px,9.6vw,52px);margin:0 auto 14px;max-width:13ch}
  .page-story.is-hero .story-final p{font-size:17px;line-height:1.55;max-width:31ch;margin:0 auto 20px}
  .story-screen{display:block;position:absolute;inset:0 0 auto;height:var(--story-media-height);background:#162D26;box-shadow:0 18px 24px #162D26}
  .story-nav{padding:14px 20px;gap:4px 16px}
  .story-wordmark{font-size:30px}
  /* 18px wherever it fits beside the 30px wordmark — every phone from 365px up.
     Narrower than that it shrinks with the screen rather than running off it:
     the wordmark and gutters take 239px, and the label is ~7px wide per px of
     type (112px at 16px, measured). */
  .story-nav-join{font-size:clamp(12px,calc((100vw - 239px) / 7),18px)}
  .story-fallback{width:85%;height:calc(var(--story-media-height) - 85px);left:50%;top:85px;transform:translateX(-50%)}
  .page-story .page-chapter{display:block;min-height:100svh;padding:calc(var(--story-media-height) + 36px) 0 80px}
  .page-copy,.page-footer{width:calc(100% - 40px);max-width:590px;margin-inline:auto}
  .page-story h1{font-size:clamp(42px,11vw,64px);max-width:12ch;margin-bottom:24px}
  .page-story .page-chapter h2{font-size:clamp(36px,9.5vw,48px)}
  .page-story .page-hero .eyebrow{font-size:12px;margin-bottom:22px}
  .page-story .page-lede{font-size:19px}
  .page-story .section .intro{font-size:18px}
  .page-story .step{padding-left:34px}
  .page-story .step p{font-size:17px}
  .page-story .corr .bio{font-size:17px}
  .page-story .step h4,.page-story .manifest h5{font-size:25px}
  .page-story .corr{padding:22px}
  .page-story .page-closing{padding-bottom:36px}
  .page-story .confirm h2{font-size:34px}
  #join{scroll-margin-top:calc(var(--story-media-height) + 30px)}
  .page-footer{padding-bottom:45px}
  .page-story.has-envelope-ending .page-closing{padding-top:calc(var(--story-media-height) + 36px)}
  .waitlist-back.fold{width:calc(100% - 24px)}
  .waitlist-back #join{--ef-pad:20px;padding:20px}
  .waitlist-back .ef-head .t{font-size:26px}
}
@media(max-height:600px) and (min-width:760px){
  .story-nav{padding-block:10px}
  .page-story .page-chapter{padding-block:95px}
  .page-story h1{font-size:44px}
  .page-story .page-chapter h2{font-size:38px}
}
@media(prefers-reduced-motion:reduce){
  .page-story.is-hero{height:calc(100svh - var(--story-frame))}
  .page-story.is-hero .story-opening{display:none}
  .page-story.is-hero .story-final{opacity:1;visibility:visible;--copy-shift:0px}
  .page-story .page-chapter{min-height:0}
  .page-story.has-envelope-ending .page-closing{min-height:110svh}
  .enveloform{animation:none}
}
/* The crossfade that opens the Join click (flyToWaitlist). Short: the zoom and
   turn that follow are the transition; this only hides the jump to the closing
   chapter. Scoped to the class so no other view transition inherits it. */
/* The nav sits 24px lower at the top of the page (the story's frame) than when
   scrolled, so in a plain crossfade it ghosts double. Named, it slides instead. */
.is-flying .story-nav{view-transition-name:story-nav}
.is-flying::view-transition-group(root),
.is-flying::view-transition-old(root),
.is-flying::view-transition-new(root),
.is-flying::view-transition-group(story-nav){animation-duration:220ms;animation-timing-function:cubic-bezier(.2,0,.2,1)}