/* ============================================================================
   EVENING EMERALD (redesign, 2026-10-27, redesign/DESIGN-BRIEF.md)

   Loaded after style.css. The site's components keep their rules there; this
   file re-points the colour tokens at the dark palette and overrides the few
   places that hard-coded a light colour. New sections (film hero, craft,
   occasions, visit-us details) are defined at the end.
   ========================================================================== */
:root {
  --ground: #0b1a13;
  --ground-2: #10241b;
  --ground-3: #16302a;
  --line: rgba(216,181,106,.22);
  --text: #efe9d8;
  --text-soft: #b9c4bb;
  --gold: #d8b56a;
  --gold-deep: #b8954a;

  /* legacy tokens, re-pointed */
  --paper: var(--ground);
  --paper-2: var(--ground-2);
  --cream: var(--ground-2);
  --ink: var(--text);
  --ink-soft: var(--text-soft);
  --green: var(--gold);
  --green-deep: #071510;
  --chili: var(--gold);
  --chili-soft: #e6c98a;
  --radius: 16px;
  --shadow: 0 24px 50px -24px rgba(0,0,0,.7);
}

html { background: var(--ground); }
body { background: var(--ground); color: var(--text); }
::selection { background: var(--gold); color: var(--ground); }
.grain { opacity: .035; }
.cursor-dot, .cursor-ring { display: none !important; }

/* ---------- buttons: one accent, gold ---------- */
.btn { letter-spacing: .12em; }
.btn--solid { background: var(--gold); background-image: none; color: var(--ground); box-shadow: 0 10px 28px -14px rgba(216,181,106,.55); }
.btn--solid:hover { background: var(--gold-deep); color: var(--ground); }
.btn--ghost { border-color: rgba(216,181,106,.55); color: var(--text); }
.btn--ghost:hover { background: var(--gold); border-color: var(--gold); color: var(--ground); }
.btn--invert { background: var(--gold); background-image: none; color: var(--ground); }
.btn--invert:hover { background: var(--gold-deep); }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- nav ---------- */
.nav.is-scrolled { background: rgba(11,26,19,.86); box-shadow: 0 1px 0 var(--line), 0 10px 30px -20px rgba(0,0,0,.8); }
.nav__logo-text { color: var(--text); }
.nav__logo-text em { color: var(--gold); }
.nav__link { color: var(--text); }
.nav__burger span { background: var(--text); }
.nav__status { color: var(--text-soft); }
.nav__status.is-closed .nav__status-dot { background: #c0665a; }
.mmenu { background: var(--ground); color: var(--text); }
.mmenu__link { color: var(--text); }
html:has(.mmenu.is-open) .nav__logo-text, html:has(.mmenu.is-open) .nav__burger span { color: var(--text); background-color: var(--text); }
html:has(.mmenu.is-open) .nav__logo-text { background: none; }
.loader { background: var(--ground); color: var(--text); }

/* ---------- type ---------- */
.eyebrow { color: var(--gold); letter-spacing: .22em; }
.h2 { letter-spacing: .01em; }
.h2 em, .menu .h2 em, .bigcta .h2 em { background: linear-gradient(110deg, #c9a050, #ead9a8 50%, #b8954a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__word--outline { -webkit-text-stroke: 1.5px var(--gold); }
.hero__word--accent { background: linear-gradient(110deg, #b8954a, #ead9a8 45%, #d8b56a 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__kicker { color: var(--gold); }
.hero__kicker-dot { background: var(--gold); animation: none; }
.hero__sub { color: var(--text-soft); }
.chero__title { color: var(--text); }
.story__pills li { background: var(--ground-2); border-color: var(--line); color: var(--text); box-shadow: none; }

/* ---------- menu ---------- */
.menu { background: var(--ground-2); color: var(--text); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.menu__tab { color: var(--text); border-color: rgba(216,181,106,.35); }
.menu__tab.is-active { background: var(--gold); color: var(--ground); }
.dish { background: rgba(255,255,255,.03); border-color: rgba(216,181,106,.14); }
.dish:not(.dish--unavail):hover { background: rgba(216,181,106,.08); }
.dish__dots { border-bottom-color: rgba(216,181,106,.3); }
.menu__panel-img { background: var(--ground); }
.menu__panel-img figcaption { background: rgba(0,0,0,.25); }
.menu__note { opacity: .85; }
.menu__skeleton span { background: linear-gradient(100deg, rgba(255,255,255,.04) 40%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.04) 60%); background-size: 200% 100%; }

/* ---------- reviews ---------- */
.review { box-shadow: none; border-color: var(--line); }
.review__link, .reviews__google { color: var(--text); background: rgba(216,181,106,.12); border-color: rgba(216,181,106,.45); }
.reviews__google strong { color: var(--gold); }
.review__avatar { background: var(--ground-3); }

/* ---------- visit ---------- */
.visit { background: var(--ground-2); border-top: 1px solid var(--line); }
.visit__list li { border-bottom-color: var(--line); }
.visit__list a { text-decoration-color: var(--gold); }
.visit__map { rotate: 0deg; border: 1px solid var(--line); box-shadow: none; }

/* ---------- faq ---------- */
.faq__item { box-shadow: none; border-color: var(--line); }
.faq__item[open] { border-color: rgba(216,181,106,.6); box-shadow: none; }
.faq__q { color: var(--text); }
.faq__q:hover { color: var(--gold); }
.faq__a p { color: var(--text-soft); }
.faq__reviews::before { background: linear-gradient(90deg, var(--ground-2), transparent); }
.faq__reviews::after { background: linear-gradient(270deg, var(--ground-2), transparent); }

/* ---------- footer ---------- */
.footer { background: var(--green-deep); color: var(--text); border-top: 1px solid var(--line); }
.footer__legal { border-top-color: var(--line); }

/* ---------- catering page, forms, wizard ---------- */
.chero { padding-top: calc(var(--nav-h) + clamp(2.5rem, 7vw, 5rem)); }
.chero__strip figure { box-shadow: none; border: 1px solid var(--line); }
.how { background: var(--ground-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.how__step, .journey__step { box-shadow: none; border: 1px solid var(--line); }
.how__step h3, .journey__body h3 { color: var(--text); }
.journey__num { background: var(--ground-3); color: var(--text-soft); }
.journey__step.is-current { background: var(--ground-3); border-color: var(--gold); }
.journey__step.is-current .journey__num, .journey__step.is-current .journey__tag { background: var(--gold); color: var(--ground); }
.journey__step.is-next .journey__tag, .journey__when, .journey__step.is-done .journey__tag { color: var(--gold); }
.form { box-shadow: none; border-color: var(--line); }
.form__field input, .form__field select, .form__field textarea { background: var(--ground); border-color: rgba(216,181,106,.3); color: var(--text); color-scheme: dark; }
.form__field input:focus, .form__field select:focus, .form__field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(216,181,106,.18); }
.form__field input.is-invalid, .form__field textarea.is-invalid { border-color: #e3917f; }
.form__status { color: var(--gold); }
.form__spam { color: var(--text); background: rgba(216,181,106,.14); border-color: rgba(216,181,106,.5); }
.form__spam strong { color: #f19484; }
.form__success { color: var(--text); background: rgba(122,214,162,.12); border-color: rgba(122,214,162,.4); }
.form__hint { color: var(--text-soft); }
.form__check { color: var(--text-soft); }
.form__check input { accent-color: var(--gold); }
.wiz__head { border-bottom-color: var(--line); }
.wiz__bar li::before, .wiz__bar span { background: var(--ground-3); }
.wiz__bar li.is-done span, .wiz__bar li.is-done::before, .wiz__bar li.is-current::before { background: var(--gold); }
.wiz__bar li.is-done span { color: var(--ground); }
.wiz__bar li.is-current { color: var(--gold); }
.wiz__bar li.is-current span { background: var(--gold); color: var(--ground); box-shadow: 0 0 0 4px rgba(216,181,106,.2); }
.wiz__then, .recap__label { color: var(--gold); }
.wiz__title { color: var(--text); }
.notice--info { background: rgba(216,181,106,.12); border-color: rgba(216,181,106,.5); color: var(--text); }
.notice--ok { background: rgba(122,214,162,.12); border-color: rgba(122,214,162,.4); color: #cfe9d9; }
.notice--warn { background: rgba(240,195,106,.12); border-color: rgba(240,195,106,.55); color: #f3dba3; }
.notice--stop { background: rgba(241,148,132,.12); border-color: rgba(241,148,132,.55); color: #f6c3b8; }
.notice strong { color: var(--text); }
.notice .btn--solid { color: var(--ground); }
.recap__when { background: var(--ground-3); border-color: var(--line); }
.recap__when strong, .done__title { color: var(--text); }
.recap__link { color: var(--gold); }
.picker__cat { background: var(--ground); border-color: var(--line); }
.picker__cat summary { color: var(--text); }
.picker__cat summary:hover { background: var(--ground-3); }
.picker__row { border-top-color: var(--line); }
.picker__price { color: var(--gold); }
.qty__btn:hover { color: var(--ground); }
.qty__input { background: var(--ground); border-color: rgba(216,181,106,.3); color: var(--text); }
.summary { background: var(--green-deep); color: var(--text); border: 1px solid var(--line); }
.chip { background: var(--ground); border-color: var(--line); color: var(--text); }
.chip:hover { border-color: var(--gold); }
.chip.is-on, .chip.is-on:hover { background: var(--gold); color: var(--ground); border-color: var(--gold); }
.rating__star { color: rgba(239,233,216,.2); }
.book__copy p { color: var(--text-soft); }

/* ============================================================================
   NEW: film hero (scroll-scrubbed), craft, occasions, visit-us details
   ========================================================================== */

/* The hero stage. Default (no JS, reduced motion, data saver, or video failure)
   is the static layout: poster, then the chapters stacked as ordinary content.
   `.film--js` switches on the sticky stage and the scroll scrub. */
.film { position: relative; background: var(--ground); }
.film__stage { position: relative; min-height: 100svh; display: grid; align-items: end; isolation: isolate; }
.film__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #050d09; }
.film__media video, .film__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.film__media video { opacity: 0; transition: opacity .6s ease; }
.film.is-ready .film__media video { opacity: 1; }
.film__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,26,19,.55) 0%, rgba(11,26,19,.05) 35%, rgba(11,26,19,.15) 65%, rgba(11,26,19,.92) 100%); }
.film__chapters { position: relative; z-index: 2; max-width: 1280px; width: 100%; margin: 0 auto;
  padding: calc(var(--nav-h) + 2rem) clamp(1.1rem, 4vw, 2.5rem) clamp(3rem, 8vh, 6rem); display: grid; gap: 3rem; }
.film__chapter { display: grid; gap: 1.1rem; max-width: 44rem; }
.film__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: 1.02; letter-spacing: .005em; text-transform: uppercase; text-wrap: balance; color: var(--text); }
.film__title em { font-style: italic; text-transform: none; color: var(--gold); }
.film__sub { font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: var(--text-soft); max-width: 46ch; }
.film__cta { display: flex; flex-wrap: wrap; gap: .9rem; }
.film__cta .btn--lg { padding: .95rem 1.9rem; font-size: .95rem; }
.film__progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 2px; background: rgba(216,181,106,.15); }
.film__progress span { display: block; height: 100%; width: 0; background: var(--gold); transition: width .12s linear; }
.film__skip { position: absolute; z-index: 4; top: calc(var(--nav-h) + .6rem); right: clamp(1.1rem, 4vw, 2.5rem);
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px; padding: .45rem .9rem; background: rgba(11,26,19,.5); backdrop-filter: blur(6px); }
.film__skip:hover, .film__skip:focus-visible { color: var(--ground); background: var(--gold); border-color: var(--gold); }
.film__hint { position: absolute; left: 50%; bottom: 1.1rem; translate: -50% 0; z-index: 3; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); opacity: .7; }

/* scrub mode */
.film--js { height: var(--film-len, 300svh); }
.film--js .film__stage { position: sticky; top: 0; height: 100svh; min-height: 0; overflow: hidden; }
.film--js .film__chapters { position: absolute; inset: 0; margin: 0; display: block; padding-bottom: 0; }
.film--js .film__chapter { position: absolute; left: clamp(1.1rem, 4vw, 2.5rem); right: clamp(1.1rem, 4vw, 2.5rem);
  bottom: clamp(3.5rem, 10vh, 7rem); opacity: 0; visibility: hidden; transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease, visibility 0s .55s; }
.film--js .film__chapter.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .55s ease .05s, transform .55s ease .05s, visibility 0s; }
@media (min-width: 1281px) { .film--js .film__chapter { left: calc((100vw - 1280px) / 2 + 2.5rem); } }
.film--js .film__hint { display: block; }
.film:not(.film--js) .film__hint, .film:not(.film--js) .film__progress { display: none; }
.film--static .film__media { position: relative; height: 62svh; min-height: 320px; }
.film__play { position: absolute; z-index: 4; left: 50%; top: calc(31svh + var(--nav-h) / 2); translate: -50% -50%; background: rgba(11,26,19,.55); backdrop-filter: blur(6px); }
.film:not(.film--static) .film__play { display: none; }
.film--static.is-ready .film__media img { opacity: 0; }
.film--static .film__stage { display: block; }
.film--static .film__chapters { padding-top: 2.5rem; }
@media (max-width: 768px) {
  .film--js { height: var(--film-len-mobile, 200svh); }
  .film__media video, .film__media img { object-position: 50% 62%; }
  .film__title { font-size: clamp(2.4rem, 12vw, 3.6rem); }
  .film__cta .btn--lg { flex: 1 1 auto; }
  .film__skip { top: auto; bottom: 1rem; right: 1rem; }
  .film__hint { display: none !important; }
  /* the 16:9 source keeps the loaf in the lower middle of a portrait crop, so
     the copy sits in the dark upper half instead of over the food */
  .film--js .film__chapter { top: calc(var(--nav-h) + 1.2rem); bottom: auto; }
  .film__media::after { background: linear-gradient(180deg, rgba(11,26,19,.88) 0%, rgba(11,26,19,.45) 38%, rgba(11,26,19,.05) 60%, rgba(11,26,19,.75) 100%); }
}
@media (max-height: 560px) and (min-width: 769px) { .film--js .film__chapter { bottom: 2rem; } .film__title { font-size: 2.6rem; } }

/* ---------- craft (our story) ---------- */
.craft { background: var(--ground); }
.craft__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.craft__copy p { color: var(--text-soft); margin-bottom: 1.1rem; max-width: 56ch; font-size: 1.05rem; }
.craft__copy p strong { color: var(--text); font-weight: 600; }
.craft__list { list-style: none; margin-top: 1.6rem; display: grid; gap: .7rem; }
.craft__list li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .8rem; align-items: baseline; padding: .7rem 0; border-top: 1px solid var(--line); color: var(--text); }
.craft__list li:last-child { border-bottom: 1px solid var(--line); }
.craft__list b { color: var(--gold); font-family: var(--font-display); font-size: 1.1rem; }
.craft__figure { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--ground-2); }
.craft__figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.craft__figure figcaption { position: absolute; left: 1rem; bottom: 1rem; font-family: var(--font-display); font-style: italic; color: var(--text); font-size: 1rem; background: rgba(11,26,19,.72); padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--line); }

/* ---------- occasions (catering showcase) ---------- */
.occasions { background: var(--ground-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.occasions__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 2rem; align-items: end; margin-bottom: 2.4rem; }
.occasions__head p { color: var(--text-soft); max-width: 48ch; font-size: 1.05rem; }
.occasions__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.occasion { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line); background: var(--ground-3); isolation: isolate; }
.occasion img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.occasion:hover img { transform: scale(1.05); }
.occasion figcaption { position: absolute; inset: auto 0 0 0; padding: 1.1rem 1.2rem 1.2rem; z-index: 1; color: var(--text);
  background: linear-gradient(180deg, rgba(11,26,19,0), rgba(11,26,19,.88) 55%); }
.occasion h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin-bottom: .2rem; }
.occasion p { font-size: .9rem; color: var(--text-soft); }
.occasions__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.occasions__foot p { color: var(--text-soft); max-width: 56ch; }
.occasions__foot p strong { color: var(--text); }

/* ---------- visit-us additions ---------- */
.visit__how { list-style: none; margin-top: 1.6rem; display: grid; gap: .9rem; }
.visit__how li { display: grid; grid-template-columns: 2.2rem 1fr; gap: .9rem; align-items: start; color: var(--text-soft); }
.visit__how li strong { display: block; color: var(--text); font-weight: 600; }
.visit__how .ico { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--gold); font-weight: 700; font-size: .8rem; letter-spacing: .04em; }
.visit__cta { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- menu page (menu.html) and legal pages share the shell ---------- */
.page-plain { max-width: 48rem; margin: 0 auto; padding: calc(var(--nav-h) + 3rem) clamp(1.1rem, 4vw, 2.5rem) 5rem; }
.page-plain h1 { font-family: var(--font-display); font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1.1; margin-bottom: 1rem; }
.page-plain h2 { font-family: var(--font-display); font-size: 1.5rem; margin: 2.4rem 0 .6rem; }
.page-plain p, .page-plain li { color: var(--text-soft); }
.page-plain a:not(.btn) { color: var(--gold); }

/* ---------- responsive ---------- */
@media (max-width: 1024px) { .occasions__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px) {
  .craft__grid, .occasions__head { grid-template-columns: 1fr; }
  .craft__figure { order: -1; }
}
@media (max-width: 560px) {
  .occasions__grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .occasion h3 { font-size: 1.05rem; }
  .occasion p { display: none; }
  .visit__how li { grid-template-columns: 2rem 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .film__media video { transition: none; }
  .occasion:hover img { transform: none; }
}

/* ---------- content pages: dish lists, live note, call-to-action row (vegan.html, wynnum.html) ---------- */
.page-plain .eyebrow { margin-bottom: .6rem; }
.page-plain .lede { font-size: 1.1rem; color: var(--text-soft); margin-bottom: 1rem; max-width: 60ch; }
.page-plain p { margin-bottom: 1rem; max-width: 62ch; }
.plainlist { list-style: none; margin: .6rem 0 0; padding: 0; }
.plainlist li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); color: var(--text); }
.plainlist .p { font-family: var(--font-display); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--gold); }
.plainlist li.is-unavail { opacity: .5; }
.plainlist .flag, .flag { display: inline-block; margin-left: .4rem; font: 600 .68rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; padding: .2rem .5rem; border: 1px solid rgba(216,181,106,.55); border-radius: 999px; color: var(--gold); vertical-align: .1em; }
.live-note { font-size: .85rem; color: var(--text-soft); margin: 0 0 1rem; }
.live-note[data-state="live"]::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .5em; border-radius: 50%; background: #7ad6a2; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.facts { list-style: none; margin: .6rem 0 1rem; padding: 0; display: grid; gap: .7rem; }
.facts li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); color: var(--text-soft); }
.facts li b { color: var(--gold); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.facts li span strong { display: block; color: var(--text); font-weight: 600; }
@media (max-width: 560px) { .facts li { grid-template-columns: 1fr; gap: .2rem; } }