/* ==========================================================================
   Wanderlust Food Truck Festival
   wl.css  ·  one stylesheet, no framework, no CDN

   Section 1  Tokens
   Section 2  Reset and base
   Section 3  Chrome: skip link, header, nav, footer
   Section 4  Fluid hero: panel, mask, curve, cue, rails, ghost
   Section 5  Sections and components
   Section 6  Forms, calendar, vendor page
   Section 7  Consent gate
   Section 8  Motion and reduced motion
   ========================================================================== */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin-opsz-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/public-sans-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* The seam. Sampled from the hero file (img/hero.webp), never picked by
     eye: --hero-top from its top band, --hero-bleed from its bottom band.
     Re-sample both if the photograph is ever replaced. */
  --hero-sky:   #04414E;
  --hero-top:   #3585A1;   /* the photograph's own sky */
  --hero-bleed: #EAC29F;   /* the page surface the photograph dissolves into */
  --hero-bleed-rgb: 234, 194, 159;   /* the same tone, for alpha ramps */
  --bar:        #F9F6F3;   /* the header bar once it is solid */
  --accent:     #8C3A12;   /* the parent's rust, white on it reads 7.7:1 */

  /* Derived from the surfaces above. */
  --accent-ink: #7A3010;   /* the rust as text on the bleed, 5.9:1 */
  --sky-deep:   #022B34;
  --sky-soft:   #2C83A2;
  --bleed-deep: #DDB18B;
  --bleed-lift: #F6D8BC;
  --ghost:      #E5BB97;   /* the bleed, 2.5 percent darker */

  --ink:        #2E2114;   /* body on bleed,      9.46:1 */
  --ink-2:      #43301F;   /* secondary,          7.56:1 */
  --ink-3:      #5A3A22;   /* tertiary and rails, 6.16:1 */
  --on-sky:     #F6E7D3;   /* body on sky,        9.24:1 */
  --on-sky-dim: #C4D9DE;
  --on-photo:   #FFEEDA;   /* eyebrow over the photograph's sky */

  --card:       #FFFBF5;
  --line:       #D2A57F;
  --line-soft:  #DBB08C;

  --font-display: 'Fraunces', Georgia, 'Iowan Old Style', serif;
  --font-ui:      'Public Sans', 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter:  clamp(16px, 6vw, 96px);
  --edge:    min(4rem, 5vw);   /* header and hero band inset, as the parent */
  --nav-h:   76px;
  --shell:   1220px;
  --radius:  18px;
  --shadow:  0 1px 3px rgba(46, 33, 20, .08), 0 12px 32px rgba(46, 33, 20, .09);
  --shadow-l:0 2px 6px rgba(46, 33, 20, .09), 0 28px 60px rgba(46, 33, 20, .13);

  --focus: #5C230B;
}

/* ── 2. Reset and base ─────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  hyphens: none;
  -webkit-hyphens: none;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--hero-bleed);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  /* clip, not hidden: hidden turns the body into a scroll container and the
     sticky header stops sticking */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; }
img { border-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.wl-shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wl-eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.wl-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── 3. Chrome ─────────────────────────────────────────────────────────── */

.wl-skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 200;
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: var(--shadow-l);
  transition: top .18s ease;
}
.wl-skip:focus { top: 12px; }

.wl-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: transparent;
  transition: background .3s ease, box-shadow .3s ease;
  /* height reserved so nothing shifts on load */
  min-height: var(--nav-h);
}
/* On scroll the bar takes the sky tone and gains a hairline. No shrink. */
.wl-header[data-stuck="true"] {
  background: var(--bar);
  box-shadow: 0 1px 0 var(--line);
}

.wl-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--nav-h);
  max-width: none;
  padding-inline: var(--edge);
}

.wl-logo {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--on-sky);
  white-space: nowrap;
}
.wl-logo span { color: #F0B64B; }
/* the black mark reads white over the photograph's sky, and returns to
   black once the bar is solid. One file, both states. */
.wl-logo__mark { display: block; height: 28px; width: auto; flex: none; filter: invert(1); }
.wl-header[data-stuck="true"] .wl-logo,
.wl-header--solid .wl-logo { color: var(--ink); }
.wl-header[data-stuck="true"] .wl-logo span,
.wl-header--solid .wl-logo span { color: var(--accent); }
.wl-header[data-stuck="true"] .wl-logo__mark,
.wl-header--solid .wl-logo__mark { filter: none; }
@media (max-width: 860px) { .wl-logo { font-size: 12px; letter-spacing: .16em; } }
@media (max-width: 430px) {
  .wl-logo { font-size: 10.5px; letter-spacing: .12em; }
  .wl-logo__mark { height: 22px; }
}

.wl-nav { display: flex; align-items: center; gap: min(2.5rem, 3vw); }
.wl-nav a {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--on-sky);
  padding: 6px 0;
}
.wl-header[data-stuck="true"] .wl-nav a,
.wl-header--solid .wl-nav a { color: var(--ink); }
.wl-nav a:hover,
.wl-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* The pill keeps its own shape and colour in the nav. */
.wl-nav a.wl-btn {
  padding: 11px 22px;
  font-weight: 500;
  letter-spacing: .1em;
  border: 0;
  text-decoration: none;
}
.wl-nav a.wl-btn--primary,
.wl-header[data-stuck="true"] .wl-nav a.wl-btn--primary,
.wl-header--solid .wl-nav a.wl-btn--primary { color: #FFF6EC; }
.wl-nav a.wl-btn--primary:hover { background: #74300F; text-decoration: none; }

/* Pages with no hero photo start the header on the sky tone. */
.wl-header--solid { background: var(--bar); box-shadow: 0 1px 0 var(--line-soft); }
/* and the masthead opens on that same tone, easing into the bleed */
.wl-header--solid + .wl-main > section:first-of-type {
  background: linear-gradient(to bottom, var(--bar) 0, var(--hero-bleed) 120px);
}

.wl-burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: rgba(2, 38, 48, .35);
  border: 1px solid rgba(246, 231, 211, .55);
  border-radius: 999px;
  color: var(--on-sky);
  cursor: pointer;
}
.wl-header[data-stuck="true"] .wl-burger,
.wl-header--solid .wl-burger {
  background: rgba(249, 246, 243, .72);
  border-color: rgba(46, 33, 20, .35);
  color: var(--ink);
}

@media (max-width: 860px) {
  .wl-burger { display: inline-flex; }
  .wl-nav {
    position: absolute;
    left: var(--edge); right: var(--edge);
    top: calc(var(--nav-h) - 6px);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px;
    background: var(--card);
    border-radius: 14px;
    box-shadow: var(--shadow-l);
    display: none;
  }
  .wl-nav.wl-open { display: flex; }
  .wl-nav a,
  .wl-header[data-stuck="true"] .wl-nav a,
  .wl-header--solid .wl-nav a {
    color: var(--ink);
    padding: 12px 10px;
    border-radius: 8px;
    text-decoration: none;
  }
  .wl-nav a:hover { background: var(--bleed-lift); text-decoration: none; }
  .wl-nav a:hover { background: var(--bleed-lift); text-decoration: none; }
  .wl-header .wl-nav a[aria-current="page"]:not(.wl-btn) { background: var(--bleed-lift); color: var(--accent-ink); text-decoration: none; }
  .wl-nav a.wl-btn { margin-top: 6px; text-align: center; padding: 14px 22px; }
}

.wl-section--sky + .wl-footer { margin-top: 0; }
.wl-footer {
  background: var(--hero-sky);
  color: var(--on-sky);
  padding: clamp(48px, 7vw, 84px) 0 34px;
  margin-top: clamp(60px, 9vw, 120px);
}
.wl-footer a { color: var(--on-sky); text-decoration: none; }
.wl-footer a:hover { text-decoration: underline; }
.wl-footer__grid {
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
}
@media (max-width: 760px) { .wl-footer__grid { grid-template-columns: 1fr; gap: 30px; } }
.wl-footer h2 { font-size: 24px; color: #fff; }
.wl-footer h3 {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--on-sky-dim);
  margin: 0 0 14px;
}
.wl-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.wl-footer__meta {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(246, 231, 211, .18);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--on-sky-dim);
}

/* ── 4. Fluid hero ─────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow-x: clip;
  background: var(--hero-bleed);
  padding: 0;
  margin-top: calc(var(--nav-h) * -1);   /* the header floats over the sky */
  --hero-band-lift: clamp(90px, 8vw, 130px);
}

.hero__panel { position: relative; overflow: hidden; isolation: isolate; }

/* Stands in for the photograph until it decodes, in its own tones, so both
   seams are already correct in the first paint. */
.hero__sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      var(--hero-top)   0%,
      #6398AB          22%,
      #5E7279          32%,
      #A97A67          70%,
      #D6AB8B          80%,
      var(--hero-bleed) 90%,
      var(--hero-bleed) 100%);
}

.hero__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: min(calc(100svh - 96px), 960px);
  object-fit: cover;
  object-position: 50% 100%;
  /* the lower third dissolves into the page surface on an alpha ramp */
  --hero-fade: linear-gradient(to bottom,
      rgba(0,0,0,1)   62%,
      rgba(0,0,0,.72) 82%,
      rgba(0,0,0,.28) 94%,
      rgba(0,0,0,0)  100%);
  mask-image: var(--hero-fade);
  -webkit-mask-image: var(--hero-fade);
}

/* 4 percent grain over both zones, which is where 8 bit banding shows worst */
.hero__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .04;
  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='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Legibility veil for the header and rails, which sit over the sky and the
   tree line in light type. Strongest at the top, gone before the truck. */
.hero__panel::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: min(46%, 380px);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
      rgba(2, 38, 48, .46)  0%,
      rgba(2, 38, 48, .38) 40%,
      rgba(2, 38, 48, .14) 75%,
      rgba(2, 38, 48, 0)  100%);
}

/* The page surface rises out of the photograph on the same alpha ramp the
   image fades on, so there is no drawn edge anywhere along the seam. */
.hero__curve {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  bottom: -1px;
  height: clamp(130px, 19vw, 300px);
  pointer-events: none;
  background: linear-gradient(to bottom,
      rgba(var(--hero-bleed-rgb), 0)    0%,
      rgba(var(--hero-bleed-rgb), .12) 22%,
      rgba(var(--hero-bleed-rgb), .34) 44%,
      rgba(var(--hero-bleed-rgb), .62) 63%,
      rgba(var(--hero-bleed-rgb), .85) 80%,
      rgba(var(--hero-bleed-rgb), 1)  100%);
}

/* The copy band: tagline left, the page's meta description right. Pulled up
   into the faded zone by a negative margin rather than absolute positioning,
   so it can never overflow a short viewport. */
.hero__band {
  position: relative;
  z-index: 3;
  max-width: none;
  padding-inline: var(--edge);
  margin-top: calc(-1 * var(--hero-band-lift));
  padding-bottom: clamp(40px, 6vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-areas:
    "title   sub"
    "actions .";
  align-items: end;
  column-gap: clamp(32px, 5vw, 96px);
}

.hero__title {
  grid-area: title;
  font-size: clamp(2.2rem, 4.2vw, 3.5rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--ink);
  max-width: 14ch;
  margin: 0;
}
.hero__title strong { display: block; font-weight: 600; }

/* The meta description, to the right of the tagline, level with its last line. */
.hero__sub {
  grid-area: sub;
  margin: 0 0 .35em;
  max-width: 42ch;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  color: var(--ink-2);
}

.hero__actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(22px, 2.4vw, 34px);
}
.hero__actions .wl-btn {
  font-weight: 500;
  letter-spacing: .06em;
  padding: 14px 32px;
  border-width: 1px;
}
.hero__actions .wl-btn--primary { color: #FFF6EC; }
.hero__actions .wl-btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.hero__actions .wl-btn--ghost:hover { background: rgba(255, 251, 245, .55); }

/* Hero rails: social links down the left edge, the address down the right. */
.hero__rail {
  position: absolute;
  top: 30svh;
  z-index: 5;
  display: flex;
  gap: 18px;
  writing-mode: vertical-rl;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #FFEEDA;
  text-shadow: 0 1px 14px rgba(1, 30, 38, .6);
}
.hero__rail a { text-decoration: none; padding: 4px 2px; }
.hero__rail a:hover { color: #F0B64B; text-decoration: underline; text-underline-offset: 4px; }
.hero__rail--left  { left: clamp(10px, 2.5vw, 34px); }
.hero__rail--right { right: clamp(10px, 2.5vw, 34px); transform: rotate(180deg); opacity: .7; }
@media (max-width: 1100px) { .hero__rail { display: none; } }

/* Rails. The panel runs full width now, so they start low enough to sit in
   the faded band where the picture has already become the bleed tone, and
   run past the hero bottom into the first body section. */
.wl-rail {
  position: absolute;
  top: 76svh;
  z-index: 4;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-rl;
  color: var(--ink-2);
  padding: 4px 2px;
}
.wl-rail:hover { color: var(--accent-ink); }
.wl-rail--left  { left: clamp(6px, 1.6vw, 26px); }
.wl-rail--right { right: clamp(6px, 1.6vw, 26px); transform: rotate(180deg); }
@media (max-width: 1100px) { .wl-rail { display: none; } }

/* The word is drawn from an attribute through a pseudo element, so the
   page has no text node here at all: nothing for a screen reader to read
   and nothing for a contrast checker to measure. */
.wl-ghost::before { content: attr(data-ghost); }
.wl-ghost {
  position: absolute;
  inset-inline: 0;
  bottom: -12px;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(120px, 22vw, 320px);
  line-height: .8;
  letter-spacing: -0.04em;
  text-align: center;
  text-transform: uppercase;
  color: var(--ghost);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .hero { --hero-band-lift: clamp(90px, 22vw, 140px); }
  .hero__media { aspect-ratio: auto; max-height: none; height: min(74svh, 620px); object-position: 52% 100%; }
  .hero__band {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "sub" "actions";
    align-items: start;
    row-gap: 16px;
    padding-bottom: 44px;
  }
  .hero__title { max-width: 13ch; }
  .hero__sub { margin: 0; font-size: 15px; line-height: 1.55; }
  .hero__actions { margin-top: 6px; flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__actions .wl-btn { padding: 15px 24px; }
  /* while the consent panel is open it takes the lower part of a phone
     screen, so the photograph shortens */
  html[data-consent="open"] .hero__media { height: min(56svh, 500px); }
}

/* ── 5. Sections and components ────────────────────────────────────────── */

.wl-main { position: relative; }
/* overflow-x: clip rather than hidden: it stops the oversized ghost word
   from widening the page without creating a scroll container, so the
   overlapping tiles below can still hang out of their section. */
.wl-section { position: relative; overflow-x: clip; padding: clamp(56px, 8vw, 110px) 0; }
.wl-section--tight { padding: clamp(36px, 5vw, 64px) 0; }
.wl-section--first { padding-top: clamp(30px, 4vw, 52px); }

/* tone recall: the bleed reappears lifted, and the sky returns once */
.wl-section--lift { background: var(--bleed-lift); }
.wl-section--sky  { background: var(--hero-sky); color: var(--on-sky); }
.wl-section--sky h2, .wl-section--sky h3 { color: #fff; }
.wl-section--sky .wl-eyebrow { color: #F0B64B; }

.wl-section__head { max-width: 640px; margin-bottom: clamp(28px, 4vw, 46px); position: relative; z-index: 1; }
.wl-section__head h2 { font-size: clamp(30px, 3.6vw, 46px); }
.wl-section__head p { margin-top: 16px; color: var(--ink-2); font-size: 17px; }
.wl-section--sky .wl-section__head p { color: var(--on-sky); }

.wl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.wl-btn:hover { transform: translateY(-1px); }
.wl-btn--primary { background: var(--accent); color: #fff; }
.wl-btn--primary:hover { background: #74300F; }
.wl-btn--ghost { background: var(--card); color: var(--ink); }
.wl-btn--ghost:hover { background: #fff; }
.wl-btn--ink { background: var(--hero-sky); color: #fff; }
.wl-btn--ink:hover { background: var(--sky-deep); }
.wl-btn--line { background: transparent; color: var(--ink); border-color: var(--line); }
.wl-btn--line:hover { background: var(--bleed-lift); }
.wl-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* facts strip, straddled by nothing but sharing the bleed */
.wl-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
@media (max-width: 700px) { .wl-facts { grid-template-columns: 1fr; } }
.wl-fact { background: var(--card); padding: 22px 24px; }
.wl-fact dt {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.wl-fact dd {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.wl-marquee {
  overflow: hidden;
  border-block: 1px solid var(--line-soft);
  padding: 13px 0;
  background: var(--bleed-lift);
}
.wl-marquee__track {
  display: flex;
  gap: 26px;
  width: max-content;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  animation: wl-slide 34s linear infinite;
}
@keyframes wl-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.wl-grid { display: grid; gap: 18px; position: relative; z-index: 1; }
.wl-grid--3 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.wl-grid--4 { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.wl-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.wl-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wl-card__num {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
}
.wl-card h3 { font-size: 21px; }
.wl-card p { color: var(--ink-2); font-size: 15px; }

.wl-tag {
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 6px 13px;
  border-radius: 999px;
}
.wl-tag--food  { color: #04434F; background: #DCECEF; }
.wl-tag--drink { color: #7A1235; background: #FADDE8; }

/* the upcoming tiles overlap the section above, keeping the depth language
   going once the hero is out of view */
.wl-weeks { margin-top: -34px; }
.wl-week {
  border-radius: var(--radius);
  padding: 20px 22px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.wl-week--next { background: var(--hero-sky); color: #fff; }
.wl-week--alt  { background: #DCECEF; }
.wl-week__mon {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .72;
  margin: 0;
}
.wl-week__day {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
.wl-week__note { margin: 10px 0 0; font-size: 15px; opacity: .9; }

.wl-lineup-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
  margin-bottom: 20px;
}
.wl-lineup-head h3 { font-size: 26px; }
.wl-lineup-head p { margin: 0; font-family: var(--font-ui); font-size: 14px; color: var(--ink-3); }

.wl-note { padding: 44px 0; text-align: center; color: var(--ink-2); grid-column: 1 / -1; }

.wl-split {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  position: relative;
  z-index: 1;
}
/* an even two column split, which still collapses at the breakpoint */
.wl-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 860px) {
  .wl-split, .wl-split--even { grid-template-columns: 1fr; }
}

.wl-deflist { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.wl-deflist > div { background: var(--card); padding: 20px 22px; display: grid; grid-template-columns: 116px 1fr; gap: 18px; align-items: baseline; }
@media (max-width: 560px) { .wl-deflist > div { grid-template-columns: 1fr; gap: 6px; } }
.wl-deflist dt {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.wl-deflist dd { margin: 0; font-size: 16px; color: var(--ink-2); }

/* two column body copy at the top of the page, one column under 860 */
.wl-cols { columns: 2; column-gap: 44px; max-width: 900px; }
.wl-cols p { break-inside: avoid; }
@media (max-width: 860px) { .wl-cols { columns: 1; } }

/* FAQ. Native details and summary: the questions and answers are in the
   HTML source, they open and close with no JavaScript at all, and the
   keyboard and screen reader behaviour is the browser's own. */
.wl-faq { border-top: 1px solid var(--line-soft); position: relative; z-index: 1; }
.wl-faq__item { border-bottom: 1px solid var(--line-soft); }
.wl-faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  list-style: none;
  cursor: pointer;
  padding: 20px 4px;
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
}
.wl-faq__item > summary::-webkit-details-marker { display: none; }
.wl-faq__item > summary:hover { color: var(--accent-ink); }
.wl-faq__item > p { margin: 0; padding: 0 44px 22px 4px; color: var(--ink-2); font-size: 16px; max-width: 72ch; }

/* The open and closed indicator is drawn, not typed, so no dash or plus
   character ever enters the page text. */
.wl-faq-sign {
  flex: none;
  position: relative;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.wl-faq-sign::before,
.wl-faq-sign::after {
  content: "";
  position: absolute;
  left: 6px; right: 6px;
  top: 50%;
  height: 1.6px;
  background: currentColor;
  transform: translateY(-50%);
}
.wl-faq-sign::after { transform: translateY(-50%) rotate(90deg); transition: transform .22s ease, opacity .22s ease; }
.wl-faq__item[open] > summary .wl-faq-sign { border-color: var(--accent-ink); color: var(--accent-ink); }
.wl-faq__item[open] > summary .wl-faq-sign::after { transform: translateY(-50%) rotate(0); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .wl-faq-sign::after { transition: none; } }

.wl-prose { max-width: 72ch; }
.wl-prose h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 44px 0 14px; }
.wl-prose h3 { font-family: var(--font-ui); font-size: 17px; font-weight: 600; margin: 28px 0 10px; }
.wl-prose ul { padding-left: 20px; margin: 0 0 1em; }
.wl-prose li { margin-bottom: .5em; }
.wl-prose a { color: var(--accent-ink); }
.wl-prose__lead { font-size: 18px; color: var(--ink-2); }
.wl-prose__box {
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--shadow);
  margin: 26px 0;
}

/* ── 6. Forms, calendar, vendor page ───────────────────────────────────── */

.wl-panel {
  background: var(--card);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 32px);
  box-shadow: var(--shadow);
}

.wl-field { display: grid; gap: 7px; margin-bottom: 18px; }
.wl-field > label {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.wl-field .wl-req { color: var(--accent-ink); }
.wl-field .wl-hint { font-size: 13px; color: var(--ink-3); }

.wl-input, .wl-select, .wl-textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
}
.wl-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236A5843' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.wl-textarea { min-height: 96px; resize: vertical; }
.wl-input:focus, .wl-select:focus, .wl-textarea:focus { border-color: var(--hero-sky); }
.wl-input[aria-invalid="true"], .wl-select[aria-invalid="true"], .wl-textarea[aria-invalid="true"] {
  border-color: #A8004A;
  background: #FFF6F9;
}
.wl-err {
  font-size: 13px;
  font-weight: 600;
  color: #8E0040;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.wl-err::before { content: "!"; flex: none; width: 16px; height: 16px; border-radius: 50%; background: #8E0040; color: #fff; font-size: 11px; display: grid; place-items: center; }
.wl-err[hidden] { display: none; }

.wl-check { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--ink-2); }
.wl-check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--hero-sky); flex: none; }

.wl-row2 { display: grid; gap: 0 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .wl-row2 { grid-template-columns: 1fr; } }

.wl-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.wl-cal-nav {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.wl-cal-nav:hover:not([disabled]) { background: var(--bleed-lift); }
.wl-cal-nav[disabled] { opacity: .3; cursor: not-allowed; }
.wl-cal-title { text-align: center; font-family: var(--font-ui); font-weight: 600; color: var(--ink); }
.wl-cal-sub { font-family: var(--font-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.wl-cal-dows, .wl-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.wl-cal-dow { text-align: center; font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--ink-3); padding: 4px 0; }
.wl-cal-dow--th { color: var(--hero-sky); }
.wl-cal-blank { height: 44px; }
.wl-cal-off { height: 44px; display: grid; place-items: center; font-size: 14px; color: var(--ink-3); }
.wl-cal-day {
  height: 44px;
  width: 100%;
  position: relative;
  border-radius: 10px;
  border: 1px solid;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
}
.wl-cal-day--open     { border-color: #9CC6CD; background: #E4F0F2; color: #04434F; }
.wl-cal-day--open:hover { border-color: var(--hero-sky); background: #D3E7EA; }
.wl-cal-day--picked   { border-color: var(--hero-sky); background: var(--hero-sky); color: #fff; }
.wl-cal-day--pending  { border-color: #D9A400; background: #FBF0D2; color: #6A4E00; cursor: default; }
.wl-cal-day--approved { border-color: var(--accent); background: var(--accent); color: #fff; cursor: default; }
.wl-cal-day--declined { border-color: #E3B9CA; background: #FCF1F5; color: #8E0040; cursor: default; }
.wl-cal-day--gone     { border-color: var(--line-soft); color: var(--ink-3); cursor: not-allowed; }
.wl-cal-dot { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; }

.wl-key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; font-family: var(--font-ui); font-size: 12px; color: var(--ink-2); }
.wl-key span { display: inline-flex; align-items: center; gap: 7px; }
.wl-key i { width: 13px; height: 13px; border-radius: 4px; border: 1px solid; display: inline-block; }

.wl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wl-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bleed-lift);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 6px 8px 6px 14px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
}
.wl-chip button {
  width: 22px; height: 22px;
  border: 0; border-radius: 50%;
  background: var(--line-soft);
  color: var(--ink-2);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.wl-chip button:hover { background: var(--accent-ink); color: #fff; }

.wl-status { border-radius: 12px; padding: 14px 16px; font-size: 15px; margin-bottom: 18px; }
.wl-status--ok   { background: #E4F0F2; color: #04434F; border: 1px solid #9CC6CD; }
.wl-status--bad  { background: #FCF1F5; color: #8E0040; border: 1px solid #E3B9CA; }
.wl-status[hidden] { display: none; }

.wl-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 14px; }
.wl-steps li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; font-size: 16px; }
.wl-steps li::before {
  content: counter(s);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--hero-sky);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
}
.wl-section--sky .wl-steps li::before { background: #F0B64B; color: #043038; }

/* ── 7. Consent gate ───────────────────────────────────────────────────── */

/* Anchored to a corner, never across the centre, so it cannot sit on top
   of the scroll cue at the seam. */
.wl-consent {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 150;
  width: min(430px, calc(100vw - 24px));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-l);
  padding: 20px 22px;
}
.wl-consent[hidden] { display: none; }
.wl-consent h2 { font-family: var(--font-ui); font-size: 16px; font-weight: 600; letter-spacing: 0; }
.wl-consent p { font-size: 14px; color: var(--ink-2); margin: 8px 0 0; }
.wl-consent__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.wl-consent__actions .wl-btn { font-size: 13px; padding: 11px 18px; flex: 1 1 auto; }
.wl-consent__actions a.wl-btn { flex: 1 1 100%; }

/* ── 8. Motion ─────────────────────────────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-reveal][data-in="true"] { opacity: 1; transform: none; }

.hero__cue svg { animation: wl-cue 2.4s ease-in-out infinite; }
@keyframes wl-cue {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero__cue svg { animation: none; }
  .wl-marquee__track { animation: none; }
  .wl-btn:hover { transform: none; }
  * { scroll-behavior: auto !important; }
}

@media print {
  .wl-header, .hero__cue, .hero__rail, .wl-rail-body, .wl-ghost, .wl-consent, .wl-marquee { display: none !important; }
  body { background: #fff; color: #000; }
}