/* =========================================================
   SORREL · restaurant showcase
   Shape rule: buttons, chips and tabs are full pills, everything
   else (images, cards, panels, inputs) uses --r (6px).
   Two skins: tokens below swap on <html data-skin>.
   ========================================================= */

:root {
  /* Wood fire: char, warm cream, ember and brass. Hex for theme-color: bg #19120f */
  --bg: oklch(0.19 0.014 40);            /* char */
  --surface: oklch(0.235 0.018 42);
  --line: oklch(0.36 0.022 48);
  --ink: oklch(0.95 0.02 80);            /* warm cream */
  --muted: oklch(0.8 0.03 70);
  --accent: oklch(0.7 0.15 50);          /* ember */
  --on-accent: oklch(0.19 0.025 40);
  --accent-text: oklch(0.8 0.1 72);      /* brass */
  --header-top: var(--bg);               /* colour behind the status bar */
  --paper: oklch(0.96 0.012 85);         /* the printed Christmas card */

  --display: "Young Serif", Georgia, serif;
  --body: "Hanken Grotesk", system-ui, sans-serif;
  --r: 6px;
  --pad: clamp(20px, 5vw, 72px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 72px;

  --z-header: 20;
  --z-switch: 30;
  color-scheme: dark;
}

/* Christmas skin: pine body, ember accent */
[data-skin="christmas"] {
  --bg: oklch(0.225 0.042 165);
  --surface: oklch(0.27 0.048 165);
  --line: oklch(0.38 0.05 165);
  --ink: oklch(0.96 0.012 85);
  --muted: oklch(0.84 0.02 120);
  --accent: oklch(0.56 0.19 27);
  --on-accent: oklch(0.99 0.005 85);
  --accent-text: oklch(0.78 0.12 35);
  --header-h: 110px;
  --header-top: var(--accent);           /* the notice bar is the top of the page */
}

[data-skin="normal"] .skin-christmas,
[data-skin="christmas"] .skin-normal { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
/* A whisper of film grain over the dark page, so the flat colour reads as a printed surface */
body::before {
  content: ""; position: fixed; inset: -50%; z-index: 100; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, dl { margin: 0; padding: 0; list-style: none; }
section[id] { scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 24px); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 120; background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 26px;
  border-radius: 999px; border: 1px solid transparent;
  font: 600 1rem/1 var(--body); letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: color-mix(in oklch, var(--accent) 86%, white); }
.btn-ghost { background: transparent; border-color: color-mix(in oklch, var(--ink) 55%, transparent); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); background: color-mix(in oklch, var(--ink) 8%, transparent); }
.btn-small { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }
.btn-wide { width: 100%; }
.link-btn { appearance: none; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }

/* Christmas: a ribbon line inside the pill, and a holly sprig tucked on its corner */
[data-skin="christmas"] .btn-primary {
  box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 0 4px color-mix(in oklch, var(--on-accent) 40%, transparent);
}
[data-skin="christmas"] .btn-primary::before {
  content: ""; position: absolute; left: -14px; top: -17px; width: 46px; height: 40px;
  background: url("assets/holly-sprig.svg") no-repeat center / contain;
  transform: rotate(-8deg); pointer-events: none;
}
[data-skin="christmas"] .btn-small::before { width: 38px; height: 33px; left: -12px; top: -14px; }

/* ---------- Header ---------- */
/* Safe area: the page is drawn edge to edge (viewport-fit=cover), so the header pads itself
   below the status bar and paints a solid strip behind it (and above it, for browsers that
   draw page content behind their own bars). Nothing scrolls into view behind the clock or island. */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.site-header::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - env(safe-area-inset-top, 0px));
  height: calc(120px + env(safe-area-inset-top, 0px)); background: var(--header-top); pointer-events: none;
}
.site-header.is-solid { background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.notice { background: var(--accent); color: var(--on-accent); text-align: center; font-size: 0.875rem; font-weight: 600; padding: 9px var(--pad); }
.nav { display: flex; align-items: center; gap: 32px; height: 72px; padding: 0 var(--pad); }
.wordmark {
  position: relative; display: inline-flex; align-items: center;
  height: 56px; padding: 0 10px; margin: 0 auto 0 -10px;
  text-decoration: none;
}
.wordmark-text { position: relative; z-index: 1; font: 400 1.8rem/1 var(--display); letter-spacing: -0.01em; }
.wordmark .festive, .festive { overflow: visible; }
.wordmark .festive { position: absolute; left: 0; top: 0; pointer-events: none; }
.wordmark .festive-weave-back { z-index: 0; }
.wordmark .festive-weave-front { z-index: 2; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links li { display: flex; }
.nav-links a, .nav-links .link-btn {
  text-decoration: none; font-weight: 500; font-size: 0.9375rem;
  padding: 8px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 250ms var(--ease-out);
}
.nav-links a:hover, .nav-links .link-btn:hover { background-size: 100% 1px; }
.header-lights { position: absolute; left: 0; right: 0; top: calc(100% - 6px); height: 90px; pointer-events: none; overflow: visible; }
.header-lights svg { display: block; overflow: visible; }
.header-lights { transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out); }
.site-header.is-solid .header-lights { opacity: 0; transform: translateY(-24px); }
@media (max-width: 720px) { .nav-links { display: none; } .nav { gap: 16px; } .wordmark-text { font-size: 1.6rem; } }

/* Bulbs breathe slowly, each on its own clock, like a real string on a timer */
.bulb-glow { opacity: 0.55; animation: glow 3.6s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }
@keyframes glow { from { opacity: 0.2; } to { opacity: 0.85; } }

/* ---------- Hero ---------- */
/* The copy sits at the bottom; the top padding only matters on a short screen, where it keeps the
   headline below the header and the Christmas lights (--header-clear is measured in main.js) */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; overflow: clip; isolation: isolate; padding-top: calc(var(--header-clear, calc(var(--header-h) + env(safe-area-inset-top, 0px))) + 24px); }
/* The image drifts down and grows as you scroll away. main.js sets the transform from the
   native scroll position every frame (transform only), so it follows a finger at full frame rate. */
.hero-media { position: absolute; inset: 0; z-index: -1; will-change: transform; transform-origin: 50% 30%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 30%; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, color-mix(in oklch, var(--bg) 97%, transparent) 0%, color-mix(in oklch, var(--bg) 60%, transparent) 38%, transparent 68%),
    linear-gradient(to bottom, color-mix(in oklch, var(--bg) 85%, transparent) 0%, color-mix(in oklch, var(--bg) 40%, transparent) 20%, transparent 34%);
}
.hero-copy { padding: 0 var(--pad) clamp(56px, 10vh, 112px); max-width: 1100px; }
.hero h1 { font: 400 clamp(2.7rem, 6vw, 6rem)/1 var(--display); letter-spacing: -0.02em; max-width: 16ch; }
.hero-sub { margin-top: 24px; max-width: 46ch; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: var(--muted); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* The house transition: a top-down wipe. Used on first paint and for the skin flip. */
@keyframes wipe-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero-media img { animation: wipe-down 1100ms var(--ease-out) both; }
.hero-copy > * { animation: rise 900ms var(--ease-out) both; }
.hero-copy > :nth-child(2) { animation-delay: 120ms; }
.hero-copy > :nth-child(3) { animation-delay: 220ms; }

/* ---------- Section titles ---------- */
.section-title { font: 400 clamp(2.1rem, 4.2vw, 3.75rem)/1.04 var(--display); letter-spacing: -0.02em; }
[data-skin="christmas"] .section-title::after {
  content: ""; display: block; width: 132px; height: 16px; margin-top: 18px;
  background: url("assets/holly-rule.svg") no-repeat left center / contain;
}

/* ---------- Menu cards (open the pop-up) ---------- */
.menus { padding: clamp(88px, 12vw, 170px) var(--pad); }
.menu-cards {
  display: grid; gap: 14px; margin-top: 44px;
  grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: repeat(2, clamp(220px, 22vw, 330px));
  grid-template-areas: "a b c" "a d d";
}
/* The featured card follows the skin: Dinner most of the year, Christmas in December */
[data-skin="normal"] .m-card--dinner { grid-area: a; }
[data-skin="normal"] .m-card--sunday { grid-area: b; }
[data-skin="normal"] .m-card--drinks { grid-area: c; }
[data-skin="normal"] .m-card--christmas { grid-area: d; }
[data-skin="christmas"] .m-card--christmas { grid-area: a; }
[data-skin="christmas"] .m-card--dinner { grid-area: b; }
[data-skin="christmas"] .m-card--sunday { grid-area: c; }
[data-skin="christmas"] .m-card--drinks { grid-area: d; }
.m-card {
  position: relative; overflow: hidden; isolation: isolate;
  border: 0; padding: 0; border-radius: var(--r); cursor: pointer; text-align: left;
  color: var(--ink); background: var(--surface); font: inherit;
}
.m-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 900ms var(--ease-out); }
.m-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in oklch, var(--bg) 92%, transparent), transparent 62%); }
.m-card:hover img { transform: scale(1.05); }
.m-card-text { position: absolute; left: 24px; right: 84px; bottom: 22px; display: grid; gap: 6px; }
.m-card-name { font: 400 clamp(1.6rem, 2.4vw, 2.3rem)/1 var(--display); }
.m-card-meta { color: var(--muted); font-size: 0.9375rem; }
.m-card-arrow {
  position: absolute; right: 22px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10H16M11 5L16 10L11 15' fill='none' stroke='%231d100b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 20px;
  transition: transform 300ms var(--ease-out);
}
.m-card:hover .m-card-arrow { transform: translateX(4px); }
.m-card-seal { position: absolute; right: 20px; top: 20px; width: clamp(88px, 9vw, 120px); transform: rotate(-8deg); }
.m-card-seal svg { width: 100%; height: auto; filter: drop-shadow(0 8px 18px oklch(0 0 0 / 0.35)); }
@media (max-width: 820px) {
  .menu-cards { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 200px 200px; grid-template-areas: "a a" "b c" "d d" !important; }
  .m-card-text { left: 16px; bottom: 16px; right: 64px; }
  .m-card-arrow { right: 14px; bottom: 14px; width: 40px; height: 40px; }
  /* The two half width cards: arrow to the top corner so the name gets the full width */
  :is([data-skin="normal"] :is(.m-card--sunday, .m-card--drinks), [data-skin="christmas"] :is(.m-card--dinner, .m-card--sunday)) .m-card-text { right: 14px; }
  :is([data-skin="normal"] :is(.m-card--sunday, .m-card--drinks), [data-skin="christmas"] :is(.m-card--dinner, .m-card--sunday)) .m-card-arrow { top: 12px; right: 12px; bottom: auto; width: 36px; height: 36px; background-size: 17px; }
  .m-card-name { font-size: 1.5rem; }
  .m-card-meta { font-size: 0.875rem; line-height: 1.35; }
}

/* ---------- Kitchen strip ---------- */
.kitchen { padding: 0 0 clamp(104px, 12vw, 170px); }
.kitchen-sticky { padding: 0 var(--pad); }
.kitchen h2 { margin-bottom: 40px; }
.kitchen-track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 8px; scrollbar-width: none;
}
.kitchen-track::-webkit-scrollbar { display: none; }
.kitchen-track li { flex: 0 0 min(78vw, 420px); scroll-snap-align: start; }
.kitchen figure { margin: 0; }
.kitchen img { aspect-ratio: 9 / 11; object-fit: cover; border-radius: var(--r); width: 100%; }
.kitchen figcaption { margin-top: 14px; color: var(--muted); font-size: 0.9375rem; max-width: 34ch; }
/* The pan is scrubbed by scroll, so it is kept for mouse and trackpad only: touch screens
   (phones and tablets) get the swipe strip above, which cannot stutter */
@supports (animation-timeline: view()) {
  @media (min-width: 900px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .kitchen { height: 320vh; padding-bottom: 0; view-timeline: --kitchen block; }
    .kitchen-sticky { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding-top: var(--header-h); overflow: hidden; }
    .kitchen h2 { margin-bottom: 32px; }
    .kitchen img { max-height: 54vh; }
    .kitchen-track { overflow: visible; width: max-content; margin: 0; padding: 0; animation: pan linear both; animation-timeline: --kitchen; animation-range: contain 0% contain 100%; }
    .kitchen-track li { flex-basis: clamp(300px, 27vw, 420px); }
    @keyframes pan { to { transform: translateX(calc(-100% + 100vw - var(--pad) * 2)); } }
  }
}

/* ---------- Groups ---------- */
.groups {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center;
  padding: clamp(72px, 9vw, 130px) var(--pad); background: var(--surface);
}
.groups-media { margin: 0; }
.groups-media img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: var(--r); }
.groups-copy > p { margin: 24px 0 32px; color: var(--muted); max-width: 44ch; }
.facts { display: grid; gap: 14px; margin-bottom: 36px; }
.facts li { color: var(--muted); }
.facts strong { color: var(--ink); font-weight: 600; margin-right: 6px; }
@media (max-width: 860px) { .groups { grid-template-columns: 1fr; } }

/* ---------- Visit ---------- */
.visit { padding: clamp(104px, 12vw, 170px) var(--pad); }
.visit-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; }
.visit-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 6vw, 96px); margin-top: 48px; align-items: start; }
.visit-media { margin: 0; }
.visit-media img { width: 100%; aspect-ratio: 14 / 9; object-fit: cover; border-radius: var(--r); }
.visit-info { display: grid; gap: 28px; }
.visit-info dt { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 8px; }
.visit-info dd { margin: 0; color: var(--muted); }
.visit-info a { position: relative; text-decoration: none; border-bottom: 1px solid var(--line); }
.visit-info a::after { content: ""; position: absolute; inset: -11px -4px; } /* 44px tap height */
@media (max-width: 860px) { .visit-grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 48px; padding: 56px var(--pad) 120px; border-top: 1px solid var(--line); }
.footer-mark { font: 400 clamp(3.4rem, 10vw, 8rem)/0.9 var(--display); letter-spacing: -0.03em; }
.site-footer ul { display: flex; flex-wrap: wrap; gap: 0 28px; }
.site-footer a, .site-footer .link-btn { display: inline-block; padding: 11px 0; text-decoration: none; color: var(--muted); } /* 44px tap height */
.site-footer a:hover, .site-footer .link-btn:hover { color: var(--ink); }
.footer-small { width: 100%; color: var(--muted); font-size: 0.8125rem; }

/* ---------- Reveals: one shot, set off by IntersectionObserver in main.js ----------
   Nothing is hidden unless the script has added .js-reveal to <html>, and it skips that under
   reduced motion, so with no JS everything simply shows. Opacity and transform only, never
   tied to the scroll position, so there is nothing to stutter on a phone. */
.js-reveal [data-reveal] { transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); }
.js-reveal [data-reveal="up"]:not(.is-shown) { opacity: 0; transform: translateY(14px); }
.js-reveal [data-reveal="settle"] { transition-duration: 900ms; }
.js-reveal [data-reveal="settle"]:not(.is-shown) { transform: scale(1.08); }

/* ---------- Demo skin switch ---------- */
.skin-switch {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-switch);
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 10px;
  background: oklch(0.99 0 0); color: oklch(0.2 0 0); border: 0; border-radius: 999px; cursor: pointer;
  font: 600 0.875rem/1 var(--body); box-shadow: 0 8px 24px oklch(0 0 0 / 0.35);
}
.switch-track { width: 38px; height: 22px; border-radius: 999px; padding: 3px; background: oklch(0.8 0 0); transition: background-color 250ms var(--ease-out); }
.switch-thumb { display: block; width: 16px; height: 16px; border-radius: 50%; background: white; box-shadow: 0 1px 3px oklch(0 0 0 / 0.3); transition: transform 250ms var(--ease-out); }
.skin-switch[aria-pressed="true"] .switch-track { background: oklch(0.56 0.19 27); }
.skin-switch[aria-pressed="true"] .switch-thumb { transform: translateX(16px); }
[data-demo-hidden] .skin-switch { display: none; }

::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: wipe-down 900ms var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  ::view-transition-new(root) { animation: none; }
  .bulb-glow { opacity: 0.6; }
}