/* =====================================================================
   Patch Brewing Co. — DESIGN SYSTEM: "Post & Stitch"

   The old VFW post, painted and lettered: navy from the logo and the food
   menu, white on charcoal from the painted taproom gable, the baseball
   stitch from their own tap board, and the koozie red as the ONE colour
   that asks (Reserve, Order, Send). Every token is measured from Patch's
   logo, menu, board, signs or site (docs/brand-evidence.md); creative
   license is registered in docs/design-system.md. Display: Coustard 900
   caps (the logo's PATCH slab). Labels: Bebas Neue (the logo's BREWING).
   Body: Arimo (the menu's Arial). No script. De-twin audit:
   docs/de-twinning-audit.md (Hop On, Brewing Tree, Blue Toad, Don Lupe).
   ===================================================================== */

:root {
  /* palette: "Post & Stitch" (docs/design-system.md; receipts in docs/brand-evidence.md) */
  --field:         #FFFFFF;  /* page field: the food menu's paper, the roadside sign's panel */
  --field-2:       #EEF1F6;  /* alternating bands, chips, text heroes: the menu hairline at 30% over white */
  --paper:         #FFFFFF;  /* cards, tiles, inputs */
  --rule:          #C7D1E0;  /* row hairlines: the food menu's own hairline (decoration only) */
  --sign:          #17366D;  /* MENU NAVY: H1/H2 on light, menu bars, navy bands
                                (11.8:1 on field, 10.4:1 on field-2; white on it 11.8:1) */
  --sign-deep:     #0C276B;  /* SITE NAVY: header, footer, call cell, photo scrims (white on it 13.8:1) */
  --on-sign:       #FFFFFF;  /* the white knockout: type on navy, charcoal and the board */
  --on-sign-soft:  #C7D1E0;  /* secondary legend on navy (7.6 / 9.0), charcoal (6.7), board (12.3) */
  --ink:           #111111;  /* body text and the tap board's ground: the menu's item-name black (18.9:1) */
  --muted:         #555555;  /* descriptions, captions: the menu's description grey (7.5 field, 6.6 field-2) */
  --link:          #17366D;  /* links on light: the menu's navy prices and add-ons (11.8 / 10.4) */
  --link-deep:     #010066;  /* link hover: the logo's own ink (17.6) */
  --ask:           #C0441C;  /* THE ask (Reserve, Order, Send): the koozie red. White label 5.1:1;
                                5.1 against field, 4.5 against field-2; under 3:1 on navy, so a white rim there */
  --ask-deep:      #972C14;  /* ask hover: the koozie's darker quarter (white label 7.8:1) */
  --blue:          #0B3AB2;  /* the glass-print royal; used only as the focus ring on light grounds */
  --focus:         #0B3AB2;  /* focus ring on light (9.3 field, 8.2 field-2) */
  --focus-dark:    #E8BC76;  /* focus ring on navy (7.8), charcoal (5.8), board (10.7), scrimmed photo (3.3+) */

  /* brand tokens: Hop On's names, Patch's meanings */
  --sky:           #E8BC76;  /* PINE (was Hop On's sky): the roadside sign's timber frame. Link hover,
                                current-page underline and the call-bar seam on dark grounds only */
  --navy:          #010066;  /* the logo's ink: the mark itself, favicon, smile-arc stamps on light */
  --barrel:        #3C4147;  /* GABLE CHARCOAL (was barrel wood): the painted VFW post; the gable band (white 10.3:1) */
  --barrel-2:      #545454;  /* STITCH GREY (was barrel badge): the tap board's stitch colour, decoration only */

  /* aliases for the carried skeleton modules (events / shop / age gate) */
  --cream: var(--field); --ink-soft: var(--muted);
  --lavender: var(--link); --lavender-deep: var(--link-deep);
  --lavender-bright: var(--link); --lavender-tint: var(--rule); --lavender-wash: var(--field-2);
  --shutter: var(--sign); --shutter-deep: var(--sign-deep);
  --shutter-tint: var(--rule); --shutter-wash: var(--field-2);
  --sun: var(--ask); --sun-tint: var(--field-2); --door-red: #972C14;
  --footer-ink: var(--sign-deep); --footer-soft: var(--on-sign-soft); --hairline: var(--rule);

  /* type */
  --display: "Coustard", Georgia, "Times New Roman", serif;
             /* H1, H2, menu bars, the gable headline: 900, CAPS. Fallback = the menu's Georgia */
  --label:   "Bebas Neue", "Arial Narrow", "Helvetica Neue", sans-serif;
             /* NEW: the logo's BREWING voice. Dash labels, nav, buttons, tags, tap names */
  --body:    "Arimo", Arial, "Helvetica Neue", Helvetica, sans-serif;
             /* the menu's Arial, metric-compatible: zero layout shift on swap */
  --mono:    "Arimo", Arial, sans-serif;   /* prices, ABV, times, phone: Arimo's figures are tabular */
  --script:  var(--label);                 /* Patch has no script voice; .kicker resolves to the dash label */
  --step--2: clamp(.84rem, .82rem + .1vw, .9rem);
  --step--1: clamp(.94rem, .91rem + .15vw, 1rem);
  --step-0:  clamp(1.04rem, 1rem + .25vw, 1.14rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.25rem + 1vw, 2rem);
  --step-4:  clamp(1.75rem, 1.2rem + 2.6vw, 3.1rem);
  --step-6:  clamp(2.4rem, 1.6rem + 3.8vw, 4.6rem);
  --step-script: clamp(1.15rem, 1.05rem + .5vw, 1.45rem);  /* the dash label (kicker / eyebrow) */
  --step-plank:  clamp(1.55rem, 1rem + 2.9vw, 3.6rem);    /* the gable band's headline */

  --maxw: 74rem;
  --radius: 0;       /* square: the menu's bars, the tap board, the sign, the gable */
  --pill: 999px;     /* NEW: buttons, nav pills, tags: their site's pill nav, the logo bars' rounded ends */
  --border: 2px;     /* the menu's navy rule under the hours line */
  --gutter: clamp(1rem, 4vw, 2rem);
  --sign-ring: none; /* Hop On's inset white ring is retired; dark panels carry the stitch instead */

  /* devices */
  --tilt-badge: 0deg;   /* Patch's marks sit level: their lettering arcs, it never tilts */
  --tilt-ribbon: 0deg;  /* no ribbons */
  --tilt-script: 0deg;  /* no script */
  --star: polygon(50% 0%, 61.2% 34.5%, 97.6% 34.5%, 68.2% 55.9%, 79.4% 90.5%,
                  50% 69.1%, 20.6% 90.5%, 31.8% 55.9%, 2.4% 34.5%, 38.8% 34.5%);
          /* rating stars only (the convention, not a Patch device) */
  --plank-seams: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 43 48'%3E%3Cg opacity='.33' fill='%23fff'%3E%3Cpath d='M6 42.5A33 33 0 0 1 37 6' fill='none' stroke='%23fff' stroke-width='6.5' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='42.5' r='5.5'/%3E%3Ccircle cx='37' cy='6' r='5.5'/%3E%3C/g%3E%3C/svg%3E");
          /* THE STITCH (was plank seams): one tap-board stitch, white at 33% = #545454 on black */
  --outline-ink: none;  /* Hop On's ribbon outline is retired */
  --scrim: 12 39 107;   /* photo scrims in --sign-deep */
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--field); color: var(--ink);
  font-family: var(--body); font-size: var(--step-0); line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: .16em; text-decoration-thickness: .08em; }
a:hover { color: var(--link-deep); text-decoration-thickness: .14em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.site-header :focus-visible, .site-footer :focus-visible, .band--sign :focus-visible,
.band--gable :focus-visible, .board :focus-visible, .bleed-hero :focus-visible,
.callbar :focus-visible { outline-color: var(--focus-dark); }
/* Headings: the logo's PATCH slab (Coustard), always caps, always short. */
h1, h2 {
  font-family: var(--display); font-weight: 900; line-height: 1.02;
  letter-spacing: .02em; margin: 0 0 .45em; color: var(--sign); text-wrap: balance;
  text-transform: uppercase; overflow-wrap: break-word; /* a long town name never widens the phone page */
}
h1 { font-size: var(--step-6); }
h2 { font-size: var(--step-4); }
/* H3: the menu's bold Arial item names. */
h3, .h3 { font-family: var(--body); font-weight: 700; font-size: var(--step-1); line-height: 1.2;
  text-transform: uppercase; letter-spacing: .02em; margin: 0 0 .4em; color: var(--ink); }
p { margin: 0 0 1em; }
.lede { font-size: var(--step-1); line-height: 1.45; max-width: 40rem; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
main { display: block; }
main > section, .wrap { max-width: var(--maxw); margin: 0 auto; padding: clamp(2.2rem, 5vw, 4rem) var(--gutter); }
.band { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
.band-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.band--field2 { background: var(--field-2); }
.band--sign { background: var(--sign); color: var(--on-sign); }
.band--sign h2, .band--sign h3 { color: var(--on-sign); }
.band--sign a:not(.btn) { color: var(--on-sign); }
.band--sign a:not(.btn):hover { color: var(--sky); }
.band--sign .muted { color: var(--on-sign-soft); }
.band-note { margin-top: 1rem; }
.two-col { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.two-col > * { min-width: 0; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ask); color: #fff; padding: .6rem 1rem; z-index: 100; font-weight: 700; }
.skip:focus { left: .5rem; top: .5rem; }
.trap-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- the dash label (the logo's =BREWING=): every eyebrow ---------- */
.dash, .eyebrow, .kicker { display: inline-flex; align-items: center; gap: .55em; margin: 0 0 .7em;
  font: 400 var(--step-script)/1 var(--label); letter-spacing: .26em; text-transform: uppercase; color: var(--sign); }
.dash::before, .dash::after, .eyebrow::before, .eyebrow::after, .kicker::before, .kicker::after {
  content: ""; flex: none; width: .63em; height: .306em; border-radius: 0 .034em .034em 0;
  background: linear-gradient(currentColor, currentColor) 0 0 / 100% .098em no-repeat,
              linear-gradient(currentColor, currentColor) 0 100% / 72% .098em no-repeat; }
.dash::before, .eyebrow::before, .kicker::before { transform: scaleX(-1); }
.band--sign .dash, .band--sign .eyebrow, .band--gable .dash, .band--gable .eyebrow, .bleed-hero .dash, .bleed-hero .eyebrow, .bleed-hero .kicker,
.board .dash, .site-footer .dash,
.board .eyebrow, .site-footer .eyebrow { color: var(--on-sign); }

/* ---------- demo ribbon / announcement bar ---------- */
.demo-ribbon { background: var(--sign); color: #fff; text-align: center; font: 400 .95rem/1.2 var(--label);
  letter-spacing: .12em; text-transform: uppercase; padding: .45rem 1rem; }
.navbar { display: flex; align-items: center; justify-content: center; gap: .8rem; background: var(--field-2);
  color: var(--ink); padding: .55rem 2.6rem; position: relative; font-weight: 700; font-size: var(--step--1); text-align: center; }
.navbar a { color: var(--ink); }
.navbar-close { position: absolute; right: .6rem; background: none; border: 0; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--ink); }

/* ---------- header: site navy, the white lockup, pill nav ---------- */
.site-header { background: var(--sign-deep); color: var(--on-sign); display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; padding: .6rem var(--gutter); position: relative; z-index: 20; }
.brand { display: flex; align-items: center; color: var(--on-sign); text-decoration: none; }
.brand-lockup-img { width: 8rem; height: auto; }
@media (max-width: 40rem) { .brand-lockup-img { width: 6rem; } }
.nav { display: flex; align-items: center; gap: .3rem .5rem; flex-wrap: wrap; justify-content: flex-end; }
.nav a { color: var(--on-sign); text-decoration: none; font: 400 1.15rem/1 var(--label); letter-spacing: .14em;
  text-transform: uppercase; padding: .5rem .8rem .4rem; border: 2px solid transparent; border-radius: var(--pill); }
.nav a:hover { color: var(--sky); }
.nav a[aria-current="page"] { border-color: var(--on-sign); color: var(--on-sign); }
.nav .nav-phone { font: 700 1rem/1 var(--mono); letter-spacing: .01em; white-space: nowrap; text-transform: none; }
.nav a.nav-cta { color: #fff; background: var(--ask); border-color: var(--on-sign); }
.nav a.nav-cta:hover { background: var(--ask-deep); color: #fff; }
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger { display: none; cursor: pointer; padding: .5rem; }
.nav-burger span { display: block; width: 26px; height: 3px; background: var(--on-sign); margin: 5px 0; }
@media (max-width: 62rem) {
  .nav-burger { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--sign-deep);
    flex-direction: column; align-items: stretch; padding: .6rem var(--gutter) 1.2rem; }
  .nav a { padding: .8rem .4rem; border-radius: 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .nav a[aria-current="page"] { border-bottom-color: var(--on-sign); }
  .nav a.nav-cta { text-align: center; margin-top: .7rem; border-radius: var(--pill); border: 2px solid var(--on-sign); }
  .nav-toggle:checked ~ .nav { display: flex; }
  .nav-toggle:focus-visible + .nav-burger { outline: 3px solid var(--focus-dark); }
}

/* ---------- buttons: the koozie red, pill, Bebas Neue ---------- */
.btn, button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 48px;
  font: 400 1.4rem/1 var(--label); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  background: var(--ask); color: #fff; border: var(--border) solid var(--ask); border-radius: var(--pill);
  padding: .55rem 1.4rem .45rem;
}
.btn:hover, button[type="submit"]:hover { background: var(--ask-deep); border-color: var(--ask-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--sign); border-color: var(--sign); }
.btn--ghost:hover { background: var(--sign); border-color: var(--sign); color: #fff; }
.band--sign .btn, .band--gable .btn, .bleed-hero .btn, .board .btn, .site-footer .btn { border-color: var(--on-sign); }
.band--sign .btn--ghost, .band--gable .btn--ghost, .bleed-hero .btn--ghost, .board .btn--ghost { color: #fff; border-color: #fff; }
.band--sign .btn--ghost:hover, .bleed-hero .btn--ghost:hover, .band--gable .btn--ghost:hover { background: #fff; color: var(--sign); }
.btn--sm { font-size: 1.1rem; padding: .45rem 1rem .35rem; min-height: 40px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin: 1.4rem 0 0; }

/* ---------- the roll call (their home-page amenity line) ---------- */
.roll { max-width: none !important; margin: 0; background: var(--sign); color: var(--on-sign);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem .9rem;
  padding: .7rem var(--gutter); font: 400 1.15rem/1.1 var(--label); letter-spacing: .12em; text-transform: uppercase; }
.roll span { white-space: nowrap; }
.roll i { width: .32em; height: .32em; border-radius: 50%; background: currentColor; flex: none; }

/* ---------- the board (their tap board, stitched) ---------- */
.board { position: relative; background: var(--ink); color: var(--on-sign); padding: 3.2rem clamp(1.2rem, 3vw, 2.8rem); overflow: hidden; }
.board::before, .board::after { content: ""; position: absolute; left: 0; right: 0; height: 24px;
  background: var(--plank-seams) 0 0 / 21.5px 24px repeat-x; pointer-events: none; }
.board::before { top: 6px; }
.board::after { bottom: 6px; transform: scaleY(-1); }
.board-mark { position: absolute; inset: 0; margin: auto; width: min(70%, 34rem); opacity: .05; pointer-events: none; }
.taps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem 2.4rem; grid-template-columns: minmax(0, 1fr); position: relative; }
@media (min-width: 48rem) { .taps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tap { text-align: center; }
.tap-name { display: block; font: 400 var(--step-2)/1 var(--label); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.tap-detail { display: block; margin-top: .3rem; color: var(--on-sign-soft); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.tap .tag { margin-top: .45rem; }
.board-foot { position: relative; text-align: center; margin: 1.6rem 0 0; color: var(--on-sign-soft); font-size: var(--step--1); }
.board-foot a { color: #fff; }

/* ---------- tags (pill outlines): medals, kinds ---------- */
.tag { display: inline-block; font: 400 .98rem/1 var(--label); letter-spacing: .1em; text-transform: uppercase;
  border: 1.5px solid currentColor; border-radius: var(--pill); padding: .35em .9em .25em; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: .6rem 0 0; padding: 0; }
.chips { list-style: none; padding: 0; margin: .4rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.chips li { font: 400 1rem/1 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--sign);
  border: 1.5px solid var(--sign); border-radius: var(--pill); padding: .35em .85em .25em; }
.band--sign .chips li { color: #fff; border-color: #fff; }

/* ---------- the menu (their food-menu PDF on screen) ---------- */
.menu-bar { background: var(--sign); color: var(--on-sign); margin: 1.4rem 0 .3rem; padding: .55rem .8rem .5rem;
  font: 900 var(--step-1)/1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.menu-note { font-style: italic; color: var(--muted); font-size: var(--step--1); margin: .3rem 0 .4rem; }
.menu-cols { display: grid; gap: 0 3rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 62rem) { .menu-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.menu-cols > * { min-width: 0; }
.menu { border-top: 6px solid var(--sign); padding-top: .4rem; }
.menu-item { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; padding: .65rem 0; border-bottom: 1px solid var(--rule); }
.menu-item h3 { margin: 0; font-size: 1.1rem; }
.menu-item .price { font: 700 1.1rem/1.2 var(--mono); color: var(--link); white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu-item .desc { grid-column: 1 / -1; color: var(--muted); font-size: var(--step--1); margin: 0; }

/* ---------- the gable band (the painted taproom gable), above every footer ---------- */
.band--gable { --pitch: clamp(2.5rem, 5vw, 4.5rem); position: relative; text-align: center; color: var(--on-sign);
  background: var(--barrel); padding: calc(var(--pitch) + 2.6rem) var(--gutter) 3.2rem;
  clip-path: polygon(0 var(--pitch), 50% 0, 100% var(--pitch), 100% 100%, 0 100%); margin-top: 1.5rem; }
.band--gable .lockup { width: clamp(200px, 22vw, 280px); margin: 0 auto 1.2rem; }
.band--gable h2 { color: var(--on-sign); font-size: var(--step-plank); max-width: 22ch; margin-inline: auto; }
.band--gable p { color: var(--on-sign-soft); }
.band--gable a:not(.btn) { color: #fff; }
.band--gable a[href^="tel:"], .site-footer a[href^="tel:"] { white-space: nowrap; }

/* ---------- the smile-arc stamp (the logo's ESTD 2021 arc) ---------- */
.stamp { width: 220px; max-width: 100%; display: block; fill: var(--sign); margin: .3rem auto 0; }
.stamp text { font: 400 17px var(--label); letter-spacing: 2.2px; }
.band--sign .stamp, .site-footer .stamp { fill: var(--on-sign); }
.portrait { margin: 0; text-align: center; }
.portrait img { width: min(15rem, 70vw); aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 3px solid var(--sign); margin: 0 auto; }

/* ---------- page hero (text) ---------- */
.hero { max-width: none !important; padding: 0 !important; background: var(--field-2); border-bottom: var(--border) solid var(--sign); }
.hero-inner { max-width: var(--maxw); margin: 0 auto; display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(2.4rem, 6vw, 4.2rem) var(--gutter) clamp(2rem, 5vw, 3.2rem); align-items: center; }
@media (min-width: 58rem) { .hero-inner--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.hero-inner > * { min-width: 0; }
.hero h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.8rem); margin-bottom: .35em; }
.hero .lede { max-width: 38rem; }
.hero--page h1 { font-size: var(--step-4); }
.photo-credit { font-size: var(--step--2); color: var(--muted); padding: .4rem 0 0; }

/* ---------- full-bleed photo hero ---------- */
.bleed-hero { max-width: none !important; padding: 0 !important; position: relative; background: var(--sign-deep); color: var(--on-sign); isolation: isolate; }
.bleed-hero-media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: var(--focus-sm, 50% 55%); }
.bleed-hero-inner { max-width: var(--maxw); margin: 0 auto; padding: 1.8rem var(--gutter) 2.2rem; }
.bleed-hero .hero-copy { max-width: 36rem; }
.bleed-hero--home .hero-copy { max-width: 42rem; }
.bleed-hero.bleed-hero--home h1 { font-size: clamp(2.3rem, 1.6rem + 3vw, 4rem); }
.hero-proof { margin: .9rem 0 0; font: 400 var(--step-1)/1.25 var(--label); letter-spacing: .06em; color: var(--on-sign); }
.hero-proof a { color: inherit; text-decoration-color: var(--sky); text-underline-offset: .2em; }
.bleed-hero h1 { color: var(--on-sign); font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.6rem); margin-bottom: .3em; }
.bleed-hero .lede { color: var(--on-sign); }
@media (min-width: 48rem) {
  .bleed-hero { min-height: min(78vh, 46rem); display: grid; }
  .bleed-hero-media { position: absolute; inset: 0; z-index: -2; }
  .bleed-hero-media img { height: 100%; aspect-ratio: auto; object-position: var(--focus, 50% 55%); }
  /* One-sided navy scrim: dark under the copy, clear over the subject. */
  .bleed-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgb(var(--scrim) / .90) 0%, rgb(var(--scrim) / .72) 40%, rgb(var(--scrim) / 0) 66%); }
  .bleed-hero--right::before { background: linear-gradient(270deg, rgb(var(--scrim) / .90) 0%, rgb(var(--scrim) / .72) 40%, rgb(var(--scrim) / 0) 66%); }
  .bleed-hero-inner { width: 100%; align-self: center; padding: clamp(3rem, 8vw, 6rem) var(--gutter); }
  .bleed-hero--right .bleed-hero-inner { display: flex; justify-content: flex-end; }
}
@media (min-width: 48rem) { .bleed-hero--page { min-height: min(58vh, 34rem); } }
.bleed-hero--page .hero-copy { max-width: 32rem; }
.bleed-hero--page h1 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem); }

/* ---------- proof band ---------- */
.proof-band { max-width: none !important; padding: 0 !important; background: var(--field-2); }
.proof-inner { max-width: var(--maxw); margin: 0 auto; padding: 1.8rem var(--gutter) 2rem; display: grid; gap: 1.2rem 2.5rem; align-items: center; }
.proof-inner .lede { margin: 0; }
@media (min-width: 64rem) { .proof-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } .proof-inner .posts { justify-content: flex-end; } }
.posts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .7rem; }
.post { background: var(--sign); color: var(--on-sign); padding: .8rem 1.1rem .75rem; min-width: 8.5rem; text-align: center; }
.post-value { display: block; font: 900 1.9rem/1 var(--display); }
.post-label { display: block; font: 400 .95rem/1.1 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--on-sign-soft); margin-top: .35rem; }
.st { display: inline-block; width: .85em; height: .85em; background: currentColor; clip-path: var(--star); vertical-align: -.06em; }
.st--off { opacity: .28; }
.star { color: #fff; }

/* ---------- tiles, photo rows, a guest's words ---------- */
.tile-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); margin-top: 1.4rem; }
.tile { background: var(--paper); border: 1px solid var(--rule); border-top: 6px solid var(--sign); display: flex; flex-direction: column; }
.tile img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tile-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.tile-body h3 { margin: 0; }
.tile-body p { margin: 0; }
.tile-more { margin-top: auto; padding-top: .4rem; }
.photo-row { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); margin-top: 1.2rem; }
.photo-row figure { margin: 0; }
.photo-row img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.photo-row figcaption { font-size: var(--step--2); padding: .4rem 0 0; color: var(--muted); }
.said { margin: 0; max-width: 46rem; border-left: 6px solid var(--sign); padding: .2rem 0 .2rem 1.2rem; }
.said blockquote { margin: 0; font-size: var(--step-1); line-height: 1.4; }
.said figcaption { font: 400 1rem/1.2 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .5rem; }

/* ---------- rules / FAQ, hours, address ---------- */
.rules { display: grid; gap: .1rem; margin: 1.2rem 0 0; }
.rules > div { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: .4rem 1.2rem; padding: .75rem 0; border-bottom: 1px solid var(--rule); }
@media (max-width: 36rem) { .rules > div { grid-template-columns: 1fr; } }
.rules dt { font-weight: 700; color: var(--sign); }
.rules dd { margin: 0; }
.hours-table { border-collapse: collapse; width: 100%; max-width: 26rem; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.hours-table th, .hours-table td { text-align: left; padding: .5rem 0; border-bottom: 1px solid var(--rule); font-weight: 400; }
.hours-table td { text-align: right; font-weight: 700; }
.site-footer .hours-table th, .site-footer .hours-table td, .band--sign .hours-table th, .band--sign .hours-table td { border-bottom-color: rgba(255,255,255,.2); }
.address { font-style: normal; font-size: var(--step-1); line-height: 1.35; margin: 0 0 1rem; }

/* ---------- forms ---------- */
.request-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.request-tabs a { display: block; font: 400 1.05rem/1 var(--label); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: var(--sign); border: 2px solid var(--sign); border-radius: var(--pill); background: var(--paper); padding: .5rem .9rem .4rem; }
.request-tabs a[aria-current="true"] { background: var(--sign); color: #fff; }
.request-tabs a:hover { border-color: var(--ask); }
.type-note { background: var(--field-2); border-left: 5px solid var(--sign); padding: .8rem 1rem; margin: 0 0 1.2rem; }
.type-note[hidden] { display: none; }
.card { background: var(--paper); border: 1px solid var(--rule); border-top: 6px solid var(--sign); padding: clamp(1.2rem, 3vw, 2rem); }
.booking-form p { margin: 0 0 1rem; display: flex; flex-direction: column; gap: .3rem; }
.booking-form [hidden] { display: none !important; }
.booking-form label { font-weight: 700; }
.booking-form input, .booking-form select, .booking-form textarea, .newsletter-form input {
  font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--sign); border-radius: 0; padding: .6rem .7rem; width: 100%; }
.booking-form .helptext { font-size: var(--step--2); color: var(--muted); }
.booking-form .errorlist { list-style: none; margin: 0; padding: 0; color: var(--door-red); font-weight: 700; font-size: var(--step--1); }
.booking-fineprint { font-size: var(--step--1); color: var(--muted); margin: 1rem 0 0; }
.form-layout { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 60rem) { .form-layout { grid-template-columns: 1.4fr .9fr; align-items: start; } }
.form-layout > * { min-width: 0; }

/* ---------- messages ---------- */
.messages { list-style: none; margin: 0 auto; padding: 1rem var(--gutter) 0; max-width: var(--maxw); }
.msg { background: var(--paper); border: 1px solid var(--rule); border-left: 6px solid var(--sign); padding: .7rem 1rem; }

/* ---------- reviews ---------- */
.rating-line { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.review-stars { color: var(--ink); letter-spacing: .08em; margin: 0 0 .4rem; }
.reviews-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); margin-top: 1.2rem; align-items: start; }
.review { margin: 0; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-top: 6px solid var(--sign); padding: 1.1rem 1.2rem; }
.review blockquote { margin: 0 0 .8rem; }
.review-who { display: flex; gap: .6rem; align-items: center; font-size: var(--step--1); }
.review-who .muted { display: block; font-size: .78rem; }
.avatar { width: 2.1rem; height: 2.1rem; flex: none; display: grid; place-items: center; background: var(--sign); color: #fff; border-radius: 50%; font: 900 1rem/1 var(--display); }
.owner-reply { margin: .9rem 0 0; padding: .7rem .8rem; background: var(--field-2); border-left: 4px solid var(--sign); font-size: var(--step--1); }
.owner-reply-label { font: 400 .9rem/1 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 .3rem; }
.owner-reply p { margin: 0; }
.ratings-strip { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }

/* ---------- /pitch/, /social/ ---------- */
.pitch-lede { font-size: var(--step-1); max-width: 44rem; }
.stats-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.stat { background: var(--paper); border: 1px solid var(--rule); border-top: 6px solid var(--sign); padding: 1rem 1.1rem; }
.stat-value { font: 900 var(--step-4)/1 var(--display); margin: 0 0 .35rem; color: var(--sign); }
.stat-label { margin: 0; font-size: var(--step--1); }
.before-after { display: grid; gap: 1.2rem; }
@media (min-width: 52rem) { .before-after { grid-template-columns: 1fr 1fr; } }
.before-after figure { margin: 0; background: var(--paper); border: 1px solid var(--rule); }
.before-after img { width: 100%; }
.before-after figcaption { padding: .7rem .9rem .9rem; font-size: var(--step--1); }
.ba-label { font: 400 1rem/1 var(--label); letter-spacing: .1em; text-transform: uppercase; margin: 0; padding: .5rem .8rem .4rem; background: var(--sign); color: #fff; }
.ba-label--after { background: var(--ask); }
.pitch-list { list-style: none; counter-reset: pitch; padding: 0; margin: 1.2rem 0 0; display: grid; gap: 1rem; }
.pitch-item { counter-increment: pitch; background: var(--paper); border: 1px solid var(--rule); border-left: 6px solid var(--sign); padding: 1.1rem 1.2rem 1.1rem 4.4rem; position: relative; }
.pitch-item::before { content: counter(pitch); position: absolute; left: 1rem; top: 1rem; display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--sign); color: #fff; font: 900 1.2rem/1 var(--display); }
.pitch-item h3 { margin: 0 0 .4rem; }
.pitch-item p { margin: 0 0 .5rem; }
.pitch-fix { border-top: 1px dashed var(--rule); padding-top: .5rem; }
.pitch-receipt { font-size: .78rem; color: var(--muted); }
.table-scroll { overflow-x: auto; margin-top: 1rem; border: 1px solid var(--rule); background: var(--paper); }
.pitch-table { border-collapse: collapse; width: 100%; min-width: 44rem; font-size: var(--step--1); }
.pitch-table th, .pitch-table td { text-align: left; vertical-align: top; padding: .7rem .8rem; border-bottom: 1px solid var(--rule); }
.pitch-table thead th { background: var(--sign); color: #fff; font: 400 1rem/1 var(--label); letter-spacing: .1em; text-transform: uppercase; }
.cal { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); margin-top: 1.2rem; }
.cal-day { background: var(--paper); border: 1px solid var(--rule); border-top: 4px solid var(--sign); padding: .65rem .75rem .75rem; display: flex; flex-direction: column; gap: .3rem; }
.cal-day--perishable { border-top: 7px solid var(--ink); } /* red is only ever Reserve or Order */
.cal-date { font-size: .8rem; font-weight: 700; color: var(--muted); }
.cal-format { align-self: flex-start; font: 400 .85rem/1 var(--label); letter-spacing: .1em; text-transform: uppercase; background: var(--sign); color: #fff; padding: .25rem .5rem .18rem; border-radius: var(--pill); }
.cal-format--collab { background: var(--barrel); }
.cal-title { margin: 0; font-weight: 700; line-height: 1.25; font-size: var(--step--1); }
.cal-note { margin: 0; font-size: .82rem; color: var(--muted); }
.post-sample { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; margin-top: 1.4rem; }
.post-sample .mono, .cal-note, .caption-box { overflow-wrap: anywhere; }
@media (min-width: 60rem) { .post-sample { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } }
.strip { display: flex; overflow-x: auto; background: var(--ink); scroll-snap-type: x mandatory; }
.strip img { width: min(80%, 20rem); flex: none; aspect-ratio: 4 / 5; object-fit: cover; scroll-snap-align: start; border-right: 1px dashed rgba(255,255,255,.35); }
.caption-box { background: var(--paper); border: 1px solid var(--rule); padding: 1rem 1.1rem; white-space: pre-line; font-size: var(--step--1); }
.storyboard { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); counter-reset: shot; }
.shot { counter-increment: shot; background: var(--paper); border: 1px solid var(--rule); padding: .7rem .8rem; font-size: var(--step--1); }
.shot::before { content: "Shot " counter(shot); display: block; font: 400 .9rem/1 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .25rem; }
.shot-time { font-size: .78rem; color: var(--muted); }

/* ---------- /assessment/ ---------- */
.prose { max-width: 52rem; font-size: var(--step-0); }
.prose h1 { font-size: var(--step-4); margin-top: 2.2rem; }
.prose h2 { font-size: var(--step-2); margin-top: 2.4rem; padding-top: 1.2rem; border-top: var(--border) solid var(--rule); }
.prose h3 { font-size: var(--step-1); margin-top: 1.6rem; }
.prose h4 { font: 400 var(--step-1)/1.1 var(--label); letter-spacing: .08em; margin: 1.2rem 0 .4rem; color: var(--sign); text-transform: uppercase; }
.prose p, .prose li { line-height: 1.6; }
.prose p, .prose li, .prose td, .prose h2, .prose h3, .prose h4 { overflow-wrap: anywhere; } /* receipt paths and URLs */
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }
.prose blockquote { margin: 1rem 0; padding: .8rem 1rem; background: var(--field-2); border-left: 5px solid var(--sign); }
.prose code { font-family: var(--mono); font-size: .86em; background: var(--field-2); padding: .05em .3em; overflow-wrap: anywhere; }
.prose pre { overflow-x: auto; background: var(--paper); border: 1px solid var(--rule); padding: .8rem; }
.prose a { overflow-wrap: anywhere; }
.prose table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; margin: 1rem 0 1.4rem; font-size: var(--step--1); border: 1px solid var(--rule); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: .55rem .7rem; border-bottom: 1px solid var(--rule); min-width: 7rem; }
.prose thead th { background: var(--sign); color: #fff; font: 400 .95rem/1.1 var(--label); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- mobile call / order bar ---------- */
.callbar { display: none; }
@media (max-width: 40rem) {
  .callbar { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.15fr) minmax(0, 1.15fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    border-top: 3px solid var(--sky); background: var(--sign-deep); }
  .callbar a { display: flex; align-items: center; justify-content: center; padding: .85rem .3rem .75rem;
    font: 400 1.12rem/1 var(--label); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
  .callbar-call { background: var(--sign-deep); color: #fff; }
  .callbar-room { background: var(--sign); color: #fff; border-left: 1px solid rgb(255 255 255 / .25); }
  .callbar-book { background: var(--ask); color: #fff; }
  body { padding-bottom: 3.4rem; }
}

/* ---------- footer: site navy under the gable ---------- */
.site-footer { background: var(--sign-deep); color: var(--on-sign); margin-top: 0; }
.footer-grid { max-width: var(--maxw); margin: 0 auto; padding: 2.6rem var(--gutter) 1.6rem; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.site-footer h3 { font: 400 1.3rem/1 var(--label); letter-spacing: .12em; color: var(--on-sign); margin: 0 0 .7rem; }
.site-footer a { color: var(--on-sign); text-decoration: underline; }
.site-footer a:hover { color: var(--sky); }
.site-footer .btn { text-decoration: none; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.site-footer .address { font-size: inherit; }
.site-footer .hours-table { font-size: .85rem; }
.site-footer .hours-table th, .site-footer .hours-table td { white-space: nowrap; }
.site-footer .muted { color: var(--on-sign-soft); }
.footer-mast { margin: 0 0 .9rem; }
.footer-mast img { width: 10.5rem; height: auto; }
.newsletter-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.newsletter-form input { flex: 1 1 12rem; border-color: var(--on-sign); }
.newsletter-note { font-size: var(--step--2); color: var(--on-sign-soft); margin: .6rem 0 0; }
.footer-legal { max-width: var(--maxw); margin: 0 auto; padding: 1rem var(--gutter) 1.6rem; border-top: 1px solid rgba(255,255,255,.15); font-size: .78rem; color: var(--on-sign-soft); display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: space-between; }
.footer-legal p { margin: 0; }

/* ---------- print ---------- */
@media print {
  :root { --field: #fff; --field-2: #fff; --paper: #fff; --rule: #bbb; }
  body { background: #fff; padding: 0; }
  .demo-ribbon, .site-header, .site-footer, .callbar, .skip, .navbar, .age-overlay, .band--gable { display: none !important; }
  .btn { background: none !important; color: var(--ink) !important; }
  .pitch-item, .stat, .before-after figure, .cal-day { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* =====================================================================
   Carried skeleton modules — events calendar, shop, age gate, cart chip.
   DARK on this site (feature toggles off); kept intact and restyled only
   through the alias tokens above so a later engagement flips them on
   without a rebuild.
   ===================================================================== */
/* ---------- events: what's on ---------- */
.event-card {
  display: grid; grid-template-columns: 220px 1fr; gap: clamp(1rem, 3vw, 2rem);
  align-items: start; background: var(--paper);
  border: var(--border) solid var(--shutter-tint); border-radius: var(--radius);
  padding: clamp(1.2rem, 3vw, 1.8rem);
}
.event-card + .event-card { margin-top: 1.5rem; }
.event-card:not(:has(.event-photo)) { grid-template-columns: 1fr; }
.event-photo { width: 220px; height: 220px; object-fit: cover; border-radius: var(--radius); border: var(--border) solid var(--lavender-tint); }
.event-when {
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: .08em;
  color: var(--lavender-deep); font-weight: 700; margin: 0 0 .3rem;
}
.event-where { color: var(--ink-soft); font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: .5rem; }
.event-body h2 { margin: 0 0 .4rem; }
.event-title-link { color: inherit; text-decoration: none; }
.event-title-link:hover { color: var(--lavender-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.event-performer { font-family: var(--display); font-weight: 400; font-size: 1.05rem; margin: 0 0 .4rem; }
.event-performer .muted { font-family: var(--body); font-size: var(--step--1); }
.event-bio { color: var(--ink-soft); margin: 0 0 .9rem; }
.event-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1rem; }
.event-actions .remind { display: flex; gap: .4rem; }
.event-actions .remind input { padding: .4rem .6rem; }

.chip-ticketed {
  display: inline-block; background: var(--sun); color: var(--ink);
  border-radius: var(--radius); padding: .12rem .6rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap; vertical-align: middle;
}
.event-when .chip-ticketed { margin-left: .5rem; }
.cal-tile-cap .chip-ticketed { align-self: flex-start; margin-top: .3rem; }

/* seat-limited registrations — mechanics untouched, L&S skin */
.register {
  flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  background: var(--shutter-wash); border: var(--border) solid var(--shutter-tint);
  border-radius: var(--radius); padding: .9rem 1rem;
}
.register .seats-left { flex-basis: 100%; margin: 0; font-weight: 700; font-size: var(--step--1); }
.register input { padding: .45rem .6rem; }
.register input[type="number"] { width: 4.5rem; }
.register .party-label { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--step--1); color: var(--ink-soft); }
.register .reserve-note { flex-basis: 100%; margin: 0; font-size: var(--step--1); }
.event-full { flex-basis: 100%; margin: 0; font-weight: 700; }

.socials { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding: 0; }
.social-pill {
  display: inline-block; font-size: var(--step--1); font-weight: 700; text-decoration: none;
  color: var(--ink); background: var(--paper); border: var(--border) solid var(--lavender-tint);
  border-radius: var(--radius); padding: .3rem .8rem;
}
.social-pill:hover { border-color: var(--shutter); color: var(--shutter-deep); }

.player { border-top: 3px double var(--lavender-tint); padding-top: .9rem; }
.player-label { font-size: var(--step--1); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin: 0 0 .6rem; }
.track { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.track-title { font-family: var(--display); font-weight: 400; font-size: .98rem; min-width: 9rem; }
.track audio { height: 38px; flex: 1; min-width: 220px; }
.spotify-embed { margin-top: .85rem; max-width: 540px; }
.spotify-embed iframe { display: block; width: 100%; border: 0; }
.video-embed {
  position: relative; aspect-ratio: 16 / 9; max-width: 720px;
  border-radius: var(--radius); overflow: hidden;
  border: var(--border) solid var(--shutter-tint); background: var(--paper);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 640px) {
  .event-card { grid-template-columns: 1fr; }
  .event-photo { width: 100%; height: 220px; }
}

/* month calendar */
.calendar h2 { margin-top: 0; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.cal-nav .cal-title { margin: 0; flex: 1; text-align: center; }
.cal-nav-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.5rem; height: 2.5rem; border: var(--border) solid var(--shutter-tint);
  border-radius: var(--radius); background: var(--paper); color: var(--shutter-deep);
  font-size: 1.5rem; line-height: 1; text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cal-nav-btn:hover { background: var(--shutter-deep); color: var(--paper); border-color: var(--shutter-deep); }
.cal-today { margin: -.2rem 0 .7rem; text-align: center; font-size: var(--step--1); }
.cal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: clamp(.8rem, 2vw, 1.3rem); }
.cal-tile {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
  background: var(--paper); border: var(--border) solid var(--lavender-tint);
  border-radius: var(--radius); transition: transform .12s ease, border-color .12s ease;
}
.cal-tile:hover { transform: translateY(-3px); border-color: var(--shutter); }
.cal-tile-media { position: relative; aspect-ratio: 1 / 1; background: var(--lavender-wash); }
.cal-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cal-tile-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 1rem; background: var(--shutter-wash);
}
.cal-tile-fallback span { font-family: var(--display); font-weight: 400; font-size: 1.15rem; line-height: 1.2; color: var(--shutter-deep); }
.cal-tile-date {
  position: absolute; top: .6rem; left: .6rem; background: var(--paper);
  color: var(--lavender-deep); font-weight: 700; font-size: .78rem; letter-spacing: .05em;
  padding: .25rem .65rem; border: 1px solid var(--lavender-tint); border-radius: var(--radius);
}
.cal-tile-cap { padding: .7rem .8rem .85rem; display: flex; flex-direction: column; gap: .12rem; }
.cal-tile-time { font-size: var(--step--1); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--shutter-deep); }
.cal-tile-title { font-family: var(--display); font-weight: 400; font-size: 1rem; line-height: 1.2; }
.cal-empty-note { grid-column: 1 / -1; text-align: center; padding: 1.5rem 0; }
@media (max-width: 640px) {
  .cal-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .cal-nav-btn { width: 2.2rem; height: 2.2rem; font-size: 1.3rem; }
}

/* home events strip */
.events-strip { display: grid; gap: .8rem; margin: 1rem 0; }
.events-strip .event-card {
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; align-items: baseline;
  text-decoration: none; padding: .9rem 1.2rem;
}
.events-strip .event-date { color: var(--shutter-deep); font-weight: 700; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; flex: 0 0 7.5rem; }
.events-strip .event-title { font-family: var(--display); font-weight: 400; font-size: 1.12rem; }
.events-strip .event-loc { color: var(--ink-soft); font-size: var(--step--1); flex-basis: 100%; margin-left: 8.6rem; }
@media (max-width: 640px) { .events-strip .event-loc { margin-left: 0; } }
.events-strip .event-card:hover .event-title { color: var(--lavender-deep); }

/* performer detail */
.performer-head { display: grid; grid-template-columns: 240px 1fr; gap: clamp(1rem, 3vw, 2rem); align-items: start; }
.performer-photo { width: 240px; height: 240px; object-fit: cover; border-radius: var(--radius); border: var(--border) solid var(--lavender-tint); }
.performer-head:not(:has(.performer-photo)) { grid-template-columns: 1fr; }
.show-row { margin: .3rem 0; }
@media (max-width: 640px) { .performer-head { grid-template-columns: 1fr; } .performer-photo { width: 100%; height: 260px; } }

/* quiet keyline nudge */
.popup-nudge, .giftcard-nudge {
  color: var(--ink-soft); font-size: .95rem;
  border-left: 3px solid var(--shutter); padding-left: .8rem; max-width: 46rem;
}

/* ---------- shop ---------- */
.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.2rem; }
.products li, .product-card {
  background: var(--paper); border: var(--border) solid var(--lavender-tint);
  border-radius: var(--radius); padding: 1.1rem;
}
.products > li:nth-child(3n+2) { border-color: var(--shutter-tint); }
.products > li:nth-child(3n) { border-color: var(--sun-tint); }
.product-card { text-align: center; padding: 0; overflow: hidden; }
.product-card > a { display: block; text-decoration: none; color: var(--ink); }
.product-thumb {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block;
  background: var(--lavender-wash); border-bottom: 1px solid var(--hairline);
}
.product-thumb--empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: var(--lavender-tint); font-family: var(--display);
}
.product-name { display: block; font-family: var(--display); font-weight: 400; font-size: 1.05rem; padding: .9rem 1rem .2rem; }
.product-price { display: block; padding: 0 1rem 1rem; color: var(--shutter-deep); font-weight: 700; }
.product-hero {
  width: 100%; max-width: 420px; aspect-ratio: 1/1; object-fit: cover;
  border-radius: var(--radius); border: var(--border) solid var(--shutter-tint); margin-bottom: 1.2rem;
}
.product .price { font-family: var(--display); font-weight: 400; font-size: 1.4rem; color: var(--shutter-deep); }
.add-to-cart { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; }
.add-to-cart input { width: 5rem; }

.cart-rows { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.cart-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .9rem 0; border-bottom: 1px solid var(--hairline); }
.cart-name { font-family: var(--display); font-weight: 400; font-size: 1.05rem; flex: 1 1 12rem; }
.cart-qty { display: flex; align-items: center; gap: .6rem; margin: 0; flex-direction: row; }
.cart-qty input { width: 4.5rem; }
.cart-qty .link, .cart-qty button[value="remove"] {
  background: none; border-color: transparent; color: var(--lavender);
  padding: .4rem; text-decoration: underline; min-height: 0;
}
.cart-total { font-size: 1.3rem; font-family: var(--display); font-weight: 400; }

/* gift cards */
.giftcards { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.giftcard { text-align: center; }
.giftcard-face {
  aspect-ratio: 16/10; border-radius: var(--radius);
  border: var(--border) solid var(--shutter-tint);
  background: var(--footer-ink); color: var(--cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .25rem; margin-bottom: .8rem;
}
.giftcard-face .brand-lockup, .giftcard-lockup { color: var(--cream); font-size: 1.3rem; }
.giftcard-amount { font-family: var(--display); font-weight: 400; font-size: 2.2rem; line-height: 1; color: var(--sun); }
.giftcard-brand { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.giftcards-soon { display: grid; gap: clamp(1.2rem, 3vw, 2rem); grid-template-columns: minmax(13rem, 19rem) 1fr; align-items: center; }
.giftcards-soon .giftcard-face--preview { aspect-ratio: 16/10; margin-bottom: 0; }
.giftcards-soon-body h2 { margin-top: 0; }
.giftcards-subscribe { margin: 1rem 0 0; max-width: 30rem; }
.giftcards-subscribe .subscribe-row { justify-content: flex-start; }
/* on-paper variant of the footer subscribe input (polarity fix: this one
   sits on light paper, not the deep footer ink) */
.giftcards-subscribe .subscribe-row input { border-color: var(--shutter-tint); }
.giftcards-subscribe .subscribe-row input:focus { border-color: var(--shutter-deep); }
.giftcards-subscribe label { color: var(--ink); }
.giftcards-subscribed { font-weight: 700; }
@media (max-width: 640px) { .giftcards-soon { grid-template-columns: 1fr; } }

/* checkout (gated off without Square creds — machinery skin only) */
.checkout { max-width: 980px; margin: 0 auto; padding: clamp(1.4rem, 4vw, 2.6rem) 1.2rem; }
.checkout-grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; align-items: start; }
@media (min-width: 760px) { .checkout-grid { grid-template-columns: 1fr 1.1fr; } }
.checkout .card { padding: clamp(1.1rem, 3vw, 1.6rem); }
.checkout-summary h2, .checkout-pay h2 { font-size: 1.15rem; margin: 0 0 .9rem; }
.checkout-rows { list-style: none; margin: 0 0 .6rem; padding: 0; }
.checkout-rows li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--hairline); }
.checkout-rows .ck-line { color: var(--ink-soft); white-space: nowrap; }
.checkout-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: .8rem; }
.checkout-total strong { font-family: var(--display); font-weight: 400; font-size: 1.35rem; }
.checkout-note { font-size: var(--step--1); color: var(--ink-soft); margin-top: 1rem; }
.checkout-pay .field { display: block; font-size: var(--step--1); color: var(--ink); margin-bottom: 1rem; }
.checkout-pay .field input { display: block; width: 100%; margin-top: .35rem; }
.card-field { margin: .4rem 0 1.1rem; min-height: 52px; }
.ship-choice, .ship-fields { border: var(--border) solid var(--shutter-tint); border-radius: var(--radius); padding: .9rem 1rem .4rem; margin-bottom: 1rem; }
.ship-choice legend, .ship-fields legend { padding: 0 .4rem; font-weight: 700; color: var(--ink-soft); }
.ship-choice .radio { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .6rem; font-size: var(--step--1); }
.ship-choice .radio input { accent-color: var(--shutter-deep); }
.ship-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .7rem; }
.checkout-ship-line { display: flex; justify-content: space-between; font-size: var(--step--1); color: var(--ink-soft); margin: .3rem 0 0; }
.wallets { margin-bottom: .4rem; }
.wallet-btn { margin-bottom: .6rem; min-height: 44px; }
#apple-pay-button { -apple-pay-button-style: black; -webkit-appearance: -apple-pay-button; appearance: -apple-pay-button; height: 48px; border-radius: var(--radius); cursor: pointer; }
.wallets-or { position: relative; text-align: center; color: var(--ink-soft); font-size: var(--step--1); margin: 1rem 0; }
.wallets-or::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--hairline); }
.wallets-or span { position: relative; background: var(--paper); padding: 0 .7rem; }
.btn--pay { width: 100%; margin-top: .2rem; font-size: 1.05rem; padding: .85rem 1rem; }
.btn--pay:disabled { opacity: .6; cursor: progress; }
.ck-status { min-height: 1.2em; margin: .7rem 0 0; font-size: var(--step--1); }
.ck-status--error { color: var(--door-red); }
.ck-status--ok { color: var(--shutter-deep); }
.ck-secure { margin-top: 1rem; font-size: .8rem; color: var(--ink-soft); text-align: center; }
.checkout-confirm .confirm-num { color: var(--ink-soft); }
.cart-link { font-weight: 700 !important; }

/* ---------- age gate (config-gated, OFF by default) ---------- */
.age-gate {
  min-height: 78vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 1.2rem;
}
.age-gate h1 { font-size: var(--step-6); }
.age-gate form, .age-overlay-card form { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; flex-direction: row; }
.age-gate button[value="no"], .age-overlay-card button[value="no"] {
  background: transparent; color: var(--ink-soft); border-color: transparent; text-decoration: underline;
}
.age-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: color-mix(in srgb, var(--cream) 97%, var(--ink));
}
.age-overlay-card { text-align: center; max-width: 36rem; }
.age-overlay-card h2 { font-size: var(--step-4); }
body.age-locked { overflow: hidden; }


/* ── cart chip + pickup checkout (demo e-commerce) ─────────────────────── */
.nav-cart { color: var(--shutter-deep); font-weight: 700; }
.btn--small { padding: .35rem .8rem; font-size: .85rem; }
.product-card .add-to-cart { margin-top: .5rem; }
.field-error { display: block; color: var(--door-red); font-size: .85rem; margin-top: .25rem; }