/* Kahwat Ras Beirut — a day at the café. Light, editorial, pointed arches (the café's own); a coffee interlude,
   then the page moves from 8 AM to 1 AM. Tokens override base.css; sections below. */

:root {
  --bg: #f3eadb;          /* linen: the page starts in morning light */
  --fg: #142130;
  --paper: #faf5ec;
  --ink: #142130;
  --navy: #0d1823;        /* night on the Corniche */
  --linen: #f3eadb;
  --accent: #f0a65e;      /* golden hour */
  --accent-ink: #a5561d;  /* the same apricot, dark enough for text on linen */
  --muted: #5b6772;
  --line: rgba(20, 33, 48, .14);
  --header-h: 72px;
}

.kicker { display: block; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--kicker, var(--accent-ink)); }
.btn--navy { background: var(--navy); color: var(--linen); }
.btn--navy:hover { background: var(--accent); color: var(--ink); }
.btn--sun { background: var(--accent); color: var(--ink); }
.btn--sun:hover { background: var(--linen); color: var(--ink); }
.btn .arrow { display: inline-block; transition: transform .4s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.text-link { display: inline-block; padding-bottom: 4px; font-size: 14px; font-weight: 600; letter-spacing: .02em; border-bottom: 1px solid currentColor; transition: color .3s, border-color .3s; }
.text-link:hover { color: var(--accent-ink); }
.text-link--light:hover { color: var(--accent); }

/* Pointed arch: the motif of every photo, taken from the arches inside the café.
   The mask is one tall shape scaled to the element's width, so the point keeps its proportions at any height
   (clip-path is left free for the kit's wipe-in reveal). */
.arch {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Cpath d='M0 1000V66C0 36 21 15 50 0c29 15 50 36 50 66v934z'/%3E%3C/svg%3E") top center / 100% auto no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Cpath d='M0 1000V66C0 36 21 15 50 0c29 15 50 36 50 66v934z'/%3E%3C/svg%3E") top center / 100% auto no-repeat;
}

/* ---------- header: centered wordmark ---------- */
.site-header { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; }
.site-header.is-solid { background: rgba(243, 234, 219, .95); box-shadow: 0 1px 0 var(--line); } /* stays a clean linen band over the dark sections */
.nav { display: flex; gap: 30px; font-size: 14px; font-weight: 600; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { width: 24px; height: 24px; color: var(--accent-ink); }
.brand-name { font: 400 28px/1 var(--serif); letter-spacing: -.01em; white-space: nowrap; }
.brand-name i { color: var(--accent-ink); }
.header-call { justify-self: end; display: inline-flex; align-items: center; min-height: 42px; padding: 8px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px currentColor; font-size: 13px; font-weight: 600; transition: background .3s, color .3s; }
.header-call:hover { background: var(--navy); color: var(--linen); }
.header-call .short { display: none; }

/* ---------- hero ---------- */
.hero { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding-top: calc(var(--header-h) + 28px); padding-bottom: clamp(28px, 5vh, 56px); }
.hero-meta { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.hero-grid { flex: 1; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 5vw, 96px); align-items: end; padding-top: clamp(28px, 5vh, 56px); }
.hero-title { font: 400 clamp(64px, 8vw, 152px)/.92 var(--serif); letter-spacing: -.03em; }
.hero-title em { color: var(--accent-ink); }
.hero-lead { margin-top: 30px; max-width: 30em; font-size: clamp(17px, 1.3vw, 20px); color: var(--muted); }
.hero-actions { margin-top: 34px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hero-hours { margin-top: clamp(32px, 6vh, 64px); display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(240, 166, 94, .22); }
.hero-hours.is-open .dot { background: #3c8f5b; box-shadow: 0 0 0 4px rgba(60, 143, 91, .18); }
.hero-hours.is-closed .dot { background: #9aa3aa; box-shadow: none; }
.hero-window { position: relative; height: min(74vh, 780px); height: min(74svh, 780px); }
.hero-window .arch { position: absolute; inset: 0; }
.hero-window .arch > img { object-position: 46% 50%; }
.seal { position: absolute; left: clamp(-80px, -5vw, -40px); bottom: 56px; width: clamp(118px, 10vw, 156px); aspect-ratio: 1; border-radius: 50%; background: var(--bg); color: var(--ink); box-shadow: 0 18px 40px -18px rgba(13, 24, 35, .45); }
.seal-ring { width: 100%; height: 100%; animation: spin 28s linear infinite; }
.seal-ring text { font: 600 12.5px var(--sans); letter-spacing: .12em; fill: currentColor; }
.seal-mark { position: absolute; inset: 0; margin: auto; width: 34%; height: 34%; color: var(--accent-ink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- intro: photos set into the words ---------- */
.intro { text-align: center; }
.intro-text { max-width: 1240px; margin-inline: auto; font: 400 clamp(34px, 4.4vw, 74px)/1.14 var(--serif); letter-spacing: -.02em; }
.pill { display: inline-block; width: 1.9em; height: .86em; margin-inline: .06em; border-radius: 999px; overflow: hidden; vertical-align: -.06em; background: #d9cbb3; }
.pill img { width: 100%; height: 100%; object-fit: cover; }
.intro-sign { margin-top: clamp(32px, 5vh, 56px); font: italic 400 clamp(20px, 1.8vw, 26px)/1.3 var(--serif); color: var(--accent-ink); }

/* ---------- kahwa: a camera moves down one tall photo, machine → pour → cup ----------
   Without motion (or before the kit starts) it is one dark screen showing the cup and the first chapter.
   With motion main.js adds .is-live: the section grows tall and the stage sticks (touch) or is pinned (desktop). */
.pour { position: relative; background: #0b0806; color: #f5ede1; --kicker: #d9a35b; }
.pour.is-live { height: 440vh; height: 440svh; }
.pour-stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.pour.is-live:not(.is-pinned) .pour-stage { position: sticky; top: 0; }
.pour-shot { position: absolute; left: 50%; bottom: 0; width: max(100vw, 146svh); max-width: none; height: auto; transform: translateX(-50%); transform-origin: 50% 0; }
.pour.is-live .pour-shot { top: 0; bottom: auto; transform: none; will-change: transform; }
.pour-shade { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 8, 6, .72) 0%, rgba(11, 8, 6, .25) 42%, rgba(11, 8, 6, 0) 60%),
    linear-gradient(180deg, rgba(11, 8, 6, .55) 0%, rgba(11, 8, 6, 0) 22%, rgba(11, 8, 6, 0) 70%, rgba(11, 8, 6, .8) 100%); }
.pour-chapter { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(104px, 16vh, 160px); max-width: 640px; }
.pour-chapter + .pour-chapter { display: none; }
.pour.is-live .pour-chapter { display: block; will-change: opacity, transform; }
.pour-chapter .kicker { margin-bottom: 18px; }
.pour-title { font: 400 clamp(54px, 7vw, 112px)/.95 var(--serif); letter-spacing: -.02em; }
.pour-title em { color: #d9a35b; }
.pour-lead { margin-top: 22px; max-width: 26em; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: rgba(245, 237, 225, .74); }
.pour-hud { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 32px; display: none; align-items: center; gap: 16px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(245, 237, 225, .6); }
.pour.is-live .pour-hud { display: flex; }
.pour-bar { flex: 1; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(245, 237, 225, .18); }
.pour-bar i { display: block; height: 100%; background: #d9a35b; transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- a day at Kahwat: the background lives through the hours ---------- */
.day {
  --day-bg: #f3eadb; --day-fg: #142130; --day-accent: #a5561d; --day-muted: rgba(20, 33, 48, .7);
  --kicker: var(--day-accent);
  position: relative; background: var(--day-bg); color: var(--day-fg);
  padding-block: clamp(80px, 12vh, 140px) clamp(72px, 10vh, 120px);
  transition: background-color 1.4s var(--ease), color 1.4s var(--ease);
}
.day[data-hour="noon"]   { --day-bg: #e2ebe7; --day-fg: #12232b; --day-accent: #1f6873; --day-muted: rgba(18, 35, 43, .7); }
.day[data-hour="golden"] { --day-bg: #f1c391; --day-fg: #2a1a10; --day-accent: #87380f; --day-muted: rgba(42, 26, 16, .74); }
.day[data-hour="night"]  { --day-bg: #0d1823; --day-fg: #f3eadb; --day-accent: #f0a65e; --day-muted: rgba(243, 234, 219, .7); }
.day .hour-time, .day .kicker { transition: color 1.4s var(--ease); }
.day-head { text-align: center; }
.day-head .kicker { margin-bottom: 22px; }
.day-title { font: 400 clamp(60px, 8.4vw, 150px)/.95 var(--serif); letter-spacing: -.03em; }
.day-title em { color: var(--day-accent); transition: color 1.4s var(--ease); }

.hour { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 140px); align-items: center; margin-top: clamp(96px, 16vh, 180px); }
.hour .arch { height: min(80vh, 780px); height: min(80svh, 780px); }
.hour--left .arch { width: 86%; height: min(70vh, 680px); height: min(70svh, 680px); }
.hour-time { display: block; margin-bottom: 22px; font: italic 400 clamp(84px, 11vw, 196px)/.8 var(--serif); letter-spacing: -.045em; color: var(--day-accent); font-variant-numeric: tabular-nums; }
.hour-title { margin: 14px 0 22px; max-width: 12ch; font: 400 clamp(40px, 4.4vw, 78px)/1 var(--serif); letter-spacing: -.02em; }
.hour-text p { max-width: 28em; font-size: clamp(17px, 1.3vw, 20px); color: var(--day-muted); transition: color 1.4s var(--ease); }
.hour--wide { display: block; }
.hour-text--center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hour-text--center .hour-title { max-width: 17ch; margin-bottom: 0; }
.panorama { margin-top: clamp(40px, 7vh, 72px); height: clamp(300px, 58vh, 640px); }
.hour-caption { margin-top: 28px; max-width: 40em; text-align: center; color: var(--day-muted); transition: color 1.4s var(--ease); }

/* ---------- clock (fixed, outside the smooth-scroll wrapper) ---------- */
.clock {
  position: fixed; z-index: 55; left: 24px; bottom: 24px; display: flex; align-items: center; gap: 12px;
  padding: 9px 18px 9px 9px; border-radius: 999px; background: var(--navy); color: var(--linen);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .5s var(--ease), visibility .5s, transform .5s var(--ease);
}
.clock.is-on { opacity: 1; visibility: visible; transform: none; }
.clock-dial { position: relative; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(243, 234, 219, .55); }
.clock-hand { position: absolute; left: 50%; top: 4px; width: 2px; height: 10px; margin-left: -1px; border-radius: 2px; background: var(--accent); transform-origin: 50% 10px; }
.clock-time { min-width: 3.1em; font: italic 400 23px/1 var(--serif); font-variant-numeric: tabular-nums; }
.clock-label { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(243, 234, 219, .65); }

/* ---------- menu: a printed card on the night table ---------- */
.menu { position: relative; background: var(--navy); color: var(--linen); padding-top: clamp(40px, 6vh, 72px); }
.menu-card { max-width: 1080px; margin-inline: auto; padding: clamp(10px, 1.4vw, 18px); background: var(--paper); color: var(--ink); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8); }
.menu-card-inner { padding: clamp(40px, 6vw, 84px) clamp(22px, 5vw, 76px) clamp(32px, 4vw, 56px); border: 1px solid rgba(20, 33, 48, .55); outline: 1px solid rgba(20, 33, 48, .55); outline-offset: -7px; }
.menu-card-head { text-align: center; }
.menu-ornament { width: 34px; height: 34px; margin: 0 auto 18px; color: var(--accent-ink); }
.menu-card-sub { display: block; font-size: 11px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.menu-card-title { margin-top: 14px; font: italic 400 clamp(60px, 7.4vw, 116px)/.9 var(--serif); letter-spacing: -.02em; }
.menu-card-intro { max-width: 34em; margin: 22px auto 0; font-size: 15px; color: var(--muted); }
/* Tabs read like the section line of a printed menu: small caps, dotted apart, the open one underlined. */
.menu-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; margin-top: clamp(34px, 5vh, 48px); padding-block: 14px; border-block: 1px solid var(--line); }
.menu-tab { padding: 10px 12px; border: 0; background: none; color: var(--muted); font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: color .3s; }
.menu-tab span { position: relative; display: inline-block; padding-bottom: 6px; }
.menu-tab span::after { content: ''; position: absolute; left: 0; right: .2em; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transition: transform .45s var(--ease); }
.menu-tab:hover { color: var(--ink); }
.menu-tab[aria-selected="true"] { color: var(--accent-ink); }
.menu-tab[aria-selected="true"] span::after { transform: none; }
.menu-tab:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 4px; }
.menu-panel { columns: 2; column-gap: clamp(40px, 6vw, 96px); margin-top: clamp(36px, 5vh, 52px); }
.menu-panel[hidden] { display: none; }
.menu-panel.is-entering { animation: menu-in .6s var(--ease); }
@keyframes menu-in { from { opacity: 0; transform: translateY(10px); } }
.menu-cat { margin-bottom: clamp(30px, 4vh, 44px); text-align: center; }
.menu-cat h3 { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--accent-ink); break-after: avoid; }
.menu-cat h3::before, .menu-cat h3::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.menu-cat-note { margin-bottom: 6px; font: italic 400 17px/1.3 var(--serif); color: var(--muted); }
.menu-cat ul { list-style: none; margin: 0; padding: 0; }
.menu-cat li { display: grid; gap: 2px; padding-block: 10px; break-inside: avoid; }
.dish-name { font: 400 25px/1.15 var(--serif); }
.dish-price { margin-left: .4em; font: italic 400 .8em/1 var(--serif); color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.dish-desc { font-size: 14px; line-height: 1.5; color: var(--muted); }
.menu-card-foot { margin-top: clamp(8px, 2vh, 20px); padding-top: 26px; border-top: 1px solid var(--line); text-align: center; font-size: 13px; line-height: 1.9; color: var(--muted); }
.menu-card-foot .text-link { padding-bottom: 1px; font-size: 13px; color: var(--ink); }

/* ---------- find us: a postcard ---------- */
.find { background: var(--navy); color: var(--linen); padding-top: clamp(64px, 10vh, 120px); }
.find .kicker { --kicker: var(--accent); }
.find-head { text-align: center; margin-bottom: clamp(44px, 7vh, 72px); }
.find-head .kicker { margin-bottom: 20px; }
.find-title { font: 400 clamp(60px, 8.4vw, 150px)/.95 var(--serif); letter-spacing: -.03em; }
.find-title em { color: var(--accent); }
.postcard-wrap { max-width: 1120px; margin-inline: auto; }
.postcard { display: grid; grid-template-columns: 1.1fr 1fr; background: var(--paper); color: var(--ink); transform: rotate(-1.2deg); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .85); }
.postcard-map { padding: clamp(20px, 3vw, 40px); }
.postcard-map svg { width: 100%; height: auto; overflow: visible; }
.map-water { fill: rgba(31, 104, 115, .09); }
.map-sea { font: italic 400 24px var(--serif); fill: rgba(20, 33, 48, .45); }
.map-wave { fill: none; stroke: rgba(31, 104, 115, .35); stroke-width: 1.2; stroke-linecap: round; }
.map-coast { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.map-road { fill: none; stroke: var(--accent-ink); stroke-width: 1.4; stroke-dasharray: 5 6; }
.map-label { font: 600 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; fill: var(--muted); }
.map-label--road { font: italic 400 18px var(--serif); letter-spacing: 0; text-transform: none; fill: var(--accent-ink); }
.map-label--small { font-size: 9.5px; }
.map-lighthouse { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.map-pin circle { fill: var(--accent-ink); }
.map-pin .map-pin-pulse { fill: none; stroke: var(--accent-ink); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: pulse 2.4s var(--ease) infinite; }
.map-here { font: italic 400 22px var(--serif); fill: var(--ink); }
.map-arrow { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; }
@keyframes pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.postcard-back { position: relative; display: flex; flex-direction: column; padding: clamp(24px, 3.4vw, 48px); border-left: 1px solid var(--line); }
.stamp {
  position: absolute; top: clamp(18px, 2.4vw, 30px); right: clamp(18px, 2.4vw, 30px); width: 80px; height: 96px;
  display: grid; place-content: center; justify-items: center; gap: 6px; background: var(--accent); color: var(--navy);
  outline: 2px dashed var(--paper); outline-offset: -6px; font: italic 400 20px/1 var(--serif);
}
.stamp svg { width: 30px; height: 30px; }
.postmark {
  position: absolute; top: clamp(34px, 3.6vw, 48px); right: clamp(84px, 9vw, 116px); width: 92px; height: 92px; display: grid; place-content: center; justify-items: center; gap: 3px;
  border-radius: 50%; border: 1.5px solid rgba(20, 33, 48, .3); color: rgba(20, 33, 48, .45); transform: rotate(-14deg);
}
.postmark span { font-size: 8.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.postmark b { font: italic 400 18px/1 var(--serif); }
.postcard-map { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.postcard-note { max-width: 24em; padding-inline: 4px; font: italic 400 clamp(19px, 1.6vw, 23px)/1.4 var(--serif); color: #2b3f5c; }
.postcard-note span { display: block; margin-top: 10px; font-size: .9em; color: var(--accent-ink); }
.postcard-lines { margin: clamp(120px, 15vw, 150px) 0 0; }
.postcard-lines > div { display: grid; grid-template-columns: 86px 1fr; gap: 12px; align-items: baseline; padding-block: 14px; border-bottom: 1px solid var(--line); }
.postcard-lines dt { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink); }
.postcard-lines dd { margin: 0; font: 400 22px/1.3 var(--serif); }
.postcard-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 26px; }

/* ---------- closing: a sunset ---------- */
.closing { position: relative; min-height: 100vh; min-height: 100svh; overflow: clip; display: flex; text-align: center; color: var(--linen); --kicker: var(--accent); }
.sky { position: absolute; inset: 0; background: linear-gradient(180deg, #0d1823 0%, #1c2638 34%, #4a3448 56%, #a35d55 68%, #e08f5c 74%); }
.sun {
  position: absolute; top: 74%; inset-inline: 0; margin-inline: auto; width: clamp(200px, 26vw, 420px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #ffe1b0 0%, #ffc27f 38%, #f0a65e 62%, rgba(240, 166, 94, 0) 71%);
  transform: translateY(-58%); will-change: transform;
}
.sea { position: absolute; inset: 74% 0 0; background: linear-gradient(180deg, #2c2a3c 0%, #142130 45%, #0d1823 100%); }
.sea::before { /* the sun's path on the water */
  content: ''; position: absolute; inset: 0 0 auto; margin-inline: auto; width: clamp(120px, 16vw, 260px); height: 70%;
  background: repeating-linear-gradient(180deg, rgba(255, 194, 127, .55) 0 3px, transparent 3px 11px);
  -webkit-mask-image: radial-gradient(50% 100% at 50% 0%, #000 0%, transparent 100%); mask-image: radial-gradient(50% 100% at 50% 0%, #000 0%, transparent 100%);
}
.closing-inner { position: relative; display: flex; flex-direction: column; align-items: center; padding-block: clamp(120px, 18vh, 200px) 42vh; }
.closing .kicker { margin-bottom: 26px; }
.closing-title { font: 400 clamp(76px, 12vw, 230px)/.88 var(--serif); letter-spacing: -.03em; }
.closing-title em { color: var(--accent); }
.closing-lead { margin-top: 28px; max-width: 30em; font-size: clamp(17px, 1.3vw, 20px); color: rgba(243, 234, 219, .82); }
.closing-actions { margin-top: 36px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 28px; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy); color: rgba(243, 234, 219, .6); font-size: 13px; padding-block: 30px 38px; border-top: 1px solid rgba(243, 234, 219, .12); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.footer-brand { display: inline-flex; align-items: center; gap: 10px; font: 400 22px/1 var(--serif); color: var(--linen); }
.footer-brand svg { width: 20px; height: 20px; color: var(--accent); }
.footer-brand i { color: var(--accent); }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .seal-ring, .map-pin .map-pin-pulse { animation: none; }
  .map-pin .map-pin-pulse { opacity: 0; }
}

/* ---------- tablet ---------- */
@media (max-width: 1050px) {
  .nav { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .postcard { grid-template-columns: 1fr; }
  .postcard-back { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- phones ---------- */
@media (max-width: 767px) {
  :root { --header-h: 64px; }
  .site-header, .site-header.is-solid { height: 64px; }
  .brand-name { font-size: 23px; }
  .brand { gap: 8px; }
  .brand-mark { width: 21px; height: 21px; }
  .header-call .long { display: none; }
  .header-call .short { display: inline; }
  .header-call { min-height: 38px; padding: 6px 16px; }
  /* Hero: title, then the arched photo, then the words. */
  .hero { min-height: 0; padding-top: calc(var(--header-h) + 14px); }
  .hero-meta { font-size: 10px; letter-spacing: .14em; }
  .hero-meta span:nth-child(3) { display: none; }
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-top: 22px; }
  .hero-copy { display: contents; }
  .hero-title { order: 1; font-size: clamp(54px, 15.4vw, 80px); }
  .hero-window { order: 2; height: 58vh; height: 58svh; min-height: 380px; margin-top: 26px; }
  .hero-lead { order: 3; margin-top: 26px; }
  .hero-actions { order: 4; margin-top: 26px; gap: 22px; }
  .hero-hours { order: 5; margin-top: 26px; }
  .seal { left: auto; right: -6px; bottom: 24px; width: 104px; }
  .intro-text { font-size: clamp(30px, 8.4vw, 40px); line-height: 1.18; }
  .section { padding-block: 80px; }
  .day { padding-block: 72px 110px; }
  .hour { grid-template-columns: 1fr; gap: 30px; margin-top: 80px; }
  .hour .arch, .hour--left .arch { order: -1; width: 100%; height: 66vh; height: 66svh; min-height: 420px; max-height: 620px; }
  .hour-time { font-size: 84px; margin-bottom: 14px; }
  .hour-title { font-size: clamp(40px, 11vw, 54px); margin: 10px 0 16px; }
  .panorama { height: 46vh; height: 46svh; margin-top: 34px; }
  .panorama > img { object-position: 72% 50%; } /* keeps the sun, the palms and the fruit cocktail in a square crop */
  .clock { left: 12px; bottom: 12px; padding: 7px 14px 7px 7px; gap: 10px; }
  .clock-dial { width: 24px; height: 24px; }
  .clock-hand { top: 3px; height: 9px; transform-origin: 50% 9px; }
  .clock-time { font-size: 20px; }
  .clock-label { display: none; }
  .menu-panel { columns: 1; }
  /* Eight tabs as three tidy rows (3 · 3 · 2) instead of a ragged wrap. */
  .menu-tabs { gap: 0; padding-block: 8px; }
  .menu-tab { flex: 0 0 33.333%; padding: 9px 2px; font-size: 10.5px; letter-spacing: .14em; }
  .menu-tab span::after { right: .14em; }
  .dish-name { font-size: 23px; }
  .pour-chapter { bottom: 92px; }
  .pour-title { font-size: clamp(46px, 13vw, 60px); }
  .pour-lead { font-size: 16px; }
  .pour-hud { bottom: 26px; font-size: 10.5px; }
  .postcard { transform: rotate(-.8deg); }
  /* The map renders at ~55% on a phone: larger type keeps its labels readable. */
  .postcard-map { padding: 18px 16px 24px; }
  .map-sea { font-size: 34px; }
  .map-label { font-size: 19px; letter-spacing: .08em; }
  .map-label--road { font-size: 28px; }
  .map-here { font-size: 34px; }
  .map-coast { stroke-width: 3; }
  .postcard-lines { margin-top: 118px; }
  .postcard-lines > div { grid-template-columns: 72px 1fr; }
  .postcard-lines dd { font-size: 20px; }
  .closing-inner { padding-block: 104px 40vh; }
  .closing-title { font-size: clamp(64px, 18vw, 96px); }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}