:root{--ink:#0e0c0b;--ink2:#1a1714;--paper:#f3ede4;--paper2:#e8dfd2;--muted:#8d8379;--red:#c8382b;--gold:#c9a46a;--line:rgba(243,237,228,.12);--green:#7bd389}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:'Inter',sans-serif;background:var(--paper);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:500;line-height:1;letter-spacing:-.01em}
h1 em,h2 em{font-style:italic;color:var(--gold)}
a{color:inherit;text-decoration:none}button,input,select,textarea{font-family:inherit;color:inherit}button{cursor:pointer}
.wrap{width:min(1200px,90%);margin:0 auto}
.mono{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
.hand{font-family:'Caveat',cursive}
.dark{background:var(--ink);color:var(--paper)}
/* header */
header{position:fixed;top:0;left:0;right:0;z-index:120;transition:.35s;color:var(--paper)}
header.sc{background:rgba(14,12,11,.92);backdrop-filter:blur(10px)}
header.lt{color:var(--ink)}header.lt.sc{background:rgba(243,237,228,.94)}
.nav{display:flex;justify-content:space-between;align-items:center;height:72px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-family:'Cormorant Garamond';font-size:1.7rem;font-weight:600;letter-spacing:.02em}
.logo i{width:26px;height:26px;border:2px solid currentColor;border-radius:6px;position:relative}
.logo i:after{content:"";position:absolute;inset:5px;border:2px solid currentColor;border-radius:50%}
.menu{display:flex;gap:28px;font-size:.88rem;font-weight:500;opacity:.9}.menu a:hover,.menu a.on{color:var(--gold)}
.cta{padding:11px 20px;border-radius:999px;background:var(--paper);color:var(--ink);font-weight:600;font-size:.85rem}
header.lt .cta{background:var(--ink);color:var(--paper)}
.burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid currentColor;background:transparent;font-size:1.1rem}
.mnav{display:none}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:999px;font-weight:600;font-size:.92rem;border:0;transition:.25s}
.btn-p{background:var(--paper);color:var(--ink)}.btn-p:hover{background:#fff}
.btn-i{background:var(--ink);color:var(--paper)}.btn-i:hover{background:#2a2521}
.btn-o{background:transparent;border:1px solid currentColor}
.btn-g{background:var(--gold);color:var(--ink)}
.btn:disabled{opacity:.35;cursor:not-allowed}
/* ===== HERO viewfinder ===== */
.hero{position:relative;height:100vh;min-height:620px;overflow:hidden;background:#000;color:var(--paper);cursor:none;user-select:none}
body.touch .hero{cursor:auto}
.scene{position:absolute;inset:-30px;background:#3a2f27 center/cover no-repeat;filter:blur(var(--blur,14px)) brightness(.72) saturate(1.05);transition:filter .1s;transform:scale(1.04)}
.vf{position:absolute;inset:26px;pointer-events:none;z-index:3}
.vf .c{position:absolute;width:46px;height:46px;border:2px solid rgba(255,255,255,.75)}
.vf .c1{left:0;top:70px;border-right:0;border-bottom:0}.vf .c2{right:0;top:70px;border-left:0;border-bottom:0}.vf .c3{left:0;bottom:46px;border-right:0;border-top:0}.vf .c4{right:0;bottom:46px;border-left:0;border-top:0}
.af{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(3,22px);gap:34px 52px}
.af i{width:22px;height:16px;border:1.5px solid rgba(255,255,255,.4);transition:.2s}
.af i.lock{border-color:var(--green);box-shadow:0 0 10px rgba(123,211,137,.6)}
.read{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:34px;font-family:'IBM Plex Mono';font-size:.82rem;color:rgba(255,255,255,.85);letter-spacing:.06em}
.read b{color:#fff;font-weight:500}.read .shots{color:var(--gold)}
.rec{position:absolute;right:0;top:78px;display:flex;align-items:center;gap:8px;font-family:'IBM Plex Mono';font-size:.75rem}
.rec i{width:9px;height:9px;border-radius:50%;background:var(--red);animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.2}}
.hcopy{position:absolute;left:0;right:0;bottom:120px;z-index:4;pointer-events:none}
.hcopy .wrap>*{pointer-events:auto}
.hcopy h1{font-size:clamp(3.4rem,8.4vw,7.6rem);text-shadow:0 4px 40px rgba(0,0,0,.5);max-width:900px}
.hcopy p{max-width:460px;margin:20px 0 28px;color:rgba(243,237,228,.88);font-size:1.08rem}
.hcopy .btns{display:flex;gap:10px;flex-wrap:wrap}
.hint{position:absolute;z-index:4;right:5%;bottom:130px;font-family:'Caveat';font-size:1.5rem;color:var(--paper);transform:rotate(-4deg);pointer-events:none;animation:float 3s ease-in-out infinite}
@keyframes float{50%{transform:rotate(-4deg) translateY(-6px)}}
#afc{position:fixed;left:0;top:0;width:64px;height:48px;margin:-24px 0 0 -32px;z-index:200;pointer-events:none;opacity:0;transition:opacity .2s,border-color .2s}
#afc:before,#afc:after{content:"";position:absolute;inset:0;border:2px solid #fff;clip-path:polygon(0 0,30% 0,30% 2px,2px 2px,2px 30%,0 30%,0 70%,2px 70%,2px calc(100% - 2px),30% calc(100% - 2px),30% 100%,0 100%,0 0,100% 0,100% 30%,calc(100% - 2px) 30%,calc(100% - 2px) 2px,70% 2px,70% 0,100% 0,100% 100%,70% 100%,70% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 70%,100% 70%,100% 100%)}
#afc:after{display:none}
#afc.on{opacity:1}#afc.lock:before{border-color:var(--green)}
#afc span{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:#fff}
/* shutter iris */
#iris{position:fixed;inset:0;z-index:180;pointer-events:none;overflow:hidden;display:none}
#iris.go{display:block}
#iris i{position:absolute;left:50%;top:50%;width:260vmax;height:260vmax;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 260vmax #000}
#iris.go i{animation:iris .34s ease-in-out}
@keyframes iris{0%{width:260vmax;height:260vmax}45%,55%{width:0;height:0}100%{width:260vmax;height:260vmax}}
#flash{position:fixed;inset:0;background:#fff;z-index:181;pointer-events:none;opacity:0}
#flash.go{animation:fl .5s ease-out}
@keyframes fl{0%{opacity:0}15%{opacity:.85}100%{opacity:0}}
/* polaroid stack */
.stack{position:absolute;right:4%;top:110px;width:200px;height:260px;z-index:5;pointer-events:none}
.pol{position:absolute;left:0;top:0;width:170px;padding:10px 10px 38px;background:#fbf8f2;box-shadow:0 18px 30px -10px rgba(0,0,0,.6);transform:translate(var(--x),var(--y)) rotate(var(--r));animation:drop .8s cubic-bezier(.2,1.3,.4,1) both}
@keyframes drop{0%{transform:translate(-300px,280px) rotate(-30deg) scale(.6);opacity:0}100%{transform:translate(var(--x),var(--y)) rotate(var(--r))}}
.pol .im{aspect-ratio:1;background:#222 no-repeat;background-size:var(--bs);background-position:var(--bp);animation:develop 4s ease-out both}
@keyframes develop{0%{filter:brightness(2.6) contrast(.25) sepia(.6) blur(2px)}60%{filter:brightness(1.2) contrast(.8) sepia(.3)}100%{filter:none}}
.pol .hand{position:absolute;left:0;right:0;bottom:6px;text-align:center;color:#3a332d;font-size:1.15rem}
.endroll{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;background:rgba(14,12,11,.85);border:1px solid var(--line);padding:24px 28px;border-radius:18px;text-align:center;display:none;cursor:auto}
.endroll.on{display:block;animation:fadein .4s}
@keyframes fadein{from{opacity:0;transform:translate(-50%,-44%)}}
/* ===== sections ===== */
section{padding:120px 0;position:relative}
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:46px}
.sh h2{font-size:clamp(2.8rem,6.4vw,5.2rem)}.sh p{max-width:420px;color:var(--muted)}
.dark .sh p{color:#b8ada1}
.ey{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;color:var(--red)}.ey:before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
/* film strip */
.film{background:#191512;padding:26px 0;position:relative;overflow:hidden}
.film:before,.film:after{content:"";position:absolute;left:0;right:0;height:14px;background:repeating-linear-gradient(90deg,transparent 0 14px,#f3ede4 14px 30px,transparent 30px 44px);opacity:.85}
.film:before{top:7px}.film:after{bottom:7px}
.strip{display:flex;gap:14px;overflow-x:auto;padding:22px 5%;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab}
.strip::-webkit-scrollbar{display:none}
.strip.drag{cursor:grabbing;scroll-snap-type:none}
.fr{flex:0 0 auto;width:300px;aspect-ratio:3/2;position:relative;scroll-snap-align:center;border-radius:3px;overflow:hidden;background:#3a2f27 center/cover}
.fr:after{content:"";position:absolute;inset:0;background:rgba(214,120,48,.42);mix-blend-mode:multiply;transition:opacity .7s}
.fr .neg{position:absolute;inset:0;background:inherit;background-size:cover;background-position:center;filter:invert(1) grayscale(.3) contrast(.95);transition:opacity .7s}
.fr:hover:after,.fr.pos:after,.fr:hover .neg,.fr.pos .neg{opacity:0}
.fr .nb{position:absolute;left:8px;bottom:6px;z-index:2;font-family:'IBM Plex Mono';font-size:.65rem;color:#ffb35c;letter-spacing:.1em}
.fr .cp{position:absolute;right:8px;bottom:6px;z-index:2;font-family:'Caveat';font-size:1.2rem;color:#fff;opacity:0;transition:.4s;text-shadow:0 2px 8px #000}
.fr:hover .cp,.fr.pos .cp{opacity:1}
.film .lbl{display:flex;justify-content:space-between;padding:0 5%;color:#ffb35c;font-family:'IBM Plex Mono';font-size:.68rem;letter-spacing:.2em}
.quote{font-family:'Cormorant Garamond';font-style:italic;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.2;text-align:center;max-width:980px;margin:0 auto}
.quote small{display:block;font-family:'IBM Plex Mono';font-style:normal;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:20px}
/* contact sheet */
.sheet{background:#151210;padding:26px;border-radius:6px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;box-shadow:0 40px 70px -40px rgba(0,0,0,.6);position:relative}
.cs{position:relative;color:var(--paper);cursor:pointer}
.cs .ph{aspect-ratio:3/2;background:#3a2f27 center/cover;filter:grayscale(1) contrast(1.05);transition:filter .5s}
.cs:hover .ph,.cs.on .ph{filter:none}
.cs .n{font-family:'IBM Plex Mono';font-size:.65rem;color:#ffb35c;margin:8px 0 4px;letter-spacing:.12em}
.cs h3{font-size:1.5rem}.cs p{font-size:.86rem;color:#b8ada1;margin-top:4px}
.cs svg{position:absolute;left:-10px;top:-12px;width:calc(100% + 20px);height:calc(100% + 24px);pointer-events:none;overflow:visible}
.cs svg path{fill:none;stroke:var(--red);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s cubic-bezier(.6,0,.3,1),opacity .2s;opacity:0}
.cs:hover svg path,.cs.on svg path{stroke-dashoffset:0;opacity:.9}
.sheet .tape{position:absolute;top:-14px;width:110px;height:28px;background:rgba(232,223,210,.7);transform:rotate(-3deg)}
/* polaroid wall */
.wall{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:20px 0}
.pw{background:#fbf8f2;padding:14px 14px 22px;box-shadow:0 20px 40px -20px rgba(0,0,0,.35);transform:rotate(var(--r));transition:transform .4s cubic-bezier(.3,1.5,.5,1),box-shadow .4s;position:relative}
.pw:hover{transform:rotate(0) translateY(-8px) scale(1.03);box-shadow:0 34px 50px -24px rgba(0,0,0,.45);z-index:2}
.pw:before{content:"";position:absolute;left:50%;top:-10px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e56b5e,#9b2a20);box-shadow:0 3px 4px rgba(0,0,0,.35)}
.pw .im{aspect-ratio:1;background:#3a2f27 center/cover}
.pw p{font-family:'Caveat';font-size:1.45rem;line-height:1.2;color:#3a332d;margin-top:14px}
.pw small{display:block;font-family:'IBM Plex Mono';font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px}
/* gates */
.gates{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gate{position:relative;border-radius:22px;overflow:hidden;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;color:var(--paper);background:#3a2f27 center/cover;isolation:isolate}
.gate:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(14,12,11,.88));z-index:-1;transition:.4s}
.gate:hover:before{background:linear-gradient(180deg,rgba(200,56,43,.25) 0,rgba(14,12,11,.9))}
.gate h3{font-size:2.4rem}.gate p{color:#d6ccc0;font-size:.92rem;margin:6px 0 14px}.gate .go{font-weight:600}
/* page hero */
.phero{padding:150px 0 70px}
.phero .crumb{font-family:'IBM Plex Mono';font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}.phero .crumb a:hover{color:var(--gold)}
.phero h1{font-size:clamp(3rem,7vw,5.8rem)}.phero p{color:var(--muted);max-width:560px;margin-top:18px;font-size:1.06rem}
.dark .phero p{color:#b8ada1}
/* ===== darkroom gallery ===== */
body.safe{background:#140807}
body.safe .dk{background:#140807}
.redl{position:fixed;inset:0;pointer-events:none;z-index:90;background:radial-gradient(circle at 50% 0,rgba(200,56,43,.35),transparent 60%);mix-blend-mode:screen;transition:opacity .8s}
body:not(.safe) .redl{opacity:0}
.gtools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:30px}
.chip{padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;font-weight:500;font-size:.85rem;color:var(--paper)}
.chip.on{background:var(--paper);color:var(--ink)}
.lamp{margin-left:auto;display:flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;border:1px solid rgba(200,56,43,.6);background:rgba(200,56,43,.12);color:#ffb3a8;font-size:.85rem;font-weight:600}
.lamp i{width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 12px var(--red)}
body:not(.safe) .lamp i{background:#ffe9b0;box-shadow:0 0 12px #ffe9b0}
.masonry{columns:3;column-gap:18px}
.gi{break-inside:avoid;margin-bottom:18px;position:relative;cursor:zoom-in;display:block;width:100%;border:0;padding:0;background:#f3ede4;border-radius:4px;overflow:hidden}
.gi .ph{display:block;width:100%;background:#3a2f27 center/cover;opacity:0}
.gi.dev .ph{animation:dev 3.2s ease-out forwards}
@keyframes dev{0%{opacity:0;filter:grayscale(1) brightness(2.6) contrast(.2)}25%{opacity:.35}70%{opacity:1;filter:grayscale(.3) brightness(1.15) contrast(.85)}100%{opacity:1;filter:none}}
.gi:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
.gi.dev:after{animation:wave 2.2s .2s ease-in-out}
@keyframes wave{to{transform:translateX(120%)}}
.gi .cap{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font-family:'Caveat';font-size:1.3rem;text-align:left;opacity:0;transition:.3s}
.gi:hover .cap{opacity:1}
.gi.hide{display:none}
/* lightbox film */
.lb{position:fixed;inset:0;z-index:200;background:rgba(8,6,5,.96);display:none;flex-direction:column;align-items:center;justify-content:center;color:var(--paper)}
.lb.on{display:flex}
.lbf{position:relative;width:min(1000px,92vw);background:#191512;padding:34px 0}
.lbf:before,.lbf:after{content:"";position:absolute;left:0;right:0;height:14px;background:repeating-linear-gradient(90deg,transparent 0 14px,#f3ede4 14px 30px,transparent 30px 44px);opacity:.8}
.lbf:before{top:10px}.lbf:after{bottom:10px}
.lbw{overflow:hidden;margin:0 24px}
.lbt{display:flex;transition:transform .55s cubic-bezier(.6,0,.2,1)}
.lbt div{flex:0 0 100%;aspect-ratio:3/2;background:#3a2f27 center/contain no-repeat}
.lbn{display:flex;justify-content:space-between;align-items:center;width:min(1000px,92vw);margin-top:18px;gap:14px}
.lbn button{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--paper);font-size:1.4rem}
.lbn .hand{font-size:1.6rem}
.lbx{position:absolute;right:20px;top:18px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--paper);font-size:1.4rem}
.lbc{font-family:'IBM Plex Mono';font-size:.75rem;color:#ffb35c;letter-spacing:.14em}
/* ===== packages ===== */
.rolls{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:40px}
.roll{background:transparent;border:0;text-align:left;display:flex;flex-direction:column;align-items:center;padding:20px;border-radius:24px;transition:.3s;color:var(--ink)}
.roll:hover{background:rgba(14,12,11,.04)}
.can{position:relative;width:120px;height:170px;transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.roll.on .can{transform:translateY(-16px) rotate(-6deg)}
.can .bd{position:absolute;left:0;right:0;top:18px;bottom:0;border-radius:10px;background:linear-gradient(90deg,#2b2622,#4b423b 30%,#2b2622);overflow:hidden}
.can .lb2{position:absolute;left:0;right:0;top:34px;height:80px;background:var(--c);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-family:'IBM Plex Mono';font-size:.6rem;letter-spacing:.14em}
.can .lb2 b{font-family:'Cormorant Garamond';font-size:1.7rem;letter-spacing:0;font-weight:600}
.can .top{position:absolute;left:10px;right:10px;top:4px;height:18px;border-radius:6px 6px 2px 2px;background:linear-gradient(90deg,#8d847b,#d9d2c9 40%,#8d847b)}
.can .spool{position:absolute;left:50%;top:-8px;width:26px;height:16px;margin-left:-13px;border-radius:3px;background:#5d554e}
.can .leader{position:absolute;left:100%;top:70px;height:44px;width:0;background:#3b2a1d;transition:width .7s cubic-bezier(.6,0,.2,1);border-radius:0 4px 4px 0;background-image:repeating-linear-gradient(90deg,transparent 0 6px,#f3ede4 6px 10px,transparent 10px 16px);background-size:100% 6px;background-repeat:repeat-x;background-position:0 4px,0 34px}
.roll.on .can .leader{width:60px}
.roll h3{font-size:2.2rem;margin-top:22px}.roll .pr{font-weight:700;font-size:1.15rem;margin-top:4px}.roll small{color:var(--muted)}
.pcfg{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:start}
.fstrip{background:#191512;color:var(--paper);border-radius:6px;padding:30px 26px;position:relative;overflow:hidden}
.fstrip:before,.fstrip:after{content:"";position:absolute;left:0;right:0;height:12px;background:repeating-linear-gradient(90deg,transparent 0 12px,#f3ede4 12px 26px,transparent 26px 38px);opacity:.75}
.fstrip:before{top:8px}.fstrip:after{bottom:8px}
.fstrip h3{font-size:2.2rem;margin:6px 0 16px}
.feats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:24px}
.feat{border:1px solid var(--line);border-radius:4px;padding:12px 14px;font-size:.92rem;animation:fadein2 .5s both}
@keyframes fadein2{from{opacity:0;transform:translateX(-14px)}}
.feat span{display:block;font-family:'IBM Plex Mono';font-size:.6rem;color:#ffb35c;letter-spacing:.14em;margin-bottom:4px}
.adds{display:grid;gap:8px}
.add{display:flex;align-items:center;gap:14px;padding:14px;border-radius:10px;border:1px solid var(--line);cursor:pointer;transition:.2s}
.add input{width:20px;height:20px;accent-color:var(--gold)}
.add div{flex:1}.add small{display:block;color:#b8ada1;font-size:.8rem}.add b{font-family:'IBM Plex Mono';font-weight:500;color:#ffb35c}
.add:has(input:checked){border-color:var(--gold);background:rgba(201,164,106,.08)}
.rcpt{background:#fffdf8;border-radius:4px;padding:26px 24px;box-shadow:0 30px 50px -30px rgba(0,0,0,.4);position:sticky;top:96px;font-family:'IBM Plex Mono';font-size:.82rem}
.rcpt:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;background:linear-gradient(-45deg,transparent 5px,#fffdf8 0) 0 0/12px 10px,linear-gradient(45deg,transparent 5px,#fffdf8 0) 0 0/12px 10px}
.rcpt h4{font-family:'Cormorant Garamond';font-size:1.8rem;font-weight:600;margin-bottom:12px;text-align:center}
.rl{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed #ddd2c2;gap:10px}
.rtot{display:flex;justify-content:space-between;align-items:baseline;margin:16px 0 4px}.rtot b{font-family:'Cormorant Garamond';font-size:2.4rem;font-weight:600}
.rcpt .note{color:var(--muted);font-size:.72rem;margin-bottom:16px}
/* ===== booking ===== */
.bk{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:start}
.card{background:#fff;border-radius:22px;padding:28px;box-shadow:0 20px 50px -40px rgba(0,0,0,.5)}
.card h3{font-size:1.9rem;margin-bottom:14px}
.pks{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.pks button{padding:10px 16px;border-radius:999px;border:1px solid #d9cfc1;background:transparent;font-weight:600;font-size:.86rem}
.pks button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.calh{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.calh b{font-family:'Cormorant Garamond';font-size:1.6rem;font-weight:600;text-transform:capitalize}
.calh button{width:38px;height:38px;border-radius:50%;border:1px solid #d9cfc1;background:transparent;font-size:1.1rem}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .dn{font-family:'IBM Plex Mono';font-size:.62rem;color:var(--muted);text-align:center;letter-spacing:.1em}
.cal button{aspect-ratio:1;border-radius:10px;border:1px solid transparent;background:var(--paper);font-weight:600;font-size:.88rem;position:relative}
.cal button.we{background:#efe5d6}
.cal button.busy{background:transparent;color:#c2b8ab;text-decoration:line-through;cursor:not-allowed}
.cal button.last:after{content:"";position:absolute;right:6px;top:6px;width:6px;height:6px;border-radius:50%;background:var(--red)}
.cal button.on{background:var(--ink);color:var(--paper)}
.cal button:disabled:not(.busy){opacity:.25;cursor:not-allowed}
.legend{display:flex;gap:16px;margin-top:12px;font-size:.78rem;color:var(--muted);flex-wrap:wrap}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.card input,.card textarea{width:100%;padding:13px 14px;border-radius:12px;border:1px solid #d9cfc1;background:var(--paper);font-size:.95rem;margin-bottom:10px}
.card input:focus,.card textarea:focus{outline:0;border-color:var(--ink)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sum{background:var(--paper);border-radius:14px;padding:16px;margin-bottom:14px;font-size:.92rem}
.sum div{display:flex;justify-content:space-between;padding:3px 0}.sum span{color:var(--muted)}
.err{color:var(--red);font-size:.85rem;font-weight:600;min-height:1.2em;margin-bottom:6px}
.done{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 0}
.bigpol{width:260px;background:#fbf8f2;padding:14px 14px 56px;box-shadow:0 30px 50px -20px rgba(0,0,0,.45);transform:rotate(-3deg);position:relative;animation:drop2 .9s cubic-bezier(.2,1.3,.4,1) both}
@keyframes drop2{from{transform:translateY(-60px) rotate(8deg);opacity:0}}
.bigpol .im{aspect-ratio:1;background:#3a2f27 center/cover;animation:develop 6s ease-out both}
.bigpol .hand{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:1.6rem;color:#3a332d;line-height:1.1}
footer{background:var(--ink);color:#b8ada1;padding:46px 0 40px;font-size:.88rem}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer .logo{color:var(--paper)}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--ink);color:var(--paper);padding:12px 22px;border-radius:999px;font-weight:600;font-size:.9rem;opacity:0;transition:.3s;z-index:320;pointer-events:none;max-width:90vw;text-align:center}.toast.on{opacity:1;transform:translate(-50%,0)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s,transform 1s}.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.gi .ph{opacity:1}}
@media(max-width:1000px){.menu{display:none}.burger{display:inline-flex;align-items:center;justify-content:center}.mnav.open{display:flex;flex-direction:column;padding:6px 5% 18px;background:rgba(14,12,11,.97);color:var(--paper)}.mnav a{padding:11px 0;border-bottom:1px solid var(--line)}.sheet{grid-template-columns:1fr 1fr}.wall,.gates,.rolls{grid-template-columns:1fr 1fr}.masonry{columns:2}.pcfg,.bk{grid-template-columns:1fr}.rcpt{position:static}.stack{transform:scale(.8);transform-origin:top right}}
@media(max-width:640px){section{padding:84px 0}.hero{height:92vh}.hcopy{bottom:96px}.hcopy h1{font-size:3.1rem}.vf{inset:14px}.af{gap:26px 34px}.read{gap:14px;font-size:.66rem}.stack{right:2%;top:84px;transform:scale(.62)}.hint{bottom:auto;top:96px;left:6%;right:auto;font-size:1.25rem}.wall,.gates,.rolls{grid-template-columns:1fr}.fr{width:230px}.masonry{columns:1}.feats{grid-template-columns:1fr}.g2{grid-template-columns:1fr}.cta{display:none}.roll{flex-direction:row;gap:20px;text-align:left;align-items:center}.roll h3{margin-top:0}.can{transform:scale(.75)}.roll.on .can{transform:scale(.75) translateY(-10px) rotate(-6deg)}.lbn .hand{font-size:1.2rem}}
/* ===== WOW: film leader countdown ===== */
#leader{position:fixed;inset:0;z-index:400;background:#1b1612;color:#f3ede4;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
#leader.gone{pointer-events:none}
#leader .jit{position:relative;width:min(80vmin,620px);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
#leader .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(243,237,228,.22) 0 var(--a,0deg),rgba(0,0,0,.25) var(--a,0deg) 360deg)}
#leader .ring{position:absolute;border-radius:50%;border:3px solid rgba(243,237,228,.85)}
#leader .r1{inset:0}#leader .r2{inset:9%}
#leader .hl,#leader .vl{position:absolute;background:rgba(243,237,228,.75)}
#leader .hl{left:-30vw;right:-30vw;top:50%;height:2px}#leader .vl{top:-30vh;bottom:-30vh;left:50%;width:2px}
#leader .num{position:relative;font-family:'Cormorant Garamond';font-weight:600;font-size:min(46vmin,360px);line-height:1;text-shadow:0 0 30px rgba(0,0,0,.5);animation:pop .25s ease-out}
@keyframes pop{from{transform:scale(1.25);opacity:.4}}
#leader canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.16;mix-blend-mode:screen;pointer-events:none}
#leader .scr{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.35);pointer-events:none}
#leader .sp{position:absolute;top:0;bottom:0;width:26px;background:repeating-linear-gradient(180deg,transparent 0 18px,rgba(243,237,228,.8) 18px 40px,transparent 40px 58px)}
#leader .sp.l{left:12px}#leader .sp.r{right:12px}
#leader .vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.75));pointer-events:none}
#leader .lbl{position:absolute;bottom:34px;left:0;right:0;text-align:center;font-family:'IBM Plex Mono';font-size:.72rem;letter-spacing:.3em;color:rgba(243,237,228,.7)}
#leader .skip{position:absolute;top:24px;right:60px;font-family:'IBM Plex Mono';font-size:.7rem;letter-spacing:.2em;color:rgba(243,237,228,.6);background:none;border:1px solid rgba(243,237,228,.3);border-radius:999px;padding:8px 14px}
#leader .open{position:absolute;inset:0;pointer-events:none}
#leader.flick{animation:lflick .12s steps(2) infinite}
@keyframes lflick{50%{filter:brightness(1.15)}}
#leader.out{animation:lout .9s cubic-bezier(.7,0,.3,1) forwards}
@keyframes lout{0%{clip-path:circle(150% at 50% 50%)}100%{clip-path:circle(0% at 50% 50%)}}
/* hero motion */
.scene{animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{0%{transform:scale(1.05) translate(0,0)}100%{transform:scale(1.16) translate(-2%,-1.5%)}}
.leak{position:absolute;inset:-20%;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:.55}
.leak:before,.leak:after{content:"";position:absolute;width:55%;height:55%;border-radius:50%;filter:blur(60px)}
.leak:before{left:-5%;top:10%;background:radial-gradient(circle,rgba(255,120,40,.85),transparent 65%);animation:lk1 9s ease-in-out infinite alternate}
.leak:after{right:-5%;bottom:5%;background:radial-gradient(circle,rgba(255,60,60,.6),transparent 65%);animation:lk2 12s ease-in-out infinite alternate}
@keyframes lk1{to{transform:translate(30%,20%) scale(1.3);opacity:.4}}
@keyframes lk2{to{transform:translate(-25%,-20%) scale(.8);opacity:.9}}
#grain{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;opacity:.06;mix-blend-mode:overlay}
.timer{position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);display:none;flex-direction:column;align-items:center;gap:10px;font-family:'IBM Plex Mono';color:#fff;pointer-events:none}
.timer.on{display:flex}
.timer i{width:16px;height:16px;border-radius:50%;background:var(--red);box-shadow:0 0 18px var(--red);animation:blink .3s infinite}
.timer b{font-size:3rem;font-weight:500}
.pw{animation:sway 6s ease-in-out infinite;animation-delay:calc(var(--d,0) * 1s)}
@keyframes sway{0%,100%{transform:rotate(var(--r))}50%{transform:rotate(calc(var(--r) * -0.4))}}
.pw:hover{animation:none}
/* ===== WOW 2: subpages ===== */
/* safelight intro */
#bulb{position:fixed;inset:0;z-index:400;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;pointer-events:none;animation:bulbout .7s 2.1s forwards}
#bulb .b{width:70px;height:96px;border-radius:50% 50% 45% 45%;background:#2a0a08;position:relative;animation:bulbon 1.9s steps(1) forwards}
#bulb .b:before{content:"";position:absolute;left:22px;top:-18px;width:26px;height:22px;border-radius:4px;background:#3a3633}
#bulb span{font-family:'IBM Plex Mono';font-size:.72rem;letter-spacing:.3em;color:#7a2a22;animation:bulbtx 1.9s steps(1) forwards}
@keyframes bulbon{0%{background:#2a0a08}20%{background:#e0412f;box-shadow:0 0 80px 30px rgba(200,56,43,.6)}28%{background:#2a0a08;box-shadow:none}45%{background:#e0412f;box-shadow:0 0 80px 30px rgba(200,56,43,.6)}52%{background:#2a0a08;box-shadow:none}70%,100%{background:#ff5a45;box-shadow:0 0 140px 60px rgba(200,56,43,.75)}}
@keyframes bulbtx{70%,100%{color:#ffb3a8}}
@keyframes bulbout{to{opacity:0;visibility:hidden}}
/* developing tray */
.trayw{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;margin-bottom:80px}
.tray{position:relative;aspect-ratio:4/3;border-radius:18px;background:linear-gradient(180deg,#3a1512,#200807);padding:24px;box-shadow:inset 0 0 0 10px #4a1d18,inset 0 0 60px rgba(0,0,0,.7),0 40px 70px -30px #000;overflow:hidden;cursor:grab;touch-action:none}
.tray .liq{position:absolute;inset:10px;border-radius:12px;background:linear-gradient(160deg,rgba(255,90,70,.12),rgba(120,20,10,.25));pointer-events:none}
.tray .paper{position:absolute;inset:16% 18%;background:#f6efe6;box-shadow:0 10px 20px rgba(0,0,0,.4);transform:rotate(-2deg);transition:transform .3s}
.tray .paper .im{position:absolute;inset:6%;background:#3a2f27 center/cover;opacity:var(--dev,0);filter:grayscale(calc(1 - var(--dev,0))) brightness(calc(2.2 - var(--dev,0) * 1.2)) contrast(calc(.3 + var(--dev,0) * .7))}
.rip{position:absolute;width:20px;height:20px;margin:-10px;border-radius:50%;border:2px solid rgba(255,170,150,.55);pointer-events:none;animation:rip 1.1s ease-out forwards}
@keyframes rip{to{transform:scale(9);opacity:0}}
.tbar{height:8px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden;margin:16px 0 8px}.tbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),#ffb3a8);transition:width .2s}
.tinfo h3{font-size:2.6rem;color:var(--paper)}.tinfo p{color:#b8ada1;margin:10px 0}
.tinfo .mono{color:#ffb3a8}
/* clothesline */
.line{position:relative;height:300px;margin:0 0 70px}
.line:before{content:"";position:absolute;left:-5%;right:-5%;top:24px;height:2px;background:#8d8379;border-radius:2px;transform:rotate(-.6deg)}
.hang{position:absolute;top:22px;width:150px;transform-origin:50% 0;animation:swing 4s ease-in-out infinite;animation-delay:var(--d);cursor:zoom-in}
.hang.new{animation:hangin .9s cubic-bezier(.2,1.4,.4,1),swing 4s 0.9s ease-in-out infinite}
@keyframes hangin{from{transform:translateY(-160px) rotate(25deg);opacity:0}}
@keyframes swing{0%,100%{transform:rotate(calc(var(--s,3deg)))}50%{transform:rotate(calc(var(--s,3deg) * -1))}}
.hang.wind{animation:windy .8s ease-out}
@keyframes windy{30%{transform:rotate(14deg)}60%{transform:rotate(-8deg)}}
.hang .pin{position:absolute;left:50%;top:-10px;width:12px;height:30px;margin-left:-6px;background:linear-gradient(90deg,#c9a46a,#e6cc9c,#c9a46a);border-radius:3px;z-index:2}
.hang .pp{background:#f6efe6;padding:8px 8px 24px;box-shadow:0 14px 24px -10px rgba(0,0,0,.6)}
.hang .pp div{aspect-ratio:4/5;background:#3a2f27 center/cover}
.hang .pp span{display:block;font-family:'Caveat';font-size:1.05rem;color:#3a332d;text-align:center;margin-top:4px;line-height:1}
/* loupe */
#loupe{position:fixed;left:0;top:0;width:180px;height:180px;margin:-90px;border-radius:50%;pointer-events:none;z-index:150;opacity:0;transition:opacity .2s;box-shadow:0 0 0 6px #1b1612,0 0 0 9px #c9a46a,0 20px 40px rgba(0,0,0,.6);background:#3a2f27 no-repeat}
#loupe.on{opacity:1}
#loupe:after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.35),transparent 40%)}
/* camera loading */
.camw{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;margin-bottom:40px}
.cam{position:relative;width:300px;height:190px}
.cam .bod{position:absolute;left:0;right:0;top:30px;bottom:0;border-radius:16px;background:linear-gradient(180deg,#2b2622,#151210);box-shadow:0 30px 50px -24px rgba(0,0,0,.6)}
.cam .bod:before{content:"";position:absolute;left:0;right:0;top:36px;height:60px;background:repeating-linear-gradient(90deg,#1e1a17 0 3px,#26211d 3px 6px)}
.cam .top{position:absolute;left:24px;right:24px;top:8px;height:30px;border-radius:8px 8px 0 0;background:linear-gradient(90deg,#8d847b,#e0d9cf 40%,#8d847b)}
.cam .lev{position:absolute;right:46px;top:0;width:50px;height:10px;border-radius:6px;background:#5d554e;transform-origin:85% 50%;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.cam.wind .lev{transform:rotate(-40deg)}
.cam .lens{position:absolute;left:50%;top:62px;width:110px;height:110px;margin-left:-55px;border-radius:50%;background:radial-gradient(circle,#0a0a0a 0 30%,#2c2a28 31% 42%,#111 43% 58%,#3a3633 59% 66%,#151210 67%);box-shadow:0 0 0 6px #2b2622}
.cam .lens:after{content:"";position:absolute;left:30%;top:24%;width:22%;height:14%;border-radius:50%;background:rgba(255,255,255,.25);transform:rotate(-30deg)}
.cam .cnt{position:absolute;left:36px;top:12px;width:44px;height:20px;border-radius:4px;background:#101010;color:#ffb35c;font-family:'IBM Plex Mono';font-size:.75rem;display:flex;align-items:center;justify-content:center}
.cam .lbl3{position:absolute;left:0;right:0;bottom:-34px;text-align:center;font-family:'IBM Plex Mono';font-size:.68rem;letter-spacing:.16em;color:var(--muted)}
.cam.drop .bod{box-shadow:0 0 0 4px var(--gold),0 30px 50px -24px rgba(0,0,0,.6)}
.fly{position:fixed;z-index:300;pointer-events:none;transition:transform .7s cubic-bezier(.6,0,.2,1),opacity .7s}
.roll .can{touch-action:none;cursor:grab}
.roll .can.dragging{cursor:grabbing;transition:none;z-index:50}
.rcpt.print{animation:print .7s steps(10) both}
@keyframes print{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
/* golden hour */
.gold{margin-top:20px;background:linear-gradient(180deg,#fff6e6,#fbe6c4);border-radius:18px;padding:18px;display:none}
.gold.on{display:block;animation:fadein2 .5s}
.gold svg{width:100%;height:auto;display:block}
.gold .gr{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.gold .gr div{background:rgba(255,255,255,.6);border-radius:10px;padding:8px 10px}.gold .gr span{display:block;font-size:.68rem;color:#8a6a3a;font-family:'IBM Plex Mono';letter-spacing:.08em}.gold .gr b{font-family:'Cormorant Garamond';font-size:1.4rem}
.cal button.on{background:transparent;color:var(--ink)}
.cal button.on:after{content:"";position:absolute;inset:-4px;border:2.5px solid var(--red);border-radius:52% 48% 55% 45%/50% 55% 45% 50%;transform:rotate(-8deg);animation:circ .4s ease-out}
@keyframes circ{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* shake polaroid */
.bigpol{touch-action:none;cursor:grab}
.bigpol .im{animation:none;filter:grayscale(calc(1 - var(--dev,0))) brightness(calc(2.6 - var(--dev,0) * 1.6)) contrast(calc(.25 + var(--dev,0) * .75));opacity:calc(.15 + var(--dev,0) * .85)}
.shk{margin-top:18px;font-family:'Caveat';font-size:1.6rem;color:var(--red);animation:float 1.6s ease-in-out infinite}
.heart{position:fixed;z-index:300;pointer-events:none;color:var(--red);font-size:1.4rem;animation:heart 1.4s ease-out forwards}
@keyframes heart{to{transform:translate(var(--x),var(--y)) scale(.4) rotate(var(--r));opacity:0}}
@media(max-width:1000px){.trayw,.camw{grid-template-columns:1fr}.cam{margin:0 auto 40px}}
@media(max-width:640px){.line{height:240px}.hang{width:110px}#loupe{display:none}}