/* sports-moment / locker-room (own skeleton: variants/locker-room.html + .js)
   The dressing room after the match. The first screen is a player's stall and the
   coach's chalkboard on a painted cinderblock wall: the stall has a steel nameplate, the
   hero art taped to its back wall and the JERSEY on a wooden hanger (inline SVG: brand
   cloth, team stripes on the sleeves and sides, the name arched across the shoulders and
   the TICKER as the number); the chalkboard carries the kicker and headline in chalk and,
   when the brief has steps, THE PLAY: the brief's own steps as numbered O's joined by
   chalk arrows, X's around them (locker-room.js; no steps, no play). The calls to action
   sit under the chalk tray. A band of team stripes runs along the wall below.
   The rest of the room: the facts as the roster on a clipboard team sheet, the timeline
   as the play-by-play on a second board, the lore as a team talk taped to a steel locker
   door, the numbers on a whiteboard, features as kit tags, quotes as marker on athletic
   tape, questions in a ring-binder playbook, the contract on a steel locker plate.
   Polarity: light (painted block, oak, green slate), whatever the brand; the brand is the
   jersey cloth, the stripes and the marker. Type: athletic block capitals, chalk, marker,
   typewriter. */

:root {
  --lr-top-h: 58px;
  --lr-block: #e7e2d7;
  --lr-block-2: #ddd7ca;
  --lr-mortar: #c9c1b0;
  --lr-oak-hi: #c89458;
  --lr-oak: #9c6a37;
  --lr-oak-lo: #6a431f;
  --lr-slate: #253d2e;
  --lr-slate-2: #1d3226;
  --lr-chalk: #f4f2e8;
  --lr-chalk-2: color-mix(in srgb, var(--wl-accent) 45%, #fff6c8);
  --lr-steel-hi: #d7dde2;
  --lr-steel: #a9b2ba;
  --lr-steel-lo: #6f7982;
  --lr-tape: #f7f3e4;
  --lr-ink: #1b1e24;
  --lr-marker: color-mix(in srgb, var(--wl-accent-on-light) 80%, #111);
  --lr-cloth: var(--wl-accent);
  --lr-cloth-ink: var(--wl-on-accent);
  --lr-trim: var(--wl-secondary);
  --lr-block-font: "Freshman", "College Block", "Impact", "Haettenschweiler", "Arial Black", "Liberation Sans", sans-serif;
  --lr-chalk-font: "Chalkduster", "Chalkboard SE", "Segoe Print", "Bradley Hand", "Comic Sans MS", "Liberation Sans", sans-serif;
  --lr-marker-font: "Marker Felt", "Permanent Marker", "Segoe Print", "Comic Sans MS", "Liberation Sans", sans-serif;
  --lr-type: "Courier Prime", "Courier New", Courier, "Liberation Mono", monospace;

  --v-bg: var(--lr-block);
  --v-fg: var(--lr-ink);
  --v-soft: #3d424b;
  --v-faint: #6c717a;
  --v-line: rgb(27 30 36 / 0.14);
  --v-line-strong: rgb(27 30 36 / 0.3);
  --v-surface: #f4f1ea;
  --v-surface-2: #e9e5dc;
  --v-card-bg: #fbfaf6;
  --v-accent: var(--wl-accent);
  --v-accent-text: var(--wl-accent-on-light);
  --v-on-accent: var(--wl-on-accent);
  --v-secondary: var(--wl-secondary);
  --v-seg-1: var(--wl-accent);
  --v-seg-2: #2b6cd4;
  --v-seg-3: var(--wl-secondary);
  --v-seg-4: #1d8a4e;
  --v-seg-5: #c33;
  --v-seg-6: #777;
  --v-font-body: "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  --v-font-display: var(--lr-block-font);
  --v-font-mono: var(--lr-type);
  --v-display-weight: 900;
  --v-display-tracking: 0.01em;
  --v-display-case: uppercase;
  --v-display-lh: 0.95;
  --v-title-size: clamp(2rem, 4vw, 3.4rem);
  --v-radius: 4px;
  --v-radius-sm: 3px;
  --v-radius-lg: 8px;
  --v-border: 1px solid var(--v-line);
  --v-shadow: 0 20px 40px -24px rgb(40 30 10 / 0.6);
  --v-maxw: 1140px;
  --v-ease: cubic-bezier(0.2, 0.75, 0.2, 1);

  --wl-label-lore: "Team talk";
  --wl-label-features: "The kit";
  --wl-label-supply: "Stat sheet";
  --wl-label-flow: "The play";
  --wl-label-timeline: "Play by play";
  --wl-label-comparison: "Stat sheet";
  --wl-label-stats: "Stat sheet";
  --wl-label-tweet: "Pinned up";
  --wl-label-gallery: "Taped inside";
  --wl-label-facts: "Roster";
  --wl-label-quotes: "On the tape";
  --wl-label-faq: "Playbook";
  --wl-label-access: "Your locker";
}

html { background: var(--lr-block); }
body { background: var(--lr-block); }
.lr { min-height: 100vh; }
.lr-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* the painted block wall: staggered courses, mortar lines */
.lr-wall, .lr-flow {
  background-color: var(--lr-block);
  background-image:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgb(255 255 255 / 0.5), transparent 70%),
    linear-gradient(180deg, var(--lr-mortar) 0 2px, transparent 2px),
    conic-gradient(from 0deg at 3px 60px, transparent 0 270deg, var(--lr-mortar) 0),
    conic-gradient(from 0deg at 3px 60px, transparent 0 270deg, var(--lr-mortar) 0);
  background-size: 100% 100%, 100% 60px, 124px 120px, 124px 120px;
  background-position: 0 0, 0 0, 0 0, 62px 60px;
}

/* ------------------------------------------------------------------ top bar */
.lr-top {
  position: sticky; top: 0; z-index: 40;
  height: var(--lr-top-h);
  display: flex; align-items: center; gap: 20px;
  padding: 0 var(--v-pad-x);
  background: #23272e;
  color: #f2f2ee;
  box-shadow: 0 3px 0 var(--lr-cloth), 0 6px 0 var(--lr-trim);
}
.lr-brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; flex: 0 1 auto; text-decoration: none; }
.lr-brand__mark { width: 34px; height: 34px; flex: none; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 2px #f2f2ee, 0 0 0 4px var(--lr-cloth); }
.lr-brand__name { font-family: var(--lr-block-font); font-weight: 900; font-size: 1.3rem; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lr-brand__tick { flex: none; font-family: var(--lr-type); font-weight: 700; font-size: 0.86rem; color: #c9ccd2; }
.lr-nav { display: flex; flex: 1 1 0; min-width: 0; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.lr-nav::-webkit-scrollbar { display: none; }
.lr-nav .wl-nav__link:first-child { margin-left: auto; }
.lr-nav .wl-nav__link { padding: 6px 11px; white-space: nowrap; text-decoration: none; font-family: var(--lr-type); font-size: 0.82rem; font-weight: 700; text-transform: uppercase; color: #c9ccd2; border-radius: 3px; }
.lr-nav .wl-nav__link:hover, .lr-nav .wl-nav__link.is-active { background: #f2f2ee; color: #23272e; }
.lr-net { flex: none; padding: 4px 10px; border: 1.5px solid #6f7680; border-radius: 3px; font-family: var(--lr-type); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #c9ccd2; }

/* ------------------------------------------------------------------ the room */
.lr-room { position: relative; isolation: isolate; overflow: hidden; min-height: calc(100vh - var(--lr-top-h)); }
.lr-wall { position: absolute; inset: 0; z-index: -3; }
.lr-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 54px; z-index: 3; background: repeating-linear-gradient(90deg, #3a3f46 0 3px, #30353b 3px 9px); box-shadow: 0 -2px 0 #262a30; }
.lr-bench { position: absolute; left: 0; right: 0; top: -30px; height: 30px; background: linear-gradient(180deg, var(--lr-oak-hi), var(--lr-oak) 50%, var(--lr-oak-lo)); box-shadow: 0 8px 14px -6px rgb(0 0 0 / 0.5); }
.lr-room__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
  column-gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding: 26px var(--v-pad-x) 0;
  min-height: calc(100vh - var(--lr-top-h));
  max-width: 1400px; margin: 0 auto;
}

/* the stall */
.lr-stall {
  position: relative; align-self: stretch;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  padding: 14px 14px 0;
  background: linear-gradient(90deg, var(--lr-oak-lo), var(--lr-oak) 8% 92%, var(--lr-oak-lo));
  border-radius: 6px 6px 0 0;
  box-shadow: inset 0 2px 0 rgb(255 230 190 / 0.3), 0 30px 50px -20px rgb(40 25 5 / 0.55);
}
.lr-stall__plate {
  margin: 0 auto 12px; padding: 8px 20px 7px; max-width: 100%;
  background: linear-gradient(180deg, var(--lr-steel-hi), var(--lr-steel) 60%, var(--lr-steel-lo));
  border-radius: 3px;
  box-shadow: inset 0 1px 0 #fff, 0 2px 3px rgb(0 0 0 / 0.4);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lr-stall__name { font-family: var(--lr-block-font); font-weight: 900; font-size: clamp(1.1rem, 1.8vw, 1.5rem); letter-spacing: 0.08em; text-transform: uppercase; color: #22262c; text-shadow: 0 1px 0 rgb(255 255 255 / 0.6); }
.lr-stall__bay {
  position: relative; min-height: 560px; overflow: hidden;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.45), transparent 22%, transparent 80%, rgb(0 0 0 / 0.35)),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.16) 0 2px, transparent 2px 46px),
    color-mix(in srgb, var(--lr-cloth) 18%, #2d2621);
  box-shadow: inset 12px 0 20px -10px rgb(0 0 0 / 0.6), inset -12px 0 20px -10px rgb(0 0 0 / 0.6);
}
.lr-photo { position: absolute; top: 14px; left: 50%; width: 56%; margin: 0; padding: 7px 7px 20px; background: #fbfaf5; transform: translateX(-50%) rotate(-2.6deg); box-shadow: 0 10px 18px -8px rgb(0 0 0 / 0.6); }
.lr-photo::before, .lr-photo::after { content: ""; position: absolute; top: -9px; width: 62px; height: 20px; background: rgb(247 243 228 / 0.86); box-shadow: 0 1px 2px rgb(0 0 0 / 0.2); }
.lr-photo::before { left: -16px; transform: rotate(-24deg); }
.lr-photo::after { right: -16px; transform: rotate(20deg); }
.lr-photo__img { aspect-ratio: 16 / 10; overflow: hidden; background: #333; }
.lr-photo__img .wl-hero-img { width: 100%; height: 100%; object-fit: cover; }
.lr-photo:has(.wl-media--none), .lr-photo:has(.wl-media--post) { display: none; }
.lr-rod { position: absolute; top: 164px; left: 6%; right: 6%; height: 9px; border-radius: 5px; background: linear-gradient(180deg, #eef1f3, #9aa3ab 60%, #5e666e); box-shadow: 0 3px 5px rgb(0 0 0 / 0.5); }
.lr-jersey { position: absolute; top: 158px; left: 50%; width: min(92%, 380px); height: auto; transform: translateX(-50%); overflow: visible; filter: drop-shadow(0 22px 20px rgb(0 0 0 / 0.5)); transform-origin: 50% 0; }
.lr-hanger__hook { fill: none; stroke: #c9ced3; stroke-width: 5; stroke-linecap: round; }
.lr-hanger { fill: none; stroke: var(--lr-oak-hi); stroke-width: 11; stroke-linecap: round; }
.lr-jersey__body { fill: var(--lr-cloth); }
.lr-jersey__stripe { fill: none; stroke: var(--lr-trim); stroke-width: 9; }
.lr-jersey__side { fill: none; stroke: var(--lr-trim); stroke-width: 8; }
.lr-jersey__crease { fill: none; stroke: #000; stroke-opacity: 0.07; stroke-width: 10; stroke-linecap: round; }
.lr-jersey__collar { fill: none; stroke: var(--lr-trim); stroke-width: 9; stroke-linecap: round; }
.lr-jersey__edge { fill: none; stroke: rgb(0 0 0 / 0.35); stroke-width: 2; }
.lr-jersey__name, .lr-jersey__num {
  font-family: var(--lr-block-font); font-weight: 900; text-transform: uppercase;
  fill: var(--lr-cloth-ink);
  stroke: var(--lr-trim); paint-order: stroke fill; stroke-linejoin: round;
}
.lr-jersey__name { font-size: 34px; letter-spacing: 0.08em; stroke-width: 4px; }
.lr-jersey__num { font-size: 150px; letter-spacing: -0.01em; stroke-width: 9px; }

/* the chalkboard */
.lr-board { position: relative; align-self: start; margin-top: 18px; z-index: 2; }
.lr-board__slate {
  position: relative;
  padding: clamp(22px, 2.6vw, 34px) clamp(22px, 3vw, 40px) clamp(20px, 2.4vw, 30px);
  background:
    radial-gradient(ellipse 40% 30% at 22% 30%, rgb(255 255 255 / 0.07), transparent 70%),
    radial-gradient(ellipse 30% 40% at 78% 70%, rgb(255 255 255 / 0.06), transparent 70%),
    repeating-linear-gradient(8deg, rgb(255 255 255 / 0.018) 0 2px, transparent 2px 13px),
    linear-gradient(160deg, var(--lr-slate), var(--lr-slate-2));
  border: 16px solid var(--lr-oak);
  border-image: linear-gradient(135deg, var(--lr-oak-hi), var(--lr-oak) 40%, var(--lr-oak-lo)) 1;
  box-shadow: 0 30px 50px -22px rgb(30 20 5 / 0.7);
  color: var(--lr-chalk);
}
.lr-board__kicker { margin: 0 0 12px; font-family: var(--lr-chalk-font); font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lr-chalk-2); filter: url(#lr-chalk); }
.lr-board__headline {
  margin: 0; font-family: var(--lr-chalk-font); font-weight: 700;
  font-size: clamp(2.2rem, 4.2vw, 3.9rem); line-height: 1.02; letter-spacing: 0.005em;
  color: var(--lr-chalk); filter: url(#lr-chalk); text-wrap: balance;
}
.lr-board__headline[data-len="m"] { font-size: clamp(2rem, 3.5vw, 3.2rem); }
.lr-board__headline[data-len="l"] { font-size: clamp(1.6rem, 2.6vw, 2.4rem); }
.lr-board__headline .wl-w:last-child { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 8px; text-decoration-color: var(--lr-chalk-2); }
.lr-board__sub { margin: 14px 0 0; max-width: 40rem; font-family: var(--lr-chalk-font); font-size: clamp(0.98rem, 1.2vw, 1.1rem); line-height: 1.45; color: rgb(244 242 232 / 0.86); filter: url(#lr-chalk); }
.lr-no-play .lr-board__headline { font-size: clamp(2.6rem, 5vw, 4.6rem); }

.lr-play { position: relative; aspect-ratio: 1000 / 360; margin: 14px 0 4px; }
.lr-play__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: url(#lr-chalk); }
.lr-play__court { fill: none; stroke: rgb(244 242 232 / 0.16); stroke-width: 2.5; }
.lr-play__route { fill: none; stroke: var(--lr-chalk); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 16 11; }
.lr-play__head { fill: none; stroke: var(--lr-chalk); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.lr-play__x { fill: none; stroke: var(--lr-chalk-2); stroke-width: 5.5; stroke-linecap: round; }
.lr-play__o { fill: rgb(244 242 232 / 0.06); stroke: var(--lr-chalk); stroke-width: 5; }
.lr-play__labels { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.lr-play__label {
  position: absolute; left: var(--x); top: var(--y); width: max-content; max-width: 150px;
  transform: translate(-50%, -50%);
  font-family: var(--lr-chalk-font); font-size: 0.86rem; line-height: 1.2; text-align: center; color: var(--lr-chalk);
  filter: url(#lr-chalk);
}
.lr-play__n { display: grid; place-items: center; width: 2.2em; height: 2.2em; margin: 0 auto; font-size: 1.1rem; font-weight: 700; }
.lr-play__t { position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); width: max-content; max-width: 150px; }
.lr-play__label--up .lr-play__t { top: auto; bottom: calc(100% + 4px); }

.lr-board__tray { position: relative; height: 16px; margin: 0 -8px; background: linear-gradient(180deg, var(--lr-oak-hi), var(--lr-oak-lo)); border-radius: 0 0 4px 4px; box-shadow: 0 8px 12px -6px rgb(0 0 0 / 0.5); }
.lr-chalk { position: absolute; bottom: 12px; left: 16%; width: 46px; height: 9px; border-radius: 3px; background: #f5f3ea; box-shadow: inset -3px 0 0 #d9d6c9; transform: rotate(-4deg); }
.lr-chalk--2 { left: 24%; width: 30px; background: var(--lr-chalk-2); transform: rotate(6deg); }
.lr-eraser { position: absolute; bottom: 12px; right: 12%; width: 84px; height: 22px; border-radius: 3px; background: linear-gradient(180deg, #5d4a3a 0 45%, #d9d4c6 45%); }
.lr-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.lr-cta .wl-btn { border-radius: 2px; border: 0; padding: 0.8em 1.2em; background: var(--lr-tape); color: var(--lr-ink); font-family: var(--lr-marker-font); font-size: 1rem; font-weight: 700; box-shadow: 0 1px 0 rgb(255 255 255 / 0.7) inset, 0 6px 12px -6px rgb(0 0 0 / 0.5); clip-path: polygon(0 6%, 3% 0, 97% 4%, 100% 0, 99% 92%, 100% 100%, 2% 96%, 0 100%); }
.lr-cta .wl-btn--primary { background: var(--lr-cloth); color: var(--lr-cloth-ink); }
.lr-cta .wl-btn__ca { font-family: var(--lr-type); }

/* the band of team stripes along the wall */
.lr-stripes { height: 34px; background: linear-gradient(180deg, var(--lr-cloth) 0 40%, var(--lr-block) 40% 60%, var(--lr-trim) 60%); }

/* ------------------------------------------------------------------ the rest of the room */
.lr-flow { position: relative; padding-bottom: clamp(90px, 10vw, 140px); }
.lr-flow .wl-sec { padding: clamp(70px, 9vw, 120px) var(--v-pad-x) 0; }
.lr-flow .wl-sec__head { margin-bottom: clamp(24px, 3vw, 40px); }
.lr-flow .wl-kicker { display: inline-flex; margin: 0 0 14px; padding: 6px 16px 5px; background: var(--lr-tape); color: var(--lr-ink); font-family: var(--lr-marker-font); font-size: 1rem; letter-spacing: 0.04em; text-transform: none; transform: rotate(-1.4deg); box-shadow: 0 2px 4px rgb(0 0 0 / 0.18); clip-path: polygon(0 8%, 2% 0, 98% 6%, 100% 0, 99% 100%, 1% 92%); }
.lr-flow .wl-kicker .wl-ord { opacity: 1; font-weight: 700; color: var(--lr-marker); }
.lr-flow .wl-sec__title { color: #2a2f37; text-shadow: 1px 1px 0 rgb(255 255 255 / 0.5); }

/* roster: a team sheet on a clipboard */
.lr-flow .wl-facts {
  counter-reset: lr-no; position: relative; max-width: 740px; gap: 0;
  padding: 70px clamp(20px, 3vw, 36px) 28px;
  background: #fff;
  border: 16px solid #a07c52; border-radius: 10px;
  box-shadow: 0 30px 50px -26px rgb(40 25 5 / 0.7);
}
.lr-flow .wl-facts::before { content: ""; position: absolute; top: -26px; left: 50%; width: 140px; height: 50px; margin-left: -70px; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, var(--lr-steel-hi), var(--lr-steel-lo)); box-shadow: inset 0 1px 0 #fff, 0 4px 6px rgb(0 0 0 / 0.3); }
.lr-flow .wl-facts::after { content: "No.     Team sheet"; position: absolute; top: 36px; left: clamp(20px, 3vw, 36px); right: clamp(20px, 3vw, 36px); padding-bottom: 6px; border-bottom: 2px solid var(--lr-ink); font-family: var(--lr-type); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; white-space: pre; color: var(--lr-ink); }
.lr-flow .wl-fact { counter-increment: lr-no; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 12px 0; background: none; border: 0; border-bottom: 1px solid #c8d6e8; border-radius: 0; font-family: var(--lr-type); font-size: 1.02rem; }
.lr-flow .wl-fact__mark { width: auto; height: auto; background: none; color: var(--lr-marker); font-family: var(--lr-block-font); font-size: 1.7rem; line-height: 1; place-items: start; }
.lr-flow .wl-fact__mark .wl-glyph { display: none; }
.lr-flow .wl-fact__mark::before { content: counter(lr-no, decimal-leading-zero); }

/* play by play: a second board */
.lr-flow .wl-sec--timeline .wl-sec__body,
.lr-flow .wl-sec--infographic[data-graphic="flow"] .wl-sec__body,
.lr-flow .wl-sec--infographic[data-graphic="timeline"] .wl-sec__body {
  padding: clamp(24px, 3vw, 40px);
  background: repeating-linear-gradient(8deg, rgb(255 255 255 / 0.018) 0 2px, transparent 2px 13px), linear-gradient(160deg, var(--lr-slate), var(--lr-slate-2));
  border: 14px solid var(--lr-oak); border-image: linear-gradient(135deg, var(--lr-oak-hi), var(--lr-oak) 40%, var(--lr-oak-lo)) 1;
  color: var(--lr-chalk);
  box-shadow: 0 30px 50px -24px rgb(30 20 5 / 0.7);
}
.lr-flow .wl-milestones { counter-reset: lr-step; max-width: none; gap: 20px; }
.lr-flow .wl-milestones::before { display: none; }
.lr-flow .wl-ms { counter-increment: lr-step; grid-template-columns: 54px minmax(0, 1fr); gap: 18px; filter: url(#lr-chalk); }
.lr-flow .wl-ms__dot { display: none; }
.lr-flow .wl-ms::before { content: counter(lr-step); display: grid; place-items: center; width: 50px; height: 50px; border: 4px solid var(--lr-chalk); border-radius: 50%; font-family: var(--lr-chalk-font); font-size: 1.3rem; font-weight: 700; }
.lr-flow .wl-ms__when { color: var(--lr-chalk-2); font-family: var(--lr-chalk-font); letter-spacing: 0.08em; }
.lr-flow .wl-ms__title { font-family: var(--lr-chalk-font); font-size: 1.4rem; color: var(--lr-chalk); }
.lr-flow .wl-ms__text { font-family: var(--lr-chalk-font); color: rgb(244 242 232 / 0.8); }
.lr-flow .wl-flowchart { gap: 12px; }
.lr-flow .wl-node__card { background: none; border: 3px dashed rgb(244 242 232 / 0.5); color: var(--lr-chalk); font-family: var(--lr-chalk-font); }
.lr-flow .wl-node__card .wl-ord { background: none; border: 4px solid var(--lr-chalk); color: var(--lr-chalk); }
.lr-flow .wl-node__text { color: rgb(244 242 232 / 0.8); }
.lr-flow .wl-edge__line, .lr-flow .wl-edge__head { stroke: var(--lr-chalk); }

/* team talk: a sheet taped to a steel locker door */
.lr-flow .wl-sec--lore .wl-sec__body {
  position: relative; max-width: 900px;
  padding: 104px clamp(20px, 4vw, 56px) clamp(30px, 4vw, 56px);
  background:
    repeating-linear-gradient(180deg, transparent 0 22px, #5f676f 22px 30px) 50% 30px / 36% 68px no-repeat,
    linear-gradient(90deg, rgb(255 255 255 / 0.22), transparent 30%, rgb(0 0 0 / 0.08) 70%, rgb(255 255 255 / 0.12)),
    linear-gradient(180deg, var(--lr-steel), color-mix(in srgb, var(--lr-steel) 80%, #56606a));
  border-radius: 6px;
  box-shadow: inset 0 0 0 3px rgb(0 0 0 / 0.15), inset 0 0 0 5px rgb(255 255 255 / 0.25), 0 30px 50px -26px rgb(20 20 20 / 0.7);
}
.lr-flow .wl-sec--lore .wl-sec__body::after { content: ""; position: absolute; right: 26px; top: 46%; width: 16px; height: 86px; border-radius: 8px; background: linear-gradient(90deg, #4a525a, #c8cfd5, #4a525a); }
.lr-flow .wl-lore {
  position: relative; max-width: 42rem; padding: 36px clamp(20px, 3vw, 40px) 30px;
  background: repeating-linear-gradient(180deg, #fffefb 0 31px, #cfdcec 31px 32px);
  box-shadow: 0 12px 24px -12px rgb(0 0 0 / 0.5);
  transform: rotate(-0.7deg);
}
.lr-flow .wl-lore::before, .lr-flow .wl-lore::after { content: ""; position: absolute; top: -10px; width: 90px; height: 24px; background: rgb(247 243 228 / 0.9); }
.lr-flow .wl-lore::before { left: 20px; transform: rotate(-6deg); }
.lr-flow .wl-lore::after { right: 20px; transform: rotate(5deg); }
.lr-flow .wl-lore__lead, .lr-flow .wl-lore__p { font-family: var(--lr-type); font-size: 1.02rem; line-height: 32px; font-weight: 400; color: var(--lr-ink); margin: 0 0 32px; }
.lr-flow .wl-lore__lead { font-weight: 700; }
.lr-flow .wl-lore p:last-child { margin-bottom: 0; }

/* the numbers: a whiteboard in marker */
.lr-flow .wl-sec--infographic:not([data-graphic="flow"]):not([data-graphic="timeline"]) .wl-sec__body {
  padding: clamp(24px, 3vw, 40px);
  background: linear-gradient(135deg, #ffffff, #eef1f4);
  border: 12px solid #c6ccd2; border-radius: 4px;
  box-shadow: inset 0 0 0 1px #9aa3ab, 0 30px 50px -26px rgb(20 20 20 / 0.6);
  font-family: var(--lr-marker-font);
}
.lr-flow .wl-bar__label { font-family: var(--lr-marker-font); font-weight: 400; color: #1f3b7a; }
.lr-flow .wl-bar__track { border-radius: 2px; height: 16px; }
.lr-flow .wl-bar__bg { fill: transparent; }
.lr-flow .wl-bar__value { font-family: var(--lr-marker-font); color: #1f3b7a; }
.lr-flow .wl-stats { background: none; border: 0; gap: 14px; }
.lr-flow .wl-stat { background: none; border: 2px solid #1f3b7a; border-radius: 10px; }
.lr-flow .wl-stat__label { font-family: var(--lr-marker-font); letter-spacing: 0.04em; color: #1f3b7a; }
.lr-flow .wl-stat__value { font-family: var(--lr-block-font); font-size: clamp(1.3rem, 2.2vw, 1.9rem); color: var(--lr-marker); overflow-wrap: anywhere; }
.lr-flow .wl-caption { font-family: var(--lr-marker-font); color: #555; }
.lr-flow .wl-table-wrap { background: #fff; }

/* the kit: tags on strings */
.lr-flow .wl-features { gap: 28px; }
.lr-flow .wl-feature {
  padding: 58px 24px 26px; border: 0; border-radius: 4px;
  background: radial-gradient(circle 9px at 50% 26px, var(--lr-block) 0 8px, #b58b52 8.5px 11px, transparent 11.5px), linear-gradient(180deg, #e3c48f, #d4ae70);
  clip-path: polygon(22% 0, 78% 0, 100% 12%, 100% 100%, 0 100%, 0 12%);
  transform: rotate(calc(var(--r, 0) * 2deg)); transform-origin: 50% 0;
  color: #3b2a14;
  box-shadow: none;
}
.lr-flow .wl-feature:hover { transform: rotate(0deg); }
.lr-flow .wl-feature .wl-ord { top: 18px; right: 20px; color: #6b5330; font-family: var(--lr-type); }
.lr-flow .wl-feature__icon { width: 50px; height: 50px; margin-bottom: 16px; border-radius: 50%; background: var(--lr-cloth); color: var(--lr-cloth-ink); }
.lr-flow .wl-feature__icon .wl-glyph { width: 24px; height: 24px; }
.lr-flow .wl-feature__title { font-family: var(--lr-marker-font); font-size: 1.3rem; color: #2b1d0a; }
.lr-flow .wl-feature__text { color: #4a3718; font-family: var(--lr-type); font-size: 0.94rem; }

/* on the tape: marker on athletic tape */
.lr-flow .wl-quotes { grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 900px; }
.lr-flow .wl-quote {
  padding: 18px 28px 16px 30px; border: 0; border-radius: 0;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.5), transparent 40%), var(--lr-tape);
  clip-path: polygon(0 10%, 1.2% 0, 3% 12%, 4.6% 0, 95% 4%, 96.5% 0, 98% 10%, 100% 2%, 99% 90%, 100% 100%, 97% 92%, 95% 100%, 5% 96%, 3% 100%, 1.4% 90%, 0 100%);
  transform: rotate(calc(var(--r, 0) * 1.3deg));
  box-shadow: none;
  filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.2));
}
.lr-flow .wl-quote:nth-child(even) { margin-left: clamp(0px, 8vw, 120px); }
.lr-flow .wl-quote::before { display: none; }
.lr-flow .wl-quote__text { margin: 0 0 4px; font-family: var(--lr-marker-font); font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 700; color: #1b1e24; }
.lr-flow .wl-quote__who { font-family: var(--lr-type); color: var(--lr-marker); }
.lr-flow .wl-quote__who a { color: var(--lr-marker); }

/* photos taped inside a door */
.lr-flow .wl-gallery { gap: 22px; }
.lr-flow .wl-shot { padding: 8px 8px 30px; border-radius: 0; background: #fbfaf5; transform: rotate(calc(var(--r, 0) * 2deg)); box-shadow: 0 12px 20px -10px rgb(0 0 0 / 0.5); overflow: visible; }
.lr-flow .wl-shot::before { content: ""; position: absolute; z-index: 1; top: -10px; left: 50%; width: 80px; height: 22px; margin-left: -40px; background: rgb(247 243 228 / 0.9); transform: rotate(-3deg); }
.lr-flow .wl-shot__caption { left: 8px; right: 8px; bottom: 5px; padding: 0; background: none; backdrop-filter: none; color: #333; font-family: var(--lr-marker-font); text-align: center; }

/* playbook: ring-binder pages */
.lr-flow .wl-faq { gap: 16px; max-width: 900px; }
.lr-flow .wl-qa { position: relative; padding-left: 56px; border: 0; border-radius: 3px; background: radial-gradient(circle 7px at 26px 26px, var(--lr-block) 0 6px, #bbb 7px, transparent 7.5px), radial-gradient(circle 7px at 26px calc(100% - 26px), var(--lr-block) 0 6px, #bbb 7px, transparent 7.5px), #fdfdfb; box-shadow: inset 44px 0 0 -43px #e6a0a0, 0 10px 20px -12px rgb(0 0 0 / 0.4); }
.lr-flow .wl-qa__q { font-family: var(--lr-type); font-size: 1.04rem; text-transform: uppercase; }
.lr-flow .wl-qa__a { font-family: var(--lr-marker-font); font-size: 1.08rem; color: #1f3b7a; }

/* your locker: a steel plate with rivets */
.lr-flow .wl-access {
  max-width: 840px; padding: clamp(24px, 3vw, 38px);
  background:
    radial-gradient(circle 5px at 16px 16px, #eef1f3 0 2px, #6f7982 4px, transparent 5px),
    radial-gradient(circle 5px at calc(100% - 16px) 16px, #eef1f3 0 2px, #6f7982 4px, transparent 5px),
    radial-gradient(circle 5px at 16px calc(100% - 16px), #eef1f3 0 2px, #6f7982 4px, transparent 5px),
    radial-gradient(circle 5px at calc(100% - 16px) calc(100% - 16px), #eef1f3 0 2px, #6f7982 4px, transparent 5px),
    linear-gradient(160deg, var(--lr-steel-hi), var(--lr-steel) 55%, #8f98a0);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 #fff, 0 30px 50px -26px rgb(20 20 20 / 0.7);
}
.lr-flow .wl-access__net { color: #2f353c; font-family: var(--lr-type); }
.lr-flow .wl-ca { background: #2a2f36; border: 0; color: #f2f2ee; border-radius: 4px; }
.lr-flow .wl-ca__label { color: #aab1b9; }
.lr-flow .wl-copy { border-radius: 3px; }
.lr-flow .wl-link { border-radius: 3px; background: #f2f2ee; border: 2px solid #2a2f36; }

/* ------------------------------------------------------------------ footer */
.lr-foot { padding: 32px var(--v-pad-x) 44px; background: #23272e; color: #e9e9e4; box-shadow: 0 -3px 0 var(--lr-trim), 0 -6px 0 var(--lr-cloth); }
.lr-foot .wl-foot__name { font-family: var(--lr-block-font); text-transform: uppercase; letter-spacing: 0.04em; }
.lr-foot .wl-foot__net, .lr-foot .wl-foot__nfa { color: #a9aeb6; }
.lr-foot .wl-link { background: transparent; border-color: #5a616b; color: #e9e9e4; }

/* ------------------------------------------------------------------ motion */
.lr-jersey { animation: lr-sway 7s ease-in-out infinite; }
@keyframes lr-sway { 0%, 100% { transform: translateX(-50%) rotate(-1.1deg); } 50% { transform: translateX(-50%) rotate(1.1deg); } }
.lr-play__route, .lr-play__head { animation: lr-draw 1.4s var(--v-ease) both; animation-delay: calc(var(--i, 0) * 0.35s + 0.4s); }
@keyframes lr-draw { from { opacity: 0; } }
.wl-motion-float .lr-photo__img .wl-hero-img { animation: none; }

/* ------------------------------------------------------------------ narrower */
@media (max-width: 1060px) {
  .lr-nav { display: none; }
  .lr-room__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
@media (max-width: 860px) {
  .lr-room { min-height: 0; }
  .lr-room__grid { grid-template-columns: minmax(0, 1fr); row-gap: 26px; padding: 18px 16px 84px; min-height: 0; }
  .lr-stall { align-self: auto; }
  .lr-stall__bay { min-height: 0; height: clamp(400px, 118vw, 520px); }
  .lr-rod { top: 150px; }
  .lr-jersey { top: 144px; width: min(84%, 330px); }
  .lr-photo { width: 58%; top: 12px; }
  .lr-board { margin-top: 0; }
  .lr-board__slate { border-width: 12px; }
  .lr-board__headline, .lr-board__headline[data-len="m"] { font-size: clamp(1.9rem, 8.6vw, 2.6rem); }
  .lr-play { aspect-ratio: auto; }
  .lr-play__svg { position: relative; display: block; height: auto; aspect-ratio: 1000 / 360; }
  .lr-play__labels { position: static; display: grid; gap: 6px; margin-top: 10px; }
  .lr-play__label { position: static; transform: none; display: grid; grid-template-columns: 2em minmax(0, 1fr); align-items: center; gap: 8px; max-width: none; width: auto; text-align: left; }
  .lr-play__n { width: 1.9em; height: 1.9em; font-size: 0.95rem; border: 2.5px solid var(--lr-chalk); border-radius: 50%; }
  .lr-play__t, .lr-play__label--up .lr-play__t { position: static; transform: none; width: auto; max-width: none; }
  .lr-flow .wl-sec { padding: 64px 16px 0; }
  .lr-flow .wl-quote:nth-child(even) { margin-left: 0; }
  .lr-flow .wl-lore__lead, .lr-flow .wl-lore__p { font-size: 0.96rem; }
  .lr-foot { padding: 28px 16px 40px; }
}
@media (max-width: 440px) {
  .lr-brand__tick, .lr-net { display: none; }
}