/* ── assets/home-breakpoints.css ── */
/* ── HOME: breakpoint split (6 Oct 2026) ──────────────────────────────────
   Boom (iPad screenshot): "This new design should be for the mobile breakpoint
   only. This looks terrible when on iPad or scaled on Web." The 5–6 Oct mobile
   mock sections stay EXACTLY as they are at <=600px (the site's breakpoint,
   style.css @media(max-width:600px)); from 601px the page shows the PRE-redesign
   desktop sections again (sections-v2/desktop-*.html + the rm_show_images /
   rm_comedians_home widgets restored from the 5 Oct backup by
   tools/home-assemble.php `backup:` lines).
   .mob-only / .desk-only sit on the Elementor SECTION (settings.css_classes, set by
   the manifest's @class suffix) AND on each section's root element, so a hidden
   section leaves no wrapper height. The same two rules are inlined in
   assets/critical.css because home.css is fetched async — without the inline copy
   a phone would paint the desktop sections first and shift. */
@media (min-width:601px){ .mob-only{ display:none !important; } }
@media (max-width:600px){ .desk-only{ display:none !important; } }
/* a section whose widget renders nothing on the front end (rm_show_images: its galleries feed
   the show-card photos on every page) — Elementor's empty column is still 1px tall, so hide it
   outside the editor at every width */
body:not(.elementor-editor-active) .settings-only{ display:none !important; }

/* ── assets/home-calendar.css ── */
/* ── HOME: Availability Calendar — inline mount (home mock 5 Oct 2026) ──────
   Section markup: sections-v2/home-calendar.html (root .home-cal). The card
   itself (.cal-card: header, key, grid, swipe row, tiles, X) is the SAME
   card the date-strip "More Shows" popover draws — calCard() in main.js,
   styled globally in style.css next to .cal-pop. Only what the inline mount
   adds lives here: the white Inter-800 title, the 16px gutters, the reserved
   card height so nothing shifts while the Ticketbook feed loads, the
   bottom-right X and the collapsed state.

   Mock: title 34px/1.1 Inter 800 white, two lines, centred · card 16px
   gutters · top X rises ~40px above the card, bottom X drops ~34px. */

.home-cal{
  background:#000;color:var(--white,#F0F0F0);
  padding:28px 16px 64px;max-width:720px;margin:0 auto;
  font-family:Inter,'Inter Fallback',system-ui,sans-serif;
  overflow:hidden;      /* the X buttons overhang the card, never the viewport */
}
.home-cal-title{
  margin:0 0 16px;text-align:center;
  font-family:Inter,'Inter Fallback',system-ui,sans-serif;
  font-weight:800;font-size:34px;line-height:1.1;letter-spacing:-.01em;color:#fff;
}
.home-cal-wrap{ position:relative;margin-top:42px; }   /* room for the top X */
/* reserved before JS draws the card: border 2+2 · padding 52+30 · head 40+20
   · key 84+18 · grid 30 + 5×(102+18) = 630 · swipe 22+38 + line boxes —
   measured 938px at 390px for the 5-row month
   (the common shape); the JS skeleton draws synchronously and a 6-row month
   simply grows the mount by one 120px row */
.home-cal-mount{ min-height:938px; }
.home-cal-mount:empty{ border:2px solid var(--cyan,#00E5FF);border-radius:18px;background:#050505; }
.home-cal .cal-x--bottom{ top:auto;bottom:-34px;right:4px; }
/* collapsed: the card and the bottom X go, the top X becomes a + */
.home-cal.is-collapsed .home-cal-mount,
.home-cal.is-collapsed .cal-x--bottom{ display:none; }
.home-cal.is-collapsed .cal-x--top{ position:static;margin:0 auto; }
.home-cal.is-collapsed .cal-x svg{ transform:rotate(45deg); }
.home-cal.is-collapsed{ padding-bottom:28px; }
.home-cal.is-collapsed .home-cal-wrap{ margin-top:0; }

@media (min-width:600px){
  .home-cal{ padding:40px 24px 72px; }
  .home-cal-title{ font-size:40px; }
}

/* ── assets/home-clips.css ── */
/* ── HOME: comedy clips carousel (home mock 5 Oct 2026) ───────────────────
   Restyles the `rm_social_videos` widget (.social-section > .reel-scroller)
   on the front page ONLY, at <=600px ONLY (6 Oct 2026, Boom: the redesign is for
   the mobile breakpoint; >=601px keeps the theme's pre-redesign reel row) —
   every rule is scoped to body.home (WordPress adds
   `home` on is_front_page; the theme's slug filter adds `rm-page-home` too).
   Markup, JS (click-to-play facade) and the 9:16 aspect-ratio box are the
   widget's own; nothing here changes element sizes after load, so no CLS.

   Mock measurements (1080px mock = 390px phone, ÷2.77):
     left inset 18px · card 297px (9:16) · gap 15px · next card peeks ~60px
     border 3px solid magenta · radius 18px · play button 62px, 2px white ring
     dark translucent fill · no heading, no caption · black backdrop
   Pixel-sampled: the border is (255,0,204) on all four sides — solid magenta,
   not a gradient (the cyan in the mock is the neon ring in the video itself). */

@media (max-width:600px){
.home .social-section{
  background:#000;
  padding-top:0;              /* also neutralises .social-section--gap-top if set */
  padding-bottom:16px;
}
.home .reel-frame{
  border:3px solid var(--magenta, #FF00CC);
  border-radius:18px;
  background:#000;
  box-shadow:0 6px 18px rgba(255,0,204,.25);
}
}
.home .reel-play:focus-visible{
  outline:3px solid var(--cyan, #00E5FF);
  outline-offset:3px;
}

/* phones (<=600px, the site's breakpoint): full-bleed swipe strip, first card nearly
   full width, next card peeking at the right edge (>=601px keeps the theme's 3-up grid) */
@media (max-width:600px){
  .home .social-section .wrap{ padding:0; max-width:none; }
  .home .social-section .social-lead,
  .home .reel-caption{ display:none; }   /* the mock shows neither */
  .home .reel-scroller{
    margin-top:0;
    padding:14px 18px 10px;
    gap:15px;
    scroll-padding-inline-start:18px;
  }
  .home .reel{
    width:min(calc(100% - 57px), 300px); /* scroller content box 354px at 390 → 297px */
    scroll-snap-align:start;
  }
}

@media (prefers-reduced-motion:reduce){
  .home .reel-play{ transition:none; }
  .home .reel-play:hover{ transform:translate(-50%,-50%); }
}

/* ── assets/home-faq.css ── */
/* ── HOME: FAQ restyled in the manifesto voice (home mock 5 Oct 2026) ──────
   The FAQ markup + schema.org FAQPage microdata stay exactly as they are
   (SEO); this file only changes how it reads. Same voice as .home-manifesto:
   black ground, white Inter 800 copy at clamp(21px,5.9vw,26px) / 1.28,
   left-aligned in 16px gutters, cyan accent words, no cards / borders /
   eyebrow. Desktop (≥601px, the site's breakpoint; was 768 until 6 Oct 2026) centres the same typography in a 720px column.
   .fade-up on each .faq-item is left alone — main.js's IntersectionObserver
   still adds .in; nothing here sets opacity or transform.
   Scoped to body.rm-page-home #faq so no other page's FAQ changes. */

body.rm-page-home #faq.faq-section{
  background:#000; color:#fff;
  padding:30px 16px 44px; margin:0;
}
body.rm-page-home #faq .wrap{ max-width:720px; margin:0 auto; padding:0; }

/* header: eyebrow gone, title becomes the lead line */
body.rm-page-home #faq .sec-header{ display:block; margin:0 0 22px; }
body.rm-page-home #faq .eyebrow{ display:none; }
body.rm-page-home #faq .section-title{
  font-family:Inter,'Inter Fallback',system-ui,sans-serif; font-weight:800;
  font-size:clamp(27px,7.6vw,34px); line-height:1.12; letter-spacing:-.01em;
  color:#fff; text-align:left; margin:0;
}
body.rm-page-home #faq .section-title .cyan{ color:var(--cyan,#00E5FF); }

/* grid → plain stack, no box chrome */
body.rm-page-home #faq .faq-grid{
  display:block; gap:0; background:none; border:0; border-radius:0; overflow:visible;
}
body.rm-page-home #faq .faq-item{ background:none; padding:0; margin:0 0 30px; }
body.rm-page-home #faq .faq-item:last-child{ margin-bottom:0; }

/* question = manifesto copy; answer = one step down, Inter 600 white/90 */
body.rm-page-home #faq .faq-q{
  font-family:Inter,'Inter Fallback',system-ui,sans-serif; font-weight:800;
  font-size:clamp(21px,5.9vw,26px); line-height:1.28; letter-spacing:-.005em;
  color:#fff; margin:0 0 8px;
}
body.rm-page-home #faq .faq-a{ color:rgba(255,255,255,.9); }
body.rm-page-home #faq .faq-a p{
  font-family:Inter,'Inter Fallback',system-ui,sans-serif; font-weight:600;
  font-size:clamp(17px,4.6vw,20px); line-height:1.4; letter-spacing:-.005em;
  margin:0;
}
body.rm-page-home #faq .faq-a p + p{ margin-top:8px; }
/* the facts (venue names, price, times) carry the manifesto's cyan accent */
body.rm-page-home #faq .faq-a strong{ color:var(--cyan,#00E5FF); font-weight:700; }

/* the glow divider that follows the widget has no place in the manifesto voice */
body.rm-page-home #faq + .sec-glow{ display:none; }

@media (min-width:601px){
  body.rm-page-home #faq.faq-section{ padding:56px 16px 72px; }
  body.rm-page-home #faq .sec-header{ margin-bottom:34px; }
  body.rm-page-home #faq .section-title,
  body.rm-page-home #faq .faq-q,
  body.rm-page-home #faq .faq-a p{ text-align:center; }
  body.rm-page-home #faq .faq-item{ margin-bottom:38px; }
  body.rm-page-home #faq .faq-q{ margin-bottom:10px; }
}

/* ── assets/home-reviews.css ── */
/* ═══════════════════════════════════════════════════════════════════
   HOME v2 — "Review Rating" (mobile mock 2026-10-05, 390px phone)
   New markup: sections-v2/home-reviews.html, scoped under .home-reviews.
   Restyles of the EXISTING rm_testimonials widget and the Google reviews
   carousel are scoped to the front-page body class (functions.php
   body_class → rm-page-home) and to phones (≤600px, the site's breakpoint — was 640 until 6 Oct 2026) only.
   Fonts: Inter only. Gold: #FFD035 big stars (sampled from the mock),
   #F5A623 badge stars (= hero badge), #FFC107 card stars (= carousel).
   ═══════════════════════════════════════════════════════════════════ */

/* ── new: title + stars + badge ───────────────────────────────────── */
.home-reviews{
  position:relative; z-index:6;            /* badge must paint over the video card + its sec-glow */
  background:#000; padding:40px 0 0;
  font-family:Inter,'Inter Fallback',sans-serif;
}
.home-reviews .wrap{ position:relative; }
.home-reviews-title{
  margin:0; text-align:center;
  font-family:Inter,'Inter Fallback',sans-serif; font-weight:800;
  font-size:clamp(34px,13vw,56px); line-height:1.05; letter-spacing:-.025em;
  color:var(--white,#F0F0F0);
}
.home-reviews-row{
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-top:14px; padding:0 21px 0 24px;
}
.home-reviews-stars{ display:inline-flex; gap:10px; margin-top:0; }
.home-reviews-stars svg{ width:25px; height:25px; display:block; fill:#FFD035; }
.home-reviews-stars svg path{ stroke:#FFD035; stroke-width:1.2; stroke-linejoin:round; }
/* white Google badge; sized to its text (as the hero one is) and pulled down
   17px INTO the video card below so it overlaps the card's top-right corner */
.home-reviews-badge{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  width:max-content; margin-bottom:-17px; padding:8px 12px 9px;
  background:#fff; color:#1a1a1a; border-radius:14px; text-decoration:none;
  box-shadow:0 8px 26px rgba(0,0,0,.30); line-height:1;
  position:relative; z-index:2;
}
.home-reviews-badge .hb-google{ display:block; font-size:24px; font-weight:800; letter-spacing:-.6px; }
.home-reviews-badge .hb-stars{ display:block; color:#F5A623; font-size:16px; letter-spacing:3px; }
.home-reviews-badge .hb-count{ display:block; font-size:14px; font-weight:600; color:#111; white-space:nowrap; }

/* desktop: the mock is the phone; above phone width keep the block as a plain
   centred heading row so it never fights the desktop widget layout */
@media(min-width:601px){
  .home-reviews-row{ justify-content:center; gap:28px; padding:0; }
  .home-reviews-badge{ margin-bottom:0; }
}

/* ── restyle: Live Testimonials widget (rm_testimonials) ──────────── */
@media(max-width:600px){
  body.rm-page-home .testi-section .social-lead{ display:none; }     /* "Review Rating" above replaces it */
  body.rm-page-home .testi-section{ padding-bottom:14px; }
  body.rm-page-home .testi-section + .sec-glow{ display:none; }   /* no divider line in the mock */
  body.rm-page-home .testi-scroller{ margin-top:0; padding:0; gap:14px; }
  body.rm-page-home .testi{ width:100%; }                             /* one full-width 16:9 card, 16px gutters */
  body.rm-page-home .testi-frame{ border-radius:16px; border-width:3px; box-shadow:0 10px 36px rgba(0,229,255,.16); }
  body.rm-page-home .testi-cap{ display:none; }                        /* the mock shows no caption under the card */
  body.rm-page-home .testi-cc{
    left:13px; bottom:14px; height:24px; padding:0 11px; border-radius:12px;
    font-size:12px; font-weight:700; letter-spacing:.04em;
    background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.75);
  }
  body.rm-page-home .testi-mute{ right:14px; bottom:14px; width:32px; height:32px; background:rgba(0,0,0,.6); border:0; }
  body.rm-page-home .testi-mute::after{ inset:-6px; } /* 34px disc → 46px target */
}

/* ── restyle: Google reviews carousel (#google-reviews) ───────────── */
@media(max-width:600px){
  body.rm-page-home #google-reviews{ background:transparent; padding:12px 0 26px; }
  body.rm-page-home #google-reviews .grev-head{ display:none; }        /* G + "Real Reviews" head is not in the mock */
  body.rm-page-home #google-reviews .wrap{ padding:0 24px; }
  body.rm-page-home .grev-viewport{ padding:0; }
  body.rm-page-home .grev-track{ gap:18px; }
  body.rm-page-home .grev-card{
    background:#0B0B0C; border:1px solid rgba(255,255,255,.05); border-radius:18px;
    padding:18px 22px 16px; gap:10px;
  }
  body.rm-page-home .grev-card-top{ gap:14px; }
  body.rm-page-home .grev-avatar{ width:42px; height:42px; border-color:rgba(255,255,255,.12); }
  body.rm-page-home .grev-author{ font-size:16px; font-weight:700; }
  body.rm-page-home .grev-sub{ gap:8px; margin-top:4px; }
  body.rm-page-home .grev-stars{ font-size:14px; letter-spacing:1px; color:#FFC107; }
  body.rm-page-home .grev-time{ font-size:13px; color:#9A9A9A; }        /* 6.7:1 on #0B0B0C (AA) */
  body.rm-page-home .grev-src{
    width:24px; height:24px; font-family:Inter,'Inter Fallback',sans-serif;
    font-weight:800; font-size:15px;
  }
  body.rm-page-home .grev-text{ font-size:14.5px; line-height:1.5; color:rgba(240,240,240,.8); }
  body.rm-page-home .grev-dots{ margin-top:10px; gap:6px; }
  body.rm-page-home .grev-dots button::before{ width:11px; height:11px; background:#363738; }
  body.rm-page-home .grev-dots button[aria-selected="true"]::before{ background:var(--cyan,#00E5FF); }
}

/* ── assets/home-shows.css ── */
/* ── ALL TICKETS (home shows section) ──
   Mobile-first, everything scoped under #shows.home-shows so the Boat/Soho/
   What's On cards (same bc() renderer) are untouched. Sizes are the mock
   (home/mock-shows.png, 1080px = 390px phone) divided by 2.77.
   Carousel on phones, the existing grid from 601px up.
   6 Oct 2026 (Boom: the redesign is for the mobile breakpoint only): EVERY rule here
   is inside max-width:600px, so >=601px renders the theme's pre-redesign What's On
   section and cards untouched; the desk-only parts of home-shows.html (title, All
   Dates link, Build Your Night bar) are hidden <=600px by assets/home-breakpoints.css. */
@media(max-width:600px){
#shows.home-shows{
  --hs-gutter:16px;
  --hs-radius:24px;
  --hs-border:5px;
}

/* heading sits close to the pills, as drawn; the strip is the venue pages' own */
#shows.home-shows .sec-header{ margin-bottom:6px; }
#shows.home-shows .dates-pick{ margin:0 0 14px; }

/* ── card frame: thick solid accent border on a black body ── */
#shows.home-shows .card-v2{
  border:var(--hs-border) solid var(--acc);
  border-radius:var(--hs-radius);
  background:#050505;
  box-shadow:0 0 26px var(--acc-glow), 0 14px 40px rgba(0,0,0,.5);
  padding:12px 12px 18px;
}
#shows.home-shows .card-v2:hover,
#shows.home-shows .show-card.card-v2:hover:not(.show-card-sold){
  border-color:var(--acc);
  box-shadow:0 0 34px var(--acc-glow-lg), 0 22px 54px rgba(0,0,0,.6);
}
/* home accents: every Boat card cyan, every Soho card magenta (the mock's two
   frames). Site-wide accents (green midweek, magenta Sunday afternoon, red
   Soho) stay as they are on every other page. */
#shows.home-shows .card-v2.accent-green,
#shows.home-shows .card-v2.accent-magenta{
  --acc:var(--cyan);--acc-45:rgba(0,229,255,.35);--acc-08:rgba(0,229,255,.08);
  --acc-glow:rgba(0,229,255,.14);--acc-glow-lg:rgba(0,229,255,.26);
}
#shows.home-shows .card-v2.accent-red{
  --acc:var(--magenta);--acc-45:rgba(255,0,204,.35);--acc-08:rgba(255,0,204,.08);
  --acc-glow:rgba(255,0,204,.14);--acc-glow-lg:rgba(255,0,204,.26);
}
/* Soho button: magenta fill, black text — #000 on #FF00CC is 6.1:1 (AA), the
   same black-on-accent treatment as the cyan button. Sold-out and waiting-list
   buttons keep their own (grey / outlined) treatment. */
#shows.home-shows .card-v2.accent-red .btn-get-tickets:not(.is-sold):not(.is-waitlist){
  background:var(--magenta); color:#000!important;
}
#shows.home-shows .card-v2.show-card-sold{
  border-color:rgba(255,255,255,.28);
  background:#050505;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
}

/* ── photo: rounded, price pill top-right in dark green ── */
#shows.home-shows .card-v2 .show-thumb{ border-radius:14px; }
#shows.home-shows .card-v2 .show-thumb .show-pill-price{
  display:inline-block; top:14px; right:14px; left:auto;
  font-size:13px; font-weight:700; letter-spacing:.02em; padding:7px 14px;
  color:var(--green); background:rgba(8,46,34,.92);   /* #00FF9F on #082E22 = 11:1 */
  border:1.5px solid rgba(0,255,159,.55); border-radius:999px;
  backdrop-filter:blur(4px);
}
/* the calendar-row price (venue pages) is off here — one price per card */
#shows.home-shows .card-v2 .show-meta-addcal .show-pill-price,
#shows.home-shows .card-v2 .show-meta-price-only{ display:none; }
/* no "In 4 days" badge on the home photo, as drawn */
#shows.home-shows .time-badge{ display:none; }

/* ── body copy ── */
#shows.home-shows .card-v2 .show-body{ padding:16px 6px 2px; }
#shows.home-shows .card-v2 .show-title{ font-size:19px; margin-bottom:6px; }
#shows.home-shows .card-v2 .show-venue{ font-size:15px; margin-bottom:12px; }
#shows.home-shows .card-v2 .show-meta{ gap:10px; }
#shows.home-shows .card-v2 .show-meta-row{ font-size:16px; font-weight:700; color:var(--white); gap:12px; }
#shows.home-shows .card-v2 .show-meta-time span{ color:var(--white); font-weight:700; }
#shows.home-shows .card-v2 .show-meta-addcal{ justify-content:flex-start; font-weight:400; }
#shows.home-shows .card-v2 .show-cal-add{
  font-size:15px; text-decoration:none; color:var(--cyan);
}
#shows.home-shows .card-v2 .show-cal-add:hover,
#shows.home-shows .card-v2 .show-cal-add:focus-visible{ text-decoration:underline; }
/* margin-top:auto (inherited from .card-v2) keeps every button on one line
   across a row of stretched cards; the 18px is the floor under the calendar link */
#shows.home-shows .card-v2 .btn-get-tickets{
  padding:16px 18px; border-radius:14px; font-size:16px;
}
#shows.home-shows .card-v2 .show-meta{ margin-bottom:22px; }
#shows.home-shows .card-v2 .btn-get-tickets:focus-visible,
#shows.home-shows .card-v2 .show-cal-add:focus-visible{ outline:2px solid var(--white); outline-offset:3px; }
#shows.home-shows .lineup{ margin-top:16px; }
#shows.home-shows .lineup-label{ font-size:11px; letter-spacing:.16em; }

/* ── skeletons: same frame, same height as a live card (no shift on load) ── */
#shows.home-shows .show-skel{
  border:var(--hs-border) solid rgba(0,229,255,.3);
  border-radius:var(--hs-radius);
  background:#050505;
  padding:12px 12px 18px;
  box-sizing:border-box;
}
#shows.home-shows .show-skel .show-thumb{ border-radius:14px; }
/* body lines sized to the live card's rows (title 23 / venue 20 / three meta
   rows 98 / button 58) plus the line-up block, so the skeleton's height IS a
   prod card's (measured: card body 287 without a line-up, +66 with one —
   prod publishes line-ups for its upcoming shows; staging has none) */
#shows.home-shows .show-skel .show-body{ padding:16px 6px 2px; }
#shows.home-shows .show-skel .skel-line.lg{ height:23px; width:60%; margin-bottom:6px; }
#shows.home-shows .show-skel .skel-line.sm{ height:20px; width:45%; margin-bottom:12px; }
#shows.home-shows .show-skel .skel-line{ height:26px; width:70%; margin-bottom:10px; border-radius:6px; }
#shows.home-shows .show-skel .skel-line.lg + .skel-line.sm + .skel-line{ margin-top:0; }
#shows.home-shows .show-skel .skel-line.btn{ height:58px; width:100%; margin:26px 0 0; border-radius:14px; }
#shows.home-shows .show-skel .show-body::after{ content:''; display:block; height:128px; }
}
@media(min-width:480px) and (max-width:600px){ #shows.home-shows{ --hs-gutter:20px; } }

/* ── phones: horizontal carousel, one card + the next peeking ── */
@media(max-width:600px){
  /* no "Build Your Night" bar and no "All Dates" link on home at any width —
     both removed from the markup (Boom Boom, 5 Oct 2026), nothing to hide */
  #shows.home-shows .shows-grid{
    display:flex!important; flex-wrap:nowrap!important; gap:14px;
    margin:0 calc(-1 * var(--hs-gutter));
    padding:4px var(--hs-gutter) 14px;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; scroll-padding-left:var(--hs-gutter);
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
    scrollbar-width:none; min-height:0;
  }
  #shows.home-shows .shows-grid::-webkit-scrollbar{ display:none; }
  #shows.home-shows .shows-grid:focus-visible{ outline:2px solid var(--cyan); outline-offset:-2px; }
  #shows.home-shows .shows-grid > .show-card,
  #shows.home-shows .shows-grid > .show-skel{
    flex:0 0 84%!important; width:84%!important; max-width:none!important; min-width:0!important;
    scroll-snap-align:start; scroll-snap-stop:always;
  }
}

/* ── assets/home-treat.css ── */
/* ── BOAT DEAL (home) — Boom's redesign screenshot, 6 Oct 2026 ──
   Mobile-first, scoped under .home-treat. Sizes are the mock (534px wide = 390px
   phone, ÷1.369). Blue gradient sampled from the MOCK's own blue (clean left column), lighter than the raw asset; deal box
   #b7f5ff / text #4f94e2; "Click Here" #55b6fa — all sampled from the mock.
   Heavy face = Source Sans 3 Black (900) — Boom named the font (6 Oct); 900 matched the mock's stroke
   beside 700/800. Self-hosted latin subset, home only; sizes fitted to the mock's measured text widths. */
.home-treat{
  --hd-blue-a:#59c3f7; --hd-blue-b:#5796f7; --hd-blue-c:#4f9eed;
  --hd-box:#b7f5ff; --hd-box-text:#4f94e2; --hd-cta:#55b6fa; --hd-strike:#e3312f;
  --hd-font:'Source Sans 3','Source Sans Fallback',Arial,sans-serif;
  position:relative; background:#000; color:#fff; margin:30px auto 0; padding:0; max-width:390px; overflow:visible;
}
/* Full-bleed on phones (Boom, 6 Oct 2026 — a centred 390px card left black strips either side on a
   430px phone): the section spans the viewport; the band, torn edges, white strips and foot are the
   full-width elements, the CONTENT is a 390px column (.hd-in, .hd-title-in, .hd-cta-t) centred in
   them, so at 390 every rect is the mock's. overflow-x:clip (not hidden) kills the horizontal scroll
   the gift's right overhang caused at ≤403px while leaving its vertical overhang into the black. */
@media (max-width:600px){ .home-treat{ max-width:none; overflow-x:clip; } }
.hd-in,.hd-title-in,.hd-cta-t{ display:block; box-sizing:border-box; max-width:390px; margin:0 auto; }
.home-treat .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.hd-torn{ display:block; width:100%; height:auto; position:relative; z-index:2; }
.hd-torn--bottom{ transform:none; }
.hd-body{
  position:relative; padding:20px 0 19px; /* paddings, not margins: a margin on the title or the CTA leaves the section's black showing through the band */
  background:linear-gradient(180deg,var(--hd-blue-a) 0%,var(--hd-blue-b) 50%,var(--hd-blue-c) 100%);
}
.hd-gift{ position:absolute; z-index:3; left:calc(50% + 68px); /* = 263px in the 390 column, from the band's centre so it rides with it */ top:-28px; width:140px; height:auto;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.55)); }
.hd-title{
  /* mock: a full-width WHITE strip 63px tall, 28px below the torn edge, with the title in blue #55b6fa */
  margin:0; padding:0; height:63px; line-height:63px; background:#fff;
  font-family:var(--hd-font); font-weight:900; font-size:55.6px;
  letter-spacing:0; color:#55b6fa; white-space:nowrap;
}
.hd-title-in{ padding-left:12px; }
.hd-in{ padding:0 12px; }
.hd-sub{
  margin:34px 0 0; font-family:var(--hd-font); font-weight:900; font-size:37px; line-height:1;
  letter-spacing:0; color:#fff; white-space:nowrap;
}
.hd-grid{ display:grid; grid-template-columns:207px minmax(0,1fr); column-gap:6px; align-items:start; margin:24px -11px 0 -11px; }
.hd-photo{ display:block; width:207px; height:204px; object-fit:cover; border-radius:18px; }
.hd-right{ position:relative; padding-left:7px; }
.hd-for{ margin:-18px 0 0; font-family:var(--hd-font); font-weight:900; color:#fff; line-height:1; white-space:nowrap;
  font-size:65px; display:flex; align-items:baseline; gap:5px; margin-left:13px;
  /* mock: the whole "for 2" tilts ~6° and the 2 sits ~9px above the word's baseline */
  transform:rotate(-6deg); transform-origin:left bottom; }
.hd-for-w{ position:relative; top:-4px; }
.hd-two{ font-size:85px; line-height:1; display:inline-block; position:relative; top:-7px; }
.hd-price{ margin:0; font-family:var(--hd-font); font-weight:900; line-height:1; }
.hd-price-visual{ display:block; }
.hd-was{ display:flex; align-items:flex-end; gap:4px; margin-top:-2px; height:50px; }
.hd-was{ font-family:'Chelsea Market','Chelsea Fallback',cursive; font-weight:400; } /* Boom 6 Oct: 'normally £n' in Chelsea Market */
.hd-was-label{ font-size:17px; color:#fff; white-space:nowrap; position:relative; top:-10px; }
.hd-tag{ position:relative; top:-10px; display:inline-block; transform:rotate(-12deg); transform-origin:center;
  color:#fff; font-size:30px; line-height:1; padding:0 4px; }
/* one red strike through the old price — no background behind it (Boom, 6 Oct) */
.hd-tag::before{ content:""; position:absolute; left:-4px; right:-4px; top:50%; height:4px; margin-top:-2px; background:var(--hd-strike); border-radius:2px; transform:rotate(-30deg); }
.hd-box{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:156px; height:92px; margin-top:0;
  background:var(--hd-box); border-radius:12px; color:var(--hd-box-text); }
.hd-deal-label{ font-size:26.5px; line-height:.9; }
.hd-deal-amt{ font-size:47.7px; line-height:.95; margin-top:0; letter-spacing:0; }
.hd-cta{
  position:relative; z-index:1; display:block; box-sizing:border-box; height:77px; margin:0; padding:0;
  background:#fff; color:var(--hd-cta); font-family:var(--hd-font); font-weight:900; font-size:69.5px; line-height:77px;
  letter-spacing:-.01em; text-decoration:none; white-space:nowrap;
}
.hd-cta-t{ padding-left:26px; }
.hd-cta:hover,.hd-cta:focus-visible{ filter:brightness(1.04); }
.hd-cta:focus-visible{ outline:3px solid var(--hd-cta); outline-offset:-6px; }
.hd-foot{ height:28px; background:#59c2f9; }

/* ── assets/home-venues-info.css ── */
/* ── VENUE INFO (home, above footer) ── */
.home-venues-info{
  position:relative;
  overflow:hidden;               /* badge bleeds off the left edge — clip, never scroll */
  background:#000;
  color:#fff;
  font-family:Inter,'Inter Fallback',system-ui,sans-serif;
  padding:16px 6px 22px 98px;
  min-height:190px;
  box-sizing:border-box;
}
.hvi-logo{ display:block; width:144px; height:144px; border-radius:50%; }
.hvi-badge{
  position:absolute;
  left:-50px;
  top:26px;
  width:144px;
  height:144px;
  pointer-events:none;
}
.hvi-text{ position:relative; }
.hvi-name{
  margin:0;
  font-size:22px;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.025em;
}
.hvi-name a{ color:#fff; text-decoration:none; }
.hvi-name a:hover,.hvi-name a:focus-visible{ color:#fff; text-decoration:none; }
.hvi-name--soho{ margin-top:10.5px; }
.hvi-sub{
  margin:0;
  font-size:14px;
  font-weight:700;
  line-height:1.26;
  letter-spacing:-.01em;
}
.hvi-detail{
  margin:2px 0 0;
  font-size:14px;
  font-weight:700;
  line-height:1.26;
  letter-spacing:-.01em;
}
@media (min-width:768px){
  .home-venues-info{ padding:28px 36px 32px 168px; min-height:220px; }
  .hvi-badge{ left:-30px; top:30px; }
}