/* Deliberately single-theme: this is a dark room. A light mode would be the wrong building.
     Every colour is painted explicitly so the page holds on any host ground. */
  :root {
    --ground:   #0a0908;
    --deeper:   #050504;
    --raised:   #121010;
    --brass:    #b08d57;
    --brass-lt: #d4b483;
    --brass-dk: #6d5735;
    --cream:    #f2eadb;
    --muted:    #8a8177;
    --line:     #241f1a;
    --live:     #5fbf8a;

    --serif: "Bodoni Moda", Didot, "Times New Roman", serif;
    --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;

    --gutter: clamp(20px, 5vw, 64px);
    --maxw: 1280px;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--cream);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }

  .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 3px; }

  /* ── Top bar ─────────────────────────────────────────────── */
  header.bar {
    position: sticky; top: 0; z-index: 50;
    background: rgba(10, 9, 8, .88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .bar-inner {
    /* Full width, not a centred 1440px band. The band put the wordmark 297px from the screen edge
       at 1920 while the copy below started at 377px, so it lined up with neither the corner nor the
       page: a third position that matched nothing. Edge to edge instead, which is unambiguous, and
       which hands the row about 500px it did not have. That surplus goes into the nav's own
       spacing rather than into empty margins.
       The bar is chrome, not reading matter, so it is not bound by the measure that keeps
       paragraphs readable. */
    max-width: none; margin: 0; padding: 14px clamp(18px, 2.4vw, 46px);
    display: flex; align-items: center; gap: 14px;
  }
  .mark {
    font-family: var(--serif); font-weight: 400; font-size: 21px;
    letter-spacing: .08em; color: var(--brass); white-space: nowrap;
    text-decoration: none; line-height: 1;
  }
  .mark .amp { font-style: italic; padding-inline: .1em; }

  /* The bar wordmark is the supplied gold lockup rather than type. Sized by HEIGHT, because the
     logo is roughly 8:1 and setting a width would make its height drift with the viewport and
     unbalance the bar. The artwork is already transparent gold, so nothing recolours it. */
  .mark--logo { display: flex; align-items: center; line-height: 0; }
  .mark--logo img { display: block; width: auto; height: 26px; }
  /* Pushed to the right, sitting just off RESERVE, with all the slack collected on the left of the
     row. auto on the left margin only: that is what turns the leftover width into one clean space
     between the wordmark and the nav rather than splitting it either side of the nav. */
  nav.links { margin-left: auto; margin-right: 0; display: flex; gap: 12px; }
  nav.links a {
    font-size: 11px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
    color: var(--muted); text-decoration: none; transition: color .18s;
    white-space: nowrap;
  }
  nav.links a:hover { color: var(--cream); }

  /* Vertical rules between the nav items. Absolutely positioned in the middle of the gap so the
     separator costs no layout width, and scoped to the horizontal bar: the mobile dropdown
     stacks vertically and already separates its rows with a border.
     The logo gets flex:none here because a flex row will otherwise squash the wordmark
     horizontally (it was rendering 127px wide instead of 215px at this width, distorting it). */
  @media (min-width: 1060px) { /* was 1300px for 11 links; 6 links fit from here (2026-10-09) */
    /* Spends the width the full-bleed bar freed up. Ten gaps, so every pixel here costs ten off the
       row, which is why a plain vw fraction does not work: 1.45vw still left 19px of gap at 1300
       and pushed RESERVE to 8px off the screen edge, through its own gutter. Solved as a line
       through two measured points instead, 13px at 1300 and 26px at 1920, which is
       2.1vw - 14px. Held in a variable so the separator below cannot drift out of step with it. */
    nav.links { --navgap: clamp(13px, calc(2.1vw - 14px), 26px); gap: var(--navgap); }
    /* Never let the flex row squash the wordmark; scale it down proportionally instead. */
    .mark--logo { flex: none; }
    .mark--logo img { height: clamp(20px, 1.5vw, 26px); }
    nav.links a { position: relative; }
    nav.links a + a::before {
      /* Half the gap, so it stays centred however the gap scales. */
      content: ""; position: absolute; top: 50%; left: calc(var(--navgap) / -2);
      width: 1px; height: 11px; margin-top: -6px;
      background: rgba(242, 234, 219, .45);
    }
  }
  .btn-reserve {
    background: var(--brass); color: #120e07; text-decoration: none;
    font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    padding: 11px 20px; margin-left: 12px; flex: none; transition: background .18s;
  }
  .btn-reserve:hover { background: var(--brass-lt); }
  /* ── Mobile menu ─────────────────────────────────────────────
     The nav used to simply vanish under 900px, which left a phone with no route to Private Events,
     Menu or Hours at all. It now folds into a panel instead of disappearing. */
  .menu-toggle {
    display: none; margin-left: auto; background: transparent; border: 1px solid var(--brass-dk);
    padding: 10px 12px; cursor: pointer; flex: none;
  }
  .menu-toggle .bars, .menu-toggle .bars::before, .menu-toggle .bars::after {
    display: block; width: 18px; height: 1.5px; background: var(--brass); transition: transform .2s, opacity .2s;
  }
  .menu-toggle .bars { position: relative; }
  .menu-toggle .bars::before, .menu-toggle .bars::after { content: ""; position: absolute; left: 0; }
  .menu-toggle .bars::before { top: -6px; }
  .menu-toggle .bars::after { top: 6px; }
  .menu-toggle[aria-expanded="true"] .bars { background: transparent; }
  .menu-toggle[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .bars::after { transform: translateY(-6px) rotate(-45deg); }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  @media (max-width: 1059px) {
    .menu-toggle { display: block; }
    .bar-inner { flex-wrap: wrap; gap: 12px; }
    nav.links {
      display: none; order: 3; width: 100%; margin: 0;
      flex-direction: column; gap: 0;
      border-top: 1px solid var(--line);
    }
    nav.links.open { display: flex; }
    nav.links a {
      padding: 15px 2px; font-size: 13px; border-bottom: 1px solid var(--line); color: var(--cream);
    }
    nav.links a:last-child { border-bottom: none; }
    .btn-reserve { margin-left: 0; }
  }
  @media (max-width: 420px) {
    .mark { font-size: 17px; }
    .btn-reserve { font-size: 10.5px; padding: 10px 14px; }
  }

  /* ── Hero ────────────────────────────────────────────────────
     The room photo carries it, but the original site let the crowd eat the headline. Three stacked
     scrims fix that: a top wash so the sticky nav has something to sit on, a heavy bottom ramp into
     the page ground, and an overall darkening so cream type clears the smoke. Sized to about
     three-quarters of the viewport, never 100vh, so the first scroll target is visible on load. */
  .hero {
    position: relative; isolation: isolate;
    min-height: clamp(460px, 74vh, 700px);
    display: flex; align-items: center;
    padding-block: clamp(48px, 9vw, 88px);
    text-align: center;
    background: var(--deeper);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
  }
  /* NOT negative z-index: .hero paints an opaque background, and a child behind that background is
     invisible. Stack the image, the scrim and the content upward from 0 instead. */
  .hero-slides { position: absolute; inset: 0; z-index: 0; }
  .hero-media {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
  }
  /* SCOPED TO .hero-slides ON PURPOSE. The class .hero-media is shared with the single banner
     image in .page-head on reservations, where-to-watch, sundays, private-events, menu and
     mission. When the carousel put `opacity: 0` on the bare .hero-media, those six banners had
     no .is-on to turn them back on, so every one of them went invisible and the pages read as
     having no photograph at all. Only a stacked slide inside .hero-slides should start hidden. */
  .hero-slides .hero-media { opacity: 0; transition: opacity 1.1s ease-in-out; }
  .hero-slides .hero-media.is-on { opacity: 1; }

  /* Per-slide focal points. A single object-position for eight different photographs is a
     compromise that suits none of them: at the shared 42% the VICTORY & VICE sign in
     g-room-lg was sliced through the middle of its letters, and hero-td lost the TOUCHDOWN
     banner off the bottom edge. Each value below was read off the actual crop at the real band
     ratio, not guessed.

     The long selector is deliberate. The <=700px block resets object-position to `center`, so
     .hero-media[src=...] at (0,2,0) would lose to that rule's (0,3,0) on a phone regardless of
     source order. Matching the same three classes plus the attribute wins in both places.

     Y only bites where the photo overflows vertically. On a phone the band is narrower than the
     3:2 slides, so those crop horizontally and these values are inert there; hero-crowd is the
     exception, being the one portrait slide, and it does use its value on both. */
  .hero .hero-slides .hero-media[src="hero-crowd.jpg"]          { object-position: center 38%; }
  .hero .hero-slides .hero-media[src="nightlife-night.jpg"]     { object-position: center 32%; }
  .hero .hero-slides .hero-media[src="hero-roomfull.jpg"]       { object-position: center 36%; }
  .hero .hero-slides .hero-media[src="g-room-lg.jpg"]           { object-position: center 18%; }
  .hero .hero-slides .hero-media[src="hero-td.jpg"]             { object-position: center 56%; }
  .hero .hero-slides .hero-media[src="nightlife-sparklers.jpg"] { object-position: center 28%; }
  .hero-scrim {
    position: absolute; inset: 0; z-index: 1;
    /* Darken behind the TYPE, not across the whole photograph. Two earlier passes washed the room
       out completely by laying a flat 50-75% over everything. The soft ellipse sits under the
       headline only, so the smoke, the screen and the crowd at the edges stay visible. */
    background:
      /* Matched to the phone, which reads clearer for a reason: its scrim is about half the
         strength of the old desktop one at every stop. The foot stays a little heavier than
         mobile's .82 because the desktop hero is far wider, so its bottom edge has to carry the
         join into the page beneath it across 1900px rather than 375px. */
      /* The dark panel behind the wordmark is gone (owner, 2026-09-27: "get rid of the box ...
         so it is easier to see the photos"), so this gradient is the ONLY thing keeping the type
         readable — and it now has to do it across five different photographs, not one. A radial
         pool sits under the type where the panel used to be, strong enough to hold brass-on-white
         but soft-edged so the room still reads at the corners. The linear pass underneath is the
         original, carrying the join into the page below. */
      /* Tuned by MEASUREMENT, not by eye. With the panel gone I sampled each slide in the band
         where the type sits and computed the WCAG ratio for the brass: room.avif — the brightest,
         and the first slide anyone sees — came out at 2.64:1, well under the 4.5 floor for small
         text. These stops lift the worst case over 4.5 while staying a soft ellipse, so the room
         still reads at the corners and the photograph is not flattened the way a flat overlay
         would flatten it. */
      radial-gradient(ellipse 80% 64% at 50% 46%, rgba(4,4,3,.86) 0%, rgba(4,4,3,.72) 44%, rgba(4,4,3,.26) 74%, rgba(4,4,3,0) 100%),
      linear-gradient(to bottom, rgba(5,5,4,.34) 0%, rgba(5,5,4,.10) 32%, rgba(5,5,4,.16) 66%, rgba(9,8,7,.58) 88%, rgba(10,9,8,.92) 100%);
  }
  .hero .wrap { position: relative; z-index: 2; width: 100%; }
  .hero .eyebrow {
    /* CHICAGO is 11px, so WCAG treats it as small text and wants 4.5:1. Brass cannot reach that
       over the brighter slides without a scrim heavy enough to kill the photograph, so this one
       line goes cream. The tagline below stays brass: at 16px/600 with wide tracking it counts
       as large text, where 3:1 applies and brass clears it. */
    font-size: 11px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase;
    /* Sits under the wordmark now, so the space goes above it, and it is deliberately tighter
       than the gap below so CHICAGO groups with the wordmark rather than with the tagline. */
    color: var(--cream); margin: clamp(16px, 3vw, 24px) 0 0;
    text-shadow: 0 1px 14px rgba(0,0,0,.95);
  }
  .hero h1 {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(42px, 11vw, 116px); line-height: .94; letter-spacing: .01em;
    margin: 0; color: var(--cream); text-wrap: balance;
    text-shadow: 0 2px 40px rgba(0,0,0,.9);
  }
  .hero h1 .amp { font-style: italic; color: var(--brass); }
  .hero .tag {
    font-size: clamp(12px, 2.4vw, 16px); font-weight: 600;
    /* brass-lt, not brass. At its 16px ceiling this line is 600 weight, which WCAG still counts
       as small text (large starts at 24px, or 18.66px when bold), so it needs 4.5:1 and not 3:1.
       Measured against the composited scrim across all eight carousel slides, plain brass ran
       3.80 to 4.39 and failed every one of them; brass-lt runs 5.96 to 6.89 and clears them all,
       while keeping the line gold rather than turning it cream like CHICAGO above. */
    letter-spacing: .42em; text-transform: uppercase; color: var(--brass-lt);
    /* Wider than the gap above CHICAGO: two brass uppercase lines in a row read as one block
       unless the second is clearly pushed away from the first. */
    margin: clamp(26px, 4.6vw, 38px) 0 0;
    text-shadow: 0 1px 14px rgba(0,0,0,.95);
  }
  .rule {
    width: min(160px, 40vw); height: 1px; background: var(--brass-dk);
    margin: clamp(26px, 5vw, 40px) auto 0;
  }
  .hero-cta { margin-top: clamp(26px, 5vw, 38px); display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

  .btn {
    display: inline-block; text-decoration: none; text-align: center;
    font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    padding: 14px 26px; transition: background .18s, color .18s, border-color .18s;
  }
  .btn-solid { background: var(--brass); color: #120e07; }
  .btn-solid:hover { background: var(--brass-lt); }
  .btn-ghost { border: 1px solid var(--brass-dk); color: var(--brass); }
  .btn-ghost:hover { border-color: var(--brass); color: var(--brass-lt); }

  /* ── Marquee (kept from the original: it is the best thing on the site) ── */
  .marquee {
    overflow: hidden; border-bottom: 1px solid var(--line);
    background: var(--deeper); padding-block: 14px;
  }
  .marquee-track {
    display: flex; gap: 48px; width: max-content;
    animation: slide 34s linear infinite;
    font-family: var(--serif); font-style: italic; font-size: 14px;
    letter-spacing: .1em; color: var(--brass-dk); white-space: nowrap;
  }
  @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* ── Sections ────────────────────────────────────────────── */
  section { padding-block: clamp(52px, 9vw, 92px); border-bottom: 1px solid var(--line); }
  .sec-head { margin-bottom: clamp(28px, 5vw, 44px); }
  /* On a wide screen a section head was a narrow left column with a large void beside it: the
     heading is short and the lede is capped at 46ch for readability, so together they used under
     half the width. Setting them side by side fills that space with composition rather than
     emptiness, and keeps the lede's measure intact.

     1260px, not 1100: measured across the range, the band from 1100 to 1250 was the worst of both
     worlds. The heading started breaking onto two lines again and the lede was squeezed to 231px,
     about 26 uppercase characters a line. Below the breakpoint they stack, which is the treatment
     that reads well on a phone anyway. */
  @media (min-width: 1260px) {
    .sec-head:has(.lede) {
      display: grid;
      /* max-content on the heading column, not a fraction. A fixed fraction gave every heading the
         same 573px whatever it said, which was too narrow for "Watch It Here" (it broke onto two
         lines with 600px of empty room beside it) and far too wide for "The Nights" (the lede was
         pushed 400px clear of the heading it belongs to). Sizing the column to the words means the
         lede always sits the same distance from the end of the heading. minmax(0, ...) so it can
         still shrink and wrap rather than push the page sideways at the bottom of the range. */
      /* fit-content(58%), which is exactly min(max-content, max(min-content, 58%)):
         the heading column is as wide as the heading's own words, capped at 64% of the row.
         64% is measured, not picked: the widest heading that still wants one line is "On Our
         Screens" at 60% of the row, and the only heading past the cap is "Turntables &
         Touchdowns", which wants 102% and has to break wherever the cap sits.

         Both halves matter. Without the first, a fixed fraction gave every heading the same width
         whatever it said, too narrow for "Watch It Here" (it broke in two with 600px of empty room
         beside it) and far too wide for "The Nights" (the lede was pushed 400px clear of the
         heading it belongs to). Without the cap, "Turntables & Touchdowns" wants 898px and leaves
         the lede a 200px ribbon.

         It has to be fit-content() and not min(max-content, 58%): min() takes lengths, not
         keywords, so that version was invalid CSS and Chrome silently dropped the whole
         declaration, falling back to implicit auto columns. Nor minmax(0, fit-content(58%)) with
         a 1fr sibling: the fr track then wins on max-content and squeezes the heading below the
         width of its own words, which is how "Pick Your Play" kept breaking with room to spare. */
      grid-template-columns: fit-content(64%) minmax(0, 1fr);
      column-gap: clamp(30px, 3.4vw, 52px);
      align-items: start;
    }
    .sec-head:has(.lede) .kicker,
    .sec-head:has(.lede) .sec-num { grid-area: 1 / 1; }
    .sec-head:has(.lede) h2 { grid-area: 2 / 1; }
    .sec-head:has(.lede) .lede {
      /* Row 2, level with the HEADING. Spanning both rows and bottom-aligning put the lede's first
         line ABOVE the heading's cap, next to the eyebrow, so it read as floating loose of the
         thing it introduces. The small top offset lands its first line on the heading's cap
         rather than on the heading's line box, which sits higher. */
      grid-area: 2 / 2;
      align-self: start;
      margin-top: 12px;
    }
  }
  /* A named eyebrow for sections that have no number. Same weight in the hierarchy as .sec-num,
     which is why it borrows its colour and tracking. .sunday overrides it further down. */
  .kicker {
    font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
    color: var(--brass-dk); margin: 0 0 12px;
  }
  .sec-num {
    font-family: var(--serif); font-size: 12px; color: var(--brass-dk);
    letter-spacing: .2em; display: block; margin-bottom: 12px;
  }
  h2 {
    font-family: var(--sans); font-weight: 800;
    font-size: clamp(34px, 8.5vw, 76px); line-height: .96; letter-spacing: -.025em;
    text-transform: uppercase; color: var(--brass); margin: 0; text-wrap: balance;
  }
  .lede {
    font-size: clamp(15px, 2.4vw, 20px); font-weight: 500; line-height: 1.45;
    text-transform: uppercase; letter-spacing: .005em;
    margin: 18px 0 0; max-width: 46ch; color: var(--cream);
    /* balance, because these run two to four lines and the browser can even them out. Left to
       itself the rag was 40%: two full lines and then a stub. */
    text-wrap: balance;
  }

  /* ── Booking cards: live products lead, upcoming ones stay quiet ── */
  .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  @media (max-width: 760px) { .cards { grid-template-columns: 1fr; } }

  .card {
    border: 1px solid var(--line); background: var(--raised);
    padding: clamp(22px, 3.5vw, 34px);
    display: flex; flex-direction: column; gap: 14px;
  }
  .card.live { border-color: var(--brass-dk); }
  .card-top { display: flex; align-items: center; gap: 10px; }
  .card h3 {
    font-size: clamp(19px, 3vw, 26px); font-weight: 700; letter-spacing: -.01em;
    text-transform: uppercase; margin: 0; color: var(--cream);
  }
  .chip {
    font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    padding: 4px 8px; border: 1px solid currentColor; white-space: nowrap;
  }
  .chip.now { color: var(--live); }
  .chip.soon { color: var(--muted); }
  .card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); text-transform: uppercase; letter-spacing: .01em; text-wrap: pretty; }
  .card .btn { margin-top: auto; align-self: flex-start; }
  .btn-dead { border: 1px solid var(--line); color: var(--muted); cursor: default; }

  /* minmax(0, 1fr), not 1fr: a bare 1fr track will not shrink below its own content, so at tablet
     widths these three demanded 895px inside a 759px grid and pushed the page sideways. It stacks
     earlier now too, because three of these were never readable at 860px anyway. */
  .soon-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
  @media (max-width: 760px) { .soon-row { grid-template-columns: 1fr; } }
  .soon-row .card { background: transparent; }

  /* ── Product detail ──────────────────────────────────────── */
  .product { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 56px); align-items: start; }
  @media (max-width: 860px) { .product { grid-template-columns: 1fr; } }
  .product + .product { margin-top: clamp(44px, 7vw, 76px); padding-top: clamp(44px, 7vw, 76px); border-top: 1px solid var(--line); }
  .product h3 {
    font-family: var(--sans); font-weight: 800;
    font-size: clamp(28px, 6vw, 54px); line-height: .98; letter-spacing: -.025em;
    text-transform: uppercase; color: var(--brass); margin: 0 0 16px;
  }
  .product p { margin: 0 0 20px; font-size: 14.5px; line-height: 1.65; color: var(--cream); text-transform: uppercase; }

  /* Photography goes here once it exists — see the note in the footer. */
  .plate {
    aspect-ratio: 4 / 3; border: 1px solid var(--line);
    background:
      radial-gradient(90% 70% at 30% 20%, rgba(176,141,87,.16) 0%, rgba(176,141,87,0) 70%),
      linear-gradient(160deg, #161311 0%, #0b0a09 100%);
    display: flex; align-items: flex-end; padding: 18px;
    max-width: 100%;
  }
  .plate span {
    font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-dk);
  }
  /* A slot with real photography in it. */
  .plate--photo { padding: 0; border-color: var(--brass-dk); background: var(--deeper); overflow: hidden; }
  .plate--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* Portrait sources in a 4:3 plate get cropped to a band; these two need that band moved so the
     subject is inside it rather than above or below it. */
  .plate--photo img[src="ninety-table.jpg"] { object-position: center bottom; }

  dl.details { margin: 0; border-top: 1px solid var(--line); }
  dl.details > div {
    display: grid; grid-template-columns: 150px 1fr; gap: 6px 18px;
    padding: 11px 0; border-bottom: 1px solid var(--line);
  }
  @media (max-width: 520px) { dl.details > div { grid-template-columns: 1fr; } }
  dl.details dt {
    font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brass);
  }
  dl.details dd { margin: 0; font-size: 13.5px; color: var(--cream); text-transform: uppercase; line-height: 1.5; text-wrap: pretty; }

  /* ── Sunday feature band ─────────────────────────────────── */
  .sunday {
    background:
      radial-gradient(100% 120% at 100% 0%, rgba(176,141,87,.15) 0%, rgba(176,141,87,0) 60%),
      var(--deeper);
  }
  .sunday .kicker {
    font-size: 11px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
    color: var(--brass); margin: 0 0 14px;
  }
  .sunday h2 { font-size: clamp(40px, 12vw, 104px); color: var(--cream); }
  .sunday .body {
    margin-top: clamp(28px, 4vw, 44px);
    display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
    gap: clamp(24px, 5vw, 56px); align-items: center;
  }
  @media (max-width: 820px) { .sunday .body { grid-template-columns: 1fr; } }

  /* The jacket shot carries the section. Brass hairline + a soft bleed so it sits in the room
     rather than on top of it. */
  .sunday-shot { position: relative; margin: 0; }
  .sunday-shot img {
    display: block; width: 100%; max-width: 100%; height: auto;
    border: 1px solid var(--brass-dk);
  }
  .sunday-shot::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    box-shadow: inset 0 -80px 90px -40px rgba(5,5,4,.85);
  }
  .sunday-shot figcaption {
    margin-top: 10px; font-size: 10px; font-weight: 600; letter-spacing: .2em;
    text-transform: uppercase; color: var(--brass-dk);
  }
  .sunday p {
    margin: 0 0 14px; font-size: 14.5px; line-height: 1.65;
    text-transform: uppercase; color: var(--cream);
    /* Capped measure. These ran the full 592px of the column, which is around 66 uppercase
       characters a line: caps have no ascender/descender rhythm to help the eye find the next
       line, so they want a shorter measure than the same copy in sentence case, not a longer one. */
    max-width: 56ch;
    text-wrap: pretty;
  }
  .sunday p.dim { color: var(--muted); }

  /* ── Hours: a live panel, not a list. The clock is this room's whole identity. ── */
  .hours-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 5vw, 56px); align-items: start; }
  @media (max-width: 860px) { .hours-grid { grid-template-columns: 1fr; } }

  .status {
    display: inline-flex; align-items: center; gap: 10px;
    border: 1px solid var(--brass-dk); padding: 12px 18px; margin-bottom: 22px;
  }
  .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
  .dot.on { background: var(--live); animation: pulse 2.4s ease-in-out infinite; }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
  .status-text { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
  .status-sub { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

  table.hours { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  table.hours td { padding: 10px 0; border-bottom: 1px solid var(--line); text-transform: uppercase; letter-spacing: .05em; }
  table.hours td.day { font-weight: 600; color: var(--muted); }
  table.hours td.time { text-align: right; color: var(--cream); font-variant-numeric: tabular-nums; }
  table.hours tr.today td { color: var(--brass); }
  table.hours tr.today td.day::after { content: " ·  TODAY"; font-size: 10px; letter-spacing: .14em; }

  .info-block + .info-block { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); }
  .info-label { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin: 0 0 8px; }
  .info-block p { margin: 0; font-size: 14px; color: var(--cream); text-transform: uppercase; line-height: 1.6; }
  .todo { color: var(--muted); border: 1px dashed var(--brass-dk); padding: 8px 12px; display: inline-block; font-size: 12px; letter-spacing: .1em; }
  .phone {
    font-size: clamp(19px, 3vw, 24px); font-weight: 700; letter-spacing: .02em;
    color: var(--brass); text-decoration: none; font-variant-numeric: tabular-nums;
    transition: color .18s;
  }
  .phone:hover { color: var(--brass-lt); }
  .addr { font-size: 15px; line-height: 1.7; letter-spacing: .04em; }
  .maplink {
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--brass); text-decoration: none; border-bottom: 1px solid var(--brass-dk);
    padding-bottom: 2px; transition: color .18s, border-color .18s;
  }
  .maplink:hover { color: var(--brass-lt); border-color: var(--brass); }
  .handle {
    font-size: clamp(14px, 2.2vw, 17px); font-weight: 600; letter-spacing: .03em;
    color: var(--brass); text-decoration: none; word-break: break-word;
    transition: color .18s;
  }
  .handle:hover { color: var(--brass-lt); }

  /* ── Private events enquiry ──────────────────────────────────
     Form left, reassurance right. Guest count and date are the two fields a venue actually needs to
     answer yes or no, so they are required and sit above the fold of the form; everything else is
     optional, because a long form is the fastest way to lose an enquiry. */
  .events-grid {
    display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px); align-items: start;
  }
  @media (max-width: 880px) { .events-grid { grid-template-columns: 1fr; } }

  /* position:relative is load-bearing: it contains the honeypot below. Without a positioned
     ancestor that absolutely-positioned input resolves against the initial containing block and
     stretches the document's scroll width, which put a horizontal scrollbar on every phone that
     opened the Bears form (375px viewport, 391px scrollWidth). The events page happened not to
     show it because of its own layout. */
  .ev-form { position: relative; border: 1px solid var(--brass-dk); background: var(--raised); padding: clamp(20px, 3.5vw, 34px); }
  .hp { position: absolute; left: -9999px; }

  .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  @media (max-width: 560px) { .fields { grid-template-columns: 1fr; } }
  .f { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
  .f-wide, .f-check { grid-column: 1 / -1; }

  .f label {
    font-size: 10.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--brass);
  }
  .f label span { color: var(--muted); }

  .ev-form input[type="text"], .ev-form input[type="email"], .ev-form input[type="tel"],
  .ev-form input[type="date"], .ev-form select, .ev-form textarea {
    width: 100%;
    /* A native select refuses to shrink below the width of its longest option unless told it may.
       The Bears fixture list has options like "Sun Sep 20 · Bears vs Minnesota Vikings · 12:00 PM
       CT", which pushed 8px of horizontal scroll onto a 320px screen. */
    min-width: 0;
    max-width: 100%; background: var(--deeper); border: 1px solid var(--line);
    color: var(--cream); font-family: var(--sans); font-size: 16px;
    padding: 11px 13px; border-radius: 0; transition: border-color .18s;
  }
  .ev-form textarea { resize: vertical; line-height: 1.5; }
  .ev-form input:focus, .ev-form select:focus, .ev-form textarea:focus {
    outline: none; border-color: var(--brass);
  }
  .ev-form ::placeholder { color: #5e564f; }
  /* Native date and select controls render light-on-light without this. */
  .ev-form input[type="date"] { color-scheme: dark; }
  .ev-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--brass) 50%), linear-gradient(135deg, var(--brass) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; }

  label.check { flex-direction: row; align-items: center; gap: 10px; display: flex; cursor: pointer;
    font-size: 13px; letter-spacing: .04em; text-transform: none; color: var(--cream); font-weight: 500; }
  label.check input { width: 17px; height: 17px; accent-color: var(--brass); flex: none; }

  .ev-submit { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
  .ev-form button.btn { border: none; cursor: pointer; font-family: var(--sans); }
  .ev-fine { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); flex: 1 1 260px; min-width: 0; }
  .ev-msg { margin: 18px 0 0; padding: 12px 15px; border: 1px solid var(--brass-dk);
    font-size: 13.5px; line-height: 1.55; color: var(--brass-lt); }

  .ev-side .ev-block + .ev-block { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
  .ev-side p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--cream); }
  .ev-side .info-label { margin-bottom: 8px; }

  /* Menu band — image on the right, against the image-left rhythm of the product rows above. */
  .menu-band {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(24px, 5vw, 60px); align-items: center;
  }
  @media (max-width: 820px) { .menu-band { grid-template-columns: 1fr; } }
  .menu-shot { margin: 0; position: relative; }
  .menu-shot img {
    display: block; width: 100%; max-width: 100%; height: auto;
    aspect-ratio: 3 / 2; object-fit: cover;
    border: 1px solid var(--brass-dk);
  }

  /* ── Food block ────────────────────────────────────────────────────────
     Sits under the menu band, inside #menu. The band is the pitch; this is the evidence.

     One wide hero (the whole table, which is the argument for the room) then a grid of single
     dishes. The two landscape shots span two columns so they are not centre-cropped into
     squares — a sandwich photographed side-on loses the point when you crop its ends off.

     Borders and the desaturate-then-lift-on-hover are lifted from .gallery-grid on purpose, so
     this reads as the same site rather than a second gallery bolted on. */
  .food-block { margin-top: clamp(42px, 6vw, 72px); }
  .food-head {
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--brass); margin: 0 0 18px; font-weight: 600;
  }
  .food-block figure { margin: 0; overflow: hidden; border: 1px solid var(--brass-dk); background: var(--deeper); }
  .food-block img {
    /* NO height:100% here, unlike .gallery-grid. Those tiles are sized by grid-auto-rows and
       carry no caption; these are sized by the image itself and each one has a dish name under
       it. With height:100% the image ate the whole figure, and overflow:hidden then clipped
       every caption clean off — all seven dish names were invisible. aspect-ratio does the
       sizing, and the caption gets the space it needs. */
    /* height:auto is load-bearing. Every <img> here carries width/height ATTRIBUTES so the
       browser can reserve space and avoid layout shift, and with no CSS height those attributes
       win: the tiles rendered 277x1200 instead of 277x346 and each one filled the screen.
       height:auto lets aspect-ratio below do the sizing while the attributes still prevent CLS. */
    display: block; width: 100%; height: auto; object-fit: cover;
    filter: saturate(.94) contrast(1.02);
    transition: transform .5s ease, filter .5s ease;
  }
  .food-block figcaption {
    padding: 10px 12px; font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--line);
  }
  .food-hero img { aspect-ratio: 3 / 2; }
  .food-grid {
    margin-top: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  }
  .food-grid img { aspect-ratio: 4 / 5; }
  .food-grid .food-wide { grid-column: span 2; }
  .food-grid .food-wide img { aspect-ratio: 3 / 2; }

  @media (hover: hover) {
    .food-block figure:hover img { transform: scale(1.04); filter: saturate(1.06) contrast(1.02); }
  }
  @media (prefers-reduced-motion: reduce) {
    .food-block img { transition: none; }
    .food-block figure:hover img { transform: none; }
  }
  /* Two up on a phone. The wide tiles go full width rather than staying 2-of-2, so the sandwich
     and the spread keep their shape at the size they are actually looked at. */
  @media (max-width: 820px) {
    .food-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .food-grid .food-wide { grid-column: 1 / -1; }
  }

  
/* Carousel dots. Deliberately quiet: the hero already carries a wordmark, two lines of type, a
   rule and three buttons, so these sit at the foot and stay out of the way. They are real
   buttons, so the slideshow is operable by keyboard and not only by waiting. */
.hero-dots {
  display: flex; gap: 9px; justify-content: center;
  margin-top: clamp(22px, 4vw, 32px);
}
.hero-dots button {
  width: 8px; height: 8px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(214,190,150,.55); background: rgba(0,0,0,.35);
  transition: background .25s, border-color .25s, transform .25s;
}
.hero-dots button[aria-selected="true"] { background: var(--brass); border-color: var(--brass); transform: scale(1.15); }
@media (hover: hover) { .hero-dots button:hover { border-color: var(--brass-lt); } }
@media (prefers-reduced-motion: reduce) {
  .hero-media { transition: none; }
  .hero-dots button { transition: none; }
}

footer.foot { padding-block: clamp(40px, 6vw, 64px); text-align: center; }
  footer.foot .mark { font-size: 26px; }
  footer.foot p { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 16px 0 0; }

  @media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
    .dot.on { animation: none; }
    * { transition: none !important; }
  }


/* ── Secondary page header ───────────────────────────────────
   Shorter than the homepage hero: a subhead, not a front door. Reuses the hero image and scrim so
   the two pages read as one site. */
.page-head {
  position: relative; isolation: isolate; overflow: hidden;
  /* Was clamp(260px, 38vh, 380px), which made this a 5.4:1 strip at desktop width. Combined
     with the old scrim below, every photograph that was not itself a light source collapsed
     into brown mush, and six pages looked like they had no picture even once the images were
     actually rendering. Taller band, so the photograph has somewhere to be. */
  min-height: clamp(300px, 46vh, 460px);
  display: flex; align-items: center;
  padding-block: clamp(36px, 6vw, 60px);
  text-align: center;
  background: var(--deeper);
  border-bottom: 1px solid var(--line);
}
.page-head .wrap { position: relative; z-index: 2; width: 100%; }
.page-head .hero-media { object-position: center 38%; }
.page-title {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(34px, 8vw, 68px); line-height: .98; letter-spacing: -.025em;
  text-transform: uppercase; margin: 0; color: var(--cream);
  text-shadow: 0 2px 32px rgba(0,0,0,.9); text-wrap: balance;
}
.page-head .tag { margin-top: 16px; }
.back { text-decoration: none; color: var(--brass); transition: color .18s; }
.back:hover { color: var(--brass-lt); }
/* The events page has no hero, so its first section should not double up on padding. */
.page-head + section { padding-top: clamp(40px, 6vw, 64px); }
footer.foot .mark { text-decoration: none; }

/* Booking call to action inside a product block. */
.book-cta {
  margin: 24px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
.book-note {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}

/* A portrait source in a 4:3 frame: hold the crop on the middle of the image, where the glasses
   are, rather than defaulting to centre and losing them to the top edge. */
/* nightlife-sparklers.jpg is 4:3, the plate's own ratio, so it needs no reframing.
   JPEG rather than AVIF deliberately: macOS `sips -s format avif` writes a file whose header
   parses (Chrome reports the right dimensions) but whose pixels decode to flat grey. The other
   .avif files here were not made with sips. */

/* Portrait source, 4:3 frame. Bias low so the crop keeps the warm bar top and drops most of the
   teal ceiling light, which is the one part of this frame that fights the brass palette. */

/* "Chicago Sundays Are Back" — the announcement the Sunday section exists to make, so it leads the
   section rather than sitting inside the body copy. Sized between the kicker and the headline, with
   a brass rule under it, so it reads as a banner without competing with ANY GIVEN SUNDAY below. */
.return-line {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(15px, 2.6vw, 21px); letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass-lt); margin: 0 0 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--brass-dk); display: inline-block;
}

/* ── Roster sign-up ──────────────────────────────────────────
   A prompt like this earns its keep or drives people off, and the difference is entirely in the
   restraint: it waits, it remembers being dismissed, and it is trivially easy to close. */
.roster { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.roster-backdrop { position: absolute; inset: 0; background: rgba(4, 4, 3, .82); backdrop-filter: blur(3px); }
.roster-card {
  position: relative; width: 100%; max-width: 430px;
  background: var(--raised); border: 1px solid var(--brass-dk);
  padding: clamp(26px, 5vw, 38px); text-align: center;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.9);
  animation: roster-in .3s cubic-bezier(.2,.9,.3,1);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
@keyframes roster-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.roster-x {
  position: absolute; top: 10px; right: 12px; background: transparent; border: none;
  color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
}
.roster-x:hover { color: var(--cream); }
.roster-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
  color: var(--brass); margin: 0 0 12px;
}
.roster-title {
  font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 7vw, 42px);
  line-height: 1.05; margin: 0 0 14px; color: var(--cream); text-transform: uppercase;
}
.roster-copy { margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.roster-form { display: flex; flex-direction: column; gap: 10px; }
/* Covers text, email and tel. This selector used to name only [type="email"], which left the
   phone box rendering as an unstyled browser default on a dark card. */
.roster-form input[type="text"],
.roster-form input[type="email"],
.roster-form input[type="tel"] {
  width: 100%; background: var(--deeper); border: 1px solid var(--line); color: var(--cream);
  font-family: var(--sans); font-size: 16px; padding: 12px 14px; text-align: center;
  transition: border-color .18s;
}
.roster-form input[type="text"]:focus,
.roster-form input[type="email"]:focus,
.roster-form input[type="tel"]:focus { outline: none; border-color: var(--brass); }
.roster-form input::placeholder { color: #5e564f; }
.roster-form button { border: none; cursor: pointer; font-family: var(--sans); width: 100%; }
/* Off until the form would actually go through. Dimmed rather than hidden so the button stays a
   visible target and the state reads as "not yet" instead of "missing". */
.roster-form button[type="submit"]:disabled {
  background: var(--brass-dk); color: #6b6055; cursor: not-allowed; opacity: .75;
}
.roster-form button[type="submit"]:disabled:hover { background: var(--brass-dk); }
.roster-skip {
  margin-top: 16px; background: transparent; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 12px; letter-spacing: .06em; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.roster-skip:hover { color: var(--cream); }
.roster-done { margin: 18px 0 0; font-size: 14px; color: var(--brass-lt); }
@media (prefers-reduced-motion: reduce) { .roster-card { animation: none; } }

@media (max-width: 480px) {
  .roster { padding: 14px; align-items: flex-end; }      /* sheet-style, easier to reach one-handed */
  .roster-card { padding: 26px 20px 22px; }
  .roster-skip { padding: 10px; }                         /* larger tap target */
}

/* Roster: email and/or SMS */
.roster-or {
  margin: 2px 0; text-align: center; position: relative;
  font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.roster-or::before, .roster-or::after {
  content: ""; position: absolute; top: 50%; width: calc(50% - 46px); height: 1px; background: var(--line);
}
.roster-or::before { left: 0; } .roster-or::after { right: 0; }
.roster-consent {
  display: flex; gap: 10px; align-items: flex-start; text-align: left;
  margin: 4px 0 2px; cursor: pointer;
  font-size: 11px; line-height: 1.5; color: var(--muted);
}
.roster-consent input { width: 17px; height: 17px; accent-color: var(--brass); flex: none; margin-top: 1px; }
.roster-error { margin: 2px 0 0; font-size: 12.5px; color: #ff6b63; }

/* Birthday. The only required field, so it carries a visible label instead of a placeholder: a
   date box shows its own mm/dd/yyyy hint and has nowhere to put one. color-scheme: dark is what
   keeps the native date text and the calendar icon legible on the dark card; without it the
   browser paints them for a white background and they disappear. */
.roster-bday { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.roster-bday > span {
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.roster-bday > span em { font-style: normal; letter-spacing: .1em; color: var(--brass); }
.roster-form input[type="date"] {
  width: 100%; background: var(--deeper); border: 1px solid var(--line); color: var(--cream);
  font-family: var(--sans); font-size: 16px; padding: 11px 14px; text-align: center;
  color-scheme: dark; transition: border-color .18s;
}
.roster-form input[type="date"]:focus { outline: none; border-color: var(--brass); }
/* text-align does not reach the segments inside a date field, so the mm/dd/yyyy would sit hard
   left while every other box in the card centres its text. These two push it back to the middle
   in the engines that expose the inner parts, and are simply ignored elsewhere. */
.roster-form input[type="date"]::-webkit-datetime-edit { flex: 1; text-align: center; }
.roster-form input[type="date"]::-webkit-date-and-time-value { text-align: center; }

.foot-roster { margin-top: 14px !important; }
.foot-roster a {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass); text-decoration: none;
  border-bottom: 1px solid var(--brass-dk); padding-bottom: 3px; transition: color .18s;
}
.foot-roster a:hover { color: var(--brass-lt); }

/* Hero wordmark sits on a stated panel rather than a gradient (option C). Brass hairlines top and
   bottom tie it to the rules used elsewhere; the photo stays bright either side of it. */
.hero .wrap {
  /* NO panel. It used to carry a .78 black fill, a blur and two brass rules, which is what the
     owner meant by "the box". Removing it hands legibility entirely to the scrim above and the
     per-element shadows below — so if either is weakened, the type goes with it. The padding
     stays: it is what keeps the wordmark off the edges on a phone. */
  max-width: 800px; margin: 0 auto;
  padding-block: clamp(22px, 4vw, 40px);
  padding-inline: clamp(20px, 4vw, 40px);
}
/* ── The hero wordmark ───────────────────────────────────────
   The real brand asset now, not type set to look like it. The h1 still exists and the alt text
   still reads "Victory & Vice", so the document outline and the search result are unchanged.

   SIZED BY WIDTH, deliberately. The panel is width:fit-content, which means the panel is sized BY
   this element: every spacing decision below it was tuned against a wordmark 579px wide at the
   desktop cap. The old setting measured 579px at its 70px cap, a width-to-font-size ratio of
   8.271, so these clamps are simply the old font-size clamps multiplied through by that. The
   panel therefore keeps the exact footprint it was tuned at, and nothing under it moves. */
.hero h1 { line-height: 0; }
.hero h1 .wordmark {
  display: block;
  /* display:block makes this a block box, which IGNORES the text-align:center it inherits, so
     without the auto margins it pins to the left edge. Invisible on desktop, where the panel is
     fit-content and hugs the mark exactly, but on a phone the panel has a max-width and the slack
     all lands on the right: measured 70px off-centre at 360px. */
  margin-inline: auto;
  width: clamp(198px, 57.9vw, 579px);
  height: auto;
  /* Carries over the shadow the type had, so the mark still lifts off the photograph rather than
     sitting flat on it. drop-shadow follows the glyph edges; box-shadow would draw a rectangle. */
  filter: drop-shadow(0 2px 40px rgba(0,0,0,.9));
}
/* These were set to none because the panel behind them did the work. With the panel gone they
   need their own contrast again — brass on a bright screen or a white jersey is otherwise
   unreadable. Two stacked shadows: a tight one for edge definition, a wide one for the halo. */
.hero .eyebrow, .hero .tag {
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 2px 22px rgba(0,0,0,.85);
}
.hero .rule { box-shadow: 0 1px 10px rgba(0,0,0,.8); }
.hero .btn-ghost {
  /* The ghost buttons were outlined against a flat dark panel. Over photography they need a
     backing of their own or the label disappears against a bright slide. */
  background: rgba(6,5,4,.42);
  backdrop-filter: blur(3px);
}
@media (max-width: 560px) {
  .hero .wrap { margin-inline: 4px; }
}

/* ── Hero on a phone ─────────────────────────────────────────
   Same composition as desktop: the panel sits ON the photo, centred. The only thing that changes is
   the hero's HEIGHT. A 74vh hero on a 390px screen is a tall narrow box, and object-fit:cover throws
   away about half the picture's width to fill it. So the hero is sized to the photo's own 1683x931
   ratio instead, which means the whole frame shows with no crop, and the panel's contents are
   tightened just enough to sit inside that band. */
@media (max-width: 700px) {
  .hero {
    /* The photo's natural band at this width, so cover has nothing to crop. */
    /* Owner, 2026-09-27: "make sure on mobile the pictures are clearly visible, if needed make
       the wording smaller."

       The old height was exactly room.avif's aspect ratio at screen width — 216px at 390px wide.
       The type stack filled ~210px of that, so the photograph was reduced to slivers around the
       wording. Now the band is taller than the photo's natural ratio and the type below is
       tightened, which leaves real picture visible above and below the wordmark. Capped against
       the viewport so it can never eat a whole phone screen. */
    /* Owner, 2026-09-27 (second pass): "I wanted them wider on mobile, as in phone."
       At 390px the band was 401px tall, so its aspect was 0.97:1 against slides that are 3:2.
       cover then scaled each photo by HEIGHT and threw away 35% of its width, which is what
       made the pictures read as narrow. Sizing the band off the slides' own 3:2 ratio instead
       of room.avif's 1.81:1 brings the visible width back to ~83% while still leaving real
       photograph above and below the wording. */
    min-height: min(64vh, calc(100vw * 1000 / 1500 + 80px));
    padding-block: 0;
    padding-inline: 10px;
    align-items: center;
    justify-content: center;
  }
  /* .hero > .hero-media stopped matching when the slides moved inside .hero-slides for the
     carousel, which silently dropped the mobile centring and left every slide on the desktop
     42% crop. Match both shapes. */
  .hero > .hero-media,
  .hero .hero-slides .hero-media {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
  }
  .hero > .hero-scrim {
    position: absolute; inset: 0; top: 0; height: 100%;
    /* Much lighter than the desktop scrim, on purpose. The mobile wordmark sits on its OWN
       panel (rgba(5,5,4,.74) + blur, below), so legibility here does not depend on darkening
       the photograph the way it does on desktop. The old .58/.92 stack crushed a well-exposed
       picture into a black rectangle: the hero band is only ~244px tall at 390px wide, so the
       heavy ends of the gradient covered nearly all of it. The bottom stays dark to blend
       into the page beneath. */
    /* With the phone panel gone this has to hold the type on its own, so it gains the same soft
       radial pool the desktop scrim uses. Kept lighter than desktop because the phone hero band is
       only ~244px tall: the same stops there would crush the whole picture, which is the mistake
       the comment above records. */
    background:
      radial-gradient(ellipse 92% 58% at 50% 44%, rgba(4,4,3,.80) 0%, rgba(4,4,3,.62) 48%, rgba(4,4,3,.20) 78%, rgba(4,4,3,0) 100%),
      linear-gradient(to bottom,
        rgba(5,5,4,.30) 0%, rgba(5,5,4,.08) 34%, rgba(5,5,4,.16) 66%, rgba(10,9,8,.84) 100%);
  }
  .hero .wrap {
    /* The panel is sized by its CONTENTS, not by the screen. Every fixed inset I tried was wrong at
       one end of the range or the other: the widest thing inside is the wordmark at a fixed 257px,
       so a margin that left a good gap at 430px overflowed the panel at 320px, and one that was safe
       at 320px wasted 40px a side at 430px.

       fit-content makes the panel exactly as wide as the wordmark needs and no wider, centred, with
       the photograph taking everything left over. That is the most picture the box can give back at
       any width, and it cannot squeeze its own contents. max-width keeps a gutter on tiny screens. */
    /* Box removed here too (owner, 2026-09-27). This rule is separate from the desktop one, so
       deleting the panel up there left the phone still boxed — caught by measuring the computed
       background at 390px, not by looking at the desktop and assuming. fit-content stays: it is
       what keeps the wordmark centred and off the edges without a fixed inset. */
    width: fit-content;
    margin-inline: auto;
    max-width: calc(100% - 20px);
    padding-block: 9px;
    padding-inline: 12px;
  }
  .hero h1 .wordmark { width: clamp(174px, 50.5vw, 579px); }   /* the old 6.1vw clamp x 8.271 */
  .hero .eyebrow { margin: 6px 0 0; letter-spacing: .26em; font-size: 10px; }
  .hero .tag { margin-top: 15px; letter-spacing: .26em; font-size: 11px; }
  .hero .rule { display: none; }
  .hero-cta { margin-top: 11px; gap: 7px; }
  .hero-cta .btn { padding: 9px 14px; font-size: 10.5px; }
}
/* Below ~430px the band is short enough that the panel needs the extra room more than the photo
   needs to stay uncropped, so let the hero grow a little. */
/* Shrink the hero wording on phones so the photographs carry the band rather than the type.
   Every value here is smaller than the desktop scale on purpose; the wordmark is still the
   largest thing on the screen, it just stops filling it. */
@media (max-width: 700px) {
  .hero h1 .wordmark { width: clamp(148px, 43vw, 420px); }
  .hero .eyebrow { font-size: 9px; letter-spacing: .24em; margin-top: 5px; }
  .hero .tag {
    font-size: 9.5px; letter-spacing: .24em; margin-top: 11px;
    /* Shrinking the type moved this line from "large text" (3:1 is enough) into "small text"
       (4.5:1 required). Brass-lt was enough when the mobile hero was 246px tall, but raising
       the band to 401px so the photographs actually read changed the cover crop behind this
       line, and brass-lt fell to 4.13 on the worst of the eight slides. A raw hex rather than
       a token because it is one notch lighter than --brass-lt and exists only for this line:
       measured worst case 5.23 across all eight slides, and still visibly gold, where cream
       would collapse it into CHICAGO above. Darkening the scrim instead would have cost the
       photo visibility this taller band was built for. */
    color: #e4cca7;
  }
  .hero-cta { margin-top: 14px; gap: 8px; }
  .hero .btn { padding: 10px 15px; font-size: 10px; letter-spacing: .1em; }
  .hero-dots { margin-top: 13px; gap: 7px; }
  .hero-dots button { width: 7px; height: 7px; }
}

@media (max-width: 430px) {
  .hero { min-height: min(62vh, calc(100vw * 1000 / 1500 + 55px)); }
  .hero .eyebrow { font-size: 9.5px; margin-top: 5px; }
  .hero .tag { margin-top: 13px; font-size: 10.5px; }
  .hero .rule { display: none; }
  /* Two rows of buttons would add ~45px and push the panel past the photo. */
  .hero-cta .btn { padding: 9px 11px; font-size: 10px; letter-spacing: .09em; }
  .hero .wrap { padding-inline: 10px; }
}

/* ── Top bar on a phone ──────────────────────────────────────
   The wordmark, the hamburger and RESERVE overflowed the row at 430px and at 360px and wrapped onto
   a second line, which doubled the header height and shoved the hero down. Nothing here may wrap. */
@media (max-width: 700px) {
  .bar-inner { flex-wrap: nowrap; gap: 10px; padding-inline: 14px; }
  .bar-inner .mark { font-size: clamp(15px, 4.4vw, 19px); white-space: nowrap; flex: 0 1 auto; }
  /* Shorter on a phone so the bar still fits the logo, the hamburger and RESERVE on one row. */
  .bar-inner .mark--logo img { height: clamp(16px, 4.6vw, 22px); }
  .bar-inner .menu-toggle { flex: 0 0 auto; }
  .bar-inner .btn-reserve {
    flex: 0 0 auto; white-space: nowrap;
    padding: 9px 12px; font-size: 10px; letter-spacing: .1em;
  }

}

/* ── The Room (gallery) ──────────────────────────────────────
   A mosaic rather than a uniform 3x3: two anchor tiles carry the block and the rest fill in
   around them, so it reads as composed instead of as a folder someone emptied onto the page.

   Placement is left to the grid's own auto-flow. The DOM order below fills a 4x4 exactly, with no
   holes, so no tile needs hand-positioning and the same markup re-flows to two columns on a phone
   without a second set of rules:

       [ medallion ][ gameday  ]        [ medallion  ]
       [  (2x2)    ][touch][cock]       [   (2x2)    ]
       [  booth    ][jrsy][pizza]       [  gameday   ]
       [dine][bar  ][ (tall x2) ]       [touch][cockt]  ... and so on down
*/
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(130px, 15.5vw, 205px);
  gap: 10px;
}
.gallery-grid figure {
  margin: 0; overflow: hidden;
  border: 1px solid var(--brass-dk);
  background: var(--deeper);
}
.gallery-grid img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Every tile is a different crop of a different shape, so they need a shared resting state or
     the block looks like nine unrelated pictures. A touch of desaturation does it, lifted on hover
     so the photograph itself is the reward for looking. */
  filter: saturate(.92) contrast(1.02);
  transition: transform .5s ease, filter .5s ease;
}
@media (hover: hover) {
  .gallery-grid figure:hover img { transform: scale(1.04); filter: saturate(1.06) contrast(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-grid img { transition: none; }
  .gallery-grid figure:hover img { transform: none; }
}
/* Two tiles have their subject off-centre, so a centred cover crop loses the thing worth seeing.
   A 2:1 tile keeps only the middle two thirds of a 3:2 photo: centred, the booth's illuminated
   wordmark falls outside it entirely, which is the one detail that shot exists for. */

.g-hero { grid-column: span 2; grid-row: span 2; }
.g-wide { grid-column: span 2; }
.g-tall { grid-row: span 2; }

/* The tile is a button now, so it has to be stripped back to looking like a photograph while
   keeping the focus ring a keyboard user needs. */
.gallery-grid .g-open {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: zoom-in;
}
.gallery-grid .g-open:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* ── Lightbox ────────────────────────────────────────────────
   Full-bleed, because the point of opening a photo is to see the photo. The frame around it stays
   out of the way: a close control, a step control each side, and a counter. */
.lb { position: fixed; inset: 0; z-index: 200; }
.lb[hidden] { display: none; }
/* Solid. At 94% the page behind stayed legible through it, and a photo viewer competing with
   the body copy underneath is not a viewer, it is an overlay. */
.lb-backdrop { position: absolute; inset: 0; background: #040403; }
.lb-inner {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(4px, 2vw, 20px); padding: clamp(44px, 6vw, 64px) clamp(8px, 2vw, 28px);
}
.lb-stage { grid-column: 2; margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lb-stage img {
  max-width: 100%; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px);
  object-fit: contain; display: block;
  border: 1px solid var(--brass-dk);
  /* Held back until the file has decoded, so stepping never flashes the previous photo stretched
     into the next one's shape. */
  opacity: 0; transition: opacity .22s ease;
}
.lb-stage img.is-ready { opacity: 1; }
.lb-stage figcaption {
  font-size: 12px; letter-spacing: .06em; color: var(--cream);
  text-align: center; max-width: 62ch; opacity: .78;
}
.lb-x, .lb-nav {
  background: rgba(10, 9, 8, .72); color: var(--cream);
  border: 1px solid var(--brass-dk); cursor: pointer; line-height: 1;
  transition: background .18s, color .18s;
}
.lb-x:hover, .lb-nav:hover { background: var(--brass); color: #120e07; }
.lb-x:focus-visible, .lb-nav:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.lb-x {
  position: absolute; top: clamp(10px, 2vw, 20px); right: clamp(10px, 2vw, 20px); z-index: 2;
  width: 44px; height: 44px; font-size: 26px;
}
.lb-nav { width: 44px; height: 68px; font-size: 30px; }
.lb-prev { grid-column: 1; }
.lb-next { grid-column: 3; }
.lb-count {
  position: absolute; left: 0; right: 0; bottom: clamp(10px, 2vw, 18px);
  margin: 0; text-align: center;
  font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--brass); font-variant-numeric: tabular-nums;
}

/* On a phone the step buttons would eat the picture, so they move off the sides and sit as a pair
   at the foot, where a thumb reaches them. Swiping does the same job. */
@media (max-width: 700px) {
  .lb-inner { grid-template-columns: 1fr; padding: 52px 8px 76px; }
  .lb-stage { grid-column: 1; }
  .lb-stage img { max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); }
  .lb-nav { position: absolute; bottom: 34px; width: 56px; height: 44px; }
  .lb-prev { left: 18%; }
  .lb-next { right: 18%; }
  .lb-count { bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .lb-stage img { transition: none; }
}

/* Two columns on a phone. A tile spanning both of them is half the width it was on desktop but the
   same height, which made the wide pair almost 3:1 — a letterbox slot, not a photograph. So on a
   phone a wide tile takes a second row as well and lands near 3:2, the shape these were shot in. */
@media (max-width: 700px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(112px, 26vw, 170px); gap: 8px; }
  .g-wide { grid-row: span 2; }
}

/* The menu panel belongs to every width that shows a hamburger, not just phones. It used to sit
   in the 700px block, so raising the hamburger breakpoint to 1239px would have left tablets
   opening the old wrapped-row menu the panel was written to replace. */
@media (max-width: 1059px) {
  .bar-inner { flex-wrap: nowrap; }
  .bar-inner { position: relative; }
  nav.links.open {
    position: absolute;
    top: 100%; left: 0; right: 0; width: auto;
    flex-direction: column;
    padding: 4px 14px 8px;
    /* Solid, not translucent: at 97% the hero wordmark still ghosted through the links, and a
       backdrop blur only smeared bright cream type behind them. A menu wants to be read, and a
       solid panel is cheaper to composite while scrolling on a phone. */
    background: var(--ground);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    /* Seven links plus the bar still clear a short phone in landscape; dvh keeps iOS honest when
       its address bar is showing. */
    max-height: calc(100vh - 62px);
    max-height: calc(100dvh - 62px);
    overflow-y: auto;
  }
  nav.links.open a { padding: 14px 2px; font-size: 14px; }
}

/* ── Watch It Here ───────────────────────────────────────────
   The photograph carries the claim and the list qualifies it, so they sit side by side rather than
   the list floating on its own. Numbered markers would be wrong here: these are four parallel facts,
   not four steps, so they are set as term-and-answer pairs. */
.screens-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 48px);
  align-items: center;
}
.screens-shot { margin: 0; overflow: hidden; border: 1px solid var(--brass-dk); background: var(--deeper); }
.screens-shot img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 3 / 2; }
.screens-points { margin: 0; }
.screens-points > div { padding: 14px 0; border-top: 1px solid var(--line); }
.screens-points > div:first-child { border-top: none; padding-top: 0; }
.screens-points dt {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(14px, 1.6vw, 17px); letter-spacing: -.01em;
  text-transform: uppercase; color: var(--brass); margin: 0 0 6px;
}
.screens-points dd {
  margin: 0; color: var(--cream);
  font-size: clamp(13.5px, 1.5vw, 15.5px); line-height: 1.55; max-width: 44ch;
  text-wrap: pretty;
}
@media (max-width: 860px) {
  .screens-grid { grid-template-columns: 1fr; }
  .screens-shot img { aspect-ratio: 16 / 9; }
}

/* ── The Nights + table booking ──────────────────────────────
   Three nights read as a set, so they are one grid of equal cards rather than three more of the
   stacked photo/text "product" blocks above. The table band underneath is the conversion step and
   is deliberately the only thing on the page with a full-width brass edge. */
.nights { margin-top: clamp(40px, 6vw, 72px); }
.nights-head { margin-bottom: clamp(20px, 3vw, 30px); }
.nights-head h3 {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(24px, 3.4vw, 40px); line-height: 1; letter-spacing: -.025em;
  text-transform: uppercase; color: var(--brass); margin: 0 0 10px;
}
.nights-head p { margin: 0; font-size: 14px; color: var(--cream); opacity: .74; }

.nights-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}
@media (max-width: 860px) { .nights-grid { grid-template-columns: 1fr; } }

.night {
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, #141210 0%, #0b0a09 100%);
}
.night-when {
  margin: 0 0 10px;
  font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--brass-dk);
}
.night h4 {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(17px, 2vw, 22px); line-height: 1.1; letter-spacing: -.015em;
  text-transform: uppercase; color: var(--brass); margin: 0 0 12px;
}
.night p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--cream); opacity: .86; text-wrap: pretty; }

/* The booking step. */
.tables-band {
  margin-top: clamp(14px, 2vw, 20px);
  padding: clamp(22px, 3.2vw, 36px);
  border: 1px solid var(--brass-dk);
  background: linear-gradient(160deg, #17130e 0%, #0b0a09 100%);
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  column-gap: clamp(20px, 3vw, 40px);
  /* The two columns are very different heights, so a matching row gap left a hole above the
     button. Rows get their own, much smaller, gap. */
  row-gap: clamp(12px, 1.6vw, 18px);
  align-items: start;
}
.tables-copy h4 {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(19px, 2.4vw, 27px); line-height: 1.1; letter-spacing: -.02em;
  text-transform: uppercase; color: var(--brass); margin: 0 0 14px;
}
.tables-copy p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--cream); max-width: 52ch; }
.tables-note { font-style: italic; opacity: .7; }
.tables-list { margin: 0; }
.tables-list > div { padding: 12px 0; border-top: 1px solid var(--line); }
.tables-list > div:first-child { border-top: none; padding-top: 0; }
.tables-list dt {
  font-family: var(--sans); font-weight: 800; font-size: 15px;
  text-transform: uppercase; letter-spacing: -.01em; color: var(--brass); margin: 0 0 4px;
}
.tables-list dd { margin: 0; font-size: 13.5px; color: var(--cream); opacity: .8; }
.tables-cta { grid-column: 1 / -1; margin: clamp(6px, 1vw, 10px) 0 0; }

@media (max-width: 860px) {
  .tables-band { grid-template-columns: 1fr; }
}

/* ── Mission: Turntables & Touchdowns ────────────────────────
   Two objects, deliberately unalike. The definition is quiet and set in the serif, because it is a
   statement of what the place is. The recipe is a bar spec, so it is set the way a bar sets one:
   measures in a column, the pour beside them, and a garnish line ruled off at the foot. */
.mission-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 52px);
  /* start, not center. The definition is much shorter than the recipe card, so centring left it
     hanging in the middle of the row with a large void above and below it and nothing to line up
     against. Topped out, it starts level with the card and the whole block reads as one row. */
  align-items: start;
}
/* Optical, not mathematical: the card's own padding pushes its first line down, so the definition
   needs a nudge to start on the same line rather than the same pixel. */
@media (min-width: 861px) { .mission-def { padding-top: clamp(10px, 1.4vw, 20px); } }
@media (max-width: 860px) { .mission-grid { grid-template-columns: 1fr; } }

.def-term {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(30px, 5vw, 54px); line-height: 1.05;
  color: var(--brass); margin: 0 0 clamp(14px, 2vw, 20px);
}
.def-body {
  margin: 0; max-width: 34ch;
  font-size: clamp(15px, 1.7vw, 19px); line-height: 1.62; color: var(--cream);
  text-wrap: pretty;
}

.recipe {
  margin: 0; padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--brass-dk);
  background: linear-gradient(160deg, #161311 0%, #0b0a09 100%);
}
.recipe figcaption { display: block; margin-bottom: clamp(18px, 2.4vw, 26px); }
.recipe-eyebrow {
  display: block;
  font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--brass-dk); margin-bottom: 8px;
}
.recipe-name {
  display: block;
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(24px, 3.4vw, 40px); line-height: 1; letter-spacing: -.02em;
  text-transform: uppercase; color: var(--brass);
}
.recipe-spec { margin: 0; }
.recipe-spec > div {
  display: grid; grid-template-columns: 5.5em 1fr; gap: 14px;
  padding: 11px 0; border-top: 1px solid var(--line);
  align-items: baseline;
}
.recipe-spec dt {
  margin: 0; font-weight: 700; color: var(--brass-lt);
  /* The measures are the joke, so they line up like measures do. */
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  font-size: clamp(14px, 1.6vw, 17px);
}
.recipe-spec dd {
  margin: 0; color: var(--cream);
  font-size: clamp(14px, 1.6vw, 17px); line-height: 1.45;
}
.recipe-spec sub { font-size: .7em; }
.recipe-garnish {
  margin: clamp(16px, 2.2vw, 22px) 0 0; padding-top: clamp(14px, 2vw, 18px);
  border-top: 1px solid var(--brass-dk);
  font-size: clamp(13px, 1.5vw, 16px); line-height: 1.5; color: var(--cream);
}
.recipe-garnish span {
  display: block;
  font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--brass-dk); margin-bottom: 6px;
}

/* ── A standing notice (the game day request policy) ─────────
   Ruled off with a brass edge rather than boxed in a colour: it is important, not an alarm. */
.notice {
  margin: clamp(22px, 3.5vw, 32px) 0 0;
  padding: clamp(16px, 2.4vw, 22px) clamp(16px, 2.4vw, 24px);
  border-left: 2px solid var(--brass-dk);
  background: rgba(176, 141, 87, .06);
}
/* Sentence case, against the house uppercase. The surrounding section shouts because it is
   selling; this block is telling someone their table might not happen, and three paragraphs of
   all-caps policy is a wall nobody reads. */
.notice p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--cream);
  text-transform: none; letter-spacing: normal; }
.notice p:last-child { margin-bottom: 0; }
.notice strong { color: var(--brass-lt); font-weight: 700; }
.notice-thanks { font-style: italic; opacity: .72; }

/* The Ninety's opening line, stated rather than buried in the paragraph under it. */
.ninety-line {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(16px, 1.9vw, 21px); line-height: 1.25; letter-spacing: -.01em;
  text-transform: uppercase; color: var(--brass);
  margin: 0 0 14px !important;
}

/* ── Reservations: the comparison ────────────────────────────
   Three cards, but the rows inside them line up across all three, which is the only thing that
   makes a comparison a comparison. subgrid does that: each card adopts the parent's rows instead of
   sizing its own, so "Deposit" sits on the same line in all three columns even when one answer runs
   to two lines and another is a single word.

   Without subgrid the cards still read fine, they just lose that alignment, so nothing breaks. */
.compare {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  align-items: start;
}
.opt {
  display: grid;
  grid-template-rows: auto auto auto repeat(5, auto) auto;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, #141210 0%, #0b0a09 100%);
}
@supports (grid-template-rows: subgrid) {
  .compare { grid-template-rows: auto auto auto repeat(5, auto) auto; }
  .opt { grid-row: 1 / -1; grid-template-rows: subgrid; }
}
/* The Full Game is the one most people are choosing between the other two to reach, so it is
   stated rather than shouted: a brass edge, not a bigger card. */
.opt--feature { border-color: var(--brass-dk); }

.opt-shot { overflow: hidden; border-bottom: 1px solid var(--line); background: var(--deeper); }
.opt-shot img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 5 / 3; }
.opt-name {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(20px, 2.3vw, 28px); line-height: 1.05; letter-spacing: -.02em;
  text-transform: uppercase; color: var(--brass);
  margin: 0; padding: 18px 18px 0;
}
.opt-for {
  margin: 0; padding: 8px 18px 16px;
  font-size: 13px; letter-spacing: .04em; color: var(--cream); opacity: .74;
}
.opt-rows { margin: 0; display: contents; }
.opt-rows > div {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}
.opt-rows dt {
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass-dk); margin: 0 0 5px;
}
.opt-rows dd { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--cream); text-wrap: pretty; }
.opt-cta { margin: 0; padding: 18px; align-self: end; border-top: 1px solid var(--line); }
.opt-cta .btn { width: 100%; }
.compare-note {
  margin: clamp(20px, 3vw, 28px) 0 0;
  font-size: 13px; line-height: 1.6; color: var(--cream); opacity: .66; max-width: 70ch;
}

/* Below three columns the alignment has nothing left to align, so the cards go back to being
   ordinary self-sized blocks and stack. */
@media (max-width: 900px) {
  /* Capped and centred rather than full width: stacked on an 860px tablet the cards ran to 720px,
     which turns a one-line answer like "None" into a line with 700px of empty space after it. */
  .compare { grid-template-columns: 1fr; grid-template-rows: none; max-width: 620px; margin-inline: auto; }
  .opt { grid-row: auto; grid-template-rows: none; }
  .opt-rows { display: block; }
  .opt-shot img { aspect-ratio: 16 / 7; }
  .compare-note { max-width: 620px; margin-inline: auto; }
}

/* On a 320px screen the panel can only be 265px wide, and the two buttons wanted 272px, so they
   broke onto a second row and pushed the panel back over the photograph. Seven pixels short, so the
   buttons give up seven pixels rather than the picture giving up a row. */
@media (max-width: 340px) {
  .hero-cta { gap: 5px; }
  .hero-cta .btn { padding: 9px 8px; letter-spacing: .06em; }
}

/* The events header shares .hero-scrim, which lost its centre pool when the homepage moved to a
   stated panel. It has no panel of its own, so it needs that darkening back or the back link and
   the tagline wash out against the smoke. */
.page-head .hero-scrim {
  /* Same idea as the homepage hero: darken behind the TYPE, not across the whole frame. The old
     stack opened at .78 black and closed at .95 with a .76 pool through the middle, so the band
     was effectively opaque end to end. Now the pool sits behind the centred title and the outer
     thirds stay open, which is what lets the room read at all. */
  /* Tuned by measurement, not by eye. A first pass at .84/66% with a .44 top wash let the
     photographs through but dropped the type to 2.47:1 on the menu banner and failed 11 of the
     18 text targets across these six pages. The pool below is WIDER rather than merely darker,
     so it covers the full width of a long title like MISSION STATEMENT while the top wash stays
     light: worst case across all six is now 8.04:1 against a 4.5 requirement, and the upper band
     is lighter than the original .78 so the room still reads. */
  background:
    radial-gradient(ellipse 95% 98% at 50% 50%, rgba(4,4,3,.86) 0%, rgba(4,4,3,.74) 45%, rgba(4,4,3,.42) 75%, rgba(4,4,3,.10) 100%),
    linear-gradient(to bottom, rgba(5,5,4,.46) 0%, rgba(5,5,4,.16) 36%, rgba(5,5,4,.22) 68%, rgba(10,9,8,.84) 100%);
}
.page-head .eyebrow, .page-head .tag { text-shadow: 0 1px 16px rgba(0,0,0,.95); }

  /* ── What's On: the live fixture list ───────────────────── */
  /* Rendered from FANZO's public feed at page load, so the markup below is written by site.js.
     Everything here has to survive an empty feed, a slow feed and a feed that 404s. */

  .fx-controls {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-bottom: clamp(22px, 3vw, 30px);
  }
  .fx-filter {
    font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); background: transparent;
    border: 1px solid var(--line); border-radius: 999px;
    padding: 9px 16px; cursor: pointer;
    transition: color .18s, border-color .18s, background .18s;
  }
  .fx-filter:hover { color: var(--cream); border-color: var(--brass-dk); }
  .fx-filter.is-on {
    color: var(--ground); background: var(--brass); border-color: var(--brass);
  }
  .fx-count {
    margin: 0 0 0 auto; font-size: 12px; color: var(--muted);
    font-variant-numeric: tabular-nums;
  }

  .fx-state {
    margin: 0; padding: 40px 0; color: var(--muted); font-size: 15px;
  }
  .fx-state a { color: var(--brass); }

  .fx-day { margin-bottom: clamp(26px, 3.4vw, 38px); }
  .fx-day:last-child { margin-bottom: 0; }

  .fx-day-head {
    display: flex; align-items: baseline; gap: 12px;
    padding-bottom: 10px; margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
  }
  .fx-day-name {
    margin: 0; font-family: var(--serif); font-weight: 400;
    font-size: clamp(19px, 2.4vw, 25px); letter-spacing: .01em;
  }
  .fx-day-date {
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  }
  .fx-today {
    font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--live); border: 1px solid currentColor; border-radius: 3px;
    padding: 2px 7px; margin-left: auto; flex: none;
  }

  /* One game. Grid so the time column and the badge column line up down the whole day,
     however long a team name runs. */
  .fx-game {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    align-items: center; gap: 4px 16px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(36, 31, 26, .55);
  }
  .fx-game:last-child { border-bottom: 0; }

  .fx-time {
    font-size: 14px; font-weight: 600; color: var(--cream);
    font-variant-numeric: tabular-nums; letter-spacing: .01em;
  }
  .fx-teams { min-width: 0; }
  .fx-match {
    margin: 0; font-size: 15px; line-height: 1.35;
    display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px;
  }
  .fx-vs { color: var(--muted); font-size: 12px; }
  .fx-side { display: inline-flex; align-items: center; }
  .fx-crest {
    width: 20px; height: 20px; object-fit: contain; flex: none;
    vertical-align: middle; margin-right: 5px;
  }
  .fx-meta {
    margin: 3px 0 0; font-size: 11.5px; color: var(--muted);
    letter-spacing: .04em;
  }
  .fx-meta .fx-channel { color: var(--brass-lt); }

  .fx-flags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .fx-flag {
    font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    border-radius: 3px; padding: 4px 8px; white-space: nowrap;
  }
  .fx-flag--big   { color: var(--ground); background: var(--brass); }
  .fx-flag--sound { color: var(--live);   border: 1px solid currentColor; }

  /* A big-screen game is the reason someone is reading this page, so it gets the brass rail. */
  .fx-game--big { border-left: 2px solid var(--brass); padding-left: 14px; margin-left: -16px; }

  .fx-stamp {
    margin: clamp(22px, 3vw, 30px) 0 0;
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--brass-dk);
  }

  .fx-foot {
    margin: clamp(30px, 4vw, 44px) 0 0;
    padding-top: 20px; border-top: 1px solid var(--line);
    font-size: 13px; color: var(--muted); max-width: 62ch;
  }
  .fx-foot a { color: var(--brass); white-space: nowrap; }

  @media (max-width: 560px) {
    /* Stack: time and badges share the top line, the matchup gets the full width beneath. */
    .fx-game { grid-template-columns: 1fr auto; gap: 6px 12px; padding: 15px 0; }
    .fx-time { grid-column: 1; }
    .fx-flags { grid-column: 2; grid-row: 1; }
    .fx-teams { grid-column: 1 / -1; grid-row: 2; }
    .fx-game--big { margin-left: 0; padding-left: 12px; }
    .fx-count { margin-left: 0; width: 100%; }
  }

  /* ── "On Today" — the homepage slate ──────────────────────
     Deliberately dense and quiet: it is a fact panel, not a hero. Someone scanning for their game
     should find it in one pass, then move on to booking. */
  .today { padding-block: clamp(34px, 5vw, 54px); }
  .today-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 16px; }
  .today-head h2 {
    margin: 0; font-family: var(--serif); font-weight: 400;
    font-size: clamp(24px, 3.4vw, 36px); letter-spacing: .01em;
  }
  .today-head p { margin: 0; font-size: 13px; color: var(--muted); }

  .today-strip {
    border: 1px solid var(--line); border-radius: 14px; background: var(--raised);
    padding: 4px 16px 12px;
  }
  .ts-game {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
    padding: 11px 0; border-bottom: 1px solid rgba(36, 31, 26, .6);
  }
  .ts-game:last-of-type { border-bottom: 0; }
  .ts-time {
    font-size: 13.5px; font-weight: 700; color: var(--cream);
    font-variant-numeric: tabular-nums; min-width: 72px;
  }
  .ts-teams { font-size: 14.5px; color: var(--cream); flex: 1 1 200px; min-width: 0; }
  .ts-v { color: var(--muted); font-size: 11.5px; padding: 0 2px; }
  .ts-flag {
    font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ground); background: var(--brass); border-radius: 3px; padding: 3px 7px;
    white-space: nowrap;
  }
  .ts-flag--sound { color: var(--live); background: transparent; border: 1px solid currentColor; }
  /* The one the whole room is watching gets the rail, same language as the schedule page. */
  .ts-game--big { border-left: 2px solid var(--brass); padding-left: 12px; margin-left: -16px; }
  .ts-more { margin: 12px 0 2px; font-size: 12.5px; }
  .ts-more a { color: var(--brass); text-decoration: none; }
  .ts-more a:hover { color: var(--brass-lt); }
  .ts-empty { margin: 12px 0; font-size: 13.5px; color: var(--muted); }
  .ts-empty a { color: var(--brass); }

  @media (max-width: 560px) {
    .ts-game { gap: 3px 10px; }
    .ts-time { min-width: 100%; }
    .ts-teams { flex-basis: 100%; }
    .ts-game--big { margin-left: 0; padding-left: 10px; }
  }

/* The Sunday card in the homepage Nights grid is the short version and links down to the full
   Sunday section, so the cards need a footer that stays on the bottom edge whatever the copy
   lengths do. .night p sets margin:0, which is why the link's spacing is scoped to .night. */
.night { display: flex; flex-direction: column; }
.night .night-more { margin-top: auto; padding-top: 16px; }
.night .night-more a {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass); text-decoration: none; opacity: 1;
  border-bottom: 1px solid var(--brass-dk); padding-bottom: 3px; transition: color .18s;
}
.night .night-more a:hover { color: var(--brass-lt); }

/* reservations.html keeps the table question and points back at the nights. */
.nights-link {
  color: var(--brass); text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid var(--brass-dk); padding-bottom: 2px;
}
.nights-link:hover { color: var(--brass-lt); }

/* ── Menu page ───────────────────────────────────────────────
   A real page rather than the PDF, because "victory and vice menu" is a phone search and a PDF is
   a pinch-and-zoom document. Two things follow from that: the jump links at the top, so somebody
   after the pizza prices is one tap away, and a measure that never runs long enough to lose the
   price at the end of the line. */
/* The index is a page-level strip between the header and the first section, not part of either,
   so it carries its own wrap: same max-width and gutter as .wrap, which is what it sits between. */
.mn-jump {
  display: flex; flex-wrap: wrap; gap: 8px;
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(22px, 3.2vw, 32px) var(--gutter);
}
/* .page-head + section carries a reduced top padding; the nav now sits in that slot, so the rule
   has to follow it across rather than leave the first section with a full 92px gap on top. */
.mn-jump + section { padding-top: clamp(30px, 4vw, 48px); }
.mn-jump a {
  text-decoration: none; border: 1px solid var(--line);
  padding: 8px 14px; color: var(--cream);
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  transition: border-color .18s, color .18s;
}
.mn-jump a:hover, .mn-jump a:focus-visible { border-color: var(--brass-dk); color: var(--brass); }

/* Columns rather than a grid: the blocks are wildly different lengths, and a grid would leave a
   hole under every short one. break-inside keeps a section from being split down the middle. */
.mn-cols { column-gap: clamp(34px, 4.5vw, 72px); }
@media (min-width: 900px) { .mn-cols { column-count: 2; } }
.mn-block {
  break-inside: avoid;
  margin: 0 0 clamp(34px, 4.5vw, 54px);
  /* Chrome needs the block to be a formatting context or the avoid is ignored on tall children. */
  display: flow-root;
}
.mn-head {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(17px, 2.1vw, 23px); line-height: 1.1; letter-spacing: -.01em;
  text-transform: uppercase; color: var(--brass);
  margin: 0 0 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--brass-dk);
  /* the anchor target sits under a fixed bar, so leave it room to land */
  scroll-margin-top: 92px;
}
.mn-note {
  margin: -4px 0 16px;
  font-size: 12px; letter-spacing: .04em; color: var(--muted);
}
.mn-note--cols {
  display: flex; justify-content: flex-end; gap: 22px;
  font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass-dk);
}
.mn-note--cols span { width: 52px; text-align: right; }

.mn-list { list-style: none; margin: 0; padding: 0; }
.mn-row { margin: 0 0 18px; }
.mn-row:last-child { margin-bottom: 0; }

/* Name and price on one baseline with the space between them left empty. No dotted leader: at this
   type size it reads as a diner check, and the rest of the site does not use one. */
.mn-name {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin: 0 0 5px;
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(14px, 1.6vw, 16px); line-height: 1.25; letter-spacing: -.005em;
  color: var(--cream);
}
.mn-price {
  flex: none; color: var(--brass); font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mn-price i { font-style: normal; color: var(--brass-dk); padding: 0 1px; }
/* The cans are priced by tier, so the price is the heading of the row rather than its tail. */
.mn-price--lead { font-size: clamp(15px, 1.8vw, 18px); }
.mn-row--group .mn-name { justify-content: flex-start; }

.mn-desc {
  margin: 0; max-width: 46ch;
  font-size: clamp(12.5px, 1.4vw, 13.5px); line-height: 1.55;
  color: var(--cream); opacity: .8;
  text-wrap: pretty;
}

.mn-foot {
  margin: clamp(10px, 2vw, 22px) 0 0;
  padding-top: clamp(18px, 2.4vw, 26px);
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
  font-size: 11.5px; line-height: 1.5; color: var(--muted); max-width: 70ch;
}

/* The menu photo is a tall portrait and the page header is a wide short band, so left alone the
   crop lands on the middle of a pizza and reads as an orange smear. Pulled up to the slice. */
.page-head .hero-media.mn-shot { object-position: center 30%; }

/* Shown only when the live feed is unreachable and the page is falling back to the snapshot the
   build baked in. Amber rather than the usual muted grey: it is a caveat about accuracy, and the
   one thing worse than no schedule is a confident wrong one. */
.fx-stale, .ts-stale {
  border: 1px solid var(--brass-dk);
  background: rgba(109, 87, 53, .12);
  padding: 12px 16px;
  margin: 0 0 20px;
  font-size: 12.5px; line-height: 1.5; color: var(--cream);
}
.ts-stale { margin: 14px 0 0; }

/* ── Where to Watch ──────────────────────────────────────────
   The page someone lands on from "where to watch the bears game in chicago". Its job is to answer
   a yes-or-no question before anything else happens, so the opening block is deliberately louder
   than a section head and quieter than a hero: a statement, not a banner. */
.wtw-answer {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(109, 87, 53, .10) 0%, transparent 100%);
}
.wtw-lead {
  margin: 0;
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(28px, 5.2vw, 52px); line-height: 1.02; letter-spacing: -.025em;
  text-transform: uppercase; color: var(--brass); text-wrap: balance;
}
.wtw-sub {
  margin: clamp(14px, 2vw, 20px) 0 0; max-width: 60ch;
  font-size: clamp(15px, 1.8vw, 18px); line-height: 1.55; color: var(--cream);
  text-wrap: pretty;
}
.wtw-cta { margin: clamp(22px, 3vw, 30px) 0 0; display: flex; flex-wrap: wrap; gap: 12px; }

/* Same two-column treatment as .sec-head:has(.lede), and for the same reason: left alone this
   block used 683px of a 1280px row and left 597px empty beside it. Same 1260px breakpoint, same
   fit-content heading column, so the two read as one system rather than two guesses. */
@media (min-width: 1260px) {
  .wtw-answer .wrap > .wtw-lead { grid-area: 1 / 1; }
  .wtw-answer .wrap {
    display: grid;
    grid-template-columns: fit-content(52%) minmax(0, 1fr);
    column-gap: clamp(30px, 3.4vw, 52px);
    align-items: start;
  }
  .wtw-answer .wtw-sub { grid-area: 1 / 2; margin-top: 8px; }
  .wtw-answer .wtw-cta { grid-area: 2 / 2; margin-top: 22px; }
}

/* Three equal claims, so one grid of equal cards rather than three stacked paragraphs. */
.wtw-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}
@media (max-width: 860px) { .wtw-grid { grid-template-columns: 1fr; } }
.wtw-card {
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, #141210 0%, #0b0a09 100%);
}
.wtw-card h3 {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(15px, 1.8vw, 19px); line-height: 1.15; letter-spacing: -.015em;
  text-transform: uppercase; color: var(--brass); margin: 0 0 12px;
}
.wtw-card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--cream); opacity: .86; text-wrap: pretty; }

/* The Sunday run of play. A time and what happens at it, which is a definition list, not a table:
   there is one value per term and no second column to line up. */
.wtw-run { margin: 0 0 clamp(26px, 3.4vw, 36px); padding: 0; }
.wtw-run > div {
  display: grid; grid-template-columns: 110px minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 28px);
  padding: 16px 0; border-top: 1px solid var(--line);
  align-items: baseline;
}
.wtw-run > div:first-child { border-top: none; padding-top: 0; }
@media (max-width: 560px) { .wtw-run > div { grid-template-columns: 1fr; gap: 6px; } }
.wtw-run dt {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(15px, 1.8vw, 20px); letter-spacing: -.01em;
  text-transform: uppercase; color: var(--brass);
  font-variant-numeric: tabular-nums;
}
.wtw-run dd {
  margin: 0; font-size: clamp(13.5px, 1.5vw, 15.5px); line-height: 1.55;
  color: var(--cream); max-width: 56ch; text-wrap: pretty;
}
.wtw-run dd strong { color: var(--brass-lt); font-weight: 700; }

/* Two columns of question and answer. Kept short on purpose: a featured snippet is lifted whole,
   and an answer that runs past about forty words stops being liftable. */
.wtw-faq { column-gap: clamp(34px, 4.5vw, 72px); }
@media (min-width: 900px) { .wtw-faq { column-count: 2; } }
.wtw-q { break-inside: avoid; display: flow-root; margin: 0 0 clamp(22px, 3vw, 30px); }
.wtw-q h3 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(14.5px, 1.7vw, 17px); line-height: 1.25; letter-spacing: -.005em;
  color: var(--brass); margin: 0 0 8px;
}
.wtw-q p {
  margin: 0; max-width: 52ch;
  font-size: clamp(13px, 1.5vw, 14.5px); line-height: 1.6;
  color: var(--cream); opacity: .86; text-wrap: pretty;
}
.wtw-q strong { color: var(--brass-lt); opacity: 1; }

/* ── Desktop hero box, tightened ─────────────────────────────
   Same box, same place, same colour. Just smaller, so more of the photograph is left showing round
   it. Measured at 1920: 800x379 covering 23% of the hero, against a wordmark only 579px wide.
   Hugging the content instead takes it to roughly 640x320, about 16%, which is a third less of the
   picture hidden for no loss of legibility: the type sits on exactly the same opaque ground it did.
   Nothing here applies below 701px; the phone keeps the hero it has. */
@media (min-width: 701px) {
  .hero .wrap {
    width: fit-content;
    max-width: min(800px, calc(100% - 2 * var(--gutter)));
    margin-inline: auto;
    padding-block: clamp(20px, 2.6vw, 30px);
    padding-inline: clamp(18px, 2.6vw, 30px);
  }
  .hero .eyebrow { margin-top: clamp(12px, 1.9vw, 18px); }
  .hero .tag { margin-top: clamp(20px, 3vw, 28px); }
  .hero .rule { margin-top: clamp(20px, 3.2vw, 30px); }
  .hero-cta { margin-top: clamp(20px, 3vw, 28px); }
}

/* ── Scroll cue ──────────────────────────────────────────────
   The nav tab says "Game Schedule" but the page opens with an answer block, so a visitor who came
   for a timetable meets a paragraph first. This tells them where the timetable is. It is a link,
   not decoration, so clicking it works for anyone who would rather not scroll at all. */
.scroll-cue { margin: clamp(16px, 2.4vw, 24px) 0 0; }
.scroll-cue a {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass); text-decoration: none;
  padding: 9px 16px; border: 1px solid var(--brass-dk);
  transition: color .18s, border-color .18s;
}
.scroll-cue a:hover, .scroll-cue a:focus-visible { color: var(--brass-lt); border-color: var(--brass); }
.scroll-arrow { font-size: 13px; line-height: 1; animation: cue-nudge 2.1s ease-in-out infinite; }
@keyframes cue-nudge {
  0%, 62%, 100% { transform: translateY(0); }
  76% { transform: translateY(3px); }
  88% { transform: translateY(0); }
}
/* The site already stops every other animation for this preference; the arrow is no exception. */
@media (prefers-reduced-motion: reduce) { .scroll-arrow { animation: none; } }
@media (max-width: 430px) {
  .scroll-cue a { font-size: 10px; letter-spacing: .14em; padding: 8px 12px; }
}

/* ── Anchor landing ──────────────────────────────────────────
   The top bar is sticky, so every in-page jump was putting the top of its target underneath it:
   the Scroll-down cue landed #fixtures at 0 with a 69px bar sitting on it, and the same was true
   of every nav link that points at a section (#book, #nights, #menu, #mission, #gallery, #hours).
   scroll-margin-top tells the browser to stop short by that much. Slightly more than the bar's
   height so the heading is not touching it, and the phone's shorter bar just gets a little air. */
section[id], div[id="nights"] { scroll-margin-top: 84px; }

/* ── Mission statement ───────────────────────────────────────
   The owner's own document, set verbatim. Its structure is the point: long prose paragraphs
   alternate with runs of short declarative lines, and those runs are the rhythm of the piece. Set
   as prose they collapse into a wall; set on their own lines they read the way they were written.
   Measure is held near 60 characters throughout, because this is the one page on the site somebody
   reads top to bottom rather than scans. */
.ms-doc .wrap { max-width: 900px; }
.ms-doc p {
  margin: 0 0 clamp(18px, 2.2vw, 26px);
  max-width: 62ch;
  font-size: clamp(15px, 1.75vw, 18px); line-height: 1.66;
  color: var(--cream); text-wrap: pretty;
}
.ms-doc p:last-child { margin-bottom: 0; }

/* The first sentence carries the whole thesis, so it is set as a statement rather than as the top
   of a paragraph stack. */
.ms-open {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(21px, 3vw, 31px) !important; line-height: 1.32 !important;
  color: var(--brass-lt); max-width: 30ch !important;
  margin-bottom: clamp(26px, 3.4vw, 38px) !important;
  text-wrap: balance;
}

/* The declarative runs. Brass, one per line, with a hairline down the left so they read as a set
   rather than as four unrelated fragments. */
.ms-cadence {
  list-style: none; margin: 0 0 clamp(22px, 2.8vw, 32px); padding: 0 0 0 clamp(18px, 2.4vw, 28px);
  border-left: 1px solid var(--brass-dk);
}
.ms-cadence li {
  margin: 0 0 9px; max-width: 54ch;
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(15px, 1.8vw, 18.5px); line-height: 1.45; letter-spacing: -.005em;
  color: var(--brass-lt); text-wrap: pretty;
}
.ms-cadence li:last-child { margin-bottom: 0; }

/* "Sporting Nightlife is not simply our tagline. It is our DNA." is the line the whole document
   turns on, so it is the only thing on the page allowed to interrupt the column. */
.ms-pull {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(19px, 2.6vw, 27px) !important; line-height: 1.22 !important;
  letter-spacing: -.02em; text-transform: uppercase;
  color: var(--brass); max-width: 22ch !important;
  margin: clamp(26px, 3.4vw, 38px) 0 clamp(14px, 1.8vw, 20px) !important;
  text-wrap: balance;
}
.ms-expect {
  font-weight: 600; letter-spacing: .01em;
  color: var(--brass-lt) !important;
}
.ms-dna {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(20px, 2.7vw, 28px) !important; line-height: 1.34 !important;
  color: var(--brass) !important; max-width: 24ch !important;
  margin-top: clamp(26px, 3.4vw, 36px) !important;
}

.ms-doc--promise { border-top: 1px solid var(--line); }
.ms-doc--promise .sec-head { margin-bottom: clamp(24px, 3vw, 34px); }

/* The sign-off. Centred and full width because it is the only line in the document that is
   addressed to the reader rather than describing the room. */
.ms-signoff {
  text-align: center;
  background: linear-gradient(180deg, rgba(109,87,53,.10) 0%, transparent 70%);
}
.ms-signoff-line {
  margin: 0;
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(27px, 6vw, 62px); line-height: 1.02; letter-spacing: -.03em;
  text-transform: uppercase; color: var(--cream); text-wrap: balance;
}
.ms-signoff-line span { color: var(--brass); }
.ms-signoff .book-cta { justify-content: center; }

@media (min-width: 900px) {
  /* Indent the runs and the pull quote off the prose column so the shape of the document is
     visible before a word of it is read. */
  .ms-cadence { margin-left: clamp(0px, 3vw, 46px); }
}

/* ── Mission page header ─────────────────────────────────────
   The dining room, cropped to lose two things the original frame carried: a black ceiling band
   across the top, and the advert screens down the right-hand side. What is left is chandeliers,
   windows and leather, which is a calm ground for a title to sit on.

   The photograph is brighter than the smoke shot the standard page-head scrim was tuned for, so
   that scrim (a 76% radial over a 78/30/38/95 linear) would flatten it. Eased on both layers:
   enough to hold the title, not so much that the room disappears. */
.page-head--room {
  min-height: clamp(300px, 42vh, 430px);
}
/* Pinned to the top. Compared three bands by compositing them: anywhere below about 10% and the
   frame is nothing but window panes. The chandeliers and the transom greenery are the only thing
   in this crop with any character, and they sit in the top eighth of it. */
.page-head--room .hero-media { object-position: center top; }
.page-head--room .hero-scrim {
  background:
    radial-gradient(60% 56% at 50% 50%, rgba(5,5,4,.62) 0%, rgba(5,5,4,.34) 62%, rgba(5,5,4,0) 100%),
    linear-gradient(to bottom, rgba(5,5,4,.58) 0%, rgba(5,5,4,.22) 34%, rgba(5,5,4,.30) 66%, rgba(10,9,8,.92) 100%);
}

/* The email under the phone in Hours & Room. Deliberately quieter than .phone: on a game day the
   number is the channel that gets answered, and the address is for everything that can wait.
   Lowercase because an email address in uppercase is harder to read and to retype, and .info-block
   p forces uppercase on everything inside it. */
.email {
  font-size: clamp(13px, 1.7vw, 15px); font-weight: 600; letter-spacing: .02em;
  text-transform: none; color: var(--brass); text-decoration: none;
  word-break: break-word; transition: color .18s;
}
.email:hover, .email:focus-visible { color: var(--brass-lt); }

/* ── Bears game reservations ─────────────────────────────────
   The game line above the form. Baked at build time and refreshed by site.js, so it reads
   correctly with JavaScript off and still rolls to next week's opponent on its own. */
.sunday .bears-game {
  /* Hugs its own text rather than running the full column width. As a block it drew a wide bar of
     mostly empty background, which on a phone is a lot of vertical space spent on one line of
     information. */
  display: inline-block;
  margin: 0 0 22px;
  padding: 12px 16px;
  border-left: 2px solid var(--brass);
  background: rgba(176, 141, 87, .07);
  color: var(--cream);
  font-weight: 600;
  letter-spacing: .02em;
}
@media (max-width: 700px) {
  /* Tighter on phones: smaller type, less padding, and capped so it never runs the full width. */
  .sunday .bears-game {
    max-width: 30ch;
    padding: 9px 12px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: 0;
  }
}

/* The hero CTAs. Kept centred and allowed to wrap. */
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* The Bears row sits under the original two rather than beside them. Three buttons on one line
   made the panel wide enough to hold all three labels, and since the panel is width:fit-content
   that stretched the whole hero box past the width the composition was tuned at. */
.hero-cta--bears { margin-top: 10px; }

/* The reply shown once a Bears request is in. Deliberately calm and plain: it is mostly an
   apology in advance, and it should not look like a celebration banner. */
.bears-done {
  border: 1px solid var(--brass-dk);
  border-left: 3px solid var(--brass);
  background: rgba(176, 141, 87, .05);
  padding: clamp(20px, 3vw, 30px);
  max-width: 62ch;
}
.bears-done h3 {
  margin: 6px 0 14px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 3.4vw, 30px);
  color: var(--cream);
  letter-spacing: .01em;
}
/* Sentence case, against the uppercase `.sunday p` house style. This passage is an apology in
   advance for not having room; set in caps it reads as shouting at someone who just asked us
   politely for a table. Also a longer measure, since lowercase does not need the tight cap the
   uppercase paragraphs do. */
.sunday .bears-done p {
  margin: 0 0 12px;
  text-transform: none;
  letter-spacing: .01em;
  font-size: 15px;
  line-height: 1.7;
  max-width: none;
}
.sunday .bears-done p:last-child { margin-bottom: 0; }
.bears-done .bears-done-sign {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--brass-dk);
  color: var(--brass-lt);
  font-style: italic;
}

/* "RESERVATIONS" is one unbreakable 12-character word, and it decides the size of this heading.
   `.sunday h2` is 12vw, which overflows the column by a few percent on a phone. The first attempt
   capped the size below 380px and allowed `overflow-wrap: break-word` as a backstop, which was
   wrong twice over: the cap stopped at 380px while the overflow carried on well past it, and the
   backstop did the damage, splitting the word so a lone "s" sat on its own line from 390px up.

   No break is allowed here now. Instead the heading is sized so the longest word always fits
   whole. The word measures about 7.33px of width per 1px of font-size, and the column runs about
   86% of the viewport, so anything up to ~11.7vw fits; 10.5vw keeps a margin at the narrow end
   where the gutters eat proportionally more. */
#bears .sec-head h2 { font-size: clamp(28px, 10.5vw, 104px); }

/* ── Betting lines ticker ────────────────────────────────────
   Runs edge to edge across the screen, exchange-board style. Same mechanics as the wordmark
   marquee: a max-content track translated to -50%, which only loops seamlessly because site.js
   renders the item list TWICE. Nothing is pinned either side, so the strip reaches both edges. */
.odds {
  background: var(--deeper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.odds-track {
  display: flex; width: max-content;
  animation: slide 60s linear infinite;
  padding-block: 11px;
}
/* The ticker NEVER pauses, on purpose. It used to stop on hover so a line could be
   read, but the strip sits directly under the hero and the pointer rests there on
   the way down the page, so the odds appeared frozen for no reason the visitor
   could see. There is nothing focusable inside it either, so the matching
   :focus-within rule could never fire and went with it. Do not add it back. */

.odds-item {
  display: flex; align-items: baseline; gap: 9px;
  padding-inline: clamp(16px, 2.4vw, 26px);
  border-right: 1px solid rgba(176, 141, 87, .16);
  white-space: nowrap;
  font-size: 12.5px; letter-spacing: .06em;
}
.odds-match { color: var(--cream); font-weight: 700; }
.odds-line  { color: var(--brass-lt); font-weight: 600; }
.odds-ou    { color: var(--muted); font-size: 11.5px; letter-spacing: .1em; }
/* A Chicago team gets the brass treatment. This is a Chicago bar; those are the lines people
   actually lean in to read. */
.odds-item--home .odds-match { color: var(--brass); }
.odds-item--home { background: rgba(176, 141, 87, .06); }
.odds-league {
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass-dk); font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  /* Motion off, but the lines must still be readable, so the strip scrolls by hand instead. */
  .odds-track { animation: none; }
  .odds { overflow-x: auto; }
}

/* ── Bears kickoff countdown ─────────────────────────────────
   Stadium clock rather than a line of text: four separated digit blocks, brass on black. */
.bears-clock { margin: 0 0 26px; }
.sunday .bears-clock .bc-cap {
  margin: 0 0 10px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--brass);
}
.bc-row { display: flex; gap: 8px; flex-wrap: wrap; }
.bc-unit {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 62px;
  padding: 10px 8px 8px;
  background: var(--deeper);
  border: 1px solid var(--brass-dk);
}
.bc-num {
  font-family: var(--serif);
  font-size: clamp(26px, 4.6vw, 38px);
  line-height: 1;
  color: var(--brass-lt);
  /* Digits change every second; without tabular figures the blocks jitter as widths shift. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.bc-lab {
  font-size: 9px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
/* Kickoff has arrived: one line, no digits. */
.bears-clock--live .bc-row { display: none; }
.bears-clock--live .bc-cap {
  font-size: clamp(14px, 2.6vw, 18px);
  letter-spacing: .06em;
  color: var(--brass-lt);
  text-transform: none;
}
@media (max-width: 430px) {
  .bc-unit { min-width: 0; flex: 1 1 0; padding: 9px 4px 7px; }
  .bc-row { gap: 6px; }
}

/* ── Live scores on the fixture lists ────────────────────────
   Added to a row only when a game is actually under way or finished, so a row that has not
   started looks exactly as it did before. */
.fx-score {
  display: flex; align-items: baseline; gap: 8px;
  white-space: nowrap;
}
.fx-score-nums {
  font-family: var(--serif);
  font-size: clamp(16px, 2.4vw, 21px);
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.fx-score-sep { color: var(--brass-dk); padding-inline: 5px; }
.fx-score-state {
  font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
/* Live gets the brass and a pulse; finished stays quiet. */
.fx-score--live .fx-score-nums { color: var(--brass-lt); }
.fx-score--live .fx-score-state { color: var(--brass); }
.fx-score-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brass);
  flex: none;
  animation: fxpulse 1.8s ease-in-out infinite;
}
@keyframes fxpulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* The schedule row is a grid; the score sits at the end of it. */
.fx-game.has-score { align-items: center; }
.fx-game .fx-score { margin-left: auto; padding-left: 14px; }
/* The homepage strip row is tighter, so the score sits after the flag. */
.ts-game .fx-score { margin-left: auto; padding-left: 12px; }
@media (max-width: 560px) {
  .ts-game .fx-score, .fx-game .fx-score { padding-left: 8px; gap: 6px; }
  .fx-score-state { font-size: 9px; letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-score-dot { animation: none; }
}

/* ── Search + Ask ────────────────────────────────────────────────────────────
   Both are injected by site.js, so there is no markup for them in the pages.
   Palette is the existing one: brass on near-black, cream for anything read. */

.vv-locked { overflow: hidden; }

/* magnifier in the top bar, sitting just before Reserve */
.vv-search-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-left: 10px;
  background: transparent; border: 1px solid var(--brass-dk); border-radius: 3px;
  color: var(--brass); cursor: pointer; transition: color .18s, border-color .18s;
}
.vv-search-btn:hover { color: var(--cream); border-color: var(--brass); }
.vv-search-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

.vv-ov {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(3,3,2,.86); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(56px, 12vh, 140px) 16px 24px;
}
.vv-ov-panel {
  width: min(680px, 100%); background: var(--deeper);
  border: 1px solid var(--brass-dk); border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,.7); overflow: hidden;
}
.vv-ov-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px; border-bottom: 1px solid var(--line); }
.vv-ov-icon { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--brass); stroke-width: 1.7; stroke-linecap: round; }
.vv-ov-input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--cream); font: 400 15px/1.3 var(--sans); padding: 4px 0;
}
.vv-ov-input::placeholder { color: var(--muted); }
.vv-ov-input::-webkit-search-cancel-button { filter: invert(.6); }
.vv-ov-close {
  flex: none; background: transparent; border: 1px solid var(--brass-dk); border-radius: 3px;
  color: var(--muted); font: 600 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 8px; cursor: pointer;
}
.vv-ov-close:hover { color: var(--cream); border-color: var(--brass); }
.vv-ov-body { max-height: min(56vh, 460px); overflow-y: auto; padding: 6px; }
.vv-lead {
  font: 600 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass); padding: 12px 10px 8px;
}

.vv-hit { display: block; padding: 11px 10px; border-radius: 3px; text-decoration: none; }
.vv-hit + .vv-hit { border-top: 1px solid var(--line); }
.vv-hit:hover, .vv-hit:focus-visible { background: rgba(176,141,87,.10); }
.vv-hit-t { display: block; color: var(--cream); font: 600 13.5px/1.3 var(--sans); }
.vv-hit-a { display: block; margin-top: 3px; color: var(--muted); font: 400 12px/1.5 var(--sans); }

.vv-note { padding: 14px 12px; color: var(--cream); font: 400 13px/1.65 var(--sans); }
.vv-note strong { color: var(--brass-lt); font-weight: 600; }
.vv-note a { color: var(--brass-lt); }

/* the Ask panel */
.vv-ask-launch {
  position: fixed; right: 16px; bottom: 16px; z-index: 3900;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: 999px; cursor: pointer;
  background: var(--brass); color: #120e07; border: 0;
  font: 700 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
  transition: background .18s;
}
.vv-ask-launch:hover { background: var(--brass-lt); }
.vv-ask-dot { width: 6px; height: 6px; border-radius: 50%; background: #120e07; }

.vv-ask {
  position: fixed; right: 16px; bottom: 68px; z-index: 3950;
  width: min(370px, calc(100vw - 32px));
  display: flex; flex-direction: column;
  max-height: min(560px, calc(100vh - 110px));
  background: var(--deeper); border: 1px solid var(--brass-dk); border-radius: 5px;
  box-shadow: 0 24px 60px rgba(0,0,0,.65); overflow: hidden;
}
.vv-ask-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.vv-ask-title { font: 600 10px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--brass); }
.vv-ask-x { background: transparent; border: 0; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
.vv-ask-x:hover { color: var(--cream); }

.vv-ask-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.vv-b { font: 400 13px/1.6 var(--sans); border-radius: 4px; padding: 10px 12px; max-width: 92%; }
.vv-b p { margin: 0 0 8px; }
.vv-b p:last-child { margin-bottom: 0; }
.vv-b--bot { align-self: flex-start; background: #0d0c0a; border: 1px solid var(--line); color: var(--cream); }
.vv-b--me  { align-self: flex-end;  background: rgba(176,141,87,.16); border: 1px solid var(--brass-dk); color: var(--cream); }
.vv-b a { color: var(--brass-lt); }
.vv-go { display: inline-block; font-weight: 600; text-decoration: none; }
.vv-go:hover { text-decoration: underline; }
.vv-also { color: var(--muted); font-size: 12px; }

.vv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vv-chip {
  background: transparent; border: 1px solid var(--brass-dk); border-radius: 999px;
  color: var(--brass-lt); font: 500 11.5px/1 var(--sans); padding: 7px 11px; cursor: pointer;
  text-align: left;
}
.vv-chip:hover { background: rgba(176,141,87,.14); color: var(--cream); }

.vv-ask-form { flex: none; display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.vv-ask-in {
  flex: 1; min-width: 0; background: #0d0c0a; border: 1px solid var(--line); border-radius: 3px;
  color: var(--cream); font: 400 13px/1.3 var(--sans); padding: 9px 10px;
}
.vv-ask-in::placeholder { color: var(--muted); }
.vv-ask-in:focus { outline: none; border-color: var(--brass-dk); }
.vv-ask-go {
  flex: none; width: 38px; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--brass); color: #120e07; font-size: 15px; line-height: 1;
}
.vv-ask-go:hover { background: var(--brass-lt); }

@media (max-width: 560px) {
  /* the bar is already tight on a phone; the magnifier goes next to the burger */
  .vv-search-btn { width: 32px; height: 32px; margin-left: 6px; }
  .vv-ask-launch { right: 12px; bottom: 12px; padding: 10px 14px; font-size: 11px; }
  .vv-ask { right: 12px; left: 12px; width: auto; bottom: 60px; max-height: calc(100vh - 96px); }
}
@media (prefers-reduced-motion: reduce) {
  .vv-search-btn, .vv-ask-launch, .vv-hit { transition: none; }
}

/* ── FAQ ─────────────────────────────────────────────────────────────────────
   Deliberately quiet. This sits between Hours and the footer, where someone goes
   looking for it rather than being sold it, so it is a hairline list rather than
   a row of cards: no fills, no radius, no shadow. The only colour is the brass
   marker, which turns cream when a question is open. */
.faq { border-top: 1px solid var(--line); }
.faq-list { border-top: 1px solid var(--line); }

.faq-q { border-bottom: 1px solid var(--line); }
.faq-q > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 2px;
  font: 500 15px/1.45 var(--sans); color: var(--cream);
  transition: color .18s;
}
.faq-q > summary::-webkit-details-marker { display: none; }
/* the marker is drawn, not a glyph, so it can rotate without a font dependency */
.faq-q > summary::before {
  content: ''; flex: none; width: 9px; height: 9px; margin-top: 7px;
  border-right: 1.5px solid var(--brass); border-bottom: 1.5px solid var(--brass);
  transform: rotate(-45deg); transition: transform .22s ease, border-color .18s;
}
.faq-q[open] > summary::before { transform: rotate(45deg); border-color: var(--brass-lt); }
.faq-q > summary:hover { color: var(--brass-lt); }
.faq-q > summary:focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 2px; }

.faq-a { padding: 0 0 20px 23px; max-width: 68ch; }
.faq-a p { margin: 0 0 10px; font: 400 13.5px/1.75 var(--sans); color: var(--muted); }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a strong { color: var(--cream); font-weight: 600; }
.faq-a a { color: var(--brass-lt); }

.faq-foot {
  margin: 26px 0 0; font: 400 12.5px/1.7 var(--sans); color: var(--muted);
}
.faq-foot a { color: var(--brass-lt); }

@media (prefers-reduced-motion: reduce) {
  .faq-q > summary, .faq-q > summary::before { transition: none; }
}
@media (max-width: 560px) {
  .faq-q > summary { font-size: 14px; padding: 16px 2px; gap: 12px; }
  .faq-a { padding-left: 21px; }
}

/* ── Testimonials ────────────────────────────────────────────────────────────
   Two rows drifting in opposite directions. Everything is on the page at once,
   nothing swaps, and the movement is slow enough to read against rather than
   chase: a full pass takes about a minute.

   The loop works because each row contains the same set of cards twice and moves
   exactly -50%. At the end of the keyframe the second set sits precisely where
   the first started, so resetting to 0 is invisible. Any other distance, or an
   odd number of sets, produces a visible jump. */
.say { border-top: 1px solid var(--line); padding-block: 0; overflow: hidden; }
/* the sec-head is the site-wide kicker + H2 pair; it was a bare kicker here, which
   is why the label read as small and easy to miss against every other section */
.say .wrap { padding-block: clamp(26px, 3vw, 44px) clamp(18px, 2vw, 26px); }

.mq {
  position: relative;
  padding-bottom: clamp(24px, 2.8vw, 36px);
  display: grid; gap: 14px;
  /* the rows run full-bleed, so they are faded out at both edges instead of
     being cut off square by the viewport */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.mq-row {
  display: flex; width: max-content; gap: 14px;
  animation: mq-drift 62s linear infinite;
  will-change: transform;
}
.mq-row--rev { animation-direction: reverse; }
.mq-set { display: flex; gap: 14px; }

/* -25% = exactly one of the four sets in each row. Must stay in step with the
   number of .mq-set copies in the markup, or the loop visibly jumps. */
@keyframes mq-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-25%, 0, 0); }
}

/* The testimonial rows NEVER pause either, same reasoning: two rows drifting in
   opposite directions across the full width are almost impossible to move a
   pointer past without stopping one of them, which read as the animation being
   broken. Nothing inside is focusable, so :focus-within was dead too. */

.mq-item {
  margin: 0; width: clamp(272px, 24vw, 340px);
  display: grid; align-content: start; gap: 14px;
  padding: 20px 22px;
  background: linear-gradient(160deg, #100e0c 0%, #0a0908 100%);
  border: 1px solid var(--line);
  transition: border-color .3s ease, transform .3s ease;
}
.mq-item:hover { border-color: var(--brass-dk); transform: translateY(-3px); }

.mq-item blockquote { margin: 0; }
.mq-item blockquote p {
  margin: 0; color: var(--cream);
  font: 400 italic 14.5px/1.7 var(--serif); text-wrap: pretty;
  /* Real curly quotes, generated rather than typed into the markup so the copy
     stays clean and the pair can never end up mismatched. Set at the text's own
     size on purpose: an earlier pass used a 46px decorative opening mark, and
     Bodoni's quote glyph is small and sits high, so blown up it read as two
     stray dots floating above the first line rather than as punctuation. */
  quotes: '\201C' '\201D';
}
.mq-item blockquote p::before { content: open-quote; }
.mq-item blockquote p::after  { content: close-quote; }

.mq-item figcaption {
  display: flex; align-items: center; gap: 11px;
  padding-top: 13px; border-top: 1px solid var(--line);
  color: var(--brass); font: 600 9.5px/1 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
}
.mq-mono {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 34% 28%, #1e1813 0%, #0b0a08 72%);
  border: 1px solid var(--brass-dk);
  color: var(--brass-lt);
  font: 400 12px/1 var(--serif); letter-spacing: .04em; text-transform: none;
}

@media (max-width: 560px) {
  .mq-item { width: clamp(244px, 74vw, 290px); padding: 17px 18px; }
  .mq-item blockquote p { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  /* no drift: one set per row, scrollable by hand */
  .mq-row { animation: none; width: 100%; overflow-x: auto; scrollbar-width: thin; }
  .mq-row .mq-set + .mq-set { display: none; }
  .mq-item { transition: none; }
  .mq-item:hover { transform: none; }
}

/* The neighbourhood under the street address. Both names are how people actually
   search for the room, and until now neither appeared in any body copy, only in a
   page title and a guest quote. */
.addr-hood {
  margin: 6px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brass);
}

/* ── Block party page ──────────────────────────────────────────────────────
   Reuses the .sunday section frame, so only the three blocks unique to an
   event needed new rules: the fact strip, the what-is-on cards, and the two
   ticket types. */
.bp-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; margin: 0; padding: 0;
  background: var(--line); border: 1px solid var(--line);
}
.bp-facts > div { background: var(--deeper); padding: 16px 18px; }
.bp-facts dt {
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass); margin: 0 0 5px;
}
.bp-facts dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--cream); }

.bp-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}
.bp-card { border: 1px solid var(--line); background: var(--raised); padding: 20px 20px 22px; }
.bp-card h3 {
  margin: 0 0 8px; font-family: var(--sans); font-size: 12px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brass-lt);
}
.bp-card p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--muted); }

.bp-tix { margin: 0; display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bp-tix > div { border-left: 2px solid var(--brass-dk); padding-left: 18px; }
.bp-tix dt {
  font-family: var(--serif); font-size: 21px; color: var(--cream); margin: 0 0 8px;
}
.bp-tix dd { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--muted); }

@media (max-width: 860px) {
  .bp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-tix   { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .bp-facts { grid-template-columns: 1fr; }
  .bp-grid  { grid-template-columns: 1fr; }
}

/* An inline block-party flag inside another page's flow. Brass rule on the left so
   it reads as a caveat attached to the thing above it, not a new section. */
.bp-inline {
  margin: 18px 0 0; padding: 12px 0 12px 16px;
  border-left: 3px solid var(--brass);
  font-size: 14.5px; line-height: 1.6; color: var(--cream);
}
.bp-inline strong { color: var(--brass-lt); }
.bp-inline a { color: var(--brass); font-weight: 700; white-space: nowrap; }
.bp-inline a:hover { color: var(--brass-lt); }

/* ── Block party promo (homepage) ──────────────────────────────────────────
   A full section rather than a strip. The thin band it replaced sat between the
   ticker and the fixtures and read as chrome; at this size it reads as the offer
   it is. Same scrim technique as the page heads, because the photo underneath is
   busy and the type has to hold over it. */
.bp-promo { position: relative; overflow: hidden; isolation: isolate; }
.bp-promo-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%; z-index: -2;
}
.bp-promo-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(5,5,4,.94) 0%, rgba(5,5,4,.86) 46%, rgba(5,5,4,.55) 78%, rgba(5,5,4,.45) 100%),
    linear-gradient(to bottom, rgba(5,5,4,.55) 0%, rgba(5,5,4,.2) 40%, rgba(5,5,4,.7) 100%);
}
.bp-promo-inner { padding-block: clamp(52px, 8vw, 92px); }

.bp-promo-date {
  margin: 0 0 14px; display: inline-block;
  font-family: var(--sans); font-size: 11px; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase; color: #17120e;
  background: var(--brass); padding: 6px 12px;
}
.bp-promo-date span { opacity: .72; }

.bp-promo-h {
  margin: 0 0 18px; font-family: var(--serif); font-weight: 600;
  font-size: clamp(38px, 6.6vw, 82px); line-height: .98; letter-spacing: -.01em;
  color: var(--cream); text-wrap: balance;
}
.bp-promo-sub {
  margin: 0 0 22px; max-width: 46ch;
  font-size: clamp(15px, 1.35vw, 17px); line-height: 1.65; color: #e6ddcd;
}

.bp-promo-facts {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 10px;
}
.bp-promo-facts li {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brass-lt);
  border: 1px solid var(--brass-dk); padding: 7px 12px;
}

.bp-promo-cta { margin: 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bp-promo-note { font-size: 12px; letter-spacing: .04em; color: var(--muted); max-width: 30ch; }

@media (max-width: 720px) {
  /* Bottom-weighted on a phone: the photo keeps its head room and the type sits
     on the darkest part of the scrim. */
  .bp-promo-scrim {
    background: linear-gradient(to bottom, rgba(5,5,4,.42) 0%, rgba(5,5,4,.72) 45%, rgba(5,5,4,.95) 100%);
  }
  .bp-promo-img { object-position: 50% 30%; }
  .bp-promo-sub { max-width: none; }
  .bp-promo-cta { flex-direction: column; align-items: flex-start; gap: 12px; }
  .bp-promo-note { max-width: none; }
}

/* ── Block party offer inside the roster prompt ────────────────────────────
   Shown once, to someone who has just declined the roster. It reuses the roster
   card's own type so it reads as the same conversation continuing, not a second
   pop-up stacked on the first. */
.roster-bp { text-align: center; }
.roster-bp .btn { width: 100%; }
.roster-bp-facts {
  list-style: none; margin: 0 0 20px; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 8px;
}
.roster-bp-facts li {
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--brass-lt);
  border: 1px solid var(--brass-dk); padding: 5px 9px;
}

/* ── Block party announcement bar ──────────────────────────────────────────
   Sits inside the sticky header, below the nav, so it stays put as the page
   scrolls. Full brass with near-black text: the earlier brass-dk version of this
   measured 2.71:1 and read as another dark stripe, where this is 6.02:1 and reads
   as a promo. Whole bar is the link, so the tap target is the strip on a phone. */
.bp-bar {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 9px 20px; text-decoration: none;
  background: var(--brass); border-top: 1px solid var(--brass-lt);
  transition: background .18s;
}
.bp-bar:hover { background: var(--brass-lt); }

.bp-bar-tag {
  flex: none;
  font-family: var(--sans); font-size: 10px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--brass);
  background: #17120e; padding: 4px 8px;
}
.bp-bar-txt {
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; letter-spacing: .02em;
  color: #17120e; text-align: center;
}
.bp-bar-txt b { font-weight: 800; }
.bp-bar-go {
  flex: none;
  font-family: var(--sans); font-size: 10.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: #17120e;
  border-bottom: 1px solid rgba(23,18,14,.45); padding-bottom: 2px;
}

/* On a phone the strip has to survive next to a hamburger and a Reserve button,
   so the descriptive tail goes and the arrow label shortens. */
@media (max-width: 720px) {
  .bp-bar { gap: 9px; padding: 8px 12px; }
  .bp-bar-txt { font-size: 12px; }
  .bp-bar-more { display: none; }
}
@media (max-width: 420px) {
  .bp-bar-tag { font-size: 9px; padding: 3px 6px; letter-spacing: .1em; }
  .bp-bar-txt { font-size: 11.5px; }
  .bp-bar-go { font-size: 9.5px; letter-spacing: .1em; }
}

/* ── Any Given Sunday block party series ─────────────────────────────────
   Two events side by side, the nearest one flagged. Uses the existing bp-*
   tokens so it sits inside the same visual system as the cards below it. */
.bp-events{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:4px}
.bp-event{border:1px solid var(--line);background:var(--raised);padding:24px 24px 26px;
  display:flex;flex-direction:column}
.bp-event--next{border-color:var(--brass-dk);background:var(--deeper)}
.bp-flag{margin:0 0 12px;font-family:var(--sans);font-size:10px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:#F4761F}
.bp-flag--then{color:var(--muted)}
.bp-event h3{margin:0 0 4px;font-family:var(--serif);font-size:27px;line-height:1.1;color:var(--cream)}
.bp-when{margin:0 0 14px;font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brass-lt)}
.bp-note{margin:0 0 18px;font-size:14.5px;line-height:1.65;color:var(--muted)}
.bp-event .bp-facts--tight{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:20px}
.bp-event .book-cta{margin:auto 0 0}
.bp-event .btn{width:100%}
@media (max-width:860px){
  .bp-events{grid-template-columns:1fr}
}
@media (max-width:560px){
  .bp-event{padding:20px 18px 22px}
  .bp-event h3{font-size:23px}
}

/* ── Rivalry colour on the block party cards ─────────────────────────────
   Official team colours, used as accents only: a split rail across the top
   and a low-alpha wash in each corner. The card body stays in the house
   palette so the section still reads as Victory & Vice, not as a team shop.
   Bears   #0B162A navy / #C83803 orange
   Packers #203731 green / #FFB612 gold
   Falcons #A71930 red  / #A5ACAF silver
   The away NAME is set a few shades lighter than the official primary purely
   so it clears contrast on a near-black card; the rails use the true values. */
.bp-event{position:relative;overflow:hidden;--home-a:#0B162A;--home-b:#C83803;
  border-left:3px solid #C83803;border-right:3px solid var(--away-edge,var(--line))}
.bp-event--gb{--away-a:#203731;--away-b:#FFB612;--away-ink:#3FA468;--away-edge:#2C6B4C}
.bp-event--atl{--away-a:#A71930;--away-b:#A5ACAF;--away-ink:#E23A52;--away-edge:#A71930}
/* split rail: home colours run into away colours on a diagonal seam */
.bp-event::before{content:"";position:absolute;top:0;left:0;right:0;height:7px;
  background:linear-gradient(90deg,
    var(--home-b) 0%, var(--home-b) 28%, var(--home-a) 44%, var(--home-a) 50%,
    var(--away-a) 56%, var(--away-a) 88%, var(--away-b) 100%)}
/* a breath of each team's colour in the top corners, kept very low alpha */
.bp-event::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(105% 68% at 0% 0%, rgba(200,56,3,.30), transparent 70%),
    radial-gradient(90% 58% at 100% 0%, var(--away-glow,transparent), transparent 68%)}
.bp-event--gb{--away-glow:rgba(63,164,104,.24)}
.bp-event--atl{--away-glow:rgba(167,25,48,.30)}
.bp-event > *{position:relative;z-index:1}
.bp-event h3 .t-home{color:#F4761F}
.bp-event h3 .t-away{color:var(--away-ink)}
.bp-event h3 .t-vs{color:var(--muted);font-size:.62em;font-family:var(--sans);
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;vertical-align:.18em;
  margin:0 .12em}
@media (prefers-reduced-motion: no-preference){
  .bp-event{transition:border-color .25s ease}
}
.bp-event--gb:hover{border-right-color:#3FA468}
.bp-event--atl:hover{border-right-color:#E23A52}

/* ── Venue page ──────────────────────────────────────────────────────────────
   ONE room, one gallery. An earlier build split 17 photographs across four titled bands, which
   read as four small galleries rather than one big venue. This is a single uninterrupted mosaic.

   grid-auto-flow: dense is doing the real work. With mixed landscape/portrait tiles, a fixed
   column count always strands a gap at the end (27 grid cells against 4 columns leaves 3), and a
   gap in a photo wall reads as a broken image. Dense lets the browser backfill with later tiles,
   so the wall is solid at every breakpoint without hand-tiling anything. */
.venue-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(190px, 19vw, 300px);
  grid-auto-flow: row dense;
  gap: 12px;
  margin-top: clamp(44px, 6vw, 80px);
}
.v-wide { grid-column: span 2; }
.v-tall { grid-row: span 2; }

.venue-mosaic figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--brass-dk);
  background: var(--deeper);
}
.venue-mosaic .g-open {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: zoom-in;
}
.venue-mosaic .g-open:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.venue-mosaic img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Full colour at rest, unlike the homepage tiles. This page IS the photographs, so muting them
     to keep a block visually tidy would be the wrong trade. */
  transition: transform .5s cubic-bezier(.2,.6,.2,1), filter .4s ease;
}
@media (hover: hover) {
  .venue-mosaic figure:hover img { transform: scale(1.045); filter: brightness(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .venue-mosaic img, .venue-mosaic figure:hover img { transition: none; transform: none; }
}

/* ── The walkthrough film, as the page opener ────────────────────────────────
   Shot on a phone, so 9:16. Given a column of its own with the heading beside it, because left to
   fill the page width it would run past 1,700px tall and push the room itself off the screen. */
.venue-main .film-frame {
  margin: 0;
  display: grid;
  gap: clamp(26px, 4vw, 56px);
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  align-items: center;
}
.film-vid {
  display: block; width: 100%; height: auto;
  aspect-ratio: 9 / 16;
  /* margin-inline, not text-align: a block element ignores inherited centring — the same trap
     that once put the hero wordmark 70px off-centre on a phone. */
  margin-inline: auto;
  border: 1px solid var(--brass-dk);
  background: var(--deeper);
}
.film-h {
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.02;
  margin: 10px 0 18px;
  color: var(--cream);
  text-transform: none;
  letter-spacing: -0.01em;
}
.film-lede {
  color: var(--cream); opacity: .9;
  font-size: clamp(15px, 1.7vw, 19px); line-height: 1.6;
  max-width: 44ch; margin: 0 0 14px;
}
.film-note {
  color: var(--muted);
  font-size: clamp(13px, 1.4vw, 15px); line-height: 1.7;
  max-width: 46ch; margin: 0;
}

@media (max-width: 900px) {
  .venue-main .film-frame { grid-template-columns: 1fr; gap: 26px; }
  .film-vid { max-width: min(100%, 380px); }
  .film-lede, .film-note { max-width: none; }
  .venue-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(150px, 32vw, 230px); gap: 8px; }
  /* A tile spanning both columns is still fine at 2-up; a 2-row tall one starts to dominate. */
  .v-tall { grid-row: span 1; }
}
@media (max-width: 520px) {
  .v-wide { grid-column: span 2; }
}

/* ── Homepage peek ───────────────────────────────────────────────────────────
   Five tiles and a way through to /venue. Deliberately a single even row rather than the mosaic:
   with five tiles the 4-column mosaic leaves a two-cell hole on its last row. */
.gallery-grid--peek {
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: clamp(150px, 17vw, 230px);
}
.gallery-grid--peek .g-hero,
.gallery-grid--peek .g-wide,
.gallery-grid--peek .g-tall { grid-column: span 1; grid-row: span 1; }
.gal-more { margin: clamp(18px, 2.6vw, 26px) 0 0; text-align: center; }
@media (max-width: 760px) {
  .gallery-grid--peek { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(112px, 26vw, 170px); gap: 8px; }
  .gallery-grid--peek figure:last-child { grid-column: span 2; }
}

/* ── Venue header: type, no photograph ───────────────────────────────────────
   A photo header here fought the 17 photographs immediately beneath it. Type gives the wall a
   clean entrance and lets the first real image be one of the room's own.
   Not reusing .page-head: that class exists to lay a scrim over a background image, and every
   rule in it assumes the image is there. */
.venue-head {
  padding: clamp(30px, 4vw, 48px) 0 clamp(22px, 2.8vw, 32px);
  text-align: center;
  border-bottom: 1px solid var(--line);
  /* A whisper of brass off the top edge so the band reads as deliberate rather than as empty
     space left over where a picture used to be. */
  background:
    radial-gradient(120% 90% at 50% -30%, rgba(176,141,87,.16), transparent 62%),
    var(--ground);
}
.venue-head .eyebrow { margin: 0 0 clamp(10px, 1.6vw, 16px); }
.venue-title {
  font-family: var(--serif);
  font-weight: 400;
  /* In line with the house .page-title (clamp(34px, 8vw, 68px)). The first cut ran to 132px,
     which the owner rightly called unnecessarily big: a serif reads larger than the sans at the
     same size, so it sits just under the sans cap rather than above it. */
  font-size: clamp(25px, 3.6vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--cream);
  text-transform: none;
  text-wrap: balance;
}
.venue-rule {
  display: block;
  width: clamp(54px, 7vw, 92px);
  height: 1px;
  margin: clamp(12px, 1.6vw, 16px) auto clamp(10px, 1.4vw, 14px);
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
}
.venue-sub {
  margin: 0 auto;
  max-width: 34ch;
  color: var(--cream);
  opacity: .88;
  font-size: clamp(13px, 1.3vw, 15px);
  line-height: 1.55;
  text-wrap: balance;
}
.venue-addr {
  margin: clamp(8px, 1.1vw, 12px) 0 0;
  color: var(--brass);
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: .18em;
  text-transform: uppercase;
}
/* The film follows the header directly, so it needs its own air. */
.venue-main { padding-top: clamp(34px, 4.5vw, 60px); }


/* Label above the photo wall. Owner: "put something above the photos letting people know those
   are pictures of the bar" — without it the mosaic just starts, and a visitor has no reason to
   read 17 images as this room rather than stock photography. */
.mosaic-head {
  margin: clamp(46px, 6.5vw, 86px) 0 clamp(18px, 2.4vw, 26px);
  text-align: center;
}
.mosaic-head .kicker {
  display: block;
  margin: 0;
  color: var(--brass);
  font-size: clamp(10px, 1.05vw, 12px);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.mosaic-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.1;
  margin: 6px 0 10px;
  color: var(--cream);
  text-transform: none;
}
.mosaic-head .lede {
  text-transform: none;
  margin: 0 auto;
  max-width: 52ch;
  color: var(--muted);
  font-size: clamp(13px, 1.3vw, 15px);
  line-height: 1.65;
  text-wrap: balance;
}
.mosaic-head + .venue-mosaic { margin-top: 0; }

/* ── Hand-written fixture notice ─────────────────────────────────────────────
   For a game the venue is showing that the Fanzo feed does not carry. Deliberately NOT gold:
   .bp-bar directly above it is full brass, and two gold bars stacked read as one confused banner.
   This one is dark with a brass rule, so it sits under the block-party strip rather than fighting
   it for the same attention. */
.fixture-note {
  display: block;
  background: linear-gradient(180deg, rgba(176,141,87,.10), rgba(176,141,87,.03));
  border-top: 1px solid var(--brass-dk);
  border-bottom: 1px solid var(--line);
  padding: clamp(14px, 2vw, 20px) 0;
}
.fixture-note .wrap {
  display: flex; align-items: baseline; justify-content: center;
  flex-wrap: wrap; gap: 6px 16px; text-align: center;
}
.fx-tag {
  margin: 0; color: var(--brass);
  font-size: clamp(10px, 1.05vw, 12px); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
}
.fx-line {
  margin: 0; color: var(--cream);
  font-size: clamp(14px, 1.5vw, 17px); line-height: 1.5; text-transform: none;
}
.fx-line b { color: var(--brass-lt); font-weight: 700; }
.fx-go {
  color: var(--cream); opacity: .75; text-decoration: none;
  font-size: clamp(11px, 1.15vw, 13px); letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid var(--brass-dk);
}
.fx-go:hover { opacity: 1; border-bottom-color: var(--brass); }
@media (max-width: 640px) {
  .fixture-note .wrap { flex-direction: column; gap: 7px; }
}

/* The "not in the list below" qualifier on the schedule page. Quieter than the headline so the
   fixture reads first and the caveat second. */
.fx-sub {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: clamp(11px, 1.15vw, 13px);
  letter-spacing: .02em;
}


/* ── 2026-10-09: every page linked from the footer (the top menu was trimmed to six) ── */
footer.foot .foot-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
  max-width: 760px; margin: 22px auto 0;
}
footer.foot .foot-links a {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cream); opacity: .78; text-decoration: none; padding: 6px 0;
}
footer.foot .foot-links a:hover, footer.foot .foot-links a[aria-current] { color: var(--brass-lt); opacity: 1; }