/* Kaif, preview D: premium beach café. Sand to sea, calm and slow. */

/* Latin subsets (Latin-1 plus curly quotes, en dash, ellipsis). Playfair is a static 400 cut of the variable font. */
@font-face { font-family: "Playfair Display"; src: url("fonts/playfair-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Prompt"; src: url("fonts/prompt-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Prompt"; src: url("fonts/prompt-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* Sand: the brand cream, and the warmer sand sampled from the beach photos */
  --sand: #F4EDE1;
  --sand-warm: #EFE3CE;
  --shell: #FBF7EF;
  /* Water: the printed menus' mint tints, then the bench upholstery, softened */
  --foam: #EAF1EB;
  --mint: #BBDAD4;
  --seafoam: #C8E0DA;
  --sea: #AED4D6;
  /* Teal leads the accents: the tufted benches, from their highlights down to their shadows */
  --teal: #1F6B6B;
  --teal-deep: #174F50;
  --teal-night: #1D4A4B;
  /* Ink: wrought-iron black with the teal still in it (the select chevron repeats it as %231B2E30) */
  --ink: #1B2E30;
  --muted: #3B5557;
  --kicker: var(--teal);
  --line: #5F8787;
  --earth: #8A4A22; /* rattan and wood brown, used for form errors */
  --shade: 14 38 40; /* the deep teal shade laid over photos where text sits: rgb(var(--shade) / a) */
  --focus: var(--ink);

  /* Spacing scale */
  --s0: .35rem; /* label, hint and error gaps */
  --s1: .5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.25rem;
  --s5: clamp(2.25rem, 4.4vw, 4rem);
  --section: clamp(3.25rem, 6.2vw, 5.75rem);
  --section-end: clamp(2.25rem, 4vw, 3.5rem); /* a section breathes in at the top and arrives at the bottom */
  --gutter: clamp(1.25rem, 4.4vw, 4rem); /* same curve as --s5 on purpose, with a smaller floor */
  --wrap: 1280px;
  --edge: max(var(--gutter), (100% - var(--wrap)) / 2); /* the one pair of outer margins */
  --shore: clamp(20px, 2.6vw, 38px);
  --pad-card: clamp(1.5rem, 3.2vw, 2.75rem);
  --header-h: 5rem; /* room kept clear under the fixed header for anchors and focus */
  --tap: 44px;

  /* Type steps */
  --t-kicker: .8125rem;
  --t-small: .875rem;
  --t-body: 1rem;
  --t-lead: 1.125rem;
  --t-dish: clamp(1.25rem, 1.6vw, 1.5rem); /* stays a clear step under h3 on phones */
  --t-h3: clamp(1.6rem, 2.3vw, 2rem);
  --t-h2: clamp(2rem, 3.5vw, 3rem);
  --t-h1: clamp(2.9rem, 6.2vw, 5.6rem);
  --t-h1-portrait: clamp(2.3rem, 11.6vw, 4.2rem);
  --measure: 34em;

  /* Radii */
  --radius-focus: 4px;
  --radius-field: 12px;
  --radius-photo: 22px;
  --radius-card: 28px;
  --radius-pill: 999px;

  /* Motion: one calm curve, five durations. Answers are quick, arrivals are slow. */
  --calm: cubic-bezier(.22, 1, .36, 1);
  --dur-tap: .35s;     /* hover, press, focus, tab selection */
  --dur-state: .6s;    /* header bar, logo swap, a new menu tab */
  --dur-reveal: .9s;   /* text and photos arriving as you scroll */
  --dur-welcome: 1.5s; /* the hero welcome */
  --dur-draw: 1.4s;    /* the wave line under the booking thank-you */

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Prompt", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 var(--t-body)/1.7 var(--sans); color: var(--ink); background: var(--sand); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, p, dl, dd, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--mint); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-focus); }
.defs { position: absolute; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--s2); top: -4rem; z-index: 100; padding: var(--s1) var(--s2); border-radius: var(--radius-pill); background: var(--ink); color: var(--shell); }
.skip:focus { top: var(--s2); }

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

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; text-wrap: balance; }
h2 { font-size: var(--t-h2); line-height: 1.12; }
h3 { font-size: var(--t-h3); line-height: 1.2; }
.kicker { font: 500 var(--t-kicker)/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--kicker); }
.lead { font-size: var(--t-lead); }
p { text-wrap: pretty; }

.btn { display: inline-block; padding: .8em 1.6em; border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--teal); color: var(--shell); font: 500 var(--t-body)/1.4 var(--sans); text-decoration: none; cursor: pointer; transition: background-color var(--dur-tap) var(--calm), color var(--dur-tap) var(--calm), transform var(--dur-tap) var(--calm); }
.btn:hover { background: var(--teal-deep); }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .6; cursor: default; }
.btn-cream { background: var(--shell); color: var(--ink); }
.btn-cream:hover { background: var(--mint); }
.btn-ghost { background: none; border-color: currentColor; color: inherit; }
.btn-ghost:hover { background: color-mix(in srgb, var(--shell) 16%, transparent); }
.btn-sm { padding: .4em 1.15em; }
.text-link { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; transition: text-decoration-color var(--dur-tap) var(--calm); }
.text-link:hover { text-decoration-color: transparent; }

/* Tones: the page walks from sand into the water */
.tone-sand { --bg: var(--sand); }
.tone-foam { --bg: var(--foam); }
.tone-seafoam { --bg: var(--seafoam); --kicker: var(--teal-deep); }
.tone-sea { --bg: var(--sea); --kicker: var(--teal-deep); }
.tone-night { --bg: var(--teal-night); --focus: var(--shell); }
main > section, .site-footer { position: relative; background-color: var(--bg); overflow-x: clip; }
.intro, .menu, .roast, .visit { padding-block: var(--section) var(--section-end); }
/* Fine grain so the cream reads as sand, not paper. Dry sand and wet sand only.
   The grain is neutral grey laid over the tone, so it adds light and dark specks without shifting the colour. */
.tone-sand, .tone-foam { background-image: url("img/grain.svg"); background-size: 220px; background-blend-mode: overlay; }

/* Shore: a slow, shallow wave edge where one tone meets the next */
.shore { position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); z-index: 3; height: var(--shore); overflow: hidden; color: var(--bg); pointer-events: none; }
.shore svg { position: absolute; left: 0; top: 0; width: 200%; height: 100%; fill: currentColor; }
.shore-back { opacity: .5; animation: drift 52s linear infinite; }
.shore-front { animation: drift 34s linear infinite; }
.shore .crest { fill: none; stroke: var(--shell); stroke-width: 1.5; stroke-opacity: .75; vector-effect: non-scaling-stroke; }
.shore-flip { top: -1px; bottom: auto; transform: scaleY(-1); color: var(--foam); }
.js .shore:not(.is-in) svg { animation-play-state: paused; }
@keyframes drift { to { transform: translateX(-50%); } }

/* Header: a plain clear bar over the hero photo, a soft cream bar once the page moves.
   The padding never changes; only colour moves, so nothing relays out. */
.site-header { --focus: currentColor; position: absolute; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: .75rem var(--edge); color: var(--shell); transition: background-color var(--dur-state) var(--calm), color var(--dur-state) var(--calm); }
.js .site-header { position: fixed; }
.brand { position: relative; display: block; height: 46px; aspect-ratio: 148 / 92; }
.brand img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity var(--dur-state) var(--calm); }
.brand-dark { opacity: 0; }
.site-header ul { display: flex; align-items: center; gap: clamp(.9rem, 2.4vw, 2.25rem); }
.site-header a { text-decoration: none; }
.site-header nav a:not(.btn) { display: block; padding: .4em 0; white-space: nowrap; }
.site-header.is-scrolled { background: color-mix(in srgb, var(--sand) 97%, transparent); color: var(--ink); }
.is-scrolled .brand-light { opacity: 0; }
.is-scrolled .brand-dark { opacity: 1; }
.site-header.is-scrolled .nav-book { background: var(--teal); color: var(--shell); }
.site-header.is-scrolled .nav-book:hover { background: var(--teal-deep); }

/* Hero */
.hero { --focus: var(--shell); height: 100vh; height: 100svh; min-height: 36rem; display: flex; align-items: center; overflow: hidden; overflow: clip; color: var(--shell); background: var(--teal-night); }
.hero-media { position: absolute; inset: 0; will-change: transform; }
.hero-media picture, .hero-media img { display: block; width: 100%; height: 100%; }
/* Landscape: the crop keeps the bench, the windows and the hills at 1440x900 and 1920x1080. */
.hero-media img { object-fit: cover; object-position: 50% 100%; color: transparent; animation: breathe 16s ease-in-out infinite alternate; }
/* The breathing rests while the hero is off screen. */
.js .hero:not(.is-in) .hero-media img { animation-play-state: paused; }
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.035); } }
/* A gentle teal shade on the side the welcome sits on and under the header; the bench and the windows stay clear. */
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgb(var(--shade) / .86), rgb(var(--shade) / .8) 4.25rem, rgb(var(--shade) / 0) 11rem), linear-gradient(90deg, rgb(var(--shade) / .86), rgb(var(--shade) / .78) 30%, rgb(var(--shade) / .34) 54%, rgb(var(--shade) / 0) 76%); pointer-events: none; }
.hero-copy { position: relative; z-index: 2; margin: 10vh var(--edge) 0; max-width: 40rem; }
.hero-copy > * { animation: arrive var(--dur-welcome) var(--calm) both; }
.hero-copy > :nth-child(2) { animation-delay: .1s; }
.hero-copy > :nth-child(3) { animation-delay: .2s; }
.hero-copy > :nth-child(4) { animation-delay: .3s; }
@keyframes arrive { from { opacity: 0; transform: translateY(14px); } }
.hero .kicker { color: inherit; }
.hero h1 { margin-top: var(--s2); font-size: var(--t-h1); line-height: 1.04; }
.hero-meta { margin-top: var(--s3); font-size: var(--t-lead); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s4); }
/* Portrait screens get the whole portrait photo, with the welcome on the floor below the bench. */
@media (orientation: portrait) {
  .hero { align-items: flex-end; }
  /* Scaled up from the top a little, so the table sits behind the welcome and the shade. */
  .hero-media img { height: 112%; object-position: 58% 0; }
  .hero::before { background: linear-gradient(to top, rgb(var(--shade) / .9), rgb(var(--shade) / .78) 42%, rgb(var(--shade) / 0) 74%), linear-gradient(rgb(var(--shade) / .88), rgb(var(--shade) / .82) 4rem, rgb(var(--shade) / 0) 9.5rem); }
  .hero-copy { margin: 0 var(--edge); padding-bottom: calc(var(--shore) + var(--s4)); }
  .hero h1 { font-size: var(--t-h1-portrait); }
  .hero-actions { margin-top: var(--s3); }
}
/* Landscape phones: the whole welcome, buttons included, fits on the first screen. */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: 0; }
  .hero-media img { object-position: 50% 80%; }
  .hero-copy { margin-top: 3.5rem; }
  .hero h1 { margin-top: var(--s1); font-size: clamp(2rem, 9vh, 3rem); }
  .hero-meta { margin-top: var(--s1); font-size: var(--t-body); }
  .hero-actions { margin-top: var(--s2); }
  .site-header { padding-block: var(--s1); }
  .brand { height: 36px; }
}

/* Fades as things come into view: quick enough to read through, still soft */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-reveal) var(--calm), transform var(--dur-reveal) var(--calm); }
.js .reveal.is-in { opacity: 1; transform: none; }

.photo img { width: 100%; border-radius: var(--radius-photo); background: var(--sand-warm); color: transparent; }
.blob { position: absolute; z-index: -1; overflow: visible; }

/* Intro */
.intro-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s5); align-items: center; }
.intro-copy p { margin-top: var(--s3); max-width: var(--measure); font-size: var(--t-lead); color: var(--muted); }
.intro-photos { position: relative; isolation: isolate; display: grid; grid-template-columns: 5fr 7fr; gap: var(--s3); align-items: end; }
.intro-photo-a { order: 2; }
.intro-photo-b { order: 1; }
.intro-photo-a img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 60%; }
.intro-photo-b img { aspect-ratio: 4 / 5; object-fit: cover; }
.intro-photos .blob { width: 86%; left: -12%; top: 6%; fill: var(--sand-warm); }

/* Menu */
.menu-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s4); }
.menu-note { font-size: var(--t-small); color: var(--muted); }
.menu-index { margin: var(--s3) 0 var(--s4); }
.menu-index ul, .menu-index [role="tablist"] { display: flex; flex-wrap: wrap; gap: var(--s1); margin-left: -1.1em; }
.menu-index a, .menu-index [role="tab"] { display: block; padding: .5em 1.1em; border: 0; border-radius: var(--radius-pill); background: none; font: 400 var(--t-body)/1.4 var(--sans); color: var(--muted); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-tap) var(--calm), color var(--dur-tap) var(--calm); }
.menu-index a:hover, .menu-index [role="tab"]:hover { background: color-mix(in srgb, var(--mint) 50%, transparent); color: var(--ink); }
.menu-index [aria-selected="true"], .menu-index [aria-selected="true"]:hover { background: var(--mint); color: var(--ink); }
.menu-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 26vw, 350px); gap: var(--s5); align-items: start; }
.menu-panels { display: grid; gap: var(--s5); }
.menu-panel.is-entering { animation: surface var(--dur-state) var(--calm) both; }
@keyframes surface { from { opacity: .15; transform: translateY(6px); } }
.menu-panel h3 { margin-bottom: var(--s3); }
/* With tabs, the selected tab already names the panel: keep the heading for screen readers only. */
.js .menu-panel h3 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.menu-panel .kicker { margin: var(--s4) 0 var(--s2); }
.menu-panel h3 + .kicker { margin-top: 0; }
.dishes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.dishes dt { font-weight: 500; line-height: 1.45; }
.dishes dd { line-height: 1.6; color: var(--muted); }
/* Two columns that flow down then across, like a printed menu, so short dishes leave no holes. */
@media (min-width: 641px) {
  .menu-panel .dishes { display: block; columns: 2; column-gap: var(--s5); }
  .menu-panel .dishes > div { break-inside: avoid; padding-bottom: var(--s3); }
  .menu-panel .dishes + .kicker { margin-top: var(--s2); }
}
.v { margin-left: .2em; font-size: var(--t-kicker); letter-spacing: .06em; color: var(--kicker); }
.menu-more { margin-top: var(--s2); }
.menu-photos { position: relative; isolation: isolate; display: grid; gap: var(--s3); }
.menu-photo-b { width: 74%; margin-left: -10%; }
.menu-photos figcaption { margin-top: var(--s1); font-size: var(--t-small); color: var(--muted); }
.menu-photos .blob { width: 120%; right: -34%; top: 30%; fill: var(--mint); opacity: .55; transform: rotate(70deg); }
.menu-roast { margin-top: var(--s4); max-width: 60ch; }

/* Mural band */
.band { position: relative; height: clamp(230px, 44vh, 440px); overflow: hidden; overflow: clip; background: var(--teal-night); }
.band-media { position: absolute; inset: -14% 0; will-change: transform; }
.band-media picture, .band-media img { display: block; width: 100%; height: 100%; }
.band-media img { object-fit: cover; object-position: 50% 62%; color: transparent; }

/* Sunday roast and booking: the roast menu straight on the water, the booking form the one raised card */
.roast-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s3) var(--s5); align-items: end; }
.roast-lead { max-width: 58ch; }
.roast-lead .lead { font: 400 var(--t-dish)/1.3 var(--serif); letter-spacing: -.005em; }
.roast-lead p + p { margin-top: var(--s1); }
.roast-jump { display: none; }
.roast-grid { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s5); align-items: start; margin-top: var(--s5); }
.roast-card { padding-top: var(--s2); }
.book-card { padding: var(--pad-card); border: 1px solid color-mix(in srgb, var(--teal) 30%, transparent); border-radius: var(--radius-card); background: var(--shell); }
.roast-dishes { gap: var(--s2); margin-top: var(--s3); }
.roast-dishes dt { font: 400 var(--t-dish)/1.25 var(--serif); letter-spacing: -.005em; }
.roast-extras { display: grid; gap: var(--s3); margin-top: var(--s4); }
.roast-extras p { margin-top: var(--s1); line-height: 1.6; color: var(--muted); }
.blob-a { width: 30%; right: -7%; top: -9%; fill: var(--sea); opacity: .8; transform: rotate(-24deg); }

/* Booking form (the preview stand-in for the Symphony widget, which will load into .book-embed) */
.book-note { max-width: 60ch; margin: var(--s2) 0 var(--s3); color: var(--muted); }
.field { margin-bottom: var(--s2); }
.field-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 0 var(--s2); }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s2); }
label { display: block; margin-bottom: var(--s0); font-weight: 500; font-size: var(--t-small); }
.optional { font-weight: 400; color: var(--muted); }
input, select, textarea { display: block; width: 100%; padding: .7rem .95rem; border: 1px solid var(--line); border-radius: var(--radius-field); background-color: var(--sand); color: var(--ink); font: 400 var(--t-body)/1.5 var(--sans); transition: border-color var(--dur-tap) var(--calm), box-shadow var(--dur-tap) var(--calm); }
select { appearance: none; padding-right: 2.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231B2E30' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .95rem center; background-size: .7rem; }
textarea { resize: vertical; min-height: 4.5rem; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 2px; border-radius: var(--radius-field); }
[aria-invalid="true"] { border-color: var(--earth); box-shadow: inset 0 0 0 1px var(--earth); }
.error { margin-top: var(--s0); font-size: var(--t-small); line-height: 1.45; color: var(--earth); }
.hint { margin-top: var(--s0); font-size: var(--t-small); color: var(--muted); }
.guests-hint { margin: calc(-1 * var(--s1)) 0 var(--s2); }
.closed-note { margin-bottom: var(--s2); font-size: var(--t-small); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s3); }
.alt { font-size: var(--t-small); }
.alt a { text-underline-offset: .35em; }
.confirm:focus { outline: none; }
.confirm-title { font: 400 var(--t-h3)/1.2 var(--serif); letter-spacing: -.01em; }
.confirm p { margin-top: var(--s2); }
.confirm-note { font-size: var(--t-small); color: var(--muted); }
/* Delight: the shore's crest drawn once, like a wave running up the sand. */
.confirm-wave { display: block; width: 9rem; height: .9rem; margin-top: var(--s2); overflow: visible; fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; }
.confirm-wave use { vector-effect: non-scaling-stroke; stroke-dasharray: .5 1; stroke-dashoffset: 0; }
.confirm:not([hidden]) .confirm-wave use { animation: draw var(--dur-draw) var(--calm) .2s both; }
@keyframes draw { from { stroke-dashoffset: .5; } }

/* Visit and photos: details on one side, a small mosaic on the other */
.visit-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s5); align-items: center; }
.visit-facts { display: grid; gap: var(--s3); margin-top: var(--s4); }
.visit-facts dt { font-weight: 500; }
.visit-facts .text-link { display: inline-block; margin-top: var(--s1); }
.mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s2); }
.mosaic li, .mosaic picture { display: flex; width: 100%; }
.mosaic img { height: 100%; aspect-ratio: 1; object-fit: cover; }
.mosaic-main { grid-row: span 2; }
.mosaic-main img { aspect-ratio: auto; }

/* Footer */
.site-footer { padding: var(--section) 0 var(--s4); color: var(--shell); text-align: center; }
.footer-logo { width: 132px; margin: 0 auto var(--s3); }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1) var(--s4); margin: var(--s3) 0 var(--s4); }
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; text-underline-offset: .35em; }
.footer-small { font-size: var(--t-small); }

@media (max-width: 900px) {
  .intro-grid, .roast-head, .roast-grid, .visit-grid, .menu-grid { grid-template-columns: minmax(0, 1fr); }
  .intro-photos { max-width: 36rem; }
  .menu-photos { grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .menu-photo-b { width: auto; margin: var(--s4) 0 0; }
  .menu-photos .blob { width: 70%; right: -16%; top: 20%; }
  .blob-a { display: none; }
  .roast-jump { display: block; }
  .roast-card { padding-top: 0; }
  /* Menu tabs: one row that scrolls sideways, fading at the edge to show there is more. */
  .menu-index [role="tablist"] { position: relative; flex-wrap: nowrap; gap: .25rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter) 3rem; mask-image: linear-gradient(90deg, var(--ink) calc(100% - 3rem), transparent); }
  .menu-index [role="tablist"]::-webkit-scrollbar { display: none; }
  .menu-index [role="tab"] { flex: none; scroll-snap-align: start; scroll-margin-inline: var(--gutter); }
}
@media (min-width: 901px) {
  .menu-roast { display: none; }
}
@media (max-width: 640px) {
  .brand { height: var(--tap); }
  .site-header a { font-size: var(--t-small); }
  .site-header ul { gap: .75rem; }
  /* "Sunday roast" reads "Roast" in the phone header; screen readers still hear "Sunday roast". */
  .nav-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav-short { display: inline; }
  .shore-back { display: none; } /* at 20px tall the second wave layer can't be seen; skip painting it */
  .field-pair { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr 1fr; }
  .field-row .field:first-child { grid-column: 1 / -1; }
  .mosaic { grid-template-columns: 1fr 1fr; }
  .mosaic-main { grid-column: 1 / -1; grid-row: auto; }
  .mosaic-main img { aspect-ratio: 5 / 4; }
  /* Long menu sections show their first dishes, with a button for the rest (set up in main.js). */
  .is-folded .more { display: none; }
  /* Thumb-sized targets: grow the hit area, not the look. */
  .site-header nav a, .menu-index [role="tab"] { display: flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); }
  .site-header .nav-book { padding-inline: .9em; }
  .text-link, .alt a, .footer-nav a { display: inline-block; padding-block: 11px; margin-block: -11px; }
  .footer-nav a { min-width: var(--tap); }
  .menu-panel .menu-more { margin-top: calc(var(--s2) - 11px); }
  .visit-facts .text-link { margin-top: calc(var(--s1) - 11px); }
  .footer-nav { gap: var(--s2) var(--s4); }
}
@media (min-width: 641px) {
  .menu-more { display: none; }
}
@media (min-width: 641px) {
  .nav-short { display: none; }
}
@media (max-width: 380px) {
  .site-header { gap: var(--s1); }
  .site-header ul { gap: .5rem; }
  .site-header li:nth-child(3) { display: none; } /* "Visit" is in the footer, and the last section */
}

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

/* Guest reviews, after the old site's card layout */
.reviews { padding-block: var(--section) var(--section-end); }
.reviews-head { text-align: center; }
.reviews-head h2 { margin-top: var(--s1); }
.reviews-score { margin-top: var(--s2); color: var(--muted); display: inline-flex; align-items: center; gap: .4em; }
.stars { display: inline-flex; gap: 2px; color: var(--teal); vertical-align: -0.1em; }
.star { width: .8em; height: .8em; fill: currentColor; }
.review-grid { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.review { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); background: var(--shell); border: 1px solid color-mix(in oklab, var(--ink) 9%, transparent); border-radius: 18px; }
.review-head { display: flex; align-items: center; gap: .75rem; }
.avatar { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--mint); color: var(--teal-deep); font: 400 1rem/1 var(--serif); }
.review-who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.review-name { font-weight: 500; }
.review-meta { font-size: .8125rem; color: var(--muted); }
.review-tag { margin-left: auto; padding: .2rem .6rem; border-radius: 999px; background: var(--foam); font-size: .8125rem; color: var(--muted); }
.review blockquote { margin: 0; flex: 1; }
.review blockquote p { font-size: .9375rem; line-height: 1.6; color: var(--ink); }
.review-scores { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: .5rem; padding-top: var(--s2); border-top: 1px solid color-mix(in oklab, var(--ink) 8%, transparent); font-size: clamp(.6875rem, .62rem + .2vw, .75rem); color: var(--muted); white-space: nowrap; }
.review-scores > span { display: inline-flex; align-items: center; gap: .3em; }
.review-scores .stars { gap: 1px; }
.reviews-more { margin-top: var(--s3); text-align: center; }
@media (max-width: 1000px) { .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .review-grid { grid-template-columns: minmax(0, 1fr); } .review:nth-child(n+4) { display: none; } }
.roast-quote { margin: var(--s3) 0 0; max-width: 52ch; }
.roast-quote blockquote p { font-family: var(--serif, "Playfair Display", serif); font-size: 1.125rem; line-height: 1.5; }
@media (max-width: 900px) { .quotes { grid-template-columns: minmax(0, 1fr); gap: var(--s3); } }
.roast-quote + .roast-jump { margin-top: var(--s3); }

/* The little map: the bay to the north, the sand, and Kaif on the shore. Drawn from the page's own wave, not to scale. */
.map { position: relative; display: block; max-width: 26rem; aspect-ratio: 5 / 2; margin-top: var(--s2); overflow: hidden; border-radius: var(--radius-photo); background: var(--seafoam); text-decoration: none; }
.map:focus-visible { border-radius: var(--radius-photo); }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-water { fill: none; stroke: var(--shell); stroke-width: 1.5; stroke-opacity: .8; vector-effect: non-scaling-stroke; }
.map-land { fill: var(--sand); }
.map-pin { fill: var(--teal); }
.map-eye { fill: var(--shell); }
.map-ring { fill: var(--teal); opacity: 0; transform-box: fill-box; transform-origin: center; }
.map.is-in .map-ring { animation: ripple 3.2s var(--calm) infinite; }
.map text { font: 400 21px var(--serif); fill: var(--ink); }
.map-north { fill: none; stroke: var(--teal-deep); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.map .kicker { position: absolute; left: 1.1rem; top: .9rem; }
.map-go { position: absolute; right: .8rem; bottom: .7rem; }
.map:hover .map-go { background: var(--teal-deep); }
@keyframes ripple { from { opacity: .5; transform: scale(1); } to { opacity: 0; transform: scale(2.8); } }
@media (max-width: 359px) { .review { padding: var(--s2); } .review-scores { flex-wrap: wrap; justify-content: flex-start; gap: .3rem .8rem; } }