/* ============================================================
   AB Boutique Hotel — brand system
   Sampled from the house monogram: gold #C08A17 / #E8BE5E / #8A6210
   on true black (#000000). The dark scale below is therefore neutral —
   no hue is added to the grey, so the gold stays the only colour on it.
   ============================================================ */

:root{
  /* --- grounds --- */
  --ink:      #121212;   /* neutral near-black — the logo ground */
  --ink-2:    #1B1B1B;   /* raised surface on dark */
  --ink-3:    #2E2E2E;   /* hairline on dark */
  --pearl:    #EFEDE7;   /* the villa stucco, cooled */
  --pearl-2:  #E5E1D8;   /* quiet fill on light */
  --sand:     #C7BEAC;   /* rules + muted type on light */

  /* --- the metal --- */
  --gold:     #C08A17;
  --gold-lt:  #E8BE5E;
  --gold-dp:  #8A6210;
  --foil: linear-gradient(152deg,#E8BE5E 0%,#C08A17 34%,#8A6210 58%,#D9A93C 82%,#F0D289 100%);

  /* --- the one non-brand colour: form errors, and nothing else --- */
  --warn:     #9E3B22;   /* on pearl */
  --warn-lt:  #E08A6E;   /* on ink */

  /* --- type --- */
  --display: "Italiana", "Didot", "Bodoni MT", Georgia, serif;
  --body: "Jost", "Futura", "Century Gothic", system-ui, -apple-system, sans-serif;

  --step--1: clamp(.8125rem, .78rem + .16vw, .875rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.0625rem);
  --step-1:  clamp(1.125rem, 1.05rem + .36vw, 1.3125rem);
  --step-2:  clamp(1.5rem, 1.3rem + .95vw, 2.125rem);
  --step-3:  clamp(2rem, 1.6rem + 1.9vw, 3.25rem);
  --step-4:  clamp(2.5rem, 1.7rem + 3.7vw, 5.25rem);

  /* --- measure --- */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1360px;
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--pearl);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  font-size:var(--step-0);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

/* ---------- focus: a gold ring, always visible ---------- */
:focus-visible{
  outline:2px solid var(--gold-lt);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--ink);
  padding:.75rem 1.25rem; font-size:var(--step--1);
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
}
.skip:focus{ left:.5rem; top:.5rem; }

/* ============================================================
   TYPE
   ============================================================ */
h1,h2,h3,h4{ font-family:var(--display); font-weight:400; margin:0; line-height:1.08; letter-spacing:.005em; }
h1{ font-size:var(--step-4); }
h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-2); }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.eyebrow{
  display:flex; align-items:center; gap:.85rem;
  font-family:var(--body); font-weight:500;
  font-size:.6875rem; letter-spacing:.24em; text-transform:uppercase;
  line-height:1; margin:0 0 1.6rem; color:var(--gold-dp);
}
.eyebrow::before{
  content:""; width:2.25rem; height:1px; background:currentColor; flex:none; opacity:.7;
}
.lede{ font-size:var(--step-1); line-height:1.62; font-weight:300; }
.muted{ color:#5E5C58; }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow{ max-width:760px; }
.section{ padding-block:var(--section-y); position:relative; }

/* grounds — same specificity as .section, declared after it */
.on-ink{ background:var(--ink); color:var(--pearl); }
.on-ink .muted{ color:#9B9B9B; }
.on-ink .eyebrow{ color:var(--gold-lt); }
.on-pearl-2{ background:var(--pearl-2); }

.rule{ height:1px; border:0; margin:0;
  background:linear-gradient(90deg,transparent,var(--sand) 18%,var(--sand) 82%,transparent); }
.on-ink .rule{ background:linear-gradient(90deg,transparent,var(--ink-3) 18%,var(--ink-3) 82%,transparent); }
.rule-gold{ height:1px; border:0; margin:0;
  background:linear-gradient(90deg,transparent,var(--gold) 50%,transparent); opacity:.55; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--body); font-weight:500;
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  padding:1.05rem 2rem; border:1px solid transparent; border-radius:1px;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .4s var(--ease), color .4s var(--ease),
             border-color .4s var(--ease), transform .4s var(--ease), filter .4s var(--ease);
}
.btn-gold{ background-image:var(--foil); color:var(--ink); border-color:transparent; }
.btn-gold:hover{ filter:brightness(1.1); transform:translateY(-2px); }
.btn-ghost{ border-color:var(--gold); color:var(--gold-dp); background:transparent; }
.btn-ghost:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.on-ink .btn-ghost{ color:var(--gold-lt); border-color:rgba(232,190,94,.5); }
.on-ink .btn-ghost:hover{ background:var(--gold-lt); color:var(--ink); border-color:var(--gold-lt); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.75rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; color:var(--gold-dp);
  padding-bottom:.35rem; border-bottom:1px solid rgba(192,138,23,.35);
  transition:border-color .35s var(--ease), gap .35s var(--ease);
}
.link-arrow:hover{ border-color:var(--gold); gap:1rem; }
.link-arrow::after{ content:"\2192"; font-size:1rem; letter-spacing:0; }
.on-ink .link-arrow{ color:var(--gold-lt); border-bottom-color:rgba(232,190,94,.32); }
.on-ink .link-arrow:hover{ border-bottom-color:var(--gold-lt); }

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background-color .45s var(--ease), box-shadow .45s var(--ease), padding .45s var(--ease);
  padding-block:1.15rem;
}
.hdr-in{ display:flex; align-items:center; gap:2rem; position:relative; z-index:1; }
/* the blur lives on a pseudo-element: backdrop-filter on .hdr itself would make it
   the containing block for the fixed-position mobile nav inside it */
.hdr::before{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:rgba(18,18,18,.94); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 rgba(232,190,94,.16);
  transition:opacity .45s var(--ease);
}
.hdr.is-stuck{ padding-block:.7rem; }
.hdr.is-stuck::before{ opacity:1; }

.brand{ display:flex; align-items:center; gap:.8rem; text-decoration:none; margin-right:auto; flex:none; }
.brand img{ width:38px; height:auto; }
.brand-txt{ display:flex; flex-direction:column; gap:.22rem; line-height:1; }
.brand-txt b{ font-family:var(--display); font-weight:400; font-size:1.0625rem; letter-spacing:.14em; color:var(--pearl); }
.brand-txt span{ font-size:.5625rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-lt); font-weight:400; }

.nav{ display:flex; align-items:center; gap:2.1rem; }
.nav a{
  font-size:.6875rem; letter-spacing:.19em; text-transform:uppercase; font-weight:400;
  text-decoration:none; color:var(--pearl); padding:.4rem 0; position:relative; opacity:.88;
  transition:opacity .3s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold-lt); transition:right .45s var(--ease);
}
.nav a:hover{ opacity:1; }
.nav a:hover::after,.nav a[aria-current="page"]::after{ right:0; }

.hdr .btn{ padding:.85rem 1.5rem; font-size:.6875rem; }

.burger{
  display:none; background:none; border:0; padding:.6rem; cursor:pointer; margin-left:auto;
  min-width:48px; min-height:48px; flex-direction:column; align-items:center; justify-content:center;
}
.burger span{ display:block; width:24px; height:1px; background:var(--pearl); margin:6px 0;
  transition:transform .4s var(--ease), opacity .3s var(--ease),
             background-color .3s var(--ease), height .3s var(--ease); }
/* Open, the button is the only way out of a full-screen panel, so it stops being
   a hamburger and reads as a close: gold, and thick enough to see against ink. */
.burger[aria-expanded="true"] span{ background:var(--gold-lt); height:2px; }
/* The two strokes have to land on the middle bar to read as a cross, so the
   shift is the centre-to-centre distance between bars: height + the two 6px
   margins = 14px. Anything less leaves two parallel diagonals. */
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(14px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-14px) rotate(-45deg); }

@media (max-width:1080px){
  .burger{ display:flex; }
  .nav{
    position:fixed; inset:0; background:var(--ink);
    flex-direction:column; justify-content:center; gap:1.5rem;
    transform:translateY(-100%); transition:transform .55s var(--ease);
    padding:5rem var(--gutter) 3rem;
  }
  .nav.is-open{ transform:translateY(0); }
  .nav a{ font-size:1rem; letter-spacing:.24em; }
  .hdr-in>.btn{ display:none; }
  .nav .btn{ display:inline-flex; margin-top:1rem; }
  /* The open panel is a fixed, full-viewport child of the header, so the close
     button and the wordmark have to be lifted over it explicitly — relying on
     paint order alone leaves the only exit sitting under the panel. */
  .brand, .burger{ position:relative; z-index:2; }
}
@media (min-width:1081px){ .nav .btn{ display:none; } }

/* ============================================================
   HERO — the thesis: eleven rooms, and the sea across the road
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  color:var(--pearl); overflow:hidden; }
.hero-bg{ position:absolute; inset:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 58%; }
/* the type sits on the left, so the scrim is weighted left — the sea stays bright */
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(94deg,rgba(18,18,18,.88) 0%,rgba(18,18,18,.66) 30%,rgba(18,18,18,.22) 56%,rgba(18,18,18,0) 78%),
    linear-gradient(180deg,rgba(18,18,18,.55) 0%,rgba(18,18,18,.05) 26%,rgba(18,18,18,.3) 62%,rgba(18,18,18,.92) 100%);
}
/* Narrow screens keep both layers and the same 94deg angle as the desktop hero,
   so the scrim still reads as heavy at the left where every line begins and
   lifting towards the right. Only the horizontal ramp differs: on desktop it can
   fall to zero by 78% because the type stops around a third of the way across,
   whereas here the lines run most of the width, so it lands at .46 instead. The
   vertical layer is flatter than desktop's through the middle because the type
   sits higher up the frame when the headline wraps to four or five lines.
   The 22% stop is tied to the booking bar's height: the bar is what pushes the
   type up the frame, so if its rows change, re-check the eyebrow contrast. */
@media (max-width:860px){
  .hero-bg::after{
    background:
      linear-gradient(94deg,rgba(18,18,18,.92) 0%,rgba(18,18,18,.82) 28%,rgba(18,18,18,.60) 56%,rgba(18,18,18,.42) 80%,rgba(18,18,18,.34) 100%),
      linear-gradient(180deg,rgba(18,18,18,.62) 0%,rgba(18,18,18,.52) 22%,rgba(18,18,18,.10) 44%,rgba(18,18,18,.12) 64%,rgba(18,18,18,.54) 84%,rgba(18,18,18,.92) 100%);
  }
}
.hero-in{ position:relative; z-index:2; padding-block:8.5rem 2.5rem; }
.hero-eyebrow{
  font-size:.6875rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-lt);
  margin:0 0 1.5rem; font-weight:400;
}
.hero h1{ max-width:19ch; margin:0 0 1.7rem; text-wrap:balance; }
.hero h1 em{ font-style:normal; color:var(--gold-lt); }
.hero-sub{ font-size:var(--step-0); letter-spacing:.02em; color:rgba(239,237,231,.88); max-width:42ch; margin:0; }

/* ---------- booking bar ---------- */
.booking{ position:relative; z-index:3; background:rgba(18,18,18,.88); backdrop-filter:blur(16px);
  border-top:1px solid rgba(232,190,94,.22); }
.booking-in{ display:grid; grid-template-columns:repeat(3,1fr) auto; gap:0; align-items:stretch; }
.bk-field{ display:flex; flex-direction:column; gap:.4rem; padding:1.15rem 1.5rem;
  border-left:1px solid rgba(239,237,231,.1); }
.bk-field:first-child{ border-left:0; }
.bk-field label{ font-size:.5625rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-lt); font-weight:500; }
.bk-field input,.bk-field select{
  background:transparent; border:0; color:var(--pearl); font-family:var(--body);
  font-size:.9375rem; font-weight:300; padding:0; width:100%; cursor:pointer;
  color-scheme:dark;
}
.bk-field select option{ background:var(--ink); color:var(--pearl); }
.bk-field input::-webkit-calendar-picker-indicator{ filter:invert(1); opacity:.5; cursor:pointer; }
.booking .btn{ border-radius:0; padding-inline:2.6rem; }
@media (max-width:860px){
  /* Stacked, the button sits on a row of its own and would otherwise come out
     26px shorter than the date rows. Equal auto rows make it match whatever the
     fields measure, rather than pinning it to a height that goes stale the
     moment the label or input metrics change. */
  .booking-in{ grid-template-columns:1fr 1fr; grid-auto-rows:1fr; }
  .bk-field:nth-child(3){ grid-column:1/-1; border-left:0; border-top:1px solid rgba(239,237,231,.1); }
  .booking .btn{ grid-column:1/-1; }
}

/* ============================================================
   FACT ROW
   ============================================================ */
.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--sand); margin-top:3.5rem; }
.fact{ background:var(--pearl); padding:2rem 1.75rem; }
.on-ink .facts{ background:var(--ink-3); }
.on-ink .fact{ background:var(--ink); }
.fact b{ display:block; font-family:var(--display); font-weight:400; font-size:var(--step-2); margin-bottom:.35rem; }
.fact span{ font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:#5E5C58; }
.on-ink .fact span{ color:#9B9B9B; }
@media (max-width:720px){ .facts{ grid-template-columns:1fr; } }

/* ============================================================
   POLICY NOTE — the adults-only rule, and its one exception.
   Stamped in ink so it reads as a notice, not as body copy.
   ============================================================ */
.policy{
  display:flex; align-items:center; gap:clamp(1.25rem,3vw,2.25rem);
  background:var(--ink); color:var(--pearl);
  padding:clamp(1.5rem,3vw,2rem) clamp(1.5rem,3vw,2.25rem);
  border-top:1px solid var(--gold);
}
.policy-num{
  font-family:var(--display); font-size:clamp(2.25rem,4.5vw,3.25rem); line-height:.9;
  color:var(--gold-lt); flex:none;
}
.policy p{ margin:0; font-size:var(--step--1); line-height:1.75; color:#9B9B9B; max-width:74ch; }
.policy b{ color:var(--pearl); font-weight:400; }
.policy .yes{ color:var(--gold-lt); font-weight:400; }
@media (max-width:640px){
  .policy{ flex-direction:column; align-items:flex-start; gap:.6rem; }
}

/* ============================================================
   SPLIT (text + image)
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.split-wide{ grid-template-columns:.85fr 1.15fr; }
.split figure{ margin:0; }
.split figcaption{ font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:#5E5C58; margin-top:.9rem; }
.on-ink .split figcaption{ color:#9B9B9B; }
@media (max-width:860px){ .split,.split-wide{ grid-template-columns:1fr; } }

/* ============================================================
   ★ SIGNATURE — THE KEY BOARD
   Eleven brass tags on a rail, as they hang behind reception.
   ============================================================ */
.kb-stage{ display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(1.5rem,4vw,4rem);
  align-items:center; }

.kb-detail{ display:flex; flex-direction:column; }
.kb-num{ font-family:var(--display); font-size:clamp(3.5rem,8vw,6.5rem); line-height:.82;
  color:var(--gold-lt); margin:0 0 .5rem; letter-spacing:.02em; }
.kb-name{ font-size:var(--step-2); margin:0 0 1.4rem; max-width:16ch; }
.kb-specs{ list-style:none; margin:0 0 2rem; padding:0; border-top:1px solid var(--ink-3); }
.kb-specs li{ display:flex; justify-content:space-between; gap:2rem; align-items:baseline;
  padding:.72rem 0; border-bottom:1px solid var(--ink-3); }
.kb-specs .k{ font-size:.625rem; letter-spacing:.2em; text-transform:uppercase; color:#9B9B9B; }
.kb-specs .v{ text-align:right; color:var(--pearl); font-weight:300; font-size:var(--step--1); }
.kb-actions{ display:flex; flex-wrap:wrap; gap:1rem 1.75rem; align-items:center; }

.kb-photo{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--ink-2); }
.kb-photo img{ width:100%; height:100%; object-fit:cover; transition:opacity .45s var(--ease); }
.kb-photo img.is-out{ opacity:0; }
.kb-photo::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(232,190,94,.2); pointer-events:none; }

/* --- the rail --- */
.kb-rack{ margin-top:clamp(2.5rem,5vw,4rem); position:relative; }
.kb-rail{ position:relative; height:6px; border-radius:3px; background:var(--foil);
  box-shadow:0 6px 18px rgba(0,0,0,.5), inset 0 -1px 0 rgba(0,0,0,.35); }
.kb-rail::before,.kb-rail::after{
  content:""; position:absolute; top:50%; width:14px; height:14px; border-radius:50%;
  background:var(--foil); transform:translateY(-50%); box-shadow:0 3px 8px rgba(0,0,0,.5);
}
.kb-rail::before{ left:-6px; } .kb-rail::after{ right:-6px; }

.kb-tags{ display:flex; justify-content:space-between; gap:.5rem; list-style:none; margin:0; padding:0 1.5%; }
.kb-tags li{ flex:0 0 auto; }

.kb-tag{
  --tag-w: clamp(46px,4.6vw,62px);
  position:relative; width:var(--tag-w); padding:0; background:none; border:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center;
  transform-origin:50% 0; transition:transform .45s var(--ease);
}
.kb-tag .hook{
  width:1px; height:22px; background:linear-gradient(var(--gold-lt),rgba(232,190,94,.35));
}
.kb-tag .plate{
  position:relative; width:100%; aspect-ratio:5/6; border-radius:4px;
  background:var(--foil);
  box-shadow:0 8px 20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.35);
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:.4em;
  filter:saturate(.68) brightness(.78);
  transition:filter .45s var(--ease), box-shadow .45s var(--ease);
}
.kb-tag .plate::before{ /* the hole the hook passes through */
  content:""; position:absolute; top:11%; left:50%; transform:translateX(-50%);
  width:22%; aspect-ratio:1; border-radius:50%; background:var(--ink);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
}
.kb-tag .plate span{
  font-family:var(--display); font-size:clamp(1.2rem,1.75vw,1.6rem); line-height:1;
  color:#1F1603; text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.kb-tag:hover .plate,.kb-tag:focus-visible .plate{ filter:saturate(.9) brightness(.94); }
.kb-tag[aria-selected="true"] .plate{
  filter:none; box-shadow:0 12px 28px rgba(0,0,0,.6), 0 0 0 1px rgba(239,237,231,.55),
    inset 0 1px 0 rgba(255,255,255,.5);
}
.kb-tag[aria-selected="true"]{ transform:translateY(6px); }
.kb-tag:hover{ animation:sway .95s var(--ease); }
@keyframes sway{ 0%{transform:rotate(0)} 22%{transform:rotate(3.2deg)} 48%{transform:rotate(-2.1deg)}
  72%{transform:rotate(1.1deg)} 100%{transform:rotate(0)} }

.kb-caption{ margin:2.4rem 0 0; text-align:center; font-size:.625rem; letter-spacing:.24em;
  text-transform:uppercase; color:#9B9B9B; }

/* On a phone the rail moves up to sit between the photograph and the room's
   details: photo, keys, details. The tags are the control - putting them under
   a full spec sheet meant scrolling past the answer to reach the question.
   On desktop the two sit side by side and the rail still belongs underneath.

   .kb-rack is a sibling of .kb-stage in the markup, so getting it between the
   stage's two children means dissolving the stage: display:contents drops its
   box and .kb-detail / .kb-photo join .wrap's flex column, where all three can
   be ordered. .kb-stage is a plain div carrying no role or label, which is the
   one case where display:contents costs nothing in the accessibility tree.
   The grid gap goes with the box - the margin on .kb-detail replaces it. */
@media (max-width:900px){
  [data-keyboard] > .wrap{ display:flex; flex-direction:column; }
  .kb-stage{ display:contents; }
  .kb-photo{ order:1; aspect-ratio:3/2; }
  .kb-rack{ order:2; min-width:0;
    overflow-x:auto; overflow-y:hidden; padding-bottom:1.25rem;
    scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
  .kb-detail{ order:3; margin-top:1.5rem; }
  .kb-rail{ min-width:640px; }
  .kb-tags{ min-width:640px; }
  .kb-tag{ --tag-w:48px; }
}
@media (prefers-reduced-motion: reduce){
  .kb-tag:hover{ animation:none; }
  .scroll-cue::after{ animation:none; }
}

/* ============================================================
   CARDS
   ============================================================ */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:clamp(1.25rem,2.5vw,2rem); }
.card{ display:flex; flex-direction:column; text-decoration:none; }
.card-media{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--pearl-2); }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.card:hover .card-media img{ transform:scale(1.055); }
.card h3{ font-size:var(--step-1); margin:1.15rem 0 .4rem; }
.card p{ font-size:var(--step--1); color:#5E5C58; margin:0; }
.on-ink .card p{ color:#9B9B9B; }
.card-tag{ position:absolute; top:0; left:0; background:var(--ink); color:var(--gold-lt);
  font-size:.5625rem; letter-spacing:.22em; text-transform:uppercase; padding:.55rem .9rem; }

/* ============================================================
   ROOM LIST (rooms page)
   ============================================================ */
.room{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,4vw,4rem); align-items:center;
  padding-block:clamp(2.5rem,5vw,4.5rem); border-top:1px solid var(--sand); scroll-margin-top:6rem; }
.room:nth-child(even) .room-media{ order:2; }
.room-media{ position:relative; }
.room-hero{ position:relative; display:block; width:100%; padding:0; border:0; background:var(--pearl-2);
  aspect-ratio:3/2; overflow:hidden; cursor:zoom-in; }
.room-hero img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.room-hero:hover img{ transform:scale(1.03); }
/* Four thumbnails sit under a room that may have fifteen photographs. Without
   the count there is nothing to suggest the hero opens onto more. */
.room-count{ position:absolute; right:0; bottom:0; background:var(--ink); color:var(--pearl);
  font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; padding:.5rem .85rem;
  transition:background .35s var(--ease), color .35s var(--ease); }
.room-hero:hover .room-count,
.room-hero:focus-visible .room-count{ background:var(--gold-dp); color:var(--pearl); }
.room-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem; margin-top:.4rem; }
.room-thumbs button{ padding:0; border:0; background:none; cursor:pointer; aspect-ratio:4/3; overflow:hidden; }
.room-thumbs img{ width:100%; height:100%; object-fit:cover; opacity:.6; transition:opacity .35s var(--ease); }
.room-thumbs button:hover img,.room-thumbs button[aria-current="true"] img{ opacity:1; }
.room-no{ font-family:var(--display); font-size:var(--step-2); color:var(--gold-dp); line-height:1; margin:0 0 .6rem; }
.room h2{ font-size:var(--step-2); margin:0 0 1rem; max-width:18ch; }
.room-specs{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.5rem; padding:0; list-style:none; }
.room-specs li{ font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--sand); padding:.45rem .8rem; color:#4A4844; }
@media (max-width:860px){
  .room{ grid-template-columns:1fr; }
  .room:nth-child(even) .room-media{ order:0; }
}

/* ============================================================
   AMBIENTE (restaurant)
   ============================================================ */
.ambiente-mark{ width:clamp(200px,24vw,300px); margin:0 0 1.75rem; }
.hours{ list-style:none; margin:0; padding:0; border-top:1px solid var(--ink-3); max-width:400px; }
.hours li{ display:flex; justify-content:space-between; gap:1.5rem; padding:.8rem 0;
  border-bottom:1px solid var(--ink-3); font-size:var(--step--1); }
.hours .k{ font-size:.625rem; letter-spacing:.2em; text-transform:uppercase; color:#9B9B9B; }

/* The timetable above shows three services with visible gaps, so this answers
   the question those gaps raise. It hangs off the same 400px measure and takes
   the column's gold accent — which is why the children's note below it is now
   plain muted type. Two gold notes here and neither one wins. */
.hours-cont{ max-width:400px; margin:1.1rem 0 0; padding-left:1.1rem;
  border-left:2px solid var(--gold); }
.hours-cont p{ margin:0; }
.hours-cont-lead{ font-size:var(--step-0); line-height:1.4; color:var(--gold-dp); }
.hours-cont-sub{ margin-top:.3rem; font-size:var(--step--1); line-height:1.55; }
.on-ink .hours-cont-lead{ color:var(--gold-lt); }

/* ============================================================
   GALLERY STRIP
   ============================================================ */
.strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; }
.strip img{ aspect-ratio:1; object-fit:cover; width:100%; }
.strip button{ display:block; overflow:hidden; padding:0; border:0; background:none; cursor:pointer; }
.strip button img{ transition:transform 1s var(--ease), opacity .4s var(--ease); }
.strip button:hover img{ transform:scale(1.06); opacity:.9; }
@media (max-width:720px){ .strip{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:2.5rem; }
.contact-block h3{ font-size:var(--step-1); margin:0 0 .9rem; }
.contact-block a{ text-decoration:none; border-bottom:1px solid rgba(192,138,23,.4); padding-bottom:2px; }
.contact-block a:hover{ border-color:var(--gold); }
.on-ink .contact-block a{ border-bottom-color:rgba(232,190,94,.4); }

/* display:block is not cosmetic — an iframe is inline by default, so it sits on
   the text baseline and leaves ~8px of the section showing underneath, which reads
   as a pale line against the ink section below. */
.map-frame{ display:block; border:0; width:100%; aspect-ratio:16/7; filter:grayscale(1) contrast(1.05); }
@media (max-width:720px){ .map-frame{ aspect-ratio:4/3; } }
/* Top padding only: the map is meant to butt straight onto the ink section, and
   the heading needs clearing from the pearl-2 block above it. */
.map-section{ padding-block:clamp(2.75rem,5.5vw,4.5rem) 0; }
/* The embed labels its two ends with coordinates, which means nothing to a guest,
   so the map is introduced in words before it appears. */
.map-intro{ margin-bottom:clamp(1.25rem,2.5vw,1.75rem); }
.map-intro .eyebrow{ font-size:.75rem; }
/* Between the caption size it started at and body size — the type scale has no
   step here, so this sits deliberately in the gap: 15px to 15.5px. */
.map-lead{ margin:.75rem 0 0; font-size:clamp(.9375rem,.9rem + .15vw,.96875rem);
  line-height:1.7; color:#4A4844; max-width:62ch; }

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{ background:#0A0A0A; color:var(--pearl); padding-block:clamp(3.5rem,6vw,5.5rem) 2rem; }
.ftr-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem; }
.ftr h4{ font-family:var(--body); font-weight:500; font-size:.625rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold-lt); margin:0 0 1.2rem; }
.ftr ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem; }
.ftr a{ text-decoration:none; font-size:var(--step--1); color:rgba(239,237,231,.78);
  transition:color .3s var(--ease); }
.ftr a:hover{ color:var(--gold-lt); }
.ftr p{ font-size:var(--step--1); color:rgba(239,237,231,.78); }
.ftr-mono{ width:46px; margin-bottom:1.2rem; }
.ftr-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  margin-top:3.5rem; padding-top:1.5rem; border-top:1px solid rgba(239,237,231,.12);
  font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(239,237,231,.5); }
/* the legal line reads as one sentence: the link takes the size and tracking of
   the type around it, and is underlined so it is visibly a link, not a label */
.ftr-bottom a{
  font-size:inherit; letter-spacing:inherit; color:inherit;
  text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; text-decoration-color:rgba(232,190,94,.55);
  transition:color .3s var(--ease), text-decoration-color .3s var(--ease);
}
.ftr-bottom a:hover{ color:var(--gold-lt); text-decoration-color:var(--gold-lt); }
@media (max-width:860px){ .ftr-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .ftr-top{ grid-template-columns:1fr; } }

/* ============================================================
   FORMS — the newsletter line and the enquiry form.
   Both borrow the booking bar's idiom rather than inventing a
   second one: a small gold uppercase label over an input that
   sits on a single hairline. No boxes, no rounded corners.
   ============================================================ */
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field label{
  font-size:.5625rem; letter-spacing:.24em; text-transform:uppercase;
  font-weight:500; color:var(--gold-dp);
}
.field input,.field textarea{
  font-family:var(--body); font-size:var(--step-0); font-weight:300;
  color:var(--ink); background:transparent; border:0;
  border-bottom:1px solid var(--sand); border-radius:0;
  padding:.5rem 0; width:100%;
  transition:border-color .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:7.5rem; line-height:1.6; }
.field input:focus,.field textarea:focus{ outline:0; border-bottom-color:var(--gold); }
.field input:focus-visible,.field textarea:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.field-hint{ font-size:.625rem; letter-spacing:.06em; color:#6B6862; }
/* only after the visitor has actually had a go at the field */
.field input:user-invalid,.field textarea:user-invalid{ border-bottom-color:var(--warn); }

/* dark grounds: the footer and any .on-ink section */
.ftr .field label,.on-ink .field label{ color:var(--gold-lt); }
.ftr .field input,.ftr .field textarea,
.on-ink .field input,.on-ink .field textarea{ color:var(--pearl); border-bottom-color:rgba(239,237,231,.28); }
.ftr .field-hint,.on-ink .field-hint{ color:rgba(239,237,231,.5); }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.75rem 1.5rem; }
.form-grid .field-wide{ grid-column:1/-1; }
@media (max-width:600px){ .form-grid{ grid-template-columns:1fr; } }

/* ---------- consent ---------- */
.consent{ display:flex; gap:.75rem; align-items:flex-start; margin-top:1.5rem; }
.consent input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; flex:none;
  width:1rem; height:1rem; margin:.15rem 0 0; border-radius:0;
  border:1px solid var(--sand); background:transparent; cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.consent input[type="checkbox"]:checked{ background:var(--gold); border-color:var(--gold); }
.consent input[type="checkbox"]:checked::after{
  content:"\2713"; display:block; margin-top:-1px;
  font-size:.75rem; line-height:1; text-align:center; color:var(--ink);
}
.consent input[type="checkbox"]:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.consent label{ font-size:var(--step--1); line-height:1.55; color:#5E5C58; }
/* the privacy link inside consent small print — underlined everywhere, since
   .ftr a would otherwise strip it in the footer but not on the contact page */
.consent a{
  color:inherit; text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; text-decoration-color:rgba(192,138,23,.6);
  transition:color .3s var(--ease), text-decoration-color .3s var(--ease);
}
.consent a:hover{ color:var(--gold-dp); text-decoration-color:var(--gold); }
.ftr .consent input[type="checkbox"],.on-ink .consent input[type="checkbox"]{ border-color:rgba(239,237,231,.4); }
.ftr .consent label,.on-ink .consent label{ color:rgba(239,237,231,.6); }
.ftr .consent a,.on-ink .consent a{ text-decoration-color:rgba(232,190,94,.55); }
.ftr .consent a:hover,.on-ink .consent a:hover{ color:var(--gold-lt); text-decoration-color:var(--gold-lt); }

/* ---------- status line ---------- */
.form-status{ margin:1.25rem 0 0; font-size:var(--step--1); line-height:1.55; }
.form-status:empty{ margin:0; }
.form-status[data-state="ok"]{ color:var(--gold-dp); }
.form-status[data-state="err"]{ color:var(--warn); }
.ftr .form-status[data-state="ok"],.on-ink .form-status[data-state="ok"]{ color:var(--gold-lt); }
.ftr .form-status[data-state="err"],.on-ink .form-status[data-state="err"]{ color:var(--warn-lt); }

/* spam trap — never shown, never announced, never focusable */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- the newsletter line (footer) ---------- */
.subscribe{
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:end;
  padding-bottom:clamp(2.5rem,4vw,3.5rem); margin-bottom:clamp(2.5rem,4vw,3.5rem);
  border-bottom:1px solid rgba(239,237,231,.12);
}
/* the eyebrow belongs to the heading, so it sits closer to it than the
   body copy does — the gap below the heading has to be the larger one */
.subscribe h4{ margin-bottom:.75rem; }
.sub-heading{ font-family:var(--display); font-weight:400; line-height:1.05; margin:0 0 1.35rem;
  font-size:clamp(1.5rem,2.6vw,2.1rem); color:var(--pearl); }
.subscribe p{ margin:0; max-width:44ch; line-height:1.7; }
/* input and button share one rule, like a signature line */
.sub-line{ display:flex; align-items:flex-end; gap:1.25rem;
  border-bottom:1px solid rgba(232,190,94,.45); transition:border-color .3s var(--ease); }
.sub-line:focus-within{ border-bottom-color:var(--gold-lt); }
.sub-line .field{ flex:1 1 auto; min-width:0; }
.ftr .sub-line .field input,.ftr .sub-line .field input:focus{ border-bottom:0; padding-bottom:.35rem; }
.sub-submit{
  flex:none; background:transparent; border:0; cursor:pointer; padding:0 0 .55rem;
  font-family:var(--body); font-weight:500; font-size:.6875rem; letter-spacing:.19em;
  text-transform:uppercase; color:var(--gold-lt); transition:color .3s var(--ease);
}
.sub-submit:hover{ color:var(--pearl); }
.sub-submit:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.sub-submit[disabled]{ opacity:.45; cursor:default; }
@media (max-width:860px){ .subscribe{ grid-template-columns:1fr; align-items:start; } }

/* ============================================================
   CHECK-IN NOTICE — reception is not staffed overnight, so the
   arrival window is a fact a guest needs before booking, not
   after. Framed rather than stamped, to stay distinct from the
   adults-only notice it may share a page with.
   ============================================================ */
.checkin{
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(1.25rem,3vw,2.75rem); align-items:start;
  border:1px solid var(--sand); border-top:1px solid var(--gold);
  padding:clamp(1.5rem,3vw,2rem);
  margin-top:clamp(2.25rem,4vw,3rem);
}
.checkin-hours{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.4rem); line-height:1;
  color:var(--gold-dp); margin:.55rem 0 0; white-space:nowrap;
}
.checkin-body p{ margin:0 0 .75rem; font-size:var(--step--1); line-height:1.65; color:#3A3835; }
.checkin-body p:last-child{ margin-bottom:0; }
.checkin-nums{ display:flex; flex-wrap:wrap; gap:.45rem 1.5rem; }
.checkin-nums a{
  text-decoration:none; color:var(--gold-dp);
  border-bottom:1px solid rgba(192,138,23,.45); padding-bottom:2px;
  transition:border-color .3s var(--ease);
}
.checkin-nums a:hover{ border-bottom-color:var(--gold); }
.checkin-sign{
  font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; color:#6B6862;
}
/* Directly under the adults-only notice the two read as one pair of house
   rules, so the gap closes up — a full section gap would separate them. */
.policy + .checkin{ margin-top:clamp(.75rem,1.6vw,1.15rem); }
.on-ink .checkin{ border-color:var(--ink-3); border-top-color:var(--gold); }
.on-ink .checkin-hours{ color:var(--gold-lt); }
.on-ink .checkin-body p{ color:#9B9B9B; }
.on-ink .checkin-nums a{ color:var(--gold-lt); border-bottom-color:rgba(232,190,94,.45); }
.on-ink .checkin-sign{ color:rgba(239,237,231,.5); }
html[lang="zh"] .checkin-sign{ text-transform:none; letter-spacing:.06em; }
@media (max-width:620px){ .checkin{ grid-template-columns:1fr; } }

/* ============================================================
   GALLERY — a full-bleed filmstrip that snaps. Borrows the Key
   Board's horizontal-scroll idiom rather than inventing a second
   one, but stays quieter: the signature stays the signature.
   ============================================================ */
.gallery-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; margin-bottom:clamp(2rem,4vw,3rem);
}
.gallery-head h2{ max-width:18ch; }
.gallery-nav{ display:flex; gap:.5rem; flex:none; }
.gal-btn{
  width:2.75rem; height:2.75rem; flex:none; position:relative; cursor:pointer;
  background:transparent; border:1px solid var(--sand); border-radius:0;
  color:var(--ink);
  transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.gal-btn::before{
  content:""; position:absolute; top:50%; left:50%;
  width:.5rem; height:.5rem;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
}
[data-gal-prev]::before{ transform:translate(-35%,-50%) rotate(135deg); }
[data-gal-next]::before{ transform:translate(-65%,-50%) rotate(-45deg); }
.gal-btn:hover{ border-color:var(--gold); color:var(--gold-dp); background:rgba(192,138,23,.06); }
.gal-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.gal-btn[disabled]{ opacity:.28; cursor:default; }
.gal-btn[disabled]:hover{ border-color:var(--sand); color:var(--ink); background:transparent; }

.gallery-strip{
  display:flex; gap:1px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding-inline:var(--gutter);
  scrollbar-width:none; -ms-overflow-style:none;
}
.gallery-strip::-webkit-scrollbar{ display:none; }
.gallery-strip:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; }
.gallery-strip figure{
  flex:0 0 clamp(260px,58vw,600px); margin:0;
  aspect-ratio:3/2; overflow:hidden; background:var(--pearl-2);
  scroll-snap-align:start;
}
.gallery-strip img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Each frame opens the lightbox. The button fills the whole frame, so the
   target is the photograph itself rather than an icon on top of it, and it
   takes its accessible name from the image's own alt text.
   The outline is inset because the figure clips overflow and a ring drawn
   outside the button would simply be cut off. */
.gal-open{
  display:block; width:100%; height:100%; padding:0; border:0;
  background:none; cursor:zoom-in; overflow:hidden;
}
.gal-open img{ transition:transform .9s var(--ease); }
.gal-open:hover img{ transform:scale(1.04); }
.gal-open:focus-visible{ outline:2px solid var(--gold-lt); outline-offset:-3px; }

@media (prefers-reduced-motion: reduce){
  .gallery-strip{ scroll-behavior:auto; }
  .gal-open img{ transition:none; }
  .gal-open:hover img{ transform:none; }
}

/* ============================================================
   SIGN-OFF — the house mark closing the home page. Capped at
   240px because the source art is 500px wide and anything
   larger would soften it on a 2x screen.
   ============================================================ */
.signoff{ padding-top:clamp(4rem,8vw,7rem); }
.signoff-mark{
  display:block; margin:0 auto clamp(1.75rem,3vw,2.5rem);
  width:clamp(130px,18vw,240px); height:auto;
}

/* ============================================================
   RATINGS — third-party scores. The number carries it, in the
   display face at fact-row scale; the source is a caption, not
   a logo, so neither platform out-shouts the house.
   ============================================================ */
/* The ratings share a ground with the section above them, so there was no
   change of colour to mark the join — just two section paddings stacked into
   dead pearl. Share one gap instead of two, and draw the line the ground
   change would otherwise have drawn. */
.section:has(+ .reviews){ padding-bottom:clamp(3rem,5vw,4.5rem); }
.reviews{ padding-top:0; }
.reviews > .wrap{ border-top:1px solid var(--sand); padding-top:clamp(2.75rem,5vw,4rem); }

.ratings{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--sand); }
/* not a link — no hover or focus affordance to promise one */
.rating{
  background:var(--pearl); padding:clamp(1.75rem,3vw,2.5rem);
  display:flex; flex-direction:column; align-items:flex-start; gap:.5rem;
}
.rating-score{
  font-family:var(--display); font-weight:400; line-height:.9; color:var(--gold-dp);
  font-size:clamp(2.5rem,6vw,4rem);
}
.rating-score i{ font-style:normal; font-size:.33em; color:#6B6862; margin-left:.28em; }
.rating-src{ font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:#5E5C58; }
@media (max-width:600px){ .ratings{ grid-template-columns:1fr; } }

/* ============================================================
   MENUS — the cards as downloadable documents. Rows on hairlines
   like the opening hours, because that is what they are: a short
   list of facts. Weight and size are stated before the tap.
   ============================================================ */
.menus{ list-style:none; margin:0; padding:0; border-top:1px solid var(--sand); }
.menus li{ border-bottom:1px solid var(--sand); transition:border-color .3s var(--ease); }
.menus li:hover{ border-bottom-color:var(--gold); }
.menus a{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem 1.75rem; flex-wrap:wrap;
  padding:1.35rem 0; text-decoration:none; color:inherit;
  transition:color .3s var(--ease);
}
.menus a:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.menu-name{ font-family:var(--display); font-size:var(--step-1); line-height:1.15;
  transition:color .3s var(--ease); }
.menu-meta{
  flex:none; font-size:.5625rem; letter-spacing:.2em; text-transform:uppercase;
  color:#6B6862; white-space:nowrap; transition:color .3s var(--ease);
}
/* the wine list has one edition, so it carries no language chip */
.menu-meta:empty{ display:none; }
.menus a:hover .menu-name,.menus a:hover .menu-meta{ color:var(--gold-dp); }
.on-ink .menus{ border-top-color:var(--ink-3); }
.on-ink .menus li{ border-bottom-color:var(--ink-3); }
.on-ink .menu-meta{ color:#9B9B9B; }
.on-ink .menus a:hover .menu-name,.on-ink .menus a:hover .menu-meta{ color:var(--gold-lt); }
/* the file facts are Latin either way — but the tracking is not for Chinese names */
html[lang="zh"] .menu-name{ font-family:inherit; }

/* ============================================================
   SOCIAL — Ambiente's own accounts. Named in words, not logos:
   the page has one mark on it already and three more would
   turn a restaurant page into a brand parade.
   ============================================================ */
.social{
  margin-top:clamp(2.25rem,4vw,3rem);
  padding-top:clamp(1.5rem,3vw,2rem);
  border-top:1px solid var(--sand);
}
.social-list{
  list-style:none; margin:1.1rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.75rem 1.85rem;
}
.social-list a{
  text-decoration:none; font-size:var(--step--1); color:var(--ink);
  border-bottom:1px solid rgba(192,138,23,.45); padding-bottom:3px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.social-list a:hover{ color:var(--gold-dp); border-bottom-color:var(--gold); }
.on-ink .social{ border-top-color:var(--ink-3); }
.on-ink .social-list a{ color:var(--pearl); border-bottom-color:rgba(232,190,94,.45); }
.on-ink .social-list a:hover{ color:var(--gold-lt); border-bottom-color:var(--gold-lt); }

/* ============================================================
   LEGAL — the privacy policy. Long-form reading, so the measure
   is tight, the rhythm is even, and nothing competes with the
   text. Sections are separated by rules rather than ornament.
   ============================================================ */
.legal-head{ padding-block:clamp(7.5rem,12vw,9.5rem) clamp(2.5rem,5vw,3.5rem); }
.legal-head h1{ font-size:var(--step-3); margin:0; }

.legal-note{
  font-size:var(--step--1); line-height:1.65; color:#6B6862;
  border-left:2px solid var(--gold); padding-left:1.1rem; margin:0 0 clamp(2rem,4vw,3rem);
}
.legal-note:empty{ display:none; }

/* An undated legal page is a draft: hide the empty slot rather than print a gap. */
.legal-head .muted:empty{ display:none; }

/* Unresolved passages in a draft legal document. Deliberately loud: this must be
   impossible to miss in review, and nothing carrying it should ever go live. */
.legal-todo{
  font-size:var(--step--1); line-height:1.6; color:#8A2B2B;
  background:#FBF0EE; border:1px dashed #C46B6B;
  padding:.85rem 1.1rem; margin:0 0 1.35rem; border-radius:2px;
}

/* 404: the same restrained treatment as the legal pages, plus a way out. */
.e404-body{ max-width:52ch; margin:0 0 clamp(1.75rem,3.5vw,2.5rem); line-height:1.72; color:#3A3835; }
.e404-actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin:0; }

.legal{ max-width:70ch; }
.legal h2{
  font-size:var(--step-2); margin:clamp(2.75rem,5vw,3.75rem) 0 1.1rem;
  padding-top:clamp(2rem,3vw,2.5rem); border-top:1px solid var(--sand);
}
.legal h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.legal h3{ font-size:var(--step-1); margin:2.4rem 0 .8rem; }
.legal h4{
  font-family:var(--body); font-weight:500; font-size:.6875rem; letter-spacing:.19em;
  text-transform:uppercase; color:var(--gold-dp); margin:1.9rem 0 .65rem;
}
.legal p{ margin:0 0 1.05rem; line-height:1.72; color:#3A3835; }
.legal ul{ margin:0 0 1.35rem; padding-left:1.15rem; list-style:none; }
.legal li{ position:relative; margin-bottom:.75rem; line-height:1.72; color:#3A3835; }
.legal li p{ margin:0 0 .55rem; }
.legal li p:last-child{ margin-bottom:0; }
/* a brass tick of a bullet, not a disc */
.legal li::before{
  content:""; position:absolute; left:-1.15rem; top:.78em;
  width:.45rem; height:1px; background:var(--gold);
}
.legal strong{ font-weight:500; color:var(--ink); }
.legal a{ color:var(--gold-dp); text-underline-offset:3px; overflow-wrap:anywhere; }
.legal a:hover{ color:var(--gold); }
/* uppercase tracking is a Latin device — undo it for Chinese */
html[lang="zh"] .legal h4{ text-transform:none; letter-spacing:.06em; }

/* ============================================================
   PAGE HEADS (interior pages)
   ============================================================ */
.pagehead{ position:relative; min-height:clamp(340px,48vh,460px); display:flex; align-items:flex-end;
  color:var(--pearl); overflow:hidden; }
/* Page-head type is bottom-aligned, so the weight belongs in the bottom third,
   not spread evenly. The old ramp reached only 0.34 by 45% and was still light
   under the eyebrow at 70% — over the white tablecloth on the restaurant page
   that left gold at 1.9:1. Keeping the top light preserves the photograph. */
.pagehead .hero-bg::after{
  background:linear-gradient(180deg,
    rgba(18,18,18,.84) 0%,
    rgba(18,18,18,.46) 30%,
    rgba(18,18,18,.82) 52%,
    rgba(18,18,18,.90) 76%,
    rgba(18,18,18,.92) 100%); }
.pagehead-in{ position:relative; z-index:2; padding-block:7.5rem 3rem; }
.pagehead h1{ font-size:var(--step-3); margin:0; max-width:20ch; }
.pagehead .hero-eyebrow{ margin-bottom:1rem; }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .card-media img,.strip button img{ transition:none; }
}

/* ============================================================
   LANGUAGE SWITCHER
   ============================================================ */
.lang{ position:relative; }
.lang-btn{
  background:none; border:0; cursor:pointer; padding:.4rem 0;
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--body); font-weight:400;
  font-size:.6875rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--gold-lt);
}
.lang-btn::after{
  content:""; width:5px; height:5px; margin-top:-3px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg); transition:transform .3s var(--ease);
}
.lang-btn[aria-expanded="true"]::after{ transform:rotate(-135deg); margin-top:1px; }

.lang-menu{
  position:absolute; top:calc(100% + 1rem); right:0; z-index:5;
  list-style:none; margin:0; padding:.45rem 0; min-width:172px;
  background:var(--ink-2); border:1px solid var(--ink-3);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.lang-menu.is-open{ opacity:1; visibility:visible; transform:none; }
.lang-menu a{
  display:block; padding:.58rem 1.15rem;
  font-size:.8125rem; letter-spacing:.06em; text-transform:none;
  color:var(--pearl); opacity:.8; text-decoration:none;
}
.lang-menu a::after{ display:none; }              /* not the nav underline */
.lang-menu a:hover{ opacity:1; color:var(--gold-lt); background:rgba(255,255,255,.05); }
.lang-menu a[aria-current="true"]{ color:var(--gold-lt); opacity:1; }

@media (max-width:1080px){
  /* in the full-screen menu the languages read better as a plain row */
  .lang-btn{ display:none; }
  .lang-menu{
    position:static; opacity:1; visibility:visible; transform:none;
    background:none; border:0; box-shadow:none; padding:0; min-width:0;
    display:flex; flex-wrap:wrap; justify-content:center; gap:.3rem 1.35rem;
  }
  .lang-menu a{ padding:.3rem .1rem; font-size:.875rem; }
}

/* ============================================================
   CHINESE — Italiana and Jost carry no CJK glyphs, so the whole
   type system swaps. Uppercase and wide tracking are Latin
   devices: neither does anything useful to Chinese characters.
   ============================================================ */
html[lang="zh"]{
  --display:"Noto Serif SC","Songti SC","SimSun",serif;
  --body:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}
html[lang="zh"] body{ line-height:1.85; font-weight:300; }
html[lang="zh"] .eyebrow,
html[lang="zh"] .hero-eyebrow,
html[lang="zh"] .nav a,
html[lang="zh"] .btn,
html[lang="zh"] .link-arrow,
html[lang="zh"] .card-tag,
html[lang="zh"] .fact span,
html[lang="zh"] .kb-specs .k,
html[lang="zh"] .hours .k,
html[lang="zh"] .room-specs li,
html[lang="zh"] .bk-field label,
html[lang="zh"] .ftr h4,
html[lang="zh"] .ftr-bottom,
html[lang="zh"] .kb-caption,
html[lang="zh"] .split figcaption,
html[lang="zh"] .brand-txt span,
html[lang="zh"] .contact-block .eyebrow,
html[lang="zh"] .room-count,
html[lang="zh"] .lb-count{
  text-transform:none; letter-spacing:.06em;
}
html[lang="zh"] h1,
html[lang="zh"] h2,
html[lang="zh"] h3{ line-height:1.4; letter-spacing:.02em; }
html[lang="zh"] .hero h1{ max-width:20ch; }
html[lang="zh"] .kb-name{ max-width:20ch; }
/* numerals and the wordmark stay in the brand face */
html[lang="zh"] .brand-txt b,
html[lang="zh"] .kb-num,
html[lang="zh"] .room-no,
html[lang="zh"] .kb-tag .plate span{ font-family:"Italiana",serif; }

/* ============================================================
   RUSSIAN — Jost ships Cyrillic, Italiana does not. Only the
   display face swaps: Prata keeps the same high-contrast
   didone character in Cyrillic. Set Russian runs longer than
   English, so tracking comes in and measures go out.
   ============================================================ */
html[lang="ru"]{
  --display:"Prata","Times New Roman",Georgia,serif;
}
html[lang="ru"] h1,
html[lang="ru"] h2,
html[lang="ru"] h3{ letter-spacing:0; line-height:1.14; }
html[lang="ru"] .hero h1{ max-width:24ch; }
html[lang="ru"] .kb-name{ max-width:22ch; }
html[lang="ru"] .eyebrow{ letter-spacing:.2em; }
html[lang="ru"] .hero-eyebrow{ letter-spacing:.22em; }
html[lang="ru"] .nav a,
html[lang="ru"] .btn,
html[lang="ru"] .link-arrow,
html[lang="ru"] .card-tag,
html[lang="ru"] .ftr h4,
html[lang="ru"] .contact-block .eyebrow,
html[lang="ru"] .brand-txt span{ letter-spacing:.16em; }
/* numerals and the wordmark stay in the brand face */
html[lang="ru"] .brand-txt b,
html[lang="ru"] .kb-num,
html[lang="ru"] .room-no,
html[lang="ru"] .kb-tag .plate span{ font-family:"Italiana",serif; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lb{ position:fixed; inset:0; z-index:150; background:rgba(10,10,10,.97);
  display:none; align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem); }
.lb.is-open{ display:flex; }
.lb img{ max-width:100%; max-height:84vh; object-fit:contain; }
.lb-close{ position:absolute; top:1.25rem; right:1.5rem; background:none; border:0; cursor:pointer;
  color:var(--pearl); font-size:2rem; line-height:1; padding:.5rem; }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); background:none; border:0;
  color:var(--pearl); font-size:2rem; cursor:pointer; padding:1rem; opacity:.7; }
.lb-nav:hover{ opacity:1; color:var(--gold-lt); }
.lb-prev{ left:.5rem; } .lb-next{ right:.5rem; }
.lb-count{ position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%);
  font-size:.625rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(239,237,231,.6); }