/* ══════════════════════════════════════════════════════════════════════════════
   kb13.com — DIRECTION B · "THE STANDARD"      chosen by KB, 2026-10-05
   ══════════════════════════════════════════════════════════════════════════════

   WHAT THIS IS NOT. The first draft of this file flipped every section's background to build
   an alternating band rhythm. Then I actually read style.css: the site ALREADY alternates —
   hero dark, offers dark, confess light, statement dark, fnine light, offers dark, books dark,
   ladder light, finteaser dark. Close to what myrongolden.com measures at ten scroll depths.
   I had told KB the site was "one bone ground top to bottom". It is not, and rebuilding the
   bands would have been a large change that fixed nothing.

   The site is "eh" for four narrower reasons, and this file is exactly those four:

   1. THE LIGHT BANDS WERE BONE, NOT WHITE. #f7f5f1 against #0b0b0c never snaps; it reads muddy
      and the rhythm is lost even though it is there. --bone is now #fcfbf9 (css/style.css), and
      contrariantiking.co's move — cream as an accent TINT, white as the ground — is .b-tint.
      KB: "i want more white, less bone i think."
   2. THE BACKGROUNDS SCROLLED WITH THE CONTENT. KB: "it has a background that stays stuck but
      the forground scrolls." Those hero/book/finance images are already there — they just
      travelled with the words. Now they hold still.
   3. NOTHING MOVED. KB: "the sites move and are more dynamic less static." .b-rv.
   4. THE DISPLAY FACE WAS ELEGANT WHERE B IS HEAVY. Myron's h1 is Montserrat 700 uppercase at
      2.8px tracking. We do not ship Montserrat — but Inter-Variable.ttf, which we already
      serve, carries wght 100-900 (read off its fvar table) and the @font-face was declaring
      only "400 700", so the browser clamped it. Unlocked to 100-900 in style.css: the heavy
      display weight cost no new file and no third-party request. DM Serif Display stays
      everywhere else; the display LINE goes heavy.

   And the photography rule KB gave, which overrides all of it: "dan is dark but bright photos
   and myron uses contrast well." The image behind TYPE is held back hard — two earlier passes
   put a headline over a lit doorway and it measured grey. The brightness lives in .b-shot and
   in the cut-outs, where nothing has to be read on top of it.
   ══════════════════════════════════════════════════════════════════════════════ */

:root{
  --b-gold:#c9a227;
  --b-goldlt:#e8cd6b;
  --b-mont:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ── 2 · the background holds still, the words travel over it ──────────────── */
.hero3-bg,
.books .book-bg,
.finteaser .fin-bg,
.b-fix{background-attachment:fixed}

/* a fixed layer for any band that wants one and has no image div of its own */
.b-fix{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
       filter:saturate(1.08) contrast(1.05)}
.b-fix::after{content:"";position:absolute;inset:0;
  background:linear-gradient(104deg,rgba(9,9,11,.96) 0%,rgba(9,9,11,.94) 58%,
                                     rgba(9,9,11,.88) 78%,rgba(9,9,11,.74) 100%)}
.b-band{position:relative;overflow:hidden}
.b-band > .wrap{position:relative;z-index:2}

/* ── 1 · cream as a TINT band, never the ground ────────────────────────────── */
.b-tint{background:var(--cream,#f3f0e7)}

/* ── 4 · the display line goes heavy ───────────────────────────────────────── */
.hero3-left h1,
.hero3-copy h1,
h2.head,
.books-h,
.finteaser h2,
.b-h{font-family:var(--b-mont);font-weight:900;text-transform:uppercase;
     line-height:1.04;letter-spacing:-.005em}
/* Inter 900 sets much wider than DM Serif at the same px — without this the hero headline
   wrapped to four lines on a phone and pushed the email field below the fold. */
.hero3-left h1,.hero3-copy h1{font-size:clamp(32px,8.6vw,54px)}
h2.head,.books-h,.finteaser h2{font-size:clamp(25px,5vw,37px)}
.b-kick{font-family:var(--b-mont);font-weight:800;text-transform:uppercase;
  letter-spacing:.26em;font-size:11.5px;color:var(--b-gold)}

/* ── the gold call to action ───────────────────────────────────────────────── */
.b-cta,.b-band .btn.b-cta{background:var(--b-gold);color:#17150e;border-color:var(--b-gold);
  font-family:var(--b-mont);font-weight:800;text-transform:uppercase;letter-spacing:.09em}
.b-cta:hover{background:var(--b-goldlt);border-color:var(--b-goldlt);color:#17150e}

/* ── the bright photograph, in a block of its own ──────────────────────────── */
.b-shot{position:relative;z-index:2;border-radius:16px;overflow:hidden;margin:32px auto 0;
        max-width:900px;box-shadow:0 26px 60px rgba(0,0,0,.42)}
.b-shot img{display:block;width:100%;height:clamp(180px,32vw,290px);object-fit:cover;
        filter:saturate(1.12) contrast(1.05)}
.b-shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 20px 14px;
        background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.84));color:#fff;
        font:700 11.5px/1.35 var(--sans);letter-spacing:.14em;text-transform:uppercase}

/* ── the cut-out, at EVERY width. KB: "i need more photos of me." ──────────── */
.b-cut{display:block;width:min(66vw,250px);height:auto;margin:20px auto -4px;
  filter:drop-shadow(0 24px 44px rgba(0,0,0,.6))}
@media (min-width:960px){ .b-cut{width:320px;margin:0 auto -4px} }

/* ── 3 · sections arrive on scroll ─────────────────────────────────────────── */
.b-rv{opacity:0;transform:translateY(22px);
  transition:opacity .58s cubic-bezier(.22,.9,.3,1),transform .58s cubic-bezier(.22,.9,.3,1)}
.b-rv.b-in{opacity:1;transform:none}
.b-rv.b-d1{transition-delay:.07s}
.b-rv.b-d2{transition-delay:.14s}
.b-rv.b-d3{transition-delay:.21s}

@media (prefers-reduced-motion:reduce){
  .b-rv{opacity:1;transform:none;transition:none}
  .hero3-bg,.books .book-bg,.finteaser .fin-bg,.b-fix{background-attachment:scroll}
}
/* background-attachment:fixed is ignored on iOS Safari and is expensive to paint on any touch
   device — the band still reads correctly as a plain cover image there, which is the point. */
@media (hover:none){
  .hero3-bg,.books .book-bg,.finteaser .fin-bg,.b-fix{background-attachment:scroll}
}

/* ── HIS FACE IS IN THE BACKGROUND, NOT A BLOCK YOU SCROLL PAST. ────────────
   style.css hides .hero3-right below 820px, so the one photograph of Kevin on the home page
   never appeared on the device most traffic arrives on. The first fix stacked it under the
   email form — which put it IN the scroll as its own chunk. KB, 2026-10-06, with a circle
   drawn round it: "i want my photo in the background not its own part of a scroll."

   So on a phone it is part of the hero's background: anchored bottom-right, bleeding off the
   edge, UNDER the words. The hero keeps a min-height so he is never clipped to a floating
   head, and the scrim below keeps the type readable across him. */
@media (max-width:820px){
  .hero3{height:auto;min-height:0;padding:0 0 34px;position:relative;overflow:hidden}
  /* HIS FACE SITS BESIDE THE HEADLINE, NOT BEHIND THE FORM. Anchored to the BOTTOM he landed
     level with the email field — KB: "my face is behind the CTA where you enter your email...
     my face would be right next to the phrase on the mat starting to crawl." So he is anchored
     to the TOP of the band instead, level with the kicker and the h1, and the form clears him. */
  .hero3-right{
    display:block !important;
    position:absolute;right:-14%;top:4%;bottom:auto;width:74%;max-width:320px;
    margin:0;z-index:1;pointer-events:none;overflow:visible}
  .hero3-right img{max-height:none;width:100%;height:auto;
    filter:drop-shadow(0 16px 30px rgba(0,0,0,.55))}
  /* THE PHOTO ANCHORS TO THE BAND, NOT THE GRID. .hero3-grid is position:relative, so an
     absolute bottom:0 inside it resolved against the GRID — which ends before the band does.
     He was cut off mid-torso with dead black underneath. Static here puts him against .hero3. */
  .hero3-grid{position:static}
  /* .hero3-right is a LATER SIBLING of .hero3-left, so without this it paints over the email
     field and the button — the photograph was sitting on the call to action. The words and the
     form take a higher layer than the picture, always. */
  .hero3-left{position:relative;z-index:3}
  /* the words sit over him, so they get their own ground — a scrim that is strongest on the
     left where the column is and releases to the right where the picture is. */
  .hero3::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(118deg,rgba(9,9,11,.94) 0%,rgba(9,9,11,.88) 42%,
                                       rgba(9,9,11,.58) 68%,rgba(9,9,11,.22) 100%)}
  .hero3-left{padding-bottom:3vh}
  /* HIS FACE CLEARS THE FORM. At 92vh his head landed level with the email field, so the one
     photograph on the page had a text input across his chin. The band is taller and he is a
     little smaller, which puts his face in the clear space under the button. */
}
@media (max-width:420px){
  .hero3{min-height:auto}
  .hero3-right{width:80%;right:-18%;top:3%}
  .hero3-left{padding-bottom:3vh}
}


/* ── NOTHING ABOVE THE FOLD STARTS INVISIBLE. ──────────────────────────────
   The first pass put .b-rv on the hero: kicker, headline, sub, email card and the photo. On a
   phone that meant the first thing a visitor saw was an empty photograph while five elements
   faded in, and the headline — the Largest Contentful Paint — was deliberately withheld for
   half a second. Myron and Dan reveal BELOW the fold and paint the hero instantly.
   Belt and braces: even if a .b-rv is added inside the hero again, it stays visible. */
.hero3 .b-rv{opacity:1 !important;transform:none !important}

/* ── the display line, on the site pages ───────────────────────────────────
   Direction B's display is heavy and uppercase, and a site where only the home page follows
   that reads as two sites. So every SITE page's h1 goes heavy.

   THE TWO OFFER PAGES ARE DELIBERATELY EXCLUDED. /go-book and /go-polaris are the PPFABPP
   landing pages KB has said are the strongest thing on the site ("that offer page is much
   better than the actual page describing what Polaris is"). Restyling a converting page's
   headline is a conversion change wearing a design change, and it is not one to make
   unattended. They keep DM Serif until KB says otherwise. */
.b-site h1{font-family:var(--b-mont);font-weight:900;text-transform:uppercase;
  line-height:1.04;letter-spacing:-.005em;font-size:clamp(31px,7.2vw,52px)}

/* ── THE LIGHT BANDS HAVE SOMETHING BEHIND THEM ────────────────────────────
   KB, 2026-10-06: "I still don't like the plain background. Can you give me some gold, like,
   king, ancient wisdom, slash, matrix design or something behind all of this white."

   `assets/kb13-royal.svg` is one 200px tile carrying three layers — a fine MATRIX grid, an
   interlocking diamond lattice with Greek-key corners (ANCIENT), and a drawn crown (KING).
   Gold, all of it, at 0.075-0.14 alpha inside the file itself.

   IT FRAMES THE WORDS, IT DOES NOT SIT UNDER THEM. The mask below is strongest at the edges
   and clears through the middle, where the text column lives — so the ornament reads at the
   margins and the reading surface stays clean. That is the whole answer to "it shouldn't mess
   anything up": contrast is never traded for decoration.

   One file, cached, ~2 KB, no third-party request, and it scales to any screen because it is
   vector. */

.b-tex{position:relative;isolation:isolate}
.b-tex > *{position:relative;z-index:1}
.b-tex::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("/assets/kb13-royal.svg");
  background-repeat:repeat;
  background-size:clamp(170px,19vw,240px);
  -webkit-mask-image:radial-gradient(ellipse 62% 54% at 50% 48%,
            transparent 0%,transparent 42%,#000 100%);
          mask-image:radial-gradient(ellipse 62% 54% at 50% 48%,
            transparent 0%,transparent 42%,#000 100%)}

/* a dark band gets the same tile, lifted so gold still reads against ink */
.b-dark.b-tex::before,.statement.b-tex::before,.finteaser.b-tex::before,.books.b-tex::before{
  opacity:1.35;filter:brightness(1.9) saturate(1.15)}

/* a band that wants the ornament edge to edge — no clear middle */
.b-tex-full::before{-webkit-mask-image:none;mask-image:none;opacity:.72}

/* the crown, oversized, for a band that wants one big mark instead of a pattern */
/* the crown, oversized, as ground. A DRAWN SHAPE, not a font glyph — see kb13-crown.svg. */
.b-tex-mark::after{content:"";position:absolute;z-index:0;pointer-events:none;
  right:-3%;top:50%;transform:translateY(-50%);
  width:clamp(220px,40vw,420px);aspect-ratio:4/3;
  background:url("/assets/kb13-crown.svg") no-repeat center/contain;
  opacity:.075}
.b-dark.b-tex-mark::after{opacity:.09}

/* a scripture REFERENCE, large and faint. FAITH SURFACES ONLY — a verse behind an offer
   attaches God's voice to a business claim, which is a fence in CLAUDE.md, not a taste call. */
.b-tex-verse::after{content:attr(data-ref);position:absolute;z-index:0;pointer-events:none;
  left:50%;bottom:4%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--b-mont);font-weight:900;text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(26px,7vw,64px);color:rgba(31,77,58,.08);user-select:none}
@media (prefers-reduced-motion:reduce){.b-tex::before,.b-tex::after{transition:none}}

/* ── THE BRAND IMAGES, USED AS GROUND ──────────────────────────────────────
   KB, 2026-10-06: "I want that picture of the ancient wisdom tree door... in the background on
   some of these pages. I want that image used more... the Polaris image or the Golden Horse
   Race image, some of this stuff to be used more."

   EACH IMAGE GOES WHERE IT MEANS SOMETHING. The doors sit behind "Pick the one you actually
   came for", because that section IS two doors. The tree sits under the four pillars, because
   the argument is what everything grows from. The Polaris brain sits behind the Polaris
   teaser. None of them are decoration dropped on a page that happens to be empty.

   The scrim is part of the background stack, not a pseudo-element, so it cannot be out-ordered
   by the ornament layer: a near-opaque wash on light bands (the image is a ghost under dark
   text), a heavier ink wash on dark ones. background-attachment:fixed gives these the same
   stillness as the hero — the ground holds, the words travel.

   Sizes are the 1080 webp variants already on disk (~250 KB), not the 3 MB PNG originals. */

.b-img{background-repeat:no-repeat;background-position:center;background-size:cover;
       background-attachment:fixed}

/* THE LIGHT WASH IS THE DEFAULT. This used to name specific sections, so a band that was not
   on the list — the Polaris page's body, wrapped fresh — got --b-img and no rule to paint it
   with, and silently showed nothing. A treatment that only works on an enumerated list is a
   list you will forget to add to. */
.b-img{background-image:linear-gradient(rgba(255,255,255,.90),rgba(255,255,255,.935)),var(--b-img)}
.b-dark.b-img,.statement.b-img,.finteaser.b-img,.books.b-img,.offers2.b-img{
  background-image:linear-gradient(rgba(9,9,11,.78),rgba(9,9,11,.88)),var(--b-img)}

.b-img-doors { --b-img:url("/assets/img/splash-doors-1080.webp") }
.b-img-tree  { --b-img:url("/assets/img/splash-tree-1080.webp") }
.b-img-brain { --b-img:url("/assets/img/brain-1080.webp") }
.b-img-derby { --b-img:url("/assets/img/derby-940.webp") }
.b-img-devo  { --b-img:url("/assets/img/devo-1080.webp") }

@media (hover:none){ .b-img{background-attachment:scroll} }
@media (prefers-reduced-motion:reduce){ .b-img{background-attachment:scroll} }

/* ── SMALL RED LABELS GET A DARKER RED ─────────────────────────────────────
   Measured on the rendered page: brand red #e5322d on the near-white ground is 4.21:1. That
   clears the 3:1 bar for the 26px display lines, and MISSES the 4.5:1 bar for the 12px
   uppercase eyebrows — which are the hardest text on the page to read and the ones set in it.

   #d42a24 measures 4.89:1 on the same ground, passes, and is the same hue a shade down: on a
   12px tracked-out label nobody can tell them apart, and the people who were struggling can
   now read it. Buttons, display lines and the brand furniture keep the full red — this is the
   small-type case only. */
.b-site .lbl,.b-site .kick,.b-site .eyebrow,
.b-light .lbl,.b-tint .lbl,
.confess2 .lbl,.fnine .lbl,.ladder .lbl,.books .lbl{color:#d42a24}
.b-dark .lbl,.b-dark .kick{color:var(--b-goldlt)}

/* ── THE TWO CAPTURE DOORS ─────────────────────────────────────────────────
   KB, 2026-10-06: "anyone who lands on the site should be funneled into the reset page or the
   polaris page. polaris specifically for anyone looking for finance solutions... and everyone
   else get sent to the reset page. those are going to be our two lead capture pages outside of
   our offers."

   An audit of in-body links found the hole: every content page routed to /go-book or
   /go-polaris and NOTHING routed to either capture page. A reader who is not ready to take an
   offer had nowhere to go but the nav. One route per page, the right one — finance pages send
   to Polaris, everything else sends to the Reset. Never both: two next steps is no next step. */
.b-route{background:var(--b-ink,#0f0e10);color:#f4f1ea;padding:54px 16px;position:relative;
         border-top:1px solid rgba(201,162,39,.22)}
.b-route .wrap{max-width:720px;margin:0 auto;position:relative;z-index:2}
.b-route .b-route-lbl{font:800 11px/1 var(--b-mont);letter-spacing:.24em;text-transform:uppercase;
         color:var(--b-goldlt);margin-bottom:12px}
.b-route h2{font-family:var(--b-mont);font-weight:900;text-transform:uppercase;
         font-size:clamp(25px,5.2vw,38px);line-height:1.05;margin:0 0 14px;color:#fff}
.b-route p{font-size:17px;line-height:1.62;color:#cfc9bd;max-width:54ch;margin:0 0 20px}
.b-route .b-cta{display:inline-block;text-decoration:none;padding:15px 26px;border-radius:9px;
         background:var(--red,#e5322d);color:#fff;font-weight:700}
.b-route .b-cta:hover{background:#cf2a25;color:#fff}

/* The four FX4 blocks are doors, so they look like doors. They were four headings with no
   links in them at all — the section whose whole job is to route people routed nobody. */
.fx-link{color:inherit;text-decoration:none;border-bottom:2px solid rgba(201,162,39,.45)}
.fx-link:hover{color:var(--b-gold);border-bottom-color:var(--b-gold)}

/* The FX4 cards are block-level links now, so they have to LOOK like doors and behave like
   them — the whole card is the target, not one underlined word inside it. */
a.ff{display:block;text-decoration:none;color:inherit;
     transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
a.ff:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(11,11,12,.10)}
a.ff h3{color:inherit}
a.ff:hover h3{color:var(--b-gold)}
a.ff:focus-visible{outline:3px solid var(--b-gold);outline-offset:3px}
a.ff::after{content:" \2192";color:var(--b-gold);font-weight:800}
@media (prefers-reduced-motion:reduce){ a.ff{transition:none} a.ff:hover{transform:none} }

/* ── AN EARLY CALL TO ACTION ───────────────────────────────────────────────
   KB, 2026-10-06: "https://kb13.com/faith CTA higher up. dont take away any cta add one
   higher up." Measured first: every pillar page's first CTA sat at 98-99% of the page — a man
   convinced by the opening argument had to scroll the whole thing to act. All four had it.

   Deliberately NOT a second route block. The foot of the page already carries the full one;
   repeating it whole would read as the same thing twice. This is a thin line with a button,
   sized to interrupt once and get out of the way. Nothing was removed to make room. */
.b-early{background:var(--cream,#f3f0e7);border-top:1px solid rgba(201,162,39,.3);
  border-bottom:1px solid rgba(201,162,39,.3);padding:26px 16px}
.b-early .wrap{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:18px;
  flex-wrap:wrap;justify-content:space-between}
.b-early p{margin:0;font-family:var(--serif);font-size:clamp(19px,3.6vw,25px);
  line-height:1.24;color:var(--ink);max-width:30ch}
.b-early .b-cta{display:inline-block;text-decoration:none;white-space:nowrap;
  background:var(--red,#e5322d);color:#fff;font-weight:700;padding:14px 24px;border-radius:9px}
.b-early .b-cta:hover{background:#cf2a25;color:#fff}
.b-dark + .b-early{border-top:0}
/* it sits between paragraphs now, so it needs its own air and a narrower measure */
div.b-early{margin:34px auto;max-width:760px;border-radius:12px}
div.b-early .wrap{padding:0 20px}

/* ── THE WATCH STRIP ───────────────────────────────────────────────────────
   Myron's home page carries 49 images and video throughout; ours had five borrowed clips on a
   single page. Each pillar page now shows ITS OWN lane. Thumbnails until clicked, so six films
   cost one image each rather than six embedded players. */
.wt{padding:48px 16px;background:var(--cream,#f3f0e7)}
.b-dark .wt,.wt.on-dark{background:transparent}
.wt-h{font-family:var(--b-mont);font-weight:900;text-transform:uppercase;letter-spacing:-.004em;
  font-size:clamp(22px,4.4vw,32px);margin:0 0 18px;max-width:1040px;margin-inline:auto}
.wt-grid{display:grid;grid-template-columns:1fr;gap:14px;max-width:1040px;margin:0 auto}
.wt-v{appearance:none;border:0;padding:0;background:none;cursor:pointer;text-align:left;
  border-radius:12px;overflow:hidden;position:relative;display:block;
  transition:transform .16s ease,box-shadow .16s ease}
.wt-v:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(11,11,12,.16)}
.wt-v:focus-visible{outline:3px solid var(--b-gold);outline-offset:3px}
.wt-v img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.wt-v::after{content:"";position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
  width:0;height:0;border-left:22px solid #fff;border-top:14px solid transparent;
  border-bottom:14px solid transparent;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));
  pointer-events:none}
.wt-t{display:block;padding:11px 13px 14px;font:700 15px/1.35 var(--sans);color:var(--ink);
  background:#fff}
.b-dark .wt-t{background:#17161a;color:#f4f1ea}
.wt-frame{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.wt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (min-width:700px){ .wt-grid{grid-template-columns:repeat(3,1fr);gap:18px} }
@media (prefers-reduced-motion:reduce){ .wt-v{transition:none} .wt-v:hover{transform:none} }

/* ── BECOME A TEER — the foundation credit ────────────────────────────────
   The official mark is crimson #9B1C20 on white with azure #0F87BD type (2020 brand guide,
   RGB 155,28,32 and 15,135,189, Futura). Crimson measures 2.42 against our ink, so the logo
   CANNOT sit on the dark footer without going muddy — and recolouring somebody's registered
   mark to fit our palette is not ours to do. It gets a light band of its own instead, where it
   renders in its own colours exactly as the guide specifies. */
.teer{background:#fff;border-top:1px solid var(--line,#ebe7df);padding:30px 16px 32px}
.teer .wrap{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  justify-content:center;text-align:center}
.teer-mark{display:block;flex:0 0 auto}
.teer-mark img{display:block;width:150px;height:auto}
.teer-line{font-size:14.5px;line-height:1.6;color:#55534e;max-width:46ch;margin:0}
.teer-line strong{color:#9B1C20;font-weight:700}
.teer-line em{font-style:normal;color:#0F87BD;font-weight:700}
@media (min-width:620px){ .teer .wrap{text-align:left;justify-content:flex-start} }
/* the lead film is a live player, the rest are posters until clicked */
.wt-lead{max-width:1040px;margin:0 auto 20px}
.wt-lead .wt-frame{aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;
  box-shadow:0 20px 44px rgba(11,11,12,.22)}
.wt-lead-t{margin:10px 2px 0;font:700 15.5px/1.4 var(--sans);color:var(--ink)}
.b-dark .wt-lead-t{color:#f4f1ea}
.wt-muted{font-weight:500;color:var(--dim)}