/* The Door — type system
   Display: Cormorant Garamond 300/400 + italic, tight leading, optical margins. UI: Manrope 500 small caps at .28em. Text colour is bone, never pure white.
   Scale: xl 76/0.98 · l 52/1.02 · m 34/1.1 · lead 21/1.45 (serif) · body 14/1.65 · caps 10.5/1.4 · fine 12/1.6
   Measure: headline ≤ 18ch, lead ≤ 40ch, body ≤ 48ch. Grid: 12 columns, gutter --g; text blocks sit on columns 1–6 or 7–12, never centred over a face of the photograph. */
:root{--bg:#070708;--bone:#f2ede4;--bone2:rgba(242,237,228,.82);--mute:rgba(242,237,228,.6);--hair:rgba(242,237,228,.18);--g:clamp(22px,4.4vw,80px);--sans:"Manrope",-apple-system,"Helvetica Neue",Arial,sans-serif;--disp:"Cormorant Garamond",Georgia,serif;
 --xl:clamp(40px,5.6vw,76px);--l:clamp(32px,4vw,52px);--m:clamp(24px,2.6vw,34px);--lead:clamp(17px,1.5vw,21px);--col:calc((100vw - 2*var(--g) - 11*16px)/12)}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;background:var(--bg);color:var(--bone);font:400 14px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.cursor,body.cursor a,body.cursor button{cursor:none}
.cap{font:500 10.5px/1.4 var(--sans);letter-spacing:.28em;text-transform:uppercase}
.line{font:300 var(--xl)/.98 var(--disp);letter-spacing:-.005em;color:var(--bone);margin:0;max-width:18ch;text-shadow:0 1px 2px rgba(0,0,0,.25),0 8px 40px rgba(0,0,0,.35)}.line i{font-style:italic;font-weight:300}.line.l{font-size:var(--l);line-height:1.02;max-width:20ch}
.lead{font:300 var(--lead)/1.45 var(--disp);color:var(--bone2);max-width:40ch;margin:0;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.sm{font:400 13px/1.65 var(--sans);color:var(--mute);max-width:46ch;margin:0}
#stage{position:fixed;inset:0;z-index:0;background:#000}#stage canvas{position:absolute;inset:0;width:100%;height:100%}#fx{pointer-events:none}
#scrim{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(5,5,8,.72) 0%,rgba(5,5,8,.3) 26%,rgba(5,5,8,0) 52%),linear-gradient(rgba(5,5,8,.8),rgba(5,5,8,.64) 5%,rgba(5,5,8,.22) 12%,rgba(5,5,8,0) 22%)}
#black{position:fixed;inset:0;z-index:4;background:#040405;pointer-events:none;opacity:1;transition:opacity 2.4s ease}#black.off{opacity:0}
#film{position:relative;z-index:2;pointer-events:none}
/* bar */
.bar{position:fixed;left:0;right:0;top:0;z-index:50;display:flex;align-items:center;gap:26px;padding:max(16px,env(safe-area-inset-top)) var(--g) 12px;pointer-events:none;opacity:0;transition:opacity 1.2s 1.6s;text-shadow:0 1px 2px rgba(0,0,0,.45),0 2px 14px rgba(0,0,0,.35)}.bar.on{opacity:1}.bar>*{pointer-events:auto}
.bar .brand{text-decoration:none;color:var(--bone);font:500 10.5px var(--sans);letter-spacing:.3em;text-transform:uppercase;white-space:nowrap}.bar .sp{flex:1}
.bar button,.bar a.nav{background:none;border:0;color:var(--bone);font:500 10px var(--sans);letter-spacing:.26em;text-transform:uppercase;padding:8px 0;text-decoration:none;cursor:pointer;border-bottom:1px solid transparent;white-space:nowrap;opacity:.85}.bar button:hover,.bar a.nav:hover{border-bottom-color:var(--bone);opacity:1}
.bar .n{display:inline-block;margin-left:7px;min-width:17px;text-align:center;border:1px solid var(--bone);border-radius:999px;padding:0 5px;font-size:9px;letter-spacing:0}
/* overlays */
#ui{position:fixed;inset:0;z-index:10;pointer-events:none}
.ov{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s,visibility 0s .8s}.ov.on{opacity:1;visibility:visible;transition:opacity .8s,visibility 0s}
.copy{position:absolute;left:var(--g);bottom:clamp(48px,10vh,120px);width:min(calc(6*var(--col) + 5*16px),640px);pointer-events:auto}.copy .cap{color:var(--bone);margin-bottom:16px;text-shadow:0 1px 2px rgba(0,0,0,.5),0 1px 12px rgba(0,0,0,.4)}.copy .sm{color:var(--bone2)}
.copy::before{content:'';position:absolute;left:-16%;right:-34%;top:-45%;bottom:-44%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 30% 58%,rgba(5,5,8,.56),rgba(5,5,8,.3) 45%,rgba(5,5,8,0) 74%)}
.ov.bright .copy::before{left:-20%;right:-40%;top:-60%;bottom:-50%;background:radial-gradient(ellipse at 30% 55%,rgba(5,5,8,.78),rgba(5,5,8,.5) 45%,rgba(5,5,8,0) 75%)}
.tr .act{background:rgba(5,5,8,.66);border:1px solid rgba(242,237,228,.22);border-radius:999px;padding:9px 14px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.tr .act:hover{border-color:rgba(242,237,228,.55)}.copy .lead{margin-top:16px}.copy .sm{margin-top:14px}
.copy.wide{width:min(calc(7*var(--col) + 6*16px),760px)}
.copy.right{left:auto;right:var(--g);text-align:right}.copy.right .line,.copy.right .lead,.copy.right .sm{margin-left:auto}
.fx{opacity:0;transform:translateY(12px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}.fx.on{opacity:1;transform:none}
.tr{position:absolute;right:var(--g);top:clamp(84px,15vh,150px);text-align:right;pointer-events:auto}.tr::before{content:'';position:absolute;left:-60%;right:-60%;top:-45%;bottom:-85%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(5,5,8,.8),rgba(5,5,8,.5) 45%,rgba(5,5,8,0))}
.steps{text-align:right}.steps .num{font:300 clamp(60px,9vw,128px)/1 var(--sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--bone);text-shadow:0 2px 6px rgba(0,0,0,.35),0 2px 34px rgba(0,0,0,.6)}.steps .cap{color:var(--bone);margin-top:4px;text-shadow:0 1px 2px rgba(0,0,0,.5),0 1px 10px rgba(0,0,0,.5)}
.act{background:none;border:0;color:var(--bone);font:500 10.5px var(--sans);letter-spacing:.26em;text-transform:uppercase;cursor:pointer;padding:10px 0;border-bottom:1px solid rgba(242,237,228,.7);pointer-events:auto;text-decoration:none;transition:border-color .3s}.act:hover{border-bottom-color:#fff}.act.q{color:var(--mute);border-bottom-color:var(--hair)}.act.in{color:var(--mute);border-bottom-color:transparent}.act:disabled{opacity:.5;cursor:default}
.acts{display:flex;gap:26px;flex-wrap:wrap;align-items:center;margin-top:22px}
/* curtain */
#curtain{position:absolute;inset:0;z-index:12;pointer-events:auto;touch-action:none;cursor:ew-resize;opacity:0;transition:opacity 2.2s ease .4s}#curtain.in{opacity:1}
#curtain .panel{position:absolute;top:-4%;bottom:-4%;width:52%;overflow:hidden;will-change:transform}#curtain .panel.l{left:-1%;transform-origin:left center}#curtain .panel.r{right:-1%;transform-origin:right center}
#curtain .cloth{position:absolute;inset:0;backdrop-filter:blur(22px) brightness(1.45) saturate(.85);-webkit-backdrop-filter:blur(22px) brightness(1.45) saturate(.85);background:linear-gradient(rgba(255,252,247,.62),rgba(255,252,247,.48) 40%,rgba(255,250,243,.56))}
#curtain .folds{position:absolute;inset:0;transform-origin:inherit;background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 18px,rgba(255,255,255,.16) 34px 46px,rgba(0,0,0,.035) 58px 66px,rgba(255,255,255,0) 78px 92px),repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 40px,rgba(255,255,255,.1) 70px 86px,rgba(255,255,255,0) 110px 131px),linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,0) 45%,rgba(0,0,0,.05));animation:sway 9s ease-in-out infinite alternate}#curtain .panel.r .folds{animation-delay:-4.5s}@keyframes sway{from{transform:translateX(0)}to{transform:translateX(7px)}}
#curtain .edge{position:absolute;top:0;bottom:0;width:22px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6))}#curtain .panel.l .edge{right:0}#curtain .panel.r .edge{left:0;transform:scaleX(-1)}
#seam{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:linear-gradient(rgba(255,255,255,0),#fff 30%,#fff 70%,rgba(255,255,255,0));box-shadow:0 0 40px 12px rgba(255,248,230,.55);z-index:11;opacity:0;transition:opacity 2s ease 1.2s;pointer-events:none}#seam.in{opacity:1}#seam.gone{opacity:0;transition:opacity .4s}
#curtain .hint{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);text-align:center;color:#1a1612;pointer-events:none;opacity:0;transition:opacity 1.4s ease 2.6s}#curtain.in .hint{opacity:1}#curtain .hint .cap{color:#1a1612;opacity:.75}#curtain .hint .arrows{display:flex;gap:64px;justify-content:center;margin-top:14px;font:300 20px var(--sans);color:#1a1612;animation:part 2.2s ease-in-out infinite}@keyframes part{0%,100%{letter-spacing:0}50%{letter-spacing:.35em}}
#curtain.done{pointer-events:none;visibility:hidden}
#pre{position:absolute;left:var(--g);top:clamp(100px,18vh,180px);z-index:13;pointer-events:none;opacity:0;transition:opacity 1.6s ease 1.8s}#pre.in{opacity:1}#pre.in.fade{transition:opacity .4s}#pre .cap{color:rgba(26,22,18,.7);margin-bottom:12px}#pre .line{color:#1a1612;text-shadow:none;max-width:16ch}
#who{position:absolute;left:var(--g);bottom:clamp(48px,10vh,120px);pointer-events:auto;z-index:13;opacity:0;transition:opacity 1.4s ease 3.2s}#who.in{opacity:1}#who .cap{color:rgba(26,22,18,.7)}#who .choice{display:flex;gap:clamp(22px,3.4vw,52px);margin-top:16px}#who button{background:none;border:0;padding:0;color:#1a1612;text-align:left;cursor:pointer}#who .w{display:block;font:300 var(--l)/1 var(--disp);position:relative;padding-bottom:10px}#who .w::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:rgba(26,22,18,.32);transition:background .6s}#who button:hover .w::after,#who button[aria-pressed="true"] .w::after{background:#1a1612}#who .cap.s{margin-top:8px}
/* chips: the one label style for every touchable thing in the film */
.chip{display:inline-block;color:var(--bone);background:rgba(5,5,8,.66);border:1px solid rgba(242,237,228,.3);border-radius:999px;padding:8px 14px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap;text-shadow:none;transition:background .3s,border-color .3s,transform .5s cubic-bezier(.22,1,.36,1)}
button:hover .chip,#sun:hover .chip,#bell:hover+.chip{background:rgba(5,5,8,.8);border-color:rgba(242,237,228,.6)}
#walkCue{position:fixed;left:50%;bottom:max(34px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:12;color:var(--bone);text-align:center;opacity:0;transition:opacity .9s;pointer-events:none;padding:8px 16px;background:rgba(5,5,8,.66);border:1px solid rgba(242,237,228,.22);border-radius:999px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}#walkCue.show{opacity:1}#walkCue i{display:block;width:1px;height:22px;margin:8px auto -4px;background:linear-gradient(rgba(242,237,228,.9),rgba(242,237,228,0));animation:cueDrop 1.6s ease-in-out infinite}@keyframes cueDrop{0%{transform:translateY(-4px);opacity:0}30%{opacity:1}100%{transform:translateY(8px);opacity:0}}#walkCue.pulse{animation:cuePulse 2.4s ease-in-out infinite}@keyframes cuePulse{50%{background:rgba(5,5,8,.6);border-color:rgba(242,237,228,.5)}}
/* sun */
#sun{position:absolute;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;background:radial-gradient(circle,#fff8e6 0 28%,rgba(255,236,200,.9) 40%,rgba(255,210,150,.35) 60%,rgba(255,200,140,0) 72%);box-shadow:0 0 60px 20px rgba(255,220,170,.35),0 0 140px 60px rgba(255,200,140,.18);cursor:ns-resize;touch-action:none;pointer-events:auto;opacity:0;transition:opacity 1.4s}#sun.on{opacity:1}#sun .chip{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:22px;transition:opacity .5s;animation:sunBob 2.6s ease-in-out infinite}#sun.held .chip{opacity:0}@keyframes sunBob{50%{transform:translateX(-50%) translateY(5px)}}
/* bell */
#bell{width:92px;height:114px;background:none;border:0;cursor:pointer;transform-origin:50% 6%;filter:drop-shadow(0 10px 30px rgba(255,220,160,.35));pointer-events:auto;position:relative}#bell::after{content:'';position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:1px solid rgba(255,230,180,.5);animation:halo 2.8s ease-out infinite;pointer-events:none}.ov[data-id="bell"] .tr .chip{display:block;margin:4px auto 0;text-align:center}@keyframes halo{0%{transform:scale(.5);opacity:0}30%{opacity:.8}100%{transform:scale(1.1);opacity:0}}#bell.ring::after,#bell.rung::after{animation:none;opacity:0}#bell.ring{animation:ring 1.6s cubic-bezier(.36,.07,.19,.97)}@keyframes ring{10%{transform:rotate(-20deg)}25%{transform:rotate(16deg)}40%{transform:rotate(-12deg)}55%{transform:rotate(8deg)}70%{transform:rotate(-4deg)}85%{transform:rotate(2deg)}}
#fog{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity 3s}#fog.on{opacity:1}#fog i{position:absolute;bottom:-12%;width:64vmax;height:42vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(235,232,240,.5),rgba(235,232,240,0));filter:blur(12px);animation:drift 14s ease-in-out infinite alternate}#fog i:nth-child(1){left:-12%}#fog i:nth-child(2){left:28%;animation-duration:19s}#fog i:nth-child(3){left:58%;animation-duration:16s;animation-delay:-6s}@keyframes drift{from{transform:translateX(-6%) translateY(2%)}to{transform:translateX(6%) translateY(-3%)}}
#tap{position:absolute;inset:0;pointer-events:auto;cursor:pointer}
#scrollHint{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:12;color:var(--mute);transition:opacity .8s;pointer-events:none;text-align:center;opacity:0}#scrollHint.show{opacity:1}#scrollHint.off{opacity:0}#scrollHint i{display:block;width:1px;height:26px;margin:8px auto 0;background:linear-gradient(rgba(242,237,228,.8),rgba(242,237,228,0))}
/* dusk beat: one line in the dark */
.ov[data-id="dusk"] .copy{left:50%;bottom:auto;top:50%;transform:translate(-50%,-50%);text-align:center;width:auto;max-width:min(720px,86vw)}.ov[data-id="dusk"] .line{margin:0 auto;max-width:22ch;text-shadow:none}.ov[data-id="dusk"] .copy::before{display:none}.ov[data-id="dusk"] .cap{color:var(--mute)}
/* after the film */
#after{position:relative;z-index:5;background:linear-gradient(rgba(7,7,8,0),#070708 12%);padding:28vh var(--g) 60px;opacity:0;transition:opacity .9s}#after.on{opacity:1}
#after section{max-width:1180px;margin:0 auto 18vh;scroll-margin-top:96px}
#after h2{font:300 var(--xl)/.98 var(--disp);letter-spacing:-.005em;margin:0 0 20px;color:var(--bone);max-width:18ch}#after h2 i{font-style:italic}#after .lead{max-width:44ch}
.ruled{border-top:1px solid var(--hair);padding-top:22px;margin-top:30px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px}.two h3{font:300 var(--m)/1.1 var(--disp);margin:0 0 10px;color:var(--bone)}.two p{color:var(--bone2);margin:0;max-width:46ch}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:8px}.vs>div{padding:14px 0;border-top:1px solid var(--hair)}.vs .k{font:500 10px var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}.vs .a{font:300 var(--lead)/1.35 var(--disp);color:var(--bone2)}.vs .b{font:300 var(--lead)/1.35 var(--disp);color:var(--bone)}
.price{font:500 10.5px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bone);margin:0 0 10px}
#visionList{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}#visionList li{background:var(--bg);padding:20px;display:flex;flex-direction:column;gap:6px;min-height:132px}#visionList li b{font:300 var(--m)/1.1 var(--disp)}#visionList li .st{color:var(--mute);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}#visionList li .row{margin-top:auto}#visionList .empty{grid-column:1/-1;color:var(--mute);font:300 var(--lead) var(--disp)}
.table{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:22px}
.light{position:relative;background:none;border:0;padding:0;color:var(--bone);text-align:left;cursor:pointer;overflow:hidden;aspect-ratio:4/3}.light img{width:100%;height:100%;object-fit:cover;filter:brightness(.68);transform:scale(1.02);transition:filter .7s,transform 1.6s cubic-bezier(.22,1,.36,1)}.light:hover img,.light:focus-visible img{filter:brightness(.95);transform:scale(1.06)}.light .lab{position:absolute;left:16px;bottom:14px;right:16px}.light .lab b{display:block;font:300 var(--m)/1 var(--disp)}.light .lab span{color:rgba(242,237,228,.7)}.light.in::after{content:'Kept';position:absolute;right:12px;top:10px;font:500 9.5px var(--sans);letter-spacing:.26em;text-transform:uppercase;color:#0a0a0b;background:var(--bone);padding:5px 9px}
.row{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}.four .cap{color:var(--mute)}.four p{margin:10px 0 0;font:300 var(--lead)/1.35 var(--disp);color:var(--bone);max-width:24ch}
form.ph{display:none;flex-direction:column;gap:12px;max-width:460px;margin-top:18px}form.ph.on{display:flex}form.ph input,form.ph select{background:none;border:0;border-bottom:1px solid var(--hair);color:var(--bone);padding:10px 0;font:300 18px var(--disp);outline:none}form.ph input:focus{border-bottom-color:var(--bone)}form.ph label{color:var(--mute);font:500 10px var(--sans);letter-spacing:.26em;text-transform:uppercase}
.done{font:300 var(--lead)/1.45 var(--disp);color:var(--bone);border-left:1px solid var(--bone);padding-left:18px;max-width:46ch}
.tag{display:inline-block;font:500 9px var(--sans);letter-spacing:.26em;text-transform:uppercase;color:#0a0a0b;background:var(--bone);padding:4px 8px;margin-left:12px;vertical-align:middle}
.svc ul{list-style:none;margin:10px 0 0;padding:0}.svc li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--hair);font:300 17px var(--disp)}.svc li span{color:var(--mute);font:500 10px var(--sans);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;padding-top:4px}
.money{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:38px}.money b{display:block;font:300 var(--m)/1.1 var(--disp);margin-bottom:8px}.money p{margin:0;font-size:13px;color:var(--bone2);max-width:30ch}
#answers details{border-top:1px solid var(--hair);padding:12px 0}#answers summary{list-style:none;cursor:pointer;font:300 19px/1.3 var(--disp);color:var(--bone)}#answers summary::-webkit-details-marker{display:none}#answers summary::before{content:'+  ';color:var(--mute)}#answers details[open] summary::before{content:'–  '}#answers p{margin:8px 0 0;color:var(--bone2);font-size:13px;max-width:52ch}
.slots{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 12px}.slot{background:none;border:1px solid var(--hair);color:var(--bone);padding:10px 14px;cursor:pointer;font:500 10px var(--sans);letter-spacing:.22em;text-transform:uppercase}.slot[aria-pressed="true"]{background:var(--bone);color:#0a0a0b;border-color:var(--bone)}
footer{padding:40px var(--g) 70px;max-width:1180px;margin:0 auto;color:var(--mute);font-size:12px;line-height:1.7;border-top:1px solid var(--hair);max-width:none}footer p{max-width:1180px;margin:0 auto 8px}
#toast{position:fixed;left:50%;bottom:max(26px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:80;background:var(--bone);color:#0a0a0b;padding:11px 18px;font:500 10px var(--sans);letter-spacing:.24em;text-transform:uppercase;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap;max-width:92vw}#toast.on{opacity:1}
#cur{position:fixed;left:0;top:0;z-index:70;width:22px;height:22px;margin:-11px 0 0 -11px;pointer-events:none;display:none}body.cursor #cur{display:block}#cur svg{position:absolute;inset:0;opacity:0;transition:opacity .25s}#cur .dot{opacity:1}body[data-p="bride"] #cur .dot,body[data-p="groom"] #cur .dot{opacity:0}body[data-p="bride"] #cur .flower{opacity:1}body[data-p="groom"] #cur .bout{opacity:1}#cur.over svg{opacity:0}#cur.over .dot{opacity:1;transform:scale(.5)}
button:focus:not(:focus-visible){outline:none}
body.after #ui,body.after #scrim,body.after #scrollHint,body.after #fog{opacity:0!important;pointer-events:none!important;transition:opacity .5s}body.after #ui *{pointer-events:none!important}/* the film's own hotspots (.copy, .tr, #tap, #sun) set pointer-events:auto and would otherwise catch clicks through the invisible overlay */
html.review *{transition:none!important;animation:none!important}html.review #black{opacity:0}html.review #curtain,html.review #curtain .hint,html.review #who,html.review #pre,html.review .bar,html.review #seam{opacity:1}
@media(prefers-reduced-motion:reduce){.fx,.fx.on,.ov,.ov.on,#black,#curtain,#seam{transition:none}#curtain .folds,#curtain .hint .arrows,#fog i,#bell.ring{animation:none}}
@media(max-width:760px){
 :root{--g:18px;--xl:clamp(34px,10vw,44px);--l:clamp(28px,8vw,36px);--m:24px;--lead:17px}
 .bar{gap:12px;padding:max(12px,env(safe-area-inset-top)) 16px 8px}.bar #switchBtn{display:none}#walkCue{bottom:auto;top:52%;transform:translate(-50%,-50%)}.bar .brand{letter-spacing:.2em;font-size:9px}.bar a.nav,.bar button{font-size:9px;letter-spacing:.18em}.bar .hidem{display:none}
 .copy,.copy.wide{left:18px;right:18px;bottom:max(40px,calc(env(safe-area-inset-bottom) + 30px));width:auto}.bar .long{display:none}.copy .cap{margin-bottom:10px}.copy .lead{margin-top:10px}.copy.right{text-align:left}.copy.right .line,.copy.right .lead,.copy.right .sm{margin-left:0}
 .tr{right:18px;top:max(84px,calc(env(safe-area-inset-top) + 72px))}.steps .num{font-size:64px}
 #pre{left:18px;right:18px;top:max(90px,calc(env(safe-area-inset-top) + 80px))}#who{left:18px;right:18px;bottom:max(40px,calc(env(safe-area-inset-bottom) + 30px))}#who .w{font-size:var(--l)}
 #curtain .hint{top:48%}#scrollHint{bottom:auto;top:58%;transform:translate(-50%,0)}.acts{gap:18px}
 .two,.vs,.money,.four{grid-template-columns:1fr}.vs>div{padding:12px 0}#after{padding-top:18vh}
 #sun{width:54px;height:54px;margin:-27px 0 0 -27px}
}

/* the bell's window: a real opening in the hedge, a glass handed through it */
#bwin{position:absolute;transform:translate(-50%,-50%);z-index:9;pointer-events:auto;cursor:pointer;opacity:0;transition:opacity .6s}#bwin.on{opacity:1}
#bwin .frame{position:absolute;inset:0;border:1px solid rgba(255,250,240,.35);box-shadow:0 0 0 1px rgba(0,0,0,.25) inset;background:rgba(255,250,240,.06)}
#bwin .door{position:absolute;inset:0;background:linear-gradient(rgba(250,246,238,.92),rgba(236,230,218,.95));transform-origin:left center;transition:transform 1.1s cubic-bezier(.22,1,.36,1);box-shadow:inset -2px 0 6px rgba(0,0,0,.12)}#bwin.open .door{transform:perspective(300px) rotateY(-96deg)}
#bwin .inside{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,rgba(255,214,150,.9),rgba(120,70,20,.95) 70%,#1a0f05);opacity:0;transition:opacity .9s .3s}#bwin.open .inside{opacity:1}
#bwin .glow{position:absolute;left:50%;top:50%;width:420%;height:420%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,210,140,.55),rgba(255,200,120,0));pointer-events:none;opacity:0;transition:opacity 1.2s .4s}#bwin.open .glow{opacity:1}#bwin.settled .glow{opacity:.55;transition:opacity 2s}
#bwin .glass{position:absolute;left:50%;bottom:4%;width:46%;height:96%;transform:translate(-50%,120%);transition:transform 1.3s cubic-bezier(.22,1,.36,1)}#bwin.glass .glass{transform:translate(-50%,0)}#bwin .glass svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 10px rgba(255,220,160,.5))}
#bwin .bubbles i{position:absolute;left:50%;bottom:30%;width:2px;height:2px;border-radius:50%;background:#fff6dc;opacity:0}#bwin.glass .bubbles i{animation:bub 2.4s linear infinite}#bwin .bubbles i:nth-child(2){left:44%;animation-delay:.7s}#bwin .bubbles i:nth-child(3){left:56%;animation-delay:1.3s}#bwin .bubbles i:nth-child(4){left:48%;animation-delay:1.9s}@keyframes bub{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-220%);opacity:0}}
/* the chandelier: a touchable light */
#chand{position:absolute;transform:translate(-50%,-50%);width:120px;height:120px;border-radius:50%;background:none;border:0;cursor:pointer;z-index:9;pointer-events:auto;opacity:0;transition:opacity .6s}#chand.on{opacity:1}
#chand::before{content:'';position:absolute;inset:18%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,236,200,.45),rgba(255,236,200,0));transition:transform .8s,opacity .8s}#chand:hover::before{transform:scale(1.25)}#chand.low::before{opacity:.5;transform:scale(.8)}
#chand span{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:4px}#chand::after{content:'';position:absolute;inset:8%;border-radius:50%;border:1px solid rgba(255,236,200,.55);animation:halo 3s ease-out infinite;pointer-events:none}#chand.low::after{animation:none;opacity:0}
/* the castle's target and the wish in the sky */
#castleBtn,#wishBtn{position:absolute;transform:translate(-50%,-50%);width:240px;height:240px;background:none;border:0;padding:0;cursor:pointer;z-index:9;pointer-events:auto;opacity:0;visibility:hidden;transition:opacity .9s,visibility 0s .9s}#castleBtn.on,#wishBtn.show{opacity:1;visibility:visible;transition:opacity .9s,visibility 0s}#castleBtn.gone{opacity:0!important;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
#castleBtn i,#wishBtn i{position:absolute;left:50%;top:50%;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;border:1px solid rgba(255,236,200,.55);animation:halo 3s ease-out infinite;pointer-events:none}#castleBtn i::after{content:'';position:absolute;inset:30%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,236,200,.4),rgba(255,236,200,0))}
#wishBtn i{border-color:rgba(242,237,228,.4)}#wishBtn i::after{content:'✦';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-size:14px;text-shadow:0 0 12px #fff;animation:twinkle 1.8s ease-in-out infinite}@keyframes twinkle{50%{opacity:.35;transform:translate(-50%,-50%) scale(.7)}}
#castleBtn .chip,#wishBtn .chip{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:-16px}#castleBtn .chip{top:auto;bottom:100%;margin:0 0 -16px}
#tap.woke{cursor:pointer}
@media(max-width:760px){#chand{width:84px;height:84px}#castleBtn,#wishBtn{width:190px;height:190px}#castleBtn i,#wishBtn i{width:84px;height:84px;margin:-42px 0 0 -42px}.chip{padding:7px 11px;font-size:9.5px;letter-spacing:.22em}#castleBtn .chip{white-space:normal;width:150px;text-align:center;line-height:1.5}}
@media(prefers-reduced-motion:reduce){#bwin .door,#bwin .glass{transition:none}#castleBtn i,#wishBtn i,#bell::after,#chand::after,#sun .chip,#walkCue i{animation:none}#bwin .bubbles i{animation:none}}

/* ---------- Phase 2 (DDL-062): positioning line, chapters, the brief ---------- */
#pre .pos{color:rgba(26,22,18,.8);max-width:42ch;margin:18px 0 0;font-size:13px}#pre .pos a{color:#1a1612;text-decoration:none;border-bottom:1px solid rgba(26,22,18,.45);pointer-events:auto;padding-bottom:1px}#pre .pos a:hover{border-bottom-color:#1a1612}
#who .eyes{color:rgba(26,22,18,.75);margin:8px 0 2px;max-width:36ch}
.chapter{margin-top:34px}.chapter:first-child{margin-top:22px}.chead{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:baseline}.chead .cap{color:var(--bone)}.chead .sm{max-width:60ch;color:var(--bone2)}.chapter .table{margin-top:16px}
.sprint .inc{list-style:none;margin:8px 0 0;padding:0}.sprint .inc li{padding:9px 0;border-top:1px solid var(--hair);font:300 17px/1.35 var(--disp);color:var(--bone)}.sprint .k{display:block;font:500 10px var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--mute);margin-top:16px}
.story figure{margin:0}.story img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:brightness(.9);display:block}.story figcaption{color:var(--mute);margin-top:10px}
.brief{max-width:640px}.brief .stepsNav{list-style:none;display:flex;gap:22px;flex-wrap:wrap;padding:0;margin:0 0 20px;color:var(--mute)}.brief .stepsNav .on{color:var(--bone)}.brief .stepsNav li{cursor:pointer;padding-bottom:4px;border-bottom:1px solid transparent}.brief .stepsNav li:hover{border-bottom-color:var(--hair)}
.brief .sugwrap{position:relative;display:flex;flex-direction:column}.brief .sug{position:absolute;left:0;right:0;top:100%;z-index:6;list-style:none;margin:0;padding:6px 0;background:#0e0e10;border:1px solid var(--hair);border-top:0;max-height:240px;overflow:auto}.brief .sug li{padding:9px 12px;font:300 17px/1.3 var(--disp);color:var(--bone2);cursor:pointer}.brief .sug li:hover,.brief .sug li.on{background:rgba(242,237,228,.08);color:var(--bone)}.brief select{background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 8px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:28px}.brief select{appearance:none;-webkit-appearance:none;background:none;border:0;border-bottom:1px solid var(--hair);color:var(--bone);padding:10px 0;font:300 18px var(--disp);outline:none}.brief select option{color:#0a0a0b}
.brief fieldset{border:0;padding:0;margin:0;display:none;min-width:0}.brief fieldset.on{display:flex;flex-direction:column;gap:12px}.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.brief textarea{background:none;border:0;border-bottom:1px solid var(--hair);color:var(--bone);padding:10px 0;font:300 18px var(--disp);outline:none;resize:vertical;min-height:54px}.brief textarea:focus{border-bottom-color:var(--bone)}.brief input::placeholder,.brief textarea::placeholder{color:rgba(242,237,228,.35)}
.brief .opts{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 6px}.brief .slot{text-align:left;line-height:1.4}.brief .opt{color:var(--mute);letter-spacing:.1em;margin-left:8px}
.brief .kept{list-style:none;margin:0;padding:0}.brief .kept li{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:8px 0;border-top:1px solid var(--hair);font:300 17px var(--disp)}#bf-kept[hidden]{display:none}
.brief .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.err{color:#e9c3ad;font-size:13px;margin:0;max-width:52ch}.err[hidden]{display:none}#bf-note{color:var(--mute);max-width:52ch}
#briefDone{max-width:760px}#calendly{margin-top:22px;min-height:40px}#calendly iframe{width:100%;min-height:680px;border:0}.calPh{border-left:1px solid var(--hair);padding-left:18px}
@media(max-width:760px){.chead{grid-template-columns:1fr;gap:6px}.story figure{order:-1}.brief .stepsNav{gap:14px}.brief .stepsNav li{font-size:9.5px}}

/* Experience page (prototype): the bar matches the home page */
.bar button,.bar a.nav{font:500 14px var(--sans);letter-spacing:.04em;text-transform:none;opacity:1;color:var(--bone2);padding:10px 0}.bar a.nav:hover,.bar button:hover{border-bottom-color:transparent;color:var(--bone)}
.bar .brand{font:500 13px var(--sans);letter-spacing:.2em}
.bar a.nav.cta{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;background:var(--bone);color:#0a0a0b;border:0;font-weight:500}.bar a.nav.cta:hover{background:#fff}
.bar .n{font-size:11px;min-width:20px;padding:0 6px;line-height:18px;position:relative;top:-1px}
@media(max-width:760px){.bar a.nav,.bar button{font-size:13px;letter-spacing:.02em}.bar a.nav.cta{min-height:36px;padding:0 14px}}
#end{max-width:760px;margin:0 auto 10vh}#end .lead{font:400 18px/1.6 var(--sans);color:var(--bone2);max-width:52ch}#end .row{gap:18px}

.bar .short{display:none}@media(max-width:760px){.bar .short{display:inline}.bar .long{display:none}}
body.onCurtain .bar{text-shadow:none}body.onCurtain .bar .brand,body.onCurtain .bar a.nav,body.onCurtain .bar button{color:#1a1612}body.onCurtain .bar a.nav.cta{background:#1a1612;color:#f2ede4}body.onCurtain .bar .n{border-color:#1a1612;color:#1a1612}

/* Experience (prototype): larger reading type */
:root{--xl:clamp(46px,6.4vw,84px);--l:clamp(36px,4.4vw,58px)}
.cap{font-size:12.5px;letter-spacing:.24em}.copy .sm,.sm{font-size:16px;line-height:1.6;max-width:44ch}.chip{font-size:12.5px;padding:10px 16px}#walkCue{font-size:12.5px}.steps .cap{font-size:12.5px}#curtain .hint .cap{font-size:12.5px}#who .cap{font-size:12.5px}
@media(max-width:760px){:root{--xl:clamp(36px,10.5vw,48px)}.cap{font-size:11.5px}.copy .sm,.sm{font-size:15px}}

/* DDL-079: the Vow & Vista mark in the bar */
.bar .brand{display:inline-flex;align-items:center;gap:9px}.bar .brand img{display:block;width:auto}.bar .brand .mark{height:26px}.bar .brand .word{height:10px;margin-top:1px}@media(max-width:760px){.bar .brand .mark{height:22px}.bar .brand .word{height:8.5px}}