/* Oshawa Inn: the only stylesheet. Contract: DESIGN.md B/D/E/G */

@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/BarlowCondensed-900-latin.woff2) format("woff2");font-weight:900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Barlow;src:url(/assets/fonts/Barlow-400-latin.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Barlow;src:url(/assets/fonts/Barlow-500-latin.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Barlow;src:url(/assets/fonts/Barlow-600-latin.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Fallback";src:local("Arial");size-adjust:94.9%;ascent-override:105.4%;descent-override:21.1%;line-gap-override:0%}
@font-face{font-family:"Barlow Condensed Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:900;size-adjust:78.9%;ascent-override:126.7%;descent-override:25.3%;line-gap-override:0%}

@property --glow{syntax:"<length>";inherits:false;initial-value:0px}
/* never inherited: a plate's keylines must not reappear in a child button or focus ring */
@property --shadow{syntax:"*";inherits:false}

:root{
  --sign:#F2E23A;--ink:#1E1E1C;--asphalt:#2B2F38;--asphalt-hi:#353A45;--stucco:#FFFFFF;--concrete:#E9EAE6;
  --sill:#C22B22;--mint:#5CC3AD;--steel-900:#3D3D3D;--steel-700:#555555;--steel-500:#737373;
  --fog:#C9CCD3;--logo-red:#D0392B;--sky:#49A0D7;

  --f-sign:"Barlow Condensed","Barlow Condensed Fallback",Arial,sans-serif;
  --f-body:"Barlow","Barlow Fallback",Arial,sans-serif;
  --t-display-m:clamp(40px, 5.6vw, 84px);--t-display-s:clamp(28px, 3vw, 44px);
  --t-price-xl:clamp(56px, 7vw, 104px);--t-price-l:clamp(48px, 5vw, 72px);--t-price-m:40px;
  --t-body-l:clamp(18px, 1.4vw, 20px);--t-body:clamp(17px, 1.2vw, 18px);--t-ui:17px;--t-small:15px;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--s9:112px;
  --gutter:clamp(16px, 4vw, 32px);--maxw:1280px;--section-pad:clamp(72px, 9vw, 112px);

  --r-glass:28px;--r-glass-sm:24px;--r-pill:999px;--r-enamel:14px;--r-plate:10px;--r-window:6px;
  --r-thumb:4px;--r-door:3px;--r-table:0;

  --glaze:linear-gradient(to bottom, rgb(255 255 255/.35), transparent 45%);
  --shadow-float:0 24px 48px -24px rgb(10 12 16/.5);

  --z-wm:2;--z-card:3;--z-tray:40;--z-nav:50;--z-sheet:60;--z-skip:100;

  --ease-out:cubic-bezier(.2,.8,.2,1);--ease-io:cubic-bezier(.65,0,.35,1);
  --d-press:160ms;--d-ui:280ms;--d-hero:900ms;

  /* hero-h: README CSS notes */
  --hero-h:clamp(680px,100svh,max(1000px,min(1440px,75vw)));
  /* --col: README CSS notes */
  --col:calc((100% + var(--gutter)) / 12);
}
/* small-phone h2: README CSS notes */
@media (max-width:399px){:root{--t-display-m:min(40px, calc(10.9vw - 3.2px))}}

/* ---------- base ---------- */
*,::before,::after{box-sizing:border-box}
/* bottom = 76px tray + 6px focus ring + 6px gap */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;scroll-padding:72px 0 calc(88px + env(safe-area-inset-bottom));background:var(--asphalt)}
body{margin:0;overflow-x:clip;font:400 var(--t-body)/1.55 var(--f-body);color:var(--ink);background:var(--asphalt);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
:where(h1,h2,h3,h4,p,ul,ol,figure,dl,dd,blockquote,address){margin:0}
:where(ul,ol){padding:0;list-style:none}
address{font-style:normal}
img,picture,svg,canvas{display:block;max-width:100%}
img{height:auto}
b,strong{font-weight:600}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}
a[href^="tel:"]{white-space:nowrap}
button{margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
a,button,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
table{border-collapse:separate;border-spacing:0}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.nw{white-space:nowrap}

#skip{position:fixed;top:12px;left:12px;z-index:var(--z-skip);padding:14px 20px;border-radius:var(--r-enamel);background:var(--sign);color:var(--ink);font:600 var(--t-ui)/1 var(--f-body);text-decoration:none;transform:translateY(-200%)}
#skip:focus{transform:none}

.shell{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
@media (min-width:1024px){html{scroll-padding:96px 0 12px}}

/* ---------- type ---------- */
h2{font:900 var(--t-display-m)/.92 var(--f-sign);letter-spacing:.005em;text-wrap:balance}
.sx-block,.loc__finding h3{display:block;width:calc(100% / 1.3);transform:scaleX(1.3);transform-origin:0 50%;font-family:var(--f-sign);font-weight:900}
/* sx figures: README CSS notes */
.sx{display:inline-block;transform:scaleX(1.3);transform-origin:0 50%;margin-inline-end:calc(var(--adv) * .3em);font-family:var(--f-sign);font-weight:900;line-height:.85;white-space:nowrap}
main p{max-width:65ch;text-wrap:pretty}
main p a:not(.btn){font-weight:600}
main h2+p{margin-top:24px;font-size:var(--t-body-l);line-height:1.5}
@media (hover:hover){a:not(.btn):hover{text-decoration-thickness:3px}}

/* ---------- enamel buttons ---------- */
.btn{--fill:var(--sign);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:6px 24px;border:0;border-radius:var(--r-enamel);background:var(--glaze),var(--fill);color:var(--ink);font:600 18px/1.15 var(--f-body);text-align:center;text-decoration:none;box-shadow:var(--shadow,none);cursor:pointer;transition:transform var(--d-press) var(--ease-out),box-shadow var(--d-press) var(--ease-out)}
.btn svg{flex:none;width:20px;height:20px}
.btn:active{transform:translateY(1px)}
.btn--sign{--shadow:inset 0 0 0 2px var(--sign),inset 0 0 0 3.5px var(--ink),inset 0 -2px 0 rgb(0 0 0/.18),0 0 var(--glow) rgb(242 226 58/.6)}
.btn--sign:active{--shadow:inset 0 0 0 2px var(--sign),inset 0 0 0 3.5px var(--ink),inset 0 0 0 rgb(0 0 0/.18),0 0 var(--glow) rgb(242 226 58/.6)}
.btn--ink{--fill:var(--ink);color:var(--sign);--shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 3.5px var(--sign)}
.btn--line{background:none;color:var(--sign);border:2px solid var(--sign)}
.btn--sm{min-height:48px;padding:4px 18px}
@media (hover:hover){
  .btn--sign:hover{--fill:#F6E84A}
  .btn--ink:hover{--fill:#34342F}
  .btn--line:hover{background:rgb(242 226 58/.12)}
}

/* ---------- liquid glass (G) ---------- */
.lg{position:relative;isolation:isolate;border-radius:var(--lg-r,var(--r-glass));--rim:calc(var(--lg-rim,18) * 1px)}
.lg::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgb(var(--tint)/var(--lg-a,.30));-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6)}
html.lg-refract .lg::before{backdrop-filter:var(--lg-filter,blur(14px)) blur(2px) saturate(1.5)}
/* glass core: README CSS notes */
.lg__core{position:absolute;inset:var(--rim);z-index:-1;border-radius:calc(var(--lg-r,28px) - var(--rim));--core:rgb(var(--tint)/.50);background:var(--core);box-shadow:0 0 calc(var(--rim) * .8) calc(var(--rim) * .35) var(--core)}
.lg::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;background:linear-gradient(135deg,rgb(255 255 255/.75),rgb(255 255 255/.08) 38%,transparent 60%,rgb(255 255 255/.28));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.lg--dark{--tint:22 24 29;color:#fff}
.lg--light{--tint:255 255 255;--shadow:0 0 0 1px rgb(30 30 28/.1);color:var(--ink);box-shadow:var(--shadow)}
/* light core: README CSS notes */
.lg--light .lg__core{--core:rgb(var(--tint)/.60)}
html[data-nav-tone=dark] :is(#nav-pill,#nav-sheet){--tint:22 24 29;color:#fff}
/* pill tint: README CSS notes */
#nav-pill .lg__core{--core:rgb(var(--tint)/.34);box-shadow:0 0 var(--rim) calc(var(--rim) * .5) var(--core)}
html[data-nav-tone=dark] #nav-pill .lg__core{--core:rgb(var(--tint)/.17)}

/* ---------- nav (E1) ---------- */
#site-nav{position:fixed;inset:0 0 auto;z-index:var(--z-nav);padding:12px 12px 0;pointer-events:none}
#nav-pill{--lg-rim:12;--lg-scale:22;--lg-r:26px;--lg-a:.58;pointer-events:auto;display:flex;align-items:center;gap:8px;height:52px;max-width:var(--maxw);margin-inline:auto;padding:0 2px 0 18px;transition:color .2s}
#nav-pill::before{transition:background-color .2s}#nav-pill .lg__core{transition:background-color .2s,box-shadow .2s}
/* nav refraction frost: README CSS notes */
html.lg-refract #nav-pill::before{backdrop-filter:var(--lg-filter,blur(14px)) blur(6px) saturate(1.5)}
.brand{display:flex;align-items:center;gap:10px;min-height:48px;margin-right:auto;text-decoration:none}
.brand__emblem{width:36px;height:auto;aspect-ratio:1000/745}
.brand__wordmark{width:auto;height:18.4px;aspect-ratio:5831/716}
.brand__emblem--rev,html[data-nav-tone=dark] .brand__emblem{display:none}
html[data-nav-tone=dark] .brand__emblem--rev{display:block}
.nav__links,.nav__call{display:none}
#nav-toggle{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%}
#nav-toggle svg{width:24px;height:24px}
#nav-toggle .ic-close,#nav-toggle[aria-expanded=true] .ic-open{display:none}
#nav-toggle[aria-expanded=true] .ic-close{display:block}
#nav-sheet{--lg-rim:12;--lg-r:24px;position:absolute;top:72px;right:12px;z-index:var(--z-sheet);width:min(320px,100% - 24px);padding:0;pointer-events:auto;transform-origin:top right;transform:scale(.12);visibility:hidden;transition:transform var(--d-ui) var(--ease-out),visibility 0s var(--d-ui)}
/* sheet scroller: README CSS notes */
#nav-sheet ul{max-height:calc(100vh - 84px);max-height:calc(100svh - 84px);padding:12px 0;overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:12px;border-radius:inherit;scrollbar-width:thin;scrollbar-color:rgb(30 30 28/.4) transparent}
/* sheet scale: README CSS notes */
#nav-sheet a{display:flex;align-items:center;min-height:52px;margin:0 10px;padding:0 14px;border-radius:14px;font:600 var(--t-ui)/1.2 var(--f-body);text-decoration:none;opacity:0;transition:opacity var(--d-ui)}
html.sheet-open #nav-sheet{transform:none;visibility:visible;transition:transform var(--d-ui) var(--ease-out),visibility 0s}
html.sheet-open #nav-sheet a{opacity:1}
@media (hover:hover){#nav-sheet a:hover{text-decoration:underline}}
@media (min-width:1024px){
  #site-nav{padding:16px var(--gutter) 0}
  /* desktop pill axis: README CSS notes */
  #nav-pill{--lg-r:32px;height:64px;padding:0 10px 0 24px;max-width:calc(var(--maxw) - 2 * var(--gutter))}
  .nav__links{display:flex;gap:2px}
  .nav__link{display:block;padding:12px;font:600 16px/20px var(--f-body);text-decoration:none;text-underline-offset:6px}
  @media (hover:hover){.nav__link:hover{text-decoration-line:underline}}
  .nav__link[aria-current=true]{text-decoration:underline 3px var(--sign);text-underline-offset:6px}
  .nav__call{display:inline-flex;min-height:44px;margin-left:10px;padding:0 18px;font-size:var(--t-ui)}
  #nav-toggle,#nav-sheet{display:none}
  /* coarse nav targets: README CSS notes */
  @media (pointer:coarse){.nav__link{padding-block:14px}.nav__call{min-height:48px}}
}
/* js-ready controls: README CSS notes */
html:not(.js-ready) :is(#nav-toggle,#fob-turn){display:none}
/* no-JS menu: README CSS notes */
.nav__menu{display:none}
@media (max-width:1023px){html:not(.js) .nav__menu{display:grid;place-items:center;flex:none;min-height:48px;padding:0 16px;border-radius:24px;font:600 var(--t-ui)/1 var(--f-body);text-decoration:none}}

/* ---------- hero (E2) ---------- */
.hero{position:relative;background:var(--asphalt)}
.hero__photo{position:relative;height:var(--hero-h);container-type:size;overflow:clip;background:var(--sky)}
.hero__photo::after{content:"";position:absolute;inset:auto 0 0;height:120px;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--asphalt))}
.hero__stage{--W:max(100cqw, 100cqh * 4 / 3);--Hs:calc(var(--W) * .75);position:absolute;width:var(--W);aspect-ratio:4/3;left:calc((100cqw - var(--W)) * .5);top:clamp(calc(100cqh - var(--Hs)), max(calc(50cqh - var(--Hs) * .481), calc(104px - var(--Hs) * .211)), 0px)}
.hero__img{position:absolute;inset:0;width:100%;height:100%;display:block}
.roofclip{position:absolute;inset:0;z-index:var(--z-wm);clip-path:polygon(0% 0%,100% 0%,100% 40.5%,94.5% 44.5%,89.4% 33.2%,71.5% 39.2%,68.5% 43.1%,69.3% 43.6%,69.3% 45%,64% 48.1%,22.4% 48.1%,0% 39.1%)}
/* depth overscan: README CSS notes */
@supports (width:1cqw){@media (min-width:1024px) and (pointer:fine) and (hover:hover) and (prefers-reduced-motion:no-preference){.hero__stage{scale:1.012}}}
.wm{position:absolute;left:23%;bottom:51%;width:min(54.6%,1100px);margin:0;forced-color-adjust:none}
.wm{font-size:calc(min(var(--W,60vw) * .546, 1100px) / 100)}
.wm svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(.14em .12em 0 #4B4B48) drop-shadow(.14em .12em 0 #434341) drop-shadow(.14em .12em 0 #3B3B39) drop-shadow(.14em .12em 0 #333331) drop-shadow(.14em .12em 0 #2C2C2A) drop-shadow(.14em .12em 0 #252523) drop-shadow(.14em .12em 0 #1F1F1D) drop-shadow(.14em .12em 0 #1A1A18) drop-shadow(.5em .9em .8em rgb(12 28 52/.35))}
/* name foot edge: README CSS notes */
.wm path{stroke:var(--ink);stroke-width:18px;stroke-linejoin:round;paint-order:stroke}

.hero__card{--lg-rim:18;--lg-scale:34;position:absolute;z-index:var(--z-card);bottom:40px;left:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)));width:min(860px,100% - 2 * var(--gutter));padding:28px 36px;display:grid;grid-template:"lead lead" "sub sub" "prices actions"/1fr auto;column-gap:28px;box-shadow:var(--shadow-float)}
/* hero tone probe: README CSS notes */
.hero__tone{position:absolute;inset:0 0 -40px;pointer-events:none}
.hero__lead{grid-area:lead;font-size:40px;line-height:1}
.hero__sub{grid-area:sub;margin-top:10px;font-size:var(--t-body-l);line-height:1.45}
.hero__prices{grid-area:prices;align-self:end;display:flex;margin-top:18px}
.hero__price{display:flex;flex-direction:column;gap:6px;padding:0 20px;border-left:1px solid rgb(255 255 255/.18)}
.hero__price:first-child{padding-left:0;border:0}
.hero__num{font-size:var(--t-price-m);color:var(--sign)}
.hero__label{font:500 var(--t-small)/1.35 var(--f-body)}
/* price labels: README CSS notes */
.hero__price:nth-child(1) .hero__label{max-width:6.3em}
.hero__price:nth-child(2) .hero__label{max-width:9em}
.hero__price:nth-child(3) .hero__label{max-width:5.25em}
.hero__actions{grid-area:actions;align-self:end;display:flex;flex-direction:column;align-items:center;margin-top:18px}
.hero__link{display:inline-flex;align-items:center;min-height:44px;margin-bottom:-12px;font:600 var(--t-ui)/1 var(--f-body);color:#fff;text-underline-offset:4px}

@media (max-width:767px),(max-width:1023px) and (orientation:portrait){
  :root{--hero-h:clamp(340px,min(105vw,56svh),620px)}
  .hero__stage{left:clamp(calc(100cqw - var(--W)),calc(16px - var(--W) * .23),0px);top:clamp(calc(100cqh - var(--Hs)),calc(58cqh - var(--Hs) * .481),0px)}
  .hero__card{--lg-rim:12;--lg-r:var(--r-glass-sm);position:relative;bottom:auto;left:auto;width:auto;margin:-96px var(--gutter) 0;padding:24px 22px;display:flex;flex-direction:column;box-shadow:none}
  .hero__lead{font-size:30px}
  .hero__sub{font-size:16px;line-height:1.5}
  .hero__actions{align-self:flex-start;margin:6px 0 0}
  .hero__actions .btn{display:none}
  .hero__link{min-height:48px;margin:-2px 0 -12px}
}
/* phone price rows: README CSS notes */
@media (max-width:639px),(max-width:767px) and (orientation:landscape){
  .hero__prices{align-self:stretch;flex-direction:column;max-width:480px;margin-top:14px}
  .hero__price{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center;min-height:44px;padding:0;border:0;border-top:1px solid rgb(255 255 255/.18)}
  .hero__price:first-child{border:0}
  .hero__num{order:2;font-size:34px}
  .hero__price:nth-child(n) .hero__label{max-width:none;text-wrap:balance}
}
/* portrait tablet card: README CSS notes */
@media (min-width:640px) and (max-width:1023px) and (orientation:portrait){
  /* tablet card top: README CSS notes */
  .hero__card{display:grid;margin-top:calc(.7 * max(75vw, var(--hero-h)) - var(--hero-h))}
  .hero__actions{align-self:end;margin:18px 0 0}
}
@media (max-width:1023px) and (max-height:760px){
  .hero__prices{order:1}
  .hero__sub{order:2;margin-top:14px}
  .hero__actions{order:3}
}
/* phone hero sheet: README CSS notes */
@media (max-width:639px) and (max-aspect-ratio:3/4){
  .hero__photo::after{height:56px}
  .hero__card{margin:calc(var(--hero-h) * -.36) 0 0;--lg-r:28px;border-radius:28px 28px 0 0;padding:26px var(--gutter) 12px}
  .hero__card::before{-webkit-mask:linear-gradient(#000 calc(100% - 72px),transparent);mask:linear-gradient(#000 calc(100% - 72px),transparent)}
  /* phone sheet core: README CSS notes */
  .hero__card>.lg__core{inset:0;border-radius:inherit;box-shadow:none;-webkit-mask:linear-gradient(transparent 2px,#000 var(--rim),#000 calc(100% - 72px),transparent);mask:linear-gradient(transparent 2px,#000 var(--rim),#000 calc(100% - 72px),transparent)}
  .hero__card::after{clip-path:inset(0 0 calc(100% - 30px) 0)}
  .hero__lead{text-wrap:balance}
}
/* short landscape hero: README CSS notes */
@media (min-width:768px) and (max-width:1023px) and (orientation:landscape) and (max-height:500px){
  /* short landscape hero-h: README CSS notes */
  :root{--hero-h:max(calc(100svh - 24px),calc(192px + 20.25vw))}
  .hero__card{position:relative;bottom:auto;left:auto;width:auto;max-width:760px;margin:-64px var(--gutter) 0}
}
@supports not (width:1cqw){.hero__stage{inset:0;width:auto}.hero__img{object-fit:cover;object-position:68% 45%}.roofclip{clip-path:none}.wm{left:6%;bottom:auto;top:18%;width:min(60%,640px)}}

/* ---------- facts (E3) ---------- */
.facts{padding:32px 0 48px;background:var(--asphalt);color:#fff}
.facts ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px var(--gutter)}
.facts li{display:flex;align-items:center;font:600 var(--t-ui)/1.25 var(--f-body)}
.facts li::before{content:"";flex:none;width:6px;height:26px;margin-right:14px;background:var(--sign);transform:skewX(-24deg)}
@media (min-width:640px){.facts ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.facts ul{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* ---------- section grounds ---------- */
#rooms,#rates,#location,#faq,#call{padding-block:var(--section-pad)}
#stay{padding-top:var(--section-pad)}
#rooms{background:var(--asphalt);color:#fff}
#rates{background:radial-gradient(120% 90% at 50% 45%,#F6E84A,var(--sign) 55%,#E6D22C);color:var(--ink)}
#stay{background:var(--stucco);color:var(--ink)}
/* location ground: README CSS notes */
#location,#faq{background:var(--concrete);color:var(--ink)}
#call{background:var(--sign);color:var(--ink)}
@media (min-width:1024px){
  #rooms .sec-head{max-width:calc(var(--col) * 8 - var(--gutter))}
  :is(#rates,#location,#faq,#call)>.shell{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
}

/* ---------- rooms (E4) ---------- */
.room{margin-top:56px}
.room+.room{margin-top:88px}
.gallery__lead{position:relative;margin-bottom:28px}
.gallery__lead::after{content:"";position:absolute;top:100%;left:-8px;right:-8px;height:8px;background:var(--sill)}
.gallery__thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.gallery__truth{margin-top:12px;font:500 var(--t-small)/1.45 var(--f-body);color:var(--fog)}
.ph{position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-window);background:var(--asphalt-hi)}
.gallery__thumbs .ph{border-radius:var(--r-thumb)}
.ph picture,.ph img{width:100%;height:100%}
.ph img{object-fit:cover;transition:filter var(--d-press)}
.ph::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--sign);opacity:0;transition:opacity var(--d-press);pointer-events:none}
/* photo buttons: README CSS notes */
.ph:enabled{cursor:zoom-in}.ph:disabled{cursor:default}
@media (hover:hover) and (pointer:fine){.ph:enabled:hover img{filter:brightness(1.06)}.ph:enabled:hover::after{opacity:1}}

.door{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:32px;padding:24px;border-radius:var(--r-door);background:var(--glaze),var(--mint);color:var(--ink)}
.door h3{font-size:var(--t-display-s);line-height:1;text-wrap:balance}
.door__tags{display:flex;flex-wrap:wrap;gap:8px}
.door__price{font:500 18px/1 var(--f-body)}
.door__num{font-size:var(--t-price-l)}
/* door CTA wrap: README CSS notes */
.door .btn{margin-top:auto;max-width:100%;white-space:normal}
.door__lever{display:none}
.door__panels{align-self:stretch;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.door__panel{position:relative;border-radius:2px;background:var(--glaze);box-shadow:inset 0 0 0 1.5px rgb(30 30 28/.16)}
.door__panel--photo{aspect-ratio:3/4}
.door__panel--photo picture{position:absolute;inset:7px}
.door__panel--photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:1px}
.door__panel--info{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:20px 16px;outline:1.5px solid rgb(30 30 28/.12);outline-offset:-7px}
.door__panel-h{font:900 clamp(20px,1.9vw,26px)/1 var(--f-sign)}
.door__panel--info p:not(.door__panel-h){font:500 15px/1.4 var(--f-body)}
.door__panel--info a{display:inline-block;padding-block:6px;font:600 15px/1.2 var(--f-body);color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.tag{padding:3px 8px;border:1.5px solid var(--ink);border-radius:var(--r-door);font:600 14px/1.2 var(--f-body)}
.ticks{display:grid;gap:12px}
.ticks li{position:relative;padding-left:32px;line-height:1.4;text-wrap:pretty}
.ticks svg{position:absolute;left:0;top:.2em;width:20px;height:20px}
@media (min-width:768px){.door{padding:32px}}
@media (min-width:1024px){
  .room{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);margin-top:var(--s8)}
  .room+.room{margin-top:var(--s9)}
  .room>.gallery{grid-area:1/1/2/8}
  .room>.door{grid-area:1/8/2/13;margin:0}
  .room--large>.gallery{grid-column:6/13}
  .room--large>.door{grid-column:1/6}
  /* door leaf: README CSS notes */
  .door .btn{margin-top:6px}
  .door__panels{flex:1 1 auto;min-height:200px;margin-top:18px;padding:0 7% 20px}
  .door__panel--photo{aspect-ratio:auto}
  .door__lever{display:block;align-self:flex-end;margin:25px 0 -61px}
}

.compare{width:100%;margin-top:var(--s8)}
.compare th,.compare td{padding:16px 20px;text-align:left;vertical-align:middle}
.compare thead :is(th,td){vertical-align:bottom;font:600 var(--t-ui)/1.25 var(--f-body)}
.compare thead th{border-bottom:4px solid var(--mint)}
.compare thead img{width:64px;height:48px;margin-bottom:10px;border-radius:var(--r-thumb);object-fit:cover}
.compare tbody th{font-weight:600}
.compare :is(.yesmark,.nomark){display:inline-flex;align-items:center;gap:8px}
.compare .yesmark{color:var(--mint)}
.compare .nomark svg{color:var(--sill)}
.compare td svg{width:20px;height:20px}
.compare tbody tr:nth-child(odd)>*{background:var(--asphalt-hi)}
/* phone compare table: README CSS notes */
@media (max-width:767px){
  .compare{table-layout:fixed}
  .compare thead img{display:none}
  .compare thead th{font-size:15px}
  .compare th,.compare td{padding:12px 8px}
  .compare tr>:first-child{padding-left:14px;width:38%}
  .compare tbody th,.compare tbody td{font-size:16px;line-height:1.25}
}

/* ---------- rates (E5) ---------- */
.board{width:100%;margin-top:var(--s7);table-layout:fixed}
.board thead th{padding:0 16px 14px 0;font:600 var(--t-small)/1.2 var(--f-body);color:var(--steel-900);text-align:left}
.board tbody th{font-size:var(--t-display-s);line-height:1;text-align:left}
/* board name balance: README CSS notes */
.board tbody th .sx-block{text-wrap:balance}
.board td{font:500 18px/1.3 var(--f-body);color:var(--steel-900)}
.board .cell-price .sx{font-size:var(--t-price-xl);color:var(--ink)}
.board .cell-call{font-weight:600;color:var(--ink)}
@media (min-width:768px){
  .board thead th:first-child{width:44%}
  .board thead th:nth-child(2){width:22%}
  .board tbody>tr>*{height:88px;padding:16px 16px 16px 0;vertical-align:middle}
  .board tr>:last-child{padding-right:0;text-align:right}
  .cell-call .btn{margin:6px 0 6px 16px;vertical-align:middle}
  /* board grooves: README CSS notes */
  .board tr:not(:last-child)>*{border-bottom:2px solid rgb(0 0 0/.14)}
  .board tbody tr>*{border-top:1px solid rgb(255 255 255/.35)}
}
@media (max-width:767px){
  .board,.board tbody,.board th,.board td{display:block}
  .board thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .board tbody tr{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:center;padding:16px 0}
  .board tbody tr:not(:last-child){border-bottom:2px solid rgb(0 0 0/.14)}
  .board tbody tr+tr{border-top:1px solid rgb(255 255 255/.35)}
  /* phone board type: README CSS notes */
  .board tbody th{grid-area:1/1;font-size:min(28px,7.2vw)}
  .board td:first-of-type{grid-area:2/1;margin-top:4px;font-size:var(--t-small)}
  .board .cell-price{grid-area:1/2/3/3;text-align:right}
  .board .cell-price .sx{font-size:min(56px,14.4vw)}
  .board .cell-call{grid-area:3/1/4/3;display:flex;flex-direction:column;gap:10px;margin-top:14px}
  .cell-call .btn{width:100%}
}
.plate{--shadow:inset 0 0 0 10px var(--ink),inset 0 0 0 12px var(--sign);padding:32px;border-radius:var(--r-plate);background:var(--ink);color:#fff;box-shadow:var(--shadow)}
.plate h3{margin-bottom:14px;font-size:var(--t-display-s);line-height:1;color:var(--sign)}
.plate p{max-width:none}
.plate>*{--shadow:initial}
.deposit{margin-top:40px}
.rates__note{margin-top:32px;font:500 var(--t-small)/1.45 var(--f-body);color:var(--steel-900)}
@media (min-width:1024px){
  #rates .shell>*{grid-column:1/9}
  #rates .sec-head{grid-column:1/8}
  /* board rows: README CSS notes */
  #rates .board{grid-row:2/span 2}
  #rates .deposit{grid-column:9/13;grid-row:2;margin-top:var(--s7)}
  /* rates note: README CSS notes */
  #rates .rates__note{grid-column:9/13;grid-row:3;align-self:end;margin:0 0 20px}
}

/* ---------- location (E6) ---------- */
.shield{width:72px;height:auto;margin-bottom:24px}
.crop{position:relative;overflow:hidden;aspect-ratio:calc(var(--cw) * 4) / calc(var(--ch) * 3)}
.crop img{position:absolute;max-width:none;width:calc(100% / var(--cw));height:calc(100% / var(--ch));left:calc(-100% * var(--cx) / var(--cw));top:calc(-100% * var(--cy) / var(--ch))}
.loc__photo{margin-top:var(--s7)}
.loc__photo .crop{border-radius:var(--r-window);background:#7f7d7a}
.loc__photo figcaption{margin-top:12px;font:500 var(--t-small)/1.45 var(--f-body);color:var(--steel-700)}
.address-plate{margin-top:32px}
.plate__num{font-size:96px;line-height:.85;color:var(--sign)}
.plate address{margin-top:20px}
.plate__line a{display:inline-flex;align-items:center;min-height:44px;color:var(--sign);font-weight:600;overflow-wrap:anywhere}
.plate address+.plate__line{margin-top:8px}
.plate__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.plate__actions .btn{flex:1 1 auto}
.plate__actions .btn--sign{flex-basis:100%}
.plate__note{margin-top:16px;font:500 var(--t-small)/1.45 var(--f-body);color:var(--fog)}
.loc__finding{margin-top:var(--s8)}
.loc__finding h3{font-size:var(--t-display-s);line-height:1}
.loc__finding p{margin-top:16px}
.places{display:grid;gap:18px var(--gutter);margin-top:32px;color:var(--steel-700)}
.places b{display:block;color:var(--ink)}
@media (min-width:768px){.places{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){
  .shield{width:96px}
  #location .sec-head{grid-column:1/9}
  .loc__photo{grid-column:1/8}
  .address-plate{grid-column:8/13;margin-top:var(--s7)}
  .loc__finding{grid-column:1/8}
  /* places 1024: README CSS notes */
  .places{grid-column:1/13;grid-template-columns:repeat(4,minmax(0,1fr))}
  .places b{text-wrap:balance}
}
/* places 1280: README CSS notes */
@media (min-width:1280px){
  .places{grid-column:8/13;grid-row:3;grid-template-columns:1fr 1fr;margin-top:calc(var(--s8) + 4px);column-gap:24px}
}

/* ---------- the stay (E7) ---------- */
.stay__scene{position:relative;margin-top:var(--s7)}
.stay__img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:45% 50%}
.stay__strip{padding:24px var(--gutter);border-radius:0;background:var(--asphalt);color:#fff}
.stay__strip::before,.stay__strip::after,.stay__strip>.lg__core{display:none}
.feats{display:grid;grid-template-columns:1fr 1fr;gap:24px 20px;max-width:var(--maxw);margin-inline:auto}
.feat__ic{width:28px;height:28px;margin-bottom:12px;color:var(--sign)}
.feat h3{font:600 19px/1.25 var(--f-body);text-wrap:balance}
.feat p{margin-top:6px;font-size:16px;line-height:1.45}
.stay__more{display:grid;gap:20px;padding-block:var(--s7) var(--section-pad)}
@media (min-width:768px){.stay__img{aspect-ratio:4/3;object-position:50% 62%}}
@media (min-width:1024px){
  /* stay photo height: README CSS notes */
  .stay__img{aspect-ratio:auto;height:clamp(480px,72svh,max(760px,40vw));object-position:50% 62%}
  .stay__strip{--lg-rim:18;--lg-scale:28;--lg-r:var(--r-glass);border-radius:var(--r-glass);position:absolute;bottom:40px;left:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)));right:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)));padding:28px;background:none;box-shadow:var(--shadow-float)}
  .stay__strip::before,.stay__strip::after,.stay__strip>.lg__core{display:block}
  .feats{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
  .stay__more{grid-template-columns:1fr 1fr;column-gap:var(--gutter)}
}

/* ---------- FAQ (E8) ---------- */
#faq .sec-head p{font-size:var(--t-body);color:var(--steel-900)}
.faq__list{margin-top:40px}
.faq__list details{border-bottom:1px solid rgb(30 30 28/.18)}
.faq__list details:first-child{border-top:1px solid rgb(30 30 28/.18)}
.faq__list summary{position:relative;display:flex;align-items:center;min-height:56px;padding:16px 48px 16px 0;font:600 19px/1.3 var(--f-body);cursor:pointer;list-style:none}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary::before,.faq__list summary::after{content:"";position:absolute;top:50%;right:12px;width:18px;margin-top:-1px;border-top:2px solid;transition:transform var(--d-ui) var(--ease-out)}
.faq__list summary::after{transform:rotate(90deg)}
.faq__list [open]>summary::after{transform:rotate(90deg) scaleX(0)}
.ans{max-width:60ch;padding-bottom:22px}
@media (min-width:1024px){
  #faq .sec-head{grid-column:1/5;position:sticky;top:112px}
  .faq__list{grid-column:6/13;margin:0}
}

/* ---------- call band + fob (E9) ---------- */
#call .shell{display:grid;gap:56px}
.callband__text{container-type:inline-size}
#call-number{display:inline-flex;align-items:center;gap:.2em;margin-top:28px;font:900 clamp(34px,100cqi / 8.4,44px)/1.1 var(--f-sign);text-decoration:none}
#call-number svg{flex:none;width:.62em;height:.62em}
#call-number .sx{text-decoration:underline 4px;text-underline-offset:10px;transition:text-decoration-thickness var(--d-press);white-space:normal}
/* call number wrap: README CSS notes */
@media (hover:hover){#call-number:hover .sx{text-decoration-thickness:7px}}
.callband__sub{margin-top:20px;font-weight:500}
.callband__mail{margin-top:0}
.callband__mail a{display:flex;align-items:center;width:max-content;min-height:48px}
/* phone call order: README CSS notes */
@media (max-width:1023px){
  .callband__text{display:flex;flex-direction:column;align-items:flex-start}
  /* call number target: README CSS notes */
  #call-number{order:1;padding-bottom:16px;margin-bottom:-16px}
  .callband__text>h2+p{order:2}
  .callband__sub{order:3}
  .callband__mail{order:4}
}
/* fob crossfade: README CSS notes */
.fob{--stage:min(80vw,max(300px,60vw),480px);display:grid;justify-items:center;gap:20px;isolation:isolate}
.fob__stage,.fob__card{grid-area:1/1;width:var(--stage);aspect-ratio:1;margin-bottom:calc(var(--stage) * -.2)}
.fob__stage{position:relative;z-index:1;mix-blend-mode:plus-lighter;pointer-events:none}
.fob__canvas{position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:auto}
.fob[data-mode=webgl] .fob__canvas{opacity:1}
.fob__card{position:relative;transform:perspective(1100px) rotateY(0);transform-style:preserve-3d;transition:transform 650ms var(--ease-io)}
.fob__card picture{display:contents}
:is(.fob__face--front,.fob__face--back){position:absolute;inset:0;width:100%;height:100%;object-fit:contain;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.fob__face--back{transform:rotateY(180deg)}
.fob[data-side=back] .fob__card{transform:perspective(1100px) rotateY(180deg)}
/* fob faces: README CSS notes */
.fob[data-mode=webgl] .fob__card{visibility:hidden;pointer-events:none;transition:transform 650ms var(--ease-io),visibility 0s .3s}
.fob[data-mode=webgl] :is(.fob__face--front,.fob__face--back){opacity:0;transition:opacity .3s}
html.js-ready .fob__card{cursor:pointer}
/* fob turn band: README CSS notes */
#fob-turn{grid-row:2;position:relative;z-index:1}
.fob-turn__still{display:none}
@media (prefers-reduced-motion:reduce){.fob-turn__motion{display:none}.fob-turn__still{display:inline}}
/* fob phone overlap: README CSS notes */
@media (max-width:1023px){
  .callband__text{position:relative;z-index:1}
  .fob__stage,.fob__card{margin-top:calc(var(--stage) * -.26)}
}
@media (min-width:1024px){
  .callband__text{grid-column:1/7}
  #call .shell{column-gap:var(--gutter);align-items:center}
  .fob{--stage:min(560px,100%);grid-column:7/13}
  #call-number{font-size:clamp(44px,100cqi / 8.4,80px)}
}

/* ---------- footer (E10) ---------- */
#site-foot{padding:var(--s8) 0 calc(var(--section-pad) + var(--tray-space,0px));background:var(--asphalt);color:#fff}
.foot__grid{display:grid;gap:40px var(--gutter)}
.foot__brand{display:flex;align-items:center;gap:14px}
.foot__emblem{width:56px;height:auto;aspect-ratio:1000/745}
.foot__wordmark{width:auto;height:22.5px;aspect-ratio:5831/716}
.foot__about p:not(.foot__brand){max-width:44ch;margin-top:18px;color:var(--fog)}
#site-foot h2{margin-bottom:12px;font:600 var(--t-ui)/1.25 var(--f-body);letter-spacing:0}
#site-foot address a{color:var(--sign);font-weight:600}
.foot__links a{display:flex;align-items:center;min-height:44px;width:max-content;text-decoration:none}
@media (hover:hover){.foot__links a:hover{text-decoration:underline}}
@media (pointer:coarse){
  .plate__line a{min-height:48px}
  .plate__line+.plate__line{margin-top:8px}
  #site-foot address a{display:inline-flex;align-items:center;min-height:48px;margin-block:4px}
  .foot__links{display:grid;gap:8px}
  .foot__links a{min-height:48px;min-width:48px}
}
.foot__bar{margin-top:56px;font:500 var(--t-small)/1.45 var(--f-body);color:var(--fog)}
@media (min-width:768px){.foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.foot__grid{grid-template-columns:1.6fr 1fr 1fr}}

/* ---------- phone call tray (E11) ---------- */
@media (max-width:1023px){main,#site-foot{--tray-space:calc(76px + env(safe-area-inset-bottom))}}
#tray{position:fixed;inset:auto 0 0;z-index:var(--z-tray);transition:transform var(--d-ui) var(--ease-out),visibility 0s}
.tray__glass{--lg-rim:12;--lg-scale:20;display:flex;justify-content:center;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
#tray .tray__glass{border-radius:24px 24px 0 0}
#tray .lg__core{border-radius:12px 12px 0 0}
.tray__call{flex:1;max-width:560px}
.tray__dir{flex:none;width:56px;padding:0}
/* tray call wrap: README CSS notes */
#tray .tray__call{min-width:0;white-space:normal;padding-inline:16px}
.tray__dir svg{width:24px;height:24px}
html.tray-off #tray{transform:translateY(110%);visibility:hidden;transition:transform var(--d-ui) var(--ease-out),visibility 0s var(--d-ui)}
@media (min-width:1024px){#tray{display:none}}
/* short viewport chrome: README CSS notes */
@media (max-width:1023px) and (max-height:500px){
  #site-nav{position:absolute}
  .tray__glass{padding:6px 12px calc(6px + env(safe-area-inset-bottom))}
  .tray__glass .btn{min-height:48px}
  .tray__dir{width:48px}
  main,#site-foot{--tray-space:calc(60px + env(safe-area-inset-bottom))}
  html{scroll-padding:16px 0 calc(72px + env(safe-area-inset-bottom))}
}

/* ---------- lightbox (E12) ---------- */
/* lightbox budget: README CSS notes */
.lb{--lb-wmax:92vw;--lb-hmax:min(80svh,calc(100svh - 172px - env(safe-area-inset-bottom)));position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:none;color:var(--ink);overflow:hidden auto;opacity:0;transform:scale(.98);transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),overlay .2s allow-discrete,display .2s allow-discrete}
.lb[open]{opacity:1;transform:none}
.lb::backdrop{background:rgb(12 13 16/.94);opacity:0;transition:opacity .2s,overlay .2s allow-discrete,display .2s allow-discrete}
.lb[open]::backdrop{opacity:1}
@starting-style{.lb[open]{opacity:0;transform:scale(.98)}.lb[open]::backdrop{opacity:0}}
/* lightbox scroll lock: README CSS notes */
html:has(.lb[open]){overflow:hidden;scrollbar-gutter:stable}
.lb__figure{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:72px 16px calc(16px + env(safe-area-inset-bottom))}
.lb__media{display:grid;place-items:center;min-height:0}
.lb__media img{width:auto;height:auto;max-width:var(--lb-wmax);max-height:var(--lb-hmax);object-fit:contain}
.lb__cap{--lg-rim:10;--lg-scale:16;--lg-r:22px;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:2px 12px;max-width:min(720px,100%);padding:12px 22px;font:500 var(--t-small)/1.4 var(--f-body);text-align:center}
.lb__text{font-weight:600}
.lb__prev,.lb__next,.lb__close{--lg-rim:10;--lg-scale:16;position:absolute;display:grid;place-items:center}
.lb__prev,.lb__next{--lg-r:28px;top:50%;width:56px;height:56px;margin-top:-28px}
.lb__prev{left:24px}
.lb__next{right:24px}
.lb__close{--lg-r:24px;top:16px;right:16px;width:48px;height:48px}
.lb button svg{width:24px;height:24px}
/* lightbox morph: README CSS notes */
::view-transition-group(lb-photo){animation-duration:var(--d-ui);animation-timing-function:var(--ease-out);overflow:clip}
/* morph crop: README CSS notes */
::view-transition-old(lb-photo),::view-transition-new(lb-photo){width:100%;height:100%;object-fit:cover;object-position:var(--lb-focal,50% 50%)}
@media (max-width:767px){
  /* phone lightbox: README CSS notes */
  .lb{--lb-hmax:max(120px,calc(100svh - 300px - env(safe-area-inset-bottom)))}
  .lb[open]{display:flex;flex-wrap:wrap;align-content:center;align-content:safe center;justify-content:space-between;row-gap:16px;padding:72px 16px calc(16px + env(safe-area-inset-bottom))}
  .lb__figure{display:contents}
  .lb__media{order:1;flex:0 0 100%}
  .lb__prev,.lb__next{position:relative;top:auto;order:2;margin:0}
  .lb__cap{order:3;flex:0 0 100%;max-width:none}
  .lb__cap>*{text-wrap:balance}
}
/* short landscape lightbox: README CSS notes */
@media (max-height:560px) and (orientation:landscape){
  .lb{--lb-wmax:calc(100vw - 160px);--lb-hmax:max(96px,calc(100svh - 124px - env(safe-area-inset-bottom)))}
  .lb__figure{padding-top:16px}
}
/* landscape phone lightbox: README CSS notes */
@media (max-width:767px) and (max-height:560px) and (orientation:landscape){
  .lb[open]{padding-top:16px}
  .lb__prev,.lb__next{position:absolute;top:50%;margin-top:-28px}
  .lb__prev{left:8px}
  .lb__next{right:8px}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .wm path{animation:wm-rise var(--d-hero) var(--ease-out) both;animation-delay:calc(140ms + var(--i) * 40ms)}
  @keyframes wm-rise{from{transform:translateY(1500px)}}
  .hero__card .btn--sign{animation:bulb 1.1s ease-out 1.25s 1}
  @keyframes bulb{50%{--glow:24px}}
  /* tray pulse: README CSS notes */
  @media (max-width:767px),(max-width:1023px) and (orientation:portrait){.tray__call{animation:bulb 1.1s ease-out 1.25s 1}}
  /* rise hold: README CSS notes */
  .wm-hold .wm path,.wm-hold .hero__card .btn--sign,.wm-hold .tray__call{animation-play-state:paused}
  @supports (animation-timeline:scroll()){
    /* name sink: README CSS notes */
    .wm{animation:wm-sink linear both;animation-timeline:scroll(root);animation-range:0 calc(var(--hero-h) * .48 - 80px)}
    @media (max-width:767px),(max-width:1023px) and (orientation:portrait){.wm{animation-range:0 calc(var(--hero-h) * .48 - 64px)}}
    @media (min-width:768px) and (max-width:1023px) and (orientation:landscape) and (max-height:500px){.wm{animation-range:0 calc(104px + 20.25vw)}}
    @keyframes wm-sink{to{transform:translateY(100%)}}
  }
  .faq__list details{interpolate-size:allow-keywords}
  .faq__list details::details-content{height:0;overflow:clip;transition:height var(--d-ui) var(--ease-out),content-visibility var(--d-ui) allow-discrete}
  .faq__list details[open]::details-content{height:auto}
}
/* reduced motion: README CSS notes */
@media (prefers-reduced-motion:reduce){
  *,::before,::after,::backdrop{transition-duration:.01ms!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-delay:0s!important}
}

/* ---------- glass fallbacks (G) ---------- */
/* solid nav fallback: README CSS notes */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.lg::before{background:rgb(var(--tint)/.86)}.lg__core{display:none}:is(#nav-pill,#nav-sheet)::before{background:rgb(var(--tint))}}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){.lg::before{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgb(var(--tint)/.86)}.lg__core{display:none}:is(#nav-pill,#nav-sheet)::before{background:rgb(var(--tint))}}
@media (forced-colors:active){
  .lg::before,.lg__core,.lg::after{display:none}
  .lg{border:1px solid CanvasText;background:Canvas}
  .btn,.plate,.door{border:2px solid CanvasText}
  .door__panel{border:1px solid CanvasText}
  /* forced emblem: README CSS notes */
  #i-emblem path,#i-emblem-rev path,#i-emblem-white path{fill:currentColor}
  /* forced icons: README CSS notes */
  .feat__ic,.compare .nomark svg{color:CanvasText}
}

/* ---------- first-render budget, phones/tablets (screen only) ---------- */
/* first-render budget: README CSS notes */
@media screen and (max-width:1023px){
  html.js:not(.cv-off) :is(#rooms,#rates,#location,#stay,#faq,#site-foot){content-visibility:auto}
  /* cv seam guard: README CSS notes */
  html.js:not(.cv-off) :is(#rooms,#rates,#location,#stay,#faq){margin-bottom:-1px}
  html.js:not(.cv-off) :is(#rooms,#rates,#location,#faq){padding-bottom:calc(var(--section-pad) + 1px)}
  html.js:not(.cv-off) #stay{padding-bottom:1px}
  html.js:not(.cv-off) #rooms{contain-intrinsic-size:auto 2541px}
  html.js:not(.cv-off) #rates{contain-intrinsic-size:auto 1243px}
  html.js:not(.cv-off) #location{contain-intrinsic-size:auto 2247px}
  html.js:not(.cv-off) #stay{contain-intrinsic-size:auto 1520px}
  html.js:not(.cv-off) #faq{contain-intrinsic-size:auto 898px}
  html.js:not(.cv-off) #site-foot{contain-intrinsic-size:auto 852px}
}
@media screen and (min-width:768px) and (max-width:1023px){
  html.js:not(.cv-off) #rooms{contain-intrinsic-size:auto 3114px}
  html.js:not(.cv-off) #rates{contain-intrinsic-size:auto 974px}
  html.js:not(.cv-off) #location{contain-intrinsic-size:auto 1915px}
  html.js:not(.cv-off) #stay{contain-intrinsic-size:auto 1410px}
  html.js:not(.cv-off) #faq{contain-intrinsic-size:auto 765px}
  html.js:not(.cv-off) #site-foot{contain-intrinsic-size:auto 647px}
}

/* ---------- print ---------- */
@media print{
  #site-nav,#tray,.lb,.fob,#skip,.hero__photo::after,.lg::before,.lg::after,.lg__core,.door__panels,.door__lever{display:none!important}
  :root{--hero-h:420px}
  *{color:#000!important;background:none!important;box-shadow:none!important}
  .hero__card,.stay__strip{position:static!important;margin:16px 0!important}
  .btn,.plate,.door{border:1px solid}
  .faq__list details::details-content{content-visibility:visible;height:auto}
}

/* last, so it composes over every component's --shadow */
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:var(--shadow,0 0 #0000),0 0 0 3px var(--sign)}