/* =========================================================
   Default palette — overridden by site.config.js theme
   Palette pulled from the restaurant itself: slate-green brick
   wall, round wood sign, sand, sea and sunset.
   ========================================================= */

/* Self-hosted fonts (SIL Open Font License): Fraunces + DM Sans */
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/fraunces-latin-opsz-normal.woff2") format("woff2-variations"), url("../fonts/fraunces-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/fraunces-latin-ext-opsz-normal.woff2") format("woff2-variations"), url("../fonts/fraunces-latin-ext-opsz-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("../fonts/fraunces-latin-opsz-italic.woff2") format("woff2-variations"), url("../fonts/fraunces-latin-opsz-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/dm-sans-latin-opsz-normal.woff2") format("woff2-variations"), url("../fonts/dm-sans-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/dm-sans-latin-ext-opsz-normal.woff2") format("woff2-variations"), url("../fonts/dm-sans-latin-ext-opsz-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  --slate: #2E3B37;
  --slate-deep: #1F2A27;
  --wood: #B07A4A;
  --wood-dark: #8E5F36;
  /* wood-coloured TEXT needs more contrast than a wood-coloured FILL.
     One value cannot do both, so --wood-text is the darker sibling used
     everywhere wood appears as type. js/main.js re-derives it from
     theme.wood on every build so a client palette stays AA. */
  --wood-text: #5C3A26;
  /* text that sits ON a wood fill: white when wood is dark enough,
     near-black when the client picks a bright accent. Set by main.js. */
  --on-wood: #fff;
  /* wood at 16%, themed. Was a hard-coded brown rgba, which meant a
     client palette left the tag chip and focus ring the old colour. */
  --wood-tint: rgba(176, 122, 74, .16);
  --sand: #F4EEE4;
  --sand-2: #EAE0D0;
  --cream: #FBF8F2;
  --sea: #4E7F7C;
  --sunset: #E08A5B;
  --ink: #1F2A27;
  --muted: #414A47;
  --line: rgba(31, 42, 39, .12);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 18px 40px -22px rgba(31, 42, 39, .35);
  --header-h: 76px;
  /* height of the location tab bar — 0 unless config has "locations" */
  --loc-h: 0px;
  --gutter: clamp(18px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* class rules like .tag were overriding the UA [hidden] rule */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--loc-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.1; margin: 0; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--wood); color: var(--on-wood); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--wood); outline-offset: 3px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 12px 26px;
  border-radius: 999px; border: 1.5px solid transparent;
  font: 600 15px/1.2 var(--sans); letter-spacing: .02em; text-align: center;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn .icon { width: 20px; height: 20px; }
.btn-small { min-height: 40px; padding: 8px 18px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-wood { background: var(--wood); color: var(--on-wood); }
.btn-wood:hover { background: var(--wood-dark); }
.btn-ghost { background: rgba(251, 248, 242, .12); color: #fff; border-color: rgba(251, 248, 242, .6); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: rgba(251, 248, 242, .24); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--cream); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: var(--loc-h) 0 auto 0; z-index: 50;
  height: var(--header-h);
  color: #fff;
  transition: background-color .3s, color .3s, box-shadow .3s;
}
.site-header.scrolled {
  background: rgba(251, 248, 242, .94);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
  backdrop-filter: blur(10px);
}
.header-inner { height: 100%; display: flex; align-items: center; gap: 24px; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand-mark { width: 46px; height: 46px; flex: none; }
/* real logo file: drop it at images/logo.png and swap the mark for <img class="brand-logo"> */
.brand-logo { height: 40px; width: auto; flex: none; }
.brand-logo.big { height: 62px; }
@media (max-width: 640px) { .brand-logo { height: 32px; } .brand-logo.big { height: 48px; } }
/* logo mark follows the config palette instead of hardcoded hex */
.brand-mark .mark-bg { fill: var(--wood); }
.brand-mark .mark-ring, .brand-mark .mark-wave { stroke: var(--sand); }
.brand-mark text { fill: var(--sand); }
.brand-mark.big { width: 76px; height: 76px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--serif); font-size: 21px; font-weight: 500; }
.brand-sub { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }

.main-nav { display: flex; gap: 28px; }
.main-nav a { text-decoration: none; font-size: 15px; font-weight: 500; position: relative; padding: 6px 0; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.main-nav a:hover::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 14px; }
.lang { display: inline-flex; border: 1.5px solid currentColor; border-radius: 999px; padding: 2px; opacity: .9; }
.lang button {
  border: 0; background: transparent; color: inherit; cursor: pointer;
  font: 600 12px/1 var(--sans); letter-spacing: .08em;
  padding: 7px 10px; border-radius: 999px;
}
.lang button[aria-pressed="true"] { color: var(--slate); background: #fff; }
.site-header.scrolled .lang button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }

.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; }
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
  display: block; width: 22px; height: 1.8px; background: currentColor; margin: 0 auto; position: relative; transition: transform .25s, opacity .25s;
}
.nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle .bars::before { top: -7px; }
.nav-toggle .bars::after { top: 7px; }
.nav-open .nav-toggle .bars { background: transparent; }
.nav-open .nav-toggle .bars::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle .bars::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex; align-items: flex-end;
  color: #fff;
  overflow: hidden;
  background: var(--slate-deep);
}
.hero-media { position: absolute; inset: 0; }
.hero-illustration, .hero-media .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(31,42,39,.6) 0%, rgba(31,42,39,0) 30%),
    linear-gradient(0deg, rgba(31,42,39,.92) 0%, rgba(31,42,39,.8) 34%, rgba(31,42,39,.55) 55%, rgba(31,42,39,.18) 72%, rgba(31,42,39,0) 88%);
}
/* keeps the hero text readable over a busy photo */
.hero-content { position: relative; z-index: 1; text-shadow: 0 1px 24px rgba(31, 42, 39, .35); }
.hero-content::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -60px -12% -40px -12%;
  background: radial-gradient(58% 62% at 26% 58%, rgba(31,42,39,.62) 0%, rgba(31,42,39,.28) 55%, rgba(31,42,39,0) 78%);
}
.hero .eyebrow-light { color: #FBD9AE; text-shadow: 0 2px 10px rgba(31,42,39,.9), 0 0 26px rgba(31,42,39,.7); }
.hero-content { position: relative; padding-top: calc(var(--header-h) + var(--loc-h) + 60px); padding-bottom: clamp(48px, 9vh, 96px); }
.hero h1 { font-size: clamp(42px, 7.2vw, 92px); max-width: 13ch; font-weight: 400; }
.hero-sub { font-size: clamp(17px, 1.6vw, 20px); max-width: 46ch; margin: 22px 0 32px; opacity: .92; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-rating { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; font-size: 14px; text-decoration: none; opacity: .92; }
.hero-rating:hover { opacity: 1; text-decoration: underline; }

.stars { color: #F2C27B; letter-spacing: 2px; font-size: 14px; }

.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--wood-text); margin-bottom: 16px;
}
.eyebrow-light { color: #F2C79A; }

/* ---------- Today strip ---------- */
.today { background: var(--slate); color: var(--sand); }
.today-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-block: 18px; font-size: 15px; }
.today-item { display: flex; align-items: center; gap: 10px; }
.today .icon { width: 20px; height: 20px; color: #F2C79A; flex: none; }
.today strong { font-weight: 600; color: #fff; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #9FB3AD; flex: none; }
.dot.is-open { background: #7FD49B; box-shadow: 0 0 0 4px rgba(127, 212, 155, .2); }
.dot.is-closed { background: var(--sunset); }

/* ---------- Sections ---------- */
.section { padding-block: clamp(72px, 11vw, 130px); }
.section-head { margin-bottom: clamp(36px, 5vw, 60px); }
.section-head h2 { font-size: clamp(34px, 4.6vw, 58px); max-width: 18ch; }
.section-head.center { text-align: center; }
.section-head.center h2 { margin-inline: auto; }
.section-head .lede { color: var(--muted); max-width: 52ch; margin: 18px auto 0; }
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 6vw, 90px); align-items: start; }
.split-end { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.story-copy { color: var(--muted); font-size: 18px; }
.motto { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--ink); margin-top: 22px; }
.motto-tr { display: block; font-family: var(--sans); font-style: normal; font-size: 13px; color: var(--muted); letter-spacing: .04em; margin-top: 4px; }

/* ---------- Moments ---------- */
.moment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.5vw, 32px); }
.moment h3 { font-size: 28px; margin: 22px 0 8px; }
.moment p { color: var(--muted); }
.moment-media {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
}
.moment-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.moment-time {
  position: absolute; left: 16px; top: 16px; z-index: 1;
  background: rgba(251, 248, 242, .92); color: var(--ink);
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  padding: 6px 12px; border-radius: 999px;
}

/* Illustrated fallbacks (show only when a photo is missing) */
.tone-morning { background:
  radial-gradient(circle at 70% 30%, #FFE7B8 0 12%, transparent 13%),
  radial-gradient(120% 80% at 70% 30%, #F6D6A8 0%, transparent 60%),
  linear-gradient(180deg, #F3E3C8 0%, #E8CFA8 55%, #7FA39D 56%, #5F8C88 70%, #E6D2B2 71%, #D7BD97 100%); }
.tone-afternoon { background:
  radial-gradient(circle at 30% 22%, #FFF3D6 0 9%, transparent 10%),
  linear-gradient(180deg, #CFE3DC 0%, #A9CBC4 52%, #4E7F7C 53%, #3E6B68 68%, #E9D8BC 69%, #D8C09C 100%); }
.tone-sunset { background:
  radial-gradient(circle at 50% 56%, #FBE0B4 0 11%, transparent 12%),
  radial-gradient(90% 60% at 50% 56%, rgba(255,214,160,.8) 0%, transparent 60%),
  linear-gradient(180deg, #3A3F45 0%, #8A6A58 30%, #E3A174 52%, #F2C79A 56%, #6E8E86 57%, #3E625F 72%, #CDB28C 73%, #B8976E 100%); }
.moment-media img + .moment-time { z-index: 2; }

/* ---------- Menu ---------- */
.menu-section { background: var(--sand); }
.menu-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 40px; }
.menu-tabs button {
  border: 1.5px solid var(--line); background: transparent; color: var(--ink);
  font: 600 14px/1 var(--sans); letter-spacing: .03em;
  padding: 13px 20px; border-radius: 999px; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.menu-tabs button:hover { border-color: var(--ink); }
.menu-tabs button[aria-selected="true"] { background: var(--slate); border-color: var(--slate); color: var(--sand); }

.menu-panel { max-width: 960px; margin: 0 auto; }
.menu-group + .menu-group { margin-top: 44px; }
.menu-group h3 { font-size: 24px; margin-bottom: 8px; color: var(--slate); }
.menu-group .group-note { color: var(--muted); font-size: 15px; margin-bottom: 14px; }
.menu-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
.menu-item { padding: 20px 0; border-bottom: 1px solid var(--line); }
.menu-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; }
.menu-item-name { font-family: var(--serif); font-size: 21px; font-weight: 500; }
.menu-item p { color: var(--muted); font-size: 15px; margin: 6px 0 0; }
.menu-items.simple .menu-item { padding: 14px 0; }
/* Dish photos in the menu (optional per item: menu[].groups[].items[].photo) */
.menu-item.has-photo { display: flex; align-items: flex-start; gap: 18px; }
.menu-item-body { flex: 1; min-width: 0; }
.menu-item-photo { flex: none; width: 120px; height: 120px; object-fit: cover; border-radius: 10px; background: var(--sand2, #e9dfcf); }
@media (max-width: 720px) { .menu-item-photo { width: 88px; height: 88px; } }
.menu-items.simple .menu-item-name { font-size: 18px; }

.tag { display: inline-block; font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; }
.tag-pop { background: var(--wood-tint); color: var(--wood-text); }
.tag-v { background: rgba(78, 127, 124, .16); color: #20413F; }   /* was #2F5E5B: 3.41:1 on the menu sand, fails AA. 5.2:1 now */
.menu-legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; margin-top: 40px; font-size: 14px; color: var(--muted); }
.legend-note { flex-basis: 100%; text-align: center; }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, clamp(150px, 17vw, 230px)); grid-template-areas: "a a b c" "a a d c" "e e d f"; gap: 14px; }
.g { position: relative; margin: 0; border-radius: var(--radius-sm); overflow: hidden; }
.g img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.g:hover img { transform: scale(1.04); }
.g1 { grid-area: a; } .g2 { grid-area: b; } .g3 { grid-area: c; } .g4 { grid-area: d; } .g5 { grid-area: e; } .g6 { grid-area: f; }
.g { display: grid; place-items: center; }
.g .ph { width: 56px; height: 56px; color: rgba(251, 248, 242, .85); }
.g.tone-2 .ph, .g.tone-5 .ph { color: rgba(46, 59, 55, .55); }
.tone-1 { background: linear-gradient(160deg, #2E3B37 0%, #4E7F7C 50%, #E3A174 85%, #F2C79A 100%); }
.tone-2 { background: linear-gradient(160deg, #F4EEE4, #E6D5BC); }
.tone-3 { background: linear-gradient(180deg, #7FA39D, #4E7F7C); }
.tone-4 { background: linear-gradient(180deg, #8A6A58 0%, #E08A5B 60%, #F2C79A 100%); }
.tone-5 { background: linear-gradient(160deg, #EFE3CF, #D9BE98); }
.tone-6 { background: linear-gradient(160deg, #3E4B46, #1F2A27); }

/* ---------- Reviews ---------- */
.reviews { background: var(--slate); color: var(--sand); }
.reviews h2 { color: #fff; }
.rating-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; max-width: 920px; margin: 0 auto; }
.rating-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 34px 20px; border-radius: var(--radius);
  border: 1px solid rgba(244, 238, 228, .16);
  background: rgba(244, 238, 228, .04);
  text-decoration: none; text-align: center;
  transition: background-color .2s, border-color .2s;
}
.rating-card:hover { background: rgba(244, 238, 228, .1); border-color: rgba(244, 238, 228, .35); }
.rating-source { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; opacity: .75; }
.rating-score { font-family: var(--serif); font-size: 56px; line-height: 1; color: #fff; }
.rating-count { font-size: 14px; opacity: .8; }
.mentions { text-align: center; margin-top: 48px; }
.mentions p { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: 14px; }
.mentions ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mentions li { border: 1px solid rgba(244, 238, 228, .28); border-radius: 999px; padding: 8px 16px; font-size: 15px; }

/* ---------- Reserve ---------- */
.reserve { background: var(--sand-2); }
.reserve-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.reserve-copy h2 { font-size: clamp(34px, 4.6vw, 58px); margin-bottom: 20px; }
.reserve-copy p:not(.eyebrow) { color: var(--muted); font-size: 18px; max-width: 42ch; }
.reserve-direct { margin-top: 26px; }
.reserve-form {
  background: var(--cream); border-radius: var(--radius); padding: clamp(24px, 3.5vw, 40px);
  box-shadow: var(--shadow); display: grid; gap: 18px;
}
.field { display: grid; gap: 6px; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1.3fr 1fr .8fr; gap: 12px; }
.field label { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; font: 400 16px/1.4 var(--sans); color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; min-height: 48px;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--wood); box-shadow: 0 0 0 3px var(--wood-tint); }
.form-error { color: #A1452A; font-size: 14px; margin: 0; }
.form-fine { font-size: 13px; color: var(--muted); text-align: center; margin: 0; }

/* ---------- Visit ---------- */
.visit-inner { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 6vw, 80px); align-items: stretch; }
.visit-info h2 { font-size: clamp(34px, 4.6vw, 58px); margin-bottom: 30px; }
.info-list { margin: 0 0 32px; display: grid; gap: 20px; }
.info-list div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.info-list dt { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--wood-text); padding-top: 4px; }
.info-list dd { margin: 0; }
.visit-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.map-frame { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 420px; max-height: 560px; background: var(--sand-2); box-shadow: var(--shadow); }
.map-frame iframe { position: relative; z-index: 1; }
.map-fallback { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; text-align: center; color: var(--muted); font-size: 15px; }
.map-fallback svg { width: 40px; height: 40px; margin: 0 auto; color: var(--wood-text); }
.map-frame iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; filter: saturate(.85); }

/* ---------- FAQ ---------- */
.faq { background: var(--sand); }
.faq-inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(28px, 6vw, 90px); }
.faq-list details { border-bottom: 1px solid var(--line); padding: 22px 0; }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px;
  font-family: var(--serif); font-size: 22px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-family: var(--sans); font-size: 26px; line-height: 1; color: var(--wood-text); transition: transform .25s; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { color: var(--muted); margin: 12px 0 0; max-width: 60ch; }

/* ---------- Footer ---------- */
.site-footer { background: var(--slate-deep); color: rgba(244, 238, 228, .82); padding-top: 72px; }
.footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 56px; }
.footer-tagline { font-family: var(--serif); font-size: 22px; color: var(--sand); max-width: 24ch; margin-top: 20px; }
.footer-col h3 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #F2C79A; margin-bottom: 16px; }
.footer-col p { margin: 0 0 8px; font-size: 15px; }
.nowrap { white-space: nowrap; }
.footer-col a { text-decoration: none; }
.footer-col a:hover { text-decoration: underline; color: #fff; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; border-top: 1px solid rgba(244, 238, 228, .12); padding-block: 24px; font-size: 13px; opacity: .7; }

/* ---------- Locations (only when config has a "locations" list) ---------- */
.has-locations { --loc-h: 44px; }
.loc-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 51; height: var(--loc-h);
  background: var(--slate-deep); color: var(--sand);
  border-bottom: 1px solid rgba(244, 238, 228, .12);
}
.loc-bar-inner { height: 100%; display: flex; align-items: center; justify-content: center; gap: 16px; }
.loc-bar-label { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.loc-tabs { display: flex; gap: 4px; height: 100%; }
.loc-tab {
  display: inline-flex; align-items: center; gap: 8px; height: 100%;
  padding: 0 16px; min-width: 44px; text-decoration: none; font-size: 14px; font-weight: 600;
  color: rgba(244, 238, 228, .8); border-bottom: 2px solid transparent;
}
.loc-tab:hover { color: #fff; }
.loc-tab[aria-current="page"] { color: #fff; border-bottom-color: #F2C79A; }
.loc-tab:focus-visible { outline-offset: -3px; outline-color: #F2C79A; }

.locations { margin-bottom: clamp(56px, 8vw, 96px); }
.location-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.loc-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line);
}
.loc-card.is-current { border-color: var(--wood); box-shadow: 0 0 0 1px var(--wood), var(--shadow); }
.loc-card h3 { font-size: clamp(26px, 3vw, 34px); }
.loc-card-status { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); margin: 0; }
.loc-card-info { margin: 0; display: grid; gap: 10px; }
.loc-card-info div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.loc-card-info dt { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--wood-text); padding-top: 4px; }
.loc-card-info dd { margin: 0; font-size: 15px; }
.loc-card-rating { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; text-decoration: none; color: var(--ink); }
.loc-card-rating .stars { color: var(--wood-text); }
.loc-card-rating:hover { text-decoration: underline; }
.loc-card-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.loc-card-switch { font-weight: 600; font-size: 15px; color: var(--wood-text); margin-top: auto; }
.loc-card-current { font-size: 14px; font-weight: 600; color: var(--wood-text); margin: auto 0 0; }
.footer-loc { margin-bottom: 16px !important; }
.footer-loc strong { color: var(--sand); font-weight: 600; }

@media (max-width: 720px) {
  .loc-bar-label { display: none; }
  .loc-bar-inner { padding-inline: 0; }
  .loc-tabs { width: 100%; }
  .loc-tab { flex: 1; justify-content: center; padding: 0 8px; }
  .location-grid { grid-template-columns: 1fr; }
  .loc-card { padding: 22px; }
  .loc-card-info div { grid-template-columns: 1fr; gap: 2px; }
}
@media print { .loc-bar { display: none; } }

/* ---------- Mobile action bar ---------- */
.action-bar { display: none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1000px) {
  .main-nav {
    position: fixed; inset: calc(var(--header-h) + var(--loc-h)) 0 auto 0;
    flex-direction: column; gap: 0;
    background: var(--cream); color: var(--ink);
    padding: 8px var(--gutter) 24px;
    box-shadow: 0 20px 30px -20px rgba(31,42,39,.35);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .main-nav a { font-family: var(--serif); font-size: 26px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .main-nav a::after { display: none; }
  .nav-open .main-nav { opacity: 1; transform: none; visibility: visible; }
  .nav-open .site-header { background: var(--cream); color: var(--ink); }
  .nav-open .site-header .lang button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
  .nav-toggle { display: block; }

  .split, .reserve-inner, .visit-inner, .faq-inner { grid-template-columns: 1fr; }
  .moment-grid { grid-template-columns: 1fr 1fr; }
  .moment:last-child { grid-column: span 2; }
  .moment:last-child .moment-media { aspect-ratio: 16 / 9; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 720px) {
  :root { --header-h: 66px; }
  body { font-size: 16px; padding-bottom: 72px; }
  .brand-mark { width: 40px; height: 40px; }
  .brand-sub { display: none; }
  .brand-name { font-size: 19px; }
  .header-reserve { display: none; }
  .header-actions { gap: 6px; }

  .hero { min-height: 92svh; }
  .hero-cta .btn { flex: 1 1 auto; }
  .today-inner { flex-direction: column; gap: 10px; }

  .moment-grid { grid-template-columns: 1fr; }
  .moment:last-child { grid-column: auto; }
  .moment-media, .moment:last-child .moment-media { aspect-ratio: 4 / 3; }

  .menu-tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 8px; scrollbar-width: none; }
  .menu-tabs::-webkit-scrollbar { display: none; }
  .menu-tabs button { flex: none; }
  .menu-items { grid-template-columns: 1fr; }

  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 150px 150px 150px; grid-template-areas: "a a" "b c" "d e" "f f"; gap: 10px; }

  .rating-grid { grid-template-columns: 1fr; }
  .rating-card { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; }
  .rating-card .stars { display: none; }
  .rating-source { flex: 1; text-align: left; }
  .rating-count { min-width: 92px; text-align: right; }
  .rating-score { font-size: 38px; }

  .field-row { grid-template-columns: 1fr 1fr; }
  .field-row .field:first-child { grid-column: span 2; }
  .info-list div { grid-template-columns: 1fr; gap: 4px; }
  .map-frame, .map-frame iframe { min-height: 320px; }

  .footer-inner { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }

  .action-bar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; inset: auto 0 0 0; z-index: 60;
    background: var(--cream); border-top: 1px solid var(--line);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    gap: 8px;
  }
  .action-bar a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; border-radius: 999px; text-decoration: none;
    font-weight: 600; font-size: 15px; color: var(--ink);
  }
  .action-bar svg { width: 18px; height: 18px; }
  .action-bar .bar-primary { background: var(--wood); color: var(--on-wood); }
}

/* =========================================================
   Live tonight — a standing headline for a venue whose
   line-up changes faster than anyone will edit a website.
   Config: features.live, features.liveLink, copy live.*
   ========================================================= */
.live {
  position: relative; overflow: hidden;
  background: var(--slate-deep); color: var(--sand);
  text-align: center;
  padding-block: clamp(56px, 9vw, 104px) 0;
}
.live-glow {
  position: absolute; inset: -30% -10% auto -10%; height: 120%;
  background:
    radial-gradient(46% 60% at 30% 20%, rgba(181, 23, 99, .55) 0%, transparent 68%),
    radial-gradient(42% 55% at 72% 10%, rgba(96, 38, 168, .45) 0%, transparent 68%);
  pointer-events: none;
}
.live-inner { position: relative; max-width: 900px; }
.live-badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid rgba(244, 238, 228, .28); background: rgba(0, 0, 0, .25);
}
.live-day { opacity: .72; }
.live-day:not(:empty)::before { content: "· "; }
.live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #FF4D8D; flex: none;
  box-shadow: 0 0 0 0 rgba(255, 77, 141, .7); animation: live-pulse 2s infinite;
}
@keyframes live-pulse {
  70% { box-shadow: 0 0 0 11px rgba(255, 77, 141, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 141, 0); }
}
.live h2 {
  font-size: clamp(36px, 6.4vw, 76px); line-height: 1.02; margin-top: 22px;
  text-wrap: balance;
}
.live-sub {
  margin: 18px auto 0; max-width: 46ch; font-size: clamp(17px, 1.6vw, 20px);
  color: rgba(244, 238, 228, .84);
}
.btn-lg { font-size: 17px; padding: 18px 34px; }
.live-cta { margin-top: 30px; }
.live-note { margin-top: 16px; font-size: 14px; color: rgba(244, 238, 228, .66); }
.live-marquee {
  position: relative; margin-top: clamp(44px, 6vw, 72px);
  border-top: 1px solid rgba(244, 238, 228, .16);
  border-bottom: 1px solid rgba(244, 238, 228, .16);
  padding-block: 16px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.live-marquee-track {
  display: flex; width: max-content; gap: 0;
  animation: live-scroll 34s linear infinite;
}
.live-marquee-track span {
  padding-right: 2.5rem; white-space: nowrap;
  font-family: var(--serif); font-size: clamp(20px, 2.6vw, 30px);
  color: rgba(244, 238, 228, .42);
}
@keyframes live-scroll { to { transform: translateX(-50%); } }
/* blank live.marquee hides the strip; the section takes its bottom padding back */
.live:has(.live-marquee[hidden]) { padding-bottom: clamp(44px, 5vw, 64px); }
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
  /* A marquee that cannot scroll is not a marquee — frozen mid-loop it is one
     sentence clipped at both edges. For a visitor who has asked for less motion,
     drop the scroll and the edge fade and set the same words as one centred line
     that wraps. Everybody sees the phrases; nobody sees a broken strip. */
  .live-marquee { -webkit-mask-image: none; mask-image: none; padding-inline: var(--gutter); }
  .live-marquee-track { animation: none; width: auto; justify-content: center; flex-wrap: wrap; }
  .live-marquee-track span { white-space: normal; padding-right: 0; text-align: center; }
  .live-marquee-track span + span { display: none; }   /* the second copy exists only for the loop */
}

/* =========================================================
   Windows contrast themes / forced-colors mode
   The OS replaces our palette with system colours and drops every
   gradient, so the dark sections come through as plain Canvas. That is
   the visitor's setting doing its job — we don't fight it. We only put
   the structure back, so sections still read as separate blocks.
   ========================================================= */
@media (forced-colors: active) {
  .today, .live, .reviews, .site-footer { border-block: 1px solid CanvasText; }
  .rating-card, .moment-media, .g, .map-frame { border: 1px solid CanvasText; }
  .live-glow { display: none; }
}

/* =========================================================
   Legal pages (terms.html · privacy.html · accessibility.html)
   Rendered by js/legal.js from config section 11.
   ========================================================= */
.legal-header { position: static; background: var(--slate-deep); color: #fff; }
.legal-header .lang button[aria-pressed="true"] { color: var(--slate-deep); background: #fff; }
.legal-page { background: var(--cream); padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 96px); }
.legal-wrap { max-width: 760px; }
.legal-page h1 { font-family: var(--serif); font-size: clamp(32px, 5vw, 46px); line-height: 1.1; color: var(--ink); }
.legal-intro { margin-top: 14px; color: var(--muted); font-size: 17px; }
.legal-body h2 { font-family: var(--serif); font-size: 23px; color: var(--slate); margin-top: 38px; }
.legal-body p { margin-top: 12px; font-size: 17px; line-height: 1.7; color: var(--ink); }
.legal-body p a { color: var(--wood-text); }
.legal-footer { padding-top: 0; }
.legal-footer .footer-base { border-top: 0; }
.legal-links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.legal-links a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.legal-links a:hover { color: #fff; }

/* features.reservations: false — form goes, the contact block stays */
.reserve.no-form .reserve-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.reserve.no-form .reserve-copy p { margin-inline: auto; }
.reserve.no-form .reserve-direct { justify-content: center; }
.reserve-direct { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.reserve-message { display: inline-flex; }

/* =========================================================
   Motion & craft layer — proposed 27 Sep 2026 (Taste + Motion audit)
   One entrance moment (hero), one quiet scroll reveal, press feedback,
   custom easing. Everything is off under prefers-reduced-motion, and
   nothing is hidden unless main.js has confirmed it can reveal it
   (html.motion-ok), so a failed script never leaves a blank page.
   ========================================================= */
:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);      /* fast start, soft landing */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
}
.btn { transition: background-color .18s var(--ease-out), color .18s var(--ease-out), border-color .18s var(--ease-out), transform .18s var(--ease-out); }
.btn:active { transform: scale(.97); transition-duration: .08s; }
.main-nav a::after { transition: transform .28s var(--ease-out); }
.g img { transition: transform .9s var(--ease-out); }

/* Section eyebrows: Fraunces italic in sentence case instead of tracked caps.
   The hero keeps its caps line so the page has one loud label, not nine. */
.eyebrow:not(.hero .eyebrow) {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 19px; letter-spacing: 0; text-transform: none;
  font-variation-settings: "opsz" 24;
}
h1, h2, .hero-sub, .story p { text-wrap: balance; }
.today strong, .rating-number, time { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: no-preference) {
  /* Hero: one deliberate staggered entrance on first paint. */
  .motion-ok .hero-content > * { opacity: 0; transform: translateY(14px); animation: rise .9s var(--ease-out) forwards; }
  .motion-ok .hero-content > :nth-child(1) { animation-delay: .05s; }
  .motion-ok .hero-content > :nth-child(2) { animation-delay: .14s; }
  .motion-ok .hero-content > :nth-child(3) { animation-delay: .26s; }
  .motion-ok .hero-content > :nth-child(4) { animation-delay: .36s; }
  .motion-ok .hero-content > :nth-child(n+5) { animation-delay: .44s; }
  .motion-ok .hero-media .photo { animation: settle 1.8s var(--ease-out) both; }
  @keyframes rise { to { opacity: 1; transform: none; } }
  @keyframes settle { from { transform: scale(1.06); } to { transform: none; } }

  /* Scroll: each block drifts in once as it enters. No stagger on lists. */
  .motion-ok [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
  .motion-ok [data-reveal].is-in { opacity: 1; transform: none; }
}

/* =========================================================
   LIVE SKY — the page follows the real sky over the restaurant.
   main.js sets html[data-sky] from today's actual sunrise/sunset at
   the client's coordinates (dawn · day · golden · dusk · night) and
   re-checks every minute. Preview any phase with ?sky=golden etc.
   Text colours are unchanged except at night, where the light
   sections flip to a dark palette built from the client's own slate.
   ========================================================= */

/* Hero: one tinted layer per phase between the photo and the shade,
   so the shade keeps protecting the headline. Cross-fades slowly. */
.sky { position: absolute; inset: 0; pointer-events: none; }
.sky > span { position: absolute; inset: 0; opacity: 0; transition: opacity 2.4s var(--ease-in-out); }
/* Each phase is a COLOUR-blend layer: it re-hues the photo and shade but
   keeps their brightness, so the headline's contrast does not move. The
   sun glow sits on the right, away from the text. */
.sky-dawn   { background: linear-gradient(110deg, #FFB98A 0%, #FFD7B0 45%, #9EC3DA 100%); mix-blend-mode: color; }
.sky-golden { background: linear-gradient(0deg, #FF8A2A 0%, #FFB040 38%, #F58A5A 72%, #B8648A 100%); mix-blend-mode: color; }
.sky-dusk   { background: linear-gradient(0deg, #E07A8A 0%, #8A5CC0 45%, #2E3F8C 100%); mix-blend-mode: color; }
.sky-night  { background: linear-gradient(180deg, #1A2A6C 0%, #22306E 60%, #3A2F5A 100%); mix-blend-mode: color; }
[data-sky="dawn"]   .sky-dawn   { opacity: .55 !important; }
[data-sky="golden"] .sky-golden { opacity: .7 !important; }
[data-sky="dusk"]   .sky-dusk   { opacity: .7 !important; }
[data-sky="night"]  .sky-night  { opacity: .65 !important; }
.sky-sun { position: absolute; width: 38vmax; height: 38vmax; left: var(--sun-x, 78%); top: var(--sun-y, 70%);
  transform: translate(-50%, -50%); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255, 196, 120, .75) 0%, rgba(255, 140, 70, .30) 30%, transparent 62%);
  mix-blend-mode: screen; transition: opacity 2.4s var(--ease-in-out), left 2.4s, top 2.4s; }
[data-sky="dawn"]   .sky-dawn,
[data-sky="golden"] .sky-golden,
[data-sky="dusk"]   .sky-dusk,
[data-sky="night"]  .sky-night { opacity: 1; }
[data-sky="golden"] .sky-sun { opacity: 1; }
[data-sky="dusk"] .sky-sun { opacity: .35; }
[data-sky="dawn"]   .sky-sun { opacity: .6; }

/* Today strip: a live sun arc in place of the sunset icon */
.sun-arc { width: 34px; height: 20px; flex: none; overflow: visible; color: #F2C79A; }
.sun-arc .track { fill: none; stroke: currentColor; stroke-opacity: .35; stroke-width: 1.4; stroke-dasharray: 2 3; }
.sun-arc .ground { stroke: currentColor; stroke-opacity: .6; stroke-width: 1.4; stroke-linecap: round; }
.sun-arc .sun { fill: #FFD18A; transition: cx 1.2s var(--ease-out), cy 1.2s var(--ease-out), fill 1.2s; }
[data-sky="night"] .sun-arc .sun { fill: #E9ECF5; }
[data-sky="golden"] .today-item#today-sunset strong { color: #FFD18A; }

/* The light sections shift with the light. Ink stays dark, so AA holds. */
body, .moments, .menu-section, .gallery-section, .reserve, .visit, .faq, .reserve-form, .map-frame {
  transition: background-color 2.4s var(--ease-in-out), color 2.4s var(--ease-in-out);
}
[data-sky="dawn"] body { background: color-mix(in srgb, var(--cream) 94%, #FFD9B8); }
[data-sky="dawn"] :is(.menu-section, .faq) { background: color-mix(in srgb, var(--sand) 92%, #FFCFA8); }
[data-sky="golden"] body { background: color-mix(in srgb, var(--cream) 88%, #FFC08A); }
[data-sky="golden"] :is(.menu-section, .faq) { background: color-mix(in srgb, var(--sand) 84%, #F4A06A); }
[data-sky="golden"] .reserve { background: color-mix(in srgb, var(--sand-2) 86%, #F09A70); }
[data-sky="dusk"] body { background: color-mix(in srgb, var(--cream) 90%, #C9B8E0); }
[data-sky="dusk"] :is(.menu-section, .faq) { background: color-mix(in srgb, var(--sand) 88%, #B8A6D6); }
[data-sky="dusk"] .reserve { background: color-mix(in srgb, var(--sand-2) 90%, #B8A6D6); }

/* Night: the whole page goes dark, built from the client's own slate. */
[data-sky="night"] body {
  --ink: #F1EADF; --muted: #CFC7BA; --line: rgba(241, 234, 223, .16);
  --cream: color-mix(in srgb, var(--slate-deep) 82%, #000);
  --wood-text: var(--wood-night, #E7B98C);
  --wood-tint: rgba(231, 185, 140, .16);
  background: var(--cream); color: var(--ink);
}
[data-sky="night"] :is(.moments, .gallery-section, .visit) { background: color-mix(in srgb, var(--slate-deep) 82%, #000); }
[data-sky="night"] :is(.menu-section, .faq) { background: color-mix(in srgb, var(--slate-deep) 92%, #fff); }
[data-sky="night"] .reserve { background: color-mix(in srgb, var(--slate) 70%, #000); }
[data-sky="night"] .reserve-form { background: color-mix(in srgb, var(--slate-deep) 90%, #fff); }
[data-sky="night"] .map-frame { background: color-mix(in srgb, var(--slate) 80%, #000); }
[data-sky="night"] .field :is(input, select, textarea) { background: color-mix(in srgb, var(--slate-deep) 75%, #000); color-scheme: dark; }
[data-sky="night"] .site-header.scrolled { background: color-mix(in srgb, var(--slate-deep) 90%, transparent); }
[data-sky="night"] .moment-time { color: #1F2A27; }
[data-sky="night"] .menu-group h3 { color: var(--ink); }
[data-sky="golden"] .tag-pop, [data-sky="dusk"] .tag-pop { color: color-mix(in srgb, var(--wood-text) 86%, #000); }
[data-sky="night"] .menu-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--slate-deep); }
[data-sky="night"] .tag-v { background: rgba(127, 190, 185, .16); color: #A9DCD6; }
[data-sky="night"] .loc-card { background: color-mix(in srgb, var(--slate-deep) 90%, #fff); }
[data-sky="night"] .btn-outline:hover { color: var(--slate-deep); }

@media (prefers-reduced-motion: reduce) {
  .sky > span, .sky-sun, .sun-arc .sun, body, .moments, .menu-section, .gallery-section,
  .reserve, .visit, .faq, .reserve-form, .map-frame { transition: none; }
}

/* =========================================================
   Surf page (surf.html) + the "Next tide" chip  (28 Sep 2026)
   Built from the page tokens only, so Live Sky carries it through the
   day: the night remap of --cream/--ink/--muted/--wood-text applies here too.
   ========================================================= */
.today a.today-tide { color: inherit; text-decoration: none; }
.today a.today-tide:hover span span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.surf-page { background: transparent; padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 96px); min-height: 70vh; }
.surf-wrap { max-width: 980px; }
.surf-page h1 { font-family: var(--serif); font-size: clamp(34px, 5vw, 54px); line-height: 1.08; color: var(--ink); max-width: 16ch; margin-top: 6px; }
.surf-lede { color: var(--muted); margin-top: 14px; max-width: 56ch; }
.surf-off { margin-top: 24px; }
.surf-off a { color: var(--wood-text); }
.tide-now { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(20px, 3vw, 40px); align-items: center;
  background: var(--sand); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); margin-top: clamp(28px, 4vw, 44px); }
.tide-next { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; color: var(--ink); }
.tide-trend { color: var(--muted); margin-top: 6px; }
.swell-now { margin-top: 16px; color: var(--ink); }
.swell-now span { color: var(--wood-text); font-weight: 600; margin-right: 4px; }
.swell-now strong { font-weight: 600; }
.tide-curve { width: 100%; height: auto; display: block; overflow: visible; }
.tide-curve .tc-fill { fill: var(--wood-tint); }
.tide-curve .tc-line { fill: none; stroke: var(--wood-text); stroke-width: 2.5; stroke-linejoin: round; }
.tide-curve .tc-now { stroke: var(--ink); stroke-dasharray: 3 5; }
.tide-curve .tc-dot { fill: var(--ink); stroke: var(--sand); stroke-width: 3; }
.tide-curve text { fill: var(--muted); font-size: 13px; font-family: var(--sans); }
.swell-outlook { font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2.1vw, 23px); line-height: 1.4; color: var(--ink); margin-top: 26px; max-width: 60ch; }
.surf-week-title { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 28px); color: var(--ink); margin-top: clamp(32px, 4vw, 48px); }
.surf-week { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.surf-day { display: grid; grid-template-columns: 7.5em 12em 1fr; gap: 6px 20px; align-items: baseline; padding: 13px 4px; border-bottom: 1px solid var(--line); color: var(--ink); }
.surf-day.is-today .sd-day { color: var(--wood-text); }
.sd-day { font-weight: 600; }
.sd-swell { color: var(--ink); }
.sd-tides { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--muted); }
.sd-tides .arw { color: var(--wood-text); margin-right: 5px; font-size: .8em; }
.surf-notes { margin-top: 26px; display: grid; gap: 6px; }
.surf-notes p { font-size: 14px; color: var(--muted); max-width: 80ch; }
@media (max-width: 760px) {
  .tide-now { grid-template-columns: 1fr; }
  .surf-day { grid-template-columns: 1fr auto; }
  .sd-swell { text-align: right; }
  .sd-tides { grid-column: 1 / -1; gap: 4px 12px; font-size: 15px; }
}
[data-sky="dawn"] .tide-now { background: color-mix(in srgb, var(--sand) 92%, #FFCFA8); }
[data-sky="golden"] .tide-now { background: color-mix(in srgb, var(--sand) 84%, #F4A06A); }
[data-sky="dusk"] .tide-now { background: color-mix(in srgb, var(--sand) 88%, #B8A6D6); }
[data-sky="night"] .tide-now { background: color-mix(in srgb, var(--slate-deep) 92%, #fff); }
[data-sky="night"] .tide-curve .tc-dot { stroke: color-mix(in srgb, var(--slate-deep) 92%, #fff); }

/* =========================================================================
   Dato tico del día — the Costa Rica fact line above the footer (js/cr-fact.js).
   No ground of its own: it sits on the page's own background, so Live Sky's
   phase tints and night tokens carry it, and it reads apart from the sand FAQ
   above and the dark footer below.
   ========================================================================= */
.cr-fact { color: var(--ink); border-top: 1px solid var(--line); }
.cr-fact-inner { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; column-gap: 14px; row-gap: 6px; padding-block: 26px; }
.cr-fact-icon { width: 18px; height: 18px; color: var(--wood-text); align-self: center; }
.cr-fact-label { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--wood-text); margin: 0; white-space: nowrap; line-height: 1.4; }
.cr-fact-text { font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--ink); margin: 0; max-width: 72ch; }
@media (max-width: 720px) {
  .cr-fact-inner { grid-template-columns: auto 1fr; padding-block: 20px 22px; }
  .cr-fact-text { grid-column: 1 / -1; font-size: 16px; }
}
[data-sky="night"] .cr-fact { border-bottom: 1px solid var(--line); }
@media (forced-colors: active) { .cr-fact { border-top: 1px solid CanvasText; } }
@media print { .cr-fact { display: none; } }