:root{--black:#000;--ivory:#DBDDC7;--rose:#C8A6A5;--gold:#D67C04;--teal:#337583;--crimson:#DB013D;--bg:#000;--ink:var(--ivory);--accent:var(--gold);font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--black);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:0}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:2px solid var(--rose);outline-offset:8px}::selection{background:var(--rose);color:#000}.skip{position:fixed;left:20px;top:-80px;background:var(--ivory);color:#000;padding:16px;z-index:20}.skip:focus{top:15px}
.masthead{height:104px;padding:0 5vw;position:absolute;inset:0 0 auto;z-index:5;display:flex;align-items:center;justify-content:space-between;color:var(--ivory)}.wordmark{font-size:16px;letter-spacing:.13em;text-transform:uppercase}.wordmark i{font-family:Georgia,serif;font-size:21px;letter-spacing:0;text-transform:none;margin:0 3px}.masthead nav{display:flex;gap:32px;align-items:center;font-size:14px}.masthead nav a span{margin-left:12px}.masthead button{background:none;border:0;color:inherit;padding:10px 0;cursor:pointer;font-size:14px;opacity:.7}
.stage{display:none}.scene{background:var(--bg);color:var(--ink);min-height:100svh}.scene-inner{min-height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:100px 5vw 60px;gap:4vw}.copy{max-width:660px}.eyebrow{text-transform:uppercase;font-size:12px;letter-spacing:.2em;margin:0 0 36px;line-height:1.7}.copy h1,.copy h2,.vision h2{font-family:'Baskerville','Iowan Old Style','Palatino Linotype',Georgia,serif;font-weight:400;letter-spacing:-.055em;font-size:clamp(52px,5.8vw,100px);line-height:1.02;margin:0 0 30px}.copy em,.vision h2 em{font-weight:400;color:var(--accent)}.description{font-size:clamp(16px,1.2vw,19px);line-height:1.75;font-weight:400;margin:0;max-width:370px}.aside{font-family:'Baskerville',Georgia,serif;font-size:19px;line-height:1.5;max-width:300px;font-style:italic;opacity:.7;margin-top:34px}.enter{display:inline-flex;align-items:center;gap:40px;font-size:14px;margin-top:42px;padding:0 0 12px;border-bottom:1px solid #ffffff40}.enter span{font-size:22px}.fallback-photo{height:76svh;width:100%;object-fit:contain}
.vision{background:var(--ivory);color:#202822;padding:100px 9vw 28px;position:relative;z-index:2;--accent:var(--teal)}.vision-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:56px}.ng-mark{display:block;width:65px;height:72px;background:var(--teal);mask:url('assets/ng.png') center/contain no-repeat;-webkit-mask:url('assets/ng.png') center/contain no-repeat}.vision h2{font-size:clamp(65px,8.5vw,140px);max-width:900px}.vision-letter{margin:55px 0 90px 45%;max-width:480px;font-size:18px;line-height:1.85}.vision-letter p{margin:0 0 20px}.signature{font-size:14px!important;margin-top:38px!important}.signature em{display:block;font-family:Baskerville,Georgia,serif;font-size:36px;line-height:1.4;color:var(--teal)}.creed{border-top:1px solid #20282230;padding:45px 0;margin:0;font-family:Baskerville,Georgia,serif;font-size:clamp(30px,6.3vw,108px);letter-spacing:-.035em;display:flex;justify-content:space-between}.creed span:last-child{color:var(--crimson)}footer{border-top:1px solid #20282230;padding-top:28px;display:flex;justify-content:space-between;gap:25px;font-size:14px}footer a span{margin-left:24px}.progress{height:2px;position:fixed;bottom:0;left:0;right:0;z-index:10}.progress span{display:block;height:100%;background:var(--gold);transform-origin:left;transform:scaleX(0)}
@media(max-width:700px){.masthead{padding:0 6vw;height:75px}.wordmark{font-size:12px;letter-spacing:.08em}.wordmark i{font-size:16px}.masthead nav{gap:18px;font-size:12px}.masthead button{font-size:12px}.scene-inner{grid-template-columns:1fr;padding:110px 7vw 55px;gap:35px}.copy h1,.copy h2{font-size:clamp(44px,10.6vw,65px)}.eyebrow{font-size:11px;margin-bottom:22px}.description{font-size:16px}.aside{font-size:17px;margin-top:25px}.fallback-photo{height:auto;max-height:75svh;grid-row:1}.vision{padding:70px 7vw 25px}.vision-top{margin-bottom:40px}.vision h2{font-size:clamp(50px,12vw,80px)}.vision-letter{margin:40px 0 65px;font-size:17px}.creed{padding:30px 0;font-size:8vw}.ng-mark{width:45px;height:50px}footer{font-size:12px}.desktop-break{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* The native page scroll is the timeline. No wheel interception or scroll snapping. */
.cinema .journey{position:relative;background:var(--bg)}
.cinema .stage{display:block;height:100svh;position:sticky;top:0;z-index:1;pointer-events:none}
.cinema .photo-stack{position:absolute;right:5vw;top:50%;transform:translateY(-50%);height:min(80svh,60vw);aspect-ratio:3/4;max-width:45vw}
.cinema .stage-image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;opacity:0;will-change:opacity}
.cinema .stage-image:first-child{opacity:1}
.cinema .stage-caption{position:absolute;bottom:3.8svh;right:5vw;width:min(60svh,45vw);display:flex;justify-content:space-between;color:var(--ink);font-size:12px;letter-spacing:.15em;text-transform:uppercase;opacity:.65}
.cinema .scene{height:155svh;min-height:0;position:relative;z-index:2;background:transparent;pointer-events:none}
.cinema .scene.opening{margin-top:-100svh}
.cinema .scene-inner{position:sticky;top:0;height:100svh;min-height:0;padding:90px 5vw 60px;display:flex;align-items:center}
.cinema .copy{width:47%;pointer-events:auto;will-change:opacity,transform}
.cinema .fallback-photo{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
.cinema .copy h1,.cinema .copy h2{font-size:clamp(48px,5.5vw,98px)}
.word{display:inline-block;will-change:opacity,transform}
.motion-off .word,.motion-off .copy{will-change:auto}
.cinema .scene:last-child{height:145svh}
.cinema .opening .eyebrow{color:var(--ivory)}
@media(min-width:1600px){.cinema .scene-inner{padding-left:8vw}.cinema .photo-stack{right:8vw}.cinema .stage-caption{right:8vw}}
@media(max-width:900px) and (min-width:701px){.cinema .copy h1,.cinema .copy h2{font-size:5.9vw}.description{font-size:16px}.cinema .photo-stack{height:min(75svh,59vw)}.aside{font-size:17px}}
@media(max-width:700px){
  .cinema .scene{height:150svh}.cinema .scene:last-child{height:140svh}
  .cinema .photo-stack{top:72px;right:50%;transform:translateX(50%);height:min(45svh,108vw);width:auto;max-width:90vw}
  .cinema .stage-caption{top:calc(72px + min(45svh,108vw) + 12px);bottom:auto;left:7vw;right:7vw;width:auto;font-size:10px}
  .cinema .scene-inner{padding:0 7vw 32px;align-items:flex-start}
  .cinema .copy{width:100%;max-width:none;margin-top:calc(72px + min(45svh,108vw) + 75px)}
  .cinema .copy h1,.cinema .copy h2{font-size:clamp(37px,9vw,58px);margin-bottom:16px;line-height:1.02;letter-spacing:-.05em}
  .cinema .copy .eyebrow{display:none}
  .cinema .description{font-size:16px;line-height:1.6;max-width:none}
  .cinema .aside{font-size:16px;margin:14px 0 0;max-width:330px;line-height:1.4}
  .cinema .enter{margin-top:20px;padding-bottom:7px;font-size:13px;gap:28px}
}
@media(max-width:700px) and (max-height:720px){.cinema .photo-stack{top:65px;height:35svh}.cinema .stage-caption{top:calc(65px + 35svh + 10px)}.cinema .scene-inner{padding-bottom:25px}.cinema .copy{margin-top:calc(65px + 35svh + 52px)}.cinema .copy h1,.cinema .copy h2{font-size:9vw}.cinema .aside{margin-top:10px}.cinema .enter{margin-top:14px}}
@media(prefers-reduced-motion:reduce){.word{transform:none!important}}
.glitter{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:7}
@media(prefers-reduced-motion:reduce){.glitter{display:none}}

.invitation-topics{list-style:none;padding:0;margin:30px 0 34px;border-top:1px solid #20282230}.invitation-topics li{padding:14px 0;border-bottom:1px solid #20282230;font-family:Baskerville,Georgia,serif;font-size:25px;line-height:1.35;color:var(--teal)}

/* Give the italic captions a little more presence in both layouts. */
.aside{font-size:21px}
@media(max-width:900px) and (min-width:701px){.aside{font-size:19px}}
@media(max-width:700px){.aside,.cinema .aside{font-size:18px}}

.vision-letter .aside{opacity:1}

/* Match closing prose to the story paragraphs; topic rows retain their own scale. */
.vision-letter{font-size:clamp(16px,1.2vw,19px);line-height:1.75}
@media(max-width:900px) and (min-width:701px){.vision-letter{font-size:16px}}
@media(max-width:700px){.vision-letter{font-size:16px}.cinema .vision-letter{line-height:1.6}}

/* Use the story's heading, body and italic-caption sizes throughout the invitation. */
.vision h2{font-size:clamp(52px,5.8vw,100px)}
.cinema .vision h2{font-size:clamp(48px,5.5vw,98px)}
.invitation-topics li{font-size:inherit;line-height:inherit}
.signature em{font-size:21px}
@media(max-width:900px) and (min-width:701px){.cinema .vision h2{font-size:5.9vw}.signature em{font-size:19px}}
@media(max-width:700px){.vision h2{font-size:clamp(44px,10.6vw,65px)}.cinema .vision h2{font-size:clamp(37px,9vw,58px)}.signature em{font-size:18px}}
@media(max-width:700px) and (max-height:720px){.cinema .vision h2{font-size:9vw}}

/* Give the sign-off the same scale as the invitation heading. */
.signature em{font-size:clamp(52px,5.8vw,100px)}
.cinema .signature em{font-size:clamp(48px,5.5vw,98px)}
@media(max-width:900px) and (min-width:701px){.cinema .signature em{font-size:5.9vw}}
@media(max-width:700px){.signature em{font-size:clamp(44px,10.6vw,65px)}.cinema .signature em{font-size:clamp(37px,9vw,58px)}}
@media(max-width:700px) and (max-height:720px){.cinema .signature em{font-size:9vw}}

/* Match invitation topics to the surrounding paragraph typography. */
.invitation-topics li{font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}

.invitation-topics a{display:flex;justify-content:space-between;align-items:center;gap:18px}.invitation-topics a:hover{text-decoration:underline;text-underline-offset:5px}.invitation-topics a span{font-size:.85em}

/* Shared italic caption typography across the story and booking pages. */
:root{--caption-size:21px;--caption-family:Baskerville,Georgia,serif}
@media(max-width:900px){:root{--caption-size:19px}}
@media(max-width:700px){:root{--caption-size:18px}}
.aside,.cinema .aside,.detail-page .aside,.detail-page .event-morning em{font-family:var(--caption-family);font-size:var(--caption-size);font-style:italic;font-weight:400;line-height:1.5}

/* Half the original reading hold; preserve the final morning-to-invitation exit. */
.cinema .scene{height:127.5svh}
.cinema .scene:last-child{height:145svh}
@media(max-width:700px){.cinema .scene{height:125svh}.cinema .scene:last-child{height:140svh}}

/* Position panels on one continuous scroll timeline, without sticky release. */
.cinema .scene-inner{position:fixed;inset:0 0 auto;will-change:transform}

/* Restrict background repainting to the visible stage. */
.cinema .journey{background:transparent}
.cinema .stage{background:var(--bg)}

/* Match the artwork's contained dimensions in the motion-off layout. */
.cinema .photo-stack{height:min(76svh,57.333333vw);max-width:43vw}
@media(max-width:700px){
 .cinema{--motion-photo-height:min(75svh,114.666667vw);--motion-photo-top:72px}
 .cinema .photo-stack{top:var(--motion-photo-top);height:var(--motion-photo-height);max-width:86vw}
 .cinema .stage-caption{top:calc(var(--motion-photo-top) + var(--motion-photo-height) + 12px)}
 .cinema .copy{margin-top:calc(var(--motion-photo-top) + var(--motion-photo-height) + 55px)}
}
@media(max-width:700px) and (max-height:720px){.cinema{--motion-photo-top:65px}}

/* Keep the opening chapter label available in the static layout too. */
.motion-off-caption{display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:.15em;text-transform:uppercase;opacity:.65;margin:0 0 26px}
.cinema .motion-off-caption{display:none}
@media(max-width:700px){.motion-off-caption{font-size:10px}}

/* Keep the mobile image, chapter label and copy aligned across motion modes. */
@media(max-width:700px){
 .motion-off .scene-inner{padding:72px 7vw 32px;gap:12px;align-items:start;align-content:start}
 .motion-off .scene .eyebrow{display:none}
 .motion-off .motion-off-caption{line-height:17px;margin:0 0 26px}
 .motion-off .copy h1,.motion-off .copy h2{font-size:clamp(37px,9vw,58px);margin-bottom:16px;line-height:1.02;letter-spacing:-.05em}
 .motion-off .description{line-height:1.6;max-width:none}
 .motion-off .enter{margin-top:20px;padding-bottom:7px;font-size:13px;gap:28px}
 .motion-off .aside{margin:14px 0 0;max-width:330px}
}
@media(max-width:700px) and (max-height:720px){
 .motion-off .scene-inner{padding-top:65px}
 .motion-off .copy h1,.motion-off .copy h2{font-size:9vw}
 .motion-off .aside{margin-top:10px}
 .motion-off .enter{margin-top:14px}
}

@media(max-width:700px){.cinema .stage-caption{line-height:17px}}

/* Desktop carries the mobile relationship between artwork, caption and story. */
@media(min-width:701px){
 :root{
  --desktop-photo-height:min(76svh,56vw);
  --desktop-photo-width:min(57svh,42vw);
  --desktop-copy-width:min(500px,40vw);
  --desktop-gap:clamp(32px,4vw,64px);
  --desktop-composition:calc(var(--desktop-copy-width) + var(--desktop-gap) + var(--desktop-photo-width));
  --desktop-edge:calc((100vw - var(--desktop-composition))/2);
 }
 .cinema .photo-stack{right:var(--desktop-edge);top:50%;transform:translateY(-50%);height:var(--desktop-photo-height);width:var(--desktop-photo-width);max-width:none}
 .cinema .stage-caption{right:var(--desktop-edge);top:calc(50% + var(--desktop-photo-height)/2 + 12px);bottom:auto;width:var(--desktop-photo-width);line-height:17px}
 .cinema .scene-inner{padding:0 var(--desktop-edge);align-items:center}
 .cinema .copy{width:var(--desktop-copy-width);max-width:none}
 .scene .eyebrow{display:none}
 .motion-off .scene-inner{position:relative;grid-template-columns:var(--desktop-copy-width) var(--desktop-photo-width);gap:var(--desktop-gap);padding:0;width:var(--desktop-composition);margin:0 auto;min-height:100svh;align-items:center}
 .motion-off .copy{width:var(--desktop-copy-width);max-width:none}
 .motion-off .fallback-photo{width:var(--desktop-photo-width);height:var(--desktop-photo-height)}
 .motion-off .motion-off-caption{position:absolute;left:calc(var(--desktop-copy-width) + var(--desktop-gap));top:calc(50% + var(--desktop-photo-height)/2 + 12px);width:var(--desktop-photo-width);margin:0;line-height:17px}
 .motion-off .copy h1,.motion-off .copy h2{font-size:clamp(48px,5.5vw,98px)}
 .vision{display:grid;grid-template-columns:var(--desktop-copy-width) var(--desktop-photo-width);column-gap:var(--desktop-gap);padding:100px var(--desktop-edge) 28px}
 .vision-top,.vision footer{grid-column:1/-1}
 .vision h2{grid-column:1;max-width:none}
 .vision-letter{grid-column:2;margin:0 0 72px;max-width:none}
 .motion-off .vision h2,.motion-off .signature em{font-size:clamp(48px,5.5vw,98px)}
}
@media(min-width:701px) and (max-width:900px){
 .motion-off .copy h1,.motion-off .copy h2,.motion-off .vision h2,.motion-off .signature em{font-size:5.9vw}
}

/* One responsive italic-title scale, sized to keep the sign-off on one line. */
:root{--italic-title-size:clamp(28px,9vw,37px)}
@media(min-width:701px){
 :root{--italic-title-size:min(72px,calc(var(--desktop-copy-width)*.144),calc(var(--desktop-photo-width)*.144))}
}
.copy h1 em,.copy h2 em,.vision h2 em,.signature em,
.cinema .signature em,.motion-off .signature em{font-size:var(--italic-title-size)}
.signature em{white-space:nowrap}
/* Isolate the photo composite from the changing stage background. */
.cinema .photo-stack{isolation:isolate;contain:layout paint}

/* Keep upright and italic text at one size within each story title. */
.copy h1,.copy h2,.vision h2,
.cinema .copy h1,.cinema .copy h2,.cinema .vision h2,
.motion-off .copy h1,.motion-off .copy h2,.motion-off .vision h2{font-size:var(--italic-title-size)}

/* Keep changing background colors on their own composited layers. */
.cinema .stage{isolation:isolate}
.stage-backdrop{position:absolute;inset:0;pointer-events:none;will-change:opacity;transform:translateZ(0)}

/* Center the desktop invitation between its first and last text edges. */
@media(min-width:701px){.vision{padding-top:var(--invitation-top-space,100px)}}