/* Archivo, a variable font (weight 100 to 900, width 62% to 125%), self-hosted from Google Fonts (SIL Open Font
   License). One family does the whole site: expanded black for the big words, condensed bold for labels, normal
   for reading. Latin + Latin Extended subsets; italic Latin only (a handful of words). */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Archivo";font-style:italic;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Waaia FNC, second build. One family (Archivo, variable: weight + width), the club's red and black on white.
   Native scrolling everywhere: nothing here is position: sticky or fixed except the top bar and the two
   dialogs (menu, bag), and no rule ever hides content until a script runs: every `.rv` reveal is visible by
   default and only starts hidden once the head script has armed motion (html.fx). Under reduced motion or
   without JavaScript the page is simply there. Three wrappers (.frame, .story, .band) crop with overflow: clip,
   not hidden: a hidden box is a scroll container, and a scroll-linked animation inside it (animation-timeline:
   view()) would measure against the box instead of the page. Everywhere else hidden stays: a clip box keeps
   its min-content width in a grid (only a scroll container's is zero), and the line-up blew its row out by
   232 px the day this was tried. */

:root {
  --red: #d21f2b;
  --red-deep: #a8121f;
  --red-hot: #ff3b47;
  --red-light: #ffb0b5;
  --ink: #0c0c0e;
  --ink-2: #17171b;
  --ink-3: #26262c;
  --paper: #ffffff;
  --paper-2: #f3f3f5;
  --line: #e3e3e8;
  --muted: #5b5b66;
  --muted-light: #c8c8d2;
  --soft-light: #e7e7ec;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(4rem, 9vw, 8rem);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --snap: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* The hidden attribute wins over any display rule of ours (the browser's own [hidden] rule loses to an author
   display; the map's "Show the map" button and a mutant's hidden film control both found that out). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.55; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, picture, video { max-width: 100%; }
picture { display: block; }
a { color: inherit; }
button { font-family: inherit; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.narrow { max-width: 820px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -120px; z-index: 100; background: var(--red); color: #fff; padding: .7rem 1rem; font-weight: 800; text-decoration: none; }
.skip:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--red-hot); outline-offset: 3px; }

/* ---------- type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1rem; font-size: .78rem; font-weight: 800; font-stretch: 80%; letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.eyebrow::before { content: ""; width: 28px; height: 3px; background: currentColor; }
.eyebrow--light { color: var(--red-light); }
.h1 { margin: 0; font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 900; font-stretch: 112%; text-transform: uppercase; line-height: .92; letter-spacing: -.015em; text-wrap: balance; }
.h1--light { color: #fff; }
.h2 { margin: 0 0 1.2rem; font-size: clamp(2.1rem, 4.6vw, 4.2rem); font-weight: 900; font-stretch: 112%; text-transform: uppercase; line-height: .95; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.h2--light { color: #fff; }
.h2--xl { font-size: clamp(2.6rem, 6.5vw, 6rem); }
.h3 { margin: 0 0 .6rem; font-size: clamp(1.25rem, 1.9vw, 1.6rem); font-weight: 800; line-height: 1.2; color: var(--ink); }
.h3--light { color: #fff; }
.lede { margin: 0 0 1rem; font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.6; color: var(--muted); max-width: 60ch; }
.lede--light { color: var(--soft-light); }
.caption { margin: .7rem 0 0; font-size: .78rem; font-weight: 700; font-stretch: 80%; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.caption--light { color: var(--muted-light); }
.crumbs { margin: 0 0 1rem; }
.crumbs a { font-size: .78rem; font-weight: 800; font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--red); }
.section-head { max-width: 760px; margin: 0 0 2.5rem; }
.section-head--center { margin: 0 auto 2.5rem; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lede { margin-inline: auto; }
.section-head--row { display: flex; justify-content: space-between; align-items: end; gap: 2rem; max-width: none; flex-wrap: wrap; }
.section-head--row .h2 { margin-bottom: 0; }
/* A heading set word by word (templates/lib.mjs words()): each word sits in its own little mask so it can rise
   out of it once motion is armed. Plain inline-blocks otherwise; the words still wrap and balance. */
.w { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w__i { display: inline-block; }

/* ---------- buttons and links ---------- */
.btn { display: inline-flex; align-items: center; gap: .5em; position: relative; isolation: isolate; overflow: hidden; padding: .95em 1.5em; font: inherit; font-weight: 800; font-stretch: 90%; font-size: .95rem; line-height: 1; text-transform: uppercase; letter-spacing: .1em; text-decoration: none; border: 2px solid transparent; border-radius: 0; cursor: pointer; transition: color .3s, border-color .3s, transform .3s var(--ease); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-101%); transition: transform .45s var(--ease); }
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:hover { transform: translateY(-2px); }
.btn svg { transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--red { background: var(--red); color: #fff; border-color: var(--red); }
.btn--red::before { background: var(--red-deep); }
.btn--red:hover { border-color: var(--red-deep); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.btn--ghost::before { background: #fff; }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--ink); border-color: #fff; }
.btn--ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--ink::before { background: var(--red); }
.btn--sm { padding: .7em 1.1em; font-size: .8rem; }
.btn--lg { padding: 1.1em 2em; font-size: 1.1rem; }
.btn[disabled] { opacity: .5; cursor: default; }
.link-arrow { display: inline-flex; align-items: center; gap: .4em; padding-bottom: .15em; font-weight: 800; font-stretch: 85%; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--red); }
.link-arrow svg { transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow--light { color: #fff; }
.link-inline { background: none; border: 0; padding: 0; font: inherit; font-weight: 800; color: var(--red); text-decoration: underline; cursor: pointer; }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 60; background: rgba(12, 12, 14, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .08); transition: box-shadow .3s; view-transition-name: hdr; }
.hdr.is-scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, .28); }
.hdr__in { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; }
.hdr__brand { display: inline-flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; }
.hdr__crest, .hdr__brand img { width: 40px; height: auto; }
.hdr__name { font-weight: 900; font-stretch: 112%; font-size: 1.15rem; letter-spacing: -.01em; white-space: nowrap; }
.hdr__name b { color: var(--red-hot); }
.hdr__nav { margin-left: auto; }
.hdr__nav ul { display: flex; gap: 1.4rem; margin: 0; padding: 0; list-style: none; }
.hdr__nav a { position: relative; display: inline-block; padding: .4rem 0; color: var(--soft-light); text-decoration: none; font-weight: 700; font-stretch: 85%; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.hdr__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red-hot); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.hdr__nav a:hover::after, .hdr__nav a[aria-current]::after, .hdr__nav a:focus-visible::after { transform: scaleX(1); }
.hdr__nav a:hover, .hdr__nav a[aria-current] { color: #fff; }
.hdr__tools { display: flex; align-items: center; gap: .6rem; }
.hdr__bag, .hdr__menu { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .8rem; background: transparent; border: 2px solid rgba(255, 255, 255, .28); color: #fff; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; transition: border-color .3s, background .3s; }
.hdr__bag:hover, .hdr__menu:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.hdr__menu { display: none; padding: .5rem .6rem; }
.bag-count { display: inline-block; min-width: 1.5em; padding: 0 .4em; border-radius: 999px; background: var(--red); color: #fff; font-size: .72rem; font-weight: 800; line-height: 1.5em; text-align: center; }

/* ---------- full-screen menu (a dialog, phones and tablets) ---------- */
.menu { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--ink); color: #fff; }
.menu:not([open]) { display: none; }
.menu::backdrop { background: transparent; }
.menu__in { display: flex; flex-direction: column; min-height: 100%; padding: 1rem var(--gutter) 2rem; }
.menu__head { display: flex; justify-content: space-between; align-items: center; min-height: 52px; }
.menu__close { display: inline-flex; align-items: center; padding: .5rem .6rem; background: transparent; border: 2px solid rgba(255, 255, 255, .28); color: #fff; cursor: pointer; }
.menu__close:hover { border-color: #fff; }
.menu__list { margin: auto 0; padding: 0; list-style: none; }
.menu__link { display: block; padding: .15em 0; font-size: clamp(2.4rem, 9vw, 5rem); font-weight: 900; font-stretch: 112%; line-height: 1.05; text-transform: uppercase; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .12); transition: color .3s, transform .3s var(--ease); }
.menu__link:hover, .menu__link:focus-visible { color: var(--red-hot); transform: translateX(.2em); }
.menu__foot { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding-top: 1.5rem; }
.menu__meta { margin: 0; color: var(--muted-light); font-size: .9rem; }
.menu__meta a { color: #fff; }

/* ---------- moving footage ---------- */
.film { position: absolute; inset: 0; overflow: hidden; background: var(--ink); }
.film__poster, .film__poster img, .film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film__video { opacity: 0; transition: opacity 1s ease; }
.film.is-playing .film__video { opacity: 1; }
html.no-js .film__video { display: none; }
html.rm .film:not(.is-on) .film__video { display: none; }
/* The play/pause control (site.js keeps data-state; both labels are in the markup, one shows). */
.film-ctl { position: absolute; z-index: 3; right: var(--gutter); bottom: 1.4rem; display: inline-flex; align-items: center; gap: .55em; padding: .6em .95em; background: rgba(12, 12, 14, .84); color: #fff; border: 1px solid rgba(255, 255, 255, .38); border-radius: 999px; font: inherit; font-size: .72rem; font-weight: 800; font-stretch: 85%; letter-spacing: .14em; line-height: 1; text-transform: uppercase; cursor: pointer; transition: border-color .3s, background .3s; }
.film-ctl:hover, .film-ctl:focus-visible { border-color: #fff; background: rgba(12, 12, 14, .96); }
.film-ctl i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--red-hot); }
.film-ctl__pause, .film-ctl__play { display: none; }
.film-ctl[data-state="playing"] .film-ctl__pause, .film-ctl[data-state="paused"] .film-ctl__play { display: inline; }
html.no-js .film-ctl { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; display: grid; align-items: end; min-height: 100svh; overflow: hidden; background: var(--ink); color: #fff; }
.hero__film { z-index: -2; }
.hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 12, 14, .66) 0%, rgba(12, 12, 14, .44) 28%, rgba(12, 12, 14, .7) 55%, rgba(12, 12, 14, .95) 100%), linear-gradient(90deg, rgba(12, 12, 14, .55) 0%, rgba(12, 12, 14, .35) 45%, rgba(12, 12, 14, 0) 80%); }
.hero .film-ctl { bottom: auto; top: calc(68px + 1rem); }
/* the outlined year behind the title */
.hero__wm { position: absolute; z-index: -1; left: calc(var(--gutter) - .04em); top: 5vh; margin: 0; font-size: clamp(7rem, 24vw, 22rem); font-weight: 900; font-stretch: 118%; line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .13); pointer-events: none; user-select: none; }
/* the target: three rings, the team rising into them, the kicker in from the side (desktop layers) */
.hero__target { position: absolute; z-index: -1; left: 65vw; top: 12vh; width: min(32vw, 470px); aspect-ratio: 1; pointer-events: none; }
.hero__rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero__ring { fill: none; transform-box: fill-box; transform-origin: center; }
.hero__spin { transform-box: fill-box; transform-origin: center; }
.hero__ring--1 { stroke: var(--red-hot); stroke-width: .7; stroke-dasharray: 2.2 1.6; }
.hero__ring--2 { stroke: rgba(255, 255, 255, .45); stroke-width: .5; }
.hero__ring--3 { stroke: rgba(255, 255, 255, .3); stroke-width: .4; }
.hero__ticks { fill: none; stroke: var(--red-hot); stroke-width: .9; }
.hero__team { position: absolute; left: 4%; right: 4%; bottom: 13%; }
.hero__team img, .hero__kicker img { display: block; width: 100%; height: auto; }
.hero__kicker { position: absolute; right: -20%; bottom: -7%; width: 46%; }
.hero__in { position: relative; padding-top: clamp(6rem, 12vh, 9rem); padding-bottom: clamp(2.5rem, 6vh, 4rem); }
.hero__eyebrow { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.4rem; }
.hero__crest { width: 56px; height: auto; }
.hero__est, .hero__tag { font-size: .78rem; font-weight: 800; font-stretch: 80%; letter-spacing: .2em; text-transform: uppercase; }
.hero__est { color: var(--red-light); }
.hero__tag { color: #fff; padding-left: 1rem; border-left: 2px solid rgba(255, 255, 255, .35); }
.hero__h1 { margin: 0 0 1.4rem; }
.hero__line { display: block; overflow: hidden; padding-bottom: .05em; }
.hero__line--big { font-size: clamp(4.4rem, 14vw, 14rem); font-weight: 900; font-stretch: 118%; line-height: .86; letter-spacing: -.025em; white-space: nowrap; }
.hero__l { display: inline-block; }
/* FOOTBALL NETBALL CLUB on the red band (a skewed panel behind the words; the words rise out of the line) */
.hero__line--sub { position: relative; isolation: isolate; display: inline-block; margin: .2em 0 0 -.2em; padding: .22em .6em .16em; }
.hero__line--sub::before { content: ""; position: absolute; inset: 0 .12em; z-index: -1; background: var(--red); transform: skewX(-8deg); }
.hero__w { display: inline-block; }
.hero__line--sub .hero__w { margin-right: .3em; font-size: clamp(1.35rem, 3.9vw, 3.3rem); font-weight: 800; font-stretch: 80%; letter-spacing: .06em; line-height: 1.1; }
.hero__line--sub .hero__w:last-child { margin-right: 0; }
.hero__intro { max-width: 36rem; margin: 0 0 1.6rem; font-size: clamp(1.02rem, 1.4vw, 1.25rem); line-height: 1.55; color: #f0f0f3; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; }
.chants { position: relative; margin: 2.4rem 0 0; padding: 0; list-style: none; min-height: 2.4em; }
.chant { display: flex; flex-wrap: wrap; gap: .3em .7em; align-items: baseline; margin: .3em 0; font-size: .95rem; color: #f0f0f3; }
.chant b { font-weight: 800; font-stretch: 78%; letter-spacing: .16em; text-transform: uppercase; color: var(--red-light); }
html.fx .chant { position: absolute; left: 0; top: 0; margin: 0; opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.fx .chant.is-on { opacity: 1; transform: none; }
.hero__cue { position: absolute; right: var(--gutter); bottom: 1.6rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; color: #fff; text-decoration: none; font-size: .68rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.hero__cue i { display: block; width: 2px; height: 44px; background: #fff; transform-origin: top; }

/* ---------- ticker ---------- */
.ticker { overflow: hidden; padding: .85rem 0; background: var(--red); color: #fff; font-size: .95rem; font-weight: 800; font-stretch: 80%; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.ticker__track { display: flex; width: max-content; }
.ticker__set { display: flex; gap: 2.5rem; padding-right: 2.5rem; }
.ticker__dot::before { content: "\2022"; margin-right: 2.5rem; }

/* ---------- numbers ---------- */
.numbers { background: var(--paper); border-bottom: 1px solid var(--line); }
.numbers__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) 0; list-style: none; }
.numbers__list li { position: relative; padding-left: 1rem; --stagger: 130ms; }
.numbers__list li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--red); }
.numbers__n { display: block; font-size: clamp(2.6rem, 5vw, 4.5rem); font-weight: 900; font-stretch: 112%; line-height: 1; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.numbers__suffix { color: var(--red); font-size: .55em; vertical-align: top; }
.numbers__label { display: block; margin-top: .45rem; font-size: .78rem; font-weight: 700; font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ---------- our club ---------- */
.club { padding: var(--section) 0; }
.club__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.frame { position: relative; margin: 0; min-width: 0; overflow: clip; }
.frame img { display: block; width: 100%; height: auto; }
.club__photo .frame__img { aspect-ratio: 4 / 3; object-fit: cover; }
.lineup { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; margin: clamp(2rem, 4vw, 4rem) 0 0; padding: 0; list-style: none; }
.lineup li { overflow: hidden; aspect-ratio: 3 / 4; background: var(--paper-2); --stagger: 90ms; }
.lineup img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.lineup li:hover img { transform: scale(1.06); }

/* ---------- bands (footage behind the club's words) ---------- */
.band { position: relative; isolation: isolate; overflow: clip; padding: var(--section) 0; background: var(--ink); color: #fff; }
.band__film { z-index: -2; }
.band__scrim { position: absolute; inset: 0; z-index: -1; background: rgba(12, 12, 14, .7); }
.band__scrim--deep { background: rgba(12, 12, 14, .82); }
.band__in { position: relative; }
.band p { color: var(--soft-light); }
.band__float { position: absolute; z-index: 0; pointer-events: none; }
.band__float img { display: block; width: 100%; height: auto; }
.band__float--kicker { right: -3vw; bottom: -3vw; width: clamp(220px, 24vw, 400px); }
.band__float--girls { left: -2vw; bottom: 0; width: clamp(200px, 22vw, 360px); }
.band__float--holding { right: 2vw; bottom: 0; width: clamp(120px, 13vw, 220px); }
.teams { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem; max-width: 1040px; }
.teams__card { padding: 1.8rem; background: rgba(12, 12, 14, .55); border-left: 4px solid var(--red); --stagger: 150ms; }
.teams__card p { margin: 0; }

/* ---------- history ---------- */
.history { padding: var(--section) 0; background: var(--paper-2); }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.pillar { padding: 2rem; background: #fff; border-top: 4px solid var(--red); transition: transform .45s var(--ease), box-shadow .45s var(--ease); --stagger: 140ms; }
.pillar:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(12, 12, 14, .12); }
.pillar p { margin: 0 0 .8rem; color: var(--muted); }
.pillar p:last-child { margin-bottom: 0; }
.pillar__ball { display: block; width: 56px; height: auto; margin: 0 0 1.1rem; transition: transform .5s var(--ease); --stagger: 140ms; }
.pillar:hover .pillar__ball { transform: rotate(-14deg) scale(1.1); }

/* ---------- heritage ---------- */
.heritage { padding: var(--section) 0; }
.heritage__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.heritage__art { position: relative; margin: 0; justify-self: center; width: min(100%, 520px); }
.heritage__ring { position: absolute; left: 12%; top: 6%; width: 76%; aspect-ratio: 1; }
.heritage__ring::before { content: ""; position: absolute; inset: 0; border: 3px dashed var(--red); border-radius: 50%; }
.heritage__cut { position: relative; display: block; width: 100%; height: auto; }
.legends { grid-column: 1 / -1; margin-top: 2rem; }
.legends__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.legends__list li { --stagger: 130ms; }
.legends__list p { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
.legends__n { display: block; margin-bottom: .6rem; font-size: 2.6rem; font-weight: 900; font-stretch: 112%; line-height: 1; color: var(--red); }

/* ---------- story ---------- */
.story { position: relative; overflow: clip; padding: var(--section) 0; background: var(--ink); color: #fff; }
.wm { position: absolute; right: -2vw; top: -.05em; margin: 0; font-size: clamp(10rem, 32vw, 34rem); font-weight: 900; font-stretch: 118%; line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .13); pointer-events: none; user-select: none; }
.story__grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.story__text p { color: #d9d9e0; }
.story__num { color: var(--red-hot); font-variant-numeric: tabular-nums; }
.story__art { margin: 0; }
.story__cut { display: block; width: 100%; height: auto; }

/* ---------- honours ---------- */
.plate { margin: 2.5rem 0 1rem; font-size: .85rem; font-weight: 800; font-stretch: 80%; letter-spacing: .2em; text-transform: uppercase; color: var(--red-light); }
.years { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.year { position: relative; padding-top: 1rem; border-top: 2px solid rgba(255, 255, 255, .22); --stagger: 80ms; }
.year::before { content: ""; position: absolute; left: 0; top: -2px; width: 100%; height: 2px; background: var(--red-hot); }
.year__n { display: block; font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 900; font-stretch: 112%; line-height: 1; color: #fff; }
.year--golden .year__n { color: var(--red-hot); }
.year__t { display: block; margin-top: .35rem; font-size: .9rem; line-height: 1.4; color: var(--soft-light); }
.boards { display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem; margin-top: 3rem; }
.board { padding: 1.5rem; background: rgba(12, 12, 14, .76); border: 1px solid rgba(255, 255, 255, .12); --stagger: 160ms; }
.board__h { margin: 0 0 1rem; font-size: .95rem; font-weight: 800; font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.board__table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.board__table tr { --stagger: 45ms; }
.board__table th { padding: .4rem .5rem; text-align: left; font-size: .7rem; font-weight: 700; font-stretch: 85%; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-light); border-bottom: 1px solid rgba(255, 255, 255, .22); }
.board__table td { padding: .45rem .5rem; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .08); vertical-align: top; }
.board__table em { color: var(--muted-light); }
.board__year { font-weight: 800; font-stretch: 90%; white-space: nowrap; }
.board__no { color: var(--muted-light); }
.board__split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

/* ---------- values (angled edges cut into the bands above and below) ---------- */
.values { position: relative; z-index: 1; margin: -2.5vw 0; padding: calc(var(--section) + 2.5vw) 0; background: var(--red); color: #fff; clip-path: polygon(0 0, 100% 2.5vw, 100% 100%, 0 calc(100% - 2.5vw)); }
.values .eyebrow--light { color: #fff; }
.values .lede--light { color: #fff; }
.values__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.value { position: relative; padding: 2.2rem; background: #fff; color: var(--ink); transition: transform .45s var(--ease), box-shadow .45s var(--ease); --stagger: 160ms; }
.value:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(12, 12, 14, .25); }
.value p { margin: 0; color: var(--muted); }
.value__n { display: block; margin-bottom: .8rem; font-size: 3rem; font-weight: 900; font-stretch: 112%; line-height: 1; color: var(--red); }

/* ---------- get involved ---------- */
.involve__in { max-width: 820px; margin: 0 auto; text-align: center; }
.involve__in .eyebrow { justify-content: center; }
.involve__in .lede { margin-inline: auto; }

/* ---------- news cards ---------- */
.news { padding: var(--section) 0; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.card { --stagger: 120ms; transition: transform .45s var(--ease); }
.card:hover { transform: translateY(-6px); }
.card__link { display: block; height: 100%; color: inherit; text-decoration: none; }
.card__photo { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-2); }
.card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card__link:hover .card__photo img { transform: scale(1.06); }
.card__body { display: block; padding: 1.2rem 0 0; }
.card__date { display: block; font-size: .75rem; font-weight: 800; font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.card__title { display: block; margin: .5rem 0; font-size: 1.3rem; font-weight: 800; line-height: 1.2; text-decoration: underline transparent; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: text-decoration-color .3s; }
.card__link:hover .card__title { text-decoration-color: var(--red); }
.card__excerpt { display: block; color: var(--muted); line-height: 1.55; }
.card__more { display: inline-flex; align-items: center; gap: .4em; margin-top: .9rem; font-size: .8rem; font-weight: 800; font-stretch: 80%; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.card__more svg { transition: transform .3s var(--ease); }
.card__link:hover .card__more svg { transform: translateX(4px); }

/* ---------- shop ---------- */
.shop-teaser { padding: var(--section) 0; background: var(--paper-2); }
.shop { padding: 0 0 var(--section); background: var(--paper-2); }
.shop .products { padding-top: 2.5rem; }
.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.product { padding: 1rem; background: #fff; transition: transform .45s var(--ease), box-shadow .45s var(--ease); --stagger: 100ms; }
.product:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(12, 12, 14, .12); }
.product__link { display: block; color: inherit; text-decoration: none; }
.product__photo { display: block; overflow: hidden; aspect-ratio: 1; background: var(--ground, var(--ink-2)); }
.product__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.product__link:hover .product__photo img { transform: scale(1.05); }
.product__name { display: block; margin-top: .9rem; font-weight: 800; line-height: 1.25; }
.product__price { display: block; margin-top: .2rem; font-weight: 800; font-stretch: 90%; color: var(--red); }
.add { display: grid; gap: .6rem; margin-top: .9rem; }
.add__status { margin: 0; font-size: .9rem; min-height: 0; }
.size-pick { display: grid; gap: .3rem; font-size: .75rem; font-weight: 800; font-stretch: 80%; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
select { width: 100%; padding: .65rem .7rem; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 2px solid var(--line); border-radius: 0; }
select:focus { border-color: var(--ink); outline: none; }
.shop__note { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); }
.shop__note p { margin: 0 0 .6rem; }
.shop__note a { color: var(--ink); }
.pdp { padding: clamp(2rem, 5vw, 4rem) 0 var(--section); }
.pdp__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: start; }
.pdp__main { overflow: hidden; background: var(--ink-2); }
.pdp__main picture { background: var(--ground, var(--ink-2)); }
.pdp__main img { display: block; width: 100%; height: auto; }
.pdp__thumbs { display: flex; gap: .6rem; margin-top: .6rem; }
.pdp__thumb { width: 96px; padding: 0; background: var(--ground, var(--ink-2)); border: 2px solid transparent; cursor: pointer; }
.pdp__thumb[aria-pressed="true"] { border-color: var(--red); }
.pdp__thumb img { display: block; width: 100%; height: auto; }
.h1--pdp { font-size: clamp(2rem, 4vw, 3.4rem); }
.pdp__price { margin: 1rem 0 0; font-size: 1.7rem; font-weight: 900; font-stretch: 105%; color: var(--red); }
.pdp__lines { margin: 1.2rem 0 0; padding-left: 1.2rem; color: var(--ink); line-height: 1.6; }
.pdp .add { max-width: 360px; margin-top: 1.6rem; }
.more { margin-top: clamp(3rem, 6vw, 5rem); }
.more .products { margin-top: 1.5rem; }
.products--four .product { padding: 0; background: transparent; }
.products--four .product:hover { box-shadow: none; }

/* ---------- page heads and plain pages ---------- */
.page-head { padding: clamp(4rem, 9vw, 7rem) 0 clamp(2rem, 5vw, 4rem); background: var(--ink); color: #fff; }
.page-head .eyebrow { color: var(--red-light); }
.page-head .crumbs a { color: var(--muted-light); }
.page-head--article .h1 { font-size: clamp(1.9rem, 4.2vw, 3.6rem); font-stretch: 100%; text-transform: none; letter-spacing: -.01em; line-height: 1.05; }
.article__date { margin: 1rem 0 0; font-size: .8rem; font-weight: 800; font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase; color: var(--red-light); }
.article__photo { margin: clamp(2rem, 5vw, 3rem) 0; }
.article__photo img { display: block; width: 100%; height: auto; }
.prose { font-size: 1.1rem; line-height: 1.7; }
.prose p { margin: 0 0 1.2em; }
.prose h2, .prose h3, .prose h4 { margin: 1.6em 0 .6em; line-height: 1.2; }
.prose h2 { font-size: 1.6rem; font-weight: 800; }
.prose h3 { font-size: 1.3rem; font-weight: 800; }
.prose a { color: var(--red); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose blockquote { margin: 1.5rem 0; padding-left: 1.2rem; border-left: 4px solid var(--red); color: var(--muted); }
.article__nav { display: flex; justify-content: space-between; gap: 1.5rem; margin: 3rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.article__nav-link { max-width: 48%; color: var(--ink); text-decoration: none; font-weight: 700; line-height: 1.3; }
.article__nav-link span { display: block; margin-bottom: .3rem; font-size: .72rem; font-weight: 800; font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.article__nav-link--older { text-align: right; margin-left: auto; }
.article__nav-link:hover { color: var(--red); }
.article .narrow { padding-bottom: var(--section); }
.plain { padding: clamp(2rem, 5vw, 4rem) 0 var(--section); }
.plain-links { margin: 2rem 0 0; }
.cart { padding: clamp(2rem, 5vw, 4rem) 0 var(--section); }
.cart__empty a { color: var(--red); font-weight: 700; }
.notfound { display: grid; align-items: center; min-height: 70vh; padding: 6rem 0; background: var(--ink); color: #fff; }
.notfound__links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 1.5rem; }

/* ---------- contact ---------- */
.contact { padding: var(--section) 0; }
.contact__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: start; }
.form { display: grid; gap: 1rem; max-width: 560px; margin-top: 1.8rem; }
.form__field { display: grid; gap: .35rem; --stagger: 90ms; }
.form label { font-size: .75rem; font-weight: 800; font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.form input, .form textarea { width: 100%; padding: .85rem .9rem; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 2px solid var(--line); border-radius: 0; transition: border-color .3s; }
.form input:focus, .form textarea:focus { border-color: var(--ink); outline: none; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__row { margin: .2rem 0 0; --stagger: 90ms; }
.form__status { margin: 0; font-weight: 700; }
.form__status[data-tone="warn"] { color: #b3121b; }
.form__status[data-tone="ok"] { color: #0a6b2e; }
.contact__side { padding: 2.2rem; background: var(--ink); color: #fff; }
.details p, .social-block p { color: var(--soft-light); }
.details a { color: #fff; }
.social-block { margin-top: 2rem; }
.social { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.social a { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; color: #fff; text-decoration: none; font-size: .9rem; font-weight: 700; border: 2px solid rgba(255, 255, 255, .28); transition: border-color .3s, background .3s; }
.social a:hover { border-color: var(--red-hot); background: rgba(255, 255, 255, .06); }
.social svg { width: 18px; height: 18px; fill: currentColor; }
.map { margin-top: 2rem; }
.map__frame { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-2); }
.map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__pin { width: 48px; height: auto; }
.map__place { margin: .5rem 0 0; font-size: .75rem; font-weight: 800; font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-light); }
.map__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1rem 0 .4rem; }
.map__note { margin: 0; font-size: .8rem; color: var(--muted-light); }

/* ---------- footer ---------- */
.ftr { padding: 4rem 0 2rem; background: var(--ink); color: #fff; }
.ftr__in { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.ftr__crest { width: 72px; height: auto; }
.ftr__name { margin: .8rem 0 0; font-size: 1.4rem; font-weight: 900; font-stretch: 112%; }
.ftr__name b { color: var(--red-hot); }
.ftr__est { margin: .2rem 0 0; font-size: .8rem; font-weight: 700; font-stretch: 85%; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-light); }
.ftr__nav ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ftr__nav a { color: var(--soft-light); text-decoration: none; font-weight: 700; font-stretch: 90%; }
.ftr__nav a:hover { color: var(--red-hot); }
.ftr__social { display: flex; flex-direction: column; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.ftr__social a { display: inline-flex; align-items: center; gap: .5rem; color: var(--soft-light); text-decoration: none; font-weight: 700; }
.ftr__social a:hover { color: #fff; }
.ftr__social svg { width: 18px; height: 18px; fill: currentColor; }
.ftr__line { padding-top: 1.5rem; font-size: .85rem; color: var(--muted-light); }
.ftr__legal { margin: 0; }
.ftr__legal a { color: #fff; }
.ftr__credits { margin: .6rem 0 0; font-size: .78rem; color: #b3b3bd; }

/* ---------- the bag (a dialog: this browser only) ---------- */
.bag { position: fixed; inset: 0 0 0 auto; width: min(440px, 100vw); height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 1.5rem; border: 0; background: #fff; color: var(--ink); box-shadow: -20px 0 60px rgba(0, 0, 0, .25); }
.bag:not([open]) { display: none; }
.bag[open] { display: flex; flex-direction: column; }
.bag::backdrop { background: rgba(12, 12, 14, .6); }
.bag__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.bag__head .menu__close { border-color: var(--line); color: var(--ink); }
.bag__title { margin: 0; font-size: 1.4rem; font-weight: 900; font-stretch: 112%; text-transform: uppercase; }
.bag__body { flex: 1; overflow: auto; }
.bag-list { margin: 0; padding: 0; list-style: none; }
.bag-item { display: grid; grid-template-columns: 72px 1fr auto; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.bag-item img { display: block; width: 72px; height: 72px; object-fit: cover; background: var(--ink-2); }
.bag-item__name { margin: 0; font-weight: 800; }
.bag-item__size { margin: .1rem 0 0; font-size: .85rem; color: var(--muted); }
.bag-item__price { margin: 0; font-weight: 800; white-space: nowrap; }
.bag-item__remove { margin-top: .4rem; padding: 0; background: none; border: 0; font: inherit; font-size: .8rem; font-weight: 700; color: var(--muted); text-decoration: underline; cursor: pointer; }
.bag-item__remove:hover { color: var(--red); }
.qty { display: inline-flex; align-items: center; gap: .5rem; margin-top: .5rem; }
.qty button { width: 2rem; height: 2rem; padding: 0; background: #fff; border: 2px solid var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
.qty button:hover { background: var(--ink); color: #fff; }
.qty output { min-width: 1.5rem; text-align: center; font-weight: 800; }
.bag__foot { padding-top: 1rem; border-top: 2px solid var(--ink); }
.bag__total { display: flex; justify-content: space-between; margin: 0 0 1rem; font-size: 1.25rem; font-weight: 900; }
.bag__note { margin: .8rem 0 0; font-size: .8rem; color: var(--muted); }
.bag__status { margin: .4rem 0 0; font-weight: 700; color: #b3121b; }

/* ---------- reveals and motion, armed only by the head script (html.fx) ---------- */
/* Entrances. Every `.rv` starts out of place and transparent once motion is armed, and arrives when site.js
   marks it `.in` as it scrolls into view: from below by default, or from a side, popping, flipping up,
   fanning in, spinning in, zooming, or wiping across a photo. `--i` staggers siblings by `--stagger`. */
html.fx .rv { opacity: 0; transform: translateY(48px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * var(--stagger, 100ms)); }
html.fx .rv-l { transform: translateX(-72px); }
html.fx .rv-r { transform: translateX(72px); }
html.fx .rv-up { transform: translateY(84px); }
html.fx .rv-zoom { transform: scale(.82); }
html.fx .rv-pop { transform: scale(.5); transition-timing-function: var(--snap); }
html.fx .rv-flip { transform: perspective(900px) rotateX(-24deg) translateY(44px); transform-origin: top; }
html.fx .rv-fan { transform: translateY(64px) rotate(var(--r, 0deg)); }
html.fx .rv-spin { transform: scale(.55) rotate(-140deg); transition-duration: 1.2s; }
html.fx .rv-clip { transform: none; }
html.fx .rv-clip > picture, html.fx .rv-clip > img { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease); }
html.fx .rv.in { opacity: 1; transform: none; }
html.fx .rv-clip.in > picture, html.fx .rv-clip.in > img { clip-path: inset(0); }
/* headings rise word by word out of their masks (lib.mjs words()) */
html.fx .rv-words { transform: none; }
html.fx .rv-words .w__i { transform: translateY(115%); transition: transform .85s var(--ease); transition-delay: calc(var(--i, 0) * 70ms + 80ms); }
html.fx .rv-words.in .w__i { transform: none; }
/* small parts of a box draw once it has arrived: the label's red line, the number's bar, the year's rule */
html.fx .eyebrow.rv::before { transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease) .3s; }
html.fx .eyebrow.rv.in::before { transform: none; }
html.fx .numbers__list li.rv::before { transform: scaleY(0); transform-origin: top; transition: transform .8s var(--ease) calc(var(--i, 0) * var(--stagger, 100ms) + .25s); }
html.fx .numbers__list li.rv.in::before { transform: none; }
html.fx .year.rv::before { transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) calc(var(--i, 0) * var(--stagger, 100ms) + .3s); }
html.fx .year.rv.in::before { transform: none; }
/* the floating cut-outs beside a band (desktop only, so not `.rv`: the guards expect a `.rv` at every width) */
html.fx .fl { opacity: 0; transform: translateX(120px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
html.fx .fl-l { transform: translateX(-120px); }
html.fx .fl.in { opacity: 1; transform: none; }

/* The hero, the opening. One choreography, all CSS, run once at load: ms after the page is there. */
html.fx .hero__wm { animation: wm-in 1.3s var(--ease) both .1s; }
html.fx .hero__eyebrow { animation: from-left .8s var(--ease) both .25s; }
html.fx .hero__ring--1 { animation: ring-in .9s var(--snap) both .35s; }
html.fx .hero__ring--2 { animation: ring-in .9s var(--snap) both .5s; }
html.fx .hero__ring--3 { animation: ring-in .9s var(--snap) both .65s; }
html.fx .hero__ticks { animation: fade-in .5s ease both .95s; }
html.fx .hero__team { animation: team-in 1.1s var(--ease) both .8s; }
html.fx .hero__kicker { animation: kicker-in 1s var(--ease) both 1.25s; }
html.fx .hero__l { animation: letter-in .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + .55s); }
html.fx .hero__line--sub::before { animation: band-in .7s var(--ease) both 1s; }
html.fx .hero__w { animation: rise .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 1.25s); }
html.fx .hero__seq { animation: seq-in .8s var(--ease) both; animation-delay: calc(var(--s, 0) * 180ms + 1.75s); }
html.fx .hero__spin { animation: spin 90s linear infinite; }
html.fx .hero__team img { animation: floaty 7s ease-in-out infinite 2s; }
html.fx .hero__kicker img { animation: floaty 8s ease-in-out infinite -2s; }
@keyframes wm-in { from { opacity: 0; transform: scale(1.18); } to { opacity: 1; transform: none; } }
@keyframes from-left { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
@keyframes ring-in { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes team-in { from { opacity: 0; transform: translateY(38%); } to { opacity: 1; transform: none; } }
@keyframes kicker-in { from { opacity: 0; transform: translateX(80%); } to { opacity: 1; transform: none; } }
@keyframes letter-in { from { opacity: 0; transform: translateX(-.45em) skewX(-14deg); } to { opacity: 1; transform: none; } }
@keyframes band-in { from { transform: skewX(-8deg) scaleX(0); transform-origin: left; } to { transform: skewX(-8deg) scaleX(1); transform-origin: left; } }
@keyframes rise { from { transform: translateY(110%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes seq-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* the menu and the bag open and close as dialogs, with a page-shaped animation each way (site.js waits for
   the closing one before it closes) */
html.fx .menu[open] { animation: menu-open .5s var(--ease); }
html.fx .menu[open].is-closing { animation: menu-close .35s var(--ease) both; }
html.fx .menu[open] .menu__list li, html.fx .menu[open] .menu__foot { animation: menu-in .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms + 160ms); }
html.fx .menu[open].is-closing .menu__list li, html.fx .menu[open].is-closing .menu__foot { animation: none; }
html.fx .bag[open] { animation: bag-in .45s var(--ease); }
html.fx .bag[open].is-closing { animation: bag-out .3s var(--ease) both; }
html.fx .menu[open]::backdrop, html.fx .bag[open]::backdrop { animation: fade-in .4s ease; }
@keyframes menu-open { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes menu-close { to { opacity: 0; transform: translateY(-3%); } }
@keyframes menu-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bag-in { from { transform: translateX(100%); } }
@keyframes bag-out { to { transform: translateX(100%); } }

/* moving from page to page: the old page lifts away and the new one settles in (cross-document view
   transitions; the top bar is the same element on both and stays put). Browsers without it just navigate. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  ::view-transition-old(root) { animation: vt-out .25s ease-in both; }
  ::view-transition-new(root) { animation: vt-in .5s var(--ease) both; }
  html.fx .ticker__track { animation: ticker 30s linear infinite; }
  html.fx .hero__cue i { animation: cue 1.8s ease-in-out infinite; }
  html.fx .band__float img { animation: floaty 7s ease-in-out infinite; }
  html.fx .band__float--holding img { animation-delay: -3s; }
  html.fx .heritage__ring::before { animation: spin 40s linear infinite; }
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes cue { 0%, 100% { transform: scaleY(.3); transform-origin: top; opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes spin { to { transform: rotate(360deg); } }
/* Scroll-linked (native scroll, CSS only, progressive): photos settle as they enter, the watermark drifts, and
   a box that has arrived leaves the way it came: as it slides under the top bar it lifts and fades. The leaving
   animation has NO fill, so before its range the entrance above owns the box (it stays hidden until `.in`),
   and past it the box is off screen anyway. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.fx .club__photo .frame__img, html.fx .article__photo .frame__img { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    html.fx .wm { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    html.fx .card.rv, html.fx .pillar.rv, html.fx .value.rv, html.fx .product.rv, html.fx .numbers__list li.rv, html.fx .teams__card.rv, html.fx .legends__list li.rv, html.fx .year.rv, html.fx .board.rv, html.fx .lineup li.rv { animation-name: leave; animation-timing-function: linear; animation-fill-mode: none; animation-timeline: view(); animation-range: exit 30% exit 100%; }
  }
}
@keyframes settle { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes drift { from { transform: translateX(6%); } to { transform: translateX(-8%); } }
@keyframes leave { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-40px) scale(.96); } }
/* A reader who asked for less motion gets none: no hover glides, no ticker, no floats, no page transition. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 999px) {
  .hdr__nav { display: none; }
  .hdr__menu { display: inline-flex; }
  .club__grid, .heritage__grid, .story__grid, .contact__grid, .pdp__grid, .boards, .board__split { grid-template-columns: 1fr; }
  .teams { grid-template-columns: 1fr; gap: 1rem; }
  .pillars, .legends__list, .values__list, .cards, .years, .products { grid-template-columns: repeat(2, 1fr); }
  .lineup { grid-template-columns: repeat(3, 1fr); }
  .band__float { display: none; }
  .ftr__in { grid-template-columns: 1fr; }
  .heritage__art { order: -1; }
  .wm { font-size: 9rem; right: -1rem; }
  .hero__team, .hero__kicker { display: none; }
  .hero__target { left: auto; right: -4vw; top: 8vh; width: min(46vw, 300px); }
  .hero__wm { font-size: clamp(6rem, 26vw, 12rem); top: 9vh; }
  .values { margin: -4vw 0; padding: calc(var(--section) + 4vw) 0; clip-path: polygon(0 0, 100% 4vw, 100% 100%, 0 calc(100% - 4vw)); }
}
@media (max-width: 599px) {
  .hdr__join, .hdr__bag-label, .hero__cue { display: none; }
  .hdr__in { min-height: 60px; gap: .8rem; }
  .pillars, .legends__list, .values__list, .cards { grid-template-columns: 1fr; }
  .years, .numbers__list { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .numbers__label { font-size: .68rem; }
  .products { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .product { padding: .6rem; }
  .lineup { grid-template-columns: repeat(2, 1fr); }
  .lineup li:nth-child(5) { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
  .hero__tag { display: none; }
  .hero__in { padding-top: 5.5rem; }
  .hero__scrim { background: linear-gradient(180deg, rgba(12, 12, 14, .68) 0%, rgba(12, 12, 14, .62) 28%, rgba(12, 12, 14, .86) 52%, rgba(12, 12, 14, .96) 100%); }
  .hero .film-ctl { top: calc(60px + .8rem); }
  .hero__line--big { font-size: clamp(4rem, 18vw, 5.4rem); }
  .hero__line--sub { margin-left: -.1em; padding: .2em .45em .14em; }
  .hero__line--sub .hero__w { font-size: clamp(1.15rem, 5.4vw, 1.6rem); margin-right: .22em; }
  .board { padding: 1rem; }
  .bag-item { grid-template-columns: 56px 1fr auto; }
  .contact__side { padding: 1.4rem; }
  .article__nav { flex-direction: column; }
  .article__nav-link, .article__nav-link--older { max-width: none; text-align: left; margin: 0; }
  .film-ctl { font-size: .66rem; padding: .55em .8em; }
}