/* ==========================================================================
   Westwoods Kitchen
   Palette, type and motion derived from the business's own identity:
   the circular sticker logo (teal ring, yellow brush wordmark, charcoal fill)
   and their own photography (long graze tables shot on dark wood).
   ========================================================================== */

/* ---------- Fonts (self-hosted, woff2 only) ---------- */
@font-face { font-family: 'Bespoke Slab'; src: url('../fonts/bespoke-slab-700.woff2') format('woff2'); font-weight: 700; font-display: swap; font-style: normal; }
@font-face { font-family: 'Bespoke Slab'; src: url('../fonts/bespoke-slab-800.woff2') format('woff2'); font-weight: 800; font-display: swap; font-style: normal; }
@font-face { font-family: 'Switzer'; src: url('../fonts/switzer-400.woff2') format('woff2'); font-weight: 400; font-display: swap; font-style: normal; }
@font-face { font-family: 'Switzer'; src: url('../fonts/switzer-500.woff2') format('woff2'); font-weight: 500; font-display: swap; font-style: normal; }
@font-face { font-family: 'Switzer'; src: url('../fonts/switzer-600.woff2') format('woff2'); font-weight: 600; font-display: swap; font-style: normal; }
@font-face { font-family: 'Switzer'; src: url('../fonts/switzer-700.woff2') format('woff2'); font-weight: 700; font-display: swap; font-style: normal; }

/* ---------- Tokens ---------- */
:root {
  /* Their identity, sampled from the logo file */
  --teal:        oklch(0.723 0.1134 190.5);   /* #00C0B4 ring */
  --teal-deep:   oklch(0.555 0.0900 191);
  --teal-dim:    oklch(0.40 0.055 193);
  --yellow:      oklch(0.933 0.1670 105);     /* #FCF03C wordmark */
  --yellow-deep: oklch(0.845 0.1530 96);

  /* Charcoal ramp: their #606060 fill, extended. Tinted a touch toward the
     teal so the food's reds and yolk-oranges read as the warm thing on screen. */
  --ink-950: oklch(0.158 0.008 200);
  --ink-900: oklch(0.203 0.010 200);
  --ink-850: oklch(0.238 0.011 200);
  --ink-800: oklch(0.277 0.012 200);
  --ink-700: oklch(0.345 0.012 200);
  --ink-600: oklch(0.510 0.006 200);          /* the logo grey itself */
  --ink-400: oklch(0.680 0.008 200);          /* muted text, 6.1:1 on ink-950 */
  --ink-200: oklch(0.865 0.005 200);
  --ink-050: oklch(0.965 0.003 200);          /* body text on dark */
  --linen:   oklch(0.972 0.004 200);          /* light ground: cool off-white, never cream */

  /* Ink and hairlines for use ON the drenched teal/yellow fills. Derived from
     the fill's own hue rather than grey, so nothing reads as washed out. */
  --teal-ink:   oklch(0.28 0.04 195);
  --teal-line:  oklch(0.62 0.09 191);
  --yellow-ink: oklch(0.32 0.05 100);
  --dark-line:  oklch(0.158 0.008 200 / 0.35);

  --focus: var(--yellow);

  /* Type */
  --display: 'Bespoke Slab', 'Rockwell', Georgia, serif;
  --sans: 'Switzer', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid scale, mobile first. Display ceiling stays under 6rem. */
  --t-xs:  0.75rem;
  --t-sm:  0.8125rem;
  --t-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-lg:  clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
  --t-xl:  clamp(1.375rem, 1.24rem + 0.65vw, 1.75rem);
  --t-2xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
  --t-3xl: clamp(2.25rem, 1.8rem + 2.25vw, 3.5rem);
  --t-4xl: clamp(2.75rem, 1.9rem + 4.2vw, 5rem);
  --t-5xl: clamp(3.5rem, 2.1rem + 6.8vw, 5.75rem);

  /* Space */
  --gutter: clamp(1.125rem, 0.85rem + 1.4vw, 2.5rem);
  --measure: 68ch;
  --sect: clamp(3.5rem, 2.4rem + 5.5vw, 7.5rem);
  --sect-lg: clamp(5rem, 3rem + 9vw, 10rem);

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;

  /* Sticky chrome heights. These were hard-coded in three places and drifted:
     .jump was pinned at a literal 68px, so when the auto-hiding header left, the
     sub-nav stayed stranded 68px down with a dead band above it. One source of
     truth now, used by the header, the sub-nav offset and the anchor offsets. */
  --hdr-h: 69px;
  --subnav-h: 69px;

  /* Motion */
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);        /* quint out */
  --e-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* z-scale, semantic */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-nav: 200;
  --z-overlay: 300;
  --z-skip: 400;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ink-950);
  color: var(--ink-050);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }

:where(h1, h2, h3, h4) {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--yellow); color: var(--ink-950); }

.skip {
  position: absolute; left: var(--gutter); top: -100px;
  z-index: var(--z-skip);
  background: var(--yellow); color: var(--ink-950);
  padding: 0.75rem 1.25rem; border-radius: var(--r-sm);
  font-weight: 700; text-decoration: none;
  transition: top 0.2s var(--e-out);
}
.skip:focus { top: 0.75rem; }

.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: 100%; max-width: 780px; margin-inline: auto; padding-inline: var(--gutter); }
.sect { padding-block: var(--sect); }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.1em; }

/* ---------- Type helpers ---------- */
.h-hero { font-size: var(--t-5xl); letter-spacing: -0.04em; line-height: 0.92; }
.h1 { font-size: var(--t-4xl); }
.h2 { font-size: var(--t-3xl); }
.h3 { font-size: var(--t-xl); letter-spacing: -0.02em; }
.lede { font-size: var(--t-lg); color: var(--ink-200); line-height: 1.55; max-width: 46ch; }
.muted { color: var(--ink-400); }
.yellow { color: var(--yellow); }
.tealtxt { color: var(--teal); }

/* The one deliberate label system, borrowed from their own chalkboards.
   Used sparingly, never as a per-section eyebrow. */
.chalk {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--teal);
  letter-spacing: 0.01em;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 52px; padding: 0.875rem 1.5rem;
  font-weight: 700; font-size: var(--t-base);
  text-decoration: none; border-radius: 999px;
  transition: transform 0.35s var(--e-out), background-color 0.25s, color 0.25s, box-shadow 0.35s var(--e-out);
  will-change: transform;
}
.btn-primary { background: var(--yellow); color: var(--ink-950); }
.btn-primary:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 10px 30px -8px oklch(0.933 0.167 105 / 0.5); }
.btn-ghost { background: transparent; color: var(--ink-050); border: 1.5px solid var(--ink-700); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-2px); }
.btn-dark { background: var(--ink-950); color: var(--ink-050); }
.btn-dark:hover { background: var(--ink-850); transform: translateY(-2px); }
/* The secondary action on a drenched teal/yellow fill. Was hand-rolled inline
   on five pages before it earned a class. */
.btn-outline-dark { background: transparent; border: 1.5px solid var(--dark-line); color: var(--ink-950); }
.btn-outline-dark:hover { background: var(--ink-950); border-color: var(--ink-950); color: var(--ink-050); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover { transform: none; transition: background-color 0.2s, color 0.2s; }
}

/* ---------- Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: oklch(0.158 0.008 200 / 0.82);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--ink-850);
  transition: transform 0.4s var(--e-out);
}
.hdr[data-hidden="true"] { transform: translateY(-100%); }
.hdr-in {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: calc(var(--hdr-h) - 1px); /* the 1px is the header's own border */
}
.brand { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; flex-shrink: 0; min-height: 44px; }
.brand img { width: 44px; height: 44px; border-radius: 50%; }
.brand-txt { display: none; }
.brand-name {
  font-family: var(--display); font-weight: 800; font-size: 0.95rem;
  letter-spacing: -0.01em; line-height: 1.1; color: var(--ink-050);
}
.brand-sub { font-size: 0.75rem; color: var(--teal); font-weight: 500; letter-spacing: 0.01em; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-right: -10px;
  border-radius: var(--r-sm); color: var(--ink-050);
}
.nav-toggle span {
  position: relative; display: block; width: 22px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform 0.35s var(--e-out), background-color 0.2s;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ''; position: absolute; left: 0; width: 22px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform 0.35s var(--e-out), top 0.35s var(--e-out);
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

.nav-desktop { display: none; }

/* Mobile menu panel */
.nav-panel {
  position: fixed; inset: 68px 0 0 0; z-index: var(--z-overlay);
  background: var(--ink-950);
  padding: var(--gutter);
  display: flex; flex-direction: column;
  overflow-y: auto;
  visibility: hidden; opacity: 0;
  transition: opacity 0.3s var(--e-out), visibility 0.3s;
}
.nav-panel[data-open="true"] { visibility: visible; opacity: 1; }
.nav-panel ul { list-style: none; padding: 0; }
.nav-panel li { border-bottom: 1px solid var(--ink-850); }
.nav-panel a {
  display: flex; align-items: baseline; gap: 0.75rem;
  padding: 1.05rem 0;
  font-family: var(--display); font-weight: 700;
  font-size: 1.6rem; letter-spacing: -0.02em;
  text-decoration: none; color: var(--ink-050);
  transition: color 0.25s, transform 0.35s var(--e-out);
}
.nav-panel a:hover, .nav-panel a[aria-current="page"] { color: var(--yellow); }
.nav-panel a[aria-current="page"]::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal); align-self: center;
}
.nav-panel .nav-foot { margin-top: auto; padding-top: 2rem; }
.nav-panel .nav-foot .btn { width: 100%; }
.nav-call {
  display: block; margin-top: 1rem; text-align: center;
  font-family: var(--display); font-weight: 700; font-size: 1.25rem;
  color: var(--teal); text-decoration: none;
}
body[data-lock] { overflow: hidden; }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav-panel { display: none; }
  .brand-txt { display: block; }
  .brand img { width: 48px; height: 48px; }
  .hdr-in { min-height: 80px; }
  .nav-desktop { display: flex; align-items: center; gap: clamp(1rem, 1.6vw, 2rem); }
  .nav-desktop ul { display: flex; gap: clamp(1rem, 1.8vw, 2rem); list-style: none; padding: 0; }
  /* Scoped to the link list only: the CTA in this bar is a .btn and must keep
     its own colours, or it renders grey-on-yellow. */
  .nav-desktop ul a {
    position: relative; text-decoration: none; font-weight: 500;
    font-size: 0.9375rem; color: var(--ink-200); padding-block: 0.4rem;
    transition: color 0.25s;
  }
  .nav-desktop ul a::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 100%; height: 2px; background: var(--teal);
    transform: scaleX(0); transform-origin: right;
    transition: transform 0.4s var(--e-out);
  }
  .nav-desktop ul a:hover { color: var(--ink-050); }
  .nav-desktop ul a:hover::after, .nav-desktop ul a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
  .nav-desktop ul a[aria-current="page"] { color: var(--ink-050); }
  @media (prefers-reduced-motion: reduce) {
    .nav-desktop ul a::after { transition: none; }
  }
}

/* ---------- Hero ----------
   The band is their own close-range grazing shots stitched edge to edge at a
   constant height, so it reads as one table travelling past rather than a
   slideshow. It sits above the type instead of behind it: their photography is
   too good to bury under a scrim. */
.hero { position: relative; background: var(--ink-950); }
.hero-band {
  position: relative; z-index: var(--z-base);
  height: clamp(190px, 34svh, 400px);
  overflow: clip;
  background: var(--ink-900);
}
.hero-track { display: flex; height: 100%; width: max-content; will-change: transform; }
.hero-track img {
  height: 100%; width: clamp(150px, 40vw, 290px);
  object-fit: cover; object-position: center;
  flex: none;
}
/* A whisper of the ground colour at the seam, so the band lands on the page. */
.hero-band::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 40%;
  background: linear-gradient(to bottom, transparent, oklch(0.158 0.008 200 / 0.55));
  pointer-events: none;
}
.hero-in {
  position: relative; z-index: var(--z-raised);
  padding-block: clamp(2rem, 1.2rem + 3.5vw, 3.5rem) clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
}
.hero h1 { color: var(--yellow); }
.hero .lede { margin-top: 1.25rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hero-cta .btn { flex: 1 1 auto; min-width: 160px; }
@media (min-width: 640px) { .hero-cta .btn { flex: 0 0 auto; } }
/* Interior-page masthead: same band, shorter, so the page opens on their food
   instead of on empty charcoal. */
.hero-band--slim { height: clamp(112px, 17svh, 170px); }
.page-head { padding-block: clamp(1.75rem, 1.2rem + 2.5vw, 3rem) var(--sect); }

@media (min-width: 900px) {
  .hero-band { height: clamp(300px, 42vh, 440px); }
  .hero-band--slim { height: clamp(150px, 20vh, 210px); }
  .hero-in { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 4vw, 4rem); align-items: end; }
  .hero-in .lede { margin-top: 0; }
  .hero-cta { grid-column: 1 / -1; margin-top: 0.5rem; }
}

/* ---------- Marquee (their own Facebook intro line) ---------- */
.marquee {
  background: var(--yellow); color: var(--ink-950);
  padding-block: 0.7rem;
  overflow: clip;
  border-block: 2px solid var(--ink-950);
}
.marquee-track {
  display: flex; width: max-content; gap: 0;
  will-change: transform;
}
.marquee-set { display: flex; flex: none; }
.marquee span {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.25rem);
  letter-spacing: -0.01em; white-space: nowrap;
  padding-inline: 0.85rem;
}
.marquee span::after { content: '|'; margin-left: 1.7rem; opacity: 0.35; }
.marquee--teal { background: var(--teal); }

/* ---------- Trust line ---------- */
.trust { border-bottom: 1px solid var(--ink-850); }
.trust ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  padding-block: 1.1rem;
  font-size: var(--t-sm); color: var(--ink-400);
}
.trust li { display: flex; align-items: center; gap: 0.45rem; }
.trust li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); flex: none;
}
.trust b { color: var(--ink-050); font-weight: 600; }

/* ---------- Section heads ---------- */
.sect-head { margin-bottom: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); }
.sect-head .h2 { max-width: 18ch; }
.sect-head p { margin-top: 0.9rem; }

/* ---------- Offer list (photo-led, not icon cards) ---------- */
.offers { display: grid; gap: 1px; background: var(--ink-850); }
.offer {
  position: relative; display: block; text-decoration: none;
  background: var(--ink-950);
  overflow: clip;
  min-height: 340px;
  display: flex; align-items: flex-end;
}
.offer-img { position: absolute; inset: 0; }
.offer-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--e-out); }
.offer:hover .offer-img img { transform: scale(1.06); }
.offer::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, oklch(0.158 0.008 200 / 0.94) 8%, oklch(0.158 0.008 200 / 0.45) 48%, oklch(0.158 0.008 200 / 0.1) 100%);
}
.offer-body { position: relative; z-index: var(--z-raised); padding: var(--gutter); width: 100%; }
.offer h3 { font-size: var(--t-2xl); color: var(--ink-050); }
.offer p { margin-top: 0.4rem; color: var(--ink-200); font-size: 0.9375rem; max-width: 38ch; }
.offer-price {
  display: inline-block; margin-top: 0.9rem;
  font-family: var(--display); font-weight: 700;
  color: var(--yellow); font-size: 1.0625rem;
}
.offer-price small { font-family: var(--sans); font-weight: 500; font-size: 0.75rem; color: var(--ink-400); }
@media (prefers-reduced-motion: reduce) { .offer-img img, .offer:hover .offer-img img { transition: none; transform: none; } }

@media (min-width: 700px) { .offers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) {
  .offers { grid-template-columns: repeat(3, 1fr); }
  .offer { min-height: 420px; }
}

/* ---------- The travelling table section ---------- */
.table-sect { padding-block: var(--sect); overflow: clip; }
.table-track-wrap { overflow: clip; margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.table-track {
  display: flex; width: max-content; gap: 12px;
  will-change: transform;
}
.table-track figure { flex: none; margin: 0; }
.table-track img {
  height: clamp(200px, 40vw, 380px); width: auto;
  border-radius: var(--r-sm);
  object-fit: cover;
}
.table-note {
  margin-top: 1.25rem; font-size: var(--t-sm); color: var(--ink-400);
}

/* ---------- Drenched blocks ---------- */
.drench-teal { background: var(--teal); color: var(--ink-950); }
.drench-teal .h2, .drench-teal h3 { color: var(--ink-950); }
.drench-teal p { color: var(--teal-ink); }
.drench-yellow { background: var(--yellow); color: var(--ink-950); }
.drench-yellow .h2, .drench-yellow h3 { color: var(--ink-950); }
.drench-yellow p { color: var(--yellow-ink); }

/* ---------- Testimonials ---------- */
.quotes { display: grid; gap: 1.5rem; }
.quote { background: var(--ink-950); color: var(--ink-050); padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); border-radius: var(--r-md); }
.quote blockquote { font-family: var(--display); font-weight: 700; font-size: var(--t-lg); line-height: 1.3; letter-spacing: -0.015em; }
.quote figcaption { margin-top: 1.1rem; font-size: var(--t-sm); color: var(--ink-400); }
.quote figcaption b { display: block; color: var(--ink-050); font-size: var(--t-base); font-weight: 600; }
.stars { color: var(--yellow); letter-spacing: 0.12em; font-size: 0.875rem; margin-bottom: 0.9rem; }
@media (min-width: 780px) { .quotes { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Chalkboard menu ---------- */
.board { background: var(--ink-900); border: 1px solid var(--ink-800); border-radius: var(--r-lg); overflow: clip; }
.board + .board { margin-top: 1.25rem; }
.board-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) var(--gutter);
  border-bottom: 1px solid var(--ink-800);
  background: var(--ink-850);
}
.board-head h2, .board-head h3 { font-size: var(--t-xl); color: var(--ink-050); }
.board-price {
  font-family: var(--display); font-weight: 800;
  font-size: var(--t-lg); color: var(--yellow); white-space: nowrap;
}
.board-min { font-family: var(--sans); font-weight: 500; font-size: 0.75rem; color: var(--ink-400); display: block; text-align: right; }
.offer-price small { font-size: 0.75rem; }
.board-body { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) var(--gutter); }
.board-body p { color: var(--ink-200); }
.board-body p + p { margin-top: 0.75rem; }

.menu-rows { list-style: none; padding: 0; display: grid; gap: 0; }
.menu-rows li {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.25rem 1rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--ink-850);
}
.menu-rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.menu-rows .mi { flex: 1 1 15rem; }
.menu-rows .mi b { font-weight: 600; color: var(--ink-050); }
.menu-rows .mi span { display: block; color: var(--ink-400); font-size: 0.875rem; line-height: 1.5; margin-top: 0.15rem; }
.menu-rows .mp { font-family: var(--display); font-weight: 700; color: var(--yellow); white-space: nowrap; }
.menu-rows .mp small { display: block; text-align: right; font-family: var(--sans); font-weight: 500; font-size: 0.75rem; color: var(--ink-400); }

.pill-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill-list li {
  border: 1px solid var(--ink-700); border-radius: 999px;
  padding: 0.35rem 0.85rem; font-size: 0.875rem; color: var(--ink-200);
}

/* Menu jump nav */
.jump {
  position: sticky; top: var(--hdr-h); z-index: var(--z-sticky);
  background: var(--ink-950); border-bottom: 1px solid var(--ink-850);
  transition: top 0.4s var(--e-out);
}
/* Header and sub-nav are siblings via <header> + <main>, so the sub-nav can follow
   the header up and back down as one movement. Same duration, same distance. */
.hdr[data-hidden="true"] ~ #main .jump { top: 0; }
@media (prefers-reduced-motion: reduce) { .jump { transition: none; } }

/* Anchors land the heading below the sticky chrome instead of behind it.
   Only pages that actually carry a sub-nav reserve room for one. */
:where(section, article)[id] { scroll-margin-top: calc(var(--hdr-h) + 0.75rem); }
body:has(.jump) :where(section, article)[id] { scroll-margin-top: calc(var(--hdr-h) + var(--subnav-h) + 0.75rem); }
.jump-scroll { display: flex; gap: 0.5rem; overflow-x: auto; padding-block: 0.75rem; scrollbar-width: none; scroll-snap-type: x proximity; }
.jump-scroll::-webkit-scrollbar { display: none; }
.jump a, .jump button {
  flex: none; scroll-snap-align: start;
  border: 1px solid var(--ink-700); border-radius: 999px;
  padding: 0.45rem 0.9rem; font-size: 0.8125rem; font-weight: 600;
  text-decoration: none; color: var(--ink-200); white-space: nowrap;
  min-height: 44px;
  display: inline-flex; align-items: center;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.jump a:hover, .jump a.is-active,
.jump button:hover, .jump button.is-active { background: var(--teal); border-color: var(--teal); color: var(--ink-950); }
@media (min-width: 900px) { :root { --hdr-h: 81px; } }

/* Gallery filtering */
.gal-count { font-size: var(--t-sm); margin-bottom: 1.25rem; }
.gal figure[hidden] { display: none; }
.gal-empty { margin-top: 2rem; color: var(--ink-400); }
.gal-reset {
  color: var(--teal); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Gallery ---------- */
.gal { columns: 2; column-gap: 10px; }
.gal figure { break-inside: avoid; margin: 0 0 10px; }
.gal img { width: 100%; border-radius: var(--r-sm); background: var(--ink-850); }
.gal button {
  display: block; width: 100%; padding: 0; border-radius: var(--r-sm); overflow: clip;
  transition: transform 0.5s var(--e-out);
}
.gal button:hover { transform: scale(0.985); }
@media (min-width: 700px) { .gal { columns: 3; column-gap: 12px; } .gal figure { margin-bottom: 12px; } }
@media (min-width: 1100px) { .gal { columns: 4; } }
@media (prefers-reduced-motion: reduce) { .gal button, .gal button:hover { transition: none; transform: none; } }

/* Lightbox */
.lb { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; }
.lb::backdrop { background: oklch(0.1 0.008 200 / 0.94); }
.lb-in { position: fixed; inset: 0; display: grid; place-items: center; padding: clamp(0.5rem, 2vw, 2rem); }
.lb img { max-width: 100%; max-height: 86svh; width: auto; border-radius: var(--r-sm); }
.lb-cap { margin-top: 0.75rem; text-align: center; font-size: var(--t-sm); color: var(--ink-200); max-width: 60ch; }
.lb-btn {
  position: fixed; z-index: 2;
  width: 52px; height: 52px; border-radius: 50%;
  background: oklch(0.158 0.008 200 / 0.8); color: var(--ink-050);
  border: 1px solid var(--ink-700);
  display: grid; place-items: center;
  backdrop-filter: blur(8px);
}
.lb-btn:hover { background: var(--teal); color: var(--ink-950); border-color: var(--teal); }
.lb-close { top: 1rem; right: 1rem; }
.lb-prev { left: 0.75rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 0.75rem; top: 50%; transform: translateY(-50%); }

/* ---------- Occasions ---------- */
.occ { display: grid; gap: 1px; background: var(--ink-850); border-block: 1px solid var(--ink-850); }
.occ-item { background: var(--ink-950); padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem) var(--gutter); }
.occ-item h3 { font-size: var(--t-xl); }
.occ-item p { margin-top: 0.5rem; color: var(--ink-400); font-size: 0.9375rem; }
@media (min-width: 700px) { .occ { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .occ { grid-template-columns: repeat(3, 1fr); } }

.feature { display: grid; gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); align-items: center; }
.feature img { width: 100%; border-radius: var(--r-md); }
@media (min-width: 860px) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature--flip .feature-media { order: 2; }
}

/* ---------- Form ---------- */
.form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 600; font-size: 0.9375rem; }
.field .hint { font-size: 0.8125rem; color: var(--ink-400); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px;
  background: var(--ink-900); color: var(--ink-050);
  border: 1.5px solid var(--ink-700); border-radius: var(--r-sm);
  padding: 0.75rem 0.9rem;
  transition: border-color 0.25s, background-color 0.25s;
}
.field textarea { min-height: 130px; resize: vertical; padding-top: 0.75rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-400); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-600); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); background: var(--ink-850); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2300C0B4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.75rem; }
.field[data-invalid] input, .field[data-invalid] select, .field[data-invalid] textarea { border-color: oklch(0.68 0.19 25); }
.err { font-size: 0.8125rem; color: oklch(0.75 0.17 25); display: none; }
.field[data-invalid] .err { display: block; }
/* Contact details are tappable, so they get real target height. */
.contact-list { list-style: none; padding: 0; display: grid; gap: 0.15rem; margin-top: 0.75rem; }
.contact-list a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--teal); font-weight: 600; text-decoration: none;
  word-break: break-word; transition: color 0.25s;
}
.contact-list a:hover { color: var(--ink-050); text-decoration: underline; text-underline-offset: 3px; }
.contact-list li.muted { line-height: 1.55; padding-block: 0.6rem; }

.form-row { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.req { color: var(--teal); }

/* ---------- FAQ ---------- */
.faq { border-bottom: 1px solid var(--ink-850); }
.faq summary {
  cursor: pointer; padding-block: 1.15rem;
  font-family: var(--display); font-weight: 700;
  font-size: var(--t-lg); letter-spacing: -0.015em;
  list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  transition: color 0.25s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--teal); }
.faq-mark {
  color: var(--teal); flex: none;
  font-family: var(--sans); font-weight: 400; font-size: 1.5rem; line-height: 1;
  transition: transform 0.35s var(--e-out);
}
.faq[open] .faq-mark { transform: rotate(45deg); }
.faq p { padding-bottom: 1.15rem; max-width: 60ch; }
@media (prefers-reduced-motion: reduce) { .faq-mark { transition: none; } }

/* ---------- Footer ---------- */
.ftr { background: var(--ink-900); border-top: 1px solid var(--ink-800); padding-block: var(--sect) 2rem; }
.ftr-grid { display: grid; gap: 2.5rem; }
.ftr h2, .ftr h3 { font-size: 0.875rem; font-family: var(--sans); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 1rem; }
.ftr ul { list-style: none; padding: 0; display: grid; gap: 0.15rem; }
.ftr li { display: flex; }
.ftr a { text-decoration: none; color: var(--ink-200); transition: color 0.25s; }
/* Links in the footer lists are real tap targets, not just text.
   (The Elev8 credit in the legal line stays inline: WCAG 2.5.8 exempts targets
   inside a sentence, and breaking it out would read worse.) */
.ftr ul a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding-block: 0.25rem; }
.ftr a:hover { color: var(--teal); }
.ftr ul li.muted { padding-block: 0.6rem; }
.ftr-brand img { width: 72px; height: 72px; border-radius: 50%; }
.ftr-brand p { margin-top: 1rem; color: var(--ink-400); font-size: 0.9375rem; max-width: 34ch; }
.ftr-legal {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--ink-800);
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between;
  font-size: 0.8125rem; color: var(--ink-400);
}
.ftr-legal a { color: var(--ink-400); text-decoration: underline; text-underline-offset: 3px; }
.ftr-legal a:hover { color: var(--teal); }
.socials { display: flex; gap: 0.75rem; }
.socials a {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--ink-700);
  display: grid; place-items: center;
  transition: border-color 0.25s, color 0.25s, transform 0.35s var(--e-out);
}
.socials a:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-2px); }
@media (min-width: 760px) { .ftr-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
@media (prefers-reduced-motion: reduce) { .socials a:hover { transform: none; } }

/* ---------- Reveals ----------
   Default is visible. The hidden start state only applies once JS has
   confirmed it can drive the reveal, so nothing can ship blank. */
.js-motion [data-rev] { opacity: 0; transform: translateY(18px); }
.js-motion [data-rev].is-in {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--e-out-quart), transform 0.7s var(--e-out-quart);
  transition-delay: var(--d, 0ms);
}
/* Text blocks resolve out of a blur, the way a dish comes into focus.
   Scoped to [data-rev=""] (the valueless text variant) ON PURPOSE: a bare
   [data-rev] would also blur the "lay" image reveals, which would put a
   GPU-expensive filter on all 56 gallery photos AND leave them permanently
   blurred, since the lay variant only resets opacity and transform. */
.js-motion [data-rev=""] { filter: blur(8px); }
.js-motion [data-rev=""].is-in {
  filter: blur(0);
  transition: opacity 0.7s var(--e-out-quart), transform 0.7s var(--e-out-quart), filter 0.6s var(--e-out-quart);
  transition-delay: var(--d, 0ms);
}
/* Plates being set down: a shorter, snappier arrival for image groups. */
.js-motion [data-rev="lay"] { opacity: 0; transform: translateY(26px) scale(0.985); }
.js-motion [data-rev="lay"].is-in {
  opacity: 1; transform: none;
  transition: opacity 0.5s var(--e-out-quart), transform 0.55s var(--e-out);
  transition-delay: var(--d, 0ms);
}
/* Chalk wipe: menu boards write themselves on.
   CRITICAL: the clip goes on the CHILDREN, never on the observed element.
   clip-path: inset(0 100% 0 0) collapses the intersection rect to nothing, so
   IntersectionObserver never reports the element as visible, so .is-in is never
   added, so it stays clipped forever. Clipping the element you are observing is
   a deadlock: it shipped once and left the whole menus page blank.
   The board shell stays visible and the contents wipe on, which reads better
   anyway: the board is there, then the chalk goes up. */
.js-motion [data-rev="chalk"] > * { opacity: 0; -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); }
.js-motion [data-rev="chalk"].is-in > * {
  opacity: 1; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0);
  transition: opacity 0.35s linear, clip-path 0.75s var(--e-out), -webkit-clip-path 0.75s var(--e-out);
  transition-delay: var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-rev], .js-motion [data-rev="lay"], .js-motion [data-rev="chalk"],
  .js-motion [data-rev="chalk"] > * {
    opacity: 1 !important; transform: none !important; filter: none !important;
    -webkit-clip-path: none !important; clip-path: none !important;
    transition: none !important;
  }
}
/* Printing and headless capture never scroll, so nothing would ever reveal. */
@media print {
  .js-motion [data-rev], .js-motion [data-rev="lay"], .js-motion [data-rev="chalk"],
  .js-motion [data-rev="chalk"] > * {
    opacity: 1 !important; transform: none !important; filter: none !important;
    -webkit-clip-path: none !important; clip-path: none !important;
  }
  .hdr, .nav-panel, .marquee { display: none !important; }
}