/* ============================================================
   NEWARK ROSES NETBALL CLUB — homepage
   Editorial magazine direction. Type: Instrument Serif + Poppins.
   Palette: chalk / dusty rose / Kukri maroon / espresso ink / gold.
   Fluid artboard: designed at 1440, html font-size scales everything.
   ============================================================ */

:root {
  /* Palette (named, per the reference method) */
  --chalk:        #f6f1ea;   /* warm paper ground */
  --rose-panel:   #f0dfdd;   /* dusty rose section panel */
  --rose-soft:    #e8cfcc;   /* deeper rose for borders/chips */
  --maroon:       #7d1f3f;   /* Kukri maroon, the anchor */
  --maroon-deep:  #40101f;   /* espresso maroon, dark bands */
  --ink:          #2b1c20;   /* body type */
  --gold:         #b08a4c;   /* Kukri gold, annotations only */
  --white:        #fffdfa;

  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-sans: "Poppins", "Helvetica Neue", Arial, sans-serif;

  /* Easing vocabulary (mirrored in JS CustomEases) */
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

  --z-grain: 90;
  --z-chrome: 80;
  --z-menu: 70;
  --z-preloader: 100;

  --radius-card: 1.25rem;
  --radius-band: 2.5rem;
}

/* ---------- fluid artboard ---------- */
html {
  font-size: calc(16 / 1440 * 100vw);
  scroll-behavior: auto;
}
@media (max-width: 991px) {
  /* mobile artboard deliberately WIDER than device: global ~25% shrink.
     Display type shrinks further below; body copy gets bumped back up. */
  html { font-size: calc(16 / 500 * 100vw); }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--chalk);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

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

::selection { background: var(--maroon); color: var(--chalk); }

/* ============================================================
   Shared atoms
   ============================================================ */

.eyebrow {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--maroon);
}
.eyebrow i {
  width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--maroon); display: inline-block;
}
.eyebrow--ondark { color: var(--rose-soft); }
.eyebrow--ondark i { background: var(--gold); }
.eyebrow--onrose { color: var(--maroon); }

/* Editorial dateline: caps separated by gold marks, no pill boxes */
.cover__dateline {
  position: absolute; z-index: 4; top: 6.4rem; left: 0; right: 0;
  display: flex; justify-content: center; align-items: center; gap: 1.1rem;
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(43, 28, 32, 0.65);
}
.cover__dateline i {
  width: 0.32rem; height: 0.32rem; border-radius: 50%;
  background: var(--gold); display: inline-block;
}

/* Buttons: rolling double-label */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 2.1rem; border-radius: 99rem;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  overflow: hidden; transition: transform 0.4s var(--ease-out), background 0.4s var(--ease-out), color 0.4s var(--ease-out);
}
.btn > span { display: inline-block; position: relative; }
.btn:hover { transform: translateY(-0.15rem); }
.btn--gold { background: var(--gold); color: var(--maroon-deep); }
.btn--gold:hover { background: var(--chalk); }
.btn--chalk { background: var(--chalk); color: var(--maroon-deep); }
.btn--chalk:hover { background: var(--gold); }
.btn--ghost { border: 1px solid rgba(246, 241, 234, 0.5); color: var(--chalk); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn--line { border: 1px solid rgba(43, 28, 32, 0.3); color: var(--ink); }
.btn--line:hover { background: var(--maroon); border-color: var(--maroon); color: var(--chalk); }

/* Accent phrase: revealed to maroon/gold by JS (the reference's fade trick) */
.accent-phrase { font-style: italic; color: rgba(125, 31, 63, 0.28); transition: color 1.1s var(--ease-soft); }
.accent-phrase.is-lit { color: var(--maroon); }
.accent-phrase--gold { color: rgba(176, 138, 76, 0.35); }
.accent-phrase--gold.is-lit { color: var(--gold); }

/* Grain */
.grain {
  position: fixed; inset: -5%; z-index: var(--z-grain); pointer-events: none;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ============================================================
   Preloader
   ============================================================ */
.preloader {
  position: fixed; inset: 0; z-index: var(--z-preloader);
  display: flex; align-items: center; justify-content: center;
}
.preloader__panel { position: absolute; inset: 0; background: var(--maroon-deep); }
.preloader__inner { position: relative; text-align: center; color: var(--chalk); }
.preloader__word-stage {
  position: relative; height: 8rem;
  display: flex; align-items: center; justify-content: center;
}
.preloader__word {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  visibility: hidden;
}
.preloader__word--sans { font-family: var(--font-sans); font-weight: 600; font-size: 5.4rem; letter-spacing: -0.01em; }
.preloader__word--serif { font-family: var(--font-serif); font-size: 6rem; }
.preloader__word--italic { font-family: var(--font-serif); font-style: italic; font-size: 6rem; color: var(--gold); }
.preloader__issue {
  margin-top: 1.2rem; font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.34em; text-transform: uppercase; color: rgba(246,241,234,0.5);
}

/* ============================================================
   Chrome
   ============================================================ */
/* Floating capsule bar, straight from the planning pack */
.chrome {
  position: fixed; top: 1.1rem; left: 50%; transform: translateX(-50%);
  z-index: var(--z-chrome);
  width: min(94vw, 82rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 0.65rem 0.7rem 0.65rem 1rem;
  border-radius: 99rem;
  background: rgba(246, 241, 234, 0.8);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(125, 31, 63, 0.14);
  box-shadow: 0 1rem 2.6rem rgba(64, 16, 31, 0.1);
  color: var(--ink);
}
.chrome__brand { display: flex; align-items: center; gap: 0.75rem; }
.chrome__crest {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--white); display: flex; align-items: center; justify-content: center;
  overflow: hidden; border: 1px solid rgba(125, 31, 63, 0.16);
}
.chrome__crest img { width: 88%; height: 88%; object-fit: cover; border-radius: 50%; }
.chrome__name {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
}
.chrome__links { display: flex; gap: 1.8rem; }
.chrome__links a {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  position: relative; padding: 0.3rem 0; color: rgba(43, 28, 32, 0.78);
  transition: color 0.3s;
}
.chrome__links a:hover { color: var(--maroon); }
.chrome__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--maroon); transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}
.chrome__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.chrome__right { display: flex; align-items: center; gap: 1rem; }
.chrome__cta {
  background: var(--maroon); color: var(--chalk);
  border-radius: 99rem; padding: 0.75rem 1.6rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  transition: background 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.chrome__cta:hover { background: var(--maroon-deep); transform: translateY(-0.1rem); }
.chrome__burger { display: none; flex-direction: column; gap: 0.42rem; padding: 0.5rem; }
.chrome__burger span { width: 1.7rem; height: 2px; background: var(--ink); transition: transform 0.4s var(--ease-out), opacity 0.3s; }
.chrome__burger.is-open span:nth-child(1) { transform: translateY(0.27rem) rotate(45deg); }
.chrome__burger.is-open span:nth-child(2) { transform: translateY(-0.27rem) rotate(-45deg); }

/* Menu overlay */
.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--maroon-deep); color: var(--chalk);
  display: flex; align-items: center;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
}
.menu__inner { width: 100%; padding: 0 8vw; }
.menu__eyebrow { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 2rem; }
.menu__links { display: flex; flex-direction: column; gap: 0.2rem; }
.menu__links a {
  font-family: var(--font-serif); font-size: 3.2rem; line-height: 1.18;
  display: flex; align-items: baseline; gap: 1.2rem;
  transition: color 0.3s, transform 0.45s var(--ease-out);
}
.menu__links a em { font-family: var(--font-sans); font-style: normal; font-size: 0.7rem; letter-spacing: 0.2em; color: var(--gold); }
.menu__links a:hover { color: var(--gold); transform: translateX(0.8rem); }
.menu__foot { margin-top: 2.5rem; font-size: 0.8rem; color: var(--rose-soft); }
.menu__foot a { color: var(--chalk); text-decoration: underline; text-underline-offset: 0.25em; }

/* ============================================================
   01 · Cover
   ============================================================ */
.cover { position: relative; background: linear-gradient(160deg, var(--chalk) 55%, var(--rose-panel) 100%); }
.cover__stage {
  position: relative; min-height: 100vh; overflow: clip;
  display: flex; align-items: flex-end; justify-content: center;
}

.cover__ghost {
  position: absolute; top: 12vh; left: 50%; transform: translateX(-50%);
  font-family: var(--font-sans); font-weight: 600;
  font-size: 24rem; line-height: 0.8; letter-spacing: 0.02em;
  color: transparent;
  background: linear-gradient(180deg, rgba(125,31,63,0.22), rgba(125,31,63,0.05));
  -webkit-background-clip: text; background-clip: text;
  user-select: none; white-space: nowrap;
}

.cover__photo {
  position: relative; z-index: 2;
  width: 34rem; height: 78vh; overflow: hidden;
  border-radius: 17rem 17rem 0 0;
}
.cover__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }


.cover__title { position: absolute; z-index: 3; }
.cover__title--left { left: 6vw; top: 34vh; text-align: left; }
.cover__title--right { right: 6vw; top: 25vh; text-align: right; }
.cover__line { display: block; overflow: hidden; }
.cover__line--sans {
  font-weight: 600; font-size: 5.6rem; line-height: 1.02;
  letter-spacing: -0.01em; color: var(--ink); text-transform: none;
}
.cover__line--serif {
  font-family: var(--font-serif); font-style: italic;
  font-size: 6.4rem; line-height: 0.96;
  background: linear-gradient(120deg, var(--maroon) 30%, #b5637f 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.cover__standfirst {
  position: absolute; z-index: 3; left: 6vw; bottom: 22vh;
  font-size: 0.95rem; line-height: 1.75; color: rgba(43,28,32,0.75);
  max-width: 17rem;
}

.cover__card {
  position: absolute; z-index: 4;
  background: rgba(255, 253, 250, 0.72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(125, 31, 63, 0.12);
  border-radius: var(--radius-card);
  padding: 1.3rem 1.5rem;
  box-shadow: 0 1.5rem 3rem rgba(64, 16, 31, 0.12);
  max-width: 17rem;
}
.cover__card--proof { right: 6vw; bottom: 18vh; }
.cover__card--fixture { right: 24vw; bottom: 7vh; }
.cover__cardLabel {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem;
}
.cover__cardBig { font-family: var(--font-serif); font-size: 3.4rem; line-height: 1; color: var(--maroon); }
.cover__cardSmall { font-size: 0.78rem; line-height: 1.65; color: rgba(43,28,32,0.8); }
.cover__cardSmall strong { font-weight: 600; color: var(--maroon); }

.cover__stamp {
  position: absolute; z-index: 4; left: 25vw; bottom: 13vh;
  width: 7rem; height: 7rem; border-radius: 50%;
  background: var(--chalk); border: 1px solid rgba(125,31,63,0.2);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1rem 2.4rem rgba(64,16,31,0.14);
}
.cover__stamp img { width: 74%; height: 74%; object-fit: cover; border-radius: 50%; }

.cover__footerline {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 1.6rem;
  padding: 1.6rem 6vw;
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(43,28,32,0.6);
}
.cover__barcode {
  width: 6rem; height: 2.2rem;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 10px);
  opacity: 0.7;
}
.cover__scrollcue { margin-left: auto; color: var(--maroon); animation: cuePulse 2.2s infinite var(--ease-soft); }
@keyframes cuePulse { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } }

/* ============================================================
   02 · Ticker
   ============================================================ */
.ticker {
  background: var(--maroon); color: var(--chalk);
  overflow: hidden; padding: 1.15rem 0;
  position: relative; z-index: 5;
}
.ticker__track { display: flex; white-space: nowrap; will-change: transform; }
.ticker__seq { display: inline-flex; align-items: baseline; }
.ticker__seq em {
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.7rem; font-weight: 400;
}
.ticker__seq b {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--rose-soft); align-self: center;
}
.ticker__seq i {
  font-style: normal; color: var(--gold);
  font-size: 0.85rem; padding: 0 1.4rem; align-self: center;
}

/* ============================================================
   02b · The Team Photo — everyone, front and centre
   ============================================================ */
.teamphoto { background: var(--maroon-deep); padding: 5.5rem 4vw 4.5rem; text-align: center; }
.teamphoto__frame {
  margin: 0; border-radius: var(--radius-card); overflow: hidden;
  box-shadow: 0 2.6rem 5rem rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(246, 241, 234, 0.1);
}
.teamphoto__frame img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.teamphoto__line {
  margin-top: 1.6rem; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold);
}

/* ============================================================
   03 · The Club
   ============================================================ */
.club { padding: 9rem 8vw 7rem; background: var(--chalk); }
.club__head {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 4.6rem; line-height: 1.08; letter-spacing: -0.005em;
  max-width: 58rem; margin: 2.2rem 0 4rem;
  text-wrap: balance;
}
.club__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 5rem; align-items: start; }
.club__copy p { font-size: 1rem; line-height: 1.9; color: rgba(43,28,32,0.82); margin-bottom: 1.6rem; max-width: 34rem; }
.club__copy .has-dropcap::first-letter {
  font-family: var(--font-serif); float: left;
  font-size: 4.6rem; line-height: 0.8; padding: 0.5rem 0.9rem 0 0;
  color: var(--maroon);
}
.club__quote {
  position: relative;
  background: var(--rose-panel); border-radius: var(--radius-card);
  padding: 3rem 2.8rem 2.6rem; margin-top: 1rem;
}
.club__quote blockquote p {
  font-family: var(--font-serif); font-size: 2.15rem; line-height: 1.3; color: var(--maroon-deep);
}
.club__quote blockquote em { color: var(--maroon); }
.club__quote figcaption {
  margin-top: 1.6rem; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
}
.club__sticker {
  position: absolute; top: -1.8rem; right: -1.2rem;
  background: var(--gold); color: var(--maroon-deep);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  text-align: center; line-height: 1.5;
  padding: 1.05rem 1.1rem; border-radius: 50%;
  transform: rotate(8deg);
  box-shadow: 0 0.8rem 1.8rem rgba(64,16,31,0.18);
}
.club__values {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0; margin-top: 5rem;
  border-top: 1px solid rgba(125, 31, 63, 0.18);
  padding-top: 2.2rem;
}
.club__values span {
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.9rem; color: var(--maroon);
}
.club__values span:not(:last-child)::after {
  content: "\2745"; font-size: 0.85rem; color: var(--gold);
  padding: 0 1.3rem; vertical-align: middle;
}

/* ============================================================
   03b · Big hero (mid-page full-screen image break)
   ============================================================ */
.bighero { position: relative; height: 100vh; overflow: clip; display: flex; align-items: flex-end; }
.bighero__bg { position: absolute; inset: 0; }
.bighero__bg--zoom { transform: scale(1.28); transform-origin: 50% 26%; }
.bighero__bg img { width: 100%; height: 114%; object-fit: cover; }
.bighero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(210deg, rgba(64, 16, 31, 0.35) 0%, rgba(64, 16, 31, 0.82) 100%);
}
.bighero__inner { position: relative; z-index: 2; padding: 0 8vw 9vh; color: var(--chalk); }
.bighero__eyebrow {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.4rem;
}
.bighero__line { font-family: var(--font-serif); font-weight: 400; font-size: 6.4rem; line-height: 1; }
.bighero__sub { margin-top: 1.4rem; font-size: 0.95rem; color: rgba(246, 241, 234, 0.75); }

/* ============================================================
   04 · Match day
   ============================================================ */
.matchday { background: var(--rose-panel); padding: 6rem 8vw; }
.matchday__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 2.4rem; }
.matchday__card {
  position: relative; display: block;
  background: var(--white); border-radius: var(--radius-card);
  padding: 2.4rem 2.2rem 3.4rem;
  border: 1px solid rgba(125,31,63,0.08);
  overflow: hidden;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.matchday__card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}
.matchday__card:hover { transform: translateY(-0.4rem); box-shadow: 0 1.8rem 3.2rem rgba(64,16,31,0.14); }
.matchday__card:hover::before { transform: scaleX(1); }
.matchday__card--league { background: var(--maroon); color: var(--chalk); }
.matchday__label {
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.1rem;
}
.matchday__card h3 { font-family: var(--font-serif); font-weight: 400; font-size: 2.1rem; line-height: 1.12; margin-bottom: 1.2rem; }
.matchday__meta { font-size: 0.8rem; line-height: 1.8; opacity: 0.78; }
.matchday__arrow {
  position: absolute; left: 2.2rem; bottom: 1.6rem;
  font-size: 1rem; color: var(--maroon);
  opacity: 0; transform: translateX(-0.6rem);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.matchday__arrow--gold {
  color: var(--gold); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.matchday__card:hover .matchday__arrow { opacity: 1; transform: translateX(0); }

/* ============================================================
   05 · Squads
   ============================================================ */
.squads { padding: 8rem 8vw; background: var(--maroon-deep); color: var(--chalk); }
.squads__head {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 4rem; line-height: 1.1; margin: 2rem 0 3.4rem; max-width: 52rem;
  text-wrap: balance; color: var(--chalk);
}
.squads .squadcard { border: 1px solid rgba(246, 241, 234, 0.12); }
.squads__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.squadcard {
  position: relative; border-radius: var(--radius-card); overflow: hidden;
  aspect-ratio: 3 / 2.05; background: var(--maroon-deep);
}
.squadcard figure { position: absolute; inset: 0; }
.squadcard img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out), filter 1.2s var(--ease-out);
  filter: saturate(0.82);
}
.squadcard:hover img { transform: scale(1.045); filter: saturate(1); }
.squadcard::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(64,16,31,0.82) 0%, rgba(64,16,31,0.12) 45%, rgba(64,16,31,0.05) 100%);
}
.squadcard__masthead { position: absolute; z-index: 2; left: 2rem; bottom: 1.8rem; color: var(--chalk); }
.squadcard__num { font-size: 0.7rem; letter-spacing: 0.3em; color: var(--gold); margin-bottom: 0.5rem; }
.squadcard__masthead h3 { font-weight: 600; font-size: 2.6rem; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; }
.squadcard__masthead h3 span { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; }
.squadcard__league { margin-top: 0.7rem; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.squadcard__count {
  position: absolute; z-index: 2; right: 1.8rem; top: 1.7rem;
  color: var(--chalk); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  padding-bottom: 0.45rem; border-bottom: 1px solid var(--gold);
  text-shadow: 0 1px 8px rgba(64,16,31,0.5);
}
.squads__note {
  margin-top: 2.6rem; font-size: 1.05rem; color: rgba(246, 241, 234, 0.65);
}
.squads__note em { font-family: var(--font-serif); font-size: 1.2rem; color: var(--gold); }

/* Gold offset ring (used by the collage circle tile) */
.tile--ring::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  border: 1px solid var(--gold);
  transform: scale(1.06);
  pointer-events: none;
}

/* ============================================================
   06 · Mission
   ============================================================ */
.mission { position: relative; background: var(--maroon-deep); color: var(--chalk); overflow: clip; }
.mission__bg { position: absolute; inset: 0; opacity: 0.38; }
.mission__bg img { width: 100%; height: 110%; object-fit: cover; }
.mission__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(64,16,31,0.55), rgba(64,16,31,0.88)); }
.mission__inner { position: relative; z-index: 2; padding: 9rem 8vw; }
.mission__head {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 3.3rem; line-height: 1.16; max-width: 46rem; margin: 2rem 0 3.6rem;
  text-wrap: balance;
}
.mission__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.stat {
  border: 1px solid rgba(246,241,234,0.14); border-radius: var(--radius-card);
  padding: 1.6rem 1.5rem 1.4rem;
  background: rgba(64,16,31,0.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.stat__num {
  font-family: var(--font-serif); font-size: 2.9rem; line-height: 1; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.stat__label { margin-top: 0.9rem; font-size: 0.74rem; line-height: 1.65; color: rgba(246,241,234,0.72); }
.mission__ctas { display: flex; gap: 1.2rem; margin-top: 3.4rem; flex-wrap: wrap; }

/* ============================================================
   07 · News
   ============================================================ */
.news { padding: 8rem 8vw; background: var(--chalk); }
.news__masthead {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 2px solid var(--ink); padding-bottom: 1.2rem; margin-bottom: 2.2rem;
}
.news__issue { font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: rgba(43,28,32,0.6); }

.newsfeature {
  position: relative; border-radius: var(--radius-card); overflow: hidden;
  aspect-ratio: 21 / 9; margin-bottom: 1.8rem; display: block;
}
.newsfeature figure { position: absolute; inset: 0; }
.newsfeature img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out); filter: saturate(0.85);
}
.newsfeature:hover img { transform: scale(1.04); filter: saturate(1); }
.newsfeature::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(64,16,31,0.85) 0%, rgba(64,16,31,0.15) 55%, transparent 100%);
}
.newsfeature__overlay { position: absolute; z-index: 2; left: 2.6rem; right: 2.6rem; bottom: 2.2rem; color: var(--chalk); }
.newsfeature__overlay h3 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 3rem; line-height: 1.1; max-width: 36rem; margin-top: 0.8rem;
  text-wrap: balance;
}
.newsfeature__overlay h3 em { color: var(--rose-soft); }
.newsfeature__read {
  display: inline-block; margin-top: 1.3rem;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); opacity: 0; transform: translateY(0.4rem);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.newsfeature:hover .newsfeature__read { opacity: 1; transform: translateY(0); }
.newsfeature__num {
  position: absolute; z-index: 2; top: 1.8rem; right: 2.2rem;
  font-family: var(--font-serif); font-style: italic;
  font-size: 1rem; color: var(--chalk); opacity: 0.85;
}

.news__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; }
.newscard { position: relative; }
.newscard figure {
  border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 16 / 9;
  margin-bottom: 1.3rem; background: var(--rose-panel);
}
.newscard img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out); filter: saturate(0.85);
}
.newscard:hover img { transform: scale(1.05); filter: saturate(1); }
.newscard__cat {
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.7rem;
}
.newscard h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.75rem; line-height: 1.25; max-width: 24rem; }
.newscard__read {
  display: inline-block; margin-top: 0.9rem;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--maroon); opacity: 0; transform: translateX(-0.4rem);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.newscard:hover .newscard__read { opacity: 1; transform: translateX(0); }

/* ============================================================
   07b · The Collage — editorial tile mosaic
   ============================================================ */
.mosaic { background: var(--chalk); padding: 2rem 8vw 8rem; }
.mosaic__grid {
  display: grid; gap: 1.6rem;
  grid-template-columns: 1.15fr 1fr 1fr;
  grid-template-rows: 16rem 16rem;
  grid-template-areas:
    "big quote circle"
    "big stat  wide";
}
.mosaic__tile { position: relative; margin: 0; border-radius: var(--radius-card); overflow: hidden; }
.mosaic__tile img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: filter 0.7s var(--ease-soft), transform 1.1s var(--ease-out); }
.mosaic__tile:hover img { filter: saturate(1.05); transform: scale(1.04); }
.mosaic__tile figcaption {
  position: absolute; left: 1.6rem; bottom: 1.3rem; z-index: 2;
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.05rem; color: var(--chalk);
  text-shadow: 0 2px 14px rgba(64, 16, 31, 0.65);
}
.mosaic__tile--big { grid-area: big; }
.mosaic__tile--big.tile--archmask { border-radius: 10rem 10rem 1.25rem 1.25rem; }
.mosaic__tile--circle { grid-area: circle; border-radius: 50%; aspect-ratio: auto; justify-self: center; width: 16rem; height: 16rem; }
.mosaic__tile--wide { grid-area: wide; }
.mosaic__tile--wide.tile--pillmask { border-radius: 99rem; }
.mosaic__tile--quote {
  grid-area: quote; background: var(--maroon); color: var(--chalk);
  display: flex; align-items: center; padding: 2rem 2.2rem; overflow: visible;
}
.mosaic__tile--quote p { font-family: var(--font-serif); font-size: 2rem; line-height: 1.2; }
.mosaic__tile--quote em { color: var(--rose-soft); }
.mosaic__sticker {
  position: absolute; top: -1.4rem; right: -1rem;
  background: var(--gold); color: var(--maroon-deep);
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  text-align: center; line-height: 1.5;
  padding: 1rem 0.9rem; border-radius: 50%;
  transform: rotate(-8deg);
  box-shadow: 0 0.8rem 1.8rem rgba(64, 16, 31, 0.2);
}
.mosaic__tile--stat {
  grid-area: stat; background: var(--rose-panel);
  display: flex; flex-direction: column; justify-content: center; padding: 2rem 2.2rem;
  border: 1px solid rgba(125, 31, 63, 0.12);
}
.mosaic__statNum { font-family: var(--font-serif); font-size: 4.2rem; line-height: 1; color: var(--maroon); }
.mosaic__statLabel { margin-top: 0.8rem; font-size: 0.8rem; color: rgba(43, 28, 32, 0.65); max-width: 14rem; }

/* ============================================================
   08 · Kit
   ============================================================ */
.kit { background: #17090d; color: var(--chalk); overflow: clip; }
.kit__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;
  padding: 8rem 8vw; align-items: center;
}
.kit__copy h2 { font-family: var(--font-serif); font-weight: 400; font-size: 5.2rem; line-height: 1.02; margin: 2rem 0 2rem; }
.kit__copy > p { font-size: 0.95rem; line-height: 1.85; color: rgba(246,241,234,0.72); max-width: 26rem; margin-bottom: 2.4rem; }
.kit__colours { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-bottom: 1.8rem; }
.kit__colours span { display: flex; align-items: center; gap: 0.55rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(246,241,234,0.8); }
.kit__colours i { width: 0.95rem; height: 0.95rem; border-radius: 50%; display: inline-block; border: 1px solid rgba(246,241,234,0.35); }
.kit__product {
  position: relative;
  background: var(--rose-panel); border-radius: var(--radius-card);
  padding: 1.4rem 1.4rem 0.6rem; box-shadow: 0 2.5rem 5rem rgba(0,0,0,0.4);
}
.kit__product img { border-radius: 0.9rem; }
.kit__product::after {
  content: "The club vest, by Kukri";
  display: block; margin-top: 1.6rem; text-align: center;
  font-family: var(--font-serif); font-style: italic;
  font-size: 1rem; color: var(--maroon-deep); opacity: 0.75;
}

/* ============================================================
   09 · Backers
   ============================================================ */
.backers { background: var(--white); padding: 7rem 8vw; }
.backers__head {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 3.1rem; line-height: 1.15; max-width: 40rem;
  margin: 1.8rem 0 3rem; text-wrap: balance;
}
.backers__grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: 1.35fr 1fr 1fr;
  grid-template-areas:
    "main carter league"
    "main slot   slot";
}
.backercard {
  position: relative; overflow: hidden;
  border: 1px solid rgba(43,28,32,0.1); border-radius: var(--radius-card);
  padding: 2.4rem 2.2rem; background: var(--white);
  display: flex; flex-direction: column; gap: 1.2rem; justify-content: center;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.backercard::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}
.backercard:hover { transform: translateY(-0.4rem); box-shadow: 0 1.6rem 3rem rgba(64,16,31,0.12); }
.backercard:hover::before { transform: scaleX(1); }
.backercard--main { grid-area: main; }
.backercard--league { grid-area: league; }
.backercard--slot { grid-area: slot; }
.backercard__tag {
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold);
}
.backercard img { max-height: 6rem; width: auto; max-width: 100%; object-fit: contain; align-self: flex-start; }
.backercard--main img { max-height: 10rem; }
.backercard__line { font-size: 0.8rem; line-height: 1.65; color: rgba(43,28,32,0.6); }
.backercard--league { background: var(--maroon-deep); color: var(--chalk); border: 0; }
.backercard__league { font-family: var(--font-serif); font-size: 2rem; line-height: 1.12; }
.backercard--league .backercard__line { color: rgba(246,241,234,0.65); }
.backercard--slot {
  background: transparent;
  border: 1px dashed rgba(125,31,63,0.35);
  flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.backercard__adaptive { height: 1.5rem; width: auto; max-width: 40%; object-fit: contain; }
.backercard__slot { font-family: var(--font-serif); font-size: 2rem; line-height: 1.12; color: var(--ink); }
.backercard__slot em { color: var(--maroon); }
.backercard__visit {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--maroon); opacity: 0; transform: translateX(-0.4rem);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.backercard--league .backercard__visit { color: var(--gold); }
.backercard:hover .backercard__visit { opacity: 1; transform: translateX(0); }

/* ============================================================
   09b · The Gallery — two columns travelling opposite ways
   ============================================================ */
.duo { position: relative; height: 330vh; background: var(--maroon-deep); }
.duo__view {
  position: sticky; top: 0; height: 100vh; overflow: clip;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.2rem; padding: 0 10vw;
}
.duo__col { display: flex; flex-direction: column; gap: 1.2rem; will-change: transform; min-width: 0; }
.duo__col .ph {
  flex: 0 0 auto; margin: 0; overflow: hidden; border-radius: 1rem;
}
.duo__col .ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); }
.duo__col .ph--land { aspect-ratio: 3 / 2; }
.duo__col .ph--port { aspect-ratio: 4 / 5; }
.duo__cap {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center; pointer-events: none;
  mix-blend-mode: difference; color: #fff; z-index: 2;
}
.duo__cap--m { display: none; }
.duo__capLine { font-family: var(--font-serif); font-size: 3.6rem; line-height: 1.1; }
.duo__capLine em { font-style: italic; }
.duo__capLabel {
  margin-top: 0.9rem; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
}

/* ============================================================
   10 · Join
   ============================================================ */
.join { position: relative; overflow: clip; color: var(--chalk); }
.join__bg { position: absolute; inset: 0; }
.join__bg img { width: 100%; height: 112%; object-fit: cover; }
.join__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(64,16,31,0.6), rgba(64,16,31,0.92)); }
.join__inner { position: relative; z-index: 2; padding: 10rem 8vw; max-width: 62rem; }
.join__inner h2 { font-family: var(--font-serif); font-weight: 400; font-size: 4.6rem; line-height: 1.08; margin: 2.2rem 0 2rem; }
.join__copy { font-size: 1rem; line-height: 1.9; color: rgba(246,241,234,0.8); max-width: 34rem; margin-bottom: 2.8rem; }
.join__ctas { display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--maroon-deep); color: var(--chalk); overflow: clip; position: relative; }
.footer__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  padding: 5.5rem 8vw 3.5rem;
  border-bottom: 1px solid rgba(246,241,234,0.12);
}
.footer__ctaLine {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 3.3rem; line-height: 1.1; max-width: 36rem; text-wrap: balance;
}
.footer__ctaBtns { display: flex; align-items: center; gap: 1.2rem; }
.footer__top {
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  border: 1px solid rgba(246,241,234,0.35); color: var(--chalk);
  font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
  transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.footer__top:hover { background: var(--gold); color: var(--maroon-deep); transform: translateY(-0.2rem); }
.footer__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem;
  padding: 3.5rem 8vw 3rem;
}
.footer__label { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.3rem; }
.footer__col a { display: block; font-size: 0.88rem; padding: 0.28rem 0; width: fit-content; position: relative; }
.footer__col a::after {
  content: ""; position: absolute; left: 0; bottom: 0.1rem; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}
.footer__col a:hover { color: var(--gold); }
.footer__col a:hover::after { transform: scaleX(1); transform-origin: left; }
.footer__col p { font-size: 0.82rem; line-height: 1.7; color: rgba(246,241,234,0.75); margin-bottom: 0.6rem; }
.footer__small { font-size: 0.7rem !important; color: rgba(246,241,234,0.5) !important; }
.footer__col--right { text-align: right; }
.footer__col--right .footer__crest {
  width: 4.2rem; height: 4.2rem; margin: 0 0 1.2rem auto;
  border-radius: 50%; background: var(--chalk);
  object-fit: contain; padding: 0.7rem;
}
.footer__meta {
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding: 1.6rem 8vw;
  border-top: 1px solid rgba(246,241,234,0.12);
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(246,241,234,0.5);
}
.footer__meta span { color: var(--gold); font-variant-numeric: tabular-nums; }
.footer__wordmark {
  font-family: var(--font-sans); font-weight: 700; text-transform: uppercase;
  font-size: 27vw; line-height: 0.64; text-align: center;
  letter-spacing: 0.01em;
  color: rgba(246, 241, 234, 0.08);
  transform: translateY(0.12em);
  user-select: none;
  display: flex; justify-content: center;
}
.footer__wordmark span { display: inline-block; transition: color 0.5s var(--ease-soft), transform 0.5s var(--ease-out); }
.footer__wordmark span:hover { color: rgba(176, 138, 76, 0.35); transform: translateY(-0.03em); }

/* ============================================================
   Reveal scaffolding (JS enhances; these are safe defaults)
   ============================================================ */
.js [data-reveal] .rv-line { display: block; overflow: hidden; }
.js [data-reveal] .rv-line > span { display: inline-block; will-change: transform; }
[data-float] { will-change: transform; }

/* ============================================================
   Degradation tiers — no JS, reduced motion, CDN timeout
   ============================================================ */
html:not(.js) .preloader,
html.loader-timeout .preloader { display: none; }
html:not(.js) .cover__stage,
html.reduced-motion .cover__stage { min-height: auto; padding-top: 8rem; }
html.reduced-motion .ticker__track,
html:not(.js) .ticker__track { animation: none; }
html:not(.js) .duo, html.reduced-motion .duo, html.loader-timeout .duo { height: auto; padding: 3rem 0; }
html:not(.js) .duo__view, html.reduced-motion .duo__view, html.loader-timeout .duo__view { position: relative; height: auto; }
html:not(.js) .duo__col, html.reduced-motion .duo__col, html.loader-timeout .duo__col { transform: none !important; }
html:not(.js) .accent-phrase,
html.reduced-motion .accent-phrase,
html.loader-timeout .accent-phrase { color: var(--maroon); }
html:not(.js) .accent-phrase--gold,
html.reduced-motion .accent-phrase--gold,
html.loader-timeout .accent-phrase--gold { color: var(--gold); }
html.reduced-motion * { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }

/* ============================================================
   Mobile (artboard 460 — overrides AFTER base rules, always)
   ============================================================ */
@media (max-width: 991px) {
  .chrome { top: 0.8rem; width: 94vw; padding: 0.5rem 0.6rem 0.5rem 0.8rem; gap: 0.8rem; }
  .chrome__crest { width: 2.2rem; height: 2.2rem; }
  .chrome__name { font-size: 0.72rem; }
  .chrome__links { display: none; }
  .chrome__burger { display: flex; }
  .chrome__cta { display: none; }

  .menu__links a { font-size: 2.5rem; }

  /* Global compaction: buttons and labels sized for a phone, not a poster.
     Editorial-small display; body copy bumped to stay legible. */
  .btn { padding: 0.7rem 1.3rem; font-size: 0.68rem; letter-spacing: 0.08em; }
  .eyebrow { font-size: 0.6rem; letter-spacing: 0.2em; }

  .cover__stage { min-height: 100svh; }
  .cover__ghost { font-size: 10rem; top: 18vh; }
  .cover__photo { width: 19.5rem; height: 58vh; border-radius: 10rem 10rem 0 0; }
  .cover__dateline { top: 4.6rem; gap: 0.6rem; font-size: 0.52rem; letter-spacing: 0.18em; }
  .cover__title--left { left: 1.4rem; top: 17vh; }
  .cover__title--right { right: auto; left: 1.4rem; top: calc(17vh + 5rem); text-align: left; }
  .cover__line--sans { font-size: 2.05rem; }
  .cover__line--serif { font-size: 2.5rem; }
  .cover__standfirst { display: none; }
  .cover__card--proof { right: 1rem; bottom: 12vh; max-width: 9.5rem; padding: 0.85rem 0.95rem; }
  .cover__card--proof .cover__cardBig { font-size: 2rem; }
  .cover__card--proof .cover__cardSmall { font-size: 0.66rem; }
  .cover__cardLabel { font-size: 0.52rem; }
  .cover__card--fixture { display: none; }
  .cover__stamp { left: 1.2rem; bottom: 28vh; width: 3.6rem; height: 3.6rem; }
  .cover__footerline { padding: 1rem 1.4rem; font-size: 0.54rem; }
  .cover__barcode { width: 3.4rem; height: 1.4rem; }

  .ticker { padding: 0.85rem 0; }
  .ticker__seq em { font-size: 1.25rem; }
  .ticker__seq b { font-size: 0.62rem; }
  .ticker__seq i { padding: 0 0.9rem; font-size: 0.7rem; }

  .teamphoto { padding: 3.5rem 1.2rem 2.6rem; }
  .teamphoto__line { font-size: 0.56rem; margin-top: 1rem; }

  .club { padding: 4.5rem 1.4rem 3.8rem; }
  .club__head { font-size: 1.85rem; }
  .club__grid { grid-template-columns: 1fr; gap: 2.6rem; }
  .club__copy p { font-size: 1.12rem; line-height: 1.85; }
  .club__copy .has-dropcap::first-letter { font-size: 3.4rem; }
  .club__quote blockquote p { font-size: 1.6rem; }
  .club__values span { font-size: 1.35rem; }
  .club__sticker { right: 0.4rem; font-size: 0.6rem; padding: 0.85rem 0.9rem; }

  .bighero { height: 68svh; }
  .bighero__inner { padding: 0 1.4rem 3rem; }
  .bighero__line { font-size: 2.2rem; }
  .bighero__eyebrow { font-size: 0.56rem; }
  .bighero__sub { font-size: 0.95rem; }

  .matchday { padding: 4rem 1.4rem; }
  .matchday__row { grid-template-columns: 1fr; gap: 1rem; }
  .matchday__card { padding: 1.8rem 1.6rem 2.6rem; }
  .matchday__card h3 { font-size: 1.55rem; }
  .matchday__meta { font-size: 0.92rem; }

  .mosaic { padding: 1rem 1.4rem 5rem; }
  .mosaic__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "big   big"
      "quote circle"
      "stat  wide";
  }
  .mosaic__tile--big { height: 22rem; }
  .mosaic__tile--circle { width: 100%; height: auto; aspect-ratio: 1; }
  .mosaic__tile--quote p { font-size: 1.5rem; }
  .mosaic__tile--stat { padding: 1.5rem 1.4rem; }
  .mosaic__statNum { font-size: 2.8rem; }
  .mosaic__tile--wide { min-height: 9rem; }

  .squads { padding: 4.5rem 1.4rem; }
  .squads__head { font-size: 1.75rem; }
  .squads__grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .squadcard { aspect-ratio: 3 / 2.1; }
  .squadcard__masthead { left: 1.3rem; bottom: 1.1rem; }
  .squadcard__masthead h3 { font-size: 1.7rem; }
  .squadcard__league { font-size: 0.6rem; }
  .squads__note { font-size: 0.95rem; }

  .mission__inner { padding: 4.5rem 1.4rem; }
  .mission__head { font-size: 1.6rem; }
  .mission__stats { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .stat { padding: 1.1rem 1rem 0.9rem; }
  .stat__num { font-size: 1.9rem; }
  .stat__label { font-size: 0.7rem; }
  .mission__ctas { margin-top: 2.4rem; }

  .news { padding: 4.5rem 1.4rem; }
  .news__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .newsfeature { aspect-ratio: 4 / 3; }
  .newsfeature__overlay { left: 1.2rem; right: 1.2rem; bottom: 1.2rem; }
  .newsfeature__overlay h3 { font-size: 1.5rem; }
  .newscard h3 { font-size: 1.35rem; }
  .newscard__cat { font-size: 0.56rem; }
  .news__issue { font-size: 0.85rem; }

  .kit__inner { grid-template-columns: 1fr; padding: 4.5rem 1.4rem; gap: 2.4rem; }
  .kit__copy h2 { font-size: 2.3rem; }
  .kit__copy > p { font-size: 1.05rem; }
  .kit__colours span { font-size: 0.62rem; }

  .backers { padding: 4rem 1.4rem; }
  .backers__head { font-size: 1.6rem; }
  .backercard { padding: 1.8rem 1.6rem; }
  .backercard__league, .backercard__slot { font-size: 1.5rem; }
  .backers__grid { gap: 1rem; }

  .duo { height: auto; padding: 3.5rem 0 4rem; display: flex; flex-direction: column; }
  .duo__cap--m {
    display: block; position: static; transform: none; mix-blend-mode: normal;
    color: var(--chalk); text-align: left; padding: 0 1.4rem 1.6rem; pointer-events: auto;
  }
  .duo__cap--m .duo__capLine { font-size: 1.7rem; }
  .duo__cap--m .duo__capLabel { font-size: 0.56rem; color: var(--gold); }
  .duo__cap--d { display: none; }
  .duo__view {
    position: relative; height: auto; display: flex; gap: 0.8rem;
    overflow-x: auto; overflow-y: clip; padding: 0 1.4rem;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .duo__view::-webkit-scrollbar { display: none; }
  .duo__col { display: contents; }
  .duo__col .ph { flex: 0 0 74vw; max-width: 22rem; aspect-ratio: auto; height: 15.5rem; border-radius: 0.7rem; }
  .backers__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "main" "carter" "league" "slot";
  }

  .join__inner { padding: 5rem 1.4rem; }
  .join__inner h2 { font-size: 1.85rem; }
  .join__copy { font-size: 1.12rem; }

  .footer__cta { padding: 3.2rem 1.4rem 2.2rem; }
  .footer__ctaLine { font-size: 1.65rem; }
  .footer__top { width: 2.5rem; height: 2.5rem; font-size: 0.9rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; padding: 2.5rem 1.4rem 2rem; gap: 1.8rem; }
  .footer__label { font-size: 0.56rem; }
  .footer__col a { font-size: 0.95rem; }
  .footer__col p { font-size: 0.9rem; }
  .footer__col--right { text-align: left; }
  .footer__col--right .footer__crest { margin: 0 0 1rem; width: 3.2rem; height: 3.2rem; }
  .footer__meta { padding: 1.1rem 1.4rem; font-size: 0.52rem; }

  .menu__links a { font-size: 1.9rem; }
  .menu__links a em { font-size: 0.56rem; }
  .menu__foot { font-size: 0.9rem; }
}

/* ============================================================
   News engine additions (homepage link, county button, news page)
   ============================================================ */
.news__all {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--maroon); position: relative; padding-bottom: 0.2rem;
}
.news__all::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}
.news__all:hover::after { transform: scaleX(1); transform-origin: left; }

.matchday__btn { margin-top: 1.6rem; padding: 0.75rem 1.5rem; font-size: 0.7rem; }
.matchday__card { display: flex; flex-direction: column; align-items: flex-start; }
.matchday__card .matchday__btn { margin-top: auto; }

/* ---------- news.html ---------- */
.newspage { background: var(--chalk); }
.newspage__main { max-width: 64rem; margin: 0 auto; padding: 9.5rem 1.6rem 5rem; }
.newspage .news__masthead { margin-bottom: 1rem; }
.newspage .chrome__cta { display: inline-flex; }

.newsrow {
  display: grid; grid-template-columns: 16rem 1fr; gap: 2.2rem; align-items: center;
  padding: 2rem 0; border-bottom: 1px solid rgba(125, 31, 63, 0.14); cursor: pointer;
}
.newsrow__ph { margin: 0; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4 / 3; }
.newsrow__ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.88); transition: transform 0.9s var(--ease-out); }
.newsrow:hover .newsrow__ph img { transform: scale(1.05); }
.newsrow__copy h2 {
  font-family: var(--font-serif); font-weight: 400; font-size: 1.9rem; line-height: 1.2;
  margin: 0.4rem 0 0.5rem; transition: color 0.3s;
}
.newsrow:hover .newsrow__copy h2 { color: var(--maroon); }
.newsrow__dek { font-size: 0.92rem; line-height: 1.7; color: rgba(43, 28, 32, 0.65); max-width: 36rem; margin-bottom: 0.7rem; }
.newsrow .newscard__read { opacity: 1; transform: none; }

.newspage__article { max-width: 46rem; margin: 0 auto; }
.newspage__back {
  display: inline-block; margin-bottom: 2rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--maroon);
}
.newspage__back:hover { color: var(--maroon-deep); }
.newspage__article h1 {
  font-family: var(--font-serif); font-weight: 400; font-size: 2.9rem; line-height: 1.12;
  margin: 0.6rem 0 1rem; text-wrap: balance;
}
.newspage__dek { font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; line-height: 1.5; color: rgba(43, 28, 32, 0.65); margin-bottom: 1.6rem; }
.newspage__article figure { margin: 0 0 2rem; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 16 / 9; }
.newspage__article figure img { width: 100%; height: 100%; object-fit: cover; }
.newspage__body p { font-size: 1.02rem; line-height: 1.9; color: rgba(43, 28, 32, 0.85); margin-bottom: 1.3rem; max-width: 42rem; }
.newspage__body a { color: var(--maroon); text-decoration: underline; text-underline-offset: 0.25em; }
.newspage__author {
  margin-top: 2.2rem; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
}
.footer--slim { padding-top: 0.5rem; }
.footer--slim .footer__meta { border-top: 0; }
.footer--slim a { color: var(--chalk); }
.footer--slim a:hover { color: var(--gold); }

@media (max-width: 991px) {
  .newspage__main { padding: 6.5rem 1.4rem 3.5rem; }
  .newsrow { grid-template-columns: 1fr; gap: 1rem; padding: 1.6rem 0; }
  .newsrow__ph { aspect-ratio: 16 / 9; }
  .newsrow__copy h2 { font-size: 1.5rem; }
  .newspage__article h1 { font-size: 1.9rem; }
  .newspage__dek { font-size: 1.05rem; }
  .newspage__body p { font-size: 1.1rem; }
  .news__all { font-size: 0.6rem; }
  .matchday__btn { margin-top: 1.2rem; }
}

/* Article body elements the CMS editor can produce */
.newspage__body h3 {
  font-family: var(--font-serif); font-weight: 400; font-size: 1.6rem; line-height: 1.25;
  margin: 2rem 0 0.8rem; color: var(--maroon-deep);
}
.newspage__body ul, .newspage__body ol { margin: 0 0 1.3rem 1.3rem; max-width: 42rem; }
.newspage__body li { font-size: 1.02rem; line-height: 1.8; color: rgba(43, 28, 32, 0.85); margin-bottom: 0.4rem; }
.newspage__body li::marker { color: var(--maroon); }
.newspage__body blockquote {
  margin: 1.8rem 0; padding-left: 1.3rem; border-left: 2px solid var(--gold);
}
.newspage__body blockquote p { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; color: var(--maroon-deep); }
@media (max-width: 991px) {
  .newspage__body h3 { font-size: 1.4rem; }
  .newspage__body li { font-size: 1.1rem; }
}

/* News safety net: stand-in photo, headline limits, load more */
[hidden] { display: none !important; }

.news-fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem;
  background: radial-gradient(circle at 50% 40%, var(--maroon) 0%, var(--maroon-deep) 70%);
}
.news-fallback img {
  width: 26%; max-width: 7rem; height: auto !important; aspect-ratio: 1;
  object-fit: cover; border-radius: 50%; background: var(--chalk); padding: 0.4rem;
  filter: none !important; transform: none !important;
}
.news-fallback span {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold);
}
.newscard figure, .newsrow__ph, .newspage__article figure { position: relative; }

.newsfeature__overlay h3,
.newscard h3,
.newsrow__copy h2 {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.newsrow__dek {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
@media (max-width: 991px) {
  .newsfeature__overlay h3 { -webkit-line-clamp: 2; }
}

.newspage__more { display: flex; justify-content: center; margin-top: 2.6rem; }