/* xf-brand21.css: Brand Guide 2.1 layer for xfclubs.com and play.xfclubs.com. NEW FILE, additive. Scoped under .b21 (set on <body>), so no other page is touched.
   Part 1 is tokens-2.1.css VERBATIM (derived, not edited). Part 2 is the component layer. Standard: XF-BRAND-GUIDE-2.1.md. Owner Ava, standard Nova. */
/* ======== PART 1: tokens-2.1.css, verbatim ======== */
/* ============================================================
   XF IDENTITY 2.1 - DESIGN TOKENS (additions only)
   Brand Guide 2.1, ratified 18 October 2026.
   Load AFTER tokens.css (2.0). This file adds; it overrides nothing.
   Every value falls back to the 2.0 token or its literal, so the file
   also works on its own.
   Rules unchanged from 2.0: no !important except the reduced-motion
   reset, no hex outside the token files, spacing on the 8px scale.
   Owner: Ava. Standard: Nova.
   ============================================================ */

/* ---- Fonts: campaign voices (guide 5.2) ----------------------------------
   Archivo, JetBrains Mono and Doto are loaded from Google Fonts, or self-hosted
   once Ava has confirmed each licence file (guide section 17, item 1).
   <link href="https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900
        &family=JetBrains+Mono:wght@400;600&family=Doto:wght@100..900&display=swap" rel="stylesheet"> */

:root {
  /* ---- Colour: campaign accents (guide 4.4) --------------------------------
     One accent per artefact. Never on pricing, booking, forms, the app, error
     or consent states, dashboards, transactional email, or kit.
     Contrast (WCAG 2.x, computed): on #0A0A0A / on #F5F5F3 /
     black type on it / white type on it
       Ember        5.93 / 3.06 / 5.93 / 3.34
       Ultraviolet  5.31 / 3.42 / 5.31 / 3.73
       Afterglow   10.00 / 1.81 / 10.00 / 1.98
     CIELAB (D65/2): Ember 58.5 66.3 56.5, Ultraviolet 55.2 47.2 -69.8,
     Afterglow 74.9 26.3 24.8. Print masters are these Lab values. */
  --accent-ember:      #FF4B2B;
  --accent-uv:         #8A6BFF;
  --accent-afterglow:  #F4A58C;   /* recovery campaigns only (decision 2) */

  /* The accent in force for the current artefact. Set it once on the artefact
     root: <section class="campaign accent-ember">. */
  --accent: var(--accent-ember);

  /* Type colour that is always safe on an accent field (black). */
  --on-accent: var(--xf-black, #0A0A0A);

  /* ---- Coverage caps and the black band (guide 4.4) -------------------------- */
  --accent-cap:            0.60;  /* Ember, Ultraviolet: max share of an HQ artefact */
  --accent-cap-afterglow:  0.40;  /* Afterglow (Nova's setting, within decision 2) */
  --black-band-min:        0.35;  /* min contiguous near-black share, every accent artefact */
  --black-band-max-luminance: 0.012; /* relative luminance of a black-band pixel */

  /* ---- Grain gradient (guide 4.6) -------------------------------------------
     Exactly two colours: black and the one accent. Grain 8 to 16 percent, static,
     under type and logo. Interpolation is plain sRGB. */
  --grain-opacity: 0.14;
  --grain-opacity-min: 0.08;
  --grain-opacity-max: 0.16;
  --grain-tile: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  /* Black holds to the band edge, then runs to the accent. */
  --grad-campaign:        linear-gradient(to top, var(--xf-black, #0A0A0A) 0%, var(--xf-black, #0A0A0A) 35%, var(--accent) 100%);
  --grad-campaign-flat:   linear-gradient(to top, var(--xf-black, #0A0A0A) 0%, var(--accent) 100%);
  --grad-campaign-radial: radial-gradient(120% 90% at 50% 100%, var(--xf-black, #0A0A0A) 0%, var(--xf-black, #0A0A0A) 35%, var(--accent) 100%);

  /* Type-safe limits on the blend (guide 4.6, computed, 4.5:1). Share of accent
     in the mix at which white type stops being safe, working rule used here:
     Ember and Ultraviolet 0.60, Afterglow 0.40. Black type only on the solid end. */
  --gradient-white-type-max:            0.60;
  --gradient-white-type-max-afterglow:  0.40;

  /* ---- Type: campaign voices (guide 5.2) ------------------------------------- */
  --font-statement: 'Archivo', 'Arial', sans-serif;                       /* wide statement */
  --font-fact:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* dates, facts */
  --font-signal:    'Doto', 'DotGothic16', ui-monospace, monospace;       /* LED signage */

  --statement-wdth: 125;      /* use 112 for tighter fits */
  --statement-wght: 800;

  /* Scale: the same closed-set discipline as 2.0 section 6.1. */
  --fs-statement:   clamp(32px, 6vw, 72px);
  --fs-fact:        clamp(16px, 2.4vw, 22px);   /* floor 16px on screen */
  --fs-signal:      clamp(28px, 5vw, 48px);     /* floor 16px on screen */
  --fs-score:       clamp(96px, 20vw, 220px);   /* result-card score, Register 01 (5.5) */

  /* ---- Print masters note ----------------------------------------------------
     Accent print values are an open item (guide 17). No CMYK, Pantone, vinyl or
     paint token is defined until Nova signs a proof against the Lab values. */
}

/* ---- Accent selectors: set one on the artefact root --------------------------- */
.accent-ember     { --accent: var(--accent-ember); }
.accent-uv        { --accent: var(--accent-uv); }
.accent-afterglow { --accent: var(--accent-afterglow); --accent-cap: var(--accent-cap-afterglow);
                    --gradient-white-type-max: var(--gradient-white-type-max-afterglow); }

/* ---- Campaign surface (guide 4.4 and 4.6) ------------------------------------- */
.campaign { position: relative; background-color: var(--xf-black, #0A0A0A); color: var(--xf-white, #FFFFFF); isolation: isolate; }
.campaign-gradient { background-image: var(--grad-campaign); }
.campaign-gradient-flat { background-image: var(--grad-campaign-flat); }
.campaign-gradient-radial { background-image: var(--grad-campaign-radial); }

/* Grain sits ABOVE the gradient and BELOW everything you place on it.
   Give type, logo and the green stop z-index 1 or higher. Static, never animated. */
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain-tile); opacity: var(--grain-opacity); mix-blend-mode: overlay;
}
.campaign > * { position: relative; z-index: 1; }

/* The black band: one contiguous zone that holds the logo, stop, slash, footer text.
   Pair with a band height of at least 35 percent of the artefact. */
.black-band { background: var(--xf-black, #0A0A0A); min-height: calc(var(--black-band-min) * 100%); }

/* Type on an accent field is black (guide 4.4). */
.on-accent { color: var(--on-accent); }
/* White type on Ember or Ultraviolet: Register 01 size only (24px and above). */
.on-accent-white-large { color: var(--xf-white, #FFFFFF); font-size: max(24px, 1em); }
/* Accent-coloured type: on black only. */
.type-accent { color: var(--accent); }

/* ---- Campaign grade, CG-1 (guide 4.7) -------------------------------------------
   A duotone gradient map: shadows to #0A0A0A, highlights to the accent. Apply to a
   frame already graded to the 2.0 standard grade. HQ only. Never on recovery frames,
   never on Athlete-posted content, never offered to users as an effect.
   Markup:  <figure class="cg1 accent-ember"><img src="..." alt="..."></figure>  */
.cg1 { position: relative; background-color: var(--accent); isolation: isolate; overflow: hidden; }
.cg1 > img { display: block; width: 100%; height: auto; filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; }
/* Lift the true black to #0A0A0A so the shadow zone matches the ground token. */
.cg1::after { content: ""; position: absolute; inset: 0; background: var(--xf-black, #0A0A0A); mix-blend-mode: lighten; pointer-events: none; }
/* Afterglow is never a photo duotone (guide 4.4.8): do not combine .cg1 with .accent-afterglow. */

/* ---- Voices (guide 5.2) -------------------------------------------------------- */
.voice-statement {
  font-family: var(--font-statement); font-weight: var(--statement-wght);
  font-stretch: calc(var(--statement-wdth) * 1%);
  font-variation-settings: 'wdth' var(--statement-wdth);
  font-size: var(--fs-statement); line-height: 1; text-transform: uppercase;
  letter-spacing: var(--track-display, 0.004em);
}
.voice-fact {
  font-family: var(--font-fact); font-weight: 400; font-size: var(--fs-fact);
  line-height: 1.5; letter-spacing: var(--track-meta, 0.06em);
  font-variant-numeric: tabular-nums;
}
.voice-signal {
  font-family: var(--font-signal); font-weight: 900; font-size: var(--fs-signal);
  line-height: 1.1; text-transform: uppercase; letter-spacing: var(--track-meta, 0.06em);
  white-space: nowrap; overflow: hidden; text-overflow: clip;  /* one line only */
}

/* ---- Result-card score (guide 5.5, decision 5) ------------------------------------
   Register 01 for the score or time only. Result cards only; one group per card. */
.result-score {
  font-family: var(--font-display, 'Anybody XC', 'Arial Narrow', sans-serif);
  font-weight: 800; font-style: italic; text-transform: uppercase;
  font-size: var(--fs-score); line-height: var(--display-lh, 0.92);
  letter-spacing: var(--track-display, 0.004em);
  padding-top: 0.14em;                /* optical correction, 2.0 section 3.6 */
  color: var(--xf-white, #FFFFFF);    /* or var(--accent) on black; never green */
}

/* ---- Motion: grain is never animated on the web (guide 12) ---------------------- */
@media (prefers-reduced-motion: reduce) {
  .grain::after { animation: none; }
}

/* ======== PART 2: component layer (all selectors under .b21) ======== */
/* JetBrains Mono Regular, self-hosted (SIL OFL 1.1, licence in assets/fonts/OFL.txt). No third-party font request. */
@font-face{font-family:'JetBrains Mono';src:url('fonts/JetBrainsMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
/* Vertical rhythm, one scale for all four pages (8px scale, Guide 7.1/7.2: section padding 96 desktop). Section padding, band height, gap under a band, gaps inside a hero, gap before an action. */
.b21{--b21-sec:40px;--b21-band-h:48px;--b21-band-gap:32px;--b21-hero-gap:16px;--b21-act-gap:24px}
@media (min-width:720px){.b21{--b21-sec:64px;--b21-band-h:64px;--b21-band-gap:48px}}
@media (min-width:1100px){.b21{--b21-sec:96px;--b21-band-h:80px}}
.b21{--b21-black:#0A0A0A;--b21-off:#F5F5F3;--b21-g200:#C7C7C5;--b21-g300:#8E8E8C;--b21-g500:#1C1C1A;--b21-green:#00B62E;--b21-hair:rgba(255,255,255,.12)}

/* Fact voice (5.2): JetBrains Mono for dates, times, addresses. 16px floor on screen. Same words, only the face changes. */
.b21 .b21-fact{font-family:var(--font-fact);font-weight:400;font-size:max(16px,1em);line-height:1.5;letter-spacing:var(--track-meta,.06em);font-variant-numeric:tabular-nums;font-style:normal;text-transform:none}
.b21 .b21-fact-up{text-transform:uppercase}

/* The drawn slash (3.3): 14 degrees from vertical, stroke 25% of its height, horizontal-cut ends. Replaces the typed "/" in the footer category line. */
.b21 .xff-cat .xff-slash{display:inline-block;font-size:0;line-height:0;width:3px;height:12px;margin:0 9px;vertical-align:-2px;background:var(--xff-green,#00B62E);transform:skewX(-14deg)}
@media (max-width:819px){.b21 .xff-cat{display:flex;flex-direction:column;gap:2px}.b21 .xff-cat .xff-slash{display:block;width:0;height:0;margin:0;background:none}}
.b21 .xff [aria-current]{display:inline-flex;align-items:center;min-height:44px;font-weight:500;color:var(--xff-off,#F5F5F3);opacity:.6}
@media (min-width:820px){.b21 .xff [aria-current]{min-height:36px}}



/* ======== Glow and grain background (Guide 4.6, stretched, see RELEASE-NOTE): one accent, soft non-linear, long blend into black ========
   Three layered radial ellipses of the page's ONE accent over #0A0A0A (alpha stops, no third colour), each fading to fully transparent
   before the box edge, so there is no visible edge anywhere. Static film grain on top: grey fractal noise, overlay blend, 16 percent,
   masked to the glow itself so it shows only where the glow is. No animation. Decorative, aria-hidden, no text sits in it by design;
   text that does cross it is measured against the rendered pixels. Never on pricing, joining, forms, chrome. */
.b21{--accent-rgb:255 75 43;--glow-g1y:50%;--glow-g1ry:46%;--glow-g2y:70%;--glow-g3y:58%;--glow-g2ry:28%;--glow-g3ry:18%;--glow-k:1;--glow-top:0px;--b21-grain:.16;
  --b21-noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/><feComponentTransfer><feFuncR type='linear' slope='3.4' intercept='-1.2'/><feFuncG type='linear' slope='3.4' intercept='-1.2'/><feFuncB type='linear' slope='3.4' intercept='-1.2'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.b21-students{--glow-k:1.3;--accent-rgb:138 107 255;--glow-g1y:34%;--glow-g1ry:34%;--glow-g2y:78%;--glow-g3y:56%}
.b21 .b21-glow,.b21 .b21-grain{position:absolute;left:0;right:0;bottom:0;top:var(--glow-top);z-index:2;pointer-events:none}
.b21 .b21-glow{background:
  radial-gradient(ellipse 100% var(--glow-g1ry) at 100% var(--glow-g1y),rgb(var(--accent-rgb) / calc(.72 * var(--glow-k))) 0%,rgb(var(--accent-rgb) / calc(.54 * var(--glow-k))) 22%,rgb(var(--accent-rgb) / calc(.30 * var(--glow-k))) 45%,rgb(var(--accent-rgb) / calc(.11 * var(--glow-k))) 70%,rgb(var(--accent-rgb) / 0) 100%),
  radial-gradient(ellipse 80% var(--glow-g2ry) at 0% var(--glow-g2y),rgb(var(--accent-rgb) / calc(.34 * var(--glow-k))) 0%,rgb(var(--accent-rgb) / calc(.17 * var(--glow-k))) 40%,rgb(var(--accent-rgb) / calc(.04 * var(--glow-k))) 72%,rgb(var(--accent-rgb) / 0) 100%),
  radial-gradient(ellipse 46% var(--glow-g3ry) at 60% var(--glow-g3y),rgb(var(--accent-rgb) / calc(.12 * var(--glow-k))) 0%,rgb(var(--accent-rgb) / calc(.05 * var(--glow-k))) 55%,rgb(var(--accent-rgb) / 0) 100%)}
.b21 .b21-grain{background-image:var(--b21-noise);background-size:200px 200px;opacity:var(--b21-grain);mix-blend-mode:overlay;
  -webkit-mask-image:radial-gradient(ellipse 100% var(--glow-g1ry) at 100% var(--glow-g1y),#000 0%,rgba(0,0,0,.8) 30%,rgba(0,0,0,.35) 60%,transparent 100%),radial-gradient(ellipse 80% var(--glow-g2ry) at 0% var(--glow-g2y),#000 0%,rgba(0,0,0,.6) 50%,transparent 100%),radial-gradient(ellipse 46% var(--glow-g3ry) at 60% var(--glow-g3y),rgba(0,0,0,.7) 0%,transparent 100%);
  mask-image:radial-gradient(ellipse 100% var(--glow-g1ry) at 100% var(--glow-g1y),#000 0%,rgba(0,0,0,.8) 30%,rgba(0,0,0,.35) 60%,transparent 100%),radial-gradient(ellipse 80% var(--glow-g2ry) at 0% var(--glow-g2y),#000 0%,rgba(0,0,0,.6) 50%,transparent 100%),radial-gradient(ellipse 46% var(--glow-g3ry) at 60% var(--glow-g3y),rgba(0,0,0,.7) 0%,transparent 100%)}
@supports not (mix-blend-mode:overlay){.b21 .b21-grain{opacity:.08;mix-blend-mode:normal}}
/* the glow reaches up into the hero base so the blend starts in the lower half of the hero */
.b21-play{--glow-g1y:52%;--glow-g1ry:30%;--glow-g2y:82%;--glow-g2ry:18%;--glow-g3y:30%;--glow-g3ry:12%}
.b21-play .b21-glow,.b21-play .b21-grain{--glow-top:-320px}
@media (min-width:1024px){.b21-play{--glow-g1y:50%;--glow-g1ry:46%;--glow-g2y:70%;--glow-g2ry:28%;--glow-g3y:58%;--glow-g3ry:18%}.b21-play .b21-glow,.b21-play .b21-grain{--glow-top:calc(-1 * clamp(300px,28vw,410px))}}
@container site (min-width:1100px){.b21-students .b21-glow,.b21-students .b21-grain{--glow-top:calc(-1 * clamp(160px,16vw,260px));--glow-g1y:48%;--glow-g1ry:36%;--glow-g2y:80%;--glow-g2ry:20%}}

/* Closing band on students and key workers: the page's own CTA and info block, moved out of the old footer so the shared footer is identical everywhere. */
.b21 .b21-close{background:#0A0A0A;color:#F5F5F3;padding:var(--b21-sec) 0 var(--b21-hero-gap)}
.b21 .b21-close .wrap{padding:0 var(--pad,16px)}
.b21 .b21-close .eb{color:#8E8E8C;margin-bottom:8px}
.b21 .b21-close .disp{color:#F5F5F3;font-size:clamp(26px,7vw,42px);line-height:1;margin-bottom:10px}
.b21 .b21-close .m{color:#C7C7C5}
.b21 .b21-close .foot-cta .btn{width:auto;margin-top:16px;padding:12px 22px}
.b21 .b21-close .foot-info{display:grid;grid-template-columns:1fr;gap:22px;margin:30px 0 4px;border-top:1px solid rgba(255,255,255,.14);padding-top:26px}
.b21 .b21-close .foot-info b{color:#fff}
@media (min-width:720px){.b21 .b21-close .foot-info{grid-template-columns:1fr 1fr;gap:40px}}

/* Section rhythm on the xf.css pages: one padding scale instead of 22 / 34 / 52 */
.b21-students .sec,.b21-nhs .sec{padding:var(--b21-sec) 0}
.b21 .acts{margin-top:var(--b21-act-gap)}
/* Primary and secondary buttons: 48px minimum (Guide 7.3 mobile), header button follows the chrome ruling */
.b21-students .btn:not(.navbook),.b21-nhs .btn:not(.navbook){min-height:48px;display:flex;align-items:center;justify-content:center}
/* ---- Type scale floors (5.1): labels 11px, body 14px, scoped to the staged copies. Shared xf.css is not touched. ---- */
.b21 .eb{font-size:11px;letter-spacing:.11em}
.b21 .m{font-size:14px}
.b21 .odtier-sub,.b21 .fine{font-size:14px}
.b21 .orient{font-size:14px}
.b21 .hero--od .lede,.b21 .ah .lede{font-size:17px;line-height:1.6}
.b21 :focus-visible{outline-color:var(--b21-g200)}

/* ======== HOME ======== */
.b21-home .hero__scrim{background:linear-gradient(to top,#0A0A0A 0%,rgba(10,10,10,.52) 45%,rgba(10,10,10,0) 100%)}
.b21-home .card__media::after{background:linear-gradient(to top,#0A0A0A 0%,rgba(10,10,10,.52) 45%,rgba(10,10,10,0) 100%)}
.b21-home .hero h1{font-size:clamp(52px,10vw,128px);line-height:.92;padding-top:.14em}
.b21-home .hero .lede{font-size:clamp(16px,1.8vw,19px)}
.b21-home .hero{min-height:clamp(440px,60svh,720px)}
.b21-home .hero__inner{padding-top:var(--b21-sec);padding-bottom:var(--b21-sec)}
.b21-home .hero .eyebrow{margin-bottom:var(--b21-hero-gap)}
.b21-home .hero .lede{margin-top:var(--b21-hero-gap)}
.b21-home .grid{padding:var(--b21-band-gap) 0 var(--b21-sec)}
.b21-home .card__head .meta{font-family:var(--font-fact);font-size:16px;font-weight:400;letter-spacing:var(--track-meta,.06em);color:#C7C7C5;margin-top:8px;text-transform:uppercase}
.b21 footer.xff{padding:0;margin:0}
/* xf.css sets a global p{font-size,line-height,colour,max-width}: pin the footer paragraphs back to the footer spec so it renders identically on every page */
/* Footer at tablet widths: six columns need 1100px, so 820 to 1099 wraps to two rows of three (Nova fix 1, no horizontal scroll). */
@media (min-width:820px) and (max-width:1099px){
  .b21 .xff-groups{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 28px}
  .b21 .xff-group--clubs,.b21 .xff-group--follow{grid-column:auto}
}
/* Footer rhythm on phones (same on every page): tighter group gap, Follow links in two columns. Desktop untouched. */
@media (max-width:819px){
  .b21 .xff-wrap{padding-top:32px}
  .b21 .xff-brand{padding-bottom:24px}
  .b21 .xff-groups{gap:24px 24px;padding:24px 0}
  .b21 .xff-group--follow ul{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  .b21 .xff-legal{padding-top:20px;gap:12px}
}
.b21 .xff .xff-cat{font-size:12px;line-height:1.5;max-width:none;color:#8E8E8C}
.b21 .xff .xff-legal p{font-size:13px;line-height:1.5;color:#8E8E8C;max-width:760px}
.b21 .xff .xff-legal .xff-copy{color:#C7C7C5}
.b21-home footer.xff{margin-top:auto}
@media (min-width:760px) and (max-width:999px){.b21-home .card__head{padding:16px}.b21-home .card__head .meta{min-height:48px;line-height:24px;letter-spacing:.02em}.b21-home .card__actions{padding:16px}}

/* ======== STUDENTS: Ultraviolet, above the pricing layer only ======== */
.b21-students{--accent:var(--accent-uv)}
.b21-students .b21-night{position:relative;background:#0A0A0A;color:#F5F5F3;padding:var(--b21-sec) 0}
.b21-students .b21-night .wrap{position:relative;z-index:3}
.b21-students .hero .body{padding-bottom:var(--b21-band-gap)}
@container site (min-width:1100px){.b21-students .hero .body{padding-bottom:56px}}
.b21-students .hero .body .eb{margin-bottom:var(--b21-hero-gap)}
.b21-students .hero .body h1{margin-bottom:var(--b21-hero-gap)}
.b21-students .hero .odflags{margin:var(--b21-hero-gap) 0 0}
.b21-students .hero .orient{margin-top:var(--b21-hero-gap)}
.b21-students .b21-night .eb{color:var(--accent-uv)}
.b21-students .b21-night .disp{color:#fff}
.b21-students .b21-night .uspgrid{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.12)}
.b21-students .b21-night .usp{background:#1C1C1A;color:#F5F5F3}
.b21-students .b21-night .usp b{color:#fff}
.b21-students .b21-night .usp .m{color:#C7C7C5}
.b21-students .hero .orient{font-family:var(--font-fact);font-size:16px;letter-spacing:var(--track-meta,.06em)}
@container site (min-width:1100px){.b21-students .hero .orient{color:#fff}}
.b21-students .b21-close{margin-top:0}

/* ======== KEY WORKERS: monochrome plus green, dark hero ======== */
.b21-nhs .ah{background:#0A0A0A;color:#F5F5F3;padding:var(--b21-sec) 0}
.b21-nhs .ah .eb{margin-bottom:var(--b21-hero-gap)}
.b21-nhs .ah h1.disp{margin:0 0 var(--b21-hero-gap)}
.b21-nhs .ah .lede{margin-bottom:0}
.b21-nhs .ah .acts{gap:var(--b21-hero-gap)}
.b21-nhs .ah .eb{color:#C7C7C5}
.b21-nhs .ah h1.disp{color:#fff;font-size:clamp(52px,13vw,104px)}
.b21-nhs .ah .lede{color:#F5F5F3}
.b21-nhs .ah .fine{color:#C7C7C5}
.b21-nhs .ah .btn.o{background:none;border:1.4px solid #8E8E8C;color:#F5F5F3}
.b21-nhs .ah .btn.o:hover{border-color:#F5F5F3}
.b21-nhs .ah .textlink{color:#F5F5F3}
.b21-nhs .ah .textlink:hover{color:var(--green)}
.b21-nhs .ah .kwi{border-radius:8px;background:#1C1C1A}

/* ======== PLAY: Ember, above the join layer only ======== */
.b21-play{--accent:var(--accent-ember);--section-y:var(--b21-sec)}
.b21-play .text-shadow-none,.b21-play .chero-t h1{text-shadow:none}
.b21-play .chero{border-bottom:0}
.b21-play #games{position:relative;padding-top:var(--b21-sec)}
.b21-play #games .inner{position:relative;z-index:3;padding-top:0}
.b21-play #games .label{margin-bottom:var(--b21-hero-gap)}
@media (max-width:1023px){.b21-play .og-row:first-child{padding-top:0}}
/* Hero: the art is the hero image on phones and tablets. Full bleed, text pinned to the foot over the guide scrim (4.9). */
@media (max-width:1023px){
  .b21-play .chero{display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(620px,170vw,780px);--artH:auto}
  .b21-play .chero.is-club{--artH:auto}
  .b21-play .chero-pic{position:absolute;inset:0;z-index:0}
  .b21-play .chero-pic img{height:100%;width:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 0}
  .b21-play .chero-pic::before{background:none}
  .b21-play .chero-pic::after{height:92%;background:linear-gradient(to top,#0A0A0A 0%,rgba(10,10,10,.65) 45%,rgba(10,10,10,0) 100%)}
  .b21-play .chero-t{margin-top:0;padding-bottom:var(--b21-band-gap)}
}
.b21-play .chero-t{gap:0}
.b21-play .chero-t .tagnew{margin-bottom:var(--b21-hero-gap)}
.b21-play .chero-t h1{margin-bottom:var(--b21-hero-gap)}
.b21-play .chero-t .ctx{margin-bottom:var(--b21-hero-gap)}
.b21-play .chero-t .lede{margin-bottom:var(--b21-act-gap)}
.b21-play .chero-t .btn{margin:0 0 var(--b21-hero-gap)}
.b21-play .chero-t .elig{margin:0}
.b21-play .clubs .ca{font-family:var(--font-fact);font-size:16px;letter-spacing:var(--track-meta,.06em)}
.b21-play .joinx .inner{padding-top:var(--b21-sec);padding-bottom:var(--b21-sec)}
.b21-play .dark{padding-bottom:var(--b21-sec)}
.b21-play .disp{font-stretch:62.5%;font-variation-settings:"wdth" 62.5}
.b21-play .chero-t .tagnew{background:var(--accent-ember);color:var(--xf-black,#0A0A0A);border-color:var(--xf-hair,rgba(255,255,255,.12))}
.b21-play #games .label{color:var(--accent-ember)}
.b21-play .xff{border-top:1px solid var(--xff-hair)}

@media (prefers-reduced-motion:reduce){.b21 *{scroll-behavior:auto}}