/* =========================================================
Fonts, self-hosted (2026-09-29). Latin subset, variable files, font-display: swap.
The weight ranges are exactly the weights the site has always used (a request for a bolder weight is clamped to the top of the range),
so nothing looks different from the Google Fonts version.
Each family also has a "Fallback" face: a system font resized to the same widths and line metrics,
so when the real font arrives the text does not move (no layout shift).
The italic and script fonts live in fonts-late.css and load after the page is ready.
Sources: Google Fonts (Cinzel, Cormorant Garamond, EB Garamond, Ms Madi). SIL Open Font License.
========================================================= */
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/cinzel.woff2?v=7a5ca920) format("woff2"); 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: "Cormorant Garamond"; font-style: normal; font-weight: 500 600; font-display: swap; src: url(/assets/fonts/cormorant-garamond.woff2?v=ec4225ec) format("woff2"); 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: "EB Garamond"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/assets/fonts/eb-garamond.woff2?v=1a4b1370) format("woff2"); 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: "Cinzel Fallback"; src: local("Georgia"); font-weight: 100 900; size-adjust: 104.75%; ascent-override: 93.17%; descent-override: 35.51%; line-gap-override: 0.0%; }
@font-face { font-family: "Cormorant Garamond Fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"); font-weight: 100 900; size-adjust: 97.03%; ascent-override: 95.23%; descent-override: 29.58%; line-gap-override: 0.0%; }
@font-face { font-family: "EB Garamond Fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"); font-weight: 100 900; size-adjust: 94.46%; ascent-override: 106.61%; descent-override: 31.55%; line-gap-override: 0.0%; }
/* =========================================================
The Hotel Suite — Grand Hotel Deco
Mobile-first. Burgundy + cream ground, brass only on rules.
========================================================= */
:root {
--burgundy: #4A0F1C;
--burgundy-deep: #2C0810;
--burgundy-hi: #6E1A2B;
--ink: #140B0C;
--ink-2: #1D1012;
--cream: #F2E6D0;
--cream-2: #E7D6B8;
--cream-dim: rgba(242, 230, 208, .78);
--brass: #C9A35E;
--brass-hi: #E8CD8F;
--brass-lo: #8B6A2F;
--bronze-text: #75501D; /* brass that passes AA on cream */
--text-ink: #241315;
--focus: #F0D08A;
--f-display: "Poiret One", "Josefin Sans", system-ui, sans-serif;
--f-label: "Josefin Sans", system-ui, sans-serif;
--f-body: "Bellefair", Georgia, "Times New Roman", serif;
--gutter: 20px;
--head-h: 68px;
--ease-door: cubic-bezier(.72, 0, .18, 1);
--ease-out: cubic-bezier(.2, .7, .1, 1);
}
@media (min-width: 768px) { :root { --gutter: 40px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; --head-h: 84px; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 8px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--burgundy-deep);
color: var(--cream);
font-family: var(--f-body);
font-size: 1.1875rem;
line-height: 1.55;
overflow-x: clip;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* velvet grain over everything, very quiet */
body::after {
content: "";
position: fixed; inset: 0;
pointer-events: none;
z-index: 90;
opacity: .07;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
sup { font-family: var(--f-label); font-size: .32em; font-weight: 600; vertical-align: top; position: relative; top: .35em; letter-spacing: 0; margin-left: .06em; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--cream); color: var(--burgundy-deep); padding: 12px 18px; font: 600 .8rem/1 var(--f-label); letter-spacing: .18em; text-transform: uppercase; }
.skip:focus { top: 12px; }
.skip { display: inline-flex; align-items: center; min-height: 44px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.on-light { --focus: #6E1A2B; }
.wrap { width: min(100% - 2 * var(--gutter), 1320px); margin-inline: auto; }
.narrow { max-width: 820px; }
/* ---------- type primitives ---------- */
.eyebrow {
font: 600 .72rem/1.3 var(--f-label);
letter-spacing: .28em;
text-transform: uppercase;
color: var(--brass-hi);
}
.on-light .eyebrow { color: var(--bronze-text); }
.floor-tag {
display: inline-block;
padding: .5em .7em .35em;
margin-right: .7em;
border: 1px solid currentColor;
letter-spacing: .22em;
}
.sec-title {
font-family: var(--f-display);
font-weight: 400;
font-size: clamp(2.6rem, 10.5vw, 5rem);
line-height: 1.02;
letter-spacing: .005em;
margin-top: 22px;
}
.sec-lede { margin-top: 20px; max-width: 34ch; color: var(--cream-dim); font-size: 1.2rem; }
.on-light .sec-lede { color: #4a3336; }
.rule { width: 200px; height: 14px; color: var(--brass); }
/* text link: the quiet, tertiary style */
.link-arrow {
display: inline-flex; align-items: center; gap: 10px;
min-height: 44px;
font: 600 .74rem/1 var(--f-label); letter-spacing: .24em; text-transform: uppercase;
text-decoration: none;
color: var(--cream);
padding-top: 3px;
}
.link-arrow span, .link-arrow { background: linear-gradient(var(--brass), var(--brass)) 0 calc(100% - 8px) / 100% 1px no-repeat; }
.link-arrow svg { width: 18px; height: 18px; transition: transform .35s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(5px); }
.link-dark { color: var(--burgundy); background-image: linear-gradient(var(--burgundy), var(--burgundy)); }
/* ---------- buttons: see the BUTTONS block at the end of pages.css ---------- */
/* ---------- arches (concentric fine rules) ---------- */
.arch {
--ring: var(--burgundy);
position: relative;
border-radius: 999px 999px 0 0;
overflow: hidden;
background: var(--ink);
box-shadow:
0 0 0 6px var(--ring),
0 0 0 7px var(--brass),
0 0 0 13px var(--ring),
0 0 0 14px rgba(201, 163, 94, .45);
}
.arch img { width: 100%; height: 100%; object-fit: cover; }
/* =========================================================
HEADER + ELEVATOR DIAL
========================================================= */
.masthead {
position: fixed; inset: 0 0 auto 0; z-index: 50;
height: var(--head-h);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 0 var(--gutter);
padding-top: env(safe-area-inset-top);
transition: background-color .4s, box-shadow .4s, backdrop-filter .4s;
}
.masthead.is-scrolled {
background: rgba(36, 7, 13, .9);
-webkit-backdrop-filter: blur(10px) saturate(1.2);
backdrop-filter: blur(10px) saturate(1.2);
box-shadow: 0 1px 0 rgba(201, 163, 94, .35);
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; justify-self: start; min-height: 44px; }
.brand-words { display: none; }
.brand-name { display: block; font: 600 .78rem/1 var(--f-label); letter-spacing: .3em; text-transform: uppercase; padding-top: 3px; }
.brand-sub { display: block; margin-top: 6px; font: 400 .6rem/1 var(--f-label); letter-spacing: .42em; text-transform: uppercase; color: var(--brass-hi); }
@media (min-width: 640px) { .brand-words { display: block; } }
/* Type-set monogram stand-in (THS) */
.mono {
display: inline-flex; align-items: flex-end;
font-family: var(--f-body);
color: var(--brass-hi);
font-size: 30px; line-height: .8;
letter-spacing: 0;
}
.mono > span { display: block; }
.mono-t { transform: translateY(-.08em); }
.mono-h { margin-left: -.34em; font-size: 1.05em; }
.mono-s { margin-left: -.2em; font-size: 1.12em; transform: translateY(.1em); }
.mono-md { font-size: 44px; }
.mono-lg { font-size: 64px; }
.dial {
justify-self: center;
width: 112px;
margin-top: 4px;
border-radius: 60px 60px 4px 4px;
transition: transform .3s var(--ease-out);
}
.dial:hover { transform: translateY(-1px); }
.dial-svg { width: 100%; height: auto; overflow: visible; }
.dial-face { fill: #1f060b; }
.dial-sun { stroke: var(--brass); stroke-width: .8; opacity: .28; fill: none; }
.dial-ring { fill: none; stroke: var(--brass); stroke-width: 1.2; }
.dial-ticks { stroke: var(--brass); stroke-width: .9; opacity: .7; }
.dial-major { stroke: var(--brass-hi); stroke-width: 1.8; }
.dial-labels text {
font: 600 16px var(--f-label);
fill: var(--cream);
opacity: .42;
text-anchor: middle;
dominant-baseline: central;
transition: opacity .3s, fill .3s;
}
.dial-labels text.is-lit { fill: var(--brass-hi); opacity: 1; }
.dial-needle { transform-box: view-box; transform-origin: 100px 100px; transform: rotate(-75deg); fill: var(--brass-hi); }
.dial-needle-line { stroke: #5a3a12; stroke-width: .6; }
.dial-hub { fill: var(--brass); }
.dial-hub-in { fill: #1f060b; }
.dial-base { stroke: var(--brass); stroke-width: 1; }
.mast-right { justify-self: end; display: flex; align-items: center; gap: 18px; }
.floor-readout { display: none; }
.dir-btn {
display: inline-flex; align-items: center; gap: 10px;
min-height: 44px; min-width: 44px; justify-content: center;
font: 600 .7rem/1 var(--f-label); letter-spacing: .24em; text-transform: uppercase;
color: var(--cream);
}
.dir-btn svg { width: 22px; height: 22px; color: var(--brass-hi); }
.dir-btn span { display: none; }
@media (min-width: 1024px) {
.dial { width: 150px; margin-top: 10px; }
.dir-btn span { display: inline; padding-top: 3px; }
.floor-readout {
display: flex; align-items: center; gap: 10px;
font: 600 .66rem/1 var(--f-label); letter-spacing: .26em; text-transform: uppercase; color: var(--cream-dim);
}
.fr-num {
display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
border: 1px solid var(--brass); color: var(--brass-hi); padding-top: 2px; letter-spacing: 0;
}
.fr-name { padding-top: 2px; min-width: 9.5em; }
}
@media (min-width: 1024px) and (max-width: 1239px) { .floor-readout { display: none; } }
/* =========================================================
DIRECTORY (elevator call panel)
========================================================= */
.directory {
padding: 0; border: 0; margin: 0;
width: 100%; max-width: none; height: 100%; max-height: none;
background: transparent;
color: var(--cream);
}
.directory::backdrop { background: rgba(12, 3, 5, .72); }
.dir-panel {
position: relative;
min-height: 100%;
background:
repeating-conic-gradient(from -90deg at 50% 0%, rgba(201,163,94,.07) 0 .7deg, transparent .7deg 6deg),
var(--burgundy-deep);
padding: 28px var(--gutter) 36px;
display: flex; flex-direction: column;
}
.dir-panel::before {
content: ""; position: absolute; inset: 10px; pointer-events: none;
border: 1px solid rgba(201,163,94,.55);
box-shadow: inset 0 0 0 5px var(--burgundy-deep), inset 0 0 0 6px rgba(201,163,94,.3);
}
.directory[open] .dir-panel { animation: doors-open .7s var(--ease-door) both; }
@keyframes doors-open { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
.dir-head { position: relative; text-align: center; padding-top: 16px; }
.dir-crown { width: 132px; height: 33px; margin: 0 auto 14px; color: var(--brass); }
.dir-title { font: 400 2.6rem/1 var(--f-display); margin-top: 10px; }
.dir-close {
position: absolute; top: 0; right: 0;
width: 48px; height: 48px; display: grid; place-items: center;
color: var(--cream);
}
.dir-close svg { width: 24px; height: 24px; }
.dir-list { margin: 28px 0 28px; border-top: 1px solid rgba(201,163,94,.3); }
.dir-list li { border-bottom: 1px solid rgba(201,163,94,.3); }
.dir-list a {
display: grid; grid-template-columns: 52px 1fr; column-gap: 18px; align-items: center;
padding: 14px 4px; text-decoration: none;
}
.lamp {
grid-row: span 2;
width: 48px; height: 48px; border-radius: 50%;
display: grid; place-items: center;
font: 600 1rem/1 var(--f-label); padding-top: 3px;
color: var(--brass-hi);
border: 1px solid var(--brass);
box-shadow: inset 0 0 0 3px var(--burgundy-deep), inset 0 0 0 4px rgba(201,163,94,.35);
transition: background-color .3s, color .3s, box-shadow .3s;
}
.dir-list a:hover .lamp, .dir-list a[aria-current="true"] .lamp {
background: var(--brass-hi); color: var(--burgundy-deep);
box-shadow: inset 0 0 0 3px var(--brass-hi), inset 0 0 0 4px var(--burgundy-deep), 0 0 22px rgba(232,205,143,.45);
}
.dir-name { font: 400 1.7rem/1.05 var(--f-display); }
.dir-note { font: 600 .62rem/1.4 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-hi); margin-top: 4px; }
.dir-cta { margin-top: auto; }
.dir-foot { margin-top: 18px; text-align: center; font: 600 .62rem/1.4 var(--f-label); letter-spacing: .22em; text-transform: uppercase; color: var(--cream-dim); }
@media (min-width: 640px) {
.directory { width: min(520px, 100% - 48px); height: auto; margin: auto; }
.dir-panel { min-height: 0; padding: 36px 44px 40px; }
}
/* =========================================================
HERO · THE LOBBY
========================================================= */
.hero {
position: relative;
isolation: isolate;
background:
radial-gradient(120% 70% at 50% 58%, #5c1424 0%, var(--burgundy) 45%, var(--burgundy-deep) 100%);
padding-top: calc(var(--head-h) + 18px);
overflow: hidden;
}
.hero-sun {
position: absolute; inset: 0; z-index: -1;
background: repeating-conic-gradient(from -90deg at 50% 64%, rgba(232, 205, 143, .13) 0deg .5deg, transparent .5deg 6deg);
-webkit-mask-image: radial-gradient(90% 60% at 50% 64%, #000 10%, transparent 72%);
mask-image: radial-gradient(90% 60% at 50% 64%, #000 10%, transparent 72%);
}
.hero-inner { text-align: center; }
.hero-eyebrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; font-size: .64rem; }
.hero-eyebrow .dot { display: none; width: 5px; height: 5px; background: var(--brass); transform: rotate(45deg); }
.hero-eyebrow > span:not(.dot) { flex-basis: 100%; }
@media (min-width: 640px) { .hero-eyebrow .dot { display: block; } .hero-eyebrow > span:not(.dot) { flex-basis: auto; } }
.hero-stage { display: flex; flex-direction: column; align-items: center; }
.hero-title {
margin-top: 14px;
font-family: var(--f-display);
font-weight: 400;
font-size: clamp(3.2rem, 14.6vw, 4.6rem);
line-height: .98;
letter-spacing: .005em;
}
.ht-half { display: block; }
.ht-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; }
.ht-w > span { display: inline-block; }
.ht-right .ht-w > span {
background: linear-gradient(180deg, #F3DDA6 10%, #D2AA62 60%, #B48A45 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.ht-right sup { color: var(--brass-hi); -webkit-text-fill-color: var(--brass-hi); }
.hero-arch { position: relative; margin-top: 30px; width: min(58vw, 232px); }
.hero-arch .arch { aspect-ratio: 3 / 4; }
.arch-fan { position: absolute; left: 50%; top: -30px; width: 76px; height: 40px; transform: translateX(-50%); color: var(--brass); z-index: 2; }
.arch-fan { display: none; }
.arch-plinth {
position: relative; height: 12px; margin: 0 -22px;
background: var(--burgundy-deep);
border-top: 1px solid var(--brass);
border-bottom: 1px solid rgba(201,163,94,.45);
z-index: 1;
}
.arch-plinth::after { content: ""; position: absolute; left: 14px; right: 14px; top: 100%; height: 6px; border-bottom: 1px solid rgba(201,163,94,.35); }
.hero-cta { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hero-tag { font: 600 .74rem/1.6 var(--f-label); letter-spacing: .26em; text-transform: uppercase; color: var(--cream); max-width: 30ch; }
.hero-tag sup { font-size: .7em; top: .1em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 26px; }
.hero-lede { margin: 30px auto 0; max-width: 32ch; color: var(--cream-dim); font-size: 1.15rem; }
.services-band { margin-top: 48px; border-top: 1px solid rgba(201,163,94,.4); border-bottom: 1px solid rgba(201,163,94,.4); padding: 4px 0; }
.services-band p {
border-top: 1px solid rgba(201,163,94,.2); border-bottom: 1px solid rgba(201,163,94,.2);
padding: 16px 0 13px; text-align: center;
font: 600 .66rem/1.8 var(--f-label); letter-spacing: .3em; text-transform: uppercase; color: var(--cream);
}
.services-band i { font-style: normal; color: var(--brass); margin: 0 .35em; }
@media (min-width: 1024px) {
.hero { min-height: 100svh; display: flex; flex-direction: column; padding-top: calc(var(--head-h) + 10px); }
.hero-inner { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.hero-sun { background-position: 0 0; }
.hero-eyebrow { font-size: .7rem; }
.hero-stage {
--archW: clamp(260px, min(25vw, (100svh - 330px) * .72), 390px);
display: grid;
grid-template-columns: 1fr var(--archW) 1fr;
grid-template-rows: 1fr auto;
column-gap: 56px;
margin-top: 34px;
text-align: left;
}
.hero-title {
grid-column: 1 / -1; grid-row: 1;
display: flex; justify-content: space-between; align-self: end;
margin: 0 0 22px;
font-size: clamp(4.2rem, 7.6vw, 8.2rem);
line-height: .96;
}
.ht-half { width: calc((100% - var(--archW)) / 2 - 56px); }
.ht-left { text-align: right; }
.ht-w { display: block; }
.hero-arch { grid-column: 2; grid-row: 1 / 3; width: auto; margin: 26px 0 0; align-self: center; }
.hero-arch .arch { aspect-ratio: 3 / 4.25; }
.arch-fan { display: block; }
.hero-cta { grid-column: 3; grid-row: 2; margin: 0; align-items: flex-start; gap: 22px; align-self: start; }
.hero-actions { justify-content: flex-start; }
.hero-tag { max-width: 24ch; }
.hero-lede { grid-column: 1; grid-row: 2; margin: 2px 0 0; justify-self: end; text-align: right; max-width: 27ch; align-self: start; }
.services-band { margin-top: 40px; }
}
/* =========================================================
MANIFESTO
========================================================= */
.manifesto {
background: var(--cream);
color: var(--text-ink);
text-align: center;
padding: 84px 0 92px;
position: relative;
}
.fan { width: 108px; height: 56px; margin: 0 auto; color: var(--brass-lo); }
.mani-title {
margin-top: 26px;
font: 400 clamp(2.3rem, 9.4vw, 4.8rem)/1.06 var(--f-display);
color: var(--burgundy);
}
.mani-title em { font-style: normal; color: var(--bronze-text); }
.mani-body { margin: 28px auto 0; max-width: 40ch; font-size: 1.2rem; color: #3d2a2c; }
.mani-sign {
margin-top: 32px;
font: 600 .72rem/1 var(--f-label); letter-spacing: .34em; text-transform: uppercase; color: var(--burgundy);
display: inline-flex; align-items: center; gap: 16px;
}
.mani-sign::before, .mani-sign::after { content: ""; width: 34px; height: 1px; background: var(--brass-lo); }
@media (max-width: 479px) { .mani-sign { letter-spacing: .24em; gap: 12px; white-space: nowrap; } .mani-sign::before, .mani-sign::after { width: 20px; } }
/* =========================================================
1 · SUITES — floor directory
========================================================= */
.suites {
position: relative;
background:
repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 120px),
linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
padding: 92px 0 100px;
}
.suites .sec-title { color: var(--cream); }
.rooms { margin-top: 56px; display: grid; gap: 64px; }
.room-fig { padding: 16px 16px 0; }
.arch-sm { --ring: var(--ink); aspect-ratio: 1 / 1; }
.plaque { margin-top: 26px; position: relative; }
.room-no {
display: block;
font: 400 3.4rem/1 var(--f-display);
color: var(--brass-hi);
}
.room-name { margin-top: 12px; }
.room-btn {
font: 600 1rem/1.3 var(--f-label); letter-spacing: .24em; text-transform: uppercase;
color: var(--cream); text-align: left; padding-top: 3px; cursor: default;
}
.room-tag { margin-top: 8px; font-size: 1.35rem; line-height: 1.3; color: var(--cream); }
.room-desc { margin-top: 8px; color: rgba(242,230,208,.7); font-size: 1.08rem; max-width: 40ch; }
.room-arrow { display: none; }
@media (min-width: 1024px) {
.suites { padding: 130px 0 140px; }
.suites .sec-head { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; align-items: end; }
.suites .sec-head .eyebrow { grid-column: 1 / -1; }
.suites .sec-lede { justify-self: end; margin: 0 0 8px; }
.rooms {
margin-top: 72px;
grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
grid-template-rows: repeat(4, auto);
column-gap: 88px; row-gap: 0;
align-items: stretch;
}
.room { display: contents; }
.room-fig {
grid-column: 2; grid-row: 1 / span 4;
padding: 16px;
opacity: 0;
clip-path: inset(0 50% 0 50%);
transition: clip-path .9s var(--ease-door), opacity .5s;
pointer-events: none;
}
.room.is-active .room-fig { opacity: 1; clip-path: inset(0 0 0 0); }
.arch-sm { aspect-ratio: 4 / 4.7; }
.room:nth-child(1) .plaque { grid-row: 1; }
.room:nth-child(2) .plaque { grid-row: 2; }
.room:nth-child(3) .plaque { grid-row: 3; }
.room:nth-child(4) .plaque { grid-row: 4; }
.plaque {
grid-column: 1;
margin: 0;
display: grid;
grid-template-columns: 150px 1fr 32px;
column-gap: 16px;
align-content: center;
padding: 26px 0;
border-top: 1px solid rgba(201,163,94,.3);
cursor: pointer;
transition: background-color .4s;
}
.room:nth-child(4) .plaque { border-bottom: 1px solid rgba(201,163,94,.3); }
.room-no { grid-row: 1 / span 3; font-size: 3.4rem; align-self: center; color: rgba(232,205,143,.5); transition: color .4s; }
.room-name { margin: 0; }
.room-btn { cursor: pointer; }
.room-btn::after { content: ""; position: absolute; inset: 0; }
.room-tag { grid-column: 2; font-size: 1.3rem; color: rgba(242,230,208,.8); }
.room-desc { grid-column: 2; max-height: 0; overflow: hidden; opacity: 0; margin: 0; transition: max-height .6s var(--ease-out), opacity .4s, margin .4s; }
.room-arrow { display: block; grid-column: 3; grid-row: 1 / span 3; align-self: center; width: 26px; height: 26px; color: var(--brass); opacity: .35; transition: transform .4s var(--ease-out), opacity .4s; }
.room.is-active .room-no { color: var(--brass-hi); }
.room.is-active .room-tag { color: var(--cream); }
.room.is-active .room-desc { max-height: 6em; opacity: 1; margin-top: 8px; }
.room.is-active .room-arrow { opacity: 1; transform: translateX(6px); }
.room.is-active .plaque { background: linear-gradient(90deg, rgba(201,163,94,.07), transparent 70%); }
}
/* =========================================================
2 · USES
========================================================= */
.uses { background: var(--cream); color: var(--text-ink); padding: 92px 0 110px; }
.uses-title {
margin-top: 22px;
font: 400 clamp(2.3rem, 9.6vw, 4.9rem)/1.08 var(--f-display);
color: var(--burgundy);
}
.uses-title i { font-style: normal; color: var(--brass-lo); margin: 0 .08em; }
.use-grid {
margin-top: 52px;
display: grid; grid-template-columns: 1fr 1fr; gap: 36px 14px;
}
.use-podcast { grid-column: 1 / -1; }
.use-frame {
position: relative;
aspect-ratio: 3 / 4;
overflow: hidden;
background: var(--ink);
clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}
.use-podcast .use-frame { aspect-ratio: 16 / 10; }
.use-frame::after {
content: ""; position: absolute; inset: 8px; pointer-events: none;
border: 1px solid rgba(242,230,208,.55);
clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
.use-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.use-product .use-frame img { object-position: 72% 50%; }
.use:hover .use-frame img { transform: scale(1.04); }
.use-no { margin-top: 16px; font: 600 .64rem/1 var(--f-label); letter-spacing: .28em; text-transform: uppercase; color: var(--bronze-text); }
.use-name { margin-top: 8px; font: 400 2rem/1 var(--f-display); color: var(--burgundy); }
.use-desc { margin-top: 6px; font-size: 1.02rem; line-height: 1.4; color: #4a3336; }
@media (min-width: 1024px) {
.uses { padding: 130px 0 150px; }
.sec-head-split { display: grid; grid-template-columns: 1fr 2.2fr; column-gap: 64px; }
.sec-head-split .eyebrow { grid-column: 1; grid-row: 1; align-self: start; margin-top: 18px; }
.sec-head-split .uses-title { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.sec-head-split .sec-lede { grid-column: 1; grid-row: 2; align-self: end; }
.use-grid { grid-template-columns: repeat(5, 1fr); gap: 0 22px; margin-top: 84px; }
.use-podcast { grid-column: auto; }
.use-podcast .use-frame { aspect-ratio: 3 / 4.3; }
.use-frame { aspect-ratio: 3 / 4.3; }
.use-podcast .use-frame img { object-position: 48% 50%; }
.use:nth-child(even) { margin-top: 72px; }
.use-name { font-size: 2.3rem; }
}
/* =========================================================
3 · CHECK-IN (booking)
========================================================= */
.book {
position: relative;
isolation: isolate;
background: radial-gradient(90% 60% at 50% 70%, #5a1424, var(--burgundy) 55%, var(--burgundy-deep));
padding: 96px 0 104px;
border-top: 1px solid var(--brass);
overflow-x: clip;
}
.pediment { position: absolute; left: 50%; top: -40px; width: min(560px, 86%); height: 40px; transform: translateX(-50%); overflow: visible; }
.ped-fill { fill: var(--burgundy-deep); }
.book .pediment .ped-fill { fill: #3a0b15; }
.ped-line { fill: none; stroke: var(--brass); stroke-width: 1; vector-effect: non-scaling-stroke; }
.book-sun {
position: absolute; inset: 0; z-index: -1;
background: repeating-conic-gradient(from -90deg at 50% 78%, rgba(232,205,143,.1) 0 .5deg, transparent .5deg 6deg);
-webkit-mask-image: radial-gradient(70% 55% at 50% 78%, #000 5%, transparent 75%);
mask-image: radial-gradient(70% 55% at 50% 78%, #000 5%, transparent 75%);
}
.book .sec-title { max-width: 14ch; }
.steps { margin-top: 44px; border-top: 1px solid rgba(201,163,94,.35); }
.steps li {
display: grid; grid-template-columns: 58px 1fr; column-gap: 18px;
padding: 24px 0;
border-bottom: 1px solid rgba(201,163,94,.35);
}
.step-no {
width: 50px; height: 50px; display: grid; place-items: center;
font: 400 1.35rem/1 var(--f-display); color: var(--brass-hi);
border: 1px solid var(--brass);
clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
position: relative;
}
.step-no::before { content: ""; position: absolute; inset: 0; background:
linear-gradient(135deg, var(--brass) 0 7px, transparent 7px) top left / 50% 50% no-repeat,
linear-gradient(225deg, var(--brass) 0 7px, transparent 7px) top right / 50% 50% no-repeat,
linear-gradient(45deg, var(--brass) 0 7px, transparent 7px) bottom left / 50% 50% no-repeat,
linear-gradient(315deg, var(--brass) 0 7px, transparent 7px) bottom right / 50% 50% no-repeat; opacity: .9; }
.step-title { font: 600 .95rem/1.35 var(--f-label); letter-spacing: .22em; text-transform: uppercase; padding-top: 4px; }
.step-title sup { font-size: .6em; top: .05em; }
.steps p { margin-top: 8px; color: var(--cream-dim); font-size: 1.1rem; }
.book-card-col { margin-top: 64px; display: flex; flex-direction: column; align-items: center; }
.keycard {
position: relative;
width: min(300px, 78vw);
aspect-ratio: 5 / 7.2;
transform: rotate(-3deg);
transition: transform .6s var(--ease-out);
transform-style: preserve-3d;
}
.keycard::before {
/* the black card-back peeking behind */
content: ""; position: absolute; inset: 0;
border-radius: 14px;
background: linear-gradient(160deg, #1b1112, #0c0708);
box-shadow: inset 0 0 0 1px rgba(201,163,94,.4);
transform: rotate(8deg) translate(14px, 4px);
z-index: -1;
}
.kc-inner {
position: absolute; inset: 0;
border-radius: 14px;
background:
radial-gradient(120% 80% at 30% 10%, rgba(255,255,255,.06), transparent 50%),
linear-gradient(160deg, #5d1626, #3a0b15 70%);
box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), inset 0 0 0 1px rgba(201,163,94,.5);
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: 30px 26px;
}
.kc-inner::after { content: ""; position: absolute; inset: 12px; border: 1px solid var(--brass); border-radius: 6px; pointer-events: none; }
.kc-inner .mono { font-size: 58px; }
.kc-rule { width: 56%; height: 1px; background: var(--brass); margin: 18px 0 16px; }
.kc-name { font: 600 .92rem/1 var(--f-label); letter-spacing: .24em; text-transform: uppercase; color: var(--brass-hi); padding-top: 3px; }
.kc-sub { font: 400 .56rem/1 var(--f-label); letter-spacing: .5em; text-transform: uppercase; color: var(--brass-hi); margin-top: 9px; }
.kc-tag { margin-top: 20px; font-size: 1.05rem; color: var(--cream); }
.kc-meta {
margin-top: 26px; display: grid; grid-template-columns: auto auto; gap: 8px 14px; text-align: left;
font: 600 .56rem/1 var(--f-label); letter-spacing: .26em; text-transform: uppercase; color: rgba(232,205,143,.8);
}
.kc-meta b { font-weight: 600; color: var(--cream); }
.book-actions { margin-top: 46px; width: min(380px, 100%); text-align: center; }
.book-note { margin-top: 14px; font-size: 1.02rem; color: var(--cream-dim); }
.book-note strong { font-weight: 400; color: var(--cream); }
.book-note a { color: var(--brass-hi); text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (min-width: 1024px) {
.book { padding: 140px 0 150px; }
.book-inner { display: grid; grid-template-columns: 1.05fr .95fr; column-gap: 96px; align-items: center; }
.book-card-col { margin-top: 0; }
.keycard { width: 330px; }
.steps li { grid-template-columns: 72px 1fr; padding: 26px 0; }
}
/* =========================================================
4 · FIRST LOOK (the lift)
========================================================= */
.first-look {
position: relative;
background:
repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 140px),
var(--ink);
padding: 96px 0 0;
overflow: hidden;
}
.first-look .sec-title { color: var(--cream); }
.fl-facts { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.fl-facts li {
font: 600 .62rem/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase;
padding: 10px 12px 8px; border: 1px solid rgba(201,163,94,.45); color: var(--cream-dim);
}
.lift { margin: 64px auto 0; width: min(310px, 80vw); position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.lift-indicator { position: relative; width: 120px; color: var(--brass); margin-bottom: 30px; }
.lift-indicator svg { width: 100%; height: auto; overflow: visible; }
.lift-indicator span {
position: absolute; left: 50%; top: -6px; transform: translateX(-50%);
width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
font: 600 .7rem/1 var(--f-label); padding-top: 2px;
background: var(--brass-hi); color: var(--ink); box-shadow: 0 0 18px rgba(232,205,143,.55);
}
.li-needle { stroke: var(--brass-hi); }
.lift-frame {
position: relative; width: 100%;
aspect-ratio: 576 / 1024;
background: #000;
border-radius: 150px 150px 0 0;
overflow: hidden;
box-shadow: 0 0 0 8px var(--ink), 0 0 0 9px var(--brass), 0 0 0 16px var(--ink), 0 0 0 17px rgba(201,163,94,.45);
}
.lift-frame video { width: 100%; height: 100%; object-fit: cover; }
.doors { position: absolute; inset: 0; display: flex; pointer-events: none; }
.door {
flex: 1;
transition: transform 1.5s var(--ease-door);
background:
repeating-conic-gradient(from 180deg at var(--cx) 58%, rgba(232,205,143,.5) 0 .7deg, transparent .7deg 9deg),
linear-gradient(90deg, rgba(0,0,0,.35), transparent 30%, transparent 70%, rgba(0,0,0,.35)),
linear-gradient(180deg, #3b2716, #1c120a 55%, #2a1b0e);
position: relative;
}
.door::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(232,205,143,.5); border-radius: 130px 0 0 0; }
.door-l { --cx: 100%; border-right: 1px solid rgba(232,205,143,.6); }
.door-r { --cx: 0%; border-left: 1px solid rgba(0,0,0,.7); }
.door-r::after { border-radius: 0 130px 0 0; }
.lift-frame.is-open .door-l { transform: translateX(-101%); }
.lift-frame.is-open .door-r { transform: translateX(101%); }
.play-btn svg { width: 18px; height: 18px; color: var(--brass-hi); margin-top: -3px; }
.play-btn .ico-pause { display: none; }
.play-btn[aria-pressed="true"] .ico-pause { display: block; }
.play-btn[aria-pressed="true"] .ico-play { display: none; }
.checker-floor {
position: relative; z-index: 1;
height: 190px; margin-top: -60px;
perspective: 420px;
overflow: hidden;
}
.checker-floor::before {
content: ""; position: absolute; left: -60%; right: -60%; bottom: 0; height: 260px;
background: conic-gradient(#0c0b0b 25%, #e6e0d6 0 50%, #0c0b0b 0 75%, #e6e0d6 0) 50% 100% / 64px 64px;
transform: rotateX(58deg);
transform-origin: 50% 100%;
-webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
mask-image: linear-gradient(to top, #000 10%, transparent 85%);
opacity: .9;
}
@media (min-width: 1024px) {
.first-look { padding-top: 140px; }
.fl-inner { display: grid; grid-template-columns: 1.1fr 1fr; column-gap: 80px; align-items: center; }
.lift { margin-top: 0; width: 340px; }
.checker-floor { height: 240px; margin-top: -80px; }
}
/* =========================================================
5 · HOUSE RULES — door hanger
========================================================= */
.rules { background: var(--cream); color: var(--text-ink); padding: 96px 0 110px; }
.rules-inner { display: grid; gap: 64px; }
.hanger-wrap {
position: relative; width: min(100%, 330px); margin: 0 auto; padding: 60px 0 70px;
display: flex; justify-content: center;
background:
linear-gradient(90deg, rgba(255,255,255,.06), transparent 8%, transparent 92%, rgba(0,0,0,.4)),
#151012;
box-shadow: 0 0 0 10px var(--cream), 0 0 0 11px rgba(117,80,29,.5), 0 40px 60px -30px rgba(20,11,12,.6);
}
.hanger-wrap::before, .hanger-wrap::after { /* raised panel mouldings of the black door */
content: ""; position: absolute; left: 22px; right: 22px; pointer-events: none;
border: 1px solid rgba(255,255,255,.1);
box-shadow: inset 0 0 0 6px #151012, inset 0 0 0 7px rgba(201,163,94,.28);
}
.hanger-wrap::before { top: 22px; height: 52%; }
.hanger-wrap::after { bottom: 22px; height: calc(48% - 58px); }
.hanger-wrap > * { z-index: 1; }
.knob {
position: absolute; z-index: 3; left: 50%; top: 116px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fbe7b4, #c9a35e 45%, #6d4f1f 100%);
box-shadow: 0 3px 6px rgba(0,0,0,.35);
}
.knob::after {
content: ""; position: absolute; left: 50%; top: 9px; width: 96px; height: 12px; border-radius: 0 8px 8px 0;
background: linear-gradient(180deg, #f3dca6, #c9a35e 50%, #7d5c26);
box-shadow: 0 3px 5px rgba(0,0,0,.3);
}
.hanger {
position: relative;
width: 230px; height: 470px;
border-radius: 20px 20px 16px 16px;
background: linear-gradient(170deg, #5e1727, #3d0b16 80%);
color: var(--cream);
display: flex; flex-direction: column; align-items: center;
padding: 150px 22px 30px;
text-align: center;
transform-origin: 50% 71px;
box-shadow: 0 30px 50px -24px rgba(44, 8, 16, .65);
}
.hanger::before {
content: ""; position: absolute; inset: 10px; border-radius: 14px 14px 10px 10px;
border: 1px solid rgba(201,163,94,.8); pointer-events: none;
}
.hanger-hole {
position: absolute; z-index: 2; left: 50%; top: 22px; width: 98px; height: 98px; margin-left: -49px; border-radius: 50%;
background: #151012;
box-shadow: 0 0 0 1px var(--brass), inset 0 3px 8px rgba(0,0,0,.5);
}
.hanger-hole::after { /* the slit */
content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 6px; background: transparent;
}
.hanger .mono { font-size: 42px; }
.hanger-rule { width: 64%; height: 1px; background: var(--brass); margin: 16px 0; }
.hanger-title { font: 400 2.5rem/1.02 var(--f-display); }
.hanger-sub { margin-top: 12px; font: 600 .62rem/1.5 var(--f-label); letter-spacing: .26em; text-transform: uppercase; color: var(--brass-hi); }
.hanger-foot { font: 600 .58rem/1 var(--f-label); letter-spacing: .3em; text-transform: uppercase; color: var(--brass-hi); margin-top: auto; }
.hanger-wrap:hover .hanger, .hanger.swing { animation: swing 2.4s var(--ease-out) both; }
@keyframes swing {
0% { transform: rotate(0); } 15% { transform: rotate(7deg); } 35% { transform: rotate(-5deg); }
55% { transform: rotate(3deg); } 75% { transform: rotate(-1.4deg); } 100% { transform: rotate(0); }
}
.rules .sec-title { color: var(--burgundy); max-width: 13ch; }
.rule-list { margin-top: 38px; counter-reset: r; border-top: 1px solid rgba(117,80,29,.35); }
.rule-list li {
counter-increment: r;
display: grid; grid-template-columns: 54px 1fr; align-items: baseline;
padding: 18px 0; border-bottom: 1px solid rgba(117,80,29,.35);
font-size: 1.2rem; line-height: 1.4;
}
.rule-list li::before { content: counter(r, decimal-leading-zero); font: 400 1.5rem/1 var(--f-display); color: var(--bronze-text); }
.rules .link-arrow { margin-top: 26px; }
@media (min-width: 1024px) {
.rules { padding: 140px 0 150px; }
.rules-inner { grid-template-columns: .8fr 1.2fr; column-gap: 96px; align-items: center; }
.hanger-wrap { width: 380px; padding: 80px 0 90px; }
.knob { top: 136px; }
}
/* =========================================================
FOOTER · CHECK-OUT
========================================================= */
.footer {
position: relative; isolation: isolate; overflow: hidden;
background: linear-gradient(180deg, var(--burgundy) 0%, var(--burgundy-deep) 70%);
padding: 96px 0 calc(110px + env(safe-area-inset-bottom));
text-align: center;
border-top: 1px solid var(--brass);
}
.footer-sun {
position: absolute; inset: 0; z-index: -1;
background: repeating-conic-gradient(from -90deg at 50% 0%, rgba(232,205,143,.1) 0 .5deg, transparent .5deg 6deg);
-webkit-mask-image: radial-gradient(80% 50% at 50% 0%, #000 5%, transparent 80%);
mask-image: radial-gradient(80% 50% at 50% 0%, #000 5%, transparent 80%);
}
.fan-lg { width: 132px; height: 68px; color: var(--brass); }
.footer-big { margin-top: 26px; font: 400 clamp(2.6rem, 11vw, 6.4rem)/1.02 var(--f-display); }
.footer-sign { margin: 24px 0 34px; font: 600 .72rem/1 var(--f-label); letter-spacing: .34em; text-transform: uppercase; color: var(--brass-hi); }
.footer-rule { margin: 72px auto 56px; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 20px; text-align: left; }
.f-col:first-child { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; }
.f-name { font: 600 .74rem/1.3 var(--f-label); letter-spacing: .28em; text-transform: uppercase; }
.f-name span { font-weight: 400; font-size: .8em; letter-spacing: .4em; color: var(--brass-hi); }
.f-h { font: 600 .64rem/1 var(--f-label); letter-spacing: .3em; text-transform: uppercase; color: var(--brass-hi); margin-bottom: 14px; }
.f-line { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; }
.f-line svg { width: 18px; height: 18px; color: var(--brass-hi); }
.f-small { margin-top: 4px; color: var(--cream-dim); font-size: 1rem; }
.socials { display: flex; gap: 4px; margin-top: 12px; margin-left: -12px; }
.socials a { width: 44px; height: 44px; display: grid; place-items: center; color: var(--cream); transition: color .3s; }
.socials a:hover { color: var(--brass-hi); }
.socials svg { width: 18px; height: 18px; }
.f-nav li a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: 1.1rem; }
.f-nav li a:hover { color: var(--brass-hi); }
.legal { margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(201,163,94,.25); font-size: .92rem; color: rgba(242,230,208,.66); text-align: left; }
.legal span { display: block; }
.legal span + span { margin-top: 6px; }
@media (min-width: 1024px) {
.footer { padding: 130px 0 70px; }
.footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.f-col:first-child { grid-column: auto; align-items: flex-start; flex-direction: column; }
.legal { display: flex; justify-content: space-between; gap: 40px; }
.legal span + span { margin-top: 0; }
}
/* =========================================================
MOBILE DOCK
========================================================= */
.dock {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
background: rgba(36, 7, 13, .95);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-top: 1px solid rgba(201,163,94,.5);
transform: translateY(110%);
transition: transform .5s var(--ease-door);
}
.dock.is-shown { transform: none; }
.dock-text { display: flex; align-items: center; gap: 10px; font: 600 .64rem/1 var(--f-label); letter-spacing: .22em; text-transform: uppercase; color: var(--cream-dim); min-width: 0; }
.dock-text span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 2px; }
.dock-floor { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--brass); color: var(--brass-hi); padding-top: 2px; }
@media (min-width: 1024px) { .dock { display: none; } }
/* =========================================================
MOTION — entrances (JS adds .js to )
========================================================= */
/* (the home hero entrance lives with the hero: see the HOME HERO block in pages.css) */
.js [data-reveal] { opacity: 0; transform: translateY(24px); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
.js [data-reveal] { opacity: 1; transform: none; }
.hanger-wrap:hover .hanger, .hanger.swing { animation: none; }
}
/* =========================================================
The Hotel Suite: multi-page layer on top of the approved Grand Hotel Deco base.
Antique type, as the client asked:
Cinzel (Trajan-style capitals, like the logo and the door plaques),
Cormorant Garamond (display and italic taglines), EB Garamond (reading).
========================================================= */
:root {
--f-display: "Cormorant Garamond", "Cormorant Garamond Fallback", Georgia, serif;
--f-label: "Cinzel", "Cinzel Fallback", Georgia, serif;
--f-body: "EB Garamond", "EB Garamond Fallback", Georgia, "Times New Roman", serif;
}
body { font-size: 1.1875rem; line-height: 1.6; }
.sec-title, .mani-title, .uses-title, .dir-title, .dir-name, .room-no, .use-name, .footer-big, .hanger-title, .hero-title { font-weight: 500; letter-spacing: -.005em; }
.sec-title { font-size: clamp(2.7rem, 10.5vw, 5.2rem); line-height: 1; }
em, .it { font-style: italic; }
.gold-it { font-style: italic; color: var(--brass-hi); }
.on-light .gold-it { color: var(--bronze-text); }
.btn, .link-arrow, .eyebrow, .dir-note, .dir-foot, .f-h, .brand-name, .brand-sub, .mani-sign, .footer-sign, .hero-tag, .step-title { font-family: var(--f-label); font-weight: 600; }
.ico { width: 1.2em; height: 1.2em; flex: none; }
.lede { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.45rem); line-height: 1.5; color: var(--cream-dim); max-width: 38ch; }
.on-light .lede { color: #4a3336; }
.prose p + p { margin-top: 1em; }
.prose { max-width: 60ch; color: var(--cream-dim); }
.on-light .prose { color: #3d2a2c; }
.sect { padding: clamp(80px, 11vw, 140px) 0; position: relative; }
.on-light { background: var(--cream); color: var(--text-ink); }
.on-ink { background: repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 120px), linear-gradient(180deg, var(--ink), var(--ink-2)); }
.on-burg { background: radial-gradient(90% 70% at 50% 60%, #5a1424, var(--burgundy) 55%, var(--burgundy-deep)); }
.center { text-align: center; }
.center .lede, .center .prose { margin-inline: auto; }
.rule { display: block; margin: 28px auto; }
.sun { position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: repeating-conic-gradient(from -90deg at 50% 100%, rgba(232,205,143,.1) 0 .5deg, transparent .5deg 6deg);
-webkit-mask-image: radial-gradient(80% 70% at 50% 100%, #000 5%, transparent 75%); mask-image: radial-gradient(80% 70% at 50% 100%, #000 5%, transparent 75%); }
.sect > .wrap { position: relative; z-index: 1; }
/* ---------- masthead: nav | brand | dial + book ---------- */
.masthead { grid-template-columns: 1fr auto 1fr; }
.main-nav { display: none; justify-self: start; gap: clamp(18px, 1.8vw, 30px); }
.main-nav a { font: 600 .68rem/1 var(--f-label); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 3px 0 0; color: var(--cream-dim); background: linear-gradient(transparent, transparent) 0 calc(50% + 12px) / 100% 1px no-repeat; transition: color .3s; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--brass-hi); background-image: linear-gradient(var(--brass), var(--brass)); }
.masthead .brand { grid-column: 1; justify-self: start; gap: 10px; }
.logo-mono { width: 40px; height: 40px; }
.brand-words { display: none; }
.mast-right { grid-column: 3; gap: 10px; }
.masthead .dial { width: 86px; margin-top: 2px; }
.dir-btn span { display: none; }
@media (max-width: 1179px) { .masthead .dial { position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + 6px); transform: translateX(-50%); width: 92px; } .masthead .dial:hover { transform: translate(-50%, -1px); } }
@media (min-width: 640px) { .brand-words { display: block; } }
@media (min-width: 1180px) {
.main-nav { display: flex; }
.masthead .brand { grid-column: 2; justify-self: center; flex-direction: column; gap: 4px; text-align: center; }
.masthead .brand .logo-mono { width: 44px; height: 44px; }
.masthead .brand-words { display: block; }
.masthead .brand-name { font-size: .7rem; letter-spacing: .34em; }
.masthead .brand-sub { font-size: .5rem; margin-top: 4px; }
.masthead .dial { width: 96px; }
.dir-btn { display: none; }
}
.dir-logo { width: 54px; height: 54px; margin: 0 auto 10px; }
.dir-foot a { text-decoration: none; }
.dir-foot a:hover { color: var(--brass-hi); }
/* ---------- page header (inner pages) ---------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--head-h) + clamp(56px, 9vw, 110px)) 0 clamp(64px, 9vw, 110px); text-align: center;
background: radial-gradient(120% 80% at 50% 70%, #5c1424 0%, var(--burgundy) 45%, var(--burgundy-deep) 100%); }
.page-hero .sun { background-position: center; -webkit-mask-image: radial-gradient(80% 70% at 50% 100%, #000 5%, transparent 75%); }
.page-hero .fan { margin-bottom: 26px; color: var(--brass); }
.page-hero h1 { font: 500 clamp(3rem, 11vw, 6.6rem)/.98 var(--f-display); letter-spacing: -.01em; }
.page-hero .tag { margin-top: 20px; font: 500 italic clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem)/1.25 var(--f-display); color: var(--brass-hi); }
.page-hero .lede { margin: 22px auto 0; }
.page-hero .actions { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; }
.crumb { font: 600 .64rem/1 var(--f-label); letter-spacing: .26em; text-transform: uppercase; color: var(--brass-hi); margin-bottom: 22px; }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
/* ---------- home: good content band ---------- */
.stays { text-align: center; padding: 64px 0 60px; background: var(--ink); border-block: 1px solid rgba(201,163,94,.45); }
.stays-title { font: 600 clamp(1.5rem, 1.1rem + 2.2vw, 2.9rem)/1.1 var(--f-label); letter-spacing: .14em; color: var(--brass-hi); }
.stays-list { margin-top: 18px; font: 600 .74rem/1.9 var(--f-label); letter-spacing: .26em; text-transform: uppercase; color: var(--cream); }
.stays-list i { font-style: normal; color: var(--brass); margin: 0 .5em; }
.by-res { margin-top: 18px; font: 600 .62rem/1.5 var(--f-label); letter-spacing: .26em; text-transform: uppercase; color: var(--cream-dim); }
/* ---------- dot lists (Perfect for / Ideal for) ---------- */
.dots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.dots li { padding: 9px 14px 7px; border: 1px solid rgba(201,163,94,.45); font: 600 .62rem/1.3 var(--f-label); letter-spacing: .16em; text-transform: uppercase; color: var(--cream); }
.on-light .dots li { border-color: rgba(117,80,29,.4); color: var(--burgundy); }
.dots-label { margin-top: 30px; font: 600 .68rem/1 var(--f-label); letter-spacing: .26em; text-transform: uppercase; color: var(--brass-hi); }
.on-light .dots-label { color: var(--bronze-text); }
/* ---------- suite feature (split, arch image + copy) ---------- */
.feature { display: grid; gap: 48px; align-items: center; }
.feature-media { position: relative; padding: 16px; max-width: 520px; width: 100%; justify-self: center; }
.feature-media .arch { aspect-ratio: 4 / 5; --ring: var(--ink); }
.on-light .feature-media .arch { --ring: var(--cream); }
.on-burg .feature-media .arch { --ring: var(--burgundy); }
.feature-media .prop { position: absolute; z-index: 3; width: clamp(92px, 22%, 150px); bottom: -8px; right: -10px; filter: drop-shadow(0 18px 18px rgba(0,0,0,.45)); }
.feature-media .prop.left { right: auto; left: -10px; }
.feature-copy .icon-badge { display: inline-grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--brass); border-radius: 50%; color: var(--brass-hi); margin-bottom: 18px; }
.on-light .feature-copy .icon-badge { color: var(--bronze-text); border-color: var(--bronze-text); }
.feature-copy .icon-badge .ico { width: 24px; height: 24px; }
.feature-copy h2 { font: 500 clamp(2.4rem, 8vw, 4.4rem)/1 var(--f-display); }
.feature-copy .tag { margin-top: 12px; font: 500 italic clamp(1.35rem, 1.1rem + .9vw, 1.85rem)/1.25 var(--f-display); color: var(--brass-hi); }
.on-light .feature-copy .tag { color: var(--bronze-text); }
.feature-copy .prose { margin-top: 22px; }
.feature-copy .kicker { margin-top: 24px; font: 500 italic 1.4rem/1.3 var(--f-display); color: var(--cream); }
.on-light .feature-copy .kicker { color: var(--burgundy); }
.feature-copy .actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
@media (min-width: 960px) {
.feature { grid-template-columns: 1fr 1.05fr; gap: 88px; }
.feature.flip .feature-media { order: 2; }
}
.feature + .feature { margin-top: clamp(90px, 12vw, 150px); }
/* ---------- suite cards (Explore the suites index) ---------- */
.suite-cards { margin-top: 56px; display: grid; gap: 28px; }
.suite-card { position: relative; display: grid; grid-template-rows: auto 1fr; background: #1a0d10; text-decoration: none; color: var(--cream); }
.suite-card figure { aspect-ratio: 4 / 3; overflow: hidden; }
.suite-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.suite-card:hover img { transform: scale(1.04); }
.suite-card .sc-body { padding: 24px 24px 28px; border: 1px solid rgba(201,163,94,.3); border-top: 0; }
.suite-card .sc-kicker { display: flex; align-items: center; gap: 10px; font: 600 .62rem/1 var(--f-label); letter-spacing: .24em; text-transform: uppercase; color: var(--brass-hi); }
.suite-card h3 { margin-top: 12px; font: 500 2.1rem/1.02 var(--f-display); }
.suite-card p { margin-top: 8px; font: 500 italic 1.2rem/1.3 var(--f-display); color: var(--cream-dim); }
.suite-card .more { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font: 600 .64rem/1 var(--f-label); letter-spacing: .22em; text-transform: uppercase; color: var(--brass-hi); }
.suite-card .more .ico { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
.suite-card:hover .more .ico { transform: translateX(4px); }
@media (min-width: 720px) { .suite-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .suite-cards { grid-template-columns: repeat(3, 1fr); } .suite-card.wide { grid-column: span 2; } .suite-card.wide figure { aspect-ratio: 16 / 9; } }
/* ---------- "stay includes" ledger ---------- */
.ledger { margin-top: 40px; border-top: 1px solid rgba(201,163,94,.35); }
.ledger li { display: grid; grid-template-columns: 52px 1fr; column-gap: 18px; padding: 20px 0; border-bottom: 1px solid rgba(201,163,94,.35); align-items: start; }
.on-light .ledger, .on-light .ledger li { border-color: rgba(117,80,29,.3); }
.ledger .ico-wrap { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--brass); border-radius: 50%; color: var(--brass-hi); }
.on-light .ledger .ico-wrap { border-color: var(--bronze-text); color: var(--bronze-text); }
.ledger .ico { width: 20px; height: 20px; }
.ledger b { display: block; font: 500 1.6rem/1.1 var(--f-display); }
.ledger span { display: block; margin-top: 4px; color: var(--cream-dim); }
.on-light .ledger span { color: #4a3336; }
/* ---------- stay packages (priced like key cards) ---------- */
.packages { margin-top: 56px; display: grid; gap: 22px; }
.package { position: relative; padding: 34px 28px 30px; border-radius: 14px; text-align: center;
background: radial-gradient(120% 80% at 30% 10%, rgba(255,255,255,.06), transparent 50%), linear-gradient(160deg, #5d1626, #3a0b15 70%);
box-shadow: 0 30px 60px -28px rgba(0,0,0,.7), inset 0 0 0 1px rgba(201,163,94,.5); }
.package::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(201,163,94,.7); border-radius: 7px; pointer-events: none; }
.package.feature-pkg { background: radial-gradient(120% 80% at 30% 10%, rgba(255,255,255,.05), transparent 50%), linear-gradient(160deg, #1d1113, #0c0708 70%); }
.package .pk-name { font: 600 .74rem/1 var(--f-label); letter-spacing: .26em; text-transform: uppercase; color: var(--brass-hi); }
.package .pk-hours { margin-top: 10px; font: 600 .6rem/1 var(--f-label); letter-spacing: .3em; text-transform: uppercase; color: var(--cream-dim); }
.package .pk-price { margin: 18px 0 14px; font: 500 3.6rem/1 var(--f-display); color: var(--cream); }
.package .pk-price small { font: 400 1rem var(--f-body); color: var(--cream-dim); margin-left: 4px; }
.package p { color: var(--cream-dim); font-size: 1.08rem; }
.package .rule-sm { width: 44%; height: 1px; background: var(--brass); margin: 18px auto; }
.package .btn { margin-top: 22px; width: 100%; }
.package .badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 7px 12px 5px; background: var(--brass-hi); color: var(--burgundy-deep); font: 600 .56rem/1 var(--f-label); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; z-index: 2; }
@media (min-width: 900px) { .packages { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
.rate-line { margin-top: 26px; text-align: center; font: 500 italic 1.5rem/1.3 var(--f-display); color: var(--cream); }
.rate-line b { font-style: normal; font-family: var(--f-label); font-size: .8em; letter-spacing: .14em; color: var(--brass-hi); }
/* ---------- check-in hours ---------- */
.hours { margin-top: 28px; border-top: 1px solid rgba(201,163,94,.35); max-width: 520px; }
.hours li { display: flex; justify-content: space-between; gap: 1rem; padding: 14px 0; border-bottom: 1px solid rgba(201,163,94,.35); font-size: 1.15rem; }
.hours li span:first-child { font: 600 .72rem/1.7 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-hi); }
.on-light .hours, .on-light .hours li { border-color: rgba(117,80,29,.3); }
.on-light .hours li span:first-child { color: var(--bronze-text); }
.f-hours li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 1.02rem; }
.f-hours li span:first-child { color: var(--cream-dim); }
.footer-lockup { width: clamp(150px, 20vw, 210px); height: auto; margin: 0 auto; }
.footer-grid { margin-top: 72px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.f-small a { color: var(--brass-hi); }
/* ---------- amenities / add-ons ---------- */
.amen-grid { margin-top: 48px; display: grid; gap: 0; border-top: 1px solid rgba(117,80,29,.3); }
.amen-grid li { display: flex; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(117,80,29,.3); font-size: 1.15rem; }
.amen-grid .ico { width: 22px; height: 22px; color: var(--bronze-text); }
@media (min-width: 760px) { .amen-grid { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
@media (min-width: 1100px) { .amen-grid { grid-template-columns: repeat(3, 1fr); } }
.addons { margin-top: 48px; display: grid; gap: 18px; }
.addon { padding: 26px 24px; border: 1px solid rgba(201,163,94,.4); background: rgba(20,11,12,.35); }
.addon h3 { font: 500 1.75rem/1.1 var(--f-display); }
.addon p { margin-top: 8px; color: var(--cream-dim); }
.addon .ico { width: 26px; height: 26px; color: var(--brass-hi); margin-bottom: 14px; }
@media (min-width: 760px) { .addons { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .addons { grid-template-columns: repeat(3, 1fr); } }
.fine { margin-top: 24px; font-size: 1rem; color: var(--cream-dim); }
.on-light .fine { color: #5a4346; }
/* ---------- FAQ ---------- */
.faq-list { margin-top: 40px; border-top: 1px solid rgba(117,80,29,.35); }
.faq-list details { border-bottom: 1px solid rgba(117,80,29,.35); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 22px 0; min-height: 44px; font: 500 clamp(1.4rem, 1.2rem + .6vw, 1.8rem)/1.2 var(--f-display); color: var(--burgundy); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: 14px; height: 14px; border-right: 1.5px solid var(--bronze-text); border-bottom: 1.5px solid var(--bronze-text); transform: rotate(45deg) translate(-3px, -3px); transition: transform .3s var(--ease-out); }
.faq-list details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq-list details p { padding: 0 0 24px; max-width: 62ch; color: #3d2a2c; }
.policy { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .policy { grid-template-columns: .8fr 1.2fr; gap: 96px; } }
.policy-hanger { width: min(280px, 70vw); justify-self: center; filter: drop-shadow(0 30px 30px rgba(0,0,0,.35)); transform-origin: 50% 12%; }
.policy-list li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid rgba(201,163,94,.35); color: var(--cream); }
.policy-list li:first-child { border-top: 1px solid rgba(201,163,94,.35); }
.policy-list li::before { content: counter(p, upper-roman); counter-increment: p; font: 500 1.3rem/1.2 var(--f-display); color: var(--brass-hi); }
.policy-list { counter-reset: p; margin-top: 32px; }
/* ---------- forms (contact + reservation) ---------- */
.form { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 28px; }
.form .wide { grid-column: 1 / -1; }
@media (min-width: 640px) { .form { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; }
.field label, .field .lbl { font: 600 .62rem/1.3 var(--f-label); letter-spacing: .22em; text-transform: uppercase; color: var(--bronze-text); }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; font: 400 1.1rem/1.3 var(--f-body); color: var(--text-ink); background: #fbf6ec; border: 1px solid rgba(74,15,28,.3); border-radius: 0; }
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; background: #fbf6ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234A0F1C' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right: 36px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; }
.field .err { font-size: .95rem; color: #8b1a2b; min-height: 0; }
.status { grid-column: 1 / -1; padding: 16px 18px; border-left: 2px solid var(--burgundy); background: rgba(74,15,28,.06); color: var(--text-ink); }
.status[hidden] { display: none; }
.contact-card { background: var(--cream); color: var(--text-ink); padding: clamp(28px, 4vw, 52px); position: relative; box-shadow: 0 40px 80px -40px rgba(0,0,0,.7); }
.contact-card::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(117,80,29,.45); pointer-events: none; }
.contact-card > * { position: relative; z-index: 1; }
.contact-card h2 { font: 500 clamp(2rem, 5vw, 2.9rem)/1.05 var(--f-display); color: var(--burgundy); }
.contact-grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1.3fr .7fr; gap: 72px; } }
.info-block + .info-block { margin-top: 32px; }
.info-block h3 { font: 600 .68rem/1 var(--f-label); letter-spacing: .26em; text-transform: uppercase; color: var(--brass-hi); }
.info-block p { margin-top: 10px; font-size: 1.2rem; }
/* marks: add ?marks to a URL to outline stand-in copy and placeholder photos */
.marks [data-standin] { outline: 1px dashed #E8913A; outline-offset: 3px; }
.marks [data-placeholder-img] { outline: 3px dashed #E8913A; outline-offset: -3px; }
/* =========================================================
The Hotel Suite: page parts added for the full site
(booking steps, galleries, call-to-action band, contact).
========================================================= */
.burg { color: var(--burgundy); }
.on-light .sec-title.burg, .on-light h2.burg { color: var(--burgundy); }
.opt { text-transform: none; letter-spacing: 0; font: italic 400 .95em var(--f-body); opacity: .8; }
.flip-x { transform: scaleX(-1); }
.sec-actions { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.center-actions, .center .sec-actions { justify-content: center; }
.dots-center { justify-content: center; margin: 28px auto 30px; max-width: 760px; }
.lede-ink { margin-top: 30px; color: #4a3336; }
.split { display: grid; gap: 40px; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; gap: 88px; align-items: start; } }
.page-hero .eyebrow { margin-bottom: 14px; }
.hero-plaque { width: min(260px, 70vw); height: auto; margin: 0 auto 30px; filter: drop-shadow(0 18px 24px rgba(0,0,0,.4)); }
/* ---------- home ---------- */
.suites .sec-actions { margin-top: 56px; }
.kc-img { width: min(330px, 80vw); height: auto; transform: rotate(-4deg); filter: drop-shadow(0 34px 34px rgba(0,0,0,.5)); transition: transform .6s var(--ease-out); }
.book-card-col:hover .kc-img { transform: rotate(-1deg) translateY(-4px); }
.stays-title { text-wrap: balance; }
@media (min-width: 1024px) {
.rooms { grid-template-rows: repeat(5, auto); }
.room-fig { grid-row: 1 / span 5; }
.room:nth-child(5) .plaque { grid-row: 5; border-bottom: 1px solid rgba(201,163,94,.3); }
.room:nth-child(4) .plaque { border-bottom: 0; }
}
/* ---------- features and props ---------- */
.feature-media .prop.prop-wide { width: clamp(150px, 42%, 240px); }
.feature-media .prop.prop-bell { width: clamp(110px, 28%, 170px); }
.feature-copy .eyebrow { margin-bottom: 10px; }
.on-light .feature-copy h2 { color: var(--burgundy); }
.on-light .prose a, .fine a, .faq-list a { color: inherit; text-underline-offset: 3px; }
/* ---------- gallery ---------- */
.gallery { margin-top: 48px; display: grid; gap: 18px; }
.gallery figure { overflow: hidden; background: var(--ink); aspect-ratio: 4 / 5; }
.gallery figure.g-wide { aspect-ratio: 3 / 2; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .gallery { grid-template-columns: 2fr 1fr; align-items: stretch; } .gallery figure { aspect-ratio: auto; } .gallery figure.g-wide { aspect-ratio: 3 / 2; } }
.addons-stack { margin-top: 0; grid-template-columns: 1fr !important; gap: 12px; }
.on-light .addon { background: #fbf6ec; border-color: rgba(117,80,29,.35); }
.on-light .addon h3 { color: var(--burgundy); }
.on-light .addon p { color: #4a3336; }
.on-light .addon .ico { color: var(--bronze-text); }
.addons-stack .addon { padding: 20px 22px; }
.addons-stack .addon h3 { font-size: 1.45rem; }
/* ---------- amenities on dark ---------- */
.amen-dark { border-color: rgba(201,163,94,.35); }
.amen-dark li { border-color: rgba(201,163,94,.35); color: var(--cream); }
.amen-dark .ico { color: var(--brass-hi); }
/* ---------- FAQ: hanger on a black door ---------- */
.hanger-door { position: relative; justify-self: center; width: min(320px, 82vw); padding: 56px 0 64px; display: flex; justify-content: center;
background: linear-gradient(90deg, rgba(255,255,255,.05), transparent 10%, transparent 90%, rgba(0,0,0,.4)), #151012;
box-shadow: 0 0 0 10px var(--ink), 0 0 0 11px rgba(201,163,94,.45); }
.hanger-door::before { content: ""; position: absolute; left: 50%; top: 40px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; z-index: 2;
background: radial-gradient(circle at 35% 30%, #fbe7b4, #c9a35e 45%, #6d4f1f 100%); box-shadow: 0 3px 6px rgba(0,0,0,.5); }
.policy-hanger { width: min(200px, 56vw); margin-top: 16px; transform-origin: 50% 18%; }
.swing-in.swing { animation: swing 2.4s var(--ease-out) both; }
.hanger-door:hover .policy-hanger { animation: swing 2.4s var(--ease-out) both; }
.policy-list li span { font-size: 1.12rem; line-height: 1.45; }
.on-light .faq-list summary { color: var(--burgundy); }
/* ---------- contact ---------- */
.contact-card .eyebrow { margin-bottom: 8px; }
.contact-info .btn { margin-top: 36px; }
.info-block a { color: var(--brass-hi); text-underline-offset: 3px; }
.hours-sm { margin-top: 12px; }
.hours-sm li { padding: 10px 0; font-size: 1.05rem; }
.status a { color: var(--burgundy); font-weight: 500; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #8b1a2b; }
/* ---------- shared call-to-action band ---------- */
.cta-band { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: clamp(80px, 11vw, 130px) 0; border-top: 1px solid var(--brass); }
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band .sec-title { max-width: 16ch; margin-inline: auto; }
.cta-band .lede { margin: 20px auto 0; }
.cta-band .actions { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; }
.cta-sleeve { width: min(230px, 60vw); height: auto; margin: 0 auto 28px; transform: rotate(-3deg); filter: drop-shadow(0 26px 26px rgba(0,0,0,.45)); }
/* ---------- 404 ---------- */
.page-404 { min-height: 100svh; display: grid; align-content: center; }
.hero-hanger { width: 110px; margin: 0 auto 26px; transform-origin: 50% 12%; animation: swing 2.4s var(--ease-out) .3s both; }
/* ---------- book: peerspace + hours ---------- */
.peer-plaque { width: min(240px, 70vw); height: auto; margin-bottom: 24px; filter: drop-shadow(0 18px 24px rgba(0,0,0,.45)); }
.peer .actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.peer .fine a { color: var(--brass-hi); }
/* =========================================================
RESERVATION (8 steps)
========================================================= */
.rv-sect .sec-head { margin-bottom: 8px; }
.rv-stepno { margin-top: 14px; font: 600 .64rem/1 var(--f-label); letter-spacing: .28em; text-transform: uppercase; color: var(--bronze-text); }
.rv-lamps { display: flex; justify-content: center; gap: 6px; margin: 30px auto 36px; max-width: 760px; }
.rv-lamps li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.rv-lamps .lamp { grid-row: auto; width: 34px; height: 34px; font-size: .78rem; color: var(--bronze-text); border-color: var(--bronze-text);
box-shadow: inset 0 0 0 3px var(--cream), inset 0 0 0 4px rgba(117,80,29,.3); }
.rv-lamps li.is-done .lamp { background: rgba(117,80,29,.14); }
.rv-lamps li.is-on .lamp { background: var(--burgundy); color: var(--brass-hi); border-color: var(--burgundy);
box-shadow: inset 0 0 0 3px var(--burgundy), inset 0 0 0 4px var(--brass), 0 0 18px rgba(201,163,94,.5); }
.rv-lamp-name { display: none; font: 600 .5rem/1.2 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: #5a4346; text-align: center; }
.rv-lamps li.is-on .rv-lamp-name { color: var(--burgundy); }
@media (min-width: 760px) { .rv-lamps .lamp { width: 40px; height: 40px; } .rv-lamp-name { display: block; } }
.rv { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1024px) { .rv { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; } .rv-folio { position: sticky; top: calc(var(--head-h) + 20px); } }
.rv-card { position: relative; background: #fbf6ec; padding: clamp(24px, 4vw, 48px); box-shadow: 0 30px 60px -36px rgba(44,8,16,.45); }
.rv-card::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(117,80,29,.4); pointer-events: none; }
.rv-card > * { position: relative; z-index: 1; }
.rv-h { display: flex; align-items: center; gap: 14px; font: 500 clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem)/1.1 var(--f-display); color: var(--burgundy); outline: none; }
.rv-h .ico { width: 30px; height: 30px; color: var(--bronze-text); }
.rv-sub { margin-top: 12px; color: #4a3336; max-width: 58ch; }
.rv-warn { min-height: 1.4em; margin-top: 18px; color: #8b1a2b; font-size: 1.02rem; }
.rv-nav { margin-top: 16px; padding-top: 22px; border-top: 1px solid rgba(117,80,29,.3); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.rv-back { min-height: 48px; padding: 3px 6px 0; font: 600 .7rem/1 var(--f-label); letter-spacing: .24em; text-transform: uppercase; color: var(--burgundy); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(74,15,28,.35); }
.rv-back:hover { text-decoration-color: currentColor; }
/* calendar */
.rv-cal-head { margin-top: 26px; display: flex; align-items: center; justify-content: space-between; }
.rv-month { font: 600 .9rem/1 var(--f-label); letter-spacing: .24em; text-transform: uppercase; color: var(--burgundy); padding-top: 3px; }
.rv-arrow { width: 48px; height: 48px; display: grid; place-items: center; color: var(--burgundy); border: 1px solid rgba(74,15,28,.3); }
.rv-arrow:disabled { opacity: .3; cursor: default; }
.rv-arrow .ico { width: 20px; height: 20px; }
.rv-week, .rv-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.rv-week { margin-top: 18px; }
.rv-week span { text-align: center; font: 600 .56rem/1 var(--f-label); letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-text); padding: 6px 0; }
.rv-day { aspect-ratio: 1; min-height: 40px; display: grid; place-items: center; font: 500 1.2rem/1 var(--f-display); color: var(--text-ink); border: 1px solid transparent; transition: background-color .2s, color .2s; }
.rv-day:not(:disabled):not(.is-blank) { border-color: rgba(117,80,29,.25); background: #fff; }
.rv-day:not(:disabled):hover { background: rgba(201,163,94,.22); }
.rv-day:disabled { color: rgba(36,19,21,.3); cursor: default; }
.rv-day.is-today { box-shadow: inset 0 -3px 0 var(--brass); }
.rv-day.is-sel { background: var(--burgundy) !important; color: var(--cream); border-color: var(--burgundy); box-shadow: inset 0 0 0 3px var(--burgundy), inset 0 0 0 4px var(--brass-hi); }
/* times */
.rv-chips { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.rv-chip { min-height: 50px; font: 600 .74rem/1 var(--f-label); letter-spacing: .12em; color: var(--burgundy); background: #fff; border: 1px solid rgba(117,80,29,.3); padding-top: 2px; }
.rv-chip:not(:disabled):hover { background: rgba(201,163,94,.22); }
.rv-chip:disabled { color: rgba(36,19,21,.3); background: transparent; text-decoration: line-through; cursor: default; }
.rv-chip.is-sel, .rv-chip.is-sel:hover { background: var(--burgundy); color: var(--cream); border-color: var(--burgundy); }
/* hours + guests steppers */
.rv-packs { margin-top: 24px; display: grid; gap: 8px; }
@media (min-width: 640px) { .rv-packs { grid-template-columns: repeat(3, 1fr); } }
.rv-pack { display: grid; gap: 6px; padding: 16px 14px; text-align: center; background: #fff; border: 1px solid rgba(117,80,29,.3); color: var(--burgundy); }
.rv-pack b { font: 600 .72rem/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; }
.rv-pack span { font-size: 1rem; color: #4a3336; }
.rv-pack:not(:disabled):hover { background: rgba(201,163,94,.18); }
.rv-pack:disabled { opacity: .4; cursor: default; }
.rv-pack.is-sel, .rv-pack.is-sel:hover { background: var(--burgundy); color: var(--brass-hi); border-color: var(--burgundy); }
.rv-pack.is-sel span { color: var(--cream); }
.rv-stepper { margin: 30px auto 0; display: flex; align-items: center; justify-content: center; gap: 28px; }
.rv-round { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--burgundy); color: var(--burgundy); }
.rv-round:hover:not(:disabled) { background: rgba(74,15,28,.07); }
.rv-round:disabled { opacity: .3; cursor: default; }
.rv-round .ico { width: 20px; height: 20px; }
.rv-count { min-width: 110px; text-align: center; font: 500 4rem/1 var(--f-display); color: var(--burgundy); }
.rv-count small { display: block; margin-top: 4px; font: 600 .6rem/1 var(--f-label); letter-spacing: .3em; text-transform: uppercase; color: var(--bronze-text); }
.rv-price { margin-top: 18px; text-align: center; font: 500 italic 1.35rem/1.3 var(--f-display); color: #4a3336; }
.rv-price b { font-style: normal; color: var(--burgundy); }
/* add-ons + agreement */
.rv-addons { margin-top: 22px; display: grid; gap: 8px; }
@media (min-width: 760px) { .rv-addons { grid-template-columns: 1fr 1fr; } }
.rv-check { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 14px 16px; background: #fff; border: 1px solid rgba(117,80,29,.3); cursor: pointer; color: #4a3336; font-size: 1rem; line-height: 1.4; }
.rv-check b { display: block; margin-bottom: 3px; font: 500 1.2rem/1.2 var(--f-display); color: var(--burgundy); }
.rv-check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--burgundy); }
.rv-check:has(input:checked) { border-color: var(--burgundy); box-shadow: inset 0 0 0 1px var(--burgundy); background: #fff9f0; }
.rv-policies { margin-top: 20px; counter-reset: p; border-top: 1px solid rgba(117,80,29,.3); }
.rv-policies li { counter-increment: p; display: grid; grid-template-columns: 40px 1fr; padding: 12px 0; border-bottom: 1px solid rgba(117,80,29,.3); color: #3d2a2c; font-size: 1.05rem; line-height: 1.45; }
.rv-policies li::before { content: counter(p, upper-roman); font: 500 1.15rem/1.3 var(--f-display); color: var(--bronze-text); }
.rv-agree { margin-top: 22px; }
#rvAgreeBox .err { display: block; margin-top: 6px; color: #8b1a2b; }
#rvGuestFields { margin-top: 30px; }
/* payment + confirmation */
.rv-folio-big { margin-top: 22px; }
.rv-total-line { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(117,80,29,.4); display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
font: 600 .66rem/1 var(--f-label); letter-spacing: .24em; text-transform: uppercase; color: var(--bronze-text); }
.rv-total-line b { font: 500 2.2rem/1 var(--f-display); letter-spacing: 0; color: var(--burgundy); }
.rv-paynote { margin-top: 22px; padding: 18px 20px; border-left: 2px solid var(--burgundy); background: rgba(74,15,28,.05); color: #3d2a2c; }
.rv-paynote b { font-weight: 500; color: var(--burgundy); }
.rv-done { text-align: center; }
.rv-done .rv-h { justify-content: center; margin-top: 10px; }
.rv-done .rv-sub { margin-inline: auto; }
.rv-done .rv-folio-rows, .rv-done .rv-total-line { text-align: left; max-width: 520px; margin-inline: auto; }
.rv-sleeve { width: min(230px, 64vw); margin: 0 auto 14px; transform: rotate(-3deg); filter: drop-shadow(0 22px 22px rgba(44,8,16,.35)); }
.js .rv-done:not([hidden]) .rv-sleeve { animation: sleeve-in 1s var(--ease-out) both; }
@keyframes sleeve-in { from { opacity: 0; transform: translateY(24px) rotate(-8deg); } to { opacity: 1; transform: rotate(-3deg); } }
.rv-fallback { margin: 22px auto 0; max-width: 520px; padding: 18px 20px; background: rgba(74,15,28,.06); border-left: 2px solid var(--burgundy); text-align: left; color: #3d2a2c; }
.rv-fallback .btn { margin-top: 14px; }
.rv-nav-done { justify-content: center; }
/* folio (summary) */
.rv-folio { background: linear-gradient(160deg, #5d1626, #3a0b15 70%); color: var(--cream); padding: 28px 26px 26px; position: relative; box-shadow: 0 30px 60px -30px rgba(44,8,16,.6); }
.rv-folio::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(201,163,94,.55); pointer-events: none; }
.rv-folio-card { width: 150px; margin: -58px 0 18px auto; transform: rotate(6deg); filter: drop-shadow(0 16px 16px rgba(0,0,0,.4)); }
.rv-folio-name { margin-top: 8px; font: 500 1.4rem/1.15 var(--f-display); }
.rv-folio-rows { display: grid; }
.rv-folio-rows div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(201,163,94,.28); }
.rv-folio-rows dt { font: 600 .56rem/1.9 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-hi); }
.rv-folio-rows dd { margin: 0; font-size: 1.02rem; line-height: 1.4; }
.rv-folio .rv-folio-rows { margin-top: 16px; }
.rv-folio .rv-total-line { color: var(--brass-hi); border-color: rgba(201,163,94,.5); }
.rv-folio .rv-total-line b { color: var(--cream); }
.rv-folio-note { margin-top: 14px; font-size: .95rem; color: var(--cream-dim); }
.rv-card .rv-folio-rows div { border-color: rgba(117,80,29,.25); }
.rv-card .rv-folio-rows dt { color: var(--bronze-text); }
.rv-card .rv-folio-rows dd { color: var(--text-ink); }
@media (max-width: 1023px) { .rv-folio-card { display: none; } .rv.is-done .rv-folio, .rv-sect.is-done .rv-folio { display: none; } }
#reserve.is-done .rv-folio { display: none; }
@media (min-width: 1024px) { #reserve.is-done .rv { grid-template-columns: 1fr; max-width: 820px; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) {
.hero-hanger, .swing-in.swing, .hanger-door:hover .policy-hanger { animation: none; }
}
@media print {
.masthead, .dock, .footer, .rv-lamps, .rv-nav, .rv-folio { display: none !important; }
body::after { display: none; }
}
.footer-lockup { color: var(--brass-hi); }
@media (max-width: 479px) { .mani-sign { white-space: normal; line-height: 1.7; } .mani-sign::before, .mani-sign::after { flex: none; } }
.footer-grid .f-col:first-child { display: block; }
@media (max-width: 719px) { .footer-grid .f-col:first-child { grid-column: auto; } }
.nw { white-space: nowrap; }
.rv-day { aspect-ratio: auto; height: clamp(44px, 11vw, 58px); }
/* =========================================================
HOME HERO: one block. Everything about .hero2 lives here (2026-09-29).
Phones and tablets (up to 1023px): always exactly one screen.
Desktop (1024px and up): text on the left, the arch photo on the right.
========================================================= */
/* ---- shared ---- */
.hero2 { padding-top: calc(var(--head-h) + 20px); display: flex; flex-direction: column; }
.hero2 .hero-sun { background: repeating-conic-gradient(from -90deg at 50% 62%, rgba(232,205,143,.11) 0deg .5deg, transparent .5deg 6deg);
-webkit-mask-image: radial-gradient(60% 45% at 50% 62%, #000 10%, transparent 72%); mask-image: radial-gradient(60% 45% at 50% 62%, #000 10%, transparent 72%); }
.hero2-grid { display: grid; grid-template-areas: "head" "act" "media"; row-gap: 28px; text-align: center; padding-bottom: 44px; }
.hero2-head { grid-area: head; }
.hero2-head .eyebrow { font-size: .64rem; letter-spacing: .3em; }
.hero2-title { margin-top: 14px; font: 500 clamp(3.2rem, 15vw, 4.6rem)/1.05 var(--f-display); letter-spacing: -.01em; text-wrap: balance; }
.hero2-title .ht-w { display: block; overflow: hidden; padding-bottom: .05em; }
.hero2-title .ht-w > span { display: inline-block; }
.hero2-title .gold { color: var(--brass-hi); }
.hero2-sub { margin: 14px auto 0; max-width: 32ch; font: 400 clamp(1.12rem, 1rem + .55vw, 1.42rem)/1.45 var(--f-body); color: rgba(242,230,208,.92); text-wrap: pretty; }
.hero2-act { grid-area: act; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hero2-price { font-size: clamp(1.02rem, .96rem + .3vw, 1.16rem); color: rgba(242,230,208,.9); }
.hero2-price b { font-weight: 500; color: #FFF3D6; }
.hero2-act .link-arrow { min-height: 44px; margin-top: -15px; color: var(--cream); }
.hero2-media { grid-area: media; position: relative; justify-self: center; width: min(78vw, 330px); padding: 14px 14px 0; margin-top: 6px; }
.hero2-media .arch { aspect-ratio: 4 / 5; }
.hero2-media .arch img { object-position: 40% 40%; }
.hero2-sill { position: relative; z-index: 1; height: 12px; margin: 14px -24px 0; background: var(--burgundy-deep);
border-top: 1px solid var(--brass); border-bottom: 1px solid rgba(201,163,94,.45); box-shadow: 0 16px 22px -12px rgba(0,0,0,.55); }
.hero2-sill::after { content: ""; position: absolute; left: 14px; right: 14px; top: 100%; height: 6px; border-bottom: 1px solid rgba(201,163,94,.35); }
/* the key tag hangs from a brass hook on the outer ring */
.hero2-hook { position: absolute; z-index: 4; left: -2px; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #FBE7B4, #C9A35E 45%, #6D4F1F 100%); box-shadow: 0 3px 6px rgba(0,0,0,.5); }
.hero2-key { position: absolute; z-index: 3; --w: clamp(58px, 20%, 76px); width: var(--w); left: calc(-2px - var(--w) * .484); top: calc(50% - var(--w) * .02);
transform-origin: 48% 3%; transform: rotate(-3deg); filter: drop-shadow(0 16px 14px rgba(0,0,0,.5)); }
@keyframes tag-settle { 0% { transform: rotate(-3deg); } 35% { transform: rotate(-9deg); } 70% { transform: rotate(0deg); } 100% { transform: rotate(-3deg); } }
/* the band under the hero */
.hero2-band { border-top: 1px solid rgba(201,163,94,.5); background: rgba(20,11,12,.5); padding: 18px 0 16px; text-align: center; }
.hero2-band p { font: 600 .66rem/2 var(--f-label); letter-spacing: .24em; text-transform: uppercase; color: var(--cream); }
.hero2-band b { display: block; font: 600 clamp(.95rem, .8rem + .5vw, 1.2rem)/1.4 var(--f-label); color: var(--brass-hi); letter-spacing: .2em; }
.hero2-band i { font-style: normal; color: var(--brass); margin: 0 .45em; }
@media (min-width: 640px) { .hero2-band p { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 34px; } }
/* ---- entrance: a short, staggered fade-and-rise (every part 600ms or less) ----
main.js adds .is-in once the fonts are ready (and after the first-visit loader).
Fail-safe: if that never happens, CSS shows everything after 3.5 seconds.
Reduced motion: the final state shows at once, with no animation. */
.js .hero2 :is(.eyebrow, .hero2-sub, .hero2-act) { opacity: 0; transform: translateY(12px); animation: hero2-show 0s linear 3.5s forwards; }
.js .hero2 .ht-w > span { transform: translateY(105%); animation: hero2-show 0s linear 3.5s forwards; }
.js .hero2 .arch img { transform: scale(1.06); animation: hero2-show 0s linear 3.5s forwards; }
/* two doors close the arch until the entrance runs. The photo itself stays fully painted underneath, so the browser counts it as the main image the moment it loads. */
.js .hero2 .arch::before, .js .hero2 .arch::after { content: ""; position: absolute; top: 0; bottom: 0; width: 50.5%; z-index: 2; background: var(--ink); animation: hero2-doors 0s linear 3.5s forwards; }
.js .hero2 .arch::before { left: 0; --open: -101%; border-right: 1px solid rgba(201,163,94,.45); }
.js .hero2 .arch::after { right: 0; --open: 101%; border-left: 1px solid rgba(201,163,94,.45); }
.js .hero2 :is(.hero2-hook, .hero2-key) { opacity: 0; animation: hero2-show 0s linear 3.5s forwards; }
.js .hero2.is-in :is(.eyebrow, .hero2-sub, .hero2-act) { opacity: 1; transform: none; animation: none; transition: opacity .5s var(--ease-out) var(--d, 0s), transform .5s var(--ease-out) var(--d, 0s); }
.js .hero2.is-in .ht-w > span { transform: none; animation: none; transition: transform .56s var(--ease-out) var(--d, 0s); }
.js .hero2.is-in .arch img { transform: none; animation: none; transition: transform .58s var(--ease-out) .12s; }
.js .hero2.is-in .arch::before { transform: translateX(-101%); animation: none; transition: transform .58s var(--ease-door) .12s; }
.js .hero2.is-in .arch::after { transform: translateX(101%); animation: none; transition: transform .58s var(--ease-door) .12s; }
.js .hero2.is-in :is(.hero2-hook, .hero2-key) { opacity: 1; animation: none; transition: opacity .4s ease-out .45s; }
.js .hero2.is-in .hero2-key { animation: tag-settle .58s var(--ease-out) .5s both; }
.js .hero2.is-in .eyebrow { --d: 0s; }
.js .hero2.is-in .ht-w:nth-child(1) > span { --d: .04s; }
.js .hero2.is-in .ht-w:nth-child(2) > span { --d: .11s; }
.js .hero2.is-in .ht-w:nth-child(3) > span { --d: .18s; }
.js .hero2.is-in .hero2-sub { --d: .26s; }
.js .hero2.is-in .hero2-act { --d: .34s; }
@keyframes hero2-show { to { opacity: 1; transform: none; } }
@keyframes hero2-doors { to { transform: translateX(var(--open)); } }
@media (prefers-reduced-motion: reduce) {
.js .hero2 :is(.eyebrow, .hero2-sub, .hero2-act, .hero2-hook, .hero2-key) { opacity: 1; animation: none; transition: none; }
.js .hero2 :is(.eyebrow, .hero2-sub, .hero2-act, .ht-w > span, .arch img) { transform: none; }
.js .hero2 .arch img { animation: none; transition: none; }
.js .hero2 .arch::before, .js .hero2 .arch::after { display: none; }
.js .hero2 .ht-w > span { animation: none; transition: none; }
.js .hero2.is-in .hero2-key { animation: none; }
}
/* ---- phones and tablets: exactly one screen; headline, photo (takes the height that is left), button ---- */
@media (max-width: 1023px) {
.hero2 { height: 100svh; min-height: 0; padding-top: calc(var(--head-h) + 2px); }
.hero2-grid { flex: 1; min-height: 0; grid-template-areas: "head" "act" "media"; grid-template-rows: auto auto minmax(0, 1fr);
row-gap: clamp(8px, 1.8svh, 18px); padding-bottom: clamp(10px, 1.8svh, 18px); }
.hero2-head .eyebrow { font-size: clamp(.6rem, 2.8vw, .68rem); letter-spacing: .18em; white-space: nowrap; }
.hero2-title { font-size: clamp(2.4rem, min(12.2vw, 6.6svh), 5.6rem); margin-top: clamp(6px, 1.2svh, 14px); }
.hero2-sub { font-size: min(4.3vw, 2.3svh); max-width: 30ch; margin-top: clamp(4px, .9svh, 10px); }
.hero2-media { width: auto; height: 100%; max-width: 88vw; aspect-ratio: 5 / 6; min-height: 0; margin: 0; padding: 12px 12px 0; }
.hero2-media .arch { height: calc(100% - 27px); aspect-ratio: auto; }
.hero2-key { --w: clamp(44px, 17%, 70px); }
.hero2-act { gap: clamp(6px, 1.1svh, 12px); }
.hero2-act .btn { width: min(100%, 340px); min-height: clamp(46px, 6.4svh, 56px); }
.hero2-act .link-arrow { margin-top: -10px; }
.hero2-band { padding: clamp(8px, 1.3svh, 14px) 0 calc(clamp(8px, 1.3svh, 14px) + env(safe-area-inset-bottom)); }
.hero2-band b { font-size: clamp(.78rem, 3.6vw, .95rem); }
.hero2-band p { font-size: clamp(.56rem, 2.5vw, .64rem); line-height: 1.8; letter-spacing: .16em; }
.hero2-band-list { display: block; text-wrap: balance; max-width: min(100%, 40em); margin-inline: auto; }
}
@media (max-width: 1023px) and (max-height: 700px) { .hero2-act .link-arrow { display: none; } }
/* newer browsers: the key tag scales with the photo, so it never hangs lower than the photo, even on short phones (older browsers keep the fixed size above) */
@supports (width: 1cqh) { @media (max-width: 1023px) {
.hero2-media { container-type: size; }
.hero2-key { --w: clamp(26px, min(21cqh, max(44px, (100cqw + 24px) * .17)), 70px); }
} }
@media (max-width: 359px) { .hero2-band-opt { display: none; } }
/* ---- desktop ---- */
@media (min-width: 1024px) {
.hero2 { min-height: 100svh; }
.hero2 .hero-sun { background: repeating-conic-gradient(from -90deg at 62% 58%, rgba(232,205,143,.11) 0deg .5deg, transparent .5deg 6deg);
-webkit-mask-image: radial-gradient(34% 52% at 62% 58%, #000 20%, transparent 75%); mask-image: radial-gradient(34% 52% at 62% 58%, #000 20%, transparent 75%); }
.hero2-grid { flex: 1; text-align: left; align-items: center; padding-block: 8px 28px; grid-template-columns: auto auto; justify-content: space-between; column-gap: clamp(64px, 5vw, 110px);
grid-template-areas: ". media" "head media" "act media" ". media"; grid-template-rows: 1fr auto auto 1fr; row-gap: 0; }
.hero2-head .eyebrow { font-size: .68rem; }
.hero2-title { font-size: clamp(3.6rem, min(7.4vw, 11.5svh), 6.9rem); margin-top: 20px; }
.hero2-title .ht-w { white-space: nowrap; }
.hero2-sub { margin: 18px 0 0; max-width: 30ch; }
.hero2-act { align-items: flex-start; margin-top: 36px; gap: 18px; }
.hero2-media { width: auto; height: min(calc(100svh - var(--head-h) - 180px), 780px); aspect-ratio: 5 / 6; padding: 14px 14px 0; margin: 0; }
.hero2-media .arch { height: calc(100% - 27px); aspect-ratio: auto; }
.hero2-key { --w: clamp(96px, 20%, 128px); }
}
/* laptop heights: the headline sets on two lines */
@media (min-width: 1024px) and (max-height: 960px) {
.hero2-title { font-size: clamp(3.6rem, min(5.6vw, 10.5svh), 5.9rem); }
.hero2-title .ht-w:nth-child(-n+2) { display: inline-block; }
}
@media (min-width: 1024px) and (max-height: 820px) {
.hero2 { padding-top: calc(var(--head-h) + 4px); }
.hero2-grid { padding-block: 4px 18px; }
.hero2-title { font-size: clamp(3.6rem, min(6.2vw, 11svh), 5.9rem); margin-top: 14px; }
.hero2-act { margin-top: 24px; gap: 14px; }
.hero2-media { height: calc(100svh - var(--head-h) - 118px); aspect-ratio: 9 / 10; }
}
/* the dial opens the directory: make that clearer */
.dial-labels text { opacity: .62; }
.lede, .tag{ text-wrap: balance; }
/* header: [Book Your Stay] [dial] on the right at every width; the dial is the menu */
.masthead .mast-right { gap: 22px; }
.masthead .dir-btn { display: none; }
@media (max-width: 1179px) {
.masthead .dial { position: relative; left: auto; top: auto; transform: none; width: 84px; margin-top: 4px; }
.masthead .dial:hover { transform: translateY(-1px); }
}
@media (max-width: 639px) { .masthead .dial { width: 72px; } }
.cap-sm { display: none; }
@media (max-width: 1179px) { .cap-lg { display: none; } .cap-sm { display: inline; } }
/* the dial says what it is */
.dial { position: relative; }
.dial-cap { display: block; margin-top: 3px; font: 600 .5rem/1 var(--f-label); letter-spacing: .32em; text-transform: uppercase; color: var(--brass-hi); text-align: center; padding-left: .32em; }
.dial:hover .dial-cap { color: var(--cream); }
/* =========================================================
v4: one frame for the header and every page, so the menu,
the hero text and the content all start on the same line.
========================================================= */
:root { --frame: 1240px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--frame)); }
.masthead { padding-inline: max(var(--gutter), calc((100% - var(--frame)) / 2)); }
@media (min-width: 1180px) { :root { --head-h: 96px; } .masthead .brand { padding-top: 12px; } }
/* =========================================================
HOME · Choose Your Suite (desktop): the photo stays in view,
the list is compact, and clear controls sit under the photo.
========================================================= */
.room-cap { display: none; }
@media (min-width: 1024px) {
.rooms { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(56px, 6vw, 110px); grid-template-rows: repeat(5, auto); align-items: stretch; }
.room-fig { grid-row: 1 / span 5; align-self: start; position: sticky; top: calc(var(--head-h) + 20px); padding: 16px 16px 0;
visibility: hidden; transition: clip-path .7s var(--ease-door), opacity .4s, visibility 0s linear .7s; }
.room.is-active .room-fig { visibility: visible; transition: clip-path .7s var(--ease-door), opacity .4s, visibility 0s; }
.rooms .arch-sm { height: min(620px, calc(100svh - var(--head-h) - 200px)); width: auto; aspect-ratio: 4 / 4.7; }
.room-cap { display: flex; align-items: center; gap: 22px; margin-top: 26px; }
.rc-count { font: 600 .7rem/1 var(--f-label); letter-spacing: .24em; color: var(--brass-hi); padding-top: 2px; }
.rc-count i { font-style: normal; opacity: .5; margin: 0 .2em; }
.room-cap .link-arrow { margin-right: auto; }
.rc-nav { display: flex; gap: 8px; }
.rc-btn { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(201,163,94,.6); color: var(--brass-hi); transition: background-color .3s, color .3s; }
.rc-btn:hover { background: var(--brass-hi); color: var(--burgundy-deep); }
.rc-btn .ico { width: 18px; height: 18px; }
.plaque { grid-template-columns: 110px 1fr 32px; padding: 20px 0; }
.room-no { font-size: 2.9rem; }
.room-tag { font-size: 1.2rem; }
.room.is-active .room-desc { max-height: 5em; }
}
@media (min-width: 1024px) { .room.is-active .room-fig { pointer-events: auto; } }
/* new logo (2026-09-27): the monogram is wider than tall */
.logo-mono, .dir-logo, .masthead .brand .logo-mono { height: auto; }
.footer-lockup { width: clamp(170px, 22vw, 240px); height: auto; }
/* booking: long values wrap, so the payment step never grows wider than the phone */
.rv, .rv-card, .rv-folio { min-width: 0; }
@media (max-width: 1023px) { .rv { grid-template-columns: minmax(0, 1fr); } }
.rv-folio-rows div { min-width: 0; }
.rv-folio-rows dd { min-width: 0; overflow-wrap: anywhere; }
.rv-nav .btn { white-space: normal; text-align: center; }
/* =========================================================
Booking within reach (2026-09-27)
========================================================= */
/* phone header: room between the Book button and the Floors dial */
@media (max-width: 1023px) { .masthead .mast-right { gap: 12px; } }
/* the bottom bar: one line */
.dock-text { white-space: nowrap; }
.dock-text b { font-weight: 600; color: var(--cream); }
@media (max-width: 400px) { .dock-text span { display: none; } }
/* /book: the title is short on phones so the form starts on the first screen */
@media (max-width: 1023px) {
body[data-page="book"] .page-hero { padding: calc(var(--head-h) + 22px) 0 26px; }
body[data-page="book"] .page-hero .fan, body[data-page="book"] .page-hero .crumb,
body[data-page="book"] .page-hero .actions { display: none; }
body[data-page="book"] .page-hero .lede { display: none; }
body[data-page="book"] .page-hero h1 { font-size: clamp(2.3rem, 10vw, 3rem); }
body[data-page="book"] .page-hero .tag { margin-top: 8px; font-size: 1.15rem; }
.rv-sect { padding-top: 22px; }
.rv-sect .sec-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rv-lamps { margin: 0 auto 16px; }
.rv-card { padding: 20px 16px 0; }
/* each step's Back / Continue stays on screen, with the running summary */
.rv-step:not([hidden]) .rv-nav { position: sticky; bottom: 0; z-index: 5; margin: 16px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
background: #fbf6ec; border-top: 1px solid rgba(117,80,29,.35); box-shadow: 0 -10px 24px -18px rgba(44,8,16,.5); }
}
.rv-nav { flex-wrap: wrap; row-gap: 8px; }
.rv-nav-sum { flex: 1 1 auto; min-width: 0; font: 500 1rem/1.3 var(--f-body); color: var(--burgundy); text-align: center; }
.rv-nav-sum:empty { visibility: hidden; }
@media (min-width: 1024px) { .rv-nav-sum { display: none; } }
@media (max-width: 1023px) {
.rv-step:not([hidden]) .rv-nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; flex-wrap: nowrap; }
.rv-nav .rv-back { padding-inline: 2px; }
.rv-nav-sum { font-size: .9rem; line-height: 1.25; text-wrap: balance; }
.rv-nav .btn { min-height: 48px; padding-inline: 16px; font-size: .68rem; letter-spacing: .16em; }
}
/* header links: larger and higher contrast */
.main-nav a { font-size: .76rem; color: rgba(242,230,208,.92); }
/* =========================================================
Manifesto, round 3 (2026-09-27): minimal. Original size.
Concrete words, and a signed line that writes itself in.
========================================================= */
.mani-body { max-width: 42ch; font-size: clamp(1.14rem, 1rem + .45vw, 1.3rem); line-height: 1.55; color: #2f1c1e; }
.mani-sign { display: block; margin-top: clamp(22px, 3vw, 30px); font: 400 clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem)/1.15 "Ms Madi", cursive;
letter-spacing: 0; text-transform: none; color: var(--burgundy); white-space: normal; }
.mani-sign::before, .mani-sign::after { content: none; }
/* the handwriting reveal: the line draws left to right */
.mani-ink { display: inline-block; }
.js .mani-sign[data-reveal] { opacity: 1; transform: none; }
.js .mani-sign[data-reveal] .mani-ink { clip-path: inset(-25% 100% -25% 0); }
.js .mani-sign[data-reveal].is-in .mani-ink { clip-path: inset(-25% -2% -25% 0); transition: clip-path 1.8s cubic-bezier(.45,.05,.3,1) .35s; }
@media (max-width: 479px) { .mani-sign { white-space: normal; line-height: 1.15; } }
.manifesto .mani-title { margin-top: 0; }
/* =========================================================
Manifesto, round 4: the doors open onto a suite.
Photo left, words right. Two lacquered doors part when the section scrolls in.
========================================================= */
.manifesto { padding: clamp(56px, 7vw, 92px) 0; text-align: left; }
.mani-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(40px, 6vw, 96px); max-width: 1120px; }
.mani-door { position: relative; margin: 0; aspect-ratio: 4 / 5; max-height: 470px; overflow: hidden; background: #2C0810;
box-shadow: 0 0 0 1px rgba(139,106,47,.45), 0 0 0 7px var(--cream), 0 0 0 8px rgba(139,106,47,.35); }
.mani-door img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; display: block; }
.js .mani-door img { transform: scale(1.1); transition: transform 2.4s var(--ease-out) .25s; }
.js .mani-door.is-open img { transform: scale(1); }
/* the doors: burgundy lacquer, a raised panel line, a brass knob at the seam */
.mdoor { position: absolute; top: 0; bottom: 0; width: 50.2%; display: none;
background: radial-gradient(120% 80% at var(--ox) 50%, #5c1424, #4A0F1C 45%, #2C0810);
box-shadow: inset 0 0 0 14px transparent, inset 0 0 0 15px rgba(232,205,143,.35); }
.mdoor::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #FFF1C8, #C9A35E 55%, #7a5a24); box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.mdoor-l { left: 0; --ox: 100%; } .mdoor-l::after { right: 24px; }
.mdoor-r { right: 0; --ox: 0%; } .mdoor-r::after { left: 24px; }
.js .mdoor { display: block; transition: transform 1.25s cubic-bezier(.72,0,.18,1) .15s; }
.js .mani-door.is-open .mdoor-l { transform: translateX(-101%); }
.js .mani-door.is-open .mdoor-r { transform: translateX(101%); }
.mani-copy .mani-title { margin: 0; }
.mani-copy .mani-body { margin: 24px 0 0; max-width: 36ch; }
.mani-copy .mani-sign { margin-top: clamp(20px, 2.6vw, 28px); }
@media (max-width: 899px) {
.manifesto { padding: 48px 0 52px; text-align: center; }
.mani-grid { grid-template-columns: 1fr; gap: 26px; }
.mani-door { aspect-ratio: auto; height: clamp(150px, 24svh, 220px); max-height: none; }
.mani-copy .mani-body { margin-inline: auto; }
.mdoor::after { width: 7px; height: 7px; margin-top: -3.5px; }
.mdoor { box-shadow: inset 0 0 0 9px transparent, inset 0 0 0 10px rgba(232,205,143,.35); }
.mdoor-l::after { right: 16px; } .mdoor-r::after { left: 16px; }
}
@media (min-width: 900px) { .mani-copy .mani-title { font-size: clamp(2.6rem, 4.3vw, 4.1rem); } }
@media (max-width: 899px) { .mani-copy .mani-title { font-size: clamp(2rem, 8.6vw, 2.6rem); } }
/* =========================================================
Home, round 5 (2026-09-27): every section to a 9.
========================================================= */
/* --- suites: a swipe row on phones and tablets (one screen, not five) --- */
.rooms-hint { display: none; }
@media (max-width: 1023px) {
.suites { padding: 72px 0 80px; }
.suites .sec-lede { margin-top: 14px; }
.rooms { display: flex; gap: 14px; margin: 36px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 4px;
overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.rooms::-webkit-scrollbar { display: none; }
.room { flex: 0 0 min(80%, 360px); scroll-snap-align: start; }
.room-fig { padding: 10px 10px 0; }
.rooms .arch-sm { aspect-ratio: 4 / 4.4; }
.plaque { margin-top: 18px; }
.room-no { font-size: 2.3rem; }
.room-name { margin-top: 8px; }
.room-btn { font-size: .86rem; letter-spacing: .2em; cursor: default; }
.room-tag { font-size: 1.18rem; margin-top: 6px; }
.room-desc { font-size: 1rem; line-height: 1.45; }
.rooms-hint { display: flex; align-items: center; gap: 12px; margin-top: 22px;
font: 600 .62rem/1 var(--f-label); letter-spacing: .28em; text-transform: uppercase; color: rgba(232,205,143,.75); }
.rooms-hint i { width: 40px; height: 1px; background: currentColor; position: relative; }
.rooms-hint i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border: solid currentColor; border-width: 1px 1px 0 0; transform: rotate(45deg); }
.suites .sec-actions { margin-top: 30px; }
}
/* --- uses: one headline, the audience in the lede; a swipe row on phones --- */
.uses-title em { font-style: italic; color: var(--bronze-text); }
@media (min-width: 1024px) {
.sec-head-split .uses-title { grid-row: 1; align-self: end; }
.sec-head-split .sec-lede { grid-row: 1; align-self: end; margin: 0 0 12px; max-width: 30ch; }
}
.uses .sec-actions { display: flex; flex-wrap: wrap; gap: 14px 34px; }
@media (max-width: 1023px) {
.uses { padding: 72px 0 76px; }
.uses-title { margin-top: 0; font-size: clamp(2.3rem, 10vw, 3.4rem); }
.uses .sec-lede { margin-top: 16px; }
.use-grid { display: flex; gap: 14px; margin: 34px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 4px;
overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.use-grid::-webkit-scrollbar { display: none; }
.use { flex: 0 0 min(64%, 280px); scroll-snap-align: start; }
.use-frame, .use-podcast .use-frame { aspect-ratio: 3 / 4; }
.use-podcast .use-frame img { object-position: 45% 50%; }
.use-name { font-size: 1.8rem; }
.uses .sec-actions { margin-top: 30px; }
}
/* --- book: no stepped edge; a two-line title; a hotel rate card --- */
.book .pediment { display: none; }
.book .sec-title { max-width: none; font-size: clamp(2.2rem, 8.4vw, 3.6rem); line-height: 1.08; }
.book .sec-title em { display: inline-block; white-space: nowrap; }
.book-card-col { align-items: stretch; }
.rate-card { position: relative; width: min(440px, 100%); margin: 0 auto; padding: clamp(34px, 4vw, 44px) clamp(22px, 3.4vw, 40px) clamp(30px, 3.4vw, 38px); text-align: center;
background: linear-gradient(170deg, rgba(44,8,16,.92), rgba(30,5,9,.96)); border: 1px solid rgba(201,163,94,.75);
box-shadow: inset 0 0 0 6px rgba(30,5,9,.0), inset 0 0 0 7px rgba(201,163,94,.35), 0 40px 70px -40px rgba(0,0,0,.7); }
.rate-head { font: 600 .7rem/1 var(--f-label); letter-spacing: .38em; text-transform: uppercase; color: var(--brass-hi); padding-left: .38em; }
.rates { margin: 26px 0 30px; text-align: left; }
.rates li { display: flex; align-items: baseline; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(201,163,94,.18); }
.rates li:first-child { border-top: 1px solid rgba(201,163,94,.18); }
.r-name { font: 500 1.35rem/1.2 var(--f-display); color: var(--cream); white-space: nowrap; }
.r-name small { display: block; margin-top: 4px; font: 600 .58rem/1 var(--f-label); letter-spacing: .24em; text-transform: uppercase; color: rgba(232,205,143,.7); }
.rates i { flex: 1; align-self: center; height: 0; border-bottom: 1px dotted rgba(201,163,94,.45); transform: translateY(-6px); }
.rates b { font: 500 1.9rem/1 var(--f-display); color: var(--brass-hi); font-variant-numeric: lining-nums; }
.rate-card .btn { width: 100%; }
.rate-note { margin-top: 14px; font-size: 1rem; color: var(--cream-dim); }
@media (max-width: 1023px) {
.book { padding: 72px 0 80px; }
.steps { margin-top: 32px; }
.steps li { padding: 18px 0; }
.book-card-col { margin-top: 44px; }
}
/* --- first look: real footage, graded to sit with the palette; no checker band --- */
.first-look { padding-bottom: clamp(80px, 9vw, 140px); }
.lift-frame { aspect-ratio: 576 / 900; }
.lift-frame video { object-position: 50% 78%; filter: saturate(.8) contrast(1.06) brightness(.92) sepia(.1); }
.lift-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 90% 70% at 50% 58%, transparent 55%, rgba(12,6,7,.55)), linear-gradient(transparent 70%, rgba(12,6,7,.35)); }
@media (max-width: 1023px) {
.first-look { padding-top: 72px; }
.lift { margin-top: 40px; width: min(260px, 70vw); }
.lift-indicator { width: 96px; margin-bottom: 22px; }
}
@media (min-width: 1024px) { .suites .sec-title { white-space: nowrap; } }
.footer-sign { line-height: 2; }
@media (max-width: 719px) {
.uses .sec-actions { flex-direction: column; align-items: flex-start; gap: 18px; }
.f-nav { columns: 2; column-gap: 20px; }
.f-nav li { break-inside: avoid; }
}
/* =========================================================
Production pass (2026-09-27): whole site.
========================================================= */
/* "ideal for" lists: a quiet line of words with gold dots, not a wall of boxes */
.dots { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 16px; max-width: 46em; }
.dots li { padding: 0; border: 0; font: 600 .66rem/2 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--brass-hi); white-space: nowrap; }
.dots li:not(:last-child)::after { content: "•"; margin: 0 .85em; color: var(--brass); letter-spacing: 0; }
.on-light .dots li { border: 0; color: var(--bronze-text); }
.on-light .dots li:not(:last-child)::after { color: var(--brass-lo); }
/* footer: one button, one quiet link */
.footer-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 34px; }
.footer-acts .link-arrow { color: var(--cream); }
.opt { color: var(--bronze-text); opacity: 1; }
.on-ink .opt, .contact-card .opt { color: #6b4a1c; }
.use-grid:focus-visible { outline: 2px solid var(--brass-lo); outline-offset: 6px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* =========================================================
BUTTONS: one system (2026-09-29). Every button and CTA on the site comes from here.
Primary .btn-cream lacquer + gold, for dark sections
.btn-burg burgundy + gold, for light sections
Secondary .btn-ghost outline, quieter than the primary
Tertiary .link-arrow text link (base.css)
Sizes default 54px, .btn-lg 60px, .btn-sm 44px (nothing is under 44px)
States hover, pressed, focus-visible, disabled, loading (.is-loading, set by main.js setBusy)
========================================================= */
.btn {
--b-bg: #1E0509; --b-fg: #F0D595; --b-line: #C9A35E; --b-in: rgba(201,163,94,.55); --b-hl: rgba(255,240,200,.14);
--b-hi-bg: #C9A35E; --b-hi-fg: #1E0509; --b-hi-in: rgba(30,5,9,.5); --b-act-bg: #B18E4B; --b-ring: #F0D08A;
position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
min-height: 54px; padding: 3px 32px 0; border: 1px solid var(--b-line); border-radius: 0;
background: var(--b-bg); color: var(--b-fg);
font: 600 .78rem/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
box-shadow: inset 0 1px 0 var(--b-hl), inset 0 0 0 4px var(--b-bg), inset 0 0 0 5px var(--b-in);
cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
transition: background-color .18s ease-out, color .18s ease-out, border-color .18s ease-out, box-shadow .18s ease-out, transform .18s ease-out, opacity .35s var(--ease-out), visibility .35s;
}
.btn-burg { --b-bg: #4A0F1C; --b-fg: #F6E3B0; --b-hi-bg: #2C0810; --b-hi-fg: #FFF0C8; --b-hi-in: rgba(201,163,94,.85); --b-act-bg: #1E0509; --b-ring: #4A0F1C; }
.btn-ghost { --b-bg: transparent; --b-fg: #F2E6D0; --b-line: rgba(201,163,94,.75); --b-hl: transparent; --b-hi-bg: rgba(201,163,94,.16); --b-hi-fg: #FFF3D2; --b-act-bg: rgba(201,163,94,.28); }
.btn-ghost, .btn-ghost:hover, .btn-ghost:active { box-shadow: none; }
.on-light .btn-ghost { --b-fg: #4A0F1C; --b-line: #4A0F1C; --b-hi-bg: rgba(74,15,28,.08); --b-hi-fg: #2C0810; --b-act-bg: rgba(74,15,28,.16); --b-ring: #4A0F1C; }
/* sizes */
.btn-lg { min-height: 60px; padding-inline: 40px; font-size: .82rem; }
.btn-sm { min-height: 44px; padding-inline: 22px; gap: 10px; font-size: .7rem; letter-spacing: .22em; }
.btn-wide { width: 100%; }
/* the fine arrow on full-size buttons */
.btn:not(.btn-sm)::after { content: ""; flex: none; width: 24px; height: 9px; background-color: currentColor; transition: transform .18s ease-out;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 9'%3E%3Cpath d='M0 4.5H23M19 .8 23 4.5 19 8.2' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 9'%3E%3Cpath d='M0 4.5H23M19 .8 23 4.5 19 8.2' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat; }
.btn > .ico { display: none; }
/* hover: only on devices that can hover */
@media (hover: hover) {
.btn:hover { background: var(--b-hi-bg); color: var(--b-hi-fg); transform: translateY(-1px);
box-shadow: inset 0 1px 0 var(--b-hl), inset 0 0 0 4px var(--b-hi-bg), inset 0 0 0 5px var(--b-hi-in); }
.btn:not(.btn-sm):hover::after { transform: translateX(3px); }
}
/* pressed */
.btn:active { background: var(--b-act-bg); color: var(--b-hi-fg); transform: translateY(0) scale(.985); transition-duration: .06s;
box-shadow: inset 0 0 0 4px var(--b-act-bg), inset 0 0 0 5px var(--b-hi-in); }
.btn-ghost:active { box-shadow: none; }
/* keyboard focus: a 2px ring with an offset, in a colour that shows on the surface the variant sits on */
.btn:focus-visible { outline: 2px solid var(--b-ring); outline-offset: 3px; }
.on-light .btn:focus-visible, .on-light .link-arrow:focus-visible { outline-color: #4A0F1C; }
.link-arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
/* disabled */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; transform: none; }
/* loading: a spinner replaces the label, the button keeps its width, and it cannot be pressed twice */
.btn.is-loading, .btn.is-loading:disabled { color: transparent; opacity: 1; cursor: progress; pointer-events: none; transform: none; }
.btn.is-loading::after { opacity: 0; }
.btn.is-loading::before { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
border: 2px solid var(--b-fg); border-right-color: transparent; border-radius: 50%; animation: btn-spin .7s linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active { transform: none; } .btn:not(.btn-sm):hover::after { transform: none; } }
/* text link: same hover rule, and no hover effect on touch screens */
@media (hover: none) { .link-arrow:hover svg { transform: none; } }
/* the header button: "Book" on phones, "Book Your Stay" on wide screens; it waits while the hero's own button is on screen */
.mast-more { display: none; }
@media (min-width: 1024px) { .mast-more { display: inline; } }
.masthead.cta-wait .mast-cta { opacity: 0; visibility: hidden; pointer-events: none; }
/* the play button is a small secondary button with its own icons */
.play-btn { margin-top: 34px; gap: 12px; padding-left: 16px; }
.play-btn svg { width: 18px; height: 18px; color: var(--brass-hi); margin-top: -3px; }
.play-btn .ico-pause { display: none; }
.play-btn[aria-pressed="true"] .ico-pause { display: block; }
.play-btn[aria-pressed="true"] .ico-play { display: none; }
/* icon-only controls (previous / next, stepper, close): 44px targets, same states */
.rc-btn, .rv-arrow, .rv-round, .dir-close, .dir-btn { min-width: 44px; min-height: 44px; cursor: pointer; touch-action: manipulation; }
.rc-btn:active, .rv-arrow:active, .rv-round:active, .dir-close:active { transform: scale(.94); }
.on-light .rc-btn:focus-visible, .on-light .rv-arrow:focus-visible, .on-light .rv-round:focus-visible { outline-color: #4A0F1C; }
@media (prefers-reduced-motion: reduce) { .rc-btn:active, .rv-arrow:active, .rv-round:active, .dir-close:active { transform: none; } }
/* small screens: tighter tracking so no label wraps or overflows */
@media (max-width: 480px) {
.btn { padding-inline: 22px; letter-spacing: .16em; }
.btn-lg { padding-inline: 26px; }
.btn:not(.btn-sm) { gap: 10px; }
.btn:not(.btn-sm)::after { width: 20px; }
}
/* 44px targets that keep the look */
.brand { min-width: 44px; }
.room-btn { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 1024px) { .room-btn { min-height: 0; } } /* on wide screens the whole plaque is the target (room-btn::after) */
@media (max-width: 480px) {
.rv-week, .rv-cal { margin-inline: -10px; gap: 2px; } /* the calendar bleeds a little so each day is 44px wide on a phone */
}
@media (max-width: 480px) { .rv-long { display: none; } }
.main-nav a { padding-inline: 7px; margin-inline: -7px; background-size: calc(100% - 14px) 1px; background-position: 7px calc(50% + 12px); }
.f-nav li a { min-width: 44px; }
/* every keyboard focus ring on a light section is burgundy, so it shows on cream */
.on-light :focus-visible { outline-color: #4A0F1C; }
/* the hero photo sits in a : it must not add a box between the arch and the image */
.hero2-media .arch picture { display: contents; }
/* without JavaScript the