/* ============================================================
   AEGEAN — the October 2026 re-skin
   The owner rejected the espresso/brown shade. tools/repalette.py
   moved every warm literal in style.css + mediterranean.css to
   navy / chalk / mist; this sheet, loaded last, holds what a colour
   swap cannot do on its own:
     · the CTA system (ivory on navy, navy on chalk — no gold blocks)
     · the editorial hero shared by the three journey landings
     · type refinements for Archivo, which replaced Montserrat/Inter
   Gold survives only in the logo artwork itself.
   ============================================================ */
:root{
  --font-ui:   "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mist:      #A9BED8;   /* the one accent on navy — 9.5:1 on ink */
  --sea:       #2F4C7A;   /* the same accent on chalk — 7.9:1 */
  --logo-gold: #C9A35C;   /* reserved for the wordmark's italic m */
}

/* ---------- brand: the italic m is the logo, so it keeps its gold ---------- */
.brand__word em, .brand__word i, .footer__mark em, .bare__word em{ color:var(--logo-gold); }

/* ---------- CTA system ---------- */
.btn{ font-weight:500; letter-spacing:.2em; border-color:rgba(236,239,245,.34); }
.btn::before{ background:var(--ivory); }
.btn:hover{ color:var(--ink); border-color:var(--ivory); }
.btn--solid{ background:var(--ivory); border-color:var(--ivory); color:var(--ink); }
.btn--solid::before{ background:#FFFFFF; }
.btn--solid:hover{ color:var(--ink); border-color:#FFFFFF; }
.btn--ghost{ border-color:rgba(236,239,245,.34); }
.btn--ghost:hover{ border-color:var(--ivory); }
[data-surface="light"] .btn::before,[data-surface="limestone"] .btn::before{ background:var(--olive); }

.eyebrow{ font-weight:500; letter-spacing:.32em; }

/* "Explore Olympia" inherited body type (16px, sentence case) and read as a
   stray element in an all-caps nav — set it like its siblings */
.nav__xo .nav__parent{
  font-family:var(--font-ui); font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ivory); padding:6px 0;
}
.nav__xo .nav__parent svg{ opacity:.7; }
.link-arrow{ font-weight:500; }

/* ============================================================
   THE JOURNEY HERO  (.hero.hx)
   One quiet column bottom-left, the film doing the talking, and the
   facts set as a hairline ledger along the bottom edge — instead of
   a pile of pills, buttons and badges competing over the picture.
   ============================================================ */
.hx{ min-height:100svh; align-items:flex-end; overflow:hidden; background:#070C17; }
.hx .hero__bg video, .hx .hero__bg img{ object-position:var(--hx-pos, 60% 50%); }
.hx .hero__bg::after{
  background:
    linear-gradient(90deg, rgba(7,12,23,.80) 0%, rgba(7,12,23,.52) 34%, rgba(7,12,23,.10) 64%, rgba(7,12,23,0) 80%),
    linear-gradient(180deg, rgba(7,12,23,.62) 0%, rgba(7,12,23,0) 20%, rgba(7,12,23,0) 52%, rgba(7,12,23,.86) 100%);
}
.hx .hero__content{
  max-width:calc(1440px + 2 * var(--pad-x)); margin-inline:auto;
  padding-bottom:calc(clamp(40px,6vh,72px) + 74px);
}
.hx .eyebrow{ color:rgba(236,239,245,.86); }
.hx .eyebrow::before{ background:rgba(236,239,245,.5); width:36px; }
.hx h1.h-display{
  font-weight:400; font-size:clamp(40px,5vw,80px); line-height:1.02; letter-spacing:-.022em;
  max-width:14ch !important; text-wrap:balance;
}
.hx h1.h-display em{ color:var(--mist); font-weight:400; }
/* the restaurant's two-sentence line: the second sentence steps down a size */
.hx h1.h-display--duo{ max-width:20ch !important; font-size:clamp(36px,4.3vw,68px); }
.hx h1.h-display--duo em{ display:block; font-size:.74em; margin-top:.18em; letter-spacing:-.012em; }
.hx .mhero__sub, .hx .lead{
  font-size:clamp(15px,1.15vw,17.5px); line-height:1.7; color:rgba(236,239,245,.8);
  max-width:46ch !important; font-weight:400;
}
.hx .mhero__acts, .hx .hero__acts{ align-items:center; gap:14px; margin-top:30px !important; }

/* 3D tour: from a floating badge to a quiet inline link */
.hx .hero__tour{
  margin-top:22px; padding:0; border:0; background:none; backdrop-filter:none;
  -webkit-backdrop-filter:none; gap:12px; border-radius:0;
}
.hx .hero__tour i{
  width:34px; height:34px; background:transparent; color:var(--ivory);
  border:1px solid rgba(236,239,245,.5);
}
.hx .hero__tour i svg{ width:11px; height:12px; }
.hx .hero__tour:hover{ background:none; }
.hx .hero__tour:hover i{ background:var(--ivory); color:var(--ink); border-color:var(--ivory); }
.hx .hero__tour span{ display:inline; color:rgba(236,239,245,.62); font-size:10px; margin:0 10px 0 0; }
.hx .hero__tour b{ display:inline; font-family:var(--font-ui); font-weight:500; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ivory);
  border-bottom:1px solid rgba(236,239,245,.3); padding-bottom:3px; }
.hx .hero__tour:hover b{ border-color:var(--ivory); }

/* facts become a ledger pinned to the bottom edge */
.hx .hero__meta, .hx .hero__pills{
  position:absolute; z-index:2; left:0; right:0; bottom:0; margin:0;
  max-width:calc(1440px + 2 * var(--pad-x)); margin-inline:auto;
  padding:20px var(--pad-x) 24px; gap:0; display:grid;
  grid-template-columns:repeat(var(--hx-cols,3), minmax(0,1fr));
}
.hx .hero__meta::before, .hx .hero__pills::before{
  content:""; position:absolute; top:0; left:var(--pad-x); right:var(--pad-x);
  height:1px; background:rgba(236,239,245,.2);
}
.hx .hero__meta div{ font-family:var(--font-ui); font-size:12px; font-weight:500; letter-spacing:.16em;
  color:var(--ivory); padding-right:20px; }
.hx .hero__meta span{ font-size:9.5px; letter-spacing:.3em; color:var(--mist); margin-bottom:7px; font-weight:500; }
.hx .hero__pills span{ background:none; border:0; border-radius:0; padding:0 20px 0 0;
  backdrop-filter:none; -webkit-backdrop-filter:none; color:var(--ivory); font-weight:500;
  font-size:11px; letter-spacing:.2em; }
.hx .hero__pills span::before{ content:"—"; color:var(--mist); margin-right:12px; }
.hx .hero__scroll{ display:none; }

/* ============================================================
   RECENT EVENINGS — real hall footage on the reception landing
   ============================================================ */
.evenings{ background:#0B1222; overflow:hidden; }
.evenings__grid{ display:grid; grid-template-columns:minmax(240px,4fr) 8fr;
  gap:clamp(32px,5vw,96px); align-items:end; }
.evenings__head{ padding-bottom:clamp(8px,2vw,28px); }
.evenings__head .sub{ max-width:34ch; }
.evenings__reels{ grid-template-columns:repeat(3,1fr); }
.evenings__reels .reel:nth-child(2){ transform:translateY(clamp(-48px,-3.4vw,-24px)); }
.evenings .reel__cap h4{ color:var(--ivory); }
.evenings .reel__cap span{ color:var(--mist); }
@media (max-width:900px){
  .evenings__grid{ grid-template-columns:1fr; }
  .evenings__reels{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:64%;
    overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px;
    margin-inline:calc(-1 * var(--pad-x)); padding-inline:var(--pad-x); scrollbar-width:none; }
  .evenings__reels::-webkit-scrollbar{ display:none; }
  .evenings__reels .reel{ scroll-snap-align:start; }
  .evenings__reels .reel:nth-child(2){ transform:none; }
}

@media (max-width:760px){
  .hx{ min-height:100svh; }
  .hx .hero__bg video, .hx .hero__bg img{ object-position:var(--hx-pos-m, var(--hx-pos, 60% 50%)); }
  .hx .hero__bg::after{
    background:linear-gradient(180deg, rgba(7,12,23,.62) 0%, rgba(7,12,23,.14) 22%, rgba(7,12,23,.62) 46%, rgba(7,12,23,.93) 74%, rgba(7,12,23,.97) 100%);
  }
  /* a phone hero holds four things: label, line, sentence, two buttons —
     the facts and the 3D link live further down the page and in the menu */
  .hx .hero__meta, .hx .hero__pills, .hx .hero__tour{ display:none; }
  .hx .hero__content{ padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }
  .hx h1.h-display{ font-size:clamp(34px,10vw,46px); }
  .hx h1.h-display--duo{ font-size:clamp(30px,8.6vw,40px); }
  .hx .mhero__acts .btn, .hx .hero__acts .btn{ flex:1 1 auto; justify-content:center; }
}
@media (max-width:760px) and (max-height:700px){
  .hx .mhero__sub, .hx .lead{ display:none; }
}

/* ============================================================
   RESTAURANT IDENTITY — who we are, the room, the two kitchens,
   the door. The page used to be plate after plate; these sections
   carry the house itself, in real photographs and real footage.
   ============================================================ */

/* Greek key — borrowed from the meander on the buffet-table skirts */
.key-band{
  height:22px; margin:0 var(--pad-x) clamp(56px,7vw,110px); opacity:.42;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none' stroke='%23A9BED8' stroke-width='1.2'%3E%3Cpath d='M0 .6H22M0 21.4H22M3.5 21.4V4H18.5V17.5H8V8.5H14V13'/%3E%3C/svg%3E") repeat-x left center / 22px 22px;
}

/* who we are */
.house{ background:#0B1222; overflow:hidden; }
.house__grid{ display:grid; grid-template-columns:4fr 7fr; gap:clamp(36px,6vw,110px); align-items:center; }
.house__mark{ position:relative; display:grid; place-items:center; aspect-ratio:1; max-width:380px; width:100%; justify-self:center; }
.house__mark::before, .house__mark::after{ content:""; position:absolute; border-radius:50%; }
.house__mark::before{ inset:0; border:1px solid rgba(169,190,216,.22); }
.house__mark::after{ inset:12%; border:1px solid rgba(169,190,216,.12); }
.house__mark img{ width:34%; height:auto; position:relative; }
.house__line{
  font-family:var(--font-display); font-weight:400; font-size:clamp(38px,4.6vw,74px);
  line-height:1.04; letter-spacing:-.02em; color:var(--ivory); margin:18px 0 26px; max-width:15ch;
}
.house__line em{ color:var(--mist); }
.house .lead{ color:#E3E8F0; max-width:46ch; }
.house .body-m{ color:#9AA7BA; max-width:52ch; margin-top:16px; }
.ledger{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:clamp(56px,7vw,110px) 0 0;
  border-top:1px solid rgba(236,239,245,.16); }
.ledger div{ padding:28px 24px 0 0; }
.ledger div + div{ padding-left:24px; border-left:1px solid rgba(236,239,245,.1); }
.ledger dt{ font-family:var(--font-display); font-weight:400; font-size:clamp(42px,4.6vw,72px);
  line-height:1; color:var(--ivory); letter-spacing:-.02em; }
.ledger dt small{ font-size:.48em; color:var(--mist); margin-left:3px; }
.ledger dd{ margin:14px 0 0; font-family:var(--font-ui); font-weight:500; font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--mist); line-height:1.6; }

/* the room */
.room__grid{ display:grid; grid-template-columns:4fr 8fr; gap:clamp(32px,5vw,96px); align-items:end; }
.room__head .lead{ max-width:34ch; }
.room__photo{ margin:0; aspect-ratio:1640/1080; }
.room__photo picture{ display:block; height:100%; }
.room__photo figcaption, .visit-us__photo figcaption{
  position:absolute; left:16px; bottom:16px; z-index:3; font-family:var(--font-ui); font-weight:500;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:#F4F1EA;
  background:rgba(7,12,23,.78); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:8px 14px; border-radius:40px;
}
.room__tour{ display:inline-flex; align-items:center; gap:14px; margin-top:30px; color:var(--on-light);
  font-family:var(--font-ui); font-weight:500; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; }
.room__tour i{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(28,43,69,.35); transition:background .35s, color .35s, border-color .35s; }
.room__tour i svg{ margin-left:2px; }
.room__tour span{ border-bottom:1px solid rgba(28,43,69,.3); padding-bottom:3px; transition:border-color .35s; }
.room__tour:hover i{ background:var(--on-light); color:#F7F3EA; border-color:var(--on-light); }
.room__tour:hover span{ border-color:var(--on-light); }

/* two kitchens */
.kitchens__head{ margin-bottom:clamp(40px,5vw,80px); }
.kitchens__head h2{ max-width:17ch; }
.kitchens__grid{ display:grid; grid-template-columns:7fr 4fr; gap:clamp(24px,5vw,88px); align-items:start; }
.kitchen{ margin:0; }
.kitchen__media{ position:relative; overflow:hidden; border-radius:var(--radius); }
.kitchen--grill .kitchen__media{ aspect-ratio:5/4; }
.kitchen--grill img{ width:100%; height:100%; object-fit:cover; display:block; }
.kitchen--tandoor{ margin-top:clamp(48px,9vw,160px); }
.kitchen--tandoor .kitchen__media{ border:0; }
.kitchen figcaption{ display:grid; grid-template-columns:auto 1fr; column-gap:18px; row-gap:8px; margin-top:24px; }
.kitchen__no{ grid-row:span 2; font-family:var(--font-display); font-style:italic; font-size:18px;
  color:var(--sea); padding-top:5px; }
.kitchen h3{ font-family:var(--font-display); font-weight:400; font-size:clamp(24px,2.2vw,32px);
  line-height:1.1; color:var(--on-light); }
.kitchen p{ font-size:15px; line-height:1.65; color:var(--on-light-mid); max-width:40ch; }

/* the door */
.visit-us__grid{ display:grid; grid-template-columns:7fr 5fr; gap:clamp(32px,5vw,96px); align-items:center; }
.visit-us__photo{ margin:0; position:relative; overflow:hidden; border-radius:var(--radius); aspect-ratio:1392/752; }
.visit-us__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.visit-us .hours{ grid-template-columns:1fr 1fr; text-align:left; }
.visit-us .hours > div:first-child{ grid-column:1 / -1; }
.visit-us__acts{ display:flex; gap:14px; flex-wrap:wrap; margin-top:clamp(28px,3vw,40px); }

@media (max-width:900px){
  .house__grid, .room__grid, .kitchens__grid, .visit-us__grid{ grid-template-columns:1fr; }
  .house__mark{ max-width:200px; }
  .ledger{ grid-template-columns:1fr 1fr; }
  .ledger div:nth-child(3){ padding-left:0; border-left:0; }
  .ledger div:nth-child(n+3){ margin-top:8px; }
  .kitchen--tandoor{ margin-top:0; }
  .kitchen--tandoor .kitchen__media{ max-width:340px; }
  .visit-us .hours{ grid-template-columns:1fr 1fr; text-align:left; }
}
.house{ padding-top:clamp(56px,6vw,96px); }
@media (min-width:901px){ .room__grid{ grid-template-columns:5fr 7fr; } }
.room__head .h-1{ font-size:clamp(36px,3.8vw,60px); }
.kitchens__head .h-1{ font-size:clamp(36px,4.2vw,68px); }

/* --- leaner restaurant page (owner: "not too much information") --- */
.kitchen figcaption{ align-items:baseline; }
.kitchen__no{ grid-row:auto; }
.kitchens__links{ display:flex; flex-wrap:wrap; gap:18px 44px; margin-top:clamp(36px,4vw,60px);
  padding-top:24px; border-top:1px solid var(--line-light); }
.visit-us .hours > div:first-child{ grid-column:auto; }