/* ==========================================================================
   Hotel Cheval: main stylesheet
   1. Tokens  2. Base  3. Type  4. Buttons  5. Plates  6. Navigation
   7. Sections (hero, intro, rooms, experience, wine country, pony club,
      invitation, final, footer)  8. Responsive  9. Reduced motion
   ========================================================================== */

/* 1. Tokens */
:root{
  --ivory:#F5F0E7; --sand:#C5B49B; --wine:#773F43; --leather:#544638; --char:#262521;
  --paper:#F5F0E7; --paper-2:#C5B49B; --ink:#262521; --ink-soft:#544638; --line:rgba(38,37,33,.2);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gutter:clamp(1.25rem,4.5vw,4.75rem);
  --section:clamp(5.5rem,11vw,10.5rem);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--paper:#1F1D1A;--paper-2:#3A3027;--ink:#F5F0E7;--ink-soft:#C5B49B;--line:rgba(245,240,231,.22)}
}
:root[data-theme="dark"]{--paper:#1F1D1A;--paper-2:#3A3027;--ink:#F5F0E7;--ink-soft:#C5B49B;--line:rgba(245,240,231,.22)}

/* 2. Base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
svg{display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:1rem;top:-5rem;z-index:100;background:var(--ivory);color:var(--char);padding:.75rem 1.1rem;transition:top .2s}
.skip:focus{top:1rem}

/* 3. Type */
h1,h2,h3,.serif{font-family:var(--serif);font-weight:300;font-variation-settings:"opsz" 144,"SOFT" 40;letter-spacing:-.024em;line-height:1.02;text-wrap:balance}
.h2{font-size:clamp(2.45rem,6vw,5.6rem)}
.h3{font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:1.1;letter-spacing:-.015em}
.lede{font-size:clamp(1.1rem,1.5vw,1.28rem);line-height:1.6;max-width:34rem}
.body{max-width:34rem}
.body p+p{margin-top:1.1em}
.eyebrow{font-size:.8rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--wine)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .eyebrow{color:var(--sand)}}
:root[data-theme="dark"] .eyebrow{color:var(--sand)}

/* 4. Links and buttons */
.link{display:inline-block;font-weight:500;padding-bottom:.25rem;border-bottom:1px solid currentColor;transition:opacity .3s,border-color .3s}
.link:hover{opacity:.65}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:1rem 2rem;border:1px solid currentColor;font-weight:500;font-size:.95rem;line-height:1;letter-spacing:.03em;white-space:nowrap;transition:background-color .4s,color .4s,border-color .4s}
.btn--ivory{color:var(--ivory)}
.btn--ivory:hover{background:var(--ivory);color:var(--char)}
.btn--ink{color:var(--ink)}
.btn--ink:hover{background:var(--ink);color:var(--paper)}
.btn--solid{background:var(--ivory);color:var(--wine);border-color:var(--ivory);padding:1.2rem 2.6rem;font-size:1.02rem}
.btn--solid:hover{background:transparent;color:var(--ivory)}

/* 5. Photo plates: real photography where available, illustrated fallback otherwise */
.plate{position:relative;overflow:hidden;background:var(--leather);isolation:isolate}
.plate .art{position:absolute;left:0;right:0;top:-6%;bottom:-6%;will-change:transform}
.plate .art>svg,.plate .layer>svg{width:100%;height:100%}
.plate::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:overlay;opacity:.5;
  background-image:url("../img/noise.svg")}
.plate::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(120% 100% at 50% 45%,transparent 55%,rgba(10,8,7,.35))}
.js .plate{opacity:0;transition:opacity 1.5s ease}
.js .plate.in,.js .hero .plate{opacity:1}
.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease;z-index:1}
.has-photo .photo{opacity:1}
.has-photo .note{display:none}
.plate.has-photo::after{opacity:.14}
.plate.has-photo::before{background:radial-gradient(130% 110% at 50% 45%,transparent 65%,rgba(10,8,7,.22))}
.flick{animation:flick 5.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes flick{0%,100%{transform:scale(.97)}25%{transform:scale(1.04)}50%{transform:scale(.99)}75%{transform:scale(1.06)}}
.note{position:absolute;left:.8rem;bottom:.8rem;z-index:4;max-width:calc(100% - 1.6rem);padding:.5rem .75rem;font-size:.72rem;line-height:1.35;color:var(--ivory);background:rgba(20,18,17,.64);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-left:2px solid var(--sand)}
.note::before{content:"Photo direction: ";font-weight:600;color:var(--sand)}
.note.tr{left:auto;right:var(--gutter);bottom:auto;top:6.2rem;max-width:min(22rem,60%)}
body.notes-off .note{display:none}
.notes-toggle{position:fixed;left:1rem;bottom:1rem;z-index:45;padding:.55rem .9rem;font-size:.74rem;font-weight:500;letter-spacing:.03em;color:var(--ivory);background:rgba(20,18,17,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(245,240,231,.3);transition:background .3s}
.notes-toggle:hover{background:rgba(20,18,17,.95)}

/* 6. Navigation */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:1.35rem var(--gutter);color:var(--ivory);transition:background-color .45s,color .45s,padding .45s,box-shadow .45s}
.nav.solid{background:var(--paper);background:color-mix(in srgb,var(--paper) 93%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink);padding-block:.85rem;box-shadow:0 1px 0 var(--line)}
.brand{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--serif);font-variation-settings:"opsz" 72,"SOFT" 40;font-weight:400;font-size:1.4rem;letter-spacing:-.01em;justify-self:start}
.mark{width:1.45rem;height:auto;fill:currentColor}
.fb{align-items:center;gap:.7rem}
.logo{display:block;height:2.5rem;width:auto}
.fb{display:none}
.brand.no-logo .logo{display:none}
.brand.no-logo .fb{display:inline-flex}
.nav .logo{filter:brightness(0) invert(1);transition:filter .45s}
.nav.solid .logo{filter:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .nav.solid .logo{filter:brightness(0) invert(1)}}
:root[data-theme="dark"] .nav.solid .logo{filter:brightness(0) invert(1)}
body.menu-open .nav .logo{filter:brightness(0) invert(1)}
.foot .logo{filter:brightness(0) invert(1);height:3.2rem}
.nav-links{display:flex;gap:clamp(1.3rem,2.6vw,2.8rem)}
.nav-links a{position:relative;font-size:.95rem;padding:.3rem 0}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;justify-content:flex-end;gap:1rem}
.nav .btn{padding:.8rem 1.5rem;color:inherit}
.nav .btn:hover{background:var(--ivory);color:var(--char);border-color:var(--ivory)}
.nav.solid .btn{background:var(--wine);border-color:var(--wine);color:var(--ivory)}
.nav.solid .btn:hover{background:var(--char);border-color:var(--char)}
.nav .btn .short{display:none}
.menu-btn{display:none;font-size:.95rem;font-weight:500;padding:.5rem 0 .5rem .4rem}
.sheet{position:fixed;inset:0;z-index:40;background:var(--char);color:var(--ivory);display:flex;flex-direction:column;justify-content:space-between;padding:6.5rem var(--gutter) 2rem;transform:translateY(-100%);visibility:hidden;transition:transform .6s cubic-bezier(.7,0,.2,1),visibility 0s .6s;overflow-y:auto}
.sheet ul{display:grid;gap:.4rem}
.sheet li a{display:block;font-family:var(--serif);font-variation-settings:"opsz" 144,"SOFT" 40;font-weight:300;font-size:clamp(2.1rem,9vw,3rem);line-height:1.2;letter-spacing:-.02em;padding:.25rem 0}
.sheet-foot{display:grid;gap:1.2rem;margin-top:2rem}
.sheet-foot .btn{width:100%;background:var(--ivory);color:var(--wine);border-color:var(--ivory);padding:1.2rem}
.sheet-foot small{font-size:.9rem;color:var(--sand);line-height:1.6}
body.menu-open{overflow:hidden}
body.menu-open .sheet{transform:none;visibility:visible;transition:transform .6s cubic-bezier(.7,0,.2,1),visibility 0s}
body.menu-open .nav{color:var(--ivory);background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
body.menu-open .nav .btn{visibility:hidden}
body.menu-open .notes-toggle{display:none}

/* 7a. Hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;color:var(--ivory);isolation:isolate;overflow:hidden;background:#15161d}
.hero>.plate{position:absolute;inset:0;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,16,16,.42) 0%,rgba(18,16,16,0) 30%,rgba(18,16,16,.5) 72%,rgba(18,16,16,.82) 100%)}
.hero-in{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:2rem;padding:8rem var(--gutter) clamp(2.6rem,7vh,5rem)}
.hero h1{font-size:clamp(3rem,9.4vw,9.8rem);line-height:.96;letter-spacing:-.03em;font-weight:300}
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln>span{display:block;transform:translateY(108%);animation:rise 1.5s cubic-bezier(.16,.7,.1,1) .25s forwards}
.ln:nth-child(2)>span{animation-delay:.4s}
@keyframes rise{to{transform:none}}
.hero-sub{margin-top:clamp(1.6rem,3vw,2.4rem);max-width:33rem;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.55;opacity:0;animation:fade 1.4s ease 1.1s forwards}
.hero .btn{margin-top:clamp(1.6rem,3vw,2.4rem);opacity:0;animation:fade 1.4s ease 1.35s forwards}
.hero-side{font-size:.92rem;line-height:1.55;text-align:right;max-width:15rem;opacity:0;animation:fade 1.4s ease 1.6s forwards}
.nav{opacity:0;animation:fade 1.2s ease .9s forwards}
@keyframes fade{to{opacity:1}}

/* 7b. Introduction */
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(2.5rem,7vw,8rem);padding:var(--section) var(--gutter)}
.intro .plate{width:min(100%,600px);aspect-ratio:3/4.15;border-radius:999px 999px 0 0;justify-self:start}
.intro-text{max-width:35rem}
.intro-text .eyebrow{display:block;margin-bottom:1.6rem}
.intro-text .h2{margin-bottom:2rem}
.intro-text .link{margin-top:2.2rem}

/* 7c. Guestrooms */
.rooms{background:var(--paper-2);padding:var(--section) 0 clamp(4rem,8vw,7rem)}
.rooms-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,6vw,7rem);align-items:end;padding:0 var(--gutter)}
.rooms-head .lede{margin-top:0}
.rooms-ctl{display:flex;align-items:center;gap:1.2rem;margin-top:2rem}
.arrow{width:3.1rem;height:3.1rem;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;transition:background-color .3s,color .3s,opacity .3s}
.arrow:hover:not(:disabled){background:var(--ink);color:var(--paper-2)}
.arrow:disabled{opacity:.3;cursor:default}
.arrow svg{width:1.1rem;height:1.1rem;stroke:currentColor;fill:none;stroke-width:1.5}
.prog{flex:1;max-width:11rem;height:1px;background:var(--line);position:relative;overflow:hidden}
.prog i{position:absolute;inset:0;background:var(--ink);transform:scaleX(.3);transform-origin:left;transition:transform .3s}
.track{display:flex;align-items:stretch;gap:clamp(1.2rem,3vw,3.2rem);overflow-x:auto;scroll-snap-type:x mandatory;padding:clamp(2.5rem,5vw,4.5rem) var(--gutter) 1rem;scroll-padding-left:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.track::-webkit-scrollbar{display:none}
.track::after{content:"";flex:0 0 1px}
.room{flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column}
/* All room images share one height so titles, text and buttons line up */
.room .plate{width:100%;height:clamp(340px,36vw,560px)}
.r1{width:clamp(280px,32vw,500px)}
.r2{width:clamp(300px,46vw,730px)}
.r3{width:clamp(270px,29vw,450px)}
.room-text{flex:1;display:flex;flex-direction:column;padding-top:1.5rem;max-width:30rem}
.room-text p{margin-top:.7rem;color:var(--ink-soft)}
.room-links{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 1.6rem;margin-top:auto;padding-top:1.4rem}
.room-links .btn{padding:.8rem 1.4rem;font-size:.9rem}
.inroom{margin:clamp(2.5rem,5vw,4rem) var(--gutter) 0;border-top:1px solid var(--ink)}
.inroom summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.5rem 0;cursor:pointer;font-family:var(--serif);font-variation-settings:"opsz" 72,"SOFT" 40;font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:300;letter-spacing:-.01em}
.inroom summary::-webkit-details-marker{display:none}
.pm{position:relative;width:1.1rem;height:1.1rem;flex:none}
.pm::before,.pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .4s}
.pm::after{transform:rotate(90deg)}
.inroom[open] .pm::after{transform:rotate(0)}
.inroom-body{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem clamp(1.5rem,3vw,3rem);padding:.5rem 0 2rem;animation:fade .6s ease}
.inroom-body h4{font-family:var(--serif);font-weight:400;font-size:1.15rem;margin-bottom:.4rem}
.inroom-body p{font-size:.97rem;color:var(--ink-soft);line-height:1.55}
.inroom .link{margin-bottom:1rem}

/* 7d. Experience */
.exp{background:var(--wine);color:var(--ivory);padding:var(--section) var(--gutter)}
.exp-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2vw,2rem);row-gap:clamp(2.5rem,5vw,5rem)}
.exp-head{grid-column:1/8}
.exp-lede{grid-column:9/13;align-self:end;font-size:1.12rem;line-height:1.6;color:rgba(245,240,231,.9)}
.exp-big{grid-column:1/9;aspect-ratio:4/3}
.exp-side{grid-column:9/13;display:flex;flex-direction:column;justify-content:space-between;gap:2.5rem}
.exp-side .plate{flex:1 1 0;min-height:240px;width:100%}
.exp-b{grid-column:1/5;aspect-ratio:5/4;align-self:start}
.moments{grid-column:6/13;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem clamp(1.5rem,3vw,3.5rem);align-content:start}
.moment{border-top:1px solid rgba(245,240,231,.35);padding-top:1.3rem}
.moment h3{font-size:1.55rem;line-height:1.15;letter-spacing:-.01em;margin-bottom:.55rem}
.moment p{font-size:.99rem;color:rgba(245,240,231,.86);line-height:1.6}
.exp-side .moment{border-top:1px solid rgba(245,240,231,.35)}

/* 7e. Wine country */
.pano{position:relative;height:min(92vh,820px);min-height:520px;color:var(--ivory);display:flex;align-items:flex-end;isolation:isolate;overflow:hidden}
.pano>.plate{position:absolute;inset:0;z-index:-2}
.pano::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,15,10,.1) 30%,rgba(20,15,10,.62) 100%)}
.pano-in{width:100%;padding:0 var(--gutter) clamp(2.5rem,6vw,5rem);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:2rem;align-items:end}
.pano h2{font-size:clamp(2.8rem,8vw,8rem);line-height:.98}
.pano p{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.55;max-width:26rem;justify-self:end}
.discover{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,7vw,8rem);padding:var(--section) var(--gutter);align-items:start}
.discover .body{margin-bottom:3rem}
.dests{border-bottom:1px solid var(--line)}
.dest{display:grid;grid-template-columns:1fr auto;gap:.3rem 1.5rem;align-items:baseline;padding:1.5rem 0;border-top:1px solid var(--line);transition:padding .4s ease,color .4s}
.dest strong{grid-column:1;font-family:var(--serif);font-variation-settings:"opsz" 72,"SOFT" 40;font-weight:300;font-size:clamp(1.5rem,2.3vw,2.1rem);letter-spacing:-.015em;line-height:1.15}
.dest span{grid-column:1;font-size:.98rem;color:var(--ink-soft)}
.dest i{grid-column:2;grid-row:1/3;align-self:center;font-style:normal;font-size:.9rem;font-weight:500;border-bottom:1px solid currentColor;padding-bottom:.15rem;opacity:.75}
.dest.on{padding-left:1.1rem;color:var(--wine)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dest.on{color:var(--sand)}}
:root[data-theme="dark"] .dest.on{color:var(--sand)}
.switch{aspect-ratio:4/5;width:100%;position:sticky;top:6rem}
.layer{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.layer.on{opacity:1}

/* 7f. Pony Club */
.pony{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh;color:var(--ivory);background:radial-gradient(70% 60% at 85% 45%,rgba(119,63,67,.3),transparent 70%),var(--char)}
.pony-text{padding:var(--section) var(--gutter);align-self:center;max-width:44rem}
.pony-text .h2{margin-bottom:2rem}
.pony-text .body{color:rgba(245,240,231,.88)}
.hours{margin-top:2.5rem;max-width:26rem}
.hours div{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-top:1px solid rgba(245,240,231,.22);font-size:.98rem}
.hours div:last-child{border-bottom:1px solid rgba(245,240,231,.22)}
.hours dt{color:var(--sand)}
.hours dd{text-align:right}
.pony-links{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin-top:2.2rem;align-items:center}
.pony-note{margin-top:1.4rem;font-size:.9rem;color:var(--sand)}
.pony .plate{min-height:560px}

/* 7g. Invitation */
.invite{background:var(--paper-2);padding:var(--section) var(--gutter);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2vw,2rem);align-items:center}
.invite .plate{grid-column:1/7;aspect-ratio:4/5}
.invite-text{grid-column:8/13}
.invite blockquote{margin:0;font-family:var(--serif);font-style:italic;font-variation-settings:"opsz" 96,"SOFT" 60;font-weight:300;font-size:clamp(1.6rem,2.9vw,2.6rem);line-height:1.22;letter-spacing:-.015em;text-wrap:pretty}
.sign{margin-top:1.8rem;font-weight:500}
.extra{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--ink);max-width:28rem}
.extra h3{font-size:1.4rem;line-height:1.15;margin-bottom:.5rem}
.extra p{color:var(--ink-soft);font-size:.98rem}
.extra .link{margin-top:1rem}

/* 7h. Final booking */
.final{background:var(--wine);color:var(--ivory);text-align:center;padding:clamp(7rem,14vw,12rem) var(--gutter)}
.final h2{font-size:clamp(2.7rem,7.2vw,7rem);max-width:14ch;margin:0 auto}
.final p{margin:2rem auto 2.8rem;max-width:30rem;font-size:1.15rem;line-height:1.6;color:rgba(245,240,231,.9)}
.final small{display:block;margin-top:1.6rem;font-size:.92rem;color:var(--sand)}
.final small a{border-bottom:1px solid currentColor}

/* 7i. Footer */
.foot{background:var(--char);color:var(--ivory);padding:clamp(4rem,7vw,6.5rem) var(--gutter) 4.5rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:3rem clamp(1.5rem,4vw,4rem)}
.foot .brand{font-size:1.7rem;margin-bottom:1.4rem}
.foot address{font-style:normal;line-height:1.7;color:rgba(245,240,231,.85)}
.foot address a{border-bottom:1px solid rgba(245,240,231,.35)}
.foot h4{font-family:var(--serif);font-weight:300;font-size:1.05rem;color:var(--sand);margin-bottom:1rem}
.foot li{margin:.1rem 0}
.foot li a{display:inline-block;padding:.25rem 0;font-size:.97rem;color:rgba(245,240,231,.88);transition:color .3s}
.foot li a:hover{color:var(--sand)}
.foot .btn{margin-top:1.6rem;padding:.85rem 1.5rem;font-size:.9rem}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;margin-top:clamp(3rem,6vw,5rem);padding-top:1.5rem;border-top:1px solid rgba(245,240,231,.2);font-size:.85rem;color:rgba(245,240,231,.65)}

/* 8. Responsive */
@media (max-width:1100px){
  .inroom-body{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  .nav{grid-template-columns:1fr auto}
  .nav-links{display:none}
  .menu-btn{display:block}
  .hero-in{grid-template-columns:1fr}
  .hero-side{display:none}
  .intro{grid-template-columns:1fr}
  .intro .plate{width:min(100%,460px)}
  .rooms-head{grid-template-columns:1fr;gap:1.5rem}
  .rooms-ctl{margin-top:1.2rem}
  .r1,.r2,.r3{width:82vw}
  .exp-head,.exp-lede,.exp-big,.exp-side,.exp-b,.moments{grid-column:1/-1}
  .exp-big{aspect-ratio:4/5}
  .exp-side{flex-direction:column-reverse}
  .exp-side .plate{flex:none;aspect-ratio:4/3;min-height:0}
  .exp-b{aspect-ratio:4/3;width:100%}
  .moments{grid-template-columns:1fr}
  .pano-in{grid-template-columns:1fr}
  .pano p{justify-self:start}
  .discover{grid-template-columns:1fr}
  .switch{position:relative;top:0;order:-1;aspect-ratio:4/3}
  .pony{grid-template-columns:1fr}
  .pony .plate{order:-1;min-height:0;aspect-ratio:4/5}
  .invite{display:block}
  .invite .plate{aspect-ratio:4/5;margin-bottom:2.5rem}
  .note.tr{top:5.4rem;right:1rem;max-width:calc(100% - 2rem)}
}
@media (max-width:640px){
  body{font-size:1rem}
  .brand{font-size:1.2rem}
  .nav .btn .long{display:none}
  .nav .btn .short{display:inline}
  .nav .btn{padding:.7rem 1.2rem}
  .inroom-body{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .notes-toggle{bottom:.7rem;left:.7rem}
  .hero h1{font-size:clamp(2.9rem,14vw,4.2rem)}
}
/* 9. Reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .ln>span{transform:none}
  .flick{animation:none}
}