/* ==========================================================================
   OSBORNE MANOR — site.css  (plain CSS, no build step, no framework)
   Tokens → base → layout → components → page sections → motion → a11y
   ========================================================================== */
:root{
  --ink:#15110d;--night:#0a1f31;--paper:#f4eee3;--sand:#e7dcc7;
  --brass:#bd8f52;--brass-deep:#7d5826;--stone:#6b6054;
  --serif:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --sans:"Cabin",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1500px;--pad:clamp(1.25rem,4vw,2.5rem);--tone:0;
}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,iframe{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:.98;letter-spacing:-.012em;margin:0}
p,dl,dd,ul,ol,figure,address{margin:0}
ul,ol{padding:0;list-style:none}
address{font-style:normal}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
strong{font-weight:600}
::selection{background:var(--brass);color:var(--ink)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.dark :focus-visible,.night :focus-visible,.on-dark :focus-visible{outline-color:#e4c28d}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:1rem;top:-5rem;z-index:200;background:var(--brass);color:var(--ink);padding:.8rem 1.2rem;font-weight:600}
.skip:focus{top:1rem}
.img-bad{background:var(--sand);min-height:8rem}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.wrap-md{max-width:1300px;margin:0 auto;padding-inline:var(--pad)}
.sec{padding:clamp(5rem,12vw,10.5rem) 0;position:relative;overflow:hidden;overflow:clip}
.sec-sm{padding:clamp(4rem,8vw,7rem) 0;position:relative;overflow:hidden;overflow:clip}
.paper{background:#f4eee3;background:color-mix(in oklab,#f4eee3,#e2cba5 calc(var(--tone)*100%))}
.sand{background:#e7dcc7;background:color-mix(in oklab,#e7dcc7,#d6b98b calc(var(--tone)*100%))}
.dark{background:var(--ink);color:var(--paper)}
.night{background:var(--night);color:var(--paper)}
.g12{display:grid;gap:3.5rem}
.items-center{align-items:center}.items-end{align-items:end}
@media(min-width:1024px){
  .g12{grid-template-columns:repeat(12,minmax(0,1fr));gap:2.5rem}
  .c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}.c10{grid-column:span 10}.c12{grid-column:span 12}
  .pl{padding-left:2rem}.pr{padding-right:2rem}
  .sticky-col{position:sticky;top:8rem}
}
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}.mt-4{margin-top:4.5rem}.mt-5{margin-top:6rem}
.center{text-align:center}.ml-auto{margin-left:auto}.mx-auto{margin-inline:auto}
.maxw-sm{max-width:26rem}.maxw-md{max-width:34rem}.maxw-lg{max-width:44rem}

/* ---------- Type ---------- */
.display{font-family:var(--serif);font-weight:400;line-height:.95;letter-spacing:-.015em}
.upper{text-transform:uppercase;letter-spacing:.06em}
.italic{font-style:italic}
.t-hero{font-size:clamp(2.9rem,14.5vw,12.5rem);text-transform:uppercase;letter-spacing:.04em;line-height:.86}
.t-xxl{font-size:clamp(2.6rem,9vw,9rem)}
.t-xl{font-size:clamp(2.4rem,8vw,8rem)}
.t-lg{font-size:clamp(2.2rem,6vw,5.6rem)}
.t-md{font-size:clamp(2rem,4.4vw,3.8rem)}
.t-sm{font-size:clamp(1.7rem,3vw,2.4rem)}
.lead{font-size:1.15rem;line-height:1.7}
.muted{opacity:.78}
.brass{color:var(--brass)}.brass-deep{color:var(--brass-deep)}
.eyebrow{display:flex;align-items:center;gap:1rem;font-size:.7rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase}
.eyebrow .num{font-variant-numeric:tabular-nums;opacity:.7}
.eyebrow .rule{display:block;width:2.5rem;height:1px;background:currentColor;opacity:.5}
.paper .eyebrow,.sand .eyebrow{color:var(--brass-deep)}
.dark .eyebrow,.night .eyebrow,.on-dark .eyebrow{color:var(--brass)}
.hair{border:0;height:1px;background:currentColor;opacity:.18;margin:0}

/* ---------- Buttons & links ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.9rem;min-height:3.1rem;padding:.95rem 1.7rem;font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;border:1px solid currentColor;overflow:hidden;isolation:isolate;transition:color .5s var(--ease),border-color .5s var(--ease);text-align:center;cursor:pointer;background:transparent}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fill,#f4eee3);transform:translate3d(0,101%,0);transition:transform .6s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn::after{content:"\2192";font-size:1rem;letter-spacing:0;transition:transform .5s var(--ease);flex:none}
.btn:hover::after{transform:translateX(5px)}
.btn.no-arrow::after{content:none}
.btn-brass{background:var(--brass);border-color:var(--brass);color:var(--ink);--fill:#f4eee3}
.btn-brass:hover,.btn-brass:focus-visible{border-color:#f4eee3}
.btn-light{color:#f4eee3;border-color:rgba(244,238,227,.55);--fill:#f4eee3}
.btn-light:hover,.btn-light:focus-visible{color:var(--ink);border-color:#f4eee3}
.btn-dark{color:var(--ink);border-color:rgba(21,17,13,.5);--fill:var(--ink)}
.btn-dark:hover,.btn-dark:focus-visible{color:#f4eee3;border-color:var(--ink)}
.btn-sm{min-height:2.7rem;padding:.7rem 1.3rem}
.btn[disabled]{opacity:.6;cursor:wait}
.btns{display:flex;flex-direction:column;gap:.75rem}
@media(min-width:640px){.btns{flex-direction:row;flex-wrap:wrap;align-items:center}}
.tlink,.nav a:not(.btn),.footer a.tl{position:relative;display:inline-block}
.tlink::after,.nav a:not(.btn)::after,.footer a.tl::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.tlink:hover::after,.tlink:focus-visible::after,.nav a:not(.btn):hover::after,.nav a:not(.btn):focus-visible::after,.nav a[aria-current="page"]::after,.footer a.tl:hover::after{transform:scaleX(1);transform-origin:left}
.tlink-b{font-weight:600}

/* ---------- Header / nav ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:60;color:var(--paper);padding:1.2rem 0;background:linear-gradient(to bottom,rgba(10,8,6,.6),transparent);transition:background .6s,padding .6s,box-shadow .6s}
.site-header.solid{background:rgba(21,17,13,.84);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);padding:.7rem 0;box-shadow:0 1px 0 rgba(244,238,227,.08)}
.menu-open .site-header,.menu-open .site-header.solid{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;flex-direction:column;line-height:1;position:relative;z-index:2}
.brand-n{font-family:var(--serif);font-size:1.5rem;letter-spacing:.2em;text-transform:uppercase}
.brand-s{margin-top:.45rem;font-size:.55rem;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--brass)}
.nav{display:none;align-items:center;gap:2.1rem}
.nav a:not(.btn){font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.menu-btn{position:relative;z-index:2;display:flex;align-items:center;gap:.8rem;height:3rem;padding:0 .25rem;font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.menu-btn i{position:relative;display:block;width:1.8rem;height:.75rem}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;width:100%;height:1px;background:currentColor;transition:all .5s var(--ease)}
.menu-btn i::before{top:0}.menu-btn i::after{bottom:0}
.menu-open .menu-btn i::before{top:50%;transform:rotate(45deg)}
.menu-open .menu-btn i::after{bottom:auto;top:50%;transform:rotate(-45deg)}
@media(min-width:1180px){.nav{display:flex}.menu-btn{display:none}}
html:not(.js) .nav{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem}
html:not(.js) .menu-btn{display:none}
html:not(.js) .hdr{flex-wrap:wrap}

.menu{position:fixed;inset:0;z-index:55;background:var(--ink);color:var(--paper);overflow-y:auto;clip-path:circle(0 at calc(100% - 2.2rem) 2.2rem);visibility:hidden;transition:clip-path .9s var(--ease),visibility 0s linear .9s}
.menu-open .menu{clip-path:circle(160% at calc(100% - 2.2rem) 2.2rem);visibility:visible;transition:clip-path 1s var(--ease),visibility 0s}
.menu-in{max-width:36rem;margin:0 auto;min-height:100%;display:flex;flex-direction:column;padding:7rem 1.5rem 2rem}
.menu ul{flex:1}
.menu li{border-bottom:1px solid rgba(244,238,227,.1);opacity:0;transform:translate3d(0,24px,0);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.menu-open .menu li{opacity:1;transform:none}
.menu li:nth-child(1){transition-delay:.25s}.menu li:nth-child(2){transition-delay:.32s}.menu li:nth-child(3){transition-delay:.39s}.menu li:nth-child(4){transition-delay:.46s}.menu li:nth-child(5){transition-delay:.53s}.menu li:nth-child(6){transition-delay:.6s}.menu li:nth-child(7){transition-delay:.67s}
.menu li a{display:flex;align-items:baseline;gap:1.25rem;padding:.8rem 0}
.menu li b{width:1.6rem;font-size:.65rem;font-weight:600;letter-spacing:.15em;color:var(--brass)}
.menu li span{font-family:var(--serif);font-size:2.5rem;line-height:1}
.menu-foot{margin-top:2rem;display:grid;gap:.4rem;font-size:.95rem;color:rgba(244,238,227,.8)}
.menu-foot .btn{margin-bottom:1.25rem;width:100%}

.sticky-book{position:fixed;inset:auto 0 0 0;z-index:40;display:flex;gap:.5rem;padding:.75rem .75rem max(.75rem,env(safe-area-inset-bottom));background:rgba(21,17,13,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transform:translate3d(0,110%,0);transition:transform .7s var(--ease)}
.sticky-book.show{transform:none}
.sticky-book .btn:first-child{flex:1}
.sticky-book .btn-light::after{content:none}
.menu-open .sticky-book{transform:translate3d(0,110%,0)}
@media(min-width:768px){.sticky-book{display:none}}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:var(--paper);padding:6rem 0 7rem}
.footer-top{display:grid;gap:4rem}
@media(min-width:1024px){.footer{padding-bottom:3rem}.footer-top{grid-template-columns:5fr 7fr}}
.footer-brand{font-family:var(--serif);font-size:clamp(2.6rem,6vw,5.2rem);text-transform:uppercase;letter-spacing:.08em;line-height:.92}
.footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
@media(min-width:640px){.footer-cols{grid-template-columns:repeat(3,1fr)}}
.footer h2{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--brass);margin-bottom:1.25rem;line-height:1.4}
.footer li{margin-bottom:.7rem;font-size:.92rem}
.footer address{font-size:.92rem;display:grid;gap:.7rem;color:rgba(244,238,227,.88)}
.footer-visit{grid-column:span 2}@media(min-width:640px){.footer-visit{grid-column:auto}}
.footer-base{margin-top:5rem;padding-top:2rem;border-top:1px solid rgba(244,238,227,.15);display:flex;flex-direction:column;gap:.75rem;font-size:.75rem;color:rgba(244,238,227,.62)}
@media(min-width:768px){.footer-base{flex-direction:row;justify-content:space-between}}
.break{overflow-wrap:anywhere}

/* ---------- Breadcrumbs ---------- */
.crumbs{margin-bottom:2.5rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.4rem .5rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.22em;opacity:.85}
.crumbs li+li::before{content:"/";margin-right:.5rem}

/* ---------- Hero (home) ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:var(--ink);color:var(--paper)}
.hero-bg{position:absolute;inset:0;transform:translate3d(0,calc(var(--hp,0)*14vh),0) scale(calc(1 + var(--hp,0)*.07));will-change:transform}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;animation:kb 22s var(--ease) both;transform-origin:60% 55%}
.hero-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(21,17,13,.9),rgba(21,17,13,.12) 55%,rgba(21,17,13,.35))}
@media(min-width:768px){.hero-shade{background:linear-gradient(to top,rgba(21,17,13,.9),rgba(21,17,13,.1) 55%,rgba(21,17,13,.35)),linear-gradient(to right,rgba(21,17,13,.5),transparent 60%)}}
.hero-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:6rem;transform:translate3d(0,calc(var(--hp,0)*-9vh),0);opacity:calc(1 - var(--hp,0)*1.5)}
@media(min-width:768px){.hero-in{padding-bottom:5rem}}
.hero-in .eyebrow{color:rgba(244,238,227,.92);margin-bottom:1.5rem}
.hero-in .eyebrow .rule{background:var(--brass);opacity:1}
.hero-in .btns{margin-top:2.25rem}
.hero-addr{position:absolute;z-index:2;right:var(--pad);top:7rem;text-align:right;font-size:.65rem;letter-spacing:.35em;text-transform:uppercase;color:rgba(244,238,227,.85);display:none}
@media(min-width:768px){.hero-addr{display:block}}
.hero-scroll{position:absolute;z-index:2;right:var(--pad);bottom:2rem;display:none;flex-direction:column;align-items:center;gap:.75rem}
@media(min-width:768px){.hero-scroll{display:flex}}
.hero-scroll span{font-size:.6rem;letter-spacing:.4em;text-transform:uppercase;writing-mode:vertical-rl;color:rgba(244,238,227,.75)}
.hero-scroll i{position:relative;display:block;width:1px;height:3.5rem;background:rgba(244,238,227,.25);overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;inset:0;background:var(--brass);animation:cue 2.6s var(--ease) infinite}

/* ---------- Interior page hero ---------- */
.phero{position:relative;overflow:hidden;padding:9rem 0 5rem;background:var(--ink);color:var(--paper)}
@media(min-width:768px){.phero{padding:13rem 0 7rem}}
.phero::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 60% at 85% 40%,rgba(189,143,82,.18),transparent 70%);pointer-events:none}
.phero .wrap,.phero .wrap-md{position:relative}
.phero h1{font-size:clamp(2.8rem,9vw,9rem)}
.phero .lead{margin-top:2rem;max-width:34rem;color:rgba(244,238,227,.78)}
.phero .btns{margin-top:2.25rem}
.phero .eyebrow{margin-bottom:1.75rem}
.frame{position:relative;overflow:hidden;background:var(--sand)}
.frame img,.cover{width:100%;height:100%;object-fit:cover}
.shadow{box-shadow:0 40px 80px -40px rgba(21,17,13,.55)}

/* ---------- Welcome / stats / rows ---------- */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;padding-top:2rem;border-top:1px solid rgba(21,17,13,.15);max-width:36rem}
.facts b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,5vw,3.8rem);line-height:1;color:var(--brass-deep)}
.facts span{display:block;margin-top:.5rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;line-height:1.4;color:var(--stone)}
.rows>div{display:grid;grid-template-columns:6.5rem 1fr;gap:1rem;padding:1.15rem 0;border-top:1px solid rgba(21,17,13,.15)}
.rows>div:last-child{border-bottom:1px solid rgba(21,17,13,.15)}
.rows dt{padding-top:.2rem;font-size:.7rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-deep)}
.rows dd{font-size:1.02rem;line-height:1.6}
.dark .rows>div{border-color:rgba(244,238,227,.2)}.dark .rows dt{color:var(--brass)}
@media(min-width:768px){.rows>div{grid-template-columns:9rem 1fr}}
.pano{max-width:1080px;margin:0 auto}
.pano img{width:100%}

/* ---------- Statement ---------- */
[data-words] span{transition:opacity .35s linear}

/* ---------- Arrival route ---------- */
[data-route]{--route:1}
.route{position:relative;margin-top:5rem}
.route-line{position:absolute;left:7px;top:.75rem;bottom:.75rem;width:1px;background:rgba(21,17,13,.15)}
.route-fill{display:block;width:100%;height:100%;background:var(--brass-deep);transform:scaleY(var(--route));transform-origin:top}
.route-stops{position:relative;display:grid;gap:3.5rem}
.route-stops li{position:relative;padding-left:2.5rem}
.dot{position:absolute;left:0;top:.45rem;width:15px;height:15px;border-radius:50%;background:var(--brass-deep);border:1px solid var(--brass-deep)}
.stop-k{font-family:var(--serif);font-size:2.4rem;text-transform:uppercase;letter-spacing:.08em;line-height:1.05}
@media(min-width:768px){
  .route{margin-top:6rem}
  .route-line{left:0;right:0;top:7px;bottom:auto;width:auto;height:1px}
  .route-fill{transform:scaleX(var(--route));transform-origin:left}
  .route-stops{grid-template-columns:repeat(3,1fr);gap:2rem}
  .route-stops li{padding:3rem 0 0}
  .dot{top:0}
}

/* ---------- Room strip (home) ---------- */
.strip{display:grid;gap:4rem;margin-top:5rem}
.strip a.pic{display:block}
.strip h3{font-size:clamp(3rem,5vw,4.4rem);margin-top:1.5rem}
.strip .meta{margin-top:.75rem;color:var(--stone);font-size:.95rem}
.strip .eyebrow{margin-top:1.75rem}
@media(min-width:900px){.strip{grid-template-columns:repeat(3,1fr);gap:2.5rem;align-items:start}.strip>li:nth-child(2){margin-top:5rem}.strip>li:nth-child(3){margin-top:10rem}}

/* ---------- Room panels (/rooms/) ---------- */
.room{padding:clamp(4rem,9vw,7rem) 0;position:relative}
.room-main{position:relative;max-width:707px}
.room-sub{display:none;position:absolute;bottom:-2.5rem;right:1rem;width:38%;border:6px solid var(--paper);box-shadow:0 30px 60px -25px rgba(0,0,0,.5)}
@media(min-width:768px){.room-sub{display:block}}
@media(min-width:1100px){.room-sub{right:-1.5rem}.room.flip .room-sub{right:auto;left:-1.5rem}}
.room.flip .room-sub{right:auto;left:1rem}
@media(min-width:1024px){.room.flip .room-media{order:2}.room.flip .room-main{margin-left:auto}}
.room h2,.room h3.rn{font-size:clamp(2.8rem,8vw,7rem);margin-top:1.5rem}
.room .tag{margin-top:1.25rem;font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,2.6vw,2rem);opacity:.78;line-height:1.15}
.room .rows{margin-top:2.5rem}
.zoom{display:block;width:100%;overflow:hidden;background:var(--sand);position:relative}
.zoom img{transition:transform 1.6s var(--ease)}
.zoom:hover img,.zoom:focus-visible img{transform:scale(1.035)!important}
.zoom .vg{position:absolute;left:0;bottom:0;padding:.8rem 1.25rem;background:rgba(21,17,13,.88);color:var(--paper);font-size:.65rem;font-weight:600;letter-spacing:.25em;text-transform:uppercase}
.ar-room{aspect-ratio:707/512}.ar-sq{aspect-ratio:1/1}.ar-ev{aspect-ratio:1200/801}

/* ---------- Compare ---------- */
.cards3{display:grid;margin-top:3.5rem}
.card{padding:2rem;border:1px solid rgba(21,17,13,.15);margin-top:-1px}
.card h3{font-size:3.2rem}
.card dl{margin-top:1.75rem;display:grid;gap:1.4rem}
.card dt{font-size:.68rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-deep);margin-bottom:.2rem}
.card dd.big{font-family:var(--serif);font-size:2.6rem;line-height:1}
.card .btn{margin-top:2rem}
.card.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.card.is-active dt{color:var(--brass)}
@media(min-width:900px){.cards3{grid-template-columns:repeat(3,1fr)}.card{margin-top:0;margin-left:-1px;padding:2.5rem}}
.inall{margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(21,17,13,.15);max-width:56rem}

/* ---------- Gallery ---------- */
.gal3{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.gal-mas{columns:2;column-gap:.75rem}
.gal-mas li{margin-bottom:.75rem;break-inside:avoid}
.gal-mas .zoom{min-height:120px}
@media(min-width:768px){.gal-mas{columns:3;column-gap:1rem}.gal-mas li{margin-bottom:1rem}}

/* ---------- Details film ---------- */
.film-head{padding-top:clamp(5rem,12vw,10rem);padding-bottom:4rem}
.film-stage{max-width:1300px;margin:0 auto;padding:0 var(--pad) 6rem}
.ch{display:grid;gap:2.5rem;align-items:center;margin-bottom:5rem}
.ch-fig{position:relative;overflow:hidden;aspect-ratio:5/4;background:var(--sand)}
.ch-fig img{width:100%;height:100%;object-fit:cover}
.ch-fig figcaption{position:absolute;left:1rem;bottom:.8rem;font-size:.6rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:#f4eee3;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.ch-txt p:not(.eyebrow){margin-top:1.5rem;max-width:28rem;font-size:1.1rem;opacity:.85}
.ch-txt h3{margin-top:1rem}
@media(min-width:768px){.ch{grid-template-columns:1fr 1fr;gap:5rem}.ch:nth-child(even) .ch-fig{order:2}}
.film-on .film-track{position:relative}
.film-on .film-stage{position:sticky;top:0;height:100vh;height:100svh;max-width:none;padding:0;overflow:hidden}
.film-on .ch{position:absolute;inset:0;margin:0;padding:5.5rem var(--pad) 4rem;display:grid;grid-template-rows:minmax(0,42%) 1fr;gap:1.25rem;align-items:start;opacity:0;visibility:hidden;transition:opacity 1.1s var(--ease),visibility 0s linear 1.1s}
.film-on .ch.on{opacity:1;visibility:visible;transition:opacity 1.1s var(--ease),visibility 0s}
.film-on .ch-fig{aspect-ratio:auto;height:100%}
.film-on .ch-fig img{transform:scale(1.1)}
.film-on .ch.on .ch-fig img{transform:scale(calc(1.1 - var(--lp,0)*.1)) translate3d(calc(var(--lp,0)*-1.2%),0,0)}
.film-on .ch-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,31,49,.55),transparent);opacity:var(--ev,0);pointer-events:none}
.film-on .eyebrow{color:var(--brass)}
.film-on .ch-txt{transform:translate3d(0,26px,0);transition:transform 1.1s var(--ease)}
.film-on .ch.on .ch-txt{transform:none}
.film-on .ch-txt h3{font-size:clamp(2rem,6vw,3.4rem)}
.film-on .ch-txt p:not(.eyebrow){margin-top:1rem;font-size:1rem}
@media(min-width:900px){
  .film-on .ch{grid-template-columns:1.05fr 1fr;grid-template-rows:none;align-items:center;gap:4.5rem;padding:0 var(--pad) 3rem;max-width:var(--wrap);left:0;right:0;margin:0 auto}
  .film-on .ch-fig{height:auto;aspect-ratio:5/4;max-height:68svh;width:100%}
  .film-on .ch:nth-child(even) .ch-fig{order:0}
  .film-on .ch-txt h3{font-size:clamp(2.4rem,4.6vw,4.6rem)}
  .film-on .ch-txt p:not(.eyebrow){font-size:1.1rem;margin-top:1.5rem}
}
.film-index{position:absolute;left:var(--pad);right:var(--pad);bottom:1.1rem;display:flex;gap:1.25rem;z-index:3}
.film-index button{display:flex;align-items:center;gap:.7rem;padding:.6rem 0;opacity:.45;transition:opacity .5s}
.film-index button.on,.film-index button:hover{opacity:1}
.film-index button i{display:block;height:1px;width:1rem;background:currentColor;transition:width .7s var(--ease)}
.film-index button.on i{width:2.75rem}
.film-index button span{display:none;font-size:.68rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase}
@media(min-width:768px){.film-index button span{display:inline}}

/* ---------- Table / dining ---------- */
.table-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 20% 30%,rgba(189,143,82,.16),transparent 70%)}
.offset-frame{position:relative;max-width:440px}
.offset-frame::before{content:"";position:absolute;right:-1.25rem;bottom:-1.25rem;width:100%;height:100%;border:1px solid rgba(189,143,82,.6)}
.offset-frame .frame{background:var(--night)}
.dinner-grid{display:grid;gap:0 2rem;max-width:36rem}
.dinner-grid div{padding:1.1rem 0;border-bottom:1px solid rgba(244,238,227,.18)}
.dinner-grid dt{font-size:.68rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--brass)}
.dinner-grid dd{margin-top:.3rem;font-size:1.15rem}
@media(min-width:640px){.dinner-grid{grid-template-columns:1fr 1fr}}
.block-top{border-top:1px solid rgba(244,238,227,.2);padding-top:2rem}

/* ---------- Kimberley places ---------- */
.place{display:grid;gap:1.25rem;padding:2.5rem 0;border-top:1px solid rgba(244,238,227,.2)}
.place-n{font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--brass)}
.place h3{font-size:clamp(2.2rem,4.4vw,3.8rem);margin-top:.75rem}
.place p.body{margin-top:1.25rem;max-width:36rem;opacity:.78;font-size:1.05rem}
.place p.src{margin-top:1rem;font-size:.78rem;opacity:.55}
@media(min-width:768px){.place{grid-template-columns:4.5rem 1fr;padding:3.5rem 0}}

/* ---------- Plan / final / map ---------- */
.plan{display:grid;border-top:1px solid rgba(21,17,13,.2);margin-top:4rem}
.plan>div{display:flex;flex-direction:column;padding:2.25rem 0;border-bottom:1px solid rgba(21,17,13,.2)}
.plan h3{font-size:2.6rem}
.plan p{margin-top:1rem;flex:1}
.plan .btn{margin-top:2rem;align-self:flex-start}
@media(min-width:768px){.plan{grid-template-columns:repeat(3,1fr)}.plan>div{padding:3rem 2.5rem 3rem 0;border-bottom:0}.plan>div+div{border-left:1px solid rgba(21,17,13,.2);padding-left:2.5rem}}
.contact-line{display:flex;flex-wrap:wrap;gap:.75rem 2.5rem;margin-top:2.5rem;font-size:.95rem}
.final{position:relative;display:flex;align-items:center;min-height:88vh;min-height:88svh;overflow:hidden;background:var(--night);color:var(--paper);text-align:center;padding:7rem 0}
.final-bg{position:absolute;inset:0}
.final-bg img{width:100%;height:100%;object-fit:cover;object-position:75% 60%;filter:saturate(.8) brightness(.55) sepia(.25)}
.final::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,var(--night),rgba(10,31,49,.55) 50%,rgba(10,31,49,.8)),radial-gradient(70% 60% at 50% 100%,rgba(189,120,40,.28),transparent 70%)}
.final .wrap{position:relative;z-index:2;width:100%}
.final h2{font-size:clamp(2.1rem,9vw,10.5rem);text-transform:uppercase;letter-spacing:.03em;line-height:.9;margin-top:2rem}
.final .sig{margin:2.5rem auto 0;max-width:42rem;font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.15;opacity:.92}
.final .btns{margin-top:3rem;justify-content:center}
.map{position:relative;height:380px;background:var(--sand);overflow:hidden;box-shadow:0 50px 90px -50px rgba(21,17,13,.6)}
@media(min-width:768px){.map{height:540px}}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.35) sepia(.18) contrast(1.02)}
.hours{display:grid;gap:.4rem;max-width:22rem}
.hours div{display:flex;justify-content:space-between;gap:1.5rem}
.hours dd{font-variant-numeric:tabular-nums;opacity:.8}
.contact-list{display:grid;gap:1.75rem}
.contact-list .k{font-size:.7rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-deep)}
.contact-list .v{font-size:1.15rem;margin-top:.2rem;display:block}
.contact-list .phone{font-family:var(--serif);font-size:2rem}
.steps{display:grid;gap:2rem;margin-top:3rem;counter-reset:s}
.steps li{counter-increment:s;padding-top:1.25rem;border-top:1px solid rgba(21,17,13,.2)}
.steps li::before{content:"0" counter(s);font-family:var(--serif);font-size:2.4rem;color:var(--brass-deep);display:block;margin-bottom:.5rem;line-height:1}
@media(min-width:768px){.steps{grid-template-columns:repeat(3,1fr);gap:2.5rem}}

/* ---------- Forms ---------- */
.fgrid{display:grid;gap:1.75rem 2rem}
@media(min-width:640px){.fgrid{grid-template-columns:1fr 1fr}.fgrid .full{grid-column:1/-1}}
.flabel{display:block;margin-bottom:.15rem;font-size:.7rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-deep)}
.flabel small{text-transform:none;letter-spacing:0;font-weight:400;opacity:.65;font-size:.8rem}
.dark .flabel{color:var(--brass)}
.field{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(21,17,13,.35);padding:.8rem 0;font:inherit;font-size:1rem;color:inherit;border-radius:0;transition:border-color .4s var(--ease)}
.dark .field{border-bottom-color:rgba(244,238,227,.4)}
.field:focus{outline:none;border-bottom-color:var(--brass-deep);box-shadow:0 1px 0 0 var(--brass-deep)}
.dark .field:focus{border-bottom-color:var(--brass);box-shadow:0 1px 0 0 var(--brass)}
textarea.field{resize:vertical;min-height:7rem}
select.field{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 14px) 55%,calc(100% - 9px) 55%;background-size:5px 5px;background-repeat:no-repeat}
select.field option{color:#15110d}
.dark input[type=date]{color-scheme:dark}
.err{margin-top:.4rem;font-size:.875rem;color:#b3402a}
.dark .err{color:#ff9d88}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fnote{font-size:.8rem;opacity:.75;max-width:24rem}
.fact-line{margin-top:2.25rem;display:flex;flex-direction:column;gap:1.25rem}
@media(min-width:640px){.fact-line{flex-direction:row;align-items:center}}
.form-error{margin-top:2rem;border:1px solid rgba(179,64,42,.65);padding:1.25rem;font-size:.92rem}
.form-done{padding:2rem 0}
.form-done p.big{font-family:var(--serif);font-size:clamp(3rem,6vw,4.5rem);line-height:1;margin-top:1rem}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;background:rgba(21,17,13,.97);color:var(--paper)}
.lb-top{display:flex;align-items:center;justify-content:space-between;padding:.75rem var(--pad)}
.lb-top p{font-size:.7rem;font-weight:600;letter-spacing:.3em;font-variant-numeric:tabular-nums}
.lb-top button{height:2.75rem;padding:0 1rem;font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.lb-top button:hover{color:var(--brass)}
.lb-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 .75rem}
.lb-stage img{max-width:100%;max-height:calc(100vh - 9.5rem);max-height:calc(100svh - 9.5rem);object-fit:contain;animation:fadeup .6s var(--ease) both;user-select:none}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:3rem;height:3rem;border-radius:50%;border:1px solid rgba(244,238,227,.3);background:rgba(21,17,13,.6);display:grid;place-items:center;font-size:1.1rem}
.lb-nav:hover{border-color:var(--brass);color:var(--brass)}
.lb-prev{left:.25rem}.lb-next{right:.25rem}
.lb-cap{padding:1rem 1.5rem;text-align:center;font-size:.8rem;opacity:.7}
@media(min-width:768px){.lb-stage{padding:0 5rem}.lb-prev{left:1.25rem}.lb-next{right:1.25rem}}

/* ---------- 404 ---------- */
.nf{position:relative;display:flex;align-items:center;min-height:100vh;min-height:100svh;overflow:hidden;background:var(--ink);color:var(--paper);padding:10rem 0 6rem}
.nf::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 100%,rgba(189,143,82,.22),transparent 70%)}
.nf .wrap-md{position:relative}

/* ---------- Day → evening veil (home) ---------- */
.veil{position:fixed;inset:0;z-index:45;pointer-events:none;background:radial-gradient(120% 90% at 50% 100%,rgb(189,120,40),rgba(120,60,20,.6) 55%,transparent 80%);opacity:calc(var(--tone)*.14);mix-blend-mode:multiply}

/* ---------- Curtain (first visit of a session, pure CSS timing) ---------- */
.curtain{display:none}
.intro .curtain{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--ink);color:var(--paper);animation:curtainout 1.3s var(--ease) 1.15s both}
.curtain span{font-family:var(--serif);font-size:clamp(1.8rem,6vw,3.2rem);text-transform:uppercase;letter-spacing:.3em;animation:fadeout .7s ease .6s both}
.curtain span{animation-name:fadein,fadeout;animation-duration:.8s,.7s;animation-delay:0s,.9s;animation-fill-mode:both,both}

/* ---------- Motion ---------- */
@keyframes kb{from{transform:scale(1.14) translate3d(1.2%,1%,0)}to{transform:scale(1.02) translate3d(0,0,0)}}
@keyframes fadeup{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes fadeout{to{opacity:0}}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes curtainout{to{clip-path:inset(0 0 100% 0);visibility:hidden}}
@keyframes pagein{from{opacity:0}to{opacity:1}}
main{animation:pagein .8s var(--ease) backwards}
.fadeup{animation:fadeup 1.2s var(--ease) both;animation-delay:var(--d,0s)}
.intro .fadeup{animation-delay:calc(var(--d,0s) + 1.5s)}

/* progressive enhancement: hidden-until-revealed only when JS is running */
.js .rv{opacity:0;transform:translate3d(0,28px,0);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .mask{clip-path:inset(0 0 100% 0);transition:clip-path 1.5s var(--ease)}
.js .mask.in{clip-path:inset(-90px -90px -90px -90px)}
.js .mask img{transform:scale(1.18);transition:transform 2s var(--ease)}
.js .mask.in img{transform:scale(1)}
.ln{display:block;overflow:hidden;overflow:visible clip;padding-bottom:.14em;margin-bottom:-.14em}
.ln-i{display:block}
.js .lines .ln-i{transform:translate3d(0,108%,0);transition:transform 1.25s var(--ease)}
.js .lines.in .ln-i{transform:none}

/* failsafe: if the script never started, nothing may stay hidden */
.no-anim .rv,.no-anim .mask,.no-anim .mask img{opacity:1!important;transform:none!important;clip-path:none!important}
.no-anim .lines .ln-i{transform:none!important}
.no-anim .intro .curtain,.no-anim .curtain{display:none!important}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
  .js .rv,.js .lines .ln-i,.js .mask,.js .mask img{opacity:1!important;transform:none!important;clip-path:none!important}
  .intro .curtain{display:none}
  @view-transition{navigation:none}
}