/* =====================================================================
   Million Beers Club v3: the world count first. Jules, 2026-10-29.
   Plain CSS, no build step. Load after styles.css and before events.css:
     styles.css > v3.css > events.css > event-<name>.css
   Same vocabulary as v1 and v2: stout outlines, cream labels with a dashed
   inner line, green buttons with a stout rim, stout sheets, Ultra for
   anything that should feel like a pub sign, Figtree for everything small.

   Event-safe by construction: every colour here is a token from styles.css
   (--beer-*, --foam*, --stout, --cream, --gold, --tap*) or an event slot from
   events.css (--ev-*) with today's value as its fallback. No colour is written
   in place, so Halloween and every later event dress these parts too.
   Nothing here needs an inline style or script (the page's security policy).

   Every block is marked part 1 or part 2 (README section 3).
   ===================================================================== */

/* ---------- Tokens added by v3 (part 1) ---------- */
:root {
  /* translucent ink for tracks and dividers; follows --stout where color-mix is supported */
  --ink-10: rgba(42, 23, 9, .1);
  --ink-22: rgba(42, 23, 9, .22);
  --ink-78: rgba(42, 23, 9, .78);
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  :root, html[data-event] {
    --ink-10: color-mix(in srgb, var(--stout) 10%, transparent);
    --ink-22: color-mix(in srgb, var(--stout) 22%, transparent);
    --ink-78: color-mix(in srgb, var(--stout) 78%, transparent);
  }
}

/* =====================================================================
   1. THE MAIN SCREEN, WORLD FIRST (part 1)
   Order down the screen: the world count (the headline), You, your clubs
   (the second layer), then the dock: Counts for (part 2) and the +1 cap.
   ===================================================================== */

/* The world count. One button: it opens the World Board. Replaces the club
   chip and the club's number that sat here in v2 (they moved into the clubs
   layer below, README section 4). */
.world {
  display: block; width: 100%; padding: 0 16px; text-align: center; color: var(--stout);
  -webkit-user-select: none; user-select: none;
  transition: transform .15s var(--ease-out);
}
.world:active { transform: scale(.98); }
.world__kicker {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; max-width: 100%;
  margin-bottom: 6px; font: 800 12.5px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--stout);
}
.world__chev { width: 14px; height: 14px; margin-left: -2px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.world .hero__of { display: block; }

/* "Live": a small dot that breathes. Still under reduce motion. */
.live-dot {
  position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--tap); box-shadow: 0 0 0 2px var(--cream);
}
.live-dot::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid var(--tap); opacity: 0;
  animation: live-ring 2.4s var(--ease-out) infinite;
}
@keyframes live-ring { 0% { transform: scale(.6); opacity: .7; } 70%, 100% { transform: scale(1.5); opacity: 0; } }

/* You: your own beers, every club and the world-only ones. The club rank
   moved to each club's row and the club page. */
.me--world .me__rank { display: none; }

/* ---------- Your clubs: the second layer (part 1) ---------- */
/* Sits where v2's "Next milestone" label sat, and behaves the same: it fades
   while a beer pours, and the one-time hint card takes its place until dismissed. */
.clubs {
  position: absolute; left: 16px; right: 16px; top: 12px;
  max-height: calc(100% - 18px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 10px 6px 6px;
  background: var(--cream); color: var(--stout);
  border: 3px solid var(--stout); border-radius: 18px;
  box-shadow: 0 6px 0 var(--ink-22);
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out);
}
.clubs::before {
  content: ""; position: absolute; inset: 4px; border-radius: 12px;
  border: 1.5px dashed var(--ink-22); pointer-events: none;
}
.clubs__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 3px 12px 4px; }
.clubs__kicker { font: 800 11.5px/1 var(--font-body); letter-spacing: .15em; text-transform: uppercase; color: var(--tap); }
.clubs__list { list-style: none; margin: 0; padding: 0; }
.clubs__list li + li { box-shadow: inset 0 1.5px 0 var(--ink-10); }

/* one club row: cap, name and count on the first line; the next milestone and its bar run the full
   width under them, so the milestone name has room. The whole row opens the club page. */
.crow {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "cap name count" "cap next next" "cap meter meter";
  align-items: center; column-gap: 10px; row-gap: 3px;
  width: 100%; padding: 9px 8px 10px 8px; border-radius: 12px; text-align: left; color: var(--stout);
  transition: background-color .15s;
}
.crow:active { background: var(--ink-10); }
.crow > .ccap { grid-area: cap; align-self: center; }
.crow__main { display: contents; }
.crow__name { grid-area: name; min-width: 0; font: 400 17px/1.15 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 1px; }
.crow__next { grid-area: next; min-width: 0; font: 700 12.5px/1.25 var(--font-body); color: var(--ink-78); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow__next b { font-weight: 800; color: var(--stout); }
.crow__meter {
  grid-area: meter; position: relative; display: block; height: 9px; margin-top: 3px; border-radius: 999px; overflow: hidden;
  background: var(--ink-10); box-shadow: inset 0 0 0 1.5px var(--stout);
}
.crow__meter i {
  display: block; height: 100%; width: var(--p, 0%); min-width: 9px; border-radius: 999px;
  border: 1.5px solid var(--stout);
  background: var(--ev-meter, linear-gradient(180deg, #FFD660, #E8901D));
  transition: width .7s var(--ease-out);
}
.crow__count { grid-area: count; display: inline-flex; align-items: center; gap: 2px; font: 400 21px/1 var(--font-display); color: var(--stout); font-variant-numeric: tabular-nums; }
.crow__chev { width: 15px; height: 15px; margin-right: -2px; fill: none; stroke: var(--stout); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }

/* one club: the row grows a little */
.clubs--one .crow { padding-top: 10px; padding-bottom: 12px; }
.clubs--one .crow__name { font-size: 20px; }
.clubs--one .crow__count { font-size: 27px; }
.clubs--one .crow__next { font-size: 13.5px; }
.clubs--one .crow__meter { height: 12px; }

/* no club yet (part 2): the layer becomes an invitation. Start a club, or join one. */
.clubs--none { padding: 16px 18px 16px; }
.clubs--none .clubs__kicker { display: block; }
.clubs__title { margin: 8px 0 6px; font: 400 21px/1.14 var(--font-display); }
.clubs__text { font: 600 14.5px/1.42 var(--font-body); }
.clubs__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.clubs__actions .btn { flex: 1 1 auto; height: auto; min-height: 48px; padding-top: 8px; padding-bottom: 8px; line-height: 1.15; }

/* the layer steps aside exactly as the v2 label did */
.has-hint .clubs { opacity: 0; pointer-events: none; }
.is-pouring .clubs { opacity: 0; transform: scale(.96) translateY(-6px); pointer-events: none; }
.is-partying .clubs { opacity: 0; }

/* ---------- Counts for (part 2, only for people in two or more clubs) ---------- */
/* A stout rail just above the +1 cap. The world is always in, so its chip is
   fixed; each club chip toggles. Remembered from your last beer. */
/* the dock is a one-column grid; pin the column to the dock's width so the rail scrolls inside it
   instead of stretching the column (a percentage width does not hold while a grid sizes its tracks) */
.dock { grid-template-columns: minmax(0, 1fr); }
.countsfor {
  position: relative; width: calc(100% - 24px); max-width: 420px; margin: 0 auto 12px;
  display: flex; align-items: center; gap: 6px;
  padding: 5px; border-radius: 999px; background: var(--stout); color: var(--cream);
  box-shadow: 0 4px 0 var(--ink-22);
}
.countsfor__label {
  flex: none; max-width: 6.2em; padding: 0 4px 0 10px;
  font: 800 10.5px/1.1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
}
.countsfor__row {
  flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent);
  padding-right: 18px;
}
.countsfor__row::-webkit-scrollbar { display: none; }
.cf {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 3px 12px 3px 4px;
  border-radius: 999px; font: 800 13.5px/1 var(--font-body); white-space: nowrap;
  color: var(--cream-82, rgba(255, 244, 223, .82)); box-shadow: inset 0 0 0 1.5px var(--cream-12, rgba(255, 244, 223, .12));
  transition: background-color .15s, transform .15s var(--ease-out);
}
.cf:active { transform: scale(.95); }
.cf[aria-pressed="true"] { background: var(--tap); color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--cream-12, rgba(255, 244, 223, .12)); }
.cf__tick { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; display: none; }
.cf[aria-pressed="true"] .cf__tick { display: block; }
.cf .ccap { --cs: 28px; --cap-sw: 7; }
.cf--world { padding-left: 8px; color: var(--gold); box-shadow: inset 0 0 0 1.5px var(--gold); cursor: default; }
.cf__globe { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---------- The +1 confirms where it counted (part 1 words, part 2 when clubs per beer land) ---------- */
/* The undo toast already exists. Its words change (Mary, V3-M6). It may wrap to two lines. */
.toast__text { overflow-wrap: anywhere; }
.toast--wide { max-width: min(360px, calc(100% - 24px)); border-radius: 22px; }

/* ---------- The world's milestones get their moment, for everyone (part 1) ---------- */
/* Same party as a club milestone (foam, bubbles, the event's extra), with a
   world card: a kicker with the globe, a bigger count, the name on gold. */
.party__kicker { display: none; }
.party--world .party__kicker {
  display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 9px;
  font: 800 12px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--tap);
}
.party__globe { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.party--world .party__card { padding: 16px 22px 17px; box-shadow: 0 7px 0 var(--ink-22), 0 0 0 7px var(--gold), 0 0 0 9.5px var(--stout); }
.party--world .party__count { font-size: 34px; }
.party--world .party__name { background: var(--gold); color: var(--stout); box-shadow: inset 0 0 0 2.5px var(--stout); }

/* ---------- The header mark (part 1, after Tim picks a logo) ---------- */
.wordmark__mark { display: inline-block; width: 1.5em; height: 1.5em; margin: -.3em .35em 0 0; vertical-align: middle; }
.wordmark--marked { font-size: min(17px, 4.4vw); }

/* ---------- The 21+ badge: the chosen logo above the wordmark (part 1, after Tim's pick) ---------- */
/* The badge used to say the name in its ring; the new marks are simpler, so the outlined wordmark
   (assets/mbc-wordmark.svg) sits under them. The header keeps hiding its own wordmark on this screen. */
.badge-lockup { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 16px; }
.badge-lockup .join__badge { margin-bottom: 0; }
.join__badge--mark { width: min(164px, 42vw); }
.badge-lockup__word { width: min(240px, 64vw); height: auto; }

/* ---------- Shorter phones ---------- */
@media (max-height: 760px) {
  .crow { padding-top: 6px; padding-bottom: 7px; row-gap: 2px; }
  .crow__meter { height: 8px; }
  .clubs--one .crow__meter { height: 10px; }
  .countsfor { margin-bottom: 8px; }
}
@media (max-height: 700px) {
  /* small phones (iPhone SE): three clubs and the no-club card still fit without scrolling */
  .crow { padding: 4px 6px 5px; row-gap: 1px; column-gap: 8px; }
  .crow__name { font-size: 15.5px; }
  .crow__next { font-size: 11.5px; }
  .crow__count { font-size: 19px; }
  .crow__meter { height: 7px; margin-top: 2px; }
  .crow > .ccap { --cs: 36px; }
  .clubs__head { padding-bottom: 2px; }
  .clubs--one .crow__name { font-size: 18px; }
  .clubs--one .crow__count { font-size: 23px; }
  .clubs--none { padding: 12px 14px; }
  .clubs--none .clubs__kicker, .clubs--none .clubs__text { display: none; }   /* the title stands alone here */
  .clubs--none .clubs__title { margin-top: 0; font-size: 19px; }
  .clubs__actions { margin-top: 10px; gap: 8px; }
  .clubs__actions .btn { min-height: 44px; }
}
@media (max-height: 680px) {
  .join__badge--mark { width: min(118px, 32vw); }
  .badge-lockup { gap: 8px; margin-bottom: 10px; }
  .badge-lockup__word { width: min(196px, 54vw); }
  .crow__next { font-size: 12px; }
  .crow__name { font-size: 16px; }
  .crow__count { font-size: 20px; }
  .clubs--one .crow__count { font-size: 24px; }
  .clubs--one .crow__name { font-size: 18px; }
  .clubs { top: 8px; padding-top: 8px; }
  .cf { min-height: 32px; font-size: 13px; }
  .cf .ccap { --cs: 24px; }
}

/* =====================================================================
   2. THE WORLD BOARD (part 1). Public, behind the one-tap 21+ check, no
   member names. The front door for anyone without a club and anyone who
   arrives from a public link or post. Phone first, then desktop.
   One scrolling page; the dock with the main action stays at the bottom.
   ===================================================================== */
.wb {
  position: absolute; inset: 0; z-index: 2;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: calc(var(--foam-h) + 20px) 16px 0;
}
.wb__inner { width: 100%; max-width: 440px; min-height: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
/* phones and tablets: the two desktop columns melt into one, in reading order */
.wb__main, .wb__side { display: contents; }
.wb__hero { text-align: center; }
.wb__hero .world__kicker { margin-bottom: 8px; }

/* two stats side by side: beers in the last hour, and the world's next milestone */
.wstats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wstat {
  position: relative; min-width: 0; padding: 12px 14px 12px;
  background: var(--cream); color: var(--stout);
  border: 3px solid var(--stout); border-radius: 18px; box-shadow: 0 5px 0 var(--ink-22);
}
.wstat__n { font: 400 28px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.wstat__label { margin-top: 6px; font: 800 11px/1.25 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--tap); }
.wstat .crow__meter { margin-top: 9px; }

/* the forecast: only once there is a week of data (Bob B3). A stout pill under the stats. */
.forecast {
  display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 8px 16px;
  border-radius: 999px; background: var(--stout); color: var(--cream);
  font: 700 15px/1.25 var(--font-body); text-align: center; box-shadow: 0 4px 0 var(--ink-22);
}
.forecast b { font-weight: 800; color: var(--gold); }
.forecast__flag { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* this week's top clubs: only clubs whose starter switched it on. Club names and totals only,
   no crown and no prize styling (no rewards for drinking more). */
.topclubs {
  position: relative; padding: 16px 12px 12px;
  background: var(--stout); color: var(--cream);
  border-radius: 22px; box-shadow: 0 -2px 0 4px var(--beer-4), 0 10px 26px var(--ink-22);
}
.topclubs__title { padding: 0 10px; font: 400 22px/1.1 var(--font-display); color: var(--cream); }
.topclubs__sub { padding: 6px 10px 0; font: 600 13.5px/1.3 var(--font-body); color: var(--cream-68, rgba(255, 244, 223, .68)); }
.topclubs__list { list-style: none; margin: 10px 0 0; padding: 0; }
.tcrow {
  display: grid; grid-template-columns: 22px auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px;
  min-height: 52px; padding: 5px 10px; border-radius: 14px;
}
.tcrow + .tcrow { box-shadow: inset 0 1px 0 var(--cream-08, rgba(255, 244, 223, .08)); }
.tcrow__rank { font: 400 18px/1 var(--font-display); color: var(--gold); text-align: center; }
.tcrow__name { font: 700 16.5px/1.15 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcrow__n { font: 400 20px/1 var(--font-display); color: var(--cream); text-align: right; }
.topclubs .ccap__skirt path { stroke: var(--cream-82, rgba(255, 244, 223, .9)); }
.topclubs__empty { margin: 10px 10px 4px; font: 600 14.5px/1.4 var(--font-body); color: var(--cream-82, rgba(255, 244, 223, .82)); }
.topclubs__foot { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 6px 4px; }
.topclubs__foot .btn { flex: 1 1 auto; height: auto; min-height: 48px; padding-top: 8px; padding-bottom: 8px; line-height: 1.15; }

/* the dock: the front door's main action, always in reach. It closes the page, and sticks to the
   bottom of the screen while the page scrolls under it. */
.wb__dock {
  position: sticky; bottom: 0; z-index: 6; margin: auto -16px 0;
  padding: 30px 16px calc(var(--safe-bottom) + 16px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: linear-gradient(180deg, transparent, var(--beer-5) 30%);
}
.wb__dock > * { width: 100%; max-width: 440px; }
.wb__cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: auto; min-height: 60px; padding-top: 10px; padding-bottom: 10px; line-height: 1.1; }
/* the two second actions: links on a stout pill, so they read on any part of the beer */
.wb__links {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 2px;
  width: fit-content; max-width: 100%; margin: 0 auto; padding: 0 8px; border-radius: 22px;
  background: var(--stout); color: var(--cream); box-shadow: 0 4px 0 var(--ink-22);
}
.wb__link {
  min-height: 42px; padding: 0 8px; color: var(--cream);
  font: 800 14.5px/1.2 var(--font-body);
  text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.wb__link:active { color: var(--gold); }
.wb__dot { color: var(--gold); font-weight: 800; }

/* the little +1 cap inside "Add your beer": the season's cap colour, gold on an everyday green button */
.mini-cap { width: 36px; height: 36px; flex: none; margin-left: -8px; overflow: visible; }
.mini-cap__skirt { fill: var(--ev-cap-deep, var(--gold)); stroke: var(--stout); stroke-width: 6; stroke-linejoin: round; }
.mini-cap__face { fill: var(--ev-cap, var(--gold)); stroke: var(--stout); stroke-width: 5; }
.mini-cap__t { font: 400 33px/1 var(--font-display); fill: var(--cream); stroke: var(--stout); stroke-width: 7; paint-order: stroke; stroke-linejoin: round; }

/* after part 2: the +1 cap itself, straight to counting (the club actions move under the top clubs) */
.wb__dock--cap { padding-top: 34px; gap: 8px; }
.wb__dock--cap > .cap { width: var(--cap); max-width: none; }
.wb__dock .toast { position: relative; left: auto; bottom: auto; transform: none; width: max-content; max-width: 100%; }

/* the header on the board: no sound and no clubs button; a share button on the right */
.app--board #soundBtn { visibility: hidden; }
.icon-btn--share svg { width: 23px; height: 23px; }

/* the chooser that "Add your beer" opens before part 2: start a club, or join one */
.chooser .sheet__body { padding-bottom: calc(var(--safe-bottom) + 22px); }
.chooser__actions { display: flex; flex-direction: column; gap: 12px; padding: 4px 10px 0; }
.chooser__note { margin: 14px 10px 0; font: 600 14px/1.45 var(--font-body); color: var(--cream-68, rgba(255, 244, 223, .68)); }

/* ---------- Tablets and desktop: the board fills the screen, not the phone frame ---------- */
@media (min-width: 600px) {
  .app.app--board { position: fixed; inset: 0; width: auto; height: auto; margin: 0; border-radius: 0; box-shadow: none; }
  html[data-event] .app.app--board { box-shadow: none; }
  .app--board .foam { position: fixed; }
}
/* desktop: two columns. The count on the left, as big as the screen allows; the clubs and the actions
   on the right. Made to look good as a screenshot and on a screen at the bar. */
@media (min-width: 900px) {
  .app--board .foam__bar { max-width: 1180px; margin: 0 auto; }
  .wb { display: flex; padding: calc(var(--foam-h) + 36px) 48px 44px; }
  .wb__inner { max-width: 1180px; min-height: 0; margin: auto; flex-direction: row; align-items: center; gap: 56px; }
  .wb__main { display: flex; flex: 1.3; min-width: 0; flex-direction: column; gap: 22px; }
  .wb__side { display: flex; flex: 1; min-width: 0; max-width: 460px; flex-direction: column; gap: 18px; }
  .wb__hero { text-align: left; }
  .wb__hero .world__kicker { justify-content: flex-start; font-size: 15px; }
  .wb__hero .odo--total { margin: 0; }
  .wb__hero .hero__of { font-size: 22px; margin-top: 10px; }
  .wstats { gap: 14px; }
  .wstat { padding: 16px 18px; }
  .wstat__n { font-size: 38px; }
  .wstat__label { font-size: 12.5px; }
  .forecast { justify-content: flex-start; width: fit-content; font-size: 17px; padding: 10px 22px; }
  .wb__dock { position: static; margin: 0; padding: 0; background: none; gap: 12px; }
  .wb__dock > * { max-width: none; }
  .wb__dock--cap { padding-top: 6px; }
}

/* =====================================================================
   3. THE DEFAULT LINK PREVIEW PICTURE (part 1 template; the live number is
   Bob's "optional later"). 1200 x 630. Flexbox and absolute positions only,
   so the same layout ports to Vercel's image function.
   ===================================================================== */
.ogpage { margin: 0; background: #000; }
.ogcard {
  position: relative; width: 1200px; height: 630px; overflow: hidden;
  background: linear-gradient(180deg, var(--beer-1) 0%, var(--beer-2) 30%, var(--beer-3) 70%, var(--beer-4) 100%);
  color: var(--stout); font-family: var(--font-body);
}
/* light through the glass, as in the app */
.ogcard::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255, 250, 235, 0) 3%, rgba(255, 250, 235, .2) 7%, rgba(255, 250, 235, 0) 12%);
}
.ogcard__bubbles { position: absolute; inset: 0; }
.ogcard__bubbles i { position: absolute; display: block; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 17%, rgba(255, 255, 255, .4) 25%, rgba(255, 250, 235, .16) 50%, rgba(255, 255, 255, .85) 67%, rgba(255, 255, 255, 0) 74%); }
.ogcard__head { position: absolute; left: 0; right: 0; top: 0; height: 122px; }
.ogcard__head svg { display: block; width: 100%; height: 100%; }
.ogcard__foam { fill: var(--foam); }
.ogcard__foam3 { fill: var(--foam-3); }
.ogcard__brand { position: absolute; left: 50px; top: 14px; z-index: 2; display: flex; align-items: center; gap: 16px; }
.ogcard__brand img { width: 72px; height: 72px; display: block; }
.ogcard__brand p { margin: 0; font: 400 33px/1 var(--font-display); color: var(--stout); text-transform: uppercase; letter-spacing: .01em; }
.ogcard__brand span { color: var(--tap); }
.ogcard__body { position: absolute; left: 0; right: 0; top: 128px; bottom: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ogcard__kicker { display: flex; align-items: center; gap: 12px; margin: 0; font: 800 23px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--stout); }
.ogcard__kicker .live-dot { width: 16px; height: 16px; box-shadow: 0 0 0 3px var(--cream); }
.ogcard__kicker .live-dot::after { display: none; }
.ogcard__n {
  margin: 8px 0 0; font: 400 190px/1.06 var(--font-display); color: var(--cream);
  -webkit-text-stroke: .085em var(--stout); paint-order: stroke fill; text-shadow: 0 .065em 0 var(--stout);
}
.ogcard__of { margin: 4px 0 0; font: 700 30px/1 var(--font-body); color: var(--stout); }
.ogcard__of strong { font-weight: 800; }
.ogcard__url { position: absolute; left: 52px; bottom: 44px; margin: 0; font: 800 23px/1 var(--font-body); color: var(--stout); letter-spacing: .01em; }
.ogcard__cta {
  position: absolute; right: 50px; bottom: 34px; margin: 0; display: flex; align-items: center; gap: 12px;
  height: 62px; padding: 0 26px 0 10px; border-radius: 999px;
  background: var(--tap); color: var(--cream); border: 3px solid var(--stout);
  box-shadow: 0 6px 0 var(--tap-deep), 0 6px 0 3px var(--stout);
  font: 400 25px/1 var(--font-display); letter-spacing: .02em;
}
.ogcard__cap {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--gold); color: var(--cream); border: 3px solid var(--stout);
  font: 400 19px/1 var(--font-display); -webkit-text-stroke: 4px var(--stout); paint-order: stroke fill;
}

/* =====================================================================
   4. Reduce motion: nothing new moves.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .live-dot::after { animation: none; opacity: 0; }
  .world, .crow, .cf, .clubs, .crow__meter i { transition-duration: .01ms !important; }
}