/* =====================================================================
   WORK WITH ME — black & gold dark theme.
   Scoped to body.wwm-dark so it ONLY re-skins this section (hub + the 5
   pathway sub-pages); the rest of the editorial paper site is untouched.
   The design system is token-driven, so we mostly flip the design tokens
   to a dark palette, then fix the few surfaces that assumed a light bg.
   Loaded LAST so these overrides win.
   ===================================================================== */
body.wwm-dark{
  --paper:#0c0b0a;        /* page background — warm near-black */
  --paper-2:#16130d;      /* card / raised surface */
  --paper-3:#131009;      /* sand-band surface */
  --ink:#F3EEE3;          /* headings + primary text */
  --ink-2:#EDE7DA;        /* body text — warm off-white paper (client: not brass/yellow, not stark white) */
  --ink-3:#8C816A;        /* labels / captions */
  --accent:#C79A53;       /* brass */
  --accent-deep:#E6CD96;  /* bright gold (emphasis / hover) */
  --hairline:#352f23;     /* subtle warm divider */
  --dark:#080706;         /* deepest panels (CTA / footer) */
  --on-dark:#F3EEE3; --on-dark-2:#B7AC97;
  background:var(--paper); color:var(--ink);
}

/* --- rail / nav --- */
body.wwm-dark .railnav{background:rgba(12,11,10,.82);backdrop-filter:blur(8px);}
body.wwm-dark .nav__sub{background:#16130d;border:1px solid var(--hairline);}
body.wwm-dark .nav__sub a:hover{background:#211c12;}
/* mobile drawer: the desktop hover-flyout box above (background:#16130d + border) out-specifies
   the mobile drawer's transparent/borderless submenu rule in styles2.css (.railnav .nav__sub),
   so it leaked into the open drawer as a floating dark panel. Scoped to the open mobile drawer
   only, desktop flyout (>=681px) keeps its box + border untouched. */
@media(max-width:680px){
  body.wwm-dark .railnav.nav-open .nav__sub{background:transparent;border:0;}
}

/* --- sand bands read a touch lighter than the page so sections still separate --- */
body.wwm-dark .psec--sand{background:#15120c;}

/* --- eyebrows / accents stay gold (token handles most); brass on sand stays legible --- */
body.wwm-dark .pcta .eyebrow{color:var(--accent-deep);}
/* ember punchlines lift a step on the dark ground so they still burn */
body.wwm-dark .prose p.punch,body.wwm-dark .punch{color:#D2643A;}
body.wwm-dark .prose p.punch--split,body.wwm-dark .punch--split{color:var(--ink);}
body.wwm-dark .punch--split .fire{color:#D2643A;}

/* wider copy column at wide viewports — same client fix already shipped on About
   (about-concepts.css: .about-body .measure{max-width:820px}). Propagated here so
   the WWM hub + pathway sub-pages match: less empty wing space vs the headline.
   .measure .punch / .measure .sband--wide p wing-stretch (pages.css) use a fixed
   -7vw margin-inline, not a max-width-relative one, so no companion override is
   needed here — they keep composing correctly at the wider 820px column. */
@media(min-width:1150px){
  body.wwm-dark .measure{max-width:820px;}
}

/* --- cards: dark drop-shadows vanish on black — swap to a soft black lift + brighter
       ghost numeral + a faint brass top sheen so they still feel raised --- */
body.wwm-dark .vbreak__item,
body.wwm-dark .cards--num .card{box-shadow:0 16px 44px rgba(0,0,0,.55);
  background:linear-gradient(180deg,#1a1610,#141009);}
body.wwm-dark .vbreak__item::before,
body.wwm-dark .cards--num .card::before{opacity:.10;}   /* quieter ghost numerals — the gold was shouting (client) */
body.wwm-dark .cards--num .card:hover{box-shadow:0 22px 56px rgba(0,0,0,.6);border-color:var(--accent);}

/* --- intro cell (variant b, Fil's grid): it's the lead-in, not a sixth pathway, so it needs
       to read as visually distinct from the moment you land on the grid. Warm brass/bronze
       panel vs the neutral warm-black of the pathway cards above — same brass family as the
       rest of the page (on-brand), just a lighter, warmer shade so it stands out at a glance.
       Also pinned non-interactive: it isn't a link, so no hover-lift, no border-brighten, no
       cursor-spotlight glow (all three would otherwise win on specificity over the plain
       .card--intro rules in pages.css). --- */
body.wwm-dark .cards--num .card--intro{
  background:linear-gradient(160deg,#3c2c14,#241a0a);
  border-color:rgba(199,154,83,.5);
  box-shadow:0 16px 44px rgba(0,0,0,.4),inset 0 1px 0 rgba(230,205,150,.1);
}
body.wwm-dark .cards--num .card--intro:hover{
  transform:none;box-shadow:0 16px 44px rgba(0,0,0,.4),inset 0 1px 0 rgba(230,205,150,.1);
  border-color:rgba(199,154,83,.5);
}
body.tm2 .cards--num .card--intro::after{display:none;}   /* kill the cursor-spotlight glow — not a hoverable link */

/* --- CTA: deepest dark, lifted off the page with a brass hairline. Buttons inherit the
       default cream .btn so every "Get in touch" / "Start the conversation" on these pages
       matches the nav button — ONE CTA style everywhere (client flag on all pathway pages). --- */
body.wwm-dark .pcta{border-top:1px solid var(--hairline);}
/* .pcta .btn uses var(--paper) as its bg — near-black on this theme = invisible button.
   Pin it to cream so it matches the nav "Get in touch" everywhere. */
body.wwm-dark .pcta .btn{background:var(--ink);color:var(--paper);border-color:var(--ink);}
body.wwm-dark .pcta .btn:hover{background:transparent;color:var(--ink);}

/* --- ghost / outline buttons → gold on dark --- */
body.wwm-dark .btn--ghost{color:var(--accent-deep);border-color:var(--hairline);}
body.wwm-dark .btn--ghost:hover{border-color:var(--accent-deep);background:rgba(231,205,150,.06);}

/* --- photo breaks + figures: lift off the dark + warm frame --- */
body.wwm-dark .pfig img{box-shadow:0 24px 64px rgba(0,0,0,.55);}
/* desktop only: photos on the WWM sub-pages rendered too large (~1182px, filling the column) —
   halve the rendered width + centre it. Videos are untouched (different container, .wide not
   .frame). Mobile untouched (this rule only fires min-width:681px, matching the site's existing
   desktop/mobile split at 680/681). */
@media(min-width:681px){
  body.wwm-dark .pfig{max-width:50%;margin-left:auto;margin-right:auto;}
}

/* --- video placeholders: dark surface, gold play button --- */
body.wwm-dark .video{background:#141009;border:1px solid var(--hairline);}
body.wwm-dark .video .play{border-left-color:var(--accent-deep);}

/* --- accent bands (sband) — keep gold emphasis legible on dark --- */
body.wwm-dark .sband--dark{background:#1a160f;border:1px solid var(--hairline);}
body.wwm-dark .sband--accent{background:rgba(199,154,83,.10);border:1px solid rgba(199,154,83,.32);}
body.wwm-dark .sband .it,body.wwm-dark .qbig,body.wwm-dark .pq .it{color:var(--accent-deep);}
/* statement emphasis WITHOUT the box: statement stays white, only the tension words go ember,
   no italics — colour alone carries it (client fix repeated across all pathway pages) */
.sband .fire{color:var(--ember);font-style:normal;}
body.wwm-dark .sband .fire{color:#D2643A;}
body.wwm-dark .fixes .fire{color:#D2643A;}
body.wwm-dark .sband p{color:var(--ink);}

/* --- breadcrumb on dark --- */
body.wwm-dark .phero__crumb a{color:var(--ink-3);}
body.wwm-dark .phero__crumb a:hover{color:var(--accent-deep);}
body.wwm-dark .phero__crumb [aria-current],
body.wwm-dark .nav__sub a[aria-current="page"]{color:var(--accent-deep);}

/* --- mobile line-field bg: warm-on-dark so the texture still reads --- */
body.wwm-dark canvas.bgwave{opacity:.5;}

/* --- WebGL camera-lens (hub), mounted NATIVELY by lens3d.js — full-bleed, the canvas bg matches
       the page (#0c0b0a) so there is no "box". Hovering a pathway lights up its ring segment
       + reveals its photo in the glass; clicking dives through into that page. --- */
.wheel-sec.has-lens3d{min-height:96vh;padding-block:0;display:flex;align-items:center;}
.wheel-sec.has-lens3d .frame{max-width:none;width:100%;padding:0;}
.wheel-sec.has-lens3d .lens{display:none;}                 /* SVG fallback hidden once WebGL mounts */
/* ...and hidden from FIRST PAINT while the WebGL lens is pending, so the fallback wheel never
   flashes on desktop before lens3d loads. The flag is removed (revealing the wheel) only if
   lens3d fails to load. */
html.lens3d-pending .wheel-sec .lens{display:none;}
.lens3d{position:relative;width:100%;height:92vh;}
.lens3d__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.lens3d__labels{position:absolute;inset:0;pointer-events:none;}
.lens3d__labels .lbl{position:absolute;left:50%;top:50%;pointer-events:auto;cursor:pointer;
  transform:translate(-50%,-50%) translate(var(--x),var(--y));
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(243,238,227,.58);text-decoration:none;white-space:nowrap;transition:color .3s ease,text-shadow .3s ease;}
.lens3d__labels .lbl:hover,.lens3d__labels .lbl.is-on{color:#fff;text-shadow:0 0 18px rgba(230,205,150,.7);}
.lens3d__hint{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);margin:0;
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(243,238,227,.42);transition:opacity .4s ease;}
/* dive: the lens goes full-screen + a dark veil fades in just before navigating.
   The veil MUST sit ABOVE the diving lens (z 9999) or it fades in behind the canvas and never
   covers it — leaving the zoomed glass + lit gold arc visible/"stuck" through the navigation. */
.lens3d.is-diving{position:fixed;inset:0;width:100vw;height:100vh;z-index:9999;}
.lens3d__veil{position:fixed;inset:0;z-index:100000;background:#0c0b0a;opacity:0;pointer-events:none;transition:opacity .5s ease;}
.lens3d__veil.in{opacity:1;}
/* cross-page DIVE transition: when a page is reached by diving through the lens, it paints
   this dark veil from the first frame (matching the dive's end-state), masking the WebGL
   re-init + scroll-reveal gap, then fades out smoothly. Set via an inline head script that
   reads a one-shot sessionStorage flag, so direct visits never see it. */
html.lens-arrive::before{content:"";position:fixed;inset:0;z-index:99999;background:#0c0b0a;pointer-events:none;}
html.lens-arrive.lens-go::before{opacity:0;transition:opacity .8s ease;}
/* hidden real links behind the WebGL lens (keyboard + screen-reader access) */
.lens3d__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.lens3d__sr:focus{position:absolute;left:50%;top:8%;transform:translateX(-50%);width:auto;height:auto;clip:auto;
  color:#fff;background:#16130d;border:1px solid var(--accent);border-radius:6px;padding:8px 14px;z-index:2;}

/* --- WWM HERO: the camera-lens is the focal point; the statement is composed AROUND it
       (eyebrow + big headline + lead, bottom-left), the lens filling the stage. --- */
.lenshero.has-lens3d{min-height:100vh;align-items:stretch;}
.lenshero.has-lens3d .lens3d{height:100vh;}
/* lens active: copy is composed bottom-left, kept narrow so it clears the (shifted) lens */
.lenshero.has-lens3d .lenshero__copy{position:absolute;z-index:3;pointer-events:none;
  left:calc(var(--rail) + clamp(24px,3.4vw,60px)); bottom:clamp(40px,8vh,82px); max-width:min(38vw,430px);}
/* fallback (no WebGL): copy flows normally above the SVG wheel, section not pinned to 100vh */
.lenshero:not(.has-lens3d){min-height:auto;padding-block:clamp(40px,8vh,90px) 0;}
.lenshero:not(.has-lens3d) .lenshero__copy{position:static;max-width:none;
  padding-inline:calc(var(--rail) + clamp(24px,3.4vw,60px)) clamp(40px,6vw,90px);margin-bottom:var(--s4);}
/* WHILE THE WEBGL LENS LOADS (lens3d-pending, .has-lens3d not yet set): hold the lens's
   full-screen stage from first paint so the sections below stay below the fold — otherwise
   the page paints the next section first, then jumps when the lens mounts. Mirrors the
   mounted (.has-lens3d) composition; placed after the fallback rules so it wins on ties. */
html.lens3d-pending .wheel-sec{min-height:96vh;padding-block:0;display:flex;align-items:center;}
html.lens3d-pending .wheel-sec .frame{max-width:none;width:100%;padding:0;}
/* the lens fades in softly when it mounts (used to pop in harshly) — hero + the
   compact cross-navigator on sub-pages. Reduced-motion is killed globally. */
.wheel-sec.has-lens3d .lens3d,.lens-aside.has-lens3d .lens3d{animation:lensIn 1.8s cubic-bezier(.16,1,.3,1) both;}
@keyframes lensIn{from{opacity:0;transform:scale(.97);}to{opacity:1;transform:none;}}
/* hero reveal order: the LENS lands first, the copy fades in after it (not before).
   While the WebGL lens is still mounting, hold the copy hidden so text never precedes the lens;
   once mounted (.has-lens3d), fade the copy in on a delay that clears the 1.8s lensIn. */
html.lens3d-pending .lenshero__copy{opacity:0;}
.lenshero.has-lens3d .lenshero__copy{animation:wwmCopyIn .8s cubic-bezier(.16,1,.3,1) 1.6s both;}
@keyframes wwmCopyIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){
  html.lens3d-pending .lenshero__copy{opacity:1;}
  .lenshero.has-lens3d .lenshero__copy{animation:none;opacity:1;}
}
html.lens3d-pending .lenshero{min-height:100vh;align-items:stretch;}
html.lens3d-pending .lenshero .lenshero__copy{position:absolute;z-index:3;pointer-events:none;
  left:calc(var(--rail) + clamp(24px,3.4vw,60px));bottom:clamp(40px,8vh,82px);max-width:min(38vw,430px);
  padding-inline:0;margin-bottom:0;}
.lenshero__copy .eyebrow{display:block;margin:0 0 14px;color:var(--accent);}
.lenshero__copy h1{font-family:var(--serif);font-weight:900;text-transform:uppercase;font-size:clamp(1.8rem,3.2vw,3rem);
  line-height:1.0;letter-spacing:-0.02em;color:var(--ink);margin:0;max-width:14ch;text-shadow:0 2px 34px rgba(0,0,0,.7);}
.lenshero__copy .lead{margin:clamp(14px,2.2vh,22px) 0 0;color:var(--ink-2);
  font-size:clamp(1rem,1.2vw,1.16rem);line-height:1.5;max-width:32ch;text-shadow:0 1px 18px rgba(0,0,0,.6);}
/* the hint sits clear BELOW the lens barrel (which is shifted right), not over it */
.lenshero .lens3d__hint{top:auto;bottom:clamp(16px,4vh,40px);left:57%;}
/* mobile: copy flows normally below the lens / wheel */
@media(max-width:680px){
  /* WebGL lens on mobile: a centred square, the statement flowing below it. The hero FILLS the
     first screen so only lens + eyebrow + headline + subheadline show; the body sits below the fold. */
  /* pure-black hero matches the opaque-black canvas so the lens blends in with NO box, even while
     the halo lights the area around it */
  .wheel-sec.has-lens3d{min-height:100svh;padding-block:clamp(40px,13vh,150px) clamp(24px,5vh,44px);display:flex;flex-direction:column;justify-content:center;background:#000;}
  .lenshero.has-lens3d{align-items:stretch;}
  .lenshero.has-lens3d .frame{display:flex;flex-direction:column;align-items:stretch;width:100%;}
  /* margin-bottom carves a gap below the lens for the hint + breathing room before the copy */
  .lenshero.has-lens3d .lens3d{position:relative;width:min(96vw,460px);height:auto;aspect-ratio:1;margin:0 auto clamp(44px,7vh,68px);will-change:transform;}
  /* on dive, SMOOTHLY zoom the lens up to swallow the screen (not an instant snap to fullscreen).
     A keyframe animation ramps the scale (a transition won't fire: the filling idle lensIn suppresses
     transitions on transform). Runs in sync with the 820ms WebGL camera dive + veil fade to dark. */
  .lenshero.has-lens3d .lens3d.is-diving{animation:lensDive .82s cubic-bezier(.42,0,1,1) forwards;z-index:9999;}
  @keyframes lensDive{from{transform:scale(1);}to{transform:scale(3);}}
  /* override the desktop absolute-positioned copy: on mobile it flows below the lens, sitting lower */
  .lenshero.has-lens3d .lenshero__copy{position:static;left:auto;bottom:auto;max-width:none;margin-top:clamp(8px,2.5vh,20px);}
  /* the tap hint sits BELOW the lens barrel with a clear gap (not crowding it) */
  .lenshero .lens3d__hint{top:calc(100% + clamp(16px,3vh,26px));bottom:auto;left:50%;transform:translateX(-50%);}
  /* while the lens loads on mobile: reserve the black full-screen stage too, copy in flow */
  html.lens3d-pending .wheel-sec{min-height:100svh;padding-block:clamp(40px,13vh,150px) clamp(24px,5vh,44px);display:flex;flex-direction:column;justify-content:center;background:#000;}
  html.lens3d-pending .lenshero{align-items:stretch;}
  /* H1 fix: was padding-inline:0, which only looked fine by accident (this headline's own
     max-width:14ch happens to shrink-wrap narrower than the frame, and lens.css's unconditional
     .wheel-sec .frame{align-items:center} then centred the box with a coincidental ~24px gutter).
     A different headline length isn't guaranteed the same luck. Match the explicit 24px used by
     every other state (line below, and the mounted has-lens3d state) so the gutter is deterministic. */
  html.lens3d-pending .lenshero .lenshero__copy{position:static;left:auto;bottom:auto;max-width:none;margin-top:clamp(8px,2.5vh,20px);padding-inline:24px;}

  .lenshero__copy{position:static;max-width:none;left:auto;bottom:auto;padding:0 24px;margin-bottom:8px;}
  .lenshero__copy h1{font-size:clamp(2rem,9vw,2.6rem);text-shadow:none;}
  .lenshero__copy .lead{text-shadow:none;}
}

/* =====================================================================
   LENS CROSS-NAVIGATOR (sub-pages) — compact, complementary, NOT a hero.
   A dark band near the end of each pathway page: the improved 3D lens
   (desktop+WebGL) shows "you are here" + lets you jump to the other
   pathways; mobile / no-WebGL / reduced-motion get a clean link list.
   ===================================================================== */
.lens-aside{background:#0c0b0a;color:var(--on-dark);text-align:center;position:relative;
  display:flex;flex-direction:column;justify-content:center;padding-block:clamp(56px,8vh,96px);}
.lens-aside .eyebrow{display:block;color:#C99A5B;margin:0 0 6px;}
/* When the WebGL lens mounts: become a FULL-BLEED, FULL-HEIGHT dark moment so the lens fills it
   at original size — no contained "box". (If it falls back to the link list, the compact band stays.)
   Client report (iOS): the canvas clears to opaque black over its whole rectangle, and this section's
   own solid fill sat on top of the page's textured ripple/dot field (bg.js) — together they read as a
   visible BOX around the round lens. Fix: once the lens has mounted, drop this section's own fill so
   the site's ripple/dot canvas (position:fixed, behind everything) shows straight through the section,
   same as it does elsewhere on the page; the .lens3d__canvas mask below then fades the canvas's own
   rectangular edges to transparent so only the round lens + its glow render on top of that field.
   The pre-mount / no-WebGL fallback keeps the original solid #0c0b0a band (untouched). */
.lens-aside.has-lens3d{min-height:52vh;padding-block:0;background:transparent;}
.lens-aside.has-lens3d .frame{max-width:none;width:100%;padding:0;}
.lens-aside.has-lens3d .eyebrow{position:absolute;top:clamp(26px,6vh,62px);left:0;right:0;z-index:3;margin:0;}
.lens-aside .lens3d{position:relative;width:100%;max-width:none;margin:0;}
.lens-aside.has-lens3d .lens3d{height:52vh;}
/* Subpage lens hint: base .lens3d__hint (line ~130) sits INSIDE the lens box at bottom:5%, which
   overlapped the ring's own curved bottom labels (SPORTING TEAMS & CLUBS / ORGANISATIONS) once the
   3D lens mounts. Scoped to .lens-aside only (the home/lenshero hint keeps its own rules below),
   moved below the whole .lens3d box instead of guessing a percentage that clears the WebGL-baked
   ring labels: anything drawn on the canvas is confined to the canvas's own box (inset:0 of .lens3d),
   so top:100% guarantees the hint can never overlap it, on any viewport. */
.lens-aside .lens3d__hint{position:absolute;left:50%;bottom:auto;top:100%;transform:translateX(-50%);
  margin-top:clamp(16px,3.5vh,32px);white-space:nowrap;color:var(--on-dark-2);}
.lens-aside.has-lens3d{padding-bottom:clamp(48px,9vh,76px);}
/* Mask the canvas's own rectangular edges into a soft circle so the flat black box disappears and
   only the round lens + its glow read against the page background. Sized in vh (not %) because the
   lens's rendered pixel size is driven by camera FOV against the canvas HEIGHT only (52vh, fixed) —
   so a vh radius tracks the lens at any viewport width, instead of stretching into an oval on wide
   screens. Two radii: mobile's compact lens renders larger relative to its box (lens3d.js scales the
   whole rig up on <=680px for label legibility) so its mask needs a bigger allowance.
   Does NOT touch the WebGL clear color / alpha (see lens3d.js) — the bloom-driven glow can't survive
   a transparent render target cleanly, so the canvas keeps rendering opaque and is only masked in CSS,
   a compositing step the glow renders through unaffected. */
.lens-aside .lens3d__canvas{
  -webkit-mask-image:radial-gradient(circle at center, #000 0, #000 22vh, transparent 34vh);
  mask-image:radial-gradient(circle at center, #000 0, #000 22vh, transparent 34vh);
}
@media(max-width:680px){
  /* mobile's box is WIDTH-bound, not height-bound (a 393px-wide viewport is narrower than the
     section's 52vh) — so the fade has to complete against the box's half-WIDTH, not a vh derived
     from height like the desktop rule above. Tuned against 390-430px phone widths. */
  .lens-aside .lens3d__canvas{
    -webkit-mask-image:radial-gradient(circle at center, #000 0, #000 19vh, transparent 24vh);
    mask-image:radial-gradient(circle at center, #000 0, #000 19vh, transparent 24vh);
  }
}
/* link-list fallback (mobile / no-WebGL / reduced-motion / lens fail) */
.lens-fallback{list-style:none;display:flex;flex-wrap:wrap;gap:10px 12px;justify-content:center;margin:26px auto 0;max-width:680px;}
.lens-fallback a{display:inline-block;padding:12px 20px;border:1px solid rgba(255,255,255,.2);border-radius:999px;
  color:var(--on-dark);font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.03em;text-decoration:none;
  transition:border-color .25s ease,color .25s ease,background .25s ease;-webkit-tap-highlight-color:transparent;}
.lens-fallback a:hover{border-color:var(--accent);color:#fff;}
.lens-fallback a[aria-current="page"]{background:var(--accent-deep);border-color:var(--accent);color:#fff;}
/* when the WebGL lens will mount, hide the link list from first paint (no flash) */
html.lens3d-pending .lens-aside .lens-fallback{display:none;}