@import url("fonts.css?v=5c277804");

/* ============================================================
   Plumbing only. Nothing here is a design decision — no colour,
   no typeface, no layout. Each site writes its own visual system
   on top; this file only carries the things that must be right
   on every site and are invisible when they are.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* A sideways-scrollable page drags position:fixed elements out of view on
     phones. Clip rather than scroll. (clip, not hidden: hidden would make html
     a scroll container and break scroll-padding and sticky.) */
  overflow-x: clip;
}

body { margin: 0; }
/* Lock scrolling on the ROOT, not on body. html already has overflow-x:clip,
   so overflow:hidden on body turns body into its own scroll container — a
   position:sticky header then sticks to body and is thrown off-screen (with
   its close button) when the menu opens after scrolling. site.js puts
   .is-locked on <html> directly; a :has() selector was tried first and its
   style invalidation visibly lagged behind the menu opening. */
html.is-locked { overflow: hidden; }
/* [hidden] must win. A rule like `.gallery-more { display:flex }` outranks the
   browser's own `[hidden] { display:none }`, which left an empty "Show 0 more"
   button on screen whenever a gallery had nothing further to reveal. */
[hidden] { display: none !important; }

img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
/* A <button> inherits the user agent's grey `buttonface` unless something says
   otherwise. An outline/ghost button that sets only border-color and color then
   renders as light-grey with (often white) text on it — invisible. Reset here;
   any variant that wants a fill sets one and wins on specificity. */
button { background: transparent; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Reveal-on-scroll. The JS failsafe shows everything if the observer
   never runs, so content can never be stranded invisible. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease, ease), transform .7s var(--ease, ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

@media print {
  .site-header, .lightbox, .skip-link, .gallery-more, .filters, .map-consent, .callbar { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; color: #555; }
}

/* ============================================================
   Bourtzi Hotel — sand and antique gold
   The old site's palette kept: warm sand and cream grounds with
   the hotel's gold, taken from #e0c150 down to #c9a563 — the acid
   hue-46 yellow belongs to the hotel's illuminated sign, while its
   rooms, timber and brass all sit at hue 30–40. Dark is used only
   for the booking band and the footer. Literata for display — its Greek was drawn
   with its Latin, so a line like "Superior Δωμάτια" reads as one typeface — over
   Commissioner for text, which is harmonised the same way.
   The logo is used exactly as supplied; nothing is recoloured.
   ============================================================ */

:root {
  --paper: #faf9f6;
  --sand: #eeeae3;
  --sand-2: #ddd8cf;
  --ink: #191816;
  --body: #3c3a35;
  --muted: #6b6860;
  --gold: #c9a563;          /* antique gold: the hotel's warm tone at hue 40, not the hue-46 yellow of its lit sign */
  --bronze: #756228;        /* the gold taken down for text on light: reads bronze, not yellow */
  --line: #ded9d1;
  --line-dark: #37352f;
  --display: "Literata", Georgia, "Times New Roman", serif;
  --text: "Commissioner", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --gutter: clamp(1.1rem, 4vw, 3rem);
  --head: 5.9rem;
  --r-sm: 10px;
  --r: 18px;
  --r-lg: 26px;
  --radius: 18px;
  --measure: 36rem;
  --f-ink: #1a1713; --f-muted: #6a6153; --f-bg: #ffffff; --f-border: #bdb096;
  --f-accent: #1a1713; --f-accent-d: #7b5d10; --f-radius: 2px;
}

html { scroll-padding-top: 6rem; }

body { background: var(--paper); color: var(--body); font: 400 1.0625rem/1.68 var(--text); }

::selection { background: var(--gold); color: var(--ink); }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--bronze); }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

.wrap { width: min(100% - var(--gutter) * 2, 80rem); margin-inline: auto; }
.wrap-mid { width: min(100% - var(--gutter) * 2, 56rem); margin-inline: auto; }

.skip-link {
  position: absolute; left: .5rem; top: -4rem; z-index: 400; padding: .7rem 1.1rem;
  background: var(--gold); color: var(--ink); text-decoration: none; font: 600 .9rem var(--text);
}
.skip-link:focus { top: .5rem; }

/* ---------- Type ---------- */
.eyebrow {
  margin: 0 0 1.1rem; font: 600 .72rem/1.3 var(--text); letter-spacing: .24em; text-transform: uppercase;
  color: var(--bronze);
}
.display { font-family: var(--display); font-weight: 400; line-height: 1.08; letter-spacing: -.005em; color: var(--ink); text-wrap: balance; }
.d1 { font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5rem); }
.d2 { font-size: clamp(2rem, 1.4rem + 2.5vw, 3.3rem); }
.d3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
.lede { font-size: clamp(1.06rem, 1.01rem + .32vw, 1.22rem); line-height: 1.65; color: var(--body); max-width: 42rem; }
.measure { max-width: var(--measure); }
.muted { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .8rem 1.7rem; border: 1px solid transparent; border-radius: var(--r-sm);
  font: 600 .78rem/1 var(--text); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
/* Black on gold: the old white-on-gold was about 1.9:1 and unreadable. */
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: #b8934f; }
.btn-line { border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-gline { border-color: var(--bronze); color: var(--bronze); }
.btn-gline:hover { background: var(--bronze); color: var(--paper); }
.btn-onphoto { background: rgba(250, 246, 238, .94); color: var(--ink); }
.btn-onphoto:hover { background: #fff; }
.btn-ondark { border-color: rgba(255, 255, 255, .45); color: #fff; }
.btn-ondark:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn-sm { min-height: 42px; padding: .6rem 1.2rem; font-size: .72rem; }
.row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.ico { width: 1.25rem; height: 1.25rem; flex: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 200; background: rgba(250, 249, 246, .82);
  backdrop-filter: saturate(140%) blur(20px); -webkit-backdrop-filter: saturate(140%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.head-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--head); }
.brand { display: block; line-height: 0; text-decoration: none; }
/* sized by height so the badge-over-wordmark lockup always clears the bar */
.brand img { height: clamp(44px, 4.4vw, 58px); width: auto; }
.head-nav ul { list-style: none; display: flex; gap: clamp(.9rem, 2vw, 2rem); align-items: center; }
.head-nav a {
  font: 500 .8rem/1 var(--text); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: var(--body); padding: .55rem 0; border-bottom: 1px solid transparent;
}
.head-nav a:hover { color: var(--ink); border-bottom-color: var(--gold); }
.head-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); }
.head-tools { display: flex; align-items: center; gap: .6rem; }

.nav-toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: transparent; color: var(--ink); cursor: pointer; align-items: center; justify-content: center;
}
.bars, .bars::before, .bars::after { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform .25s var(--ease); }
.bars { position: relative; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -5.5px; } .bars::after { top: 5.5px; }
.is-open .bars { background: transparent !important; }
.is-open .bars::before { transform: translateY(5.5px) rotate(45deg); }
.is-open .bars::after { transform: translateY(-5.5px) rotate(-45deg); }

.head-nav .nav-cta { display: none; }
@media (max-width: 64rem) {
  /* The open menu lies OVER the page; opening it must not move anything. */
  .head-nav {
    position: fixed; top: var(--head); left: 0; right: 0; display: none;
    max-height: calc(100vh - var(--head)); overflow-y: auto;
    /* navigation has to stay legible, so this frost is heavier than the decorative panels */
    background: linear-gradient(180deg, rgba(252, 251, 249, .97), rgba(248, 246, 242, .94));
    backdrop-filter: saturate(140%) blur(26px); -webkit-backdrop-filter: saturate(140%) blur(26px);
    border-top: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 40px 70px -40px rgba(25, 24, 22, .75);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    /* bottom padding clears the panel's own corner radius */
    padding: .5rem var(--gutter) 2.4rem;
  }
  .site-header.is-open .head-nav { display: block; }
  .head-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  /* links only -- this must not reach the booking button, whose own padding it would win against */
  .head-nav li:not(.nav-cta) a { display: block; padding: .95rem 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
  .head-nav .nav-cta a { display: inline-flex; border-bottom: 0; padding: .8rem 1.7rem; font-size: .78rem; }
  .nav-toggle { display: inline-flex; }
}
/* The booking button stays in the bar on a phone, and steps aside while the
   menu is open so the menu's own button is the only one on screen. */
@media (max-width: 64rem) {
  .head-nav .nav-cta { display: block; margin-top: 1.1rem; }
  .site-header.is-open .head-tools .btn-sm { display: none; }
}
@media (max-width: 22rem) { .head-tools .btn-sm { padding: .5rem .8rem; font-size: .66rem; } }

/* ---------- Glass ----------
   Warm frosted panels sitting on the photography, so a title never floats
   loose on an image. */
.glass {
  background: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(250, 249, 246, .62));
  backdrop-filter: saturate(140%) blur(26px); -webkit-backdrop-filter: saturate(140%) blur(26px);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 40px 80px -46px rgba(25, 24, 22, .75);
}
.glass-dark {
  background: rgba(26, 23, 19, .62);
  backdrop-filter: saturate(130%) blur(20px); -webkit-backdrop-filter: saturate(130%) blur(20px);
  border: 1px solid rgba(255, 255, 255, .16);
}

/* ---------- Page hero (every page but the home page) ---------- */
.phero { position: relative; display: grid; align-items: end; min-height: clamp(21rem, 42vw, 32rem); isolation: isolate; }
.phero figure { position: absolute; inset: 0; margin: 0; z-index: -2; }
.phero figure img { width: 100%; height: 100%; object-fit: cover; }
.phero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 17, 12, .28) 0%, rgba(20, 17, 12, .1) 45%, rgba(20, 17, 12, .38) 100%); }
.phero-in { padding: clamp(2.5rem, 6vw, 4.5rem) 0 0; }
.phero-panel {
  max-width: 50rem; padding: clamp(1.7rem, 3.6vw, 3rem) clamp(1.7rem, 3.6vw, 3.2rem);
  border-radius: var(--r-lg); transform: translateY(clamp(1.5rem, 3vw, 2.6rem));
}
.phero-panel .crumbs ol { color: var(--muted); }
.phero-panel .crumbs { margin-bottom: .9rem; }
.phero-panel h1 { margin: 0; }
.phero-panel .lede { margin: .9rem 0 0; max-width: 44rem; }
.phero + * { padding-top: clamp(3rem, 6vw, 4.6rem); }

/* ---------- Hero: "Lit" ----------
   The home page opens on the pool in the hotel's own two states. Both photographs
   ship in the markup; the switch only decides which one is on top, so a visitor
   without JavaScript keeps the daylight photograph and every caption. */
.hero { position: relative; min-height: 34rem; display: grid; align-items: end; isolation: isolate; }
@supports (height: 100svh) {
  .hero { min-height: min(calc(100svh - var(--head)), 58rem); }
  .head-nav { max-height: calc(100svh - var(--head)); }
}
.dn-pair { position: absolute; inset: 0; z-index: -2; }
.dn-pair figure { position: absolute; inset: 0; margin: 0; }
.dn-pair figure img { width: 100%; height: 100%; object-fit: cover; }

/* Before the script runs, the night frame simply sits under the day one. */
.dn-pair .dn-night { opacity: 0; }
[data-dn="on"] .dn-pair figure { transition: opacity .55s var(--ease); }
[data-dn-state="night"].dn-pair .dn-night { opacity: 1; }
[data-dn-state="night"].dn-pair .dn-day { opacity: 0; }

/* The scrim is shaped around where the type actually sits, not applied evenly:
   measured against the rendered pixels of both photographs, the headline band needed
   real cover while the right-hand side of the frame stays open. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(18, 15, 11, .46) 0%, rgba(18, 15, 11, .30) 22%, rgba(18, 15, 11, .34) 50%, rgba(18, 15, 11, .52) 72%, rgba(18, 15, 11, .88) 100%),
              linear-gradient(90deg, rgba(18, 15, 11, .56) 0%, rgba(18, 15, 11, .34) 34%, rgba(18, 15, 11, .06) 62%, rgba(18, 15, 11, 0) 78%);
}
.hero-in { padding: clamp(3rem, 8vh, 6rem) 0 clamp(1.6rem, 4vw, 2.6rem); }
.hero .eyebrow { color: #fff; }
.hero h1 { color: #fff; max-width: 15ch; }
.hero-lede { color: rgba(255, 255, 255, .92); max-width: 37rem; margin: clamp(1rem, 2vw, 1.5rem) 0 0; }
.hero-row { margin-top: clamp(1.5rem, 3vw, 2.1rem); }

/* The rail across the hero's foot: the switch, then the four facts. */
.hero-rail {
  position: relative; z-index: 2; margin-top: clamp(1.2rem, 3vw, 2rem);
  border-top: 1px solid rgba(255, 255, 255, .22);
  background: linear-gradient(180deg, rgba(20, 17, 12, 0), rgba(20, 17, 12, .34));
}
.rail-in {
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem, 3vw, 2.4rem);
  padding: clamp(.9rem, 2vw, 1.3rem) 0 clamp(1rem, 2.2vw, 1.5rem);
}
.glance-list {
  list-style: none; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: clamp(1rem, 3.2vw, 2.8rem); margin-left: auto;
}
.glance-list li {
  display: flex; align-items: baseline; gap: clamp(1rem, 3.2vw, 2.8rem);
  font: 400 clamp(1.02rem, .9rem + .5vw, 1.32rem)/1.2 var(--display); color: #fff;
}
.glance-list li + li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold); flex: none; align-self: center;
}

/* Narrow screens get their own hero treatment, chosen rather than inherited.
   The 90deg half of the scrim only helps while the frame is wide: at 375px the type
   runs the full width and lands on the unscrimmed side. The day photograph is blown
   out across its whole upper half (raw ~253 behind the lede), so the scrim is sized
   from the rendered pixels rather than by eye. */
@media (max-width: 48rem) {
  .hero::before {
    background: linear-gradient(180deg,
      rgba(18, 15, 11, .60) 0%, rgba(18, 15, 11, .58) 20%, rgba(18, 15, 11, .66) 50%,
      rgba(18, 15, 11, .70) 76%, rgba(18, 15, 11, .92) 100%);
  }
  /* The lobby's backlit desk sits dead centre, which is exactly where a phone-width
     crop lands. Anchored left instead: the horse lamp and the dark wall, which is the
     more distinctive half of that room anyway. */
  .dn-pair .dn-night img { object-position: 6% center; }
}

/* ---------- The day / night switch ---------- */
.dn-switch {
  display: inline-flex; padding: 3px; border-radius: 999px;
  background: rgba(20, 17, 12, .5); border: 1px solid rgba(255, 255, 255, .26);
  backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px);
}
.dn-switch button {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px;
  padding: .45rem 1.05rem; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 600 .7rem/1 var(--text); letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255, 255, 255, .8); transition: background .25s var(--ease), color .25s var(--ease);
}
.dn-switch button .ico { width: 16px; height: 16px; }
.dn-switch button:hover { color: #fff; }
.dn-switch button[aria-pressed="true"] { background: var(--gold); color: var(--ink); }

/* ---------- Sections ---------- */
.section { padding: clamp(3.4rem, 8vw, 6.2rem) 0; }
.section-sm { padding: clamp(2.2rem, 5vw, 3.6rem) 0; }
.on-sand { background: var(--sand); }
.on-dark { background: var(--ink); color: #c9c2b5; }
.on-dark .display, .on-dark h2, .on-dark h3 { color: #fff; }
.on-dark .eyebrow { color: var(--gold); }
.on-dark .lede { color: #c9c2b5; }
.two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.8rem, 5vw, 4.5rem); align-items: start; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- Room panels ---------- */
.rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem); }
.room { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.room figure { margin: 0; overflow: hidden; }
.room figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .7s var(--ease); }
.room:hover figure img { transform: scale(1.04); }
.room-body { padding: clamp(1.4rem, 3vw, 2.1rem); display: flex; flex-direction: column; gap: .85rem; flex: 1; }
.room h3 { font: 400 clamp(1.6rem, 1.25rem + 1.1vw, 2.2rem)/1.12 var(--display); color: var(--ink); }
.room-meta { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem .85rem; font: 500 .72rem/1.4 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.room-meta li + li::before { content: "·"; margin-right: .5rem; color: var(--line); }
.room p { color: var(--body); font-size: .99rem; flex: 1; }

/* ---------- Photo pair / side figure ---------- */
.band { display: flex; flex-wrap: wrap; gap: clamp(.6rem, 1.5vw, 1rem); margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.band figure { margin: 0; overflow: hidden; border-radius: var(--radius); flex: 1 1 20rem; height: clamp(13rem, 24vw, 22rem); }
.band img { width: 100%; height: 100%; object-fit: cover; }
.side-fig { margin: 0; overflow: hidden; border-radius: var(--radius); }
.side-fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Full-bleed photo band ----------
   The pool, at full width, with the type sitting on the photograph. Its own
   composition: nothing else on the page is a single edge-to-edge photograph. */
.bleed { position: relative; min-height: clamp(24rem, 54vw, 45rem); display: grid; align-items: end; isolation: isolate; }
.bleed figure { position: absolute; inset: 0; margin: 0; z-index: -2; }
/* Anchored to the bottom: the pool is in the lower third of this photograph, and a centred
   crop cut it off. At this band height it keeps the water and still holds the sunset sky. */
.bleed figure img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.bleed::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20, 17, 12, .10) 0%, rgba(20, 17, 12, .34) 52%, rgba(20, 17, 12, .82) 100%);
}
.bleed-in { padding: clamp(2.4rem, 6vw, 4rem) 0; color: #fff; }
.bleed-in .eyebrow { color: #fff; }
.bleed-in h2 { color: #fff; }
.bleed-in p { color: rgba(255, 255, 255, .94); max-width: 36rem; }

/* ---------- "Always on" board (signature) ---------- */
.board { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 4.5rem); margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.board li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: .45rem 1rem; align-items: baseline; padding: 1.15rem 0; border-bottom: 1px solid var(--line); }
.board .ico { color: var(--bronze); grid-row: span 2; align-self: start; margin-top: .25rem; }
.board h3 { font: 400 1.3rem/1.2 var(--display); color: var(--ink); }
.board .when { font: 600 .68rem/1.4 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); white-space: nowrap; }
.board p { grid-column: 2 / -1; margin: 0; color: var(--muted); font-size: .94rem; }

/* ---------- Awards ledger (signature) ---------- */
.ledger { list-style: none; margin-top: clamp(1.8rem, 4vw, 2.6rem); border-top: 1px solid var(--line); }
.ledger li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 14rem); gap: .6rem clamp(1rem, 3vw, 2rem); padding: 1rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.ledger .yr { font: 400 1.15rem/1 var(--display); color: var(--bronze); font-variant-numeric: tabular-nums; }
.ledger .what { color: var(--ink); font-size: 1.04rem; }
.ledger .who { color: var(--muted); font-size: .9rem; }

/* ---------- Page head ---------- */
.page-head { padding: clamp(2.4rem, 5vw, 3.6rem) 0 clamp(1.6rem, 3.5vw, 2.6rem); }
.crumbs { margin-bottom: 1.2rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; font: 400 .82rem/1.4 var(--text); color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--line); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--bronze); }
.head-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1rem, 4vw, 3rem); align-items: end; }

/* ---------- Feature / spec lists ---------- */
.feature-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3rem); }
.feature-list li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .7rem; align-items: start; padding: .75rem 0; border-bottom: 1px solid var(--line); color: var(--body); }
.feature-list .ico { width: 1rem; height: 1rem; color: var(--bronze); margin-top: .45rem; }
/* the distances list adds a value column, right-aligned and unwrapped */
.dist-list li { grid-template-columns: 1.1rem minmax(0, 1fr) auto; }
.dist-list em { font-style: normal; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.spec { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; }
.spec li { padding: 1.2rem clamp(1rem, 2.4vw, 1.7rem); }
.spec li + li { border-left: 1px solid var(--line); }
.spec b { display: block; font: 600 .68rem/1.3 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.spec span { font: 400 clamp(1.2rem, 1rem + .7vw, 1.6rem)/1.2 var(--display); color: var(--ink); }

/* ---------- Prose blocks ---------- */
.prose h2 { font: 400 clamp(1.45rem, 1.2rem + 1vw, 2rem)/1.15 var(--display); color: var(--ink); margin: 2rem 0 .7rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { max-width: var(--measure); }
.prose p + p { margin-top: 0; }
.blocks { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: start; }
.block:nth-child(even) figure { order: 2; }
.block figure { margin: 0; overflow: hidden; border-radius: var(--radius); }
.block figure img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }

/* ---------- Travel ---------- */
.travel-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.8rem); margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.travel-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem); }
.travel-card > .ico { color: var(--bronze); margin-bottom: .9rem; }
.travel-card h3 { font: 400 1.45rem/1.2 var(--display); color: var(--ink); margin-bottom: .6rem; }
.travel-card p { color: var(--muted); font-size: .96rem; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.1rem; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: .4rem .9rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--sand);
  font: 500 .84rem/1 var(--text); color: var(--ink); text-decoration: none;
}
.chip:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip .ico { width: .9rem; height: .9rem; }

/* ---------- News ---------- */
.news { list-style: none; border-top: 1px solid var(--line); }
.news li { padding: 1.5rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem clamp(1rem, 3vw, 2.5rem); }
.news time { font: 500 .82rem/1.7 var(--text); color: var(--muted); font-variant-numeric: tabular-nums; }
.news h2 { font: 400 1.5rem/1.22 var(--display); color: var(--ink); margin-bottom: .45rem; }
.news h2 a { text-decoration: none; }
.news h2 a:hover { color: var(--bronze); }
.news p { color: var(--muted); font-size: .97rem; }

/* ---------- Tiles, gallery, lightbox ---------- */
.tile { position: relative; display: block; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; width: 100%; border-radius: var(--radius); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), opacity .3s; }
.tile:hover img { transform: scale(1.04); }
.tile.is-entering img { animation: fade .45s var(--ease); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.filters { display: flex; flex-wrap: wrap; gap: .4rem; padding-bottom: 1.3rem; }
.filter {
  border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer;
  padding: .5rem 1.1rem; min-height: 42px; font: 500 .85rem/1 var(--text); color: var(--body);
}
.filter:hover { border-color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--gold); }

.grid { display: flex; flex-wrap: wrap; gap: 4px; }
.grid .tile { flex: 1 1 14rem; height: clamp(9rem, 15vw, 15rem); }
/* Short galleries get a fixed column count that divides their photos, so they always close in
   full rows: bar 6 = 3 x 2, Premium 12 = 4 x 3, Superior 10 = 5 x 2; all two across on smaller screens. */
.grid.grid-3 .tile { flex: 0 0 calc((100% - 8px) / 3); }
.grid.grid-4 .tile { flex: 0 0 calc((100% - 12px) / 4); }
.grid.grid-5 .tile { flex: 0 0 calc((100% - 16px) / 5); }
@media (max-width: 62rem) {
  .grid.grid-3 .tile, .grid.grid-4 .tile, .grid.grid-5 .tile { flex: 0 0 calc((100% - 4px) / 2); }
}
.gallery-more { display: flex; justify-content: center; margin-top: 2rem; }

.lightbox { position: fixed; inset: 0; z-index: 300; display: none; background: rgba(14, 12, 9, .97); opacity: 0; transition: opacity .26s; }
.lightbox.is-open { display: block; }
.lightbox.is-visible { opacity: 1; }
.lb-stage { position: absolute; inset: 4.5rem 4.5rem 4rem; display: grid; place-items: center; }
.lb-figure { margin: 0; display: grid; justify-items: center; gap: .8rem; max-height: 100%; }
.lb-img { max-width: 100%; max-height: calc(100vh - 11rem); width: auto; height: auto; border-radius: var(--radius); transition: opacity .2s; }
.lb-img.is-loading { opacity: .3; }
.lb-caption { font-size: 1rem; color: #ddd6c8; text-align: center; max-width: 44rem; }
.lb-counter { position: absolute; left: 1.4rem; top: 1.4rem; margin: 0; font: 600 .8rem/1 var(--text); letter-spacing: .12em; color: var(--gold); }
.lb-btn { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); background: rgba(26, 23, 19, .85); color: #fff; cursor: pointer; }
.lb-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.lb-btn:focus-visible { outline-color: #fff; }
.lb-btn svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-btn:disabled { display: none; }
.lb-prev { left: 1rem; top: 50%; margin-top: -1.5rem; }
.lb-next { right: 1rem; top: 50%; margin-top: -1.5rem; }
.lb-close { right: 1rem; top: 1rem; }

/* ---------- Video ---------- */
.video-frame { position: relative; border-radius: var(--radius); overflow: hidden; }
.video-frame img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.video-btn { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: rgba(20, 17, 12, .28); cursor: pointer; width: 100%; text-decoration: none; }
.video-btn span {
  display: inline-flex; align-items: center; gap: .6rem; background: var(--gold); color: var(--ink);
  padding: .9rem 1.7rem; border-radius: var(--radius); font: 600 .76rem/1 var(--text);
  letter-spacing: .16em; text-transform: uppercase;
}
.video-btn:hover span { background: #fff; }
.video-note {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: .7rem clamp(.9rem, 2vw, 1.4rem);
  font: 500 .76rem/1.4 var(--text); color: rgba(255, 255, 255, .94);
  background: linear-gradient(180deg, rgba(18, 15, 11, 0), rgba(18, 15, 11, .82));
  text-align: center;
}
/* Once the frame exists it covers the poster entirely. */
.video-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-frame.is-playing .video-btn,
.video-frame.is-playing .video-note { display: none; }

/* ---------- Bar page ---------- */
.quote-band { background: var(--sand); border-top: 3px solid var(--gold); padding: clamp(2.2rem, 5vw, 3.4rem) 0; }
.quote-band p { font: 400 clamp(1.4rem, 1.15rem + 1.3vw, 2.2rem)/1.35 var(--display); color: var(--ink); max-width: 46rem; }
/* What the bar serves: four cards, two by two, in the travel cards' language (white, hairline,
   18px), with the icon in a sand square beside the text. */
.menu-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.2rem); margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.menu-item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.1rem; align-content: start; padding: clamp(1.3rem, 2.6vw, 1.9rem); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.menu-item > .ico { grid-row: span 2; width: 48px; height: 48px; padding: 13px; border-radius: 14px; background: var(--sand); color: var(--bronze); }
.menu-item h3 { font: 400 1.45rem/1.2 var(--display); color: var(--ink); margin: .2rem 0 .45rem; }
.menu-item p { color: var(--muted); font-size: .95rem; }
.hours { list-style: none; display: grid; gap: .6rem; }
.hours li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.hours b { font-weight: 500; color: var(--ink); }
.hours span { color: var(--muted); }

/* ---------- Booking card + footer ---------- */
.book-wrap { padding: clamp(2.5rem, 6vw, 4.5rem) 0 0; }
.book-card {
  background: var(--ink); color: #c9c5bd; border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 3.6rem) clamp(1.6rem, 4vw, 3.4rem);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.book-card h2 { color: #fff; }
.book-card .eyebrow { color: var(--gold); }
.book-card p { color: #c9c5bd; }
.book-card .row { justify-content: flex-end; }

.site-footer { background: var(--paper); color: var(--muted); padding: clamp(2.6rem, 5vw, 4rem) 0 1.4rem; }
.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--bronze); }
.site-footer .muted { color: var(--muted); }
.footer-grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 2.2rem clamp(1.5rem, 3.5vw, 3rem);
  padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line);
}
.footer-brand img { width: 118px; height: auto; margin-bottom: 1.1rem; }
.footer-brand p { font-size: .95rem; line-height: 1.7; }
.footer-h { font: 600 .68rem/1.4 var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--bronze); margin-bottom: 1rem; }
.footer-col p { font-size: .95rem; line-height: 1.75; }
.footer-links { list-style: none; display: grid; gap: .6rem; }
.footer-links a { text-decoration: none; font-size: .95rem; }
.footer-links a:hover { text-decoration: underline; }
.social { display: flex; gap: .55rem; margin-top: 1.1rem; }
.social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; }
.social a:hover { border-color: var(--bronze); background: #fff; }
.social .ico { width: 1.05rem; height: 1.05rem; }
.colophon {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.5rem;
  margin-top: clamp(2rem, 4vw, 2.8rem); padding-top: 1.3rem; border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--muted);
}
.colophon p { margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 64rem) {
  .two, .head-grid, .block { grid-template-columns: minmax(0, 1fr); }
  .block:nth-child(even) figure { order: 0; }
  .cards, .travel-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .book-card { grid-template-columns: minmax(0, 1fr); }
  .book-card .row { justify-content: flex-start; }
}
@media (max-width: 48rem) {
  .rooms, .feature-list, .travel-list, .menu-list { grid-template-columns: minmax(0, 1fr); }
  .spec { grid-template-columns: minmax(0, 1fr); }
  .spec li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .ledger li { grid-template-columns: 3.4rem minmax(0, 1fr); }
  .ledger .who { grid-column: 2; }
  .news li { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .grid .tile { flex-basis: 10rem; height: 10rem; }
  .lb-stage { inset: 3.5rem .8rem 3.2rem; }
  .lb-img { max-height: calc(100vh - 8.5rem); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================
   Home page composition — each section a different shape, so the
   page does not scroll as one repeated pattern.
   ============================================================ */

/* A heading beside its lede, rather than a centred stack. */
.sec-head {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 4vw, 4rem); align-items: end;
}
.sec-head .lede { margin: 0; }
.sec-head h2 { margin: 0; }

/* 2 — the intro: a tall photograph against the text. */
.intro {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.15fr);
  gap: clamp(1.8rem, 5vw, 4.5rem); align-items: start;
}
.intro-fig { margin: 0; }
.intro-fig img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--r); display: block;
}

.intro-body h2 { margin: 0 0 clamp(1rem, 2vw, 1.4rem); }
.intro-body > p { margin: 0 0 1rem; }
.facts { list-style: none; margin-top: clamp(1.6rem, 3.5vw, 2.4rem); border-top: 1px solid var(--line); }
.facts li { padding: .95rem 0; border-bottom: 1px solid var(--line); }
.facts h3 { margin: 0; font: 400 1.18rem/1.25 var(--display); color: var(--ink); }
.facts p { margin: .25rem 0 0; color: var(--muted); font-size: .94rem; }

/* 3 — rooms, weighted rather than two equal cards. */
/* The two rooms are weighted by width, not by height: Superior gets the wider column
   because it is the better room, but both photographs are cut to one height and both
   cards finish on the same line, with the buttons on a shared baseline. */
.rooms-split {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem); margin-top: clamp(2rem, 4vw, 3rem); align-items: stretch;
}
.rooms-split .room {
  background: var(--paper); border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column;
}
.rooms-split .room figure { margin: 0; }
.rooms-split .room img {
  width: 100%; display: block; object-fit: cover;
  height: clamp(15rem, 27vw, 24rem);
}
.rooms-split .room-body {
  padding: clamp(1.2rem, 2.6vw, 1.9rem);
  flex: 1; display: flex; flex-direction: column;
}
.rooms-split .room .row { margin-top: auto; }
.rooms-split .room h3 { margin: 0; font: 400 clamp(1.5rem, 1.2rem + 1vw, 2.1rem)/1.15 var(--display); color: var(--ink); }
.rooms-split .room-meta {
  list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .7rem 0 0;
  font: 600 .68rem/1.4 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--bronze);
}
/* `.room p` carries flex:1 for the rooms page; here it would swallow the free space
   before the button's auto margin could use it, and the two buttons would not line up. */
.rooms-split .room-body p { margin: .9rem 0 0; color: var(--body); flex: 0 0 auto; }
.rooms-split .room .row { padding-top: 1.2rem; }

/* 4 — the night band: the one dark section, where the hotel itself is lit. */
.night { position: relative; isolation: isolate; padding: clamp(3rem, 6.5vw, 5rem) 0; color: #fff; }
.night-bg { position: absolute; inset: 0; margin: 0; z-index: -2; }
.night-bg img { width: 100%; height: 100%; object-fit: cover; }
/* Light enough that the lit pool behind it is still the point of the section; the
   panel carries its own ground, so the type does not depend on crushing the photograph. */
.night::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(14, 12, 9, .46) 0%, rgba(14, 12, 9, .58) 55%, rgba(14, 12, 9, .74) 100%);
}
/* Panel left, one photograph beside it. */
.night-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(1.4rem, 3.5vw, 3rem); align-items: center;
}
.night-panel {
  padding: clamp(1.6rem, 3.4vw, 2.8rem);
  border-radius: var(--r-lg);
  background: rgba(18, 15, 11, .74);
}
.night-panel .eyebrow { color: var(--gold); }
.night-panel h2 { color: #fff; margin: 0 0 1rem; }
.night-panel p { color: rgba(255, 255, 255, .88); margin: 0; max-width: 40rem; }
.night-panel .row { margin-top: 1.5rem; }
.night-fig { margin: 0; }
.night-fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); display: block; }
.night-fig figcaption {
  margin-top: .75rem; font: 600 .68rem/1.3 var(--text); letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255, 255, 255, .84);
}

/* 7 — the island as a horizontal sequence. */
.isl-strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.8rem); margin-top: clamp(2rem, 4vw, 3rem);
}
.isl-strip figure { margin: 0; }
.isl-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); display: block; }
.isl-strip figcaption {
  margin-top: .75rem; font: 600 .68rem/1.3 var(--text); letter-spacing: .16em;
  text-transform: uppercase; color: var(--bronze);
}

/* ---------- Home page, narrow ---------- */
@media (max-width: 60rem) {
  .sec-head { grid-template-columns: 1fr; align-items: start; gap: 1rem; }
  .intro { grid-template-columns: 1fr; }
  .intro-fig img { aspect-ratio: 4 / 3; }
  .rooms-split { grid-template-columns: 1fr; }
  .rooms-split .room img { height: auto; aspect-ratio: 16 / 10; }
  .isl-strip { grid-template-columns: 1fr; }
  .night-in { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .rail-in { gap: .9rem; }

}

@media (prefers-reduced-motion: reduce) {
  [data-dn="on"] .dn-pair figure { transition: none; }
}

/* ---------- Recognition: two award blocks, no year ----------
   The client's own badge artwork all carries a year (Tripadvisor 2020–2023,
   Booking 9,7 2021/2022, 9,5 2015), and the 9,8 exists only inside a perspective
   mockup. Cropping a year off a third-party award mark would misstate it, so the
   two standing awards are set in the site's own type instead. The dated list,
   badges and all, belongs on /awards/. */
.aw-cards {
  list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.8rem); margin-top: clamp(2rem, 4vw, 3rem);
}
.aw-card {
  position: relative; padding: clamp(1.6rem, 3.4vw, 2.6rem);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  display: flex; flex-direction: column; gap: .5rem;
}
.aw-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  border-radius: var(--r) var(--r) 0 0; background: var(--gold);
}
.aw-src {
  margin: 0; font: 600 .68rem/1.3 var(--text); letter-spacing: .18em;
  text-transform: uppercase; color: var(--bronze);
}
.aw-big {
  margin: 0; font: 400 clamp(2rem, 1.4rem + 2.4vw, 3.1rem)/1.05 var(--display);
  color: var(--ink); font-variant-numeric: tabular-nums; text-wrap: balance;
}
.aw-note { margin: 0; color: var(--muted); font-size: .95rem; max-width: 30rem; }

@media (max-width: 48rem) {
  .aw-cards { grid-template-columns: 1fr; }
}

@media (max-width: 40rem) {
  .glance-list { margin-left: 0; flex-direction: column; gap: .3rem; width: 100%; }
  .glance-list li { gap: 0; font-size: 1.02rem; }
  .glance-list li + li::before { display: none; }
}

/* ---------- Language dropdown ----------
   A native <details>, so it opens and closes without script. Styled in the site's own
   sand and antique gold rather than borrowed from another build. */
.lang { position: relative; }
.lang > summary {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 40px;
  padding: .45rem .7rem; border-radius: var(--r-sm); cursor: pointer; list-style: none;
  font: 600 .72rem/1 var(--text); letter-spacing: .14em; text-transform: uppercase;
  color: var(--body); transition: background .2s var(--ease), color .2s var(--ease);
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary:hover { background: var(--sand); color: var(--ink); }
.lang > summary .chev { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.lang[open] > summary { background: var(--sand); color: var(--ink); }
.lang[open] > summary .chev { transform: rotate(180deg); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 60;
  min-width: 11.5rem; padding: .35rem; list-style: none;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 22px 44px -18px rgba(25, 24, 22, .45);
}
.lang-menu::before {
  content: ""; position: absolute; right: 1.1rem; top: -.4rem; width: .7rem; height: .7rem;
  background: var(--paper); border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.lang-menu a {
  position: relative; display: flex; align-items: center; gap: .7rem;
  padding: .6rem .7rem; border-radius: var(--r-sm); text-decoration: none;
  font-size: .95rem; color: var(--body);
}
.lang-menu .lang-code {
  min-width: 1.9rem; font: 600 .68rem/1 var(--text); letter-spacing: .12em;
  text-transform: uppercase; color: var(--bronze);
}
.lang-menu a:hover { background: var(--sand); color: var(--ink); }
.lang-menu a[aria-current] { color: var(--ink); font-weight: 500; }
.lang-menu a[aria-current]::after {
  content: ""; margin-left: auto; width: .45rem; height: .45rem;
  border-radius: 50%; background: var(--gold);
}
@media (max-width: 60rem) {
  .lang-menu { right: auto; left: 0; }
  .lang-menu::before { right: auto; left: 1.1rem; }
}
