/* The York - site styles. Tokens from brand/DECISION.md. Nothing pure black or white. */
:root{
  --stucco:#ECE6DA; --stucco-2:#E4DCCD; --paper:#F3EEE4;
  --brick:#B4592C; --brick-deep:#96461F;
  --green:#2A3A30; --green-2:#34473B;
  --brass:#B08D52; --iron:#211F1B;
  --ink:#2B2823; --muted:#6F685D; --line:#D3C9B7;
  --on-dark:#ECE6DA; --on-dark-muted:#AFA898;
  --sans:'Jost','Segoe UI',system-ui,sans-serif;
  --wrap:min(1240px, 100% - 48px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--stucco);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--brick)}
:focus-visible{outline:2px solid var(--brick);outline-offset:3px}
.wrap{width:var(--wrap);margin-inline:auto}
h1,h2,h3{font-weight:300;line-height:1.05;margin:0;letter-spacing:.01em}
h2{font-size:clamp(34px,4.6vw,60px)}
.lede{font-size:clamp(19px,1.6vw,22px);color:var(--muted);max-width:34em;font-weight:300}
.btn{display:inline-flex;align-items:center;gap:10px;font:400 16px/1 var(--sans);letter-spacing:.04em;padding:15px 26px;border:1px solid var(--brick);background:var(--brick);color:var(--paper);border-radius:999px;cursor:pointer;text-decoration:none;transition:background .25s var(--ease),color .25s var(--ease)}
.btn:hover{background:var(--brick-deep);border-color:var(--brick-deep);color:var(--paper)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn[disabled]{opacity:.5;cursor:default}

/* header */
.top{position:fixed;inset:0 0 auto;z-index:20;transition:background .3s var(--ease),box-shadow .3s}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.top.solid{background:rgba(236,230,218,.94);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand svg{width:44px;height:30px;color:var(--brick)}
.brand span{font-weight:300;font-size:21px;letter-spacing:.16em}
.nav{display:flex;align-items:center;gap:30px;font-size:15px;letter-spacing:.05em}
.nav a{text-decoration:none}
@media (max-width:760px){.nav a:not(.btn){display:none}.nav .btn{padding:11px 18px}}

/* hero */
.hero{min-height:100svh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;padding:110px max(24px,calc((100% - 1240px)/2)) 60px}
.hero-copy{display:flex;flex-direction:column;gap:28px}
.hero-mark{width:clamp(120px,14vw,190px);color:var(--brick)}
.hero-mark *{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.hero.go .hero-mark *{animation:draw 1.1s var(--ease) forwards;animation-delay:calc(var(--i)*70ms)}
@keyframes draw{to{stroke-dashoffset:0}}
.hero h1{font-weight:200;font-size:clamp(64px,10.5vw,168px);letter-spacing:.06em;line-height:.92;opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease) .75s,transform 1.2s var(--ease) .75s}
.hero.go h1{opacity:1;transform:none}
.hero .place{font-size:14px;letter-spacing:.34em;color:var(--brick);text-transform:none}
.hero p.lede{opacity:0;transition:opacity 1s var(--ease) 1.1s}
.hero.go p.lede{opacity:1}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;opacity:0;transition:opacity 1s var(--ease) 1.3s}
.hero.go .hero-cta{opacity:1}
/* the one memorable moment: the facade rises into an arch like the sun over the horizon */
.arch{position:relative;justify-self:center;width:min(100%,520px);aspect-ratio:4/5.2}
.arch .window{position:absolute;inset:0;border-radius:999px 999px 6px 6px;overflow:hidden;clip-path:inset(100% 0 0 0);transition:clip-path 1.6s var(--ease) .2s;background:var(--stucco-2)}
.hero.go .arch .window{clip-path:inset(0 0 0 0)}
.arch img{width:100%;height:100%;object-fit:cover;object-position:52% 35%;transform:scale(1.12);transition:transform 2.4s var(--ease) .2s}
.hero.go .arch img{transform:scale(1)}
.arch::after{content:"";position:absolute;left:-8%;right:-8%;bottom:-1px;height:1px;background:var(--ink);opacity:.5}
.arch .cap{position:absolute;right:0;bottom:-30px;font-size:13px;color:var(--muted)}
@media (max-width:900px){.hero{grid-template-columns:1fr;padding-top:100px}.arch{width:min(100%,420px);order:-1}}
@media (prefers-reduced-motion:reduce){.hero-mark *{stroke-dashoffset:0!important;animation:none!important}.hero h1,.hero p.lede,.hero-cta{opacity:1;transform:none;transition:none}.arch .window{clip-path:none;transition:none}.arch img{transform:none;transition:none}}

/* where it is - resting, dark green */
.where{background:var(--green);color:var(--on-dark);padding:clamp(80px,11vw,150px) 0}
.where .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:end}
.where h2{color:var(--on-dark)}
.where .lede{color:var(--on-dark-muted)}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.facts li{border-top:1px solid rgba(236,230,218,.18);padding-top:16px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:baseline}
.facts b{font-weight:300;font-size:34px;color:var(--brass);min-width:3.2ch}
.facts span{color:var(--on-dark-muted);font-size:16px}
.facts a{color:var(--on-dark)}
@media (max-width:900px){.where .wrap{grid-template-columns:1fr}}

/* rooms - sticky photo + scrolling list */
.rooms{padding:clamp(90px,11vw,150px) 0 40px}
.rooms-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:60px}
.rooms-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:64px}
.stage{position:sticky;top:100px;height:calc(100svh - 140px);border-radius:4px;overflow:hidden;background:var(--stucco-2)}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease),transform 1.4s var(--ease);transform:scale(1.04)}
.stage img.on{opacity:1;transform:none}
.stage .count{position:absolute;left:18px;bottom:16px;background:rgba(33,31,27,.62);color:var(--on-dark);font-size:13px;padding:6px 12px;border-radius:999px}
.room{min-height:78svh;display:flex;flex-direction:column;justify-content:center;gap:18px;border-top:1px solid var(--line);padding:40px 0}
.room h3{font-size:clamp(34px,3.6vw,50px)}
.room .line{font-size:20px;font-weight:300;max-width:24em}
.room ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.room li{font-size:14px;border:1px solid var(--line);border-radius:999px;padding:5px 13px;color:var(--muted)}
.room .price{font-size:17px}.room .price b{font-weight:400;font-size:26px;color:var(--brick)}
.room .thumbs{display:none}
.room .note{font-size:13px;color:var(--muted)}
@media (max-width:900px){.rooms-grid{grid-template-columns:1fr}.stage{display:none}.room{min-height:0}.room .thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:85%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory}.room .thumbs img{aspect-ratio:4/3;object-fit:cover;scroll-snap-align:start;border-radius:4px}}

/* inside - resting grid */
.inside{padding:clamp(70px,9vw,120px) 0}
.inside-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:44px}
.inside figure{margin:0;position:relative;overflow:hidden;border-radius:4px}
.inside figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.inside figcaption{font-size:14px;color:var(--muted);padding-top:10px}
.inside figure:nth-child(1){grid-column:span 3}.inside figure:nth-child(1) img{aspect-ratio:4/3.1}
.inside figure:nth-child(2){grid-column:span 3}.inside figure:nth-child(2) img{aspect-ratio:4/3.1}
.inside figure:nth-child(n+3){grid-column:span 2}
@media (max-width:760px){.inside-grid{grid-template-columns:1fr 1fr}.inside figure{grid-column:span 1!important}.inside figure img{aspect-ratio:1!important}}

/* street */
.street{background:var(--stucco-2);padding:clamp(80px,10vw,140px) 0}
.street .wrap{display:grid;grid-template-columns:1fr 1.25fr;gap:60px;align-items:center}
.map{border-radius:4px;overflow:hidden;box-shadow:0 1px 0 var(--line)}
.map svg,.map img{width:100%;height:auto;display:block}
.dist{list-style:none;padding:0;margin:30px 0 0}
.dist li{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:12px 0;font-size:17px}
.dist li span:last-child{color:var(--muted)}
.credit{font-size:13px;color:var(--muted);margin-top:14px}
@media (max-width:900px){.street .wrap{grid-template-columns:1fr}}

/* book */
.book{background:var(--iron);color:var(--on-dark);padding:clamp(90px,11vw,150px) 0}
.book h2{color:var(--on-dark)}
.book .lede{color:var(--on-dark-muted)}
.search{display:grid;grid-template-columns:1fr 1fr .7fr .7fr auto;gap:12px;margin-top:44px;align-items:end}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;color:var(--on-dark-muted);letter-spacing:.03em}
.field input,.field select{font:400 17px var(--sans);color:var(--on-dark);background:transparent;border:1px solid rgba(236,230,218,.3);border-radius:4px;padding:14px 14px;min-height:54px;color-scheme:dark}
.field input:focus,.field select:focus{border-color:var(--brass);outline:none}
.book .btn{min-height:54px}
@media (max-width:760px){.search{grid-template-columns:1fr 1fr}.search .btn{grid-column:span 2;justify-content:center}}
.msg{margin-top:18px;min-height:24px;color:#E7B38F;font-size:16px}
.results{display:grid;gap:12px;margin-top:10px}
.pick{display:grid;grid-template-columns:130px 1fr auto;gap:22px;align-items:center;border:1px solid rgba(236,230,218,.16);border-radius:6px;padding:12px;cursor:pointer;transition:border-color .2s,background .2s;text-align:left;color:inherit;font:inherit;background:transparent}
.pick:hover,.pick.sel{border-color:var(--brass);background:rgba(176,141,82,.08)}
.pick img{width:130px;height:92px;object-fit:cover;border-radius:4px}
.pick h4{margin:0;font-weight:300;font-size:24px}
.pick p{margin:2px 0 0;color:var(--on-dark-muted);font-size:15px}
.pick .tot{text-align:right}.pick .tot b{display:block;font-weight:300;font-size:26px;color:var(--brass)}
.pick .tot span{font-size:14px;color:var(--on-dark-muted)}
@media (max-width:620px){.pick{grid-template-columns:90px 1fr}.pick img{width:90px;height:70px}.pick .tot{grid-column:span 2;text-align:left}}
.details{display:none;margin-top:28px;border-top:1px solid rgba(236,230,218,.16);padding-top:28px}
.details.open{display:block}
.details .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.summary{margin:18px 0 22px;color:var(--on-dark-muted)}
.summary b{color:var(--on-dark);font-weight:400}
.demo{font-size:14px;color:var(--on-dark-muted);margin-top:14px}
@media (max-width:620px){.details .row{grid-template-columns:1fr}}

/* footer */
.foot{background:var(--iron);color:var(--on-dark-muted);border-top:1px solid rgba(236,230,218,.1);padding:70px 0 50px;font-size:15px}
.foot .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px}
.foot .brand{color:var(--on-dark)}.foot .brand svg{color:var(--brass)}
.foot p{margin:.3em 0}
.foot .fine{grid-column:1/-1;font-size:13px;border-top:1px solid rgba(236,230,218,.1);padding-top:22px;margin-top:10px}
@media (max-width:760px){.foot .wrap{grid-template-columns:1fr}}

/* reveal on scroll (resting sections only fade, no slide) */
.fade{opacity:0;transition:opacity .9s var(--ease)}
.fade.in{opacity:1}
@media (prefers-reduced-motion:reduce){.fade{opacity:1;transition:none}}

/* concierge */
.cc{position:fixed;right:20px;bottom:20px;z-index:40;font-family:var(--sans)}
.cc-open{display:flex;align-items:center;gap:10px;background:var(--green);color:var(--on-dark);border:0;border-radius:999px;padding:14px 20px;font:400 16px var(--sans);cursor:pointer;box-shadow:0 10px 30px rgba(33,31,27,.25)}
.cc-dot{width:9px;height:9px;border-radius:50%;background:#8FC39A;box-shadow:0 0 0 4px rgba(143,195,154,.25)}
.cc-panel{position:absolute;right:0;bottom:64px;width:min(380px,calc(100vw - 40px));height:min(560px,calc(100svh - 110px));background:var(--paper);border:1px solid var(--line);border-radius:10px;box-shadow:0 24px 60px rgba(33,31,27,.28);display:flex;flex-direction:column;overflow:hidden}
.cc-panel[hidden]{display:none}
.cc-panel header{background:var(--green);color:var(--on-dark);padding:14px 44px 14px 16px;position:relative}
.cc-panel header b{display:block;font-weight:400;font-size:17px}.cc-panel header span{font-size:13px;color:var(--on-dark-muted)}
.cc-x{position:absolute;right:10px;top:10px;background:none;border:0;color:var(--on-dark);font-size:24px;cursor:pointer;line-height:1}
.cc-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.cc-log p{margin:0;max-width:85%;padding:9px 13px;border-radius:14px;font-size:15px;line-height:1.45}
.cc-bot{background:var(--stucco-2);align-self:flex-start;border-bottom-left-radius:4px}
.cc-me{background:var(--green);color:var(--on-dark);align-self:flex-end;border-bottom-right-radius:4px}
.cc-note{align-self:center;font-size:12.5px!important;color:var(--muted);padding:2px 0!important}
.cc-quick{display:flex;gap:6px;overflow-x:auto;padding:0 14px 10px}
.cc-quick button{flex:none;border:1px solid var(--line);background:transparent;border-radius:999px;padding:6px 11px;font:400 13px var(--sans);color:var(--ink);cursor:pointer}
.cc-form{display:flex;gap:6px;border-top:1px solid var(--line);padding:10px}
.cc-form input{flex:1;min-width:0;font:400 16px var(--sans);border:1px solid var(--line);border-radius:999px;padding:10px 14px;background:var(--stucco)}
.cc-send,.cc-mic{border:0;border-radius:999px;padding:0 14px;font:400 14px var(--sans);cursor:pointer;background:var(--brick);color:var(--paper)}
.cc-mic{background:var(--stucco-2);color:var(--ink)}.cc-mic.on{background:var(--brick);color:var(--paper)}

/* pets */
.pets{padding:clamp(70px,9vw,120px) 0;background:var(--stucco)}
.pets .wrap{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center}
.pets svg{width:clamp(150px,18vw,230px);color:var(--brick)}
.pets h2{margin-bottom:14px}
@media (max-width:760px){.pets .wrap{grid-template-columns:1fr}}

/* --- hosted demo additions (2026-09-18) --- */
[hidden]{display:none!important}
/* caption sits on the left so the fixed "Ask The York" button never covers it */
.arch .cap{left:0;right:auto}
/* hero video hook: fades in over the photo only once static/video/hero.mp4 can play */
.arch video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 35%;opacity:0;transition:opacity 1.2s var(--ease)}
.arch video.on{opacity:1}
/* booking progress: each stage lights as it is reached */
.steps{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 0;padding:0}
.steps li{font-size:14px;letter-spacing:.03em;color:var(--on-dark-muted);border:1px solid rgba(236,230,218,.16);border-radius:999px;padding:7px 15px;opacity:.5;transition:opacity .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease),background .5s var(--ease)}
.steps li.on{opacity:1;border-color:var(--brass);color:var(--on-dark)}
.steps li.now{background:rgba(176,141,82,.14)}

/* opening: full-bleed day-and-night loop of the real facade, the mark and name over it */
.opening{position:relative;height:100svh;min-height:520px;overflow:hidden;background:var(--iron);color:var(--on-dark)}
.opening-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.opening::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,31,27,.5) 0%,rgba(33,31,27,0) 26%,rgba(33,31,27,0) 50%,rgba(33,31,27,.78) 86%,rgba(33,31,27,.86) 100%),linear-gradient(90deg,rgba(33,31,27,.55) 0%,rgba(33,31,27,0) 45%);pointer-events:none}
.opening-copy{position:absolute;z-index:2;left:max(24px,calc((100% - 1240px)/2));bottom:clamp(84px,12vh,130px);text-align:left}
.opening-mark{display:block;width:clamp(72px,7vw,108px);height:clamp(48px,4.7vw,72px);color:var(--on-dark)}
.opening-name{margin:8px 0 0;font-weight:200;font-size:clamp(52px,7.5vw,120px);letter-spacing:.08em;line-height:.95;text-shadow:0 2px 30px rgba(33,31,27,.5)}
.opening-line{margin:14px 0 0;font-weight:300;font-size:clamp(17px,1.5vw,21px);letter-spacing:.06em;color:var(--on-dark-muted)}
.opening-copy>*{opacity:0;transform:translateY(12px);animation:rise 1.3s var(--ease) forwards}
.opening-name{animation-delay:.25s}.opening-line{animation-delay:.55s}
@keyframes rise{to{opacity:1;transform:none}}
.opening-down{position:absolute;z-index:2;bottom:30px;left:50%;transform:translateX(-50%);color:var(--on-dark);text-decoration:none;font-size:15px;letter-spacing:.08em;padding-bottom:10px;border-bottom:1px solid var(--on-dark-muted)}
.opening-down:hover{color:var(--paper)}
.top.over:not(.solid) .brand,.top.over:not(.solid) .nav a:not(.btn){color:var(--on-dark)}
@media (prefers-reduced-motion:reduce){.opening-copy>*{animation:none;opacity:1;transform:none}}

/* --- session 04 opening (2026-09-18): the mark draws itself in gold over the loop and stays,
   then comes apart stroke by stroke as you scroll down, and reassembles as you scroll back up. --- */
:root{--gold:#CDAE72;--gold-deep:#B08D52}
.opening{height:210svh;overflow:visible;background:var(--iron)}
.opening::after{content:none}
.opening-pin{position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden}
.opening-pin::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(180deg,rgba(33,31,27,.55) 0%,rgba(33,31,27,0) 24%,rgba(33,31,27,0) 44%,rgba(42,58,48,.55) 78%,rgba(33,31,27,.9) 100%),
            radial-gradient(120% 90% at 50% 62%,rgba(33,31,27,0) 40%,rgba(33,31,27,.45) 100%);
 opacity:calc(1 + var(--p,0)*.4)}
.opening-video{transform:scale(calc(1 + var(--p,0)*.06));transform-origin:50% 60%;filter:brightness(calc(1 - var(--p,0)*.35))}
.opening-copy{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-44%);text-align:center;width:min(92vw,900px)}
.opening-copy>*{opacity:1;transform:none;animation:none}
.opening-mark{margin:0 auto;width:clamp(96px,9vw,140px);height:auto;color:var(--gold);overflow:visible;filter:drop-shadow(0 2px 18px rgba(33,31,27,.55))}
.opening-mark *{stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200);animation:draw 1.3s var(--ease) forwards;animation-delay:calc(.3s + var(--i)*80ms);
 transform-box:view-box;transform-origin:60px 44px;
 transform:translate(calc(var(--dx)*var(--p,0)*70px),calc(var(--dy)*var(--p,0)*70px)) rotate(calc(var(--r)*var(--p,0)*1deg));
 opacity:calc(1 - var(--p,0)*1.35)}
.opening-name{margin:14px 0 0;font-weight:200;font-size:clamp(56px,9vw,148px);letter-spacing:.1em;line-height:.95;color:var(--on-dark);text-shadow:0 2px 34px rgba(33,31,27,.55);white-space:nowrap}
.opening-name span{display:inline-block;opacity:0;animation:letter 1.4s var(--ease) forwards;animation-delay:calc(1.1s + var(--c)*55ms)}
.opening-name span{translate:calc(var(--o)*var(--p,0)*46px) calc(var(--p,0)*-30px)}
.opening-name{opacity:calc(1 - var(--p,0)*1.25)}
@keyframes letter{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.opening-line{margin:18px 0 0;font-weight:300;font-size:clamp(19px,1.7vw,25px);letter-spacing:.08em;color:var(--on-dark);opacity:0;animation:fadeIn 1.2s var(--ease) 1.9s forwards}
.opening-ticks{list-style:none;margin:26px 0 0;padding:0;display:flex;justify-content:center;flex-wrap:wrap;gap:10px 28px;font-size:15px;letter-spacing:.04em;color:var(--on-dark-muted);opacity:0;animation:fadeIn 1.2s var(--ease) 2.3s forwards}
.opening-ticks li{display:flex;align-items:center;gap:9px}
.opening-ticks li::before{content:"";width:10px;height:5px;border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg) translateY(-2px)}
.opening-line,.opening-ticks{translate:0 calc(var(--p,0)*-24px)}
.opening-copy .opening-line,.opening-copy .opening-ticks{--fade:calc(1 - var(--p,0)*2.2)}
.opening.scrolled .opening-line,.opening.scrolled .opening-ticks{animation:none;opacity:var(--fade)}
@keyframes fadeIn{to{opacity:1}}
.opening-down{opacity:calc(1 - var(--p,0)*3)}

/* the booking bar: pinned at the top the whole way down */
.top .wrap{gap:24px}
.top{background:linear-gradient(180deg,rgba(33,31,27,.55),rgba(33,31,27,0))}
.top .brand,.top .nav a:not(.btn){color:var(--on-dark)}
.top .brand svg{color:var(--gold)}
.top.solid{background:linear-gradient(90deg,var(--green) 0%,#26312A 55%,var(--iron) 100%);backdrop-filter:none;box-shadow:inset 0 -1px 0 rgba(205,174,114,.55)}
.top.solid .brand,.top.solid .nav a:not(.btn){color:var(--on-dark)}
.quick{display:flex;align-items:center;gap:6px;margin-left:auto;padding:5px 5px 5px 16px;border:1px solid rgba(205,174,114,.45);border-radius:999px;background:rgba(33,31,27,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.quick label{display:flex;flex-direction:column;gap:1px;padding:2px 12px 2px 0;border-right:1px solid rgba(236,230,218,.16)}
.quick label span{font-size:11.5px;letter-spacing:.06em;color:var(--gold)}
.quick input,.quick select{font:400 14.5px var(--sans);color:var(--on-dark);background:transparent;border:0;padding:0;color-scheme:dark;min-width:0}
.quick input{width:122px}
.quick .btn{padding:11px 20px;font-size:14.5px}
.quick label.q-g{border-right:0}
.top .nav{gap:26px}
.top.solid .nav-book,.top .nav-book{display:none}
@media (max-width:1180px){.quick{display:none}.top .nav-book{display:inline-flex}.top .nav{margin-left:auto}}
@media (max-width:760px){.opening{height:170svh}.opening-name{font-size:clamp(46px,14vw,72px);letter-spacing:.06em}.opening-ticks{font-size:14px;gap:8px 18px}}
@media (prefers-reduced-motion:reduce){.opening{height:100svh}.opening-mark *,.opening-name span,.opening-line,.opening-ticks{animation:none!important;opacity:1!important;stroke-dashoffset:0!important;transform:none!important;translate:none!important;filter:none!important}}

/* rooms and details: each photo turns from day to night as you scroll through the section */
.stage img.night,.inside figure img.night{opacity:0;transition:opacity .45s linear}
.stage img.night.on{opacity:var(--night,0);transform:none}
.inside figure{--night:0}
.inside figure img.night{position:absolute;left:0;top:0;width:100%}
.inside figure img.night{opacity:var(--night,0)}
/* s04 pass 2: a soft pool of shade behind the centred copy so the gold mark and the name read over a bright day frame */
.opening-copy::before{content:"";position:absolute;left:50%;top:52%;width:150%;height:170%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
 background:radial-gradient(closest-side,rgba(33,31,27,.62),rgba(33,31,27,.34) 55%,rgba(33,31,27,0));opacity:calc(1 - var(--p,0)*1.3)}
.opening-mark{width:clamp(120px,11vw,176px);stroke-width:1.7}
.opening-ticks li::before{content:"";width:13px;height:10px;border:0;transform:none;
 background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'%3E%3Cpath d='M1 5.2 4.6 8.6 12 1.2' fill='none' stroke='%23CDAE72' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.opening-ticks{color:var(--on-dark)}
@media (max-width:760px){.opening-ticks{flex-direction:column;align-items:center}}
/* s04 gauntlet fixes: no sideways scroll on phones; a shorter, lighter hand-off out of the opening; the chat button stays out of the way on phones */
html,body{overflow-x:clip}
.opening{height:175svh}
.opening-video{filter:brightness(calc(1 - var(--p,0)*.18))}
@media (max-width:760px){.cc{right:12px;bottom:12px}.cc-open{padding:11px 14px;font-size:14px}.opening-down{bottom:84px}body{padding-bottom:0}.foot{padding-bottom:110px}}
/* s04 type change (James 18:07 on the thin Jost wordmark: "i definitely hate this font - it doesnt scream premium").
   Type now follows his own Claude Design doc: Cormorant Garamond for display, Manrope for text. */
:root{--serif:'Cormorant Garamond',Georgia,serif;--sans:'Manrope','Segoe UI',system-ui,sans-serif}
body{font-family:var(--sans)}
h1,h2,h3,h4,.opening-name,.brand span,.room h3,.pick h4,.hero h1{font-family:var(--serif);font-weight:500;letter-spacing:.01em}
.opening-name{font-weight:500;letter-spacing:.04em;font-size:clamp(60px,9.5vw,156px)}
.brand span{font-size:24px;letter-spacing:.06em}
.hero h1{font-weight:500;letter-spacing:.02em}
h2{font-size:clamp(38px,5vw,66px)}
.opening-line{font-family:var(--serif);font-style:normal;font-size:clamp(22px,2vw,30px);letter-spacing:.02em}
.facts b,.pick .tot b,.room .price b{font-family:var(--serif);font-weight:500}
/* s04 type, second pass (James 18:09): a high-contrast Didone like his reference, but not as thin — Bodoni Moda at a
   low optical size (heavier hairlines), weight 500, and its italic for accents. */
:root{--serif:'Bodoni Moda','Didot',Georgia,serif}
h1,h2,h3,h4,.opening-name,.brand span,.room h3,.pick h4,.hero h1{font-family:var(--serif);font-weight:500;font-optical-sizing:none;font-variation-settings:"opsz" 18;letter-spacing:0}
.opening-name{letter-spacing:.01em;font-size:clamp(58px,9vw,150px)}
.brand span{font-size:22px;letter-spacing:.02em}
.opening-line{font-family:var(--serif);font-style:italic;font-weight:400;font-variation-settings:"opsz" 18;letter-spacing:.01em}
.facts b,.pick .tot b,.room .price b{font-family:var(--serif);font-variation-settings:"opsz" 18}
/* s04 (James 18:30, phone): the figures sit in one right-aligned column, baseline-aligned with their line of text */
.facts li{grid-template-columns:clamp(96px,9vw,132px) 1fr;align-items:baseline;gap:22px}
.facts b{text-align:right;min-width:0;line-height:1}
.facts span{line-height:1.45}
@media (max-width:760px){.rooms-head{flex-direction:column;align-items:flex-start;gap:18px}}
/* s04 (James 18:33): logo and name closer together, and the name sits down on the rails rather than floating */
.brand{gap:7px;align-items:flex-end}
.brand svg{flex:none}
.brand span{line-height:1;transform:translateY(1px)}
/* s04 (James 18:30): scrolling down to The Penthouse, the top floor, the page takes on a richer evening palette */
.rooms{transition:background-color 1.1s var(--ease),color 1.1s var(--ease)}
.rooms .room h3,.rooms .room .line,.rooms .room li,.rooms .room .price,.rooms .room .btn,.rooms .rooms-head h2,.rooms .rooms-head .lede,.rooms .room{transition:color 1.1s var(--ease),border-color 1.1s var(--ease),background-color 1.1s var(--ease)}
.rooms.lux{background:linear-gradient(180deg,#1E2A23 0%,#17150F 100%);color:var(--on-dark)}
.rooms.lux .room{border-top-color:rgba(205,174,114,.35)}
.rooms.lux .room h3{color:var(--gold)}
.rooms.lux .room .line{color:var(--on-dark)}
.rooms.lux .room li{color:var(--on-dark-muted);border-color:rgba(205,174,114,.4)}
.rooms.lux .room .price{color:var(--on-dark)}.rooms.lux .room .price b{color:var(--gold)}
.rooms.lux .room .btn.ghost{color:var(--on-dark);border-color:var(--gold)}
.rooms.lux .room .btn.ghost:hover{background:var(--gold);color:var(--iron)}
.rooms.lux .rooms-head h2{color:var(--on-dark)}.rooms.lux .rooms-head .lede{color:var(--on-dark-muted)}
.rooms.lux .room .note{color:var(--on-dark-muted)}

/* --- fixwave 2026-09-18 (James 18:40 notes) --- */
/* 1. desktop stage is a landscape frame the shape of the photos, so they show near native size and stay sharp */
@media (min-width:901px){
 .rooms-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:56px;align-items:start}
 .stage{height:auto;aspect-ratio:3/2;max-height:calc(100svh - 150px);top:max(96px,calc(50svh - 17vw + 30px));cursor:zoom-in}
 .stage img.tall{object-fit:contain;background:var(--stucco-2)}
 .rooms.lux .stage img.tall{background:#1A231D}
 .stage:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
 .room{min-height:88svh}
 /* 3. every photo of the room, as small tiles that swap the big one */
 .pics{display:flex;flex-wrap:wrap;gap:8px}
 .pics .pic{padding:0;border:0;background:none;cursor:pointer;width:84px;aspect-ratio:3/2;border-radius:3px;overflow:hidden;opacity:.62;outline:1px solid transparent;outline-offset:2px;transition:opacity .25s var(--ease),outline-color .25s var(--ease)}
 .pics .pic img{width:100%;height:100%;object-fit:cover;display:block}
 .pics .pic:hover,.pics .pic.on{opacity:1}
 .pics .pic.on{outline-color:var(--brick)}
 .rooms.lux .pics .pic.on{outline-color:#CDAE72}
 .pics .pic:focus-visible{outline:2px solid var(--brass)}
}
@media (max-width:900px){
 .pics{display:none}
 .room .thumbs .ph{position:relative;padding:0;border:0;background:none;cursor:zoom-in;scroll-snap-align:start;border-radius:4px;overflow:hidden;display:block}
 .room .thumbs .ph img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:0}
 /* 2. on phones each strip turns to night as its own room scrolls past */
 .room .thumbs .ph img.night{position:absolute;inset:0;height:100%;opacity:var(--night,0)}
}
/* 2. the stage's night twin follows the room on show (value set per room by night-scroll.js) */
.stage img.night.on{opacity:var(--night,0);transition:opacity .2s linear}

/* 6. the penthouse palette fades in with scroll (--lux 0..1), then melts back into the light */
.rooms{position:relative;background:transparent}
.rooms::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#1E2A23 0%,#17150F 100%);opacity:var(--lux,0);pointer-events:none}
.rooms>.wrap{position:relative;z-index:1}
.rooms.lux{background:transparent}
.inside{position:relative;padding-top:calc(clamp(70px,9vw,120px) + 34svh)}
.inside::before{content:"";position:absolute;left:0;right:0;top:0;height:62svh;background:linear-gradient(180deg,#17150F 0%,rgba(23,21,15,.86) 22%,rgba(52,58,48,.45) 55%,rgba(236,230,218,0) 100%);opacity:var(--lux,0);pointer-events:none}
.inside>.wrap{position:relative;z-index:1}
.inside figure{cursor:zoom-in}
.inside figure:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* 7. the big figures sit level with the text beside them */
.facts li{align-items:center}
.facts b{line-height:1;padding-top:.08em}

/* 8. lightbox */
html.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:200;background:rgba(20,19,16,.94);display:grid;grid-template-columns:72px 1fr 72px;align-items:center;opacity:0;transition:opacity .3s var(--ease)}
.lb.on{opacity:1}
.lb[hidden]{display:none}
.lb-f{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100svh;padding:48px 0 28px;box-sizing:border-box;min-width:0}
.lb-f img{max-width:100%;max-height:calc(100svh - 120px);object-fit:contain;border-radius:3px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.lb-f figcaption{color:var(--on-dark);font-size:15px;padding-top:14px;letter-spacing:.01em}
.lb-a,.lb-x{background:none;border:1px solid rgba(236,230,218,.28);color:var(--on-dark);border-radius:999px;cursor:pointer;display:grid;place-items:center;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.lb-a{width:52px;height:52px;font-size:30px;line-height:1;justify-self:center;padding-bottom:4px}
.lb-a:hover,.lb-x:hover{background:rgba(236,230,218,.12);border-color:#CDAE72}
.lb-a[hidden]{visibility:hidden;display:grid}
.lb-x{position:absolute;top:16px;right:16px;width:44px;height:44px;font-size:26px;line-height:1}
.lb button:focus-visible{outline:2px solid #CDAE72;outline-offset:3px}
@media (max-width:700px){.lb{grid-template-columns:1fr}.lb-a{position:absolute;bottom:22px;width:48px;height:48px}.lb-prev{left:calc(50% - 64px)}.lb-next{left:calc(50% + 16px)}.lb-f{padding:60px 8px 90px}.lb-f img{max-height:calc(100svh - 190px)}}
/* fixwave 2: fill the stage with every photo (the lightbox still shows it whole); greener, quicker penthouse fade */
@media (min-width:901px){.stage img.tall,.stage img{object-fit:cover;object-position:50% 60%}.stage img.tall{background:none}}
.rooms::before{background:linear-gradient(180deg,#1B3024 0%,#141A14 100%)}
.inside::before{background:linear-gradient(180deg,#141A14 0%,rgba(27,48,36,.88) 24%,rgba(42,58,48,.5) 52%,rgba(236,230,218,0) 100%)}
.rooms::before{background:linear-gradient(180deg,#183A27 0%,#12201A 100%);opacity:var(--luxo,0)}
/* fixwave 3 (blind critic s04) */
.search>*{min-width:0}.field input,.field select{width:100%;box-sizing:border-box;min-width:0}
/* Skylight portrait photos: keep the bed in frame */
@media (min-width:901px){
 .stage img[src*="skylight-1b"]{object-position:50% 78%}
 .stage img[src*="skylight-4"]{object-position:50% 62%}
 .stage img[src*="skylight-5"]{object-position:50% 58%}
 .stage img[src*="skylight-2"],.stage img[src*="skylight-3"]{object-position:50% 65%}
}
.room .thumbs .ph img[src*="skylight-1b"]{object-position:50% 78%}
/* the band into "The little things": shorter, deeper green, no grey middle */
.inside{padding-top:calc(clamp(70px,9vw,120px) + 20svh)}
.inside::before{height:44svh;background:linear-gradient(180deg,#12201A 0%,#183A27 30%,rgba(42,74,54,.55) 62%,rgba(236,230,218,0) 100%)}
/* "Ask The York": never covers a button — a small round button on phones, room left below the page */
body{padding-bottom:84px}
@media (max-width:760px){
 .cc-open{width:52px;height:52px;padding:0;justify-content:center;font-size:0;gap:0}
 .cc-open .cc-dot{width:14px;height:14px}
 .cc-open::after{content:"?";font:500 22px var(--sans);color:var(--on-dark)}
 .cc-open .cc-dot{display:none}
}
.hero h1{font-size:clamp(44px,5.4vw,84px);line-height:1.02}
.room .num{font-size:14px;letter-spacing:.02em;color:var(--muted);margin:0 0 -8px}.rooms.lux .room .num{color:#CDAE72}