@font-face{font-family:Boston;src:url('/assets/boston.woff2') format('woff2');font-display:swap}@font-face{font-family:Roboto;src:url('/assets/roboto.woff2') format('woff2');font-display:swap}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:#181713;color:#eee6d4;font-family:Roboto,Arial,sans-serif;font-size:16px;line-height:1.6}body.locked{overflow:hidden}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-underline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #ff9a40;outline-offset:5px}button:disabled{opacity:.55;cursor:wait}button:active,.button:active{transform:translateY(2px)}[hidden]{display:none!important}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-family:Boston,Impact,sans-serif;font-weight:400;line-height:1;text-transform:uppercase}h2{font-size:clamp(42px,5.5vw,82px)}p+p{margin-top:20px}h2+p,h3+p{margin-top:26px}button{color:inherit}.orange{color:#ed883e}.eyebrow,.margin-label,.hero-caption,.form-number,.paper-top,.ruled span,figcaption{font-family:monospace;font-size:11px;line-height:1.5;letter-spacing:1.8px}.eyebrow{margin-bottom:23px}.section{padding:110px max(6vw,24px)}.small{font-size:13px;line-height:1.65;color:#bfb7a8}.lead{font-size:23px;line-height:1.45}.button{border:1px solid #f1964d;display:inline-flex;align-items:center;justify-content:space-between;gap:26px;min-height:54px;padding:14px 24px;background:#ed883e;color:#181713;font-weight:700;font-size:14px;text-decoration:none;transition:background .2s,transform .2s}.button:hover{background:#ffab66}.button span{font-size:21px;font-weight:400}.header{position:absolute;z-index:5;left:0;right:0;top:0;display:flex;align-items:center;padding:25px 4.5vw;gap:35px;border-bottom:1px solid #ece0bd30;background:linear-gradient(#13120ecf,transparent)}.header img{width:135px;height:auto;display:block}.header-file{font:10px/1.5 monospace;letter-spacing:2px;color:#e6d9c2}.header-actions{margin-left:auto;display:flex;gap:24px;align-items:center}.header .button{background:transparent;color:#eee6d4;border-color:#a89878;min-height:45px;padding:8px 19px}.header .button:hover{background:#ed883e;color:#181713}.menu-toggle,.menu-close{border:0;background:transparent;font-size:26px;width:44px;height:44px}.menu{position:fixed;inset:0 0 0 auto;width:min(500px,100%);background:#ded2b8;color:#242119;z-index:30;padding:100px 40px 40px;box-shadow:0 0 0 100vmax #0009;overflow:auto}.menu>a{display:block;font:34px/1.2 Boston;margin:25px 0}.menu-close{position:absolute;right:25px;top:25px;font-size:40px}.hero{position:relative;min-height:850px;height:100svh;max-height:1150px;display:flex;align-items:center;overflow:hidden;background:#1a120b}.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 48%}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#12100ae6 0%,#13100a8a 40%,#13100a00 76%),linear-gradient(0deg,#181713 0%,transparent 25%,#0004 100%)}.hero-content{position:relative;z-index:1;padding:150px 0 110px 7vw;max-width:850px}.hero h1{font-size:clamp(72px,8.5vw,138px);letter-spacing:1px;line-height:.91;position:relative}.hero h1 .the{display:block;font-size:.33em;letter-spacing:9px;margin-bottom:12px}.hero h1 em{font-style:normal;color:#ef8d42;font-size:1.36em;line-height:1.05}.hero-sub{font-size:21px;line-height:1.5;margin:18px 0 28px;letter-spacing:.4px}.hero-sub strong{font-weight:400;color:#e69a64}.hero-note{font-size:12px;margin-top:15px;color:#c5bca9}.signal{display:inline-block;width:7px;height:7px;background:#ed883e;margin-right:8px;border-radius:50%}.evidence-tag{position:absolute;z-index:2;right:9%;top:46%;transform:rotate(8deg);background:#d9c8a5;color:#2b2519;padding:30px 26px 22px;box-shadow:8px 10px 30px #0006;clip-path:polygon(10% 0,90% 0,100% 15%,100% 100%,0 100%,0 15%)}.evidence-tag:before{content:'';position:absolute;top:9px;left:49%;width:7px;height:7px;background:#322a1f;border-radius:50%}.evidence-tag span{display:block;font:9px monospace;letter-spacing:1px}.evidence-tag b{display:block;font:24px Boston;margin:12px 0}.evidence-tag i{font:18px Boston;color:#864329;border:2px solid;padding:2px 10px}.scroll-cue{position:absolute;z-index:2;bottom:36px;left:7vw;font-size:13px;text-decoration:none;display:flex;flex-direction:column;gap:10px;padding:5px 0}.scroll-cue span{font:9px monospace;letter-spacing:2px;color:#bcb19a}.hero-caption{position:absolute;z-index:2;right:5vw;bottom:45px;font-size:9px;color:#b4a78c;writing-mode:vertical-rl}.intro{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:7vw;padding-top:130px;padding-bottom:125px;border-bottom:1px solid #8173544d}.margin-label{position:absolute;top:38px;color:#a99b7d}.intro-copy{max-width:480px;padding-top:20px;color:#c6bfaf}.intro-copy .lead{color:#eee6d4}.handwritten{font-family:Georgia,serif;font-style:italic;font-size:25px;color:#d9945b;transform:rotate(-4deg);padding-top:15px}.intake{display:grid;grid-template-columns:1fr 1.2fr;gap:8vw;background:#d6c9ae;color:#28251e;background-image:repeating-linear-gradient(0deg,transparent,transparent 5px,#6a543303 6px)}.intake-title p:last-child{margin-top:24px}.inventory{border-top:2px solid #5c5039}.inventory details{border-bottom:1px solid #72664e;padding:8px 0 18px;position:relative}.inventory summary{font:36px Boston;display:flex;align-items:center;gap:22px;padding:17px 0;cursor:pointer;list-style:none}.inventory summary span{font:12px monospace}.inventory summary b{margin-left:auto;font:24px Roboto}.inventory p{max-width:90%;font-size:16px;padding:5px 0 10px}.inventory-stamp{display:inline-block;font:17px Boston;letter-spacing:2px;border:1px solid #8b4c31;color:#8b4c31;padding:1px 10px;transform:rotate(-3deg);margin:10px 0 3px}.santa{position:relative;padding:100px 6vw 140px;display:grid;grid-template-columns:1.45fr 1fr;align-items:center;gap:0;background:#24251f}.santa figure{transform:rotate(-3deg);position:relative;border:10px solid #cbbd9d;background:#cbbd9d;box-shadow:10px 20px 40px #0005}.santa img{display:block;width:100%;height:auto}.santa figcaption{font-size:8px;color:#312d23;padding-top:8px}.santa-copy{position:relative;padding:40px 0 40px 35px;z-index:1}.santa h2{font-size:clamp(40px,5vw,75px)}.santa h2 span{color:#ea8a49}.santa-copy p:not(.eyebrow){max-width:360px}.pardon{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:1.05fr 1fr;gap:9vw;align-items:center;background:radial-gradient(ellipse at 85% 40%,#4b3b25,transparent 65%),#151613;padding-top:140px;padding-bottom:140px}.bars{position:absolute;inset:0;z-index:-1;opacity:.32;background:repeating-linear-gradient(100deg,transparent 0,transparent 100px,#000 100px,#000 117px,#65583c 120px,#000 123px);transform:scale(1.2)}.pardon-copy p:not(.eyebrow){max-width:480px}.pardon-paper{background:#dfd1ae;color:#30291e;padding:36px;transform:rotate(4deg);box-shadow:20px 35px 65px #0008;border:1px solid #b8a985;background-image:repeating-linear-gradient(0deg,#806b3b05 0,#806b3b05 1px,transparent 1px,transparent 4px);position:relative}.paper-top{font-size:8px;letter-spacing:1px;display:flex;justify-content:space-between;border-bottom:1px solid #766647;padding-bottom:16px;gap:20px}.paper-seal{font:32px Boston;border:3px double #877453;border-radius:50%;width:56px;height:56px;display:grid;place-items:center;margin:30px auto 20px}.pardon-paper>.eyebrow{text-align:center;font-size:9px;margin-bottom:12px}.pardon-paper h3{text-align:center;font-size:clamp(50px,5vw,78px)}.pardon-paper>p:not(.eyebrow){font:14px/1.8 Georgia;margin:25px 0}.ruled{border-bottom:1px solid #8a7856;padding:15px 0 8px;display:flex;flex-direction:column;gap:5px}.ruled span{font-size:8px}.ruled i{font:20px Georgia}.paper-bottom{display:flex;align-items:center;justify-content:space-between;padding:30px 0;gap:15px}.signature{font:italic 22px Georgia}.stamp{font:25px/1 Boston;color:#925033;border:3px double #925033;padding:10px;transform:rotate(-13deg);text-align:center}.pardon-paper small{font:7px monospace;letter-spacing:1px}.register{background:#ce7840;color:#211f19;display:grid;grid-template-columns:1fr 1fr;gap:10vw;position:relative}.register h2{font-size:clamp(52px,6vw,90px)}.register-heading>p:not(.eyebrow){max-width:350px;margin-top:25px}.register-mark{font:65px Boston;border:3px solid #423325;width:110px;height:110px;display:flex;align-items:center;justify-content:center;flex-direction:column;border-radius:50%;margin-top:45px;opacity:.45;transform:rotate(-13deg);line-height:1}.register-mark span{font:9px monospace;letter-spacing:1px}.waitlist{border-top:2px solid #4c3626;padding-top:20px;align-self:center}.form-number{font-size:9px;margin-bottom:30px}.waitlist>label:first-of-type{display:block;font-size:14px;font-weight:700;margin:0 0 10px}input[type=email],select{min-height:56px;width:100%;border:1px solid #5b432d;background:#e5be91;color:#221f19;border-radius:0;padding:14px;font-size:16px}input::placeholder{color:#6f5841}.check{display:flex;align-items:flex-start;gap:13px;padding:20px 0;font-size:13px;line-height:1.65;cursor:pointer}.check input{width:22px;height:22px;flex-shrink:0;margin:1px 0;accent-color:#28251d}.register .small{color:#3d3024;font-size:12px}.waitlist .button{width:100%;margin-top:24px;background:#22251f;color:#f0ddbe;border-color:#22251f}.waitlist .button:hover{background:#3a3f32}.field-error,#form-status{font-size:14px;font-weight:700;line-height:1.5;margin-top:12px}.intake-note{margin-top:15px}.booking-callout{background:#dfc6a0;border:1px solid #4f3922;padding:35px;box-shadow:8px 8px 0 #70472330;align-self:center}.booking-callout h3{font-size:48px}.booking-callout .button{background:#22251f;color:#f1dfc2;margin:25px 0 18px}.questions{display:grid;grid-template-columns:.85fr 1.15fr;gap:7vw;background:#e2d9c4;color:#25261f}.faq{border-top:1px solid #a3977d}.faq details{border-bottom:1px solid #a3977d;padding:8px 0}.faq summary{min-height:60px;display:flex;align-items:center;gap:20px;justify-content:space-between;list-style:none;font-weight:600;font-size:15px;cursor:pointer}.faq summary span{font-size:25px;font-weight:300}.faq p{font-size:15px;padding:10px 15px 22px 0}.faq details[open] summary span{transform:rotate(45deg)}summary::-webkit-details-marker{display:none}footer{padding:60px 6vw 40px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;align-items:start}footer>p{font:32px/1.1 Boston;color:#d7c7a9}footer small{grid-column:1/-1;border-top:1px solid #645b453f;padding-top:30px;font-size:10px;color:#9d9584}.footer-links{display:flex;flex-direction:column;gap:4px;font-size:12px}.footer-links>a,.footer-links>button{padding:10px 0;min-height:44px}.footer-links button{background:none;border:0;text-align:left;text-decoration:underline;font-size:12px}.skip{position:fixed;top:10px;left:10px;z-index:100;background:#ed883e;color:#181713;padding:14px;transform:translateY(-200%)}.skip:focus{transform:none}.cookie-banner{position:fixed;bottom:22px;left:22px;right:22px;z-index:40;display:flex;align-items:center;gap:35px;padding:22px 28px;background:#e0d7c4;color:#25261f;border:1px solid #928365;box-shadow:0 10px 40px #0006}.cookie-banner b{font:22px Boston}.cookie-banner p{font-size:12px;max-width:560px;margin-top:5px}.cookie-actions{display:flex;margin-left:auto;gap:9px;flex-shrink:0}.cookie-actions button{background:transparent;border:1px solid #706448;min-height:44px;padding:10px 15px;font-size:12px}.cookie-actions button:hover{background:#c7b995}dialog{border:1px solid #958369;background:#ddd1b8;color:#26241e;padding:48px;max-width:600px;width:calc(100% - 32px);max-height:calc(100svh - 32px);overflow:auto}dialog::backdrop{background:#0c0c0bd9;backdrop-filter:blur(5px)}dialog h2{font-size:50px;margin-bottom:24px}dialog p{font-size:14px}dialog .close{position:absolute;right:10px;top:10px;width:44px;height:44px;border:0;background:transparent;font-size:32px}dialog .eyebrow{padding-right:24px}.text-button{display:block;background:transparent;border:0;text-decoration:underline;text-underline-offset:5px;padding:14px 0;min-height:44px;font-size:13px}dialog label:not(.check){display:block;font-size:13px;font-weight:700;margin-bottom:8px}dialog select{background:#eee5d3}#booking-status{margin:22px 0}#venue-links .button{width:100%}.mobile-cta{display:none}.legal{padding-top:180px;max-width:960px;min-height:75vh}.legal h1{font-size:clamp(48px,7vw,95px);margin-bottom:40px}.legal h2{font-size:30px;margin:40px 0 18px}.legal p{color:#cec5b2}.legal>.button{margin-top:30px}.noscript{background:#e1d4b9;color:#24221c;padding:20px;text-align:center} @media(min-width:1600px){.hero-content{padding-left:10vw}.section{padding-left:10vw;padding-right:10vw}} @media(max-width:1000px){.header-file{display:none}.evidence-tag{right:6%;top:55%;transform:rotate(8deg) scale(.85)}.hero h1{font-size:95px}.cookie-banner{gap:16px;flex-direction:column;align-items:stretch}.cookie-actions{margin:0}.cookie-actions button{flex:1}.santa{padding-left:4vw;padding-right:4vw}.pardon{gap:5vw}.pardon-paper{padding:24px}.paper-bottom{flex-wrap:wrap}.questions{gap:5vw}.register{gap:6vw}} @media(max-width:700px){html{scroll-padding-top:25px}.header{padding:18px 22px}.header img{width:110px}.header-actions>.button{display:none}.header-actions{gap:0}.hero{min-height:760px;height:100svh;max-height:none;align-items:flex-end}.hero-image{object-position:40% center}.hero:after{background:linear-gradient(0deg,#181713 0%,#17130ec7 45%,#120d0740 100%)}.hero-content{padding:130px 25px 135px;width:100%}.hero .eyebrow{font-size:9px;letter-spacing:1.5px;margin-bottom:25px}.hero h1{font-size:clamp(63px,13vw,91px)}.hero h1 .the{letter-spacing:6px}.hero-sub{font-size:19px;margin-top:22px}.hero-content .button{width:100%;max-width:370px}.hero-note{font-size:11px}.evidence-tag{display:none}.scroll-cue{left:25px;bottom:30px}.hero-caption{right:18px;bottom:30px;font-size:7px}.section{padding:75px 25px}.intro{grid-template-columns:1fr;gap:25px;padding-top:95px}.intro h2{font-size:58px}.margin-label{top:28px;font-size:9px}.intro-copy{padding:0;max-width:none}.lead{font-size:21px}.handwritten{font-size:22px}.intake{grid-template-columns:1fr;gap:35px}.intake h2{font-size:54px}.inventory summary{font-size:30px}.santa{display:flex;flex-direction:column;padding:70px 25px 60px}.santa figure{width:100%;transform:rotate(-3deg);border-width:7px}.santa-copy{padding:55px 0 0}.santa h2{font-size:55px}.santa-copy p:not(.eyebrow){max-width:none}.pardon{grid-template-columns:1fr;gap:60px;padding-bottom:95px}.pardon h2{font-size:55px}.pardon-paper{width:calc(100% - 14px);margin:auto;padding:25px;transform:rotate(3deg)}.pardon-paper h3{font-size:64px}.pardon-paper>.eyebrow{font-size:8px}.paper-bottom{flex-wrap:nowrap}.stamp{font-size:21px}.signature{font-size:19px}.register{grid-template-columns:1fr;gap:40px}.register h2{font-size:64px}.register-mark{display:none}.register-heading>p:not(.eyebrow){max-width:none}.waitlist .check{font-size:13px}.booking-callout{padding:25px}.questions{grid-template-columns:1fr;gap:35px}.questions h2{font-size:54px}.faq summary{font-size:14px}.faq p{font-size:14px}footer{grid-template-columns:1fr 1fr;padding:50px 25px 120px;gap:35px 20px}footer img{width:130px;height:auto}footer>p{font-size:25px}.footer-links{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:3px 20px}.mobile-cta{display:block;position:fixed;bottom:0;left:0;right:0;padding:10px 16px max(10px,env(safe-area-inset-bottom));background:#191a16f2;border-top:1px solid #8b7758;z-index:10}.mobile-cta .button{width:100%;min-height:49px;padding:9px 18px}.cookie-banner{left:10px;right:10px;bottom:84px;padding:17px;gap:15px}.cookie-banner b{font-size:20px}.cookie-banner p{font-size:11px}.cookie-actions{gap:6px;flex-wrap:wrap}.cookie-actions button{font-size:11px;padding:8px;min-height:44px;flex:1 1 30%}dialog{padding:50px 24px 25px}dialog h2{font-size:44px}.legal{padding-top:150px}.menu>a{font-size:30px}.paper-top{font-size:7px}.hero-note{max-width:270px}} @media(max-width:360px){.hero h1{font-size:61px}.hero-content{padding-left:20px;padding-right:20px}.hero{min-height:730px}.section{padding-left:20px;padding-right:20px}.intro h2,.intake h2,.santa h2,.pardon h2{font-size:48px}.register h2{font-size:57px}.paper-top{letter-spacing:0}.pardon-paper{padding:20px}.pardon-paper h3{font-size:55px}.cookie-actions button{font-size:10px;padding:7px 5px}.button{gap:12px;padding-left:18px;padding-right:18px}.paper-bottom{gap:8px}.signature{font-size:16px}} @media(max-height:550px) and (orientation:landscape){.hero{min-height:740px}.cookie-banner{bottom:10px;left:10px;right:10px;flex-direction:row;align-items:center;padding:12px}.cookie-actions{max-width:45%}.cookie-banner p{max-width:350px}.mobile-cta{display:none}dialog{max-height:calc(100svh - 20px);padding-top:45px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}} /* Text enlargement must grow the composition instead of clipping it. */ .hero{height:auto;min-height:max(850px,100svh);max-height:none} .section>*,.santa>*,footer>*{min-width:0} h1,h2,h3,p,label,summary,button,a{overflow-wrap:anywhere} .intro,.intake,.pardon,.register,.questions{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .santa{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)} footer{grid-template-columns:repeat(3,minmax(0,1fr))} .cookie-actions button{min-width:0} .skip:not(:focus){clip-path:inset(50%);width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap;transform:none} @media(max-width:700px){.hero{min-height:max(760px,100svh)}.intro,.intake,.pardon,.register,.questions{grid-template-columns:minmax(0,1fr)}footer{grid-template-columns:repeat(2,minmax(0,1fr))}.pardon h2{font-size:50px}.pardon-paper{transform:rotate(2deg);width:calc(100% - 18px)}} @media(max-width:360px){.hero{min-height:max(730px,100svh)}.pardon h2{font-size:44px}} @media(max-width:700px){.pardon-paper{transform:none}} .header>a{display:flex;align-items:center;min-height:44px} .menu>a{min-height:44px;padding:5px 0} .margin-label{left:max(6vw,24px)} @media(min-width:1600px){.margin-label{left:10vw}} @media(max-width:700px){.margin-label{left:25px}} @media(max-width:360px){.margin-label{left:20px}} /* ============================================================ MOTION — "the file opens" Records-office language: stencil wipes, stamps, drawer slides. Every rule below is disabled by the reduced-motion block above. ============================================================ */ :root{ --ease-out-expo:cubic-bezier(.16,1,.3,1); --ease-stamp:cubic-bezier(.22,1.22,.36,1); --reveal-dur:900ms; } /* Reveal primitives. Default state is the *visible* state so the page is correct with JS off; [data-reveal] only applies once JS marks it. */ .js [data-reveal]{will-change:transform,opacity} .js [data-reveal="stencil"]:not(.in){opacity:0;clip-path:inset(0 100% -15% 0);transform:translate3d(0,.14em,0)} .js [data-reveal="stencil"].in{opacity:1;clip-path:inset(0 -15% -15% 0);transform:none; transition:clip-path var(--reveal-dur) var(--ease-out-expo),opacity 420ms linear,transform var(--reveal-dur) var(--ease-out-expo)} .js [data-reveal="rise"]:not(.in){opacity:0;transform:translate3d(0,26px,0)} .js [data-reveal="rise"].in{opacity:1;transform:none; transition:opacity 700ms linear,transform 950ms var(--ease-out-expo)} .js [data-reveal="file"]:not(.in){opacity:0;transform:translate3d(0,54px,0) scale(.985)} .js [data-reveal="file"].in{opacity:1;transform:none; transition:opacity 620ms linear,transform 1100ms var(--ease-out-expo)} /* The authored moment: a stamp hitting paper. Overshoot + settle. */ .js [data-reveal="stamp"]:not(.in){opacity:0;transform:scale(1.85) rotate(var(--stamp-from,-24deg));filter:blur(3px)} .js [data-reveal="stamp"].in{opacity:1;filter:blur(0); transform:scale(1) rotate(var(--stamp-to,-13deg)); transition:transform 520ms var(--ease-stamp),opacity 180ms linear,filter 320ms ease-out} .js [data-reveal].in{will-change:auto} /* Stagger by position. No inline styles: this page ships a strict CSP. */ .js [data-reveal-group]>[data-reveal]:nth-child(2){transition-delay:90ms} .js [data-reveal-group]>[data-reveal]:nth-child(3){transition-delay:180ms} .js [data-reveal-group]>[data-reveal]:nth-child(4){transition-delay:270ms} .js [data-reveal-group]>[data-reveal]:nth-child(5){transition-delay:360ms} /* Stamp angles differ per stamp so they do not read as one repeated effect. */ [data-stamp="a"]{--stamp-from:14deg;--stamp-to:-3deg} [data-stamp="b"]{--stamp-from:-20deg;--stamp-to:-3deg} [data-stamp="c"]{--stamp-from:18deg;--stamp-to:-3deg} [data-stamp="seal"]{--stamp-from:-40deg;--stamp-to:-13deg} /* Hero entrance — runs on load, not on scroll. */ @keyframes heroSettle{from{transform:translateZ(-520px) scale(1.60)}to{transform:translateZ(-520px) scale(1.44)}} .hero picture{position:absolute;inset:0;display:block} .js .hero picture{animation:heroSettle 2600ms var(--ease-out-expo) both} @keyframes cutIn{from{opacity:0;clip-path:inset(0 100% -20% 0);transform:translate3d(0,.1em,0)} to{opacity:1;clip-path:inset(0 -20% -20% 0);transform:none}} @keyframes liftIn{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}} @keyframes tagToss{from{opacity:0;transform:translateZ(150px) rotate(22deg) translate3d(40px,-70px,0) scale(1.12)} to{opacity:1;transform:translateZ(150px) rotate(8deg) translate3d(0,0,0) scale(1)}} .js .hero .eyebrow{animation:liftIn 700ms var(--ease-out-expo) 160ms both} .js .hero h1 .the{animation:cutIn 900ms var(--ease-out-expo) 260ms both} .js .hero h1{animation:cutIn 1150ms var(--ease-out-expo) 380ms both} .js .hero-sub{animation:liftIn 800ms var(--ease-out-expo) 620ms both} .js .hero-content .button{animation:liftIn 800ms var(--ease-out-expo) 760ms both} .js .hero-note{animation:liftIn 800ms var(--ease-out-expo) 860ms both} .js .evidence-tag{animation:tagToss 1000ms var(--ease-stamp) 980ms both} .js .hero-caption{animation:liftIn 700ms var(--ease-out-expo) 1150ms both} /* The signal light actually pulses — it is a live indicator, not a dot. */ @keyframes signalPulse{0%,100%{box-shadow:0 0 0 0 #ed883e00;opacity:1} 50%{box-shadow:0 0 0 5px #ed883e00,0 0 10px 2px #ed883e66;opacity:.72}} .signal{animation:signalPulse 2.4s ease-in-out infinite} /* Scroll cue nudges until the visitor takes the hint, then retires. */ @keyframes cueNudge{0%,70%,100%{transform:translateY(0)}82%{transform:translateY(5px)}} .js .scroll-cue{animation:liftIn 700ms var(--ease-out-expo) 1150ms both,cueNudge 3.4s ease-in-out 2.2s infinite} .scroll-cue{transition:opacity 500ms ease-out,transform 500ms var(--ease-out-expo)} .scroll-cue.gone{opacity:0;transform:translateY(14px);pointer-events:none} /* Parallax layers — transform only, driven by rAF. */ .bars{will-change:transform} /* FAQ / inventory accordions open instead of snapping. */ .faq summary span,.inventory summary b{transition:transform 380ms var(--ease-out-expo),color 220ms linear;display:inline-block} .faq details[open] summary span{transform:rotate(45deg)} .inventory details[open] summary b{transform:rotate(45deg)} .faq summary:hover span,.inventory summary:hover b{color:#b4622c} .faq details>p,.inventory details>p{animation:drawerOpen 520ms var(--ease-out-expo) both} @keyframes drawerOpen{from{opacity:0;transform:translate3d(0,-10px,0)}to{opacity:1;transform:none}} .faq details{transition:background 300ms linear} .faq details[open]{background:#00000008} /* Hover intent on the things that should feel physical. */ .santa figure{transition:transform 700ms var(--ease-out-expo),box-shadow 700ms var(--ease-out-expo)} .santa figure:hover{transform:rotate(-1.4deg) translateY(-8px);box-shadow:14px 30px 60px #00000073} .button{transition:background 220ms linear,transform 220ms var(--ease-out-expo),box-shadow 320ms var(--ease-out-expo)} .button:hover{box-shadow:0 8px 24px #ed883e3d} .register-mark{transition:transform 1200ms var(--ease-out-expo)} .js .register-mark.in{transform:rotate(-13deg) scale(1)} .js .register-mark:not(.in){transform:rotate(-70deg) scale(.82)} /* ---- Browser surfaces: these ship as defaults and belong to no design. ---- */ ::selection{background:#ed883e;color:#181713} ::-moz-selection{background:#ed883e;color:#181713} input,textarea{caret-color:#8b4c31} html{scrollbar-color:#6b5c3e #181713;scrollbar-width:thin} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:#14130f} ::-webkit-scrollbar-thumb{background:#584a32;border:3px solid #14130f;border-radius:0} ::-webkit-scrollbar-thumb:hover{background:#7b6742} /* Light sections get their own scrollbar-adjacent surfaces. */ .intake ::selection,.questions ::selection,.register ::selection{background:#2b2519;color:#e6dcc4} /* Weather sits in front of the page but behind every control surface. */ .weather-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:3} @media(prefers-reduced-motion:reduce){.weather-canvas{display:none}} /* ---- Mobile corrections ---- At 375px the old clamp floor (63px) made "CHRISTMAS" 327px wide inside a 325px line box, so the final S wrapped. Size the display face from the viewport instead of a fixed floor so the longest word always fits. */ @media(max-width:700px){ .hero h1{font-size:clamp(42px,15.4vw,91px)} /* The sticky bar duplicates the hero CTA while the hero is still on screen. */ .mobile-cta{transform:translateY(105%);transition:transform 420ms var(--ease-out-expo);pointer-events:none} .mobile-cta.visible{transform:none;pointer-events:auto} /* The vertical file caption collides with the CTA on a narrow screen. */ .hero-caption{display:none} } @media(max-width:360px){ .hero h1{font-size:clamp(38px,15.4vw,91px)} } /* Horizontal overflow is fixed at its source (rotated elements now settle flat on narrow screens). An overflow value here propagates to the viewport and takes vertical scrolling with it, so there must not be one. */ /* ---- Typographic tracking is size-specific ---- Display type reads too loose as it grows: the old +1px at 138px pushed the stencil apart. Tighten the large sizes, leave body at 0, and keep the small "THE" label positively tracked, which is correct at 0.33em. */ .hero h1{letter-spacing:-.015em} h2{letter-spacing:-.015em} .intro h2,.pardon h2,.register h2,.questions h2,.santa h2{letter-spacing:-.018em} .pardon-paper h3,.booking-callout h3{letter-spacing:-.012em} /* ---- Display-preference support ---- Reduced motion is already handled above. These two are separate signals and were unhandled: a viewer can want solid surfaces or stronger contrast without wanting motion removed. */ @media(prefers-reduced-transparency:reduce){ .weather-canvas{display:none} header,.header{backdrop-filter:none} dialog::backdrop{backdrop-filter:none} } @media(prefers-contrast:more){ .small,.fine,.hero-note,figcaption,.eyebrow{color:inherit} .button,.btn{outline:1px solid currentColor;outline-offset:-1px} .faq details,.inventory details{border-bottom-width:2px} input[type=email],select,input[type=text]{border-width:2px} } /* ---- Icons are drawn, not typed ---- Unicode arrows and hamburgers inherit whatever the text font happens to provide: inconsistent weight, baseline and metrics across platforms. One authored set at a single stroke weight instead. */ .ico{width:1em;height:1em;display:block;flex:none;stroke-width:1.6} .button .ico{width:1.35em;height:1.35em;transition:transform 320ms var(--ease-out-expo)} .button:hover .ico{transform:translate(2px,-2px)} .menu-toggle .ico,.menu-close .ico,dialog .close .ico{width:24px;height:24px;margin:auto;stroke-width:1.5} .scroll-cue .ico{width:18px;height:18px} .footer-links .ico,.menu .ico{width:.85em;height:.85em;display:inline-block;vertical-align:-.08em;margin-left:.35em} .text-button .ico{display:inline-block;vertical-align:-.08em;margin-left:.3em} /* ============================================================ DEPTH — the hero is a stage, not a picture Layers sit at real Z depths inside a perspective container, so the pointer camera produces genuine perspective shift rather than a flat offset. translateZ is compensated with scale so each layer still fills its box: scale = 1 - z/perspective. ============================================================ */ .hero{perspective:1200px;perspective-origin:50% 50%} .js .hero>*{transform-style:preserve-3d} /* Back plate: furthest away, moves least, scaled up to cover. */ .js .hero picture{transform:translateZ(-520px) scale(1.44);will-change:transform} /* The gradient scrim sits between the photograph and the type, so the headline reads as standing in front of the scene rather than on it. */ .js .hero:after{transform:translateZ(-240px) scale(1.2)} /* Type is the near plane. */ .js .hero-content{transform:translateZ(60px);will-change:transform} /* The evidence tag hangs nearest the viewer and catches the most movement. */ .js .evidence-tag{transform:translateZ(150px) rotate(8deg);will-change:transform} .js .scroll-cue,.js .hero-caption{transform:translateZ(40px)} /* The stage must not clip its own depth. */ .hero{transform-style:preserve-3d} @media(prefers-reduced-motion:reduce){ .hero{perspective:none} .js .hero picture,.js .hero:after,.js .hero-content,.js .evidence-tag, .js .scroll-cue,.js .hero-caption{transform:none!important} .js .evidence-tag{transform:rotate(8deg)!important} } /* ---- Contraband ticker ---- */ .ticker{overflow:hidden;background:#ce7840;color:#1d1a12;border-block:1px solid #7d4a22; padding:11px 0;position:relative;z-index:4} .ticker-rail{display:flex;width:max-content;animation:tickerRun 46s linear infinite} .ticker-run{display:flex;align-items:center;gap:26px;padding-right:26px;flex:none} .ticker b{font:13px/1 Boston,Impact,sans-serif;letter-spacing:2.4px;font-weight:400;white-space:nowrap} .ticker i{width:5px;height:5px;flex:none;background:currentColor;opacity:.5; transform:rotate(45deg)} /* a drawn lozenge, not a typed glyph */ @keyframes tickerRun{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} .ticker:hover .ticker-rail{animation-play-state:paused} @media(prefers-reduced-motion:reduce){.ticker-rail{animation:none}.ticker{padding:9px 0}} /* ---- Side rails ---- */ .rail{position:fixed;top:50%;font:9px/1 monospace;letter-spacing:2.6px;color:#8a7c60; writing-mode:vertical-rl;z-index:4;pointer-events:none;opacity:.75} .rail-l{left:14px;transform:translateY(-50%) rotate(180deg)} .rail-r{right:14px;transform:translateY(-50%)} @media(max-width:1100px){.rail{display:none}} /* .dossier-head/.dossier-foot are
/