/* ============================================================
   _poster.css — SHARED POSTER ENGINE (design surface)
   Extracted from product-v2r/preview.html. Linked by BOTH the
   app (product-v2r) and the temp gallery so global design edits
   (color, type, layout, frames, treatment) propagate everywhere.
   Night theme keys off an ancestor .dark (the app puts it on .app;
   the gallery puts .dark on each poster wrapper).
   ============================================================ */
  /* ================================================================
     ARCHIVE TREATMENT — the locked Mayita poster look, integrated into
     the live preview. One bright FIELD + a full-frame botanical engraving
     rendered as a POSITIVE riso-duotone (invert→screen + a pale multiply
     tint) + an oversized cropped MAYITA wordmark (CSS-masked to a bright
     colour) + CS Revenant event word + General Sans meta. ALL CAPS, no
     text-shadow, no Futura on Mayita. The JS auto-fit engine sizes the
     type so it never clips at any of the 4 frames.
     ================================================================ */
  .poster{
    --rosa:#EC0E73;--turquesa:#0FB5AE;--marigold:#FF9F1C;--cobalto:#2541B2;--verde:#2EA84F;
    --hueso:#F7EEDD;--tinta:#241024;--noche:#160A2A;
    --field:var(--field-bright,var(--rosa));            /* composed: bright source, dark overrides */
    --tint-opacity:var(--tint-op-bright,.5);
    --tint-color:var(--tint-color-bright,color-mix(in srgb,var(--field) 32%,var(--hueso)));
    --accent:var(--marigold);       /* one bright accent (middots, day labels) */
    --logo-color:var(--turquesa);   /* the cropped wordmark colour */
    position:relative;overflow:hidden;border-radius:var(--r-control);flex:none;
    background:var(--field);container-type:size;isolation:isolate;  /* contain blends */
    transition:width .5s cubic-bezier(.4,0,.1,1),height .5s cubic-bezier(.4,0,.1,1);
    box-shadow:0 14px 40px -18px rgba(27,27,31,.30);
    font-family:var(--ui);color:var(--hueso);
    /* self-contained: never inherit the HOST page's line-height (stage wrappers
       use line-height:0 to kill inline-block gaps — that collapsed matchup team
       names + date bands to 0-height clipped text, 2026-07-06). */
    line-height:normal;
  }
  .poster.settle{animation:settle .42s var(--ease)}
  @keyframes settle{0%{transform:scale(.99)}55%{transform:scale(1.005)}100%{transform:scale(1)}}

  /* frame-filling botanical engraving — inverted so plant→light, paper→dark, then
     screened onto the bright field: deep field shows through the dark paper, the
     plant screens to a lighter tint. Reads as a positive two-tone plant. */
  .poster .engrave{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;
    background-position:var(--eng-pos,center);pointer-events:none;
    filter:var(--eng-filter,invert(1) contrast(1.12) brightness(.96));
    mix-blend-mode:screen;opacity:var(--eng-opacity,1);
    transform:scale(var(--eng-scale,1.12));transform-origin:var(--eng-origin,center)}
  /* pale tint multiplied over the screened plant → colours the highlights as a brand
     tint (keeps the duotone positive + warm, never a photo negative). */
  .poster .tint{position:absolute;inset:0;pointer-events:none;
    background:var(--tint-color,color-mix(in srgb,var(--field) 32%,var(--hueso)));
    mix-blend-mode:multiply;opacity:var(--tint-opacity,.5)}
  /* keeps the field saturated as a true brand colour everywhere */
  .poster .wash{position:absolute;inset:0;pointer-events:none;background:var(--field);
    mix-blend-mode:multiply;opacity:var(--wash-opacity,.14)}
  /* legibility scrim behind the type — no text-shadow needed */
  .poster .scrim{position:absolute;inset:0;pointer-events:none}
  .poster .scrim.bottom{background:linear-gradient(to top,
    color-mix(in srgb,var(--field) 88%,#160a2a) 0%,
    color-mix(in srgb,var(--field) 72%,#160a2a) 24%,
    color-mix(in srgb,var(--field) 55%,transparent) 46%,
    transparent 66%)}
  /* the weekly day-list needs more cover (9 rows of small type) */
  .poster .scrim.strong{background:linear-gradient(to top,
    color-mix(in srgb,var(--field) 92%,#160a2a) 0%,
    color-mix(in srgb,var(--field) 82%,#160a2a) 44%,
    color-mix(in srgb,var(--field) 62%,#160a2a) 70%,
    color-mix(in srgb,var(--field) 42%,transparent) 88%,transparent 100%)}

  /* OVERSIZED CROPPED MAYITA WORDMARK — CSS-masked to a bright colour, scaled so
     small parts of both edges trim + the top crops off the top edge. */
  .poster .logo{position:absolute;left:50%;top:var(--logo-top,-6.5%);
    width:var(--logo-w,107%);transform:translateX(-50%);aspect-ratio:310/73;
    background:var(--logo-color,var(--turquesa));
    -webkit-mask-image:url("mayita-b-archive/mayita-wordmark-mask.svg");
            mask-image:url("mayita-b-archive/mayita-wordmark-mask.svg");
    -webkit-mask-size:100% 100%;mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    z-index:4;pointer-events:none}
  /* Yasu brand word → Futura text in the same cropped-hero slot (Futura is YASU-only) */
  .poster .logo.txt{background:none;-webkit-mask-image:none;mask-image:none;aspect-ratio:auto;
    top:var(--logo-top,3%);width:auto;left:0;right:0;transform:none;text-align:center;
    font-family:"Futura Cond","Futura Std",sans-serif;font-weight:800;color:var(--logo-color);
    text-transform:uppercase;letter-spacing:-.005em;line-height:.8;white-space:nowrap}

  /* ---------- MAYITA atom deco-border — ported from the prod AtomDecoBorder ----------
     The signature frame: ONE "atom" SVG masked + filled with currentColor, distributed
     per-edge by flex space-between so density = exact count and an atom is pinned at every
     corner. Each atom is rotate(45deg) → the mint diamond motif. Counts are derived from the
     poster aspect (buildAtoms in _poster.js) against a shared cqw scale, so spacing reads
     proportionally identical on every frame. mix-blend-difference inverts the atoms against
     the field (mint over magenta). Mayita only — Yasu uses the .stad skin, no border. */
  /* Geometry measured off the Figma source-redraw border vectors (2026-07-01):
     atom bbox 36.8px, pitch 95px, event inset 47×29px, weekly inset 53×61px — all
     ÷1080 → cqw. The atom mask is EXTRACTED from that vector (deco-atom-figma.svg),
     so no rotate/scale fudge is needed any more. */
  .poster .deco{position:absolute;inset:var(--atom-inset,2.7cqw 4.4cqw);z-index:4;pointer-events:none;
    color:var(--deco-color,#fff);mix-blend-mode:difference;
    --atom-size:3.4cqw;--atom-svg:url("_assets/deco-atom-figma.svg")}
  .poster.weekly .deco{--atom-inset:5.6cqw 4.95cqw}
  /* TV landscape (2026-07-02 Ben: tvl atoms "too chunky, too big — smaller, higher
     density; the logo too"): size/pitch off the MIN dimension (height) instead of
     width. Portrait frames are untouched (cqmin==cqw there). buildAtoms mirrors
     this with a wide-frame branch (more atoms per edge + re-fit wordmark hole). */
  .poster.is-tvl .deco{--atom-size:3.4cqmin;--atom-inset:2.7cqmin 4.4cqmin}
  .poster.is-tvl.weekly .deco{--atom-inset:5.6cqmin 4.95cqmin}
  .poster.is-tvl .deco.logo-wide .deco-logo{height:3.6cqmin;width:calc(3.6cqmin*4.247 + .6cqmin)}
  .poster .deco i{position:absolute;display:flex}
  /* top/bottom run the full width, left/right the full height — corners coincide (one atom) */
  .poster .deco .t,.poster .deco .b{left:0;right:0;height:var(--atom-size);align-items:center;justify-content:space-between}
  .poster .deco .t{top:0}.poster .deco .b{bottom:0}
  .poster .deco .l,.poster .deco .r{top:0;bottom:0;width:var(--atom-size);flex-direction:column;align-items:center;justify-content:space-between}
  .poster .deco .l{left:0}.poster .deco .r{right:0}
  .poster .deco .atom{flex:0 0 auto;width:var(--atom-size);height:var(--atom-size);background:currentColor;
    -webkit-mask:var(--atom-svg) center/contain no-repeat;mask:var(--atom-svg) center/contain no-repeat}
  /* blank slot — holds its place in the space-between run but draws nothing, opening a
     gap in the border for the MAYITA wordmark. */
  .poster .deco .atom.hole{background:none;-webkit-mask:none;mask:none}
  /* MAYITA wordmark baked INTO the border, sitting in the atom hole. currentColor + the
     .deco difference blend → it inverts against the field like the atoms (mint over
     magenta). Ratio 310:73. Per frame: wide/normal = horizontal top-left; tall portrait
     = vertical down the right edge. buildAtoms sets .logo-wide / .logo-tall. */
  /* outer box positions + scales; inner .wm carries the mask. The wordmark SVG keeps
     its intrinsic 310:73 ratio (mask: contain) so it NEVER stretches — the box only
     sets size/orientation. Geometry mirrors the prod AtomDecoBorder logo exactly. */
  .poster .deco .deco-logo{position:absolute;display:none;align-items:center;justify-content:center}
  .poster .deco .deco-logo .wm{display:block;background:currentColor;
    -webkit-mask:url("_assets/mayita-wordmark.svg") center/contain no-repeat;
            mask:url("_assets/mayita-wordmark.svg") center/contain no-repeat}
  /* Figma: wordmark box spans 17.6%..34.7% of the border width, centered on the top
     atom row (its center rides ~atom/2 below the border line — same construction). */
  .poster .deco.logo-wide .deco-logo{display:flex;top:calc(var(--atom-size)/2);left:17.6%;
    width:17%;height:3.6cqw;transform:translateY(-50%)}
  .poster .deco.logo-wide .deco-logo .wm{width:100%;height:100%}
  /* Figma ig ref: the vertical wordmark anchors at ~20–28% of the edge height, not mid */
  .poster .deco.logo-tall .deco-logo{display:flex;right:calc(var(--atom-size)/2);top:24%;
    width:4.7cqw;height:20cqw;transform:translate(50%,-50%)}
  .poster .deco.logo-tall .deco-logo .wm{width:20cqw;height:4.7cqw;transform:rotate(90deg)}
  /* the wordmark now lives IN the border → retire the big floating wordmark (Mayita only;
     Yasu keeps its .logo for the "YASU" Futura word). */
  [data-venue="mayita"] .poster .logo{display:none}
  [data-venue="yasu"] .poster .deco{display:none}
  /* Body content insets off the atom band (refs inset the body off the border).
     The band reaches ~deco-inset + atom-sz inward; clear it plus a small gap so
     schedule rows / lineup / times never sit under the diamonds. Mayita only. */
  [data-venue="mayita"] .poster{--deco-clear:9.4cqw}
  [data-venue="mayita"] .poster .stack{
    padding-left:max(var(--pad),var(--deco-clear));
    padding-right:max(var(--pad),var(--deco-clear));
    padding-bottom:max(var(--pad),var(--deco-clear))}
  /* ===== IG DEAD-ZONES (2026-07-06 Ben: ALL ig posters keep their payload in the
     CENTER-MIDDLE band). The IG app chrome covers ~the top 13% (username header)
     and ~the bottom 15% (reply bar) of a story — content parked there is unreadable
     in-app. Center the cluster and reserve both zones; supersedes the 2026-07-01
     bottom-lift (T7) which only cleared the send bar. */
  [data-venue="mayita"] .poster.is-ig .stack{justify-content:center;
    padding-top:max(var(--pad),13cqh);padding-bottom:max(var(--pad),15cqh)}
  [data-venue="mayita"] .poster.is-ig .stack .spacer{display:none}
  /* Mayita weekly: compress the agenda into the safe band (the ghost wk-title is a
     decorative watermark — it may keep cropping into the top zone). */
  .poster.is-ig .arch.wk .wk-stack{padding-top:max(var(--pad),14cqh);padding-bottom:max(var(--pad),15cqh)}
  /* Yasu IG === TVP (Ben 2026-07-06: "all yasu ig should look more like tvp"). Yasu
     keeps its full-bleed Stadium-Deck/Sunset framing on IG — the wave border already
     dresses the edges — so NO extra IG inset here (both are 9:16; identical render). */

  /* ===== BG PHOTO + GLASS MAYITA + BLEND TITLE (Mayita event posters) =====
     A curated photo sits ABOVE the base field but BELOW the type / glass wordmark /
     atom border (z0) — nothing covers the content. It bleeds 32px past the top and
     each side (clipped by the frame). Three treatments, gated by .has-bg:
       bg-A brand-colour duotone · bg-B full-colour+scrim · bg-C desat+light tint. */
  .poster .bgphoto,.poster .bgtint,.poster .bgleg{display:none;pointer-events:none}
  .poster.has-bg{background:#08040f}
  .poster.has-bg .bgphoto{display:block;position:absolute;top:-32px;left:-32px;right:-32px;bottom:0;z-index:0;
    background:var(--bg-img) var(--bg-pos,center 34%)/cover no-repeat}
  .poster.has-bg .bgtint{display:block;position:absolute;inset:0;z-index:1}
  .poster.has-bg .bgleg{display:block;position:absolute;inset:0;z-index:2}
  /* The event title's mix-blend-difference must composite against the PHOTO. With
     .stack at z-index:3 it became its own stacking context and the blend was isolated
     (rendered flat white). Drop the bg layers + stack to z-index:auto on photo posters
     so they all share the .arch stacking context (paint order falls back to DOM order:
     photo → tint → scrim → stack), and the title now inverts against the image. */
  .poster.has-bg .bgphoto,.poster.has-bg .bgtint,.poster.has-bg .bgleg,.poster.has-bg .stack{z-index:auto}
  /* the photo replaces the engraving + its field treatments */
  .poster.has-bg .engrave,.poster.has-bg .tint,.poster.has-bg .wash,.poster.has-bg .scrim{display:none}
  .poster.has-bg.bg-A .bgphoto{filter:grayscale(1) contrast(1.08)}
  .poster.has-bg.bg-A .bgtint{background:var(--bg-tint);mix-blend-mode:multiply;opacity:.64}
  .poster.has-bg.bg-A .bgleg{background:linear-gradient(to top,var(--bg-leg,#08040f) 0%,rgba(0,0,0,.4) 24%,transparent 48%)}
  .poster.has-bg.bg-B .bgphoto{filter:contrast(1.06)}
  .poster.has-bg.bg-B .bgleg{background:linear-gradient(to top,var(--bg-leg,#08040f) 4%,rgba(0,0,0,.3) 40%,transparent 66%)}
  .poster.has-bg.bg-C .bgphoto{filter:grayscale(.55) contrast(1.04)}
  .poster.has-bg.bg-C .bgtint{background:var(--bg-tint);mix-blend-mode:multiply;opacity:.3}
  .poster.has-bg.bg-C .bgleg{background:linear-gradient(to top,var(--bg-leg,#08040f) 0%,rgba(0,0,0,.4) 24%,transparent 48%)}
  /* Happy Hour — align the photo to the TOP (Ben) so the subject reads above the title block */
  .poster.has-bg.k-hh .bgphoto{background-position:var(--bg-pos,center top)}
  /* Karaoke — top-align so the singer/sombrero crown shows instead of a center crop (Ben 2026-07-06) */
  .poster.has-bg.k-kara .bgphoto{background-position:var(--bg-pos,center top)}
  /* Pool — the white floatie coils camouflaged the title (2026-07-01 P0 #11):
     stronger, taller bottom scrim guarantees dark ground behind the title block */
  .poster.has-bg.k-pool .bgleg{background:linear-gradient(to top,var(--bg-leg,#08040f) 0%,
    rgba(0,0,0,.62) 28%,rgba(0,0,0,.3) 52%,transparent 74%)}
  /* GLASS big MAYITA — frosted; the photo refracts through. Subtle by default
     (vars set by applyThemeEl). Replaces the solid colour-invert fill on photo posters. */
  .poster.has-bg .logo{background:var(--glass-fill,rgba(255,255,255,.10));
    -webkit-backdrop-filter:blur(var(--glass-blur,5px)) saturate(1.2) brightness(var(--glass-br,1.05));
            backdrop-filter:blur(var(--glass-blur,5px)) saturate(1.2) brightness(var(--glass-br,1.05));
    filter:var(--glass-edge,drop-shadow(0 0 .5px rgba(255,255,255,.6)))}
  /* the event title joins the wordmark + atom border in mix-blend-difference over
     the photo (body copy stays solid cream for legibility) */
  .poster.has-bg .event{mix-blend-mode:difference;color:#fff}

  /* ---------- bottom-anchored type stack ---------- */
  .poster .stack{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
    padding:var(--pad,18px);color:var(--hueso)}
  .poster .spacer{flex:1;min-height:0}
  /* the event word — CS Revenant caps, BIG + tight; each word stacks on its own line
     and fills the width so multi-word titles (HAPPY HOUR, KARAOKE NIGHT) read large. */
  .poster .event{font-family:"CS Revenant",cursive;font-weight:400;text-transform:uppercase;
    line-height:.78;letter-spacing:-.025em;margin:0;color:var(--hueso);white-space:normal}
  /* EVENT title — the Mayita voice: ALL-CAPS, italic, drastically tight tracking,
     each word its own line, placement authored per template (k-*) below. */
  .poster.event .event{display:flex;flex-direction:column;align-items:flex-start;
    font-style:italic;line-height:.70;letter-spacing:-.06em}
  .poster.event .event .ln{display:block;width:max-content;max-width:100%;white-space:nowrap}
  /* ---- authored per-template stagger (align-self never overflows the box) ---- */
  /* Karaoke: KARAOKE↖ over NIGHT↘ tucked up to the right (matches the original) */
  .poster.event.k-kara  .event .ln2{align-self:flex-end;margin-top:-.08em}
  /* Happy Hour: HAPPY↖ / HOUR↘ */
  .poster.event.k-hh    .event .ln2{align-self:flex-end;margin-top:-.04em}
  /* Sports: NAME↖ · small centered VS · NAME↘. Three long lines need real leading
     (the .70 default collides full-width team names) — looser line-height + no
     negative tuck so BRAZIL / VS / ARGENTINA never overlap. */
  .poster.event.k-sport .event{line-height:.92}
  .poster.event.k-sport .event .ln2{align-self:center;font-style:normal;font-size:.46em;
    letter-spacing:.06em;opacity:.92;margin:.02em 0}
  .poster.event.k-sport .event .ln3{align-self:flex-end;margin-top:0}
  /* editorial composition: the date/time sits ABOVE the title in the accent
     colour (like the original Karaoke); title + footer stay over the bottom scrim. */
  .poster.event .ev-stack .meta-l{margin:0 0 .42em;color:var(--accent);
    font-weight:700;letter-spacing:.16em;opacity:1}
  /* Mayita: date line + subtitle center-aligned across the venue (Ben 2026-07-06,
     flagged on Sports). The staggered display title keeps its authored placement. */
  [data-venue="mayita"] .poster.event .ev-stack .meta-l{text-align:center}
  [data-venue="mayita"] .poster.event .lineup-l{text-align:center}
  /* On photo posters the brand accent can vibrate against the bg duotone — give the
     date/time a soft dark halo so it stays legible over busy imagery. Happy Hour's
     accent is cobalt over a GOLD photo (complementary clash) → use cream there. */
  .poster.has-bg .ev-stack .meta-l{text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 6px rgba(0,0,0,.35)}
  .poster.has-bg.k-hh .ev-stack .meta-l{color:var(--hueso)}
  /* Pool: magenta date sliced against the bright white floatie coils (T5) → cream */
  .poster.has-bg.k-pool .ev-stack .meta-l{color:var(--hueso)}
  /* lineup — General Sans bold caps, names separated by an accent middot */
  .poster .lineup-l{font-family:var(--ui);font-weight:700;text-transform:uppercase;
    line-height:1.04;letter-spacing:.01em;margin:.5em 0 0;color:var(--hueso);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .poster .lineup-l .mid{color:var(--accent);font-weight:600;padding:0 .18em}
  /* sport matchup flag chips flanking the league line (only flags land here) */
  .poster .lineup-l img{width:.95em;height:.95em;object-fit:cover;vertical-align:-.14em;
    margin:0 .4em;border-radius:.07em}
  /* sport matchup flag riding WITH its country in the big title */
  .poster .event .ln .tflag{display:inline-flex;vertical-align:baseline}
  .poster .event .ln .tflag img{width:.62em;height:.62em;object-fit:cover;vertical-align:-.04em;
    border-radius:.06em;margin:0 .22em}
  .poster .meta-l{font-family:var(--ui);font-weight:600;text-transform:uppercase;
    letter-spacing:.1em;margin-top:.7em;opacity:.96;white-space:nowrap;color:var(--hueso)}
  .poster .promo-l{font-family:var(--ui);font-weight:500;letter-spacing:.01em;margin-top:.55em;
    opacity:.88;line-height:1.3;color:var(--hueso)}
  .poster .footer{display:block;min-width:0}
  .poster .footer .fcol{min-width:0}

  /* ============================================================================
     TYPE-FIRST composition — kara / hh / mkt (portrait event posters).
     Ben 2026-07-04: "type hero is the way, reorganize so the text is well positioned."
     The oversized CS-Revenant title IS the composition; the botanical engraving /
     duotone photo recedes to a dim ground. Layout is reorganized from the default
     BOTTOM-anchor into a single, optically-centered cluster:
        meta (kicker)  →  HERO TITLE  →  support (lineup+promo / chips+cap)
     — one tight typographic group floating in the field, framed by breathing room
     top & bottom so nothing crowds the atom band. Scoped :not(.is-tvl) so the
     landscape 2-column layout is untouched.
     ============================================================================ */
  /* 1 · art recedes to texture so the type reads as the hero */
  .poster.type-first:not(.is-tvl) .engrave{opacity:.42}
  .poster.type-first:not(.is-tvl) .tint{opacity:.30}
  .poster.type-first:not(.is-tvl) .wash{opacity:.34}
  .poster.type-first.has-bg:not(.is-tvl) .bgphoto{filter:grayscale(1) brightness(.5) contrast(1.06)}
  .poster.type-first.has-bg:not(.is-tvl) .bgtint{opacity:.9}
  /* night karaoke stays cobalt — keep the engraving legible over the dark field */
  .poster.type-first.is-night:not(.is-tvl) .engrave{opacity:.5}

  /* 2 · reorganize the stack: kill the bottom spacer, center the cluster */
  .poster.event.type-first:not(.is-tvl) .stack{justify-content:center}
  .poster.event.type-first:not(.is-tvl) .spacer{display:none}

  /* 3 · cluster rhythm — meta hugs just above the title, support sits a clear beat
     below the giant descenders (never cramped, never floating away) */
  .poster.event.type-first:not(.is-tvl) .ev-stack .meta-l{margin:0 0 .5em}
  .poster.event.type-first:not(.is-tvl) .event{margin:0}
  .poster.event.type-first:not(.is-tvl) .lineup-l{margin-top:.85em}
  .poster.event.type-first:not(.is-tvl) .footer{margin-top:.7em}
  .poster.event.type-first:not(.is-tvl) .chip-grid{margin-top:.85em}
  /* support recedes a touch so the hierarchy is unmistakable: TITLE >> everything */
  .poster.event.type-first:not(.is-tvl) .lineup-l,
  .poster.event.type-first:not(.is-tvl) .promo-l{opacity:.9}

  /* ---- U8B Mayita sports BOARD (2+ games) — a games list on the field, sized
     in em off the auto-fit engine so 2/3/4+ rows read evenly. Each row: flagged
     matchup + kickoff time, hairline-separated like the weekly day-list. ---- */
  .poster .sports-board{display:flex;flex-direction:column;margin:.55em 0 0;min-width:0}
  .poster .sports-board .sb-row{display:flex;align-items:baseline;gap:.7em;min-width:0;
    border-top:1px solid rgba(247,238,221,.22);padding:.16em 0;white-space:nowrap;overflow:hidden}
  .poster .sports-board .sb-row:first-child{border-top:0}
  /* NO ellipsis here: the JS auto-fit (fitEvent) shrinks each row to fit, and an
     ellipsis would clip the matchup to width first — masking the real overflow so
     the shrink never fires. .sb-row keeps overflow:hidden as the last-ditch guard. */
  .poster .sports-board .sb-mu{font-family:var(--ui);font-weight:700;text-transform:uppercase;
    letter-spacing:.01em;color:var(--hueso);min-width:0;flex:1;
    display:flex;align-items:center;gap:.34em}
  .poster .sports-board .sb-mu b{font-weight:700;white-space:nowrap}
  .poster .sports-board .sb-v{color:var(--accent);font-weight:600;padding:0 .04em;flex:none}
  .poster .sports-board .sb-f{width:.92em;height:.92em;object-fit:cover;flex:none;
    border:1px solid rgba(247,238,221,.3);border-radius:1px}
  .poster .sports-board .sb-t{font-family:var(--ui);font-weight:500;color:var(--hueso);opacity:.78;
    flex:none;font-variant-numeric:tabular-nums}

  /* ===== CHIPS — boxed-chip grid (Market + Big-Event Nights ONLY). Cream serif
     rectangles, flex-wrap, modeled on the Yasu paper-chip vocabulary but Mayita-
     skinned. A feature "act" chip (accent fill) + an entry-copy caption line.
     Font-size set in em by the auto-fit engine so 4/8/12 chips read evenly. ===== */
  .poster .chip-grid{display:flex;flex-wrap:wrap;gap:.32em;margin:.55em 0 0;min-width:0;
    justify-content:flex-start;align-content:flex-start}
  .poster .chip-grid .chip{font-family:"CS Revenant",cursive;font-weight:400;text-transform:uppercase;
    line-height:.94;letter-spacing:-.01em;color:var(--chip-ink,#1a0e14);background:var(--hueso);
    border-radius:.1em;padding:.18em .42em .24em;white-space:nowrap;box-shadow:0 1px 5px rgba(0,0,0,.22)}
  /* feature/headline vendor chip — a FULL-WIDTH accent banner below the category
     chips (Ben 2026-07-06: inline it ran "too tall" and uneven; make it stand out).
     Reads as the marquee act, not just a bigger tag. */
  .poster .chip-grid .chip.feat{background:var(--accent);color:var(--hueso);font-size:1.5em;
    flex:1 0 100%;text-align:center;letter-spacing:.02em;padding:.26em .5em .32em;
    box-shadow:0 3px 12px rgba(0,0,0,.32);order:99;margin-top:.14em}
  .poster .chip-cap{font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
    color:var(--hueso);opacity:.96;margin:.5em 0 0;line-height:1.2;white-space:nowrap;
    text-shadow:0 1px 3px rgba(0,0,0,.55)}
  /* Big-Event (festival mode of Nights): headliner chips read a touch bolder */
  .poster.k-flag.is-big .chip-grid{gap:.36em}
  .poster.k-flag.is-big .chip-grid .chip{padding:.2em .5em .26em}
  /* ---- HEADLINER TIER (Ben 2026-07-04) — starred acts anchor the festival poster:
     oversized accent chips, one per row at the top; supporting acts wrap smaller
     below. Sized in em off the auto-fit engine so the whole grid scales together. */
  .poster .chip-grid .chip.head{background:var(--accent);color:var(--hueso);
    font-size:1.9em;letter-spacing:-.015em;padding:.2em .52em .28em;
    box-shadow:0 3px 13px rgba(0,0,0,.34);order:-1}
  /* one headliner per row (full-width), centered — the marquee stack */
  .poster.is-big .chip-grid .chip.head{flex:1 0 100%;text-align:center}
  /* supporting acts recede so the hierarchy is unmistakable */
  .poster.is-big .chip-grid .chip:not(.head):not(.feat){font-size:.92em;opacity:.94}
  .poster.mood-navy .chip-grid .chip.head{color:#fff}
  .poster.mood-navy .chip-grid .chip{color:#13245e}
  /* tvl 2-column: chip body + caption live in the narrow left column — let the
     caption wrap and keep everything inside the column so nothing bleeds right */
  .poster.is-tvl .chip-cap{white-space:normal;line-height:1.18}
  .poster.is-tvl.has-bg .chip-grid,.poster.is-tvl.has-bg .chip-cap{max-width:100%}
  .poster.is-tvl.event.has-bg .footer .promo-l{max-width:100%}

  /* ===== MAYITA WEEKLY — Figma 354-2969 (FIGMA IS LAW here, 2026-07-01 review) =====
     Field = solid #EE4898 + a 40% black(top)→#666(bottom) gradient overlay, with the
     signature x-ray MARIACHI art in MULTIPLY, oversized so it bleeds past both edges. */
  [data-venue="mayita"] .poster.weekly{background:#EE4898}
  .poster .arch.wk{position:absolute;inset:0;overflow:hidden;
    background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(102,102,102,.4) 100%),#EE4898}
  .poster .arch.wk .wkbg{position:absolute;inset:0;z-index:0;pointer-events:none;
    background:url("_assets/bg/weekly-mariachi.jpg") center/auto 100% no-repeat;
    mix-blend-mode:multiply;opacity:.6}
  .poster .arch.wk .wk-stack{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
    padding:max(var(--pad),18cqw) max(var(--pad),9.4cqw) max(var(--pad),9.4cqw)}
  /* ghost THIS WEEK — Figma: NO fill, 2px stroke fading white→transparent down the
     glyphs, LINEAR_DODGE (≈plus-lighter), 187.56px/1094 ≈ 17.1cqw, line-height .59 so
     the caps CROP off the top edge; full width at y=0, BEHIND the agenda content. */
  .poster .arch.wk .wk-title{position:absolute;top:0;left:0;right:0;z-index:0;margin:0;
    pointer-events:none;font-family:"CS Revenant",cursive;font-style:italic;font-weight:400;
    text-transform:uppercase;text-align:center;white-space:nowrap;
    color:transparent;-webkit-text-stroke:.18cqw rgba(255,255,255,.95);
    font-size:17.1cqw;line-height:.59;letter-spacing:.14em;text-indent:.14em;
    mix-blend-mode:plus-lighter;text-shadow:none;
    -webkit-mask-image:linear-gradient(180deg,#fff 25%,rgba(255,255,255,0) 100%);
            mask-image:linear-gradient(180deg,#fff 25%,rgba(255,255,255,0) 100%)}
  /* day rows — packed rhythm (Figma: fixed ~5.9cqh gaps, block centered), never
     space-between ballooning; bottom safe zone = the deco clearance. */
  .poster .wk-list{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;
    gap:min(5.9cqh,2.6em)}
  /* day + title read as ONE centered pair (Figma "block center-aligned"): the old
     space-between flung the day to the far-left edge and the title to the far-right,
     opening a ~250px dead gutter + left-right ping-pong (2026-07-01 review §1a P2). */
  .poster .wk-row{display:flex;align-items:center;justify-content:center;gap:4cqw;width:100%;min-width:0}
  .poster .wk-day{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
    font-family:"CS Revenant",cursive;color:#fff;line-height:.9;text-align:center}
  /* Figma: day = stroke-only OUTLINE caps (3px on 1094 ≈ .27cqw), date subline beneath */
  .poster .wk-day .d{font-style:normal;font-size:6.6cqw;letter-spacing:-.02em;
    color:transparent;-webkit-text-stroke:.27cqw #fff}
  .poster .wk-day .dd{font-style:italic;font-size:3.5cqw;letter-spacing:-.03em;opacity:.92}
  .poster .wk-ev{font-family:"CS Revenant",cursive;font-style:italic;font-weight:400;text-transform:uppercase;
    color:#fff;font-size:8.6cqw;line-height:.84;letter-spacing:-.045em;text-align:left;flex:0 1 auto;min-width:0}
  .poster .wk-teams{flex:0 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:.05em}
  .poster .wk-teams .tm{display:flex;align-items:center;gap:.34em;font-family:"CS Revenant",cursive;
    font-style:italic;color:#fff;font-size:6.6cqw;line-height:.9;text-transform:uppercase;letter-spacing:-.045em}
  .poster .wk-teams .tm img{width:5cqw;height:5cqw;object-fit:cover;border:.5cqw solid #fff;border-radius:.5cqw;flex:none}

  /* Grouped weekly days: the date rail appears once; events share a right-hand
     stack with hairline dividers and compact times. Empty days are omitted. */
  .poster .arch .wk-day-group{align-items:stretch}
  .poster .arch .wk-items{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
  .poster .arch .wk-item{display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:center;
    gap:1.6cqw;min-width:0;padding:.55cqh 0}
  .poster .arch .wk-item+.wk-item{border-top:.12cqw solid rgba(255,255,255,.34)}
  .poster .arch .wk-item .wk-time{font-family:"CS Revenant",cursive;font-style:italic;font-size:2.7cqw;
    letter-spacing:-.02em;color:#fff;white-space:nowrap;opacity:.82;text-align:right}
  .poster .arch .wk-day-group:has(.wk-item+.wk-item) .wk-ev{font-size:5.8cqw;line-height:.9}
  .poster .arch .wk-day-group:has(.wk-item+.wk-item) .wk-teams .tm{font-size:4.7cqw}
  .poster .arch .wk-day-group:has(.wk-item+.wk-item) .wk-teams .tm img{width:3.8cqw;height:3.8cqw;border-width:.3cqw}

  /* two posters share the lane; show one at a time. resting = weekly, editing = event. */
  .poster-wrap .poster{display:none}
  .app[data-editing="0"] .poster.weekly{display:block}
  .app[data-editing="1"] .poster.event{display:block}

  /* WEEKLY landscape (tvl) → Figma mayitaTV 508:7620: CENTERED 3-column grid, blocks
     center-aligned, day+date INLINE, title beneath; ghost THIS WEEK behind (DIFFERENCE
     at .56 on the TV frame per Figma). */
  .poster.is-tvl .arch.wk .wk-stack{padding:max(var(--pad),30cqh) max(var(--pad),9.4cqw) max(var(--pad),10cqh)}
  /* the .1cqw hairline vanished over the dark landscape art (2026-07-01 review §1a P2);
     a .32cqw stroke reads as a cropped ghost-texture without becoming a solid headline. */
  .poster.is-tvl .arch.wk .wk-title{font-size:17.95cqw;mix-blend-mode:difference;opacity:.62;
    -webkit-text-stroke:.32cqw rgba(255,255,255,.95)}
  /* count-responsive rows: JS (fitArchiveWeeklyEl) fills 3-up rows (Figma 3/3/1) with a
     fixed basis; justify-content:center centers a short last row automatically. */
  /* scoped to .arch — the shared class names (wk-list/wk-row/wk-ev) also exist on the
     Yasu .stad skin, so an unscoped .poster.is-tvl rule would leak across venues. */
  .poster.is-tvl .arch .wk-list{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;
    align-content:center;row-gap:2cqh;column-gap:4cqw;overflow:hidden}
  .poster.is-tvl .arch .wk-row{flex:0 0 auto;flex-direction:column;align-items:center;
    justify-content:flex-start;gap:.06em;font-size:4cqw;min-width:0;overflow:hidden}
  .poster.is-tvl .arch .wk-day{flex-direction:row;gap:.4em;align-items:baseline}
  .poster.is-tvl .arch .wk-day .d{font-size:.92em;-webkit-text-stroke:.12cqw #fff}
  .poster.is-tvl .arch .wk-day .dd{font-size:.58em}
  /* titles WRAP to two lines (Figma: 2-line 505px column) — never ellipsize (T9) */
  .poster.is-tvl .arch .wk-ev{font-size:1em;line-height:1;text-align:center;white-space:normal;
    overflow:hidden;max-width:100%;padding-bottom:.04em}
  .poster.is-tvl .arch .wk-teams{align-items:center;gap:0}
  .poster.is-tvl .arch .wk-teams .tm{font-size:.8em}
  .poster.is-tvl .arch .wk-teams .tm img{width:.78em;height:.78em}
  .poster.is-tvl .arch .wk-day-group .wk-items{width:100%}
  .poster.is-tvl .arch .wk-day-group .wk-item{gap:.5em;padding:.08em 0}
  .poster.is-tvl .arch .wk-day-group .wk-item .wk-time{font-size:.42em}
  .poster.is-tvl .arch .wk-day-group:has(.wk-item+.wk-item) .wk-ev{font-size:.72em}
  .poster.is-tvl .arch .wk-day-group:has(.wk-item+.wk-item) .wk-teams .tm{font-size:.62em}

  /* ================= LANDSCAPE 16:9 — event footer becomes a row, type goes big ===== */
  .poster.is-tvl .footer{display:flex;justify-content:space-between;align-items:flex-end;gap:6%}
  .poster.is-tvl .footer .fcol{flex:1;min-width:0}
  .poster.is-tvl .footer .promo-l{margin-top:0;text-align:right;align-self:flex-end;flex:none;max-width:46%}
  /* Mayita TV-landscape EVENT (photo posters) → 2-column deck (Ben): the photo +
     glass MAYITA wordmark fill the RIGHT column; meta / title / lineup / promo sit
     on the solid field at LEFT. The photo's left edge feathers into the field. */
  .poster.is-tvl.has-bg .bgphoto{left:auto;right:-32px;top:-32px;bottom:0;width:62%;
    /* 2026-07-02 Ben: blend the photo panel into the field — no more hard cut */
    -webkit-mask:linear-gradient(90deg,transparent 0,#000 30%);
            mask:linear-gradient(90deg,transparent 0,#000 30%)}
  .poster.is-tvl.has-bg .bgtint{left:44%}
  .poster.is-tvl.has-bg .bgleg{left:42%;
    background:linear-gradient(to right,var(--bg-leg,#08040f) 0%,rgba(0,0,0,.32) 28%,transparent 66%)}
  /* 2-col tvl (NOT the full-bleed Market/Big-Event): feather the photo's LEFT edge so it
     DISSOLVES into the field instead of butting against a hard column seam. The mask
     reveals the field colour through the photo's inner third → a smooth duotone fade
     (Ben: "photo should blend into the bg colour"). The bgtint then re-colours the fade
     toward the brand tint so the seam reads as one graded field, not a pasted panel. */
  /* 2026-07-06 Ben: "some tvl still look just split" — the 62%-wide panel with a
     narrow feather kept reading as two pasted columns (flat field | photo). New
     treatment: the photo goes FULL-BLEED and one long grade runs the whole width —
     faint duotone under the text column on the left, clean image on the right.
     No seam anywhere; the text column keeps contrast via the strengthened leg
     gradient (the difference-blend title sits over a near-solid dark left third,
     and the grade is smooth so it can never hard-cut a glyph — P0 #14 guard). */
  .poster.is-tvl.has-bg:not(.k-mkt):not(.is-big) .bgphoto{
    left:-32px;right:-32px;width:auto;
    -webkit-mask:linear-gradient(90deg,rgba(0,0,0,.26) 0%,rgba(0,0,0,.4) 34%,#000 64%);
            mask:linear-gradient(90deg,rgba(0,0,0,.26) 0%,rgba(0,0,0,.4) 34%,#000 64%)}
  /* bg-A (Nights duotone) tint now covers the full width so the graded photo stays
     one continuous magenta field. */
  .poster.is-tvl.has-bg.bg-A:not(.is-big) .bgtint{left:0}
  /* bg-B / bg-C (full-colour photo): the brand wash runs the same full-width grade,
     binding the faint left photo to the field colour. */
  .poster.is-tvl.has-bg.bg-B .bgtint,.poster.is-tvl.has-bg.bg-C .bgtint{display:block;left:0;
    background:linear-gradient(90deg,var(--bg-tint) 0%,
      color-mix(in srgb,var(--bg-tint) 60%,transparent) 38%,transparent 70%);
    mix-blend-mode:normal;opacity:.55}
  .poster.is-tvl.has-bg:not(.k-mkt):not(.is-big) .bgleg{left:0;
    background:linear-gradient(90deg,var(--bg-leg,#08040f) 0%,
      color-mix(in srgb,var(--bg-leg,#08040f) 80%,transparent) 32%,rgba(0,0,0,.22) 56%,transparent 78%)}
  /* T9: the narrow left column WRAPS its lineup/meta line instead of ellipsizing
     (P0s #12/#13: "CASH PR…", "EVER…") */
  .poster.is-tvl.event.has-bg .lineup-l{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
  .poster.is-tvl.event.has-bg .ev-stack{padding-right:58%}
  .poster.is-tvl.event.has-bg .footer{flex-direction:column;align-items:flex-start;gap:.2em}
  /* column footer: stretch the text column to the content box so nowrap lineup/meta
     lines clip with an ellipsis instead of bleeding past the poster edge */
  .poster.is-tvl.event.has-bg .footer .fcol{width:100%;min-width:0}
  .poster.is-tvl.event.has-bg .footer .promo-l{text-align:left;align-self:flex-start;max-width:100%}
  /* Big-Event tvl: same rule — the promo was floating mid-right over the crowd */
  .poster.is-tvl.event.is-big .footer{flex-direction:column;align-items:flex-start;gap:.3em}
  .poster.is-tvl.event.is-big .footer .promo-l{text-align:left;align-self:flex-start;max-width:100%;flex:none}
  .poster.is-tvl.has-bg .logo{left:auto;right:0;width:50%;transform:none;margin-right:2%}
  /* Market + Big-Event in tvl: the chip body needs width, so use a FULL-BLEED photo
     (no 2-column) with a bottom scrim; chips wrap across the full landscape. */
  .poster.is-tvl.has-bg.k-mkt .bgphoto,.poster.is-tvl.has-bg.is-big .bgphoto{left:-32px;right:-32px;width:auto}
  .poster.is-tvl.has-bg.k-mkt .bgtint,.poster.is-tvl.has-bg.is-big .bgtint{left:0}
  .poster.is-tvl.has-bg.k-mkt .bgleg,.poster.is-tvl.has-bg.is-big .bgleg{left:0;
    background:linear-gradient(to top,var(--bg-leg,#08040f) 4%,rgba(0,0,0,.45) 38%,rgba(0,0,0,.2) 70%)}
  .poster.is-tvl.event.has-bg.k-mkt .ev-stack,.poster.is-tvl.event.has-bg.is-big .ev-stack{padding-right:var(--pad)}
  .poster.is-tvl.has-bg.k-mkt .logo,.poster.is-tvl.has-bg.is-big .logo{left:0;right:auto;width:78%;margin-right:0}
  .poster.is-tvl.event.has-bg.k-mkt .footer,.poster.is-tvl.event.has-bg.is-big .footer{flex-direction:row;align-items:baseline}

  /* ================= NIGHT THEME — noche field, glowing engraving =============
     Driven by .poster.is-night (set per template: Mayita Nights + Karaoke are
     always night). Legacy .dark ancestor kept as an alias for any QA surface. */
  .dark .poster,.poster.is-night{--field:var(--noche);--wash-opacity:0;
    --tint-color:color-mix(in srgb,var(--accent) 62%,var(--noche));--tint-opacity:.5}
  /* the night field reads as a blue↔magenta gradient (the Karaoke colour energy),
     not flat noche; the screened engraving still glows on top. */
  .poster.is-night{background:linear-gradient(158deg,#1c1149 0%,#48155a 50%,#172a72 100%)}
  .dark .poster .engrave,.poster.is-night .engrave{filter:invert(1) contrast(1.22) brightness(1.12)}
  .dark .poster .scrim.bottom,.dark .poster .scrim.strong,
  .poster.is-night .scrim.bottom,.poster.is-night .scrim.strong{
    background:linear-gradient(to top,rgba(22,10,42,.92) 0%,rgba(22,10,42,.66) 38%,
      rgba(22,10,42,.30) 64%,transparent 88%)}

  /* ================================================================
     YASU "STADIUM DECK" SKIN — the navy live-sports house style (Option A,
     replaces the old Tide Line). Rebuilt faithfully from Figma 1523-2920:
     deep royal-navy field, a white surf-wave + greek-key perimeter border
     (the signature, recolored from Figma pattern 1370:1802), white double-
     frame blocks (white mat + navy cell), condensed wide-tracked Futura caps,
     gold/green/sky accents, country-flag matchups, 3-up promo footers.
     Futura is YASU-only. Internal sizes are cqmin/cqh (the .poster is
     container-type:size) so it is resolution-free. Portrait stacks; landscape
     (.is-tvl) reflows to a wider 2-col deck; night deepens the navy field.
     ================================================================ */
  /* skin toggle: Mayita shows .arch, Yasu shows .stad */
  .stad{display:none}
  [data-venue="yasu"] .poster .arch{display:none}
  [data-venue="yasu"] .poster .stad{display:block}
  [data-venue="yasu"] .poster{
    --navy:#051c63;--navy2:#0a39c9;--paper:#fdfdfc;--gold:#fae39c;--green:#00e208;--sky:#96e2ff;
    background:var(--navy);
  }

  /* Use the exported Figma WA / IG fields as a single composed perimeter asset.
     This replaces the old arbitrary repeat tile and preserves the intended crop. */
  .stad{position:absolute;inset:0;font-family:"Futura Std","General Sans",sans-serif;color:var(--paper)}
  [data-venue="yasu"] .poster .stad:not(.sunset){background:var(--paper) url("yasu-stadium/assets/yasu-frame-wa.png") center/cover no-repeat}
  [data-venue="yasu"] .poster.is-ig .stad:not(.sunset),
  [data-venue="yasu"] .poster.is-tvp .stad:not(.sunset){background-image:url("yasu-stadium/assets/yasu-frame-ig.png")}

  /* content sits above the border, inset so the border frames it */
  .stad .sinner{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;padding:2.3cqmin;gap:2.3cqmin}

  /* double-frame block primitive: white mat + navy cell (the Yasu DNA) */
  .stad .blk{background:var(--paper);border:.6cqmin solid var(--navy);border-radius:.3cqmin;
    padding:.74cqmin;display:flex;min-height:0;min-width:0}
  .stad .blk>.cell{background:var(--navy);flex:1;min-width:0;min-height:0;display:flex;
    align-items:center;justify-content:center;overflow:hidden}

  /* header row */
  .stad .shead{flex:none;height:8.8cqh}
  .stad .shead .cells{display:flex;gap:.56cqmin;width:100%;flex:1}
  .stad .shead .mark{flex:none;width:18cqmin;background:var(--navy);display:flex;align-items:center;justify-content:center;padding:1.6cqmin}
  .stad .shead .mark img{width:auto;height:auto;max-height:58%;max-width:84%;display:block}
  .stad .shead .title{flex:1;background:var(--navy);display:flex;align-items:center;justify-content:center;padding:1.1cqmin}
  .stad .shead .title b{font-family:"Futura Cond";font-weight:500;font-size:4.2cqmin;letter-spacing:2.2cqmin;
    text-indent:2.2cqmin;color:#fff;text-transform:uppercase;white-space:nowrap;overflow:hidden}
  .stad .shead .live{flex:none;width:18cqmin;background:var(--navy);display:flex;align-items:center;justify-content:center;gap:1.4cqmin;padding:0 2cqmin}
  .stad .shead .live .dot{width:1.9cqmin;height:1.9cqmin;border-radius:50%;background:var(--green);flex:none}
  .stad .shead .live b{font-family:"Futura Cond";font-weight:800;font-size:2.9cqmin;letter-spacing:.46cqmin;color:#fff}

  /* hero (single match / event) */
  .stad .shero{flex:1;min-height:0}
  .stad .shero>.cell{position:relative;flex-direction:column;justify-content:space-between;padding:2.4cqmin}
  .stad .shero .photo{position:absolute;inset:0;z-index:0}
  .stad .shero .photo img{width:100%;height:100%;object-fit:cover;display:block;object-position:var(--bg-pos,center)}
  .stad .shero .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--navy),var(--navy2));mix-blend-mode:soft-light}
  .stad .shero .photo::before{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(5,28,99,.5),rgba(5,28,99,.32) 42%,rgba(5,28,99,.6))}
  /* .top yields (min-height:0 + hidden) so a tall body can NEVER push the date/time
     box off the hero (2026-07-01 T1 P0: tvl clipped it on mkt/hh/kara/pool8/sport);
     the JS fit shrinks the body until it fits instead. */
  .stad .shero .top{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
    gap:7cqmin;width:100%;padding-top:4.4cqmin;min-height:0;overflow:hidden}
  .stad .kick{flex:none}
  /* clean-navy (non-photo) bodies center in the hero below the corner label */
  .stad:not(.has-photo) .shero .top{flex:1;justify-content:center;padding-top:8cqmin;gap:4cqmin}
  /* ONE eyebrow system (locked spec): the event-TYPE label pins TOP-LEFT in paper on a
     deep-navy pill — on photo heroes AND clean navy decks alike (was: centered sky). */
  .stad .shero .eyebrow{position:absolute;top:2.8cqmin;left:2.8cqmin;z-index:3;
    font-family:"Futura Std";font-weight:500;font-size:3cqmin;letter-spacing:.8cqmin;
    text-indent:.8cqmin;color:#fff;text-transform:uppercase;text-align:left;
    max-width:88%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    background:color-mix(in srgb,var(--navy) 86%,#000);
    padding:1.4cqmin 3cqmin;border-radius:.6cqmin;box-shadow:0 1cqmin 3cqmin rgba(0,0,0,.4)}
  /* ===== YASU PHOTO HERO (Figma 413-4776) — full-bleed photo inside the wave frame.
     The type label pins TOP-LEFT; the photo reads through a lighter navy tint. ===== */
  .stad.has-photo .shero .photo::before{background:linear-gradient(180deg,
    rgba(5,28,99,.30),rgba(5,28,99,.12) 38%,rgba(2,12,44,.74))}
  .stad.has-photo .shero .photo::after{mix-blend-mode:normal;
    background:linear-gradient(180deg,rgba(2,12,44,.18),transparent 30%,rgba(2,12,44,.28))}
  /* event name reads big + bold over the photo, cleared below the top-left label */
  .stad.has-photo .shero .top{justify-content:flex-end;padding-top:13cqmin;padding-bottom:1cqmin}
  .stad.has-photo .stitle{text-shadow:0 1.2cqmin 3.2cqmin rgba(0,0,0,.65)}
  /* STADIUM DECK + green LIVE pill are SPORTS-ONLY chrome (Ben) */
  .stad:not(.is-sport) .shead .live{display:none}
  .stad .matchup{display:flex;align-items:flex-start;justify-content:space-between;width:100%;padding:0 3cqmin}
  .stad .matchup .team{flex:1;display:flex;flex-direction:column;align-items:center;gap:1.5cqmin;min-width:0;max-width:44%}
  .stad .matchup .flag{background:var(--paper);border:.6cqmin solid var(--navy);border-radius:.3cqmin;padding:.74cqmin}
  .stad .matchup .flag img{display:block;width:17cqmin;height:17cqmin;object-fit:cover;border:.37cqmin solid var(--navy)}
  .stad .matchup .tn{font-family:"Futura Cond";font-weight:800;font-size:5.2cqmin;letter-spacing:.1cqmin;color:#fff;text-transform:uppercase;text-align:center;white-space:normal;overflow-wrap:anywhere;line-height:.94;max-width:100%}
  .stad .matchup .vs{flex:none;width:11cqmin;align-self:center;text-align:center;
    font-family:"Futura Std";font-weight:500;font-size:3cqmin;letter-spacing:.98cqmin;color:#fff;text-transform:uppercase}
  /* logo/flag mark via teamMark() — uploaded club logos sit in the same framed box */
  .stad .matchup .flag img{display:block;width:17cqmin;height:17cqmin;object-fit:contain;background:var(--paper)}
  /* TENNIS — player-vs-player: the NAME is the identity (big), with a small flag chip
     beneath it (players aren't countries — Ben). No big flag box. */
  .stad .matchup.is-tennis{align-items:center}
  .stad .matchup.is-tennis .team{gap:1.8cqmin}
  .stad .matchup.is-tennis .tn{font-size:7.2cqmin;line-height:.96}
  .stad .matchup.is-tennis .pflag{display:inline-flex;border:.5cqmin solid var(--navy);border-radius:.3cqmin;
    overflow:hidden;background:var(--paper)}
  .stad .matchup.is-tennis .pflag img{display:block;width:6.4cqmin;height:6.4cqmin;object-fit:cover}
  /* F1 / Motorsport — single EVENT hero: Grand Prix name + circuit, no VS / no two sides. */
  .stad .f1ev{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4cqmin;width:100%}
  .stad .f1ev .stitle{font-size:10cqmin}
  .stad .f1circuit{font-family:"Futura Std";font-weight:500;font-size:3cqmin;letter-spacing:.9cqmin;
    color:var(--gold);text-transform:uppercase;text-align:center;max-width:90%;
    background:color-mix(in srgb,var(--navy) 80%,#000);padding:1.2cqmin 3cqmin;border-radius:.5cqmin}
  .poster.is-tvl .stad .matchup.is-tennis .tn{font-size:6cqmin}
  .poster.is-tvl .stad .matchup.is-tennis .pflag img{width:4.8cqmin;height:4.8cqmin}
  .poster.is-tvl .stad .f1ev .stitle{font-size:8.5cqmin}
  /* SPORT: the league/LIVE SPORTS pill joins the FLOW, centered over the matchup
     (2026-07-02 Ben: absolute top-left placement felt off — esp. ig) */
  .stad.is-sport .shero .eyebrow{position:static;order:-1;align-self:center;max-width:86%;text-align:center}
  .stad.is-sport .shero .top{justify-content:center;padding-top:3.4cqmin;gap:5.4cqmin}
  .poster.is-tvl .stad.is-sport.has-photo .shero .top{justify-content:center;padding-top:1.4cqmin;padding-bottom:1.4cqmin;gap:1.6cqmin}
  .poster.is-tvl .stad.is-sport .shero .eyebrow{font-size:2.4cqmin;padding:.9cqmin 2.4cqmin;flex:none}
  .poster.is-tvl .stad .matchup .flag img{width:11.5cqmin;height:11.5cqmin}
  .poster.is-tvl .stad .matchup .tn{font-size:4.4cqmin}
  /* ---- Stadium-Deck paper chips (Yasu parity: lineup/chips/deals/details bodies).
     Cream rectangles, navy Futura — the Yasu equivalent of the Mayita chip grid. ---- */
  /* em-based off .schips so the JS overflow guard can scale the whole chip board */
  .stad .schips{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;
    gap:.52em;width:100%;margin-top:.74em;font-size:2.7cqmin;min-height:0}
  .stad .schips .schip{background:var(--paper);color:var(--navy);font-family:"Futura Std";font-weight:600;
    font-size:1em;letter-spacing:.11em;text-transform:uppercase;border:.19em solid var(--navy);
    border-radius:.11em;padding:.26em .56em;line-height:1;white-space:nowrap}
  /* feature chip = GOLD (green is sports-only chrome — 2026-07-01 T3) */
  .stad .schips .schip.feat{background:var(--gold);color:var(--navy);font-weight:800}
  /* ---- U8B sports BOARD (2+ games) — a real agenda board inside the hero,
     reusing the _stadRow primitive. Fills the hero width + flexes to the
     available height so 2/3/4+ games auto-distribute and read evenly. ---- */
  .stad .shero .top.board-on{gap:3.4cqmin;justify-content:flex-start}
  .stad .sboard{display:flex;flex-direction:column;gap:1.2cqmin;width:100%;flex:1;min-height:0;margin-top:1cqmin}
  /* rows already styled by .stad .wk-row; make every board row a uniform sport row
     (override the weekly :has(.wk-sport) flex:2.1 boost so 2/3/4-up stay even) */
  .stad .sboard .wk-row:has(.wk-sport){flex:1}
  .stad .sboard .wk-row{flex:1;min-height:0}
  .stad .sboard .wk-vs .tm b{font-size:4cqmin}
  .stad .sboard .wk-sport .lg{font-size:2.2cqmin}
  /* board rows have no per-row date (it's all one day) → collapse the empty date col */
  .stad .sboard .wk-date{display:none}
  .stad .sboard .left{gap:0}
  /* A multi-match slate is an information board, not a photo poster. The Figma
     single-match photo remains for one game; slate rows get a calm navy field. */
  .stad.is-slate .shero .photo{display:none}
  .stad.is-slate .shero .top{padding-top:2cqmin;gap:2cqmin}
  .stad.is-slate .sboard .wk-row{background:var(--paper);border-color:var(--navy)}
  .stad.is-slate .sboard .wk-row>.cell{padding:0 2.4cqmin}
  .stad.is-slate .sboard .wk-vs{font-size:3.2cqmin}
  .stad.is-slate .sboard .wk-vs .tm b{white-space:normal;line-height:1.02}
  .stad.is-slate .kick .kt:empty{display:none}
  /* generic-event title variant (non-sports) — big tight stacked Futura */
  .stad .stitle{font-family:"Futura Cond";font-weight:800;font-size:11cqmin;line-height:.84;letter-spacing:-.01em;
    color:#fff;text-transform:uppercase;text-align:center;margin:0}
  .stad .stitle span{display:block}
  /* kickoff box (the date/time). GREEN is sports-only chrome (2026-07-01 T3) —
     non-sport templates frame it in GOLD with a gold time. */
  .stad .kick{position:relative;z-index:2;width:100%;background:var(--gold);border:.6cqmin solid var(--navy);border-radius:.3cqmin;padding:.74cqmin}
  .stad .kick>.kcell{background:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.9cqmin 3cqmin;width:100%}
  .stad .kick .kd{font-family:"Futura Std";font-weight:500;font-size:3.3cqmin;letter-spacing:.5cqmin;color:#fff;text-transform:uppercase}
  .stad .kick .kt{font-family:"Futura Std";font-weight:500;font-size:6.4cqmin;letter-spacing:.06cqmin;color:var(--gold);line-height:1.05}
  .stad.is-sport .kick{background:var(--green)}
  .stad.is-sport .kick .kt{color:var(--green)}

  /* promo footer (3-up icons) */
  .stad .sfoot{flex:none;height:13cqh}
  .stad .sfoot>.cell{padding:1.8cqmin 2cqmin}
  /* 2026-07-02 Ben: unify the icon+caption row — even columns split by thin paper
     keylines, uniform icon box, single-line tracked caps (ticket-stub read) */
  .stad .promos{display:flex;align-items:stretch;justify-content:space-evenly;width:100%;gap:0;padding:0 1cqmin}
  .stad .promo{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:1.2cqmin;text-align:center;position:relative;padding:.6cqmin 1.2cqmin}
  .stad .promo+.promo::before{display:none}
  /* uniform SQUARE icon box + object-fit:contain → consistent optical size across the
     mixed-aspect line icons (a wide rectangle and a square no longer read different sizes) */
  .stad .promo .pic{height:6.6cqmin;width:10cqmin;display:flex;align-items:center;justify-content:center;opacity:.95}
  .poster.is-tvl .stad .promo .pic{height:9cqmin;width:9cqmin}
  .poster.is-tvl .stad .promo .pl{font-size:2.6cqmin}
  .stad .promo .pic img{width:100%;height:100%;object-fit:contain;display:block}
  .stad .promo .pl{font-family:"Futura Std";font-weight:700;font-size:2cqmin;letter-spacing:.28cqmin;color:#fff;text-transform:uppercase;line-height:1.15;max-width:96%}

  /* ================= WEEKLY (happening this week) ================= */
  .stad.sweek .sinner{padding:2.2cqmin;gap:2.2cqmin}
  .stad .wk-top{flex:none;display:flex;gap:2.6cqmin;height:11cqh}
  .stad .wk-deco{flex:none;width:24cqmin;background:var(--paper) url("yasu-stadium/assets/border-pattern.png") center/cover no-repeat;border:.56cqmin solid var(--navy);border-radius:.2cqmin;overflow:hidden;position:relative}
  .stad .wk-deco.right{width:30cqmin}
  /* narrow portrait frames (ig story / tvp, aspect <.7 — wa is .8): the fixed-width
     deco+logo boxes starve the wk-head cell and "HAPPENING THIS WEEK" can no longer
     fit even at the fitter's minimum size; hand their width to the headline */
  @container (max-aspect-ratio: 7/10){
    .stad .wk-deco{width:10cqmin}
    .stad .wk-logo{width:18cqmin}
    .stad .wk-head>.cell{padding:0 1.8cqmin}
  }
  .stad .wk-head{flex:1;min-width:0;background:var(--paper);border:.6cqmin solid var(--navy);border-radius:.2cqmin;padding:.74cqmin;display:flex}
  .stad .wk-head>.cell{background:var(--navy);flex:1;display:flex;align-items:center;justify-content:center;gap:3cqmin;padding:0 3.4cqmin;overflow:hidden}
  .stad .wk-head b{font-family:"Futura Cond";font-weight:500;font-size:4.4cqmin;letter-spacing:.195em;/* em, not cqmin: must shrink with the fitted font or narrow frames can never fit */color:var(--paper);text-transform:uppercase;white-space:nowrap;overflow:hidden;flex:0 1 auto}
  /* standalone YASU logo box (Figma 3-box header: paper tile · headline · logo box) */
  .stad .wk-logo{flex:none;width:26cqmin;background:var(--paper);border:.6cqmin solid var(--navy);border-radius:.2cqmin;padding:.74cqmin;display:flex}
  .stad .wk-logo>.cell{background:var(--navy);flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .stad .wk-logo img{height:38%;width:auto;flex:none}

  .stad .wk-list{flex:1;min-height:0;display:flex;flex-direction:column;gap:.8cqmin}
  /* band wrappers collapse so portrait lays rows out directly in the column list */
  .stad .wk-band{display:contents}
  /* row = the Figma NAVY PLAQUE: full-height navy cell inside a thin paper ring.
     align-items:stretch beats the Mayita `.poster .wk-row{align-items:center}` leak
     that was collapsing the cell to a thin centered stripe (2026-07-01 review #23). */
  .stad .wk-row{flex:1;min-height:0;min-width:0;background:var(--paper);border:.6cqmin solid var(--navy);
    border-radius:.2cqmin;padding:.37cqmin;display:flex;align-items:stretch}
  /* weekly: packed tight stack (Figma: ~10cqh plaques, 8px gaps, block centered) —
     rows don't balloon to fill a sparse week. Event sports board is excluded. */
  /* 2026-07-02 Ben "improve 10x": rows distribute across the FULL list height
     (space-evenly + taller caps) — the dead pattern void is gone; the pattern
     reads as intentional gaps between plaques instead. */
  .stad.sweek .wk-list{justify-content:space-evenly;gap:1cqh}
  .stad.sweek .wk-row{flex:0 1 12.5cqh;min-height:9cqh;max-height:none}
  .stad.sweek .wk-list .wk-row:has(.wk-sport){flex:0 1 16cqh}
  /* A single weekly poster must remain useful when programming is dense. Keep the
     source row grammar, then tighten spacing before type; compact mode never turns
     the schedule into a different card system. */
  .stad.sweek .wk-list.is-dense{justify-content:stretch;gap:.55cqh}
  .stad.sweek .wk-list.is-dense .wk-row,
  .stad.sweek .wk-list.is-dense .wk-row:has(.wk-sport){flex:1 1 0;min-height:0}
  .stad.sweek .wk-list.is-dense .wk-row>.cell{padding:0 2.35cqmin;gap:1.5cqmin}
  .stad.sweek .wk-list.is-dense .wk-date{width:13.5cqmin;padding-right:1.8cqmin;margin:1cqmin 0}
  .stad.sweek .wk-list.is-dense .wk-date .d{font-size:2.9cqmin}
  .stad.sweek .wk-list.is-dense .wk-date .dd{font-size:1.9cqmin}
  .stad.sweek .wk-list.is-dense .wk-ev .t{font-size:3.8cqmin}
  .stad.sweek .wk-list.is-dense .wk-ev .s,.stad.sweek .wk-list.is-dense .wk-sport .lg{font-size:1.7cqmin}
  .stad.sweek .wk-list.is-dense .wk-vs{font-size:3.15cqmin}
  .stad.sweek .wk-list.is-dense .wk-time{font-size:4.7cqmin}
  .stad.sweek .wk-list.is-ultra-dense .wk-row>.cell{padding:0 1.8cqmin}
  .stad.sweek .wk-list.is-ultra-dense .wk-date{width:11.5cqmin}
  .stad.sweek .wk-list.is-ultra-dense .wk-ev .t{font-size:3.35cqmin}
  .stad.sweek .wk-list.is-ultra-dense .wk-vs{font-size:2.8cqmin}
  .stad .wk-row>.cell{background:var(--navy);flex:1;align-self:stretch;min-width:0;display:flex;align-items:center;justify-content:space-between;padding:0 3cqmin;gap:2cqmin;overflow:hidden}
  .stad .wk-row .left{display:flex;align-items:center;gap:3.4cqmin;min-width:0}
  .stad .wk-date{flex:none;width:15.5cqmin;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    border-right:.22cqmin solid color-mix(in srgb,var(--paper) 48%,transparent);padding-right:2.6cqmin;align-self:stretch;margin:1.6cqmin 0}
  .stad .wk-date .d{font-family:"Futura Std";font-weight:500;font-size:3.3cqmin;letter-spacing:.5cqmin;color:var(--paper);text-transform:uppercase;line-height:1}
  .stad .wk-date .dd{font-family:"Futura Std";font-weight:500;font-size:2.2cqmin;letter-spacing:.26cqmin;color:var(--paper);opacity:.7;text-transform:uppercase;line-height:1.3}
  /* UPRIGHT Futura (the Mayita `.poster .wk-ev` italic CS Revenant leak was
     italicising these — Figma: Futura-Medium upright, italics = footer times only).
     NO ellipsis on poster copy (T9) — the JS fit shrinks to fit instead. */
  .stad .wk-ev{display:flex;flex-direction:column;min-width:0;font-family:"Futura Std";
    font-style:normal;letter-spacing:normal;text-align:left;flex:0 1 auto}
  .stad .wk-ev .t{font-family:"Futura Std";font-weight:500;font-size:4.4cqmin;letter-spacing:.3cqmin;color:#fff;text-transform:uppercase;white-space:nowrap;overflow:hidden;line-height:1.15}
  .stad .wk-ev .s{font-family:"Futura Std";font-weight:500;font-size:1.9cqmin;letter-spacing:.42cqmin;color:rgba(253,253,252,.7);text-transform:uppercase;white-space:nowrap;overflow:hidden;line-height:1.15}
  .stad .wk-time{flex:none;font-family:"Futura Cond";font-weight:500;font-size:5.4cqmin;letter-spacing:.8cqmin;color:var(--paper);text-align:right;white-space:nowrap}
  /* sport rows carry two lines (league + matchup) → give them more height than
     single-line event rows so the matchup never clips against the row box. */
  .stad .wk-list .wk-row:has(.wk-sport){flex:2.1}
  .stad .wk-sport{display:flex;flex-direction:column;justify-content:center;gap:.3cqmin;min-width:0}
  .stad .wk-sport .lg{font-family:"Futura Std";font-weight:500;font-size:2cqmin;letter-spacing:.66cqmin;color:rgba(253,253,252,.76);text-transform:uppercase;white-space:nowrap;overflow:hidden}
  /* em-based off .wk-vs so the JS fit can shrink the whole matchup as one unit —
     team names NEVER ellipsize (T9/P0: tvl rendered "A3 PM") */
  .stad .wk-vs{display:flex;align-items:center;gap:.66em;min-width:0;overflow:hidden;font-size:3.6cqmin}
  .stad .wk-vs .tm{display:flex;align-items:center;gap:.42em;min-width:0}
  .stad .wk-vs .tm img{width:.86em;height:.86em;object-fit:cover;border-radius:.065em;flex:none}
  .stad .wk-vs .tm b{font-family:"Futura Std";font-weight:500;font-size:1em;letter-spacing:.055em;color:#fff;text-transform:uppercase;white-space:nowrap}
  .stad .wk-vs .x{font-family:"Futura Std";font-weight:500;font-size:.61em;letter-spacing:.14em;color:#fff;text-transform:uppercase;flex:none}

  /* Weekly day grouping: one plaque/date rail per calendar day, with each event
     or match as a divided subrow. This preserves all programming without repeating
     TUE/FRI labels or turning every match into a new day card. */
  .stad.sweek .wk-day-group>.cell>.left{width:100%;align-self:stretch}
  .stad.sweek .wk-day-items{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
  .stad.sweek .wk-day-item{flex:1;min-height:0;display:flex;align-items:center;justify-content:space-between;
    gap:1.5cqmin;padding:.65cqh 0}
  .stad.sweek .wk-day-item+.wk-day-item{border-top:.14cqmin solid color-mix(in srgb,var(--paper) 42%,transparent)}
  .stad.sweek .wk-day-main{flex:1;min-width:0}
  .stad.sweek .wk-day-main .wk-ev,.stad.sweek .wk-day-main .wk-sport{width:100%}
  .stad.sweek .wk-day-item .wk-time{font-size:4.2cqmin;letter-spacing:.35cqmin}
  .stad.sweek .wk-day-group:has(.wk-day-item+.wk-day-item) .wk-date{margin:.8cqmin 0}
  .stad.sweek .wk-day-group:has(.wk-day-item+.wk-day-item) .wk-ev .t{font-size:3.5cqmin}
  .stad.sweek .wk-day-group:has(.wk-day-item+.wk-day-item) .wk-vs{font-size:2.85cqmin}
  .stad.sweek .wk-day-group:has(.wk-day-item+.wk-day-item) .wk-sport .lg{font-size:1.6cqmin;white-space:normal;line-height:1.1}

  .stad .wk-bot{flex:none;display:flex;gap:2.6cqmin;height:11cqh}
  .stad .wk-open{flex:1;background:var(--paper);border:.6cqmin solid var(--navy);border-radius:.2cqmin;padding:.74cqmin;display:flex}
  .stad .wk-open>.cell{background:var(--navy);flex:1;display:flex;align-items:center;justify-content:space-between;padding:0 4.4cqmin;color:var(--paper);text-transform:uppercase;overflow:hidden}
  .stad .wk-open .h{font-family:"Futura Std";font-weight:500;font-style:normal;font-size:2.8cqmin;letter-spacing:.5cqmin;color:var(--paper);flex:none}
  .stad .wk-open .c{flex:1;text-align:center;font-family:"Futura Cond";font-weight:500;font-size:4.9cqmin;letter-spacing:.93cqmin}

  /* ================= LANDSCAPE 16:9 (extrapolated — no Figma ref) =================
     The portrait stack (header · hero · footer) reflows into 16:9 for free; cqh
     keeps header/footer slim so the hero fills the wide middle (no dead void).
     Bump the hero type up since the wide hero gives it room. */
  .poster.is-tvl .stad .sinner{padding:2.4cqmin;gap:2.2cqmin}
  .poster.is-tvl .stad .shead{height:15cqh}
  .poster.is-tvl .stad .sfoot{height:21cqh}
  .poster.is-tvl .stad .shero .top{gap:3.4cqmin;padding-top:2.4cqmin}
  .poster.is-tvl .stad .matchup .tn{font-size:6cqmin}
  .poster.is-tvl .stad .stitle{font-size:9cqmin}
  /* tvl kick = ONE line ("SUN JUN 14 · 3 PM") — half the height, so the date/time
     always fits the shallow landscape hero (2026-07-01 T1) */
  .poster.is-tvl .stad .kick>.kcell{flex-direction:row;align-items:baseline;justify-content:center;
    gap:2cqmin;padding:1.2cqmin 3cqmin}
  .poster.is-tvl .stad .kick .kt{font-size:5.2cqmin}
  .poster.is-tvl .stad .kick .kd{font-size:3cqmin}

  /* ============================================================
     YASU "BROADCAST LOWER-THIRD" — landscape deck layout (Ben pick D, 2026-07-02).
     tvl + deck event types ONLY (kara/hh/mkt/pool8/bbq/games): sports keep the
     bespoke Stadium Deck, weekly keeps the grid, the Sunset skin keeps its own tvl.
     Full-bleed photo inside the wave frame · type label top-left · Yasu mark top-
     right · ONE navy band across the bottom carries title · chips · date/time. */
  .poster.is-tvl .stad:not(.is-sport):not(.sweek):not(.sunset) .sinner{padding:9.2cqmin;gap:0}
  .poster.is-tvl .stad:not(.is-sport):not(.sweek):not(.sunset) .sfoot{display:none}
  /* header block → just the Yasu mark, pinned top-right over the photo */
  .poster.is-tvl .stad:not(.is-sport):not(.sweek):not(.sunset) .shead{position:absolute;top:11.4cqmin;right:11.4cqmin;left:auto;
    width:auto;height:auto;flex:none;z-index:4;background:none;border:0;padding:0}
  .poster.is-tvl .stad:not(.is-sport):not(.sweek):not(.sunset) .shead .cells{width:auto;gap:0}
  .poster.is-tvl .stad:not(.is-sport):not(.sweek):not(.sunset) .shead .title,
  .poster.is-tvl .stad:not(.is-sport):not(.sweek):not(.sunset) .shead .live{display:none}
  .poster.is-tvl .stad:not(.is-sport):not(.sweek):not(.sunset) .shead .mark{width:auto;background:none;padding:0;
    filter:drop-shadow(0 .5cqmin 1.4cqmin rgba(0,0,0,.55))}
  .poster.is-tvl .stad:not(.is-sport):not(.sweek):not(.sunset) .shead .mark img{height:6.6cqmin;max-height:6.6cqmin;max-width:none;width:auto}
  /* hero fills the frame; photo edge-to-edge (drop the white mat / navy cell frame) */
  .poster.is-tvl .stad:not(.is-sport):not(.sweek):not(.sunset) .shero{flex:1;min-height:0;padding:0;background:none;border:0;border-radius:0}
  .poster.is-tvl .stad:not(.is-sport):not(.sweek):not(.sunset) .shero>.cell{padding:0;background:none;border-radius:0;display:block;position:relative;overflow:hidden}
  .poster.is-tvl .stad:not(.is-sport):not(.sweek):not(.sunset) .shero .photo{inset:0}
  .poster.is-tvl .stad:not(.is-sport):not(.sweek):not(.sunset) .shero .photo::before{background:linear-gradient(180deg,rgba(2,12,44,.30),transparent 30%,transparent 55%,rgba(2,12,44,.38))}
  .poster.is-tvl .stad:not(.is-sport):not(.sweek):not(.sunset) .shero .photo::after{display:none}
  /* eyebrow (JS hoists it to the cell) → poster top-left, over the photo */
  .poster.is-tvl .stad:not(.is-sport):not(.sweek):not(.sunset) .shero .eyebrow{top:3.4cqmin;left:3.4cqmin;z-index:4}
  /* the bottom band (.lband, built once in JS) holds title · chips · date/time in a row */
  .poster.is-tvl .stad:not(.sweek):not(.sunset) .shero .lband{position:absolute;left:0;right:0;bottom:0;z-index:3;
    display:flex;align-items:center;gap:3.4cqmin;padding:2.8cqmin 4cqmin;
    background:rgba(2,12,44,.92);border-top:.6cqmin solid var(--gold)}
  .poster.is-tvl .stad:not(.sweek):not(.sunset) .lband .top{position:static;flex:1 1 auto;min-width:0;
    flex-direction:row;align-items:center;justify-content:flex-start;gap:3cqmin;
    padding:0;background:none;border:0;min-height:0;overflow:visible;width:auto}
  .poster.is-tvl .stad:not(.sweek):not(.sunset) .lband .stitle{flex:none;font-size:7.2cqmin;line-height:.9;
    white-space:nowrap;text-align:left;overflow:visible}
  .poster.is-tvl .stad:not(.sweek):not(.sunset) .lband .stitle span{display:inline}
  .poster.is-tvl .stad:not(.sweek):not(.sunset) .lband .stitle span+span::before{content:" "}
  .poster.is-tvl .stad:not(.sweek):not(.sunset) .lband .schips{flex:1;min-width:0;flex-wrap:wrap;
    justify-content:flex-start;align-content:center;gap:1.1cqmin}
  .poster.is-tvl .stad:not(.sweek):not(.sunset) .lband .schips .schip{font-size:2.6cqmin;padding:.8cqmin 1.6cqmin}
  /* date/time → right end of the band */
  .poster.is-tvl .stad:not(.sweek):not(.sunset) .lband .kick{position:static;flex:none;width:auto;background:none;border:0;padding:0}
  .poster.is-tvl .stad:not(.sweek):not(.sunset) .lband .kick>.kcell{flex-direction:column;align-items:flex-end;justify-content:center;
    gap:.1cqmin;background:none;padding:0;width:auto}
  .poster.is-tvl .stad:not(.sweek):not(.sunset) .lband .kick .kd{font-size:2.7cqmin;letter-spacing:.35cqmin;color:var(--paper)}
  .poster.is-tvl .stad:not(.sweek):not(.sunset) .lband .kick .kt{font-size:5cqmin;color:var(--gold);line-height:1}

  /* SPORT joins the Broadcast Lower-Third on tvl (2026-07-06 Ben: the Match tvl was
     the only Yasu tvl NOT using the broadcast treatment — it read as a squeezed
     portrait). Keeps the STADIUM DECK header bar (sport chrome); the photo goes
     full-bleed; the matchup compacts into an inline flag·name·VS row in the band. */
  .poster.is-tvl .stad.is-sport.has-photo .shero{flex:1;min-height:0;padding:0;background:none;border:0;border-radius:0}
  .poster.is-tvl .stad.is-sport.has-photo .shero>.cell{padding:0;background:none;border-radius:0;display:block;position:relative;overflow:hidden}
  .poster.is-tvl .stad.is-sport.has-photo .shero .photo{inset:0}
  .poster.is-tvl .stad.is-sport.has-photo .shero .photo::before{background:linear-gradient(180deg,rgba(2,12,44,.30),transparent 30%,transparent 55%,rgba(2,12,44,.38))}
  .poster.is-tvl .stad.is-sport.has-photo .shero .photo::after{display:none}
  /* league eyebrow (JS hoists it to the cell in bcast) → over the photo, top-left */
  .poster.is-tvl .stad.is-sport.has-photo .shero>.cell>.eyebrow{position:absolute;top:3.4cqmin;left:3.4cqmin;z-index:4;margin:0}
  /* matchup → single inline row: [flag name] VS [name flag], kickoff at the right */
  .poster.is-tvl .stad.is-sport .lband .matchup{padding:0;width:auto;flex:1;min-width:0;
    justify-content:flex-start;align-items:center;gap:2.8cqmin}
  .poster.is-tvl .stad.is-sport .lband .matchup .team{flex:none;flex-direction:row;align-items:center;gap:1.8cqmin}
  .poster.is-tvl .stad.is-sport .lband .matchup .flag{padding:.45cqmin;border-width:.4cqmin}
  .poster.is-tvl .stad.is-sport .lband .matchup .flag img{width:6.6cqmin;height:6.6cqmin}
  .poster.is-tvl .stad.is-sport .lband .matchup .tn{font-size:5.4cqmin;white-space:normal;line-height:.94;max-width:18cqmin}
  .poster.is-tvl .stad.is-sport .lband .matchup .vs{width:auto;font-size:3cqmin}
  .poster.is-tvl .stad.is-sport .lband .matchup.is-tennis .pflag img{width:5cqmin;height:5cqmin}
  .poster.is-tvl .stad.is-sport .lband .f1ev{display:flex;align-items:center;gap:2.6cqmin}
  .poster.is-tvl .stad.is-sport .lband .f1ev .stitle{font-size:6cqmin;white-space:nowrap;text-align:left}

  .poster.is-tvl .stad.sweek .wk-top,.poster.is-tvl .stad.sweek .wk-bot{height:18cqh}
  /* tvl weekly = balanced 2,2,3 GRID: bands stack in the column list, each band is a
     flex ROW of equal cards. Cards drop their portrait height cap + fill the band. */
  .poster.is-tvl .stad.sweek .wk-list{flex-direction:column;gap:2cqmin;justify-content:stretch}
  .poster.is-tvl .stad.sweek .wk-band{display:flex;flex-direction:row;gap:2cqmin;flex:1;min-height:0;
    width:100%;align-self:stretch}
  .poster.is-tvl .stad.sweek .wk-band .wk-row{flex:1;min-width:0;min-height:0;max-height:none}
  /* narrow tvl cards STACK their content per column (2026-07-01 P0s #3/#4: the inline
     row ellipsized every title and collapsed the sport matchup to "A3 PM"):
     day+date inline on top · title full-width centered · time beneath. */
  .poster.is-tvl .stad.sweek .wk-row>.cell{flex-direction:column;justify-content:center;padding:2.2cqmin 3cqmin;gap:1.2cqmin;
    padding:1cqh 1.4cqmin;gap:.9cqh}
  .poster.is-tvl .stad.sweek .wk-row .left{flex-direction:column;align-items:center;gap:.6cqh;
    width:100%;min-width:0}
  .poster.is-tvl .stad.sweek .wk-date{flex-direction:row;width:auto;gap:1cqmin;align-items:baseline;border-right:0;padding-right:0;margin:0;align-self:center}
  .poster.is-tvl .stad.sweek .wk-ev{align-items:center;width:100%;text-align:center}
  .poster.is-tvl .stad.sweek .wk-sport{align-items:center;width:100%}
  .poster.is-tvl .stad.sweek .wk-vs{justify-content:center;max-width:100%}
  .poster.is-tvl .stad.sweek .wk-time{text-align:center;font-size:4.6cqmin}
  .poster.is-tvl .stad.sweek .wk-day-items{width:100%}
  .poster.is-tvl .stad.sweek .wk-day-item{gap:1cqmin;padding:.45cqh 0;width:100%}
  .poster.is-tvl .stad.sweek .wk-day-main{text-align:center}
  .poster.is-tvl .stad.sweek .wk-day-item .wk-time{font-size:2.8cqmin}
  /* tvl footer: port the wa/ig tight cluster — OPEN DAILY at headline scale with the
     times hugging it (base .c{flex:1} was flinging 7 AM/10 PM to the edges) */
  .poster.is-tvl .stad.sweek .wk-open>.cell{justify-content:center;gap:3.4cqmin}
  .poster.is-tvl .stad.sweek .wk-open .c{flex:0 0 auto;font-size:8.2cqmin}
  .poster.is-tvl .stad.sweek .wk-open .h{font-size:4cqmin}

  /* ================================================================
     YASU "SUNSET" PHOTO SKIN — 2026-07-01, per Ben's Figma ref 413:4851
     ("sunset session"). Replaces the tinted has-photo treatment for the
     PHOTO-HERO non-sport templates (gen/flag/live/pool/movie/kids):
     unfiltered full-bleed photo · thinner surfer-icon border (own asset,
     session-border.png, cropped from the Figma render) · bold drop-shadow
     title top-left, no eyebrow pill · gold banner ("who" slot: artist /
     instructor / feature) flanked by stars · footer = navy day+time card +
     YASU mark card (reuses the existing .blk/.cell double-frame primitive).
     Sport keeps the STADIUM DECK skin untouched. ================= */
  /* Ben's surfer-wave pattern bg (2026-07-02, "sunset session.png" — healed to one
     seamless 988x980 repeat unit) — reads through the thin gaps between the
     photo/banner/footer cards, and its navy base also masks the corner
     rotate/translate seam the border-tile technique leaves at the join.
     30.5cqw ≈ the tile's scale in Ben's mock (3.3 repeats across). */
  /* THIN frame per the Figma ref — the pattern is a border, not a mat */
  .stad.sunset{--sun-b:3.4cqmin;background:var(--paper) url("yasu-stadium/assets/yasu-frame-wa.png") center/cover no-repeat}
  .poster.is-ig .stad.sunset,.poster.is-tvp .stad.sunset{background-image:url("yasu-stadium/assets/yasu-frame-ig.png")}
  /* 2026-07-02: the session-border strips are RETIRED — the full-bleed pattern IS the
     frame (matches Ben's mock), and the strip corners left a gray seam square. */
  .stad.sunset .sinner2{position:absolute;inset:var(--sun-b);z-index:1;display:flex;flex-direction:column;
    gap:1.4cqmin;padding:0}
  /* photo hero — UNFILTERED, near full-bleed inside the THIN pattern frame
     (Figma 413-4851: photo meets the frame with just a white hairline) */
  .stad.sunset .sshot{position:relative;flex:1;min-height:0;background:var(--paper);
    border:.45cqmin solid var(--paper);overflow:hidden}
  .stad.sunset .sshot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .stad.sunset .sstitle{position:relative;z-index:1;margin:0;padding:3.6cqmin 3.2cqmin 0;
    font-family:"Futura Cond";font-weight:800;font-size:8.4cqmin;line-height:.92;letter-spacing:0;
    color:#fff;text-transform:uppercase;text-shadow:0 .6cqmin 1.6cqmin rgba(0,0,0,.55),0 .15cqmin .4cqmin rgba(0,0,0,.4)}
  .stad.sunset .sstitle span{display:block;white-space:nowrap}
  /* gold banner — the "who" slot (artist / instructor / feature); collapses cleanly
     when a template has nothing to say. FULL WIDTH edge-to-edge (Figma ref: the
     golden strip crosses the pattern frame) — negative margins break out of --sun-b. */
  .stad.sunset .sbanner{flex:none;display:flex;align-items:center;justify-content:center;gap:2.2cqmin;
    margin:0 calc(-1 * var(--sun-b));
    background:#bd9b5c;border-top:.5cqmin solid var(--paper);border-bottom:.5cqmin solid var(--paper);
    padding:1.9cqmin 3cqmin;min-width:0}
  .stad.sunset .sbanner .star{flex:none;color:var(--paper);font-size:3.4cqmin;line-height:1}
  .stad.sunset .sbanner .who{font-family:"Futura Std";font-weight:800;font-size:6.4cqmin;letter-spacing:.1cqmin;
    color:var(--paper);text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.4);white-space:nowrap;
    overflow:hidden;min-width:0}
  /* footer — Figma double-frame rule: navy card, white outer stroke + thin inner
     keyline (NOT the fat paper mat — that read as a white slab on the pattern) */
  .stad.sunset .sfoot2{flex:none;display:flex;gap:1.6cqmin;height:11cqh;margin-bottom:.4cqmin}
  .stad.sunset .sfoot2 .blk{background:var(--navy);border:.5cqmin solid var(--paper);
    border-radius:0;padding:.55cqmin}
  .stad.sunset .sfoot2 .blk>.cell{border:.28cqmin solid var(--paper);background:var(--navy)}
  .stad.sunset .sfoot2 .sdate{flex:1;min-width:0}
  .stad.sunset .sfoot2 .sdate>.cell{justify-content:space-between;padding:0 3.4cqmin}
  .stad.sunset .sfoot2 .sdate .d{font-family:"Futura Std";font-weight:800;font-size:4.2cqmin;letter-spacing:.05cqmin;
    color:var(--paper);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stad.sunset .sfoot2 .sdate .t{font-family:"Futura Std";font-weight:800;font-size:4.2cqmin;color:var(--paper);
    flex:none;white-space:nowrap}
  .stad.sunset .sfoot2 .smark{flex:none;width:19cqmin}
  .stad.sunset .sfoot2 .smark>.cell{padding:1.2cqmin}
  .stad.sunset .sfoot2 .smark img{width:auto;height:auto;max-width:82%;max-height:56%;display:block}
  /* landscape (tvl) — no Figma ref: the vertical stack reflows for free (photo stays
     flex:1, banner/footer stay slim cqh bars), just widen the title column a touch */
  .poster.is-tvl .stad.sunset .sstitle{font-size:7cqmin;padding-top:2.6cqmin}
  .poster.is-tvl .stad.sunset .sbanner .who{font-size:5.2cqmin}
  .poster.is-tvl .stad.sunset .sfoot2{height:15cqh}

  /* ================= NIGHT (deepen the navy field; border + blocks unchanged) ================= */
  .dark[data-venue="yasu"] .poster{--navy:#051c63;--navy2:#0a39c9}
  .dark[data-venue="yasu"] .poster .stad .blk>.cell,
  .dark[data-venue="yasu"] .poster .stad .shead .mark,
  .dark[data-venue="yasu"] .poster .stad .shead .title,
  .dark[data-venue="yasu"] .poster .stad .shead .live{background:var(--navy)}
  .dark[data-venue="yasu"] .poster .stad .kick>.kcell,
  .dark[data-venue="yasu"] .poster .stad .wk-row>.cell,
  .dark[data-venue="yasu"] .poster .stad .wk-head>.cell,
  .dark[data-venue="yasu"] .poster .stad .wk-open>.cell{background:var(--navy)}

  /* Every Yasu text panel reads as a SOLID opaque block. Their fill matched the
     wave-field base navy (#051c63), so against the busy surf pattern they looked
     translucent — a deeper navy makes each panel stand clearly off the field. */
  [data-venue="yasu"] .poster .stad .shead .mark,
  [data-venue="yasu"] .poster .stad .shead .title,
  [data-venue="yasu"] .poster .stad .shead .live,
  [data-venue="yasu"] .poster .stad .shero .eyebrow,
  [data-venue="yasu"] .poster .stad .kick>.kcell,
  [data-venue="yasu"] .poster .stad .wk-row>.cell,
  [data-venue="yasu"] .poster .stad .wk-head>.cell,
  [data-venue="yasu"] .poster .stad .wk-open>.cell{background:var(--navy)}