/* WRENFIELD ESTATE · cinematic cut
   Base = a static, readable film strip (no-JS, reduced motion). html.cine = pinned, scrubbed, animated. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/Fraunces-Variable.woff2') format('woff2-variations')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url('fonts/Fraunces-Variable-Italic.woff2') format('woff2-variations')}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/CourierPrime-400.woff2') format('woff2')}

:root{
  --black:#0e0b08; --night:#15100b; --cream:#f3eadb; --cream-2:#cdbfa8; --amber:#e0a06a; --amber-ink:#9a4a12;
  --serif:'Fraunces',Georgia,serif; --mono:'Courier Prime',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1); --gut:clamp(18px,4vw,56px);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--black)}
body{margin:0;background:var(--black);color:var(--cream);font-family:var(--serif);font-weight:320;
  font-variation-settings:'opsz' 36,'SOFT' 50;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,p{margin:0}
h1,h2{font-weight:300;letter-spacing:-.02em;line-height:.98;font-variation-settings:'opsz' 144,'SOFT' 80}
em{font-style:italic;font-variation-settings:'opsz' 144,'SOFT' 100;color:var(--amber)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;z-index:999;background:var(--cream);color:var(--black);padding:12px 16px}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.reel-no,.kicker,.hud,.open-foot,figcaption,.proof,.menu-list span,cite,.sub,dt{font-family:var(--mono);text-transform:uppercase;letter-spacing:.22em;font-size:.7rem}
.reel-no{color:var(--amber);margin-bottom:18px}
.sub{color:var(--cream-2);margin-top:18px;letter-spacing:.16em;line-height:1.7}

/* film grain + vignette */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,2%)}80%{transform:translate(4%,6%)}100%{transform:translate(0,0)}}
.letterbox{display:none}

/* top bar */
.top{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;justify-content:space-between;align-items:center;
  padding:calc(16px + env(safe-area-inset-top,0px)) var(--gut) 16px;mix-blend-mode:difference}
.logo img{height:28px;width:auto;filter:invert(1)}
.top-r{display:flex;gap:22px;align-items:center}
.top-r a,.top-r button{all:unset;cursor:pointer;font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;padding:8px 0}
.top-r .date-cta{border-bottom:1px solid #fff}
.top-r a:focus-visible,.top-r button:focus-visible{outline:2px solid #fff;outline-offset:4px}
.top{transition:opacity .5s ease}
.top.off{opacity:0;pointer-events:none}
.top-r .date-cta{transition:opacity .4s ease}
.top-r .date-cta.here{opacity:0;pointer-events:none}
@media (max-width:600px){.top-r{gap:16px}.top-r a,.top-r button{letter-spacing:.14em;font-size:.68rem}}
/* one grade across every photograph (finish pass) */
section img{filter:saturate(.86) contrast(1.04) sepia(.05)}
/* the cut: long jumps fade through black instead of flying through every reel */
.cut{position:fixed;inset:0;z-index:95;background:#000;opacity:0;pointer-events:none;transition:opacity .32s ease}
.cut.on{opacity:1}
.hud{transition:opacity .4s ease}.hud.off{opacity:0}

/* menu overlay */
.menu{position:fixed;inset:0;z-index:95;background:var(--black);display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0 var(--gut)}
.menu[hidden]{display:none}
.menu-imgs{position:relative;height:72vh;overflow:hidden}
.menu-imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .8s var(--ease),transform 1.6s var(--ease)}
.menu-imgs img.on{opacity:1;transform:none}
.menu-list{list-style:none;margin:0;padding:0 0 0 6vw;counter-reset:m}
.menu-list a{display:flex;gap:22px;align-items:baseline;text-decoration:none;font-size:clamp(2.2rem,5vw,4.6rem);line-height:1.12;font-weight:300;
  color:var(--cream-2);transition:color .4s,transform .6s var(--ease)}
.menu-list a:hover,.menu-list a:focus-visible{color:var(--cream);transform:translateX(12px)}
.menu-list span{color:var(--amber);min-width:3ch}
.menu-foot{position:absolute;bottom:calc(24px + env(safe-area-inset-bottom,0px));left:var(--gut);right:var(--gut);display:flex;flex-wrap:wrap;gap:12px 32px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-2)}
.menu-close{all:unset;cursor:pointer;position:absolute;top:calc(20px + env(safe-area-inset-top,0px));right:var(--gut);font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.menu-close:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
@media (max-width:800px){.menu{grid-template-columns:1fr}.menu-imgs{display:none}.menu-list{padding:0}}

/* OPENING */
.open{position:relative;height:100svh;min-height:560px;overflow:hidden;display:grid;align-items:end}
.open-reel,.open-reel img{position:absolute;inset:0;width:100%;height:100%}
.open-reel img{object-fit:cover;object-position:62% 50%;opacity:0;transition:opacity 2.2s ease}
.open-reel img.on{opacity:1;z-index:2}
.open-reel img.was{opacity:1;z-index:1;transition:none}
.open-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,11,8,.62),rgba(14,11,8,.22) 24%,rgba(14,11,8,.3) 50%,rgba(14,11,8,.82))} /* first-screen legibility: the pale-sky slide hid the header and eyebrow (OUTREACH/INFRA 13:33Z) */
.curtain{display:none}
.open-copy{position:relative;z-index:3;padding:0 var(--gut) clamp(90px,14vh,150px)}
.kicker{color:var(--cream-2);margin-bottom:22px}
.open h1{font-size:clamp(3.2rem,10vw,10.5rem)}
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ln > span{display:block}
.open-foot{position:absolute;z-index:3;left:var(--gut);right:var(--gut);bottom:calc(26px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;align-items:center;color:var(--cream-2)}
.scroll-cue{width:1px;height:42px;background:linear-gradient(var(--cream),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:600px){.open-foot span:last-child{display:none}}

/* STATEMENT */
.statement{min-height:80vh;display:grid;place-items:center;padding:18vh var(--gut)}
.big{font-size:clamp(2.4rem,6.4vw,6.4rem);line-height:1.02;font-weight:300;letter-spacing:-.02em;text-align:center;max-width:15ch;margin:auto;font-variation-settings:'opsz' 144,'SOFT' 80}
.big .w{display:inline-block}

/* VOW */
.vow-pin{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden}
.vow-frame{margin:0;position:absolute;inset:0}
.vow-frame img{width:100%;height:100%;object-fit:cover}
.vow-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,11,8,0) 40%,rgba(14,11,8,.75))}
.vow-copy{position:absolute;z-index:2;left:var(--gut);bottom:clamp(40px,10vh,110px);right:var(--gut)}
.vow h2,.stage h2,.stay h2,.seasons h2,.hours h2{font-size:clamp(2.6rem,7vw,7rem)}

/* HOURS */
.hours{background:var(--night)}
.hours-pin{padding:14vh 0 10vh;overflow:hidden}
.hours-head{padding:0 var(--gut) 6vh}
.track{display:flex;gap:clamp(16px,3vw,48px);padding:0 var(--gut);overflow-x:auto;scroll-snap-type:x mandatory}
.frame{margin:0;flex:0 0 clamp(280px,60vw,1000px);scroll-snap-align:start}
.fimg{overflow:hidden;aspect-ratio:16/10}
.fimg img{width:100%;height:100%;object-fit:cover;transform:scale(1.15)}
.frame figcaption{display:flex;gap:20px;align-items:baseline;margin-top:18px;color:var(--cream-2);font-size:.75rem}
.frame figcaption b{color:var(--amber);font-weight:400}
.hours-bar{height:1px;background:rgba(243,234,219,.15);margin:6vh var(--gut) 0}
.hours-bar i{display:block;height:100%;width:100%;background:var(--amber);transform-origin:left;transform:scaleX(0)}
@media (max-width:800px){.frame{flex-basis:85vw}}

/* SEASONS */
.seasons-pin{position:relative}
.slide{margin:0;position:relative;height:100svh;overflow:hidden}
.slide img{width:100%;height:100%;object-fit:cover}
.slide figcaption{position:absolute;right:var(--gut);bottom:clamp(30px,8vh,80px);font-family:var(--serif);text-transform:none;letter-spacing:-.02em;
  font-size:clamp(3.6rem,13vw,13rem);font-weight:300;font-style:italic;color:rgba(243,234,219,.92);line-height:.9;text-shadow:0 4px 40px rgba(0,0,0,.35)}
.seasons-copy{position:absolute;top:0;left:var(--gut);padding-top:15vh;z-index:3;max-width:min(88vw,760px);text-shadow:0 2px 30px rgba(0,0,0,.55)}
.seasons h2{font-size:clamp(2.2rem,4.6vw,4.6rem)!important}
.season-ticks{display:none}

/* RAIN */
.rain-pin{position:relative;height:100svh;overflow:hidden;display:grid;place-items:center}
.rain-pin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rain-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rain-copy{position:relative;z-index:2;text-align:center;padding:0 var(--gut)}
.rain h2{font-size:clamp(2.8rem,8vw,8rem);text-shadow:0 4px 50px rgba(0,0,0,.5)}
.rain-pin::after{content:"";position:absolute;inset:0;background:rgba(14,11,8,.35);pointer-events:none}
.rain-copy{z-index:3}

/* STAGE */
.stage{position:relative;background:#000;overflow:hidden}
.stage-curtain{display:none}
.spot{position:relative;height:100svh;overflow:hidden}
.spot img{width:100%;height:100%;object-fit:cover}
.spot-mask{position:absolute;inset:0;background:radial-gradient(circle at var(--sx,50%) var(--sy,55%),rgba(0,0,0,0) 0,rgba(0,0,0,0) 18vmax,rgba(0,0,0,.66) 40vmax)}
.stage-copy{position:absolute;z-index:3;left:var(--gut);top:18vh;max-width:min(88vw,820px)}
.stage h2{font-size:clamp(2.6rem,6vw,6rem)!important}
.stage-copy .sub{max-width:34ch}
.fan{display:flex;justify-content:center;gap:clamp(12px,2vw,28px);padding:14vh var(--gut) 18vh}
.fan figure{margin:0;flex:0 1 26vw;aspect-ratio:3/4;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.fan img{width:100%;height:100%;object-fit:cover}
@media (max-width:800px){.fan{flex-direction:column;align-items:center}.fan figure{flex-basis:auto;width:78vw}}

/* STAY */
.stay{position:relative;min-height:120vh;padding:18vh var(--gut);display:grid;grid-template-columns:repeat(12,1fr);align-items:center;background:var(--night)}
.stay figure{margin:0;overflow:hidden}
.stay img{width:100%;height:100%;object-fit:cover}
.stay-a{grid-column:1 / 8;grid-row:1;aspect-ratio:4/3}
.stay-b{grid-column:8 / 13;grid-row:1;aspect-ratio:3/4;transform:translateY(22vh);z-index:2}
.stay-copy{grid-column:2 / 11;grid-row:2;margin-top:-8vh;position:relative;z-index:3;text-shadow:0 2px 30px rgba(0,0,0,.5)}
@media (max-width:800px){.stay{display:block}.stay-b{width:60%;margin:-20vh 0 0 auto;transform:none}.stay-copy{margin-top:6vh}}

/* QUOTE */
.quote{position:relative;min-height:110vh;display:grid;place-items:center;overflow:hidden;padding:20vh var(--gut)}
.quote img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38}
.quote::before{content:"";position:absolute;inset:0 0 auto;height:45%;z-index:1;background:linear-gradient(var(--night),rgba(0,0,0,0));pointer-events:none}
.quote blockquote{z-index:2}
.quote blockquote{position:relative;margin:0;text-align:center}
.quote cite{display:block;margin-top:34px;font-style:normal;color:var(--cream-2)}

/* DATE */
.date{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;text-align:center;padding:16vh var(--gut)}
.date-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.date::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,rgba(14,11,8,.35),rgba(14,11,8,.85))}
.date-inner{position:relative;z-index:2;width:min(980px,100%)}
.date h2{font-size:clamp(3rem,9vw,9rem);margin-bottom:6vh}
.date-form{display:grid;grid-template-columns:1.1fr 1.2fr 1.4fr auto;gap:0;border:1px solid rgba(243,234,219,.5);background:rgba(14,11,8,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.date-form label{display:flex;flex-direction:column;text-align:left;padding:12px 16px;border-right:1px solid rgba(243,234,219,.25)}
.date-form label span{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-2)}
.date-form input{all:unset;font-family:var(--serif);font-size:1.1rem;color:var(--cream);padding-top:4px;min-height:28px;color-scheme:dark}
.date-form input::placeholder{color:rgba(243,234,219,.4)}
.date-form label:focus-within{background:rgba(243,234,219,.08)}
.date-form button{all:unset;cursor:pointer;padding:0 30px;background:var(--cream);color:var(--black);font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;text-align:center;min-height:64px}
.date-form button:hover{background:var(--amber)}
.date-form button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.date-form .hp{position:absolute;left:-9999px}
.proof{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:28px;color:var(--cream-2);font-size:.64rem}
.call{margin-top:16px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--cream-2)}
.sent{border:1px solid rgba(243,234,219,.5);padding:22px;background:rgba(14,11,8,.55);backdrop-filter:blur(8px)}
.sent pre{font-family:var(--mono);font-size:.78rem;text-align:left;white-space:pre-wrap;color:var(--cream);margin:14px 0 0}
@media (max-width:800px){.date-form{grid-template-columns:1fr}.date-form label{border-right:0;border-bottom:1px solid rgba(243,234,219,.25)}}

/* CREDITS */
.credits{min-height:120vh;display:grid;place-items:center;padding:20vh var(--gut);text-align:center;background:#000}
.credits-logo{height:34px;width:auto;margin:0 auto 9vh;filter:invert(1)}
.credits dl{margin:0}
.credits dl div{margin:0 0 5vh}
.credits dt{color:var(--cream-2);font-size:.64rem;margin-bottom:10px}
.credits dd{margin:0;font-size:clamp(1.4rem,2.6vw,2.2rem);font-weight:300}
.fin{margin-top:10vh;font-style:italic;font-size:clamp(2rem,4vw,3.4rem);color:var(--amber)}

/* FOOTER */
.foot{background:#000;padding:8vh var(--gut) calc(90px + env(safe-area-inset-bottom,0px));color:var(--cream-2);font-family:var(--mono);font-size:.7rem;letter-spacing:.1em}
.foot > p{text-transform:uppercase;letter-spacing:.16em}
.clause{margin-top:32px;max-width:900px;font-family:var(--serif);font-size:.82rem;letter-spacing:0;line-height:1.6;color:#9d917e}
.clause h2{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-2);margin-bottom:8px;font-weight:400}

/* HUD */
.hud{position:fixed;z-index:85;left:var(--gut);right:var(--gut);bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;
  color:rgba(243,234,219,.7);font-size:.6rem;pointer-events:none;mix-blend-mode:difference}
.hud-mark{opacity:.7}
@media (max-width:600px){.hud-mark{display:none}}
.cursor{display:none}

/* ================= CINEMA LAYER (motion allowed, JS on) ================= */
html.cine .letterbox{display:block;position:fixed;inset:0;z-index:70;pointer-events:none}
html.cine .letterbox i{position:absolute;left:0;right:0;height:9vh;background:#000;transform:scaleY(1)}
html.cine .letterbox i:first-child{top:0;transform-origin:top}
html.cine .letterbox i:last-child{bottom:0;transform-origin:bottom}
html.cine .curtain{display:block;position:absolute;inset:0;z-index:4;pointer-events:none}
html.cine .curtain i{position:absolute;top:0;bottom:0;width:50.5%;background:var(--black)}
html.cine .curtain i:first-child{left:0}
html.cine .curtain i:last-child{right:0}
html.cine .open-reel img.on,html.cine .open-reel img.was{animation:kb 14s linear forwards}
@keyframes kb{from{transform:scale(1.14) translate3d(1%,1%,0)}to{transform:scale(1) translate3d(0,0,0)}}
html.cine .hours-pin{height:100svh;padding:12vh 0 0;display:flex;flex-direction:column}
html.cine .track{overflow:visible;scroll-snap-type:none;flex:1;align-items:center}
html.cine .frame{flex-basis:clamp(280px,58vw,980px)}
html.cine .seasons-pin{height:100svh;overflow:hidden}
html.cine .slide{position:absolute;inset:0}
html.cine .season-ticks{display:flex;position:absolute;z-index:3;left:var(--gut);bottom:clamp(30px,8vh,80px);gap:18px;list-style:none;margin:0;padding:0;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(243,234,219,.45)}
html.cine .season-ticks li.on{color:var(--cream)}
html.cine .stage-curtain{display:block;position:absolute;inset:0;z-index:5;pointer-events:none}
html.cine .stage-curtain i{position:absolute;top:0;bottom:0;width:50.5%;background:linear-gradient(90deg,#1a0e0a,#2a1510 40%,#140a07);}
html.cine .stage-curtain i:first-child{left:0;box-shadow:inset -30px 0 60px rgba(0,0,0,.6)}
html.cine .stage-curtain i:last-child{right:0;box-shadow:inset 30px 0 60px rgba(0,0,0,.6)}
@media (hover:hover) and (pointer:fine){
  html.cine .cursor{display:block;position:fixed;z-index:99;left:0;top:0;pointer-events:none;mix-blend-mode:difference}
  html.cine .cursor span{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border:1px solid #fff;border-radius:50%;
    display:grid;place-items:center;font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),background .4s}
  html.cine .cursor.big span{width:86px;height:86px;margin:-43px 0 0 -43px}
}
.slide::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(14,11,8,.55) 0,rgba(14,11,8,0) 38%,rgba(14,11,8,0) 60%,rgba(14,11,8,.45) 100%)}
.slide figcaption{z-index:2}
.stage h2,.stage .sub{text-shadow:0 2px 30px #000}
@media (max-width:800px){.stage-copy{top:auto;bottom:12vh}.stage h2{font-size:clamp(2.2rem,9vw,3.4rem)!important}}
html.cine .slide{z-index:0}

/* ===== v2.1 additions: theater CTAs · Beyond the wedding · The place · occasion ===== */
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn-cine,.btn-ghost{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:background .3s,color .3s}
.btn-cine{background:var(--cream);color:var(--black)}
.btn-cine:hover{background:var(--amber)}
.btn-ghost{border:1px solid rgba(243,234,219,.6);color:var(--cream)}
.btn-ghost:hover{background:var(--cream);color:var(--black)}
@media (max-width:800px){
  .stage{display:flex;flex-direction:column}
  .stage-copy{position:relative!important;top:auto!important;bottom:auto!important;left:auto;order:0;padding:16vh var(--gut) 6vh;max-width:none}
  .spot{order:1;height:70svh}.fan{order:2}.stage-curtain{order:-1}
}

/* BEYOND */
.beyond{position:relative;background:#000}
.beyond-pin{position:relative;min-height:100svh;overflow:hidden;padding:16vh var(--gut) 12vh}
.b-imgs,.b-imgs img,.b-shade{position:absolute;inset:0;width:100%;height:100%}
.b-imgs img{object-fit:cover;opacity:0;transform:scale(1.12);transition:opacity 1.1s ease,transform 2.8s var(--ease)}
.b-imgs img.on{opacity:1;transform:scale(1)}
.b-shade{background:linear-gradient(90deg,rgba(10,8,6,.88) 0,rgba(10,8,6,.55) 45%,rgba(10,8,6,.15) 100%),linear-gradient(180deg,rgba(10,8,6,.5),rgba(10,8,6,0) 30%)}
section .b-imgs img{filter:saturate(.72) contrast(1.02) sepia(.08)}
@media (max-width:800px){.b-shade{background:linear-gradient(180deg,rgba(10,8,6,.7),rgba(10,8,6,.62) 40%,rgba(10,8,6,.78))}}
.b-head{position:relative;z-index:2;max-width:min(88vw,760px);margin-bottom:6vh}
.b-head h2{font-size:clamp(2.4rem,5vw,5rem)}
.b-list{position:relative;z-index:2;list-style:none;margin:0;padding:0;max-width:min(92vw,720px)}
.b-item a{display:grid;grid-template-columns:3.2ch 1fr;gap:0 18px;padding:12px 0;border-top:1px solid rgba(243,234,219,.16);text-decoration:none;color:rgba(243,234,219,.42);transition:color .5s}
.b-item:last-child a{border-bottom:1px solid rgba(243,234,219,.16)}
.b-n{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;padding-top:.7em;color:var(--amber)}
.b-t{font-size:clamp(1.5rem,2.8vw,2.6rem);font-weight:300;letter-spacing:-.01em;line-height:1.1}
.b-t sup{font-family:var(--mono);font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;vertical-align:super;color:#b9c4a0;margin-left:8px}
.b-l,.b-tag{grid-column:2;overflow:hidden;max-height:0;opacity:0;transition:max-height .6s var(--ease),opacity .6s,margin .6s}
.b-l{font-size:clamp(1rem,1.4vw,1.2rem);color:var(--cream)}
.b-tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.b-item.on a,.b-item a:hover,.b-item a:focus-visible{color:var(--cream)}
.b-item.on .b-l,.b-item.on .b-tag{max-height:4em;opacity:1;margin-top:8px}
.b-count{position:absolute;z-index:2;right:var(--gut);bottom:12vh;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--cream-2)}
.b-cur{font-size:2.4rem;letter-spacing:0;color:var(--cream);font-family:var(--serif);font-weight:300}
html:not(.cine) .b-l,html:not(.cine) .b-tag{max-height:none;opacity:1;margin-top:6px}
html:not(.cine) .b-item a{color:var(--cream)}
html:not(.cine) .b-count{display:none}

/* THE PLACE */
.where-pin{position:relative;min-height:100svh;overflow:hidden;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:4vw;padding:14vh var(--gut)}
.where-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(.85)}
.where-copy,.route,.where-stats{position:relative;z-index:2}
.where h2{font-size:clamp(2.6rem,6vw,6rem)}
.route{grid-row:1 / 3;grid-column:2;width:100%;max-height:78vh}
.route .river{fill:none;stroke:rgba(243,234,219,.16);stroke-width:14;stroke-linecap:round}
.route .line{fill:none;stroke:var(--amber);stroke-width:2;stroke-linecap:round;stroke-dasharray:6 8}
.route .pt circle{fill:var(--black);stroke:var(--cream);stroke-width:2}
.route .pt.here circle{fill:var(--amber);stroke:var(--amber)}
.route text{fill:var(--cream);font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.route .here text{fill:var(--amber);font-size:15px}
.where-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 32px;max-width:640px}
.where-stats b{display:block;font-weight:300;font-size:clamp(2.6rem,5vw,4.6rem);line-height:1;font-variation-settings:'opsz' 144;color:var(--cream)}
.where-stats span{display:block;margin-top:8px;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-2);line-height:1.6}
@media (max-width:800px){.where-pin{grid-template-columns:1fr}.route{grid-row:auto;grid-column:auto;max-height:46vh}}

/* occasion */
.date-sub{margin:-3vh 0 4vh}
.date-form{grid-template-columns:1.25fr 1fr 1fr 1.2fr .6fr auto}
.date-form select{all:unset;font-family:var(--serif);font-size:1.05rem;color:var(--cream);padding-top:4px;min-height:28px;cursor:pointer}
.date-form select option{color:#111}
@media (max-width:800px){.date-form{grid-template-columns:1fr}}
.call a{color:var(--cream)}
.date-form button{white-space:nowrap;padding:0 26px}

.pp{display:contents}

/* touch screens have no pointer: never draw the cursor ring (it sat at 0,0 as a stray half circle) */
@media (hover:none),(pointer:coarse){html.cine .cursor{display:none}}

/* the eyebrow sits on the pale sky of the first slide: give it a soft ground */
.open-copy .kicker{color:#fff;font-weight:500;text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.45)}