/* poster/theme.css — M4-C7.
   The block between the markers is GENERATED from theme.json: edit that file and run
   `node static-pages/themes/build-themes.mjs`. harness-lint L34 byte-diffs it, so a hand edit
   inside the markers FAILS the close. Everything below the END marker is hand-authored. */

/* >>> GENERATED by build-themes.mjs from theme.json — do not edit <<< */
/* theme: poster — the art-directed DEFAULT palette. A venue's brand
   hex overrides these at runtime through the same engine; it never reaches this file. */
:root {
  --canvas: #FAFAF7;
  --surface: #FAFAF7;
  --ink: #111111;
  --muted: #3F3F3C;
  --line: #111111;
  --voltage: #D63A10;
  --voltage-text: #9E2A0C;
  --on-voltage: #FFFFFF;
}
/* >>> END generated block — hand-authored CSS below is yours <<< */

/* ---- structural layer (hand-authored — M4-C8a/C6 own this) --------------------------- */

/* Typefaces. These live in the theme's HAND-AUTHORED layer, not in the generated block,
   because `build-themes.mjs` renders `theme.json`'s `tokens` map and `fonts` is a sibling
   key it does not read. Keeping them here rather than in `assets/hub.css` is what makes the
   pair a property of the THEME instead of a property of the skeleton — C8b's themes each
   declare their own and nothing in the shared CSS changes.
   The families must be pool members with a manifest entry and a file on disk; harness-lint
   L37 gates exactly that for every served theme. Faces: Barlow Condensed 700/800,
   Barlow 400/600/700 (DESIGN.md frontmatter type scale). */
:root {
  /* The "<Family> Fallback" entries are the S8/MUST-6 metric-override faces (generated into
     assets/fonts.css): local Arial/Roboto size-adjusted to occupy the same box as the real face,
     so the web-font swap no longer shifts layout. They sit BETWEEN the real family and system-ui —
     used only while the woff2 is in flight or unavailable. */
  --font-display: "Barlow Condensed", "Barlow Condensed Fallback", system-ui, sans-serif;
  --font-body: "Barlow", "Barlow Fallback", system-ui, sans-serif;
  --radius-card: 0px;   /* Poster is hard-edged — DESIGN.md frontmatter `rounded.card` */
  --radius-pill: 100px;
}

/* ---- the seven home blocks · Poster's character (M4-C8a part 2) ---------------------
   ⚠ This is the BOUNDED structural layer §3 grants a theme: the ~20% of layout character
   tokens cannot express. Poster's is a printed-page idiom — heavy horizontal rules, an
   oversized condensed masthead, uppercase display type, and two full-bleed ink inversions.
   It restyles blocks; it never adds, removes or reorders one (the §3.1 fence: no `order`,
   no `grid-row/column/area` on a contract block, no `*-reverse`, no `float`, no
   `display:none` on a required block). Geometry lives in `assets/hub.css`. */

/* ── BLOCK 1 · STATUS — an ink bar. Poster does NOT colour the status word, which is why
      its token set leaves --status-open/--status-closed unset (§4.1: both are optional).
      The word is --canvas on --ink; contrast comes from the inversion, not from a hue. */
[data-theme="poster"] #hub-status { background: var(--ink); color: var(--canvas); }
[data-theme="poster"] #hub-status .line { font: 700 13px/1 var(--font-display);
  letter-spacing: .12em; text-transform: uppercase; }
[data-theme="poster"] #hub-status .till { color: #BDBDB8; font-weight: 600; }
/* §7.1a — exceptional closure. The distinguishing device is the MESSAGE, not a colour, so
   this survives a greyscale render: a nightly close has no `.msg` element at all. The rule
   above it separates news from schedule. */
[data-theme="poster"] #hub-status .is-exceptional .msg { font: 500 15px/1.4 var(--font-body);
  padding-bottom: 2px; }
[data-theme="poster"] #hub-status .is-exceptional .line { border-top: 1px solid rgba(250,250,247,.22); }
[data-theme="poster"] #hub-status details { border-top: 1px solid rgba(250,250,247,.22); }
[data-theme="poster"] #hub-status summary { font: 600 12px/1 var(--font-display);
  letter-spacing: .14em; text-transform: uppercase; color: #BDBDB8; }
[data-theme="poster"] #hub-status .week > div { font: 500 13px/1.7 var(--font-body); color: #E6E6E1; }
[data-theme="poster"] #hub-status .week > div.today { color: #fff; font-weight: 700; }
[data-theme="poster"] #hub-status .hours-note { font: 500 12px/1.5 var(--font-body); color: #E6E6E1; padding-top: 4px; }

/* ── BLOCK 2 · IDENTITY — the masthead is the loudest thing on the page. */
[data-theme="poster"] .masthead { border-bottom: 4px solid var(--line); }
[data-theme="poster"] .masthead .kicker { font: 700 14px var(--font-display);
  letter-spacing: .3em; text-transform: uppercase; color: var(--voltage-text); }
[data-theme="poster"] .masthead h1 { font: 800 84px/0.86 var(--font-display);
  text-transform: uppercase; letter-spacing: -.01em; margin: 6px 0 2px; }
[data-theme="poster"] .masthead .sub { font: 700 14px var(--font-display);
  letter-spacing: .18em; text-transform: uppercase; padding: 8px 0 12px;
  border-top: 2px solid var(--line); margin-top: 12px; }
[data-theme="poster"] #hub-identity .hero { border-top: 4px solid var(--line); }
[data-theme="poster"] #hub-identity .hero img { filter: contrast(1.05) saturate(1.02); }
[data-theme="poster"] .intro { font: 500 18px/1.5 var(--font-body); }
[data-theme="poster"] .intro b { background: var(--ink); color: var(--canvas); padding: 0 5px; }

/* ── shared furniture — the rule under every section heading is the idiom's signature. */
[data-theme="poster"] #hub-whatson h2,
[data-theme="poster"] #hub-menu h2,
[data-theme="poster"] #hub-reach h2 { font: 800 34px/0.95 var(--font-display);
  text-transform: uppercase; border-bottom: 4px solid var(--line); padding-bottom: 8px; }
/* SCOPED to the light blocks: the accent tint must not leak onto an inverted band, where it
   would be voltage-on-ink and fail its contrast floor. */
[data-theme="poster"] #hub-whatson h2 span,
[data-theme="poster"] #hub-menu h2 span,
[data-theme="poster"] #hub-reach h2 span { color: var(--voltage-text); }

/* ── BLOCK 3 · WHAT'S ON */
[data-theme="poster"] #hub-whatson .row { border-bottom: 2px solid var(--line); }
[data-theme="poster"] #hub-whatson .when { font: 700 13px var(--font-display);
  letter-spacing: .2em; text-transform: uppercase; color: var(--voltage-text); }
[data-theme="poster"] #hub-whatson .row h3 { font: 700 23px/1.05 var(--font-display);
  text-transform: uppercase; margin: 2px 0 4px; }
[data-theme="poster"] #hub-whatson .row p { font-size: 14px; color: var(--muted); line-height: 1.45; }

/* ── §7.3 · the no-photo fallback — deliberate at 96px, not a placeholder. */
[data-theme="poster"] .nofoto { border: 2px solid var(--line); }
[data-theme="poster"] .nofoto b { font: 800 12px/0.95 var(--font-display);
  text-transform: uppercase; letter-spacing: -.01em; }
[data-theme="poster"] .nofoto span { font: 600 9px/1.25 var(--font-display);
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
[data-theme="poster"] .nofoto .hrs { color: var(--voltage-text); }
/* At hero size the same component gets room to breathe rather than a second treatment. */
[data-theme="poster"] #hub-identity .hero .nofoto { border-width: 0 0 4px 0; padding: 18px; }
[data-theme="poster"] #hub-identity .hero .nofoto b { font-size: 34px; }
[data-theme="poster"] #hub-identity .hero .nofoto span { font-size: 13px; }
/* ⚠ AND AT CARD SIZE — the THIRD context, added s206 (M4-C8a, operator ruling A).
   `.nofoto` has three boxes but had only two type treatments: the 96px base above, the hero
   directly above this, and the card media slot — which `assets/hub.css` stretches to
   `width/height: 100%` (376x212 at 412px viewport, ~4x the base's area) while inheriting the
   base's 12px/9px type. The result was two corner-pinned labels in a large void: it read as a
   failed embed rather than a deliberate mark, which is exactly what C4 MUST-1 forbids
   ("reads deliberate at thumbnail size"). Measured and judged on the live fixture at 412x823.
   The fix is the same move the hero line makes — give the bigger box its own step — plus a
   centered stack, because at this aspect the space-between of the base component IS the void.
   Geometry is untouched: the slot keeps its reserved 16/9, so MUST-5's recorded 2.74 screens and
   the C8a CLS measurement are unaffected. */
[data-theme="poster"] .card-img .nofoto { justify-content: center; align-items: center;
  text-align: center; gap: 6px; padding: 16px; }
[data-theme="poster"] .card-img .nofoto b { font-size: 22px; }
[data-theme="poster"] .card-img .nofoto span { font-size: 12px; }

/* ── BLOCK 4 · MENU PREVIEW */
[data-theme="poster"] #hub-menu .mrow { border-bottom: 2px solid var(--line); }
[data-theme="poster"] #hub-menu .mrow .n { font: 600 16px var(--font-body); }
[data-theme="poster"] #hub-menu .mrow .p { font: 800 18px var(--font-display); color: var(--voltage-text); }
[data-theme="poster"] #hub-menu .see-all { font: 700 14px var(--font-display);
  letter-spacing: .16em; text-transform: uppercase; color: var(--voltage-text);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* ── BLOCK 5 · OPT-IN — the second ink inversion (§7.4: the band may not be --voltage;
      body prose on a voltage fill cannot reach the 7:1 floor — it measures 4.70). */
[data-theme="poster"] #hub-optin { background: var(--ink); color: var(--canvas); }
[data-theme="poster"] #hub-optin h2 { font: 800 34px/0.95 var(--font-display);
  text-transform: uppercase; border-bottom: 3px solid var(--canvas); padding-bottom: 7px; color: var(--canvas); }
/* An explicit tint rather than --voltage-text: that token is graded against --canvas, and
   here the backdrop is --ink. #F2A88F clears 4.5 on ink at 34px. */
[data-theme="poster"] #hub-optin h2 span { color: #F2A88F; }
[data-theme="poster"] #hub-optin p { font: 500 16px/1.45 var(--font-body); margin: 13px 0 16px; color: #E6E6E1; }

/* ── BLOCK 6/5 buttons — Poster's are hard-edged full-width bars, not pills. */
[data-theme="poster"] #hub-reach .btn,
[data-theme="poster"] #hub-optin .btn { display: block; width: 100%; text-align: center;
  padding: 14px 20px; margin-bottom: 9px; border-radius: 0; border: 2px solid var(--line);
  font: 700 15px var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
/* 19px bold is LARGE text, so the label clears its floor on a voltage fill (§4.2). */
[data-theme="poster"] #hub-reach .btn-primary,
[data-theme="poster"] #hub-optin .btn-invert { font-size: 19px; }
[data-theme="poster"] #hub-reach .btn-primary { border-color: var(--voltage); }
[data-theme="poster"] #hub-optin .btn-invert { border-color: var(--canvas); }
[data-theme="poster"] #hub-reach address { font: 500 16px var(--font-body); }
[data-theme="poster"] #hub-reach .hrs-line { font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/* ── BLOCK 7 · FOOTER */
[data-theme="poster"] #hub-footer { border-top: 4px solid var(--line);
  font: 600 13px var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
[data-theme="poster"] #hub-footer .soc a { color: var(--voltage-text); }
[data-theme="poster"] #hub-footer .mark { color: var(--muted); }

/* ── the bottom nav — shared chrome, restyled to Poster's idiom.
   ⚠ This is the one component here that is NOT home-only: the nav renders on all five routes,
   so this rule changes the other four too. That is correct rather than a leak — the nav is a
   §2.4 component and the theme owns its look everywhere. It is called out because the other
   four routes are still on the pre-M4 body structure, so they now carry a Poster nav under a
   pre-M4 page until their own slice lands.
   The pre-M4 treatment was a translucent blurred bar with a floating circular chat bubble —
   a soft, rounded idiom that reads as a different design system from the hard-edged page above
   it. Poster flattens it: an ink bar, condensed uppercase labels, and the chat cell as a solid
   voltage BLOCK rather than a raised pill. */
[data-theme="poster"] .bottom-nav { background: var(--ink); border-top: 0; backdrop-filter: none; }
[data-theme="poster"] .bottom-nav a { color: #BDBDB8; font: 600 11px var(--font-display);
  letter-spacing: .14em; text-transform: uppercase; gap: 4px; }
[data-theme="poster"] .bottom-nav a svg { width: 19px; height: 19px; }
[data-theme="poster"] .bottom-nav a[aria-current="page"] { color: var(--canvas); }
/* The chat cell: a filled cell, not a raised bubble. `margin-top` and `border-radius` are reset
   explicitly because the skeleton lifts the icon 14px out of the bar. */
[data-theme="poster"] .bottom-nav a.chat { background: var(--voltage); color: var(--on-voltage); }
[data-theme="poster"] .bottom-nav a.chat .ico { background: none; border-radius: 0; padding: 0;
  margin-top: 0; box-shadow: none; }
[data-theme="poster"] .bottom-nav a.chat span { color: var(--on-voltage); }

/* An opt-in anchor with no band must not paint an ink stripe — see the `:empty` reset in
   `assets/hub.css`. The background is the theme's, so the theme clears it. */
[data-theme="poster"] #hub-optin:empty { background: none; }

/* ── THE FOUR LIST/DETAIL ROUTES · Poster's character (M4-C8a part 3) ──────────────────
   /specials, /events, /menu, /location. Same printed-page idiom as the home blocks: an
   oversized condensed masthead under a heavy rule, hard-edged bordered cards, uppercase
   display labels. Geometry stays in `assets/hub.css`; this is character only. */

/* Page masthead — left-aligned like the home masthead, under a 4px rule. */
[data-theme="poster"] .page-head { text-align: left; border-bottom: 4px solid var(--line); padding-bottom: var(--s3); }
[data-theme="poster"] .page-head h1 { font: 800 56px/0.9 var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; }
[data-theme="poster"] .page-head p { font: 500 16px/1.4 var(--font-body); color: var(--muted); margin-top: var(--s2); }

/* Cards — hard-edged, 2px ink border, condensed titles. */
[data-theme="poster"] .card { border: 2px solid var(--line); }
[data-theme="poster"] .card:hover { border-color: var(--voltage); }
[data-theme="poster"] .card h2 { font: 800 26px/0.98 var(--font-display); }
[data-theme="poster"] .card .badge { font: 700 10px var(--font-display); letter-spacing: 0.12em; border-radius: 0; border: 1.5px solid var(--line); background: var(--ink); color: var(--canvas); }
[data-theme="poster"] .card .badge.sold-out { background: none; color: var(--muted); border-color: color-mix(in srgb, var(--muted) 40%, transparent); }
[data-theme="poster"] .card .when { font: 700 13px var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; }
[data-theme="poster"] .card .desc { font-size: 14.5px; line-height: 1.5; }
[data-theme="poster"] .date-block { border-radius: 0; border: 2px solid var(--line); background: var(--canvas); }
[data-theme="poster"] .card-toggle { font: 700 12px var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; border-top: 2px solid var(--line); }
[data-theme="poster"] .also-on a { border-bottom: 2px solid var(--voltage); }

/* The sibling-route link at the list foot. */
[data-theme="poster"] .cross-link { border: 2px solid var(--line); font: 700 14px var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; }
[data-theme="poster"] .cross-link:hover { border-color: var(--voltage); }

/* Empty / error states. */
[data-theme="poster"] .state h2 { font: 800 30px/0.95 var(--font-display); text-transform: uppercase; }

/* Menu — heavy category rules, condensed names, hard-edged jumpbar chips. */
[data-theme="poster"] .menu-cat > h2 { font: 800 15px var(--font-display); letter-spacing: 0.12em; border-bottom: 3px solid var(--line); padding-bottom: var(--s2); }
[data-theme="poster"] .menu-row { border-bottom: 2px solid var(--line); }
[data-theme="poster"] .menu-row .mr-name { font: 600 17px var(--font-body); }
[data-theme="poster"] .menu-row .thumb { border-radius: 0; border: 1.5px solid var(--line); }
[data-theme="poster"] .jumpbar a { border-radius: 0; border: 1.5px solid var(--line); font: 600 13px var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; }
[data-theme="poster"] .jumpbar a.active { background: var(--ink); color: var(--canvas); border-color: var(--ink); }

/* Location — bordered contact rows, condensed values. */
[data-theme="poster"] .loc-item { border: 2px solid var(--line); border-radius: 0; }
[data-theme="poster"] .loc-item .li-val { font: 600 17px var(--font-body); }
[data-theme="poster"] .loc-hours .week > div.today { color: var(--voltage-text); }
[data-theme="poster"] .socials a { border: 2px solid var(--line); border-radius: 0; }
[data-theme="poster"] .socials a:hover { border-color: var(--voltage); }
[data-theme="poster"] .venue-photo { border: 2px solid var(--line); border-radius: 0; }