/* ==========================================================================
   Gig's Place Bar & Grill — Tavern League Scoresheet
   The week is the product. Everything is a ruled sheet; tonight is circled.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Ground: slate with a green cast, read in a dim bar or a dark truck cab */
  --slate-950: #0a0d0a;
  --slate-900: #10140f;
  --slate-850: #151a14;
  /* The lifted band. Sections alternate between slate-950 and this; the gap is
     about 4.5% lightness — enough to separate, too little to stripe. */
  --slate-band: #161b15;

  /* Ruled lines — the ledger */
  --rule: rgba(237, 234, 225, 0.13);
  --rule-strong: rgba(237, 234, 225, 0.3);

  /* Ink */
  --ledger: #6fb287;
  --ledger-dim: #4a7a5c;
  --grease: #e2452f;
  --grease-bright: #f0674f;
  --gold: #d9a94e;
  --gold-dim: #a37c33;

  /* Paper: pure white, only ever ON a saturated ink or behind a white-field
     logo — never as text on the slate ground, where chalk is the right temperature. */
  --paper: #ffffff;

  /* Chalk — secondary text tinted from the ground, never gray */
  --chalk: #edeae1;
  --chalk-2: #b9beb2;
  --chalk-3: #8f968a;

  /* Type */
  --display: "Anton", "Arial Narrow", sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", system-ui, -apple-system, sans-serif;

  /* Space */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --wrap: 82rem;
  --bar-h: 4.25rem;
}

/* --- Base ----------------------------------------------------------------- */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--slate-900);
  color: var(--chalk);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  text-wrap: balance;
}

p { margin: 0; }

ul, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

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

::selection {
  background: var(--grease);
  color: var(--paper);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: var(--slate-950);
  padding: var(--s3) var(--s5);
  font-family: var(--cond);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { left: var(--s4); top: var(--s4); }

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

/* --- Type ----------------------------------------------------------------- */

.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.label {
  font-family: var(--cond);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chalk-3);
}

.lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  color: var(--chalk-2);
  max-width: 46ch;
}

/* --- Layout --------------------------------------------------------------- */

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

@media (min-width: 48em) {
  .wrap { width: min(100% - 4rem, var(--wrap)); }
}

.section { padding-block: clamp(3.5rem, 8vw, 7rem); }

/* Alternating bands. The ledger's horizontal stripe was replaced with whole-section
   tones: the stripe cut through the week grid's own rules and made the columns
   harder to read, which is the one thing that page cannot afford. Sections carry
   the rhythm now, one tone to the next, and the 1px rules stay the only lines. */
main > section:nth-of-type(odd) { background: var(--slate-950); }
main > section:nth-of-type(even) { background: var(--slate-band); }

.rule-top { border-top: 1px solid var(--rule); }
/* Double rule — a sheet's header break */
.rule-double {
  border-bottom: 1px solid var(--rule-strong);
  box-shadow: 0 3px 0 -2px var(--rule);
}

/* --- Masthead ------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(16, 20, 15, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.masthead__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: var(--bar-h);
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.2rem;
  text-decoration: none;
  padding-block: var(--s2);
}

/* The client's script wordmark ships as black art on a white field. Inverting it
   and screening it over the dark masthead lifts the lettering out white without
   needing a transparent file. The file itself is pre-cropped to the ink bounds. */
.brand__wordmark {
  width: clamp(9rem, 22vw, 12rem);
  height: auto;
  aspect-ratio: 400 / 73;
  filter: invert(1);
  mix-blend-mode: screen;
}

/* Opaque JPEG, not a transparent PNG — the deckled parchment edge is painted into the
   artwork and the footer's slate ground is baked in behind it, which is what makes the
   pasted-sticker look work. drop-shadow is therefore doing nothing alpha-aware here; it
   is a rectangle shadow that happens to be invisible because the image edge matches the
   footer. Swap in a genuinely transparent asset and this comment stops being true:
   drop-shadow would start following the alpha, and the baked ground would need removing. */
.crest {
  display: block;
  width: min(100%, 20rem);
  height: auto;
  transform: rotate(-1.2deg);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
}

@media (prefers-reduced-motion: no-preference) {
  .crest { transition: transform 400ms var(--ease-out); }
}

@media (hover: hover) and (pointer: fine) {
  .crest:hover { transform: rotate(0deg); }
}

.brand__sub {
  font-family: var(--cond);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ledger);
  margin-top: 0.2rem;
}

.nav { display: none; }

@media (min-width: 60em) {
  .nav {
    display: flex;
    align-items: center;
    gap: var(--s6);
  }
}

.nav__link {
  font-family: var(--cond);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--chalk-2);
  padding: var(--s2) 0;
  position: relative;
  transition: color 160ms ease;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--grease);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { color: var(--chalk); }
  .nav__link:hover::after { transform: scaleX(1); }
}

.nav__link[aria-current="page"] { color: var(--chalk); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Two rooms, one destination — set on two lines so neither name is subordinate. */
.nav__link--stack {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
  line-height: 1.2;
  font-size: 0.875rem;
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 3rem;
  padding: var(--s3) var(--s5);
  font-family: var(--cond);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 180ms ease,
    color 180ms ease, border-color 180ms ease;
}

.btn:active { transform: scale(0.97); }

.btn--call {
  background: var(--gold);
  color: var(--slate-950);
}

.btn--ghost {
  background: transparent;
  color: var(--chalk);
  border-color: var(--rule-strong);
}

.btn--grease {
  background: var(--grease);
  color: var(--slate-950);
}

@media (hover: hover) and (pointer: fine) {
  .btn--call:hover { background: #e9bc68; }
  .btn--ghost:hover { border-color: var(--chalk-2); background: rgba(237, 234, 225, 0.05); }
  .btn--grease:hover { background: var(--grease-bright); }
}

.btn__icon { width: 1.125rem; height: 1.125rem; flex: none; }

.masthead .btn--call { display: none; }

@media (min-width: 60em) {
  .masthead .btn--call { display: inline-flex; min-height: 2.75rem; }
}

/* Mobile sticky call bar — the phone number is the conversion */
.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule-strong);
  background: rgba(10, 13, 10, 0.97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.callbar .btn {
  min-height: 3.5rem;
  border-radius: 0;
  font-size: 0.9375rem;
}

.callbar .btn--ghost { border: 0; border-right: 1px solid var(--rule); }

@media (min-width: 60em) {
  .callbar { display: none; }
}

body { padding-bottom: 3.5rem; }

@media (min-width: 60em) {
  body { padding-bottom: 0; }
}

/* --- Status --------------------------------------------------------------- */

.status[hidden] { display: none; }

.status {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  padding-block: var(--s5) var(--s4);
}

.status__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--chalk-3);
  flex: none;
  align-self: center;
}

.status--open .status__dot { background: var(--ledger); }
.status--bar .status__dot { background: var(--gold); }
.status--closed .status__dot { background: var(--grease); }

.status__state {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.6vw, 2.25rem);
  text-transform: uppercase;
  line-height: 1;
}

.status--open .status__state { color: var(--ledger); }
.status--bar .status__state { color: var(--gold); }
.status--closed .status__state { color: var(--grease-bright); }

.status__detail {
  font-family: var(--cond);
  font-weight: 600;
  font-size: clamp(0.9375rem, 1.6vw, 1.125rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chalk-2);
}

/* --- Hero ----------------------------------------------------------------- */

.hero { padding-block: clamp(2rem, 5vw, 3.5rem) 0; }

.hero__title {
  font-family: var(--display);
  font-size: clamp(3rem, 11vw, 8.5rem);
  /* Anton needs air between wrapped lines at small sizes; the tight setting
     only works once the type is large. */
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: var(--s4);
}

@media (min-width: 48em) {
  .hero__title { line-height: 0.86; }
}

/* Interior pages set a step below the home page's headline — the home hero is the
   one that has to carry the whole site. */
.hero__title--page { font-size: clamp(3rem, 10vw, 7rem); }

.hero__title em {
  font-style: normal;
  color: var(--ledger);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  padding-block: var(--s4);
  font-family: var(--cond);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chalk-3);
}

.hero__meta span { display: inline-flex; align-items: center; gap: var(--s2); }

/* --- The week grid — the signature ---------------------------------------- */

/* The sheet follows straight on from the hero — a ledger has no air between
   its heading and its first rule. */
.week {
  position: relative;
  padding-top: clamp(2rem, 4vw, 3rem);
}

.week__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s3);
}

.week__title {
  font-family: var(--display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  text-transform: uppercase;
  line-height: 1;
}

.week__grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rule-strong);
}

@media (min-width: 62em) {
  .week__grid {
    grid-template-columns: repeat(7, 1fr);
    border-left: 1px solid var(--rule);
  }
}

.day {
  position: relative;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--rule);
  padding: var(--s4) 0;
}

@media (min-width: 62em) {
  .day {
    display: grid;
    /* Fixed rows so every column shares baselines — without this one column's
       content pushes its hour rules below the rest and the sheet stops reading
       as one ruled grid, which is the whole concept. */
    grid-template-rows: auto auto 1fr;
    border-right: 1px solid var(--rule);
    border-bottom: 0;
    padding: var(--s5) var(--s4) var(--s6);
    min-height: 24rem;
  }

  .day__head { grid-row: 1; }
  .day__hours { grid-row: 2; }
  /* align-self overrides the stacked layout's margin-top:auto so every entry
     starts on the same line rather than hanging off the bottom rule. */
  .day__event { grid-row: 3; align-self: start; }
}

/* Phones get a stacked list, not a sheet — so the week's Sunday-first reading
   order would bury tonight several screens down. Tonight comes first instead. */
@media (max-width: 61.99em) {
  .day--today { order: -1; }
}

.day__tonight {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate-950);
  background: var(--grease);
  padding: 0.15rem 0.45rem;
  margin-left: auto;
}

/* Mobile: the sheet turned sideways — day label left, content right */
.day__head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  position: relative;
  margin-bottom: var(--s4);
}

.day__abbr {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--chalk-2);
}

.day--today .day__abbr { color: var(--chalk); }
.day--closed .day__abbr { color: var(--chalk-3); }

.day__circle {
  position: absolute;
  left: -0.75rem;
  top: 50%;
  width: 6.25rem;
  height: 2.75rem;
  transform: translateY(-50%);
  pointer-events: none;
  overflow: visible;
}

.day__circle path {
  fill: none;
  stroke: var(--grease);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.95;
}

.day__hours { margin-bottom: var(--s4); }

.day__hours div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding-block: var(--s1);
  border-bottom: 1px dotted var(--rule);
}

.day__hours dt {
  font-family: var(--cond);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-3);
}

.day__hours dd {
  font-family: var(--cond);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  color: var(--chalk-2);
  white-space: nowrap;
}

.day--closed .day__hours dd,
.day--closed .day__event-name { color: var(--chalk-3); }

.day__event-name {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.1vw, 1.875rem);
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--chalk);
  margin-bottom: var(--s2);
}

.day--today .day__event-name { color: var(--grease-bright); }

.day__event-time {
  font-family: var(--cond);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.day__event-note {
  font-size: 0.9375rem;
  color: var(--chalk-2);
  margin-top: var(--s2);
  line-height: 1.4;
}

.inline-link {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  display: inline-block;
  min-height: 2.75rem;
  line-height: 2.75rem;
  transition: color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .inline-link:hover { color: var(--chalk); }
}

.day--quiet .day__event-name {
  font-family: var(--cond);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--chalk-3);
}

.day--closed { background: rgba(10, 13, 10, 0.5); }

.day--today { background: rgba(226, 69, 47, 0.07); }

/* --- Plates (the food) ---------------------------------------------------- */

.plate {
  display: grid;
  gap: var(--s5);
  padding-block: var(--s7);
  border-bottom: 1px solid var(--rule);
  align-items: center;
}

@media (min-width: 54em) {
  .plate {
    grid-template-columns: 1fr 1.15fr;
    gap: var(--s8);
  }
  .plate:nth-child(even) .plate__media { order: 2; }
}

.plate__media {
  position: relative;
  overflow: hidden;
  background: var(--slate-850);
}

.plate__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.plate__name {
  font-family: var(--display);
  font-size: clamp(2.25rem, 6vw, 4rem);
  line-height: 0.9;
  text-transform: uppercase;
}

/* Sits under the heading, never above it — a label above a heading is a kicker,
   and the heading carries its own weight. */
.plate__when {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: var(--s3);
  margin-bottom: var(--s4);
}

.plate__price {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--ledger);
  margin-top: var(--s4);
}

.plate__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-top: var(--s4);
  font-family: var(--cond);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chalk-2);
}

.plate__list li {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

.plate__list li::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--ledger-dim);
  flex: none;
}

/* This artwork was drawn for a white field: the phone number is black script on a dark red
   ribbon, and the closing line is black. On the slate ground both go illegible — dropping
   the background made the page cleaner and the logo worse. So it gets a light field back,
   but as a deliberate printed card: paper stock, a little off-square, sitting on the sheet
   like the crest does. No clip needed — on paper the whole lockup reads as drawn. */
.logo-pizza {
  background: var(--paper);
  padding: var(--s5) var(--s4);
  transform: rotate(-1deg);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5);
}

/* --- Big offer (banquet) -------------------------------------------------- */

.offer {
  position: relative;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  overflow: hidden;
}

.offer__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* The photo is the point — you are selling a room somebody has to picture themselves in.
   It was previously at 0.24 opacity AND under a heavy scrim, which between them erased it.
   The scrim now does the contrast work on the text side only, so the room can be seen. */
.offer__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  filter: grayscale(0.1);
}

.offer__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    var(--slate-950) 0%,
    rgba(10, 13, 10, 0.92) 34%,
    rgba(10, 13, 10, 0.55) 55%,
    rgba(10, 13, 10, 0.12) 78%,
    rgba(10, 13, 10, 0) 100%
  );
}

/* Phones have no side to spare — the copy runs the full width, so the veil does too. */
@media (max-width: 53.99em) {
  .offer__media img { opacity: 0.6; }
  .offer__media::after {
    background: linear-gradient(
      180deg,
      rgba(10, 13, 10, 0.92) 0%,
      rgba(10, 13, 10, 0.86) 60%,
      rgba(10, 13, 10, 0.92) 100%
    );
  }
}

.offer__in {
  position: relative;
  z-index: 1;
  padding-block: clamp(3.5rem, 9vw, 7rem);
}

.offer__free {
  font-family: var(--display);
  font-size: clamp(4.5rem, 17vw, 12rem);
  line-height: 0.8;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s4);
}

.offer__what {
  font-family: var(--display);
  font-size: clamp(1.5rem, 4vw, 2.75rem);
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: var(--s5);
}

.offer__note {
  font-size: 0.9375rem;
  color: var(--chalk-2);
  margin-top: var(--s5);
  max-width: 44ch;
}

/* --- Gallery -------------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

@media (min-width: 54em) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
  .gallery__item--wide { grid-column: span 2; grid-row: span 2; }
}

.gallery__item {
  position: relative;
  background: var(--slate-850);
  overflow: hidden;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 500ms var(--ease-out), filter 400ms ease;
  filter: saturate(0.92);
}

.gallery__item--wide img { aspect-ratio: 1; }

@media (hover: hover) and (pointer: fine) {
  .gallery__item:hover img { transform: scale(1.04); filter: saturate(1.08); }
}

/* --- Find us -------------------------------------------------------------- */

.find {
  display: grid;
  gap: var(--s6);
}

@media (min-width: 54em) {
  .find { grid-template-columns: 0.9fr 1.1fr; gap: var(--s8); align-items: start; }
}

/* Chrome will not apply CSS filters to this cross-origin embed, so the map is
   treated as what it honestly is: a printed paper map pasted onto the sheet. */
.find__map {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--chalk);
  padding: 0.5rem;
  border: 1px solid var(--gold-dim);
  overflow: hidden;
}

.find__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.find__map figcaption,
.map-caption {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chalk-3);
  padding-bottom: var(--s2);
}

.addr {
  font-style: normal;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  line-height: 1.35;
  color: var(--chalk);
}

.hours-table { width: 100%; border-collapse: collapse; margin-top: var(--s5); }

.hours-table caption {
  text-align: left;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chalk-3);
  padding-bottom: var(--s3);
}

.hours-table th,
.hours-table td {
  text-align: left;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--cond);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
}

.hours-table th {
  color: var(--chalk-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  width: 30%;
}

.hours-table td { color: var(--chalk-2); }

.hours-table tr[data-today] th,
.hours-table tr[data-today] td { color: var(--grease-bright); }

/* --- Menu ----------------------------------------------------------------- */

/* Jump list — a long menu needs a way in that is not scrolling. */
.menu-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--rule);
}

.menu-nav a {
  font-family: var(--cond);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--chalk-2);
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  transition: color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .menu-nav a:hover { color: var(--gold); }
}

/* A menu reads as a column, not a spread — without this the price drifts a
   third of a screen away from the item it belongs to. */
.menu-group,
.menu-nav { max-width: 60rem; }

.menu-group { margin-bottom: var(--s8); scroll-margin-top: 5.5rem; }

.menu-note {
  font-size: 0.9375rem;
  color: var(--chalk-3);
  margin-block: var(--s4) var(--s5);
  max-width: 60ch;
}

.menu-note strong { color: var(--chalk-2); font-weight: 600; }

/* One priced entry. Name and price share the top line; the description runs
   under the name so long copy never pushes the price out of alignment. */
.mrow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s1) var(--s5);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.mrow__name {
  grid-column: 1;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chalk);
}

.mrow__price {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--ledger);
  white-space: nowrap;
}

.mrow__desc {
  grid-column: 1;
  font-size: 0.9375rem;
  color: var(--chalk-2);
  max-width: 62ch;
}

/* Pizza sizes — three prices, one line. */
.sizes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--rule-strong);
  margin-bottom: var(--s4);
}

.sizes div { display: flex; align-items: baseline; gap: var(--s2); }

.sizes dt {
  font-family: var(--cond);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-3);
}

.sizes dd { font-family: var(--display); font-size: 1.25rem; color: var(--ledger); }

/* Plain list — toppings, sauces, kids items, drinks. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  padding-block: var(--s4);
}

.chips li {
  font-family: var(--cond);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chalk-2);
  border: 1px solid var(--rule);
  padding: 0.35rem 0.65rem;
}

/* --- Events --------------------------------------------------------------- */

/* Ledger rows on the same rules as the week — not a row of identical cards. */
.sheet { border-top: 1px solid var(--rule-strong); }

.sheet__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s1) var(--s5);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

@media (min-width: 52em) {
  .sheet__row { grid-template-columns: minmax(0, 12rem) minmax(0, 14rem) 1fr; }
}

.sheet__name {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  text-transform: uppercase;
  line-height: 0.95;
  color: var(--chalk);
}

.sheet__where {
  font-family: var(--cond);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.sheet__note { color: var(--chalk-2); max-width: 52ch; }

/* --- Footer --------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--rule-strong);
  padding-block: var(--s7) var(--s6);
}

.foot__grid {
  display: grid;
  gap: var(--s6);
  grid-template-columns: 1fr;
}

@media (min-width: 46em) {
  .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s7); }
}

.foot__list li { padding-block: var(--s1); }

.foot__list a {
  text-decoration: none;
  color: var(--chalk-2);
  font-family: var(--cond);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 2.75rem;
  transition: color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .foot__list a:hover { color: var(--gold); }
}

.foot__legal {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--chalk-3);
}

/* --- Motion --------------------------------------------------------------- */

/* Content is visible by default; JS opts in to the reveal. */
.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* The one authored moment: the grease pencil circles tonight. */
.js .day__circle path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.js .day__circle.is-drawn path {
  animation: scribble 900ms var(--ease-out) forwards;
}

@keyframes scribble {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: opacity 200ms ease; }
  .js .day__circle path { stroke-dashoffset: 0; }
  .js .day__circle.is-drawn path { animation: none; }
  .gallery__item img { transition: none; }
  .btn { transition: background-color 160ms ease, color 160ms ease; }
  .btn:active { transform: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* --- Print ---------------------------------------------------------------- */

@media print {
  .masthead, .callbar, .find__map { display: none; }
  body { background: var(--paper); color: #000; padding: 0; }
}