/* ═══════════════════════════════════════════════════════════════
   FERRAN TORRES — 7
   One typeface. Inter, worked hard: hairline weights at display
   sizes against heavy weights at label sizes. No second face.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --paper:#ffffff;
  --ink:#0a0a0a;
  --ash:#9b9b9b;
  --line:rgba(10,10,10,.13);
  --line-strong:rgba(10,10,10,.3);

  --edge:clamp(18px, 3.4vw, 64px);
  --gut:clamp(10px, 1.5vw, 24px);
  --bay:clamp(5rem, 15vh, 13rem);
  --nav-h:clamp(52px, 6vh, 68px);

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.2,1);

  --f:"Inter","Helvetica Neue",Arial,sans-serif;

  --vb:0px;   /* motion blur, written by js/flow.js from scroll speed */

  /* Club accent. Monochrome until a crest is pressed, at which point
     js/clubs.js writes real values onto :root. Defaulting to --ink
     means every rule below works unthemed without a second code path. */
  --accent:var(--ink);
  --accent-ink:var(--ink);
  --accent-mark:var(--ink);
}

.inv{
  --paper:#0a0a0a;
  --ink:#ffffff;
  --ash:#727272;
  --line:rgba(255,255,255,.16);
  --line-strong:rgba(255,255,255,.34);
  background:var(--paper);
  color:var(--ink);
}
/* ── Club dress ────────────────────────────────────────────────
   Pressing a crest repaints the system, not just an accent: the type
   takes the club's ink, the hairlines and the muted greys tint with
   it, and the inverted blocks trade black for the club's deep tone.
   The page stays white — for Paris that is precisely the palette. */
:root[data-club]{
  --ink:var(--club-ink);
  --accent:var(--club-accent);
  --accent-ink:var(--club-ink);
  --accent-mark:var(--club-mark);
  --ash:color-mix(in srgb, var(--club-ink) 46%, #ffffff);
  --line:color-mix(in srgb, var(--club-ink) 17%, transparent);
  --line-strong:color-mix(in srgb, var(--club-ink) 38%, transparent);
}
:root[data-club] .inv{
  --paper:var(--club-deep);
  --ink:#ffffff;
  --accent-ink:color-mix(in srgb, var(--club-accent) 72%, #ffffff);
  --ash:color-mix(in srgb, #ffffff 52%, var(--club-deep));
  --line:rgba(255,255,255,.17);
  --line-strong:rgba(255,255,255,.36);
}
/* the carousel sits on white whatever the club */
:root[data-club] .reel,
:root[data-club] .reel__stage{background:#fff}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html,body{margin:0;padding:0}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f);
  font-size:16px;
  line-height:1.45;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
body.is-loading{overflow:hidden;height:100vh}

img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0}

::selection{background:var(--accent-ink);color:#fff}
.inv ::selection{background:var(--accent-ink);color:#fff}

.edge{padding-inline:var(--edge)}
.bay{padding-block:var(--bay)}

/* ── Type ───────────────────────────────────────────────────── */

.meta{
  font-size:clamp(9.5px,.72vw,11px);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:1.3;
  font-feature-settings:"tnum" 1;
}
.meta--ash{color:var(--ash)}

.kicker{
  display:block;
  font-size:clamp(9.5px,.72vw,11px);
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ash);
}
:root[data-club] .kicker{color:var(--accent-ink)}

.d-heavy{font-weight:700;text-transform:uppercase;line-height:.82;letter-spacing:-.045em}
.d-light{font-weight:200;line-height:.94;letter-spacing:-.035em}
.d-xxl{font-size:clamp(3.2rem,15vw,15rem)}
.d-xl {font-size:clamp(2.6rem,9.5vw,9rem)}
.d-lg {font-size:clamp(2rem,6vw,5.6rem)}
.d-md {font-size:clamp(1.5rem,3.6vw,3.2rem)}

.body-lg{
  font-size:clamp(1.05rem,1.55vw,1.45rem);
  font-weight:300;line-height:1.45;letter-spacing:-.012em;max-width:42ch;
}
.body-sm{
  font-size:clamp(.92rem,1.05vw,1.05rem);
  font-weight:300;line-height:1.6;letter-spacing:-.005em;max-width:52ch;color:var(--ash);
}

.rule{display:block;height:1px;background:var(--accent-ink);transform-origin:left;transform:scaleX(0)}

[data-split-lines]{display:block}
.sl{display:block;overflow:hidden;padding-block:.16em;margin-block:-.16em}
.sl > i{display:block;font-style:normal;will-change:transform}
.line{display:block;overflow:hidden;padding-block:.18em;margin-block:-.18em}
.line > span{display:block;will-change:transform}

/* ── Chrome ─────────────────────────────────────────────────── */

.grain{
  position:fixed;inset:-50%;z-index:9000;pointer-events:none;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(3) infinite;
  mix-blend-mode:multiply;
}
@keyframes grain{
  0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}
  66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}
}

.cursor{
  position:fixed;top:0;left:0;z-index:9500;pointer-events:none;
  mix-blend-mode:difference;opacity:0;transition:opacity .3s;
}
.cursor.is-on{opacity:1}
.cursor__dot{
  display:block;width:8px;height:8px;margin:-4px 0 0 -4px;
  border-radius:50%;background:#fff;transition:transform .4s var(--e-out);
}
.cursor.is-big .cursor__dot{transform:scale(4.2)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ── Nav links: typography only, no boxes ───────────────────────
   Hover is a rule that draws under the word, never a change in
   opacity — a faded label reads as disabled, not as hovered.      */

.btn{
  display:inline-block;position:relative;
  padding:2px 0;
  font-size:clamp(9.5px,.72vw,11px);
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);cursor:pointer;white-space:nowrap;
  background:none;border:0;
}
.btn::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--e-out);
}
.btn:hover::after,.btn:focus-visible::after{transform:scaleX(1);transform-origin:left}
.btn:focus-visible{outline:none}
.btn--lang{letter-spacing:.14em}
.btn--lang.is-on::after{transform:scaleX(1)}

/* ── Loader ─────────────────────────────────────────────────── */

.loader{position:fixed;inset:0;z-index:9800;background:#fff;display:grid;place-items:center}
.loader__canvas{position:absolute;inset:0;width:100%;height:100%;will-change:filter,transform,opacity}
.loader__ui{
  position:absolute;inset:0;padding:var(--edge);
  display:flex;flex-direction:column;justify-content:space-between;
  color:var(--ink);pointer-events:none;
}
.loader__row{display:flex;justify-content:space-between;align-items:baseline}

/* The badge roll that closes the intro. Sits above the 3D canvas and
   takes over once the mark has stepped back. */
.loader__crests{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,3vw,46px);
  pointer-events:none;
}
.lcrest{
  width:clamp(52px,9vw,116px);height:auto;object-fit:contain;
  opacity:0;transform:scale(.35);
  will-change:transform,opacity,filter;
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.18));
}
.loader__count{font-variant-numeric:tabular-nums}

/* ── Nav ────────────────────────────────────────────────────── */

/* The bar used to be one difference-blended layer. That is reliable
   only over near-black or near-white; with the carousel now in colour
   it sat on mid-tones and vanished. It is explicit now: dark type by
   default, light type over blocks that declare themselves dark, and a
   soft scrim underneath so a photograph can never eat it. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:8000;
  height:var(--nav-h);padding-inline:var(--edge);
  display:flex;align-items:center;gap:var(--gut);
  color:#0a0a0a;
  opacity:0;transform:translateY(-10px);
  transition:color .45s var(--e-io);
}
.nav::before{
  content:"";position:absolute;left:0;right:0;top:0;
  height:calc(var(--nav-h) * 2.1);
  background:linear-gradient(to bottom, rgba(255,255,255,.82), rgba(255,255,255,0));
  pointer-events:none;z-index:-1;
  transition:background .45s var(--e-io);
}
.nav[data-on="dark"]{color:#ffffff}
.nav[data-on="dark"]::before{
  background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
}
.nav.is-in{opacity:1;transform:none;transition:opacity .9s var(--e-out),transform .9s var(--e-out),color .45s var(--e-io)}
.nav__left{display:flex;align-items:center;gap:clamp(10px,1.4vw,20px)}
.nav .btn{color:currentColor}
.nav .btn[aria-current="page"]::after{transform:scaleX(1)}

.nav__mark{display:block;width:clamp(28px,2.6vw,40px);flex:none;color:currentColor}
.nav__mark svg{width:100%;height:auto}
.nav__links{display:flex;gap:clamp(14px,1.8vw,30px);margin-left:auto;align-items:center}
.nav__lang{display:flex;gap:12px;margin-left:clamp(22px,3vw,52px)}
@media (max-width:820px){ .nav__links{display:none} }

/* ══ MOBILE MENU ════════════════════════════════════════════════ */

.burger{
  display:none;position:relative;z-index:2;
  width:30px;height:20px;margin-left:auto;
  cursor:pointer;background:none;border:0;padding:0;
}
.burger span{
  position:absolute;left:0;right:0;height:1.5px;
  background:currentColor;
  transition:transform .45s var(--e-io),opacity .3s linear;
}
.burger span:nth-child(1){top:5px}
.burger span:nth-child(2){bottom:5px}
body.menu-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){transform:translateY(-6.5px) rotate(-45deg)}
.burger:focus-visible{outline:1px solid currentColor;outline-offset:6px}

.menu{
  position:fixed;inset:0;z-index:7900;
  background:var(--paper);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + var(--edge)) var(--edge) var(--edge);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--e-io);
  pointer-events:none;
}
body.menu-open .menu{clip-path:inset(0 0 0 0);pointer-events:auto}

.menu__links{display:flex;flex-direction:column;gap:clamp(.4rem,1.6vh,1rem)}
.menu__link{
  display:block;
  font-size:clamp(2rem,11vw,3.6rem);
  font-weight:200;letter-spacing:-.04em;line-height:1.02;
  color:var(--ink);
  opacity:0;transform:translateY(24px);
  transition:opacity .5s var(--e-out),transform .6s var(--e-out);
  transition-delay:calc(var(--i) * 45ms);
}
body.menu-open .menu__link{opacity:1;transform:none}
.menu__link[aria-current="page"]{color:var(--accent-ink)}
.menu__link[aria-current="page"]::after{
  content:"";display:inline-block;width:.32em;height:.32em;
  margin-left:.4em;vertical-align:.18em;border-radius:50%;
  background:var(--accent);
}

.menu__foot{
  margin-top:auto;padding-top:clamp(1.6rem,5vh,3rem);
  display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  border-top:1px solid var(--line);
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--e-out) .22s,transform .6s var(--e-out) .22s;
}
body.menu-open .menu__foot{opacity:1;transform:none}
.menu__lang{display:flex;gap:14px}

/* every crest is reachable here, unlike the bar */
.menu .crests{gap:16px}
.menu .crest{display:grid}
.menu .crest img{width:30px}
.menu .crest--now img{width:40px}
.menu .crest__yrs{display:none}

@media (max-width:820px){
  .burger{display:block}
  .nav__lang{display:none}
}
@media (min-width:821px){
  .menu{display:none}
}

/* ── Crests ─────────────────────────────────────────────────────
   Greyscale until pressed. The halo is what lets a crest sit on a
   white carousel and a black chapter without a plate behind it. */

.crests{display:flex;align-items:center;gap:clamp(7px,.9vw,14px)}
.crest{
  position:relative;display:grid;place-items:center;
  cursor:pointer;background:none;border:0;padding:0;
  line-height:0;
}
.crest img{
  width:clamp(19px,1.75vw,26px);height:auto;
  object-fit:contain;
  filter:grayscale(1) contrast(1.15)
         drop-shadow(0 0 1px rgba(255,255,255,.85))
         drop-shadow(0 0 3px rgba(0,0,0,.30));
  transition:filter .45s var(--e-io),transform .45s var(--e-out);
}
/* the current club is simply bigger — no badge, no label */
.crest--now img{width:clamp(27px,2.5vw,37px)}
.crest:hover img,.crest:focus-visible img{transform:translateY(-2px)}
.crest.is-on img{
  filter:drop-shadow(0 0 1px rgba(255,255,255,.85))
         drop-shadow(0 0 3px rgba(0,0,0,.28));
}
.crest:focus-visible{outline:1px solid var(--accent-ink);outline-offset:4px}
.crest::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:center;
  transition:transform .45s var(--e-out);
}
.crest.is-on::after{transform:scaleX(1)}
.crest__yrs{
  position:absolute;top:calc(100% + 11px);left:50%;transform:translateX(-50%);
  white-space:nowrap;color:var(--ash);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.crest:hover .crest__yrs{opacity:1}

@media (max-width:640px){
  .crest{display:none}
  .crest--now{display:grid}
  .crest__yrs{display:none}
}

/* ══ REEL — the entrance ════════════════════════════════════════
   A white page, a strip of cards in the middle, the name beneath.
   Scrolling pushes the strip forward until the first card is the
   whole screen, then drives the strip sideways, card by card.     */

.reel{position:relative;background:#fff}
.reel__stage{position:sticky;top:0;height:100svh;width:100%;max-width:100%;overflow:hidden;background:#fff}
.reel__track{
  position:absolute;top:0;left:0;
  display:flex;align-items:center;
  transform-origin:0 0;will-change:transform;
}
.reel__card{position:relative;flex:none;overflow:hidden;background:#f2f2f2}
/* The entrance is in colour. Everything downstream stays monochrome,
   so the carousel is the one place the palette is allowed to sing. */
.reel__card > img,.reel__card > video{
  width:100%;height:100%;object-fit:cover;object-position:50% 26%;
  filter:contrast(1.03) blur(var(--vb));
}
.reel__card[data-keep-color] > img,
.reel__card[data-keep-color] > video{filter:blur(var(--vb))}

/* The name runs down the left margin. writing-mode does the rotation
   properly — the glyphs turn with the line rather than the whole block
   being transformed, so the text stays selectable and searchable.

   nowrap on both lines is not optional: without it the browser breaks
   the run into a second vertical column and the reading order falls
   apart (you get "Seven Paris Champion" in one column and "World" in
   the next). */
.reel__title{
  position:absolute;
  left:var(--edge);
  top:50%;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  display:flex;
  align-items:center;
  gap:clamp(1.4rem,3vh,2.6rem);
  max-height:84svh;
  color:#0a0a0a;pointer-events:none;
  will-change:transform,opacity;
  z-index:30;
}
.reel__title b{
  white-space:nowrap;
  font-weight:700;text-transform:uppercase;
  font-size:clamp(1.05rem,2.5vw,2.1rem);
  letter-spacing:.04em;line-height:1;
}
.reel__title i{
  white-space:nowrap;
  font-style:normal;
  font-size:clamp(8.5px,.62vw,10px);font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ash);
}
/* a short viewport has no room for both lines */
@media (max-height:680px){ .reel__title i{display:none} }


/* ══ AURORA ═════════════════════════════════════════════════════
   Four radial washes drifting behind the carousel. They are plain
   radial-gradients, not blurred solids: a gradient that fades to
   transparent is already soft, and it costs nothing to move, whereas
   a large blur filter re-renders every frame it is animated behind.
   Only a light blur sits on the container, for the smeared edge the
   look depends on.

   The palette follows whichever crest is pressed. Unthemed it is
   barely-there grey, so the default page stays white. */

.reel__aurora{
  position:absolute;inset:-22%;
  z-index:0;pointer-events:none;
  overflow:hidden;
  opacity:.5;
  --au1:#c9c9c9; --au2:#d6d6d6; --au3:#cfcfcf;
}
:root[data-club] .reel__aurora{
  --au1:var(--club-ink);
  --au2:var(--club-accent);
  --au3:var(--club-mark);
  opacity:.8;
}
/* The blur sits on each wash, never on the container. A filter on the
   parent re-renders the whole area on every frame its children move;
   per-element, each wash is its own composited layer and moving it is
   only a transform. js/aurora.js writes those transforms. */
.au{
  position:absolute;top:0;left:0;display:block;
  border-radius:50%;
  filter:blur(28px) saturate(1.45);
  will-change:transform;
}
.au--1{
  width:74vmax;height:42vmax;
  background:radial-gradient(ellipse at 50% 50%,
    color-mix(in srgb, var(--au1) 94%, transparent) 0%,
    color-mix(in srgb, var(--au1) 42%, transparent) 40%, transparent 70%);
}
.au--2{
  width:62vmax;height:36vmax;
  background:radial-gradient(ellipse at 50% 50%,
    color-mix(in srgb, var(--au2) 90%, transparent) 0%,
    color-mix(in srgb, var(--au2) 38%, transparent) 42%, transparent 72%);
}
.au--3{
  width:56vmax;height:50vmax;
  background:radial-gradient(ellipse at 50% 50%,
    color-mix(in srgb, var(--au3) 82%, transparent) 0%,
    color-mix(in srgb, var(--au3) 34%, transparent) 44%, transparent 74%);
}
.au--4{
  width:50vmax;height:29vmax;
  background:radial-gradient(ellipse at 50% 50%,
    color-mix(in srgb, var(--au2) 74%, transparent) 0%,
    color-mix(in srgb, var(--au1) 32%, transparent) 48%, transparent 76%);
}

/* the cards sit above the weather */
.reel__track{z-index:1}
.reel__title{z-index:30}


/* ── Statement ──────────────────────────────────────────────── */

.statement{padding-block:var(--bay)}
.statement__name{
  font-size:clamp(2.1rem,10.4vw,10rem);
  line-height:.9;
  transform-origin:left center;
  will-change:transform,opacity;
  white-space:nowrap;
}
.statement__meta{
  display:flex;flex-wrap:wrap;gap:.5rem 2.2rem;
  padding-bottom:1.2rem;margin-bottom:clamp(2rem,5vw,4rem);
  border-bottom:1px solid var(--line);color:var(--ash);
}
.statement__grid{display:grid;gap:var(--gut)}
@media (min-width:900px){.statement__grid{grid-template-columns:1.3fr 1fr;align-items:end}}

/* ── Full-bleed pinned frame ────────────────────────────────── */

.frame{position:relative;height:200vh;background:var(--paper)}
.frame__pin{position:sticky;top:0;height:100svh;overflow:hidden}
.frame__pin img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 24%;
  filter:grayscale(1) contrast(1.08) blur(var(--vb));will-change:transform;
}
.frame__pin[data-keep-color] img{filter:contrast(1.02) blur(var(--vb))}
.frame__cap{
  position:absolute;left:var(--edge);right:var(--edge);bottom:var(--edge);
  display:flex;justify-content:space-between;align-items:end;gap:1rem;
  color:#fff;mix-blend-mode:difference;
}
.frame__word{
  position:absolute;left:var(--edge);right:var(--edge);top:50%;
  transform:translateY(-50%);color:#fff;mix-blend-mode:difference;
  text-align:center;pointer-events:none;
}

/* ── Offset duo ─────────────────────────────────────────────── */

.duo{display:grid;gap:var(--gut);padding-block:var(--bay)}
@media (min-width:820px){
  .duo{grid-template-columns:1.25fr 1fr;align-items:start}
  .duo__b{margin-top:22vh}
}
.duo figure{position:relative;overflow:hidden}
.duo img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;filter:grayscale(1) contrast(1.08) blur(var(--vb));will-change:transform}
.duo__a{aspect-ratio:4/5}
.duo__b{aspect-ratio:3/4}
.duo figcaption{position:absolute;left:10px;right:10px;bottom:10px;display:flex;justify-content:space-between;color:#fff;mix-blend-mode:difference}

/* ── Gaze (3D portrait) ─────────────────────────────────────── */

.gaze{position:relative}
.gaze__stage{position:relative;height:125svh}
.gaze__canvas{position:sticky;top:0;width:100%;height:100svh}
.gaze__copy{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  pointer-events:none;mix-blend-mode:difference;color:#fff;
}
.gaze__copy .kicker{color:rgba(255,255,255,.6);margin-bottom:1.2rem}
.gaze__hint{margin-top:1.6rem;color:rgba(255,255,255,.6)}

/* ── Horizontal chapter ─────────────────────────────────────── */

.rail{position:relative;background:var(--paper)}
.rail__pin{height:100svh;max-width:100%;overflow:hidden;display:flex;align-items:center}
.rail__track{display:flex;align-items:center;gap:var(--gut);padding-inline:var(--edge);will-change:transform}
.rail__lead{
  flex:none;width:clamp(220px,28vw,420px);
  display:flex;flex-direction:column;justify-content:space-between;
  height:54svh;padding-right:clamp(1rem,3vw,3rem);
}
.rail__lead .rl-t{font-weight:200;font-size:clamp(1.8rem,4.6vw,4rem);letter-spacing:-.04em;line-height:.95}
.rl{flex:none;position:relative;overflow:hidden;background:#111}
.rl img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;filter:grayscale(1) contrast(1.08) blur(var(--vb));will-change:transform}
.rl figcaption{position:absolute;left:10px;bottom:10px;color:#fff;mix-blend-mode:difference}
.rl--tall{width:clamp(230px,26vw,430px);height:74svh}
.rl--wide{width:clamp(320px,42vw,700px);height:54svh}
.rl--sm{width:clamp(170px,18vw,290px);height:38svh}

/* ── Chapter index ──────────────────────────────────────────── */

.chapters{padding-block:var(--bay)}
.chapters ol{border-top:1px solid var(--line);margin-top:clamp(1.6rem,4vw,3rem)}
.ch-row{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;
  padding-block:clamp(1rem,2.6vw,2rem);border-bottom:1px solid var(--line);
}
.ch-row--dated{grid-template-columns:auto 1fr auto}
.ch-row__n{font-size:10px;letter-spacing:.2em;color:var(--ash);font-variant-numeric:tabular-nums}
.ch-row__t{
  font-size:clamp(1.6rem,5.2vw,4.4rem);font-weight:200;letter-spacing:-.04em;line-height:1;
  display:inline-block;transition:transform .6s var(--e-out);
}
.ch-row:hover .ch-row__t{transform:translateX(clamp(8px,1.6vw,26px));color:var(--accent-ink)}
.ch-row__d{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}

/* ── Facts / boards ─────────────────────────────────────────── */

.facts{display:grid;gap:0}
.fact{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-block:clamp(.7rem,1.6vw,1.1rem);border-bottom:1px solid var(--line);
}
.fact:first-child{border-top:1px solid var(--line)}
.fact b{font-weight:500;font-size:clamp(1rem,2vw,1.5rem);letter-spacing:-.025em}
.fact span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);font-variant-numeric:tabular-nums}

.boards{display:grid;gap:var(--gut)}
@media (min-width:820px){.boards{grid-template-columns:1fr 1fr}}
.board{border:1px solid var(--line-strong);padding:clamp(1.1rem,2.6vw,2rem)}
.board__k{display:block;color:var(--ash);margin-bottom:clamp(1.6rem,4vw,3rem)}
.board__teams{
  display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  font-size:clamp(1.1rem,2.8vw,2.3rem);font-weight:600;letter-spacing:-.04em;
  text-transform:uppercase;line-height:1;
}
.board__v{font-weight:200;color:var(--ash)}
.board__meta{display:flex;justify-content:space-between;gap:1rem;margin-top:clamp(1rem,2.6vw,2rem);color:var(--ash)}

/* ── Footer ─────────────────────────────────────────────────── */

.foot{padding-block:var(--bay) var(--edge)}
.foot__grid{display:grid;gap:2.6rem;padding-bottom:clamp(3rem,10vh,7rem)}
@media (min-width:820px){.foot__grid{grid-template-columns:repeat(3,1fr);gap:var(--gut)}}
.foot__col{display:flex;flex-direction:column;align-items:start;gap:.35rem}
.foot__col .kicker{margin-bottom:.9rem}
.foot__a{font-size:clamp(1rem,1.9vw,1.4rem);font-weight:300;letter-spacing:-.02em;position:relative}
.foot__a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e-out);
}
.foot__a:hover::after{transform:scaleX(1);transform-origin:left}
.foot__a:hover{color:var(--accent-ink)}
.foot__base{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:1rem}

/* ── Inner-page header ──────────────────────────────────────── */

.phead{padding-block:calc(var(--nav-h) + var(--bay)) var(--bay)}
.phead__top{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-bottom:1.2rem;border-bottom:1px solid var(--line);
  margin-bottom:clamp(2rem,6vw,5rem);color:var(--ash);
}
.phead__lede{margin-top:clamp(2rem,5vw,3.5rem)}

/* ── Editorial grid ─────────────────────────────────────────── */

.grid12{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gut)}
@media (min-width:860px){.grid12{grid-template-columns:repeat(12,1fr)}}
.cell{position:relative;overflow:hidden}
.cell img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;filter:grayscale(1) contrast(1.08) blur(var(--vb));will-change:transform}
.cell[data-keep-color] img{filter:contrast(1.02) blur(var(--vb))}
.cell figcaption{position:absolute;left:10px;right:10px;bottom:10px;display:flex;justify-content:space-between;color:#fff;mix-blend-mode:difference}

.c-2{grid-column:span 2}.c-3{grid-column:span 3}.c-4{grid-column:span 4}
.c-5{grid-column:span 5}.c-6{grid-column:span 6}.c-7{grid-column:span 7}
.c-8{grid-column:span 8}.c-12{grid-column:1/-1}
@media (max-width:859px){
  .c-2,.c-3,.c-4,.c-5,.c-6,.c-7,.c-8{grid-column:span 1}
  .c-12{grid-column:1/-1}
}
.r-45{aspect-ratio:4/5}.r-34{aspect-ratio:3/4}.r-11{aspect-ratio:1/1}
.r-32{aspect-ratio:3/2}.r-169{aspect-ratio:16/9}
.push{margin-top:clamp(2rem,10vw,9rem)}


/* ══ LOGOMARK — the monogram writes itself ══════════════════════ */

.logomark{position:relative;height:320vh}
.logomark__stage{
  position:sticky;top:0;height:100svh;
  display:grid;place-items:center;
  transform-origin:50% 50%;will-change:transform;
}
.logomark__svg{
  width:min(64vw,54vh);max-width:100%;height:auto;overflow:visible;
  color:var(--ink);
}
.logomark__meta{
  position:absolute;left:var(--edge);right:var(--edge);
  bottom:var(--edge);display:flex;justify-content:space-between;
  color:var(--ash);pointer-events:none;
}
.logomark__cap{font-variant-numeric:tabular-nums}

/* ══ CASCADE — frames born small, growing into a spread ═════════ */

.cascade{position:relative;height:430vh}
.cascade__pin{
  position:sticky;top:0;height:100svh;max-width:100%;overflow:hidden;
  display:grid;place-items:center;
}
.cascade__item{
  position:absolute;
  width:min(30vw,300px);aspect-ratio:4/5;
  overflow:hidden;background:#111;
  will-change:transform,opacity;opacity:0;
}
.cascade__item img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:grayscale(1) contrast(1.08) blur(var(--vb))}
.cascade__item[data-keep-color] img{filter:contrast(1.03) blur(var(--vb))}
.cascade__item[data-keep-color] img{filter:contrast(1.02) blur(var(--vb))}
.cascade__item figcaption{
  position:absolute;left:8px;bottom:8px;color:#fff;mix-blend-mode:difference;
}
.cascade__item--wide{width:min(42vw,460px);aspect-ratio:3/2}
.cascade__item--tall{width:min(26vw,270px);aspect-ratio:2/3}

.cascade__copy{
  position:absolute;left:var(--edge);right:var(--edge);
  top:50%;transform:translateY(-50%);
  text-align:center;pointer-events:none;z-index:40;
  mix-blend-mode:difference;color:#fff;
}

/* ══ SWAP — a held frame whose word changes ═════════════════════ */

.swap{position:relative;height:300vh}
.swap__pin{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.swap__stack{position:relative;display:grid;place-items:center;width:100%}
.swap__w{
  grid-area:1/1;
  transition:opacity .45s var(--e-out),transform .45s var(--e-out);
  will-change:opacity,transform;text-align:center;
}

/* ── word-by-word reveal ───────────────────────────────────────── */

.wd{display:inline-block;overflow:hidden;vertical-align:bottom;padding-block:.14em;margin-block:-.14em}
.wd > i{display:inline-block;font-style:normal;will-change:transform,opacity}


/* ── Liquid wash: only while the page is moving ────────────────── */

.flow{
  position:fixed;inset:0;z-index:7000;
  width:100%;height:100%;
  pointer-events:none;
  mix-blend-mode:soft-light;
  opacity:0;transition:opacity .45s linear;
}


/* ══ MARQUEE BAND ═══════════════════════════════════════════════ */

.band{overflow:hidden;border-block:1px solid var(--line);padding-block:clamp(.5rem,1.2vw,.9rem)}
.band__track{display:flex;width:max-content;will-change:transform}
.band__track > span{
  display:inline-block;white-space:nowrap;
  font-size:clamp(1.4rem,4.4vw,4rem);font-weight:200;
  letter-spacing:-.035em;line-height:1.05;
  padding-inline:clamp(.5rem,1.6vw,1.6rem);
}
.band__track .dot{font-weight:200;color:var(--accent);transition:color .5s var(--e-io)}

/* ══ CAMPAIGNS ══════════════════════════════════════════════════ */

.camp{padding-block:var(--bay)}
.camp__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gut)}
@media (min-width:860px){.camp__grid{grid-template-columns:repeat(12,1fr)}}
.camp__card{position:relative;overflow:hidden;background:#111}
.camp__card img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:grayscale(1) contrast(1.08) blur(var(--vb));will-change:transform}
.camp__card figcaption{
  position:absolute;left:12px;right:12px;bottom:12px;
  display:flex;justify-content:space-between;align-items:end;gap:1rem;
  color:#fff;mix-blend-mode:difference;
}
.camp__brand{font-size:clamp(.95rem,1.8vw,1.35rem);font-weight:600;letter-spacing:-.02em;text-transform:none}

/* ══ INSTAGRAM ══════════════════════════════════════════════════ */

.feed{padding-block:var(--bay)}
.feed__head{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-bottom:1.2rem;border-bottom:1px solid var(--line);
  margin-bottom:clamp(1.4rem,3.5vw,2.6rem);
}
.feed__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gut)}
@media (min-width:640px){.feed__grid{grid-template-columns:repeat(4,1fr)}}
.ig{
  position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:#111;
  will-change:transform,opacity;
}
.ig img{
  width:100%;height:100%;object-fit:cover;object-position:50% 24%;
  filter:grayscale(1) contrast(1.08) blur(var(--vb));
  transition:transform .7s var(--e-out);
}
.ig[data-keep-color] img{filter:contrast(1.02) blur(var(--vb))}
.ig:hover img{transform:scale(1.06)}
/* difference blend is fine over a photograph that is mostly light or
   mostly dark, but these tiles are neither — a caption sitting across
   a mid-tone disappears into it. The bottom of each tile gets a scrim
   and the caption goes plain white on top of it. */
.ig::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
  background:linear-gradient(to top,rgba(0,0,0,.62),transparent);
  pointer-events:none;
}
.ig__cap{
  position:absolute;left:10px;bottom:9px;z-index:2;
  color:#fff;
}
.feed__note{margin-top:1.2rem}


/* ══ ROAD — the four clubs, as panels ═══════════════════════════ */

.road{padding-block:var(--bay)}
.road__grid{display:grid;gap:var(--gut);grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.road__grid{grid-template-columns:repeat(4,1fr)}}

.road__panel{
  position:relative;display:block;width:100%;text-align:left;
  border:0;padding:0;background:none;cursor:pointer;
  overflow:hidden;aspect-ratio:3/4;
  background:#111;
}
.road__panel img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.1) blur(var(--vb));
  transition:transform .8s var(--e-out),filter .6s var(--e-io);
}
.road__panel:hover img{transform:scale(1.05)}
.road__panel.is-on img{filter:contrast(1.04) blur(var(--vb))}
.road__panel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.05) 55%);
  pointer-events:none;
}
.road__crest{
  position:absolute;top:12px;left:12px;z-index:2;
  width:clamp(30px,3.4vw,46px);height:auto;
  filter:grayscale(1) drop-shadow(0 0 3px rgba(0,0,0,.5));
  transition:filter .5s var(--e-io);
}
.road__panel.is-on .road__crest{filter:drop-shadow(0 0 3px rgba(0,0,0,.5))}
.road__meta{
  position:absolute;left:12px;right:12px;bottom:12px;z-index:2;
  display:flex;flex-direction:column;gap:.35rem;color:#fff;
}
.road__name{font-size:clamp(.95rem,1.7vw,1.3rem);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.road__yrs{font-size:9.5px;font-weight:600;letter-spacing:.2em;color:rgba(255,255,255,.7)}
.road__bar{
  position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--e-out);
}
.road__panel.is-on .road__bar{transform:scaleX(1)}

/* an empty panel: same frame, no photograph yet */
.road__panel--slot{
  background-image:linear-gradient(to top right,transparent calc(50% - .5px),rgba(255,255,255,.14) 50%,transparent calc(50% + .5px));
}
.road__panel--slot::after{background:none}
.road__panel--slot .road__meta{color:#fff}
.road__slotlabel{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:rgba(255,255,255,.55);z-index:2;white-space:nowrap;
}

/* ── Reveal primitives ──────────────────────────────────────── */

[data-reveal]{opacity:0}
[data-img]{will-change:transform}

/* Faces first. A cover crop centres on the chest of a standing figure;
   these values lift every frame toward the head, and lift it further on
   a phone where the same photograph is cropped much harder. */
@media (max-width:760px){
  .reel__card > img,.reel__card > video{object-position:50% 20%}
  .frame__pin img,.duo img,.rl img,.cell img,.camp__card img{object-position:50% 18%}
  .cascade__item img{object-position:50% 16%}
  .ig img{object-position:50% 20%}
}

/* a chapter row lights up as a whole, not just its label */
.ch-row{position:relative;overflow:hidden}
.ch-row::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--accent);opacity:.08;
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--e-out);
}
.ch-row:hover::before{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .grain{animation:none}
  .flow{display:none}
  :root{--vb:0px !important}
  [data-reveal]{opacity:1}
}