/* ---- 00-tokens.css ---- */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wdth,wght@62..125,400..900&family=Chivo+Mono:wght@400;500;700&display=swap");

/* =====================================================================
   IGN Academy — rehearsal redesign, "Hardwood"
   00-tokens.css: the @import (must stay the first rule of /rd/rd.css),
   the design tokens (DESIGN.md section 2), and the base every page gets:
   body type, focus ring, the one-word headline highlight, the three
   utilities for new markup, reduced motion.
   Never add a token anywhere else.
   ===================================================================== */

:root{
  /* ---- brand ---- */
  --rd-orange:#FF6B2C;
  --rd-orange-press:#E8551A;      /* :active on orange slabs (ink on it = 5.3:1) */
  --rd-ink:#0E0E10;
  --rd-white:#FFFFFF;

  /* ---- surfaces ---- */
  --rd-maple:#E9CDA0;             /* the floor; also body background-color (smoke test reads it) */
  --rd-maple-deep:#DDBD8A;        /* board seams / pressed floor rows */
  --rd-maple-flat:rgba(236,212,172,.94); /* optional flat plate under dense copy on the floor */
  --rd-paper:#FFFCF5;             /* tickets, sheets, chips for the logo */
  --rd-paper-2:#F6EFE2;           /* sunken paper: table zebra, disabled, member note */
  --rd-field:#FFFFFF;             /* inputs and selectable cells on paper */
  --rd-black:var(--rd-ink);       /* out of bounds */

  /* ---- lines ---- */
  --rd-line:#FFFDF6;              /* painted court line (white) */
  --rd-lw:3px;                    /* painted line width (4px from 960px up) */
  --rd-rule:#DDD3C2;              /* hairline on paper (decorative only) */
  --rd-rule-strong:#B9AF9E;       /* perforation, dotted leaders */
  --rd-field-border:#8E8576;      /* input boundary, 3.6:1 on white */
  --rd-on-dark-rule:rgba(255,255,255,.24);

  /* ---- text ---- */
  --rd-ink-2:#4B4032;             /* secondary on maple (6.6:1) and paper (9.9:1) */
  --rd-ink-3:#6A6052;             /* tertiary / placeholder — PAPER OR WHITE ONLY (6.0:1); never on maple */
  --rd-chalk:#C9C2B6;             /* secondary on black (10.8:1) */
  --rd-chalk-2:#8E887E;           /* tertiary on black (5.5:1) */

  /* ---- states ---- */
  --rd-ok:#177245;      --rd-ok-bg:#E6F4EA;   --rd-ok-line:#1E8449;
  --rd-warn:#8F3208;    --rd-warn-bg:#FFF1E6; --rd-warn-line:#FF6B2C;
  --rd-err:#B3261E;     --rd-err-bg:#FDECEA;
  --rd-hatch:repeating-linear-gradient(-45deg,#EFE9DD 0 6px,#E4DCCD 6px 8px); /* booked / disabled */
  --rd-hatch-ink:#5E564B;         /* text on hatch (6.0:1) */
  --rd-ring:var(--rd-ink);        /* focus ring colour on light grounds; dark grounds re-set it to orange */

  /* ---- type families ---- */
  --rd-f-display:'Anton','Impact','Haettenschweiler','Arial Narrow Bold',sans-serif;
  --rd-f-text:'Archivo','Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --rd-f-mono:'Chivo Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* ---- type scale ---- */
  --rd-fs-900:clamp(64px,11vw,150px);   /* event title, headliner offering (LEAGUES / CAMPS) */
  --rd-fs-800:clamp(54px,7.4vw,104px);  /* h1 of an interior page */
  --rd-fs-700:clamp(42px,5.2vw,76px);   /* h2 section heading */
  --rd-fs-600:clamp(34px,3.7vw,54px);   /* offering name, big stat value */
  --rd-fs-500:clamp(25px,2.2vw,30px);   /* step title, sheet title, table name */
  --rd-fs-400:19px;                     /* small Anton: table heads, coach names in grids */
  --rd-fs-lede:clamp(19px,1.5vw,22px);  /* lede on the floor */
  --rd-fs-body:17px;                    /* body; never below 16px inside forms */
  --rd-fs-small:15px;                   /* help, captions */
  --rd-fs-label:11px;                   /* "paint" caps label (12px from 960px up) */
  --rd-fs-btn:14px;                     /* button label */
  --rd-lh-display:.9;                   /* Anton stacks */
  --rd-lh-body:1.5;

  /* ---- spacing (4px base) ---- */
  --rd-s-1:4px;  --rd-s-2:8px;  --rd-s-3:12px; --rd-s-4:16px; --rd-s-5:20px; --rd-s-6:24px;
  --rd-s-7:32px; --rd-s-8:40px; --rd-s-9:56px; --rd-s-10:72px; --rd-s-11:96px; --rd-s-12:128px;
  --rd-gut:clamp(20px,2.8vw,40px);      /* page gutter */
  --rd-max:1360px;                      /* the floor is never wider than this */
  --rd-sheet:860px;                     /* max width of a form ticket */
  --rd-nav-h:60px;                      /* 68px from 960px up */
  --rd-sec-y:clamp(40px,6vw,88px);      /* vertical padding of a floor section */
  --rd-tap:48px;                        /* minimum tap target inside forms (44px elsewhere) */
  --rd-strip-h:0px;                     /* height of a bar the host fixes to the bottom of the screen (the rehearsal
                                           strip). js/00-boot.js measures it; 0 on the real site. Anything fixed or
                                           docked to the bottom edge adds it so nothing hides behind that bar. */

  /* ---- radii and shadows: there are none ---- */
  --rd-r:0;                             /* every box is square */
  --rd-r-round:50%;                     /* ONLY: player tokens, radio dots, ticket notches */
  --rd-shadow:none;                     /* no drop shadows anywhere, including offset "brutalist" ones */

  /* ---- z-index ---- */
  --rd-z-sheen:-1; --rd-z-floor:0; --rd-z-content:1; --rd-z-sticky:30;
  --rd-z-nav:100;  --rd-z-menu:110; --rd-z-modal:200; --rd-z-toast:300;
  /* the purple REHEARSAL strip is 99999 and is never touched */

  /* ---- the painted baseline of a full-width black block ----
     Below 1400px the floor runs edge to edge and a baseline is a plain border. From 1400px the black aprons
     appear, and a baseline stops at the outside of the sidelines (a painted corner, not a T through the apron).
     Use:  border-top:var(--rd-lw) solid var(--rd-line); border-image:var(--rd-baseline);  */
  --rd-baseline:none;

  /* ---- motion ---- */
  --rd-t-press:90ms; --rd-t-hover:160ms; --rd-t-wipe:280ms; --rd-t-panel:200ms; --rd-t-rule:600ms;
  --rd-ease-out:cubic-bezier(.2,.7,.2,1);
  --rd-ease-inout:cubic-bezier(.65,0,.35,1);
}
@media (min-width:960px){ :root{ --rd-lw:4px; --rd-nav-h:68px; --rd-fs-label:12px } }
@media (min-width:1400px){
  :root{
    --rd-baseline:linear-gradient(90deg,
      transparent calc(50% - var(--rd-max)/2 - 4px),
      var(--rd-line) calc(50% - var(--rd-max)/2 - 4px), var(--rd-line) calc(50% + var(--rd-max)/2 + 4px),
      transparent calc(50% + var(--rd-max)/2 + 4px)) 1 0;
  }
}


/* =====================================================================
   Base
   ===================================================================== */

html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-padding-top:calc(var(--rd-nav-h) + 12px);
  /* html never gets a background: body's has to propagate to the viewport so the
     varnish sheen (z-index:-1) can sit above the boards (DESIGN.md 4.1) */
}

body{
  font-family:var(--rd-f-text);
  font-size:var(--rd-fs-body);
  line-height:var(--rd-lh-body);
  font-weight:450;
  font-stretch:100%;
  font-optical-sizing:auto;
  color:var(--rd-ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---- focus: one ring everywhere; dark grounds turn it orange ---- */
:focus-visible{outline:3px solid var(--rd-ring);outline-offset:3px}
.nav,.rd-band,.page-hero,.hero,.band,.email-capture,footer,.foot,.modal-overlay{--rd-ring:var(--rd-orange)}
/* paper lying on a dark ground goes back to the ink ring */
.rd-sheet,.rd-ticket,.rd-slip,.modal-overlay > .modal{--rd-ring:var(--rd-ink)}

/* ---- the one highlighted word in a headline ----
   The rule (Oct 2026): a highlighted word is PLAIN by default.
     - on the floor and on paper: ink type, with a short orange bar under the start of the word;
     - out of bounds (black): orange type.
   The ink-on-orange slab is a rare event, opt-in only with class "rd-slab", and is used in exactly three places
   on the whole site: the home page's "Our SPONSORS", About's "The GYM" and Leagues' "Pick your SEASON".
   Do not add a fourth.
   :not(.rd-plain) is only there to out-rank the pages' own ".hero h1 .o" rules without !important;
   put class="rd-plain" on a span to opt out of the bar as well. */
:root{
  /* the bar: .8em long, .09em thick, its top just under the baseline (Anton's content box ends .33em below it) */
  --rd-hl-bar:linear-gradient(var(--rd-orange),var(--rd-orange)) 0 calc(100% - .16em) / .8em .09em no-repeat;
}
:is(h1,h2,h3,h4,.display) :is(.o,.pp,.orange):not(.rd-plain){
  color:var(--rd-ink);
  background:var(--rd-hl-bar);
  padding:0;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
:is(.nav,.rd-band,.rd-hero,.page-hero,.hero,.band,.email-capture,footer,.foot) :is(h1,h2,h3,h4,.display) :is(.o,.pp,.orange):not(.rd-plain){
  color:var(--rd-orange);
  background:none;
  padding:0;
}
/* a paper sheet lying on a black band is a light ground again */
:is(.nav,.rd-band,.rd-hero,.page-hero,.hero,.band,.email-capture,footer,.foot) :is(.rd-sheet,.rd-ticket,.rd-slip) :is(h1,h2,h3,h4,.display) :is(.o,.pp,.orange):not(.rd-plain){
  color:var(--rd-ink);
  background:var(--rd-hl-bar);
  padding:0;
}
/* the three kept moments: ink on an orange slab that hugs the caps (Anton at line-height .86 has a line box equal to
   its cap height). Scoped with an id so no page rule can turn it back into plain type, or a plain word into a slab. */
html:not(#rd) :is(h1,h2,h3,h4,.display) .rd-slab{
  display:inline-block;line-height:.86;padding:.055em .1em .04em;margin:0 -.02em;
  background:var(--rd-orange);color:var(--rd-ink);
}


/* =====================================================================
   Utilities for new markup (DESIGN.md 5): .rd-wrap, .rd-paint, .rd-fact
   ===================================================================== */

/* floor container */
.rd-wrap{max-width:var(--rd-max);margin-inline:auto;padding-inline:var(--rd-gut)}

/* paint — the lettering painted out of bounds: kickers, cell labels, legend heads */
.rd-paint{
  font-family:var(--rd-f-text);
  font-weight:800;
  font-size:var(--rd-fs-label);
  line-height:1.3;
  font-stretch:125%;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* fact tag — mono, joined with " · " */
.rd-fact{
  font-family:var(--rd-f-mono);
  font-weight:500;
  font-size:13px;
  line-height:1.4;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--rd-ink);
}
:is(.rd-band,.rd-hero,.page-hero,.hero,.band,.email-capture,footer,.foot) .rd-fact{color:var(--rd-chalk)}
:is(.rd-band,.rd-hero,.page-hero,.hero,.band,.email-capture,footer,.foot) :is(.rd-sheet,.rd-ticket,.rd-slip) .rd-fact{color:var(--rd-ink)}


/* =====================================================================
   Reduced motion (DESIGN.md 4.5, 8.3). The court engine draws one finished
   still per zone and never asks for a frame; everything else stops here.
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:.01ms !important;
    transition-delay:0s !important;
    animation:none !important;
  }
}

/* ---- 10-floor.css ---- */
/* =====================================================================
   10-floor.css — the gym floor (DESIGN.md section 4)

   Back to front:
     A  boards   body background: flat maple + one repeating tile (--rd-boards, made once by js/00-boot.js)
     B  aprons   body background: black out of bounds + a white sideline outside the 1360px floor
     C  sheen    body::before, fixed, one soft diagonal highlight
     D  zones    .rd-floor blocks: the court markings, the orange lane and the play, drawn on ONE
                 <canvas id="rd-court"> that lives inside whichever zone is on screen

   Content sits on A–C only: plain boards, no markings. Markings and the play exist only inside zones,
   and a zone holds no copy. The caption that names the play is a black rail on the zone's top edge
   (out of bounds carries the words), so no court line can ever run under a word.
   ===================================================================== */


/* ---------- A + B: boards, aprons, sidelines ---------- */
body{
  background-color:var(--rd-maple);
  background-image:var(--rd-boards, none);
  background-size:720px 960px;
  background-repeat:repeat;
  background-position:50% 0;
  background-attachment:scroll;
}
/* The aprons start at 1400px (20px a side). Between 1360 and 1400 the floor simply runs edge to edge, so a
   screen that is a few pixels wider than the floor never shows a sliver of sideline hugging its edge.
   js/20-court.js and --rd-baseline (00-tokens.css) use the same 1400px threshold. */
@media (min-width:1400px){
  body{
    background-image:
      linear-gradient(90deg,
        var(--rd-ink) 0, var(--rd-ink) calc(50% - var(--rd-max)/2 - 4px),
        var(--rd-line) calc(50% - var(--rd-max)/2 - 4px), var(--rd-line) calc(50% - var(--rd-max)/2),
        transparent calc(50% - var(--rd-max)/2), transparent calc(50% + var(--rd-max)/2),
        var(--rd-line) calc(50% + var(--rd-max)/2), var(--rd-line) calc(50% + var(--rd-max)/2 + 4px),
        var(--rd-ink) calc(50% + var(--rd-max)/2 + 4px), var(--rd-ink) 100%),
      var(--rd-boards, none);
    /* the apron strip repeats down the page (not "100% 100%"): a page shorter than the screen would
       otherwise lose its aprons below the last block */
    background-size:100% 120px, 720px 960px;
    background-repeat:repeat-y, repeat;
    background-position:0 0, 50% 0;
    background-attachment:scroll, scroll;
  }
}

/* the old floating-basketball background is switched off everywhere */
.court-bg,
.court-bg .ball{display:none}


/* ---------- C: the varnish sheen ---------- */
body::before{
  content:"";
  position:fixed;z-index:var(--rd-z-sheen);
  left:0;right:0;top:-60vh;height:220vh;
  pointer-events:none;
  background:linear-gradient(100deg,rgba(255,248,230,0) 38%,rgba(255,248,230,.18) 50%,rgba(255,248,230,0) 62%);
  transform:translate3d(0,-20vh,0);
}
/* marketing pages only: the highlight slides across the boards as the visitor scrolls.
   No script, no scroll listener; on working pages it is a still highlight. */
@supports (animation-timeline:scroll()){
  body.rd-mkt::before{animation:rd-sheen linear both;animation-timeline:scroll(root)}
  @keyframes rd-sheen{from{transform:translate3d(0,-45vh,0)}to{transform:translate3d(0,45vh,0)}}
}
@media (prefers-reduced-motion:reduce){ body.rd-mkt::before{animation:none} }
/* varnish is on the boards, not on the black paint out of bounds */
@media (min-width:1400px){
  body::before{left:calc(50% - var(--rd-max)/2);right:calc(50% - var(--rd-max)/2)}
}


/* ---------- D: open-floor zones ----------
   <div class="rd-floor" data-rd-floor="near|far|mid|plan" data-rd-play="cycle|give-go|pick-roll|backdoor|drive-kick|none"
        data-rd-feet="50" data-rd-x="0" aria-hidden="true"> [optional .rd-playcard] </div>

   --rd-ft (px per court foot, a plain number) is written on each zone by js/20-court.js; use it for the height:
     min-height:calc(var(--rd-ft,10.5) * 30px)
   The baseline of a zone is the CSS border of the black band next to it, never drawn here. */
.rd-floor{
  --rd-cap-h:36px;                 /* height of the caption rail, its baseline included */
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:block;
  box-sizing:border-box;
  /* centred between the sidelines on a wide screen. Written without auto margins on purpose:
     an auto-margined grid or flex item shrinks to its content, and a zone has none. */
  max-width:var(--rd-max);
  margin-inline:max(0px, calc((100% - var(--rd-max)) / 2));
  min-height:calc(var(--rd-ft,10.5) * 24px);
  background-color:transparent;    /* the page's own boards show through */
  background-image:var(--rd-still, none);                /* a still of the zone is parked here when the canvas leaves */
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:0 0;
  pointer-events:none;             /* nothing in a zone is ever a control */
  -webkit-user-select:none;user-select:none;
}
@media (min-width:960px){ .rd-floor{--rd-cap-h:42px} }

/* The caption rail takes --rd-cap-h off the top of the zone and the court starts under it
   (add "+ var(--rd-cap-h)" to a zone's height to give the court every foot back). */
.rd-floor:has(> .rd-playcard){
  padding-top:var(--rd-cap-h);
}

/* the one canvas: created by js/20-court.js, moved into whichever zone is on screen */
#rd-court{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  pointer-events:none;
  z-index:var(--rd-z-floor);
}

/* A zone that has been placed inside a painted block (the engine flags it) lays its own boards,
   lined up with the page's boards through --rd-bx / --rd-by. */
.rd-floor--own{
  background-color:var(--rd-maple);
  background-image:var(--rd-still, none), var(--rd-boards, none);
  background-size:100% 100%, 720px 960px;
  background-repeat:no-repeat, repeat;
  background-position:0 0, var(--rd-bx, 50%) var(--rd-by, 0);
}


/* An opaque zone (data-rd-solid) and the footer under it sit above anything sticky, so a sticky rail that
   shares their box slides under the far end of the floor instead of riding over it. */
.rd-floor[data-rd-solid],
.rd-floor[data-rd-solid] + footer,
.rd-floor[data-rd-solid] + .foot{z-index:calc(var(--rd-z-sticky) + 1)}
/* an opaque zone would cut the varnish highlight off in a straight line, so those pages go without it */
body:has(.rd-floor[data-rd-solid])::before{display:none}


/* ---------- the auto closing zone on working pages (inserted by js/10-layer.js before the footer) ----------
   The far end of the floor: it paints its lines in once, is turned into a still, and stops for good. */
/* .rd-floor--close is the same far end for a replaced marketing page to write itself:
     <div class="rd-floor rd-floor--close" data-rd-floor="far" data-rd-feet="fit" data-rd-play="cycle|none" aria-hidden="true"></div> */
.rd-floor--auto,
.rd-floor--close{
  height:clamp(200px,52vw,380px);  /* 26.4 court feet: the lane, the free-throw circle and the whole arc. On a phone the court is as wide as the screen. */
  min-height:0;
  margin-top:clamp(28px,5vw,64px);
}
/* straight after a black band there is already a painted line above it: no extra gap */
:is(.rd-band,.rd-board,.band,.email-capture,.page-hero) + :is(.rd-floor--auto,.rd-floor--close){margin-top:0}
/* the same when the band is the last block inside <main> and the zone comes straight after </main> */
main:has(> :is(.rd-band,.rd-board,.band,.email-capture):last-child) + :is(.rd-floor--auto,.rd-floor--close){margin-top:0}
/* the footer is the far baseline: it sits directly on the zone, on a painted white line */
.rd-floor + footer,
.rd-floor + .foot{
  margin-top:0;
  border-top:var(--rd-lw) solid var(--rd-line);
  border-image:var(--rd-baseline);
}


/* ---------- the caption: "On the board — 01 Give & Go" ----------
   <div class="rd-playcard" data-rd-keepout>
     <span class="rd-paint">On the board</span>
     <b><i data-rd-play-no>01</i><span data-rd-play-name>Give &amp; Go</span></b>
     <ul class="rd-legend">…Offense / Defense / Cut / Pass…</ul>      (shown from 960px)
   </div>
   A black rail across the top of the zone. Its bottom border is the painted line the court starts under. */
.rd-playcard{
  --rd-ring:var(--rd-orange);
  position:absolute;z-index:var(--rd-z-content);
  left:0;right:0;top:0;
  box-sizing:border-box;
  height:var(--rd-cap-h);
  display:flex;align-items:center;gap:12px;
  padding:1px clamp(14px,2vw,24px) 0;
  background-color:var(--rd-ink);
  color:var(--rd-white);
  border-bottom:var(--rd-lw) solid var(--rd-line);
  white-space:nowrap;
  overflow:hidden;
}
.rd-playcard > .rd-paint,
.rd-playcard > span:first-child{
  display:flex;align-items:center;gap:9px;
  flex:none;
  color:var(--rd-chalk);
  font-size:11px;
  letter-spacing:.14em;
}
/* the marker every paint label gets out of bounds: an 8px orange square */
.rd-playcard > .rd-paint::before,
.rd-playcard > span:first-child::before{
  content:"";flex:none;
  width:8px;height:8px;
  background:var(--rd-orange);
}
.rd-playcard > b{
  display:flex;align-items:baseline;gap:.4em;
  flex:1 1 auto;min-width:0;overflow:hidden;
  font-family:var(--rd-f-display);
  font-weight:400;
  font-size:20px;
  line-height:1;
  letter-spacing:.02em;
  text-transform:uppercase;
  padding-top:2px;                  /* Anton sits high in its box */
  color:var(--rd-white);
}
.rd-playcard > b i,
.rd-playcard [data-rd-play-no]{
  font-style:normal;
  color:var(--rd-orange);
  font-variant-numeric:tabular-nums;
}
/* a hairline that runs from the name to the end of the rail (or to the legend) */
.rd-playcard > b::after{
  content:"";
  align-self:center;
  width:100vw;height:1px;
  margin-left:.5em;
  background:var(--rd-on-dark-rule);
}

/* phones and tablets: the rail is as wide as the screen, so its square and its hairline stand on the page gutter,
   in line with the hero copy directly above it (the court under the rail still runs edge to edge) */
@media (max-width:959.98px){
  .rd-playcard{padding-inline:var(--rd-gut)}
}

.rd-legend{display:none;list-style:none;margin:0;padding:0}
@media (min-width:960px){
  .rd-playcard > .rd-paint,
  .rd-playcard > span:first-child{font-size:11.5px;letter-spacing:.16em}
  .rd-playcard > b{font-size:23px}
  .rd-legend{
    display:flex;align-items:center;gap:clamp(12px,1.5vw,22px);
    flex:none;
    font-family:var(--rd-f-text);
    font-weight:800;font-stretch:118%;
    font-size:11px;line-height:1;
    letter-spacing:.12em;text-transform:uppercase;
    color:var(--rd-chalk);
  }
  .rd-legend li{display:flex;align-items:center;gap:8px}
  .rd-legend svg{flex:none;display:block;color:var(--rd-white)}
  /* the legend glyphs are drawn in ink in the reference markup; on the rail they have to be white */
  .rd-legend svg [stroke]:not([stroke="none"]){stroke:currentColor}
  .rd-legend svg [fill]:not([fill="none"]){fill:currentColor}
}
/* a narrow zone (an interior hero column) has no room for a legend: the engine flags it */
.rd-floor[data-rd-narrow] .rd-legend{display:none}
@media (max-width:359px){
  .rd-playcard{gap:9px}
  .rd-playcard > .rd-paint,
  .rd-playcard > span:first-child{letter-spacing:.08em;font-stretch:112%}
  .rd-playcard > b{font-size:18px}
}


/* ---------- the plan zone (About): three full courts, top-down ----------
   The engine fits the three courts, standing together 9 ft apart, inside the zone's CONTENT box and
   centres the group, so padding reserves room for the labels and the dimension line. It writes, on the zone:
     --rd-plan-x   left edge of court 1 (px from the zone's left padding edge)
     --rd-plan-y   top edge of the courts
     --rd-plan-w   width of one court      --rd-plan-h   height of one court
     --rd-plan-step  distance from one court's left edge to the next */
.rd-floor[data-rd-floor="plan"]{
  min-height:clamp(220px,34vw,460px);
  padding:clamp(34px,5vw,56px) clamp(16px,4vw,48px) clamp(40px,5.5vw,64px);
}


/* ---------- the black band (DESIGN.md 5.5): the generic out-of-bounds block ---------- */
.rd-band{
  --rd-ring:var(--rd-orange);
  position:relative;
  background-color:var(--rd-ink);
  color:var(--rd-white);
  border-top:var(--rd-lw) solid var(--rd-line);
  border-bottom:var(--rd-lw) solid var(--rd-line);
  border-image:var(--rd-baseline);   /* from 1400px the painted lines stop at the sidelines (00-tokens.css) */
  padding:clamp(32px,5vw,64px) 0;
}
/* plain paragraphs only: a kicker, a fact tag or any other classed <p> keeps its own size and colour */
.rd-band p:not([class]){color:var(--rd-chalk);font-size:var(--rd-fs-body)}
.rd-band .rd-lede{color:var(--rd-chalk)}
/* omit the painted line on a side that touches another black block */
.rd-band + .rd-band,
.rd-band--notop{border-top:0}
.rd-band--nobottom{border-bottom:0}

/* ---- 20-nav-footer.css ---- */
/* =====================================================================
   20-nav-footer.css — DESIGN.md 5.1 (nav, mobile menu, folio strip) and
   5.17 (footer, the far baseline), against the real markup.

   Scopes used here (DESIGN.md 6.1):
     MAIN  body:has(> nav.nav)                       every page built on style.css
     SIGN  body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))
           = RENT + REG + DONE + HUB, the pages whose footer is <div class="foot">.
           :where() keeps these rules at one class of weight so 55-rent.css and
           60-signup.css can override them without a fight.
   ===================================================================== */

html:has(body > nav.nav){scroll-padding-top:calc(var(--rd-nav-h) + 12px)}

/* ---------------------------------------------------------------------
   5.1  NAV BAR — the top of the out-of-bounds
   --------------------------------------------------------------------- */
body:has(> nav.nav) > nav.nav{
  position:sticky;top:0;z-index:var(--rd-z-nav);height:var(--rd-nav-h);
  background:var(--rd-ink);border-bottom:1px solid var(--rd-on-dark-rule);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  --rd-ring:var(--rd-orange);
}
body:has(> nav.nav) .nav-inner{
  display:flex;align-items:stretch;gap:clamp(12px,1.6vw,24px);
  height:100%;max-width:var(--rd-max);margin:0 auto;padding:0 var(--rd-gut);
}

/* logo chip: the real logo on a paper placard, flush with the bar top and bottom */
body:has(> nav.nav) .nav-logo{
  flex:none;display:flex;align-items:center;gap:10px;height:100%;padding:0 14px 0 12px;
  background:var(--rd-paper);color:var(--rd-ink);
}
body:has(> nav.nav) .nav-logo img{height:40px;width:auto}
body:has(> nav.nav) .nav-logo .wordmark{
  font:400 21px/1 var(--rd-f-display);letter-spacing:.06em;text-transform:uppercase;
  padding-top:3px;color:var(--rd-ink);
}
body:has(> nav.nav) .nav-logo:focus-visible{outline-offset:-5px;outline-color:var(--rd-ink)}

/* ---- burger: three painted bars; the page's "☰" glyph is hidden ---- */
body:has(> nav.nav) .nav-burger{
  display:none;position:relative;flex:none;align-self:center;
  width:46px;height:46px;margin:0 -10px 0 auto;padding:0;border:0;border-radius:0;
  font-size:0;line-height:0;color:transparent;cursor:pointer;
  background:linear-gradient(var(--rd-white),var(--rd-white)) 10px 21px / 26px 3px no-repeat;
  transition:background-size var(--rd-t-panel) var(--rd-ease-out);
  -webkit-tap-highlight-color:transparent;
}
body:has(> nav.nav) .nav-burger::before,
body:has(> nav.nav) .nav-burger::after{
  content:"";position:absolute;left:10px;width:26px;height:3px;background:var(--rd-white);
  transition:transform var(--rd-t-panel) var(--rd-ease-out);
}
body:has(> nav.nav) .nav-burger::before{top:12px}
body:has(> nav.nav) .nav-burger::after{top:30px}
body:has(> nav.nav) .nav-inner:has(.nav-links.open) .nav-burger{background-size:0 3px}
body:has(> nav.nav) .nav-inner:has(.nav-links.open) .nav-burger::before{transform:translateY(9px) rotate(45deg)}
body:has(> nav.nav) .nav-inner:has(.nav-links.open) .nav-burger::after{transform:translateY(-9px) rotate(-45deg)}

/* ---- links: one label style for everything in the bar (paint caps) ---- */
body:has(> nav.nav) .nav-links a{
  font:800 12px/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rd-white);white-space:nowrap;
}
/* ONE button in the bar: Book Now. A page that still marks Contact as its button (/groups, /sponsor-apply, until
   js/10-layer.js moves the class) shows it as a plain link, never as a second button. */
body:has(> nav.nav) .nav-links a.nav-cta:not([href*="book"]){background:none;border-radius:0;color:var(--rd-white) !important}

/* ---------------- desktop bar (960px and up) ---------------- */
@media (min-width:960px){
  body:has(> nav.nav) .nav-logo img{height:44px}
  body:has(> nav.nav) .nav-burger{display:none}
  body:has(> nav.nav) .nav-links{
    display:flex;flex-direction:row;align-items:center;gap:clamp(11px,1.3vw,17px);
    position:static;margin:0 0 0 auto;padding:0;background:none;border:0;box-shadow:none;
    visibility:visible;opacity:1;pointer-events:auto;transform:none;overflow:visible;
  }
  /* 960–1279: the same caps, set a little narrower so nine items fit */
  body:has(> nav.nav) .nav-links a{font-size:11px;font-stretch:100%;letter-spacing:.08em}
  /* every bar now carries ten items (eight links, Book Now, Sign in): set narrower still so they share one line from 960px */
  body:has(> nav.nav) .nav-links:has(> a:nth-child(10)) a{font-stretch:90%;letter-spacing:.06em}
  body:has(> nav.nav) .nav-links:has(> a:nth-child(10)){gap:clamp(9px,1.1vw,14px)}
  body:has(> nav.nav) .nav-links a:not(.nav-cta[href*="book"]):not(#navFamily){
    position:relative;display:block;padding:11px 0 10px;transition:none;
  }
  body:has(> nav.nav) .nav-links a:not(.nav-cta[href*="book"]):not(#navFamily):hover,
  body:has(> nav.nav) .nav-links a.active:not(.nav-cta[href*="book"]):not(#navFamily){color:var(--rd-white)}
  /* the 3px orange bar under the label: wipes in on hover, stays on the current page */
  body:has(> nav.nav) .nav-links a:not(.nav-cta[href*="book"]):not(#navFamily)::after{
    content:"";position:absolute;left:0;right:.08em;bottom:0;height:3px;background:var(--rd-orange);
    transform:scaleX(0);transform-origin:left;transition:transform var(--rd-t-hover) var(--rd-ease-out);
  }
  body:has(> nav.nav) .nav-links a:not(.nav-cta[href*="book"]):not(#navFamily):hover::after,
  body:has(> nav.nav) .nav-links a.active:not(.nav-cta[href*="book"]):not(#navFamily)::after{transform:scaleX(1)}

  /* CTA: orange slab, ink caps */
  body:has(> nav.nav) .nav-links .nav-cta[href*="book"]{
    display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 14px;margin-left:2px;
    background:var(--rd-orange);color:var(--rd-ink) !important;border-radius:0;
    transition:background-color var(--rd-t-hover);
  }
  body:has(> nav.nav) .nav-links .nav-cta[href*="book"]:hover{background:var(--rd-white)}
  body:has(> nav.nav) .nav-links .nav-cta[href*="book"]:active{background:var(--rd-orange-press)}

  /* Sign in / "Hi, Maria": same caps behind a hairline divider */
  /* a long first name ("Hi, Christopher") is cut with an ellipsis instead of pushing the bar off screen */
  body:has(> nav.nav) .nav-links{min-width:0}
  body:has(> nav.nav) .nav-links a:not(#navFamily){flex:none}
  body:has(> nav.nav) .nav-links #navFamily{
    position:relative;display:block;flex:0 1 auto;min-width:0;max-width:15em;height:42px;line-height:42px;
    overflow:hidden;text-overflow:ellipsis;
    padding-left:clamp(11px,1.3vw,17px);transition:color var(--rd-t-hover);
  }
  body:has(> nav.nav) .nav-links #navFamily::before{
    content:"";position:absolute;left:0;top:50%;width:1px;height:22px;margin-top:-11px;background:var(--rd-on-dark-rule);
  }
  body:has(> nav.nav) .nav-links #navFamily:hover{color:var(--rd-orange)}
}
@media (min-width:1280px){
  body:has(> nav.nav) .nav-links{gap:clamp(16px,1.4vw,21px)}
  body:has(> nav.nav) .nav-links a{font-size:12px;font-stretch:122%;letter-spacing:.14em}
  body:has(> nav.nav) .nav-links a:not(.nav-cta[href*="book"]):not(#navFamily)::after{right:.14em}
  body:has(> nav.nav) .nav-links .nav-cta[href*="book"]{padding:0 20px;margin-left:4px}
  body:has(> nav.nav) .nav-links #navFamily{padding-left:clamp(16px,1.4vw,21px)}
  body:has(> nav.nav) .nav-links:has(> a:nth-child(10)){gap:clamp(13px,1.2vw,18px)}
  body:has(> nav.nav) .nav-links:has(> a:nth-child(10)) a{font-size:11.5px;font-stretch:108%;letter-spacing:.11em}
  body:has(> nav.nav) .nav-links:has(> a:nth-child(10)) a:not(.nav-cta[href*="book"]):not(#navFamily)::after{right:.11em}
  body:has(> nav.nav) .nav-links:has(> a:nth-child(10)) #navFamily{padding-left:clamp(13px,1.2vw,18px)}
}

/* ---------------- mobile menu (below 960px): a numbered black sheet ---------------- */
@media (max-width:959.98px){
  html:has(body > nav.nav .nav-links.open){overflow:hidden}
  body:has(> nav.nav) .nav-burger{display:block}
  body:has(> nav.nav) .nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:fixed;inset:var(--rd-nav-h) 0 var(--rd-strip-h,0px) 0;z-index:var(--rd-z-menu);   /* stops above a bar the host fixes to the bottom edge */
    margin:0;padding:10px var(--rd-gut) calc(28px + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;
    background:var(--rd-ink);border:0;border-top:1px solid var(--rd-on-dark-rule);box-shadow:none;
    counter-reset:rd-nav;
    visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-10px);
    transition:opacity var(--rd-t-panel) var(--rd-ease-out),transform var(--rd-t-panel) var(--rd-ease-out),visibility 0s var(--rd-t-panel);
  }
  body:has(> nav.nav) .nav-links.open{
    display:flex;visibility:visible;opacity:1;pointer-events:auto;transform:none;
    transition:opacity var(--rd-t-panel) var(--rd-ease-out),transform var(--rd-t-panel) var(--rd-ease-out);
  }
  body:has(> nav.nav) .nav-links a:not(.nav-cta[href*="book"]):not(#navFamily){
    counter-increment:rd-nav;display:flex;align-items:baseline;gap:14px;padding:11px 0;
    font:400 38px/1.05 var(--rd-f-display);font-stretch:normal;letter-spacing:.01em;text-transform:uppercase;
    color:var(--rd-white);border-bottom:1px solid var(--rd-on-dark-rule);
  }
  body:has(> nav.nav) .nav-links a:not(.nav-cta[href*="book"]):not(#navFamily)::before{
    content:counter(rd-nav,decimal-leading-zero);flex:none;width:24px;
    font:800 11px/1 var(--rd-f-text);font-stretch:125%;letter-spacing:.14em;color:var(--rd-orange);
  }
  /* current page: an orange square at the end of its row (the label stays white) */
  body:has(> nav.nav) .nav-links a.active:not(.nav-cta[href*="book"]):not(#navFamily){color:var(--rd-white)}
  body:has(> nav.nav) .nav-links a.active:not(.nav-cta[href*="book"]):not(#navFamily)::after{
    content:"";flex:none;align-self:center;width:12px;height:12px;margin-left:auto;background:var(--rd-orange);
  }
  body:has(> nav.nav) .nav-links a:not(.nav-cta[href*="book"]):not(#navFamily):active{color:var(--rd-orange)}

  body:has(> nav.nav) .nav-links .nav-cta[href*="book"],
  body:has(> nav.nav) .nav-links #navFamily{
    display:flex;align-items:center;justify-content:center;flex:none;min-height:54px;padding:0 22px;border-radius:0;
    font:800 14px/1 var(--rd-f-text);font-stretch:116%;letter-spacing:.09em;text-transform:uppercase;
  }
  body:has(> nav.nav) .nav-links .nav-cta[href*="book"]{margin-top:22px;background:var(--rd-orange);color:var(--rd-ink) !important}
  body:has(> nav.nav) .nav-links .nav-cta[href*="book"]:active{background:var(--rd-orange-press)}
  body:has(> nav.nav) .nav-links #navFamily{margin-top:10px;border:2px solid rgba(255,255,255,.42);color:var(--rd-white)}
  body:has(> nav.nav) .nav-links #navFamily:active{background:var(--rd-white);color:var(--rd-ink)}
}
@media (max-width:379.98px){
  body:has(> nav.nav) .nav-logo{padding:0 10px 0 8px;gap:8px}
  body:has(> nav.nav) .nav-logo .wordmark{font-size:19px}
  body:has(> nav.nav) .nav-links a:not(.nav-cta[href*="book"]):not(#navFamily){font-size:34px}
}
/* short phones: tighten the rows so Sign in is reachable without scrolling */
@media (max-width:959.98px) and (max-height:700px){
  body:has(> nav.nav) .nav-links a:not(.nav-cta[href*="book"]):not(#navFamily){font-size:32px;padding:9px 0}
  body:has(> nav.nav) .nav-links .nav-cta[href*="book"]{margin-top:16px}
}

/* ---------------------------------------------------------------------
   5.1  FOLIO STRIP (marketing pages) — directly under the nav, part of the black
     <div class="rd-folio">
       <span>Conway, Arkansas</span>
       <a href="…" data-rd-upnext>I Got Next</a>      ← js/10-layer.js fills this from /events.json
     </div>
   --------------------------------------------------------------------- */
.rd-folio{
  display:flex;align-items:center;gap:14px;min-height:34px;
  padding:0 max(var(--rd-gut),calc((100% - var(--rd-max)) / 2 + var(--rd-gut)));
  background:var(--rd-ink);color:var(--rd-chalk);--rd-ring:var(--rd-orange);
  font:800 11px/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
.rd-folio::before{content:"";order:1;flex:1;min-width:16px;height:1px;background:var(--rd-on-dark-rule)}
.rd-folio > :first-child{order:0;flex:none}
.rd-folio > :last-child{order:2;flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.rd-folio a{display:inline-flex;align-items:center;min-height:34px;color:var(--rd-white);transition:color var(--rd-t-hover)}
.rd-folio a:hover{color:var(--rd-orange)}
@media (max-width:639.98px){
  .rd-folio{font-stretch:108%;letter-spacing:.11em}
  .rd-folio > :first-child:not(:last-child){display:none}
  .rd-folio::before{order:3}                 /* the link leads, the rule runs out to the right edge */
}

/* the narrowest phones: the whole "Up next" line fits instead of being cut mid-date */
@media (max-width:359.98px){
  .rd-folio{font-stretch:88%;letter-spacing:.04em;gap:8px}
  .rd-folio::before{min-width:6px}
}

/* ---------------------------------------------------------------------
   5.17  FOOTER — the far baseline (style.css markup)
   --------------------------------------------------------------------- */
body:has(> nav.nav) > footer{
  position:relative;z-index:var(--rd-z-content);overflow:hidden;container-type:inline-size;
  background:var(--rd-ink);color:var(--rd-white);
  border-top:var(--rd-lw) solid var(--rd-line);border-image:var(--rd-baseline);
  padding:0 0 calc(30px + var(--rd-strip-h,0px) + env(safe-area-inset-bottom,0px));   /* the end row clears a bar fixed to the bottom edge */
  --rd-ring:var(--rd-orange);
}
/* the lettering: one fitted Anton line, "I GOT" white and "NEXT." orange (a hard two-colour split) */
body:has(> nav.nav) > footer::before{
  content:"I GOT NEXT.";content:"I GOT NEXT." / "";
  display:block;box-sizing:border-box;max-width:var(--rd-max);margin:0 auto;padding:26px var(--rd-gut) 0;
  font:400 calc((min(100vw,var(--rd-max)) - 2 * var(--rd-gut)) / 4.09)/.86 var(--rd-f-display);
  font-size:calc((min(100cqw,var(--rd-max)) - 2 * var(--rd-gut)) / 4.09);   /* fitted to the footer itself where container units exist */
  letter-spacing:.004em;text-transform:uppercase;white-space:nowrap;position:relative;left:-.03em;
  background:linear-gradient(90deg,var(--rd-white) 0 48%,var(--rd-orange) 48%) content-box;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
body:has(> nav.nav) > footer > .container{max-width:var(--rd-max);padding:0 var(--rd-gut)}

body:has(> nav.nav) .footer-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px;margin-top:34px;justify-content:normal;
}
body:has(> nav.nav) .footer-brand{grid-column:1 / -1;max-width:none;text-align:left}
body:has(> nav.nav) .footer-grid > .footer-col:nth-child(2){grid-row:span 2}
/* logo on a plain paper rectangle — no circle, no ring */
body:has(> nav.nav) .footer-lockup{
  display:inline-flex;align-items:center;justify-content:flex-start;gap:10px;margin:0 0 16px;padding:8px 14px 8px 12px;
  background:var(--rd-paper);color:var(--rd-ink);
}
body:has(> nav.nav) .footer-lockup img{height:44px;width:auto}
body:has(> nav.nav) .footer-lockup .wordmark{
  font:400 22px/1 var(--rd-f-display);letter-spacing:.06em;text-transform:uppercase;padding-top:3px;color:var(--rd-ink);
}
body:has(> nav.nav) .footer-brand p{font:500 15.5px/1.5 var(--rd-f-text);color:var(--rd-chalk)}
body:has(> nav.nav) .footer-brand .footer-email{margin-top:6px}
body:has(> nav.nav) .footer-email a{
  display:inline-block;padding:6px 0;font-weight:500;color:var(--rd-white);overflow-wrap:anywhere;
  text-decoration:underline;text-decoration-color:var(--rd-orange);text-decoration-thickness:2px;text-underline-offset:4px;
  transition:color var(--rd-t-hover);
}
body:has(> nav.nav) .footer-email a:hover{color:var(--rd-orange)}
/* the tagline moves to the end row (below), so the brand block does not say it twice */
body:has(> nav.nav) .footer-brand .tagline{display:none}

body:has(> nav.nav) .footer-col h4{
  margin:0 0 6px;color:var(--rd-orange);
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
body:has(> nav.nav) .footer-col a{
  display:block;padding:10px 0;font:550 16px/1.5 var(--rd-f-text);color:#EDE8DF;transition:color var(--rd-t-hover);
}
body:has(> nav.nav) .footer-col a:hover{color:var(--rd-orange)}

/* end row: copyright left, the tagline in paint caps right; nothing comes after it */
body:has(> nav.nav) .footer-bottom{
  display:flex;flex-flow:row wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;
  margin-top:34px;padding-top:18px;border-top:1px solid var(--rd-on-dark-rule);
  font:500 13.5px/1.5 var(--rd-f-text);color:var(--rd-chalk);text-align:left;
}
body:has(> nav.nav) .footer-bottom span:last-child:not(:first-child){font-size:0;letter-spacing:0}
body:has(> nav.nav) .footer-bottom span:last-child:not(:first-child)::before{
  content:"Train. Compete. Dominate.";color:var(--rd-white);
  font:800 10.5px/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
/* phones, two columns: "Train & Rent" and "IGN" stack beside the long "Play" list. The IGN head is given exactly one
   link row (44px, the head standing at its foot), so its links land on the same rows as the Play links beside them */
@media (max-width:639.98px){
  body:has(> nav.nav) .footer-grid{row-gap:0}
  body:has(> nav.nav) .footer-brand{margin-bottom:30px}
  body:has(> nav.nav) .footer-grid > .footer-col:nth-child(4) h4{
    display:flex;align-items:flex-end;box-sizing:border-box;height:44px;margin:0;padding-bottom:6px;
  }
}
@media (min-width:640px){
  body:has(> nav.nav) .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  body:has(> nav.nav) .footer-grid > .footer-col:nth-child(2){grid-row:auto}
}
@media (min-width:960px){
  body:has(> nav.nav) > footer{padding-bottom:calc(36px + var(--rd-strip-h,0px) + env(safe-area-inset-bottom,0px))}
  body:has(> nav.nav) > footer::before{padding-top:38px}
  body:has(> nav.nav) .footer-grid{grid-template-columns:minmax(260px,1.2fr) repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}
  body:has(> nav.nav) .footer-brand{grid-column:auto;padding-right:30px}
  body:has(> nav.nav) .footer-col a{padding:7px 0}
  body:has(> nav.nav) .footer-col h4{margin-bottom:10px}
  body:has(> nav.nav) .footer-bottom{margin-top:50px}
}

/* ---------------------------------------------------------------------
   5.17  FOOTER on the sign-up family of pages (<div class="foot">)
   --------------------------------------------------------------------- */
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .foot{
  position:relative;z-index:var(--rd-z-content);overflow:hidden;margin:0;container-type:inline-size;
  padding:0 max(var(--rd-gut),calc((100% - var(--rd-max)) / 2 + var(--rd-gut))) calc(44px + var(--rd-strip-h,0px) + env(safe-area-inset-bottom,0px));
  background:var(--rd-ink);color:var(--rd-chalk);border:0;border-top:var(--rd-lw) solid var(--rd-line);border-image:var(--rd-baseline);
  font:500 15.5px/1.6 var(--rd-f-text);text-align:left;
  --rd-ring:var(--rd-orange);
}
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .foot::before{
  content:"I GOT NEXT.";content:"I GOT NEXT." / "";
  display:block;padding:26px 0 0;margin:0 0 30px;
  font:400 calc((min(100vw,var(--rd-max)) - 2 * var(--rd-gut)) / 4.09)/.86 var(--rd-f-display);
  font-size:calc(min(100cqw,var(--rd-max) - 2 * var(--rd-gut)) / 4.09);     /* fitted to the footer itself (its content box) where container units exist */
  letter-spacing:.004em;text-transform:uppercase;white-space:nowrap;position:relative;left:-.03em;
  background:linear-gradient(90deg,var(--rd-white) 0 48%,var(--rd-orange) 48%) content-box;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .foot-lockup{
  display:flex;align-items:center;justify-content:flex-start;gap:10px;width:max-content;max-width:100%;
  margin:0 0 16px;padding:8px 14px 8px 12px;background:var(--rd-paper);color:var(--rd-ink);
}
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .foot-lockup img{height:44px;width:auto}
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .foot-lockup .wordmark{
  font:400 22px/1 var(--rd-f-display);letter-spacing:.06em;text-transform:uppercase;padding-top:3px;color:var(--rd-ink);
}
/* these pages write the wordmark as "IGN Academy" next to the logo, which already says "ign": the lockup would
   read IGN twice. It is set as in the nav — the logo, then "Academy" (the full name stays in the markup). */
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .foot-lockup .wordmark{font-size:0;letter-spacing:0;padding-top:0}
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .foot-lockup .wordmark::after{
  content:"Academy";content:"Academy" / "";display:block;padding-top:3px;
  font:400 22px/1 var(--rd-f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--rd-ink);
}
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .foot .tagline{
  margin:0 0 8px;color:var(--rd-white);
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .foot a{
  color:var(--rd-white);text-decoration:underline;text-decoration-color:var(--rd-orange);
  text-decoration-thickness:2px;text-underline-offset:4px;
}
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .foot a:hover{color:var(--rd-orange)}
@media (min-width:960px){
  body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .foot::before{padding-top:38px;margin-bottom:40px}
}

/* ---------------------------------------------------------------------
   The masthead of the sign-up family (rent, league/camp sign-up, /pp/, /film/, /happy-hoopers, confirmations).
   The bar itself is drawn on .hero by css/60-signup.css; js/10-layer.js lays two links on it:
     a.rd-home   over the logo placard (goes home) — it shows it is a link with an orange rule under ACADEMY
     a.rd-back   at the far end: "All leagues" / "All camps" / "IGN Academy", the ghost button on black (DESIGN 5.2).
                 Below 1024px it takes the tagline's place; from 1024px the tagline stands to its left.
   Scoped with an id (html:not(#rd)) so it out-ranks the masthead rules in 60-signup.css, which load later.
   --------------------------------------------------------------------- */
html:not(#rd) body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero .rd-home:is(:hover,:focus-visible){
  text-decoration:underline;text-decoration-color:var(--rd-orange);text-decoration-thickness:3px;text-underline-offset:5px;
}
html:not(#rd) body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero .rd-back{
  --rd-ring:var(--rd-orange);
  position:absolute;z-index:3;top:calc((var(--rd-nav-h) - 44px) / 2);right:var(--rd-hx);left:auto;
  display:inline-flex;align-items:center;gap:9px;box-sizing:border-box;min-height:44px;margin:0;padding:0 14px;
  background:transparent;color:var(--rd-white);border:2px solid rgba(255,255,255,.42);border-radius:0;
  font:800 12px/1 var(--rd-f-text);font-stretch:116%;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:background-color var(--rd-t-hover),color var(--rd-t-hover),border-color var(--rd-t-hover);
}
html:not(#rd) body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero .rd-back svg{flex:none;display:block;transition:transform var(--rd-t-hover) var(--rd-ease-out)}
html:not(#rd) body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero .rd-back:hover{background:var(--rd-white);border-color:var(--rd-white);color:var(--rd-ink)}
html:not(#rd) body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero .rd-back:hover svg{transform:translateX(-4px)}
html:not(#rd) body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero .rd-back:active{background:var(--rd-chalk);border-color:var(--rd-chalk);color:var(--rd-ink)}
html:not(#rd) body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero .rd-back:focus-visible{outline:3px solid var(--rd-orange);outline-offset:3px}
@media (max-width:1023.98px){
  html:not(#rd) body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero:has(> .rd-back)::after{display:none}
}
@media (min-width:1024px){
  html:not(#rd) body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero:has(> .rd-back)::after{
    right:calc(var(--rd-hx) + var(--rd-back-w,170px) + 24px);
  }
}
/* the narrowest phones: the button and the placard share 280px */
@media (max-width:359.98px){
  html:not(#rd) body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero .rd-back{gap:6px;padding:0 9px;font-size:11px;font-stretch:100%;letter-spacing:.06em}
}

@media (prefers-reduced-motion:reduce){
  body:has(> nav.nav) .nav-links,
  body:has(> nav.nav) .nav-links.open{transform:none}
}

/* ---- 30-components.css ---- */
/* =====================================================================
   30-components.css — DESIGN.md 5.2–5.5, 5.9, 5.15, 5.16 and the
   mappings of 6.2 (global) and 6.3 (style.css pages).

   Scopes (DESIGN.md 6.1):
     MAIN    body:has(> nav.nav)
     ALL     body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)))
             = MAIN + RENT + REG + DONE + HUB, i.e. every public page, at the weight of MAIN (0,1,2)
             so the id-scoped page files (50/55/60) always out-rank these shared rules.
     LEGACY  body:has(> nav.nav):not(.rd-mkt)
             a marketing page that has not been replaced yet (falls away as pages/*.html land).

   Component-internal variables (not tokens; set by a black container, read by its children):
     --rd-btn-hbg / --rd-btn-hfg   hover fill / label of an orange or ghost button
     --rd-btn-2bg / --rd-btn-2fg   resting fill / label of a "secondary" (ink) button
     --rd-ghost-line / --rd-ghost-fg   border / label of a ghost button
   ===================================================================== */

/* ---------------------------------------------------------------------
   Utilities for new markup
   --------------------------------------------------------------------- */
/* .rd-wrap, .rd-paint and .rd-fact are defined in 00-tokens.css */
:is(.rd-dark,.rd-board,.rd-hero-text) .rd-fact{color:var(--rd-chalk)}
:is(.rd-dark,.rd-board,.rd-hero-text) :is(.rd-sheet,.rd-ticket,.rd-slip) .rd-fact{color:var(--rd-ink)}
.rd-mono{font:500 15px/1.4 var(--rd-f-mono);letter-spacing:.02em}
.rd-anton{font-family:var(--rd-f-display);font-weight:400;text-transform:uppercase;letter-spacing:.004em;line-height:var(--rd-lh-display)}
.rd-lede{font:500 var(--rd-fs-lede)/1.36 var(--rd-f-text);letter-spacing:-.005em;max-width:34em}
.rd-lede b,.rd-lede strong{font-weight:800}
.rd-sec{padding:var(--rd-sec-y) 0}
.rd-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.rd-skip{position:absolute;left:var(--rd-gut);top:8px;z-index:calc(var(--rd-z-nav) + 20);padding:12px 16px;
  background:var(--rd-orange);color:var(--rd-ink);font:800 14px/1 var(--rd-f-text);transform:translateY(-200%)}
.rd-skip:focus{transform:none}

/* ---------------------------------------------------------------------
   Black containers: children adapt (focus ring, button hovers, ghost buttons)
   --------------------------------------------------------------------- */
.rd-band,.rd-dark,.rd-hero-text,.rd-board,.rd-folio,
body:has(> nav.nav) :is(.page-hero,.band,.email-capture),
body:has(> nav.nav) > footer,
body:has(> nav.nav):not(.rd-mkt) > .hero,
body:has(> nav.nav):not(.rd-mkt) .featured-card{
  --rd-ring:var(--rd-orange);
  --rd-btn-hbg:var(--rd-white);--rd-btn-hfg:var(--rd-ink);
  --rd-btn-2bg:var(--rd-orange);--rd-btn-2fg:var(--rd-ink);
  --rd-ghost-line:rgba(255,255,255,.42);--rd-ghost-fg:var(--rd-white);
}
/* a paper sheet inside a black container goes back to the light-ground behaviour */
.rd-sheet,.rd-light,.rd-ticket,.rd-rates,
body:has(> nav.nav) :is(.band,.email-capture,.page-hero) .card{
  --rd-ring:var(--rd-ink);
  --rd-btn-hbg:var(--rd-ink);--rd-btn-hfg:var(--rd-white);
  --rd-btn-2bg:var(--rd-ink);--rd-btn-2fg:var(--rd-white);
  --rd-ghost-line:var(--rd-ink);--rd-ghost-fg:var(--rd-ink);
}

/* ---------------------------------------------------------------------
   6.2  Global mappings
   --------------------------------------------------------------------- */
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) .display{
  font-family:var(--rd-f-display);font-weight:400;text-transform:uppercase;line-height:.9;letter-spacing:.004em;
}
/* nothing fades up */
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) .reveal,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) .reveal.in{
  opacity:1;transform:none;transition:none;animation:none;
}
body:has(> nav.nav) .container:not(.acct){max-width:var(--rd-max);padding-inline:var(--rd-gut)}
body:has(> nav.nav) .section{padding-block:var(--rd-sec-y);background:transparent}
body:has(> nav.nav) .section.tint{background:transparent}
/* two floor sections in a row: one gap between them, not two */
body:has(> nav.nav) .section + .section:not([style*="padding-top"]){padding-top:0}
/* the closing zone follows the content directly */
body:has(> nav.nav) .section:has(+ .rd-floor){padding-bottom:0}
body:has(> nav.nav){counter-reset:rd-sec}

/* ---------------------------------------------------------------------
   5.2  BUTTONS
     .rd-btn                 primary (orange slab, ink label)
     .rd-btn--secondary      ink slab            .rd-btn--ghost        2px outline (adapts on black)
     .rd-btn--ghost-dark     forced white outline .rd-btn--dash        dashed "add"
     .rd-btn--pay            64px, full width     .rd-btn--sm          44px
     .rd-btn--block          full width           .rd-link             text-link button
     an inline <svg> or .arrow inside slides 4px on hover
   --------------------------------------------------------------------- */
.rd-btn,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) .btn,
body:has(> nav.nav) .card-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:54px;padding:6px 22px;margin:0;
  border:2px solid transparent;border-radius:0;box-shadow:none;transform:none;
  background:var(--rd-orange);color:var(--rd-ink);
  font:800 var(--rd-fs-btn)/1.15 var(--rd-f-text);font-stretch:116%;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;text-align:center;cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:background-color var(--rd-t-hover),color var(--rd-t-hover),border-color var(--rd-t-hover);
  -webkit-tap-highlight-color:transparent;
}
@media (min-width:640px){
  .rd-btn,
  body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) .btn,
  body:has(> nav.nav) .card-cta{white-space:nowrap}
}
.rd-btn svg,.rd-link svg,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) .btn .arrow{
  flex:none;transition:transform var(--rd-t-hover) var(--rd-ease-out);
}
.rd-btn:hover svg,.rd-link:hover svg,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) .btn:not(:disabled):hover .arrow{transform:translateX(4px)}

/* primary: hover */
.rd-btn:hover,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) .btn:hover,
body:has(> nav.nav) .card-cta.live:hover{
  transform:none;box-shadow:none;
  background:var(--rd-btn-hbg,var(--rd-ink));color:var(--rd-btn-hfg,var(--rd-white));
}
.rd-btn:active,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) .btn:active,
body:has(> nav.nav) .card-cta:active{
  background:var(--rd-orange-press);color:var(--rd-ink);border-color:transparent;transform:translateY(1px);
}

/* secondary (ink slab; on black it becomes the orange slab so it can be seen) */
.rd-btn--secondary,
body:has(> nav.nav) .btn-black,
body:has(> nav.nav) .card-cta{background:var(--rd-btn-2bg,var(--rd-ink));color:var(--rd-btn-2fg,var(--rd-white))}
.rd-btn--secondary:hover,
body:has(> nav.nav) .btn-black:hover,
body:has(> nav.nav) .card-cta:hover{background:var(--rd-orange);color:var(--rd-ink)}
.rd-dark .rd-btn--secondary:hover,.rd-band .rd-btn--secondary:hover,.rd-hero-text .rd-btn--secondary:hover,.rd-board .rd-btn--secondary:hover,
body:has(> nav.nav) :is(.page-hero,.band,.email-capture,.hero) .btn-black:hover{background:var(--rd-white);color:var(--rd-ink)}
body:has(> nav.nav) .card-cta.live{background:var(--rd-orange);color:var(--rd-ink)}

/* ghost (outline). On a black container the outline and label turn white. */
.rd-btn--ghost,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) :is(.btn-ghost,.btn-outline){
  background:transparent;border-color:var(--rd-ghost-line,var(--rd-ink));color:var(--rd-ghost-fg,var(--rd-ink));
}
.rd-btn--ghost:hover,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) :is(.btn-ghost,.btn-outline):hover{
  background:var(--rd-btn-hbg,var(--rd-ink));border-color:var(--rd-btn-hbg,var(--rd-ink));color:var(--rd-btn-hfg,var(--rd-white));
}
.rd-btn--ghost:active,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) :is(.btn-ghost,.btn-outline):active{
  background:#26262B;border-color:#26262B;color:var(--rd-white);
}
.rd-btn--ghost-dark,
body:has(> nav.nav) .btn-ghost-white{background:transparent;border-color:rgba(255,255,255,.42);color:var(--rd-white)}
.rd-btn--ghost-dark:hover,
body:has(> nav.nav) .btn-ghost-white:hover{background:var(--rd-white);border-color:var(--rd-white);color:var(--rd-ink)}
.rd-btn--ghost-dark:active,
body:has(> nav.nav) .btn-ghost-white:active{background:var(--rd-chalk);border-color:var(--rd-chalk);color:var(--rd-ink)}

/* dashed add */
.rd-btn--dash{background:transparent;border:2px dashed var(--rd-ink);color:var(--rd-ink)}
.rd-btn--dash:hover{background:var(--rd-paper-2);color:var(--rd-ink)}
.rd-btn--dash:active{background:var(--rd-rule);color:var(--rd-ink);border-color:var(--rd-ink)}

/* sizes */
.rd-btn--sm,
body:has(> nav.nav) .btn-sm{min-height:44px;padding:4px 16px;font-size:12.5px}
.rd-btn--pay{min-height:64px;width:100%;font-size:16px;letter-spacing:.07em}
.rd-btn--pay:hover{background:var(--rd-ink);color:var(--rd-white)}
.rd-btn--block,
body:has(> nav.nav) .card-cta{width:100%}
body:has(> nav.nav) .card-cta{min-height:48px;margin-top:auto}

/* disabled: hatch, never a hover */
.rd-btn:disabled,.rd-btn[disabled],.rd-btn[aria-disabled="true"],
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) .btn:disabled,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) .btn[disabled]{
  background:var(--rd-hatch);color:var(--rd-hatch-ink);border-color:transparent;cursor:not-allowed;transform:none;box-shadow:none;
}

/* text-link button */
.rd-link{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0;background:none;border:0;cursor:pointer;
  color:inherit;font:800 13px/1 var(--rd-f-text);font-stretch:116%;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:7px;text-decoration-color:currentColor;
  transition:color var(--rd-t-hover),text-decoration-color var(--rd-t-hover);
}
.rd-link:hover{text-decoration-thickness:5px}
.rd-dark .rd-link,.rd-band .rd-link,.rd-hero-text .rd-link,.rd-board .rd-link{color:var(--rd-white);text-decoration-color:var(--rd-orange)}
.rd-dark .rd-link:hover,.rd-band .rd-link:hover,.rd-hero-text .rd-link:hover,.rd-board .rd-link:hover{color:var(--rd-orange);text-decoration-thickness:3px}
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) :is(.linkbtn,.backlink){
  display:inline-flex;align-items:center;min-height:44px;padding:0;background:none;border:0;border-radius:0;cursor:pointer;
  color:var(--rd-ink);font:700 16px/1.3 var(--rd-f-text);
  text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px;text-decoration-color:var(--rd-orange);
  transition:text-decoration-color var(--rd-t-hover);
}
/* one treatment for a text link on a light ground, every page: ink words on an orange underline (as in the
   notices, the footer email and /book). The underline turns ink and thickens on hover. */
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) :is(.linkbtn,.backlink):hover{text-decoration-thickness:5px;text-decoration-color:var(--rd-ink)}

/* pending spinner */
.rd-spin,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) .spin{
  display:inline-block;width:14px;height:14px;border:2px solid transparent;border-top-color:currentColor;border-right-color:currentColor;
  border-radius:var(--rd-r-round);animation:rd-spin .7s linear infinite;
}
@keyframes rd-spin{to{transform:rotate(360deg)}}

/* button rows */
.rd-btns,
body:has(> nav.nav) :is(.btn-row,.hero-actions,.sp-actions),
body:has(> nav.nav) .band .actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:12px;margin-top:24px}
@media (max-width:639.98px){
  .rd-btns > .rd-btn,
  body:has(> nav.nav) :is(.btn-row,.hero-actions,.sp-actions) .btn,
  body:has(> nav.nav) .band .actions .btn{flex:1 1 100%}
}

/* ---------------------------------------------------------------------
   5.3  KICKER
     <p class="rd-kicker">Level up</p>
     on black: orange square + chalk · on light: outlined square + ink-2 ·
     inside .rd-head / .section-head: the section's folio number in a black chip
   --------------------------------------------------------------------- */
.rd-kicker,
body:has(> nav.nav) .kicker{
  display:flex;align-items:baseline;gap:10px;margin:0;color:var(--rd-ink-2);
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
.rd-kicker::before,
body:has(> nav.nav) .kicker::before{
  content:"";flex:none;width:8px;height:8px;background:var(--rd-orange);outline:2px solid var(--rd-ink);outline-offset:0;
}
.rd-dark .rd-kicker,.rd-band .rd-kicker,.rd-hero-text .rd-kicker,.rd-board .rd-kicker,
body:has(> nav.nav) :is(.page-hero,.band,.email-capture) .kicker,
body:has(> nav.nav):not(.rd-mkt) > .hero .kicker{color:var(--rd-chalk)}
.rd-dark .rd-kicker::before,.rd-band .rd-kicker::before,.rd-hero-text .rd-kicker::before,.rd-board .rd-kicker::before,
body:has(> nav.nav) :is(.page-hero,.band,.email-capture) .kicker::before,
body:has(> nav.nav):not(.rd-mkt) > .hero .kicker::before{outline:0}
.rd-kicker b{font-weight:800;color:var(--rd-white)}

/* ---------------------------------------------------------------------
   5.4  SECTION HEADER on the floor
     <header class="rd-head">
       <p class="rd-kicker">One coach, full attention</p>
       <h2>Private <span class="o">Training</span></h2>
       <p>Optional paragraph, sits bottom-right from 960px.</p>
     </header>
     The folio number counts .rd-head / .section-head blocks down the page.
   --------------------------------------------------------------------- */
body.rd-mkt{counter-reset:rd-sec}
.rd-head,
body:has(> nav.nav) .section-head,
body:has(> nav.nav) .section-head.center{
  counter-increment:rd-sec;position:relative;max-width:none;
  margin:0 0 clamp(24px,3vw,44px);padding-top:20px;border-top:3px solid var(--rd-ink);text-align:left;
}
.rd-head .rd-kicker,
body:has(> nav.nav) .section-head .kicker{color:var(--rd-ink-2);justify-content:flex-start;align-items:center}
.rd-head .rd-kicker::before,
body:has(> nav.nav) .section-head .kicker::before{
  content:counter(rd-sec,decimal-leading-zero);width:auto;height:auto;padding:3px 5px 2px 7px;outline:0;
  background:var(--rd-ink);color:var(--rd-white);letter-spacing:.1em;
}
body:has(> nav.nav) .section-head.center .kicker::after{display:none}
/* working pages (book, groups, account…) have one section header at most, under a ticket: a lone "01" there counts
   nothing, so the kicker takes the list marker instead — an orange square with an ink edge */
html.rd-calm body:has(> nav.nav) .section-head .kicker::before{
  content:"";width:8px;height:8px;padding:0;margin:0 2px;background:var(--rd-orange);outline:2px solid var(--rd-ink);
}
.rd-head h2,
body:has(> nav.nav) .section-head h2{
  margin:12px 0 0;color:var(--rd-ink);
  font:400 var(--rd-fs-700)/.9 var(--rd-f-display);letter-spacing:.004em;text-transform:uppercase;text-wrap:balance;
}
body:has(> nav.nav) .section-head.center h2::after{display:none}
.rd-head > p:not(.rd-kicker),
body:has(> nav.nav) .section-head > p,
body:has(> nav.nav) .section-head.center > p{
  max-width:34em;margin:14px 0 0;color:var(--rd-ink);font:500 var(--rd-fs-body)/1.5 var(--rd-f-text);
}
body:has(> nav.nav) .section-head.center.reveal > *{opacity:1;transform:none;transition:none}
.rd-head:last-child,
body:has(> nav.nav) .section-head:last-child{margin-bottom:0}
@media (min-width:960px){
  .rd-head,
  body:has(> nav.nav) .section-head,
  body:has(> nav.nav) .section-head.center{
    display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(24px,4vw,64px);align-items:end;
  }
  .rd-head > *,
  body:has(> nav.nav) .section-head > *{grid-column:1 / -1}
  .rd-head > h2,
  body:has(> nav.nav) .section-head > h2{grid-column:1;align-self:start}
  .rd-head > h2 + p,
  body:has(> nav.nav) .section-head > h2 + p,
  body:has(> nav.nav) .section-head.center > h2 + p{grid-column:2;margin:0 0 .1em}
}
/* marketing pages: the top rule draws in once as the header comes into view (no JS, no listener) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    body.rd-mkt .rd-head{border-top-color:transparent}
    body.rd-mkt .rd-head::after{
      content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:var(--rd-ink);transform-origin:left;
      animation:rd-rule linear both;animation-timeline:view();animation-range:entry 10% entry 90%;
    }
    @keyframes rd-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}

/* The one highlighted word (the rule is in 00-tokens.css). On light grounds: plain ink type with the short orange
   bar; on black: orange type. The slab is opt-in only (.rd-slab, three places on the site). */
.rd-hl,
.rd-head h2 :is(.o,.pp,.orange):not(.rd-plain),
body:has(> nav.nav) .section-head h2 .o,
body:has(> nav.nav) .form-success .big span{
  display:inline;line-height:inherit;padding:0;margin:0;
  background:var(--rd-hl-bar);color:var(--rd-ink);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
/* (00-tokens.css already turns the word into plain orange type inside .rd-band, .rd-hero, .page-hero,
   .band, .email-capture and the footers; these are the black containers it does not know about) */
:is(.rd-dark,.rd-board,.rd-hero-text) .rd-hl,
:is(.rd-dark,.rd-board,.rd-hero-text) :is(h1,h2,h3,h4,.display) :is(.o,.pp,.orange):not(.rd-plain),
body:has(> nav.nav):not(.rd-mkt) .featured-card :is(h1,h2,h3,h4,.display) :is(.o,.pp,.orange):not(.rd-plain){
  display:inline;padding:0;margin:0;background:none;color:var(--rd-orange);line-height:inherit;
}

/* ---------------------------------------------------------------------
   5.5  PAGE HERO (interior pages built on style.css) — a black band
   --------------------------------------------------------------------- */
body:has(> nav.nav) .page-hero{
  position:relative;overflow:visible;background:var(--rd-ink);color:var(--rd-white);
  padding:clamp(30px,4.6vw,60px) 0 clamp(30px,4.2vw,52px);
  border-bottom:var(--rd-lw) solid var(--rd-line);border-image:var(--rd-baseline);
}
body:has(> nav.nav) .page-hero::before,
body:has(> nav.nav) .page-hero::after{display:none}
body:has(> nav.nav) .page-hero h1{
  margin:14px 0 0;color:var(--rd-white);
  font:400 var(--rd-fs-800)/.9 var(--rd-f-display);letter-spacing:.004em;text-transform:uppercase;text-wrap:balance;
}
body:has(> nav.nav) .page-hero p{
  max-width:34em;margin:16px 0 0;color:var(--rd-chalk);font:500 clamp(17px,1.35vw,19px)/1.5 var(--rd-f-text);
}
body:has(> nav.nav) .page-hero p b{color:var(--rd-white);font-weight:700}
@media (min-width:960px){
  body:has(> nav.nav) .page-hero .container{
    display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto 1fr auto auto;
    column-gap:clamp(24px,4vw,64px);
  }
  body:has(> nav.nav) .page-hero .kicker{grid-column:1 / -1;grid-row:1}
  body:has(> nav.nav) .page-hero h1{grid-column:1;grid-row:2 / span 3;align-self:end}
  body:has(> nav.nav) .page-hero .container > p{grid-column:2;grid-row:3;margin:0}
  body:has(> nav.nav) .page-hero .container > p:last-child{margin-bottom:-.28em}   /* last text line sits on the h1 baseline */
  body:has(> nav.nav) .page-hero .container > p + p,
  body:has(> nav.nav) .page-hero .container > .btn-row{grid-column:2;grid-row:4;margin-top:22px;margin-bottom:0}
}

/* ---------------------------------------------------------------------
   5.5  PAGE HERO on the sign-up family — /rent, league and camp sign-up, /pp/, /film/, /happy-hoopers,
   the two hubs and every success page. These pages have no nav bar, so the hero IS the top of the
   out-of-bounds: a black band, left-aligned, standing on a painted line.
   This is the shared base only. Its page scope sits inside :where() (the weight of one element), so every rule in 55-rent.css and 60-signup.css (id scopes) out-ranks it without a fight.
   Markup on all of them: .hero > .hero-logo, .badge, h1, .sub, [.ribbon], .rates | .glance | .meta
   --------------------------------------------------------------------- */
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero{
  position:relative;overflow:visible;margin:0;border-radius:0;box-shadow:none;text-align:left;
  background:var(--rd-ink);color:var(--rd-white);--rd-ring:var(--rd-orange);
  padding:clamp(22px,3.6vw,44px) max(var(--rd-gut),calc((100% - var(--rd-max)) / 2 + var(--rd-gut))) clamp(26px,3.8vw,46px);
  border-bottom:var(--rd-lw) solid var(--rd-line);border-image:var(--rd-baseline);
}
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero::before,
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero::after{display:none}
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero > *{animation:none;opacity:1;transform:none}
/* the real logo on a plain paper chip (never inverted, never ringed) */
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero .hero-logo{
  display:block;box-sizing:border-box;height:56px;width:auto;margin:0 0 18px;padding:8px 12px;background:var(--rd-paper);
}
/* the badge is the kicker: paint caps, an orange square in front, no bars */
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero .badge{
  display:flex;align-items:baseline;justify-content:flex-start;gap:10px;margin:0;color:var(--rd-chalk);
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero .badge::before{content:"";flex:none;width:8px;height:8px;background:var(--rd-orange)}
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero .badge::after{display:none}
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero h1{
  margin:14px 0 0;color:var(--rd-white);
  font:400 var(--rd-fs-800)/.9 var(--rd-f-display);letter-spacing:.004em;text-transform:uppercase;text-wrap:balance;
}
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero h1 span{color:var(--rd-orange);background:none;padding:0}
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero .sub{
  max-width:34em;margin:16px 0 0;color:var(--rd-chalk);font:500 clamp(17px,1.35vw,19px)/1.5 var(--rd-f-text);
}
/* format tokens: ink Anton on an orange slab, the note in chalk */
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero .ribbon{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px 10px;margin:18px 0 0;padding:0;
  background:none;border:0;border-radius:0;box-shadow:none;
}
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero .ribbon .fmt{
  padding:4px 8px 2px;border-radius:0;background:var(--rd-orange);color:var(--rd-ink);
  font:400 19px/1.15 var(--rd-f-display);letter-spacing:.04em;text-transform:uppercase;
}
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero .ribbon .fmt-note{color:var(--rd-chalk);font:600 15.5px/1.4 var(--rd-f-text)}
/* the figures under the headline: a stat strip on black (value Anton, label paint), never tiles.
   Phones: two cells to a row, a third (or fifth) cell runs the full width, so a long value such as
   "Nov 9 – Dec 17" always has room. From 640px: one row. */
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero :is(.rates,.glance,.meta){
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-content:start;gap:14px 0;margin:clamp(20px,2.6vw,28px) 0 0;
}
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero :is(.rates,.glance,.meta) > div{
  min-width:0;padding:12px 12px 0 16px;background:none;border:0;border-radius:0;box-shadow:none;
  border-top:1px solid var(--rd-on-dark-rule);border-left:1px solid var(--rd-on-dark-rule);
  color:var(--rd-chalk);text-align:left;animation:none;opacity:1;transform:none;
  font:800 11px/1.35 var(--rd-f-text);font-stretch:112%;letter-spacing:.1em;text-transform:uppercase;
}
/* paint is never set below 11px: on a phone the label is set narrower instead of smaller */
@media (max-width:479.98px){
  body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero :is(.rates,.glance,.meta) > div{font-stretch:90%;letter-spacing:.05em}
}
@media (max-width:639.98px){
  body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero :is(.rates,.glance,.meta) > div:nth-child(odd){padding-left:0;border-left:0}
  body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero :is(.rates,.glance,.meta) > div:nth-child(odd):last-child{grid-column:1 / -1}
}
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero :is(.rates,.glance,.meta) b{
  display:block;margin:0 0 6px;color:var(--rd-white);white-space:nowrap;
  font:400 clamp(26px,7vw,34px)/1 var(--rd-f-display);letter-spacing:.01em;text-transform:uppercase;font-variant-numeric:tabular-nums;
}
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero :is(.rates,.glance,.meta) small{
  display:block;margin-top:3px;color:var(--rd-chalk);font:600 13.5px/1.3 var(--rd-f-text);letter-spacing:0;text-transform:none;
}
/* member pricing on: every cell reads number, label, then the member line — whichever order the page's script
   wrote them in (the league pages put the line straight after the number, the camp and program pages after the
   label). The cell becomes a column so the line can be ordered last; on the desktop ledger (a grid) the same
   order puts it under the label. */
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero :is(.rates,.glance,.meta) > div:has(> small){display:flex;flex-direction:column;align-items:flex-start}
html:not(#rd) body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero :is(.glance,.meta) > div > small{
  order:1;margin-top:6px;color:var(--rd-white);font:600 14.5px/1.25 var(--rd-f-text);white-space:nowrap;
}
html:not(#rd) body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero :is(.glance,.meta) > div > small::before{
  content:"";display:inline-block;width:7px;height:7px;margin:0 7px 0 0;vertical-align:.1em;background:var(--rd-orange);
}
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero :is(.glance,.meta) > div > br{display:none}
@media (min-width:640px){
  body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero :is(.rates,.glance,.meta){grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:auto;gap:0}
  body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero :is(.rates,.glance,.meta) > div{
    padding:14px clamp(14px,2vw,28px) 0;font-size:11px;font-stretch:125%;letter-spacing:.14em;
  }
  body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero :is(.rates,.glance,.meta) > div:first-child{padding-left:0;border-left:0}
  body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero :is(.rates,.glance,.meta) b{font-size:clamp(34px,3.4vw,48px)}
}
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero .bigcheck{margin:18px 0 6px}
/* /pp/, /film/, /happy-hoopers and the success pages keep the hero and the footer inside a 640px column
   (.wrap). The black bands have to span the floor, so the column opens up and its other children
   (sheets, notices, the progress rail) keep a readable measure of their own. */
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .wrap:has(> .hero){max-width:none;padding:0}
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .wrap:has(> .hero) > :not(.hero,.foot,.rd-floor){
  width:calc(100% - 2 * var(--rd-gut));max-width:720px;margin-left:auto;margin-right:auto;
}

/* ---------------------------------------------------------------------
   5.5  BLACK BAND (.band on style.css pages) and the newsletter band
   --------------------------------------------------------------------- */
body:has(> nav.nav) .band,
body:has(> nav.nav) .email-capture{
  position:relative;overflow:visible;background:var(--rd-ink);color:var(--rd-white);
  padding:clamp(32px,5vw,64px) 0;
  border-top:var(--rd-lw) solid var(--rd-line);border-bottom:var(--rd-lw) solid var(--rd-line);border-image:var(--rd-baseline);
}
body:has(> nav.nav) .band::before{display:none}
/* black touching black: no painted line between them, a hairline instead */
body:has(> nav.nav) :is(.band,.email-capture,.page-hero) + :is(.band,.email-capture){
  border-top:0;background-image:linear-gradient(var(--rd-on-dark-rule),var(--rd-on-dark-rule));background-size:100% 1px;background-repeat:no-repeat;
}
body:has(> nav.nav) :is(.band,.email-capture):has(+ :is(.band,.email-capture,footer)){border-bottom:0}
body:has(> nav.nav) :is(.band,.email-capture) + footer{
  border-top:0;background-image:linear-gradient(var(--rd-on-dark-rule),var(--rd-on-dark-rule));background-size:100% 1px;background-repeat:no-repeat;
}
body:has(> nav.nav) .band h2,
body:has(> nav.nav) .email-capture h2{
  margin:12px 0 0;color:var(--rd-white);
  font:400 var(--rd-fs-700)/.9 var(--rd-f-display);letter-spacing:.004em;text-transform:uppercase;text-wrap:balance;
}
body:has(> nav.nav) .email-capture h2{margin-top:0}
body:has(> nav.nav) .band p,
body:has(> nav.nav) .email-capture p{
  max-width:34em;margin:14px 0 0;color:var(--rd-chalk);font:500 var(--rd-fs-body)/1.5 var(--rd-f-text);
}
body:has(> nav.nav) .email-capture .inner{max-width:var(--rd-max);margin:0 auto;padding:0 var(--rd-gut);text-align:left}
body:has(> nav.nav) .email-form{display:flex;gap:10px;max-width:none;margin:20px 0 0}
body:has(> nav.nav) .email-form input{flex:1 1 auto;min-width:0;border-color:var(--rd-white)}
body:has(> nav.nav) .email-form .btn{flex:none}
body:has(> nav.nav) .email-form p{margin:0;min-height:54px;display:flex;align-items:center}
@media (max-width:639.98px){
  body:has(> nav.nav) .email-form{flex-direction:column}
}
@media (min-width:960px){
  body:has(> nav.nav) .band .container{
    display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(24px,4vw,64px);align-items:end;
  }
  body:has(> nav.nav) .band .container > *{grid-column:1 / -1}
  body:has(> nav.nav) .band .container > h2{grid-column:1}
  body:has(> nav.nav) .band .container > h2:has(+ p + .actions){grid-row:span 2}
  body:has(> nav.nav) .band .container > h2 + p{grid-column:2;margin:0}
  body:has(> nav.nav) .band .container > h2 + p + .actions{grid-column:2;margin-top:20px}
  body:has(> nav.nav) .email-capture .inner{
    display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(24px,4vw,64px);align-items:end;
  }
  body:has(> nav.nav) .email-capture .inner > h2{grid-column:1;grid-row:1}
  body:has(> nav.nav) .email-capture .inner > p{grid-column:1;grid-row:2}
  body:has(> nav.nav) .email-capture .inner > form{grid-column:2;grid-row:1 / span 2;margin:0}
}

/* ---------------------------------------------------------------------
   5.13 / 6.3  SHEETS in a ruled grid (.grid + .card on style.css pages)
   --------------------------------------------------------------------- */
body:has(> nav.nav) .grid,
body:has(> nav.nav) .grid.four{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:2px 0 0 2px}
body:has(> nav.nav) .grid > *{margin:-2px 0 0 -2px;min-width:0}
@media (min-width:640px){
  body:has(> nav.nav) .grid,
  body:has(> nav.nav) .grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:960px){
  body:has(> nav.nav) .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  body:has(> nav.nav) .grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
}
body:has(> nav.nav) .card{
  position:relative;overflow:visible;opacity:1;transform:none;transition:none;
  background:var(--rd-paper);color:var(--rd-ink);border:2px solid var(--rd-ink);border-radius:0;box-shadow:none;
  padding:clamp(18px,3vw,30px);
}
body:has(> nav.nav) .card:hover{transform:none;box-shadow:none;border-color:var(--rd-ink)}
body:has(> nav.nav) .card .num,
body:has(> nav.nav) .card:hover .num{
  position:static;margin:0 0 16px;color:var(--rd-ink-2);font:400 20px/1 var(--rd-f-display);letter-spacing:.02em;transition:none;
}
body:has(> nav.nav) .card .tag{
  display:block;margin:0 0 10px;color:var(--rd-ink-2);
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
body:has(> nav.nav) .card h3{
  font:400 clamp(27px,2.3vw,34px)/.98 var(--rd-f-display);letter-spacing:.012em;text-transform:uppercase;color:var(--rd-ink);
}
body:has(> nav.nav) .card p{margin-top:10px;color:var(--rd-ink);font:500 16px/1.5 var(--rd-f-text)}
body:has(> nav.nav) .card ul{margin:14px 0 18px}
body:has(> nav.nav) .card ul li{gap:12px;padding:5px 0;color:var(--rd-ink);font:600 15.5px/1.4 var(--rd-f-text)}
body:has(> nav.nav) .card ul li::before{
  width:8px;height:8px;margin:0 2px;border-radius:0;background:var(--rd-orange);outline:2px solid var(--rd-ink);
}
/* a sheet that is itself a link: an orange bar on its top edge, no lift */
body:has(> nav.nav) a.card::after{
  content:"";position:absolute;left:-2px;right:-2px;top:-2px;height:6px;background:var(--rd-orange);
  transform:scaleX(0);transform-origin:left;transition:transform var(--rd-t-wipe) var(--rd-ease-out);
}
body:has(> nav.nav) a.card:hover::after,
body:has(> nav.nav) a.card:focus-visible::after{transform:scaleX(1)}
body:has(> nav.nav) a.card .arrow,
body:has(> nav.nav) a.card:hover .arrow{margin-top:14px;color:var(--rd-ink);font:800 22px/1 var(--rd-f-text);transform:none}
/* flagged sheet */
body:has(> nav.nav) .card.feature{
  border-color:var(--rd-ink);box-shadow:none;
  background:linear-gradient(var(--rd-orange),var(--rd-orange)) 0 0 / 100% 6px no-repeat var(--rd-paper);
}
body:has(> nav.nav) .card .pkg-flag{
  align-self:flex-start;margin:4px 0 12px;padding:4px 8px 3px;border-radius:0;background:var(--rd-orange);color:var(--rd-ink);
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}

/* ---------------------------------------------------------------------
   5.9  PRICE
     <span class="rd-price">$25<small>/hr</small></span>
     <span class="rd-price-note">members $65</span>
   --------------------------------------------------------------------- */
.rd-price{
  display:inline-flex;align-items:baseline;gap:.14em;color:inherit;white-space:nowrap;
  font:400 38px/1 var(--rd-f-display);letter-spacing:.01em;font-variant-numeric:tabular-nums;
}
.rd-price small{font:700 .4em/1 var(--rd-f-text);letter-spacing:0;text-transform:none}
.rd-price i{font:600 .4em/1 var(--rd-f-text);font-style:normal;letter-spacing:0;text-transform:none}   /* "from" */
.rd-price--lg{font-size:clamp(46px,4.4vw,56px)}
.rd-price--sm{font-size:30px}
.rd-price.is-tbd{color:var(--rd-ink-3)}
.rd-price-note{display:block;margin-top:3px;font:600 15.5px/1.3 var(--rd-f-text);color:var(--rd-ink-2)}
/* ---------------------------------------------------------------------
   5.9b MEMBER PRICE — what prices.js (and the sign-up pages' own scripts) add once member pricing is switched on:
     <span class="rd-price"><span data-price-cell="half">$30</span><small class="ign-member-price">members $25</small><small>/hr</small></span>
     <b data-price-cell="camp1day">$55+</b><small class="ign-member-price">members $45+</small>     (a stat value)
     <div><b>$55</b>Per Camper<br><small>members $45</small></div>                                 (sign-up header strip)
   The regular price stays the big number. The member price is its own short line under it: Archivo 600, an
   orange marker square (ink on orange grounds), never wrapping. Scoped with an id (html:not(#rd)) so it out-ranks
   every ".rd-price small" / page "small" rule without !important.
   --------------------------------------------------------------------- */
html:not(#rd) .ign-member-price{
  display:block;margin:5px 0 0;padding:0;
  color:var(--rd-ink-2);font:600 15px/1.25 var(--rd-f-text);font-stretch:100%;letter-spacing:0;text-transform:none;
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:inherit;
}
html:not(#rd) .ign-member-price::before{
  content:"";display:inline-block;width:7px;height:7px;margin:0 7px 0 0;vertical-align:.12em;background:var(--rd-orange);
}
/* inside a price lockup ("$30 /hr"): the unit stays beside the number, the member line drops under both */
html:not(#rd) .rd-price:has(> .ign-member-price){flex-wrap:wrap;row-gap:0}
html:not(#rd) .rd-price > .ign-member-price{order:9;flex:0 0 100%}
html:not(#rd) .rd-rate .rd-price > .ign-member-price{text-align:right}
/* a stat cell (the hubs' "$75+ Per player"): the line between the value and its label, set to the cell's width */
html:not(#rd) .rd-stat > .ign-member-price{margin:6px 0 0;font-size:14px}
@media (max-width:639.98px){
  html:not(#rd) .rd-stat > .ign-member-price{font-size:13px;font-stretch:84%}
  html:not(#rd) .rd-stat > .ign-member-price::before{width:6px;height:6px;margin-right:5px}
}
@media (max-width:359.98px){
  /* the smallest phones: three stat cells across 280px, and "members $65+" still has to fit its cell */
  html:not(#rd) .rd-stat > .ign-member-price{font-size:12px;font-stretch:80%}
  html:not(#rd) .rd-stat > .ign-member-price::before{width:4px;height:4px;margin-right:3px}
}
/* dark grounds (bands, heroes, the scoreboard): chalk; a paper sheet inside them goes back to ink */
html:not(#rd) :is(.rd-dark,.rd-board,.rd-band,.rd-hero,.rd-hero-text,.hero,.page-hero) .ign-member-price{color:var(--rd-chalk)}
html:not(#rd) :is(.rd-dark,.rd-board,.rd-band,.rd-hero,.rd-hero-text,.hero,.page-hero) :is(.rd-sheet,.rd-ticket,.rd-slip,.rd-rates) .ign-member-price{color:var(--rd-ink-2)}
/* an orange ground (a row's hover wipe, an orange slab): ink type, ink marker */
html:not(#rd) .rd-rate:is(:hover,:active) .ign-member-price{color:var(--rd-ink)}
html:not(#rd) .rd-rate:is(:hover,:active) .ign-member-price::before{background:var(--rd-ink)}

body:has(> nav.nav) .card .price-row{display:flex;align-items:baseline;gap:8px;margin:16px 0 18px}
body:has(> nav.nav) .card .price{color:var(--rd-ink);font:400 38px/1 var(--rd-f-display);letter-spacing:.01em}
body:has(> nav.nav) .card .price small,
body:has(> nav.nav) .card .price-row small{color:var(--rd-ink-2);font:700 15px/1.2 var(--rd-f-text)}
body:has(> nav.nav) .card .price.tbd{color:var(--rd-ink-3)}

/* ---------------------------------------------------------------------
   5.15  NOTICES
     <p class="rd-notice">…</p>   + --warn / --ok / --err / --dark / --member
   --------------------------------------------------------------------- */
.rd-notice,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) :is(.notice,.deadline,.session-info,.division-info,.session-hi,.division-hi){
  margin-top:18px;padding:14px 16px;border:0;border-left:6px solid var(--rd-orange);border-radius:0;box-shadow:none;
  background:var(--rd-paper);color:var(--rd-ink);font:600 16px/1.45 var(--rd-f-text);text-align:left;
}
.rd-notice b,.rd-notice strong{font-weight:800}
.rd-notice a,
body:has(> nav.nav) .notice a{color:var(--rd-ink);text-decoration:underline;text-decoration-color:var(--rd-orange);text-decoration-thickness:2px;text-underline-offset:3px}
.rd-notice--warn{background:var(--rd-warn-bg);border-left-color:var(--rd-warn-line)}
.rd-notice--warn b:first-child{color:var(--rd-warn)}
.rd-notice--ok{background:var(--rd-ok-bg);border-left-color:var(--rd-ok-line)}
.rd-notice--ok b:first-child{color:var(--rd-ok)}
.rd-notice--err{background:var(--rd-err-bg);border-left-color:var(--rd-err)}
.rd-notice--dark{background:var(--rd-ink);color:var(--rd-white)}
.rd-notice--dark b{color:var(--rd-orange)}
.rd-notice--member{background:var(--rd-paper-2);border:2px dashed var(--rd-ink)}
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) .deadline .clk{display:none}

.rd-toast,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) .toast{
  z-index:var(--rd-z-toast);padding:14px 20px;border:2px solid var(--rd-line);border-radius:0;box-shadow:none;
  background:var(--rd-ink);color:var(--rd-white);font:700 16px/1.3 var(--rd-f-text);
}

/* ---------------------------------------------------------------------
   5.16  TABLES AND LISTS
   --------------------------------------------------------------------- */
.rd-table,
body:has(> nav.nav) table.spec{
  width:100%;border-collapse:collapse;border-top:3px solid var(--rd-ink);border-bottom:2px solid var(--rd-ink);
  font:500 16px/1.45 var(--rd-f-text);color:var(--rd-ink);
}
.rd-sheet .rd-table,
body:has(> nav.nav) .card table.spec{border-top:0;border-bottom:0}
.rd-table th,.rd-table td,
body:has(> nav.nav) table.spec th,
body:has(> nav.nav) table.spec td{padding:14px 10px;text-align:left;vertical-align:baseline;border-bottom:1px solid var(--rd-rule-strong)}
.rd-table tr > :first-child,
body:has(> nav.nav) table.spec tr > :first-child{padding-left:0}
.rd-table tr > :last-child,
body:has(> nav.nav) table.spec tr > :last-child{padding-right:0}
.rd-table tbody tr:last-child > *,
body:has(> nav.nav) table.spec tbody tr:last-child > *{border-bottom:0}
.rd-sheet .rd-table td,
body:has(> nav.nav) .card table.spec td{border-bottom-color:var(--rd-rule)}
.rd-table th,
body:has(> nav.nav) table.spec th{
  padding-block:10px 9px;border-bottom:2px solid var(--rd-ink);color:var(--rd-ink-2);
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
.rd-table td b,.rd-table .rd-table-name,
body:has(> nav.nav) table.spec td b{font:400 var(--rd-fs-400)/1.1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase}
.rd-table .rd-table-time{font:500 15px/1.4 var(--rd-f-mono);letter-spacing:.02em}
.rd-table .rd-table-price,
body:has(> nav.nav) table.spec .price-cell{
  text-align:right;color:var(--rd-ink);white-space:nowrap;font:400 30px/1 var(--rd-f-display);letter-spacing:.01em;
}

/* key / value rows with a dotted leader
     <dl class="rd-kv"><div><dt>Season</dt><dd>Nov 9 – Dec 17</dd></div>…</dl> */
.rd-kv{margin:0}
.rd-kv > div{display:flex;align-items:baseline;gap:10px;padding:8px 0}
.rd-kv dt{flex:none;color:var(--rd-ink-2);font:800 10.5px/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase}
.rd-kv > div::before{content:"";order:1;flex:1;min-width:18px;border-bottom:2px dotted var(--rd-rule-strong);transform:translateY(-3px)}
.rd-kv dd{order:2;margin:0;text-align:right;color:var(--rd-ink);font:500 15px/1.4 var(--rd-f-mono);letter-spacing:.02em}
.rd-dark .rd-kv dt,.rd-band .rd-kv dt{color:var(--rd-chalk)}
.rd-dark .rd-kv dd,.rd-band .rd-kv dd{color:var(--rd-white)}
.rd-dark .rd-kv > div::before,.rd-band .rd-kv > div::before{border-bottom-color:var(--rd-on-dark-rule)}

/* bullet list: square markers */
.rd-list{list-style:none;margin:0;padding:0}
.rd-list li{position:relative;padding:5px 0 5px 24px;font:500 16.5px/1.45 var(--rd-f-text)}
.rd-list li::before{content:"";position:absolute;left:2px;top:.72em;width:8px;height:8px;background:var(--rd-orange);outline:2px solid var(--rd-ink)}
.rd-dark .rd-list li::before,.rd-band .rd-list li::before{outline:0}

/* progress and scarcity bars */
.rd-progress{display:flex;align-items:center;gap:12px;font:700 14px/1 var(--rd-f-mono);color:var(--rd-ink)}
.rd-progress > i{flex:1;height:8px;background:var(--rd-rule)}
.rd-progress > i > i{display:block;height:100%;background:var(--rd-orange)}

/* ---------------------------------------------------------------------
   6.3  SPONSOR CELLS · VALUE LIST · SUCCESS BLOCK
   --------------------------------------------------------------------- */
body:has(> nav.nav) :is(.sponsor-wall,.sponsor-wall-3){display:grid;gap:0;padding:2px 0 0 2px}
body:has(> nav.nav) .sponsor-wall{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
body:has(> nav.nav) .sponsor-wall-3{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){ body:has(> nav.nav) .sponsor-wall-3{grid-template-columns:repeat(3,minmax(0,1fr))} }
body:has(> nav.nav) .sponsor-tile{
  min-width:0;aspect-ratio:3 / 2;padding:clamp(14px,2.4vw,28px);margin:-2px 0 0 -2px;
  background:var(--rd-paper);border:2px solid var(--rd-ink);border-radius:0;box-shadow:none;transform:none;transition:none;
}
body:has(> nav.nav) .sponsor-tile:hover{transform:none;box-shadow:none;border-color:var(--rd-ink)}
/* A cell takes its WIDTH from the grid column and its height from the 3:2 ratio — never the other way round.
   The logo is taken out of flow and fitted inside the padding, so a tall logo cannot make its cell taller
   (which the ratio then turned into a cell wider than its column: the old sideways scroll on phones). */
body:has(> nav.nav) .sponsor-tile{position:relative;justify-self:stretch;width:auto;min-height:0}
body:has(> nav.nav) .sponsor-tile img{
  position:absolute;inset:clamp(14px,2.4vw,28px);
  width:calc(100% - 2 * clamp(14px,2.4vw,28px));height:calc(100% - 2 * clamp(14px,2.4vw,28px));
  max-width:none;max-height:none;min-width:0;object-fit:contain;
}
body:has(> nav.nav) .sponsor-tile.add{background:var(--rd-paper-2);border:2px dashed var(--rd-ink);transition:background-color var(--rd-t-hover)}
body:has(> nav.nav) .sponsor-tile.add:hover{background:var(--rd-orange);border-color:var(--rd-ink)}
body:has(> nav.nav) .sponsor-ph,
body:has(> nav.nav) .sponsor-tile.add .sponsor-ph{
  color:var(--rd-ink);font:800 var(--rd-fs-label)/1.5 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}

body:has(> nav.nav) .value-grid{gap:0 clamp(20px,3vw,40px)}
body:has(> nav.nav) .value-tile{
  background:none;border-radius:0;border-top:3px solid var(--rd-ink);padding:16px 0 26px;text-align:left;
}
body:has(> nav.nav) .value-tile .vnum{color:var(--rd-ink);font:400 34px/1 var(--rd-f-display);letter-spacing:.01em;text-transform:uppercase}
body:has(> nav.nav) .value-tile h4{margin:10px 0 6px;font:400 22px/1.05 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase}
body:has(> nav.nav) .value-tile p{color:var(--rd-ink);font:500 16px/1.5 var(--rd-f-text)}

body:has(> nav.nav) .form-success{text-align:left;padding:28px 0}
body:has(> nav.nav) .form-success .big{font:400 var(--rd-fs-600)/.9 var(--rd-f-display);letter-spacing:.004em;text-transform:uppercase;color:var(--rd-ink)}
body:has(> nav.nav) .form-success p{margin-top:12px;color:var(--rd-ink);font:500 17px/1.5 var(--rd-f-text)}

/* =====================================================================
   LEGACY — marketing pages that have not been replaced yet.
   Keeps the un-rebuilt pages inside the system (square, ruled, no orange
   type on light, no circles). Each block dies when its page gets a
   pages/<name>.html with <body class="rd-mkt …">.
   ===================================================================== */
body:has(> nav.nav):not(.rd-mkt) :is(.rec,.pill,.featured-card,.reg-rotator,.contact-form,.sponsor-cta,.pu-stat,.pu-date,.fmt-chip,.live-badge,.reg-arrow,.coach-avatar){border-radius:0;box-shadow:none}
body:has(> nav.nav):not(.rd-mkt) :is(.rec,.pill,.sponsor-cta,.pu-date):hover{transform:none;box-shadow:none}

/* ---- home ---- */
body:has(> nav.nav):not(.rd-mkt) > .hero{
  background:var(--rd-ink);color:var(--rd-white);overflow:visible;
  padding:clamp(26px,4vw,48px) 0 clamp(30px,4.2vw,52px);border-bottom:var(--rd-lw) solid var(--rd-line);border-image:var(--rd-baseline);
}
body:has(> nav.nav):not(.rd-mkt) > .hero::before,
body:has(> nav.nav):not(.rd-mkt) > .hero::after{display:none}
body:has(> nav.nav):not(.rd-mkt) > .hero h1{
  margin-top:14px;color:var(--rd-white);
  font:400 clamp(72px,11.6vw,168px)/.88 var(--rd-f-display);letter-spacing:.004em;text-transform:uppercase;
}
body:has(> nav.nav):not(.rd-mkt) > .hero h1 .o{color:var(--rd-orange);background:none;padding:0}
body:has(> nav.nav):not(.rd-mkt) > .hero p{max-width:30em;margin-top:20px;color:var(--rd-chalk);font:500 clamp(17px,1.4vw,20px)/1.45 var(--rd-f-text)}
body:has(> nav.nav):not(.rd-mkt) > .hero .hero-stats{display:grid;grid-template-columns:auto auto auto;justify-content:space-between;gap:0;margin-top:32px;border-top:1px solid var(--rd-on-dark-rule)}
body:has(> nav.nav):not(.rd-mkt) > .hero .hero-stats > div{padding:12px clamp(10px,2vw,28px) 0;border-left:1px solid var(--rd-on-dark-rule)}
body:has(> nav.nav):not(.rd-mkt) > .hero .hero-stats > div:last-child{padding-right:0}
body:has(> nav.nav):not(.rd-mkt) > .hero .hero-stats > div:first-child{padding-left:0;border-left:0}
body:has(> nav.nav):not(.rd-mkt) > .hero .hero-stats b{color:var(--rd-white);font:400 clamp(30px,3.9vw,58px)/1 var(--rd-f-display);letter-spacing:.01em;white-space:nowrap}
body:has(> nav.nav):not(.rd-mkt) > .hero .hero-stats span{
  display:block;margin-top:6px;color:var(--rd-chalk);
  font:800 11px/1.35 var(--rd-f-text);font-stretch:112%;letter-spacing:.1em;text-transform:uppercase;
}
@media (max-width:479.98px){ body:has(> nav.nav):not(.rd-mkt) > .hero .hero-stats span{font-stretch:88%;letter-spacing:.05em} }
@media (min-width:960px){
  body:has(> nav.nav):not(.rd-mkt) > .hero .container{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(24px,4vw,64px);align-items:end}
  body:has(> nav.nav):not(.rd-mkt) > .hero .kicker{grid-column:1 / -1}
  body:has(> nav.nav):not(.rd-mkt) > .hero h1{grid-column:1;grid-row:2 / span 3}
  body:has(> nav.nav):not(.rd-mkt) > .hero p,
  body:has(> nav.nav):not(.rd-mkt) > .hero .hero-actions,
  body:has(> nav.nav):not(.rd-mkt) > .hero .hero-stats{grid-column:2}
}
body:has(> nav.nav):not(.rd-mkt) .marquee{display:none}

body:has(> nav.nav):not(.rd-mkt) .fit{background:transparent;padding:var(--rd-sec-y) 0 0}
body:has(> nav.nav):not(.rd-mkt) .fit-step .q{gap:12px;margin-bottom:14px;font:400 var(--rd-fs-500)/1 var(--rd-f-display);letter-spacing:.02em}
body:has(> nav.nav):not(.rd-mkt) .fit-step .q .n{
  width:34px;height:34px;padding-top:2px;border-radius:0;background:var(--rd-orange);color:var(--rd-ink);font:400 20px/1 var(--rd-f-display);
}
body:has(> nav.nav):not(.rd-mkt) .fit .pill{
  min-height:var(--rd-tap);padding:8px 20px;background:var(--rd-field);border:2px solid var(--rd-field-border);color:var(--rd-ink);
  font:800 16px/1.2 var(--rd-f-text);transform:none;transition:background-color var(--rd-t-hover),border-color var(--rd-t-hover),color var(--rd-t-hover);
}
body:has(> nav.nav):not(.rd-mkt) .fit .pill:hover{border-color:var(--rd-ink)}
body:has(> nav.nav):not(.rd-mkt) .fit .pill.on{background:var(--rd-ink);border-color:var(--rd-ink);color:var(--rd-white)}
body:has(> nav.nav):not(.rd-mkt) .fit .pill.on::before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;background:var(--rd-orange)}
body:has(> nav.nav):not(.rd-mkt) .fit-results.show{animation:none}
body:has(> nav.nav):not(.rd-mkt) .fit-results .heading{font:400 var(--rd-fs-500)/1 var(--rd-f-display);letter-spacing:.02em}
body:has(> nav.nav):not(.rd-mkt) .fit-results .heading span{color:var(--rd-ink);background:var(--rd-orange);padding:0 .12em}
body:has(> nav.nav):not(.rd-mkt) .rec-grid{gap:0;padding:2px 0 0 2px}
body:has(> nav.nav):not(.rd-mkt) .rec{margin:-2px 0 0 -2px;padding:20px;background:var(--rd-paper);border:2px solid var(--rd-ink)}
body:has(> nav.nav):not(.rd-mkt) .rec:hover{border-color:var(--rd-ink)}
body:has(> nav.nav):not(.rd-mkt) .rec .best{
  padding:4px 8px 3px;border-radius:0;background:var(--rd-orange);color:var(--rd-ink);
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;
}
body:has(> nav.nav):not(.rd-mkt) .rec h4{font:400 27px/1 var(--rd-f-display);letter-spacing:.012em}
body:has(> nav.nav):not(.rd-mkt) .rec p{color:var(--rd-ink);font:500 16px/1.5 var(--rd-f-text)}
body:has(> nav.nav):not(.rd-mkt) .rec a{
  min-height:44px;color:var(--rd-ink);font:800 13px/1 var(--rd-f-text);font-stretch:116%;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:7px;
}

/* up-next box → a black scoreboard block */
body:has(> nav.nav):not(.rd-mkt) .featured-card{
  gap:28px 40px;padding:clamp(22px,3.4vw,44px);background:var(--rd-ink);border:var(--rd-lw) solid var(--rd-line);
}
body:has(> nav.nav):not(.rd-mkt) .featured-card::after{display:none}
body:has(> nav.nav):not(.rd-mkt) .live-badge{
  gap:10px;margin-bottom:14px;padding:0;background:none;border:0;color:var(--rd-chalk);
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;
}
body:has(> nav.nav):not(.rd-mkt) .live-badge .dot{width:9px;height:9px;border-radius:0;animation:none}
body:has(> nav.nav):not(.rd-mkt) .featured-card h2{font:400 clamp(54px,8vw,120px)/.88 var(--rd-f-display);letter-spacing:.004em}
body:has(> nav.nav):not(.rd-mkt) .featured-card p{max-width:none;margin-top:14px;color:var(--rd-chalk);font:500 13px/1.4 var(--rd-f-mono);letter-spacing:.06em;text-transform:uppercase}
body:has(> nav.nav):not(.rd-mkt) .featured-left{min-width:0}
body:has(> nav.nav):not(.rd-mkt) .featured-meta{display:inline-flex;flex-wrap:nowrap;gap:0;margin-top:22px;border:2px solid var(--rd-line);max-width:100%}
body:has(> nav.nav):not(.rd-mkt) .featured-meta > div{display:flex;flex-direction:column-reverse;justify-content:flex-end;min-width:0;padding:10px clamp(10px,2.4vw,18px) 8px;white-space:nowrap}
body:has(> nav.nav):not(.rd-mkt) .featured-meta > div + div{border-left:2px solid var(--rd-line);background:var(--rd-orange)}
body:has(> nav.nav):not(.rd-mkt) .featured-meta div b{color:var(--rd-white);font:400 clamp(26px,4vw,56px)/1 var(--rd-f-display);letter-spacing:.01em;text-transform:uppercase;font-variant-numeric:tabular-nums}
body:has(> nav.nav):not(.rd-mkt) .featured-meta div span{color:var(--rd-chalk);font:800 10.5px/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.14em}
body:has(> nav.nav):not(.rd-mkt) .featured-meta > div + div b,
body:has(> nav.nav):not(.rd-mkt) .featured-meta > div + div span{color:var(--rd-ink)}
@media (max-width:639.98px){
  /* the card is a wrapping column flexbox on phones, so its children must not be wider than the card */
  body:has(> nav.nav):not(.rd-mkt) .featured-card > *{max-width:100%}
  body:has(> nav.nav):not(.rd-mkt) .featured-meta > div{padding-inline:10px}
  body:has(> nav.nav):not(.rd-mkt) .featured-meta div b{font-size:24px}
  body:has(> nav.nav):not(.rd-mkt) .featured-meta div span{font-size:11px;font-stretch:92%;letter-spacing:.06em}
}
body:has(> nav.nav):not(.rd-mkt) .featured-right .btn{min-height:60px;min-width:min(220px,100%)}
body:has(> nav.nav):not(.rd-mkt) .reg-track{transition-duration:var(--rd-t-wipe)}
body:has(> nav.nav):not(.rd-mkt) .reg-controls{justify-content:flex-start;gap:16px;margin-top:14px}
body:has(> nav.nav):not(.rd-mkt) .reg-arrow{width:44px;height:44px;background:transparent;border:2px solid var(--rd-ink);color:var(--rd-ink);font:800 20px/1 var(--rd-f-text)}
body:has(> nav.nav):not(.rd-mkt) .reg-arrow:hover{background:var(--rd-ink);color:var(--rd-white)}
body:has(> nav.nav):not(.rd-mkt) .reg-dots{gap:10px}
body:has(> nav.nav):not(.rd-mkt) .reg-dots button{width:12px;height:12px;border-radius:0;background:var(--rd-ink-2)}
body:has(> nav.nav):not(.rd-mkt) .reg-dots button.on{width:12px;background:var(--rd-orange);outline:2px solid var(--rd-ink)}

/* sponsor row on the black band */
body:has(> nav.nav):not(.rd-mkt) .sponsor-five{gap:2px;margin-top:28px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:861px){
  body:has(> nav.nav):not(.rd-mkt) .sponsor-five{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.15fr) repeat(3,minmax(0,1fr))}
}
body:has(> nav.nav):not(.rd-mkt) .sponsor-five .sponsor-tile{margin:0;border:0}
@media (min-width:861px){
  /* seven cells in one row: every cell is as tall as the orange one in the middle, and exactly one column wide */
  body:has(> nav.nav):not(.rd-mkt) .sponsor-five .sponsor-tile{aspect-ratio:auto;min-height:112px}
  body:has(> nav.nav):not(.rd-mkt) .sponsor-five .sponsor-tile img{inset:14px;width:calc(100% - 28px);height:calc(100% - 28px)}
}
body:has(> nav.nav):not(.rd-mkt) .sponsor-five .sponsor-tile.open{background:transparent;border:2px dashed rgba(255,255,255,.42)}
body:has(> nav.nav):not(.rd-mkt) .sponsor-five .sponsor-tile.open:hover{border-color:var(--rd-white)}
body:has(> nav.nav):not(.rd-mkt) .sponsor-five .sponsor-tile.open .sponsor-ph{color:var(--rd-white)}
body:has(> nav.nav):not(.rd-mkt) .sponsor-five .sponsor-cta{
  background:var(--rd-orange);color:var(--rd-ink);font:400 24px/1 var(--rd-f-display);letter-spacing:.012em;transition:background-color var(--rd-t-hover);
}
body:has(> nav.nav):not(.rd-mkt) .sponsor-five .sponsor-cta small{opacity:1;font:800 10.5px/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.14em}
body:has(> nav.nav):not(.rd-mkt) .sponsor-five .sponsor-cta:hover{background:var(--rd-white);color:var(--rd-ink)}

/* ---- about ---- */
body:has(> nav.nav):not(.rd-mkt) .coach-avatar{display:none}
body:has(> nav.nav):not(.rd-mkt) .coach-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:2px 0 0 2px;justify-content:normal}
body:has(> nav.nav):not(.rd-mkt) .coach-grid .card{flex:none;margin:-2px 0 0 -2px;padding-top:clamp(18px,3vw,30px);text-align:left;align-items:flex-start}
@media (min-width:640px){ body:has(> nav.nav):not(.rd-mkt) .coach-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:960px){ body:has(> nav.nav):not(.rd-mkt) .coach-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
body:has(> nav.nav):not(.rd-mkt) .facility-stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:28px;justify-content:normal;text-align:left;
  border-top:2px solid var(--rd-ink);
}
body:has(> nav.nav):not(.rd-mkt) .facility-stats > div{padding:14px 12px 14px 0;border-bottom:1px solid var(--rd-ink)}
body:has(> nav.nav):not(.rd-mkt) .facility-stats b{color:var(--rd-ink);font:400 clamp(40px,4.4vw,64px)/1 var(--rd-f-display);letter-spacing:.01em}
body:has(> nav.nav):not(.rd-mkt) .facility-stats span{
  display:block;margin-top:6px;color:var(--rd-ink-2);font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;
}
@media (min-width:960px){
  body:has(> nav.nav):not(.rd-mkt) .facility-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  body:has(> nav.nav):not(.rd-mkt) .facility-stats > div + div{padding-left:20px;border-left:1px solid var(--rd-ink)}
}
body:has(> nav.nav):not(.rd-mkt) .sp-pitch{gap:0 clamp(20px,3vw,40px)}

/* ---- contact ---- */
body:has(> nav.nav):not(.rd-mkt) .contact-layout{gap:clamp(28px,4vw,56px)}
body:has(> nav.nav):not(.rd-mkt) .contact-form{
  min-width:min(320px,100%);padding:clamp(18px,3vw,30px);background:var(--rd-paper);border:2px solid var(--rd-ink);
}
body:has(> nav.nav):not(.rd-mkt) .contact-form .submit-btn{min-height:64px;font-size:16px}
/* the page colours one link with an inline var(--orange); on the floor that has to resolve to ink */
body:has(> nav.nav):not(.rd-mkt) .info-block{--orange:var(--rd-ink);margin:0;padding:16px 0 18px;border-top:2px solid var(--rd-ink)}
body:has(> nav.nav):not(.rd-mkt) .info-block:first-child{border-top-width:3px}
body:has(> nav.nav):not(.rd-mkt) .info-block h3{
  margin-bottom:8px;color:var(--rd-ink-2);font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;
}
body:has(> nav.nav):not(.rd-mkt) .info-block p,
body:has(> nav.nav):not(.rd-mkt) .info-block a{color:var(--rd-ink);font:500 17px/1.5 var(--rd-f-text);overflow-wrap:anywhere}
body:has(> nav.nav):not(.rd-mkt) .info-block a{text-decoration:underline;text-decoration-color:var(--rd-orange);text-decoration-thickness:2px;text-underline-offset:4px}

/* ---- leagues / tournaments ---- */
body:has(> nav.nav):not(.rd-mkt) :is(.lg-row-label,.pu-label){
  color:var(--rd-ink-2);font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;
}
body:has(> nav.nav):not(.rd-mkt) :is(.lg-row-label,.pu-label)::after{height:2px;background:var(--rd-ink)}
body:has(> nav.nav):not(.rd-mkt) :is(.lg-grid,.tn-grid,.pu-info){gap:0;padding:2px 0 0 2px}
body:has(> nav.nav):not(.rd-mkt) :is(.lg-grid,.tn-grid,.pu-info) > *{margin:-2px 0 0 -2px;min-width:0}
body:has(> nav.nav):not(.rd-mkt) .card .fmt-chip{padding:3px 7px 2px;background:var(--rd-ink);color:var(--rd-white);font:400 15px/1.2 var(--rd-f-display);letter-spacing:.04em}
body:has(> nav.nav):not(.rd-mkt) .card-sched{color:var(--rd-ink);font:700 15px/1.3 var(--rd-f-text);text-align:left;text-decoration:underline;text-decoration-color:var(--rd-orange);text-decoration-thickness:2px;text-underline-offset:4px}
body:has(> nav.nav):not(.rd-mkt) .pu-stats{gap:0;padding:2px 0 0 2px}
body:has(> nav.nav):not(.rd-mkt) .pu-stat{margin:-2px 0 0 -2px;padding:16px 16px 14px;background:var(--rd-ink);border:2px solid var(--rd-line);text-align:left}
body:has(> nav.nav):not(.rd-mkt) .pu-stat b{color:var(--rd-white);font:400 clamp(40px,5vw,72px)/.9 var(--rd-f-display);letter-spacing:.01em;text-transform:uppercase}
body:has(> nav.nav):not(.rd-mkt) .pu-stat span{color:var(--rd-chalk);font:800 10.5px/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.14em}
body:has(> nav.nav):not(.rd-mkt) .pu-date{background:var(--rd-field);border:2px solid var(--rd-ink);transition:background-color var(--rd-t-hover),color var(--rd-t-hover)}
body:has(> nav.nav):not(.rd-mkt) .pu-date:hover{background:var(--rd-ink);border-color:var(--rd-ink);color:var(--rd-white)}
body:has(> nav.nav):not(.rd-mkt) .pu-date .mo{color:inherit;font:800 10.5px/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.14em}
body:has(> nav.nav):not(.rd-mkt) .pu-date .dy{font:400 52px/1 var(--rd-f-display)}
body:has(> nav.nav):not(.rd-mkt) .pu-date .wd{font:600 14px/1.3 var(--rd-f-mono)}
body:has(> nav.nav):not(.rd-mkt) .pu-date .go{color:inherit;font:800 12.5px/1.3 var(--rd-f-text)}
body:has(> nav.nav):not(.rd-mkt) .pu-date.past{opacity:1;background:var(--rd-hatch);border-color:transparent;color:var(--rd-hatch-ink)}
body:has(> nav.nav):not(.rd-mkt) .tn-date{font:400 34px/1 var(--rd-f-display);color:var(--rd-ink)}
body:has(> nav.nav):not(.rd-mkt) .card.tba .tn-date{color:var(--rd-ink-3)}
body:has(> nav.nav):not(.rd-mkt) .card.tba .card-cta{background:var(--rd-hatch);color:var(--rd-hatch-ink);cursor:default}

/* ---- 40-forms.css ---- */
/* =====================================================================
   40-forms.css — DESIGN.md 5.10–5.14: the shared form pieces.
   Fields, labels, help and error text are mapped for EVERY public page
   here; page files (50/55/60) only add what is particular to their page.

   Scopes (DESIGN.md 6.1):
     ALL   body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)))
           = MAIN + RENT + REG + DONE + HUB at the weight of MAIN (0,1,2); id-scoped page rules out-rank it.
     LOW   body:where(:has(> nav.nav),:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))
           the same pages at the weight of one element — for defaults a page's own class rule should keep beating.
   ===================================================================== */

/* ---------------------------------------------------------------------
   5.11  LABEL
   A "field label" is: a <label for> with no class that is not the visible half of a
   custom radio/checkbox (input + label); a caption label with no attributes and no control
   inside it ("Gender *"); label.fld / label.lbl; and the <span> of account.html's .field.
   Labels that wrap a radio or checkbox are rows, not captions, and are left alone.
   --------------------------------------------------------------------- */
.rd-label,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) label:where([for]:not([class]):not([type="radio"] + label):not([type="checkbox"] + label), :not([for]):not([class]):not([style]):not(:has(input,select,textarea)), .fld, .lbl),
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) .field > span{
  display:block;margin:16px 0 6px;color:var(--rd-ink-2);
  font:800 13px/1.3 var(--rd-f-text);font-stretch:112%;letter-spacing:.08em;text-transform:uppercase;
}
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) .field > span{margin-top:0}
.rd-label .rd-req,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) .req,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) label.fld .o{
  color:var(--rd-warn);background:none;padding:0;
}

/* ---------------------------------------------------------------------
   5.11  INPUT / SELECT / TEXTAREA
   --------------------------------------------------------------------- */
.rd-input,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) :is(input:where(:not([type="checkbox"],[type="radio"],[type="hidden"],[type="file"],[type="range"],[type="submit"],[type="button"],[type="image"])),select,textarea){
  width:100%;min-width:0;height:54px;padding:0 14px;
  background-color:var(--rd-field);color:var(--rd-ink);
  border:2px solid var(--rd-field-border);border-radius:0;box-shadow:none;outline:0;
  font:500 17px/1.25 var(--rd-f-text);letter-spacing:0;text-transform:none;
  -webkit-appearance:none;appearance:none;
  transition:border-color var(--rd-t-hover),box-shadow var(--rd-t-hover);
}
.rd-input::placeholder,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) :is(input,textarea)::placeholder{color:var(--rd-ink-3);opacity:1}
textarea.rd-input,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) textarea{
  height:auto;min-height:120px;padding:14px;line-height:1.5;resize:vertical;
}
select.rd-input,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) select{
  padding-right:40px;cursor:pointer;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.2l5 5 5-5' fill='none' stroke='%230E0E10' stroke-width='2.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;
}
.rd-input:hover,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) :is(input:where(:not([type="checkbox"],[type="radio"],[type="hidden"],[type="file"],[type="range"],[type="submit"],[type="button"],[type="image"])),select,textarea):hover{
  border-color:var(--rd-ink);
}
.rd-input:focus,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) :is(input:where(:not([type="checkbox"],[type="radio"],[type="hidden"],[type="file"],[type="range"],[type="submit"],[type="button"],[type="image"])),select,textarea):focus{
  outline:0;border-color:var(--rd-ink);box-shadow:inset 0 -4px 0 var(--rd-orange);
}
.rd-input:user-invalid,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) :is(input:where(:not([type="checkbox"],[type="radio"],[type="hidden"],[type="file"],[type="range"],[type="submit"],[type="button"],[type="image"])),select,textarea):user-invalid{
  border-color:var(--rd-err);box-shadow:inset 0 -4px 0 var(--rd-err);
}
.rd-input:disabled,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) :is(input:where(:not([type="checkbox"],[type="radio"],[type="hidden"],[type="file"],[type="range"],[type="submit"],[type="button"],[type="image"])),select,textarea):disabled{
  background-color:var(--rd-paper-2);color:var(--rd-ink-3);-webkit-text-fill-color:var(--rd-ink-3);border-color:var(--rd-rule-strong);opacity:1;cursor:not-allowed;
}
/* a field standing on black (newsletter band): the white box is its own boundary */
.rd-dark .rd-input,.rd-band .rd-input{border-color:var(--rd-white)}
.rd-dark .rd-input:focus,.rd-band .rd-input:focus{border-color:var(--rd-white)}

/* native checkbox / radio */
.rd-check,
body:where(:has(> nav.nav),:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) input:where([type="checkbox"],[type="radio"]){
  flex:none;width:22px;height:22px;margin:0;padding:0;accent-color:var(--rd-ink);cursor:pointer;
}
/* a row holding one: at least 44px tall
     <label class="rd-checkrow"><input type="checkbox"> I agree…</label> */
.rd-checkrow{display:flex;align-items:center;gap:12px;min-height:44px;padding:4px 0;font:500 16px/1.4 var(--rd-f-text);cursor:pointer}

/* ---------------------------------------------------------------------
   5.11  HELP · ERROR · SUCCESS TEXT
   --------------------------------------------------------------------- */
.rd-help,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) :is(.hint,.muted,.form-sub,.fine){
  color:var(--rd-ink-2);font:500 15px/1.45 var(--rd-f-text);
}
.rd-err,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) .err,
body:has(> nav.nav) .modal-note.err{color:var(--rd-err);font:700 15px/1.4 var(--rd-f-text)}
.rd-err:not(:empty)::before,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) .err:not(:empty)::before,
body:has(> nav.nav) .modal-note.err:not(:empty)::before{
  content:"";display:inline-block;width:10px;height:10px;margin-right:8px;background:var(--rd-err);
}
.rd-ok,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) :is(.ok,.mem-ok){color:var(--rd-ok);font:700 15px/1.4 var(--rd-f-text)}

/* ---------------------------------------------------------------------
   5.11  FIELD ROWS — two columns from 640px, one below
     <div class="rd-fields"><div class="rd-field">label + input</div>…</div>
     .rd-field--wide spans both columns
   --------------------------------------------------------------------- */
.rd-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:0 14px}
.rd-field{min-width:0}
.rd-field > .rd-label:first-child{margin-top:14px}
@media (min-width:640px){
  .rd-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rd-field--wide{grid-column:1 / -1}
}
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) .row{display:flex;flex-direction:column;gap:0}
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) .row > div{flex:1 1 0;min-width:0}
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) .row2{display:grid;grid-template-columns:minmax(0,1fr);gap:0 14px}
@media (min-width:640px){
  body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) .row{flex-direction:row;gap:14px}
  body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) .row2{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------------------------------------------------------------------
   6.2  Emoji icon spans and decorative pseudo-elements: hidden
   (emoji a script prints as plain text stay)
   --------------------------------------------------------------------- */
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) :is(.card h2 .ic,.drow .em,.scard .em,.sesh-item .em,.svc .ic,.addon .tee,.scrollcue){display:none}
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) :is(.paybox,.summary)::after{display:none}

/* ---------------------------------------------------------------------
   5.12  STEP HEADER
     <div class="rd-step"><b>1</b><h3>Session type</h3></div>
   --------------------------------------------------------------------- */
.rd-step{display:flex;align-items:center;gap:12px;margin:28px 0 14px}
.rd-step > b{
  flex:none;display:grid;place-items:center;width:34px;height:34px;padding-top:2px;
  background:var(--rd-orange);color:var(--rd-ink);font:400 20px/1 var(--rd-f-display);
}
.rd-step > :is(h2,h3,h4,span){margin:0;padding-top:2px;font:400 var(--rd-fs-500)/1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase}
.rd-step::after{content:"";flex:1;min-width:12px;height:2px;background:var(--rd-rule)}
.rd-step > small{order:3;color:var(--rd-ink-2);font:700 14px/1.2 var(--rd-f-text)}

/* ---------------------------------------------------------------------
   5.10  CHIPS · PILLS · CELLS
   --------------------------------------------------------------------- */
/* chips: any <button>/<a>/<label> inside .rd-chips, or .rd-chip on its own.
   Selected = .on, .sel, [aria-pressed="true"], or a checked input before a label. */
.rd-chips{display:flex;flex-wrap:wrap;gap:8px}
.rd-chips--2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.rd-chip,
.rd-chips > :is(button,a,label){
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--rd-tap);padding:8px 18px;margin:0;
  background:var(--rd-field);color:var(--rd-ink);border:2px solid var(--rd-field-border);border-radius:0;box-shadow:none;transform:none;
  font:800 16px/1.2 var(--rd-f-text);letter-spacing:0;text-transform:none;text-align:center;cursor:pointer;
  transition:background-color var(--rd-t-hover),border-color var(--rd-t-hover),color var(--rd-t-hover);
  -webkit-tap-highlight-color:transparent;
}
.rd-chip::before,
.rd-chips > :is(button,a,label)::before{content:none}
.rd-chip:hover,
.rd-chips > :is(button,a,label):hover{border-color:var(--rd-ink);transform:none}
.rd-chip:is(.on,.sel,[aria-pressed="true"]),
.rd-chips > :is(button,a,label):is(.on,.sel,[aria-pressed="true"]),
.rd-chips > input:checked + label{background:var(--rd-ink);border-color:var(--rd-ink);color:var(--rd-white)}
/* on black (the hero quiz) */
.rd-dark .rd-chip,.rd-band .rd-chip,.rd-hero-text .rd-chip,
:is(.rd-dark,.rd-band,.rd-hero-text) .rd-chips > :is(button,a,label){background:transparent;border-color:rgba(255,255,255,.42);color:var(--rd-white)}
.rd-dark .rd-chip:hover,.rd-band .rd-chip:hover,.rd-hero-text .rd-chip:hover,
:is(.rd-dark,.rd-band,.rd-hero-text) .rd-chips > :is(button,a,label):hover{background:var(--rd-white);border-color:var(--rd-white);color:var(--rd-ink)}
.rd-dark .rd-chip:is(.on,.sel,[aria-pressed="true"]),.rd-band .rd-chip:is(.on,.sel,[aria-pressed="true"]),.rd-hero-text .rd-chip:is(.on,.sel,[aria-pressed="true"]),
:is(.rd-dark,.rd-band,.rd-hero-text) .rd-chips > :is(button,a,label):is(.on,.sel,[aria-pressed="true"]){background:var(--rd-orange);border-color:var(--rd-orange);color:var(--rd-ink)}

/* session-type card
     <button class="rd-opt"><span class="rd-opt-name">1-on-1</span><span class="rd-price">$65</span><span class="rd-price-note">members $55</span></button> */
.rd-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:640px){ .rd-opts{grid-template-columns:repeat(4,minmax(0,1fr))} }
.rd-opt{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:104px;padding:12px 12px 11px;
  background:var(--rd-field);color:var(--rd-ink);border:2px solid var(--rd-field-border);border-radius:0;text-align:left;cursor:pointer;
  transition:background-color var(--rd-t-hover),border-color var(--rd-t-hover),color var(--rd-t-hover);
}
.rd-opt::after{
  content:"";position:absolute;right:11px;top:12px;width:16px;height:16px;border:2px solid var(--rd-rule-strong);border-radius:var(--rd-r-round);
}
.rd-opt-name{padding-right:24px;font:800 16.5px/1.15 var(--rd-f-text)}
.rd-opt .rd-price{margin-top:auto;padding-top:10px}
.rd-opt:hover{border-color:var(--rd-ink)}
.rd-opt:is(.on,.sel,[aria-pressed="true"]),
input:checked + .rd-opt{background:var(--rd-ink);border-color:var(--rd-ink);color:var(--rd-white)}
.rd-opt:is(.on,.sel,[aria-pressed="true"]) .rd-price,
input:checked + .rd-opt .rd-price{color:var(--rd-orange)}
.rd-opt:is(.on,.sel,[aria-pressed="true"]) .rd-price-note,
input:checked + .rd-opt .rd-price-note{color:var(--rd-chalk)}
.rd-opt:is(.on,.sel,[aria-pressed="true"])::after,
input:checked + .rd-opt::after{
  border-color:var(--rd-orange);
  background:var(--rd-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3l2.4 2.3 4.8-5' fill='none' stroke='%230E0E10' stroke-width='2'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
input:focus-visible + .rd-opt{outline:3px solid var(--rd-ring);outline-offset:3px}

/* day tiles — a wrapping grid, never a sideways scroller */
.rd-days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (min-width:640px){ .rd-days{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))} }
.rd-day{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:66px;padding:6px 4px;
  background:var(--rd-field);color:var(--rd-ink);border:2px solid var(--rd-field-border);border-radius:0;cursor:pointer;
  transition:background-color var(--rd-t-hover),border-color var(--rd-t-hover),color var(--rd-t-hover);
}
.rd-day em{font:800 10px/1.3 var(--rd-f-text);font-stretch:125%;font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--rd-ink-2)}
.rd-day strong{font:400 24px/1.05 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase}
.rd-day:hover{border-color:var(--rd-ink)}
.rd-day:is(.on,[aria-pressed="true"]){background:var(--rd-ink);border-color:var(--rd-ink);color:var(--rd-white)}
.rd-day:is(.on,[aria-pressed="true"]) em{color:var(--rd-orange)}
.rd-day:disabled{background:var(--rd-hatch);border-color:transparent;color:var(--rd-hatch-ink);cursor:not-allowed}
.rd-day:disabled em{color:var(--rd-hatch-ink)}

/* slot cells: every state has its own word and its own marker */
.rd-slot{
  display:flex;align-items:center;justify-content:center;gap:8px;min-height:var(--rd-tap);width:100%;padding:4px 8px;
  background:var(--rd-field);color:var(--rd-ink);border:2px solid var(--rd-ink);border-radius:0;
  font:800 16px/1.15 var(--rd-f-text);cursor:pointer;transition:background-color var(--rd-t-hover),color var(--rd-t-hover);
}
.rd-slot::before{content:"";flex:none;width:8px;height:8px;background:var(--rd-orange)}
.rd-slot:hover{background:var(--rd-ink);color:var(--rd-white)}
.rd-slot:is(.picked,[aria-pressed="true"]),.rd-slot:is(.picked,[aria-pressed="true"]):hover{background:var(--rd-orange);color:var(--rd-ink)}
.rd-slot:is(.picked,[aria-pressed="true"])::before{
  width:12px;height:7px;background:none;border-left:3px solid var(--rd-ink);border-bottom:3px solid var(--rd-ink);transform:rotate(-45deg) translate(1px,-2px);
}
.rd-slot:is(.taken,:disabled),.rd-slot:is(.taken,:disabled):hover{
  background:var(--rd-hatch);border-color:transparent;color:var(--rd-hatch-ink);font-weight:650;cursor:not-allowed;
}
.rd-slot:is(.taken,:disabled)::before{display:none}
.rd-slot.wait{flex-direction:column;gap:1px;background:var(--rd-paper);border-style:dashed}
.rd-slot.wait::before{display:none}
.rd-slot.wait:hover{background:var(--rd-paper);color:var(--rd-ink);border-style:solid}
.rd-slot.wait small{font:600 13px/1.2 var(--rd-f-text);color:var(--rd-ink-2);text-decoration:underline;text-decoration-color:var(--rd-orange);text-decoration-thickness:2px}
/* legend under a slot grid: the samples are drawn exactly like the cells */
.rd-legend-row{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px;color:var(--rd-ink-2);font:600 13.5px/1.3 var(--rd-f-text)}
.rd-legend-row > span{display:inline-flex;align-items:center;gap:8px}
.rd-legend-row i{flex:none;width:14px;height:14px;background:var(--rd-field);border:2px solid var(--rd-ink)}
.rd-legend-row i.is-picked{background:var(--rd-orange)}
.rd-legend-row i.is-taken{background:var(--rd-hatch);border-color:transparent}

/* status tag */
.rd-tag{
  display:inline-block;padding:4px 8px;border:1px solid currentColor;background:var(--rd-paper-2);color:var(--rd-ink);
  font:800 10.5px/1.2 var(--rd-f-text);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;vertical-align:middle;
}
.rd-tag--paid{background:var(--rd-ok-bg);color:var(--rd-ok)}
.rd-tag--due{background:var(--rd-warn-bg);color:var(--rd-warn)}
.rd-tag--cancelled{background:var(--rd-err-bg);color:var(--rd-err)}
/* "Registration open" flag: ink paint on an orange slab */
.rd-flag{
  display:inline-block;padding:4px 8px 3px;background:var(--rd-orange);color:var(--rd-ink);
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
/* the hidden attribute wins over the display these tokens set */
.rd-flag[hidden],.rd-tag[hidden],.rd-fmt[hidden]{display:none}
/* format token: 5x5 / 3x3 */
.rd-fmt{
  display:inline-block;padding:3px 7px 2px;background:var(--rd-ink);color:var(--rd-white);
  font:400 15px/1.2 var(--rd-f-display);letter-spacing:.04em;text-transform:uppercase;
}
.rd-dark .rd-fmt,.rd-band .rd-fmt,.rd-board .rd-fmt,.rd-hero-text .rd-fmt{background:var(--rd-orange);color:var(--rd-ink)}

/* ---------------------------------------------------------------------
   5.13  SHEET and the form TICKET
     <div class="rd-sheet">…</div>                         a paper sheet on the floor
     <div class="rd-sheets rd-sheets--3">sheets…</div>      neighbours share borders (ruled grid)

     <form class="rd-sheet rd-sheet--ticket">
       <div class="rd-sheet-head"><span>Send an inquiry</span><span>We reply fast</span></div>
       <div class="rd-sheet-body">steps, fields…</div>
       <div class="rd-sheet-stub">receipt slip / button</div>
     </form>
   --------------------------------------------------------------------- */
.rd-sheet{
  position:relative;background:var(--rd-paper);color:var(--rd-ink);border:2px solid var(--rd-ink);border-radius:0;box-shadow:none;
  padding:clamp(18px,3vw,30px);
}
.rd-sheet--sunk{background:var(--rd-paper-2)}
.rd-sheets{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:2px 0 0 2px}
.rd-sheets > *{margin:-2px 0 0 -2px;min-width:0}
@media (min-width:640px){
  .rd-sheets--2,.rd-sheets--3,.rd-sheets--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:960px){
  .rd-sheets--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rd-sheets--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
a.rd-sheet{display:block;text-decoration:none}
a.rd-sheet::after{
  content:"";position:absolute;left:-2px;right:-2px;top:-2px;height:6px;background:var(--rd-orange);
  transform:scaleX(0);transform-origin:left;transition:transform var(--rd-t-wipe) var(--rd-ease-out);
}
a.rd-sheet:hover::after,a.rd-sheet:focus-visible::after{transform:scaleX(1)}

.rd-sheet--ticket{--rd-stub-x:clamp(16px,3vw,28px);max-width:var(--rd-sheet);padding:0}
.rd-sheet-head{
  display:flex;align-items:center;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;
  padding:13px var(--rd-stub-x,16px);background:var(--rd-ink);color:var(--rd-white);
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
.rd-sheet-head > :last-child:not(:first-child){color:var(--rd-orange)}
.rd-sheet-body{padding:4px var(--rd-stub-x,16px) clamp(22px,3vw,30px)}
.rd-sheet-body > .rd-step:first-child{margin-top:22px}
.rd-sheet-stub{
  position:relative;margin:0 var(--rd-stub-x,16px);padding:20px 0 clamp(18px,3vw,28px);
  border-top:2px dashed var(--rd-rule-strong);
}
/* the punched notch at each end of the perforation: a half-disc of floor with an ink edge, over the sheet's side border */
.rd-sheet-stub::before,
.rd-sheet-stub::after{
  content:"";position:absolute;top:-12px;width:22px;height:22px;box-sizing:border-box;
  background:var(--rd-notch,var(--rd-maple));border:2px solid var(--rd-ink);border-radius:var(--rd-r-round);
}
.rd-sheet-stub::before{left:calc(-1 * var(--rd-stub-x,16px) - 12px);clip-path:inset(0 0 0 50%)}
.rd-sheet-stub::after{right:calc(-1 * var(--rd-stub-x,16px) - 12px);clip-path:inset(0 50% 0 0)}

/* hold-clock note
     <p class="rd-hold"><b>20:00</b><span><strong>We hold your spot for 20 minutes.</strong> …</span></p> */
.rd-hold{display:flex;align-items:flex-start;gap:14px;margin:16px 0 0;font:500 15px/1.45 var(--rd-f-text);color:var(--rd-ink)}
.rd-hold > b{
  flex:none;padding:7px 9px 4px;border:2px solid var(--rd-ink);
  font:400 34px/1 var(--rd-f-display);letter-spacing:.02em;font-variant-numeric:tabular-nums;
}
.rd-hold strong{font-weight:800}

/* ---------------------------------------------------------------------
   5.14  OVERLAYS THAT ALREADY EXIST ON THE PAGES — layer order only (their look is in 50/60)
   Every pop-up sits above the sticky nav (100) and the mobile menu (110); on /account the page gives its
   overlay z-index 50, which would leave the nav on top of it. Each one also stops above a bar the host
   fixes to the bottom edge (--rd-strip-h, 0 on the real site), so a docked dialog's buttons are never under it.
   --------------------------------------------------------------------- */
body:has(> nav.nav) .modal-overlay,
body:has(> nav.nav):has(.acct) > .modal,
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) .waiver-overlay{
  z-index:var(--rd-z-modal);bottom:var(--rd-strip-h,0px);
}
body:is(:has(> nav.nav),:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub))) .toast,
.rd-toast{margin-bottom:var(--rd-strip-h,0px)}

/* ---------------------------------------------------------------------
   5.14  MODAL
     <div class="rd-modal" hidden>               overlay (add .is-open or remove [hidden])
       <div class="rd-modal-box" role="dialog" aria-modal="true">
         <button class="rd-modal-x" aria-label="Close">×</button>
         <h3>Title</h3> … <div class="rd-modal-actions">cancel (ghost) + confirm (primary)</div>
       </div>
     </div>
   --------------------------------------------------------------------- */
.rd-modal{
  position:fixed;inset:0 0 var(--rd-strip-h,0px) 0;z-index:var(--rd-z-modal);display:flex;align-items:flex-end;justify-content:center;padding:16px;
  background:rgba(14,14,16,.78);animation:rd-modal-in var(--rd-t-panel) var(--rd-ease-out) both;
}
.rd-modal[hidden]{display:none}
.rd-modal-box{
  position:relative;width:100%;max-width:520px;max-height:92vh;overflow:auto;padding:24px 20px;
  background:linear-gradient(var(--rd-orange),var(--rd-orange)) 0 0 / 100% 6px no-repeat var(--rd-paper);
  color:var(--rd-ink);border:2px solid var(--rd-ink);border-radius:0;box-shadow:none;
  animation:rd-modal-up var(--rd-t-panel) var(--rd-ease-out) both;
}
.rd-modal-box > :is(h2,h3):first-of-type{padding-right:48px;font:400 var(--rd-fs-500)/1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase}
.rd-modal-x{
  position:absolute;right:8px;top:14px;display:grid;place-items:center;width:44px;height:44px;padding:0;
  background:transparent;color:var(--rd-ink);border:2px solid var(--rd-ink);border-radius:0;font:700 22px/1 var(--rd-f-text);cursor:pointer;
  transition:background-color var(--rd-t-hover),color var(--rd-t-hover);
}
.rd-modal-x:hover{background:var(--rd-ink);color:var(--rd-white)}
.rd-modal-actions{display:flex;gap:12px;margin-top:20px}
.rd-modal-actions > *{flex:1 1 0;min-width:0}
@media (max-width:639.98px){
  .rd-modal-actions > .rd-btn{padding-inline:8px;font-size:13px;font-stretch:108%;letter-spacing:.06em}
}
@media (min-width:640px){
  .rd-modal{align-items:center}
  .rd-modal-box{padding:32px 30px}
}
@keyframes rd-modal-in{from{opacity:0}to{opacity:1}}
@keyframes rd-modal-up{from{transform:translateY(12px)}to{transform:none}}


/* =====================================================================
   Finishing round — sign-up family fixes (DESIGN 6.8). These pages' own sheet lives in 60-signup.css, which loads
   AFTER this file, so every rule here carries html:not(#rd) to out-rank it without !important. Each one is the
   smallest change that fixes one defect; the look of the ticket is otherwise untouched.
   ===================================================================== */

/* ---- "What to bring" / "What's next": labels, not buttons ----
   They were 1px-boxed chips the size of the buttons right under them, so on a phone they read as controls that do
   nothing. Now a bullet list (DESIGN 5.16): an 8px orange square with an ink outline, the words in ink, no box. */
html:not(#rd) body:has(#regForm) .bring,
html:not(#rd) body:has(.bigcheck):not(#rd) :is(.bring,.chips){display:flex;flex-wrap:wrap;gap:6px 24px}
html:not(#rd) body:has(#regForm) .bring > span:not(.rd-emo),
html:not(#rd) body:has(#regForm) .bring > span:not(.rd-emo):hover,
html:not(#rd) body:has(.bigcheck):not(#rd) :is(.bring,.chips) > span:not(.rd-emo){
  position:relative;display:block;padding:4px 0 4px 20px;background:none;border:0;border-radius:0;box-shadow:none;transform:none;
  color:var(--rd-ink);font:600 16px/1.4 var(--rd-f-text);
}
html:not(#rd) body:has(#regForm) .bring > span:not(.rd-emo)::before,
html:not(#rd) body:has(.bigcheck):not(#rd) :is(.bring,.chips) > span:not(.rd-emo)::before{
  content:"";position:absolute;left:2px;top:calc(4px + .46em);width:8px;height:8px;background:var(--rd-orange);outline:2px solid var(--rd-ink);
}
/* /rent-success before payment ("Almost there"): what is done is ticked off in green, and "Payment not complete" — the one
   thing on the page that matters — is the warning status tag of DESIGN 5.10 */
html:not(#rd) body:has(.bigcheck[data-rd-open]):not(#rd) #nextChips{align-items:center}
html:not(#rd) body:has(.bigcheck[data-rd-open]):not(#rd) #nextChips > span:not(.rd-emo):first-child::before{background:var(--rd-ok);outline-color:var(--rd-ok)}
html:not(#rd) body:has(.bigcheck[data-rd-open]):not(#rd) #nextChips > span:not(.rd-emo):last-child:not(:first-child){
  padding:7px 11px 6px 28px;background:var(--rd-warn-bg);color:var(--rd-warn);border:1px solid var(--rd-warn-line);
  font:800 12.5px/1.3 var(--rd-f-text);font-stretch:118%;letter-spacing:.12em;text-transform:uppercase;
}
html:not(#rd) body:has(.bigcheck[data-rd-open]):not(#rd) #nextChips > span:not(.rd-emo):last-child:not(:first-child)::before{
  left:11px;top:50%;margin-top:-4px;background:var(--rd-warn);outline:0;
}

/* ---- key/value rows on the confirmation ticket: a value too long for the row drops whole onto its own line
   under a full leader (receipt style), instead of breaking mid-phrase beside a stub of dots ---- */
html:not(#rd) body:has(.bigcheck):not(#rd) .detail{flex-wrap:wrap;row-gap:2px}
html:not(#rd) body:has(.bigcheck):not(#rd) .detail .v{flex:0 0 auto;max-width:100%;margin-left:auto;word-spacing:-.12em}

/* ---- the waiver link inside the consent sentence (league pages) ----
   js/10-layer.js gathers the closing ". *" into span.rd-wtail and measures where the button's last word ends;
   the tail is laid there, so the period and the required mark follow "Release" instead of the far edge. */
html:not(#rd) body:has(#regForm) #regForm > label[data-rd-wtail] .rd-wtail{
  position:absolute;left:var(--rd-wx,auto);top:var(--rd-wy,auto);white-space:nowrap;line-height:normal;pointer-events:none;
}
html:not(#rd) body:has(#regForm) .waiver-link{text-decoration-skip-ink:none}

/* ---- the pay stub before anything is picked (league pages) ----
   js/10-layer.js flags the empty state (.rd-empty). Instead of a giant Anton em dash floating as a black bar beside a
   label in the total's place, the total slot reads as one quiet line: "Select an option above". */
html:not(#rd) body:has(#regForm) .card .paybox .price.rd-empty{display:block;font-size:0;line-height:0;letter-spacing:0}
html:not(#rd) body:has(#regForm) .card .paybox .price.rd-empty small{
  display:block;color:var(--rd-ink-2);font:700 15px/1.4 var(--rd-f-mono);font-stretch:100%;letter-spacing:0;text-transform:none;
}
html:not(#rd) body:has(#regForm) .card .paybox .price.rd-empty small::first-letter{text-transform:uppercase}
html:not(#rd) body:has(#regForm) .card .paybox .li span:last-child.rd-empty{color:var(--rd-ink-2);font-weight:500}

/* ---- league "Registration type": one list, like the division list under it, at every width ----
   Side by side, the price line wrapped inside its parenthesis ("$450 (members / $400)"). */
@media (min-width:640px){
  html:not(#rd) body:has(#regForm) #regTypeList:has(> .drow:nth-child(2):last-child){display:block}
  html:not(#rd) body:has(#regForm) #regTypeList:has(> .drow:nth-child(2):last-child) .drow + .drow{border-top:1px solid var(--rd-rule-strong);border-left:0}
  html:not(#rd) body:has(#regForm) #regTypeList:has(> .drow:nth-child(2):last-child) .drow label{height:auto;min-height:60px;align-items:center;padding:10px 14px 9px}
  html:not(#rd) body:has(#regForm) #regTypeList:has(> .drow:nth-child(2):last-child) .drow .g{font-size:21px}
}

/* ---- camp sign-up: the info rail and the ticket start on the same line ---- */
html:not(#rd) body:has(#regForm):has(.session-cards) :is(.rail,.col-form) > :first-child{margin-top:0}

/* ---- sign-up heroes (rent, league, camp, /pp/, /film/, /happy-hoopers): the headline always follows its kicker ----
   On rent and the league pages the h1 was pushed to the foot of the taller right-hand column, leaving the kicker alone
   at the top of a black hole. Every sign-up hero now sets kicker, then headline, the same way. */
@media (min-width:960px){
  html:not(#rd) body:is(:has(#svcGrid),:has(#regForm)) .hero h1{align-self:start;margin-top:clamp(10px,1.5vw,16px)}
}

/* ---- 50-book-groups-account.css ---- */
/* =====================================================================
   50-book-groups-account.css — DESIGN.md 6.4, 6.5, 6.6 and section 7 "Working pages":
   /book, /groups, /account, /sponsor-apply.  CSS layer only: no HTML is replaced, nothing a click does changes.

   Page scopes (every rule starts with one; all carry an id so they out-rank the shared MAIN / ALL rules):
     BOOK      body:has(#bookingForm)
     GROUPS    body:has(#groupGrid)
     ACCT      body:has(#signIn)        (the same pages as body:has(.acct), at id weight)
     SPAPPLY   body:has(#coForm)        (the same page as body:has(.co), at id weight)

   The idea on all four: black is out of bounds and carries the words (the hero), and everything a parent
   fills in is ONE paper ticket lying on the floor — black header bar, orange numbered steps, a perforated
   stub with the receipt and the pay button.

   !important is used only against the pages' own inline style="" attributes, which nothing else can beat:
     #paidBanner (border, radius) · #gMem (border colour, radius, background) — both on DESIGN.md's list —
     and the inline 11.5–13px fine print inside .mem-box, .fam-bar, #gMem, /account's .muted notes and the
     "move this class" date buttons (font-size, raised to 13.5–14px; opacity on the disabled date).
   ===================================================================== */


/* =====================================================================
   /book
   ===================================================================== */

/* inline colours on this page say var(--grey); on paper that has to be the secondary ink */
body:has(#bookingForm) :is(.section,.mysessions){--grey:var(--rd-ink-2)}
body:has(#bookingForm) .section{padding-bottom:0}

/* ---------- the ticket: the booking container itself is the sheet ---------- */
body:has(#bookingForm) .section > .container{
  --bk-x:10px;                                   /* inner side padding of the ticket */
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr);
  width:calc(100% - 2 * var(--rd-gut));max-width:calc(var(--rd-max) - 2 * var(--rd-gut));
  margin-inline:auto;padding:0 0 18px;
  background:var(--rd-paper);color:var(--rd-ink);
  border:2px solid var(--rd-ink);border-radius:0;box-shadow:none;
}
@media (min-width:640px){
  body:has(#bookingForm) .section > .container{
    --bk-x:clamp(18px,2.4vw,30px);
    padding-bottom:var(--bk-x);
  }
}
/* black header bar: two paint labels, the right one orange */
body:has(#bookingForm) .section > .container::before,
body:has(#bookingForm) .section > .container::after{
  grid-row:1;
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
}
body:has(#bookingForm) .section > .container::before{
  content:"Private training";
  grid-column:1 / -1;
  display:flex;align-items:center;min-height:44px;padding:1px var(--bk-x) 0 calc(var(--bk-x) + 18px);
  background:linear-gradient(var(--rd-orange),var(--rd-orange)) var(--bk-x) 50% / 8px 8px no-repeat var(--rd-ink);
  color:var(--rd-white);
}
body:has(#bookingForm) .section > .container::after{
  content:"Coby \00B7  Kenyon";
  grid-column:1 / -1;justify-self:end;align-self:center;padding:1px var(--bk-x) 0 0;
  color:var(--rd-orange);
}
@media (max-width:359.98px){
  body:has(#bookingForm) .section > .container::before,
  body:has(#bookingForm) .section > .container::after{font-stretch:110%;letter-spacing:.1em}
}

/* every child has its own row, so the stub can sit beside them on a wide screen */
body:has(#bookingForm) .section > .container > *{grid-column:1;min-width:0;margin-inline:var(--bk-x)}
body:has(#bookingForm) .section > .container > .paid-note{grid-row:2}
body:has(#bookingForm) .section > .container > .step-label:has(+ #typePills){grid-row:3}
body:has(#bookingForm) .section > .container > #typePills{grid-row:4}
body:has(#bookingForm) .section > .container > .step-label:has(+ #dayPills){grid-row:5}
body:has(#bookingForm) .section > .container > #dayPills{grid-row:6}
body:has(#bookingForm) .section > .container > .step-label:has(+ .resched-banner){grid-row:7}
body:has(#bookingForm) .section > .container > .resched-banner{grid-row:8}
body:has(#bookingForm) .section > .container > #dayGrid{grid-row:9}
body:has(#bookingForm) .section > .container > .legend{grid-row:10}
body:has(#bookingForm) .section > .container > .demo-note{grid-row:11}
body:has(#bookingForm) .section > .container > .book-form{grid-row:13}

/* ---------- step header: orange square, Anton title, a rule to the edge ---------- */
body:has(#bookingForm) .step-label{
  display:flex;align-items:center;gap:12px;margin-block:24px 14px;
  color:var(--rd-ink);font:400 var(--rd-fs-500)/1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase;
}
body:has(#bookingForm) .step-label .n{
  flex:none;display:grid;place-items:center;width:34px;height:34px;padding-top:2px;border-radius:0;
  background:var(--rd-orange);color:var(--rd-ink);font:400 20px/1 var(--rd-f-display);letter-spacing:0;
}
body:has(#bookingForm) .step-label::after{content:"";flex:1;min-width:12px;height:2px;background:var(--rd-rule)}

/* ---------- step 1: session-type cards ---------- */
body:has(#bookingForm) #typePills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:640px){ body:has(#bookingForm) #typePills{grid-template-columns:repeat(4,minmax(0,1fr))} }
body:has(#bookingForm) #typePills .pill{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;min-height:108px;
  padding:12px 32px 11px 12px;margin:0;text-align:left;       /* the right padding keeps the name clear of the radio ring */
  background:var(--rd-field);color:var(--rd-ink);border:2px solid var(--rd-field-border);border-radius:0;transform:none;
  font:800 16.5px/1.15 var(--rd-f-text);letter-spacing:0;
  transition:background-color var(--rd-t-hover),border-color var(--rd-t-hover),color var(--rd-t-hover);
  -webkit-tap-highlight-color:transparent;
}
body:has(#bookingForm) #typePills .pill:hover{border-color:var(--rd-ink);transform:none}
body:has(#bookingForm) #typePills .pill.on::before{content:none}
/* the radio ring, top right */
body:has(#bookingForm) #typePills .pill::after{
  content:"";position:absolute;right:10px;top:11px;width:16px;height:16px;box-sizing:border-box;
  border:2px solid var(--rd-rule-strong);border-radius:var(--rd-r-round);
}
/* the price. Without js/50-work-a.js it is one mono line ("$75 · members $65"); with it, price and member line are split */
body:has(#bookingForm) #typePills .pill small{
  display:block;margin-top:auto;padding-top:12px;color:var(--rd-ink);
  font:500 14px/1.35 var(--rd-f-mono);letter-spacing:.01em;
}
body:has(#bookingForm) #typePills .pill small .rd-pr{
  display:block;font:400 38px/1 var(--rd-f-display);letter-spacing:.01em;font-variant-numeric:tabular-nums;
}
body:has(#bookingForm) #typePills .pill small .rd-pm{
  display:block;margin-top:3px;color:var(--rd-ink-2);font:600 15px/1.25 var(--rd-f-text);letter-spacing:0;
}
body:has(#bookingForm) #typePills .pill.on{background:var(--rd-ink);border-color:var(--rd-ink);color:var(--rd-white)}
body:has(#bookingForm) #typePills .pill.on small{color:var(--rd-white)}
body:has(#bookingForm) #typePills .pill.on small .rd-pr{color:var(--rd-orange)}
body:has(#bookingForm) #typePills .pill.on small .rd-pm{color:var(--rd-chalk)}
body:has(#bookingForm) #typePills .pill.on::after{
  border-color:var(--rd-orange);
  background:var(--rd-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3l2.4 2.3 4.8-5' fill='none' stroke='%230E0E10' stroke-width='2'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

/* ---------- step 2: day tiles — a wrapping grid, four across on a phone ---------- */
body:has(#bookingForm) #dayPills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (min-width:640px){ body:has(#bookingForm) #dayPills{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))} }
body:has(#bookingForm) #dayPills .pill{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:66px;
  padding:8px 4px 6px;margin:0;
  background:var(--rd-field);color:var(--rd-ink-2);border:2px solid var(--rd-field-border);border-radius:0;transform:none;
  font:800 10.5px/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.12em;text-transform:uppercase;
  transition:background-color var(--rd-t-hover),border-color var(--rd-t-hover),color var(--rd-t-hover);
  -webkit-tap-highlight-color:transparent;
}
body:has(#bookingForm) #dayPills .pill:hover{border-color:var(--rd-ink);transform:none}
body:has(#bookingForm) #dayPills .pill .sub{
  display:block;margin:0;color:var(--rd-ink);white-space:nowrap;
  font:400 clamp(18px,5.7vw,23px)/1.05 var(--rd-f-display);font-stretch:100%;letter-spacing:.02em;text-transform:uppercase;
}
body:has(#bookingForm) #dayPills .pill.on{background:var(--rd-ink);border-color:var(--rd-ink);color:var(--rd-orange)}
body:has(#bookingForm) #dayPills .pill.on .sub{color:var(--rd-white)}
body:has(#bookingForm) #dayPills .pill.on::before{content:none}

/* ---------- step 3: the slot grid ---------- */
body:has(#bookingForm) .day-grid{margin-top:0;background:var(--rd-field);border:2px solid var(--rd-ink);border-radius:0;overflow:hidden}
body:has(#bookingForm) .day-grid:empty{display:none}
body:has(#bookingForm) .dg-row{grid-template-columns:78px minmax(0,1fr) minmax(0,1fr)}
body:has(#bookingForm) .dg-row + .dg-row{border-top:1px solid var(--rd-rule)}
body:has(#bookingForm) .dg-cell{min-width:0;min-height:56px;padding:4px;gap:6px}
body:has(#bookingForm) .dg-head{background:var(--rd-ink);color:var(--rd-white)}
body:has(#bookingForm) .dg-head .dg-cell{
  min-height:0;padding:12px 6px 10px;font:400 var(--rd-fs-400)/1.1 var(--rd-f-display);letter-spacing:.03em;text-transform:uppercase;
}
body:has(#bookingForm) .dg-head .dg-cell:first-child{padding-left:10px}
body:has(#bookingForm) .dg-head .sub{
  margin-top:4px;color:var(--rd-chalk);font:600 13.5px/1.25 var(--rd-f-text);letter-spacing:0;text-transform:none;
}
body:has(#bookingForm) .dg-time{
  justify-content:flex-start;padding-left:10px;background:none;color:var(--rd-ink);
  font:500 15px/1.2 var(--rd-f-mono);letter-spacing:0;word-spacing:-.25em;white-space:nowrap;
}
@media (min-width:640px){
  body:has(#bookingForm) .dg-row{grid-template-columns:120px minmax(0,1fr) minmax(0,1fr)}
  body:has(#bookingForm) .dg-cell{padding:4px 8px}
  body:has(#bookingForm) .dg-head .dg-cell{padding:13px 10px 11px}
  body:has(#bookingForm) .dg-head .dg-cell:first-child,
  body:has(#bookingForm) .dg-time{padding-left:16px}
  body:has(#bookingForm) .dg-time{letter-spacing:.02em}
}

/* slot states: each one has its own word and its own marker */
body:has(#bookingForm) .slot{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:48px;width:auto;
  padding:4px;border:2px solid transparent;border-radius:0;
  font:800 15px/1.15 var(--rd-f-text);letter-spacing:0;text-align:center;text-decoration:none;transform:none;
  -webkit-tap-highlight-color:transparent;
}
@media (min-width:640px){ body:has(#bookingForm) .slot{gap:8px;padding:4px 8px;font-size:16px} }
body:has(#bookingForm) .slot.open{
  background:var(--rd-field);border-color:var(--rd-ink);color:var(--rd-ink);
  transition:background-color var(--rd-t-hover),color var(--rd-t-hover);
}
body:has(#bookingForm) .slot.open::before{content:"";flex:none;width:8px;height:8px;background:var(--rd-orange)}
body:has(#bookingForm) .slot.open:hover{background:var(--rd-ink);color:var(--rd-white);transform:none}
body:has(#bookingForm) .slot.open.picked,
body:has(#bookingForm) .slot.open.picked:hover{background:var(--rd-orange);color:var(--rd-ink)}
body:has(#bookingForm) .slot.open.picked::before{
  width:12px;height:7px;background:none;border-left:3px solid var(--rd-ink);border-bottom:3px solid var(--rd-ink);
  transform:rotate(-45deg) translate(1px,-2px);
}
/* the hour being booked says so in words ("On your list" cells already do) */
body:has(#bookingForm) button.slot.open.picked{font-size:0}
body:has(#bookingForm) button.slot.open.picked::after{content:"Selected";font:800 15px/1.15 var(--rd-f-text)}
@media (min-width:640px){ body:has(#bookingForm) button.slot.open.picked::after{font-size:16px} }
/* narrow phones: the words come first, so they always fit their cell */
@media (max-width:399.98px){
  body:has(#bookingForm) .slot{padding:4px 2px}
  body:has(#bookingForm) div.slot.open.picked::before{display:none}
}
@media (max-width:359.98px){
  body:has(#bookingForm) .dg-row{grid-template-columns:64px minmax(0,1fr) minmax(0,1fr)}
  body:has(#bookingForm) .dg-time{padding-left:6px;font-size:13px}
  body:has(#bookingForm) .dg-head .dg-cell:first-child{padding-left:6px}
  body:has(#bookingForm) .slot,
  body:has(#bookingForm) button.slot.open.picked::after{font-size:14px}
  body:has(#bookingForm) .slot{gap:5px}
  body:has(#bookingForm) button.slot.open.picked::before{display:none}
  body:has(#bookingForm) .summary .ln{padding-right:70px}
  body:has(#bookingForm) .summary:has(.rm) .ln{padding-right:122px}
  body:has(#bookingForm) .summary .ln .amt{font-size:27px;margin-top:-13px}
}
body:has(#bookingForm) .slot.taken{background:var(--rd-hatch);color:var(--rd-hatch-ink);font-weight:650;cursor:not-allowed}
body:has(#bookingForm) .slot.wait{
  flex-direction:column;gap:2px;background:var(--rd-paper);color:var(--rd-ink);border:2px dashed var(--rd-ink);
  font:800 15px/1.15 var(--rd-f-text);cursor:pointer;
}
body:has(#bookingForm) .slot.wait small{
  color:var(--rd-ink-2);font:600 13px/1.2 var(--rd-f-text);
  text-decoration:underline;text-decoration-color:var(--rd-orange);text-decoration-thickness:2px;text-underline-offset:2px;
}
body:has(#bookingForm) .slot.wait:hover{border-style:solid;border-color:var(--rd-ink)}
body:has(#bookingForm) .slot.group{
  flex-direction:column;gap:3px;background:var(--rd-ink);border-color:var(--rd-ink);color:var(--rd-white);
  transition:background-color var(--rd-t-hover);
}
body:has(#bookingForm) .slot.group:hover{background:#26262B;border-color:#26262B}
body:has(#bookingForm) .slot.group small{
  color:var(--rd-orange);font:800 11px/1.25 var(--rd-f-text);font-stretch:98%;letter-spacing:.06em;text-transform:uppercase;
}
/* phones: the group sub-line stays on one line, so group rows keep the grid's row height */
@media (max-width:639.98px){
  body:has(#bookingForm) .slot.group small{font-size:10px;font-stretch:72%;letter-spacing:.05em;white-space:nowrap}
}
body:has(#bookingForm) .slot.off{color:var(--rd-ink-3);font-weight:500;cursor:default}

/* legend: the samples are drawn exactly like the cells */
body:has(#bookingForm) .legend{gap:8px 20px;margin-top:12px;color:var(--rd-ink-2);font:600 13.5px/1.3 var(--rd-f-text)}
body:has(#bookingForm) .legend span{gap:8px}
body:has(#bookingForm) .legend i{flex:none;box-sizing:border-box;width:14px;height:14px;border-radius:0}
body:has(#bookingForm) .legend .l-open{
  background:linear-gradient(var(--rd-orange),var(--rd-orange)) center / 4px 4px no-repeat var(--rd-field);border:2px solid var(--rd-ink);
}
body:has(#bookingForm) .legend .l-taken{background:var(--rd-hatch);border:1px solid var(--rd-hatch-ink)}
/* when booked hours can be waitlisted the grid draws them as dashed paper cells: the sample matches */
body:has(#bookingForm):has(#dayGrid .slot.wait) .legend .l-taken{background:var(--rd-paper);border:2px dashed var(--rd-ink)}
body:has(#bookingForm) .legend .l-group{background:var(--rd-ink)}
/* the fourth state: the hour that is picked (orange, ink tick) */
body:has(#bookingForm) .legend::after{
  content:"Selected / on your list";display:flex;align-items:center;min-height:14px;padding-left:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect width='14' height='14' fill='%23FF6B2C'/%3E%3Cpath d='M3.2 7.2l2.6 2.5 5-5.4' fill='none' stroke='%230E0E10' stroke-width='2'/%3E%3C/svg%3E") 0 50% / 14px 14px no-repeat;
}

/* reschedule banner: a notice on black */
body:has(#bookingForm) .resched-banner{
  margin-block:0 12px;padding:14px 16px;border-radius:0;border-left:6px solid var(--rd-orange);
  background:var(--rd-ink);color:var(--rd-white);font:600 16px/1.45 var(--rd-f-text);gap:10px 14px;
  --rd-ring:var(--rd-orange);
}
body:has(#bookingForm) .resched-banner.show{animation:none}
body:has(#bookingForm) .resched-banner b{color:var(--rd-orange);font-family:var(--rd-f-mono);font-weight:700}
body:has(#bookingForm) .resched-banner button{
  min-height:44px;padding:4px 16px;border:2px solid rgba(255,255,255,.42);border-radius:0;background:transparent;color:var(--rd-white);
  font:800 12.5px/1.15 var(--rd-f-text);font-stretch:116%;letter-spacing:.09em;text-transform:uppercase;
  transition:background-color var(--rd-t-hover),color var(--rd-t-hover),border-color var(--rd-t-hover);
}
body:has(#bookingForm) .resched-banner button:hover{background:var(--rd-white);border-color:var(--rd-white);color:var(--rd-ink)}

/* paid banner (back from checkout): a success notice */
body:has(#bookingForm) .paid-note{
  margin-block:16px 0;padding:14px 16px;border:0;border-left:6px solid var(--rd-ok-line);border-radius:0;
  background:var(--rd-ok-bg);color:var(--rd-ink);font:600 16px/1.45 var(--rd-f-text);
}

/* ---------- the stub: "Your session" ---------- */
body:has(#bookingForm) .book-form{
  position:relative;margin-top:26px;padding:18px 0 0;
  background:none;border:0;border-top:2px dashed var(--rd-rule-strong);border-radius:0;box-shadow:none;
}
body:has(#bookingForm) .book-form.show{animation:none}
/* its title (phones and tablets; from 960px the header bar carries it) */
body:has(#bookingForm) .book-form::before{
  content:"Your session";display:block;margin-bottom:4px;color:var(--rd-ink-2);
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
/* the two punched notches at the ends of the perforation */
body:has(#bookingForm) .book-form::after{
  content:"";position:absolute;top:-12px;height:22px;pointer-events:none;
  left:calc(-1 * var(--bk-x) - 2px);right:calc(-1 * var(--bk-x) - 2px);
  background:
    radial-gradient(circle at 0 50%,var(--rd-maple) 0 8.5px,var(--rd-ink) 9px 10.5px,transparent 11px) 0 0 / 11px 100% no-repeat,
    radial-gradient(circle at 100% 50%,var(--rd-maple) 0 8.5px,var(--rd-ink) 9px 10.5px,transparent 11px) 100% 0 / 11px 100% no-repeat;
}

/* receipt slip */
body:has(#bookingForm) .summary{
  display:block;margin:0 0 4px;padding:0 0 12px;background:none;border:0;border-bottom:2px dashed var(--rd-rule-strong);border-radius:0;
  color:var(--rd-ink);font:500 16px/1.45 var(--rd-f-text);
}
body:has(#bookingForm) .summary:empty{display:none}
/* each line: what and when on the left, the price in its own column on the right, then (in a list) the remove button */
body:has(#bookingForm) .summary .ln{
  position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;width:100%;min-height:52px;padding:10px 86px 10px 0;
}
body:has(#bookingForm) .summary:has(.rm) .ln{padding-right:140px}
body:has(#bookingForm) .summary .ln + .ln{margin-top:0;padding-top:10px;border-top:1px solid var(--rd-rule)}
body:has(#bookingForm) .summary b{color:var(--rd-ink);font:800 16px/1.45 var(--rd-f-text);letter-spacing:0}
body:has(#bookingForm) .summary .amt{
  margin-left:auto;padding-left:10px;color:var(--rd-ink);font:400 32px/1 var(--rd-f-display);letter-spacing:.01em;font-variant-numeric:tabular-nums;
}
body:has(#bookingForm) .summary .ln .amt{position:absolute;right:0;top:50%;margin:-15px 0 0;padding:0}
body:has(#bookingForm) .summary:has(.rm) .ln .amt{right:56px}
body:has(#bookingForm) .summary .rm{
  position:absolute;right:0;top:50%;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0;padding:0;
  background:transparent;color:var(--rd-ink);border:2px solid var(--rd-ink);border-radius:0;font:700 22px/1 var(--rd-f-text);cursor:pointer;
  transition:background-color var(--rd-t-hover),color var(--rd-t-hover);
}
body:has(#bookingForm) .summary .rm:hover{background:var(--rd-ink);color:var(--rd-white)}
/* With js/50-work-a.js the line is split into its parts (.rd-seg) and set as a receipt entry:
     1-ON-1 WITH KENYON (Anton)                      $75
     Thursday, October 8   11:00 AM (Chivo Mono)
   The separators are kept in the page but not shown, so a part that drops to the next line never starts with a dot. */
body:has(#bookingForm) .summary .ln.rd-segd{display:block;min-height:0;padding:12px 0 12px}
body:has(#bookingForm) .summary .ln.rd-segd .rd-sep{display:none}
body:has(#bookingForm) .summary .ln.rd-segd .rd-seg{
  display:inline-block;margin:0 16px 0 0;white-space:nowrap;color:var(--rd-ink);
  font:500 15px/1.45 var(--rd-f-mono);letter-spacing:0;word-spacing:-.2em;
}
body:has(#bookingForm) .summary .ln.rd-segd .rd-seg b{font:inherit;font-weight:700;color:inherit}
body:has(#bookingForm) .summary .ln.rd-segd .rd-seg-1{
  display:block;margin:0 84px 6px 0;white-space:normal;color:var(--rd-ink-2);
  font:400 23px/1.02 var(--rd-f-display);letter-spacing:.02em;word-spacing:0;text-transform:uppercase;
}
body:has(#bookingForm) .summary .ln.rd-segd .rd-seg-1 b{font:inherit;color:var(--rd-ink)}
body:has(#bookingForm) .summary .ln.rd-segd .amt{top:10px;margin:0;font-size:32px;line-height:1}
/* in a list of several: the remove square sits at the right edge, level with the name */
body:has(#bookingForm) .summary:has(.rm) .ln.rd-segd{padding-right:56px}
body:has(#bookingForm) .summary .ln.rd-segd .rm{top:6px;margin:0}
body:has(#bookingForm) .summary:has(.rm) .ln.rd-segd .rd-seg-1{margin-right:72px}
body:has(#bookingForm) .summary:has(.rm) .ln.rd-segd .amt{right:56px}
@media (max-width:359.98px){
  body:has(#bookingForm) .summary .ln.rd-segd .amt{font-size:28px}
  body:has(#bookingForm) .summary .ln.rd-segd .rd-seg-1{margin-right:70px;font-size:21px}
  body:has(#bookingForm) .summary:has(.rm) .ln.rd-segd .rd-seg-1{margin-right:64px}
}
body:has(#bookingForm) .summary .hint{width:100%;padding:6px 0 2px;color:var(--rd-ink-2);font:600 15px/1.45 var(--rd-f-text)}
body:has(#bookingForm) .summary .hint b{font-size:15px}
body:has(#bookingForm) .summary .tot{
  justify-content:space-between;align-items:baseline;margin-top:2px;padding-top:12px;border-top:2px dashed var(--rd-rule-strong);
  color:var(--rd-ink-2);font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
body:has(#bookingForm) .summary .tot .amt{font-size:46px;line-height:.9;letter-spacing:.01em;font-stretch:100%}

/* "Booking as …" bar and kid chips */
body:has(#bookingForm) .fam-bar{
  margin:12px 0 2px;padding:12px 14px;border:0;border-left:6px solid var(--rd-orange);border-radius:0;
  background:var(--rd-paper-2);color:var(--rd-ink);font:500 15.5px/1.45 var(--rd-f-text);
}
body:has(#bookingForm) .fam-bar b{font-weight:800}
body:has(#bookingForm) .fam-bar a,
body:has(#bookingForm) .policy a,
body:has(#bookingForm) .mysessions .section-head a,
body:has(#bookingForm) .ms-credit a,
body:has(#bookingForm) .form-success a{
  color:var(--rd-ink);font-weight:800;text-decoration:underline;text-decoration-color:var(--rd-orange);text-decoration-thickness:2px;text-underline-offset:3px;
}
body:has(#bookingForm) .fam-bar > div[style]{font-size:14px !important}
body:has(#bookingForm) .fam-kids{gap:8px;margin-top:10px}
body:has(#bookingForm) .fam-kid{
  min-height:44px;padding:6px 16px;background:var(--rd-field);color:var(--rd-ink);border:2px solid var(--rd-field-border);border-radius:0;
  font:800 16px/1.2 var(--rd-f-text);transition:background-color var(--rd-t-hover),border-color var(--rd-t-hover),color var(--rd-t-hover);
}
body:has(#bookingForm) .fam-kid:hover{border-color:var(--rd-ink)}
body:has(#bookingForm) .fam-kid.on{background:var(--rd-ink);border-color:var(--rd-ink);color:var(--rd-white)}

/* member note: dashed ink box, radio rows a thumb can hit */
body:has(#bookingForm) .mem-box{
  margin:18px 0 4px;padding:14px 14px 12px;background:var(--rd-paper-2);color:var(--rd-ink);border:2px dashed var(--rd-ink);border-radius:0;
  font:500 16px/1.4 var(--rd-f-text);
}
body:has(#bookingForm) .mem-box b{margin-bottom:4px;font-weight:800}
body:has(#bookingForm) .mem-box label{
  gap:12px;min-height:44px;margin:0;color:var(--rd-ink);font:600 16px/1.35 var(--rd-f-text);letter-spacing:0;text-transform:none;
}
body:has(#bookingForm) .mem-box input{flex:none;width:22px;height:22px}
body:has(#bookingForm) .mem-box > div[style]{font-size:14px !important;line-height:1.45}
body:has(#bookingForm) .mem-ok{margin:14px 0 0;color:var(--rd-ok);font:700 15.5px/1.4 var(--rd-f-text)}
body:has(#bookingForm) .credit-note,
body:has(#bookingForm) .ms-credit{
  padding:12px 14px;border:0;border-left:6px solid var(--rd-ok-line);border-radius:0;background:var(--rd-ok-bg);color:var(--rd-ink);
  font:500 15.5px/1.45 var(--rd-f-text);
}
body:has(#bookingForm) .credit-note{margin:14px 0 0}
body:has(#bookingForm) .credit-note b,
body:has(#bookingForm) .ms-credit b + b{font:700 15px/1.45 var(--rd-f-mono)}

/* the note under the form: a first plain line, then the other points as a short list.
   Oct 10 2026 (Kenyon): the 20-minute hold sentence came off the page, so the "20:00" clock that stood in front of it is gone too. */
body:has(#bookingForm) .policy{
  margin-top:20px;padding:0;border:0;color:var(--rd-ink);font:500 15px/1.5 var(--rd-f-text);
}
body:has(#bookingForm) .policy::after{content:"";display:block;clear:both}
body:has(#bookingForm) .policy b{color:var(--rd-ink);font-weight:800}
/* "Plans change?" and "Faster checkout" (shown only to a parent who is not signed in) are short ruled items with the list's square marker */
body:has(#bookingForm) .policy > b,
body:has(#bookingForm) .policy > #fastNote:not([hidden]){
  display:block;clear:both;margin-top:12px;padding:12px 0 0 22px;border-top:1px solid var(--rd-rule);
  background:
    linear-gradient(var(--rd-orange),var(--rd-orange)) 4px calc(12px + .44em) / 8px 8px no-repeat,
    linear-gradient(var(--rd-ink),var(--rd-ink)) 2px calc(10px + .44em) / 12px 12px no-repeat;
}

/* add another / pay */
body:has(#bookingForm) .add-more{
  min-height:54px;margin-top:20px;padding:6px 16px;background:transparent;color:var(--rd-ink);border:2px dashed var(--rd-ink);border-radius:0;
  font:800 var(--rd-fs-btn)/1.15 var(--rd-f-text);font-stretch:116%;letter-spacing:.09em;text-transform:uppercase;justify-content:center;
  transition:background-color var(--rd-t-hover);
}
body:has(#bookingForm) .add-more[hidden]{display:none}
body:has(#bookingForm) .add-more:hover{background:var(--rd-paper-2)}
body:has(#bookingForm) .add-more:active{background:var(--rd-rule)}
body:has(#bookingForm) .submit-btn{
  width:100%;min-height:64px;margin-top:20px;padding:8px 14px;white-space:normal;text-wrap:balance;
  font-size:16px;line-height:1.2;font-stretch:112%;letter-spacing:.06em;
}
body:has(#bookingForm) .add-more + .submit-btn{margin-top:10px}
body:has(#bookingForm) .book-form .form-success{padding:10px 0 4px}
body:has(#bookingForm) .book-form .form-success p{font-size:16px}
body:has(#bookingForm) .book-form .form-success p b{font-weight:800}

/* ---------- from 960px: the stub is torn down the side — steps on the left, "Your session" on the right ---------- */
@media (min-width:960px){
  body:has(#bookingForm) .section > .container{
    grid-template-columns:minmax(0,13fr) minmax(0,11fr);          /* the two halves come out about the same height */
    grid-template-rows:auto repeat(10,auto) minmax(0,1fr);
  }
  body:has(#bookingForm) .section > .container::after{
    content:"Your session";grid-column:2;justify-self:start;padding:1px 0 0 calc(var(--bk-x) + 2px);
  }
  body:has(#bookingForm) .section > .container > .book-form{
    display:block;grid-column:2;grid-row:2 / 13;
    margin:0 0 calc(-1 * var(--bk-x));padding:6px var(--bk-x) var(--bk-x);
    border-top:0;border-left:2px dashed var(--rd-rule-strong);
  }
  body:has(#bookingForm) .book-form::before{display:none}
  /* one notch, where the perforation leaves the bottom edge of the ticket */
  body:has(#bookingForm) .book-form::after{
    left:-12px;right:auto;top:auto;bottom:-13px;width:22px;height:22px;box-sizing:border-box;
    background:var(--rd-maple);border:2px solid var(--rd-ink);border-radius:var(--rd-r-round);clip-path:inset(0 0 50% 0);
  }
  body:has(#bookingForm) .book-form .summary{padding-top:6px}
  /* in half a ticket four cards across would squeeze the member line: two rows of two */
  body:has(#bookingForm) #typePills{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* Before an hour is picked the stub is a short checklist of the three steps (the page's own step names; a box is
     ticked as each one is done) and the terms, so it is never a blank column. Of the form itself only the terms
     paragraph is shown; every field and button stays hidden until the page opens the form. */
  body:has(#bookingForm) .book-form:not(.show)::before,
  body:has(#bookingForm) .book-form:not(.show) #bookingForm::before,
  body:has(#bookingForm) .book-form:not(.show) #bookingForm::after{
    display:flex;align-items:center;box-sizing:border-box;height:52px;margin:0;padding:2px 0 0 36px;
    border-bottom:1px solid var(--rd-rule);color:var(--rd-ink);
    font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
    background:
      linear-gradient(var(--rd-field),var(--rd-field)) 2px 50% / 18px 18px no-repeat,
      linear-gradient(var(--rd-ink),var(--rd-ink)) 0 50% / 22px 22px no-repeat,
      var(--rd-paper);
  }
  body:has(#bookingForm) .book-form:not(.show)::before{
    content:"Session type";position:sticky;top:calc(var(--rd-nav-h) + 12px);z-index:1;margin-top:10px;
  }
  body:has(#bookingForm) .book-form:not(.show) #bookingForm{
    display:flex;flex-direction:column;position:sticky;top:calc(var(--rd-nav-h) + 64px);
  }
  body:has(#bookingForm) .book-form:not(.show) #bookingForm > :not(.policy){display:none}
  /* after a booking the page hides the form itself; the confirmation stands alone, without the checklist */
  body:has(#bookingForm) .book-form:not(.show):has(.form-success.show)::before{display:none}
  body:has(#bookingForm) .book-form:not(.show) #bookingForm::before{content:"Pick a day";order:-2}
  body:has(#bookingForm) .book-form:not(.show) #bookingForm::after{content:"Grab an open hour";order:-1;border-bottom:2px solid var(--rd-ink)}
  /* today is picked when the page opens: "Pick a day" is ticked only once step 1 is done too, so step 2 never
     shows as done before step 1 */
  body:has(#bookingForm):has(#typePills .pill.on) .book-form:not(.show)::before,
  body:has(#bookingForm):has(#typePills .pill.on):has(#dayPills .pill.on) .book-form:not(.show) #bookingForm::before{
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect width='22' height='22' fill='%23FF6B2C'/%3E%3Cpath d='M5.2 11.4l3.8 3.7 7.8-8.2' fill='none' stroke='%230E0E10' stroke-width='2.6'/%3E%3C/svg%3E") 0 50% / 22px 22px no-repeat,
      var(--rd-paper);
  }
}
/* wherever the stub sits beside the steps it is one column of fields (DESIGN 6.4) */
@media (min-width:960px){
  body:has(#bookingForm) .book-form .row{flex-direction:column;gap:0}
}

/* ---------- "Your sessions" ---------- */
body:has(#bookingForm) .mysessions{margin-top:0;padding:var(--rd-sec-y) 0 0;background:transparent}
body:has(#bookingForm) .ms-card{
  max-width:none;padding:clamp(16px,3vw,30px);background:var(--rd-paper);color:var(--rd-ink);border:2px solid var(--rd-ink);border-radius:0;
}
body:has(#bookingForm) .ms-lookup{display:grid;grid-template-columns:minmax(0,1fr);gap:0 14px;align-items:end}
body:has(#bookingForm) .ms-lookup > div{min-width:0}
body:has(#bookingForm) .ms-lookup > div:first-child label{margin-top:0}
body:has(#bookingForm) .ms-lookup .btn{min-height:54px;margin-top:16px;padding:6px 22px}
@media (min-width:640px){
  body:has(#bookingForm) .ms-lookup{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
  body:has(#bookingForm) .ms-lookup label{margin-top:0}
  body:has(#bookingForm) .ms-lookup .btn{margin-top:0}
}
body:has(#bookingForm) .ms-list{display:block;margin-top:0}
body:has(#bookingForm) .ms-list:not(:empty){margin-top:22px}
body:has(#bookingForm) .ms-credit{margin:0 0 16px}
/* stat strip on black */
body:has(#bookingForm) .ms-summary{gap:0;margin:0 0 4px;padding:0;border-radius:0;background:var(--rd-ink);color:var(--rd-white)}
body:has(#bookingForm) .ms-summary > div{flex:1 1 0;min-width:0;padding:14px 16px 12px;border-left:1px solid var(--rd-on-dark-rule)}
body:has(#bookingForm) .ms-summary > div:first-child{border-left:0}
body:has(#bookingForm) .ms-summary div b{color:var(--rd-orange);font:400 clamp(34px,4vw,48px)/1 var(--rd-f-display);letter-spacing:.01em;font-variant-numeric:tabular-nums}
body:has(#bookingForm) .ms-summary div small{
  display:block;margin-top:7px;color:var(--rd-chalk);
  font:800 10.5px/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;
}
body:has(#bookingForm) .ms-sec{margin-top:26px}
body:has(#bookingForm) .ms-sec h3{
  align-items:baseline;gap:10px;margin:0;padding-bottom:10px;border-bottom:2px solid var(--rd-ink);
  font:400 var(--rd-fs-500)/1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase;
}
body:has(#bookingForm) .ms-sec h3 span{color:var(--rd-ink-2);font:500 14px/1 var(--rd-f-mono);letter-spacing:.02em;text-transform:none}
body:has(#bookingForm) .ms-item,
body:has(#bookingForm) .ms-sec .ms-item{
  gap:8px 14px;padding:14px 0;border:0;border-bottom:1px solid var(--rd-rule);border-radius:0;
}
body:has(#bookingForm) .ms-item > div:first-child{flex:1 1 240px;min-width:0}
body:has(#bookingForm) .ms-item .what{font:400 20px/1.1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase}
body:has(#bookingForm) .ms-item .when{margin-top:5px;color:var(--rd-ink-2);font:500 14px/1.45 var(--rd-f-mono);letter-spacing:0;word-spacing:-.22em;overflow-wrap:anywhere}
body:has(#bookingForm) .ms-item.past{margin-top:2px;padding-inline:12px;background:var(--rd-paper-2);border-bottom-color:transparent}
body:has(#bookingForm) .ms-item.past .what{font-size:17px}
/* status tags */
body:has(#bookingForm) .ms-item .chip{
  padding:4px 8px 3px;border:1px solid currentColor;border-radius:0;background:var(--rd-paper-2);color:var(--rd-ink);
  font:800 10.5px/1.2 var(--rd-f-text);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;
}
body:has(#bookingForm) .ms-item.past .chip{background:var(--rd-paper)}
body:has(#bookingForm) .ms-item .chip.paid{background:var(--rd-ok-bg);color:var(--rd-ok)}
body:has(#bookingForm) .ms-item .chip.pending{background:var(--rd-warn-bg);color:var(--rd-warn)}
body:has(#bookingForm) .ms-item .chip.cancelled{background:var(--rd-err-bg);color:var(--rd-err)}
/* row actions: small ghost buttons */
body:has(#bookingForm) .ms-actions{gap:8px;flex-wrap:wrap}
body:has(#bookingForm) .ms-actions button,
body:has(#bookingForm) .ms-more{
  min-height:44px;padding:4px 16px;background:transparent;color:var(--rd-ink);border:2px solid var(--rd-ink);border-radius:0;
  font:800 12.5px/1.15 var(--rd-f-text);font-stretch:116%;letter-spacing:.09em;text-transform:uppercase;
  transition:background-color var(--rd-t-hover),color var(--rd-t-hover),border-color var(--rd-t-hover);
}
body:has(#bookingForm) .ms-actions button:hover,
body:has(#bookingForm) .ms-more:hover{background:var(--rd-ink);border-color:var(--rd-ink);color:var(--rd-white)}
body:has(#bookingForm) .ms-actions button.danger:hover{background:var(--rd-err-bg);border-color:var(--rd-err);color:var(--rd-err)}
body:has(#bookingForm) .ms-actions button:disabled,
body:has(#bookingForm) .ms-actions button:disabled:hover{
  opacity:1;background:transparent;border-color:var(--rd-rule-strong);color:var(--rd-ink-3);cursor:not-allowed;
}
body:has(#bookingForm) .ms-locked{color:var(--rd-ink-2);font:500 14px/1.45 var(--rd-f-text)}
body:has(#bookingForm) .ms-locked b{color:var(--rd-ink);font-weight:800}
body:has(#bookingForm) .ms-empty{margin-top:14px;color:var(--rd-ink-2);font:500 16px/1.45 var(--rd-f-text)}
@media (max-width:639.98px){
  body:has(#bookingForm) .ms-actions{margin-left:0;width:100%}
  body:has(#bookingForm) .ms-actions button{flex:1 1 0}
}


/* =====================================================================
   /groups
   ===================================================================== */

body:has(#groupGrid) .section{padding-top:clamp(24px,4vw,56px)}

/* ---------- the three groups: one ruled sheet ----------
   A wrapping row rather than fixed columns: three across when there is room, and when only two fit the third
   takes the full width under them — never a card with an empty cell beside it. */
body:has(#groupGrid) #groupGrid{display:flex;flex-wrap:wrap}
body:has(#groupGrid) #groupGrid > .grp-card{flex:1 1 250px}
body:has(#groupGrid) #groupGrid > .loading-note{flex:1 1 100%}
body:has(#groupGrid) .grp-card{overflow:visible;padding:clamp(18px,2.6vw,30px)}
body:has(#groupGrid) .grp-card h3{font:400 clamp(36px,3.6vw,48px)/.92 var(--rd-f-display);letter-spacing:.008em;text-transform:uppercase}
/* the highlighted word: plain ink with the short orange bar (00-tokens.css), never a slab */
body:has(#groupGrid) .grp-card h3 .o,
body:has(#groupGrid) .modal h3 span{
  display:inline;line-height:inherit;padding:0;margin:0;background:var(--rd-hl-bar);color:var(--rd-ink);
}
/* grades (Anton), then the schedule (mono), then the price line under a rule */
body:has(#groupGrid) .grp-meta{
  --orange:var(--rd-ink);
  display:block;margin:5px 0 0;color:var(--rd-ink);font:600 16px/1.4 var(--rd-f-text);letter-spacing:0;
}
body:has(#groupGrid) .grp-meta::before{display:none}
body:has(#groupGrid) .grp-card h3 + .grp-meta{
  margin-top:16px;font:400 23px/1.05 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase;
}
body:has(#groupGrid) .grp-meta:has(> b){
  margin-top:16px;padding-top:14px;border-top:2px solid var(--rd-ink);
  color:var(--rd-ink-2);font:600 15px/1.4 var(--rd-f-text);letter-spacing:0;
}
body:has(#groupGrid) .grp-meta > b{
  display:block;margin-bottom:6px;color:var(--rd-ink);
  font:400 34px/1 var(--rd-f-display);letter-spacing:.012em;text-transform:uppercase;font-variant-numeric:tabular-nums;
}
/* scarcity */
body:has(#groupGrid) .scarcity{margin:20px 0 0}
body:has(#groupGrid) .scar-top{align-items:baseline;gap:10px;margin-bottom:8px}
body:has(#groupGrid) .scar-left{color:var(--rd-ink);font:400 30px/1 var(--rd-f-display);letter-spacing:.01em;font-variant-numeric:tabular-nums}
body:has(#groupGrid) .scar-left .scar-cap{color:var(--rd-ink);font:400 19px/1 var(--rd-f-display);letter-spacing:.03em}
body:has(#groupGrid) .scar-left:is(.low,.full){color:var(--rd-ink)}
body:has(#groupGrid) .scar-left:is(.low,.full)::before{
  content:"";display:inline-block;width:10px;height:10px;margin:0 10px 3px 2px;background:var(--rd-orange);outline:2px solid var(--rd-ink);
}
body:has(#groupGrid) .scar-cap{
  color:var(--rd-ink-2);font:800 11px/1.3 var(--rd-f-text);font-stretch:122%;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
}
/* the track is a solid strip (DESIGN 5.16), never an outlined white box: an empty one must not read as a form field */
body:has(#groupGrid) .bar{box-sizing:border-box;height:12px;background:var(--rd-rule);border:0;border-radius:0;box-shadow:inset 0 -2px 0 var(--rd-rule-strong)}
body:has(#groupGrid) .bar-fill,
body:has(#groupGrid) .bar-fill.hot{background:var(--rd-orange);border-radius:0;transition:none}
body:has(#groupGrid) .bar-fill.hot{background:var(--rd-orange-press)}
body:has(#groupGrid) .urgency,
body:has(#groupGrid) .urgency.full{min-height:0;margin-top:10px;color:var(--rd-ink);font:800 15px/1.4 var(--rd-f-text)}
body:has(#groupGrid) .grp-cta{margin-top:auto;padding-top:18px}
body:has(#groupGrid) .grp-cta .btn{width:100%}
body:has(#groupGrid) .grp-cta .btn:disabled{background:var(--rd-hatch);color:var(--rd-hatch-ink);border-color:transparent}
/* the loading / could-not-load line is a sheet too */
body:has(#groupGrid) #groupGrid > .loading-note{
  --orange:var(--rd-ink);
  background:var(--rd-paper);border:2px solid var(--rd-ink);color:var(--rd-ink-2);font:600 16px/1.45 var(--rd-f-text);
}
body:has(#groupGrid) .loading-note a{text-decoration:underline;text-decoration-color:var(--rd-orange);text-decoration-thickness:2px;text-underline-offset:3px}

/* "You're in" banner (inline styles on the page) */
body:has(#groupGrid) #paidBanner{
  padding:14px 16px;color:var(--rd-ink);font:600 16px/1.45 var(--rd-f-text);
  border:0 !important;border-left:6px solid var(--rd-ok-line) !important;border-radius:0 !important;
}
body:has(#groupGrid) #paidBanner a{color:var(--rd-ink);font-weight:800;text-decoration:underline;text-decoration-color:var(--rd-ok-line);text-decoration-thickness:2px;text-underline-offset:3px}

/* ---------- the sign-up pop-up: a paper dialog, docked to the bottom on a phone ---------- */
body:has(#groupGrid) .modal-overlay{
  align-items:flex-end;justify-content:center;padding:12px;overflow:hidden;
  background:rgba(14,14,16,.78);-webkit-backdrop-filter:none;backdrop-filter:none;
}
body:has(#groupGrid) .modal-overlay.show{animation:rd-modal-in var(--rd-t-panel) var(--rd-ease-out) both}
body:has(#groupGrid) .modal-overlay > .modal{
  --grey:var(--rd-ink-2);--rd-ring:var(--rd-ink);--mx:18px;
  position:relative;width:100%;max-width:560px;
  max-height:calc(100vh - var(--rd-strip-h,0px) - 24px);max-height:calc(100dvh - var(--rd-strip-h,0px) - 24px);
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:22px var(--mx) 0;
  background:linear-gradient(var(--rd-orange),var(--rd-orange)) 0 0 / 100% 6px no-repeat var(--rd-paper);
  color:var(--rd-ink);border:2px solid var(--rd-ink);border-radius:0;box-shadow:none;
}
body:has(#groupGrid) .modal-overlay.show > .modal{animation:rd-modal-up var(--rd-t-panel) var(--rd-ease-out) both}
@media (min-width:640px){
  body:has(#groupGrid) .modal-overlay{align-items:center;padding:24px}
  body:has(#groupGrid) .modal-overlay > .modal{--mx:28px;padding-top:28px;max-height:calc(100vh - var(--rd-strip-h,0px) - 48px)}
}
/* close: a 44px square in the corner (Cancel on the bar below is always in reach) */
body:has(#groupGrid) .modal-x{
  position:absolute;top:20px;right:var(--mx);z-index:1;display:grid;place-items:center;width:44px;height:44px;padding:0;
  background:var(--rd-paper);color:var(--rd-ink);border:2px solid var(--rd-ink);border-radius:0;font:700 22px/1 var(--rd-f-text);
  transition:background-color var(--rd-t-hover),color var(--rd-t-hover);
}
body:has(#groupGrid) .modal-x:hover{background:var(--rd-ink);color:var(--rd-white)}
body:has(#groupGrid) .modal .kicker{margin:0 52px 12px 0}
body:has(#groupGrid) .modal h3{
  margin:0 52px 6px 0;font:400 clamp(32px,7vw,42px)/.95 var(--rd-f-display);letter-spacing:.008em;text-transform:uppercase;
}
body:has(#groupGrid) .modal .msched{margin:10px 0 8px;color:var(--rd-ink);font:600 16px/1.4 var(--rd-f-text)}
/* the sentence inside the "Which sessions?" label: its own hint line under the caps label, so the price in it reads
   as a sentence and not as more of the label (the dash that joined them is hidden by js/50-work-a.js) */
body:has(#groupGrid) .modal-overlay > .modal label > span[style]{
  display:block;margin-top:6px;color:var(--rd-ink-2);
  font:500 15px/1.45 var(--rd-f-text);font-stretch:100%;letter-spacing:0;text-transform:none;
}
body:has(#groupGrid) .modal-overlay > .modal label > span[style] span{font-weight:800;color:var(--rd-ink)}
body:has(#groupGrid) .modal-overlay > .modal label > span[style] > .rd-emo{display:none}
body:has(#groupGrid) .modal-overlay > .modal label:has(> span[style]){margin-bottom:12px}

/* "Not sure which group?" band: the heading breaks in two even halves, never one orphaned word */
body:has(#groupGrid) .band h2{max-width:6.2em;text-wrap:balance}   /* "WE'LL PLACE / YOUR PLAYER" (balance alone is not in every browser) */

/* date chips */
body:has(#groupGrid) .date-chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:4px 0 8px}
@media (min-width:640px){ body:has(#groupGrid) .date-chips{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))} }
body:has(#groupGrid) .date-chip{
  position:relative;min-width:0;min-height:58px;padding:9px 12px 8px;text-align:left;line-height:1.2;
  background:var(--rd-field);color:var(--rd-ink);border:2px solid var(--rd-field-border);border-radius:0;
  transition:background-color var(--rd-t-hover),border-color var(--rd-t-hover),color var(--rd-t-hover);
  -webkit-tap-highlight-color:transparent;
}
body:has(#groupGrid) .date-chip b{font:400 19px/1.1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase}
@media (max-width:359.98px){
  body:has(#groupGrid) .date-chip{padding-inline:8px}
  body:has(#groupGrid) .date-chip b{font-size:17px;letter-spacing:.01em}
}
body:has(#groupGrid) .date-chip small{margin-top:4px;color:var(--rd-ink-2);font:600 13.5px/1.25 var(--rd-f-text)}
body:has(#groupGrid) .date-chip:hover{border-color:var(--rd-ink)}
body:has(#groupGrid) .date-chip.low small{color:var(--rd-warn)}
body:has(#groupGrid) .date-chip.low small::before{content:"";display:inline-block;width:6px;height:6px;margin:0 6px 2px 0;background:var(--rd-orange)}
body:has(#groupGrid) .date-chip.wait{background:var(--rd-paper-2);border:2px dashed var(--rd-ink)}
body:has(#groupGrid) .date-chip.wait small{color:var(--rd-ink-2);text-decoration:underline;text-decoration-color:var(--rd-orange);text-decoration-thickness:2px;text-underline-offset:2px}
body:has(#groupGrid) .date-chip.wait:hover{border-style:solid}
body:has(#groupGrid) .date-chip.on{background:var(--rd-ink);border-color:var(--rd-ink);color:var(--rd-white)}
body:has(#groupGrid) .date-chip.on small{color:var(--rd-chalk)}
body:has(#groupGrid) .date-chip.on small::before{display:none}
/* selected: an orange corner tab with a tick, not colour alone */
body:has(#groupGrid) .date-chip.on::after{
  content:"";position:absolute;right:-2px;top:-2px;width:20px;height:20px;
  background:var(--rd-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3l2.4 2.3 4.8-5' fill='none' stroke='%230E0E10' stroke-width='2'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
body:has(#groupGrid) .date-chip:disabled{
  opacity:1;background:var(--rd-hatch);border-color:transparent;color:var(--rd-hatch-ink);text-decoration:none;cursor:not-allowed;
}
body:has(#groupGrid) .date-chip:disabled small{color:var(--rd-hatch-ink);text-decoration:none}
/* running total: a receipt line */
body:has(#groupGrid) #gPicked{
  padding:10px 12px;border-left:6px solid var(--rd-orange);background:var(--rd-paper-2);color:var(--rd-ink);
  font-family:var(--rd-f-mono);font-weight:700;letter-spacing:0;word-spacing:-.2em;line-height:1.4;
}
/* member note (inline dashed orange on the page) */
body:has(#groupGrid) #gMem{
  margin:18px 0 4px;padding:14px 14px 12px;color:var(--rd-ink);font:500 16px/1.4 var(--rd-f-text);
  border-color:var(--rd-ink) !important;border-radius:0 !important;background:var(--rd-paper-2) !important;
}
body:has(#groupGrid) #gMem b{font-weight:800}
body:has(#groupGrid) #gMem label{min-height:44px;color:var(--rd-ink);font-size:16px;line-height:1.35;letter-spacing:0;text-transform:none;font-stretch:100%;cursor:pointer}
body:has(#groupGrid) #gMem input{flex:none;min-width:22px;height:22px}
body:has(#groupGrid) #gMem > div[style]{font-size:14px !important;line-height:1.45}
/* actions: a bar that stays at the foot of the dialog, so the running total on the button is always in reach */
body:has(#groupGrid) .modal-actions{
  position:sticky;bottom:0;z-index:2;flex-wrap:wrap;gap:10px;margin:20px calc(-1 * var(--mx)) 0;padding:12px var(--mx);
  background:var(--rd-paper);border-top:2px solid var(--rd-ink);
}
body:has(#groupGrid) .modal-actions .btn{flex:1 1 0;min-width:0;padding-inline:10px;white-space:normal;font-size:13px;font-stretch:110%;letter-spacing:.06em}
body:has(#groupGrid) .modal-actions #grpCancel{flex:0 0 auto;padding-inline:16px}
@media (min-width:640px){
  body:has(#groupGrid) .modal-actions .btn{font-size:var(--rd-fs-btn);font-stretch:116%;letter-spacing:.09em}
  body:has(#groupGrid) .modal-actions #grpCancel{padding-inline:22px}
}
/* the message line. js/50-work-a.js copies it onto the bar (data-rd-note) so it is seen wherever the dialog is scrolled;
   without the script it shows where the page puts it, under the buttons. */
body:has(#groupGrid) .modal-actions[data-rd-note]:not([data-rd-note=""])::before{
  content:attr(data-rd-note);box-sizing:border-box;flex:0 0 100%;padding:10px 12px;border-left:6px solid var(--rd-orange);
  background:var(--rd-paper-2);color:var(--rd-ink);font:700 15px/1.4 var(--rd-f-text);
}
body:has(#groupGrid) .modal-actions[data-rd-note][data-rd-err]:not([data-rd-note=""])::before{
  border-left-color:var(--rd-err);background:var(--rd-err-bg);color:var(--rd-err);
}
body:has(#groupGrid) .modal-note{min-height:0;margin:0;padding:12px 0;text-align:left;color:var(--rd-ink);font:700 15px/1.4 var(--rd-f-text)}
body:has(#groupGrid) .modal-note:empty{padding:0}
body:has(#groupGrid) .modal-note.err{color:var(--rd-err)}
body:has(#groupGrid) .modal-actions[data-rd-note] ~ .modal-note{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
body:has(#groupGrid) .modal .form-success{padding:8px 0 26px}
body:has(#groupGrid) .modal .form-success p{font-size:16px}
body:has(#groupGrid) .modal .form-success p b{font-weight:800}


/* =====================================================================
   /account
   ===================================================================== */

body:has(#signIn) .acct{
  --orange:var(--rd-ink);--grey:var(--rd-ink-2);       /* inline link and note colours resolve to ink on paper */
  max-width:var(--rd-max);margin:0 auto;padding-inline:var(--rd-gut);
}
body:has(#signIn) .acct a[style]{text-decoration:underline;text-decoration-color:var(--rd-orange);text-decoration-thickness:2px;text-underline-offset:3px}

/* a panel is a paper sheet with a ruled title */
body:has(#signIn) .panel{
  margin-top:clamp(18px,2.6vw,30px);padding:clamp(18px,3vw,30px);
  background:var(--rd-paper);color:var(--rd-ink);border:2px solid var(--rd-ink);border-radius:0;
}
body:has(#signIn) .panel h2{
  flex-wrap:wrap;gap:8px 14px;margin:0 0 14px;padding-bottom:12px;border-bottom:2px solid var(--rd-ink);
  font:400 var(--rd-fs-500)/1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase;
}
body:has(#signIn) .panel h2 small{color:var(--rd-ink-2);font:500 13.5px/1.3 var(--rd-f-mono);letter-spacing:0;word-spacing:-.22em;text-transform:none}
body:has(#signIn) .panel h2 .btn{flex:none}
body:has(#signIn) .panel h2 .linkbtn{font:700 15px/1.3 var(--rd-f-text);letter-spacing:0;text-transform:none}
body:has(#signIn) .muted{color:var(--rd-ink-2);font:500 16px/1.5 var(--rd-f-text)}
body:has(#signIn) .muted[style*="font-size"]{font-size:14px !important;line-height:1.45}
body:has(#signIn) .muted b{color:var(--rd-ink);font-weight:800}
body:has(#signIn) .field{margin-top:14px}
body:has(#signIn) .field > span .muted{display:inline;margin:0 0 0 4px;font:500 14px/1.3 var(--rd-f-text);font-stretch:100%;letter-spacing:0;text-transform:none}
body:has(#signIn) .linkbtn{color:var(--rd-ink)}
body:has(#signIn) .err{min-height:0;margin-top:12px}
body:has(#signIn) .err:empty{margin-top:0}

/* signed out (and "start a family"): one form ticket, no wider than the other forms (DESIGN 6.6) */
body:has(#signIn) .acct:has(> #fam.hidden){max-width:calc(var(--rd-sheet) + 2 * var(--rd-gut))}

/* sign in / start a family: a ticket — the same black header bar the other forms carry */
body:has(#signIn) #signIn,
body:has(#signIn) #claim{--pp:clamp(18px,3vw,30px);padding-top:0}
body:has(#signIn) #signIn::before,
body:has(#signIn) #claim::before{
  content:"Family account";grid-column:1 / -1;
  display:flex;align-items:center;min-height:44px;margin:0 calc(-1 * var(--pp)) var(--pp);
  padding:1px var(--pp) 0 calc(var(--pp) + 18px);
  background:linear-gradient(var(--rd-orange),var(--rd-orange)) var(--pp) 50% / 8px 8px no-repeat var(--rd-ink);
  color:var(--rd-white);white-space:nowrap;
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
body:has(#signIn) #signIn .btn,
body:has(#signIn) #claim .btn{min-height:58px;min-width:min(240px,100%)}
@media (max-width:639.98px){
  body:has(#signIn) #signIn .btn,
  body:has(#signIn) #claim .btn{width:100%}
  /* the two links stack; the dot between them has nothing to separate */
  body:has(#signIn) #si1 > p > .linkbtn{display:flex}
  body:has(#signIn) #si1 > p > span.muted{display:none}
}
@media (min-width:960px){
  /* words on the left, fields on the right — the same 5 / 7 split as the hero above it */
  body:has(#signIn) #signIn:not(.hidden),
  body:has(#signIn) #claim:not(.hidden){
    display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-auto-flow:row dense;
    column-gap:clamp(24px,4vw,64px);align-items:start;
  }
  body:has(#signIn) #signIn > h2,
  body:has(#signIn) #claim > h2{grid-column:1 / -1}
  body:has(#signIn) #signIn > div:not(.err):not(.hidden){display:contents}
  body:has(#signIn) #signIn > div > *,
  body:has(#signIn) #claim > p{grid-column:1;margin-top:0}
  /* the lead runs down the left; the two links sit right under the Sign in button they belong to */
  body:has(#signIn) #signIn #siLead{grid-row:3 / span 4}
  body:has(#signIn) #si1 > p:last-child{grid-column:2;margin-top:14px}
  body:has(#signIn) #claim > p:not(.muted){grid-column:2;margin-top:14px}
  body:has(#signIn) #signIn > div > :is(.field,.btn),
  body:has(#signIn) #claim > :is(.row2,.field,.btn),
  body:has(#signIn) #signIn > .err,
  body:has(#signIn) #claim > .err{grid-column:2}
  body:has(#signIn) #signIn > div > .btn,
  body:has(#signIn) #claim > .btn{justify-self:start}
  body:has(#signIn) #signIn > div > .field,
  body:has(#signIn) #claim > .field{margin:0 0 14px}
  body:has(#signIn) #signIn #siLead,
  body:has(#signIn) #claim > p.muted,
  body:has(#signIn) #si3 > p.muted{color:var(--rd-ink);font:500 var(--rd-fs-lede)/1.36 var(--rd-f-text)}
  body:has(#signIn) #si2 > *{grid-column:1 / -1}
  /* a long explanation runs down beside the fields instead of stretching the first row */
  body:has(#signIn) #claim > p.muted{grid-row:3 / span 3}
}

/* the family page: black name bar, then a ruled grid of sheets.
   "Coming up" (the sessions a parent can reschedule or cancel) is what a signed-in parent comes here for, so it is
   placed first: straight under the name bar on a phone, and at the head of the wider left stack on a desktop. It is
   the one flagged sheet on the page (the orange bar along its top edge, as .card.feature). Done with order / grid
   placement only; the page's markup and its script are untouched. */
body:has(#signIn) #fam{display:grid;grid-template-columns:minmax(0,1fr);padding-top:2px;margin-top:clamp(18px,2.6vw,30px)}
body:has(#signIn) #fam > .panel{min-width:0;margin:-2px 0 0}
body:has(#signIn) #fam > .panel:first-child{
  --rd-ring:var(--rd-orange);order:-2;
  padding-block:clamp(16px,2.4vw,24px);background:var(--rd-ink);color:var(--rd-white);
}
body:has(#signIn) #fam > .panel:has(#upcoming){
  order:-1;position:relative;z-index:1;
  background:linear-gradient(var(--rd-orange),var(--rd-orange)) 0 0 / 100% 6px no-repeat var(--rd-paper);
}
body:has(#signIn) #fam > .panel:first-child h2{margin-bottom:8px;padding-bottom:0;border-bottom:0;font-size:var(--rd-fs-600);line-height:.92;letter-spacing:.008em}
body:has(#signIn) #fam > .panel:first-child .linkbtn{color:var(--rd-white);text-decoration-color:var(--rd-orange)}
body:has(#signIn) #fam > .panel:first-child .muted{color:var(--rd-chalk)}
@media (min-width:960px){
  /* left (wider): what is on the calendar: Coming up, Waitlists, Sign-ups, History.
     right: about the family: Membership, Kids, Credit, Parents. */
  body:has(#signIn) #fam{grid-template-columns:minmax(0,7fr) minmax(0,5fr);padding-left:2px}
  body:has(#signIn) #fam > .panel{margin-left:-2px}
  body:has(#signIn) #fam > .panel:is(:first-child,:last-child,#waitPanel){grid-column:1 / -1}

  /* With js/50-work-a.js (#fam.rd-stack): two stacks that run at their own length instead of paired rows, so a
     short sheet never runs on as empty paper beside a long one. The script gives each sheet a span of 1px rows
     equal to its height; a stack that ends first simply ends on the floor. */
  body:has(#signIn) #fam.rd-stack{grid-auto-rows:1px;grid-auto-flow:row dense}
  body:has(#signIn) #fam.rd-stack[data-rd-measure]{align-items:start}
  body:has(#signIn) #fam.rd-stack > .panel{grid-column:2}
  body:has(#signIn) #fam.rd-stack > :is(.panel:has(#upcoming),#waitPanel,.panel:has(#regs),.panel:has(#history)){grid-column:1}
  body:has(#signIn) #fam.rd-stack > .panel:first-child{grid-column:1 / -1}
  /* Parents & guardians closes the shorter stack: for a brand-new family (nothing on the calendar yet) that is the
     left one, under History, so no tall blank is left there (js/50-work-a.js sets .rd-left) */
  body:has(#signIn) #fam.rd-stack > .panel.rd-left{grid-column:1;order:1}
  /* no membership yet: the two plans stand side by side at the head of the right stack, Kids straight under them
     (so the plan's "Add a kid below first." stays true) */
  body:has(#signIn) #fam.rd-stack > #memberPanel:has(.mplans) .mplans{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
/* "Book a session →" never leaves its arrow alone on a line */
body:has(#signIn) #upcoming a{white-space:nowrap}
/* parents' contact line: email and phone each stay whole; on a phone they are two lines */
body:has(#signIn) #parents .meta.rd-segd .rd-seg{white-space:nowrap}
@media (max-width:639.98px){
  body:has(#signIn) #parents .meta.rd-segd .rd-seg{display:block}
  body:has(#signIn) #parents .meta.rd-segd .rd-sep{display:none}

  /* family name bar: name, then who is signed in, then Sign out — the action no longer splits the identity */
  body:has(#signIn) #fam > .panel:first-child{display:flex;flex-direction:column;align-items:flex-start}
  body:has(#signIn) #fam > .panel:first-child > h2{display:contents}
  body:has(#signIn) #famName{margin-bottom:10px}
  body:has(#signIn) #famWho{order:1;margin:0}
  body:has(#signIn) #fam > .panel:first-child > h2 > .linkbtn{order:2;display:inline-flex;align-items:center;min-height:44px;margin-top:6px}

  /* a sheet title with a button: the title may take two lines, the button stays on the right (as Kids does) */
  body:has(#signIn) .panel h2:has(> .btn){flex-wrap:nowrap;align-items:center;justify-content:space-between}
}

/* list rows */
body:has(#signIn) :is(.kid,.item){flex-wrap:wrap;gap:10px 14px;padding:14px 0;border-top:1px solid var(--rd-rule)}
body:has(#signIn) :is(.kid,.item):first-of-type{border-top:0;padding-top:4px}
body:has(#signIn) :is(.kid,.item) > div:first-child{flex:1 1 220px;min-width:0}
body:has(#signIn) :is(.kid,.item) b{font:800 17px/1.3 var(--rd-f-text)}
body:has(#signIn) :is(.kid,.item) .meta{margin-top:4px;color:var(--rd-ink-2);font:500 14px/1.45 var(--rd-f-mono);letter-spacing:0;word-spacing:-.22em;overflow-wrap:anywhere}
body:has(#signIn) .item > span[style]{flex:0 1 auto}
@media (max-width:639.98px){
  body:has(#signIn) .item > span[style]{flex:1 1 100%}
  body:has(#signIn) .item > span[style] > .btn{flex:1 1 0}
}
/* status tags */
body:has(#signIn) .tag{
  margin-left:8px;padding:4px 8px 3px;border:1px solid currentColor;border-radius:0;background:var(--rd-paper-2);color:var(--rd-ink);
  font:800 10.5px/1.2 var(--rd-f-text);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;vertical-align:2px;white-space:nowrap;
}
body:has(#signIn) .tag.paid{background:var(--rd-ok-bg);color:var(--rd-ok)}
body:has(#signIn) .tag.due{background:var(--rd-warn-bg);color:var(--rd-warn)}

/* credit: stat cells in a ruled grid */
body:has(#signIn) .credits{gap:0;margin-top:0;padding:2px 0 0 2px}
body:has(#signIn) .credit{margin:-2px 0 0 -2px;padding:14px 16px 12px;background:var(--rd-field);border:2px solid var(--rd-ink);border-radius:0}
body:has(#signIn) .credit .lbl{color:var(--rd-ink-2);font:800 10.5px/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase}
body:has(#signIn) .credit .amt{margin-top:8px;font:400 clamp(44px,5vw,56px)/.95 var(--rd-f-display);letter-spacing:.01em;font-variant-numeric:tabular-nums}
body:has(#signIn) .credit .exp{margin-top:6px;color:var(--rd-ink-2);font:500 14px/1.4 var(--rd-f-mono)}

/* membership: two ruled plan cells */
body:has(#signIn) .mplans{gap:0;margin-top:14px;padding:2px 0 0 2px}
body:has(#signIn) .mplan{display:flex;flex-direction:column;min-width:0;margin:-2px 0 0 -2px;padding:16px;background:var(--rd-field);border:2px solid var(--rd-ink);border-radius:0}
body:has(#signIn) .mplan > b{font:400 22px/1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase}
body:has(#signIn) .mplan .amt{margin:10px 0 6px;font:400 44px/1 var(--rd-f-display);letter-spacing:.01em}
body:has(#signIn) .mplan .amt small{color:var(--rd-ink-2);font:700 15px/1 var(--rd-f-text);letter-spacing:0}
body:has(#signIn) .mplan select{margin-top:12px;padding:0 40px 0 14px;border:2px solid var(--rd-field-border);border-radius:0;font-size:17px}
body:has(#signIn) .mplan .btn{width:100%;margin-top:auto}
body:has(#signIn) .mplan > :is(select,.muted):has(+ .btn){margin-bottom:12px}

/* membership, before memberships open: the "Memberships start January 1, 2027" announcement (account.js .mnote).
   An info notice (DESIGN 5.15: the 6px orange bar on the left, square, ink text) on sunken paper so it stands off the
   sheet; the heading in the small Anton the plan names use. No button: the only thing to tap is the link below. */
body:has(#signIn) .mnote{
  margin-top:2px;padding:16px 16px 16px 20px;border:0;border-left:6px solid var(--rd-orange);border-radius:0;box-shadow:none;
  background:var(--rd-paper-2);color:var(--rd-ink);
}
body:has(#signIn) .mnote-h{
  font:400 clamp(22px,2vw,26px)/1.08 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase;text-wrap:balance;
}
body:has(#signIn) .mnote-b{
  margin:10px 0 0;max-width:62ch;color:var(--rd-ink);font:500 16px/1.5 var(--rd-f-text);letter-spacing:0;text-wrap:pretty;
}
/* the one link under the note (and beside the plans once memberships are open): "See how a membership saves you
   money ->" opens /membership. A text link like "Book a session ->": ink, the 2px orange underline, a 44px tap row. */
body:has(#signIn) .mnote-more{
  display:inline-block;margin-top:4px;padding:11px 0;min-height:44px;color:var(--rd-ink);
  font:700 16px/1.4 var(--rd-f-text);letter-spacing:0;text-wrap:balance;
  text-decoration:underline;text-decoration-color:var(--rd-orange);text-decoration-thickness:2px;text-underline-offset:4px;
}
body:has(#signIn) .mnote-more:hover{text-decoration-thickness:3px}
body:has(#signIn) .mnote-more:focus-visible{outline:3px solid var(--rd-ink);outline-offset:3px}
body:has(#signIn) p.muted > .mnote-more{display:inline;padding:0;min-height:0;white-space:nowrap}
@media (max-width:639.98px){
  body:has(#signIn) .mnote{padding:14px 14px 14px 16px}
}

/* option pills (boy / girl) */
body:has(#signIn) .seg{gap:8px}
body:has(#signIn) .seg button{
  min-height:var(--rd-tap);padding:8px 12px;background:var(--rd-field);color:var(--rd-ink);border:2px solid var(--rd-field-border);border-radius:0;
  font:800 16px/1.2 var(--rd-f-text);transition:background-color var(--rd-t-hover),border-color var(--rd-t-hover),color var(--rd-t-hover);
}
body:has(#signIn) .seg button:hover{border-color:var(--rd-ink)}
body:has(#signIn) .seg button.on{background:var(--rd-ink);border-color:var(--rd-ink);color:var(--rd-white)}

/* pop-ups: here .modal is the overlay and .sheet the dialog (layer order comes from 40-forms.css) */
body:has(#signIn) > .modal{padding:12px;background:rgba(14,14,16,.78)}
body:has(#signIn) > .modal > .sheet{
  max-width:520px;max-height:100%;padding:28px 18px 20px;
  background:linear-gradient(var(--rd-orange),var(--rd-orange)) 0 0 / 100% 6px no-repeat var(--rd-paper);
  color:var(--rd-ink);border:2px solid var(--rd-ink);border-radius:0;box-shadow:none;
  --orange:var(--rd-ink);--grey:var(--rd-ink-2);
}
@media (min-width:640px){
  body:has(#signIn) > .modal{padding:24px}
  body:has(#signIn) > .modal > .sheet{padding:34px 30px 28px}
}
body:has(#signIn) .sheet > h2{line-height:1;letter-spacing:.02em}
/* the buttons stay at the foot of the dialog while it scrolls */
body:has(#signIn) .sheet > div[style*="display:flex"]{
  position:sticky;bottom:-20px;z-index:1;flex-wrap:wrap;align-items:center;margin:0 -18px -20px;padding:12px 18px 20px;
  background:var(--rd-paper);border-top:2px solid var(--rd-ink);
}
@media (min-width:640px){
  body:has(#signIn) .sheet > div[style*="display:flex"]{bottom:-28px;margin:0 -30px -28px;padding:14px 30px 28px}
}
body:has(#signIn) .sheet #kRemove{flex:none;text-decoration-color:currentColor}
body:has(#signIn) .sheet > div[style*="display:flex"] > .btn{flex:1 1 0;min-width:0}
body:has(#signIn) .sheet #mvCancel{min-height:48px}
/* "move this class": the dates are date chips */
body:has(#signIn) #mvDates > .btn{
  display:block;min-height:58px;padding:9px 12px 8px;white-space:normal;text-align:left;
  background:var(--rd-field);color:var(--rd-ink);border:2px solid var(--rd-field-border);
  font:400 19px/1.15 var(--rd-f-display);font-stretch:100%;letter-spacing:.02em;text-transform:uppercase;
}
body:has(#signIn) #mvDates > .btn > span{
  display:inline-block;margin-top:4px;color:var(--rd-ink-2);font-family:var(--rd-f-text);letter-spacing:0;text-transform:none;
  font-size:13.5px !important;
}
body:has(#signIn) #mvDates > .btn:hover{background:var(--rd-ink);border-color:var(--rd-ink);color:var(--rd-white)}
body:has(#signIn) #mvDates > .btn:hover > span{color:var(--rd-chalk)}
body:has(#signIn) #mvDates > .btn:disabled,
body:has(#signIn) #mvDates > .btn:disabled:hover{background:var(--rd-hatch);border-color:transparent;color:var(--rd-hatch-ink);opacity:1 !important}
body:has(#signIn) #mvDates > .btn:disabled > span{color:var(--rd-hatch-ink)}


/* =====================================================================
   /sponsor-apply
   ===================================================================== */

body:has(#coForm) .section{padding-top:clamp(24px,4vw,56px)}
body:has(#coForm) .co{grid-template-columns:minmax(0,1fr);gap:22px 0}
@media (min-width:960px){
  body:has(#coForm) .co{grid-template-columns:minmax(0,1fr) 380px;gap:0 clamp(20px,2.4vw,32px)}
}

/* the three steps: sheets that share their borders, so they read as one ticket */
body:has(#coForm) .co-step{
  margin:0 0 -2px;padding:clamp(18px,3vw,30px);background:var(--rd-paper);color:var(--rd-ink);border:2px solid var(--rd-ink);border-radius:0;
}
body:has(#coForm) .co-step:first-child{
  background:linear-gradient(var(--rd-orange),var(--rd-orange)) 0 0 / 100% 6px no-repeat var(--rd-paper);
  padding-top:calc(clamp(18px,3vw,30px) + 6px);
}
body:has(#coForm) .co-step:last-child{margin-bottom:0}
body:has(#coForm) .co-step h2{gap:12px;font:400 var(--rd-fs-500)/1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase}
body:has(#coForm) .co-step h2 .n{
  display:grid;place-items:center;width:34px;height:34px;padding-top:2px;border-radius:0;
  background:var(--rd-orange);color:var(--rd-ink);font:400 20px/1 var(--rd-f-display);
}
body:has(#coForm) .co-step h2::after{content:"";flex:1;min-width:12px;height:2px;background:var(--rd-rule)}
body:has(#coForm) .co-step .sub{margin:12px 0 18px;color:var(--rd-ink-2);font:500 16px/1.45 var(--rd-f-text)}

/* packages: selectable cells in a ruled grid; chosen = black */
body:has(#coForm) .pkgs{grid-template-columns:minmax(0,1fr);gap:0;padding:2px 0 0 2px}
@media (min-width:640px){ body:has(#coForm) .pkgs{grid-template-columns:repeat(2,minmax(0,1fr))} }
body:has(#coForm) .pkg{
  min-width:0;margin:-2px 0 0 -2px;padding:18px 16px 18px 56px;background:var(--rd-field);color:var(--rd-ink);
  border:2px solid var(--rd-ink);border-radius:0;box-shadow:none;transform:none;
  transition:background-color var(--rd-t-hover),color var(--rd-t-hover);
}
body:has(#coForm) .pkg:hover{transform:none;border-color:var(--rd-ink);background:var(--rd-paper-2)}
body:has(#coForm) .pkg .box{left:16px;top:18px;width:26px;height:26px;border:2px solid var(--rd-ink);border-radius:0;background:var(--rd-field);transition:none}
body:has(#coForm) .pkg input:checked ~ .box{background:var(--rd-orange);border-color:var(--rd-orange)}
body:has(#coForm) .pkg input:checked ~ .box::after{border-color:var(--rd-ink)}
body:has(#coForm) .pkg input:focus-visible ~ .box{box-shadow:none;outline:3px solid var(--rd-ring);outline-offset:3px}
body:has(#coForm) .pkg h3{font:400 25px/1.02 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase}
body:has(#coForm) .pkg .lvl,
body:has(#coForm) .pkg .flag{
  display:inline-block;margin-bottom:8px;border-radius:0;
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
body:has(#coForm) .pkg .lvl{display:block;color:var(--rd-ink-2)}
body:has(#coForm) .pkg .flag{padding:4px 8px 3px;background:var(--rd-orange);color:var(--rd-ink)}
body:has(#coForm) .pkg ul{margin-top:12px}
body:has(#coForm) .pkg li{padding:4px 0 4px 18px;color:var(--rd-ink);font:500 15.5px/1.4 var(--rd-f-text)}
body:has(#coForm) .pkg li::before{left:0;top:.75em;width:7px;height:7px;border-radius:0;background:var(--rd-orange)}
body:has(#coForm) .pkg:has(input:checked){
  --rd-ring:var(--rd-orange);
  position:relative;z-index:1;background:var(--rd-ink);border-color:var(--rd-ink);color:var(--rd-white);box-shadow:none;
}
/* two chosen packages that touch keep a visible rule between them (ink on ink would merge them into one slab) */
body:has(#coForm) .pkg:has(input:checked){box-shadow:var(--rd-pkg-l,0 0 0 transparent),var(--rd-pkg-t,0 0 0 transparent)}
body:has(#coForm) .pkg:has(input:checked) + .pkg:has(input:checked){--rd-pkg-t:inset 0 2px 0 var(--rd-on-dark-rule)}
@media (min-width:640px){
  /* two across: side by side (1|2, 3|4) gets a rule on the left edge, one above the other (1/3, 2/4) on the top */
  body:has(#coForm) .pkg:has(input:checked) + .pkg:has(input:checked){--rd-pkg-t:0 0 0 transparent}
  body:has(#coForm) .pkg:nth-child(odd):has(input:checked) + .pkg:has(input:checked){--rd-pkg-l:inset 2px 0 0 var(--rd-on-dark-rule)}
  body:has(#coForm) .pkg:has(input:checked) + .pkg + .pkg:has(input:checked){--rd-pkg-t:inset 0 2px 0 var(--rd-on-dark-rule)}
}
body:has(#coForm) .pkg:has(input:checked) .lvl{color:var(--rd-chalk)}
body:has(#coForm) .pkg:has(input:checked) li{color:#EDE8DF}

/* upload boxes */
body:has(#coForm) .drops{gap:14px}
body:has(#coForm) .drop{
  position:relative;display:flex;flex-direction:column;justify-content:center;min-height:104px;padding:18px 16px;text-align:left;
  background:var(--rd-paper-2);border:2px dashed var(--rd-ink);border-radius:0;transition:background-color var(--rd-t-hover);
}
body:has(#coForm) .drop:hover,
body:has(#coForm) .drop.over{background:var(--rd-warn-bg);border-color:var(--rd-ink);border-style:solid}
body:has(#coForm) .drop:focus-within{outline:3px solid var(--rd-ring);outline-offset:3px}
body:has(#coForm) .drop b{font:800 16.5px/1.3 var(--rd-f-text)}
/* the page's keyboard glyph (hidden by js/50-work-a.js) is replaced by a drawn upload mark: an arrow into a tray */
body:has(#coForm) .drop .empty > b:has(> .rd-emo){display:flex;align-items:center;gap:10px}
body:has(#coForm) .drop .empty > b > .rd-emo{display:none}
body:has(#coForm) .drop .empty > b:has(> .rd-emo)::before{
  content:"";flex:none;width:18px;height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 12V2.5M4.8 6.6L9 2.4l4.2 4.2M2 11v5h14v-5' fill='none' stroke='%230E0E10' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
body:has(#coForm) .drop span{margin-top:2px;color:var(--rd-ink-2);font:500 15px/1.4 var(--rd-f-text)}
body:has(#coForm) .drop .prev img{border:1px solid var(--rd-rule-strong);border-radius:0;background:var(--rd-field)}
body:has(#coForm) .drop .prev .fname{font:700 15px/1.35 var(--rd-f-mono)}

/* the request slip */
body:has(#coForm) .summary{
  position:static;top:auto;overflow:visible;padding:0 20px 22px;background:var(--rd-paper);color:var(--rd-ink);border:2px solid var(--rd-ink);border-radius:0;
}
@media (min-width:960px){
  body:has(#coForm) .summary{position:sticky;top:calc(var(--rd-nav-h) + 16px);padding-inline:24px}
}
body:has(#coForm) .summary h3{
  margin:0 -20px;padding:14px 20px 12px;background:var(--rd-ink);color:var(--rd-white);
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
@media (min-width:960px){ body:has(#coForm) .summary h3{margin-inline:-24px;padding-inline:24px} }
body:has(#coForm) .sel-list{margin:8px 0 0;min-height:44px}
body:has(#coForm) .sel-list li{align-items:center;padding:6px 0;border-bottom:1px solid var(--rd-rule);color:var(--rd-ink);font:400 20px/1.1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase}
body:has(#coForm) .sel-list li button{
  min-height:44px;padding:0 0 0 12px;color:var(--rd-ink);font:700 14.5px/1 var(--rd-f-text);letter-spacing:0;text-transform:none;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;
}
body:has(#coForm) .sel-list li button:hover{color:var(--rd-ink);text-decoration-color:var(--rd-orange)}
body:has(#coForm) .sel-list .none{padding:12px 0;border:0;color:var(--rd-ink-3);font:500 16px/1.4 var(--rd-f-text);letter-spacing:0;text-transform:none}
/* the perforation, with a punched notch at each end */
body:has(#coForm) .due{position:relative;align-items:flex-end;margin:18px 0 8px;padding-top:18px;border-top:2px dashed var(--rd-rule-strong)}
body:has(#coForm) .due::before,
body:has(#coForm) .due::after{
  content:"";position:absolute;top:-12px;width:22px;height:22px;box-sizing:border-box;
  background:var(--rd-maple);border:2px solid var(--rd-ink);border-radius:var(--rd-r-round);
}
body:has(#coForm) .due::before{left:-33px;clip-path:inset(0 0 0 50%)}
body:has(#coForm) .due::after{right:-33px;clip-path:inset(0 50% 0 0)}
@media (min-width:960px){
  body:has(#coForm) .due::before{left:-37px}
  body:has(#coForm) .due::after{right:-37px}
}
body:has(#coForm) .due span{color:var(--rd-ink-2);font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em}
body:has(#coForm) .due b{color:var(--rd-ink);font:400 54px/.86 var(--rd-f-display);letter-spacing:.01em}
body:has(#coForm) .summary p.fine{margin-bottom:16px;color:var(--rd-ink-2);font:500 15px/1.45 var(--rd-f-text)}
body:has(#coForm) .summary .btn{width:100%;min-height:64px;font-size:16px;letter-spacing:.07em}
body:has(#coForm) .summary .btn[disabled]{opacity:1}
body:has(#coForm) .err{
  margin-top:14px;padding:12px 14px;border:0;border-left:6px solid var(--rd-err);border-radius:0;background:var(--rd-err-bg);color:var(--rd-err);
  font:700 15px/1.4 var(--rd-f-text);
}
body:has(#coForm) .err::before{display:none}
body:has(#coForm) .steps-mini{margin-top:20px;padding-top:14px;border-top:1px solid var(--rd-rule)}
/* numbered like the step squares, smaller: the numeral comes from a counter (no trailing period), centred */
body:has(#coForm) .steps-mini{counter-reset:rd-st}
body:has(#coForm) .steps-mini li{counter-increment:rd-st;display:flex;align-items:center;gap:12px;padding:5px 0;color:var(--rd-ink);font:500 15px/1.4 var(--rd-f-text)}
body:has(#coForm) .steps-mini li b{
  flex:none;display:grid;place-items:center;width:28px;height:28px;padding:2px 0 0;box-sizing:border-box;
  background:var(--rd-orange);color:var(--rd-ink);font:400 0/1 var(--rd-f-display);
}
body:has(#coForm) .steps-mini li b::before{content:counter(rd-st);font-size:17px;line-height:1}

/* request received */
body:has(#coForm) .done{
  max-width:760px;margin:0;padding:calc(clamp(20px,3vw,34px) + 6px) clamp(18px,3vw,34px) clamp(20px,3vw,34px);text-align:left;
  background:linear-gradient(var(--rd-orange),var(--rd-orange)) 0 0 / 100% 6px no-repeat var(--rd-paper);
  color:var(--rd-ink);border:2px solid var(--rd-ink);
}
body:has(#coForm) .done .tick{position:relative;width:56px;height:56px;margin:0 0 20px;border-radius:0;background:var(--rd-orange);color:transparent;font-size:0}
body:has(#coForm) .done .tick::after{
  content:"";position:absolute;left:15px;top:14px;width:24px;height:13px;
  border-left:5px solid var(--rd-ink);border-bottom:5px solid var(--rd-ink);transform:rotate(-45deg);
}
body:has(#coForm) .done h2{font:400 var(--rd-fs-700)/.9 var(--rd-f-display);letter-spacing:.004em}
body:has(#coForm) .done h2 .o{display:inline;line-height:inherit;padding:0;margin:0;background:var(--rd-hl-bar);color:var(--rd-ink)}
body:has(#coForm) .done p{margin-top:18px;color:var(--rd-ink);font:500 17px/1.5 var(--rd-f-text)}
body:has(#coForm) .done .btn-row .btn{flex:1 1 200px}

/* ---- 55-rent.css ---- */
/* =====================================================================
   55-rent.css — DESIGN.md 6.7: /rent
   One ticket lying on the floor: pick a rental, pick a length, a day and an open time, leave your
   details, tear off the stub. CSS layer only: the page's HTML and script are untouched.

   Scope: RENT = body:has(#svcGrid). It carries an id, so it out-ranks the shared :where() rules and
   the page's own class rules without !important.
   The masthead and the hero (logo placard, headline, the rates as a ledger) are shared with the
   sign-up pages and live at the top of 60-signup.css.

   --rd-tk (set in 60-signup.css) is the ticket's side padding.

   !important appears only against inline styles the page or its script writes:
     - #rMem, the member box (DESIGN 6.7)
     - .summary .line small (the script colours it inline; the page itself uses !important there)
   ===================================================================== */

/* ---------- column ---------- */
body:has(#svcGrid) .layout{
  max-width:calc(760px + 2 * var(--rd-gut));margin:0 auto;padding:clamp(22px,3.4vw,40px) var(--rd-gut) 0;
}

/* ---------- the ticket ---------- */
body:has(#svcGrid) .card{
  position:relative;overflow:visible;padding:0 var(--rd-tk) var(--rd-tk);
  background:var(--rd-paper);color:var(--rd-ink);border:2px solid var(--rd-ink);border-radius:0;box-shadow:none;
}
/* black header bar, in the page's own words (its title and its description) */
body:has(#svcGrid) .card::before{
  content:"Book a rental";content:"Book a rental" / "";
  display:flex;align-items:center;min-height:46px;margin:0 calc(-1 * var(--rd-tk));padding:1px var(--rd-tk) 0;
  background:var(--rd-ink);color:var(--rd-white);
  font:800 11px/1.3 var(--rd-f-text);font-stretch:112%;letter-spacing:.1em;text-transform:uppercase;
}
body:has(#svcGrid) .card::after{
  content:"Live availability";content:"Live availability" / "";
  position:absolute;right:var(--rd-tk);top:0;display:flex;align-items:center;height:46px;padding-top:1px;
  color:var(--rd-orange);white-space:nowrap;
  font:800 11px/1.3 var(--rd-f-text);font-stretch:112%;letter-spacing:.1em;text-transform:uppercase;
}
@media (min-width:640px){
  body:has(#svcGrid) .card::before,
  body:has(#svcGrid) .card::after{font-size:var(--rd-fs-label);font-stretch:125%;letter-spacing:.16em}
}

/* ---------- step header: the number in an orange square, the title in Anton, a rule to the edge ---------- */
body:has(#svcGrid) :is(#s1,#s2,#s3,#sDone){display:flow-root}
body:has(#svcGrid) .steplabel{
  float:left;display:grid;place-items:center;width:34px;height:34px;margin:22px 12px 0 0;padding-top:2px;gap:0;
  background:var(--rd-orange);color:var(--rd-ink);font-size:0;letter-spacing:0;line-height:0;
}
body:has(#svcGrid) .steplabel::before{
  display:block;width:auto;height:auto;background:none;color:var(--rd-ink);
  font:400 20px/1 var(--rd-f-display);letter-spacing:0;
}
body:has(#svcGrid) #s1 .steplabel::before{content:"1";content:"1" / ""}
body:has(#svcGrid) #s2 .steplabel::before{content:"2";content:"2" / ""}
body:has(#svcGrid) #s3 .steplabel::before{content:"3";content:"3" / ""}
body:has(#svcGrid) .card h2{
  display:flex;align-items:center;gap:12px;min-height:34px;margin:22px 0 14px;padding-top:2px;color:var(--rd-ink);
  font:400 var(--rd-fs-500)/1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase;
}
body:has(#svcGrid) .card h2::after{content:"";flex:1;min-width:12px;height:2px;margin-top:-2px;background:var(--rd-rule)}
/* a step title is not a headline: no highlighted word next to the orange square */
body:has(#svcGrid) .card h2 .o{display:contents;padding:0;background:none;color:inherit}
/* back */
body:has(#svcGrid) .backlink{display:flex;width:max-content;margin:8px 0 0;padding:0;font-size:15px}
body:has(#svcGrid) .backlink + .steplabel,
body:has(#svcGrid) .backlink + .steplabel + h2{margin-top:6px}

/* ---------- step 1: the rentals, a ruled grid of cells ---------- */
body:has(#svcGrid) .svc-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:2px 0 0 2px}
@media (min-width:560px){ body:has(#svcGrid) .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
body:has(#svcGrid) .svc{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;min-height:112px;
  margin:-2px 0 0 -2px;padding:13px 50px 13px 14px;
  background-color:var(--rd-field);color:var(--rd-ink);border:2px solid var(--rd-ink);border-radius:0;box-shadow:none;transform:none;
  text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--rd-t-hover),color var(--rd-t-hover);
}
/* the arrow: this cell takes you to the next step */
body:has(#svcGrid) .svc::after{
  content:"";position:absolute;right:14px;top:18px;width:26px;height:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 14'%3E%3Cpath d='M0 7h23M17 1.2 23.2 7 17 12.8' fill='none' stroke='%230E0E10' stroke-width='2.4'/%3E%3C/svg%3E") center / contain no-repeat;
  transition:transform var(--rd-t-hover) var(--rd-ease-out);
}
body:has(#svcGrid) .svc h3{margin:0;color:inherit;font:400 clamp(25px,2.4vw,29px)/1 var(--rd-f-display);letter-spacing:.015em;text-transform:uppercase}
body:has(#svcGrid) .svc .pr{margin-top:7px;color:inherit;font:700 15px/1.3 var(--rd-f-mono);letter-spacing:0;word-spacing:-.24em}
body:has(#svcGrid) .svc .ds{margin-top:9px;color:var(--rd-ink-2);font:500 15px/1.4 var(--rd-f-text)}
body:has(#svcGrid) .svc:focus-visible{outline:3px solid var(--rd-ring);outline-offset:-5px;box-shadow:none;border-color:var(--rd-ink)}
body:has(#svcGrid) .svc.sel{background-color:var(--rd-ink);border-color:var(--rd-ink);color:var(--rd-white)}
body:has(#svcGrid) .svc.sel .pr{color:var(--rd-orange)}
body:has(#svcGrid) .svc.sel .ds{color:var(--rd-chalk)}
body:has(#svcGrid) .svc.sel::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 14'%3E%3Cpath d='M0 7h23M17 1.2 23.2 7 17 12.8' fill='none' stroke='%23FFFFFF' stroke-width='2.4'/%3E%3C/svg%3E");
}
body:has(#svcGrid) .svc:hover{transform:none;box-shadow:none;border-color:var(--rd-ink)}
@media (hover:hover){
  body:has(#svcGrid) .svc:hover{background-color:var(--rd-ink);color:var(--rd-white)}
  body:has(#svcGrid) .svc:hover .pr{color:var(--rd-orange)}
  body:has(#svcGrid) .svc:hover .ds{color:var(--rd-chalk)}
  body:has(#svcGrid) .svc:hover::after{
    transform:translateX(4px);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 14'%3E%3Cpath d='M0 7h23M17 1.2 23.2 7 17 12.8' fill='none' stroke='%23FFFFFF' stroke-width='2.4'/%3E%3C/svg%3E");
  }
}
body:has(#svcGrid) .svc:active{background-color:var(--rd-orange-press);border-color:var(--rd-ink);color:var(--rd-ink)}
body:has(#svcGrid) .svc:active :is(.pr,.ds){color:var(--rd-ink)}

/* ---------- step 2: options ---------- */
body:has(#svcGrid) #optLabel{
  display:block;margin:4px 0 6px;color:var(--rd-ink-2);
  font:800 13px/1.3 var(--rd-f-text);font-stretch:112%;letter-spacing:.08em;text-transform:uppercase;
}
body:has(#svcGrid) .pillrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:8px;margin:0 0 4px}
body:has(#svcGrid) .pill,
body:has(#svcGrid) .pill:hover{
  display:flex;align-items:center;justify-content:center;min-width:0;min-height:var(--rd-tap);padding:8px 12px;
  background:var(--rd-field);color:var(--rd-ink);border:2px solid var(--rd-field-border);border-radius:0;box-shadow:none;transform:none;
  font:800 16px/1.2 var(--rd-f-text);text-align:center;
  transition:background-color var(--rd-t-hover),border-color var(--rd-t-hover),color var(--rd-t-hover);
}
body:has(#svcGrid) .pill:hover{border-color:var(--rd-ink)}
body:has(#svcGrid) .pill.sel,
body:has(#svcGrid) .pill.sel:hover{background:var(--rd-ink);border-color:var(--rd-ink);color:var(--rd-white);box-shadow:none}
body:has(#svcGrid) .pill:focus-visible{outline:3px solid var(--rd-ring);outline-offset:3px;box-shadow:none}
body:has(#svcGrid) span.pill{grid-column:1 / -1;justify-self:start;padding-inline:18px}
@media (max-width:479.98px){
  body:has(#svcGrid) button.pill{padding-inline:6px;letter-spacing:-.005em}
}

/* ---------- step 2: the big calendar — a ruled month, one cell per day ---------- */
body:has(#svcGrid) .cal{margin:0 calc(-1 * var(--rd-tk));padding:0;border:0;border-radius:0;background:none}
body:has(#svcGrid) .cal-head{
  margin:0;padding:6px;background:var(--rd-ink);color:var(--rd-white);--rd-ring:var(--rd-orange);
}
body:has(#svcGrid) .cal-head b{padding-top:3px;color:var(--rd-white);font:400 25px/1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase}
body:has(#svcGrid) .cal-nav{
  display:grid;place-items:center;width:48px;height:48px;padding:0 0 4px;
  background:transparent;color:var(--rd-white);border:2px solid rgba(255,255,255,.42);border-radius:0;
  font:700 26px/1 var(--rd-f-text);transition:background-color var(--rd-t-hover),color var(--rd-t-hover),border-color var(--rd-t-hover);
}
body:has(#svcGrid) .cal-nav:hover:not(:disabled){background:var(--rd-white);border-color:var(--rd-white);color:var(--rd-ink)}
body:has(#svcGrid) .cal-nav:disabled{opacity:.3}
body:has(#svcGrid) .cal-grid{
  gap:2px;padding:0;background:var(--rd-field-border);
  border-top:2px solid var(--rd-ink);border-bottom:2px solid var(--rd-ink);
}
body:has(#svcGrid) .cal-grid > div{background:var(--rd-paper-2)}
body:has(#svcGrid) .cal-dow{
  padding:7px 0 5px;background:var(--rd-paper);color:var(--rd-ink-2);
  font:800 10.5px/1.3 var(--rd-f-text);font-stretch:112%;letter-spacing:.1em;text-transform:uppercase;
}
body:has(#svcGrid) .cal-day{
  position:relative;aspect-ratio:auto;min-width:0;min-height:clamp(46px,12.6vw,58px);padding:3px 0 0;
  background:var(--rd-field);color:var(--rd-ink);border:0;border-radius:0;box-shadow:none;transform:none;
  font:400 21px/1 var(--rd-f-display);letter-spacing:.02em;font-variant-numeric:tabular-nums;
  transition:background-color var(--rd-t-hover),color var(--rd-t-hover);
}
body:has(#svcGrid) .cal-day:hover:not(:disabled){transform:none;box-shadow:inset 0 0 0 2px var(--rd-ink)}
body:has(#svcGrid) .cal-day:focus-visible{outline:3px solid var(--rd-ring);outline-offset:-3px;z-index:1}
body:has(#svcGrid) .cal-day:disabled{background:var(--rd-hatch);color:var(--rd-hatch-ink);cursor:not-allowed}
/* today: an ink frame and an orange square under the number */
body:has(#svcGrid) .cal-day.today{box-shadow:inset 0 0 0 2px var(--rd-ink)}
body:has(#svcGrid) .cal-day.today::after{
  content:"";position:absolute;left:50%;bottom:6px;width:6px;height:6px;margin-left:-3px;background:var(--rd-orange);
}
body:has(#svcGrid) .cal-day.sel,
body:has(#svcGrid) .cal-day.sel:hover{background:var(--rd-ink);color:var(--rd-white);box-shadow:none}
body:has(#svcGrid) .cal-day.sel:focus-visible{outline-color:var(--rd-orange)}
body:has(#svcGrid) .cal-picked{
  display:flex;align-items:center;gap:10px;margin:0;padding:12px var(--rd-tk) 0;color:var(--rd-ink);
  font:700 15px/1.4 var(--rd-f-mono);letter-spacing:.01em;
}
body:has(#svcGrid) .cal-picked::before{content:"";flex:none;width:8px;height:8px;background:var(--rd-orange);outline:2px solid var(--rd-ink)}
@media (min-width:640px){
  /* room to spare: the month sits inside the ticket's margins with its own frame */
  body:has(#svcGrid) .cal{margin:0}
  body:has(#svcGrid) .cal-grid{border:2px solid var(--rd-ink)}
  body:has(#svcGrid) .cal-head{border:2px solid var(--rd-ink);border-bottom:0;padding:6px}
  body:has(#svcGrid) .cal-picked{padding-inline:0}
}

/* ---------- step 2: open start times ---------- */
body:has(#svcGrid) #timeLabel{display:block;color:var(--rd-ink);font:700 16px/1.4 var(--rd-f-text)}
body:has(#svcGrid) .chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
body:has(#svcGrid) .chips:empty{margin-top:0}
@media (min-width:640px){ body:has(#svcGrid) .chips{grid-template-columns:repeat(3,minmax(0,1fr))} }
body:has(#svcGrid) .chip{
  display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:52px;padding:4px 6px;
  background:var(--rd-field);color:var(--rd-ink);border:2px solid var(--rd-ink);border-radius:0;box-shadow:none;transform:none;
  font:800 15px/1.15 var(--rd-f-text);font-stretch:86%;font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap;
  transition:background-color var(--rd-t-hover),color var(--rd-t-hover);
}
body:has(#svcGrid) .chip::before{content:"";flex:none;width:8px;height:8px;background:var(--rd-orange)}
@media (min-width:440px){
  body:has(#svcGrid) .chip{gap:9px;padding:4px 10px;font:500 15.5px/1.15 var(--rd-f-mono);font-stretch:100%;letter-spacing:0}
}
@media (hover:hover){
  body:has(#svcGrid) .chip:hover{background:var(--rd-ink);color:var(--rd-white);transform:none}
}
@media (hover:none){
  body:has(#svcGrid) .chip:hover:not(.sel){background:var(--rd-field);color:var(--rd-ink);transform:none}
}
body:has(#svcGrid) .chip:focus-visible{outline:3px solid var(--rd-ring);outline-offset:3px;box-shadow:none}
body:has(#svcGrid) .chip.sel,
body:has(#svcGrid) .chip.sel:hover{background:var(--rd-orange);border-color:var(--rd-ink);color:var(--rd-ink)}
/* picked: a check replaces the square */
body:has(#svcGrid) .chip.sel::before{
  width:12px;height:7px;margin:0 -1px 3px 1px;background:none;
  border-left:3px solid var(--rd-ink);border-bottom:3px solid var(--rd-ink);transform:rotate(-45deg);
}
body:has(#svcGrid) #proceed{width:100%;margin-top:16px}

/* ---------- step 3: details ---------- */
body:has(#svcGrid) #rMem{
  border:2px dashed var(--rd-ink) !important;border-radius:0 !important;background:var(--rd-paper-2) !important;
  margin:20px 0 0 !important;font-size:16px !important;
}
body:has(#svcGrid) #rMem b{font-weight:800}
body:has(#svcGrid) #rMem label{min-height:44px;margin-top:0 !important;font-size:16px;cursor:pointer}
body:has(#svcGrid) #rMem input[type="radio"]{flex:none;width:22px !important;height:22px;accent-color:var(--rd-ink)}
body:has(#svcGrid) #rMem > div{font-size:14px !important;color:var(--rd-ink-2) !important;line-height:1.45}

/* the stub: a perforation with a notch punched at each edge, then the receipt — paper, never black */
body:has(#svcGrid) .summary{
  position:relative;overflow:visible;margin:24px 0 0;padding:14px 0 0;background:transparent;color:var(--rd-ink);
  border-radius:0;border-top:2px dashed var(--rd-rule-strong);
}
body:has(#svcGrid) .summary:empty{display:none}
body:has(#svcGrid) .summary::before,
body:has(#svcGrid) .summary::after{
  content:"";display:block;position:absolute;inset:auto;top:-12px;bottom:auto;width:22px;height:22px;box-sizing:border-box;
  background:var(--rd-maple);border:2px solid var(--rd-ink);border-radius:var(--rd-r-round);
  font-size:0;opacity:1;transform:none;pointer-events:none;
}
body:has(#svcGrid) .summary::before{left:calc(-1 * var(--rd-tk) - 13px);clip-path:inset(0 0 0 50%)}
body:has(#svcGrid) .summary::after{right:calc(-1 * var(--rd-tk) - 13px);clip-path:inset(0 50% 0 0)}
body:has(#svcGrid) .summary .line{
  display:flex;align-items:baseline;justify-content:flex-start;gap:10px;padding:6px 0;
  color:var(--rd-ink);font:500 15px/1.4 var(--rd-f-mono);letter-spacing:0;word-spacing:-.24em;
}
@media (max-width:479.98px){ body:has(#svcGrid) .summary .line{font-size:14px} }
body:has(#svcGrid) .summary .line span:first-child{
  flex:none;max-width:56%;color:var(--rd-ink-2);
  font:800 10.5px/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.14em;word-spacing:0;text-transform:uppercase;
}
body:has(#svcGrid) .summary .line::before{content:"";order:1;flex:1 1 16px;min-width:16px;border-bottom:2px dotted var(--rd-rule-strong);transform:translateY(-3px)}
body:has(#svcGrid) .summary .line > :last-child{order:2;flex:0 1 auto;min-width:0;text-align:right}
body:has(#svcGrid) .summary .line b{color:var(--rd-ink);font-weight:500}
body:has(#svcGrid) .summary .line.total{
  align-items:baseline;margin-top:8px;padding:14px 0 0;border-top:2px dashed var(--rd-rule-strong);font-family:var(--rd-f-mono);
}
body:has(#svcGrid) .summary .total span:first-child{color:var(--rd-ink-2);font-size:11.5px;letter-spacing:.16em}
body:has(#svcGrid) .summary .total::before{border-bottom-color:transparent}
body:has(#svcGrid) .summary .total .amt{
  color:var(--rd-ink);font:400 clamp(46px,7vw,56px)/.9 var(--rd-f-display);letter-spacing:.01em;font-variant-numeric:tabular-nums;
}
/* the script's note under the total: plain help text, left-aligned */
body:has(#svcGrid) .summary .line:has(> small){padding:10px 0 0}
body:has(#svcGrid) .summary .line:has(> small)::before,
body:has(#svcGrid) .summary .line:has(> small) span:first-child{display:none}
body:has(#svcGrid) .summary .line > small:last-child{
  flex:1 1 auto;color:var(--rd-ink-2) !important;text-align:left;font:500 15px/1.45 var(--rd-f-text);letter-spacing:0;word-spacing:0;
}

/* the button that takes money, and what sits under it */
body:has(#svcGrid) #bookBtn{width:100%;min-height:64px;margin-top:18px;font-size:16px;letter-spacing:.07em}
body:has(#svcGrid) .err{margin-top:10px;min-height:0}
body:has(#svcGrid) .err:empty{margin-top:0}
body:has(#svcGrid) .paynote-c{margin-top:12px;text-align:left}
body:has(#svcGrid) #doneMsg{color:var(--rd-ink);font:500 16px/1.5 var(--rd-f-text)}
body:has(#svcGrid) #doneMsg b{font-weight:800}
body:has(#svcGrid) .btn-outline{width:100%;margin-top:18px}

/* moving a paid booking: a notice on black */
body:has(#svcGrid) .resched-bar{
  margin:16px 0 0;padding:14px 16px;border-left:6px solid var(--rd-orange);border-radius:0;
  background:var(--rd-ink);color:var(--rd-white);font:600 16px/1.45 var(--rd-f-text);--rd-ring:var(--rd-orange);
}
body:has(#svcGrid) .resched-bar ~ .backlink + .steplabel,
body:has(#svcGrid) .resched-bar ~ .backlink + .steplabel + h2{margin-top:18px}
body:has(#svcGrid) .resched-bar b{color:var(--rd-orange)}
body:has(#svcGrid) .resched-bar a{
  display:inline-flex;align-items:center;min-height:44px;color:var(--rd-white);font:700 15px/1.3 var(--rd-f-text);
  text-decoration:underline;text-decoration-color:var(--rd-orange);text-decoration-thickness:2px;text-underline-offset:4px;
}

/* ---------- the links under the ticket ---------- */
body:has(#svcGrid) .also{justify-content:flex-start;gap:8px;margin-top:16px}
body:has(#svcGrid) .also a{
  display:inline-flex;align-items:center;min-height:44px;padding:4px 14px;
  background:transparent;color:var(--rd-ink);border:2px solid var(--rd-ink);border-radius:0;transform:none;
  font:800 12.5px/1.15 var(--rd-f-text);font-stretch:116%;letter-spacing:.09em;text-transform:uppercase;
  transition:background-color var(--rd-t-hover),color var(--rd-t-hover);
}
body:has(#svcGrid) .also a:hover{background:var(--rd-ink);border-color:var(--rd-ink);color:var(--rd-white);transform:none}
@media (max-width:479.98px){
  body:has(#svcGrid) .also{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  body:has(#svcGrid) .also a{justify-content:center;padding-inline:6px;font-stretch:104%;letter-spacing:.05em;text-align:center}
}

/* ---- 60-signup.css ---- */
/* =====================================================================
   60-signup.css — DESIGN.md 6.8 (and the hero half of 6.7)
   The sign-up family: every league and camp sign-up page, /pp/, /film/, /happy-hoopers,
   and every success / confirmation page. /rent shares the top of this file (the masthead and hero).
   CSS layer only: the pages' HTML and scripts are untouched.

   Scopes (DESIGN.md 6.1). Each one carries an id, so it out-ranks the shared :where() rules in
   30-components.css / 40-forms.css and the pages' own class rules without !important.
     SIGN    body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck))     rent + sign-up + success: the masthead and hero
     REG     body:has(#regForm)                                          every sign-up form
     LEAGUE  body:has(#divisionList)                                     league sign-up
     CAMP    body:has(#regForm):has(.session-cards)                      camp sign-up
     PROG    body:has(#regForm):has(.progress-rail)                      /pp/, /film/, /happy-hoopers
     DONE    body:has(.bigcheck):not(#rd)                                success pages (":not(#rd)" only adds weight)

   --rd-tk is the ticket's side padding (a component variable, not a token): header bars, sticky rails,
   perforations and notches all reach the ticket's edge with it.

   !important appears only where a page or its script writes an INLINE style that has to change:
     - the member boxes (DESIGN 6.8) and league.js's waitlist row: border, radius, background
     - the waiver row's 13.5px text and its checkbox (form text is never below 16px)
     - the "What We Cover" paragraphs on /pp/, /film/, /happy-hoopers (inline 14.5px #333)
     - the "What's Next?" buttons on the success pages (inline pills, white text on orange)
   ===================================================================== */

body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)){--rd-tk:clamp(16px,3.2vw,28px)}


/* =====================================================================
   1. MASTHEAD + HERO  (SIGN)
   These pages have no nav bar. The top of the hero becomes one: the real logo on its paper placard,
   flush with the top edge, a hairline under the bar, and the tagline in paint at the far end.
   Same height, same placard and same hairline as the nav on the rest of the site.
   Markup: .hero > [.hero-logo] .badge [.bigcheck] h1 .sub [.ribbon] [.rates|.glance|.meta]
   ===================================================================== */
body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero{
  --rd-hx:max(var(--rd-gut),calc((100% - var(--rd-max)) / 2 + var(--rd-gut)));
  display:grid;grid-template-columns:minmax(0,1fr);align-content:start;
  padding:calc(var(--rd-nav-h) + clamp(20px,2.8vw,34px)) var(--rd-hx) clamp(24px,3.4vw,40px);
  background-image:linear-gradient(var(--rd-on-dark-rule),var(--rd-on-dark-rule));
  background-size:100% 1px;background-position:0 var(--rd-nav-h);background-repeat:no-repeat;
}
/* the placard: paper, the wordmark in ink; the logo itself is the page's own <img> laid over it */
body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero::before{
  content:"Academy";content:"Academy" / "";
  display:flex;align-items:center;position:absolute;z-index:1;left:var(--rd-hx);right:auto;top:0;bottom:auto;
  box-sizing:border-box;width:auto;height:var(--rd-nav-h);padding:3px 14px 0 calc(12px + 44.2px + 10px);
  border:0;border-radius:0;background:var(--rd-paper);color:var(--rd-ink);
  font:400 21px/1 var(--rd-f-display);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero .hero-logo{
  position:absolute;z-index:2;left:calc(var(--rd-hx) + 12px);top:calc((var(--rd-nav-h) - 40px) / 2);
  display:block;height:40px;width:auto;margin:0;padding:0;background:none;
}
/* success pages carry no logo element: the same real file is placed on the placard */
body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero:not(:has(.hero-logo))::before{
  background:var(--rd-paper) url("/logo.png") 12px 50% / auto 40px no-repeat;
}
/* the way home: js/10-layer.js lays one link over the placard (same box, same words, no ink of its own),
   so the logo goes to the home page here as it does in the nav on every other page */
body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero .rd-home{
  display:flex;align-items:center;position:absolute;z-index:3;left:var(--rd-hx);top:0;
  box-sizing:border-box;height:var(--rd-nav-h);margin:0;padding:3px 14px 0 calc(12px + 44.2px + 10px);
  background:none;border:0;color:transparent;text-decoration:none;white-space:nowrap;
  font:400 21px/1 var(--rd-f-display);letter-spacing:.06em;text-transform:uppercase;
  -webkit-tap-highlight-color:transparent;
}
body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero .rd-home:focus-visible{outline:3px solid var(--rd-ink);outline-offset:-5px}

/* the tagline, painted at the far end of the bar */
body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero::after{
  content:"Train. Compete. Dominate.";content:"Train. Compete. Dominate." / "";
  display:none;align-items:center;position:absolute;z-index:1;right:var(--rd-hx);left:auto;top:0;bottom:auto;
  width:auto;height:var(--rd-nav-h);border:0;border-radius:0;color:var(--rd-white);white-space:nowrap;
  font:800 11px/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
@media (min-width:560px){
  body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero::after{display:flex}
}
/* phones: the same words on two lines, set a little narrower, so the bar is not empty beside the placard */
@media (min-width:360px) and (max-width:559.98px){
  body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero::after{
    content:"Train. Compete.\A Dominate.";content:"Train. Compete.\A Dominate." / "";
    display:flex;white-space:pre;text-align:right;font-stretch:112%;letter-spacing:.1em;line-height:1.45;
  }
}

body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero .badge{margin:0}
@media (max-width:479.98px){
  /* the longest kicker ("IGN Academy Camp · Nov 23 & 24, 2026") stays on one line on a phone */
  body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero .badge{font-stretch:108%;letter-spacing:.1em}
}
body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero h1{
  margin:clamp(10px,1.5vw,16px) 0 0;font-size:clamp(52px,15.4vw,96px);line-height:.9;
}
body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero .sub{margin:14px 0 0;max-width:34em}
body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero .ribbon{margin:16px 0 0}

/* phones, three figures: the date takes the first row to itself, the other two share the second
   (instead of two up top and one orphan below) */
@media (max-width:639.98px){
  body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero :is(.rates,.glance,.meta) > div:first-child:nth-last-child(3){grid-column:1 / -1}
  body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero :is(.rates,.glance,.meta) > div:first-child:nth-last-child(3) + div{padding-left:0;border-left:0}
  body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero :is(.rates,.glance,.meta) > div:first-child:nth-last-child(3) + div + div{
    grid-column:auto;padding-left:16px;border-left:1px solid var(--rd-on-dark-rule);
  }
}

/* league pages on phones: their figures are date ranges, too long for half a row — so they are set as
   the ledger there too (value left, label right, one rule between rows) */
@media (max-width:639.98px){
  body:has(#divisionList) .hero .glance{display:block;border-top:1px solid var(--rd-on-dark-rule)}
  body:has(#divisionList) .hero .glance > div,
  body:has(#divisionList) .hero .glance > div:first-child:nth-last-child(3) + div + div{
    display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;column-gap:14px;
    padding:9px 0 7px;border:0;border-bottom:1px solid var(--rd-on-dark-rule);text-align:right;line-height:2;
  }
  body:has(#divisionList) .hero .glance > div:last-child,
  body:has(#divisionList) .hero .glance > div:first-child:nth-last-child(3) + div + div:last-child{border-bottom:0;padding-bottom:0}
  body:has(#divisionList) .hero .glance b{margin:0;text-align:left;font-size:clamp(28px,8.4vw,34px);line-height:1}
}

/* desktop: the name stacked large on the left, standing on the baseline; on the right the words and
   the figures as a ledger (DESIGN 5.8) — so the band is full from sideline to sideline */
@media (min-width:960px){
  body:is(:has(#svcGrid),:has(#regForm)) .hero{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto 1fr;
    column-gap:clamp(24px,4vw,64px);
  }
  body:is(:has(#svcGrid),:has(#regForm)) .hero .badge{grid-column:1;grid-row:1;align-self:start}
  body:is(:has(#svcGrid),:has(#regForm)) .hero h1{
    grid-column:1;grid-row:2 / span 2;align-self:end;margin:14px 0 -.035em;
    font-size:clamp(96px,10.4vw,150px);line-height:.88;text-wrap:wrap;
  }
  /* the highlighted word takes its own line: FALL / 3V3, BOOK A / RENTAL, PRACTICE & / PLAY */
  body:is(:has(#svcGrid),:has(#regForm)) .hero h1 > span{display:block}
  body:is(:has(#svcGrid),:has(#regForm)) .hero .ribbon{grid-column:2;grid-row:1;align-self:start;margin:0 0 14px}
  body:is(:has(#svcGrid),:has(#regForm)) .hero .sub{grid-column:2;grid-row:2;align-self:start;margin:0;text-wrap:balance}
  body:is(:has(#svcGrid),:has(#regForm)) .hero:not(:has(.ribbon)) .sub{grid-row:1 / span 2}

  body:is(:has(#svcGrid),:has(#regForm)) .hero :is(.rates,.glance,.meta){
    grid-column:2;grid-row:3;align-self:end;display:block;margin:clamp(18px,2vw,26px) 0 0;
    border-top:1px solid var(--rd-on-dark-rule);
  }
  body:is(:has(#svcGrid),:has(#regForm)) .hero :is(.rates,.glance,.meta) > div{
    display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;column-gap:18px;
    padding:9px 0 7px;border:0;border-bottom:1px solid var(--rd-on-dark-rule);text-align:right;
    font-size:11.5px;line-height:1.3;font-stretch:125%;letter-spacing:.14em;
  }
  body:is(:has(#svcGrid),:has(#regForm)) .hero :is(.rates,.glance,.meta) > div:first-child{padding-left:0}
  body:is(:has(#svcGrid),:has(#regForm)) .hero :is(.rates,.glance,.meta) > div:last-child{border-bottom:0;padding-bottom:0}
  body:is(:has(#svcGrid),:has(#regForm)) .hero :is(.rates,.glance,.meta) b{
    grid-column:1;grid-row:1;margin:0;text-align:left;font-size:clamp(38px,3.4vw,50px);line-height:1;
  }
  body:is(:has(#svcGrid),:has(#regForm)) .hero :is(.rates,.glance,.meta) > div:has(small) b{grid-row:1 / span 2}
  body:is(:has(#svcGrid),:has(#regForm)) .hero :is(.rates,.glance,.meta) br{display:none}
  body:is(:has(#svcGrid),:has(#regForm)) .hero :is(.rates,.glance,.meta) small{grid-column:2;margin:1px 0 3px}
  body:is(:has(#svcGrid),:has(#regForm)) .hero :is(.rates,.glance,.meta) > div:not(:has(small)){padding-bottom:5px;line-height:2.1}
}
/* camp names run long (THANKSGIVING, PRESIDENT'S): a size that keeps the longest word inside its column */
@media (min-width:960px){
  body:has(#regForm):has(.session-cards) .hero h1{font-size:clamp(80px,8.1vw,116px)}
}
/* a laptop screen is short: the same band, set a size down, so the ticket starts on the first screen */
@media (min-width:960px) and (max-height:800px){
  body:is(:has(#svcGrid),:has(#regForm)) .hero{
    padding-top:calc(var(--rd-nav-h) + 22px);padding-bottom:28px;
  }
  body:is(:has(#svcGrid),:has(#regForm)) .hero h1{font-size:clamp(84px,8.8vw,120px)}
  body:has(#regForm):has(.session-cards) .hero h1{font-size:clamp(72px,7.1vw,98px)}
  body:is(:has(#svcGrid),:has(#regForm)) .hero :is(.rates,.glance,.meta){margin-top:16px}
  body:is(:has(#svcGrid),:has(#regForm)) .hero :is(.rates,.glance,.meta) > div{padding:6px 0 4px}
  body:is(:has(#svcGrid),:has(#regForm)) .hero :is(.rates,.glance,.meta) b{font-size:clamp(32px,2.9vw,40px)}
}


/* =====================================================================
   2. COLUMNS
   ===================================================================== */
/* league: one column */
body:has(#divisionList) .layout{
  max-width:calc(760px + 2 * var(--rd-gut));margin:0 auto;padding:clamp(22px,3.4vw,40px) var(--rd-gut) 0;gap:0;
}
body:has(#divisionList) .layout > .card + .card{margin-top:-2px}
body:has(#divisionList) .layout > #regForm{margin-top:clamp(18px,2.6vw,28px)}

/* camp: the info rail beside the ticket from 960px */
body:has(#regForm):has(.session-cards) .layout{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.6vw,28px);align-items:start;
  max-width:calc(1080px + 2 * var(--rd-gut));margin:0 auto;padding:clamp(22px,3.4vw,40px) var(--rd-gut) 0;
}
body:has(#regForm):has(.session-cards) .rail{position:static;gap:0}
body:has(#regForm):has(.session-cards) .rail > .card + .card{margin-top:-2px}
@media (min-width:960px){
  body:has(#regForm):has(.session-cards) .layout{grid-template-columns:minmax(0,5fr) minmax(0,8fr)}
  body:has(#regForm):has(.session-cards) .rail{position:sticky;top:20px}
}

/* /pp/, /film/, /happy-hoopers: one 720px column (30-components.css opens .wrap and centres its children) */
body:has(#regForm):has(.progress-rail) .wrap > :is(.card,.deadline){margin-top:-2px}
body:has(#regForm):has(.progress-rail) .wrap > .deadline{margin-top:clamp(22px,3.4vw,40px)}
body:has(#regForm):has(.progress-rail) .wrap > #regForm,
body:has(#regForm):has(.progress-rail) .wrap > #regForm + .card{margin-top:clamp(18px,2.6vw,28px)}


/* =====================================================================
   3. SHEETS — the info cards
   ===================================================================== */
body:has(#regForm) .card{
  position:relative;overflow:visible;opacity:1;transform:none;transition:none;animation:none;
  background:var(--rd-paper);color:var(--rd-ink);border:2px solid var(--rd-ink);border-radius:0;box-shadow:none;
  padding:clamp(18px,3vw,24px) var(--rd-tk) clamp(18px,3vw,26px);
}
body:has(#regForm) .card:hover{box-shadow:none;border-color:var(--rd-ink);transform:none}
body:has(#regForm) .card h2{
  display:flex;align-items:center;gap:12px;margin:0 0 14px;color:var(--rd-ink);
  font:400 var(--rd-fs-500)/1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase;
}
body:has(#regForm) .card p{color:var(--rd-ink);font:500 16px/1.5 var(--rd-f-text)}
body:has(#regForm):has(.progress-rail) .card > p[style]{font-size:16px !important;color:var(--rd-ink) !important}
body:has(#regForm) .card p.hint{margin-top:12px;color:var(--rd-ink-2);font:500 15px/1.45 var(--rd-f-text)}
body:has(#regForm) .card p b{font-weight:800}

/* the notice: paper, a 6px orange bar inside its left edge */
body:has(#regForm) .deadline{
  display:block;margin-bottom:0;padding:14px 16px 14px 24px;border:2px solid var(--rd-ink);border-radius:0;
  background:linear-gradient(var(--rd-orange),var(--rd-orange)) 0 0 / 8px 100% no-repeat var(--rd-paper);
  color:var(--rd-ink);font:600 16px/1.45 var(--rd-f-text);text-align:left;
}
body:has(#regForm) .deadline b{font-weight:800}

/* league "Key Dates": a ruled three-cell strip */
body:has(#divisionList) .how{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border:2px solid var(--rd-ink);background:var(--rd-field)}
body:has(#divisionList) .how .h{
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:start;
  padding:12px 14px;border:0;border-radius:0;background:none;
}
body:has(#divisionList) .how .h + .h{border-top:2px solid var(--rd-ink)}
body:has(#divisionList) .how .h .n{
  grid-row:1 / span 2;display:grid;place-items:center;width:30px;height:30px;padding-top:2px;
  background:var(--rd-orange);color:var(--rd-ink);font:400 19px/1 var(--rd-f-display);
}
body:has(#divisionList) .how .h .t{margin:0;padding-top:4px;color:var(--rd-ink);font:400 21px/1.05 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase}
body:has(#divisionList) .how .h .d{margin-top:4px;color:var(--rd-ink-2);font:500 13.5px/1.45 var(--rd-f-mono);letter-spacing:0;word-spacing:-.24em}
@media (min-width:640px){
  body:has(#divisionList) .how{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  body:has(#divisionList) .how .h{display:block;padding:14px}
  body:has(#divisionList) .how .h + .h{border-top:0;border-left:2px solid var(--rd-ink)}
  body:has(#divisionList) .how .h .t{margin-top:10px;padding-top:0}
}

/* camp "Camp Day": two ruled rows */
body:has(#regForm) .sesh{gap:0;border-top:2px solid var(--rd-ink)}
body:has(#regForm) .sesh-item{
  display:block;padding:11px 0 10px;border:0;border-bottom:1px solid var(--rd-rule-strong);border-radius:0;background:none;
}
body:has(#regForm) .sesh-item .grade{color:var(--rd-ink);font:400 23px/1.05 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase}
body:has(#regForm) .sesh-item .time{margin-top:4px;color:var(--rd-ink-2);font:500 14.5px/1.4 var(--rd-f-mono);letter-spacing:0;word-spacing:-.24em}

/* "What to bring": square chips on sunken paper */
body:has(#regForm) .bring{gap:8px}
body:has(#regForm) .bring span,
body:has(#regForm) .bring span:hover{
  padding:8px 12px 7px;background:var(--rd-paper-2);border:1px solid var(--rd-ink);border-radius:0;transform:none;
  color:var(--rd-ink);font:600 15.5px/1.3 var(--rd-f-text);transition:none;
}

/* the schedule table on /pp/, /film/, /happy-hoopers */
body:has(#regForm):has(.progress-rail) table{width:100%;border-collapse:collapse;color:var(--rd-ink);font:500 16px/1.4 var(--rd-f-text)}
body:has(#regForm):has(.progress-rail) th{
  padding:0 10px 9px 0;border-bottom:2px solid var(--rd-ink);color:var(--rd-ink-2);text-align:left;
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
body:has(#regForm):has(.progress-rail) td{padding:13px 10px 12px 0;border-bottom:1px solid var(--rd-rule);vertical-align:baseline}
body:has(#regForm):has(.progress-rail) tr:last-child td{border-bottom:0;padding-bottom:4px}
body:has(#regForm):has(.progress-rail) tbody tr:hover{background:none}
body:has(#regForm):has(.progress-rail) td.day{
  color:var(--rd-ink);white-space:nowrap;
  font:800 11.5px/1.3 var(--rd-f-text);font-stretch:118%;letter-spacing:.12em;text-transform:uppercase;
}
body:has(#regForm):has(.progress-rail) td b{color:var(--rd-ink);font:400 var(--rd-fs-400)/1.1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase}
body:has(#regForm):has(.progress-rail) :is(th,td):last-child{padding-right:0;text-align:right;white-space:nowrap}
body:has(#regForm):has(.progress-rail) td:last-child{font:500 15px/1.4 var(--rd-f-mono);letter-spacing:.02em}


/* =====================================================================
   4. THE TICKET — form.card#regForm
   ===================================================================== */
body:has(#regForm) #regForm{padding:0 var(--rd-tk) var(--rd-tk)}

/* header bar: league and camp pages carry their own (.form-head) */
body:has(#regForm) .form-head{
  display:grid;grid-template-columns:minmax(0,1fr);margin:0 calc(-1 * var(--rd-tk));
  background:var(--rd-ink);color:var(--rd-white);
}
body:has(#regForm) .form-title{padding:14px var(--rd-tk) 0;color:var(--rd-white);font:400 28px/1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase}
body:has(#regForm) .form-sub{margin:0;padding:6px var(--rd-tk) 13px;color:var(--rd-chalk);font:500 15px/1.4 var(--rd-f-text)}
@media (min-width:640px){
  body:has(#regForm) .form-head{grid-template-columns:auto minmax(0,1fr);align-items:center}
  body:has(#regForm) .form-title{padding:15px 0 11px var(--rd-tk)}
  body:has(#regForm) .form-sub{padding:13px var(--rd-tk) 11px 24px;text-align:right}
}
/* /pp/, /film/, /happy-hoopers have none: the bar is drawn, with the pages' own words */
body:has(#regForm):has(.progress-rail) #regForm::before{
  content:"Register";content:"Register" / "";
  display:flex;align-items:center;min-height:54px;margin:0 calc(-1 * var(--rd-tk));padding:3px var(--rd-tk) 0;
  background:var(--rd-ink);color:var(--rd-white);font:400 28px/1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase;
}
body:has(#regForm):has(.progress-rail) #regForm::after{
  content:"First come, first served";content:"First come, first served" / "";
  position:absolute;right:var(--rd-tk);top:0;display:flex;align-items:center;height:54px;color:var(--rd-orange);
  font:800 10.5px/1.3 var(--rd-f-text);font-stretch:108%;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
}
@media (min-width:640px){
  body:has(#regForm):has(.progress-rail) #regForm::after{font-size:11.5px;font-stretch:125%;letter-spacing:.16em}
}

/* progress: a paper rail with an ink rule under it, a square track, a solid orange fill */
body:has(#regForm) :is(.prog,.progress-rail){
  display:flex;align-items:center;gap:12px;background:var(--rd-paper);border:0;border-bottom:2px solid var(--rd-ink);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
body:has(#regForm) .prog{position:static;margin:0 calc(-1 * var(--rd-tk));padding:12px var(--rd-tk) 11px}
body:has(#regForm) .form-head .prog{grid-column:1 / -1;margin:0}
body:has(#divisionList) #regForm > .prog{position:sticky;top:0;z-index:var(--rd-z-sticky)}
body:has(#regForm) :is(.prog .plabel,.progress-rail .label){
  color:var(--rd-ink-2);white-space:nowrap;
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:118%;letter-spacing:.12em;text-transform:uppercase;
}
body:has(#regForm) :is(.prog-track,.progress-track){flex:1;height:8px;background:var(--rd-rule);border-radius:0;overflow:hidden}
body:has(#regForm) :is(.prog-fill,.progress-fill){height:100%;background:var(--rd-orange);border-radius:0;box-shadow:inset -2px 0 0 var(--rd-ink)}
body:has(#regForm) :is(.prog-pct,.progress-pct){min-width:40px;color:var(--rd-ink);text-align:right;font:700 14px/1 var(--rd-f-mono)}
/* the page-level rail on /pp/, /film/, /happy-hoopers: as wide as the floor, its parts on the 720px column */
body:has(#regForm):has(.progress-rail) .wrap > .progress-rail{
  position:sticky;top:0;z-index:var(--rd-z-sticky);width:auto;max-width:var(--rd-max);margin:0 auto;
  padding:12px max(var(--rd-gut),calc((min(100%,var(--rd-max)) - 720px) / 2)) 11px;
}

/* step headers: an orange square, the title in Anton, a rule to the edge */
body:has(#regForm) .substep,
body:has(#regForm) #regForm h2{
  display:flex;align-items:center;gap:12px;margin:26px 0 12px;color:var(--rd-ink);
  font:400 var(--rd-fs-500)/1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase;
}
body:has(#regForm) .substep::after,
body:has(#regForm) #regForm h2::after{content:"";flex:1;min-width:12px;height:2px;background:var(--rd-rule)}
body:has(#regForm) .step{
  flex:none;display:grid;place-items:center;width:34px;height:34px;margin:0;padding-top:2px;
  background:var(--rd-orange);color:var(--rd-ink);border-radius:0;font:400 20px/1 var(--rd-f-display);letter-spacing:0;
}
body:has(#regForm) #regForm > h2:first-of-type{margin-top:22px}

/* selectable rows: a ruled roster. Checked = a black row, white text, the ring filled orange */
body:has(#regForm) .division-list{gap:0;margin:0;border:2px solid var(--rd-ink);background:var(--rd-field)}
body:has(#regForm) .drow + .drow{border-top:1px solid var(--rd-rule-strong)}
body:has(#regForm) .drow label{
  display:flex;align-items:center;gap:14px;min-height:60px;margin:0;padding:10px 14px 9px;
  background:transparent;color:var(--rd-ink);border:0;border-radius:0;box-shadow:none;transform:none;cursor:pointer;
  transition:background-color var(--rd-t-hover),color var(--rd-t-hover);
}
body:has(#regForm) .drow .g{color:inherit;font:400 21px/1.05 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase}
body:has(#regForm) .drow .t{margin-top:4px;color:var(--rd-ink-2);font:500 13.5px/1.4 var(--rd-f-mono);letter-spacing:0;word-spacing:-.24em}
@media (max-width:479.98px){
  body:has(#regForm) .drow label{gap:10px;padding-inline:12px}
  body:has(#regForm) .drow .t{font-size:12.5px;word-spacing:-.3em}
}
body:has(#regForm) .drow .pick{
  flex:none;width:22px;height:22px;border:2px solid var(--rd-field-border);border-radius:var(--rd-r-round);background:var(--rd-field);transition:none;
}
body:has(#regForm) .drow .pick::after{display:none}
@media (hover:hover){
  body:has(#regForm) .drow input:not(:disabled):not(:checked) + label:hover{background:var(--rd-paper-2);transform:none}
  body:has(#regForm) .drow input:not(:disabled):not(:checked) + label:hover .pick{border-color:var(--rd-ink)}
}
body:has(#regForm) .drow input:checked + label{background:var(--rd-ink);color:var(--rd-white);border:0;box-shadow:none;transform:none}
body:has(#regForm) .drow input:checked + label .t{color:var(--rd-chalk)}
body:has(#regForm) .drow input:checked + label .pick{
  border-color:var(--rd-orange);
  background:var(--rd-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3l2.4 2.3 4.8-5' fill='none' stroke='%230E0E10' stroke-width='2'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
body:has(#regForm) .drow input:disabled + label{opacity:1;filter:none;background:var(--rd-hatch);color:var(--rd-hatch-ink);cursor:not-allowed}
body:has(#regForm) .drow input:disabled + label .t{color:var(--rd-hatch-ink)}
body:has(#regForm) .drow input:disabled + label .pick{visibility:hidden}
body:has(#regForm) .drow input:focus-visible + label{outline:3px solid var(--rd-ring);outline-offset:-3px;box-shadow:none}
body:has(#regForm) .drow input:checked:focus-visible + label{outline-color:var(--rd-orange)}
/* registration type: the two options side by side from 640px */
@media (min-width:640px){
  body:has(#regForm) #regTypeList:has(> .drow:nth-child(2):last-child){display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  body:has(#regForm) #regTypeList:has(> .drow:nth-child(2):last-child) .drow + .drow{border-top:0;border-left:2px solid var(--rd-ink)}
  body:has(#regForm) #regTypeList:has(> .drow:nth-child(2):last-child) .drow label{height:100%;min-height:84px;align-items:flex-start;padding:13px 14px 12px}
  body:has(#regForm) #regTypeList:has(> .drow:nth-child(2):last-child) .drow .g{font-size:25px}
}

/* league.js's waitlist row */
body:has(#regForm) #nightWait .hint{
  border:2px dashed var(--rd-ink) !important;border-radius:0 !important;background:var(--rd-paper-2);
  color:var(--rd-ink);font-size:15.5px;
}
body:has(#regForm) #nightWait .btn{
  display:inline-flex;width:auto;min-height:44px;margin-top:8px;background:var(--rd-ink);color:var(--rd-white);
}
body:has(#regForm) #nightWait .btn:hover{background:var(--rd-orange);color:var(--rd-ink)}

/* camp session cards, two up (one to a row on the narrowest phones, where "12:00–2:00 PM" would touch the edge) */
body:has(#regForm) .session-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
@media (max-width:359.98px){
  body:has(#regForm) .session-cards{grid-template-columns:minmax(0,1fr)}
  body:has(#regForm) .scard label{min-height:88px;padding-top:14px}
}
body:has(#regForm) .scard label{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-height:104px;margin:0;
  padding:34px 12px 11px;background:var(--rd-field);color:var(--rd-ink);border:2px solid var(--rd-field-border);border-radius:0;
  box-shadow:none;transform:none;text-align:left;cursor:pointer;
  transition:background-color var(--rd-t-hover),border-color var(--rd-t-hover),color var(--rd-t-hover);
}
body:has(#regForm) .scard label::after{
  content:"";position:absolute;right:11px;top:11px;width:18px;height:18px;box-sizing:border-box;
  border:2px solid var(--rd-field-border);border-radius:var(--rd-r-round);background:var(--rd-field);
}
body:has(#regForm) .scard .g{display:block;color:inherit;font:400 clamp(27px,7.4vw,34px)/1 var(--rd-f-display);letter-spacing:.012em;text-transform:uppercase;white-space:nowrap}
body:has(#regForm) .scard .t{display:block;margin-top:6px;color:var(--rd-ink-2);font:500 clamp(13px,3.5vw,15px)/1.3 var(--rd-f-mono);letter-spacing:0;white-space:nowrap}
body:has(#regForm) .scard label:hover{border-color:var(--rd-ink);transform:none}
body:has(#regForm) .scard input:checked + label{background:var(--rd-ink);border-color:var(--rd-ink);color:var(--rd-white);box-shadow:none;transform:none}
body:has(#regForm) .scard input:checked + label .t{color:var(--rd-chalk)}
body:has(#regForm) .scard input:checked + label::after{
  border-color:var(--rd-orange);
  background:var(--rd-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3l2.4 2.3 4.8-5' fill='none' stroke='%230E0E10' stroke-width='2'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
body:has(#regForm) .scard input:focus-visible + label{outline:3px solid var(--rd-ring);outline-offset:3px;box-shadow:none}

/* "Your session / Your division" — a notice; the pages' own display rule must not undo [hidden] */
body:has(#regForm) :is(.session-info,.division-info){
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;margin:12px 0 0;animation:none;
  color:var(--rd-ink);font:600 16px/1.45 var(--rd-f-text);
}
body:has(#regForm) :is(.session-info,.division-info) b{color:var(--rd-ink);font-weight:800}
body:has(#regForm) :is(.session-info,.division-info)[hidden]{display:none}

/* a filled-in required field: the pages' own green check stays, on white, in the system's green */
body:has(#regForm) #regForm :is(input:not([type="checkbox"]):not([type="radio"]),select):required:valid{
  border-color:var(--rd-ok-line);background-color:var(--rd-field);
}
body:has(#regForm) #regForm :is(input:not([type="checkbox"]):not([type="radio"]),select):required:valid:focus{border-color:var(--rd-ink)}

/* option pills (gender), two up */
body:has(#regForm) .pill-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
body:has(#regForm) .pill{min-width:0}
body:has(#regForm) .pill label{
  display:flex;align-items:center;justify-content:center;min-height:var(--rd-tap);margin:0;padding:8px 12px;
  background:var(--rd-field);color:var(--rd-ink);border:2px solid var(--rd-field-border);border-radius:0;box-shadow:none;transform:none;
  font:800 16px/1.2 var(--rd-f-text);letter-spacing:0;text-transform:none;cursor:pointer;
  transition:background-color var(--rd-t-hover),border-color var(--rd-t-hover),color var(--rd-t-hover);
}
body:has(#regForm) .pill label:hover{border-color:var(--rd-ink)}
body:has(#regForm) .pill input:checked + label{background:var(--rd-ink);border-color:var(--rd-ink);color:var(--rd-white);box-shadow:none;transform:none}
body:has(#regForm) .pill input:focus-visible + label{outline:3px solid var(--rd-ring);outline-offset:3px;box-shadow:none}

/* the waiver row: 16px text, a 22px box, the link in ink with an orange underline */
body:has(#regForm) #regForm > label[style]{
  display:block !important;position:relative;min-height:44px;margin-top:20px;padding:10px 0 10px 36px;color:var(--rd-ink);
  font-size:16px !important;line-height:1.45;letter-spacing:0;text-transform:none;cursor:pointer;
}
body:has(#regForm) #regForm > label[style] input[type="checkbox"]{
  position:absolute;left:0;top:10px;width:22px !important;height:22px;margin:0 !important;
}
body:has(#regForm) .waiver-link{
  max-width:calc(100% - 24px);color:var(--rd-ink);font-weight:800;text-align:left;
  text-decoration:underline;text-decoration-color:var(--rd-orange);text-decoration-thickness:2px;text-underline-offset:3px;
}
/* the link sits inside a sentence: its tap area is made 44px tall without moving a line */
body:has(#regForm) .waiver-link{position:relative}
body:has(#regForm) .waiver-link::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
body:has(#regForm) .waiver-link:hover{color:var(--rd-ink);text-decoration-thickness:4px}
body:has(#regForm) .waiver-link:focus-visible{outline:3px solid var(--rd-ring);outline-offset:2px;border-radius:0}

/* the add-on box: dashed ink; ticked = solid ink on sunken paper */
body:has(#regForm) .addon{margin-top:0;padding:13px 14px;border:2px dashed var(--rd-ink);border-radius:0;background:transparent;transition:none}
body:has(#regForm) #regForm > .addon:not(.substep + .addon,h2 + .addon){margin-top:20px}
body:has(#regForm) .addon.on{border-style:solid;border-color:var(--rd-ink);background:var(--rd-paper-2)}
body:has(#regForm) .addon .toggle{
  display:flex;align-items:center;gap:12px;min-height:44px;margin:0;color:var(--rd-ink);
  font:600 16px/1.35 var(--rd-f-text);letter-spacing:0;text-transform:none;cursor:pointer;
}
body:has(#regForm) .addon .toggle input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--rd-ink)}
body:has(#regForm) .addon .toggle b{font-weight:800}
body:has(#regForm) .addon .toggle .txt small{margin-top:2px;color:var(--rd-ink-2);font:500 14.5px/1.4 var(--rd-f-text)}
body:has(#regForm) .addon .tag{
  flex:none;padding:5px 8px 3px;border-radius:0;background:var(--rd-orange);color:var(--rd-ink);
  font:400 17px/1 var(--rd-f-display);letter-spacing:.02em;
}
body:has(#regForm) .addon :is(.shirt-opts,.jersey-opts){margin-top:8px}

/* the member box the scripts add (inline dashed orange) and family.js's note */
body:has(#regForm) #regForm > div[style*="dashed"]{
  border:2px dashed var(--rd-ink) !important;border-radius:0 !important;background:var(--rd-paper-2) !important;
  margin:20px 0 0 !important;font-size:16px !important;
}
body:has(#regForm) #regForm > div[style*="dashed"] b{font-weight:800}
body:has(#regForm) #regForm > div[style*="dashed"] label{min-height:44px;margin-top:0 !important;font-size:16px;letter-spacing:0;text-transform:none;cursor:pointer}
body:has(#regForm) #regForm > div[style*="dashed"] input[type="radio"]{flex:none;width:22px !important;height:22px;accent-color:var(--rd-ink)}
body:has(#regForm) #regForm > div[style*="dashed"] > div{font-size:14px !important;color:var(--rd-ink-2) !important;line-height:1.45}
body:has(#regForm) .ign-member-note{border-radius:0 !important}

/* the stub: a perforation with a notch punched at each edge, then the receipt — paper, never black */
body:has(#regForm) .card .paybox{
  position:relative;overflow:visible;margin:24px 0 0;padding:18px 0 0;background:transparent;color:var(--rd-ink);
  border-radius:0;border-top:2px dashed var(--rd-rule-strong);text-align:left;
}
body:has(#regForm) .card .paybox::before,
body:has(#regForm) .card .paybox::after{
  content:"";display:block;position:absolute;inset:auto;top:-12px;bottom:auto;width:22px;height:22px;box-sizing:border-box;
  background:var(--rd-maple);border:2px solid var(--rd-ink);border-radius:var(--rd-r-round);
  font-size:0;opacity:1;transform:none;pointer-events:none;
}
body:has(#regForm) .card .paybox::before{left:calc(-1 * var(--rd-tk) - 13px);clip-path:inset(0 0 0 50%)}
body:has(#regForm) .card .paybox::after{right:calc(-1 * var(--rd-tk) - 13px);clip-path:inset(0 50% 0 0)}
body:has(#regForm) .card .paybox .lineitems{margin:0 0 12px;padding:0 0 10px;border-bottom:2px dashed var(--rd-rule-strong)}
body:has(#regForm) .card .paybox .li{
  display:flex;align-items:baseline;gap:10px;padding:5px 0;color:var(--rd-ink-2);
  font:500 15px/1.4 var(--rd-f-mono);letter-spacing:0;word-spacing:-.24em;
}
body:has(#regForm) .card .paybox .li[hidden]{display:none}
body:has(#regForm) .card .paybox .li::after{content:"";order:1;flex:1 1 16px;min-width:16px;border-bottom:2px dotted var(--rd-rule-strong);transform:translateY(-3px)}
body:has(#regForm) .card .paybox .li span:first-child{flex:0 1 auto;min-width:0}
body:has(#regForm) .card .paybox .li span:last-child{order:2;flex:none;color:var(--rd-ink);font-weight:700}
body:has(#regForm) .card .paybox .price{
  display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:baseline;gap:12px;
  color:var(--rd-ink);font:400 clamp(46px,7vw,56px)/.9 var(--rd-f-display);letter-spacing:.01em;font-variant-numeric:tabular-nums;white-space:nowrap;
}
body:has(#regForm) .card .paybox .price small{
  color:var(--rd-ink-2);white-space:normal;
  font:800 11.5px/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
body:has(#regForm) .card .paybox :is(.paynote,.paynote-solid){margin:12px 0 0;color:var(--rd-ink);font:500 15px/1.5 var(--rd-f-text)}
body:has(#regForm) .card .paybox :is(.paynote,.paynote-solid) b{color:var(--rd-ink);font-weight:800}

/* the button that takes money */
body:has(#regForm) #payBtn{width:100%;min-height:64px;margin-top:18px;font-size:16px;letter-spacing:.07em}
body:has(#regForm) #payBtn + .hint{margin-top:12px}

/* the waiver pop-up: a paper dialog, docked to the bottom edge on phones */
body:has(#regForm) .waiver-overlay{
  padding:16px;align-items:flex-end;background:rgba(14,14,16,.78);
  -webkit-backdrop-filter:none;backdrop-filter:none;animation:none;--rd-ring:var(--rd-ink);
}
body:has(#regForm) .waiver-dialog{
  max-width:640px;max-height:min(88vh,100%);border:2px solid var(--rd-ink);border-radius:0;box-shadow:none;animation:none;
  background:linear-gradient(var(--rd-orange),var(--rd-orange)) 0 0 / 100% 6px no-repeat var(--rd-paper);color:var(--rd-ink);
}
body:has(#regForm) .waiver-top{padding:18px 12px 12px 20px;border-bottom:2px solid var(--rd-ink)}
body:has(#regForm) .waiver-top h3{color:var(--rd-ink);font:400 var(--rd-fs-500)/1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase}
body:has(#regForm) .waiver-x{
  width:44px;height:44px;border:2px solid var(--rd-ink);border-radius:0;background:transparent;color:var(--rd-ink);
  font:700 22px/1 var(--rd-f-text);transition:background-color var(--rd-t-hover),color var(--rd-t-hover);
}
body:has(#regForm) .waiver-x:hover{background:var(--rd-ink);color:var(--rd-white)}
body:has(#regForm) .waiver-body{padding:18px 20px 22px}
body:has(#regForm) .waiver-body .waiver-lede{margin:0 0 14px;color:var(--rd-ink-2);font:600 15.5px/1.5 var(--rd-f-text)}
body:has(#regForm) .waiver-body h4{margin:18px 0 4px;color:var(--rd-ink);font:800 17px/1.3 var(--rd-f-text)}
body:has(#regForm) .waiver-body p{color:var(--rd-ink);font:500 16px/1.6 var(--rd-f-text)}
body:has(#regForm) .waiver-body .waiver-ack{
  margin-top:20px;padding:14px 16px;border:0;border-left:6px solid var(--rd-warn-line);border-radius:0;
  background:var(--rd-warn-bg);color:var(--rd-ink);
}
body:has(#regForm) .waiver-foot{padding:14px 20px;border-top:2px solid var(--rd-ink);background:var(--rd-paper)}
body:has(#regForm) .waiver-foot .btn{width:100%;margin:0}
@media (min-width:640px){
  body:has(#regForm) .waiver-overlay{align-items:center}
}


/* =====================================================================
   5. SUCCESS PAGES  (DONE)
   ===================================================================== */
body:has(.bigcheck):not(#rd) .confetti{display:none}

/* hero: the check is an orange square as tall as the headline's caps, standing beside it */
body:has(.bigcheck):not(#rd) .hero{
  --rd-h1:clamp(50px,13.2vw,104px);
  grid-template-columns:auto minmax(0,1fr);column-gap:clamp(12px,1.6vw,22px);
}
body:has(.bigcheck):not(#rd) .hero .badge{grid-column:1 / -1}
body:has(.bigcheck):not(#rd) .hero .bigcheck{
  grid-column:1;width:calc(var(--rd-h1) * .86);height:calc(var(--rd-h1) * .86);
  margin:calc(clamp(12px,1.6vw,18px) + var(--rd-h1) * .02) 0 0;
  border-radius:0;box-shadow:none;animation:none;font-size:0;color:transparent;
  background:var(--rd-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 12.6l5 4.8 9.8-10.6' fill='none' stroke='%230E0E10' stroke-width='3.4'/%3E%3C/svg%3E") center / 72% 72% no-repeat;
}
/* not paid yet ("Almost there", flagged by js/60-work-b.js): the same orange square, outlined and filled only
   to half way, like a tank that is half full: on its way, not done. No tick, no bar (a bar read as "minimise"). */
body:has(.bigcheck):not(#rd) .hero .bigcheck[data-rd-open]{
  position:relative;box-shadow:inset 0 0 0 4px var(--rd-orange);
  background:linear-gradient(to top,var(--rd-orange) 50%,transparent 50%);
}
body:has(.bigcheck):not(#rd) .hero .bigcheck[data-rd-open]::before{content:none;display:none}
body:has(.bigcheck):not(#rd) .hero h1{grid-column:2;margin:clamp(12px,1.6vw,18px) 0 0;font-size:var(--rd-h1);line-height:.9;text-wrap:balance}
body:has(.bigcheck):not(#rd) .hero .sub{grid-column:1 / -1;margin:16px 0 0}
@media (min-width:960px){
  body:has(.bigcheck):not(#rd) .hero{grid-template-columns:auto minmax(0,7fr) minmax(0,5fr);align-items:end}
  body:has(.bigcheck):not(#rd) .hero .bigcheck{align-self:start}
  body:has(.bigcheck):not(#rd) .hero .sub{grid-column:3;grid-row:2;align-self:end;margin:0 0 .2em clamp(12px,2vw,32px)}
}

/* column: 30-components.css opens .wrap and centres its children on 720px */
body:has(.bigcheck):not(#rd) .wrap > .card{
  position:relative;overflow:visible;margin-top:-2px;padding:clamp(18px,3vw,24px) var(--rd-tk) clamp(18px,3vw,26px);
  background:var(--rd-paper);color:var(--rd-ink);border:2px solid var(--rd-ink);border-radius:0;box-shadow:none;animation:none;
}
body:has(.bigcheck):not(#rd) .wrap > .hero + .card{margin-top:clamp(22px,3.4vw,40px);padding-top:0}
body:has(.bigcheck):not(#rd) .wrap > .hero + .card + .card{margin-top:clamp(18px,2.6vw,28px)}
body:has(.bigcheck):not(#rd) .card h2{
  margin:0 0 14px;color:var(--rd-ink);font:400 var(--rd-fs-500)/1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase;
}
/* the ticket: black header bar, key/value rows with dotted leaders, the receipt note as the stub */
body:has(.bigcheck):not(#rd) .hero + .card h2{
  margin:0 calc(-1 * var(--rd-tk)) 10px;padding:16px var(--rd-tk) 12px;background:var(--rd-ink);color:var(--rd-white);
}
body:has(.bigcheck):not(#rd) .detail{
  display:flex;align-items:baseline;gap:10px;padding:9px 0;border:0;font:500 15px/1.4 var(--rd-f-mono);
}
body:has(.bigcheck):not(#rd) .detail[hidden]{display:none}
body:has(.bigcheck):not(#rd) .detail .k{
  flex:none;max-width:48%;color:var(--rd-ink-2);
  font:800 10.5px/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;
}
body:has(.bigcheck):not(#rd) .detail::before{content:"";order:1;flex:1 1 16px;min-width:16px;border-bottom:2px dotted var(--rd-rule-strong);transform:translateY(-3px)}
body:has(.bigcheck):not(#rd) .detail .v{
  order:2;flex:0 1 auto;min-width:0;color:var(--rd-ink);text-align:right;overflow-wrap:anywhere;
  font:700 15px/1.4 var(--rd-f-mono);letter-spacing:0;word-spacing:-.24em;
}
@media (max-width:479.98px){ body:has(.bigcheck):not(#rd) .detail .v{font-size:14px} }
body:has(.bigcheck):not(#rd) .detail .v.orange{padding:1px 7px;background:var(--rd-orange);color:var(--rd-ink)}
body:has(.bigcheck):not(#rd) :is(.session-hi,.division-hi){
  margin:16px 0 8px;padding:14px 16px;border:0;border-left:6px solid var(--rd-ok-line);border-radius:0;
  background:var(--rd-ok-bg);color:var(--rd-ink);font:700 16px/1.45 var(--rd-f-text);text-align:left;
}
body:has(.bigcheck):not(#rd) :is(.session-hi,.division-hi)[hidden]{display:none}
body:has(.bigcheck):not(#rd) .card .hint{margin-top:12px;color:var(--rd-ink-2);font:500 15px/1.5 var(--rd-f-text)}
body:has(.bigcheck):not(#rd) .hero + .card > .hint:last-child{
  position:relative;margin-top:14px;padding-top:16px;border-top:2px dashed var(--rd-rule-strong);color:var(--rd-ink);
}
body:has(.bigcheck):not(#rd) .hero + .card > .hint:last-child::before,
body:has(.bigcheck):not(#rd) .hero + .card > .hint:last-child::after{
  content:"";position:absolute;top:-12px;width:22px;height:22px;box-sizing:border-box;
  background:var(--rd-maple);border:2px solid var(--rd-ink);border-radius:var(--rd-r-round);pointer-events:none;
}
body:has(.bigcheck):not(#rd) .hero + .card > .hint:last-child::before{left:calc(-1 * var(--rd-tk) - 13px);clip-path:inset(0 0 0 50%)}
body:has(.bigcheck):not(#rd) .hero + .card > .hint:last-child::after{right:calc(-1 * var(--rd-tk) - 13px);clip-path:inset(0 50% 0 0)}

/* chips */
body:has(.bigcheck):not(#rd) :is(.bring,.chips){display:flex;flex-wrap:wrap;gap:8px}
body:has(.bigcheck):not(#rd) :is(.bring,.chips) span{
  padding:8px 12px 7px;background:var(--rd-paper-2);border:1px solid var(--rd-ink);border-radius:0;
  color:var(--rd-ink);font:600 15.5px/1.3 var(--rd-f-text);
}
/* buttons: the page's own classes … */
body:has(.bigcheck):not(#rd) .card :is(.sched-btn,.btn){
  display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:54px;margin:18px 0 0;padding:6px 18px;
  background:var(--rd-orange);color:var(--rd-ink);border:2px solid transparent;border-radius:0;box-shadow:none;transform:none;
  font:800 var(--rd-fs-btn)/1.15 var(--rd-f-text);font-stretch:116%;letter-spacing:.09em;text-transform:uppercase;text-align:center;text-decoration:none;
  transition:background-color var(--rd-t-hover),color var(--rd-t-hover);
}
body:has(.bigcheck):not(#rd) .card :is(.sched-btn,.btn):hover{background:var(--rd-ink);color:var(--rd-white);transform:none;box-shadow:none}
body:has(.bigcheck):not(#rd) .card :is(.sched-btn,.btn):active{background:var(--rd-orange-press);color:var(--rd-ink)}
/* … and the inline-styled "What's Next?" pills */
body:has(.bigcheck):not(#rd) .card a[style]{
  display:flex !important;align-items:center;justify-content:center;min-height:54px;
  padding:6px 12px !important;border-radius:0 !important;
  font:800 var(--rd-fs-btn)/1.15 var(--rd-f-text) !important;font-stretch:116%;letter-spacing:.09em;text-transform:uppercase;
  transition:background-color var(--rd-t-hover),color var(--rd-t-hover),border-color var(--rd-t-hover);
}
body:has(.bigcheck):not(#rd) .card a[style*="#FF6B2C"]{background:var(--rd-orange) !important;color:var(--rd-ink) !important}
body:has(.bigcheck):not(#rd) .card a[style*="#FF6B2C"]:hover{background:var(--rd-ink) !important;color:var(--rd-white) !important}
body:has(.bigcheck):not(#rd) .card a[style*="background:#0E0E10"]:hover{background:var(--rd-orange) !important;color:var(--rd-ink) !important}
body:has(.bigcheck):not(#rd) .card a[style*="background:#fff"]{background:transparent !important;min-height:48px;font-size:12.5px !important}
body:has(.bigcheck):not(#rd) .card a[style*="background:#fff"]:hover{background:var(--rd-ink) !important;color:var(--rd-white) !important}
@media (max-width:420px){
  body:has(.bigcheck):not(#rd) .card a[style]{font-stretch:104%;letter-spacing:.05em}
}

/* =====================================================================
   6. Decorative emoji the pages print in their HTML — js/60-work-b.js wraps them, this hides them
   ===================================================================== */
.rd-emo{display:none}


/* =====================================================================
   7. Confirmation pages: the closing "What's Next?" sheet (#nextCard)
   It is a separate sheet, not a third page of the ticket: it stands apart with the same gap as the
   second sheet, and its heading is a paint kicker (orange square, small caps) so it never reads as the
   ticket's title printed twice. On the league page, where the sheet above is already headed
   "What's Next", the kicker reads "Keep going" (the h2 keeps its own words for screen readers).
   ===================================================================== */
body:has(.bigcheck):not(#rd) .wrap > #nextCard{margin-top:clamp(18px,2.6vw,28px)}
body:has(.bigcheck):not(#rd) #nextCard h2{
  display:flex;align-items:center;gap:0;margin:0 0 12px;color:var(--rd-ink-2);
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
body:has(.bigcheck):not(#rd) #nextCard h2::before{content:"";flex:none;width:8px;height:8px;margin:0 10px 1px 0;background:var(--rd-orange)}
body:has(.bigcheck):not(#rd):has(#schedBtn) #nextCard h2{font-size:0;letter-spacing:0}
body:has(.bigcheck):not(#rd):has(#schedBtn) #nextCard h2::after{
  content:"Keep going";content:"Keep going" / "";font-size:var(--rd-fs-label);letter-spacing:.16em;
}
body:has(.bigcheck):not(#rd) #nextCard > p.hint:first-of-type{color:var(--rd-ink);font:600 17px/1.45 var(--rd-f-text)}

/* the long league button stays on one line on a phone (the others already do) */
@media (max-width:479.98px){
  body:has(.bigcheck):not(#rd) .card .sched-btn{padding-inline:8px;font-size:13px;font-stretch:90%;letter-spacing:.03em;text-wrap:balance}
}

/* ---- 70-marketing.css ---- */
/* =====================================================================
   70-marketing.css — shared layout classes for the replaced marketing
   pages (pages/*.html, <body class="rd-mkt rd-p-…">). DESIGN.md 5.5–5.8,
   5.13 and section 7. Everything here is new markup (rd-*), so nothing
   needs a page scope. Page-specific layout goes in 80-p-<name>.css.

   QUICK REFERENCE (markup → component)

   Containers
     .rd-wrap                  floor container (1360 max + gutters)            [00-tokens]
     .rd-sec                   floor section: vertical padding only            [30]
     .rd-band                  black out-of-bounds block with painted lines    [10]
       .rd-band--notop / --nobottom   drop a line where black touches black
     .rd-dark                  any other black block you build yourself (children adapt)
     .rd-split                 2 columns from 960px: 7fr | 5fr, bottoms aligned
       .rd-split--even  1fr | 1fr     .rd-split--rev  5fr | 7fr     .rd-split--top  tops aligned
     .rd-halves                2 equal columns from 960px divided by a white half-court line

   The floor  [10-floor.css + js/20-court.js]
     .rd-floor                 an open-floor zone (court markings + the play). No copy inside it, ever.
        data-rd-floor="near|far|mid|plan"   data-rd-play="cycle|give-go|pick-roll|backdoor|drive-kick|none"
        data-rd-feet="50" (court feet across the zone, from 960px) or "fit" (the whole key fitted to the zone's height)
        data-rd-x="0"   data-rd-fade="auto|none|top|bottom|both"   data-rd-solid (opaque: lays its own boards)
        Size it with --rd-ft (px per court foot, written by the engine): min-height:calc(var(--rd-ft,10.5) * 28px)
        + .rd-playcard inside it = the caption rail (add "+ var(--rd-cap-h)" to the zone's height)
     .rd-floor--close          the closing zone every page ends on, straight before <footer>:
        <div class="rd-floor rd-floor--close" data-rd-floor="far" data-rd-feet="fit" data-rd-play="cycle" aria-hidden="true"></div>
     A black block you build yourself that runs the full width of the screen and stands on a painted line:
        border-bottom:var(--rd-lw) solid var(--rd-line); border-image:var(--rd-baseline);
        (from 1400px the line then stops at the sidelines — a painted corner instead of a T through the apron)
     Anything you fix or dock to the bottom edge adds var(--rd-strip-h) (the rehearsal strip's height; 0 on the real site).

   Type
     .rd-mega .rd-h1 .rd-h2 .rd-h3 .rd-h4 .rd-h5      Anton at --rd-fs-900 … --rd-fs-400
     (an <h2> without a class inside .rd-band / .rd-dark defaults to .rd-h2; any class or page rule overrides it)
     .rd-kicker  .rd-paint  .rd-fact  .rd-lede  .rd-mono  .rd-hl (highlight slab / orange on black)
     .rd-head                  numbered section header on the floor            [30]

   Buttons / chips / fields     [30 and 40]   .rd-btn(--secondary|--ghost|--ghost-dark|--dash|--pay|--sm|--block)
                                .rd-link  .rd-btns  .rd-chips  .rd-chip  .rd-label  .rd-input  .rd-fields  .rd-step

   Blocks in this file
     .rd-folio                 [20] strip under the nav
     .rd-hero                  interior page hero: black text block + a court zone
     .rd-lanes / .rd-lane      the offering list (three tiers)
     .rd-board                 the "Up next" scoreboard
     .rd-stats / .rd-stat      numbers: strip or ledger            .rd-courts  the three-courts glyph
     .rd-ticket                tear-off event ticket (date stub · body · price stub)
     .rd-rates / .rd-rate      paper rate board, one linked row per rate
     .rd-roster                No. / Name / Role table
     .rd-slip                  receipt with dotted leaders
     .rd-plans                 "Plans change?" A / B / C list
     .rd-rows                  ruled label/value rows (black apron column)
     .rd-logos / .rd-logo      ruled row of sponsor logos
     .rd-halftone              the one permitted dot fade, on the top edge of ONE band per page
   ===================================================================== */

/* children of a black block adapt (same switches as 30-components sets for .rd-band etc.) */
:is(.rd-dark,.rd-band,.rd-hero-text,.rd-board){
  --rd-stat-rule:var(--rd-on-dark-rule);--rd-stat-label:var(--rd-chalk);
}
.rd-dark{background-color:var(--rd-ink);color:var(--rd-white)}
:is(.rd-sheet,.rd-light){--rd-stat-rule:var(--rd-ink);--rd-stat-label:var(--rd-ink-2)}

/* ---------------------------------------------------------------------
   Display type
   --------------------------------------------------------------------- */
/* An <h2> with no class inside a black block gets the section-heading size as a DEFAULT only:
   :where() keeps it at the weight of one element, so any page rule (".rd-p-index .apron h2") wins. */
.rd-mega,.rd-h1,.rd-h2,.rd-h3,.rd-h4,.rd-h5,
:where(.rd-band,.rd-dark) h2:where(:not([class])){
  margin:0;font-family:var(--rd-f-display);font-weight:400;text-transform:uppercase;letter-spacing:.004em;line-height:.9;text-wrap:balance;
}
.rd-mega{font-size:var(--rd-fs-900);line-height:.88}
.rd-h1{font-size:var(--rd-fs-800)}
.rd-h2,:where(.rd-band,.rd-dark) h2:where(:not([class])){font-size:var(--rd-fs-700)}
.rd-h3{font-size:var(--rd-fs-600);line-height:.94}
.rd-h4{font-size:var(--rd-fs-500);line-height:1;letter-spacing:.02em}
.rd-h5{font-size:var(--rd-fs-400);line-height:1.1;letter-spacing:.02em}

/* ---------------------------------------------------------------------
   Layout helpers
   --------------------------------------------------------------------- */
.rd-split{display:grid;grid-template-columns:minmax(0,1fr);gap:20px clamp(24px,4vw,64px)}
.rd-halves{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--rd-sec-y) 0}
@media (min-width:960px){
  .rd-split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}
  .rd-split--even{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rd-split--rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .rd-split--top{align-items:start}
  .rd-halves{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rd-halves > :first-child{padding-right:clamp(24px,3vw,44px)}
  .rd-halves > :last-child{padding-left:clamp(24px,3vw,44px);border-left:var(--rd-lw) solid var(--rd-line)}
}
.rd-band p:not([class]){max-width:34em;margin:14px 0 0}
.rd-band p.rd-kicker,.rd-band p.rd-paint,.rd-band p.rd-board-label{font-size:var(--rd-fs-label)}
.rd-band p.rd-fact{font-size:13px}
.rd-band p.rd-kicker + :is(h1,h2,h3){margin-top:12px}

/* ---------------------------------------------------------------------
   5.5  .rd-hero — interior page hero: the band plus a zone
     <header class="rd-hero">
       <div class="rd-hero-text">
         <p class="rd-kicker">Level up</p>
         <h1>IGN <span class="o">Training</span></h1>
         <p>One or two sentences.</p>
         <div class="rd-btns">…</div>                      (optional)
       </div>
       <div class="rd-floor" data-rd-floor="near" data-rd-play="drive-kick" data-rd-feet="30" aria-hidden="true">
         <div class="rd-playcard" data-rd-keepout>…</div>
       </div>
     </header>
     .rd-hero--plain   no zone (404)
   --------------------------------------------------------------------- */
.rd-hero{
  position:relative;max-width:var(--rd-max);margin-inline:auto;
  border-bottom:var(--rd-lw) solid var(--rd-line);--rd-ring:var(--rd-orange);
}
.rd-hero-text{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-width:0;
  padding:clamp(28px,4.4vw,52px) var(--rd-gut) clamp(28px,4vw,44px);
  background-color:var(--rd-ink);color:var(--rd-white);
}
/* a hero without a zone is a full-bleed band; its baseline stops at the sidelines like every other painted line */
.rd-hero--plain{max-width:none;border-image:var(--rd-baseline)}
.rd-hero--plain .rd-hero-text{padding-inline:max(var(--rd-gut),calc((100% - var(--rd-max)) / 2 + var(--rd-gut)))}
.rd-hero h1{
  margin:14px 0 0;color:var(--rd-white);
  font:400 var(--rd-fs-800)/.9 var(--rd-f-display);letter-spacing:.004em;text-transform:uppercase;text-wrap:balance;
}
.rd-hero-text > p:not(.rd-kicker){
  max-width:34em;margin:16px 0 0;color:var(--rd-chalk);font:500 clamp(17px,1.35vw,19px)/1.5 var(--rd-f-text);
}
.rd-hero-text > p:not(.rd-kicker) b{color:var(--rd-white);font-weight:700}
.rd-hero-text > .rd-btns{margin-top:22px}
.rd-hero > .rd-floor{max-width:none;margin:0;min-height:0;height:clamp(200px,58vw,260px)}
@media (min-width:640px){ .rd-hero > .rd-floor{height:clamp(280px,44vw,400px)} }
/* a zone without a caption rail still needs its painted line where it meets the black text block */
.rd-hero > .rd-floor:not(:has(> .rd-playcard)){border-top:var(--rd-lw) solid var(--rd-line)}
@media (min-width:960px){
  .rd-hero{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);min-height:clamp(340px,29vw,420px)}
  .rd-hero--plain{display:block;min-height:0}
  .rd-hero:not(.rd-hero--plain) .rd-hero-text{padding-right:clamp(24px,3vw,44px)}
  /* out of bounds runs on to the edge of the screen: the black text block covers the left sideline and apron,
     so the sideline starts at the hero's baseline (a painted corner) instead of running through black */
  .rd-hero-text::before{content:"";position:absolute;top:0;bottom:0;right:100%;width:50vw;background:var(--rd-ink);pointer-events:none}
  /* the headline stands on the bottom of the black block and the kicker stays with it: any height the zone adds
     beside a short hero goes above the kicker, never between the kicker and its headline */
  .rd-hero:not(.rd-hero--plain) .rd-hero-text > .rd-kicker:first-child{margin-bottom:0;padding-bottom:28px}
  .rd-hero > .rd-floor,
  .rd-hero > .rd-floor:not(:has(> .rd-playcard)){height:auto;border-top:0;border-left:var(--rd-lw) solid var(--rd-line)}
  /* /camps has the shortest hero copy (kicker, h1, one sentence): its black block is only as tall as that copy needs,
     so the court beside it sets no empty band of black above the kicker (scoped override of 80-p-camps.css) */
  body.rd-mkt.rd-p-camps .rd-hero{min-height:clamp(320px,24vw,350px)}
  /* beside a zone the h1 has 46% of the floor, so it steps down one size */
  .rd-hero:not(.rd-hero--plain) h1{font-size:clamp(54px,6.2vw,88px)}
}

/* ---------------------------------------------------------------------
   5.7  .rd-lanes — the offering list. Rows on the floor, three tiers.
     <div class="rd-lanes">
       <div class="rd-lanes-top">      two headliners, side by side from 960px
         <a class="rd-lane rd-lane--big" href="leagues.html">
           <span class="rd-lane-no">01</span>
           <span class="rd-lane-tag">Compete</span>                 (or class="rd-lane-tag is-open">Registration open)
           <span class="rd-lane-name">Leagues</span>
           <span class="rd-lane-desc">One sentence.</span>
           <span class="rd-lane-facts rd-fact"><span class="rd-fmt">5x5</span> Summer · Fall · Winter</span>
           <svg class="rd-lane-arrow" width="30" height="16" viewBox="0 0 30 16" aria-hidden="true"><path d="M0 8h27M21 2l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.4"/></svg>
         </a> …
       </div>
       <div class="rd-lanes-mid">   full-width rows:   <a class="rd-lane">…</a> … </div>
       <div class="rd-lanes-under"> 2 × 2 from 960px:  <a class="rd-lane rd-lane--sm">…</a> … </div>
     </div>
     Put it inside .rd-wrap: the hover fill runs out to the edge of the floor.
   --------------------------------------------------------------------- */
.rd-lanes{border-top:1px solid var(--rd-ink);border-bottom:3px solid var(--rd-ink)}   /* 1px + the first row's 2px = 3px */
.rd-lane{
  position:relative;isolation:isolate;display:grid;grid-template-columns:30px minmax(0,1fr) 28px;column-gap:10px;align-items:start;
  padding:20px 0 22px;border-top:2px solid var(--rd-ink);color:var(--rd-ink);text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.rd-lane::before{
  content:"";position:absolute;z-index:-1;inset:0 calc(var(--rd-gut) * -1);background:var(--rd-orange);
  transform:scaleX(0);transform-origin:left;transition:transform var(--rd-t-wipe) var(--rd-ease-out);
}
.rd-lane-no{grid-column:1;grid-row:1;padding-top:4px;color:var(--rd-ink-2);font:400 17px/1 var(--rd-f-display);letter-spacing:.02em}
.rd-lane-tag{
  grid-column:2;grid-row:1;justify-self:start;padding-top:5px;color:var(--rd-ink-2);
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
.rd-lane-tag.is-open{padding:4px 8px 3px;margin-top:1px;background:var(--rd-orange);color:var(--rd-ink);transition:background-color var(--rd-t-hover),color var(--rd-t-hover)}
.rd-lane-name{
  grid-column:2;grid-row:2;margin-top:8px;
  font:400 clamp(38px,11vw,42px)/.98 var(--rd-f-display);letter-spacing:.005em;text-transform:uppercase;
}
.rd-lane-desc{grid-column:2;grid-row:3;max-width:33em;margin-top:8px;color:var(--rd-ink);font:500 17px/1.45 var(--rd-f-text)}
.rd-lane-facts{grid-column:2;grid-row:4;margin-top:10px;color:var(--rd-ink)}
.rd-lane-facts .rd-fmt{margin-right:6px}
.rd-lane-facts:has(.rd-fmt){line-height:2.1}
.rd-lane-facts > span:not(.rd-fmt){display:inline-block;margin-right:16px;white-space:nowrap}
@media (max-width:359.98px){ .rd-lane-facts{font-size:12px;letter-spacing:0} }
/* a list of plain tags (no format chips): every tag is its own unbreakable item with the bullet marker of DESIGN 5.16
   (an 8px orange square, 2px ink outline: the same tag the /programs rows carry), so a line can wrap anywhere without
   leaving a separator hanging at its end. js/10-layer.js strips the old " ·" separators out of the text. */
body.rd-mkt .rd-lanes .rd-lane-facts:not(:has(.rd-fmt)){display:flex;flex-wrap:wrap;gap:6px 1.4em;line-height:1.5}
body.rd-mkt .rd-lanes .rd-lane-facts:not(:has(.rd-fmt)) > span{
  position:relative;display:block;margin:0;padding-left:20px;white-space:nowrap;
}
body.rd-mkt .rd-lanes .rd-lane-facts:not(:has(.rd-fmt)) > span::before{
  content:"";position:absolute;left:2px;top:.42em;width:8px;height:8px;background:var(--rd-orange);outline:2px solid var(--rd-ink);
}
.rd-lane-arrow{grid-column:3;grid-row:2;align-self:center;justify-self:end;margin-top:8px;transition:transform var(--rd-t-hover) var(--rd-ease-out)}
.rd-lane--big .rd-lane-name{font-size:clamp(60px,17.4vw,68px);line-height:.92}
.rd-lane--sm .rd-lane-name{font-size:34px}
@media (hover:hover){
  .rd-lane:hover::before{transform:scaleX(1)}
  .rd-lane:hover :is(.rd-lane-no,.rd-lane-tag){color:var(--rd-ink)}
  .rd-lane:hover .rd-lane-tag.is-open{background:var(--rd-ink);color:var(--rd-white)}
  .rd-lane:hover .rd-lane-arrow{transform:translateX(6px)}
}
.rd-lane:focus-visible{outline-offset:-3px}
.rd-lane:active::before{transform:scaleX(1);background:var(--rd-orange-press);transition-duration:var(--rd-t-press)}
@media (min-width:960px){
  .rd-lane{grid-template-columns:52px minmax(0,1fr) 34px;column-gap:20px}
  .rd-lane-no{font-size:20px;padding-top:2px}
  .rd-lane-arrow{grid-row:1 / span 4;margin:0}
  /* mid-card: name left, sentence and facts right */
  .rd-lanes-mid .rd-lane{grid-template-columns:52px minmax(0,5fr) minmax(0,6fr) 34px;align-items:end}
  .rd-lanes-mid .rd-lane-no{align-self:start}
  .rd-lanes-mid .rd-lane-tag{align-self:start}
  .rd-lanes-mid .rd-lane-name{grid-row:2 / span 2;font-size:var(--rd-fs-600);align-self:end}
  .rd-lanes-mid .rd-lane-desc{grid-column:3;grid-row:2;margin:0}
  .rd-lanes-mid .rd-lane-desc:last-of-type:not(:has(~ .rd-lane-facts)){grid-row:2 / span 2}
  .rd-lanes-mid .rd-lane-facts{grid-column:3;grid-row:3;margin:8px 0 3px}
  .rd-lanes-mid .rd-lane-arrow{grid-column:4;align-self:center}
  /* side-by-side tiers: a 2px ink rule between the two columns; the fill stops at it */
  .rd-lanes-top,.rd-lanes-under{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  :is(.rd-lanes-top,.rd-lanes-under) > .rd-lane:nth-child(odd){padding-right:clamp(16px,2.2vw,32px)}
  :is(.rd-lanes-top,.rd-lanes-under) > .rd-lane:nth-child(odd)::before{inset:0 0 0 calc(var(--rd-gut) * -1)}
  :is(.rd-lanes-top,.rd-lanes-under) > .rd-lane:nth-child(even){padding-left:clamp(16px,2.2vw,32px);border-left:2px solid var(--rd-ink)}
  :is(.rd-lanes-top,.rd-lanes-under) > .rd-lane:nth-child(even)::before{inset:0 calc(var(--rd-gut) * -1) 0 0}
  .rd-lane--big{padding:24px 0 28px}
  .rd-lane--big .rd-lane-name{margin-top:10px;font-size:clamp(88px,10.4vw,150px);line-height:.88}
  .rd-lane--big .rd-lane-desc{margin-top:12px;font-size:18px}
  .rd-lane--sm{padding:18px 0 20px}
  .rd-lane--sm .rd-lane-name{font-size:clamp(34px,3vw,42px)}
}

/* ---------------------------------------------------------------------
   5.6  .rd-board — the "Up next" scoreboard (a black band)
     <section class="rd-board">
       <div class="rd-wrap">
         <p class="rd-board-label"><i class="rd-led"></i><span>Up next</span><span>3x3 League</span></p>
         <div class="rd-board-main">
           <div class="rd-stub"><b>Nov 9</b><i>–</i><b>Dec 17</b><small>2026</small></div>
           <h2 class="rd-board-title"><span class="o">3x3</span> Fall League</h2>
           <dl class="rd-cells">
             <div class="rd-cell rd-cell--clock"><dt>Days to go</dt><dd>38</dd></div>
             <div class="rd-cell"><dt>Per player</dt><dd>$90</dd></div>
             <div class="rd-cell"><dt>Per team</dt><dd>$400</dd></div>
           </dl>
           <p class="rd-board-facts rd-fact">Dark Thanksgiving week</p>
           <a class="rd-btn rd-board-go" href="…">Sign Up <svg…/></a>
         </div>
         <div class="rd-board-controls"><button class="rd-board-arrow">‹</button><div class="rd-dots">…<button class="on"></button>…</div><button class="rd-board-arrow">›</button></div>
       </div>
     </section>
   --------------------------------------------------------------------- */
.rd-board{
  position:relative;background-color:var(--rd-ink);color:var(--rd-white);--rd-ring:var(--rd-orange);
  border-top:var(--rd-lw) solid var(--rd-line);border-bottom:var(--rd-lw) solid var(--rd-line);border-image:var(--rd-baseline);
  padding:clamp(24px,3.6vw,44px) 0 clamp(26px,3.8vw,48px);
}
.rd-board-label{
  display:flex;align-items:center;gap:10px;margin:0;color:var(--rd-white);
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
.rd-board-label > span + span{color:var(--rd-chalk)}
.rd-board-label > span + span::before{content:"· ";color:var(--rd-chalk-2)}
.rd-led{flex:none;width:9px;height:9px;background:var(--rd-orange)}
body.rd-mkt .rd-led{animation:rd-led 2.6s ease-in-out infinite}
@keyframes rd-led{0%,100%{opacity:1}50%{opacity:.55}}

.rd-board-main{display:grid;grid-template-columns:minmax(0,1fr);margin-top:14px}
/* tear-off date stub: orange slab, ink Anton, a perforation with a punched notch at each end */
.rd-stub{
  position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .28em;min-width:0;padding:10px 46px 7px 14px;
  color:var(--rd-ink);font:400 clamp(28px,8vw,36px)/1 var(--rd-f-display);letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;
  background:
    radial-gradient(circle at calc(100% - 25px) 0,var(--rd-notch,var(--rd-ink)) 9.5px,transparent 10px),
    radial-gradient(circle at calc(100% - 25px) 100%,var(--rd-notch,var(--rd-ink)) 9.5px,transparent 10px),
    var(--rd-orange);
}
.rd-stub::after{content:"";position:absolute;top:12px;bottom:12px;right:24px;border-left:2px dashed var(--rd-ink)}
.rd-stub b{font-weight:400}
.rd-stub i{font-style:normal}
.rd-stub small{margin-left:auto;align-self:center;font:800 10.5px/1 var(--rd-f-text);font-stretch:125%;letter-spacing:.14em}
.rd-board-title{
  margin:16px 0 0;color:var(--rd-white);
  font:400 clamp(60px,17.6vw,76px)/.88 var(--rd-f-display);letter-spacing:.004em;text-transform:uppercase;text-wrap:balance;
}
/* scoreboard cells: equal cells, 2px painted rules, shared borders */
.rd-cells{display:flex;flex-wrap:wrap;gap:2px;margin:20px 0 0;padding:2px;background:var(--rd-line)}
.rd-cell{flex:1 1 96px;min-width:0;padding:10px 12px 7px;background:var(--rd-ink);color:var(--rd-white)}
.rd-cell dt{color:var(--rd-chalk);font:800 11px/1.3 var(--rd-f-text);font-stretch:94%;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.rd-cell dd{
  margin:6px 0 0;font:400 clamp(40px,6vw,96px)/.9 var(--rd-f-display);letter-spacing:.01em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
@media (max-width:359.98px){ .rd-cell dt{font-stretch:84%;letter-spacing:.03em} }
.rd-cell--clock{background:var(--rd-orange);color:var(--rd-ink)}
.rd-cell--clock dt{color:var(--rd-ink)}
.rd-board-facts{margin:12px 0 0;color:var(--rd-chalk)}
.rd-board-go{width:100%;min-height:60px;margin-top:18px;font-size:16px}
.rd-board-controls{display:flex;align-items:center;gap:12px;margin-top:16px}
.rd-dots{display:flex;align-items:center;gap:0}
.rd-dots button{
  width:26px;height:44px;padding:17px 8px;border:0;border-radius:0;background:var(--rd-chalk-2) content-box;cursor:pointer;
  transition:background-color var(--rd-t-hover);
}
.rd-dots button:is(.on,[aria-current="true"]){width:26px;background-color:var(--rd-orange)}
.rd-board-arrow{
  display:grid;place-items:center;width:44px;height:44px;padding:0 0 2px;border:2px solid rgba(255,255,255,.42);border-radius:0;
  background:transparent;color:var(--rd-white);font:800 20px/1 var(--rd-f-text);cursor:pointer;
  transition:background-color var(--rd-t-hover),color var(--rd-t-hover),border-color var(--rd-t-hover);
}
.rd-board-arrow:hover{background:var(--rd-white);border-color:var(--rd-white);color:var(--rd-ink)}
@media (min-width:960px){
  .rd-board-main{grid-template-columns:auto minmax(0,1fr);column-gap:clamp(24px,3vw,44px);margin-top:18px}
  /* the stub stands beside the title and the cells only; the fact line and the button run the full width
     under it, so the orange slab is never taller than what it holds */
  .rd-stub{
    grid-column:1;grid-row:1 / span 2;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:0;min-width:150px;
    padding:18px 44px 14px 18px;font-size:clamp(44px,4.2vw,60px);line-height:.92;
  }
  .rd-stub::after{top:13px;bottom:13px}
  .rd-stub i{font-size:.56em;line-height:1;margin:.1em 0 .14em}
  .rd-stub small{margin:auto 0 0;align-self:flex-start;font-size:11px}
  .rd-board-title{grid-column:2;margin-top:-.03em;font-size:var(--rd-fs-900);line-height:.86}
  .rd-cells{grid-column:2;margin-top:24px}
  .rd-cell{flex-basis:150px;padding:12px 16px 9px}
  .rd-cell dt{font-size:11px;font-stretch:125%;letter-spacing:.14em}
  .rd-board-facts,.rd-board-go{grid-column:1 / -1}
}

/* ---------------------------------------------------------------------
   5.8  .rd-stats — value in Anton, label in paint. Never in tiles.
     <div class="rd-stats">                      strip: cells in a row (default)
       <div class="rd-stat"><b>27,000</b><span>Square feet</span></div>
       <div class="rd-stat"><b>3 <svg class="rd-courts" …/></b><span>Hardwood courts</span></div>
       <div class="rd-stat"><b>K–12</b><span>All grades</span></div>
     </div>
     .rd-stats--ledger   rows: value left, label right on the baseline
     .rd-stats--auto     strip below 960px, ledger from 960px
     Rules and labels take the colours of the ground they stand on.
   --------------------------------------------------------------------- */
.rd-stats{display:grid;grid-auto-flow:column;grid-auto-columns:auto;justify-content:start;margin:0}
.rd-stat{
  display:flex;flex-direction:column;min-width:0;padding:12px 14px 0;
  border-top:1px solid var(--rd-stat-rule,var(--rd-ink));border-left:1px solid var(--rd-stat-rule,var(--rd-ink));
}
.rd-stat:first-child{padding-left:0;border-left:0}
.rd-stat:last-child{padding-right:0}
.rd-stat :is(b,dd){
  display:flex;align-items:center;gap:.36em;margin:0;white-space:nowrap;
  font:400 34px/1 var(--rd-f-display);letter-spacing:.01em;text-transform:uppercase;font-variant-numeric:tabular-nums;
}
.rd-stat :is(span,dt){
  margin-top:6px;color:var(--rd-stat-label,var(--rd-ink-2));
  font:800 11px/1.35 var(--rd-f-text);font-stretch:112%;letter-spacing:.1em;text-transform:uppercase;
}
/* paint is never set below 11px: on a phone the label is set narrower instead of smaller */
@media (max-width:479.98px){ .rd-stat :is(span,dt){font-stretch:88%;letter-spacing:.05em} }
.rd-courts{flex:none;width:auto;height:.82em;margin-top:-.04em;color:currentColor}
.rd-stats--fill{grid-auto-columns:1fr;justify-content:normal}
.rd-stats--ledger{display:block}
.rd-stats--ledger .rd-stat{flex-direction:row;align-items:baseline;justify-content:space-between;gap:16px;padding:9px 0 7px;border-left:0}
.rd-stats--ledger .rd-stat :is(b,dd){font-size:clamp(44px,3.9vw,58px)}
.rd-stats--ledger .rd-stat :is(span,dt){max-width:9em;margin:0;text-align:right;font-size:11px;font-stretch:122%;letter-spacing:.13em;line-height:1.45}
@media (min-width:960px){
  .rd-stat :is(b,dd){font-size:clamp(34px,3.4vw,48px)}
  .rd-stat{padding:14px clamp(14px,2vw,28px) 0}
  .rd-stats--auto{display:block}
  .rd-stats--auto .rd-stat{flex-direction:row;align-items:baseline;justify-content:space-between;gap:16px;padding:9px 0 7px;border-left:0}
  .rd-stats--auto .rd-stat :is(b,dd){font-size:clamp(44px,3.9vw,58px)}
  .rd-stats--auto .rd-stat :is(span,dt){max-width:9em;margin:0;text-align:right;font-size:11px;font-stretch:122%;letter-spacing:.13em;line-height:1.45}
}
@media (max-width:379.98px){
  .rd-stat{padding-inline:10px}
  .rd-stat :is(b,dd){font-size:29px}
  .rd-courts{display:none}
}

/* ---------------------------------------------------------------------
   5.13  .rd-ticket — the tear-off ticket (events on listing pages). Flat and straight.
     <article class="rd-ticket">
       <div class="rd-ticket-stub"><b>Nov 23</b><i>&amp;</i><b>24</b></div>        (date, or the holiday name, or <span class="rd-fmt">5x5</span>)
       <div class="rd-ticket-body">
         <p class="rd-paint">School break</p>
         <h3>Thanksgiving Camp</h3>
         <p>One line of copy.</p>
         <p class="rd-fact">K–2nd 9–11 AM · 3rd–7th 12–2 PM</p>
       </div>
       <div class="rd-ticket-price">
         <span class="rd-price">$90</span>
         <a class="rd-btn rd-btn--sm" href="…">Sign Up</a>
       </div>
     </article>
     .rd-ticket--dark    black body (white type)        .rd-ticket--tall   double-height headliner
     On phones it stacks: stub strip / body / price row.
   --------------------------------------------------------------------- */
.rd-ticket{
  --rd-ring:var(--rd-ink);
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);background:var(--rd-paper);color:var(--rd-ink);
  border:2px solid var(--rd-ink);
}
.rd-ticket + .rd-ticket{margin-top:18px}
.rd-ticket-stub{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .28em;padding:10px 16px 7px;background:var(--rd-orange);color:var(--rd-ink);
  border-bottom:2px dashed var(--rd-ink);
  font:400 clamp(26px,7.4vw,32px)/1 var(--rd-f-display);letter-spacing:.01em;text-transform:uppercase;
}
.rd-ticket-stub b{font-weight:400;white-space:nowrap}
.rd-ticket-stub i{font-style:normal}
.rd-ticket-stub small{font:800 10.5px/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.14em;margin-left:auto;align-self:center}
.rd-ticket-body{min-width:0;padding:16px 16px 18px}
.rd-ticket-body > .rd-paint{color:var(--rd-ink-2);margin:0 0 6px}
.rd-ticket-body h3{margin:0;font:400 clamp(30px,3vw,44px)/.94 var(--rd-f-display);letter-spacing:.006em;text-transform:uppercase;text-wrap:balance}
.rd-ticket-body > p:not(.rd-paint):not(.rd-fact){margin:8px 0 0;max-width:36em;font:500 16.5px/1.45 var(--rd-f-text)}
.rd-ticket-body > .rd-fact{margin:10px 0 0}
.rd-ticket-price{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;
  padding:14px 16px;border-top:2px dashed var(--rd-rule-strong);
}
/* punched notches at both ends of the perforation between body and price */
.rd-ticket-price::before,
.rd-ticket-price::after{
  content:"";position:absolute;top:-12px;width:22px;height:22px;box-sizing:border-box;
  background:var(--rd-notch,var(--rd-maple));border:2px solid var(--rd-ink);border-radius:var(--rd-r-round);
}
.rd-ticket-price::before{left:-12px;clip-path:inset(0 0 0 50%)}
.rd-ticket-price::after{right:-12px;clip-path:inset(0 50% 0 0)}
.rd-ticket--dark{background:var(--rd-ink);color:var(--rd-white);--rd-ring:var(--rd-orange)}
.rd-ticket--dark .rd-ticket-body > .rd-paint{color:var(--rd-chalk)}
.rd-ticket--dark .rd-ticket-body > .rd-fact{color:var(--rd-chalk)}
.rd-ticket--dark .rd-ticket-price{background:var(--rd-paper);color:var(--rd-ink)}
a.rd-ticket,.rd-ticket a.rd-ticket-cover{text-decoration:none}
@media (min-width:640px){
  .rd-ticket{grid-template-columns:auto minmax(0,1fr) auto}
  .rd-ticket-stub{
    flex-direction:column;flex-wrap:nowrap;align-items:flex-start;justify-content:center;gap:0;min-width:132px;padding:16px 18px 13px;
    border-bottom:0;border-right:2px dashed var(--rd-ink);font-size:clamp(30px,3vw,40px);line-height:.94;
  }
  .rd-ticket-stub i{font-size:.56em;line-height:1;margin:.08em 0 .12em}
  .rd-ticket-stub small{margin:8px 0 0;align-self:flex-start}
  .rd-ticket-body{padding:18px clamp(18px,2.4vw,28px) 20px}
  .rd-ticket-price{
    flex-direction:column;flex-wrap:nowrap;align-items:flex-start;justify-content:center;min-width:168px;padding:16px 20px;
    border-top:0;border-left:2px dashed var(--rd-rule-strong);
  }
  .rd-ticket-price::before{left:-12px;top:-13px;clip-path:inset(50% 0 0 0)}
  .rd-ticket-price::after{left:-12px;right:auto;top:auto;bottom:-13px;clip-path:inset(0 0 50% 0)}
  .rd-ticket-price .rd-btn{align-self:stretch}
  .rd-ticket--tall .rd-ticket-body h3{font-size:var(--rd-fs-700)}
  .rd-ticket--tall .rd-ticket-stub{font-size:clamp(40px,4.4vw,60px);min-width:170px}
}

/* ---------------------------------------------------------------------
   .rd-rates — a paper rate board; each row is one link
     <div class="rd-rates">
       <a class="rd-rate" href="rent.html?s=half">
         <span class="rd-rate-glyph"><svg…/></span>            (optional, 44px)
         <span class="rd-rate-name">Half court</span>
         <span class="rd-rate-desc">One line.</span>
         <span class="rd-price">$25<small>/hr</small></span>
         <svg class="rd-lane-arrow" …/>
       </a> …
     </div>
   --------------------------------------------------------------------- */
.rd-rates{background:var(--rd-paper);border:2px solid var(--rd-ink);--rd-ring:var(--rd-ink);container-type:inline-size}
.rd-rate{
  position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center;
  padding:16px;color:var(--rd-ink);text-decoration:none;border-top:2px solid var(--rd-ink);
  -webkit-tap-highlight-color:transparent;
}
.rd-rate:first-child{border-top:0}
.rd-rate::before{
  content:"";position:absolute;z-index:-1;inset:0;background:var(--rd-orange);
  transform:scaleX(0);transform-origin:left;transition:transform var(--rd-t-wipe) var(--rd-ease-out);
}
.rd-rate-glyph{display:none;color:var(--rd-ink)}
.rd-rate-glyph svg{display:block;width:44px;height:auto}
.rd-rate-name{grid-column:1;font:400 clamp(26px,2.6vw,36px)/1 var(--rd-f-display);letter-spacing:.012em;text-transform:uppercase}
.rd-rate-desc{grid-column:1;color:var(--rd-ink);font:500 16px/1.45 var(--rd-f-text)}
.rd-rate .rd-price{grid-column:2;grid-row:1 / span 2;justify-self:end;font-size:clamp(30px,3.2vw,44px)}
/* narrow board (phones): the arrow closes the row at the right, under the price and the sentence, so every row
   still says "tap me" as it does on a wide screen */
.rd-rate .rd-lane-arrow{grid-column:1 / -1;grid-row:3;justify-self:end;margin-top:4px}
@media (hover:hover){
  .rd-rate:hover::before{transform:scaleX(1)}
  .rd-rate:hover .rd-lane-arrow{transform:translateX(6px)}
}
.rd-rate:focus-visible{outline-offset:-4px}
.rd-rate:active::before{transform:scaleX(1);background:var(--rd-orange-press);transition-duration:var(--rd-t-press)}
/* a board at least 520px wide gets the arrow; from 820px it becomes one table row per rate */
@container (min-width:520px){
  .rd-rate{grid-template-columns:minmax(0,1fr) auto 30px;column-gap:20px;padding:18px clamp(18px,2.4vw,28px)}
  .rd-rate .rd-lane-arrow{display:block;grid-column:3;grid-row:1 / span 2;justify-self:auto;margin-top:0}
}
@container (min-width:820px){
  .rd-rate{grid-template-columns:minmax(0,4fr) minmax(0,6fr) auto 30px}
  .rd-rate:has(> .rd-rate-glyph){grid-template-columns:44px minmax(0,4fr) minmax(0,6fr) auto 30px}
  .rd-rate-glyph{display:block}
  .rd-rate > *,.rd-rate .rd-price,.rd-rate .rd-lane-arrow{grid-column:auto;grid-row:auto}
  .rd-rate .rd-price{min-width:3.4em;justify-content:flex-end}
}

/* ---------------------------------------------------------------------
   .rd-roster — No. / Name / Role
     <ol class="rd-roster">
       <li><span class="rd-roster-no">01</span><span class="rd-roster-name">Kenyon</span><span class="rd-roster-role">Owner &amp; trainer. …</span></li>
     </ol>
     .rd-roster--compact   small rows in one ruled block
   --------------------------------------------------------------------- */
.rd-roster{list-style:none;margin:0;padding:0;border-top:3px solid var(--rd-ink);border-bottom:2px solid var(--rd-ink)}
.rd-roster > li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:2px 10px;align-items:baseline;padding:14px 0 15px;border-top:2px solid var(--rd-ink)}
.rd-roster > li:first-child{border-top:0}
.rd-roster-no{grid-row:1 / span 2;color:var(--rd-ink-2);font:400 17px/1 var(--rd-f-display);letter-spacing:.02em}
.rd-roster-name{font:400 var(--rd-fs-600)/.94 var(--rd-f-display);letter-spacing:.006em;text-transform:uppercase}
.rd-roster-role{grid-column:2;color:var(--rd-ink);font:500 17px/1.45 var(--rd-f-text)}
.rd-roster--compact{border-top-width:2px}
.rd-roster--compact > li{padding:10px 0 11px;border-top:1px solid var(--rd-rule-strong)}
.rd-roster--compact .rd-roster-name{font-size:var(--rd-fs-500);line-height:1;letter-spacing:.02em}
@media (min-width:960px){
  .rd-roster > li{grid-template-columns:52px minmax(0,5fr) minmax(0,7fr);gap:0 20px}
  .rd-roster-no{grid-row:auto;font-size:20px}
  .rd-roster-role{grid-column:auto}
}

/* ---------------------------------------------------------------------
   5.13  .rd-slip — receipt with dotted leaders
     <div class="rd-slip">
       <p class="rd-slip-title">Your session</p>
       <div class="rd-slip-row"><span>Session</span><b>1-on-1</b></div>
       <div class="rd-slip-total"><span>Total</span><b>$75</b></div>
     </div>
   --------------------------------------------------------------------- */
.rd-slip{--rd-ring:var(--rd-ink);color:var(--rd-ink)}
.rd-slip-title{margin:0 0 6px;color:var(--rd-ink);font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase}
.rd-slip-row{display:flex;align-items:baseline;gap:10px;padding:6px 0}
.rd-slip-row > span{flex:none;color:var(--rd-ink-2);font:800 10.5px/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase}
.rd-slip-row::before{content:"";order:1;flex:1;min-width:18px;border-bottom:2px dotted var(--rd-rule-strong);transform:translateY(-3px)}
.rd-slip-row > b{order:2;text-align:right;font:500 15px/1.4 var(--rd-f-mono);letter-spacing:.02em}
.rd-slip-total{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:10px;padding-top:14px;border-top:2px dashed var(--rd-rule-strong)}
.rd-slip-total > span{padding-bottom:6px;color:var(--rd-ink-2);font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase}
.rd-slip-total > b{font:400 clamp(46px,4.4vw,56px)/.9 var(--rd-f-display);letter-spacing:.01em;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------------
   5.13  .rd-plans — "Plans change?" A / B / C
     <div class="rd-plans"><h3>Plans change?</h3><ol><li>…</li><li>…</li><li>…</li></ol></div>
   --------------------------------------------------------------------- */
.rd-plans{padding-top:16px;border-top:3px solid var(--rd-ink)}
.rd-plans > :is(h2,h3,h4){margin:0 0 12px;font:400 var(--rd-fs-500)/1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase}
.rd-plans ol{list-style:none;margin:0;padding:0;counter-reset:rd-plan}
.rd-plans li{position:relative;counter-increment:rd-plan;min-height:22px;padding:0 0 12px 36px;font:500 16px/1.45 var(--rd-f-text)}
.rd-plans li::before{
  content:counter(rd-plan,upper-alpha);position:absolute;left:0;top:1px;display:grid;place-items:center;width:22px;height:22px;padding-top:1px;
  box-sizing:border-box;background:var(--rd-orange);color:var(--rd-ink);font:400 17px/1 var(--rd-f-display);
}
.rd-plans li b{font-weight:800}

/* ---------------------------------------------------------------------
   .rd-rows — ruled label / value rows (the black apron column on Contact)
     <dl class="rd-rows"><div><dt>Email</dt><dd><a href="mailto:…">…</a></dd></div>…</dl>
   --------------------------------------------------------------------- */
.rd-rows{margin:0}
.rd-rows > div{padding:14px 0 16px;border-top:1px solid var(--rd-stat-rule,var(--rd-ink))}
.rd-rows dt{margin:0 0 6px;color:var(--rd-stat-label,var(--rd-ink-2));font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase}
.rd-rows dd{margin:0;font:500 17px/1.5 var(--rd-f-text);overflow-wrap:anywhere}
.rd-rows a{color:inherit;text-decoration:underline;text-decoration-color:var(--rd-orange);text-decoration-thickness:2px;text-underline-offset:4px}
:is(.rd-dark,.rd-band) .rd-rows a:hover{color:var(--rd-orange)}

/* ---------------------------------------------------------------------
   .rd-logos — a ruled row of sponsor logos on paper
     <div class="rd-logos rd-logos--5"><div class="rd-logo"><img …></div> ×5 </div>
     --5: one row of five from 640px, 3 + 2 on phones.   --6: 3 × 2 (2-up on phones).
     .rd-logo--add  dashed "your logo here" cell (an <a>)
   --------------------------------------------------------------------- */
.rd-logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;padding:2px 0 0 2px}
.rd-logo{
  position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;aspect-ratio:3 / 2;
  padding:clamp(10px,2vw,24px);margin:-2px 0 0 -2px;
  grid-column:span 2;background:var(--rd-paper);border:2px solid var(--rd-ink);
}
.rd-logo img{
  position:absolute;inset:clamp(10px,2vw,24px);width:calc(100% - 2 * clamp(10px,2vw,24px));height:calc(100% - 2 * clamp(10px,2vw,24px));
  max-width:none;object-fit:contain;
}
.rd-logos--5 > .rd-logo:nth-child(n+4){grid-column:span 3;aspect-ratio:9 / 4}
.rd-logos--6 > .rd-logo{grid-column:span 3}
.rd-logo--add{
  background:var(--rd-paper-2);border-style:dashed;color:var(--rd-ink);text-align:center;text-decoration:none;
  font:800 var(--rd-fs-label)/1.5 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
  transition:background-color var(--rd-t-hover);
}
.rd-logo--add:hover{background:var(--rd-orange)}
@media (min-width:640px){
  .rd-logos--5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .rd-logos--5 > .rd-logo,.rd-logos--5 > .rd-logo:nth-child(n+4){grid-column:auto;aspect-ratio:3 / 2}
  .rd-logos--6 > .rd-logo{grid-column:span 2}
}

/* ---------------------------------------------------------------------
   5.17  .rd-halftone — the one permitted texture: a static dot fade on the TOP edge of
   one CTA band per marketing page, in place of its white line. Never near text.
     <section class="rd-band rd-halftone">…</section>
   --------------------------------------------------------------------- */
.rd-band.rd-halftone{border-top:0}
/* from 1400px the dots stop at the sidelines, like every painted line (they would otherwise run across the aprons) */
@media (min-width:1400px){ .rd-halftone::before{left:calc(50% - var(--rd-max) / 2);right:calc(50% - var(--rd-max) / 2)} }
.rd-halftone::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;height:28px;pointer-events:none;
  background:radial-gradient(circle,var(--rd-ink) 1.7px,transparent 2.1px) 0 100% / 7px 7px;
  -webkit-mask-image:linear-gradient(to top,#000 0,transparent 100%);mask-image:linear-gradient(to top,#000 0,transparent 100%);
}

/* ---- 80-p-404.css ---- */
/* =====================================================================
   80-p-404.css — the 404 page: "out of bounds".
   Every rule is scoped body.rd-p-404.

   Layout idea: the first screen is one black block (out of bounds). The headline and
   the way back sit on the left; the number stands on the painted baseline at the right,
   as tall as the block allows. The floor only starts under that line.
   ===================================================================== */

body.rd-p-404 main + .rd-floor--close{margin-top:0}
body.rd-p-404 .nf-hero{border-image:var(--rd-baseline)}   /* from 1400px the painted line stops at the sidelines */
body.rd-p-404 .nf-hero .rd-hero-text{
  min-height:calc(70vh - var(--rd-nav-h) - 34px);justify-content:flex-start;
  padding-top:clamp(22px,3.4vw,40px);padding-bottom:0;
}
body.rd-p-404 .nf-hero .rd-kicker b{color:var(--rd-white)}
body.rd-p-404 .nf-body{display:flex;flex-direction:column;flex:1;min-width:0}
body.rd-p-404 .nf-copy{order:2;padding:6px 0 clamp(28px,4vw,48px)}
body.rd-p-404 .nf-hero h1{margin-top:0;font-size:clamp(62px,17.6vw,84px);line-height:.88}
body.rd-p-404 .nf-copy > p{max-width:30em;margin:18px 0 0;color:var(--rd-chalk);font:500 clamp(17px,1.4vw,20px)/1.5 var(--rd-f-text)}
body.rd-p-404 .nf-copy > p b{color:var(--rd-white);font-weight:800}
body.rd-p-404 .nf-copy .rd-btns{margin-top:24px}
/* the number: orange Anton, set at line-height .86 so its box is its cap height */
body.rd-p-404 .nf-num{
  order:1;display:block;margin:18px 0 14px;color:var(--rd-orange);pointer-events:none;-webkit-user-select:none;user-select:none;
  font:400 clamp(150px,47vw,270px)/.86 var(--rd-f-display);letter-spacing:.004em;font-variant-numeric:tabular-nums;
}
@media (min-width:960px){
  body.rd-p-404 .nf-hero .rd-hero-text{min-height:max(calc(72vh - var(--rd-nav-h) - 34px),440px)}
  body.rd-p-404 .nf-body{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:clamp(24px,4vw,64px);margin-top:auto;padding-top:28px}
  body.rd-p-404 .nf-copy{order:0;flex:0 1 auto;min-width:0;padding-bottom:clamp(36px,4.4vw,56px)}
  body.rd-p-404 .nf-hero h1{font-size:clamp(88px,10.2vw,146px)}
  body.rd-p-404 .nf-copy > p{margin-top:22px}
  /* the number stands on the block's painted baseline */
  /* the flat feet of the 4s sit 0.006em above the box's foot: drop the number onto the painted line, and trim the
     0's round overshoot at the same height so all three figures stand on the line and none runs through it */
  body.rd-p-404 .nf-num{
    order:1;flex:none;margin:0;font-size:clamp(250px,31vw,440px);
    transform:translateY(.006em);clip-path:inset(-20% -6% .006em -6%);
  }
}

/* ---- 80-p-about.css ---- */
/* =====================================================================
   80-p-about.css — /about: "the building, drawn".
   Every rule is scoped body.rd-p-about. Shared pieces come from 70-marketing.css.

   Layout idea: the hero is a floor plan (three courts from above, labelled, with one
   dimension line); "The gym" is one big statement beside a ledger; "The coaches" is a
   roster table; "Grow with us" is a strip of paper lying across the floor.
   ===================================================================== */

/* two floor sections in a row: one gap between them, not two */
body.rd-p-about .rd-sec + .rd-sec{padding-top:0}
body.rd-p-about .ab-staff{padding-bottom:0}   /* the paper strip under it brings its own gap */
body.rd-p-about main + .rd-floor--close{margin-top:0}

/* ---------- hero: the plan ---------- */
body.rd-p-about .rd-hero > .ab-plan{
  height:clamp(250px,70vw,330px);
  padding:38px 18px 54px;
}
/* labels: "Court 1 / 2 / 3" above each court, in paint. The engine writes where the courts are. */
body.rd-p-about .ab-court{
  position:absolute;z-index:var(--rd-z-content);
  left:calc(var(--rd-plan-x,-999px) + var(--n) * var(--rd-plan-step,0px));
  top:calc(var(--rd-plan-y,0px) - 21px);
  width:var(--rd-plan-w,0px);
  color:var(--rd-ink);text-align:left;white-space:nowrap;
  font:800 10.5px/1.3 var(--rd-f-text);font-stretch:118%;letter-spacing:.12em;text-transform:uppercase;
}
/* the architect's dimension line under the three courts: ticks at both ends, the figure in the middle */
body.rd-p-about .ab-dim{
  position:absolute;z-index:var(--rd-z-content);
  left:var(--rd-plan-x,-999px);
  top:calc(var(--rd-plan-y,0px) + var(--rd-plan-h,0px) + 12px);
  width:calc(2 * var(--rd-plan-step,0px) + var(--rd-plan-w,0px));
  height:12px;box-sizing:border-box;
  border-left:2px solid var(--rd-ink);border-right:2px solid var(--rd-ink);
  background:linear-gradient(var(--rd-ink),var(--rd-ink)) 0 50% / 100% 2px no-repeat;
}
body.rd-p-about .ab-dim i{
  position:absolute;left:50%;top:-5px;transform:translateX(-50%);
  padding:3px 10px 2px;background:var(--rd-ink);color:var(--rd-white);white-space:nowrap;
  font:500 12.5px/1.3 var(--rd-f-mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;
}
@media (min-width:640px){
  body.rd-p-about .rd-hero > .ab-plan{height:clamp(330px,48vw,440px);padding:44px 32px 60px}
  body.rd-p-about .ab-court{font-size:11.5px;letter-spacing:.16em;font-stretch:125%}
}
@media (min-width:960px){
  body.rd-p-about .rd-hero{grid-template-columns:minmax(0,42fr) minmax(0,58fr);min-height:clamp(430px,39vw,540px)}
  body.rd-p-about .rd-hero > .ab-plan{height:auto;padding:52px 44px 66px}
  /* a short name in a narrow column: the headline stacks and takes the size up, so the black block is full */
  body.rd-p-about .rd-hero h1{font-size:clamp(100px,11.6vw,166px);line-height:.88}
  body.rd-p-about .rd-hero h1 .o:not(.rd-plain){display:block}
  body.rd-p-about .ab-court{top:calc(var(--rd-plan-y,0px) - 24px);font-size:12px}
  body.rd-p-about .ab-dim{top:calc(var(--rd-plan-y,0px) + var(--rd-plan-h,0px) + 16px)}
  body.rd-p-about .ab-dim i{font-size:13.5px}
}

/* ---------- 01 The gym: one statement, one ledger ---------- */
body.rd-p-about .ab-gym-body{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
body.rd-p-about .ab-statement{
  margin:0;max-width:22em;color:var(--rd-ink);
  font:500 clamp(23px,2.55vw,37px)/1.2 var(--rd-f-text);letter-spacing:-.012em;text-wrap:pretty;
}
body.rd-p-about .ab-statement b{font-weight:800}
body.rd-p-about .ab-ledger{border-bottom:1px solid var(--rd-ink)}
body.rd-p-about .ab-ledger .rd-stat:first-child{border-top-width:3px}
body.rd-p-about .ab-ledger .rd-stat span{max-width:none;white-space:nowrap}
@media (max-width:959.98px){
  body.rd-p-about .ab-ledger .rd-stat b{font-size:clamp(36px,11vw,58px)}
}
@media (max-width:419.98px){
  /* "Year-round" and "Programming" share one line down to 320px */
  body.rd-p-about .ab-ledger .rd-stat span{font-size:11px;font-stretch:92%;letter-spacing:.06em}
}
@media (min-width:960px){
  body.rd-p-about .ab-gym-body{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(24px,4vw,64px);align-items:start}
  /* the ledger's first rule lines up with the cap height of the statement's first line */
  body.rd-p-about .ab-ledger{margin-top:.35em}
}

/* ---------- 02 The coaches: No. / Name / Role ---------- */
body.rd-p-about .ab-cols{
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:0 10px;padding:0 0 8px;color:var(--rd-ink-2);
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
body.rd-p-about .ab-cols span:last-child{display:none}
body.rd-p-about .ab-roster{border-top-width:2px;border-bottom:0}
body.rd-p-about .ab-roster .rd-roster-no{grid-row:1}
body.rd-p-about .ab-roster .rd-roster-name{font-size:clamp(46px,5.4vw,84px);line-height:.9}
body.rd-p-about .ab-roster .rd-roster-role{font-size:clamp(17px,1.35vw,19px)}
body.rd-p-about .ab-roster .rd-roster-role b{font-weight:800}
/* the bench: four coaches whose bios are still to come, in one ruled block */
body.rd-p-about .ab-bench{
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:2px solid var(--rd-ink);border-bottom:3px solid var(--rd-ink);
}
body.rd-p-about .ab-bench li{
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:2px 10px;align-items:baseline;min-width:0;padding:13px 0 12px;
}
body.rd-p-about .ab-bench li:nth-child(even){padding-left:14px;border-left:2px solid var(--rd-ink)}
body.rd-p-about .ab-bench li:nth-child(n+3){border-top:2px solid var(--rd-ink)}
body.rd-p-about .ab-bench-no{grid-row:1 / span 2;color:var(--rd-ink-2);font:400 17px/1 var(--rd-f-display);letter-spacing:.02em}
body.rd-p-about .ab-bench li:nth-child(even) .ab-bench-no{padding-left:0}
body.rd-p-about .ab-bench-name{font:400 clamp(27px,2.6vw,38px)/1 var(--rd-f-display);letter-spacing:.012em;text-transform:uppercase;overflow-wrap:anywhere}
body.rd-p-about .ab-bench-role{
  grid-column:2;color:var(--rd-ink-2);
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
body.rd-p-about .ab-bench-note{margin:12px 0 0;color:var(--rd-ink)}
@media (min-width:960px){
  body.rd-p-about .ab-cols{grid-template-columns:52px minmax(0,5fr) minmax(0,7fr);gap:0 20px}
  body.rd-p-about .ab-cols span:last-child{display:block}
  body.rd-p-about .ab-roster > li{align-items:end;padding:20px 0 18px}
  body.rd-p-about .ab-roster .rd-roster-no{align-self:start;padding-top:8px}
  body.rd-p-about .ab-roster .rd-roster-role{padding-bottom:.42em}
  body.rd-p-about .ab-bench{grid-template-columns:repeat(4,minmax(0,1fr))}
  body.rd-p-about .ab-bench li{grid-template-columns:52px minmax(0,1fr);gap:4px 20px;padding:18px 0 16px}
  body.rd-p-about .ab-bench li:nth-child(n+3){border-top:0}
  body.rd-p-about .ab-bench li:nth-child(n+2){padding-left:20px;border-left:2px solid var(--rd-ink)}
  body.rd-p-about .ab-bench li:nth-child(n+2){grid-template-columns:36px minmax(0,1fr);column-gap:12px}
  body.rd-p-about .ab-bench-no{font-size:20px}
}

/* ---------- 03 Grow with us: a strip of paper across the floor ---------- */
body.rd-p-about .ab-grow{
  --rd-ring:var(--rd-ink);
  max-width:var(--rd-max);margin:var(--rd-sec-y) auto 0;padding:clamp(26px,3.6vw,48px) 0 clamp(30px,4vw,52px);
  background:var(--rd-paper);border-top:2px solid var(--rd-ink);border-bottom:2px solid var(--rd-ink);
  scroll-margin-top:calc(var(--rd-nav-h) + 12px);
}
/* on paper the header needs no rule of its own: the strip's edge is the rule */
body.rd-p-about .ab-grow .rd-head{border-top:0;padding-top:0}
body.rd-p-about .ab-grow .rd-head::after{display:none}
body.rd-p-about .ab-values{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);border-top:3px solid var(--rd-ink)}
body.rd-p-about .ab-values li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:6px 10px;padding:18px 0 20px;border-bottom:2px solid var(--rd-ink)}
body.rd-p-about .ab-value-no{grid-row:1 / span 2;padding-top:5px;color:var(--rd-ink-2);font:400 17px/1 var(--rd-f-display);letter-spacing:.02em}
body.rd-p-about .ab-values h3{margin:0;font:400 var(--rd-fs-500)/1.02 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase;text-wrap:balance}
body.rd-p-about .ab-values p{grid-column:2;margin:0;max-width:34em;color:var(--rd-ink);font:500 16.5px/1.5 var(--rd-f-text)}
@media (min-width:960px){
  body.rd-p-about .ab-values{grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:2px solid var(--rd-ink)}
  body.rd-p-about .ab-values li{display:block;padding:20px clamp(18px,2.4vw,32px) 26px;border-bottom:0;border-left:2px solid var(--rd-ink)}
  body.rd-p-about .ab-values li:first-child{padding-left:0;border-left:0}
  body.rd-p-about .ab-values li:last-child{padding-right:0}
  body.rd-p-about .ab-value-no{display:block;padding:0;font-size:20px}
  body.rd-p-about .ab-values h3{margin:34px 0 10px;font-size:clamp(28px,2.5vw,36px);max-width:11em}
}

/* ---------- closing band: the tagline, then the far end of the floor ---------- */
body.rd-p-about .ab-close{margin-top:clamp(56px,6vw,88px)}
body.rd-p-about .ab-close h2{font-size:clamp(46px,6.2vw,92px)}
/* the dot fade stays on the boards: it stops at the sidelines instead of running over the white paint */
@media (min-width:1400px){
  body.rd-p-about .ab-close.rd-halftone::before{left:calc(50% - var(--rd-max) / 2);right:calc(50% - var(--rd-max) / 2)}
}
@media (min-width:960px){
  body.rd-p-about .ab-close .rd-split{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
}

/* ---- 80-p-camps-hub.css ---- */
/* =====================================================================
   80-p-camps-hub.css — /camps/  "tickets by date"   (pages/camps/index.html)
   Every rule is scoped body.rd-p-camps-hub.

   The idea: a tear-off calendar. Every camp is one ticket whose stub is the date — month small, day huge —
   stacked in date order, so the left edge of the list reads top to bottom like a calendar. The next camp by
   date (worked out by the page's script from each ticket's data-start) is the main event: a double-height
   black ticket with an orange "days to go" shot clock. Camps that have passed drop to the end of the list.

   Page classes (all rd-ch-*):
     .rd-ch-list / .rd-ch-tickets   the section and the stack
     .rd-ch-tk (.is-next / .is-past)  one ticket; its name is the one link and covers the whole ticket
     .rd-ch-clock   the shot-clock cell (next camp only)     .rd-ch-fee   price + unit     .rd-ch-go   Register slab
     .rd-ch-know / .rd-ch-facts / .rd-ch-more   the "good to know" band
   ===================================================================== */

/* ---------- hero ---------- */
body.rd-p-camps-hub .rd-hero-text > .rd-stats{margin-top:26px}
@media (min-width:960px){
  /* the same 50 / 50 split as the leagues hub (80-p-leagues-hub.css), so flipping between the twin hubs the
     court panel and the stats rule stay put */
  body.rd-p-camps-hub .rd-hero{grid-template-columns:repeat(2,minmax(0,1fr));min-height:clamp(380px,36vw,520px)}
  body.rd-p-camps-hub .rd-hero:not(.rd-hero--plain) .rd-hero-text{padding-right:calc(clamp(40px,5.6vw,80px) / 2)}
  body.rd-p-camps-hub .rd-hero-text > .rd-stats{margin-top:30px}
}

/* ---------- the stack ---------- */
body.rd-p-camps-hub .rd-ch-list{padding:clamp(20px,3.2vw,44px) 0 clamp(28px,4.4vw,60px)}
body.rd-p-camps-hub .rd-ch-tickets{display:flex;flex-direction:column;gap:18px}
body.rd-p-camps-hub .rd-ch-tk{margin:0;--rd-notch:var(--rd-maple)}
body.rd-p-camps-hub .rd-ch-tk.is-next{order:-1}
body.rd-p-camps-hub .rd-ch-tk.is-past{order:1}

/* the date stub. On a phone: one line, the year at the far end. */
body.rd-p-camps-hub .rd-ch-tk .rd-ticket-stub{gap:0 .26em}
body.rd-p-camps-hub .rd-ch-tk .rd-ticket-stub i{font-size:.62em;margin:0 .06em;position:relative;top:-.12em}

body.rd-p-camps-hub .rd-ch-tk .rd-ticket-body > .rd-paint{display:flex;align-items:center;gap:10px;min-height:22px;margin-bottom:8px}
body.rd-p-camps-hub .rd-ch-tk .rd-flag{margin:-2px 0;font-size:10.5px}
body.rd-p-camps-hub .rd-ch-tk .rd-flag[hidden]{display:none}
/* on the big ticket the flag and the camp's length are two facts: a short painted rule keeps them apart */
body.rd-p-camps-hub .rd-ch-tk.is-next .rd-flag:not([hidden]) + .rd-ch-len{display:inline-flex;align-items:center;gap:12px}
body.rd-p-camps-hub .rd-ch-tk.is-next .rd-flag:not([hidden]) + .rd-ch-len::before{content:"";width:1px;height:14px;margin-left:2px;background:var(--rd-on-dark-rule)}
body.rd-p-camps-hub .rd-ch-tk .rd-ticket-body > p:not(.rd-paint){text-wrap:pretty}
body.rd-p-camps-hub .rd-ch-tk .rd-ticket-body h3{font-size:clamp(34px,9.6vw,40px)}
/* the name is the ticket's one link: it covers the whole ticket, the Register slab answers the hover */
body.rd-p-camps-hub .rd-ch-tk .rd-ticket-cover{color:inherit;outline:0}
body.rd-p-camps-hub .rd-ch-tk .rd-ticket-cover::after{content:"";position:absolute;inset:-2px;z-index:2}
body.rd-p-camps-hub .rd-ch-tk:has(.rd-ticket-cover:focus-visible){outline:3px solid var(--rd-ink);outline-offset:3px}
body.rd-p-camps-hub .rd-ch-tk .rd-kv{margin-top:12px}
body.rd-p-camps-hub .rd-ch-tk .rd-kv > div{padding:7px 0}
body.rd-p-camps-hub .rd-ch-tk .rd-kv > div + div{border-top:1px solid var(--rd-rule)}
body.rd-p-camps-hub .rd-ch-tk .rd-kv > div{flex-wrap:wrap}
body.rd-p-camps-hub .rd-ch-tk .rd-kv dd{margin-left:auto;font-weight:700;white-space:nowrap}

body.rd-p-camps-hub .rd-ch-clock{display:none;margin:0}
body.rd-p-camps-hub .rd-ch-fee{display:flex;align-items:baseline;gap:8px;margin:0;color:var(--rd-ink-2);font:700 15px/1.2 var(--rd-f-text);white-space:nowrap}
body.rd-p-camps-hub .rd-ch-fee .rd-price{color:var(--rd-ink)}
body.rd-p-camps-hub .rd-ch-go{min-height:52px}
@media (hover:hover){
  body.rd-p-camps-hub .rd-ch-tk:hover .rd-ch-go{background:var(--rd-ink);color:var(--rd-white)}
  body.rd-p-camps-hub .rd-ch-tk:hover .rd-ch-go svg{transform:translateX(4px)}
}
body.rd-p-camps-hub .rd-ch-tk:active .rd-ch-go{background:var(--rd-orange-press);color:var(--rd-ink)}

/* a camp whose last day has passed */
body.rd-p-camps-hub .rd-ch-tk.is-past .rd-ticket-stub{background:var(--rd-hatch);color:var(--rd-hatch-ink)}
body.rd-p-camps-hub .rd-ch-tk.is-past .rd-flag{background:var(--rd-paper-2);outline:1px solid var(--rd-ink)}

/* ---- the next camp: the main event ---- */
body.rd-p-camps-hub .rd-ch-tk.is-next{background:var(--rd-ink);color:var(--rd-white)}
body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ticket-stub{font-size:clamp(34px,10vw,42px);padding-block:12px 9px}
body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ticket-body > .rd-paint{color:var(--rd-chalk)}
body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ticket-body h3{font-size:clamp(40px,14.4vw,60px);line-height:.9}
body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ticket-body > p:not(.rd-paint){color:var(--rd-chalk)}
body.rd-p-camps-hub .rd-ch-tk.is-next .rd-kv dt{color:var(--rd-chalk)}
body.rd-p-camps-hub .rd-ch-tk.is-next .rd-kv dd{color:var(--rd-white)}
body.rd-p-camps-hub .rd-ch-tk.is-next .rd-kv > div::before{border-bottom-color:var(--rd-on-dark-rule)}
body.rd-p-camps-hub .rd-ch-tk.is-next .rd-kv > div + div{border-top-color:var(--rd-on-dark-rule)}
body.rd-p-camps-hub .rd-ch-tk.is-next:has(.rd-ticket-cover:focus-visible){outline-color:var(--rd-orange)}
body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ticket-price{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:0;padding:0;background:var(--rd-paper);color:var(--rd-ink);
}
body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ch-clock:not([hidden]){
  display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-width:0;padding:12px 16px 9px;
  background:var(--rd-orange);color:var(--rd-ink);
}
body.rd-p-camps-hub .rd-ch-clock span{font:800 10.5px/1.3 var(--rd-f-text);font-stretch:118%;letter-spacing:.12em;text-transform:uppercase}
body.rd-p-camps-hub .rd-ch-clock b{
  font:400 clamp(60px,18vw,76px)/.86 var(--rd-f-display);letter-spacing:.01em;font-variant-numeric:tabular-nums;text-transform:uppercase;
}
body.rd-p-camps-hub .rd-ch-clock.is-today b{font-size:clamp(40px,11vw,48px)}
/* one price lockup on the whole page: the number, then "per camper" after it (here stacked, the cell is narrow) */
body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ch-fee{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:6px;padding:12px 16px 9px}
body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ch-fee .rd-price{font-size:clamp(52px,15vw,62px);line-height:.86}
body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ch-clock[hidden] + .rd-ch-fee{grid-column:1 / -1}
body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ch-go{grid-column:1 / -1;min-height:60px;margin:16px;font-size:15px}
body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ch-fee{border-bottom:0}

@media (max-width:639.98px){
  body.rd-p-camps-hub .rd-ch-tk:not(.is-next) .rd-ch-go{flex:1 1 150px}
}
@media (max-width:959.98px){
  /* phone and tablet: the session label is set narrower so label, leader and time share one line */
  body.rd-p-camps-hub .rd-ch-tk .rd-kv dt{font-stretch:108%;letter-spacing:.08em}
  body.rd-p-camps-hub .rd-ch-tk .rd-kv dd{font-size:14.5px;letter-spacing:0}
  body.rd-p-camps-hub .rd-ch-tk .rd-kv > div::before{min-width:8px}
}

@media (min-width:640px){
  /* every stub is the same width, so the dates line up down the page like a calendar's edge */
  body.rd-p-camps-hub .rd-ch-tk{grid-template-columns:150px minmax(0,1fr) 210px}
  body.rd-p-camps-hub .rd-ch-tk .rd-ticket-stub{min-width:0;padding:16px 10px 14px 18px;gap:0;font-size:40px;line-height:.9}
  body.rd-p-camps-hub .rd-ch-tk .rd-ticket-stub > span{font-size:.42em;line-height:1;letter-spacing:.04em;margin-bottom:.22em}
  body.rd-p-camps-hub .rd-ch-tk .rd-ticket-stub small{margin-top:10px}
  body.rd-p-camps-hub .rd-ch-tk .rd-ticket-body h3{font-size:clamp(32px,3.2vw,44px)}
  body.rd-p-camps-hub .rd-ch-tk .rd-ticket-price{min-width:0;gap:12px;padding:16px 18px}

  body.rd-p-camps-hub .rd-ch-tk.is-next{grid-template-columns:200px minmax(0,1fr) 230px}
  body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ticket-stub{font-size:50px;padding:22px 14px 20px 20px}
  body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ticket-stub small{margin-top:14px;font-size:12px}
  body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ticket-body{padding-block:24px 26px}
  body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ticket-body h3{font-size:clamp(52px,5.8vw,84px)}
  body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ticket-body > p:not(.rd-paint){margin-top:12px;font-size:clamp(17px,1.4vw,19px)}
  body.rd-p-camps-hub .rd-ch-tk.is-next .rd-kv{max-width:34em;margin-top:16px}
  body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ticket-price{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:0}
  body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ch-clock:not([hidden]){flex:1 1 auto;padding:16px 20px 12px}
  body.rd-p-camps-hub .rd-ch-clock span{font-size:11px;font-stretch:125%;letter-spacing:.14em}
  body.rd-p-camps-hub .rd-ch-clock b{font-size:clamp(84px,9.4vw,132px)}
  body.rd-p-camps-hub .rd-ch-clock.is-today b{font-size:clamp(48px,5vw,64px)}
  body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ch-fee{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:8px;padding:16px 20px 0}
  body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ch-fee .rd-price{font-size:clamp(46px,4.4vw,56px);line-height:1}
  body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ch-go{margin:14px 20px 20px}
}

@media (min-width:960px){
  body.rd-p-camps-hub .rd-ch-tk{grid-template-columns:176px minmax(0,1fr) 236px}
  body.rd-p-camps-hub .rd-ch-tk:not(.is-next) .rd-ticket-stub{padding-left:20px;font-size:clamp(44px,3.5vw,50px)}
  body.rd-p-camps-hub .rd-ch-tk .rd-ticket-price{padding:18px 22px}

  body.rd-p-camps-hub .rd-ch-tk.is-next{grid-template-columns:clamp(220px,19vw,268px) minmax(0,1fr) clamp(250px,22vw,310px)}
  body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ticket-stub{font-size:clamp(52px,5vw,70px);padding:28px 16px 24px 26px}
  body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ticket-body{padding:28px clamp(24px,3vw,40px) 30px}
  body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ticket-price{padding:0}
  body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ch-clock:not([hidden]){padding:20px 24px 14px}
  body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ch-fee{padding:18px 24px 0}
  body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ch-go{margin:16px 24px 24px}
}

@media (min-width:1280px){
  /* standard ticket: name and line on the left, the two sessions on the right — one row, like a schedule */
  body.rd-p-camps-hub .rd-ch-tk:not(.is-next) .rd-ticket-body{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(300px,29vw,390px));column-gap:clamp(24px,3.4vw,52px);align-content:center;
  }
  body.rd-p-camps-hub .rd-ch-tk:not(.is-next) .rd-ticket-body > *{grid-column:1}
  body.rd-p-camps-hub .rd-ch-tk:not(.is-next) .rd-ticket-body > .rd-kv{grid-column:2;grid-row:1 / span 3;align-self:center;margin:0}
}

/* ---------- good to know: three ruled columns, the long one widest ---------- */
body.rd-p-camps-hub .rd-ch-know{padding-block:clamp(30px,4.4vw,56px) clamp(32px,4.6vw,60px)}
body.rd-p-camps-hub .rd-ch-more{
  display:flex;flex-wrap:wrap;align-items:center;gap:2px 16px;max-width:none;margin:16px 0 0;color:var(--rd-chalk);font:500 17px/1.5 var(--rd-f-text);
}
body.rd-p-camps-hub .rd-ch-facts{display:grid;grid-template-columns:minmax(0,1fr);margin:clamp(20px,2.6vw,34px) 0 0;border-bottom:1px solid var(--rd-on-dark-rule)}
body.rd-p-camps-hub .rd-ch-facts > div{min-width:0;padding:14px 0 18px;border-top:1px solid var(--rd-on-dark-rule)}
body.rd-p-camps-hub .rd-ch-facts dt{
  margin:0 0 9px;color:var(--rd-chalk);
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
body.rd-p-camps-hub .rd-ch-facts dd{
  margin:0;color:var(--rd-white);font:400 clamp(28px,2.7vw,38px)/1.02 var(--rd-f-display);letter-spacing:.012em;text-transform:uppercase;text-wrap:balance;
}
body.rd-p-camps-hub .rd-ch-facts dd span{
  display:block;margin-top:8px;color:var(--rd-chalk);font:500 16.5px/1.45 var(--rd-f-text);letter-spacing:0;text-transform:none;
}
@media (min-width:960px){
  body.rd-p-camps-hub .rd-ch-facts{grid-template-columns:minmax(0,4fr) minmax(0,2fr) minmax(0,6fr);border-bottom:0}
  body.rd-p-camps-hub .rd-ch-facts > div{padding:16px clamp(18px,2.4vw,34px) 4px}
  body.rd-p-camps-hub .rd-ch-facts > div + div{border-left:1px solid var(--rd-on-dark-rule)}
  body.rd-p-camps-hub .rd-ch-facts > div:first-child{padding-left:0}
  body.rd-p-camps-hub .rd-ch-facts > div:last-child{padding-right:0}
  /* heading left, the way out on the right, the three facts across the whole floor under both */
  body.rd-p-camps-hub .rd-ch-know-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(24px,4vw,64px);align-items:end}
  body.rd-p-camps-hub .rd-ch-know-head{grid-column:1;grid-row:1}
  body.rd-p-camps-hub .rd-ch-more{grid-column:2;grid-row:1;justify-content:flex-end;margin:0 0 .2em}
  body.rd-p-camps-hub .rd-ch-facts{grid-column:1 / -1;grid-row:2}
}
body.rd-p-camps-hub .rd-floor--close{margin-top:0}
/* the far end of the floor, a little deeper on a desktop so the page ends on a real court */
@media (min-width:960px){ body.rd-p-camps-hub .rd-floor--close{height:clamp(380px,33vw,480px)} }

/* member pricing on: "$75 per camper", then the member line under both */
body.rd-p-camps-hub .rd-ch-fee:has(.ign-member-price){flex-wrap:wrap;row-gap:0}
html:not(#rd) body.rd-p-camps-hub .rd-ch-fee .ign-member-price{order:9;flex:0 0 100%;margin-top:4px}
@media (max-width:639.98px){
  html:not(#rd) body.rd-p-camps-hub .rd-ch-tk.is-next .rd-ch-fee .ign-member-price{flex:0 0 auto;margin-top:0}
}

/* ---- 80-p-camps.css ---- */
/* =====================================================================
   80-p-camps.css — /camps  (pages/camps.html, body.rd-p-camps)
   Layout idea: EVERY CAMP DAY IS THE SAME DAY. The two sessions every camp
   shares are stated once, as a black scoreboard under the hero. Then the
   five camps are tear-off tickets in calendar order: the camp whose dates
   are set stands tall on the left, the four still to be dated stack beside it.
   Every rule is scoped body.rd-p-camps.
   ===================================================================== */

/* ---- hero: no buttons on this page, so the band is a little lower and the camp-day scoreboard
        under it is on the first screen ---- */
@media (min-width:960px){
  body.rd-p-camps .rd-hero{min-height:clamp(330px,28vw,400px)}
}

/* ---- the camp day: a scoreboard ---- */
body.rd-p-camps .cp-day{padding:clamp(24px,2.4vw,32px) 0 clamp(30px,3.6vw,46px)}
body.rd-p-camps .cp-day h2{font-size:clamp(42px,4.3vw,62px);text-wrap:wrap}
body.rd-p-camps .cp-day .rd-split{row-gap:6px}
body.rd-p-camps .cp-cells{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(18px,2.2vw,26px);
}
body.rd-p-camps .cp-cells .rd-cell{padding:11px 12px 8px}
body.rd-p-camps .cp-cells .rd-cell dd{font-size:clamp(33px,10.6vw,50px)}
body.rd-p-camps .cp-cells .rd-cell dd small{font-size:.5em;letter-spacing:.03em}
@media (min-width:640px){
  body.rd-p-camps .cp-cells{grid-template-columns:repeat(4,minmax(0,1fr))}
  body.rd-p-camps .cp-cells .rd-cell{padding:14px clamp(12px,1.6vw,20px) 10px}
  body.rd-p-camps .cp-cells .rd-cell dd{font-size:clamp(40px,5.7vw,84px)}
}

/* ---- the five camps ---- */
body.rd-p-camps .cp-camps{padding-bottom:0}
body.rd-p-camps .cp-list{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
body.rd-p-camps .cp-list > .rd-ticket{margin:0;min-width:0}
body.rd-p-camps .cp-list .rd-ticket-price .rd-price small{margin-left:.3em}
body.rd-p-camps .cp-kv{margin-top:14px;padding-top:6px;border-top:2px solid var(--rd-ink)}
body.rd-p-camps .cp-next .rd-ticket-body h3{font-size:clamp(40px,11vw,52px)}
body.rd-p-camps .cp-next .rd-ticket-price .rd-btn{flex:1 1 150px}
@media (min-width:640px) and (max-width:959.98px){
  body.rd-p-camps .cp-next .rd-ticket-price .rd-btn{flex:0 0 auto}
}
body.rd-p-camps .cp-tk .rd-ticket-price .rd-btn{min-width:132px}
body.rd-p-camps .cp-notice{margin-top:18px}

@media (min-width:640px){
  /* every month stub is the same width, so the four titles line up */
  body.rd-p-camps .cp-tk .rd-ticket-stub{box-sizing:border-box;width:150px;min-width:0}
  body.rd-p-camps .cp-tk .rd-ticket-stub b{font-size:clamp(40px,3.8vw,52px);line-height:.92}
  /* a two-day camp's stub ("Mar 22" over "& 23"): a size down so the wider month still fits the 150px stub */
  body.rd-p-camps .cp-tk .rd-ticket-stub.cp-stub-2 b{font-size:clamp(34px,3.1vw,42px)}
  body.rd-p-camps .cp-tk .rd-ticket-body{display:flex;flex-direction:column;justify-content:center}
  body.rd-p-camps .cp-tk .rd-ticket-body h3{font-size:clamp(28px,2.7vw,38px)}
  body.rd-p-camps .cp-tk .rd-ticket-price{min-width:176px}
}

@media (min-width:960px){
  body.rd-p-camps .cp-list{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px 18px}
  body.rd-p-camps .cp-tk{grid-column:2}

  /* the dated camp stands upright down the left: date strip, body, price row */
  body.rd-p-camps .cp-next{grid-column:1;grid-row:1 / span 4;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto}
  body.rd-p-camps .cp-next .rd-ticket-stub{
    flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:0 .26em;min-width:0;
    padding:16px 24px 11px;border-right:0;border-bottom:2px dashed var(--rd-ink);
    font-size:clamp(50px,5.4vw,78px);line-height:.9;
  }
  body.rd-p-camps .cp-next .rd-ticket-stub i{font-size:.6em;margin:0}
  body.rd-p-camps .cp-next .rd-ticket-stub small{margin:0 0 0 auto;align-self:flex-start;padding-top:8px;font-size:12px}
  body.rd-p-camps .cp-next .rd-ticket-body{padding:22px 24px 24px}
  body.rd-p-camps .cp-next .rd-ticket-body h3{font-size:clamp(46px,5vw,72px);line-height:.9}
  body.rd-p-camps .cp-next .rd-ticket-body > p:not(.rd-paint):not(.rd-fact){margin-top:12px;font-size:18px}
  body.rd-p-camps .cp-kv{margin-top:20px}
  body.rd-p-camps .cp-kv > div{padding:9px 0}
  body.rd-p-camps .cp-next .rd-ticket-price{
    flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:20px;min-width:0;
    padding:18px 24px;border-left:0;border-top:2px dashed var(--rd-rule-strong);
  }
  body.rd-p-camps .cp-next .rd-ticket-price::before{left:-12px;top:-12px;bottom:auto;clip-path:inset(0 0 0 50%)}
  body.rd-p-camps .cp-next .rd-ticket-price::after{left:auto;right:-12px;top:-12px;bottom:auto;clip-path:inset(0 50% 0 0)}
  body.rd-p-camps .cp-next .rd-ticket-price .rd-price{font-size:clamp(46px,4.4vw,56px)}
  body.rd-p-camps .cp-next .rd-ticket-price .rd-btn{align-self:center;flex:1 1 auto;max-width:260px;min-height:60px}
}

/* ---- 80-p-contact.css ---- */
/* =====================================================================
   80-p-contact.css — /contact: "the scorer's table".
   Every rule is scoped body.rd-p-contact.

   Layout idea: centre court in the hero (no play: there is a form on this page). Under it,
   a black out-of-bounds column runs down the sideline carrying the facts — Email, Location,
   Facility, Practice & Play — and the inquiry form lies on the floor beside it as a ticket.
   The column is a third of the floor, lined up with the hero's black block above it.
   Phones: the facts first (short rows on a black band), then the ticket.
   ===================================================================== */

/* the original page kept these two rules in its own <style>; shared.js toggles .show */
body.rd-p-contact .form-success{display:none}
body.rd-p-contact .form-success.show{display:block}

body.rd-p-contact main + .rd-floor--close{margin-top:0}
body.rd-p-contact .ct-grid{display:grid;grid-template-columns:minmax(0,1fr);max-width:var(--rd-max);margin-inline:auto}
/* phones: centre court is a short strip, so the facts and the form come up sooner */
@media (max-width:639.98px){
  body.rd-p-contact .rd-hero > .rd-floor{height:clamp(150px,44vw,190px)}
}

/* ---------- the black column ---------- */
body.rd-p-contact .ct-apron{
  position:relative;min-width:0;padding:0 var(--rd-gut) 6px;
  border-bottom:var(--rd-lw) solid var(--rd-line);
}
body.rd-p-contact .ct-row{padding:13px 0 14px}
body.rd-p-contact .ct-row:first-child{border-top:0}
body.rd-p-contact .ct-rows dt{margin-bottom:5px}
body.rd-p-contact .ct-rows dd{color:var(--rd-chalk)}
body.rd-p-contact .ct-email{
  display:inline-block;padding:3px 0;color:var(--rd-white);font:650 clamp(19px,5.2vw,22px)/1.3 var(--rd-f-text);letter-spacing:-.005em;
}
body.rd-p-contact .ct-rows dd.ct-big{
  color:var(--rd-white);font:400 clamp(30px,8.6vw,38px)/.94 var(--rd-f-display);letter-spacing:.008em;text-transform:uppercase;
}
/* the street address under the big town name: plain text size, not display type */
body.rd-p-contact .ct-rows dd.ct-big .ct-street{display:block;margin-top:10px;font:500 16px/1.4 var(--rd-f-text);letter-spacing:0;text-transform:none}
body.rd-p-contact .ct-courts{
  display:flex;align-items:center;gap:.42em;margin-top:.36em;color:var(--rd-chalk);font-size:.58em;line-height:1;letter-spacing:.02em;
}
body.rd-p-contact .ct-courts .rd-courts{height:1.45em;color:var(--rd-white)}
body.rd-p-contact .ct-ask{display:block;color:var(--rd-white);font:650 17px/1.35 var(--rd-f-text)}
body.rd-p-contact .ct-row .rd-link{margin-top:2px}

/* ---------- the ticket ---------- */
body.rd-p-contact .ct-floor{min-width:0;padding:clamp(24px,4vw,56px) var(--rd-gut) clamp(36px,5vw,72px)}
body.rd-p-contact .ct-ticket{margin-inline:auto}
body.rd-p-contact .ct-ticket .rd-step > h2{font-size:var(--rd-fs-500)}
body.rd-p-contact .ct-ticket .rd-fields{align-items:end}
body.rd-p-contact .ct-ticket .rd-step{margin-top:30px}
body.rd-p-contact .ct-ticket .rd-step:first-child{margin-top:22px}
/* the first label after a step header sits close under it */
body.rd-p-contact .ct-ticket .rd-step + label,
body.rd-p-contact .ct-ticket .rd-step + .rd-fields > .rd-field:first-child label{margin-top:4px}
body.rd-p-contact .ct-opt{color:var(--rd-ink-2);font:600 14px/1.3 var(--rd-f-text);font-stretch:100%;letter-spacing:0;text-transform:none;white-space:nowrap}
body.rd-p-contact .ct-ticket textarea{display:block}
body.rd-p-contact .ct-ticket .form-success{padding:26px var(--rd-stub-x,16px) 34px}
body.rd-p-contact .ct-ticket .form-success .big{font-size:var(--rd-fs-700)}
/* tablets: the four facts sit two by two */
@media (min-width:640px) and (max-width:959.98px){
  body.rd-p-contact .ct-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--rd-gut)}
  body.rd-p-contact .ct-row:nth-child(2){border-top:0}
}
@media (min-width:640px){
  body.rd-p-contact .ct-f-email{grid-column:1 / -1}
  body.rd-p-contact .ct-ticket .rd-step + .rd-fields > .rd-field:nth-child(2) label{margin-top:4px}
}

/* ---------- from 960px: the column stands beside the ticket, as deep as the ticket ---------- */
@media (min-width:960px){
  body.rd-p-contact .rd-hero,
  body.rd-p-contact .ct-grid{grid-template-columns:minmax(0,34fr) minmax(0,66fr)}
  /* a narrow black block: the headline stacks and takes the size up */
  body.rd-p-contact .rd-hero h1{font-size:clamp(72px,8.1vw,116px);line-height:.88}
  body.rd-p-contact .rd-hero h1 .o:not(.rd-plain){display:block}

  body.rd-p-contact .ct-apron{display:flex;padding:0 clamp(24px,3vw,44px) 0 var(--rd-gut)}
  /* out of bounds runs on to the edge of the screen, as it does beside the hero */
  body.rd-p-contact .ct-apron::before{content:"";position:absolute;top:0;bottom:0;right:100%;width:50vw;background:var(--rd-ink);pointer-events:none}
  /* four cells: the label hangs from the rule and the value sits right under it. The spare height (the ticket is
     taller than the facts) is shared out between the cells, below each value, so the Practice & Play pointer
     stands at the foot of the column, level with the ticket's stub, and no single gap reads as a missing row */
  body.rd-p-contact .ct-rows{display:flex;flex-direction:column;justify-content:space-between;flex:1;min-width:0}
  body.rd-p-contact .ct-row{flex:0 0 auto;display:flex;flex-direction:column;justify-content:flex-start;gap:12px;padding:18px 0 24px}
  body.rd-p-contact .ct-rows dt{margin:0}
  /* the email in the same display face as Location and Facility, sized to fit the column */
  body.rd-p-contact .ct-email{font:400 clamp(21px,2.16vw,31px)/1.1 var(--rd-f-display);letter-spacing:.012em;overflow-wrap:anywhere;text-underline-offset:.24em}
  body.rd-p-contact .ct-rows dd.ct-big{font-size:clamp(44px,5vw,72px);line-height:.9}
  body.rd-p-contact .ct-courts{font-size:.43em;white-space:nowrap}
  body.rd-p-contact .ct-ask{font:400 clamp(26px,2.6vw,36px)/1 var(--rd-f-display);letter-spacing:.012em;text-transform:uppercase;margin-bottom:6px}
  /* the sideline: the same painted line as the hero zone's left edge, carried on down */
  body.rd-p-contact .ct-floor{
    padding:clamp(32px,3.4vw,48px) var(--rd-gut) clamp(40px,4.4vw,60px) clamp(28px,3.4vw,48px);
    border-left:var(--rd-lw) solid var(--rd-line);
  }
  body.rd-p-contact .ct-ticket{margin-inline:0;max-width:none}
}
/* a wide ticket: name, player and grade share one line; phone and email the next */
@media (min-width:1180px){
  body.rd-p-contact .ct-who{grid-template-columns:repeat(6,minmax(0,1fr))}
  body.rd-p-contact .ct-who > .rd-field{grid-column:span 2}
  body.rd-p-contact .ct-who > .rd-field:nth-child(n+4){grid-column:span 3}
  body.rd-p-contact .ct-ticket .rd-step + .ct-who > .rd-field:nth-child(3) label{margin-top:4px}
}

/* ---- 80-p-home.css ---- */
/* =====================================================================
   80-p-home.css — the home page (pages/index.html, <body class="rd-mkt rd-p-index">).
   Every rule is scoped body.rd-p-index. DESIGN.md section 7, "index — the court itself".

   The page, top to bottom:
     hero      black: folio, the tagline standing on the near baseline, then the scene —
               an apron of words (lede, the "Who's got next?" quiz, the facility ledger)
               beside the open floor where the play runs. On a phone the same pieces stack:
               tagline, lede, quiz chips, court, facility strip.
     results   the quiz answer, a black band under the scene (under the chips on a phone)
     lanes     black header band, then the eight offerings as rows on the floor
     up next   the scoreboard, three events rotating
     sponsors  one paper board lying on the floor
     news      black band, the sign-up line running its full width
     close     the far end of the floor, then the footer (shared)
   ===================================================================== */

/* ---------------------------------------------------------------------
   HERO
   --------------------------------------------------------------------- */
body.rd-p-index .rd-home-hero{position:relative;background-color:var(--rd-ink);color:var(--rd-white);--rd-ring:var(--rd-orange)}

/* the tagline is baseline lettering: one fitted line (three on a phone) at line-height .86,
   so the letters stand exactly on the painted line under them */
body.rd-p-index .rd-home-line{
  position:relative;container-type:inline-size;
  border-bottom:var(--rd-lw) solid var(--rd-line);border-image:var(--rd-baseline);
}
/* the near baseline is painted in once as the page opens (CSS only: the line is there without scripts,
   and it is simply there under reduced motion). A black cover slides off it, left to right. */
body.rd-p-index .rd-home-line::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:var(--rd-lw);background:var(--rd-ink);pointer-events:none;
  transform:scaleX(0);transform-origin:right;animation:rd-home-paint var(--rd-t-rule) var(--rd-ease-inout) .15s backwards;
}
@keyframes rd-home-paint{from{transform:scaleX(1)}to{transform:scaleX(0)}}
body.rd-p-index .rd-home-tag{
  box-sizing:border-box;max-width:var(--rd-max);margin:0 auto;padding:6px var(--rd-gut) 0;color:var(--rd-white);
  font:400 calc((min(100vw,var(--rd-max)) - 2 * var(--rd-gut)) / 4.0)/.86 var(--rd-f-display);
  font-size:calc((min(100cqw,var(--rd-max)) - 2 * var(--rd-gut)) / 4.0);
  letter-spacing:.004em;text-transform:uppercase;
}
/* phones, three lines: a little air between them (.94), and the half-leading under the last line is taken
   back so "Dominate." still stands on the paint */
body.rd-p-index .rd-home-tag{line-height:.94;margin-bottom:-.04em}
body.rd-p-index .rd-home-tag span{display:block}
body.rd-p-index .rd-home-tag .o{color:var(--rd-orange);background:none;padding:0}
@media (min-width:700px){
  body.rd-p-index .rd-home-tag{
    padding-top:4px;white-space:nowrap;line-height:.86;margin-bottom:0;
    font-size:calc((min(100vw,var(--rd-max)) - 2 * var(--rd-gut)) / 10.47);
    font-size:calc((min(100cqw,var(--rd-max)) - 2 * var(--rd-gut)) / 10.47);
  }
  body.rd-p-index .rd-home-tag span{display:inline}
}

/* ---- the scene ---- */
body.rd-p-index .rd-home-scene{display:flex;flex-direction:column;max-width:var(--rd-max);margin:0 auto}
body.rd-p-index .rd-home-apron{display:contents}
body.rd-p-index .rd-home-lede{
  order:1;margin:0;padding:14px var(--rd-gut) 0;max-width:36em;color:var(--rd-chalk);
  font:500 16px/1.42 var(--rd-f-text);
}
body.rd-p-index .rd-home-lede b{color:var(--rd-white);font-weight:700}

/* the quiz: step 1 is always on the first screen */
body.rd-p-index .rd-home-quiz{order:2;padding:14px var(--rd-gut) 16px}
body.rd-p-index .rd-home-quiz .rd-kicker{display:none;color:var(--rd-chalk)}
body.rd-p-index .rd-home-q{
  margin:0 0 9px;color:var(--rd-white);
  font:400 24px/1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase;
}
body.rd-p-index .rd-home-goal{margin-top:16px}
body.rd-p-index .rd-home-quiz .rd-chips > button{-webkit-appearance:none;appearance:none}
/* phones: the four grades as an even 2 x 2, the same switch as the desktop apron */
body.rd-p-index .rd-home-who{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body.rd-p-index .rd-home-who > button{min-height:48px;padding:6px 8px;font-size:16px;white-space:nowrap}
body.rd-p-index #fitGoal > button{padding-inline:8px;font-size:15.5px;line-height:1.15}

body.rd-p-index .rd-home-browse{display:none}

/* the floor. A zone never auto-margins inside a grid or flex box. */
body.rd-p-index .rd-home-floor{
  order:4;max-width:none;margin:0;
  min-height:calc(var(--rd-ft,10.5) * 28.8px + var(--rd-cap-h));
}

/* the facility: three facts, and the whole strip is the way in to About */
body.rd-p-index .rd-home-gym{
  order:5;display:block;padding:14px var(--rd-gut) 18px;color:var(--rd-white);text-decoration:none;
  border-top:var(--rd-lw) solid var(--rd-line);
  -webkit-tap-highlight-color:transparent;
}
body.rd-p-index .rd-home-gym-label{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;color:var(--rd-chalk);
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
body.rd-p-index .rd-home-gym-label b{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--rd-white);transition:color var(--rd-t-hover)}
body.rd-p-index .rd-home-gym-label svg{flex:none;transition:transform var(--rd-t-hover) var(--rd-ease-out)}
body.rd-p-index .rd-home-gym .rd-stats{display:grid;grid-template-columns:auto auto auto;justify-content:space-between;border-top:1px solid var(--rd-on-dark-rule)}
body.rd-p-index .rd-home-gym .rd-stat{padding:10px 10px 0;border-top:0}
body.rd-p-index .rd-home-gym .rd-stat:first-child{padding-left:0}
body.rd-p-index .rd-home-gym .rd-stat:last-child{padding-right:0}
body.rd-p-index .rd-home-gym .rd-stat > span{white-space:nowrap;letter-spacing:.07em}
@media (max-width:379.98px){
  /* a small phone has no room for the courts glyph or a one-line label */
  body.rd-p-index .rd-home-gym .rd-stat > span{white-space:normal;max-width:7.5em}
}
@media (hover:hover){
  body.rd-p-index .rd-home-gym:hover .rd-home-gym-label b{color:var(--rd-orange)}
  body.rd-p-index .rd-home-gym:hover .rd-home-gym-label svg{transform:translateX(4px)}
}
body.rd-p-index .rd-home-gym:focus-visible{outline-offset:-4px}

@media (min-width:700px) and (max-width:959.98px){
  body.rd-p-index .rd-home-lede{font-size:18px;padding-top:20px}
  body.rd-p-index .rd-home-quiz{padding-top:18px;padding-bottom:24px}
  body.rd-p-index .rd-home-who{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:620px}
  body.rd-p-index #fitGoal{grid-template-columns:repeat(4,minmax(0,1fr))}
  body.rd-p-index .rd-home-gym .rd-stats{justify-content:start}
}

@media (min-width:960px){
  body.rd-p-index .rd-home-scene{
    display:grid;grid-template-columns:clamp(300px,25.4vw,410px) minmax(0,1fr);
  }
  body.rd-p-index .rd-home-apron{display:flex;flex-direction:column;min-width:0;padding:18px 28px 16px var(--rd-gut)}
  body.rd-p-index .rd-home-lede{order:0;padding:0;font-size:17px;line-height:1.45}
  body.rd-p-index .rd-home-quiz{order:0;padding:16px 0 0}
  body.rd-p-index .rd-home-quiz .rd-kicker{display:flex}
  body.rd-p-index .rd-home-q{margin:9px 0 10px;font-size:25px}
  body.rd-p-index .rd-home-goal .rd-home-q{margin-top:0}
  body.rd-p-index .rd-home-who{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  body.rd-p-index .rd-home-who > button{padding:8px 10px;font-size:16px}
  body.rd-p-index .rd-home-browse{display:inline-flex;align-self:flex-start;margin:6px 0 0}
  body.rd-p-index .rd-home-floor{
    order:0;border-left:var(--rd-lw) solid var(--rd-line);
    min-height:max(calc(var(--rd-ft) * 27.6px + var(--rd-cap-h)),500px);
  }
  body.rd-p-index .rd-home-gym{order:0;margin-top:auto;padding:14px 0 0;border-top:0}
  body.rd-p-index .rd-home-gym-label{margin-bottom:8px;font-size:11px;letter-spacing:.13em}
  body.rd-p-index .rd-home-gym .rd-stats{display:block;border-top:0}
  body.rd-p-index .rd-home-gym .rd-stat{border-top:1px solid var(--rd-on-dark-rule)}
  body.rd-p-index .rd-home-gym .rd-stat,
  body.rd-p-index .rd-home-gym .rd-stat:first-child,
  body.rd-p-index .rd-home-gym .rd-stat:last-child{padding:6px 0 4px}
  body.rd-p-index .rd-home-gym .rd-stat b{font-size:clamp(40px,3.5vw,52px)}
  body.rd-p-index .rd-home-gym .rd-stat > span{white-space:normal;letter-spacing:.14em}
}
/* a narrow apron and a narrow rail (960–1179px): the label keeps to one line, the legend makes room for the play's name */
@media (min-width:960px) and (max-width:1179.98px){
  body.rd-p-index .rd-home-gym-label > span{display:none}
  body.rd-p-index .rd-home-floor .rd-legend{display:none}
}

/* ---------------------------------------------------------------------
   QUIZ RESULTS — a black band of rows; the first is the best match
   --------------------------------------------------------------------- */
body.rd-p-index .rd-home-results{
  display:none;order:3;padding:6px var(--rd-gut) 26px;
  scroll-margin:calc(var(--rd-nav-h) + 12px) 0 calc(var(--rd-strip-h,0px) + 16px);
}
body.rd-p-index .rd-home-results.show{display:block;animation:none}
body.rd-p-index .rd-home-results-h{
  margin:0 0 12px;padding-top:16px;border-top:1px solid var(--rd-on-dark-rule);color:var(--rd-white);
  font:400 25px/1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase;
}
body.rd-p-index .rd-home-recs{display:block;border-bottom:2px solid var(--rd-line)}
body.rd-p-index .rd-home-recs .rec{
  position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:10px;align-items:start;
  padding:16px 0 16px;border:0;border-top:2px solid var(--rd-line);border-radius:0;background:none;
  color:var(--rd-white);text-decoration:none;box-shadow:none;transform:none;
  -webkit-tap-highlight-color:transparent;
}
body.rd-p-index .rd-home-recs .rec-no{grid-column:1;grid-row:1 / span 4;padding-top:3px;color:var(--rd-chalk);font:400 17px/1 var(--rd-f-display);letter-spacing:.02em}
body.rd-p-index .rd-home-recs .best{
  grid-column:2;justify-self:start;margin:0 0 8px;padding:4px 8px 3px;border-radius:0;background:var(--rd-orange);color:var(--rd-ink);
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
body.rd-p-index .rd-home-recs h3{
  grid-column:2;margin:0;color:var(--rd-white);
  font:400 34px/.96 var(--rd-f-display);letter-spacing:.006em;text-transform:uppercase;
}
body.rd-p-index .rd-home-recs .rec--best h3{font-size:clamp(44px,12.6vw,54px);line-height:.92}
body.rd-p-index .rd-home-recs p{grid-column:2;margin:8px 0 0;max-width:34em;color:var(--rd-chalk);font:500 16.5px/1.45 var(--rd-f-text)}
body.rd-p-index .rd-home-recs .rec-go{
  grid-column:2;display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:4px;color:var(--rd-white);
  font:800 13px/1 var(--rd-f-text);font-stretch:116%;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:underline;text-decoration-color:var(--rd-orange);text-decoration-thickness:3px;text-underline-offset:7px;
  transition:color var(--rd-t-hover);
}
body.rd-p-index .rd-home-recs .rec-go svg{flex:none;transition:transform var(--rd-t-hover) var(--rd-ease-out)}
@media (hover:hover){
  body.rd-p-index .rd-home-recs .rec:hover h3,
  body.rd-p-index .rd-home-recs .rec:hover .rec-go{color:var(--rd-orange)}
  body.rd-p-index .rd-home-recs .rec:hover .rec-go svg{transform:translateX(5px)}
}
body.rd-p-index .rd-home-recs .rec:focus-visible{outline-offset:-3px}
@media (min-width:960px){
  body.rd-p-index .rd-home-results{
    order:0;grid-column:1 / -1;padding:0 var(--rd-gut) 34px;
    border-top:var(--rd-lw) solid var(--rd-line);
  }
  @media (min-width:1400px){
    body.rd-p-index .rd-home-results{margin-inline:-4px;padding-inline:calc(var(--rd-gut) + 4px)}
  }
  body.rd-p-index .rd-home-results-h{padding-top:26px;border-top:0;margin-bottom:16px;font-size:var(--rd-fs-500)}
  body.rd-p-index .rd-home-recs .rec{
    grid-template-columns:52px minmax(0,5fr) minmax(0,6fr) auto;column-gap:20px;align-items:center;padding:16px 0 14px;
  }
  body.rd-p-index .rd-home-recs .rec-no{grid-row:1 / span 2;align-self:start;font-size:20px;padding-top:4px}
  body.rd-p-index .rd-home-recs .best{grid-row:1;margin-bottom:8px}
  body.rd-p-index .rd-home-recs h3{grid-row:2;font-size:var(--rd-fs-600)}
  body.rd-p-index .rd-home-recs .rec:not(.rec--best) h3{grid-row:1 / span 2}
  body.rd-p-index .rd-home-recs .rec--best h3{font-size:var(--rd-fs-700);line-height:.9}
  body.rd-p-index .rd-home-recs p{grid-column:3;grid-row:1 / span 2;margin:0;font-size:17px}
  body.rd-p-index .rd-home-recs .rec-go{grid-column:4;grid-row:1 / span 2;margin:0}
}

/* ---------------------------------------------------------------------
   FIND YOUR LANE
   --------------------------------------------------------------------- */
body.rd-p-index .rd-home-lanes-band{padding:clamp(26px,3.6vw,46px) 0 clamp(26px,3.4vw,42px)}
body.rd-p-index .rd-home-lanes-band .rd-h2{font-size:clamp(54px,6.6vw,92px);line-height:.88}
body.rd-p-index .rd-home-lanes-band p:not([class]){margin-top:0}
body.rd-p-index .rd-home-back{margin:10px 0 0}
body.rd-p-index .rd-home-lanes{padding-top:clamp(22px,3vw,40px);padding-bottom:clamp(20px,2.6vw,34px)}
/* fact tags break between facts, never inside one */
body.rd-p-index .rd-lane-facts > span:not(:has(.rd-fmt)){margin-right:.35em}
/* phones: both format tokens stand on their own line */
body.rd-p-index .rd-lane-facts > span:has(.rd-fmt){display:block;margin:0}
@media (min-width:960px){
  body.rd-p-index .rd-lane-facts > span:has(.rd-fmt){display:inline-block;margin-right:22px}
  body.rd-p-index .rd-lane--big .rd-lane-facts{margin-top:14px}
}
/* mid-card rows: the name stands straight under its tag, level with the sentence beside it */
@media (min-width:960px){
  body.rd-p-index .rd-lanes-mid .rd-lane{align-items:start}
  body.rd-p-index .rd-lanes-mid .rd-lane-name{align-self:start;margin-top:6px}
  body.rd-p-index .rd-lanes-mid .rd-lane-desc{margin-top:10px}
  body.rd-p-index .rd-lanes-mid .rd-lane-arrow{align-self:center}
}
/* the other ways in: a fact-tag line under the list */
body.rd-p-index .rd-home-more{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;margin:12px 0 0;color:var(--rd-ink)}
body.rd-p-index .rd-home-more > span{
  flex:1 1 100%;margin-bottom:-4px;color:var(--rd-ink-2);
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;
}
@media (min-width:640px){ body.rd-p-index .rd-home-more > span{flex:none;margin:0} }
body.rd-p-index .rd-home-more a{
  display:inline-flex;align-items:center;min-height:44px;color:var(--rd-ink);
  text-decoration:underline;text-decoration-color:var(--rd-ink);text-decoration-thickness:2px;text-underline-offset:5px;
}
body.rd-p-index .rd-home-more a:hover{text-decoration-thickness:4px}

/* ---------------------------------------------------------------------
   UP NEXT — the scoreboard, three events on one track
   --------------------------------------------------------------------- */
body.rd-p-index .rd-home-next{padding-top:clamp(20px,2.8vw,34px)}
body.rd-p-index .rd-home-rot{position:relative;overflow:hidden;border-radius:0}
body.rd-p-index .rd-home-track{display:flex;align-items:stretch;transition:transform var(--rd-t-wipe) var(--rd-ease-out)}
body.rd-p-index .rd-home-slide{flex:0 0 100%;min-width:0;display:flex;flex-direction:column}
body.rd-p-index .rd-home-slide[aria-hidden="true"]{pointer-events:none}
body.rd-p-index .rd-home-slide .rd-board-label{min-height:20px}
body.rd-p-index .rd-home-slide .rd-board-main{
  flex:1 1 auto;container-type:inline-size;
  /* the three slides share one height: the spare room goes under the title, so the cells and the
     button stay in the same place as the board changes */
  grid-template-rows:auto minmax(0,1fr) auto auto;
}
/* the date stub on a phone: one strip, the date on one line */
body.rd-p-index .rd-home-slide .rd-stub{align-self:start}
body.rd-p-index .rd-home-slide .rd-stub .rd-home-to{display:none}
/* the title: as big as its longest word allows on a phone, never wider than the board */
body.rd-p-index .rd-home-slide .rd-board-title{
  font-size:min(clamp(58px,17.6vw,76px), calc((100vw - 2 * var(--rd-gut)) / var(--rd-home-wem,6) * .98));
  font-size:min(clamp(58px,17.6vw,76px), calc(100cqw / var(--rd-home-wem,6) * .98));
}
body.rd-p-index .rd-home-slide--plain .rd-board-title{font-size:clamp(58px,17.6vw,76px)}
/* the cells: the numbers keep one size on every slide, the details cell takes what is left of the row */
body.rd-p-index .rd-home-slide .rd-cells{align-self:start;margin-top:18px}
body.rd-p-index .rd-home-slide .rd-cell{flex:1 1 30%}
body.rd-p-index .rd-home-slide .rd-cell dd{font-size:clamp(40px,11.4vw,48px)}
@media (max-width:359.98px){
  /* three cells across a 320px screen: "$400" has to fit its cell */
  body.rd-p-index .rd-home-slide .rd-cell{padding-inline:8px}
  body.rd-p-index .rd-home-slide .rd-cell dd{font-size:35px}
}
/* member pricing on: the member price is a short line under the big number. Three cells share a phone's width
   (a cell has 90px of room at 390, 80px at 360, 75px at 320) and four share a small tablet's, so the line is set
   narrow and small enough that "members $400" always fits its cell: it must never be cut to "members $4". */
@media (max-width:819.98px){
  html:not(#rd) body.rd-p-index .rd-home-slide .rd-cell dd > .ign-member-price{
    margin-top:7px;font-size:13px;line-height:1.2;font-stretch:86%;letter-spacing:0;
  }
  html:not(#rd) body.rd-p-index .rd-home-slide .rd-cell dd > .ign-member-price::before{width:6px;height:6px;margin-right:5px;vertical-align:.08em}
}
/* the narrowest desktop board (the date stub takes the left column, so the cells are tablet-sized again) */
@media (min-width:960px) and (max-width:1099.98px){
  html:not(#rd) body.rd-p-index .rd-home-slide .rd-cell dd > .ign-member-price{font-size:13.5px;font-stretch:88%}
  html:not(#rd) body.rd-p-index .rd-home-slide .rd-cell dd > .ign-member-price::before{width:6px;height:6px;margin-right:5px}
}
@media (max-width:639.98px){
  html:not(#rd) body.rd-p-index .rd-home-slide .rd-cell dd > .ign-member-price{font-size:12.5px;font-stretch:84%}
  html:not(#rd) body.rd-p-index .rd-home-slide .rd-cell dd > .ign-member-price::before{width:5px;height:5px;margin-right:4px;vertical-align:.1em}
}
@media (max-width:379.98px){
  html:not(#rd) body.rd-p-index .rd-home-slide .rd-cell dd > .ign-member-price{font-size:12px;font-stretch:80%}
  html:not(#rd) body.rd-p-index .rd-home-slide .rd-cell dd > .ign-member-price::before{width:4px;height:4px;margin-right:3px;vertical-align:.14em}
}
@media (max-width:359.98px){
  html:not(#rd) body.rd-p-index .rd-home-slide .rd-cell dd > .ign-member-price{font-stretch:84%}
  html:not(#rd) body.rd-p-index .rd-home-slide .rd-cell dd > .ign-member-price::before{content:none}
}
/* a price range ("$400–$500") gets a row of its own on a phone */
body.rd-p-index .rd-home-slide .rd-home-cell--long{flex-basis:100%}
body.rd-p-index .rd-home-slide .rd-home-details{display:flex;flex-direction:column;flex:1 1 100%;padding-bottom:11px}
body.rd-p-index .rd-home-slide .rd-home-details dd{
  display:flex;flex-wrap:wrap;gap:2px 20px;margin-top:auto;padding-top:7px;white-space:normal;color:var(--rd-white);
  font:500 14.5px/1.45 var(--rd-f-mono);letter-spacing:.05em;text-transform:uppercase;font-variant-numeric:normal;
}
body.rd-p-index .rd-home-slide .rd-home-details dd span{white-space:nowrap}
/* one short note with no figures in it ("Weekend event") is set like the board's message panel */
body.rd-p-index .rd-home-slide .rd-home-details--big dd{
  font:400 clamp(26px,2.6vw,38px)/.96 var(--rd-f-display);letter-spacing:.012em;
}
body.rd-p-index .rd-home-slide .rd-home-details--big dd span{white-space:normal;text-wrap:balance}
body.rd-p-index .rd-home-slide .rd-board-go{align-self:end;margin-top:16px}
/* the ring sits inside the slab: the track clips anything outside it */
body.rd-p-index .rd-home-slide .rd-board-go:focus-visible{outline-color:var(--rd-ink);outline-offset:-6px}
body.rd-p-index .rd-home-plain{max-width:34em;margin:14px 0 0;color:var(--rd-chalk);font:500 17px/1.5 var(--rd-f-text)}
body.rd-p-index .rd-board-controls[hidden]{display:none}
body.rd-p-index .rd-board-arrow svg{display:block}
/* tablets: the title on one line, the cells in one row */
@media (min-width:640px) and (max-width:959.98px){
  body.rd-p-index .rd-home-slide .rd-board-title{
    margin-top:14px;white-space:nowrap;text-wrap:nowrap;line-height:.86;
    font-size:min(13.4vw, calc((100vw - 2 * var(--rd-gut)) / var(--rd-home-em,7) * .985));
    font-size:min(13.4vw, calc(100cqw / var(--rd-home-em,7) * .985));
  }
  body.rd-p-index .rd-home-slide .rd-cells{flex-wrap:nowrap}
  body.rd-p-index .rd-home-slide .rd-cell{flex:1 1 0}
  body.rd-p-index .rd-home-slide .rd-cell dd{font-size:clamp(48px,7.4vw,64px)}
  body.rd-p-index .rd-home-slide .rd-home-cell--long{flex:1.5 1 0}
  body.rd-p-index .rd-home-slide .rd-home-cell--long dd{font-size:clamp(36px,5.4vw,48px)}
  body.rd-p-index .rd-home-slide .rd-home-details{flex:2 1 0}
  body.rd-p-index .rd-home-slide .rd-home-details:not(.rd-home-details--big) dd{font-size:15px}
  body.rd-p-index .rd-home-slide .rd-home-details--big dd{font-size:clamp(26px,3.6vw,34px)}
}
@media (min-width:960px){
  body.rd-p-index .rd-home-slide .rd-board-label{min-height:44px}
  body.rd-p-index .rd-home-slide .rd-board-main{
    --rd-home-stub:clamp(184px,16.4vw,232px);--rd-home-gap:clamp(24px,3vw,44px);
    grid-template-columns:var(--rd-home-stub) minmax(0,1fr);column-gap:var(--rd-home-gap);
    grid-template-rows:calc(var(--rd-fs-900) * .86) auto minmax(0,1fr) auto;margin-top:10px;
  }
  body.rd-p-index .rd-home-slide--plain .rd-board-main{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr)}
  body.rd-p-index .rd-home-slide--plain .rd-board-main > *{grid-column:1}
  /* the stub: a tall ticket end. One day = the month over a big day number; a long run = the two dates, spread */
  body.rd-p-index .rd-home-slide .rd-stub{align-self:stretch;min-width:0;font-size:clamp(46px,4.4vw,64px)}
  /* between the two dates, a painted word, not a lone dash (which read as a stray rule) */
  body.rd-p-index .rd-home-slide .rd-stub i{
    flex:none;margin:auto 0;padding:0 0 0 .14em;color:var(--rd-ink);
    font:800 13px/1 var(--rd-f-text);font-stretch:125%;letter-spacing:.18em;text-transform:uppercase;
  }
  body.rd-p-index .rd-home-slide .rd-stub .rd-home-dash{display:none}
  body.rd-p-index .rd-home-slide .rd-stub .rd-home-to{display:inline}
  body.rd-p-index .rd-home-day{font-size:2.5em;line-height:.9;letter-spacing:0}
  /* one line, sized from the width of the words: every title stands on the same baseline */
  body.rd-p-index .rd-home-slide .rd-board-title{
    align-self:end;margin:0;white-space:nowrap;text-wrap:nowrap;line-height:.86;
    font-size:min(var(--rd-fs-900), calc((min(100vw,var(--rd-max)) - 2 * var(--rd-gut) - var(--rd-home-stub) - var(--rd-home-gap)) / var(--rd-home-em,7) * .985));
    font-size:min(var(--rd-fs-900), calc((100cqw - var(--rd-home-stub) - var(--rd-home-gap)) / var(--rd-home-em,7) * .985));
  }
  body.rd-p-index .rd-home-slide--plain .rd-board-title{align-self:start;font-size:var(--rd-fs-900);white-space:normal}
  body.rd-p-index .rd-home-slide--plain .rd-home-plain{font-size:19px}
  body.rd-p-index .rd-home-slide--plain .rd-board-go{align-self:start;margin-top:22px}
  body.rd-p-index .rd-home-slide .rd-cells{flex-wrap:nowrap;margin-top:24px}
  body.rd-p-index .rd-home-slide .rd-cell{flex:1 1 0}
  body.rd-p-index .rd-home-slide .rd-cell dd{font-size:clamp(56px,5.7vw,84px)}
  body.rd-p-index .rd-home-slide .rd-home-cell--long{flex:1.3 1 0}
  body.rd-p-index .rd-home-slide .rd-home-cell--long dd{font-size:clamp(44px,4.7vw,68px);padding-top:.14em}
  body.rd-p-index .rd-home-slide .rd-home-details{flex:2.2 1 0;padding-bottom:13px}
  body.rd-p-index .rd-home-slide .rd-cell--clock:nth-last-child(2) ~ .rd-home-details{flex-grow:2}
  body.rd-p-index .rd-home-slide .rd-home-details:not(.rd-home-details--big) dd{font-size:16px;gap:3px 28px}
  body.rd-p-index .rd-home-slide .rd-home-details--big dd{font-size:clamp(26px,2.6vw,38px)}
  body.rd-p-index .rd-home-slide .rd-board-go{margin-top:14px}
  /* the arrows and dots sit on the label row, top right, so the board ends on its button */
  body.rd-p-index .rd-board-controls{position:absolute;right:0;top:0;margin:0}
}

/* ---------------------------------------------------------------------
   SPONSORS — one paper board lying on the floor
   --------------------------------------------------------------------- */
body.rd-p-index .rd-home-sp{display:grid;grid-template-columns:minmax(0,1fr)}
body.rd-p-index .rd-home-sp-text{
  position:relative;z-index:1;padding:clamp(20px,2.6vw,34px) clamp(18px,2.4vw,32px) clamp(22px,2.6vw,34px);
  background:var(--rd-paper);color:var(--rd-ink);border:2px solid var(--rd-ink);
}
body.rd-p-index .rd-home-sp-text .rd-kicker{color:var(--rd-ink-2)}
body.rd-p-index .rd-home-sp-text .rd-h2{margin-top:12px}
body.rd-p-index .rd-home-sp-text > p:not([class]){margin:16px 0 0;max-width:30em;color:var(--rd-ink);font:500 17px/1.5 var(--rd-f-text)}
body.rd-p-index .rd-home-sp-text .rd-btns{margin-top:20px}
body.rd-p-index .rd-home-sp .rd-logos{margin-top:-2px}
body.rd-p-index .rd-home-sp .rd-logo--add{flex-direction:column}
@media (min-width:960px){
  body.rd-p-index .rd-home-sp{grid-template-columns:minmax(0,5fr) minmax(0,8fr);align-items:stretch}
  body.rd-p-index .rd-home-sp-text{display:flex;flex-direction:column}
  body.rd-p-index .rd-home-sp-text .rd-btns{margin-top:auto;padding-top:22px}
  body.rd-p-index .rd-home-sp-text .rd-btns > .rd-btn{flex:1 1 100%}
  body.rd-p-index .rd-home-sp .rd-logos{margin:0 0 0 -2px;padding-left:0;grid-auto-rows:1fr}
  body.rd-p-index .rd-home-sp .rd-logo{aspect-ratio:auto;min-height:clamp(130px,12.5vw,176px);margin-left:0;margin-right:-2px}
  body.rd-p-index .rd-home-sp .rd-logos{padding-right:2px}
}

/* ---------------------------------------------------------------------
   NEWSLETTER — a black band; the sign-up line runs its full width
   --------------------------------------------------------------------- */
body.rd-p-index .rd-home-news > .rd-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
body.rd-p-index .rd-home-news p:not([class]){margin:14px 0 0}
body.rd-p-index .rd-home-mail{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:22px 0 0;max-width:none}
body.rd-p-index .rd-home-mail .rd-input{height:60px;font-size:18px}
body.rd-p-index .rd-home-mail .rd-btn{min-height:60px;font-size:15px}
body.rd-p-index .rd-home-mail > p{margin:0;color:var(--rd-orange);font:400 var(--rd-fs-500)/1.1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase}
@media (min-width:640px){
  body.rd-p-index .rd-home-mail{grid-template-columns:minmax(0,1fr) auto;gap:0}
  body.rd-p-index .rd-home-mail .rd-btn{padding-inline:clamp(26px,4vw,56px)}
}
@media (min-width:960px){
  body.rd-p-index .rd-home-news > .rd-wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(24px,4vw,64px);align-items:end}
  body.rd-p-index .rd-home-news p:not([class]){margin:0 0 .3em}
  body.rd-p-index .rd-home-mail{grid-column:1 / -1;margin-top:28px}
}

/* the far end of the floor follows the band directly */
body.rd-p-index .rd-floor--close{margin-top:0}

@media (prefers-reduced-motion:reduce){
  body.rd-p-index .rd-home-track{transition:none}
}

/* ---- 80-p-leagues-hub.css ---- */
/* =====================================================================
   80-p-leagues-hub.css — /leagues/  "the season board"   (pages/leagues/index.html)
   Every rule is scoped body.rd-p-leagues-hub.

   The idea: ONE painted line runs down the middle of the page. In the hero it is the sideline of the court
   zone; under the hero it is the half-court line of the board — half court (3v3) on its left, full court
   (5v5) on its right — and it ends in a T on the white line of the band that closes the board.
   On a phone there is no line: the five seasons are one list in date order, the two halves become a key.

   Page classes (all rd-lh-*):
     .rd-lh-board   the section: head band + grid          .rd-lh-head / -halves / -half(-name/-when/-count) / -glyph
     .rd-lh-grid    the tickets                            .rd-lh-tk (--3 half court, --5 full court), -stub-foot
     .rd-lh-fees    the two prices on a ticket's stub      .rd-lh-go   the Register slab (the ticket's name is the link)
     .rd-lh-ways    the sixth square: who can register     .rd-lh-portal / -cells(-go) / -portal-note   the band that closes the board
   ===================================================================== */

body.rd-p-leagues-hub{--rd-lh-gap:clamp(40px,5.6vw,80px)}

/* ---------- hero ---------- */
body.rd-p-leagues-hub .rd-hero-text > .rd-stats{margin-top:26px}
@media (min-width:960px){
  /* 50 / 50, so the zone's painted edge is the same line as the board's half-court line under it */
  body.rd-p-leagues-hub .rd-hero{grid-template-columns:repeat(2,minmax(0,1fr));min-height:clamp(380px,36vw,520px)}
  body.rd-p-leagues-hub .rd-hero:not(.rd-hero--plain) .rd-hero-text{padding-right:calc(var(--rd-lh-gap) / 2)}
  body.rd-p-leagues-hub .rd-hero-text > .rd-stats{margin-top:30px}
}

/* ---------- the board ---------- */
body.rd-p-leagues-hub .rd-lh-board{position:relative}

/* head band: the two halves, named. On a phone it is the key for the tokens on the stubs. */
body.rd-p-leagues-hub .rd-lh-head{padding:2px 0 3px}
body.rd-p-leagues-hub .rd-lh-half{
  display:grid;grid-template-columns:54px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:12px;row-gap:5px;
  padding:14px 0 13px;
}
body.rd-p-leagues-hub .rd-lh-half + .rd-lh-half{border-top:1px solid var(--rd-on-dark-rule)}
body.rd-p-leagues-hub .rd-lh-glyph{display:block;width:auto;height:30px}
body.rd-p-leagues-hub .rd-lh-half > .rd-lh-glyph{grid-column:1;grid-row:1 / span 2;color:var(--rd-white)}
body.rd-p-leagues-hub .rd-lh-half-name{
  grid-column:2;grid-row:1;display:flex;align-items:center;gap:10px;margin:0;color:var(--rd-white);
  font:400 28px/.9 var(--rd-f-display);letter-spacing:.012em;text-transform:uppercase;white-space:nowrap;
}
body.rd-p-leagues-hub .rd-lh-half-name .rd-fmt{padding:4px 7px 2px;line-height:1}
body.rd-p-leagues-hub .rd-lh-half-when{grid-column:2;grid-row:2;margin:0;color:var(--rd-chalk);font-size:12px}
body.rd-p-leagues-hub .rd-lh-half-when span{white-space:nowrap}
body.rd-p-leagues-hub .rd-lh-half-count{
  grid-column:3;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin:0;color:var(--rd-chalk);
  font:800 11px/1.3 var(--rd-f-text);font-stretch:100%;letter-spacing:.08em;text-transform:uppercase;
}
body.rd-p-leagues-hub .rd-lh-half-count b{color:var(--rd-white);font:400 34px/.86 var(--rd-f-display);letter-spacing:.01em}
@media (max-width:479.98px){
  body.rd-p-leagues-hub .rd-lh-half-count{font-stretch:88%;letter-spacing:.05em}
}
@media (max-width:359.98px){
  body.rd-p-leagues-hub .rd-lh-half-name{font-size:22px;gap:7px}
}

/* the tickets */
body.rd-p-leagues-hub .rd-lh-grid{
  display:grid;grid-template-columns:minmax(0,1fr);gap:18px;
  padding:clamp(20px,3.2vw,44px) 0 clamp(28px,4.4vw,60px);
}
body.rd-p-leagues-hub .rd-lh-tk{margin:0;grid-template-rows:auto 1fr auto;--rd-notch:var(--rd-maple)}
body.rd-p-leagues-hub .rd-lh-stub-foot{display:flex;align-items:center;gap:10px;margin-left:auto;align-self:center}
body.rd-p-leagues-hub .rd-lh-stub-foot .rd-lh-glyph{height:22px;color:var(--rd-ink)}
body.rd-p-leagues-hub .rd-lh-stub-foot .rd-fmt{font-size:17px;line-height:1;padding:5px 8px 3px}
body.rd-p-leagues-hub .rd-lh-tk .rd-ticket-body > .rd-paint{display:flex;align-items:center;gap:10px;min-height:22px;margin-bottom:8px}
body.rd-p-leagues-hub .rd-lh-tk .rd-flag{margin:-2px 0;font-size:10.5px}
body.rd-p-leagues-hub .rd-lh-tk .rd-flag[hidden]{display:none}
body.rd-p-leagues-hub .rd-lh-tk .rd-ticket-body h3{font-size:clamp(34px,9.6vw,40px)}
/* the name is the ticket's one link: it covers the whole ticket, the Register slab answers the hover */
body.rd-p-leagues-hub .rd-lh-tk .rd-ticket-cover{color:inherit;outline:0}
body.rd-p-leagues-hub .rd-lh-tk .rd-ticket-cover::after{content:"";position:absolute;inset:-2px;z-index:2}
body.rd-p-leagues-hub .rd-lh-tk:has(.rd-ticket-cover:focus-visible){outline:3px solid var(--rd-ink);outline-offset:3px}
body.rd-p-leagues-hub .rd-lh-tk .rd-kv{margin-top:12px}
body.rd-p-leagues-hub .rd-lh-tk .rd-kv > div{padding:7px 0}
body.rd-p-leagues-hub .rd-lh-tk .rd-kv > div + div{border-top:1px solid var(--rd-rule)}
body.rd-p-leagues-hub .rd-lh-tk .rd-kv > div{flex-wrap:wrap}
body.rd-p-leagues-hub .rd-lh-tk .rd-kv dd{margin-left:auto;font-weight:700;white-space:nowrap}

body.rd-p-leagues-hub .rd-lh-fees{display:flex;margin:0;min-width:0}
body.rd-p-leagues-hub .rd-lh-fees > div{display:flex;flex-direction:column-reverse;padding:0 16px;border-left:1px solid var(--rd-rule-strong)}
body.rd-p-leagues-hub .rd-lh-fees > div:first-child{padding-left:0;border-left:0}
body.rd-p-leagues-hub .rd-lh-fees dd{
  margin:0;font:400 36px/1 var(--rd-f-display);letter-spacing:.01em;font-variant-numeric:tabular-nums;white-space:nowrap;
}
body.rd-p-leagues-hub .rd-lh-fees dt{margin-top:4px;color:var(--rd-ink-2);font:700 14px/1.2 var(--rd-f-text);white-space:nowrap}
body.rd-p-leagues-hub .rd-lh-go{flex:1 1 100%;min-height:52px}
@media (max-width:639.98px){
  /* a phone: labels set a little narrower so label, leader and value share one line */
  body.rd-p-leagues-hub .rd-lh-tk .rd-kv dt{font-stretch:108%;letter-spacing:.08em}
  body.rd-p-leagues-hub .rd-lh-tk .rd-kv dd{font-size:14.5px;letter-spacing:0}
  body.rd-p-leagues-hub .rd-lh-tk .rd-kv > div::before{min-width:8px}
}
@media (max-width:379.98px){
  body.rd-p-leagues-hub .rd-lh-stub-foot .rd-lh-glyph{display:none}
  body.rd-p-leagues-hub .rd-lh-fees dd{font-size:31px}
  body.rd-p-leagues-hub .rd-lh-fees > div{padding:0 12px}
}
@media (hover:hover){
  body.rd-p-leagues-hub .rd-lh-tk:hover .rd-lh-go{background:var(--rd-ink);color:var(--rd-white)}
  body.rd-p-leagues-hub .rd-lh-tk:hover .rd-lh-go svg{transform:translateX(4px)}
}
body.rd-p-leagues-hub .rd-lh-tk:active .rd-lh-go{background:var(--rd-orange-press);color:var(--rd-ink)}

/* the sixth square: who can register. Out of bounds, so it carries words. */
body.rd-p-leagues-hub .rd-lh-ways{display:flex;flex-direction:column;padding:18px 18px 4px}
body.rd-p-leagues-hub .rd-lh-ways ol{list-style:none;display:flex;flex-direction:column;flex:1;margin:14px 0 0;padding:0;counter-reset:rd-lh-way}
body.rd-p-leagues-hub .rd-lh-ways li{
  counter-increment:rd-lh-way;flex:1;display:grid;grid-template-columns:34px minmax(0,1fr);gap:6px 14px;align-content:center;
  padding:16px 0 18px;border-top:1px solid var(--rd-on-dark-rule);
}
body.rd-p-leagues-hub .rd-lh-ways li::before{
  content:counter(rd-lh-way,upper-alpha);grid-row:1 / span 2;align-self:start;display:grid;place-items:center;
  width:34px;height:34px;padding-top:1px;box-sizing:border-box;background:var(--rd-orange);color:var(--rd-ink);
  font:400 20px/1 var(--rd-f-display);
}
body.rd-p-leagues-hub .rd-lh-ways li b{
  font:400 clamp(34px,3.2vw,44px)/.94 var(--rd-f-display);letter-spacing:.006em;text-transform:uppercase;color:var(--rd-white);
}
body.rd-p-leagues-hub .rd-lh-ways li span{max-width:28em;color:var(--rd-chalk);font:500 17px/1.45 var(--rd-f-text)}

@media (min-width:640px){
  /* stub beside the body; the price stub tears off along the bottom */
  body.rd-p-leagues-hub .rd-lh-tk{grid-template-columns:172px minmax(0,1fr);grid-template-rows:1fr auto}
  body.rd-p-leagues-hub .rd-lh-tk .rd-ticket-stub{justify-content:flex-start;min-width:0;padding:18px 16px 18px 18px}
  body.rd-p-leagues-hub .rd-lh-stub-foot{flex-direction:column;align-items:flex-start;gap:12px;margin:auto 0 0;align-self:flex-start}
  body.rd-p-leagues-hub .rd-lh-stub-foot .rd-lh-glyph{height:34px}
  body.rd-p-leagues-hub .rd-lh-tk .rd-ticket-body h3{font-size:clamp(32px,2.9vw,42px)}
  body.rd-p-leagues-hub .rd-lh-tk .rd-ticket-price{
    grid-column:1 / -1;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;min-width:0;
    padding:14px 18px;border-left:0;border-top:2px dashed var(--rd-rule-strong);
  }
  body.rd-p-leagues-hub .rd-lh-tk .rd-ticket-price::before{left:-12px;top:-12px;clip-path:inset(0 0 0 50%)}
  body.rd-p-leagues-hub .rd-lh-tk .rd-ticket-price::after{left:auto;right:-12px;top:-12px;bottom:auto;clip-path:inset(0 50% 0 0)}
  body.rd-p-leagues-hub .rd-lh-go{flex:0 0 auto;align-self:auto;min-width:176px}
  body.rd-p-leagues-hub .rd-lh-ways{padding:22px 24px 6px}
}

@media (min-width:960px){
  /* the half-court line: from the hero's baseline, through the head band, down to the band that closes the board */
  body.rd-p-leagues-hub .rd-lh-board::after{
    content:"";position:absolute;z-index:1;left:50%;top:0;bottom:0;width:var(--rd-lw);background:var(--rd-line);pointer-events:none;
  }
  body.rd-p-leagues-hub .rd-lh-head{padding:0}
  body.rd-p-leagues-hub .rd-lh-halves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--rd-lh-gap)}
  body.rd-p-leagues-hub .rd-lh-half{grid-template-columns:auto minmax(0,1fr) auto;column-gap:18px;row-gap:7px;padding:22px 0 20px}
  body.rd-p-leagues-hub .rd-lh-half + .rd-lh-half{border-top:0}
  body.rd-p-leagues-hub .rd-lh-half > .rd-lh-glyph{height:58px}
  body.rd-p-leagues-hub .rd-lh-half-name{gap:14px;font-size:var(--rd-fs-600);letter-spacing:.006em}
  body.rd-p-leagues-hub .rd-lh-half-name .rd-fmt{padding:5px 9px 3px;font-size:24px}
  body.rd-p-leagues-hub .rd-lh-half-when{font-size:13px}
  body.rd-p-leagues-hub .rd-lh-half-count{gap:5px;font-size:10.5px;font-stretch:125%;letter-spacing:.14em}
  body.rd-p-leagues-hub .rd-lh-half-count b{font-size:54px}

  /* two halves; the DOM stays in date order, so reading across then down is the calendar */
  body.rd-p-leagues-hub .rd-lh-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--rd-lh-gap);row-gap:26px;grid-auto-flow:row dense;
  }
  body.rd-p-leagues-hub .rd-lh-tk--3,
  body.rd-p-leagues-hub .rd-lh-ways{grid-column:1}
  body.rd-p-leagues-hub .rd-lh-tk--5{grid-column:2}
}
/* 960–1279: two columns on a small laptop — the same ticket, set tighter */
@media (min-width:960px) and (max-width:1279.98px){
  body.rd-p-leagues-hub .rd-lh-tk{grid-template-columns:118px minmax(0,1fr)}
  body.rd-p-leagues-hub .rd-lh-tk .rd-ticket-stub{padding:16px 10px 16px 14px;font-size:27px}
  body.rd-p-leagues-hub .rd-lh-stub-foot .rd-lh-glyph{height:28px}
  body.rd-p-leagues-hub .rd-lh-tk .rd-ticket-body{padding:16px 16px 18px}
  body.rd-p-leagues-hub .rd-lh-tk .rd-ticket-body h3{font-size:clamp(28px,3.1vw,36px)}
  body.rd-p-leagues-hub .rd-lh-tk .rd-ticket-body > p:not(.rd-paint){font-size:16px}
  body.rd-p-leagues-hub .rd-lh-tk .rd-kv dt{font-stretch:108%;letter-spacing:.08em}
  body.rd-p-leagues-hub .rd-lh-tk .rd-kv dd{font-size:14px;letter-spacing:0}
  body.rd-p-leagues-hub .rd-lh-tk .rd-kv > div::before{min-width:8px}
  body.rd-p-leagues-hub .rd-lh-tk .rd-ticket-price{padding:12px 14px}
  body.rd-p-leagues-hub .rd-lh-fees dd{font-size:30px}
  body.rd-p-leagues-hub .rd-lh-fees > div{padding:0 12px}
  body.rd-p-leagues-hub .rd-lh-fees dt{font-size:13px}
  body.rd-p-leagues-hub .rd-lh-go{min-width:0;padding-inline:14px;gap:9px}
  body.rd-p-leagues-hub .rd-lh-half > .rd-lh-glyph{height:46px}
  body.rd-p-leagues-hub .rd-lh-half-name .rd-fmt{font-size:19px}
}

/* ---------- the band that closes the board: a scoreboard row that is one link to the league portal ---------- */
body.rd-p-leagues-hub .rd-lh-portal{padding-block:clamp(28px,4vw,52px) clamp(30px,4.2vw,56px)}
body.rd-p-leagues-hub .rd-lh-cells{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-top:16px;padding:2px;background:var(--rd-line);
  color:var(--rd-white);text-decoration:none;-webkit-tap-highlight-color:transparent;
}
body.rd-p-leagues-hub .rd-lh-cells > span{
  display:flex;align-items:flex-end;min-width:0;padding:22px 9px 9px;background:var(--rd-ink);
  font:400 clamp(18px,5.6vw,30px)/.9 var(--rd-f-display);letter-spacing:.01em;text-transform:uppercase;
}
body.rd-p-leagues-hub .rd-lh-cells > .rd-lh-cells-go{
  grid-column:1 / -1;align-items:center;justify-content:space-between;gap:14px;min-height:60px;padding:8px 16px;
  background:var(--rd-orange);color:var(--rd-ink);
  font:800 15px/1.15 var(--rd-f-text);font-stretch:116%;letter-spacing:.09em;
  transition:background-color var(--rd-t-hover);
}
body.rd-p-leagues-hub .rd-lh-cells-go svg{flex:none;transition:transform var(--rd-t-hover) var(--rd-ease-out)}
@media (hover:hover){
  body.rd-p-leagues-hub .rd-lh-cells:hover .rd-lh-cells-go{background:var(--rd-white)}
  body.rd-p-leagues-hub .rd-lh-cells:hover .rd-lh-cells-go svg{transform:translateX(6px)}
}
body.rd-p-leagues-hub .rd-lh-cells:active .rd-lh-cells-go{background:var(--rd-orange-press)}
body.rd-p-leagues-hub .rd-lh-portal-note{
  display:flex;flex-wrap:wrap;align-items:center;gap:2px 18px;max-width:none;margin:14px 0 0;color:var(--rd-chalk);font:500 17px/1.5 var(--rd-f-text);
}
@media (min-width:640px){
  body.rd-p-leagues-hub .rd-lh-cells > span{padding:34px 16px 12px;font-size:clamp(38px,5.2vw,50px)}
  body.rd-p-leagues-hub .rd-lh-cells > .rd-lh-cells-go{min-height:64px;padding:8px 18px;font-size:16px}
}
@media (min-width:960px){
  /* the orange cell stands at the end of the row, the same size as the other three */
  body.rd-p-leagues-hub .rd-lh-cells{grid-template-columns:repeat(4,minmax(0,1fr))}
  body.rd-p-leagues-hub .rd-lh-cells > span{padding:clamp(40px,5vw,72px) clamp(14px,1.6vw,22px) 14px;font-size:clamp(40px,4.5vw,64px)}
  body.rd-p-leagues-hub .rd-lh-cells > .rd-lh-cells-go{
    grid-column:auto;flex-direction:column-reverse;align-items:flex-start;justify-content:space-between;min-height:0;
    padding:16px clamp(14px,1.6vw,22px) 15px;font-size:clamp(14px,1.25vw,17px);
  }
  body.rd-p-leagues-hub .rd-lh-cells-go svg{align-self:flex-end;width:44px;height:auto}
  body.rd-p-leagues-hub .rd-lh-portal-note{justify-content:space-between}
}
body.rd-p-leagues-hub .rd-floor--close{margin-top:0}
/* the far end of the floor, a little deeper on a desktop so the page ends on a real court */
@media (min-width:960px){ body.rd-p-leagues-hub .rd-floor--close{height:clamp(380px,33vw,480px)} }

/* member pricing on: the member line sits under each fee, inside the cell, above its label */
html:not(#rd) body.rd-p-leagues-hub .rd-lh-fees dd .ign-member-price{margin:4px 0 2px;font-size:14px}
/* the smallest phones: a range ("members $400–$500") must not push the fee block past the ticket's edge */
@media (max-width:359.98px){
  html:not(#rd) body.rd-p-leagues-hub .rd-lh-fees dd .ign-member-price{font-size:12.5px;font-stretch:84%}
  html:not(#rd) body.rd-p-leagues-hub .rd-lh-fees dd .ign-member-price::before{width:5px;height:5px;margin-right:4px}
}

/* ---- 80-p-leagues.css ---- */
/* =====================================================================
   80-p-leagues.css — /leagues  (pages/leagues.html, body.rd-p-leagues)
   Layout idea: THE SEASON ON ONE LINE. From 960px the five league tickets
   hang on a twelve-month rail (Nov 2026 → Oct 2027): 5x5 above the line,
   3x3 below it, each joined to the rail by an orange tab that covers its
   real dates. Below 960px the same tickets stack in date order and each
   carries a small copy of the rail.
   Every rule is scoped body.rd-p-leagues.
   ===================================================================== */

/* the hero: a jump to the ticket flagged "Up next" (filled by the page script), then the two schedule buttons */
body.rd-p-leagues .lg-jump{align-self:flex-start;margin-top:14px;gap:10px;text-align:left}
body.rd-p-leagues .lg-jump[hidden]{display:none}
/* below 960px the tickets stack in date order, so the next league is already the first one under the court */
@media (max-width:959.98px){ body.rd-p-leagues .lg-jump{display:none} }
body.rd-p-leagues .lg-jump:hover svg{transform:translateY(3px)}
body.rd-p-leagues .rd-hero .rd-btns > .rd-btn{flex:1 1 220px}
/* from 960px the text column is too narrow for both on one row: stack them, one line each */
@media (min-width:960px){
  body.rd-p-leagues .rd-hero-text > .rd-btns{display:grid;grid-template-columns:minmax(0,1fr);max-width:400px;gap:10px;margin-top:20px}
}

body.rd-p-leagues .lg-season{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(64px,7vw,96px)}
body.rd-p-leagues .lg-year{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
body.rd-p-leagues .lg-year > .rd-ticket{margin:0;min-width:0}

/* ---- inside a league ticket ---- */
body.rd-p-leagues .lg-tk .rd-ticket-stub .rd-fmt{align-self:center;margin-right:.36em;font-size:17px;line-height:1.15}
body.rd-p-leagues .lg-tk .rd-ticket-body h3{font-size:clamp(32px,8.6vw,40px)}
body.rd-p-leagues .lg-next{display:none;margin:0 0 10px}
body.rd-p-leagues .lg-tk.is-next .lg-next{display:table}
/* the dates as receipt rows: one phrase per line, never broken inside a date */
body.rd-p-leagues .lg-dates{margin:12px 0 0;border-top:1px solid var(--rd-rule)}
body.rd-p-leagues .lg-dates .rd-slip-row{margin:0;padding:7px 0 5px;border-bottom:1px solid var(--rd-rule)}
body.rd-p-leagues .lg-dates .rd-slip-row > b{white-space:nowrap}
/* the smallest phones (under 360px): a label and its whole date do not fit one row, so the date takes the next line */
@media (max-width:359.98px){
  body.rd-p-leagues .lg-dates .rd-slip-row{flex-wrap:wrap;gap:1px 10px}
  body.rd-p-leagues .lg-dates .rd-slip-row::before{content:none}
  body.rd-p-leagues .lg-dates .rd-slip-row > b{flex:1 1 100%;text-align:left}
}
body.rd-p-leagues .lg-money{display:flex;flex-direction:column;min-width:0}
body.rd-p-leagues .lg-money .rd-price small{margin-left:.3em}
body.rd-p-leagues .lg-tk .rd-ticket-price{row-gap:4px}
body.rd-p-leagues .lg-tk .rd-ticket-price .rd-btn{flex:1 1 100%;margin-top:8px}
@media (min-width:640px){
  body.rd-p-leagues .lg-tk .rd-ticket-price .rd-btn{flex:0 0 auto;min-width:150px;margin-top:0}
}
body.rd-p-leagues .lg-sched{
  flex:1 1 100%;display:inline-flex;align-items:center;min-height:44px;color:var(--rd-ink);
  font:700 15px/1.3 var(--rd-f-text);text-decoration:underline;text-decoration-color:var(--rd-orange);
  text-decoration-thickness:2px;text-underline-offset:4px;
}
body.rd-p-leagues .lg-sched:hover{text-decoration-thickness:4px}

/* the small rail a ticket carries below 960px: twelve month cells, the league's dates as a bar on top */
body.rd-p-leagues .lg-mini{position:relative;margin:16px 0 0;padding-top:12px}
body.rd-p-leagues .lg-mini > i{
  position:absolute;top:0;left:var(--s);width:calc(var(--e) - var(--s));height:14px;box-sizing:border-box;
  background:var(--rd-orange);border:2px solid var(--rd-ink);
}
body.rd-p-leagues .lg-mini > i.is-eval{background:var(--rd-paper)}
body.rd-p-leagues .lg-mini > ol{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));list-style:none;margin:0;padding:0;
  background:var(--rd-ink);color:var(--rd-white);
}
body.rd-p-leagues .lg-mini li{
  padding:5px 0 4px;text-align:center;border-left:1px solid var(--rd-on-dark-rule);
  font:800 11px/1.2 var(--rd-f-text);font-stretch:110%;letter-spacing:.04em;
}
body.rd-p-leagues .lg-mini li:first-child{border-left:0}

/* ---- the notice and the key ---- */
body.rd-p-leagues .lg-aside{margin:0;min-width:0}
body.rd-p-leagues .lg-aside p{margin:0}
body.rd-p-leagues .lg-key{display:none;list-style:none;margin:0;padding:0}
body.rd-p-leagues .lg-rail{display:none}

/* ---------------------------------------------------------------------
   960px and up: the year rail
   --------------------------------------------------------------------- */
@media (min-width:960px){
  body.rd-p-leagues .lg-year{
    --lg-gap:34px;                        /* depth of the tab zone between a ticket and the month strip */
    --lg-strip:38px;
    grid-template-columns:repeat(3,minmax(0,1fr));column-gap:12px;row-gap:0;
  }
  body.rd-p-leagues .lg-tk--w5{grid-column:1;grid-row:1}
  body.rd-p-leagues .lg-tk--s5{grid-column:2;grid-row:1}
  body.rd-p-leagues .lg-tk--f5{grid-column:3;grid-row:1}
  body.rd-p-leagues .lg-rail{grid-column:1 / -1;grid-row:2}
  body.rd-p-leagues .lg-tk--f3{grid-column:1;grid-row:3}
  body.rd-p-leagues .lg-tk--s3{grid-column:2;grid-row:3}
  body.rd-p-leagues .lg-aside{grid-column:3;grid-row:3}
  body.rd-p-leagues .lg-mini{display:none}

  /* on the rail a ticket stands upright: date strip, body, price row */
  body.rd-p-leagues .lg-year > .rd-ticket{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto}
  body.rd-p-leagues .lg-tk .rd-ticket-stub{
    flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:0 .28em;min-width:0;
    padding:11px 18px 8px;border-right:0;border-bottom:2px dashed var(--rd-ink);
    font-size:clamp(23px,2.25vw,32px);line-height:1;
  }
  body.rd-p-leagues .lg-tk .rd-ticket-stub i{font-size:1em;margin:0}
  body.rd-p-leagues .lg-tk .rd-ticket-stub small{margin:0 0 0 auto;align-self:center}
  body.rd-p-leagues .lg-tk .rd-ticket-body{padding:18px 18px 20px}
  body.rd-p-leagues .lg-tk .rd-ticket-body h3{font-size:clamp(30px,3.05vw,44px)}
  body.rd-p-leagues .lg-tk .rd-ticket-price{
    flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;min-width:0;
    padding:14px 18px 8px;border-left:0;border-top:2px dashed var(--rd-rule-strong);
  }
  body.rd-p-leagues .lg-tk .rd-ticket-price::before{left:-12px;top:-12px;bottom:auto;clip-path:inset(0 0 0 50%)}
  body.rd-p-leagues .lg-tk .rd-ticket-price::after{left:auto;right:-12px;top:-12px;bottom:auto;clip-path:inset(0 50% 0 0)}
  body.rd-p-leagues .lg-tk .rd-ticket-price .rd-btn{align-self:center}

  /* the rail: [tab zone] [black month strip] [tab zone] */
  body.rd-p-leagues .lg-rail{
    display:block;position:relative;height:calc(var(--lg-gap) * 2 + var(--lg-strip));
  }
  body.rd-p-leagues .lg-months{
    position:absolute;left:0;right:0;top:var(--lg-gap);height:var(--lg-strip);
    display:grid;grid-template-columns:repeat(12,minmax(0,1fr));list-style:none;margin:0;padding:0;
    background:var(--rd-ink);color:var(--rd-white);
  }
  body.rd-p-leagues .lg-months li{
    display:flex;align-items:center;gap:7px;min-width:0;padding:1px 0 0 10px;border-left:1px solid var(--rd-on-dark-rule);
    font:800 11.5px/1 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  }
  body.rd-p-leagues .lg-months li:first-child{border-left:0}
  body.rd-p-leagues .lg-months li.is-year{border-left:3px solid var(--rd-line)}
  body.rd-p-leagues .lg-months li i{color:var(--rd-orange);font-style:normal;letter-spacing:.1em}

  /* a tab joins a ticket to the strip across the league's dates (2px overlaps so the borders read as one) */
  body.rd-p-leagues .lg-tab{
    position:absolute;left:var(--s);width:calc(var(--e) - var(--s));height:calc(var(--lg-gap) + 2px);box-sizing:border-box;
    background:var(--rd-orange);border:2px solid var(--rd-ink);
  }
  body.rd-p-leagues .lg-tab--5{top:-2px}
  body.rd-p-leagues .lg-tab--3{bottom:-2px}
  body.rd-p-leagues .lg-tab.is-eval{background:var(--rd-paper);width:calc(var(--e) - var(--s) + 2px)}

  /* which side of the line is which, written in the empty end of each tab zone */
  body.rd-p-leagues .lg-rail-lab{
    position:absolute;display:flex;align-items:center;gap:9px;height:var(--lg-gap);color:var(--rd-ink);
    font:800 11.5px/1 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  }
  body.rd-p-leagues .lg-rail-lab--5{top:0;left:0}
  body.rd-p-leagues .lg-rail-lab--3{bottom:0;right:0}

  /* third cell under the line: the note, with the key to the tabs at its foot */
  body.rd-p-leagues .lg-aside{display:flex;flex-direction:column;justify-content:space-between;padding:20px 22px 18px}
  body.rd-p-leagues .lg-aside p{font:500 clamp(17px,1.32vw,19px)/1.42 var(--rd-f-text)}
  body.rd-p-leagues .lg-aside p b{display:block;margin-bottom:.6em;font-weight:800;font-size:clamp(19px,1.5vw,22px);line-height:1.3;letter-spacing:-.005em}
  body.rd-p-leagues .lg-key{
    display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px;padding:14px 0 0;border-top:2px dashed var(--rd-rule-strong);color:var(--rd-ink);
    font:500 13px/1.4 var(--rd-f-mono);letter-spacing:.06em;text-transform:uppercase;
  }
  body.rd-p-leagues .lg-key li{display:flex;align-items:center;gap:9px}
  body.rd-p-leagues .lg-key i{flex:none;width:26px;height:14px;box-sizing:border-box;background:var(--rd-orange);border:2px solid var(--rd-ink)}
  body.rd-p-leagues .lg-key i.is-eval{background:var(--rd-paper)}
}
@media (min-width:960px) and (max-width:1139.98px){
  body.rd-p-leagues .lg-months li{padding-left:7px;font-size:10.5px;letter-spacing:.1em;font-stretch:112%}
  body.rd-p-leagues .lg-months li i{display:none}
  body.rd-p-leagues .lg-tk .rd-ticket-price .rd-btn{min-width:0;flex:1 1 100%}
}

/* the closing band */
@media (min-width:960px){
  body.rd-p-leagues .lg-squad .rd-btns{margin-top:20px}
}

/* ---- 80-p-membership.css ---- */
/* =====================================================================
   80-p-membership.css — /membership ("how a membership saves you money")
   A working page: its HTML is the live membership.html, this file is its Hardwood look.
   Every rule is scoped body:has(#memberSave) so it out-ranks the shared body:has(> nav.nav) rules.

   The court test: black = the words (hero, closing band) · maple = the floor · on the floor lie
   scoreboard cells (what a membership costs, when it is paid back), one paper receipt (the example)
   and one paper sheet (the price board).

   One system, four parts:
     .ms-k      THE label: paint caps, never under 12px (cell labels, column heads, key chips, bar labels)
     .ms-cell   THE cell: black, 2px painted rules, label / Anton value / words under it
                (--cost a year's price · --eg the hero example · --hatch "does not pay" · --gap Player or Family)
     .ms-bar    THE sheet head: a black bar with two labels (receipt, price board)
     .ms-tb     THE table: one per group, its black bar carries the group name and the three column heads

   Orange is spent on: the h1 phrase, 8px squares, the Save head cell (and its key chip), the one best
   line on the receipt, the closing button. Cost cells are black.
   ===================================================================== */

/* ---------- scope basics ---------- */
body:has(#memberSave) [hidden]{display:none !important}                      /* the script hides rows and wording with the hidden attribute */
body:has(#memberSave) [class^="ms-"],
body:has(#memberSave) [class*=" ms-"]{border-radius:0;box-shadow:none}        /* the page's own (pre-redesign) look rounds its boxes */
body:has(#memberSave) .ms-sec{--grey:var(--rd-ink-2);--grey-light:var(--rd-paper-2);--line:var(--rd-rule);--orange:var(--rd-ink)}
body:has(#memberSave) :is(.page-hero,.band){--grey:var(--rd-chalk);--line:var(--rd-on-dark-rule)}
body:has(#memberSave) [data-v],
body:has(#memberSave) .ms-nb{white-space:nowrap}                                /* an amount, a date or a hyphenated term ("1-on-1", "full-team") never breaks across two lines */
/* the skip link (keyboard only): one full-height orange cell at the left end of the bar, its ring drawn inside it */
body:has(#memberSave) .ms-skip{
  left:0;top:0;z-index:calc(var(--rd-z-nav) + 20);display:flex;align-items:center;height:var(--rd-nav-h);padding:0 20px;
  background:var(--rd-orange);color:var(--rd-ink);font:800 14px/1 var(--rd-f-text);
  --rd-ring:var(--rd-white);outline-offset:-6px;
}

/* ---------- THE label ---------- */
body:has(#memberSave) .ms-k{
  margin:0;color:var(--rd-ink-2);
  font:800 12px/1.3 var(--rd-f-text);font-stretch:90%;letter-spacing:.06em;text-transform:uppercase;
}
body:has(#memberSave) :is(.page-hero,.band) .kicker,
body:has(#memberSave) .section-head .kicker{font-size:12px}

/* ---------- THE cell ---------- */
body:has(#memberSave) .ms-cells{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;max-width:none;margin:0;padding:2px 0 0 2px;
}
body:has(#memberSave) .ms-cell{
  display:flex;flex-direction:column;min-width:0;margin:-2px 0 0 -2px;padding:11px 12px 12px;
  background:var(--rd-ink);color:var(--rd-white);border:2px solid var(--rd-line);
}
body:has(#memberSave) .ms-cell dd{margin:0}
body:has(#memberSave) .ms-cell .ms-k{color:var(--rd-chalk)}
body:has(#memberSave) .ms-cell .ms-v{
  margin:7px 0 0;color:inherit;white-space:nowrap;
  font:400 clamp(52px,15vw,58px)/.9 var(--rd-f-display);letter-spacing:.01em;text-transform:uppercase;font-variant-numeric:tabular-nums;
}
body:has(#memberSave) .ms-cell .ms-v small{color:var(--rd-chalk);font:700 15px/1 var(--rd-f-text);letter-spacing:0;text-transform:none;white-space:nowrap}
body:has(#memberSave) .ms-cell .ms-u{margin:8px 0 0;color:inherit;font:700 16px/1.25 var(--rd-f-text)}
body:has(#memberSave) .ms-cell .ms-u small{display:block;margin:1px 0 0;color:var(--rd-chalk);font:500 15px/1.3 var(--rd-f-text)}
body:has(#memberSave) .ms-cell .ms-x{
  margin:auto 0 0;padding:7px 0 0;color:var(--rd-chalk);white-space:normal;   /* a long sum ("150 x $10 = $1,500") may take two lines; no amount is ever split */
  font:500 15px/1.4 var(--rd-f-mono);letter-spacing:0;word-spacing:-.2em;
}
/* an amount of five characters or more ("$49.99", "$1,499"): the script marks its cell value, and it is set smaller
   so it keeps to its cell (today's $49 and $89 are never marked) */
body:has(#memberSave) .ms-cell .ms-v.ms-long{font-size:clamp(30px,8vw,44px)}
body:has(#memberSave) .ms-cell .ms-n{margin:8px 0 0;color:var(--rd-chalk);font:500 16px/1.4 var(--rd-f-text);text-wrap:pretty}

/* a year's price: on a phone one full-width line that reads straight across: "Costs  $49  a year, for one player" */
body:has(#memberSave) .ms-cell--cost{
  grid-column:1 / -1;display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;column-gap:12px;padding:9px 12px 7px;
}
body:has(#memberSave) .ms-cell--cost .ms-v{margin:0;font-size:44px;line-height:1}
body:has(#memberSave) .ms-cell--cost .ms-u{margin:0}

/* the honest cell: hatched paper, ink type, as every "not available" thing on the site is */
body:has(#memberSave) .ms-cell--hatch{grid-column:1 / -1;background:var(--rd-hatch);color:var(--rd-ink)}
body:has(#memberSave) .ms-cell--hatch .ms-k,
body:has(#memberSave) .ms-cell--hatch .ms-n{color:var(--rd-ink)}
body:has(#memberSave) .ms-cell--hatch .ms-v{font-size:clamp(26px,7.4vw,32px);line-height:.98;letter-spacing:.012em;white-space:normal;text-wrap:balance}

/* Player or Family: the answer in words ("One kid? Player."), the rule for more kids under or beside it. Words, not
   the dollar difference: a big "$40" beside the $49 and $89 cost cells read as a third price (Kenyon, Oct 2026). */
body:has(#memberSave) .ms-cell--gap{grid-column:1 / -1}
body:has(#memberSave) .ms-cell--gap .ms-v{font-size:clamp(26px,7.4vw,32px);line-height:.98;letter-spacing:.012em;white-space:normal;text-wrap:balance}
body:has(#memberSave) .ms-cell--gap .ms-n{margin-top:8px;color:var(--rd-white)}

@media (max-width:359.98px){
  /* the smallest phones: the label is set narrower, never smaller */
  body:has(#memberSave) .ms-k{font-stretch:78%;letter-spacing:.03em}
  body:has(#memberSave) .ms-cell{padding-inline:10px}
}
@media (min-width:640px){
  body:has(#memberSave) .ms-k{font-size:12.5px;font-stretch:106%;letter-spacing:.1em}
  body:has(#memberSave) .ms-cells{grid-template-columns:repeat(3,minmax(0,1fr))}
  body:has(#memberSave) .ms-cell{padding:13px 16px 15px}
  body:has(#memberSave) .ms-cell .ms-v{font-size:clamp(60px,5.6vw,80px)}
  body:has(#memberSave) .ms-cell--cost{grid-column:auto;display:flex;align-items:stretch;padding:13px 16px 15px}
  body:has(#memberSave) .ms-cell--cost .ms-v{margin-top:7px;font-size:clamp(60px,5.6vw,80px);line-height:.9}
  body:has(#memberSave) .ms-cell--cost .ms-u{margin:8px 0 0}
  body:has(#memberSave) .ms-cell--hatch{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;align-items:center}
  body:has(#memberSave) .ms-cell--hatch .ms-k{grid-column:1 / -1}
  body:has(#memberSave) .ms-cell--hatch .ms-v{max-width:7.2em;font-size:34px}
  body:has(#memberSave) .ms-cell--hatch .ms-n{margin-top:7px;font-weight:600}
  body:has(#memberSave) .ms-cell--gap{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;align-items:center}
  body:has(#memberSave) .ms-cell--gap .ms-k{grid-column:1 / -1}
  body:has(#memberSave) .ms-cell--gap .ms-v{max-width:5.2em;font-size:34px}
  body:has(#memberSave) .ms-cell--gap .ms-n{margin-top:7px}
}
@media (min-width:1280px){
  body:has(#memberSave) .ms-k{font-stretch:118%;letter-spacing:.12em}
}
/* A label keeps to ONE line wherever its cell is narrow, so the big numbers in a row of cells stand level.
   It is set narrower, never smaller. (The rules stay in this order: 389.98 first, then 359.98.) */
@media (min-width:960px) and (max-width:1279.98px){
  body:has(#memberSave) .ms-plan .ms-k{font-stretch:92%;letter-spacing:.06em}
}
@media (min-width:640px) and (max-width:959.98px){
  body:has(#memberSave) .ms-facts .ms-k{font-stretch:90%;letter-spacing:.06em}
}
@media (max-width:389.98px){
  body:has(#memberSave) .ms-facts .ms-k{font-stretch:80%;letter-spacing:.03em}
}
@media (max-width:359.98px){
  body:has(#memberSave) .ms-facts .ms-k{font-stretch:75%;letter-spacing:.02em}
}

/* ---------- 1. hero ---------- */
@media (min-width:480px){
  /* on phones the orange phrase may wrap: with a reader's own wider text spacing it would run off the screen */
  body:has(#memberSave) .page-hero h1 .o{white-space:nowrap}
}
body:has(#memberSave) .ms-facts{max-width:none;margin:18px 0 0}
/* the small words beside a price ("a year", "once memberships start") drop under it when the cell is too narrow for both */
body:has(#memberSave) .ms-facts .ms-v{display:flex;flex-wrap:wrap;align-items:baseline;gap:.16em;margin-top:7px;font-size:clamp(38px,10.4vw,44px);line-height:1}
body:has(#memberSave) .ms-facts .ms-n{margin-top:6px;font-size:16px;line-height:1.35}
body:has(#memberSave) .ms-cell--eg{grid-column:1 / -1}
/* "members $65" carries the site's member marker: a 7px orange square */
body:has(#memberSave) .ms-facts .ms-mem{padding-left:14px;text-indent:-14px;color:var(--rd-white);font-weight:600}   /* a second line starts under the words, not under the square */
body:has(#memberSave) .ms-facts .ms-mem::before{content:"";display:inline-block;width:7px;height:7px;margin:0 7px 0 0;vertical-align:.1em;background:var(--rd-orange)}
/* the one link: a text-link button on black, a 44px row of its own */
body:has(#memberSave) .ms-jump{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:6px 0 0;padding:0;
  color:var(--rd-white);font:800 13px/1 var(--rd-f-text);font-stretch:116%;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:7px;text-decoration-color:var(--rd-orange);
  transition:color var(--rd-t-hover);
}
body:has(#memberSave) .ms-jump svg{flex:none;transition:transform var(--rd-t-hover) var(--rd-ease-out)}
body:has(#memberSave) .ms-jump:hover{color:var(--rd-orange)}
body:has(#memberSave) .ms-jump:hover svg{transform:translateY(3px)}
@media (max-width:639.98px){
  /* two lines at every phone width: "Members keep / today's prices" */
  body:has(#memberSave) .page-hero{padding-top:26px;padding-bottom:14px}
  body:has(#memberSave) .page-hero .container > p{margin-top:14px}
  body:has(#memberSave) .ms-close{padding-block:28px 30px}
  body:has(#memberSave) .page-hero h1{font-size:clamp(40px,14vw,54px)}
}
/* the hero paragraph: where a sentence needs two lines they are evened out, so no word is left alone on a line */
body:has(#memberSave) .page-hero .container > p{text-wrap:balance}
@media (min-width:360px){
  /* each sentence of the hero paragraph keeps to its own line where it fits ("... go up." / "Members keep ...") */
  body:has(#memberSave) .page-hero .ms-s{display:inline-block;text-wrap:balance}
}
@media (min-width:640px){
  body:has(#memberSave) .ms-facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr)}
  body:has(#memberSave) .ms-cell--eg{grid-column:auto}
  body:has(#memberSave) .ms-jump{margin-top:12px}
  body:has(#memberSave) .ms-facts .ms-v{font-size:clamp(40px,3.6vw,52px)}
}
@media (min-width:960px){
  /* headline left, the sentence and the link on its baseline at the right, the three cells under both */
  body:has(#memberSave) .page-hero .container{grid-template-rows:auto 1fr auto auto}
  body:has(#memberSave) .page-hero .container > h1{grid-column:1;grid-row:2 / span 2;align-self:end}
  body:has(#memberSave) .page-hero .container > p{grid-column:2;grid-row:2;align-self:end;margin:0;font-size:var(--rd-fs-lede);line-height:1.4}
  body:has(#memberSave) .page-hero .container > .ms-jump{grid-column:2;grid-row:3;justify-self:start;margin:10px 0 -8px}
  body:has(#memberSave) .page-hero .container > .ms-facts{grid-column:1 / -1;grid-row:4;margin:clamp(24px,2.6vw,34px) 0 0}
}

/* ---------- the floor sections ---------- */
body:has(#memberSave) .ms-sec{padding:clamp(22px,4.2vw,56px) 0 0}
body:has(#memberSave) .ms-prices{padding-bottom:clamp(24px,4.6vw,64px)}
body:has(#memberSave) .section-head{margin-bottom:clamp(16px,2.4vw,30px);padding-top:16px}
body:has(#memberSave) .section-head .kicker{align-items:baseline}
body:has(#memberSave) .section-head h2{margin-top:10px}
body:has(#memberSave) .section-head h2 .o{white-space:nowrap}
body:has(#memberSave) .section-head > p{margin-top:12px;text-wrap:balance}

/* ---------- 2. when it pays for itself: two scoreboards on the floor ---------- */
body:has(#memberSave) .ms-plans{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
body:has(#memberSave) .ms-plan{min-width:0}
body:has(#memberSave) .ms-plan-h{
  margin:0 0 9px;color:var(--rd-ink);
  font:400 var(--rd-fs-500)/1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase;
}
/* the two one-line notes: ruled, each under its own scoreboard on a wide screen */
body:has(#memberSave) .ms-notes{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:18px 0 0;padding:0;border:0}
body:has(#memberSave) .ms-notes li{
  position:relative;padding:10px 0 11px 24px;border-top:2px solid var(--rd-ink);
  color:var(--rd-ink);font:500 16.5px/1.45 var(--rd-f-text);text-wrap:balance;
}
body:has(#memberSave) .ms-notes li::before{
  content:"";position:absolute;left:2px;top:calc(10px + .5em);width:8px;height:8px;background:var(--rd-orange);outline:2px solid var(--rd-ink);
}
@media (min-width:960px){
  body:has(#memberSave) .ms-plans{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto;gap:0 clamp(24px,3vw,44px)}
  /* the two boards share their rows, so their cells start and end level */
  @supports (grid-template-rows:subgrid){
    body:has(#memberSave) .ms-plan{display:grid;grid-template-rows:subgrid;grid-row:span 3}
    body:has(#memberSave) .ms-plan > .ms-cells{grid-row:span 2;grid-template-rows:subgrid}
    /* a board whose fourth cell is hidden (the price list no longer supports it): its three cells run to the foot
       of the other board, so no bare floor is left beside a black cell */
    body:has(#memberSave) .ms-plan > .ms-cells:not(:has(> :is(.ms-cell--hatch,.ms-cell--gap):not([hidden]))) > .ms-cell{grid-row:1 / -1}
  }
  body:has(#memberSave) .ms-notes{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,44px);margin-top:22px}
}
@media (min-width:960px) and (max-width:1279.98px){
  /* half a floor each: the cells are narrow, so their fourth cell stacks again */
  body:has(#memberSave) .ms-cell{padding-inline:12px}
  body:has(#memberSave) .ms-cell .ms-v{font-size:clamp(52px,5.4vw,64px)}
  body:has(#memberSave) .ms-cell--cost .ms-v{font-size:clamp(52px,5.4vw,64px)}
  body:has(#memberSave) .ms-cell--hatch,
  body:has(#memberSave) .ms-cell--gap{display:flex;align-items:stretch}
  body:has(#memberSave) .ms-cell--hatch .ms-v,
  body:has(#memberSave) .ms-cell--gap .ms-v{max-width:none;font-size:30px}
}

/* ---------- THE sheet head ---------- */
body:has(#memberSave) .ms-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;
  padding:13px 14px 12px;background:var(--rd-ink);color:var(--rd-chalk);
  font:800 12px/1.3 var(--rd-f-text);font-stretch:92%;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
body:has(#memberSave) .ms-bar > :first-child{display:flex;align-items:center;gap:10px;margin:0;color:var(--rd-white);font:inherit;letter-spacing:inherit}
body:has(#memberSave) .ms-bar > :first-child::before{content:"";flex:none;width:8px;height:8px;background:var(--rd-orange)}
@media (max-width:359.98px){ body:has(#memberSave) .ms-bar{font-stretch:84%;letter-spacing:.04em} }

/* ---------- 3. the example: one paper receipt ---------- */
body:has(#memberSave) .ms-rcpt{
  --ms-x:14px;--rd-ring:var(--rd-ink);
  position:relative;max-width:none;overflow:visible;background:var(--rd-paper);color:var(--rd-ink);border:2px solid var(--rd-ink);
}
body:has(#memberSave) .ms-rcpt-body{padding:2px var(--ms-x) 14px}
body:has(#memberSave) .ms-grp{min-width:0}
body:has(#memberSave) .ms-grp .ms-k{margin:14px 0 0;color:var(--rd-ink-2)}
body:has(#memberSave) .ms-lines{list-style:none;margin:0;padding:0}
body:has(#memberSave) .ms-lines li{display:flex;align-items:baseline;gap:10px;padding:9px 0 8px;border-bottom:1px solid var(--rd-rule)}
body:has(#memberSave) .ms-lines li::before{content:"";order:1;flex:1;min-width:14px;border-bottom:2px dotted var(--rd-rule-strong);transform:translateY(-4px)}
body:has(#memberSave) .ms-ln{flex:0 1 auto;color:var(--rd-ink);font:700 16.5px/1.3 var(--rd-f-text);text-wrap:balance}
body:has(#memberSave) .ms-lv{order:2;flex:none;color:var(--rd-ink);white-space:nowrap;font:500 16px/1.3 var(--rd-f-mono);letter-spacing:.01em;word-spacing:-.15em;font-variant-numeric:tabular-nums}
body:has(#memberSave) .ms-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:-1px 0 0;padding:11px 0 0;
  border-top:2px solid var(--rd-ink);color:var(--rd-ink);font:800 16.5px/1.3 var(--rd-f-text);
}
body:has(#memberSave) .ms-total b{font:400 48px/.9 var(--rd-f-display);letter-spacing:.01em;font-variant-numeric:tabular-nums}   /* the receipt's biggest number: 48px, 56px wide (DESIGN.md: a total is 46 to 56px) */
/* the stub: what is left after the membership is paid for. Perforated, with a punched notch at each end. */
body:has(#memberSave) .ms-stub{position:relative;margin:0;padding:0 var(--ms-x) 15px;background:none;border-top:2px dashed var(--rd-rule-strong)}
body:has(#memberSave) .ms-stub::before,
body:has(#memberSave) .ms-stub::after{
  content:"";position:absolute;z-index:1;top:-12px;width:22px;height:22px;box-sizing:border-box;
  background:var(--rd-maple);border:2px solid var(--rd-ink);border-radius:var(--rd-r-round);
}
body:has(#memberSave) .ms-stub::before{left:-12px;clip-path:inset(0 0 0 50%)}
body:has(#memberSave) .ms-stub::after{right:-12px;clip-path:inset(0 50% 0 0)}
body:has(#memberSave) .ms-outs{list-style:none;margin:0 calc(var(--ms-x) * -1);padding:0}
body:has(#memberSave) .ms-out{
  display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px var(--ms-x) 9px;
  border-bottom:1px solid var(--rd-rule);color:var(--rd-ink);font:600 16px/1.3 var(--rd-f-text);
}
body:has(#memberSave) .ms-out > span{min-width:0;text-wrap:balance}
body:has(#memberSave) .ms-out b{flex:none;white-space:nowrap;font:400 30px/1 var(--rd-f-display);letter-spacing:.012em;text-transform:uppercase;font-variant-numeric:tabular-nums}
/* the one orange thing on the receipt: the Family line, and only while it is the best of the three */
body:has(#memberSave) .ms-stub:has(.ms-best:not([hidden])) .ms-out--family{padding-block:13px 11px;background:var(--rd-orange);border-bottom-color:var(--rd-ink)}
body:has(#memberSave) .ms-stub:has(.ms-best:not([hidden])) .ms-out--family b{font-size:36px}
body:has(#memberSave) .ms-best{position:relative;margin:12px 0 0;padding:0 0 0 24px;color:var(--rd-ink);font:800 16.5px/1.3 var(--rd-f-text);text-wrap:balance}
body:has(#memberSave) .ms-best::before{content:"";position:absolute;left:2px;top:.42em;width:8px;height:8px;background:var(--rd-orange);outline:2px solid var(--rd-ink)}
body:has(#memberSave) .ms-fine{margin:6px 0 0;color:var(--rd-ink-2);font:500 16px/1.4 var(--rd-f-text);text-wrap:balance}
body:has(#memberSave) .ms-best[hidden] + .ms-fine{margin-top:12px}
@media (min-width:640px){
  body:has(#memberSave) .ms-rcpt{--ms-x:20px}
  body:has(#memberSave) .ms-bar{padding-inline:20px;font-stretch:122%;letter-spacing:.14em}
  body:has(#memberSave) .ms-rcpt-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,2.4vw,32px);align-content:start;padding-bottom:18px}
  body:has(#memberSave) .ms-total{grid-column:1 / -1}
}
@media (min-width:640px) and (max-width:959.98px){
  /* the two kids side by side: both columns share their rows (label, line, line), so when a line wraps in one
     column the hairlines still meet across the gap */
  @supports (grid-template-rows:subgrid){
    body:has(#memberSave) .ms-rcpt-body{grid-template-rows:auto auto auto auto}
    body:has(#memberSave) .ms-grp{display:grid;grid-template-rows:subgrid;grid-row:span 3}
    body:has(#memberSave) .ms-lines{display:grid;grid-template-rows:subgrid;grid-row:span 2}
  }
}
@media (min-width:960px){
  /* wide: the lines on the left, the stub beside them across a vertical perforation (as on /book).
     The lines run in ONE column there (older kid, younger kid, total): half the sheet is too narrow for two. */
  body:has(#memberSave) .ms-rcpt{display:grid;grid-template-columns:minmax(0,1fr) clamp(380px,31vw,440px);grid-template-rows:auto 1fr}
  body:has(#memberSave) .ms-rcpt > .ms-bar{grid-column:1 / -1}
  body:has(#memberSave) .ms-rcpt-body{grid-column:1;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;padding:6px clamp(20px,2.2vw,28px) 20px}
  body:has(#memberSave) .ms-total{align-self:end;align-items:flex-end;padding-top:16px;font-size:19px}
  body:has(#memberSave) .ms-total b{font-size:56px;line-height:.86}
  body:has(#memberSave) .ms-stub{--ms-x:clamp(20px,2.2vw,28px);grid-column:2;border-top:0;border-left:2px dashed var(--rd-rule-strong);padding-bottom:18px}
  body:has(#memberSave) .ms-stub::before{display:none}
  body:has(#memberSave) .ms-stub::after{top:auto;right:auto;left:-12px;bottom:-12px;clip-path:inset(0 0 50% 0)}
}

/* ---------- 4. the price board: one paper sheet ---------- */
body:has(#memberSave) .ms-board{
  --rd-ring:var(--rd-ink);
  overflow:visible;background:var(--rd-paper);color:var(--rd-ink);border:2px solid var(--rd-ink);
  scroll-margin-top:2px;   /* html already has scroll-padding-top of the nav height + 12px: "See every price" lands the board 14px under the bar */
}
/* the key: the three column heads, each said in one short sentence */
body:has(#memberSave) .ms-key{
  display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 9px;align-items:baseline;
  margin:0;padding:13px 10px 14px 14px;background:var(--rd-paper-2);
}
body:has(#memberSave) .ms-key > div{display:contents}
body:has(#memberSave) .ms-key dt{justify-self:start;min-width:0;padding:4px 6px 3px;background:var(--rd-ink);color:var(--rd-white);text-align:left}
body:has(#memberSave) .ms-key .ms-key-save dt{background:var(--rd-orange);color:var(--rd-ink)}
body:has(#memberSave) .ms-key dd{margin:0;color:var(--rd-ink);font:500 16px/1.4 var(--rd-f-text);font-stretch:97%;text-wrap:balance}

/* THE table: one per group. Its head is a black bar: the group name, then the three column heads. */
body:has(#memberSave) .ms-tb{width:100%;margin:0;border-collapse:separate;border-spacing:0;table-layout:fixed;font-variant-numeric:tabular-nums}
body:has(#memberSave) .ms-tb:not(:has(tbody tr:not([hidden]))){display:none}        /* a group with nothing in the price list */
body:has(#memberSave) .ms-tb thead th{
  padding:12px 7px 10px 0;background:var(--rd-ink);color:var(--rd-chalk);border:0;text-align:right;vertical-align:bottom;
  font:800 12.5px/1.2 var(--rd-f-text);font-stretch:72%;letter-spacing:.04em;text-transform:uppercase;
}
body:has(#memberSave) .ms-tb thead th:first-child{
  padding-left:14px;color:var(--rd-white);text-align:left;
  font:400 19px/1 var(--rd-f-display);font-stretch:100%;letter-spacing:.02em;
}
body:has(#memberSave) .ms-tb thead th small{
  display:block;margin:4px 0 0;color:var(--rd-chalk);
  font:600 15px/1.25 var(--rd-f-text);letter-spacing:0;text-transform:none;
}
body:has(#memberSave) .ms-tb thead th:nth-child(2),
body:has(#memberSave) .ms-tb thead th:nth-child(3){width:58px}
body:has(#memberSave) .ms-tb thead th:nth-child(4){width:64px;padding-right:10px;background:var(--rd-orange);color:var(--rd-ink)}
body:has(#memberSave) .ms-tb tbody tr > *{border:0;border-top:1px solid var(--rd-rule)}
body:has(#memberSave) .ms-tb tbody th{
  height:56px;padding:6px 8px 6px 14px;color:var(--rd-ink);text-align:left;vertical-align:middle;
  font:400 20px/1.04 var(--rd-f-display);letter-spacing:.015em;text-transform:uppercase;
}
body:has(#memberSave) .ms-tb tbody th small{
  display:block;margin:4px 0 0;color:var(--rd-ink-2);
  font:500 15px/1.25 var(--rd-f-text);letter-spacing:0;text-transform:none;
}
body:has(#memberSave) .ms-tb td{
  padding:6px 7px 6px 0;background:none;color:var(--rd-ink);text-align:right;vertical-align:middle;white-space:nowrap;
  font:400 23px/1 var(--rd-f-display);letter-spacing:.01em;
}
body:has(#memberSave) .ms-tb td[data-c="n"]{color:var(--rd-ink-2)}
/* a number of six characters or more ("$1,250", "$62.50"): the script marks it, and it is set smaller so it keeps to its column */
body:has(#memberSave) .ms-tb td.ms-long{font-size:17px;letter-spacing:0}
/* Save: ink on sunken paper under the one orange head cell */
body:has(#memberSave) .ms-tb td[data-c="s"]{padding-right:10px;background:var(--rd-paper-2)}
/* a team price under its league: sunken paper, plain words */
body:has(#memberSave) .ms-tb .ms-sub > th{
  height:42px;background:var(--rd-paper-2);
  font:600 16px/1.25 var(--rd-f-text);letter-spacing:0;text-transform:none;
}
body:has(#memberSave) .ms-tb .ms-sub > td{background:var(--rd-paper-2)}
/* the foot of the board: two short lines */
body:has(#memberSave) .ms-foot{padding:11px 14px 13px;background:var(--rd-paper-2);border-top:2px solid var(--rd-ink);color:var(--rd-ink);font:500 16px/1.45 var(--rd-f-text)}
body:has(#memberSave) .ms-foot p{position:relative;margin:0;padding:3px 0 3px 24px}
body:has(#memberSave) .ms-foot p::before{content:"";position:absolute;left:2px;top:calc(3px + .5em);width:8px;height:8px;background:var(--rd-orange);outline:2px solid var(--rd-ink)}

@media (max-width:639.98px){
  /* the unit line under a name is set a little narrower, so the camp names keep to two lines */
  body:has(#memberSave) .ms-tb tbody th small{font-stretch:90%}
  /* the note in the Training bar runs on one line under the group name, across to the column heads' cells
     (which stand at the top of the bar there), instead of breaking inside the name column */
  body:has(#memberSave) .ms-tb thead tr:has(small) th{vertical-align:top}
  body:has(#memberSave) .ms-tb thead th small{position:relative;z-index:1;white-space:nowrap}
  body:has(#memberSave) .ms-tb thead tr:has(small) th:nth-child(n+2){padding-top:15px}
  /* under the Leagues bar a phone shows "5x5 Winter"; the word "League" is still read out */
  body:has(#memberSave) .ms-w{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:389.98px){
  /* 360 to 389px wide: the number columns close up a little so every name still fits on one line */
  body:has(#memberSave) .ms-tb thead th{font-stretch:68%;letter-spacing:.02em}
  body:has(#memberSave) .ms-tb thead th:nth-child(2),
  body:has(#memberSave) .ms-tb thead th:nth-child(3){width:53px}
  body:has(#memberSave) .ms-tb thead th:nth-child(4){width:58px}
  body:has(#memberSave) .ms-tb thead th:first-child,
  body:has(#memberSave) .ms-tb tbody th{padding-left:12px;padding-right:6px}
  body:has(#memberSave) .ms-tb thead th:first-child{font-size:18px}
  body:has(#memberSave) .ms-tb .ms-sub > th{font-stretch:96%}
  body:has(#memberSave) .ms-key,
  body:has(#memberSave) .ms-foot{padding-inline:12px}
}
@media (max-width:359.98px){
  /* the smallest phones: names step down one size (the three numbers stay 23px on every phone) */
  body:has(#memberSave) .ms-tb tbody th{font-size:19px}
  body:has(#memberSave) .ms-tb .ms-sub > th{font-size:16px}
  body:has(#memberSave) .ms-out b{font-size:25px}
  body:has(#memberSave) .ms-stub:has(.ms-best:not([hidden])) .ms-out--family b{font-size:29px}
}
/* narrower phones: each key sentence keeps to one line, and "membership ($89)" stays together on the orange line */
@media (max-width:389.98px){
  body:has(#memberSave) .ms-key dd{font-stretch:92%}
}
@media (max-width:371.98px){
  body:has(#memberSave) .ms-key dd{font-stretch:86%}
}
@media (min-width:360px) and (max-width:389.98px){
  body:has(#memberSave) .ms-stub:has(.ms-best:not([hidden])) .ms-out--family b{font-size:34px}
}
@media (min-width:640px){
  body:has(#memberSave) .ms-key{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 24px;padding:16px 20px 17px}
  body:has(#memberSave) .ms-key > div{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline}
  body:has(#memberSave) .ms-key dt{padding-inline:7px}
  body:has(#memberSave) .ms-key dd{font-stretch:100%}
  body:has(#memberSave) .ms-tb thead th{padding:13px 14px 11px 0;font-stretch:112%;letter-spacing:.1em}
  body:has(#memberSave) .ms-tb thead th:first-child{padding-left:20px;font-size:24px}
  body:has(#memberSave) .ms-tb thead th small{display:inline-block;margin:0 0 0 12px}
  body:has(#memberSave) .ms-tb thead th:nth-child(2),
  body:has(#memberSave) .ms-tb thead th:nth-child(3){width:96px}
  body:has(#memberSave) .ms-tb thead th:nth-child(4){width:104px;padding-right:20px}
  body:has(#memberSave) .ms-tb tbody th{height:60px;padding:8px 12px 8px 20px;font-size:25px}
  body:has(#memberSave) .ms-tb tbody th small{display:inline-block;margin:0 0 0 12px;font-size:16px}
  body:has(#memberSave) .ms-tb td{padding:8px 14px 8px 0;font-size:30px}
  body:has(#memberSave) .ms-tb td[data-c="s"]{padding-right:20px}
  body:has(#memberSave) .ms-tb td.ms-long{font-size:24px}
  body:has(#memberSave) .ms-tb .ms-sub > th{height:48px;font-size:16.5px}
  body:has(#memberSave) .ms-foot{display:flex;flex-wrap:wrap;gap:0 36px;padding:15px 20px 17px}
}
@media (min-width:640px) and (max-width:959.98px){
  /* tablets: the unit line always sits under the name (as on phones and on the two-column board), so every row is one height */
  body:has(#memberSave) .ms-tb tbody th small{display:block;margin:3px 0 0}
  /* and the key keeps its phone shape, one chip and its sentence to a row: a third of the sheet is too narrow
     for a sentence there (it broke into three to seven short lines) */
  body:has(#memberSave) .ms-key{grid-template-columns:max-content minmax(0,1fr);gap:8px 12px}
  body:has(#memberSave) .ms-key > div{display:contents}
}
@media (min-width:1280px){
  /* two columns under one head: Training, Dr. Dish and courts, Camps | Programs, Leagues. Every row, a sunken
     row and a group bar included, is exactly one height, so every rule meets its neighbour across the centre line.
     The foot closes the shorter left column, so no paper is left blank. */
  body:has(#memberSave) .ms-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto 1fr}
  body:has(#memberSave) .ms-col--a{grid-column:1;grid-row:1}
  body:has(#memberSave) .ms-col--b{grid-column:2;grid-row:1 / span 2;border-left:2px solid var(--rd-ink)}
  body:has(#memberSave) .ms-foot{
    grid-column:1;grid-row:2;display:flex;flex-flow:column nowrap;justify-content:center;gap:4px;padding:20px;
    font-size:var(--rd-fs-lede);line-height:1.36;
  }
  body:has(#memberSave) .ms-tb thead th,
  body:has(#memberSave) .ms-tb tbody th,
  body:has(#memberSave) .ms-tb .ms-sub > th,
  body:has(#memberSave) .ms-tb td{height:60px;padding-block:0}
  body:has(#memberSave) .ms-tb thead th{vertical-align:middle}
  body:has(#memberSave) .ms-tb thead th small,
  body:has(#memberSave) .ms-tb tbody th small{display:block;margin:3px 0 0;font-size:15px}
  body:has(#memberSave) .ms-tb thead th:nth-child(2),
  body:has(#memberSave) .ms-tb thead th:nth-child(3){width:88px}
  body:has(#memberSave) .ms-tb thead th:nth-child(4){width:96px}
  /* the three column heads are set at their normal width here, so "Regular" ends on its prices' right edge */
  body:has(#memberSave) .ms-tb thead th:nth-child(n+2){font-stretch:100%;letter-spacing:.08em}
}

/* ---------- 5. good to know + when and where to join: the closing band ---------- */
body:has(#memberSave) .ms-close h2{margin:0}
body:has(#memberSave) .ms-know{list-style:none;max-width:none;margin:14px 0 0;padding:0;border-bottom:1px solid var(--rd-on-dark-rule)}
body:has(#memberSave) .ms-know li{
  position:relative;padding:10px 0 11px 26px;border-top:1px solid var(--rd-on-dark-rule);
  color:var(--rd-white);font:500 16px/1.4 var(--rd-f-text);text-wrap:pretty;
}
body:has(#memberSave) .ms-know li::before{content:"";position:absolute;left:2px;top:calc(10px + .45em);width:8px;height:8px;background:var(--rd-orange)}
body:has(#memberSave) .ms-join{max-width:none;margin:22px 0 0;padding:0;border:0}
body:has(#memberSave) .ms-join h3{
  margin:10px 0 0;color:var(--rd-white);
  font:400 var(--rd-fs-600)/.94 var(--rd-f-display);letter-spacing:.004em;text-transform:uppercase;text-wrap:balance;
}
body:has(#memberSave) .ms-join p{max-width:30em;margin:12px 0 0;text-wrap:balance}
body:has(#memberSave) .ms-join .btn{margin-top:18px;min-height:56px}
@media (max-width:639.98px){
  body:has(#memberSave) .ms-join .btn{width:100%}
}
@media (min-width:960px){
  /* the heading and the way in on the left, the list on the right: no empty black beside either */
  body:has(#memberSave) .ms-close .container{
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;align-items:start;
  }
  body:has(#memberSave) .ms-close .container > h2{grid-column:1;grid-row:1}
  body:has(#memberSave) .ms-close .container > .ms-know{grid-column:2;grid-row:1 / span 2;margin:0}
  body:has(#memberSave) .ms-close .container > .ms-join{
    grid-column:1;grid-row:2;align-self:end;margin:36px 0 0;padding:22px 0 0;border-top:1px solid var(--rd-on-dark-rule);
  }
  body:has(#memberSave) .ms-join h3{font-size:clamp(44px,4.4vw,62px)}
  body:has(#memberSave) .ms-join .btn{min-height:60px}
  body:has(#memberSave) .ms-know li{padding-block:13px 14px;font-size:17px}
  body:has(#memberSave) .ms-know li::before{top:calc(13px + .5em)}
}
@media (min-width:960px) and (max-width:1279.98px){
  /* half a column is too narrow here: the short left column left a hole of black above the way in. One column
     instead: heading, list, then the way in as a row (headline left, sentence and button right). */
  body:has(#memberSave) .ms-close .container{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  body:has(#memberSave) .ms-close .container > h2,
  body:has(#memberSave) .ms-close .container > .ms-know,
  body:has(#memberSave) .ms-close .container > .ms-join{grid-column:1;grid-row:auto}
  body:has(#memberSave) .ms-close .container > .ms-know{margin-top:18px}
  body:has(#memberSave) .ms-close .container > .ms-join{
    display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(24px,4vw,64px);align-items:end;align-self:start;
    margin:30px 0 0;padding:0;border:0;
  }
  body:has(#memberSave) .ms-join .kicker{grid-column:1 / -1}
  body:has(#memberSave) .ms-join h3{grid-column:1;grid-row:2 / span 2;align-self:start}
  body:has(#memberSave) .ms-join p{grid-column:2;grid-row:2;margin:0}
  body:has(#memberSave) .ms-join .btn{grid-column:2;grid-row:3;justify-self:start}
}

/* ---- 80-p-programs.css ---- */
/* =====================================================================
   80-p-programs.css — /programs: "three possessions".
   Every rule is scoped body.rd-p-programs.

   Layout idea: three full-width rows on the floor. In each, the programme's name
   stands two-thirds wide in headliner Anton and an orange register slab fills the
   other third; the two trade sides from row to row. 3px ink rules between. No cards.
   ===================================================================== */

/* ---------- hero: the three programmes as an index (jump links) ---------- */
body.rd-p-programs .pg-index{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--rd-on-dark-rule)}
body.rd-p-programs .pg-index a{
  display:grid;grid-template-columns:28px minmax(0,1fr);align-items:baseline;gap:1px 8px;min-height:48px;padding:10px 0 8px;
  border-bottom:1px solid var(--rd-on-dark-rule);color:var(--rd-white);text-decoration:none;
}
body.rd-p-programs .pg-index span{color:var(--rd-orange);font:800 11px/1 var(--rd-f-text);font-stretch:125%;letter-spacing:.14em}
body.rd-p-programs .pg-index b{font:400 23px/1.1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase;transition:color var(--rd-t-hover)}
body.rd-p-programs .pg-index i{grid-column:2;color:var(--rd-chalk);font:500 13.5px/1.4 var(--rd-f-mono);font-style:normal;letter-spacing:.04em;text-transform:uppercase}
body.rd-p-programs .pg-index a:hover b{color:var(--rd-orange)}
body.rd-p-programs .pg-index a:focus-visible{outline-offset:-2px}
@media (min-width:480px){
  body.rd-p-programs .pg-index a{grid-template-columns:28px minmax(0,1fr) auto;column-gap:12px}
  body.rd-p-programs .pg-index i{grid-column:3;text-align:right}
}
body.rd-p-programs .pg-row{scroll-margin-top:calc(var(--rd-nav-h) + 8px)}

body.rd-p-programs .pg-list{padding-top:clamp(28px,4.4vw,64px);padding-bottom:clamp(8px,1vw,12px)}
body.rd-p-programs .pg-row{
  display:grid;grid-template-columns:minmax(0,1fr);border-top:3px solid var(--rd-ink);
}
body.rd-p-programs .pg-row:last-child{border-bottom:3px solid var(--rd-ink)}
body.rd-p-programs .pg-main{min-width:0;padding:18px 0 24px}

body.rd-p-programs .pg-meta{display:flex;align-items:center;gap:12px;margin:0}
body.rd-p-programs .pg-no{color:var(--rd-ink-2);font:400 20px/1 var(--rd-f-display);letter-spacing:.02em;padding-top:2px}
body.rd-p-programs .pg-name{
  margin:14px 0 0;color:var(--rd-ink);
  font:400 clamp(66px,19.4vw,88px)/.88 var(--rd-f-display);letter-spacing:.004em;text-transform:uppercase;
}
body.rd-p-programs .pg-desc{margin:16px 0 0;max-width:33em;color:var(--rd-ink);font:500 clamp(17px,1.4vw,19px)/1.45 var(--rd-f-text)}
body.rd-p-programs .pg-facts{display:flex;flex-direction:column;gap:5px;margin:16px 0 0;color:var(--rd-ink)}
body.rd-p-programs .pg-facts span{position:relative;padding-left:20px}
body.rd-p-programs .pg-facts span::before{content:"";position:absolute;left:2px;top:.36em;width:8px;height:8px;background:var(--rd-orange);outline:2px solid var(--rd-ink)}

/* the register slab: an orange block, ink type — the whole block is the link */
body.rd-p-programs .pg-slab{
  --rd-ring:var(--rd-ink);
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr auto;align-items:end;column-gap:14px;
  min-width:0;margin:0 calc(var(--rd-gut) * -1);padding:16px var(--rd-gut) 0;
  background:var(--rd-orange);color:var(--rd-ink);text-decoration:none;
  transition:background-color var(--rd-t-hover),color var(--rd-t-hover);
  -webkit-tap-highlight-color:transparent;
}
body.rd-p-programs .pg-slab-label{
  grid-column:1 / -1;font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
body.rd-p-programs .pg-price{
  grid-column:1;margin-top:6px;font:400 clamp(76px,22vw,96px)/.86 var(--rd-f-display);letter-spacing:.004em;font-variant-numeric:tabular-nums;
}
body.rd-p-programs .pg-price-note{grid-column:2;align-self:end;padding-bottom:2px;text-align:right;font:700 16px/1.3 var(--rd-f-text)}
body.rd-p-programs .pg-go{
  grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;margin-top:16px;
  border-top:2px solid currentColor;
  font:800 15px/1 var(--rd-f-text);font-stretch:116%;letter-spacing:.09em;text-transform:uppercase;
}
body.rd-p-programs .pg-go svg{flex:none;transition:transform var(--rd-t-hover) var(--rd-ease-out)}
@media (hover:hover){
  body.rd-p-programs .pg-slab:hover{background:var(--rd-ink);color:var(--rd-white)}
  body.rd-p-programs .pg-slab:hover .pg-price{color:var(--rd-orange)}
  body.rd-p-programs .pg-slab:hover .pg-go svg{transform:translateX(6px)}
}
body.rd-p-programs .pg-slab:active{background:var(--rd-orange-press);color:var(--rd-ink)}
body.rd-p-programs .pg-slab:active .pg-price{color:var(--rd-ink)}
body.rd-p-programs .pg-slab:focus-visible{outline-offset:-6px}

@media (min-width:640px){
  body.rd-p-programs .pg-name{font-size:clamp(88px,13vw,120px)}
  body.rd-p-programs .pg-facts{flex-direction:row;flex-wrap:wrap;gap:6px 26px}
}
@media (min-width:960px){
  body.rd-p-programs .pg-row{grid-template-columns:minmax(0,2fr) minmax(0,1fr);column-gap:clamp(24px,3vw,44px)}
  body.rd-p-programs .pg-row--flip{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  body.rd-p-programs .pg-row--flip .pg-slab{order:-1}
  body.rd-p-programs .pg-main{padding:22px 0 34px}
  body.rd-p-programs .pg-name{margin-top:18px;font-size:clamp(96px,10.4vw,148px)}
  body.rd-p-programs .pg-desc{margin-top:20px}
  /* the slab fills its third of the row from rule to rule, flush with the end of the rules */
  body.rd-p-programs .pg-slab{
    grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto;align-items:start;
    margin:0;padding:22px clamp(20px,2.2vw,30px) 0;
  }
  /* a scoreboard cell: the label, the price directly under it, the note; only the register row stands on the bottom rule */
  body.rd-p-programs .pg-slab-label{grid-row:1}
  body.rd-p-programs .pg-price{grid-row:2;grid-column:1;margin:14px 0 0;font-size:clamp(112px,12.4vw,176px)}
  body.rd-p-programs .pg-price-note{grid-row:3;grid-column:1;padding:10px 0 0;text-align:left;font-size:18px}
  body.rd-p-programs .pg-go{grid-row:5;align-self:end;min-height:68px;margin-top:24px;font-size:16px}
}

/* member pricing on: the member line sits straight under the big number, inside the slab (ink on orange) */
html:not(#rd) body.rd-p-programs .pg-slab .ign-member-price{grid-column:1 / -1;grid-row:3;margin-top:8px;color:var(--rd-ink);font-size:16px}
html:not(#rd) body.rd-p-programs .pg-slab .ign-member-price::before{background:var(--rd-ink)}
body.rd-p-programs .pg-slab:has(.ign-member-price) .pg-price{grid-row:2}
/* the shirt price has no room beside a member line: it drops under it, as its own line */
body.rd-p-programs .pg-slab:has(.ign-member-price) .pg-price-note{grid-row:4;grid-column:1 / -1;align-self:start;padding:6px 0 0;text-align:left}
body.rd-p-programs .pg-slab:has(.ign-member-price) .pg-go{grid-row:5}
@media (hover:hover){
  html:not(#rd) body.rd-p-programs .pg-slab:hover .ign-member-price{color:var(--rd-white)}
  html:not(#rd) body.rd-p-programs .pg-slab:hover .ign-member-price::before{background:var(--rd-orange)}
}
html:not(#rd) body.rd-p-programs .pg-slab:active .ign-member-price{color:var(--rd-ink)}
html:not(#rd) body.rd-p-programs .pg-slab:active .ign-member-price::before{background:var(--rd-ink)}
@media (min-width:960px){
  html:not(#rd) body.rd-p-programs .pg-slab .ign-member-price{grid-row:3;margin-top:12px;font-size:19px}
  body.rd-p-programs .pg-slab:has(.ign-member-price) .pg-price-note{grid-row:4;padding-top:8px}
}

/* ---- 80-p-rentals.css ---- */
/* =====================================================================
   80-p-rentals.css — /rentals  (pages/rentals.html, body.rd-p-rentals)
   Layout idea: THE RATE BOARD. The hero court is empty (yours, nobody on
   it) and its caption carries the two hourly prices. Everything else is one
   paper board: a black column head, three ruled groups, six rows, each row
   one link with a drawn glyph, the price in Anton and its own "Book …" label.
   Every rule is scoped body.rd-p-rentals.
   ===================================================================== */

/* ---- hero: the two facts of the building under the paragraph ---- */
body.rd-p-rentals .rn-stats{margin-top:22px}
body.rd-p-rentals .rn-stats .rd-stat :is(b,dd){font-size:clamp(30px,2.9vw,40px)}
/* the caption names the two hourly prices; on a phone the rail has room for the prices only */
@media (max-width:519.98px){
  body.rd-p-rentals .rd-hero .rd-playcard > .rd-paint{display:none}
  body.rd-p-rentals .rd-hero .rd-playcard > b{font-size:19px}
}

/* member pricing on: the rail takes a second line. "Half court $30 · Full court $60" stays worded exactly as it is
   with pricing off, and each member price stands under its own court as a small chalk note. (One line could not
   hold both prices and both notes: the rail is only as wide as a phone, or as the hero's court column.)
   The rail grows by 26px; where the zone has a set height it grows by the same, so the court keeps its depth.
   pages/rentals.html asks the court engine to measure again once the member prices are in. */
body.rd-p-rentals .rd-hero .rd-playcard .rn-cap{display:inline-flex;align-items:baseline;column-gap:.26em;white-space:nowrap}
body.rd-p-rentals .rd-hero > .rd-floor:has(> .rd-playcard .ign-member-price){--rd-cap-h:62px}
body.rd-p-rentals .rd-hero .rd-playcard:has(.ign-member-price){align-items:start;padding-top:12px}
body.rd-p-rentals .rd-hero .rd-playcard:has(.ign-member-price) > .rd-paint{min-height:19px}
body.rd-p-rentals .rd-hero .rd-playcard > b:has(.ign-member-price){align-items:start;gap:.5em;padding-top:0}
body.rd-p-rentals .rd-hero .rd-playcard > b:has(.ign-member-price)::after{content:none}
body.rd-p-rentals .rd-hero .rd-playcard .rn-cap:has(.ign-member-price){
  display:inline-grid;grid-template-columns:repeat(3,auto);justify-content:start;align-items:baseline;row-gap:7px;
}
html:not(#rd) body.rd-p-rentals .rd-hero .rd-playcard .rn-cap > .ign-member-price{
  grid-column:1 / -1;grid-row:2;margin:0;color:var(--rd-chalk);font-size:13px;line-height:1;
}
html:not(#rd) body.rd-p-rentals .rd-hero .rd-playcard .ign-member-price::before{width:6px;height:6px;margin-right:5px}
@media (max-width:639.98px){
  body.rd-p-rentals .rd-hero > .rd-floor:has(> .rd-playcard .ign-member-price){height:calc(clamp(200px,58vw,260px) + 26px)}
}
@media (min-width:640px) and (max-width:959.98px){
  body.rd-p-rentals .rd-hero > .rd-floor:has(> .rd-playcard .ign-member-price){height:calc(clamp(280px,44vw,400px) + 26px)}
}
@media (min-width:960px){
  body.rd-p-rentals .rd-hero > .rd-floor:has(> .rd-playcard .ign-member-price){--rd-cap-h:68px}
  body.rd-p-rentals .rd-hero .rd-playcard:has(.ign-member-price) > .rd-paint{min-height:23px}
  html:not(#rd) body.rd-p-rentals .rd-hero .rd-playcard .rn-cap > .ign-member-price{font-size:13.5px}
}

/* ---- the board ---- */
body.rd-p-rentals .rn-rates{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(64px,7vw,96px)}
/* (set on the children: the board itself is the query container, so a container query cannot restyle it) */
body.rd-p-rentals .rn-board > *{--rn-cols:44px minmax(0,1fr) auto;--rn-x:16px}

body.rd-p-rentals .rn-board-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px var(--rn-x);
  background:var(--rd-ink);color:var(--rd-white);
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
body.rd-p-rentals .rn-board-head > span:nth-child(2),
body.rd-p-rentals .rn-board-head > span:nth-child(3){display:none}
body.rd-p-rentals .rn-board-head > span:last-child{color:var(--rd-orange)}

body.rd-p-rentals .rn-group{
  display:flex;align-items:baseline;gap:12px;margin:0;padding:9px var(--rn-x) 7px;
  background:var(--rd-paper-2);color:var(--rd-ink);border-top:2px solid var(--rd-ink);
  font:400 19px/1.1 var(--rd-f-display);letter-spacing:.03em;text-transform:uppercase;
}
body.rd-p-rentals .rn-board-head + .rn-group{border-top:0}
body.rd-p-rentals .rn-group span{
  color:var(--rd-ink-2);font:800 11px/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.14em;
}

/* one row = one link. Phone: glyph | name | price, then the sentence and the "Book …" label under the name */
body.rd-p-rentals .rn-board .rd-rate{
  grid-template-columns:var(--rn-cols);column-gap:12px;row-gap:6px;align-items:start;padding:18px var(--rn-x) 12px;
}
body.rd-p-rentals .rn-board .rd-rate-glyph{display:block;grid-column:1;grid-row:1;padding-top:2px}
body.rd-p-rentals .rn-board .rd-rate-glyph svg{width:100%;height:auto}
body.rd-p-rentals .rn-board .rd-rate-name{grid-column:2;grid-row:1;font-size:clamp(27px,7.4vw,32px);line-height:.98}
body.rd-p-rentals .rn-board .rd-price{
  grid-column:3;grid-row:1;justify-self:end;flex-direction:column;align-items:flex-end;gap:5px;font-size:clamp(32px,8.8vw,40px);line-height:.9;
}
body.rd-p-rentals .rn-board .rd-price small{font-size:13.5px}
body.rd-p-rentals .rn-board .rd-rate-desc{grid-column:1 / -1;grid-row:2}
body.rd-p-rentals .rn-board .rd-rate-desc b{font-weight:800}
body.rd-p-rentals .rn-go{grid-column:1 / -1;grid-row:3;justify-self:start;white-space:nowrap}
@media (hover:hover){
  body.rd-p-rentals .rd-rate:hover .rn-go svg{transform:translateX(5px)}
}

@container (min-width:520px){
  body.rd-p-rentals .rn-board > *{--rn-cols:56px minmax(0,1fr) auto;--rn-x:clamp(18px,2.4vw,28px)}
  body.rd-p-rentals .rn-board .rd-rate{column-gap:20px;padding-top:20px}
  body.rd-p-rentals .rn-board .rd-rate-glyph{grid-row:1 / span 3}
  body.rd-p-rentals .rn-board .rd-rate-desc,
  body.rd-p-rentals .rn-go{grid-column:2}
  body.rd-p-rentals .rn-board .rd-price{grid-row:1 / span 2;flex-direction:row;align-items:baseline;gap:.14em;font-size:44px}
  body.rd-p-rentals .rn-board .rd-price small{font-size:.36em}
}

/* a wide board is a table: glyph | name | good for | rate | book */
@container (min-width:820px){
  body.rd-p-rentals .rn-board > *{--rn-cols:64px minmax(0,9fr) minmax(0,10fr) clamp(168px,17cqw,230px) clamp(176px,17cqw,212px)}
  body.rd-p-rentals .rn-board-head{display:grid;grid-template-columns:var(--rn-cols);column-gap:24px;justify-content:normal}
  body.rd-p-rentals .rn-board-head > span:nth-child(1){grid-column:1 / span 2}
  body.rd-p-rentals .rn-board-head > span:nth-child(2),
  body.rd-p-rentals .rn-board-head > span:nth-child(3){display:block}
  body.rd-p-rentals .rn-board-head > span:nth-child(3),
  body.rd-p-rentals .rn-board-head > span:nth-child(4){text-align:right}

  body.rd-p-rentals .rn-board .rd-rate{column-gap:24px;row-gap:0;align-items:center;padding:20px var(--rn-x)}
  body.rd-p-rentals .rn-board .rd-rate-glyph{grid-column:1;grid-row:1;padding:0}
  body.rd-p-rentals .rn-board .rd-rate-name{grid-column:2;font-size:clamp(32px,3.3cqw,42px);line-height:.94}
  body.rd-p-rentals .rn-board .rd-rate-desc{grid-column:3;grid-row:1;max-width:32em;font-size:16.5px}
  body.rd-p-rentals .rn-board .rd-price{grid-column:4;grid-row:1;min-width:0;justify-content:flex-end;font-size:clamp(46px,4.6cqw,60px)}
  body.rd-p-rentals .rn-board .rd-price small{font-size:15px}
  body.rd-p-rentals .rn-go{grid-column:5;grid-row:1;justify-self:end}
  body.rd-p-rentals .rn-group{padding-block:10px 8px;font-size:21px}
}

/* the closing band */
@media (min-width:960px){
  body.rd-p-rentals .rn-big .rd-btns{margin-top:20px}
}

/* ---- 80-p-sponsors.css ---- */
/* =====================================================================
   80-p-sponsors.css — /sponsors  (pages/sponsors.html, body.rd-p-sponsors)
   Layout idea: THE BANNER WALL. The partners' logos hang large on one ruled
   paper wall (3 x 2, 2-up on phones) whose sixth cell is the open spot.
   "Why it works" is four numbered rows out of bounds; the packages are one
   comparison table from 960px (three stacked sheets below it).
   Every rule is scoped body.rd-p-sponsors.
   ===================================================================== */

body.rd-p-sponsors .rd-hero h1{text-wrap:balance}

/* ---- the wall ----
   A cell takes its width from the grid column and its height from the ratio, never from the logo:
   the logo is out of flow and fitted inside the cell (this is what stops the sideways scroll on phones). */
body.rd-p-sponsors .sp-wall{padding-top:clamp(28px,4vw,56px)}
body.rd-p-sponsors .sp-banners{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;list-style:none;margin:0;padding:2px 0 0 2px;
  counter-reset:sp-banner;
}
body.rd-p-sponsors .sp-banner{
  counter-increment:sp-banner;position:relative;min-width:0;min-height:0;aspect-ratio:4 / 3;margin:-2px 0 0 -2px;
  background:var(--rd-paper);border:2px solid var(--rd-ink);
}
body.rd-p-sponsors .sp-banner::before{
  content:counter(sp-banner,decimal-leading-zero);position:absolute;left:10px;top:9px;z-index:1;
  color:var(--rd-ink-2);font:400 15px/1 var(--rd-f-display);letter-spacing:.04em;
}
body.rd-p-sponsors .sp-banner-logo{position:absolute;inset:clamp(26px,5vw,56px) clamp(14px,3.4vw,52px) clamp(18px,4vw,48px)}
body.rd-p-sponsors .sp-banner-logo img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;min-width:0;object-fit:contain;
}
/* the open spot */
body.rd-p-sponsors .sp-banner--add{background:var(--rd-paper-2);border-style:dashed}
body.rd-p-sponsors .sp-banner--add a{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:6px;
  padding:clamp(12px,2.4vw,28px);color:var(--rd-ink);text-decoration:none;
  transition:background-color var(--rd-t-hover);
}
body.rd-p-sponsors .sp-add-plus{
  position:absolute;right:clamp(10px,2vw,24px);top:clamp(2px,1vw,10px);
  font:400 clamp(54px,9vw,120px)/1 var(--rd-f-display);
}
body.rd-p-sponsors .sp-add-big{
  font:400 clamp(25px,3.7vw,54px)/.94 var(--rd-f-display);letter-spacing:.006em;text-transform:uppercase;max-width:6em;
}
body.rd-p-sponsors .sp-add-go{
  display:inline-flex;align-items:center;gap:10px;
  font:800 clamp(10.5px,1vw,13px)/1.3 var(--rd-f-text);font-stretch:116%;letter-spacing:.09em;text-transform:uppercase;
}
body.rd-p-sponsors .sp-add-go svg{flex:none;transition:transform var(--rd-t-hover) var(--rd-ease-out)}
@media (max-width:479.98px){ body.rd-p-sponsors .sp-add-go svg{display:none} }
body.rd-p-sponsors .sp-banner--add a:hover{background:var(--rd-orange)}
body.rd-p-sponsors .sp-banner--add a:hover .sp-add-go svg{transform:translateX(5px)}
body.rd-p-sponsors .sp-banner--add a:active{background:var(--rd-orange-press)}
body.rd-p-sponsors .sp-banner--add a:focus-visible{outline-offset:-6px}
@media (min-width:640px){
  body.rd-p-sponsors .sp-banners{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.rd-p-sponsors .sp-banner{aspect-ratio:3 / 2}
  body.rd-p-sponsors .sp-banner::before{left:14px;top:12px;font-size:17px}
}

/* ---- why it works: four numbered rows on black ---- */
body.rd-p-sponsors .sp-value-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:26px clamp(28px,5vw,80px)}
body.rd-p-sponsors .sp-value-head h2{margin-top:12px;line-height:.98}   /* the comma needs room above the second line */
body.rd-p-sponsors .sp-values{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rd-on-dark-rule)}
body.rd-p-sponsors .sp-values > li{
  display:grid;grid-template-columns:minmax(0,1fr);gap:8px 24px;padding:16px 0 18px;border-top:1px solid var(--rd-on-dark-rule);
}
body.rd-p-sponsors .sp-values > li > b{
  color:var(--rd-white);font:400 clamp(46px,5vw,72px)/.88 var(--rd-f-display);letter-spacing:.01em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
body.rd-p-sponsors .sp-values h3{
  margin:0;color:var(--rd-white);font:400 var(--rd-fs-500)/1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase;
}
body.rd-p-sponsors .sp-values p{margin:6px 0 0;max-width:36em;color:var(--rd-chalk);font:500 17px/1.5 var(--rd-f-text)}
@media (min-width:560px){
  body.rd-p-sponsors .sp-values > li{grid-template-columns:clamp(128px,15vw,200px) minmax(0,1fr);align-items:start}
  body.rd-p-sponsors .sp-values > li > b{padding-top:2px}
}
@media (min-width:960px){
  body.rd-p-sponsors .sp-value-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
  body.rd-p-sponsors .sp-value-head{position:sticky;top:calc(var(--rd-nav-h) + 28px)}
  body.rd-p-sponsors .sp-values > li:first-child{padding-top:4px;border-top:0}
  body.rd-p-sponsors .sp-values{border-bottom:0}
  body.rd-p-sponsors .sp-values > li:last-child{padding-bottom:0}
}

/* ---- packages ---- */
body.rd-p-sponsors .sp-pk{padding-bottom:clamp(64px,7vw,96px)}
body.rd-p-sponsors .sp-table{display:none}
body.rd-p-sponsors .sp-sheets{display:grid;gap:16px}
body.rd-p-sponsors .sp-sheet{display:flex;flex-direction:column}
body.rd-p-sponsors .sp-sheet > .rd-paint{margin:0 0 8px;color:var(--rd-ink-2)}
body.rd-p-sponsors .sp-sheet-flags{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px}
body.rd-p-sponsors .sp-sheet-flags .rd-paint{color:var(--rd-ink-2)}
body.rd-p-sponsors .sp-sheet h3{margin:0;font:400 var(--rd-fs-600)/.94 var(--rd-f-display);letter-spacing:.006em;text-transform:uppercase}
body.rd-p-sponsors .sp-sheet > p:not([class]){margin:8px 0 0;font:500 16.5px/1.45 var(--rd-f-text)}
body.rd-p-sponsors .sp-sheet .rd-list{margin:12px 0 18px;padding-top:8px;border-top:2px solid var(--rd-ink)}
body.rd-p-sponsors .sp-sheet .rd-list b{font-weight:800}
body.rd-p-sponsors .sp-sheet .rd-btn{margin-top:auto;font-size:13px}
body.rd-p-sponsors .sp-sheet.is-pop{border-top-width:8px;border-top-color:var(--rd-orange);box-shadow:inset 0 2px 0 var(--rd-ink)}
body.rd-p-sponsors .sp-notice{margin-top:20px}
@media (min-width:640px) and (max-width:959.98px){
  body.rd-p-sponsors .sp-sheets{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.rd-p-sponsors .sp-sheet:last-child{grid-column:1 / -1}
}

@media (min-width:960px){
  body.rd-p-sponsors .sp-sheets{display:none}
  body.rd-p-sponsors .sp-table{
    display:table;width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;
    background:var(--rd-paper);border:2px solid var(--rd-ink);color:var(--rd-ink);
    --rd-ring:var(--rd-ink);--rd-btn-hbg:var(--rd-ink);--rd-btn-hfg:var(--rd-white);
  }
  body.rd-p-sponsors .sp-col-what{width:34%}
  body.rd-p-sponsors .sp-table :is(th,td){padding:0;text-align:left;vertical-align:middle;border-left:2px solid var(--rd-ink)}
  body.rd-p-sponsors .sp-table tr > :first-child{border-left:0}

  /* column heads: black, the middle one an orange slab */
  body.rd-p-sponsors .sp-table thead th{
    padding:18px clamp(16px,1.7vw,24px) 20px;vertical-align:top;background:var(--rd-ink);color:var(--rd-white);
    border-left-color:var(--rd-on-dark-rule);font-weight:400;
  }
  body.rd-p-sponsors .sp-table thead th.sp-th-what{vertical-align:bottom}
  body.rd-p-sponsors .sp-what{
    display:block;font:400 clamp(32px,3.1vw,44px)/.92 var(--rd-f-display);letter-spacing:.006em;text-transform:uppercase;max-width:5em;
  }
  body.rd-p-sponsors .sp-legend{
    display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;color:var(--rd-chalk);
    font:500 13px/1.4 var(--rd-f-mono);letter-spacing:.06em;text-transform:uppercase;
  }
  body.rd-p-sponsors .sp-legend > span{display:inline-flex;align-items:center;gap:9px}
  body.rd-p-sponsors .sp-legend i{flex:none;width:12px;height:12px;background:var(--rd-orange)}
  body.rd-p-sponsors .sp-legend i.is-no{height:2px;width:14px;background:var(--rd-chalk-2)}
  /* the label line is two lines deep in every column, so the three names stand on one line */
  body.rd-p-sponsors .sp-table thead .rd-paint{display:block;min-height:2.6em;color:var(--rd-chalk)}
  body.rd-p-sponsors .sp-table thead b{
    display:block;margin-top:6px;font:400 clamp(32px,3.1vw,44px)/.92 var(--rd-f-display);letter-spacing:.006em;text-transform:uppercase;
  }
  body.rd-p-sponsors .sp-table thead small{display:block;margin-top:10px;color:var(--rd-chalk);font:500 15.5px/1.45 var(--rd-f-text)}
  body.rd-p-sponsors .sp-table thead th.is-pop{background:var(--rd-orange);color:var(--rd-ink);border-left-color:var(--rd-ink)}
  body.rd-p-sponsors .sp-table thead th.is-pop + th{border-left-color:var(--rd-ink)}
  body.rd-p-sponsors .sp-table thead th.is-pop :is(.rd-paint,small){color:var(--rd-ink)}

  /* rows: what you get, then a mark per level */
  body.rd-p-sponsors .sp-table tbody :is(th,td){border-top:1px solid var(--rd-rule)}
  body.rd-p-sponsors .sp-table tbody tr:first-child :is(th,td){border-top:0}
  body.rd-p-sponsors .sp-table tbody tr.is-last + tr :is(th,td){border-top:2px solid var(--rd-ink)}
  body.rd-p-sponsors .sp-table tbody th{padding:13px 16px 13px clamp(16px,1.7vw,24px);font:600 16.5px/1.35 var(--rd-f-text)}
  body.rd-p-sponsors .sp-table tbody td{height:50px;text-align:center}
  body.rd-p-sponsors .sp-table tbody td.is-pop{background:var(--rd-paper-2)}
  body.rd-p-sponsors .sp-table tbody td > i{
    display:inline-block;width:12px;height:12px;background:var(--rd-orange);outline:2px solid var(--rd-ink);vertical-align:middle;
  }
  /* not included: a short rule */
  body.rd-p-sponsors .sp-table tbody td:not(:has(> i))::before{
    content:"";display:inline-block;width:14px;height:2px;background:var(--rd-rule-strong);vertical-align:middle;
  }
  body.rd-p-sponsors .sp-table tfoot td{padding:16px clamp(12px,1.4vw,20px);border-top:2px solid var(--rd-ink)}
  body.rd-p-sponsors .sp-table tfoot td.is-pop{background:var(--rd-paper-2)}
  /* the three request buttons: one line where the columns allow it (1100px+); below that a deliberate two-line slab */
  body.rd-p-sponsors .sp-table tfoot .rd-btn{
    white-space:normal;padding:9px 10px;line-height:1.25;font-size:clamp(11.5px,.92vw,13px);letter-spacing:.07em;
  }
}
@media (min-width:1100px){
  body.rd-p-sponsors .sp-table tfoot .rd-btn{white-space:nowrap;padding:0 12px;letter-spacing:.05em;font-stretch:100%}
}

/* the closing band */
@media (min-width:960px){
  body.rd-p-sponsors .sp-cta .rd-btns{margin-top:20px}
}

/* ---- 80-p-tournaments.css ---- */
/* =====================================================================
   80-p-tournaments.css — /tournaments  (pages/tournaments.html, body.rd-p-tournaments)
   Layout idea: RUN SHEET AND BRACKET. Pop Up & Play is a black scoreboard,
   then its dates as fixtures grouped by month, then game day as a paper run
   sheet (a ruled time bar from first tip to last tip, the gate on its stub).
   Tournament dates are an empty bracket drawn in ink on the floor, with the
   four entries in its slots.
   Every rule is scoped body.rd-p-tournaments.
   ===================================================================== */

/* hero: two buttons and one text link */
body.rd-p-tournaments .rd-hero .rd-btns{gap:12px 14px}
body.rd-p-tournaments .rd-hero .rd-btns > .rd-link{flex:0 0 auto;min-height:48px}
@media (min-width:640px){
  body.rd-p-tournaments .rd-hero .rd-btns > .rd-btn{flex:0 0 auto;padding-inline:18px}
}

/* ---- Pop Up & Play: the scoreboard ---- */
body.rd-p-tournaments .tn-popup{padding:clamp(26px,3.2vw,40px) 0 clamp(30px,3.6vw,46px)}
body.rd-p-tournaments .tn-popup .rd-lede{margin:0;color:var(--rd-chalk)}
body.rd-p-tournaments .tn-popup .rd-lede b{color:var(--rd-white)}
body.rd-p-tournaments .tn-cells{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(18px,2.2vw,26px);
}
body.rd-p-tournaments .tn-cells .rd-cell{padding:11px 12px 8px}
body.rd-p-tournaments .tn-cells .rd-cell dd{font-size:clamp(33px,10.6vw,50px)}
@media (min-width:640px){
  body.rd-p-tournaments .tn-cells{grid-template-columns:repeat(4,minmax(0,1fr))}
  body.rd-p-tournaments .tn-cells .rd-cell{padding:14px clamp(12px,1.6vw,20px) 10px}
  body.rd-p-tournaments .tn-cells .rd-cell dd{font-size:clamp(44px,5.7vw,82px)}   /* "2ND–6TH" has to fit a quarter of the floor */
}

/* ---- a sub-heading on the floor: Anton, then a rule to the edge ---- */
body.rd-p-tournaments .tn-sub{
  display:flex;align-items:center;gap:14px;margin:0 0 16px;
  font:400 var(--rd-fs-500)/1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase;
}
body.rd-p-tournaments .tn-sub::after{content:"";flex:1;min-width:12px;height:3px;background:var(--rd-ink)}

/* ---- the dates: fixtures grouped by month ---- */
body.rd-p-tournaments .tn-dates{padding:clamp(28px,3.6vw,48px) 0 0}
body.rd-p-tournaments .tn-months{display:grid;gap:10px}
body.rd-p-tournaments .tn-month{display:grid;grid-template-columns:66px minmax(0,1fr);min-width:0}
body.rd-p-tournaments .tn-month-h{
  display:flex;flex-direction:column;justify-content:center;gap:5px;margin:0;padding:10px 0 8px 12px;
  background:var(--rd-ink);color:var(--rd-white);
  font:400 28px/.9 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase;
}
body.rd-p-tournaments .tn-month-h span{
  color:var(--rd-chalk);font:800 11px/1.2 var(--rd-f-text);font-stretch:112%;letter-spacing:.1em;
}
body.rd-p-tournaments .tn-month-row{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));min-width:0}
body.rd-p-tournaments .pu-date{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  min-width:0;padding:10px 12px 11px;margin-left:-2px;
  background:var(--rd-paper);color:var(--rd-ink);border:2px solid var(--rd-ink);text-decoration:none;
  transition:background-color var(--rd-t-hover),color var(--rd-t-hover);
  -webkit-tap-highlight-color:transparent;
}
body.rd-p-tournaments .pu-date:first-child{margin-left:0}
body.rd-p-tournaments .pu-date .mo{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.rd-p-tournaments .pu-date .dy{
  order:2;margin:7px 0 10px;
  font:400 clamp(56px,16vw,64px)/.86 var(--rd-f-display);letter-spacing:.01em;font-variant-numeric:tabular-nums;
}
body.rd-p-tournaments .pu-date .wd{
  order:1;color:var(--rd-ink-2);
  font:800 11px/1.3 var(--rd-f-text);font-stretch:112%;letter-spacing:.1em;text-transform:uppercase;
  transition:color var(--rd-t-hover);
}
body.rd-p-tournaments .pu-date .go{
  order:3;margin-top:auto;white-space:nowrap;
  font:800 13.5px/1.3 var(--rd-f-text);text-decoration:underline;text-decoration-color:var(--rd-orange);
  text-decoration-thickness:2px;text-underline-offset:4px;
}
body.rd-p-tournaments .pu-date:active{background:var(--rd-ink);color:var(--rd-white)}
body.rd-p-tournaments .pu-date:active .wd{color:var(--rd-chalk)}
@media (hover:hover){
  body.rd-p-tournaments .pu-date:hover{background:var(--rd-ink);color:var(--rd-white)}
  body.rd-p-tournaments .pu-date:hover .wd{color:var(--rd-chalk)}
}
body.rd-p-tournaments .pu-date:focus-visible{outline-offset:-5px;z-index:1}
/* a date that has been played (the page's own script adds .past and writes "Played") */
body.rd-p-tournaments .pu-date.past{
  background:var(--rd-hatch);color:var(--rd-hatch-ink);border-color:var(--rd-rule-strong);pointer-events:none;
}
body.rd-p-tournaments .pu-date.past .wd{color:var(--rd-hatch-ink)}
body.rd-p-tournaments .pu-date.past .go{text-decoration:none}

body.rd-p-tournaments .tn-after{display:grid;gap:6px 28px;margin-top:16px}
body.rd-p-tournaments .tn-after .rd-notice{margin:0}
body.rd-p-tournaments .tn-after .rd-btn{margin-top:8px;min-height:48px;white-space:normal}

@media (min-width:640px){
  /* months side by side: a black month bar over its dates */
  body.rd-p-tournaments .tn-months{display:flex;gap:12px}
  body.rd-p-tournaments .tn-month{display:block;flex:var(--n,2) 1 0}
  body.rd-p-tournaments .tn-month-h{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:9px;padding:9px 12px 6px;font-size:24px;line-height:1}
  body.rd-p-tournaments .tn-month-h span{font-size:11px;font-stretch:125%;letter-spacing:.14em}
  body.rd-p-tournaments .pu-date{padding:12px clamp(10px,1.3vw,18px) 12px;margin-top:-2px}
  body.rd-p-tournaments .pu-date .wd{font-size:11px;font-stretch:118%;letter-spacing:.12em}
  body.rd-p-tournaments .pu-date .dy{margin:8px 0 12px;font-size:clamp(60px,8.2vw,112px)}
  body.rd-p-tournaments .pu-date .go{font-size:clamp(12.5px,1.15vw,14.5px)}
  body.rd-p-tournaments .tn-after{margin-top:18px}
  body.rd-p-tournaments .tn-after .rd-btn{justify-self:start;white-space:nowrap}
}
@media (min-width:960px){
  body.rd-p-tournaments .tn-after{grid-template-columns:minmax(0,1fr) auto;align-items:stretch}
  body.rd-p-tournaments .tn-after .rd-btn{margin-top:0}
}

/* ---- game day: the run sheet ---- */
body.rd-p-tournaments .tn-day{padding:clamp(34px,4.6vw,64px) 0 var(--rd-sec-y)}
body.rd-p-tournaments .tn-day-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px clamp(28px,4vw,64px);align-items:start}
body.rd-p-tournaments .tn-sheet{max-width:none}
body.rd-p-tournaments .tn-sheet-title{
  margin:18px 0 0;font:400 var(--rd-fs-600)/.94 var(--rd-f-display);letter-spacing:.006em;text-transform:uppercase;
}
body.rd-p-tournaments .tn-sheet-lede{margin:8px 0 0;font:500 clamp(17px,1.4vw,19px)/1.4 var(--rd-f-text)}
body.rd-p-tournaments .tn-sheet-lede b{font-weight:800}

/* the day as a ruled bar: ten hours from the first tip to the last */
body.rd-p-tournaments .tn-clock{margin:22px 0 14px}
body.rd-p-tournaments .tn-clock-ends{
  display:flex;justify-content:space-between;margin-bottom:6px;color:var(--rd-ink-2);
  font:800 11px/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;
}
body.rd-p-tournaments .tn-clock-bar{
  height:26px;box-sizing:border-box;border:2px solid var(--rd-ink);
  background:
    repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 2px),var(--rd-ink) calc(10% - 2px),var(--rd-ink) 10%),
    var(--rd-orange);
  background-origin:border-box,padding-box;
}
body.rd-p-tournaments .tn-clock ol{
  display:flex;justify-content:space-between;list-style:none;margin:7px 0 0;padding:0;
  font:500 13px/1.2 var(--rd-f-mono);letter-spacing:.02em;color:var(--rd-ink);
}
body.rd-p-tournaments .tn-clock li{flex:0 0 0;display:flex;justify-content:center;white-space:nowrap}
body.rd-p-tournaments .tn-clock li:first-child{justify-content:flex-start}
body.rd-p-tournaments .tn-clock li:last-child{justify-content:flex-end}
body.rd-p-tournaments .tn-kv{border-top:2px solid var(--rd-ink);padding-top:4px}
body.rd-p-tournaments .tn-gate{margin:0;font:500 16.5px/1.45 var(--rd-f-text)}
body.rd-p-tournaments .tn-gate b{
  display:inline-block;margin-right:6px;padding:3px 8px 2px;background:var(--rd-orange);color:var(--rd-ink);
  font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;vertical-align:1px;
}

body.rd-p-tournaments .tn-side{min-width:0}
body.rd-p-tournaments .tn-side h3{
  margin:0;padding-top:16px;border-top:3px solid var(--rd-ink);
  font:400 var(--rd-fs-500)/1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase;
}
body.rd-p-tournaments .tn-side h3 .rd-paint{display:block;margin-bottom:8px;color:var(--rd-ink-2)}
body.rd-p-tournaments .tn-side > p{margin:10px 0 0;max-width:34em;font:500 17px/1.5 var(--rd-f-text)}
body.rd-p-tournaments .tn-side h3.tn-bring-h{margin-top:26px}
body.rd-p-tournaments .tn-bring{margin-top:8px}
body.rd-p-tournaments .tn-bring li{font-weight:650;font-size:17px}
body.rd-p-tournaments .tn-side-go{display:grid;gap:6px;justify-items:start;margin-top:22px}
body.rd-p-tournaments .tn-side-go .rd-btn{min-height:60px;font-size:15px}
body.rd-p-tournaments .tn-side-go .rd-link{min-height:48px}
@media (min-width:960px){
  body.rd-p-tournaments .tn-day-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
}

/* ---- tournament dates: an empty bracket, drawn in ink ----
   Four slot lines, joined in pairs, joined again into the final. All rows are the same height, so the
   joins can be placed with percentages. */
body.rd-p-tournaments .tn-tourn{padding-top:0;padding-bottom:clamp(64px,7vw,96px)}
body.rd-p-tournaments .tn-bracket{
  display:grid;grid-template-columns:minmax(0,1fr) 20px 22px;grid-template-rows:repeat(4,1fr) auto;
}
body.rd-p-tournaments .tn-slot{
  grid-column:1;display:flex;flex-direction:column;justify-content:flex-end;min-width:0;min-height:104px;box-sizing:border-box;
  padding:14px 8px 10px 0;border-bottom:2px solid var(--rd-ink);
}
body.rd-p-tournaments .tn-slot:nth-child(1){grid-row:1}
body.rd-p-tournaments .tn-slot:nth-child(2){grid-row:2}
body.rd-p-tournaments .tn-slot:nth-child(3){grid-row:3}
body.rd-p-tournaments .tn-slot:nth-child(4){grid-row:4}
body.rd-p-tournaments .tn-slot > p{margin:0}
body.rd-p-tournaments .tn-slot .rd-paint{color:var(--rd-ink-2)}
body.rd-p-tournaments .tn-tba{
  margin-top:6px;font:400 clamp(38px,4vw,56px)/.92 var(--rd-f-display);letter-spacing:.006em;text-transform:uppercase;
}
body.rd-p-tournaments .tn-slot .tn-note{margin-top:6px;font:500 16px/1.4 var(--rd-f-text)}
/* a slot's Register button sits on its own line under the note */
body.rd-p-tournaments .tn-slot .tn-note .rd-btn{display:flex;width:max-content;margin-top:6px}
/* a pair's join: a vertical from the upper slot line to the lower, and the next round's line from its middle */
body.rd-p-tournaments .tn-join{position:relative;display:block;min-width:0}
body.rd-p-tournaments .tn-join--a,
body.rd-p-tournaments .tn-join--b{grid-column:2;margin-top:-2px;border-right:2px solid var(--rd-ink)}
body.rd-p-tournaments .tn-join--a{grid-row:2}
body.rd-p-tournaments .tn-join--b{grid-row:4}
body.rd-p-tournaments .tn-join--a::before,
body.rd-p-tournaments .tn-join--b::before{content:"";position:absolute;left:0;right:0;top:-0px;border-top:2px solid var(--rd-ink)}
body.rd-p-tournaments .tn-join--a::after,
body.rd-p-tournaments .tn-join--b::after{content:"";position:absolute;left:0;right:0;bottom:0;border-top:2px solid var(--rd-ink)}
body.rd-p-tournaments .tn-join--f{grid-column:3;grid-row:2 / span 3}
/* phones: the two pair-joins run on down the right edge into the final box */
body.rd-p-tournaments .tn-join--f::before{
  content:"";position:absolute;left:0;right:0;top:calc(16.667% - 1px);bottom:calc(16.667% - 1px);
  border:2px solid var(--rd-ink);border-left:0;
}
body.rd-p-tournaments .tn-join--f::after{
  content:"";position:absolute;right:0;top:50%;bottom:-22px;border-right:2px solid var(--rd-ink);
}
body.rd-p-tournaments .tn-final{
  grid-column:1 / -1;grid-row:5;margin-top:22px;padding:16px 16px 18px;border:2px solid var(--rd-ink);background:var(--rd-paper);
}
body.rd-p-tournaments .tn-final > p{
  margin:0 0 12px;font:400 var(--rd-fs-500)/1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase;
}
body.rd-p-tournaments .tn-final .rd-btn{width:100%;white-space:normal;font-size:13px}
body.rd-p-tournaments .tn-tourn .rd-notice{margin-top:22px}
/* three tournaments (.tn-bracket--3): slots 1 and 2 pair up as before; slot 3's line runs on across the pair
   column and joins the pair's line at the final */
body.rd-p-tournaments .tn-bracket--3{grid-template-rows:repeat(3,1fr) auto}
body.rd-p-tournaments .tn-bracket--3 .tn-join--b{grid-row:3;margin-top:0;border:0}
body.rd-p-tournaments .tn-bracket--3 .tn-join--b::before{content:none}
body.rd-p-tournaments .tn-bracket--3 .tn-join--f{grid-row:2 / span 2}
body.rd-p-tournaments .tn-bracket--3 .tn-join--f::before{top:calc(25% - 1px);bottom:0}
body.rd-p-tournaments .tn-bracket--3 .tn-join--f::after{top:62.5%}
body.rd-p-tournaments .tn-bracket--3 .tn-final{grid-row:4}

@media (min-width:960px){
  body.rd-p-tournaments .tn-bracket{
    grid-template-columns:minmax(0,5fr) minmax(0,2fr) minmax(0,5fr);grid-template-rows:repeat(4,1fr);
  }
  body.rd-p-tournaments .tn-slot{
    display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-content:end;align-items:end;column-gap:28px;
    min-height:108px;padding:14px 20px 10px 0;
  }
  body.rd-p-tournaments .tn-slot .rd-paint{grid-column:1 / -1}
  body.rd-p-tournaments .tn-tba{grid-column:1;margin-top:8px}
  body.rd-p-tournaments .tn-slot .tn-note{grid-column:2;justify-self:end;margin:0 0 5px;font-size:17px}
  body.rd-p-tournaments .tn-join--a,
  body.rd-p-tournaments .tn-join--b{border-right:0;border-left:2px solid var(--rd-ink)}
  body.rd-p-tournaments .tn-join--a::before,
  body.rd-p-tournaments .tn-join--b::before{top:50%;margin-top:-1px}
  body.rd-p-tournaments .tn-join--a::after,
  body.rd-p-tournaments .tn-join--b::after{content:none}
  body.rd-p-tournaments .tn-join--f::before{right:auto;border:0;border-left:2px solid var(--rd-ink)}
  body.rd-p-tournaments .tn-join--f::after{left:0;right:0;top:50%;bottom:auto;margin-top:-1px;border-right:0;border-top:2px solid var(--rd-ink)}
  body.rd-p-tournaments .tn-final{
    position:relative;grid-column:3;grid-row:2 / span 3;margin:0;padding:0;border:0;background:none;
  }
  body.rd-p-tournaments .tn-final > p{
    position:absolute;left:clamp(20px,2.4vw,32px);right:0;bottom:calc(50% + 12px);margin:0;
    font-size:var(--rd-fs-600);line-height:.94;letter-spacing:.006em;
  }
  body.rd-p-tournaments .tn-final .rd-btn{
    position:absolute;left:clamp(20px,2.4vw,32px);top:calc(50% + 18px);width:auto;max-width:calc(100% - clamp(20px,2.4vw,32px));
    white-space:normal;font-size:var(--rd-fs-btn);
  }
  /* three tournaments: the final line leaves the middle of the join (62.5% down the two rows it spans) */
  body.rd-p-tournaments .tn-bracket--3{grid-template-rows:repeat(3,1fr)}
  body.rd-p-tournaments .tn-bracket--3 .tn-slot{min-height:120px}
  body.rd-p-tournaments .tn-bracket--3 .tn-join--b::after{content:""}
  body.rd-p-tournaments .tn-bracket--3 .tn-final{grid-row:2 / span 2}
  body.rd-p-tournaments .tn-bracket--3 .tn-final > p{bottom:calc(37.5% + 12px)}
  body.rd-p-tournaments .tn-bracket--3 .tn-final .rd-btn{top:calc(62.5% + 18px)}
}

/* the closing band */
@media (min-width:960px){
  body.rd-p-tournaments .tn-team .rd-btns{margin-top:20px}
}

/* ---- 80-p-training.css ---- */
/* =====================================================================
   80-p-training.css — /training: "two halves of the court".
   Every rule is scoped body.rd-p-training.

   Layout idea: from 960px the page splits down a painted white half-court line —
   Private on the left half (a paper rate card), Group on the right half (three rows
   headed by the grade range). On phones the halves stack, each under a black band.
   ===================================================================== */

/* ---------- hero: beside the zone the headline stacks, as on /about and /contact, so it fills the black block ---------- */
@media (min-width:960px){
  body.rd-p-training .rd-hero h1{font-size:clamp(72px,7.9vw,112px);line-height:.88}
  body.rd-p-training .rd-hero h1 .o:not(.rd-plain){display:block}
}

body.rd-p-training .tr-halves{display:grid;grid-template-columns:minmax(0,1fr)}
body.rd-p-training .tr-half{min-width:0;padding-bottom:clamp(36px,6vw,56px);scroll-margin-top:calc(var(--rd-nav-h) + 4px)}
body.rd-p-training main + .rd-floor--close{margin-top:0}

/* ---------- the two headers ---------- */
/* phones and tablets: each half starts with a black band that runs edge to edge */
@media (max-width:959.98px){
  body.rd-p-training .tr-head{
    --rd-ring:var(--rd-orange);
    display:block;margin:0 calc(var(--rd-gut) * -1) 22px;padding:24px var(--rd-gut) 26px;
    background-color:var(--rd-ink);color:var(--rd-white);
    border-top:var(--rd-lw) solid var(--rd-line);border-bottom:var(--rd-lw) solid var(--rd-line);
  }
  body.rd-p-training .tr-head::after{display:none}
  /* the first band stands directly on the hero's baseline: one painted line, not two */
  body.rd-p-training .tr-half:first-child .tr-head{border-top:0}
  body.rd-p-training .tr-head .rd-kicker{color:var(--rd-chalk)}
  body.rd-p-training .tr-head .rd-kicker::before{background:var(--rd-orange);color:var(--rd-ink)}
  body.rd-p-training .tr-head h2{color:var(--rd-white);font-size:clamp(46px,13vw,64px)}
  body.rd-p-training .tr-head h2 .o:not(.rd-plain){display:inline;padding:0;margin:0;background:none;color:var(--rd-orange);line-height:inherit}
  body.rd-p-training .tr-head > p:not(.rd-kicker){color:var(--rd-chalk)}
  body.rd-p-training .tr-head > p:not(.rd-kicker) b{color:var(--rd-white);font-weight:700}
}
@media (min-width:960px){
  body.rd-p-training .tr-halves{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.rd-p-training .tr-half{padding-top:clamp(44px,5vw,72px);padding-bottom:clamp(48px,5.4vw,80px)}
  body.rd-p-training .tr-half:first-child{padding-right:clamp(24px,3vw,44px)}
  /* the half-court line: painted white, from the hero's baseline to the far end of the floor */
  body.rd-p-training .tr-half:last-child{padding-left:clamp(24px,3vw,44px);border-left:var(--rd-lw) solid var(--rd-line)}
  /* in half a floor the header is one column: heading, then its paragraph */
  body.rd-p-training .tr-head{display:block;margin-bottom:26px}
  body.rd-p-training .tr-head h2{font-size:clamp(46px,4.7vw,68px);white-space:nowrap}
  body.rd-p-training .tr-head > h2 + p{margin:16px 0 0;max-width:32em}
  /* the two headers share one row and the two bodies the next, so the rate card and the first group row start level */
  @supports (grid-template-rows:subgrid){
    body.rd-p-training .tr-halves{grid-template-rows:auto auto}
    body.rd-p-training .tr-half{display:grid;grid-template-rows:subgrid;grid-row:1 / span 2;align-content:start}
  }
}
body.rd-p-training .tr-head > p b{font-weight:800}

/* ---------- Private: the rate card ---------- */
body.rd-p-training .tr-card .rd-sheet-head{padding-inline:16px}
body.rd-p-training .tr-card .rd-rate{padding-block:16px 17px}
body.rd-p-training .tr-card .rd-rate-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:clamp(28px,2.7vw,38px)}
body.rd-p-training .tr-card .rd-rate-name small{
  color:var(--rd-ink-2);font:800 var(--rd-fs-label)/1.3 var(--rd-f-text);font-stretch:125%;letter-spacing:.16em;text-transform:uppercase;
}
body.rd-p-training .tr-card .rd-rate-desc{max-width:30em;margin-top:2px}
body.rd-p-training .tr-card .rd-price{font-size:clamp(38px,3.6vw,52px)}
body.rd-p-training .tr-card .rd-price small{font-size:max(.3em,12.5px);color:var(--rd-ink-2);font-weight:700}
@media (max-width:519.98px){
  /* phones: the price sits on the name's line, the sentence runs the full width under both */
  body.rd-p-training .tr-card .rd-rate{grid-template-columns:minmax(0,1fr) auto;align-items:baseline}
  body.rd-p-training .tr-card .rd-price{grid-row:1;flex-direction:column;align-items:flex-end;gap:2px;font-size:40px}
  body.rd-p-training .tr-card .rd-price small{font-size:12px}
  body.rd-p-training .tr-card .rd-rate-name{align-self:center}
  body.rd-p-training .tr-card .rd-rate-desc{grid-column:1 / -1}
  /* the shared phone arrow gets its own line under the sentence; here it closes the sentence's line instead,
     under the price, so each rate does not end on a blank line with an arrow in it */
  body.rd-p-training .tr-card .rd-rate:has(> .rd-lane-arrow) .rd-rate-desc{padding-right:44px}
  body.rd-p-training .tr-card .rd-rate .rd-lane-arrow{position:absolute;grid-area:auto;right:16px;bottom:22px;margin:0}
}
@container (min-width:520px){
  body.rd-p-training .tr-card .rd-sheet-head{padding-inline:clamp(18px,2.4vw,28px)}
  body.rd-p-training .tr-card .rd-price{flex-direction:column;align-items:flex-end;gap:3px;min-width:2.5em}
  body.rd-p-training .tr-card .rd-price small{font-size:12.5px}
}
/* this board never turns into the wide one-line table: it lives in half the floor */
@container (min-width:820px){
  body.rd-p-training .tr-card .rd-rate{grid-template-columns:minmax(0,1fr) auto 30px}
  body.rd-p-training .tr-card .rd-rate-name,
  body.rd-p-training .tr-card .rd-rate-desc{grid-column:1}
  body.rd-p-training .tr-card .rd-rate .rd-price{grid-column:2;grid-row:1 / span 2}
  body.rd-p-training .tr-card .rd-rate .rd-lane-arrow{grid-column:3;grid-row:1 / span 2}
}
body.rd-p-training .tr-book{margin-top:14px;min-height:60px;font-size:15px}

/* ---------- Group: three rows headed by the grade range ---------- */
body.rd-p-training .tr-groups{border-top:3px solid var(--rd-ink);border-bottom:3px solid var(--rd-ink)}
body.rd-p-training .tr-grp{
  position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);gap:0;
  padding:18px 0 20px;color:var(--rd-ink);text-decoration:none;border-top:2px solid var(--rd-ink);
  -webkit-tap-highlight-color:transparent;
}
body.rd-p-training .tr-grp:first-child{border-top:0}
body.rd-p-training .tr-grp::before{
  content:"";position:absolute;z-index:-1;inset:0 calc(var(--rd-gut) * -1);background:var(--rd-orange);
  transform:scaleX(0);transform-origin:left;transition:transform var(--rd-t-wipe) var(--rd-ease-out);
}
body.rd-p-training .tr-grp-grade{
  font:400 clamp(64px,19vw,84px)/.86 var(--rd-f-display);letter-spacing:.004em;text-transform:uppercase;white-space:nowrap;
}
body.rd-p-training .tr-grp-name{margin-top:12px;font:400 var(--rd-fs-500)/1 var(--rd-f-display);letter-spacing:.02em;text-transform:uppercase}
body.rd-p-training .tr-grp-desc{margin-top:6px;max-width:33em;font:500 16.5px/1.45 var(--rd-f-text)}
body.rd-p-training .tr-grp-facts{margin-top:10px;color:var(--rd-ink)}
/* the class price and its fact tag on one baseline: "$30 per class   PICK YOUR DATES" (member line under the price) */
body.rd-p-training .tr-grp-facts:has(> .rd-price){display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-top:12px}
body.rd-p-training .tr-grp-facts > .rd-price small:not(.ign-member-price){margin-left:.3em;color:var(--rd-ink-2)}
@media (hover:hover){ html:not(#rd) body.rd-p-training .tr-grp:hover .ign-member-price{color:var(--rd-ink)} html:not(#rd) body.rd-p-training .tr-grp:hover .ign-member-price::before{background:var(--rd-ink)} }
html:not(#rd) body.rd-p-training .tr-grp:active .ign-member-price{color:var(--rd-ink)}
body.rd-p-training .tr-grp-go{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:4px;justify-self:start;
  font:800 13px/1 var(--rd-f-text);font-stretch:116%;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:7px;
}
body.rd-p-training .tr-grp-go svg{flex:none;transition:transform var(--rd-t-hover) var(--rd-ease-out)}
@media (hover:hover){
  body.rd-p-training .tr-grp:hover::before{transform:scaleX(1)}
  body.rd-p-training .tr-grp:hover .tr-grp-go svg{transform:translateX(6px)}
}
body.rd-p-training .tr-grp:focus-visible{outline-offset:-3px}
body.rd-p-training .tr-grp:active::before{transform:scaleX(1);background:var(--rd-orange-press);transition-duration:var(--rd-t-press)}
@media (min-width:640px){
  body.rd-p-training .tr-grp{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:20px;align-items:start;padding:20px 0 16px}
  body.rd-p-training .tr-grp-grade{grid-column:1;grid-row:1 / span 4;font-size:clamp(60px,5.3vw,78px);padding-top:.04em}
  body.rd-p-training .tr-grp-name,
  body.rd-p-training .tr-grp-desc,
  body.rd-p-training .tr-grp-facts,
  body.rd-p-training .tr-grp-go{grid-column:2}
  body.rd-p-training .tr-grp-name{margin-top:0;font-size:clamp(27px,2.3vw,32px)}
}
@media (min-width:960px){
  /* the fill stops at the half-court line on the left and runs out to the edge of the floor on the right */
  body.rd-p-training .tr-grp::before{inset:0 calc(var(--rd-gut) * -1) 0 calc(clamp(24px,3vw,44px) * -1)}
  /* in half a floor the grade range steps down so "7th–12th" stays inside its column */
  body.rd-p-training .tr-grp-grade{font-size:clamp(48px,4.9vw,74px)}
}

/* ---- 90-logo.css ---- */
/* =====================================================================
   90-logo.css: the outlined IGN Academy logo in every header and footer
   (the owner's decision, Oct 8 2026).
   The logo sits straight on the black: no paper placard behind it. It
   carries the word ACADEMY itself, so the separate word next to it is
   not drawn any more (it stays in the markup for screen readers).
   The pages keep their own <img src="logo.png">; the picture is swapped
   here, in CSS, so no page has to change: the <img> box is given the new
   logo as its background and its own picture is pushed out of the box.
   File: redesign/static/logo-outlined.png -> /rd/logo-outlined.png
   (made from brand/ign-academy-logo-outlined.png, 182 x 160).
   ===================================================================== */
:root{--rd-logo:url("/rd/logo-outlined.png");--rd-logo-h:54px;--rd-logo-w:calc(var(--rd-logo-h) * 1.1375)}

/* ---- pages with the nav bar ---- */
body:has(> nav.nav) .nav-logo{background:none;padding:0;gap:0}
body:has(> nav.nav) .nav-logo img{
  box-sizing:border-box;height:var(--rd-logo-h);width:var(--rd-logo-w);padding-left:var(--rd-logo-w);
  background:var(--rd-logo) 0 50% / contain no-repeat;
}
body:has(> nav.nav) .nav-logo .wordmark,
body:has(> nav.nav) .footer-lockup .wordmark,
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .foot-lockup .wordmark{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
body:has(> nav.nav) .nav-logo:focus-visible{outline-offset:2px;outline-color:var(--rd-orange)}

/* ---- the footer ---- */
body:has(> nav.nav) .footer-lockup{background:none;padding:0;gap:0}
body:has(> nav.nav) .footer-lockup img,
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .foot-lockup img{
  --rd-logo-h:92px;
  box-sizing:border-box;height:var(--rd-logo-h);width:var(--rd-logo-w);padding-left:var(--rd-logo-w);
  background:var(--rd-logo) 0 50% / contain no-repeat;
}
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .foot-lockup{background:none;padding:0;gap:0}

/* ---- hub pages (the list of leagues, the list of camps): the logo above the title ---- */
body:where(:has(#svcGrid),:has(#regForm),:has(.bigcheck),:has(.hub)) .hero .hero-logo{
  --rd-logo-h:84px;
  box-sizing:border-box;height:var(--rd-logo-h);width:var(--rd-logo-w);padding:0 0 0 var(--rd-logo-w);
  background:var(--rd-logo) 0 50% / contain no-repeat;
}

/* ---- sign-up pages, rent and the thank-you pages (no nav bar): the top of the hero is the bar ---- */
body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero::before{
  content:"";content:"" / "";
  width:var(--rd-logo-w);padding:0;background:none;
}
body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero .hero-logo{
  --rd-logo-h:54px;
  left:var(--rd-hx);top:calc((var(--rd-nav-h) - var(--rd-logo-h)) / 2);
  height:var(--rd-logo-h);width:var(--rd-logo-w);padding:0 0 0 var(--rd-logo-w);margin:0;
  background:var(--rd-logo) 0 50% / contain no-repeat;
}
body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero:not(:has(.hero-logo))::before{
  background:var(--rd-logo) 0 50% / auto var(--rd-logo-h) no-repeat;
}
/* the link laid over the logo (the way home) is exactly as wide as the logo */
body:is(:has(#svcGrid),:has(#regForm),:has(.bigcheck)) .hero .rd-home{width:var(--rd-logo-w);padding:0;overflow:hidden}