/* lounge/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: lounge — 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: #0E0D0B;
  --surface: #1C1915;
  --ink: #F2EDE4;
  --muted: #BDB2A0;
  --line: #2C2822;
  --voltage: #E8B34B;
  --voltage-text: #E8B34B;
  --on-voltage: #0E0D0B;
  --glow: color-mix(in srgb, var(--voltage) 14%, transparent);
}
/* >>> END generated block — hand-authored CSS below is yours <<< */

/* ---- structural layer (hand-authored — M4-C8b) ---------------------------------------
   ⚠ This is the BOUNDED structural layer §3 grants a theme: the ~20% of layout character
   tokens cannot express. Lounge's idiom (DESIGN.md §8: "dark and warm — near-black, amber";
   theme.json: "the dark room IS the theme; the brand becomes the glow") is a night-venue
   room: soft 18px-radius panels floating on a near-black canvas, 1px hairlines, amber
   micro-labels with wide tracking, an amber glow where the brand touches a surface, and a
   hero that FADES into the canvas instead of sitting behind a rule. It restyles blocks; it
   never adds, removes or reorders one (the §3.1 fence). Geometry lives in `assets/hub.css`.
   Every (fg, bg) pair below was MEASURED via themes/engine.mjs `ratio` at authoring
   (2026-08-29-main-5): ink 16.66 / muted 9.29 / amber 10.16 on canvas; ink 15.02 /
   muted 8.37 / amber 9.16 on surface; ink 13.11 / muted 7.31 / amber 7.99 on the 14%%
   glow band; canvas-on-amber 10.16 — all ≥ their §4.1 floors. */

/* Typefaces. Hand-authored, not generated — `fonts` is a theme.json sibling key the builder
   does not read (same split as Poster). Faces: Inter Tight (display, variable 100–900) and
   Inter (body, variable) — DESIGN.md §5.2 pairing 3; Inter was judged-and-kept against the
   reflex-reject list (theme.json `_fonts_note`). The "Fallback" entries are the S8/MUST-6
   metric-override faces generated into assets/fonts.css. */
:root {
  --font-display: "Inter Tight", "Inter Tight Fallback", system-ui, sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, sans-serif;
  --radius-card: 18px;   /* Lounge is soft-edged — rounded panels, not printed rules */
  --radius-pill: 100px;
}

/* ── BLOCK 1 · STATUS — a glow band, not an inversion. Lounge does NOT colour the status
      word (operator-ruled 2026-08-29: --status-open/--status-closed stay unset); the word is
      --ink and the room answers with warmth — the brand's 14% glow behind the line, a
      hairline above and below. Ink 13.11 / muted 7.31 / amber 7.99 on the band (measured). */
[data-theme="lounge"] #hub-status { background: var(--glow);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
[data-theme="lounge"] #hub-status .line { font: 600 13px/1 var(--font-body);
  letter-spacing: .1em; text-transform: uppercase; }
[data-theme="lounge"] #hub-status .till { color: var(--muted); font-weight: 500;
  text-transform: none; letter-spacing: 0; }
[data-theme="lounge"] #hub-status .is-exceptional .msg { font: 500 15px/1.4 var(--font-body);
  padding-bottom: 2px; }
[data-theme="lounge"] #hub-status .is-exceptional .line { border-top: 1px solid var(--line); }
[data-theme="lounge"] #hub-status details { border-top: 1px solid var(--line); }
[data-theme="lounge"] #hub-status summary { font: 600 12px/1 var(--font-body);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
[data-theme="lounge"] #hub-status .week > div { font: 500 13px/1.7 var(--font-body); color: var(--muted); }
[data-theme="lounge"] #hub-status .week > div.today { color: var(--ink); font-weight: 600; }
[data-theme="lounge"] #hub-status .hours-note { font: 500 12px/1.5 var(--font-body);
  color: var(--muted); padding-top: 4px; }

/* ── BLOCK 2 · IDENTITY — the name glows over a room that fades to black. The masthead sits
      above the hero (skeleton order); the hero's bottom edge dissolves into the canvas via a
      gradient inside the hero container, so the photo reads as the room's ambient light
      rather than a framed rectangle. */
[data-theme="lounge"] .masthead .kicker { font: 600 12px var(--font-body);
  letter-spacing: .3em; text-transform: uppercase; color: var(--voltage-text); }
[data-theme="lounge"] .masthead h1 { font: 800 52px/1.02 var(--font-display);
  letter-spacing: -.02em; margin: 8px 0 4px; }
[data-theme="lounge"] .masthead .sub { font: 500 13.5px var(--font-body);
  color: var(--muted); padding: 6px 0 12px; }
[data-theme="lounge"] #hub-identity .hero { position: relative; }
[data-theme="lounge"] #hub-identity .hero::after { content: ""; position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14,13,11,0) 55%, rgba(14,13,11,.55) 85%, var(--canvas) 100%); }
[data-theme="lounge"] .intro { font: 400 16.5px/1.65 var(--font-body); }
[data-theme="lounge"] .intro b { color: var(--voltage-text); font-weight: 600; }

/* ── shared furniture — a tight display heading with an amber last word; no rules, the dark
      does the separating. */
[data-theme="lounge"] #hub-whatson h2,
[data-theme="lounge"] #hub-menu h2,
[data-theme="lounge"] #hub-reach h2 { font: 700 26px/1.05 var(--font-display);
  letter-spacing: -.01em; padding-bottom: 10px; }
[data-theme="lounge"] #hub-whatson h2 span,
[data-theme="lounge"] #hub-menu h2 span,
[data-theme="lounge"] #hub-reach h2 span { color: var(--voltage-text); }

/* ── BLOCK 3 · WHAT'S ON — soft panels; the amber micro-label is the wayfinding voice. */
[data-theme="lounge"] #hub-whatson .row { background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-card); padding: 14px 16px; margin-bottom: 12px; }
[data-theme="lounge"] #hub-whatson .when { font: 600 12px var(--font-body);
  letter-spacing: .2em; text-transform: uppercase; color: var(--voltage-text); }
[data-theme="lounge"] #hub-whatson .row h3 { font: 700 20px/1.2 var(--font-display); margin: 3px 0 4px; }
[data-theme="lounge"] #hub-whatson .row p { font-size: 14.5px; color: var(--muted); line-height: 1.5; }

/* ── §7.3 · the no-photo fallback — a lit panel, not a void: surface fill, hairline, the
      name in the display face, hours in amber. Three contexts, same component (C8a's rule). */
[data-theme="lounge"] .nofoto { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); }
[data-theme="lounge"] .nofoto b { font: 700 12px/1.15 var(--font-display); letter-spacing: -.01em; }
[data-theme="lounge"] .nofoto span { font: 500 9px/1.3 var(--font-body);
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
[data-theme="lounge"] .nofoto .hrs { color: var(--voltage-text); }
[data-theme="lounge"] #hub-identity .hero .nofoto { border-width: 0 0 1px 0; border-radius: 0;
  padding: 18px; background: linear-gradient(160deg, #171512, var(--surface)); }
[data-theme="lounge"] #hub-identity .hero .nofoto b { font-size: 32px; }
[data-theme="lounge"] #hub-identity .hero .nofoto span { font-size: 13px; }
[data-theme="lounge"] .card-img .nofoto { justify-content: center; align-items: center;
  text-align: center; gap: 6px; padding: 16px; border: none; border-radius: 0; }
[data-theme="lounge"] .card-img .nofoto b { font-size: 21px; }
[data-theme="lounge"] .card-img .nofoto span { font-size: 12px; }

/* ── BLOCK 4 · MENU PREVIEW — one panel, hairline rows, amber prices. */
[data-theme="lounge"] #hub-menu .mrow { border-bottom: 1px solid var(--line); }
[data-theme="lounge"] #hub-menu .mrow .n { font: 600 15.5px var(--font-body); }
[data-theme="lounge"] #hub-menu .mrow .p { font: 700 15px var(--font-display); color: var(--voltage-text); }
[data-theme="lounge"] #hub-menu .see-all { font: 600 14px var(--font-body);
  letter-spacing: .14em; text-transform: uppercase; color: var(--voltage-text);
  text-decoration: none; }

/* ── BLOCK 5 · OPT-IN — the one deliberately LIT panel on the page: a warm gradient card
      with the glow behind it. NOT an inversion — the canvas is already the dark; ink 15.63 /
      muted 8.71 / amber 9.53 on its darkest stop (measured on #171512). §7.4's fence holds:
      the band is never --voltage. */
[data-theme="lounge"] #hub-optin { background: linear-gradient(160deg, #171512, var(--surface));
  border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: 0 12px 40px -12px var(--glow); }
[data-theme="lounge"] #hub-optin h2 { font: 700 26px/1.05 var(--font-display); padding-bottom: 7px; }
[data-theme="lounge"] #hub-optin h2 span { color: var(--voltage-text); }
[data-theme="lounge"] #hub-optin p { font: 400 15.5px/1.55 var(--font-body); margin: 10px 0 16px;
  color: var(--muted); }

/* ── BLOCK 6/5 buttons — rounded bars; the primary is the amber in the room. Label is 17px
      bold = large text on a voltage fill graded 4.5 (measures 10.16, The Voltage-Label Rule
      is cleared with headroom); secondaries are quiet panels. */
[data-theme="lounge"] #hub-reach .btn,
[data-theme="lounge"] #hub-optin .btn { display: block; width: 100%; text-align: center;
  padding: 15px 20px; margin-bottom: 10px; border-radius: 14px; border: 1px solid var(--line);
  font: 600 15px var(--font-body); background: var(--canvas); color: var(--ink); }
[data-theme="lounge"] #hub-reach .btn-primary,
[data-theme="lounge"] #hub-optin .btn-invert { font-size: 17px; font-weight: 700;
  background: var(--voltage); border-color: var(--voltage); color: var(--on-voltage);
  box-shadow: 0 6px 30px -6px var(--glow); }
[data-theme="lounge"] #hub-reach { background: linear-gradient(160deg, #171512, var(--surface));
  border: 1px solid var(--line); border-radius: var(--radius-card); padding: 22px 18px; }
[data-theme="lounge"] #hub-reach address { font: 400 15px var(--font-body); color: var(--muted); }
[data-theme="lounge"] #hub-reach .hrs-line { font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/* ── BLOCK 7 · FOOTER — quiet, lowercase room-note; amber only on the social links. */
[data-theme="lounge"] #hub-footer { border-top: 1px solid var(--line);
  font: 500 13px var(--font-body); color: var(--muted); }
[data-theme="lounge"] #hub-footer .soc a { color: var(--voltage-text); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }
[data-theme="lounge"] #hub-footer .mark { color: var(--muted); }

/* ── the bottom nav — the room's edge: near-black blur, hairline, amber for where you are,
      the chat cell as a floating amber pill (the skeleton's lift is kept — Lounge rounds it).
      Nav labels are UI components at 3:1 (§7.5); muted 9.29 and amber 10.16 on canvas. */
[data-theme="lounge"] .bottom-nav { background: rgba(14,13,11,.92);
  border-top: 1px solid var(--line); backdrop-filter: blur(10px); }
[data-theme="lounge"] .bottom-nav a { color: var(--muted); font: 600 11px var(--font-body);
  letter-spacing: .08em; text-transform: uppercase; gap: 4px; }
[data-theme="lounge"] .bottom-nav a svg { width: 19px; height: 19px; }
[data-theme="lounge"] .bottom-nav a[aria-current="page"] { color: var(--voltage-text); }
[data-theme="lounge"] .bottom-nav a.chat .ico { background: var(--voltage); color: var(--on-voltage);
  border-radius: var(--radius-pill); box-shadow: 0 4px 18px -2px var(--glow); }
[data-theme="lounge"] .bottom-nav a.chat span { color: var(--voltage-text); }

/* An opt-in anchor with no band must not paint a lit panel — the background is the theme's,
   so the theme clears it (same rule as Poster's :empty reset). */
[data-theme="lounge"] #hub-optin:empty { background: none; border: none; box-shadow: none; }

/* ── THE FOUR LIST/DETAIL ROUTES · Lounge's character ─────────────────────────────────
   /specials, /events, /menu, /location. Same room idiom as the home blocks: soft panels,
   hairlines, amber wayfinding labels. Geometry stays in `assets/hub.css`. */

/* Page masthead — left-aligned, tight display face, no rule; the dark separates. */
[data-theme="lounge"] .page-head { text-align: left; padding-bottom: var(--s3); }
[data-theme="lounge"] .page-head h1 { font: 800 40px/1.02 var(--font-display); letter-spacing: -.02em; }
[data-theme="lounge"] .page-head p { font: 400 15.5px/1.5 var(--font-body); color: var(--muted); margin-top: var(--s2); }

/* Cards — the hub.css card is already a rounded surface panel; Lounge warms its edges. */
[data-theme="lounge"] .card:hover { border-color: color-mix(in srgb, var(--voltage) 45%, transparent); }
[data-theme="lounge"] .card h2 { font: 700 21px/1.15 var(--font-display); }
[data-theme="lounge"] .card .badge { font: 600 10px var(--font-body); letter-spacing: .12em;
  background: var(--glow); border: 1px solid color-mix(in srgb, var(--voltage) 35%, transparent);
  color: var(--voltage-text); }
[data-theme="lounge"] .card .badge.sold-out { background: none; color: var(--muted);
  border-color: color-mix(in srgb, var(--muted) 40%, transparent); }
[data-theme="lounge"] .card .when { font: 600 12px var(--font-body); text-transform: uppercase;
  letter-spacing: .16em; color: var(--voltage-text); }
[data-theme="lounge"] .card .desc { font-size: 14.5px; line-height: 1.55; }
[data-theme="lounge"] .date-block { background: color-mix(in srgb, var(--canvas) 82%, transparent);
  border: 1px solid var(--line); border-radius: 12px; }
[data-theme="lounge"] .card-toggle { font: 600 12px var(--font-body); text-transform: uppercase;
  letter-spacing: .1em; border-top: 1px solid var(--line); }
[data-theme="lounge"] .also-on a { border-bottom: 1px solid var(--voltage); }

/* The sibling-route link at the list foot. */
[data-theme="lounge"] .cross-link { border: 1px solid var(--line); background: var(--surface);
  font: 600 14px var(--font-body); letter-spacing: .06em; }
[data-theme="lounge"] .cross-link:hover { border-color: var(--voltage); }

/* Empty / error states. */
[data-theme="lounge"] .state h2 { font: 700 24px/1.1 var(--font-display); }

/* Menu — hairline category rules, amber prices, pill jumpbar chips. */
[data-theme="lounge"] .menu-cat > h2 { font: 700 15px var(--font-body); letter-spacing: .12em;
  text-transform: uppercase; color: var(--voltage-text);
  border-bottom: 1px solid var(--line); padding-bottom: var(--s2); }
[data-theme="lounge"] .menu-row { border-bottom: 1px solid var(--line); }
[data-theme="lounge"] .menu-row .mr-name { font: 600 16px var(--font-body); }
[data-theme="lounge"] .menu-row .thumb { border-radius: 12px; border: 1px solid var(--line); }
[data-theme="lounge"] .jumpbar a { border-radius: var(--radius-pill); border: 1px solid var(--line);
  background: var(--surface); font: 600 13px var(--font-body); }
[data-theme="lounge"] .jumpbar a.active { background: var(--voltage); color: var(--on-voltage);
  border-color: var(--voltage); font-weight: 700; }

/* Location — soft panels, amber today-row. */
[data-theme="lounge"] .loc-item { border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface); }
[data-theme="lounge"] .loc-item .li-val { font: 600 16px var(--font-body); }
[data-theme="lounge"] .loc-hours .week > div.today { color: var(--voltage-text); }
[data-theme="lounge"] .socials a { border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); }
[data-theme="lounge"] .socials a:hover { border-color: var(--voltage); }
[data-theme="lounge"] .venue-photo { border: 1px solid var(--line); border-radius: var(--radius-card); }