/* ==========================================================================
   The Peshtigo Corral — one hand-written stylesheet.

   No bundler, no framework, no utility classes. This file gets handed to
   whoever maintains the site next, so it is ordered to be read top to bottom:
   tokens, base, chrome, then one block per template.

   THE IDEA
   The restaurant's printed menu is a better-designed object than its website.
   Its construction is a dark plank border framing panels of cream paper, with
   kraft-tan blocks marking the house specialties and a brick red for display
   type. This stylesheet takes that literally: the page ground is the plank,
   and the content sits on a sheet of paper laid on top of it.

   That inversion is deliberate. Cream-paper-plus-serif is the reflex for this
   kind of restaurant and it is also the most over-produced look on the web.
   Building on the border instead lands somewhere the category default does not.
   ========================================================================== */

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

:root {
  /* Colour, taken off the printed menu — see docs/legacy-site-audit.md */
  --ink:        #241a14;  /* the dark plank framing every menu page */
  --ink-2:      #31241b;
  --ink-3:      #3e2f23;
  --paper:      #efe7d6;  /* the menu stock */
  --paper-2:    #e6dcc6;
  --paper-3:    #dccfb4;
  --kraft:      #d9c296;  /* their highlight panels */
  --red:        #a8372b;  /* the longhorn, and the display type */
  --red-deep:   #8b2b21;
  --red-lift:   #c4503f;  /* red that holds up on the ink ground */
  --ember:      #c8721f;
  --stone:      #6b5d50;  /* warm neutral, biased brown — never a flat grey */
  --stone-lift: #9c8b7b;
  --green:      #2e6b3e;  /* "open now" only. Semantic, not decorative. */

  /* Type */
  --f-display: "Bevan", "Clarendon", "Bookman Old Style", Georgia, serif;
  --f-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Scale — 1.25 from 1rem, held to throughout */
  --t-xs:  0.75rem;
  --t-sm:  0.875rem;
  --t-0:   1rem;
  --t-1:   1.1875rem;
  --t-2:   1.5rem;
  --t-3:   1.9375rem;
  --t-4:   2.5rem;
  --t-5:   3.25rem;

  /* Layout */
  --wrap:    72rem;
  --reading: 40rem;
  --gutter:  clamp(1.15rem, 4vw, 2.5rem);
  --sheet-pad: clamp(1.5rem, 5vw, 4rem);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background-color: var(--ink);
  /* Plank grain. Drawn, not photographed — the legacy site uses a photo of
     woodgrain as its page background and it is the first thing that dates it. */
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.13) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,240,214,.03) 0 1px, transparent 1px 7px);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: var(--t-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
}

p, ul, ol, dl, figure, address { margin: 0; }
address { font-style: normal; }
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 2px;
  border-radius: 1px;
}

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

.skip-link {
  position: absolute; left: 0; top: 0; z-index: 100;
  transform: translateY(-120%);
  background: var(--paper); color: var(--ink);
  padding: .7rem 1.15rem; font-weight: 700; text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* A reading-width column that still starts at the page gutter. Capping the
   WRAP instead centred the text, which left the body of a page out of line
   with its own heading — visible the moment the page heads became photographs
   with the title hard against the left edge. */
.wrap--reading > * { max-width: var(--reading); }

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

.btn {
  display: inline-block;
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .75rem 1.4rem;
  border: 2px solid transparent;
  cursor: pointer;
}

.btn--primary { background: var(--red); color: var(--paper); border-color: var(--red); }
.btn--primary:hover { background: var(--red-deep); border-color: var(--red-deep); }

.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* On the ink ground a ghost button inverts the other way. */
.pitchbar .btn--ghost:hover,
.footer .btn--ghost:hover { background: var(--paper); color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
}

/* --------------------------------------------------------------------------
   4. Chrome — concept banner, notice, masthead, nav
   -------------------------------------------------------------------------- */

/* The concept banner is required and permanent. It must never be quiet enough
   to be mistaken for decoration — this site looks like a real restaurant's
   site, and a visitor has to be told in the first line that it is not. */
.pitchbar {
  background: var(--red-deep);
  color: #fbf4e6;
  font-size: var(--t-sm);
  line-height: 1.45;
  border-bottom: 1px solid rgba(0,0,0,.25);
}
.pitchbar__inner {
  display: flex; flex-wrap: wrap; gap: .5rem .85rem;
  align-items: baseline;
  padding-block: .7rem;
}
.pitchbar__tag {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  background: #fbf4e6; color: var(--red-deep);
  padding: .15em .55em; flex: none;
}
.pitchbar a { color: inherit; }

.strip { background: var(--kraft); color: var(--ink); font-size: var(--t-sm); }
.strip__inner { display: flex; flex-wrap: wrap; gap: .5rem .75rem; padding-block: .6rem; }
.strip__key { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: var(--t-xs); }

.masthead { padding-block: clamp(1.1rem, 3vw, 1.75rem); }
.masthead__inner {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
}

.wordmark {
  display: flex; align-items: center; gap: .8rem;
  text-decoration: none; color: var(--paper);
}
.wordmark .mark { color: var(--kraft); flex: none; }
.wordmark__text { display: flex; flex-direction: column; line-height: 1; }
.wordmark__the {
  font-size: var(--t-xs); letter-spacing: .24em; text-transform: uppercase;
  color: var(--red-lift); margin-bottom: .3em;
}
.wordmark__name { font-family: var(--f-display); font-size: var(--t-2); letter-spacing: -.01em; }
.wordmark__sub {
  font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--stone-lift); margin-top: .45em;
}

.nav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.nav__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: .25rem 1.35rem;
}
.nav__link {
  text-decoration: none;
  font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper);
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
}
.nav__link:hover { border-bottom-color: var(--red-lift); }
.nav__link[aria-current="page"] { border-bottom-color: var(--kraft); color: var(--kraft); }

.nav-toggle { display: none; }

/* Mobile nav. A single breakpoint — the layout has no business changing more
   than once between a phone and a laptop. */
@media (max-width: 54rem) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: .55rem;
    background: transparent; color: var(--paper);
    border: 2px solid currentColor;
    font-family: var(--f-body); font-size: var(--t-sm); font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    padding: .55rem 1rem;
  }
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    display: block; width: 1rem; height: 2px; background: currentColor; content: "";
  }
  .nav-toggle__bars { position: relative; }
  .nav-toggle__bars::before { position: absolute; top: -5px; }
  .nav-toggle__bars::after  { position: absolute; top: 5px; }

  .nav { width: 100%; justify-content: space-between; }
  .nav__list {
    order: 3; width: 100%;
    flex-direction: column; gap: 0;
    border-top: 1px solid var(--ink-3);
    margin-top: .85rem;
  }
  .nav__list li { border-bottom: 1px solid var(--ink-3); }
  .nav__link { display: block; padding: .85rem 0; border-bottom: 0; }
  .nav__link[aria-current="page"] { border-bottom: 0; }

  /* Closed by default; app.js flips aria-expanded. With no JS the menu is
     simply always open, which is a working navigation, not a broken one. */
  .js .nav__list { display: none; }
  .js .nav__list.is-open { display: flex; }
}

/* --------------------------------------------------------------------------
   5. Main — the paper sheet
   -------------------------------------------------------------------------- */

main {
  display: block;
  background: var(--paper);
  color: var(--ink);
  padding-block: var(--sheet-pad);
  /* Paper laid on the plank: the ink ground stays visible as a frame. */
  margin-inline: clamp(0rem, 2vw, 1.5rem);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 1.25rem 3rem rgba(0,0,0,.35);
}

main a { color: var(--red-deep); text-underline-offset: .18em; }
main a:hover { color: var(--red); }

.prose { max-width: var(--reading); }
.prose p + p { margin-top: 1rem; }
.prose h2 { font-size: var(--t-2); margin-top: 2rem; margin-bottom: .5rem; }

.note {
  background: var(--paper-2);
  border-left: 4px solid var(--stone);
  padding: 1rem 1.15rem;
  font-size: var(--t-sm);
  max-width: var(--reading);
}
.note--gap { border-left-color: var(--ember); }

.sourcenote {
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--paper-3);
  font-size: var(--t-xs); color: var(--stone); max-width: var(--reading);
}

/* --------------------------------------------------------------------------
   6. Page head
   -------------------------------------------------------------------------- */

.pagehead { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.pagehead__inner { padding-inline: 0; }
.pagehead__eyebrow {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--stone); margin-bottom: .6rem;
}
.pagehead__eyebrow a { text-decoration: none; }
.pagehead__title { font-size: clamp(2rem, 6vw, var(--t-4)); }
.pagehead__sub {
  font-size: var(--t-1); color: var(--ink-3);
  max-width: 46ch; margin-top: .85rem; line-height: 1.5;
}

/* ---- The photographic variant ------------------------------------------ */

/* Pulled flush to the top of the paper sheet, cancelling the block padding on
   `main`, so the photograph starts immediately under the masthead with no band
   of empty paper above it. Vertical only — a negative INLINE margin here is
   what caused the horizontal overflow bug in the today section. */
.pagehead--photo {
  position: relative;
  isolation: isolate;
  margin-top: calc(var(--sheet-pad) * -1);
  margin-bottom: clamp(2rem, 5vw, 3rem);
  min-height: clamp(21rem, 52vh, 30rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}

.pagehead__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The scrim carries the legibility, so it is specified rather than eyeballed.
   Paper (#EFE7D6) over 92% ink sits near 13:1. Over 92% ink composited on a
   blown-out white highlight — the worst case in this photo set, which is all
   bright kitchen-lit plates — it is still about 8:1. Both clear WCAG AA for
   the standfirst and AAA for the heading. The ramp is weighted to the bottom
   so the top of the photograph stays open. */
.pagehead__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(20, 14, 10, .94) 0%,
    rgba(20, 14, 10, .90) 32%,
    rgba(20, 14, 10, .80) 55%,
    rgba(20, 14, 10, .48) 74%,
    rgba(20, 14, 10, .14) 90%,
    rgba(20, 14, 10, 0) 100%
  );
}

.pagehead--photo .pagehead__inner {
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  padding-inline: var(--gutter);
}
.pagehead--photo .pagehead__title { color: var(--paper); }
.pagehead--photo .pagehead__sub { color: var(--paper); max-width: 44ch; }
.pagehead--photo .pagehead__eyebrow { color: var(--kraft); }
.pagehead--photo .pagehead__eyebrow a { color: var(--kraft); }

/* ---- Title above the photograph (the default) --------------------------- */

/* The right shape for a tight close-up of a plate: the type gets clean paper,
   and the photograph gets a band of its own underneath. A wide band always
   crops a 4:3 source hard, so the band is kept as tall as a header reasonably
   can be — 21:9 rather than the 12:5 this started at, which zoomed so far into
   the gravy on the gallery header that the dish was unrecognisable. */
.pagehead--above { margin-bottom: clamp(2rem, 5vw, 3rem); }
.pagehead--above .pagehead__media {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.pagehead--above .pagehead__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 48rem) {
  .pagehead--above .pagehead__media { aspect-ratio: 21 / 9; }
}


/* --------------------------------------------------------------------------
   7. Home
   -------------------------------------------------------------------------- */

/* The opener is a full-bleed two-column band: type on paper at the left, the
   photograph filling its whole column edge to edge. The first version boxed the
   image in the middle of the right column with dead paper above and below it —
   the fix is that the media column STRETCHES and the image is height:100% with
   object-fit, so it fills whatever the text column turns out to be. */
/* Pulled flush to the top of the paper sheet, cancelling main's block padding,
   so the photograph runs from the masthead down to the today band with no strip
   of dead paper above it. Vertical only — a negative INLINE margin here is what
   caused the horizontal overflow bug in the today section. */
.opener {
  display: grid;
  margin-top: calc(var(--sheet-pad) * -1);
  margin-bottom: 0;
}

.opener__text {
  padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.15rem, 5vw, 4rem);
  display: flex;
  align-items: center;
}
.opener__textinner { width: 100%; max-width: 34rem; }

.opener__eyebrow {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--red-deep); margin-bottom: .85rem;
}
.opener__title { font-size: clamp(2.1rem, 7vw, var(--t-5)); letter-spacing: -.015em; }
.opener__sub {
  font-size: var(--t-1); line-height: 1.5; color: var(--ink-3);
  max-width: 40ch; margin-top: 1rem;
}
.opener__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

.opener__media { min-height: 15rem; }
.opener__media img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 60rem) {
  .opener { grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 34rem; }
  .opener__media { min-height: 0; }
}

/* The copy is capped at its reading measure, so on a wide screen a 50% column
   leaves slack. Rather than hand that slack to the photograph — which made the
   plate overbearing — the text block is pushed to the RIGHT of its column, so
   the slack collects in the left margin and the copy sits against the image.
   The type itself stays left-aligned: a right-ragged paragraph is harder to
   read, and the buttons under it would look adrift. */
@media (min-width: 80rem) {
  .opener__text { justify-content: flex-end; }
}

/* The "today" module. The whole pitch is that this exists at all. */
.today {
  background: var(--ink);
  color: var(--paper);
  /* Full-bleed across the paper sheet. `main` has block padding only and no
     inline padding, so this element already spans the sheet edge to edge — a
     negative inline margin here would push it PAST the sheet and out of the
     viewport. Measured at +18px to +40px of horizontal overflow before this
     was corrected; see the harness note in CLAUDE.md. */
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
}
.today__inner { display: grid; gap: 1.5rem; }
.today__eyebrow {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--kraft); margin-bottom: .55rem;
}
.today__day { font-size: clamp(1.8rem, 5vw, var(--t-4)); color: var(--paper); }
.today__date {
  display: block; font-family: var(--f-body); font-size: var(--t-sm);
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--stone-lift); margin-top: .7em;
}
.today__demo {
  margin-top: .9rem; max-width: 34ch;
  font-size: var(--t-xs); line-height: 1.5; color: var(--stone-lift);
  border-left: 2px solid var(--kraft); padding-left: .7rem;
}
.today__state {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1rem; font-size: var(--t-sm); font-weight: 600;
}
.today__dot { width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; }
.today__state.is-open { color: #7fc48f; }
.today__state.is-shut { color: var(--stone-lift); }

.today__list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .55rem;
}
.today__list li {
  position: relative; padding-left: 1.35rem;
  font-size: var(--t-1); font-weight: 500; line-height: 1.35;
}
.today__list li::before {
  content: "\2605"; position: absolute; left: 0; top: .12em;
  color: var(--red-lift); font-size: .72em;
}

.today__none { max-width: 34ch; }
.today__none p + p { margin-top: 1rem; }

.today__standing {
  background: var(--kraft); color: var(--ink);
  padding: 1.1rem 1.25rem; margin-top: 1.5rem;
}
.today__standing h3 { font-size: var(--t-1); }
.today__when {
  font-size: var(--t-sm); font-weight: 600; margin-top: .3rem;
  display: flex; flex-wrap: wrap; gap: .5rem .85rem;
}
.today__price { font-variant-numeric: tabular-nums; }
.today__standingtext { font-size: var(--t-sm); margin-top: .5rem; line-height: 1.45; }

.today__more { font-size: var(--t-sm); font-weight: 600; }
.today__more a { color: var(--kraft); }

@media (min-width: 48rem) {
  .today__inner { grid-template-columns: minmax(14rem, 1fr) 2fr; align-items: start; }
  .today__more { grid-column: 1 / -1; }
}

.feature { margin-top: clamp(2.5rem, 6vw, 4rem); }
.feature__inner { display: grid; gap: clamp(1.5rem, 4vw, 3rem); padding-inline: 0; align-items: center; }
.feature__eyebrow {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--red-deep); margin-bottom: .6rem;
}
.feature__text h2 { font-size: clamp(1.75rem, 4.5vw, var(--t-3)); margin-bottom: .85rem; }
.feature__text .prose { margin-bottom: 1.25rem; }
.feature__media img { width: 100%; object-fit: cover; aspect-ratio: 9 / 7; }

@media (min-width: 60rem) {
  .feature__inner { grid-template-columns: 5fr 6fr; }
}

.strip-gallery { margin-top: clamp(2.5rem, 6vw, 4rem); }
.strip-gallery__title { font-size: var(--t-2); margin-bottom: 1.15rem; }
.strip-gallery__list {
  list-style: none; padding: 0; margin: 0 0 1.25rem;
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}
.strip-gallery__list img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* --------------------------------------------------------------------------
   8. Menu
   -------------------------------------------------------------------------- */

.menu__intro { margin-bottom: 2rem; }

.menunav {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  padding: 1.5rem 0;
  border-block: 2px solid var(--ink);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.menunav__title {
  font-family: var(--f-body); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--stone);
  margin-bottom: .6rem;
}
.menunav__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.menunav__list a { font-size: var(--t-sm); text-decoration: none; }
.menunav__list a:hover { text-decoration: underline; }

.course { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.course__title {
  font-size: clamp(1.6rem, 4.5vw, var(--t-3));
  color: var(--red-deep);
  padding-bottom: .5rem;
  border-bottom: 3px solid var(--red-deep);
  margin-bottom: 2rem;
}

.msec { margin-bottom: 2.75rem; scroll-margin-top: 1.5rem; }
.msec__head { margin-bottom: 1.15rem; }
.msec__title { font-size: var(--t-2); }
.msec__blurb {
  font-size: var(--t-sm); font-style: italic; color: var(--stone);
  max-width: 52ch; margin-top: .4rem; line-height: 1.5;
}

.items {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1.25rem 2.5rem;
}
@media (min-width: 48rem) {
  .items { grid-template-columns: repeat(2, 1fr); }
}

.item--star .item__name { font-weight: 700; }
.item__star { color: var(--red); margin-right: .25em; }

/* The house-specialty panel, straight off the printed menu. */
.item--star {
  background: var(--kraft);
  padding: .9rem 1.1rem;
  margin: -.9rem -1.1rem;
}

.item__line {
  display: flex; align-items: baseline; gap: .5rem;
  font-size: var(--t-0);
}
.item__name {
  font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  font-size: var(--t-sm);
}
/* Leader dots, the way a printed menu sets them. Decorative, so hidden from
   assistive tech in the markup. */
.item__dots {
  flex: 1 1 auto; min-width: 1.5rem;
  border-bottom: 1px dotted var(--stone);
  transform: translateY(-.22em);
}
.item__price { font-variant-numeric: tabular-nums; font-weight: 600; flex: none; }
.item__desc { font-size: var(--t-sm); line-height: 1.45; color: var(--ink-3); margin-top: .25rem; }
/* Stacked on a narrow phone, plate-beside-type from 26rem up. The `minmax(0,
   1fr)` matters: a bare `1fr` takes its min-width from the content, so a long
   dish name refuses to shrink and pushes the grid wider than the viewport —
   measured as +34px of overflow at 320px before this was corrected. */
.item--photo { display: grid; gap: .75rem 1rem; align-items: start; }

@media (min-width: 26rem) {
  .item--photo { grid-template-columns: 9.5rem minmax(0, 1fr); }
}
.item__media { margin: 0; }
.item__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* A starred item that also has a photo keeps the kraft panel, so the two
   devices stack rather than fight. */
.item--star.item--photo { padding: .9rem 1.1rem; margin: -.9rem -1.1rem; }

.addons {
  list-style: none; padding: 1rem 1.15rem; margin: 1.5rem 0 0;
  background: var(--paper-2);
  display: grid; gap: .35rem;
  font-size: var(--t-sm);
}
.addons li { display: flex; gap: .75rem; justify-content: space-between; }
.addons b { font-variant-numeric: tabular-nums; }

.menu__smallprint {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--paper-3);
  font-size: var(--t-xs); color: var(--stone);
  display: grid; gap: .6rem; max-width: 68ch;
}
.menu__warning { font-style: italic; }

/* --------------------------------------------------------------------------
   9. Specials — the month grid
   -------------------------------------------------------------------------- */

.standing__title { font-size: var(--t-2); margin-bottom: 1.15rem; }
.standing { margin-bottom: clamp(2.5rem, 6vw, 3.5rem); }
.standing__list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.standing__item { background: var(--paper-2); border-top: 4px solid var(--red); overflow: hidden; }
.standing__body { padding: 1.15rem 1.35rem; }
.standing__media { aspect-ratio: 3 / 2; }
.standing__media img { width: 100%; height: 100%; object-fit: cover; }
.standing__item h3 { font-size: var(--t-1); }
.standing__when {
  font-size: var(--t-sm); font-weight: 700; margin-top: .35rem;
  display: flex; flex-wrap: wrap; gap: .35rem .75rem;
}
.standing__price { font-variant-numeric: tabular-nums; color: var(--red-deep); }
.standing__text { font-size: var(--t-sm); line-height: 1.45; margin-top: .55rem; color: var(--ink-3); }

.months__list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.months__list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  background: var(--ink); color: var(--paper);
  padding: 1rem 1.15rem; text-decoration: none;
}
.months__list a:hover { background: var(--red-deep); color: var(--paper); }
.months__name { font-family: var(--f-display); font-size: var(--t-1); }
.months__count { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--stone-lift); }
.months__list a:hover .months__count { color: var(--paper); }

/* The calendar. A list of days that happens to be laid out in seven columns —
   see the note in month.php about why this is not a <table>. */
.cal {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 2px;
  background: var(--paper-3);
  border: 2px solid var(--ink);
  grid-template-columns: 1fr;
}
.cal__pad { display: none; }
.cal__day { background: var(--paper); padding: .85rem 1rem; }

.cal__date {
  display: flex; align-items: baseline; gap: .5rem;
  padding-bottom: .4rem; margin-bottom: .5rem;
  border-bottom: 1px solid var(--paper-3);
}
.cal__num { font-family: var(--f-display); font-size: var(--t-1); font-variant-numeric: tabular-nums; }
.cal__weekday {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--stone);
}
.cal__today {
  margin-left: auto; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--red); color: var(--paper); padding: .1em .5em;
}
.cal__day.is-today { outline: 3px solid var(--red); outline-offset: -3px; }

.cal__dishes { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.cal__dishes li { font-size: var(--t-sm); line-height: 1.3; }
.cal__note {
  margin-top: .6rem; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--red-deep);
}

@media (min-width: 52rem) {
  .cal { grid-template-columns: repeat(7, 1fr); }
  .cal__pad { display: block; background: var(--paper-2); }
  .cal__day { padding: .6rem .65rem; }
  .cal__dishes li { font-size: var(--t-xs); }
}

/* --------------------------------------------------------------------------
   10. Visit
   -------------------------------------------------------------------------- */

.visit { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
.visit__main h2 { font-size: var(--t-2); margin-top: 2rem; margin-bottom: .6rem; }
.visit__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.visit__aside { display: grid; gap: 1rem; align-content: start; }

.card { background: var(--paper-2); padding: 1.35rem 1.5rem; }
.card h2 { font-size: var(--t-1); margin-bottom: .6rem; }
.card__note { font-size: var(--t-sm); color: var(--stone); margin-top: .6rem; }

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

/* Hours — shared by the visit page and the footer. */
.hours__title { font-size: var(--t-1); margin-bottom: .6rem; }
.hours__list { display: grid; gap: .3rem; }
.hours__row { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t-sm); }
.hours__row dt { font-weight: 600; }
.hours__row dd { margin: 0; font-variant-numeric: tabular-nums; }
.hours__note { font-size: var(--t-xs); color: var(--stone); margin-top: .7rem; }

/* --------------------------------------------------------------------------
   11. Gallery
   -------------------------------------------------------------------------- */

.grid-gallery {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.grid-gallery img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; display: block; }
.grid-gallery figcaption { font-size: var(--t-sm); color: var(--stone); margin-top: .5rem; }

.grid-gallery__link {
  display: block;
  position: relative;
  background: var(--ink);
  cursor: zoom-in;
}
/* The thumbnail lifts slightly on hover so it reads as openable. Kept to
   opacity — a transform would make the whole grid jitter on a trackpad. */
.grid-gallery__link img { transition: opacity .18s ease; }
.grid-gallery__link:hover img,
.grid-gallery__link:focus-visible img { opacity: .78; }

@media (prefers-reduced-motion: reduce) {
  .grid-gallery__link img { transition: none; }
}

/* ---- The lightbox ------------------------------------------------------ */

.lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--paper);
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(20, 14, 10, .94); }

.lightbox__stage {
  position: absolute;
  inset: 0 0 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3.5rem, 8vw, 5rem);
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .55);
}

.lightbox__bar {
  position: absolute;
  inset: auto 0 0 0;
  min-height: 5.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.25rem clamp(1.15rem, 4vw, 2.5rem) 1.75rem;
}
.lightbox__caption { font-size: var(--t-sm); color: var(--paper); max-width: 60ch; }
.lightbox__caption[hidden] { display: none; }
.lightbox__count {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--kraft);
  font-variant-numeric: tabular-nums; margin-left: auto;
}

.lightbox__btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  background: rgba(36, 26, 20, .72);
  border: 1px solid rgba(239, 231, 214, .28);
  color: var(--paper);
  cursor: pointer;
}
.lightbox__btn svg { width: 1.5rem; height: 1.5rem; }
.lightbox__btn:hover { background: var(--red-deep); border-color: var(--red-deep); }
.lightbox__btn:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }

.lightbox__btn--close { top: 1rem; right: 1rem; }
.lightbox__btn--prev  { top: 50%; left: .75rem; transform: translateY(-50%); }
.lightbox__btn--next  { top: 50%; right: .75rem; transform: translateY(-50%); }

@media (min-width: 48rem) {
  .lightbox__btn { width: 3.5rem; height: 3.5rem; }
  .lightbox__btn--close { top: 1.5rem; right: 1.5rem; }
  .lightbox__btn--prev { left: 1.5rem; }
  .lightbox__btn--next { right: 1.5rem; }
}

/* The stage is inset past the arrows on a phone so a tall photograph never
   sits underneath them. */
@media (max-width: 30rem) {
  .lightbox__stage { padding: 4rem .75rem; }
}

.errorpage h1 { font-size: var(--t-4); margin-bottom: 1rem; }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.footer {
  padding-block: clamp(2.5rem, 6vw, 4rem) 2rem;
  font-size: var(--t-sm);
}
.footer__grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--ink-3);
}
.footer a { color: var(--paper); }
.footer a:hover { color: var(--kraft); }
.wordmark--footer { margin-bottom: 1.15rem; }
.footer__where { color: var(--stone-lift); margin-top: .6rem; }
.footer__social { margin-top: .85rem; }
.footer__heading {
  font-family: var(--f-body); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--stone-lift);
  margin-bottom: .7rem;
}
.footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.footer .hours__title {
  font-family: var(--f-body); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--stone-lift);
}
.footer .hours__row dd { color: var(--stone-lift); }

/* The disclaimer. Deliberately not small print — a reader who lands deep in
   the site has to be able to find out whose site this is. */
.footer__concept {
  margin-top: 2rem; padding: 1.35rem 1.5rem;
  background: var(--ink-2);
  border-left: 4px solid var(--red-lift);
  display: grid; gap: .75rem;
  max-width: 62ch; line-height: 1.55;
}
.footer__concept strong { color: #fbf4e6; }

.footer__meta { margin-top: 1.75rem; color: var(--stone); font-size: var(--t-xs); }

/* --------------------------------------------------------------------------
   13. Motion
   -------------------------------------------------------------------------- */

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