/* =====================================================================
   Printers Alley — design tokens, hero, and the rest of index.html
   (BUILD-PLAN.md §3–§5). index.html sections are complete; Phase 3+
   (sports/menu/events/about pages) reuse these tokens but aren't built yet.
   ===================================================================== */

/* ---------- Fonts (MIGRATION.md §8 — woff2 only, font-display: swap) ---------- */
@font-face {
  font-family: 'Archivo Black';
  src: url('fonts/ArchivoBlack-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens (BUILD-PLAN.md §3.1) ---------- */
:root {
  /* Palette — black + white as the only base neutrals; red/yellow/orange are
     reserved for the teams (Wrexham & Arsenal share red, differentiated by
     composition — see BUILD-PLAN.md §4.3). No cream. Navy is the one
     exception, reserved for Inter Milan's own nerazzurri blue. */
  --ink:        #000000;
  --paper:      #FFFFFF;
  --chocolate:  #CE6F34;   /* orange — Tennessee */
  --amber:      #FFB612;   /* yellow — Steelers */
  --brick:      #B80006;   /* red — Arsenal / Wrexham */
  --navy:       #010E80;   /* blue — Inter Milan */

  --ground:     #FAF8F4;
  --surface:    #FFFFFF;
  --surface-dk: #0B0B0B;
  --hairline:   rgba(0, 0, 0, .12);
  --hairline-2: rgba(0, 0, 0, .07);
  --muted:      #6B6B6B;
  --display-muted: #EAEAEA;  /* the giant team text — a texture, not a UI colour like --muted */

  --accent:     var(--ink);   /* per slide / per team page */
  --accent-ink: var(--paper); /* readable text/icon color for content sitting ON --accent */
  --action:     var(--chocolate);  /* constant site-wide */

  --font-display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;

  --step--1: clamp(.78rem, .75rem + .15vw, .875rem);
  --step-0:  clamp(.95rem, .9rem  + .25vw, 1.0625rem);
  --step-1:  clamp(1.15rem, 1rem  + .6vw,  1.5rem);
  --step-2:  clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --step-3:  clamp(2rem,  1.4rem  + 3vw,   3.5rem);
  /* pure vw scaling (no flat rem added to the preferred value) keeps the
     text-width-to-viewport-width ratio constant at every size in between, so
     "Midtown Sports Bar" — the longest of the five phrases — is verified safe
     against the hero's edge at every desktop width, not just at the clamp ends */
  --display: clamp(3rem, 6vw, 8.5rem);

  --radius:    14px;
  --radius-lg: 22px;
  --pill:      999px;
  --gutter:    clamp(1.25rem, 4vw, 4.5rem);
  --measure:   62ch;

  --nav-h: 4.75rem;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  /* halftone screen-print texture — a print-shop nod ("Printers Alley"), kept
     faint so it reads as paper stock. Lives on body (not per-section) so it's
     one continuous pattern everywhere --ground shows, hero included */
  background-color: var(--ground);
  background-image: radial-gradient(circle, rgba(0,0,0,.09) 1px, transparent 1.4px);
  background-size: 8px 8px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, blockquote, dl, dd { margin: 0; }
.no-scroll { overflow: hidden; }

.eyebrow {
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pill {
  display: inline-flex; align-items: center;
  padding: .3em .85em;
  border-radius: var(--pill);
  background: var(--action);
  color: var(--ink);
  font-weight: 800;
  font-size: var(--step--1);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* rule-caps divider (device 6, §3.3) */
.rule-caps {
  display: flex; align-items: center; gap: 1.1rem;
  color: var(--muted);
}
.rule-caps::before, .rule-caps::after {
  content: ""; flex: 1; height: 1px; background: var(--hairline);
}
.rule-caps span {
  font-weight: 800; font-size: var(--step--1);
  letter-spacing: .18em; text-transform: uppercase;
  white-space: nowrap;
}

/* dark data card primitive (device 3, §3.3) — reused across the teams,
   game time, and find-us sections below */
.card-dk {
  background: var(--surface-dk);
  color: var(--ground);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}

/* pa-badge arc text (slide 1 subject, defined in the SVG sprite in index.html) */
.badge-arc-text {
  fill: var(--paper);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .16em;
}

/* ===================================================================
   Nav (MIGRATION.md §2.1)
   =================================================================== */
.topnav-container {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1.25rem;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  background: var(--ink);
}
.nav-logo { height: 2.5rem; width: auto; color: var(--paper); }
.topnav {
  display: flex; align-items: center; gap: 2rem;
  margin-left: auto;
}
.topnav .nav-link {
  color: var(--paper);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.topnav .nav-link-reserve {
  color: var(--ink);
  background: var(--action);
  padding: .55em 1.1em;
  border-radius: var(--pill);
}

/* Hamburger — three hairline rules, matching the wordmark's own rule device */
.icon {
  display: none; margin-left: auto; width: 44px; height: 44px; padding: 0;
  background: none; border: none; appearance: none; cursor: pointer;
  align-items: center; justify-content: center; color: var(--paper);
}
.icon svg { width: 26px; height: auto; overflow: visible; }
.icon svg path {
  transition: transform .3s ease, opacity .2s ease;
  transform-box: fill-box; transform-origin: center;
}
.icon[aria-expanded="true"] svg path:nth-of-type(1) { transform: translateY(9px) rotate(45deg); }
.icon[aria-expanded="true"] svg path:nth-of-type(2) { opacity: 0; }
.icon[aria-expanded="true"] svg path:nth-of-type(3) { transform: translateY(-9px) rotate(-45deg); }

/* Sports nav dropdown — one page per team (BUILD-PLAN.md §7), no single hub
   page, so "Sports" is a flyout of the six team pages instead of a link.
   Styled separately from .nav-link (not reusing that class on the toggle
   itself) so clicking it to open the flyout doesn't also fire the
   close-the-mobile-panel handler bound to every .nav-link below. */
.nav-dropdown { position: relative; }
.nav-dropdown__toggle {
  display: inline-flex; align-items: center; gap: .35em;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--paper);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.nav-dropdown__caret { width: .6em; height: .6em; transition: transform .2s ease; }
.nav-dropdown.is-open .nav-dropdown__caret { transform: rotate(180deg); }
.nav-dropdown__menu {
  display: flex; flex-direction: column;
  position: absolute; top: calc(100% + .9rem); left: 50%;
  transform: translate(-50%, -6px);
  min-width: 220px; margin: 0; padding: .5rem;
  background: var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 25;
}
.nav-dropdown.is-open .nav-dropdown__menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav-dropdown__menu .nav-link {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .9rem;
  border-radius: calc(var(--radius) - 6px);
  white-space: nowrap;
}
.nav-dropdown__menu .nav-link:hover, .nav-dropdown__menu .nav-link:focus-visible {
  background: rgba(255, 255, 255, .08);
}
.nav-crest {
  display: block;
  width: 1.15em; height: 1.15em;
  flex: none;
  filter: brightness(0) invert(1);
}

@media (max-width: 760px) {
  .topnav-container { padding: 0 1.1rem; }
  .icon { display: inline-flex; z-index: 40; }

  body::before {
    content: ""; position: fixed; inset: 0;
    background: rgba(0,0,0,.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 15;
  }
  body.no-scroll::before { opacity: 1; pointer-events: auto; }

  .topnav {
    position: fixed; inset: 0 -100% 0 auto; width: min(85vw, 360px); height: 100dvh;
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: 2rem; padding: 6.5rem 2rem 2.5rem;
    background: var(--ink);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    margin-left: 0; transition: right .3s ease; z-index: 30;
  }
  .topnav.show { right: 0; }
  .topnav .nav-link { color: var(--paper); min-height: 44px; display: inline-flex; align-items: center; }
  /* .nav-link-reserve keeps its base accent pill (ink on --action) — reads cleanly on black too */

  /* Sports dropdown becomes an inline accordion inside the slide-in panel —
     a hover flyout has nowhere to float in a full-width vertical menu. */
  .nav-dropdown { width: 100%; }
  .nav-dropdown__toggle { width: 100%; justify-content: space-between; min-height: 44px; }
  .nav-dropdown__menu {
    position: static; transform: none; box-shadow: none; background: none;
    padding: 0 0 0 1rem; margin-top: .25rem;
    max-height: 0; opacity: 1; visibility: visible; pointer-events: auto;
    overflow: hidden; transition: max-height .25s ease;
  }
  .nav-dropdown.is-open .nav-dropdown__menu { max-height: 22rem; }
  .nav-dropdown__menu .nav-link { min-height: auto; padding: .55rem .5rem; }
}

/* ===================================================================
   Hero (BUILD-PLAN.md §4)
   =================================================================== */
.hero {
  position: relative;
  /* no background of its own — shows body's halftone ground so the texture
     is one continuous pattern across the hero/gallery boundary, not a seam */
  overflow: clip;
  padding: 0 var(--gutter) var(--gutter);
  /* nav + hero fill exactly one viewport; min- (not fixed-) height so content
     that genuinely needs more room (a short mobile screen) is never clipped */
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  flex-direction: column;
}

.hero-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 1.25rem 1.5rem;
  flex: 1 1 auto;
  padding-top: 2.5rem;
}

/* z0 — scattered tactics-board icons (arrows, players, X's), full-bleed
   background texture in the same light grey as the giant word. Fixed,
   deliberate placements (not JS randomness) so the layout never shifts. */
.hero-tactics {
  position: absolute;
  inset: 0;
  z-index: 0;
  color: var(--display-muted);
  pointer-events: none;
  overflow: hidden;
}
.hero-tactics svg { position: absolute; height: auto; }

/* z2 — the giant display band, full bleed across the stage */
.hero-display-wrap {
  grid-column: 1 / 13;
  grid-row: 2;
  align-self: center;
  position: relative;
  z-index: 1;
  overflow: visible;
}
.hero-display {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .82;
  letter-spacing: -.02em;
  font-size: var(--display);
  /* every slide's giant word — including the h1 — sits back as texture;
     colour lives in the crest, the fixture pill, and the active selector */
  color: var(--display-muted);
  transition: color .5s ease, opacity .4s ease;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* hard safety net: a flex item's text otherwise refuses to shrink below its
     unbroken width (min-width:auto), so a long single word like "VOLUNTEERS"
     at the top of the clamp can overflow the hero — this lets it wrap instead
     of ever spilling past the edge, whatever the exact viewport/word turns out */
  overflow-wrap: anywhere;
  min-width: 0;
}
.hero-display.is-active { opacity: 1; visibility: visible; }
/* Printers Alley now follows the same team-slide pattern: the stamp is
   centered directly over "Midtown / Sports Bar" the same way a crest
   occludes its slide's giant background word. */
/* the stamp is a fixed-ink mark, not a team crest — it stays black rather
   than tracking the slide's (now orange) accent */
.hero-subject[data-slide="printers"] { color: var(--ink); }
.hero-subject[data-slide="printers"] svg { width: 140%; max-width: none; flex-shrink: 0; }

@media (prefers-reduced-motion: no-preference) {
  .hero-display { transition: color .5s ease, opacity .5s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-display { transition: none; }
}

/* z3 — subject: badge (slide 1) or club crest (2–5), bottom-aligned, overlaps z2 */
.hero-subject-wrap {
  /* same cell as .hero-display-wrap (row 2, full width, centered) so the crest
     sits directly on top of the muted team text, not just aligned beside it */
  grid-column: 1 / 13;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  position: relative;
  z-index: 2;
  /* wider vw share and a taller ceiling than before — the old 21.5rem cap
     plateaued by ~1280px wide, so the crest/stamp stopped growing well
     short of how big the hero itself gets on a large desktop screen */
  width: clamp(12.5rem, 23vw, 24rem);
}
.hero-subject {
  position: absolute; inset: 0 0 0 0;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease, color .5s ease;
  pointer-events: none;
  /* team crests are currentColor-based, so this ties each one to the active
     slide's accent (BUILD-PLAN.md §4.3) */
  color: var(--accent);
}
.hero-subject.is-active {
  opacity: 1; visibility: visible; transform: translateY(0);
  pointer-events: auto;
  position: relative;
}
.hero-subject a { display: block; }
.hero-subject svg { width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
  .hero-subject { transition: opacity .01s linear; transform: none; }
}

/* Wrexham (slide 5) no longer has a mirrored composition to speak of — the
   hatch is a symmetric full-bleed texture now, and the subject/selector
   all stay fixed in their usual spot on every slide regardless of mirror mode.
   .hero-stage--mirror is kept as a hook in case a future slide needs it again. */

/* z4 — media card, next-game card: chrome fixed, content swaps per slide */
.hero-media {
  grid-column: 1 / 4;
  grid-row: 3;
  align-self: end;
  /* fixed to the fixture card's own compact height (not the row's auto size,
     which can be inflated by the subject spanning into this row) — the photo
     crops via object-fit rather than a fixed aspect-ratio */
  height: 9.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
  text-decoration: none;
  display: block;
  position: relative;
  z-index: 1; /* above the full-bleed .hero-tactics texture behind it */
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media__label {
  position: absolute; left: .85rem; bottom: .85rem;
  color: var(--paper);
  font-weight: 800;
  font-size: var(--step--1);
  letter-spacing: .04em;
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
}

.hero-next {
  /* mirrors .hero-media's 3-column width (1/4) from the right edge, so the
     two bottom cards read as an equal-width pair instead of the fixture
     card running a column wider */
  grid-column: 10 / 13;
  grid-row: 3;
  align-self: end;
  position: relative;
  z-index: 1; /* above the full-bleed .hero-tactics texture behind it */
  height: 9.5rem;
  /* matches .hero-media's radius exactly — the two bottom cards read as a pair */
  border-radius: var(--radius-lg);
  /* top row and footer/hr stay put; the fixture line between them gets the
     flexible space (below) and centers within it, rather than the three
     rows sharing the gaps evenly */
  display: flex; flex-direction: column;
}
.hero-next__top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
/* the fixture card's pill ties to that slide's team colour, not the constant brand red */
.hero-next .pill { background: var(--accent); color: var(--accent-ink); }
.hero-next__meta { font-size: var(--step--1); color: var(--ground); opacity: .75; text-align: right; font-variant-numeric: tabular-nums; }
.hero-next__fixture {
  flex: 1;
  display: flex;
  align-items: center;
  font-weight: 800; font-size: var(--step-0); letter-spacing: .01em;
  line-height: 1.3; min-height: 2.6em;
  /* reserves 2 lines — opponent names run from "Home" to "Wolverhampton Wanderers" */
}
.hero-next__foot {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding-top: .55rem; margin-top: .1rem;
  border-top: 1px solid rgba(250,248,244,.16);
  font-size: var(--step--1);
}
.hero-next__foot a { color: var(--ground); font-weight: 800; text-decoration: none; }
.hero-next__foot a:hover { text-decoration: underline; }

/* Printers-only desktop CTA — sits in the flexible row under the stamp,
   bottom-aligned so it lands just above .hero-media/.hero-next in row 3
   rather than down at their own baseline. Mobile already gets Reserve/Menu
   via .hero-actions, so this stays desktop-only. */
.hero-cta {
  display: none;
  grid-column: 5 / 9;
  grid-row: 2;
  align-self: end;
  position: relative;
  z-index: 1;
  gap: .6rem;
}
.hero-cta.is-active { display: flex; }
.hero-cta a {
  flex: 1;
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .8em 1em;
  border-radius: var(--pill);
  font-weight: 800;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
}
.hero-cta .is-primary { background: var(--action); color: var(--ink); }
.hero-cta .is-secondary { background: var(--surface); color: var(--ink); border: 1.5px solid var(--hairline); }

/* z5 handled by .topnav-container above (constant, not restyled per slide) */

/* pagination — five club crests + the PA mark, doubles as "teams we support" */
.hero-pagination {
  grid-column: 1 / 13;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  position: relative;
  z-index: 1; /* above the full-bleed .hero-tactics texture behind it */
  display: flex; gap: .5rem;
  margin-top: -.25rem;
}
.hero-pagination button {
  width: 44px; height: 44px;
  padding: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--hairline);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: .6;
  transition: opacity .25s ease, border-color .25s ease, color .25s ease;
}
.hero-pagination button svg { width: 100%; height: 100%; }
/* inactive buttons stay a neutral grey; only the active one shows its team's
   own colour (via --accent, which always matches whichever slide is current) */
.hero-pagination button[aria-current="true"] {
  opacity: 1;
  color: var(--accent);
  border-width: 2.5px;
  border-color: var(--accent);
}
.hero-pagination button:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

/* ---------- Mobile hero (<760px) — built first (MIGRATION.md §2) ---------- */
@media (max-width: 760px) {
  .hero { padding: 0 1.1rem 2.5rem; }
  /* stays a grid (not flex) so the crest/muted-text pair can keep sharing
     one cell the same way it overlaps on desktop — row 1 is the only
     flexible track, so it soaks up whatever space the fixed-size fixture
     card/buttons/pagination below it don't need, centering that pair in
     whatever's left rather than pinning them to the top */
  .hero-stage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto auto auto;
    min-height: 0;
    padding-top: 1.5rem;
    gap: 1.1rem;
  }
  /* grid-column reset to 1 (not desktop's 1/13) — leaving the old span in
     place forced 11 implicit zero-width columns into this single-column
     grid, which starved every other row of its full width */
  .hero-pagination { grid-column: 1; grid-row: 4; justify-self: center; align-self: center; margin-top: .25rem; }
  .hero-subject-wrap,
  .hero-display-wrap {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
  }
  .hero-subject-wrap {
    width: 58vw; max-width: 17rem;
    z-index: 2;
  }
  .hero-display-wrap { position: static; height: auto; }
  .hero-display {
    position: static; display: none;
    text-align: center;
    font-size: clamp(2.2rem, 10vw, 3rem);
  }
  .hero-display.is-active { display: block; }
  /* width matches .hero-actions below it exactly, instead of the fixture
     card's own content (the "15 screens · 2 projectors" line) forcing it
     wider and running off the screen edge */
  .hero-next { grid-row: 2; grid-column: 1; width: 100%; }
  .hero-next__top { flex-wrap: wrap; row-gap: .2rem; }
  .hero-media { display: none; } /* leaves the hero on mobile; its #gallery link still works via the hero-actions row */
  /* matches .hero-cta.is-active's specificity so this actually wins on
     mobile — .hero-actions covers Reserve/Menu there instead, and without
     this the printers slide was showing both button rows at once */
  .hero-cta.is-active { display: none; }
}

/* Mobile action row under the next-game card */
.hero-actions { display: none; position: relative; z-index: 1; }
@media (max-width: 760px) {
  .hero-actions {
    grid-row: 3; grid-column: 1;
    display: flex; gap: .6rem;
  }
  .hero-actions a {
    flex: 1;
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: .8em 1em;
    border-radius: var(--pill);
    font-weight: 800;
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
  }
  .hero-actions .is-primary { background: var(--action); color: var(--ink); }
  .hero-actions .is-secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--hairline); }
}

/* ===================================================================
   Gallery — tabbed by space, under the hero. The card is edge-to-edge
   (full-bleed, no side gutter, no rounding) — only its own content gets
   the site's usual gutter inset.
   =================================================================== */
.gallery-section {
  /* so #gallery's jump target lands below the sticky nav, not under it */
  scroll-margin-top: var(--nav-h);
  padding: 0 0 clamp(3rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.gallery-card {
  background: var(--surface-dk);
  /* flat/square top edge — the curve interest lives at the notch itself
     (concave fillets), not the card's own outer corners */
  padding: 0 var(--gutter) clamp(1.5rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.gallery-heading {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: .95;
  font-size: var(--step-3);
  color: var(--paper);
}
.gallery-intro {
  color: rgba(255, 255, 255, .7);
  max-width: var(--measure);
}

/* the notch: a white, rounded, halftone-textured tab flush with the card's
   own top edge — same paper texture as the hero ground, so it reads as the
   same paper stock as the rest of the site, not a floating badge */
/* browser-tab shape: convex round at the bottom where the tab re-enters the
   card, and flush/square at the top where it meets the card's top edge — the
   black bulges convex into the tab there (::before/::after), tangent to both
   the flat card edge and the notch's own straight side, rather than the tab
   itself carrying the curve. The fillets are separate elements so they're
   never clipped by anything, including the tab row wrapping to a second
   line on narrow screens. */
.gallery-notch {
  position: relative;
  align-self: center;
  background-color: var(--ground); /* matches the hero's ground exactly, not --paper */
  background-image: radial-gradient(circle, rgba(0,0,0,.09) 1px, transparent 1.4px);
  background-size: 8px 8px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: .3rem;
  max-width: calc(100% - var(--radius-lg) * 2);
}
.gallery-notch::before,
.gallery-notch::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--radius-lg);
  height: var(--radius-lg);
}
.gallery-notch::before {
  left: calc(var(--radius-lg) * -1);
  background: radial-gradient(circle at bottom left, var(--surface-dk) var(--radius-lg), var(--ground) var(--radius-lg));
}
.gallery-notch::after {
  right: calc(var(--radius-lg) * -1);
  background: radial-gradient(circle at bottom right, var(--surface-dk) var(--radius-lg), var(--ground) var(--radius-lg));
}
.gallery-notch__scroll {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .15rem;
}
.gallery-tab {
  appearance: none; border: none; background: none; cursor: pointer;
  flex: none;
  padding: .65rem 1.15rem;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  border-radius: var(--radius);
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}
.gallery-tab.is-active { color: var(--ink); background-color: rgba(0,0,0,.06); }
.gallery-tab:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

.gallery-panel {
  display: none;
  /* fixed row height, natural width — every image keeps its own aspect
     ratio (no crop). One inline row, scrolling horizontally, rather than
     wrapping — so the panel's height never jumps around as you switch tabs
     with different photo counts/shapes */
  flex-wrap: nowrap;
  overflow-x: auto;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  padding-bottom: .4rem; /* keeps a scrollbar clear of the images */
  -webkit-overflow-scrolling: touch;
}
.gallery-panel.is-active { display: flex; }
.gallery-panel img {
  height: 300px;
  width: auto;
  flex-shrink: 0; /* a nowrap row must not squash images to fit */
  border-radius: var(--radius);
}

@media (max-width: 760px) {
  .gallery-panel { gap: .6rem; }
  .gallery-panel img { height: 160px; }
}

/* ===================================================================
   Shared section header devices (BUILD-PLAN.md §3.3 device 2, generalized
   beyond the hero) + a light .card to pair with the existing .card-dk
   =================================================================== */
.section-head {
  padding: 0 var(--gutter);
  display: flex; flex-direction: column; gap: .5rem;
  margin-bottom: 1.5rem;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: .95;
  font-size: var(--step-3);
}
/* on a dark ground (Events, and .gallery-heading below), same size, white ink */
.section-title--on-dark { color: var(--paper); }
.section-intro { max-width: var(--measure); color: var(--muted); }
.section-intro--dark { color: rgba(255,255,255,.7); }

/* a link inline within running copy — unlike .text-link below, which is a
   standalone block-level link offset by the page gutter */
.inline-link { color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: .15em; }

.text-link {
  display: inline-block;
  margin: 0 var(--gutter);
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--action);
}

/* light card — the on-ground counterpart to .card-dk. Sets its own text
   color explicitly (not just background) so it stays legible even nested
   inside a dark section like Events, which sets --paper as its ambient
   text color. */
.card {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}

.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: .8em 1.4em;
  border-radius: var(--pill);
  font-weight: 800;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
}
.btn-primary { background: var(--action); color: var(--ink); }
.btn-secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--hairline); }

/* ===================================================================
   The Teams
   =================================================================== */
.teams-section { padding: clamp(3rem, 6vw, 5rem) 0; }
.teams-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  padding: 0 var(--gutter);
}
.team-card {
  background: var(--surface-dk);
  color: var(--ground);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem;
  display: flex; flex-direction: column; gap: .75rem;
  text-decoration: none;
}
.team-card__crest { width: 3.5rem; height: 3.5rem; color: var(--paper); }
.team-card__name {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--step-1);
  letter-spacing: -.01em;
}
.team-card__tag { font-size: var(--step--1); color: rgba(250, 248, 244, .72); }

.scroll-hint { display: none; }

@media (max-width: 900px) {
  .teams-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .5rem;
    -webkit-overflow-scrolling: touch;
  }
  .team-card { scroll-snap-align: start; }
  .scroll-hint {
    display: block;
    margin: .75rem var(--gutter) 0;
    font-size: var(--step--1);
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
  }
}

/* ===================================================================
   Game Time
   =================================================================== */
.game-time-section { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--surface); }
.specials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  padding: 0 var(--gutter);
  margin: 1.5rem 0;
}
.specials-col { display: flex; flex-direction: column; gap: 1rem; }
.specials-col .pill { align-self: flex-start; }
.specials-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.specials-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid rgba(250, 248, 244, .12);
  padding-bottom: .5rem;
}
.specials-list li:last-child { border-bottom: none; padding-bottom: 0; }
.specials-list__name { font-weight: 700; }
.specials-list__price { font-variant-numeric: tabular-nums; color: rgba(250, 248, 244, .75); }

@media (max-width: 760px) {
  .specials-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   Eat & Drink
   =================================================================== */
.eat-drink-section {
  padding: clamp(3rem, 6vw, 5rem) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 22rem) 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.eat-drink-media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; }
.eat-drink-media img { width: 100%; height: 100%; object-fit: cover; }
.eat-drink-body { display: flex; flex-direction: column; gap: 1rem; }
.highlight-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.highlight-list li.card { display: flex; align-items: center; gap: 1rem; }
.highlight-list__name { margin: 0 0 .15rem; font-weight: 800; }
.highlight-list__desc { margin: 0; font-size: var(--step--1); color: var(--muted); }
.highlight-list__price { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eat-drink-ctas { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }

@media (max-width: 900px) {
  .eat-drink-section { grid-template-columns: 1fr; }
  .eat-drink-media { aspect-ratio: 16 / 10; max-height: 20rem; }
}

/* ===================================================================
   Events & Parties
   =================================================================== */
.events-section { background: var(--ink); color: var(--paper); padding: clamp(3rem, 6vw, 5rem) 0; }
.events-spaces { display: flex; flex-wrap: wrap; gap: .6rem; padding: 0 var(--gutter); margin-bottom: 1.5rem; }
.pill--outline { background: transparent; border: 1.5px solid rgba(255, 255, 255, .3); color: var(--paper); }
.events-packages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 0 var(--gutter);
  margin-bottom: 2rem;
}
.events-packages__name { margin: 0; font-weight: 800; text-align: center; }
.events-cta { margin-left: var(--gutter); }

@media (max-width: 760px) {
  .events-packages { grid-template-columns: repeat(2, 1fr); }
}

/* ===================================================================
   Find Us
   =================================================================== */
.find-us-section { padding: clamp(3rem, 6vw, 5rem) var(--gutter); display: flex; flex-direction: column; gap: 2rem; }
.find-us-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.find-us-info a { color: var(--ink); font-weight: 800; text-decoration: none; border-bottom: 1.5px solid var(--hairline); }
.find-us-hours { display: flex; flex-direction: column; gap: .35rem; margin: 1rem 0; }
.find-us-hours > div { display: flex; justify-content: space-between; gap: 1rem; max-width: 20rem; }
.find-us-hours dt { font-weight: 700; margin: 0; }
.find-us-hours dd { margin: 0; font-variant-numeric: tabular-nums; }
.find-us-card { display: flex; flex-direction: column; gap: .85rem; align-items: flex-start; }
.find-us-card__text { margin: 0; color: rgba(250, 248, 244, .8); }
.find-us-card__link { color: var(--ground); font-weight: 800; text-decoration: none; }

@media (max-width: 760px) {
  .find-us-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   Footer
   =================================================================== */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) 2rem;
  display: flex; flex-direction: column; gap: 1.75rem;
}
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.75rem 2.5rem; }
.footer-logo { height: 1.75rem; width: auto; color: var(--paper); }
.footer-social { display: flex; gap: .6rem; }
.footer-social a {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .25);
  display: flex; align-items: center; justify-content: center;
  color: var(--paper);
}
.footer-social svg { width: 20px; height: 20px; }
.footer-rule { color: rgba(255, 255, 255, .5); }
.footer-rule::before, .footer-rule::after { background: rgba(255, 255, 255, .18); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; }
.footer-copyright { color: rgba(255, 255, 255, .55); font-size: var(--step--1); }
.footer-hours { color: rgba(255, 255, 255, .55); font-size: var(--step--1); }

@media (max-width: 760px) {
  .footer-top { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .footer-bottom { flex-direction: column; gap: .4rem; }
}

/* ===================================================================
   Promo popup (MIGRATION.md §12 — ships inactive)
   =================================================================== */
.promo-popup[hidden] { display: none; }
.promo-popup { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; }
.promo-popup__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.promo-popup__card {
  position: relative; z-index: 1; width: min(90vw, 420px);
  padding: 2rem; border-radius: var(--radius-lg); background: var(--surface);
  text-align: center;
}
.promo-popup__close {
  position: absolute; top: .5rem; right: .75rem; width: 44px; height: 44px;
  background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.promo-popup__cta {
  display: inline-block; margin-top: 1rem; padding: .75em 1.5em;
  border-radius: var(--pill); background: var(--action); color: var(--ink);
  text-decoration: none;
}
@media (prefers-reduced-motion: no-preference) {
  .promo-popup__card { animation: promo-in .3s ease; }
  @keyframes promo-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* ===================================================================
   Team pages — Steelers, Tennessee, Arsenal, Wrexham (BUILD-PLAN.md §7:
   one dedicated page per team rather than a single /sports hub, reached
   via the Sports nav dropdown). Sections below reuse the shared devices
   already defined above (.section-head, .card-dk, .rule-caps, .pill,
   .btn-primary/.btn-secondary) — only new layout rules live here.
   =================================================================== */
.team-hero {
  position: relative;
  overflow: clip;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
}
.team-hero__ghost {
  position: absolute; top: 50%; right: -6%;
  width: min(60vw, 620px); height: auto;
  transform: translateY(-50%);
  color: var(--accent, var(--ink));
  opacity: .07;
  pointer-events: none;
  z-index: 0;
}
.team-hero__content { position: relative; z-index: 1; max-width: 46rem; }
.team-hero__crest, .team-hero__badge-placeholder {
  width: clamp(4rem, 9vw, 6rem);
  height: clamp(4rem, 9vw, 6rem);
  margin-bottom: 1.25rem;
}
.team-hero__crest { color: var(--accent, var(--ink)); }
.team-hero__badge-placeholder {
  border-radius: 50%;
  background: var(--accent, var(--ink));
  color: var(--accent-ink, var(--paper));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: -.01em;
}
.team-hero__eyebrow { color: var(--muted); margin-bottom: .5rem; }
.team-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: .92;
  font-size: clamp(2.25rem, 5vw, 4rem);
  margin: 0 0 1rem;
}
.team-hero__intro { max-width: var(--measure); color: var(--muted); margin-bottom: 1.75rem; }
.team-hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }

.team-section { padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter); }
.team-section--alt { background: var(--surface); }
.team-section--dark { background: var(--surface-dk); color: var(--ground); }
.team-section--dark .section-title { color: var(--paper); }
.team-section--dark .section-intro { color: rgba(250, 248, 244, .7); }

.team-schedule__note { margin: -.75rem 0 1.5rem; color: var(--muted); font-size: var(--step--1); }

.team-findus { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.5rem; align-items: start; }
.team-findus__card { display: flex; flex-direction: column; gap: .9rem; }
.team-findus__row { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid rgba(250, 248, 244, .12); padding-bottom: .7rem; }
.team-findus__row:last-child { border-bottom: none; padding-bottom: 0; }
.team-findus__label { color: rgba(250, 248, 244, .6); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; }
.team-findus__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .5rem; }

.team-community { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
/* --community-aspect lets a page override the crop for a landscape source
   photo (set inline, per team) without disturbing the default here or the
   mobile override below, which both apply regardless of that variable. */
.team-community__panel { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: var(--community-aspect, 4 / 3); }
.team-community__panel img { width: 100%; height: 100%; object-fit: cover; object-position: var(--community-object-position, center); }
.team-community__copy p { color: var(--muted); }

.team-faq { display: flex; flex-direction: column; gap: .75rem; }
.team-faq details { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1rem 1.25rem; }
.team-faq summary {
  cursor: pointer;
  font-weight: 800;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.team-faq summary::-webkit-details-marker { display: none; }
.team-faq summary::after { content: '+'; font-weight: 400; font-size: 1.3rem; color: var(--muted); }
.team-faq details[open] summary::after { content: '\2013'; }
.team-faq p { margin: .75rem 0 0; color: var(--muted); }

@media (max-width: 760px) {
  .team-findus, .team-community { grid-template-columns: 1fr; }
  .team-community__panel { aspect-ratio: 16 / 10; order: -1; }
  .team-hero__ghost { opacity: .05; width: 80vw; right: -20%; }
}

/* ===================================================================
   Simple content pages — Menu, Events, About, Jobs (BUILD-PLAN.md §9
   Phase 4). Reuse the shared devices (§3.3) already defined above;
   only new layout/components live here.
   =================================================================== */

.page-hero { padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(2rem, 4vw, 3rem); max-width: 46rem; }
.page-hero__eyebrow { color: var(--muted); margin-bottom: .5rem; }
.page-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: .92;
  font-size: clamp(2.25rem, 5vw, 4rem);
  margin: 0 0 1rem;
}
.page-hero__intro { color: var(--muted); max-width: var(--measure); }

/* ---------- About: gallery grid ---------- */
.about-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 0 var(--gutter);
}
.about-gallery-grid img {
  width: 100%; height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
}
.about-gallery-grid a:first-child, .about-gallery-grid a.is-wide {
  grid-column: span 2; grid-row: span 2;
}
.about-gallery-grid a.is-wide img { aspect-ratio: 1; }

@media (max-width: 760px) {
  .about-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ---------- Shared form styling (Events inquiry, Jobs application) ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  padding: 0 var(--gutter);
  max-width: 42rem;
}
.form-field { display: flex; flex-direction: column; gap: .4rem; }
.form-field--full { grid-column: 1 / -1; }
.form-field label {
  font-weight: 800;
  font-size: var(--step--1);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.form-field input, .form-field select, .form-field textarea {
  font: inherit;
  font-size: var(--step-0);
  padding: .75em .9em;
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}
.form-field textarea { resize: vertical; min-height: 7rem; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: 2px solid var(--action); outline-offset: 1px;
}
.form-submit { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.form-status { font-size: var(--step--1); color: var(--muted); }
.form-note { font-size: var(--step--1); color: var(--muted); grid-column: 1 / -1; }
.form-success {
  grid-column: 1 / -1;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--hairline);
}

@media (max-width: 700px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-field--full { grid-column: 1; }
}

/* ---------- Jobs page: content centered as a block, not left-pinned ----------
   Scoped to .page-jobs (set on <body>) rather than changing .page-hero /
   .section-head / .form-grid globally, since those are shared with Menu,
   Events, and About, which stay left-aligned. Text/labels inside stay
   left-aligned — only the max-width block itself moves to center. */
.page-jobs .page-hero,
.page-jobs .section-head,
.page-jobs .form-grid {
  margin-left: auto;
  margin-right: auto;
}
.page-jobs .section-head { max-width: 46rem; }