/* ==========================================================================
   THE FOURTH QUARTER TAVERN — landing.css
   Faithful recreation of planning/the-fourth-quarter.png: one flat bento
   frame, zero gaps, every panel sharing 1px hairlines. Custom hero photo,
   crest logo, red date squares, drink board, menu cards, gallery, map band.
   ========================================================================== */

/* ---- Page frame: the whole main is one bordered bento ----
   ONE ground colour for the entire page. Header, hero, every bento cell and
   the footer all sit on --color-bg; nothing gets a fill of its own. The only
   thing that separates regions is a hairline, so --color-border is lifted a
   step above the shared-page value to stay legible on the near-black ground.
   --bento-inset is the gutter between the bento frame and the viewport; the
   hero cancels it to run full-bleed.
   --cell-pad is the one inset every bento cell keeps between its hairline and
   its content. It is a single knob on purpose: the promo cell's own padding and
   the hero headline's optical alignment are both derived from it, so tightening
   the grid stays consistent instead of drifting cell by cell. */
.page-landing {
  background: var(--color-bg);
  --color-border: #343a42;
  --bento-inset: 20px;
  --cell-pad: 16px;
}

/* One column system for the whole bento. Every band lays out on the same three
   tracks, so the vertical hairlines run straight down the page instead of
   jogging at each band boundary; a band that wants a wider slot spans tracks
   rather than inventing its own ratios. Boundaries land at 41.8% and 65.1% of
   the frame: the mockup's second rule is kept exactly, and the first is the
   average of the mockup's own two (which do not agree with each other). */
.bento {
  --bento-cols: 1.2fr 0.669fr 1fr;
  max-width: 1320px;
  width: calc(100% - var(--bento-inset) * 2);
  margin-inline: auto;
  padding: 0;
  border: 0;
  background: none;
}

/* ---- Header ---- */
/* No band of its own: the nav floats directly over the top of the hero. */
.page-landing .site-header {
  background: none;
  border-bottom: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.page-landing .site-header-inner {
  max-width: 1320px;
  min-height: 96px;
  padding-top: 12px;
  padding-bottom: 0;
}

.brand-logo { width: 108px; height: auto; margin-bottom: -18px; position: relative; z-index: 3; }

.page-landing .nav-cta { margin-left: 0; }

/* ---- Icons (lucide glyphs, sized here, colored by currentColor) ---- */
.ico { width: 16px; height: 16px; flex: none; }
.ico-title { width: 18px; height: 18px; color: var(--color-brand); margin-right: 9px; }
.ico-chev { width: 12px; height: 12px; flex: none; margin-left: 3px; }

/* ==========================================================================
   Hero
   ========================================================================== */

/* Full-bleed: the hero sits outside the bento frame, so it runs edge to edge
   with no hairlines flanking it. It carries no border of its own — the single
   line under it is band-a's top border, shared with the grid. */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 54%);
  /* room for the overlaid header plus the original copy area */
  min-height: 600px;
  background: none;
  overflow: hidden;
}

/* Left padding puts the headline on the same optical line as the first bento
   cell's content (gutter + cell border + cell padding), now that the hero
   itself starts at the viewport edge. */
.hero-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  padding-block: 120px 72px;
  padding-right: 0;
  padding-left: calc(max(var(--bento-inset), (100vw - 1320px) / 2) + var(--cell-pad) + 1px);
}

/* The photo runs the full width of the hero — its left third is a dark brick
   wall shot for the headline to sit on, so no mask is needed. */
.hero-visual { position: static; }

.hero-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* right-anchored so the neon sign stays in frame; the crop comes out of the
     wide brick run on the left */
  object-position: 100% 40%;
}

/* Left scrim: a black gradient under the headline so "GOOD GAME. GREAT
   TIMES." holds up against the brick no matter how bright the photo crops,
   while the texture still reads through. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* above the photo (which follows it in the tree), below the copy at z 2 */
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.45) 30%,
    rgba(0, 0, 0, 0.18) 45%,
    transparent 58%);
  pointer-events: none;
}

/* Neutral bottom scrim: keeps the hero copy legible where the photo is
   brightest. Deliberately colourless — a red wash read as a glow bug. */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(0deg, rgba(10, 11, 13, 0.6), transparent 80%);
  pointer-events: none;
}

.hero-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: clamp(52px, 6.4vw, 88px);
  line-height: 0.96;
  letter-spacing: 0.01em;
}

/* distressed ink via grunge texture clipped to the letters */
.hero-line-1,
.hero-line-2 {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-line-1 {
  background-color: #3d3a35;
  background-image:
    linear-gradient(rgba(243, 238, 229, 0.94), rgba(243, 238, 229, 0.94)),
    url("../../assets/img/pack/texture-grunge.webp");
  background-size: auto, 620px;
  background-position: center;
}
.hero-line-2 {
  background-color: #4d0d11;
  background-image:
    linear-gradient(rgba(207, 39, 48, 0.93), rgba(207, 39, 48, 0.93)),
    url("../../assets/img/pack/texture-grunge.webp");
  background-size: auto, 620px;
  background-position: center 70%;
}

.hero-sub {
  margin: 26px 0 0;
  font-family: var(--font-accent);
  font-size: clamp(16px, 1.7vw, 21px);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.hero-flourish {
  font-family: "Permanent Marker", cursive;
  font-style: normal;
  font-size: 1.12em;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  border-bottom: 3px solid var(--color-accent);
  padding-bottom: 1px;
  margin-left: 6px;
  display: inline-block;
  transform: rotate(-2deg);
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

/* ==========================================================================
   Bento bands — grid cells share hairlines via 1px gaps
   ========================================================================== */

/* Each band carries the bento frame's side rules, so the frame starts at the
   grid rather than wrapping the full-bleed hero. The 1px gaps let the band's
   own background show through as the hairlines between cells. */
.band {
  display: grid;
  grid-template-columns: var(--bento-cols);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-bottom: 0;
}
.band:last-child { border-bottom: 1px solid var(--color-border); }

/* Bands A and C fill all three tracks one cell each. Band B is a two-up: the
   menu takes the first two tracks and the gallery the third, so its single
   rule lands on the shared second boundary. */
.cell-menu { grid-column: 1 / 3; }
.cell-gallery { grid-column: 3 / 4; }

.panel-cell {
  background: var(--color-bg);
  padding: var(--cell-pad) var(--cell-pad) calc(var(--cell-pad) + 4px);
  min-width: 0;
}
/* The cell background is the page ground, never a tint: the 1px grid gaps are
   the only thing that reads as a division. */

.cell-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}

.cell-title {
  font-size: 23px;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
}
.cell-title--icon { margin-bottom: 20px; }

.cell-more {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-brand);
  white-space: nowrap;
}
.cell-more:hover { color: var(--color-accent); }

/* ---- Upcoming events ---- */
.event-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

/* Hairline rows on the panel ground — no fill, per the mockup. */
.event-item {
  display: flex;
  align-items: stretch;
  gap: 16px;
  background: transparent;
  border: 1px solid var(--color-border);
  padding: 12px;
  overflow: hidden;
}

/* Outlined chip: month in red, day in white, page ground behind. */
.event-date {
  flex: none;
  align-self: center;
  width: 54px;
  height: 62px;
  background: none;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.event-month {
  font-family: var(--font-accent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-brand);
}
.event-day {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  margin-top: 2px;
  color: var(--color-ink);
}

/* Three stacked lines: title, subtitle, day + time. */
.event-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  align-self: center;
  padding: 2px 0;
}

.event-name,
.event-sub {
  font-family: var(--font-display);
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.15;
  color: var(--color-ink);
}
.event-sub small {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--color-ink-muted);
}

.event-time {
  margin-top: 5px;
  font-family: var(--font-accent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink);
}

/* Art slot: either two badges or a photo bleeding to the row edge. */
.event-art {
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.event-art--teams { padding-right: 6px; }

/* The photo paints inside the row's height instead of dictating it: the slot
   stretches with the row and the image is absolutely positioned into it, so a
   square source can't inflate the row taller than its siblings. */
.event-art--photo {
  position: relative;
  align-self: stretch;
  width: 44%;
  max-width: 220px;
  margin: -12px -12px -12px auto;
}
.event-art--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%);
  mask-image: linear-gradient(90deg, transparent 0, #000 42%);
}

/* Fictional club emblems (generated vector crests; the mockup's marks are
   real league crests — see the extracted manifest's event-team-crests entry —
   and trademarks never ship in a template). */
.team-badge {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-block;
  font-size: 0;
  background: center / contain no-repeat;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.team-badge--rapids { background-image: url("../../assets/img/the-fourth-quarter/rapids.svg"); }
.team-badge--pines { background-image: url("../../assets/img/the-fourth-quarter/pines.svg"); }
.team-badge--ironworks { background-image: url("../../assets/img/the-fourth-quarter/ironworks.svg"); }
.team-badge--summit { background-image: url("../../assets/img/the-fourth-quarter/summit.svg"); }

.vs {
  font-family: var(--font-accent);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* ---- Promo cell: chalk play on a brick wall ----
   The one cell allowed its own surface: a generated dark-brick backdrop with
   the play drawn in chalk, cropped by the cell (slice). A soft vignette keeps
   the type readable over the chalk strokes. */
.cell-promo {
  position: relative;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  /* Same side inset as every other cell; the extra top and bottom keep the
     centered lockup off the hairlines when the band is short. */
  padding: calc(var(--cell-pad) * 1.6) var(--cell-pad);
  overflow: hidden;
}

.cell-promo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../assets/img/the-fourth-quarter/promo-brick-chalk.webp") center / cover no-repeat;
  pointer-events: none;
}

/* The photo carries its own vignette; this only steadies the type area. */
.cell-promo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(75% 45% at 50% 38%, rgba(10, 11, 13, 0.45), transparent 75%);
  pointer-events: none;
}

.cell-promo > * { position: relative; z-index: 1; }

.promo-title {
  position: relative;
  display: flex;
  flex-direction: column;
  font-size: clamp(34px, 3.2vw, 46px);
  line-height: 1.02;
}
.promo-line-1 { color: var(--color-ink); }
.promo-line-2 { color: var(--color-accent); }

/* Full ink on the photo — the muted grey vanished into the chalk marks. */
.promo-sub {
  position: relative;
  margin: 0;
  font-family: var(--font-accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-shadow: 0 1px 6px rgba(10, 11, 13, 0.9), 0 0 18px rgba(10, 11, 13, 0.7);
  max-width: 230px;
  line-height: 1.8;
}

/* Trimmed side padding so the label stays on one line inside the middle
   track, which is the narrowest of the three. */
.cell-promo .btn { position: relative; margin-top: 8px; padding-inline: 14px; }

/* ---- Drink specials ----
   One stacked panel, as in the mockup: a single frame around the whole board
   with the days divided by internal hairlines, not five floating boxes. */
.special-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
}

.special-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  border-top: 1px solid var(--color-border);
}
.special-item:first-child { border-top: 0; }

.special-info { display: flex; flex-direction: column; gap: 1px; }

/* Every day label is the gold treatment — including "All day. Every day." */
.special-day {
  font-family: var(--font-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.special-deal {
  font-family: var(--font-display);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.special-note {
  font-family: var(--font-accent);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* Drink tiles: cutouts floating free on the row — no frame around them, per
   the mockup. Each fills the full height of its row, bleeding through the
   row's vertical padding to the hairlines. */
.special-thumb {
  flex: none;
  align-self: stretch;
  width: 64px;
  margin-block: -10px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.special-thumb--beer { background-image: url("../../assets/img/the-fourth-quarter/drink-beer-pint.png"); }
.special-thumb--whiskey { background-image: url("../../assets/img/the-fourth-quarter/drink-whiskey-rocks.png"); }
/* Wine, margarita, and can are photographic shots on a black field (generated
   drink-menu photography; the mockup's cutouts carried crop artifacts and its
   branded PBR can is a trademark that never ships). Screen-blending drops the
   black field into the page ground so they float like the keyed cutouts. */
.special-thumb--wine {
  background-image: url("../../assets/img/the-fourth-quarter/drink-wine.webp");
  mix-blend-mode: screen;
}
.special-thumb--marg {
  background-image: url("../../assets/img/the-fourth-quarter/drink-marg.webp");
  mix-blend-mode: screen;
}
.special-thumb--can {
  background-image: url("../../assets/img/the-fourth-quarter/drink-can.webp");
  mix-blend-mode: screen;
}

/* ---- Menu highlights ----
   Four separate cards with real gaps between them; each one fully framed, photo
   and copy inside the same border, on the page ground. */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.menu-card {
  background: none;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-bottom: 18px;
}

/* The photos are pixel crops of the mockup's own menu row (149x105 native), so
   the slot carries their ratio and renders under native width — no upscaling. */
.menu-card img {
  width: 100%;
  aspect-ratio: 149 / 105;
  object-fit: cover;
  border-bottom: 1px solid var(--color-border);
}

.menu-name {
  font-size: 16px;
  letter-spacing: 0.04em;
  margin: 14px 12px 6px;
}

.menu-desc {
  margin: 0 14px;
  font-family: var(--font-accent);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--color-ink-muted);
}

/* ---- Gallery ----
   The tile grid stretches to the height of the menu cell beside it, so the
   two halves of the band square off the way they do in the mockup. */
.cell-gallery { display: flex; flex-direction: column; }

.gallery-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  min-height: 220px;
}

.gallery-grid img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

/* ---- Fan quotes ----
   Three separate framed cards with gaps, matching the menu cards. No rule
   under the stars — the gap does that work. */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* Three-up inside a track-width cell leaves each card around 120px, so the
   frame is kept thin and the quote set a shade smaller than body copy. */
.quote-card {
  margin: 0;
  background: none;
  border: 1px solid var(--color-border);
  padding: 14px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quote-stars {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-accent);
}
.quote-stars .ico-star { width: 13px; height: 13px; flex: none; }

.quote-card blockquote {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-ink);
  flex: 1;
}

.quote-card figcaption {
  font-family: var(--font-accent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* ---- Hours ----
   The narrowest track in the grid. Day and time are sized to sit on one line
   inside it as they do in the mockup, and the list is capped so the pair stays
   a grouped block instead of being flung to the cell edges on wide screens. */
.hours-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  max-width: 190px;
}

/* No rules between the rows: the day/time pairing reads on its own. */
.hours-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
}
.hours-row:first-child { padding-top: 0; }

.hours-row dt {
  font-family: var(--font-accent);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
  white-space: nowrap;
}

.hours-row dd {
  margin: 0;
  font-family: var(--font-accent);
  font-size: 12px;
  font-weight: 400;
  color: var(--color-ink-muted);
  white-space: nowrap;
}

.hours-note {
  margin: 10px 0 0;
  max-width: 190px;
  font-family: var(--font-accent);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* ---- Find us ----
   Two columns for the full height of the cell: the map runs the whole span, so
   its top is level with the heading and its bottom with the cell's floor. The
   address stack sits in the left column with Get Directions pinned to that same
   floor, level with the bottom of the map. */
.cell-findus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  grid-template-rows: auto auto auto 1fr;
  column-gap: 16px;
  row-gap: 12px;
  align-items: start;
}
.cell-findus .cell-title { grid-column: 1; grid-row: 1; margin-bottom: 4px; }
.findus-address { grid-column: 1; grid-row: 2; }
.findus-phone { grid-column: 1; grid-row: 3; }
/* Side padding trimmed so "Get Directions" holds one line in the address
   column beside the map. */
.cell-findus .btn { grid-column: 1; grid-row: 4; justify-self: start; align-self: end; padding-inline: 14px; }

.findus-address {
  font-style: normal;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-ink);
}

.findus-phone {
  font-family: var(--font-accent);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}
.findus-phone:hover { color: var(--color-ink); }

.findus-map {
  grid-column: 2;
  grid-row: 1 / -1;
  width: 100%;
  height: 100%;
  min-height: 150px;
  border: 1px solid var(--color-border);
  overflow: hidden;
  position: relative;
}

/* OpenStreetMap capture (assets/maps/map-town-grid.png), pushed down to the
   near-black tone the mockup's map panel sits at. Desaturated rather than
   sepia-toned, so it stays on the page's cool ground. */
.map-plate {
  position: absolute;
  inset: 0;
  /* cover, not a fixed zoom: the cell is much taller than the source's aspect,
     so a percentage width over-magnified the map into mush */
  background: url("../../assets/maps/map-town-grid.png") 52% 46% / cover no-repeat;
  /* dark-mode map: invert the light OSM tile so streets read as light lines
     on near-black, matching the bento's single dark background */
  filter: grayscale(1) invert(1) brightness(0.82) contrast(1.05);
}

/* red pin with its glow, over the darkened map */
.map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -68%);
  color: var(--color-brand);
  filter: drop-shadow(0 0 9px rgba(200, 35, 44, 0.65)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
  pointer-events: none;
}
.map-pin svg { width: 100%; height: 100%; display: block; }

.map-credit {
  position: absolute;
  right: 5px;
  bottom: 4px;
  margin: 0;
  font-family: var(--font-accent);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: rgba(239, 233, 223, 0.62);
  background: rgba(10, 11, 13, 0.6);
  padding: 1px 5px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* The bento already closes the page with its own border, so the footer needs
   no rule of its own — the mockup has none. */
.page-landing .site-footer { margin-top: 0; background: none; border-top: 0; }
.page-landing .site-footer .container { max-width: 1320px; }

/* One ink for the whole footer. Hierarchy comes from size, weight and tracking
   — the gold headings read as a second, competing accent next to the brand red,
   which is exactly what the mockup avoids. */
.page-landing .site-footer,
.page-landing .footer-heading,
.page-landing .footer-tagline,
.page-landing .footer-link,
.page-landing .footer-bottom {
  color: var(--color-ink);
}
.page-landing .footer-link:hover { color: var(--color-ink); text-decoration: underline; }
.page-landing .footer-heading { font-size: 12px; letter-spacing: 0.26em; }
.page-landing .footer-link,
.page-landing .footer-tagline { font-weight: 400; }

/* Tight band, columns divided by hairlines like the mockup, so the footer
   carries its content instead of a run of empty height. */
.page-landing .footer-grid {
  grid-template-columns: 1.5fr 1fr 0.9fr 1.2fr;
  gap: 0;
  padding-top: 30px;
  padding-bottom: 30px;
}

.page-landing .footer-col { padding: 0 34px; border-left: 1px solid var(--color-border); }
.page-landing .footer-col:first-child { padding-left: 0; border-left: 0; }
.page-landing .footer-col:last-child { padding-right: 0; }

/* Crest beside its lockup, the way the mockup sets it — the crest spans the
   tagline and the social row instead of stacking above them. */
.page-landing .footer-about {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 24px;
  row-gap: 10px;
  align-items: center;
}
.page-landing .footer-about .brand { grid-row: 1 / 3; margin-bottom: 0; }
.page-landing .footer-about .footer-tagline--stack { grid-column: 2; align-self: end; }
.page-landing .footer-social { grid-column: 2; align-self: start; margin-top: 0; }

.footer-logo { width: 118px; height: auto; }

.footer-tagline--stack {
  font-family: var(--font-display);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.45;
  color: var(--color-ink);
}

.footer-social { display: flex; gap: 14px; margin-top: 10px; }

/* Brand glyphs from simple-icons, bare on the panel like the mockup */
.social-dot {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
}
.social-dot svg { width: 100%; height: 100%; display: block; }
.social-dot:hover { color: var(--color-brand); }

.footer-link-cols { display: flex; gap: 40px; }
.footer-link-cols > div { display: flex; flex-direction: column; gap: 4px; }

/* Joined input group: one frame around the pair, the field and the button
   flush inside it with no gap and no borders of their own. */
.newsletter-form {
  display: flex;
  gap: 0;
  width: 100%;
  max-width: 320px;
  border: 1px solid var(--color-border);
}
.newsletter-form:focus-within { border-color: var(--color-brand); }

.newsletter-form .form-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  padding: 9px 12px;
}
.newsletter-form .form-input:focus { border: 0; box-shadow: none; }
.newsletter-form .btn { flex: none; border: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet. Below the desktop frame the shared track system is dropped: each band
   picks the pairing that survives the narrower frame, and the band-b spans reset
   so the menu and gallery sit in one track each. The hero, menu grid and footer
   also fold here, since at 820 they no longer have the width for their
   desktop pairings. */
@media (max-width: 1024px) {
  .band-a { grid-template-columns: 1fr 1fr; }
  .cell-promo { grid-column: 1 / -1; grid-row: 2; }
  .cell-menu, .cell-gallery { grid-column: auto; }
  .band-c { grid-template-columns: 1fr 1fr; }
  .cell-fans { grid-column: 1 / -1; }
  .event-art--photo { width: 38%; }

  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-visual { order: -1; min-height: 300px; }
  .hero-visual img {
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  }
  .hero-copy { padding: 12px 24px 56px; text-align: center; }
  .hero-actions { justify-content: center; }
  .band-b { grid-template-columns: 1fr; }
  /* Event rows share their width with two other cells here — shrink the art
     and the headline rather than letting either wrap raggedly. */
  .event-name, .event-sub { font-size: 15px; }
  .team-badge { width: 38px; height: 38px; }
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
  /* The fans cell spans the whole band here, so the three quotes stay three-up
     — each card is wider than it is on desktop. Stacking them would leave the
     right half of the band empty. */
  .quote-grid { gap: 12px; }
  .quote-card { padding: 14px 14px 16px; }
  .brand-logo { width: 84px; margin-bottom: -8px; }
  /* Footer columns stack, so the vertical rules become horizontal ones. */
  .page-landing .footer-grid { grid-template-columns: 1fr 1fr; }
  .page-landing .footer-col { padding: 0 0 0 28px; }
  .page-landing .footer-col:nth-child(odd) { padding-left: 0; border-left: 0; }
  .page-landing .footer-col:nth-child(n + 3) {
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid var(--color-border);
  }
}

@media (max-width: 640px) {
  .band-a, .band-c { grid-template-columns: 1fr; }
  .cell-promo { grid-column: auto; grid-row: auto; }
  .cell-fans { grid-column: auto; }
  /* Three-up would leave each quote about 100px wide on a phone — stack them. */
  .quote-grid { grid-template-columns: 1fr; gap: 10px; }
  .quote-card { padding: 14px 12px 16px; }
  .page-landing { --cell-pad: 14px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .event-art--teams { display: none; }
  .event-art--photo { width: 34%; }
  /* One column, so the day/time pair spans the cell instead of staying a
     narrow block with the times stopping short of the right edge. */
  .hours-list, .hours-note { max-width: none; }

  /* Too narrow for the address/map pair — the map goes back under the block.
     Children stretch so the map runs the full cell; only the button, which
     would look stretched, is pulled back to its own width. */
  .cell-findus { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .cell-findus .btn { align-self: flex-start; }
  .findus-map { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
  .hero-title { font-size: clamp(44px, 13vw, 60px); }
  .page-landing .site-header-inner { justify-content: center; }
  .page-landing { --bento-inset: 12px; }
  .page-landing .footer-grid { grid-template-columns: 1fr; }
  .page-landing .footer-col { padding-left: 0; border-left: 0; }
  .page-landing .footer-col:nth-child(n + 2) {
    padding-top: 22px;
    margin-top: 22px;
    border-top: 1px solid var(--color-border);
  }
}

/* ==========================================================================
   Mobile navigation — hamburger + overlay drawer
   The drawer takes over at the tablet breakpoint. It is absolutely positioned
   under the header (which is itself absolute over the hero), so opening it never
   moves page content.
   ========================================================================== */

.nav-toggle { display: none; }
.mobile-drawer { display: none; }

@media (max-width: 1024px) {
  .page-landing .site-nav { display: none; }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 0;
    color: var(--color-ink);
    cursor: pointer;
    position: relative;
    z-index: 3;
  }
  .nav-toggle:hover { border-color: var(--color-brand); color: var(--color-brand); }
  .nav-toggle-ico { width: 22px; height: 22px; display: block; }
  .nav-toggle-ico--close { display: none; }
  .nav-toggle.is-open .nav-toggle-ico { display: none; }
  .nav-toggle.is-open .nav-toggle-ico--close { display: block; }

  /* The reserve CTA moves out of the header bar and into the drawer, so the
     bar is just brand + hamburger and the button gets room to breathe. */
  .page-landing .nav-cta { display: none; }

  .mobile-drawer {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.72);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: transform 220ms ease, opacity 220ms ease, visibility 0s linear 220ms;
  }
  .mobile-drawer.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: transform 220ms ease, opacity 220ms ease, visibility 0s linear 0s;
  }

  .mobile-drawer-nav { display: flex; flex-direction: column; padding: 6px 20px 14px; }

  .mobile-drawer-link {
    position: relative;
    display: block;
    padding: 14px 0;
    font-family: var(--font-accent);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    border-bottom: 1px solid var(--color-border);
  }
  .mobile-drawer-link:last-child,
  .mobile-drawer-link:has(+ .mobile-drawer-cta) { border-bottom: 0; }
  .mobile-drawer-link:hover { color: var(--color-ink); }
  .mobile-drawer-link.is-active { color: var(--color-brand); }

  /* The header's reserve CTA, re-homed as the drawer's closing action. */
  .mobile-drawer-cta {
    display: flex;
    width: 100%;
    margin-top: 12px;
  }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .mobile-drawer, .mobile-drawer.is-open { transition: none; }
}

/* ==========================================================================
   Phone refinements
   ========================================================================== */

@media (max-width: 640px) {
  /* The header is a real row again (brand / hamburger), not a centred stack,
     so the theme-level centring is reset here. */
  .page-landing .site-header-inner {
    justify-content: space-between;
    text-align: left;
    flex-wrap: nowrap;
    gap: 10px;
  }

  /* Hero CTAs: trim the button gutters so the pair holds one centred row. */
  .hero-actions { justify-content: center; gap: 10px; }
  .hero-actions .btn { padding-inline: 16px; }

  /* Tap targets brought to 44px without moving anything: the extra height is
     padding, cancelled by an equal negative margin. */
  .cell-more { padding-block: 13px; margin-block: -13px; }
  .findus-phone { padding-block: 11px; margin-block: -11px; }
  .page-landing .footer-link { display: inline-block; padding-block: 10px; }
  /* The two link columns share the footer width evenly instead of huddling
     against the left edge with the right half empty. */
  .footer-link-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
    width: 100%;
  }
  .footer-link-cols > div { gap: 0; }
  .page-landing .btn-small { padding-block: 15px; }
  /* This one sits inside the newsletter frame with its own borders removed. */
  .newsletter-form .btn-small { padding-block: 16px; }
  .social-dot { width: 44px; height: 44px; padding: 11px; margin: -11px -6px; }
  .footer-social { gap: 20px; }

  /* Matchup badges stay — they carry the "who's playing" line — just smaller. */
  .event-art--teams { display: flex; gap: 6px; padding-right: 0; }
  .event-item .team-badge { width: 30px; height: 30px; }
  .event-item { gap: 10px; }

  /* More of the band photo, less of the fade. */
  .event-art--photo { width: 40%; max-width: 148px; }
  .event-art--photo img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%);
    mask-image: linear-gradient(90deg, transparent 0, #000 24%);
  }

  /* The map plate is decorative — give it a band, not a block. */
  .findus-map { aspect-ratio: 2.4 / 1; max-height: 132px; }
}