/* ==========================================================================
   Mulligans Sports Bar & Grill — concept build
   One hand-written stylesheet. No bundler, no framework, no utility classes.

   THIRD PALETTE. DAYLIGHT.

   The first was warm cream and a red accent — which turned out to be the house
   style of four other builds in this series (Peshtigo Corral #a8372b, Luigi's
   #b4231d, Mountain Hardware #a8261b, all on cream). The second inverted to
   night slate and amber, which fixed the sameness and introduced a worse
   problem: it read as a developer tool. Mulligans is a patio that holds a
   hundred people in July, not a dashboard.

   So this one is built out of what is actually in their own photographs: a
   lime umbrella, pines, a concrete patio in spring sun, and food shot in
   daylight. White and near-white grounds, deep pine for ink, grass green as
   the one accent, and a sun yellow that carries the caution states.

   Two dark anchors survive on purpose — the concept bar at the very top and
   the footer — because the page needs a top and a bottom, and because the
   concept bar has to be impossible to miss.

   The vocabulary is still the depot: signage, enamel, freight manifests,
   timetable typography. Big Shoulders Display is an American industrial
   signage face; Bitter is the slab it is set against.

   Deliberately absent, per reference/design-rules.md:
     - chalkboard textures, fake handwriting, "farm to table" script
       (the restaurant cliche)
     - plaid, antlers, woodgrain, rustic script (the lodge cliche next door)
     - fairway-green everything (the golf cliche — green here is a patio
       umbrella and a pine, and it never becomes the whole page)
     - gradient as a design device, rounded-2xl-and-soft-shadow on everything,
       a row of identical feature cards, Inter or Poppins
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens

   Every pair was measured. Two values exist only because the obvious ones
   failed: `grass` cannot carry text at 4.10 on white, so anything with words
   on it uses `grass-deep`; `pine-3` was darkened until it cleared AA on the
   deepest panel as well as on white.
   -------------------------------------------------------------------------- */

:root {
  /* Grounds — daylight. */
  --day:        #ffffff;
  --day-2:      #f2f6f0;   /* the faintest green cast, not a grey */
  --day-3:      #e3ece0;
  --day-4:      #d3e0cf;   /* rules and dashed borders */

  /* Ink — a deep pine, not a neutral black. */
  --pine:       #16301e;
  --pine-2:     #3a5342;
  --pine-3:     #536a5a;   /* 5.87 white · 5.37 day-2 · 4.85 day-3 */

  /* The one accent, off their own umbrella and the trees behind it. */
  --grass:      #2f8f3e;   /* DECORATION ONLY — 4.10 on white, cannot carry text */
  --grass-deep: #1d6b2a;   /* links, buttons, any green with words on it */

  /* Sun. Carries the caution states, because on a bright page a yellow panel
     reads as "check this" where a red one reads as "something is broken". */
  --sun:        #f5b81f;   /* ground; pine on it is 7.97 */
  --sun-deep:   #8a6206;   /* sun-coloured text on a light ground, 5.48 */

  /* Semantic, never decorative. */
  --open:       #1d6b2a;
  --heat:       #d1441f;   /* the wing scale only - decorative, carries no text */

  --font-display: 'Big Shoulders Display', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --font-body:    'Bitter', Georgia, 'Times New Roman', serif;

  --wrap:  76rem;
  --gut:   clamp(1.1rem, 4vw, 2.5rem);

  --step--1: clamp(0.82rem, 0.79rem + 0.12vw, 0.89rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1:  clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --step-4:  clamp(2.8rem, 2rem + 3.8vw, 5.4rem);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--day);
  color: var(--pine);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
}

img { max-width: 100%; height: auto; display: block; }

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

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

a { color: var(--grass-deep); text-underline-offset: 0.14em; }
/* Hover darkens to ink rather than to --heat. Heat measured 4.22 on the tinted
   panel, and the obvious fix — darkening it — lands on a brick red close to the
   three sibling builds this palette exists to get away from. It stays a
   scale-only decorative token. */
a:hover { color: var(--pine); }

ul, ol { margin: 0; padding: 0; }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

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

.skip-link {
  position: absolute; left: 0.6rem; top: -4rem; z-index: 100;
  background: var(--grass-deep); color: var(--day);
  padding: 0.7rem 1.1rem;
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0.6rem; }

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-0);
  text-transform: uppercase; letter-spacing: 0.09em;
  text-decoration: none;
  padding: 0.6em 1.15em;
  border: 3px solid currentColor;
  min-height: 44px; line-height: 1.6;
}

.btn--primary { background: var(--grass-deep); border-color: var(--grass-deep); color: var(--day); }
.btn--primary:hover { background: var(--pine); border-color: var(--pine); color: var(--day); }

.btn--ghost { background: transparent; color: var(--pine); }
.btn--ghost:hover { background: var(--pine); color: var(--day); }

/* --------------------------------------------------------------------------
   4. Concept banner and notice — guardrail furniture, always visible

   One of the two deliberately dark elements. It has to be impossible to miss
   or it is not doing its job.
   -------------------------------------------------------------------------- */

.pitchbar {
  background: var(--pine); color: #d5e2d8;
  font-size: var(--step--1); line-height: 1.45;
  padding: 0.6rem 0;
}
.pitchbar__inner { display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; }
.pitchbar a { color: var(--day); }
.pitchbar strong { color: var(--sun); }
.pitchbar__tag {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem;
  background: var(--sun); color: var(--pine);
  padding: 0.15em 0.55em; flex: none;
}

.strip { background: var(--sun); color: var(--pine); font-size: var(--step--1); padding: 0.55rem 0; }
.strip__inner { display: flex; gap: 0.7rem; align-items: baseline; }
.strip__key {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.78rem; flex: none;
}

/* --------------------------------------------------------------------------
   5. Masthead
   -------------------------------------------------------------------------- */

.masthead { background: var(--day); border-bottom: 3px solid var(--pine); position: relative; z-index: 20; }
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 0.85rem;
}

.wordmark { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--pine); }
.mark { color: var(--grass-deep); flex: none; }
.wordmark__text { display: flex; flex-direction: column; }
.wordmark__name {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.7rem, 1.3rem + 1.7vw, 2.5rem);
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 0.9;
}
.wordmark__sub {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--pine-3); margin-top: 0.25em;
}

.nav { display: flex; align-items: center; gap: 1.1rem; }
.nav__list { list-style: none; display: flex; gap: 1.2rem; }
.nav__link {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-0);
  text-transform: uppercase; letter-spacing: 0.09em;
  text-decoration: none; color: var(--pine);
  padding-block: 0.4rem; border-bottom: 3px solid transparent;
}
.nav__link:hover { border-bottom-color: var(--grass); color: var(--grass-deep); }
.nav__link[aria-current="page"] { border-bottom-color: var(--grass); }

.nav-toggle { display: none; }

/* --------------------------------------------------------------------------
   6. The board — the reason this rebuild exists

   The photograph runs BRIGHT here, not dimmed. On the night palette it had to
   be pushed back to stay out of the way of the type; in daylight it can be
   left alone and the plate simply sits on it — which is both a better picture
   and a truer one, because this is a patio in spring sun.
   -------------------------------------------------------------------------- */

.board {
  background: var(--day-3);
  padding: clamp(1.5rem, 5vw, 3.5rem) var(--gut);
  display: flex; justify-content: flex-start;
  position: relative; overflow: hidden; isolation: isolate;
}

.board__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
  filter: saturate(1.06);
  transform: scale(1.04); z-index: -2;
}
/* A wash, not a scrim — just enough to hold the plate's edge away from a busy
   photograph. The right-hand side stays nearly clear so the building shows. */
.board__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(255,255,255,0.93) 0%, rgba(255,255,255,0.74) 40%, rgba(255,255,255,0.10) 100%);
}

.board__plate {
  background: var(--day);
  color: var(--pine);
  width: min(100%, 47rem);
  margin-left: max(0px, calc((100vw - var(--wrap)) / 2));
  border: 3px solid var(--pine);
  box-shadow: 14px 14px 0 var(--grass);
}

.board__strap {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  background: var(--pine); color: var(--day);
  margin: 0; padding: 0.5rem 1.1rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.16em;
}

.board__row { padding: 1.25rem clamp(1.1rem, 3vw, 1.9rem); }
.board__row--today { border-bottom: 2px solid var(--day-4); }

.board__label {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--pine-3); margin: 0 0 0.25em;
}

.board__day {
  font-size: var(--step-4); font-weight: 800;
  text-transform: uppercase; line-height: 0.82;
  margin: 0 0 0.4rem; color: var(--pine);
}

.board__state {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-0);
  text-transform: uppercase; letter-spacing: 0.1em; margin: 0;
}
.board__lamp { width: 0.72rem; height: 0.72rem; border-radius: 50%; background: currentColor; flex: none; }
.board__state.is-open    { color: var(--open); }
.board__state.is-shut    { color: var(--pine-3); }
.board__state.is-unknown { color: var(--sun-deep); }

.board__what {
  font-size: var(--step-2); font-weight: 700;
  text-transform: uppercase; margin: 0 0 0.3rem; color: var(--pine);
}
.board__what--none { color: var(--pine-3); }
.board__detail { margin: 0 0 0.3rem; color: var(--pine-2); font-size: var(--step--1); line-height: 1.5; }
.board__price {
  font-family: var(--font-display); font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums; margin: 0; color: var(--grass-deep);
}

.board__flag {
  background: var(--sun); color: var(--pine);
  padding: 1.1rem clamp(1.1rem, 3vw, 1.9rem);
  display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-start;
  font-size: var(--step--1); line-height: 1.5;
}
.board__flag strong { display: block; font-family: var(--font-display); font-size: var(--step-0); letter-spacing: 0.02em; }
.board__flag .btn { background: var(--pine); border-color: var(--pine); color: var(--day); }
.board__flag .btn:hover { background: var(--grass-deep); border-color: var(--grass-deep); color: var(--day); }

.board__foot {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem;
  align-items: baseline; justify-content: space-between;
  border-top: 2px solid var(--pine);
  padding: 0.85rem clamp(1.1rem, 3vw, 1.9rem);
}
.board__tel {
  font-family: var(--font-display); font-weight: 800; font-size: var(--step-1);
  font-variant-numeric: tabular-nums lining-nums;
  text-decoration: none; color: var(--pine);
}
.board__tel:hover { color: var(--grass-deep); }
.board__carryout {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--pine-3);
}

.boardnote {
  background: var(--day-3); color: var(--pine-2);
  margin: 0; padding: 0 0 1.6rem; font-size: var(--step--1);
}
.boardnote .wrap { display: block; }

/* --------------------------------------------------------------------------
   7. Intro, billboard, kitchen strip
   -------------------------------------------------------------------------- */

.intro { padding-block: clamp(2.5rem, 7vw, 5rem); background: var(--day); }
.intro__inner { display: grid; gap: clamp(1.2rem, 4vw, 3rem); }
.intro__title { font-size: var(--step-3); text-transform: uppercase; max-width: 18ch; color: var(--pine); }
.intro__text { max-width: 62ch; font-size: var(--step-1); line-height: 1.55; color: var(--pine-2); }
.intro__text strong { color: var(--pine); }

@media (min-width: 56rem) { .intro__inner { grid-template-columns: 0.85fr 1.15fr; align-items: start; } }

/* The only photograph they own of the place actually in use, and the only one
   with people in it. It is 400x266 — the smallest file on their site — so it
   is capped at its own width and never stretched. It also does the structural
   job of filling a column that was otherwise a heading above a void. */
.intro__aside { display: flex; flex-direction: column; gap: clamp(1.2rem, 3vw, 2rem); }
.intro__media { margin: 0; max-width: 25rem; }
.intro__media img { width: 100%; border: 3px solid var(--pine); }
.intro__media figcaption {
  font-size: var(--step--1); line-height: 1.5;
  color: var(--pine-3); margin-top: 0.7rem;
}

.bill { padding-block: clamp(2.5rem, 7vw, 4.5rem); background: var(--day-2); }
.bill__inner { display: grid; gap: 0; border-top: 3px solid var(--pine); border-left: 3px solid var(--pine); }
.bill__item {
  background: var(--day);
  border-right: 3px solid var(--pine); border-bottom: 3px solid var(--pine);
  padding: clamp(1.2rem, 3vw, 2rem);
}
.bill__title { font-size: var(--step-1); text-transform: uppercase; margin-bottom: 0.5rem; color: var(--pine); }
.bill__title a { text-decoration: none; color: var(--pine); }
.bill__title a:hover { color: var(--grass-deep); }
.bill__text { margin: 0; color: var(--pine-2); font-size: var(--step--1); line-height: 1.55; }

@media (min-width: 46rem) { .bill__inner { grid-template-columns: repeat(3, 1fr); } }

/* Their food, at a size their files can actually carry. Each tile renders at
   roughly 300-390 CSS px, well inside the 560px source, so nothing is upscaled.
   On a bright ground the pictures need no treatment at all. */
.kitchen { background: var(--day); padding-block: clamp(2.5rem, 7vw, 4rem) clamp(2.5rem, 7vw, 5rem); }
.kitchen__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.kitchen__title { font-size: var(--step-2); text-transform: uppercase; color: var(--pine); }
.kitchen__all { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); text-transform: uppercase; letter-spacing: 0.1em; }
.kitchen__list { list-style: none; display: grid; gap: clamp(0.9rem, 2vw, 1.4rem); }
.kitchen__link { display: block; text-decoration: none; color: var(--pine); border: 3px solid var(--pine); }
.kitchen__link img { width: 100%; aspect-ratio: 7 / 5; object-fit: cover; }
.kitchen__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-1); text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.55rem 0.8rem 0.7rem; margin: 0;
  border-top: 3px solid var(--pine);
}
.kitchen__link:hover { border-color: var(--grass-deep); }
.kitchen__link:hover .kitchen__name { background: var(--grass-deep); color: var(--day); border-top-color: var(--grass-deep); }

@media (min-width: 40rem) { .kitchen__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .kitchen__list { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   8. The week — the spine
   -------------------------------------------------------------------------- */

.week { background: var(--day-3); padding-block: clamp(2.2rem, 6vw, 4rem); }
.week__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.week__title { color: var(--pine); font-size: var(--step-2); text-transform: uppercase; }
.week__all { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); text-transform: uppercase; letter-spacing: 0.1em; }

.week__list { list-style: none; display: grid; gap: 0; border-top: 3px solid var(--pine); border-left: 3px solid var(--pine); }
.week__day {
  background: var(--day);
  border-right: 3px solid var(--pine); border-bottom: 3px solid var(--pine);
  padding: 0.95rem 0.9rem 1.1rem;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.week__day.is-today { background: var(--sun); }

.week__name {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--step-0);
  color: var(--pine); margin: 0;
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
}
.week__today { background: var(--pine); color: var(--day); font-size: 0.7rem; letter-spacing: 0.14em; padding: 0.1em 0.45em; }

.week__hours { margin: 0; font-variant-numeric: tabular-nums lining-nums; font-size: var(--step--1); color: var(--pine-2); }
.week__hours.is-unknown a { color: var(--sun-deep); text-decoration-style: dotted; }
/* On the sun-yellow "today" cell the sun-coloured link would disappear. */
.week__day.is-today .week__hours.is-unknown a { color: var(--pine); }

.week__what { margin: 0.35rem 0 0; color: var(--pine); font-weight: 600; line-height: 1.35; }
.week__what--none { color: var(--pine-3); }
.week__detail { margin: 0.25rem 0 0; color: var(--pine-2); font-size: var(--step--1); line-height: 1.45; }
.week__price { margin: 0.2rem 0 0; color: var(--grass-deep); font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
.week__music { margin: 0.35rem 0 0; font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--grass-deep); }

@media (min-width: 62rem) { .week__list { grid-template-columns: repeat(7, 1fr); } }

/* --------------------------------------------------------------------------
   9. Page heads

   The photograph runs bright and full-bleed with a pine wash only across the
   bottom third, which is the band the type actually sits in. The page below is
   white, so the hero reads as a picture rather than as a dark theme.
   -------------------------------------------------------------------------- */

.pagehead { position: relative; background: var(--day-3); }
.pagehead--plain { padding-block: clamp(2rem, 6vw, 4rem); background: var(--day-2); border-bottom: 3px solid var(--pine); }
.pagehead--photo { min-height: clamp(15rem, 34vw, 23rem); display: flex; align-items: flex-end; overflow: hidden; border-bottom: 3px solid var(--pine); }
.pagehead__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(1.05);
}
.pagehead__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(22,48,30,0.93) 0%, rgba(22,48,30,0.58) 32%, rgba(22,48,30,0.04) 66%);
}
.pagehead--photo .pagehead__inner { position: relative; padding-block: clamp(1.5rem, 4vw, 2.4rem); }
.pagehead--photo .pagehead__title { color: var(--day); }
.pagehead--photo .pagehead__sub { color: #dbe7dd; }
.pagehead--photo .pagehead__eyebrow { color: #b9cdbe; }
.pagehead--photo .pagehead__eyebrow a { color: var(--sun); }
.pagehead--plain .pagehead__title { color: var(--pine); }
.pagehead--plain .pagehead__sub { color: var(--pine-2); }
.pagehead__eyebrow { font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.16em; margin: 0 0 0.5rem; color: var(--pine-3); }
.pagehead__title { font-size: var(--step-4); text-transform: uppercase; line-height: 0.86; }
.pagehead__sub { margin: 0.7rem 0 0; font-size: var(--step-1); max-width: 46ch; }

.lede { padding-block: clamp(1.8rem, 5vw, 3rem); background: var(--day); }
.lede .wrap { max-width: 60ch; font-size: var(--step-1); line-height: 1.55; color: var(--pine-2); }

.prose { padding-block: clamp(2rem, 6vw, 4rem); background: var(--day); }
.prose .wrap { max-width: 62ch; color: var(--pine-2); }

.panel { padding-block: clamp(2rem, 5vw, 3.5rem); background: var(--day-2); }
.panel__inner { max-width: 60ch; color: var(--pine-2); }

/* --------------------------------------------------------------------------
   10. The menu, set as a menu
   -------------------------------------------------------------------------- */

.jump { position: sticky; top: 0; z-index: 10; background: var(--pine); border-bottom: 3px solid var(--grass); }
.jump__inner { display: flex; gap: 1rem; overflow-x: auto; padding-block: 0.6rem; scrollbar-width: thin; }
.jump__link {
  font-family: var(--font-display); font-weight: 600; font-size: 0.86rem;
  text-transform: uppercase; letter-spacing: 0.11em;
  color: #d5e2d8; text-decoration: none; white-space: nowrap;
  padding: 0.35rem 0; border-bottom: 2px solid transparent;
}
.jump__link:hover { border-bottom-color: var(--sun); color: var(--day); }

.menu { padding-block: clamp(2rem, 6vw, 4rem); background: var(--day); color: var(--pine); }

.sect { padding-block: clamp(1.8rem, 4vw, 3rem); border-top: 3px solid var(--pine); scroll-margin-top: 4rem; }
.sect:first-child { border-top: 0; padding-top: 0; }

/* Their photograph runs beside the dish list, never behind the type, and never
   beside the heading alone — see snippets/menublock.php for why that
   arrangement could not be made to sit right. At the widest layout the image
   box is ~26rem, comfortably inside the 560px source. */
.sect__aside { margin-bottom: 1.4rem; }
.sect__media { margin: 0; }
.sect__media img { width: 100%; aspect-ratio: 7 / 5; object-fit: cover; border: 3px solid var(--pine); }

/* The two sections they own no photograph of — and one of them is the Friday
   fish fry, the highest-intent dish on the whole menu. A plate that says so is
   more useful than a stock picture of somebody else's perch, and it is the
   same ask that appears in docs/content-gaps.md. */
.sect__nophoto {
  aspect-ratio: 7 / 5;
  border: 3px dashed var(--day-4);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1rem, 3vw, 1.8rem);
  background: var(--day-2);
}
.sect__nophoto p { margin: 0; color: var(--pine-2); font-size: var(--step--1); line-height: 1.5; }
.sect__nophoto strong {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-0); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--sun-deep); margin-bottom: 0.4rem;
}

.sect__title { font-size: var(--step-3); text-transform: uppercase; margin-bottom: 0.5rem; }
.sect__title a { color: var(--pine); text-decoration: none; }
.sect__title a:hover { color: var(--grass-deep); }
.sect__note { max-width: 52ch; color: var(--pine-2); font-size: var(--step--1); margin: 0 0 1.4rem; }

@media (min-width: 48rem) {
  .sect {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
  }
  .sect__aside { margin-bottom: 0; position: sticky; top: 4.5rem; }
  /* NOT alternated, deliberately.

     Flipping the photograph side to side looked livelier and moved the price
     column left and right as you scrolled. On a menu that is the one column a
     reader tracks down the page, so it stays put and the pictures line up with
     it. Variety is worth less here than being able to scan a price. */
}

.dish { list-style: none; display: grid; gap: 1.35rem; }
.dish__head { display: flex; align-items: baseline; gap: 0.8rem; margin: 0 0 0.2rem; }
.dish__name {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-1);
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1;
}
.dish__head::after {
  content: ""; flex: 1 1 auto;
  border-bottom: 2px dotted var(--day-4);
  transform: translateY(-0.28em); min-width: 1.5rem; order: 1;
}
.dish__price {
  order: 2; flex: none;
  font-family: var(--font-display); font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
  color: var(--grass-deep);
}
.dish__detail { margin: 0; max-width: 62ch; color: var(--pine-2); font-size: var(--step--1); line-height: 1.5; }

.dish__query {
  margin: 0.5rem 0 0; max-width: 62ch;
  font-size: var(--step--1); line-height: 1.45;
  color: var(--sun-deep);
  border-left: 4px solid var(--sun); padding-left: 0.75rem;
}
.dish__query span { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.76rem; display: block; }

.menu__footnote { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 3px solid var(--pine); font-size: var(--step--1); color: var(--pine-3); max-width: 62ch; }
.menu__back { margin-top: 2rem; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }

/* The heat scale. Their ordering, set as an actual ascending scale — the lamps
   run from grass to a hot orange as the list climbs, which is the one place on
   this site where a second hue is doing real work rather than decorating. */
.scale { margin-top: 2rem; background: var(--day-2); border: 3px solid var(--pine); color: var(--pine); padding: clamp(1.1rem, 3vw, 1.8rem); }
.scale__title { font-size: var(--step-1); text-transform: uppercase; margin-bottom: 1rem; }
.scale__list { list-style: none; display: grid; gap: 0.55rem; }
.scale__item { display: flex; align-items: center; gap: 0.7rem; font-size: var(--step--1); }
.scale__dot {
  --size: 0.9rem; width: var(--size); height: var(--size);
  flex: none; border-radius: 50%;
  border: 2px solid var(--pine);
  background: color-mix(in srgb, var(--heat) calc(var(--step, 0) * 100%), var(--grass));
}
.scale__name { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.03em; }
.scale__note { margin: 1rem 0 0; font-size: var(--step--1); color: var(--pine-3); }

@media (min-width: 40rem) { .scale__list { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; } }
@media (min-width: 62rem) { .scale__list { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   11. Drinks
   -------------------------------------------------------------------------- */

.bloody { background: var(--sun); color: var(--pine); padding-block: clamp(2.2rem, 6vw, 4rem); }
.bloody a { color: var(--pine); }
.bloody__body { max-width: 58ch; }
.bloody__title { font-size: var(--step-3); text-transform: uppercase; margin-bottom: 0.8rem; }
.bloody__text { font-size: var(--step-1); line-height: 1.5; }
.bloody__claim {
  margin: 1.6rem 0 0; padding: 0.9rem 0 0;
  border-top: 3px solid var(--pine);
  font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--step-1);
}
.bloody__claim p { margin: 0; }

.cocktails { padding-block: clamp(2.2rem, 6vw, 4rem); background: var(--day); }
.cocktails__title { font-size: var(--step-2); text-transform: uppercase; margin-bottom: 1.6rem; color: var(--pine); }
.cocktails__list { list-style: none; display: grid; gap: 1.5rem; }
.cocktails__name { font-size: var(--step-1); text-transform: uppercase; margin-bottom: 0.3rem; color: var(--grass-deep); }
.cocktails__detail { margin: 0; color: var(--pine-2); font-size: var(--step--1); line-height: 1.5; }

@media (min-width: 46rem) { .cocktails__list { grid-template-columns: repeat(2, 1fr); column-gap: 3rem; } }
@media (min-width: 68rem) { .cocktails__list { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   12. The depot
   -------------------------------------------------------------------------- */

.depot { padding-block: clamp(2.2rem, 6vw, 4rem); background: var(--day); }
.depot__inner { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
.depot__text { max-width: 62ch; font-size: var(--step-1); line-height: 1.6; color: var(--pine-2); }
.depot__pull {
  margin: 0; border-left: 6px solid var(--grass);
  padding-left: clamp(1rem, 3vw, 1.6rem);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-2); line-height: 1.1; text-transform: uppercase; color: var(--pine);
}
.depot__pull p { margin: 0 0 0.6rem; }
.depot__pull footer { font-family: var(--font-body); font-size: var(--step--1); text-transform: none; letter-spacing: 0; color: var(--pine-3); font-weight: 400; }

@media (min-width: 58rem) { .depot__inner { grid-template-columns: 1.3fr 1fr; align-items: start; } }

.manifest { padding-bottom: clamp(2.2rem, 6vw, 4rem); background: var(--day); }
.manifest__list { border-top: 3px solid var(--pine); }
.manifest__row { display: grid; grid-template-columns: 1fr; gap: 0.15rem; padding: 0.85rem 0; border-bottom: 2px solid var(--day-4); }
.manifest__row dt { font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--pine-3); }
.manifest__row dd { margin: 0; font-size: var(--step-1); color: var(--pine); }

@media (min-width: 40rem) { .manifest__row { grid-template-columns: 14rem 1fr; gap: 1.5rem; align-items: baseline; } }

.gap { padding-bottom: clamp(2.2rem, 6vw, 4rem); background: var(--day); }
.gap__inner { border: 3px dashed var(--day-4); background: var(--day-2); padding: clamp(1.4rem, 4vw, 2.4rem); max-width: 60ch; }
.gap__label { font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--sun-deep); margin-bottom: 0.5rem; }
.gap__text { margin: 0; color: var(--pine-2); }

/* --------------------------------------------------------------------------
   13. Visit
   -------------------------------------------------------------------------- */

.visit { padding-block: clamp(2.2rem, 6vw, 4rem); background: var(--day); }
.visit__inner { display: grid; gap: clamp(1.8rem, 5vw, 3.5rem); }
.visit__where h2 { font-size: var(--step-2); text-transform: uppercase; margin-bottom: 0.9rem; color: var(--pine); }
.visit__addr { font-size: var(--step-1); line-height: 1.4; color: var(--pine); }
.visit__tel { margin: 1rem 0; }
.visit__trail { margin-top: 1.4rem; max-width: 58ch; color: var(--pine-2); }

@media (min-width: 56rem) { .visit__inner { grid-template-columns: 1.25fr 1fr; align-items: start; } }

.amen { padding-bottom: clamp(2.2rem, 6vw, 4rem); background: var(--day); }
.amen__title { font-size: var(--step-2); text-transform: uppercase; margin-bottom: 1.2rem; color: var(--pine); }
.amen__list { border-top: 3px solid var(--pine); }
.amen__row { display: grid; grid-template-columns: 1fr; gap: 0.15rem; padding: 0.9rem 0; border-bottom: 2px solid var(--day-4); }
.amen__row dt { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--step-0); color: var(--pine); }
.amen__row dd { margin: 0; color: var(--pine-2); }
.amen__note { margin-top: 1.2rem; color: var(--pine-2); max-width: 60ch; }

@media (min-width: 40rem) { .amen__row { grid-template-columns: 14rem 1fr; gap: 1.5rem; align-items: baseline; } }

/* --------------------------------------------------------------------------
   14. Hours
   -------------------------------------------------------------------------- */

.hours__title { font-size: var(--step-1); text-transform: uppercase; margin-bottom: 0.8rem; color: var(--pine); }
.hours__list { border-top: 3px solid var(--pine); }
.hours__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 2px solid var(--day-4); font-size: var(--step--1); }
.hours__row.is-today { font-weight: 700; }
.hours__row dt { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pine); }
.hours__row dd { margin: 0; font-variant-numeric: tabular-nums lining-nums; text-align: right; color: var(--pine-2); }
.hours__row dd.is-unknown a { color: var(--sun-deep); text-decoration-style: dotted; }
.hours__note { margin-top: 0.9rem; font-size: var(--step--1); color: var(--pine-3); line-height: 1.45; }

/* --------------------------------------------------------------------------
   15. Footer

   The second deliberately dark element. A page this bright needs a floor.
   -------------------------------------------------------------------------- */

.foot { background: var(--pine); color: #c8d9cc; }
.foot a { color: var(--day); }
.foot a:hover { color: var(--sun); }

.foot__inner { display: grid; gap: clamp(1.6rem, 4vw, 3rem); padding-block: clamp(2rem, 5vw, 3.5rem); }
.foot__name { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); text-transform: uppercase; color: var(--day); margin-bottom: 0.5rem; }
.foot__addr { margin-bottom: 0.5rem; line-height: 1.45; }
.foot__tel a { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); font-variant-numeric: tabular-nums lining-nums; text-decoration: none; }
.foot__link { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); text-transform: uppercase; letter-spacing: 0.1em; }
.foot__nav { list-style: none; display: grid; gap: 0.5rem; }
.foot__nav a { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; }

/* The hours block is styled for light grounds, so it is re-grounded here. */
.foot__col--hours .hours__title { color: var(--day); }
.foot__col--hours .hours__list { border-top-color: rgba(213, 226, 216, 0.5); }
.foot__col--hours .hours__row { border-bottom-color: rgba(213, 226, 216, 0.22); }
.foot__col--hours .hours__row dt { color: var(--day); }
.foot__col--hours .hours__row dd { color: #c8d9cc; }
.foot__col--hours .hours__row dd.is-unknown a { color: var(--sun); }
.foot__col--hours .hours__note { color: #a8bdad; }

@media (min-width: 52rem) { .foot__inner { grid-template-columns: 1.2fr 1fr 0.7fr; } }

.foot__concept {
  background: #0d2015; border-top: 3px solid var(--sun);
  padding-block: 1.4rem; font-size: var(--step--1); line-height: 1.55; color: #a8bdad;
}
.foot__concept strong { color: var(--day); }
.foot__concept p { max-width: 78ch; }
.foot__honest { margin-top: 0.7rem; }

/* --------------------------------------------------------------------------
   16. Small screens — the primary design target
   -------------------------------------------------------------------------- */

@media (max-width: 61.99rem) {
  .nav__list {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--day); flex-direction: column; gap: 0;
    padding: 0.5rem var(--gut) 1rem; display: none;
    border-bottom: 3px solid var(--pine);
  }
  .nav__list li { border-bottom: 2px solid var(--day-4); }
  .nav__link { display: block; padding-block: 0.85rem; border-bottom: 0; }
  .nav__link:hover, .nav__link[aria-current="page"] { border-bottom: 0; }
  .nav.is-open .nav__list { display: flex; }

  .nav-toggle {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: transparent; border: 3px solid var(--pine); color: var(--pine);
    font-family: var(--font-display); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--step-0);
    padding: 0.45em 0.8em; min-height: 44px; cursor: pointer;
  }
  .nav-toggle__bars { width: 1.1rem; height: 2px; background: currentColor; box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor; }

  .masthead { position: relative; }
}

/* Below 48rem the wordmark, the toggle and the phone button will not sit on
   one line — the phone button pushed the masthead to 490px at a 375px viewport
   and took every page with it. Measured, not eyeballed: see the scrollWidth
   harness note in reference/kirby-pattern.md. */
@media (max-width: 47.99rem) {
  .masthead__inner { flex-wrap: wrap; gap: 0.7rem; }
  .nav { flex: 1 1 100%; justify-content: space-between; gap: 0.6rem; }
  .nav .btn { flex: 0 1 auto; }
  .wordmark__name { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem); }
}

@media (max-width: 40rem) {
  .board { padding-inline: 0; }
  .board__plate { margin-left: 0; border-left: 0; border-right: 0; width: 100%; box-shadow: 0 10px 0 var(--grass); }
  .board__foot { flex-direction: column; align-items: flex-start; }
  .dish__head { flex-wrap: wrap; }
  .dish__head::after { display: none; }
  /* Several prices carry three options on one line — "$14.99 grilled haddock |
     $12.99 deep fried cod | $14.99 grilled shrimp". Held nowrap, that single
     string forced the menu page to 485px at a 375px viewport. */
  .dish__price { order: 0; margin-left: 0; white-space: normal; flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   17. Motion and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .pitchbar, .strip, .nav, .jump, .board__flag, .kitchen { display: none; }
  body, .week, .foot, .board, .bloody, .menu, .intro, .depot, .visit { background: #fff; color: #000; }
}