/* ==========================================================================
   UTRC — University of Toronto Run Club
   Street-poster design system, LIGHT.  Warm paper · brand red · club blue.

   Colour is handled with two layers of custom properties:

     1. A fixed palette  (--paper, --ink, --red, --blue ...)  never changes.
     2. Contextual tokens (--bg, --fg, --surface, --line ...) flip depending
        on what you are sitting on.

   Anything that needs to work on both grounds is written against layer 2,
   so a dark section is one class — .on-dark — and a whole dark theme is one
   attribute — <html data-theme="dark">.  Nothing else has to know.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  /* fixed palette ------------------------------------------------------- */
  --paper:#F7F5F0;          /* the page */
  --paper-2:#EFEBE3;        /* tinted band */
  --paper-3:#E5E0D6;        /* wells, hovers */
  --card:#FFFFFF;           /* raised surface */

  --ink:#14141A;            /* body ink, and the dark slabs */
  --ink-2:#1C1C22;
  --ink-3:#26262E;

  --red:#DC3220;            /* the logo red — fills and display type */
  --red-ink:#C42B1B;        /* small red TEXT on paper (4.26:1 -> 5.2:1) */
  --red-lift:#E24433;       /* small red TEXT on ink (4.23:1 -> 4.79:1) */
  --red-hot:#FF3A24;        /* focus rings */
  --blue:#284E91;           /* the club blue, sampled off the tee */
  --green:#1C7C47;          /* confirmation only — "copied" states */
  --blue-deep:#1B3A6F;
  --blue-lift:#6E9BE8;      /* the blue that survives on ink (7:1) */

  /* contextual — the light ground --------------------------------------- */
  --bg:var(--paper);
  --fg:var(--ink);
  --fg-soft:#43434C;
  --fg-mute:#63606B;
  --surface:var(--card);
  --surface-2:var(--paper-3);
  --band:var(--paper-2);
  --line:rgba(20,20,26,.14);
  --line-strong:rgba(20,20,26,.30);
  --accent:var(--red);      /* red as it should be drawn here */
  --accent-text:var(--red-ink);
  --accent-2:var(--blue);   /* blue as it should be drawn here */
  --shadow:0 1px 2px rgba(20,20,26,.05),0 12px 28px -14px rgba(20,20,26,.16);

  --f-display:'Anton','Haettenschweiler','Arial Narrow',Impact,sans-serif;
  --f-body:'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-mono:'Space Mono',ui-monospace,'SF Mono',Consolas,monospace;

  --shell:min(1280px,92vw);
  --gap:clamp(16px,2.2vw,28px);
  --skew:-7deg;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);

  --nav-h:66px;
}

/* The dark ground.  Used by .on-dark sections in either theme, and by the
   whole document when the visitor asks for dark mode. */
.on-dark,
html[data-theme="dark"]{
  --bg:#0B0B0C;
  --fg:var(--paper);
  --fg-soft:#D6D3CD;
  --fg-mute:#8E8E96;
  --surface:#131316;
  --surface-2:#1C1C21;
  --band:#131316;
  --line:rgba(255,255,255,.13);
  --line-strong:rgba(255,255,255,.30);
  --accent:var(--red);
  --accent-text:var(--red-lift);
  --accent-2:var(--blue-lift);
  --green:#2EA865;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 28px -14px rgba(0,0,0,.8);
}
.on-dark{background:var(--bg);color:var(--fg)}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 20px);
  -webkit-text-size-adjust:100%;
  background:var(--bg);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .5s var(--ease),color .5s var(--ease);
}

/* Paper grain.  A single inline SVG turbulence, multiplied over the page at
   very low opacity — it stops the large flat areas looking like plastic.
   Switched off on the dark theme, where it only adds noise. */
body::before{
  content:"";
  position:fixed;inset:0;z-index:1;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="dark"] body::before{opacity:0}

img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

::selection{background:var(--red);color:#fff}

:focus-visible{
  outline:3px solid var(--red-hot);
  outline-offset:3px;
  border-radius:2px;
}

.shell{width:var(--shell);margin-inline:auto}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --- 2. Type ------------------------------------------------------------- */
h1,h2,h3,h4{margin:0;font-weight:400;line-height:.86;letter-spacing:-.01em}

.display{
  font-family:var(--f-display);
  text-transform:uppercase;
  font-weight:400;
  line-height:.82;
  letter-spacing:.004em;
  transform:skewX(var(--skew));
  transform-origin:left bottom;
}

.h-xxl{font-size:clamp(3.6rem,13.2vw,12.5rem)}
.h-xl {font-size:clamp(2.8rem,8.2vw,7rem)}
.h-lg {font-size:clamp(2.1rem,5.2vw,4.2rem)}
.h-md {font-size:clamp(1.6rem,3.1vw,2.6rem)}

.stroke{
  color:transparent;
  -webkit-text-stroke:clamp(1.6px,.28vw,4px) var(--fg);
  paint-order:stroke fill;
}
@supports not (-webkit-text-stroke:1px red){ .stroke{color:var(--fg)} }
.red{color:var(--red)}

.eyebrow{
  font-family:var(--f-mono);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent-text);
  display:flex;
  align-items:center;
  gap:.6em;
  margin:0 0 1.1rem;
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;
  background:var(--red);
  border-radius:50%;
  flex:none;
  animation:pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.35;transform:scale(.72)}
}

.lede{
  font-size:clamp(1.05rem,1.55vw,1.35rem);
  line-height:1.5;
  color:var(--fg-soft);
  max-width:62ch;
}
.muted{color:var(--fg-mute)}
.mono{font-family:var(--f-mono);letter-spacing:.02em}

/* An inline text link that earns its blue. */
.tlink{
  color:var(--accent-2);
  font-weight:700;
  box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--accent-2) 40%,transparent);
  transition:box-shadow .3s var(--ease),color .3s;
}
.tlink:hover{box-shadow:inset 0 -2px 0 var(--accent-2)}

/* --- 3. Buttons ---------------------------------------------------------- */
.btn{
  --bg-b:var(--red);
  --fg-b:#fff;
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.7em;
  padding:1.02em 1.9em;
  background:var(--bg-b);
  color:var(--fg-b);
  font-family:var(--f-mono);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px));
  transition:transform .45s var(--ease),background .3s,color .3s;
  overflow:hidden;
  isolation:isolate;
  will-change:transform;
}
.btn::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:var(--ink);
  transform:translateY(101%);
  transition:transform .45s var(--ease);
}
.btn:hover::after,.btn:focus-visible::after{transform:translateY(0)}
.btn:hover,.btn:focus-visible{color:#fff}
.btn:active{transform:scale(.97)}
.btn .arrow{transition:transform .4s var(--ease)}
.btn:hover .arrow{transform:translateX(5px)}

/* Outline button — the workhorse on paper. */
.btn--ghost{
  --bg-b:transparent;
  --fg-b:var(--fg);
  box-shadow:inset 0 0 0 1.5px var(--line-strong);
}
.btn--ghost::after{background:var(--red)}

/* Confirmation state — the club email has just been copied to the clipboard.
   The sliding ink overlay is switched off so the green is not covered on
   hover, and the arrow is hidden while the longer label is showing. */
.btn.is-copied{
  --bg-b:var(--green);
  --fg-b:#fff;
  background:var(--green);   /* set directly: overriding the token alone does
                                not repaint the shorthand in Blink */
  color:#fff;
  box-shadow:none;
}
.btn.is-copied::after{display:none}
.btn.is-copied:hover,.btn.is-copied:focus-visible{color:#fff}
.btn.is-copied .arrow{display:none}

.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* --- 4. Nav -------------------------------------------------------------- */
/* Every page opens on a dark hero, so the bar starts in dark dress and
   changes into the page's own colours once you scroll past it. */
.nav{
  position:fixed;
  inset:0 0 auto;
  z-index:120;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  background:transparent;
  transition:background .4s var(--ease),backdrop-filter .4s,box-shadow .4s,color .4s;
}
.nav:not(.is-stuck){
  --fg:var(--paper);
  --fg-mute:#8E8E96;
  --line:rgba(255,255,255,.13);
  --line-strong:rgba(255,255,255,.30);
  --accent-text:var(--red-lift);
  --accent-2:var(--blue-lift);
  --bg:#0B0B0C;
  color:var(--paper);
}
/* Scrolled, but still over the dark header: a dark scrim, so the bar never
   collides with the headline text underneath it. */
.nav.is-scrolled:not(.is-stuck){
  background:rgba(11,11,12,.82);
  backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 1px 0 rgba(255,255,255,.13);
}
.nav.is-stuck{
  background:color-mix(in srgb,var(--bg) 93%,transparent);
  backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 1px 0 var(--line);
  color:var(--fg);
}
.nav__in{
  width:var(--shell);
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:clamp(14px,2.4vw,34px);
}
.nav__brand{display:flex;align-items:center;gap:.6rem;margin-right:auto;flex:none}
.nav__brand img{width:34px;height:34px;object-fit:contain}
.nav__brand b{
  font-family:var(--f-display);
  font-size:1.42rem;
  letter-spacing:.02em;
  transform:skewX(var(--skew));
  display:inline-block;
  font-weight:400;
}
.nav__links{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px)}
.nav__links a{
  font-family:var(--f-mono);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  position:relative;
  padding:.45em 0;
  color:var(--fg-mute);
  transition:color .25s;
}
.nav__links a::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:100%;height:2px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .38s var(--ease);
}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--fg)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav .btn{padding:.78em 1.3em;font-size:.7rem}
.nav .btn::after{background:var(--fg)}
.nav .btn:hover{color:var(--bg)}
.nav__links .btn{display:none}   /* only surfaces inside the mobile menu */

.nav__bar{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--red),var(--blue));
  transform:scaleX(var(--p,0));
  transform-origin:left;
}

/* --- 4b. Theme toggle ---------------------------------------------------- */
/* Sun and moon are the same circle.  A masking disc slides across it to bite
   out the crescent, and the rays fold in behind. */
.tog{
  flex:none;
  width:40px;height:40px;
  display:grid;place-items:center;
  border:1.5px solid var(--line-strong);
  color:var(--fg);
  border-radius:50%;
  transition:border-color .3s,color .3s,transform .4s var(--ease),background .3s;
}
.tog:hover{border-color:var(--accent-2);color:var(--accent-2);transform:rotate(-18deg)}
.tog svg{width:19px;height:19px;overflow:visible}
.tog__orb{fill:currentColor}
.tog__bite{fill:#000;transform:translateX(9px);transition:transform .5s var(--ease)}
.tog__rays{
  stroke:currentColor;stroke-width:1.7;stroke-linecap:round;
  transform-origin:12px 12px;
  transition:transform .5s var(--ease),opacity .4s var(--ease);
}
html[data-theme="dark"] .tog__bite{transform:translateX(2.5px)}
html[data-theme="dark"] .tog__rays{transform:rotate(50deg) scale(.35);opacity:0}

.nav__burger{
  display:none;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  flex:none;
}
.nav__burger span{
  position:relative;
  display:block;width:22px;height:2px;background:var(--fg);
  transition:background .2s;
}
.nav__burger span::before,.nav__burger span::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:var(--fg);
  transition:transform .35s var(--ease);
}
.nav__burger span::before{top:-7px}
.nav__burger span::after{top:7px}
.nav__burger[aria-expanded="true"] span{background:transparent}
.nav__burger[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

@media (max-width:960px){
  .nav__burger{display:flex}
  .nav__links{
    position:fixed;
    inset:var(--nav-h) 0 auto;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:clamp(18px,5vw,40px) 6vw calc(28px + env(safe-area-inset-bottom));
    background:var(--bg);
    border-bottom:1px solid var(--line);
    clip-path:inset(0 0 100% 0);
    transition:clip-path .55s var(--ease);
    max-height:calc(100dvh - var(--nav-h));
    overflow-y:auto;
  }
  .nav__links.is-open{clip-path:inset(0 0 0 0)}
  .nav__links a{
    font-family:var(--f-display);
    font-size:2.2rem;
    letter-spacing:.01em;
    transform:skewX(var(--skew));
    padding:.24em 0;
    width:100%;
    border-bottom:1px solid var(--line);
  }
  .nav__links a::after{display:none}
  .nav__links .btn{display:inline-flex;margin-top:1.4rem;transform:none;font-family:var(--f-mono);font-size:.78rem;border-bottom:0;width:auto}
  .nav__in > .btn{display:none}
}

/* --- 5. Marquee ---------------------------------------------------------- */
.marquee{
  --dur:34s;
  display:flex;
  overflow:hidden;
  user-select:none;
  background:var(--red);
  color:#fff;
  padding:.78rem 0;
  border-block:1px solid rgba(0,0,0,.18);
}
.marquee__track{
  display:flex;
  flex:none;
  align-items:center;
  gap:2.4rem;
  padding-right:2.4rem;
  min-width:100%;
  animation:slide var(--dur) linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee span{
  font-family:var(--f-display);
  font-size:clamp(1.1rem,2.3vw,1.9rem);
  text-transform:uppercase;
  white-space:nowrap;
  transform:skewX(var(--skew));
  display:inline-flex;
  align-items:center;
  gap:2.4rem;
}
.marquee span::after{content:"";width:9px;height:9px;background:currentColor;border-radius:50%;flex:none}
@keyframes slide{to{transform:translateX(-100%)}}
.marquee--dark{background:var(--ink);color:var(--paper);border-block:1px solid rgba(255,255,255,.13)}
.marquee--blue{background:var(--blue);color:#fff}
.marquee--rev .marquee__track{animation-direction:reverse}

/* --- 6. Sections --------------------------------------------------------- */
/* Paper is the default now.  --paper is the alternating tinted band. */
.sec{padding:clamp(76px,10vw,150px) 0;position:relative;background:var(--bg)}
.sec--paper{background:var(--band)}
.sec--tight{padding-block:clamp(52px,6vw,90px)}

/* A hairline that only shows where two same-coloured sections meet. */
.sec + .sec{box-shadow:inset 0 1px 0 var(--line)}
.sec--paper + .sec,.sec + .sec--paper{box-shadow:none}

.sec__head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:var(--gap);
  align-items:end;
  margin-bottom:clamp(34px,4.4vw,62px);
}
@media (max-width:760px){ .sec__head{grid-template-columns:1fr} }

/* --- 7. Hero ------------------------------------------------------------- */
/* Kept dark on purpose: the page needs one heavy anchor at the top and one at
   the bottom, or the poster type has nothing to push against. */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:calc(var(--nav-h) + 4vh);
  overflow:hidden;
}
.hero__bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 78% at 78% 8%,rgba(220,50,32,.30),transparent 62%),
    radial-gradient(95% 65% at 4% 92%,rgba(40,78,145,.34),transparent 62%),
    #0B0B0C;
}
.hero__grid{
  position:absolute;inset:0;z-index:1;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:clamp(58px,7vw,96px) clamp(58px,7vw,96px);
  -webkit-mask-image:radial-gradient(115% 88% at 50% 42%,#000 18%,transparent 76%);
  mask-image:radial-gradient(115% 88% at 50% 42%,#000 18%,transparent 76%);
  opacity:.55;
}
#trail{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero__in{position:relative;z-index:4;width:var(--shell);margin-inline:auto}

.hero__mark{
  position:absolute;
  right:-4vw;top:8vh;
  width:clamp(230px,38vw,620px);
  opacity:.09;
  z-index:3;
  pointer-events:none;
  filter:saturate(1.4);
  animation:drift 22s var(--ease-in-out) infinite;
}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(-2.2vw,-3vh,0) rotate(-4deg)}
}

.hero__title{margin-bottom:clamp(20px,2.6vw,34px)}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.03em}
.hero__title .line > span{display:block;will-change:transform}

.hero__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(14px,2.4vw,30px);
  padding-top:clamp(18px,2.4vw,28px);
  border-top:1px solid var(--line);
}
.hero__meta .lede{flex:1 1 320px;margin:0;font-size:clamp(1rem,1.35vw,1.18rem)}

.scroll-cue{
  position:absolute;
  left:50%;bottom:18px;
  transform:translateX(-50%);
  z-index:5;
  display:grid;
  justify-items:center;
  gap:.5rem;
  font-family:var(--f-mono);
  font-size:.6rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--fg-mute);
}
.scroll-cue i{
  display:block;width:1px;height:38px;
  background:linear-gradient(var(--red),transparent);
  animation:cue 2s var(--ease-in-out) infinite;
  transform-origin:top;
}
@keyframes cue{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:760px){ .scroll-cue{display:none} }

/* Page-header hero (interior pages) */
.phead{
  position:relative;
  padding:calc(var(--nav-h) + clamp(58px,9vw,120px)) 0 clamp(40px,5vw,70px);
  overflow:hidden;
}
.phead__bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(105% 100% at 88% 0%,rgba(220,50,32,.28),transparent 60%),
    radial-gradient(80% 90% at 0% 100%,rgba(40,78,145,.34),transparent 62%),
    #0B0B0C;
}
.phead__in{position:relative;z-index:2;width:var(--shell);margin-inline:auto}
.phead .lede{margin-top:1.4rem}

/* --- 8. Next-run countdown ---------------------------------------------- */
/* The clock is the site's recurring blue moment. */
.next{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(16px,2.6vw,36px);
  padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,30px);
  background:var(--surface);
  border:1px solid var(--line);
  border-left:4px solid var(--accent-2);
  box-shadow:var(--shadow);
}
.next__label{
  font-family:var(--f-mono);font-size:.64rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-2);
}
.next__what{font-family:var(--f-display);font-size:clamp(1.4rem,2.6vw,2.1rem);text-transform:uppercase;transform:skewX(var(--skew));display:inline-block}
.next__where{font-size:.86rem;color:var(--fg-mute);margin-top:.15rem}
.next__clock{display:flex;gap:clamp(8px,1.1vw,16px)}
.next__unit{text-align:center;min-width:clamp(48px,5vw,66px)}
.next__unit b{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(1.7rem,3.3vw,2.9rem);
  line-height:1;
  font-weight:400;
  font-variant-numeric:tabular-nums;
  color:var(--fg);
}
.next__unit i{
  font-style:normal;font-family:var(--f-mono);font-size:.56rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fg-mute);
}
.next__unit.tick b{animation:flip .5s var(--ease)}
@keyframes flip{from{transform:translateY(-38%);opacity:.15}to{transform:none;opacity:1}}
.next--live{border-left-color:#1B9E56}
.next--live .next__label{color:#1B9E56}
html[data-theme="dark"] .next--live{border-left-color:#3ED67F}
html[data-theme="dark"] .next--live .next__label{color:#3ED67F}
@media (max-width:860px){
  .next{grid-template-columns:1fr;gap:16px}
  .next__clock{justify-content:space-between}
  .next__unit{min-width:0;flex:1}
}

/* --- 9. Stats ------------------------------------------------------------ */
/* Figures alternate red / blue across the row. */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(155px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.stat{padding:clamp(22px,2.8vw,38px);background:var(--bg);transition:background .4s}
.sec--paper .stat{background:var(--band)}
.stat:hover{background:var(--surface-2)}
.stat b{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(2.5rem,5.6vw,4.4rem);
  line-height:.9;
  font-weight:400;
  color:var(--red);
  font-variant-numeric:tabular-nums;
  transform:skewX(var(--skew));
}
.stat:nth-child(even) b{color:var(--accent-2)}
.stat i{
  font-style:normal;display:block;margin-top:.5rem;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-mute);
}

/* --- 10. Schedule -------------------------------------------------------- */
.sched{border-top:1px solid var(--line)}
.run{
  display:grid;
  grid-template-columns:minmax(150px,.9fr) minmax(0,1.5fr) auto auto;
  align-items:center;
  gap:clamp(14px,2.4vw,32px);
  padding:clamp(20px,2.7vw,34px) 0;
  border-bottom:1px solid var(--line);
  position:relative;
  isolation:isolate;
  transition:padding-left .5s var(--ease),padding-right .5s var(--ease),color .35s;
}
.run::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--red);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .45s var(--ease);
}
/* Saturday is the café run — it fills blue instead, so the week has a shape. */
.run:nth-child(3)::before{background:var(--blue)}
.run:hover::before{transform:scaleY(1);transform-origin:top}
.run:hover{padding-left:clamp(14px,2vw,28px);padding-right:clamp(14px,2vw,28px);color:#fff}
.run:hover .run__day{color:#fff}
.run:hover .run__meta,.run:hover .run__where{color:rgba(255,255,255,.86)}
.run:hover .run__dist{background:#fff;color:var(--red);border-color:#fff}
.run:nth-child(3):hover .run__dist{color:var(--blue)}
.run__day{
  font-family:var(--f-display);
  font-size:clamp(1.9rem,4.1vw,3.2rem);
  text-transform:uppercase;
  transform:skewX(var(--skew));
  transition:color .35s;
}
.run__where{font-weight:600;font-size:1.02rem;transition:color .35s}
.run__meta{font-size:.85rem;color:var(--fg-mute);transition:color .35s}
.run__time{font-family:var(--f-mono);font-weight:700;font-size:clamp(.9rem,1.5vw,1.15rem);white-space:nowrap}
.run__dist{
  font-family:var(--f-mono);font-size:.68rem;font-weight:700;
  letter-spacing:.12em;padding:.44em .82em;white-space:nowrap;
  border:1.5px solid currentColor;color:var(--accent-2);
  transition:.35s;
}
@media (max-width:820px){
  .run{grid-template-columns:1fr auto;row-gap:10px;column-gap:14px}
  .run__day {grid-column:1;grid-row:1}
  .run__time{grid-column:2;grid-row:1;text-align:right;align-self:center}
  .run__body{grid-column:1/-1;grid-row:2}
  .run__dist{grid-column:1;grid-row:3;justify-self:start}
}

/* --- 11. Cards / grids --------------------------------------------------- */
.grid{display:grid;gap:var(--gap)}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.grid--5{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
@media (min-width:1180px){ .grid--5{grid-template-columns:repeat(5,minmax(0,1fr))} }
.grid--5 .card{padding:clamp(22px,1.9vw,26px)}
.grid--5 .card ul{font-size:.88rem}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
@media (max-width:900px){ .split{grid-template-columns:1fr} }

.card{
  position:relative;
  padding:clamp(24px,2.8vw,38px);
  background:var(--surface);
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .5s var(--ease),border-color .4s,background .4s,box-shadow .4s;
}
.card:hover{transform:translateY(-5px);border-color:var(--accent-2)}
.card__n{
  font-family:var(--f-mono);font-size:.68rem;font-weight:700;
  letter-spacing:.2em;color:var(--accent-2);display:block;margin-bottom:1.1rem;
}
.card h3{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(1.3rem,2.1vw,1.75rem);
  transform:skewX(var(--skew));display:inline-block;margin-bottom:.7rem;
}
.card p{margin:0;color:var(--fg-soft);font-size:.95rem}
.card ul{margin:1rem 0 0;padding-left:1.1rem;color:var(--fg-soft);font-size:.92rem}
.card li{margin-bottom:.42rem}
.card li::marker{color:var(--red)}
.card__glow{
  position:absolute;
  width:290px;height:290px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(40,78,145,.16),transparent 68%);
  pointer-events:none;
  opacity:0;
  transition:opacity .4s;
  transform:translate(-50%,-50%);
  left:var(--mx,50%);top:var(--my,50%);
}
html[data-theme="dark"] .card__glow{background:radial-gradient(circle,rgba(220,50,32,.34),transparent 68%)}
.card:hover .card__glow{opacity:1}

/* --- 12. Team ------------------------------------------------------------ */
.person{
  position:relative;
  border:1px solid var(--line);
  background:var(--surface);
  padding:clamp(20px,2.4vw,30px);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .5s var(--ease),background .4s;
}
.person:hover{transform:translateY(-5px);background:var(--red)}
.person:nth-child(odd):hover{background:var(--blue)}
.person:hover .person__name{color:#fff}
.person:hover .person__role{color:#fff}
.person:hover .person__note{color:rgba(255,255,255,.85)}
.person__role{
  font-family:var(--f-mono);font-size:.64rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text);
  transition:color .35s;
}
.person:nth-child(odd) .person__role{color:var(--accent-2)}
.person__name{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(1.45rem,2.6vw,2.05rem);
  transform:skewX(var(--skew));display:inline-block;margin:.5rem 0 .35rem;
  transition:color .35s;
}
.person__note{font-size:.86rem;color:var(--fg-mute);transition:color .35s}

/* Photo bleeds to the card edges, so it cancels the card's own padding. */
.person__photo{
  position:relative;
  margin:calc(clamp(20px,2.4vw,30px) * -1) calc(clamp(20px,2.4vw,30px) * -1) clamp(15px,1.8vw,21px);
  aspect-ratio:4/5;
  background:var(--band);
  overflow:hidden;
}
.person__photo img{
  width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  transition:transform .7s var(--ease);
}
.person:hover .person__photo img{transform:scale(1.04)}

/* Fallback for anyone whose photo we do not have yet. */
.person__photo--none{display:grid;place-items:center;background:var(--band)}
.person__initials{
  font-family:var(--f-display);font-size:clamp(2.2rem,5vw,3.4rem);
  color:var(--fg-mute);opacity:.4;transform:skewX(var(--skew));
}

/* Favourite route and post-run meal, from the roster post. Label and value
   run inline so the long labels wrap instead of forcing a fixed column. */
.person__meta{margin:.9rem 0 0;display:grid;gap:.45rem}
.person__meta > div{font-size:.8rem;line-height:1.5}
.person__meta dt{
  display:inline;
  font-family:var(--f-mono);font-size:.58rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);
  white-space:nowrap;          /* keep the label whole; the value wraps instead */
  transition:color .35s;
}
.person__meta dt::after{content:":"}
.person:nth-child(odd) .person__meta dt{color:var(--accent-2)}
.person__meta dd{display:inline;margin:0 0 0 .4em;color:var(--fg-soft);transition:color .35s}
.person:hover .person__meta dt{color:rgba(255,255,255,.75)}
.person:hover .person__meta dd{color:rgba(255,255,255,.9)}
.person__idx{
  position:absolute;right:14px;top:8px;
  font-family:var(--f-display);font-size:3.6rem;
  color:var(--line);transition:color .35s;pointer-events:none;
}
.person:hover .person__idx{color:rgba(255,255,255,.22)}

/* --- 12b. Ways in (contact panels) --------------------------------------- */
.ways{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.way{background:var(--surface);padding:clamp(20px,2.4vw,30px)}
.way .person__role{color:var(--accent-text)}
.way:nth-child(even) .person__role{color:var(--accent-2)}

/* --- 13. Gallery --------------------------------------------------------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,3vw,40px)}
.chip{
  font-family:var(--f-mono);font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.6em 1.05em;
  border:1.5px solid var(--line-strong);
  color:var(--fg-soft);
  background:var(--surface);
  transition:.3s var(--ease);
}
.chip:hover{border-color:var(--fg);color:var(--fg)}
.chip[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}

.post{margin-bottom:clamp(44px,5.4vw,84px);scroll-margin-top:120px}
.post__head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.1rem;
  padding-bottom:.85rem;margin-bottom:var(--gap);
  border-bottom:1px solid var(--line);
}
.post__date{
  font-family:var(--f-display);
  font-size:clamp(1.6rem,3.1vw,2.5rem);
  text-transform:uppercase;
  transform:skewX(var(--skew));display:inline-block;
}
.post__tag{
  font-family:var(--f-mono);font-size:.62rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  padding:.4em .8em;background:var(--red);color:#fff;
}
.post__tag--saturday{background:var(--blue);color:#fff}
.post__tag--special{background:var(--ink);color:var(--paper)}
.post__where{font-size:.8rem;color:var(--fg-mute);margin-left:auto;font-family:var(--f-mono)}

.gal{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(clamp(150px,20vw,250px),1fr));
  gap:10px;
  grid-auto-flow:dense;
}
.tile{
  position:relative;
  overflow:hidden;
  background:var(--surface-2);
  aspect-ratio:1;
  cursor:zoom-in;
  border:0;
  padding:0;
  display:block;
  width:100%;
}
.tile--tall{grid-row:span 2;aspect-ratio:1/2}
.tile--wide{grid-column:span 2;aspect-ratio:2}
.tile--big{grid-column:span 2;grid-row:span 2;aspect-ratio:1}
@media (max-width:620px){
  .tile--tall{grid-row:span 1;aspect-ratio:1}
  .tile--wide,.tile--big{grid-column:span 2;grid-row:span 1;aspect-ratio:2}
}
.tile img,.tile video{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease),filter .5s;
  filter:saturate(.9) contrast(1.02);
}
.tile:hover img,.tile:hover video,.tile:focus-visible img{transform:scale(1.07);filter:none}
.tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 55%,rgba(220,50,32,.42));
  opacity:0;transition:opacity .4s;
}
.tile:hover::after,.tile:focus-visible::after{opacity:1}
.tile__play{
  position:absolute;right:9px;bottom:9px;
  width:30px;height:30px;
  display:grid;place-items:center;
  background:rgba(11,11,12,.72);
  color:#fff;
  border-radius:50%;
  pointer-events:none;
}

.empty{
  border:2px dashed var(--line-strong);
  padding:clamp(34px,5vw,68px);
  text-align:center;
}
.empty code{
  font-family:var(--f-mono);font-size:.85rem;
  background:var(--surface-2);padding:.28em .55em;color:var(--accent-text);
  display:inline-block;margin-top:.3rem;
}

/* --- 14. Lightbox -------------------------------------------------------- */
/* Always dark, in both themes — a photo viewer should get out of the way. */
.lb{
  position:fixed;inset:0;z-index:300;
  display:grid;place-items:center;
  background:rgba(6,6,7,.96);
  backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;
  transition:opacity .35s,visibility .35s;
  padding:clamp(44px,6vw,72px) clamp(14px,4vw,60px);
  color:var(--paper);
}
.lb.is-open{opacity:1;visibility:visible}
.lb__stage{max-width:100%;max-height:100%;display:grid;place-items:center}
.lb__stage img,.lb__stage video{
  max-width:100%;
  max-height:calc(100dvh - 170px);
  width:auto;height:auto;
  object-fit:contain;
  animation:pop .4s var(--ease);
}
@keyframes pop{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
.lb__bar{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:1rem;
  padding:14px clamp(14px,4vw,30px) calc(14px + env(safe-area-inset-bottom));
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;
  color:#8E8E96;
  border-top:1px solid rgba(255,255,255,.13);
  background:rgba(11,11,12,.6);
}
.lb__bar b{color:var(--paper);text-transform:uppercase}
.lb__count{margin-left:auto;font-variant-numeric:tabular-nums;flex:none}
.lb__btn{
  position:absolute;
  width:52px;height:52px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  color:var(--paper);
  transition:background .25s,transform .25s;
}
.lb__btn:hover{background:var(--red);transform:scale(1.06)}
.lb__prev{left:clamp(8px,1.6vw,22px);top:50%;margin-top:-26px}
.lb__next{right:clamp(8px,1.6vw,22px);top:50%;margin-top:-26px}
.lb__close{right:clamp(8px,1.6vw,22px);top:clamp(8px,1.6vw,22px)}
@media (max-width:620px){ .lb__prev,.lb__next{top:auto;bottom:80px;margin-top:0} }

/* --- 15. Partner logo wall ---------------------------------------------- */
.logos{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:1px;
}
/* Each cell rules itself, so the tail of a part-filled row stays paper
   instead of turning into a grey slab. */
.logo{
  display:grid;place-items:center;
  min-height:104px;padding:1.1rem;
  background:var(--bg);
  box-shadow:0 0 0 1px var(--line);
  text-align:center;
  font-family:var(--f-mono);font-size:.74rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--fg-mute);
  transition:.4s var(--ease);
}
.sec--paper .logo{background:var(--band)}
.logo:hover{background:var(--blue);color:#fff;transform:scale(1.03);z-index:2;position:relative}
.logo:nth-child(3n):hover{background:var(--red)}

/* --- 16. Accordion ------------------------------------------------------- */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;
  display:flex;align-items:center;gap:1.2rem;
  padding:clamp(17px,2.2vw,26px) 0;
  text-align:left;
  font-family:var(--f-body);font-weight:700;
  font-size:clamp(1rem,1.6vw,1.2rem);
  transition:color .3s,padding-left .4s var(--ease);
}
.acc__btn:hover{color:var(--accent-2);padding-left:10px}
.acc__ico{margin-left:auto;flex:none;width:26px;height:26px;position:relative}
.acc__ico::before,.acc__ico::after{
  content:"";position:absolute;left:50%;top:50%;
  width:14px;height:2px;background:currentColor;
  transform:translate(-50%,-50%);
  transition:transform .38s var(--ease);
}
.acc__ico::after{transform:translate(-50%,-50%) rotate(90deg)}
.acc__btn[aria-expanded="true"] .acc__ico::after{transform:translate(-50%,-50%) rotate(0)}
.acc__btn[aria-expanded="true"]{color:var(--accent-text)}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.acc__panel[data-open="true"]{grid-template-rows:1fr}
.acc__panel > div{overflow:hidden}
.acc__panel p{margin:0 0 1.3rem;max-width:74ch;color:var(--fg-soft)}

/* --- 17. Route cards ----------------------------------------------------- */
.route{
  border:1px solid var(--line);
  background:var(--surface);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:border-color .4s,transform .5s var(--ease);
}
.route:hover{border-color:var(--accent-2);transform:translateY(-4px)}
.route__map{background:var(--surface-2);display:block;width:100%;height:auto}
.route__map .line{
  fill:none;stroke:var(--red);stroke-width:4;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,1400);
  stroke-dashoffset:var(--len,1400);
}
.route--cafe .route__map .line{stroke:var(--blue)}
.route__map.is-in .line{animation:draw 2.4s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.route__map .grid-l{stroke:var(--line);stroke-width:1}
.route__map .dot{fill:var(--fg)}
.route__map .dot-r{fill:var(--red)}
.route__map .lbl{
  font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;
  fill:var(--fg-mute);text-transform:uppercase;
}
.route__body{padding:clamp(18px,2.2vw,26px)}
.route__body h3{font-family:var(--f-display);text-transform:uppercase;font-size:1.5rem;transform:skewX(var(--skew));display:inline-block}
.route__body p{margin:.7rem 0 0;font-size:.9rem;color:var(--fg-soft)}
.route__stats{display:flex;gap:1.6rem;margin-top:1.1rem;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute)}
.route__stats b{color:var(--accent-2);display:block;font-size:1.15rem;letter-spacing:0}

/* --- 18. Race board ------------------------------------------------------ */
.race{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(14px,2.2vw,28px);
  align-items:center;
  padding:clamp(16px,2vw,24px) 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .45s var(--ease);
}
.race:hover{padding-left:12px}
.race__bib{
  font-family:var(--f-mono);font-weight:700;font-size:.72rem;
  letter-spacing:.1em;
  border:1.5px solid var(--line-strong);
  padding:.55em .8em;color:var(--accent-2);
  min-width:74px;text-align:center;
}
.race__name{font-weight:700;font-size:1.04rem}
.race__sub{font-size:.8rem;color:var(--fg-mute);font-family:var(--f-mono)}
.race__time{
  font-family:var(--f-display);font-size:clamp(1.3rem,2.4vw,1.9rem);
  transform:skewX(var(--skew));display:inline-block;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.race__pb{
  display:inline-block;margin-left:.5rem;
  font-family:var(--f-mono);font-size:.56rem;font-weight:700;letter-spacing:.14em;
  background:var(--red);color:#fff;padding:.3em .5em;vertical-align:middle;
  transform:translateY(-4px);
}
@media (max-width:640px){
  .race{grid-template-columns:auto 1fr;row-gap:8px}
  .race__time{grid-column:1/-1}
}

/* --- 19. Merch ----------------------------------------------------------- */
.kit{
  position:relative;
  border:1px solid var(--line);
  background:var(--surface);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .5s var(--ease),border-color .4s;
}
.kit:hover{transform:translateY(-6px);border-color:var(--accent-2)}
.kit__vis{
  aspect-ratio:4/5;
  display:grid;place-items:center;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(80% 60% at 50% 30%,rgba(40,78,145,.10),transparent 70%),
    var(--surface-2);
}
html[data-theme="dark"] .kit__vis{
  background:
    radial-gradient(80% 60% at 50% 30%,rgba(220,50,32,.24),transparent 70%),
    var(--ink-3);
}
.kit__vis img{width:52%;opacity:.94;transition:transform .7s var(--ease);position:relative;z-index:2}
.kit:hover .kit__vis img{transform:scale(1.09) rotate(-5deg)}
.kit__vis .ghost{
  position:absolute;
  font-family:var(--f-display);
  font-size:clamp(3rem,7vw,5.4rem);
  text-transform:uppercase;
  color:rgba(20,20,26,.10);
  transform:skewX(var(--skew));
  white-space:nowrap;
  pointer-events:none;
  z-index:1;
}
html[data-theme="dark"] .kit__vis .ghost{color:rgba(255,255,255,.055)}
.kit__body{padding:clamp(16px,2vw,24px) clamp(16px,2vw,24px) .4rem;display:flex;align-items:baseline;gap:1rem}
.kit__body h3{font-family:var(--f-display);text-transform:uppercase;font-size:1.35rem;transform:skewX(var(--skew));display:inline-block}
.kit__price{margin-left:auto;font-family:var(--f-mono);font-weight:700;color:var(--accent-text);font-size:.9rem;white-space:nowrap}
.kit__note{font-size:.82rem;color:var(--fg-mute);padding:0 clamp(16px,2vw,24px) clamp(16px,2vw,24px);margin:0}

/* --- 20. CTA / footer ---------------------------------------------------- */
/* The bottom anchor: a red slab, then ink. */
.cta{
  position:relative;
  background:var(--red);
  color:#fff;
  padding:clamp(64px,8vw,120px) 0;
  overflow:hidden;
}
.cta__mark{
  position:absolute;right:-3vw;top:50%;
  transform:translateY(-50%);
  width:clamp(180px,26vw,380px);
  opacity:.14;pointer-events:none;
}
.cta .shell{position:relative;z-index:2}
.cta .lede{color:rgba(255,255,255,.9)}
.cta .eyebrow{color:#fff}
.cta .eyebrow::before{background:#fff}
.cta .btn{--bg-b:#fff;--fg-b:var(--red)}
.cta .btn::after{background:var(--ink)}
.cta .btn--ghost{--bg-b:transparent;--fg-b:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.cta .btn--ghost::after{background:#fff}
.cta .btn--ghost:hover{color:var(--red)}

.foot{padding:clamp(48px,6vw,84px) 0 28px}
.foot__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:var(--gap);margin-bottom:clamp(34px,4vw,58px)}
@media (max-width:840px){ .foot__top{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot__top{grid-template-columns:1fr} }
.foot h4{
  font-family:var(--f-mono);font-size:.66rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blue-lift);margin:0 0 1.1rem;
}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.62rem}
.foot a{color:#BFBCB6;font-size:.92rem;transition:color .25s,padding-left .3s var(--ease);display:inline-block}
.foot a:hover{color:var(--red);padding-left:5px}
.foot__brand img{width:58px;margin-bottom:1rem}
.foot__brand p{color:var(--fg-mute);font-size:.88rem;max-width:34ch;margin:0}
.foot__base{
  display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;
  padding-top:22px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-mute);
}
.foot__base .right{margin-left:auto}

.socials{display:flex;gap:9px;margin-top:1.1rem}
.socials a{
  width:40px;height:40px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--paper);
  transition:.3s var(--ease);
}
.socials a:hover{background:var(--red);border-color:var(--red);transform:translateY(-3px);padding-left:0;color:#fff}

/* Confirmation state — the club email has just been copied. Wins over :hover,
   since the pointer is still sitting on the tile when the tick appears. */
.socials a.is-copied,
.socials a.is-copied:hover{
  background:var(--green);
  border-color:var(--green);
  color:#fff;
  transform:none;
}

/* --- 21. Reveal / cursor ------------------------------------------------- */
/* Hidden only when JS is running, so a no-JS visitor still sees everything. */
.js [data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:var(--d,0ms);
}
.js [data-reveal].is-in{opacity:1;transform:none}

.cursor{
  position:fixed;left:0;top:0;z-index:400;
  width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1.5px solid var(--red);
  border-radius:50%;
  pointer-events:none;
  transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),opacity .3s,background .3s;
  opacity:0;
}
.cursor.is-on{opacity:1}
.cursor.is-big{width:66px;height:66px;margin:-33px 0 0 -33px;background:rgba(220,50,32,.18)}
@media (hover:none),(pointer:coarse){ .cursor{display:none} }

/* --- 22. Motion & print -------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .js [data-reveal]{opacity:1;transform:none}
  .marquee__track{animation:none}
  .route__map .line{stroke-dashoffset:0}
  .cursor{display:none}
}
@media print{
  .nav,.marquee,.cursor,.scroll-cue,#trail,.lb,.hero__mark,.tog{display:none!important}
  body{background:#fff;color:#000}
  body::before{display:none}
  .hero__bg,.phead__bg{background:none!important}
  .hero,.phead,.foot{--fg:#000;--fg-soft:#333;--fg-mute:#555;color:#000}
  .cta{background:#fff;color:#000;border-top:2px solid #000}
}