/* ==========================================================================
   LLANGWM RFC — THE WASPS
   --------------------------------------------------------------------------
   A committed black-and-amber palette. This is a club identity, not a UI
   surface, so the colours are declared outright rather than following the
   viewer's light/dark preference.

   The recurring motif is the shirt: amber hoops on black, raked over at 26
   degrees. It appears as the hero field, as section dividers, behind the
   archive plates and inside the crest itself, so the same shape ties the
   whole site together without another photograph being needed.

   Two typefaces only:
     Anton      — the shout. Hero, section titles, years, scores.
     Public Sans — everything that has to be read.
   ========================================================================== */

@font-face{font-family:"Anton";src:url("../assets/fonts/anton-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("../assets/fonts/publicsans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("../assets/fonts/publicsans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#0A0A0B;
  --ink-1:#0F0F11;
  --ink-2:#141418;
  --ink-3:#1C1C21;
  --amber:#FFB400;
  --amber-hi:#FFC63D;
  --amber-lo:#C98C00;
  --white:#FFFFFF;
  --mist:#B6B6BE;
  /* Light enough to clear WCAG AA (4.5:1) on the darkest card, --ink-3,
     not only on the page background. */
  --mist-dim:#8D8D97;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.06);
  --amber-line:rgba(255,180,0,.30);

  --display:"Anton","Haettenschweiler","Arial Narrow",system-ui,sans-serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --gutter:clamp(20px,5vw,64px);
  --maxw:1300px;
  --sec-y:clamp(72px,10vw,150px);
  --ease:cubic-bezier(.22,.61,.36,1);

  /* The shirt, as a reusable background. */
  --hoops:repeating-linear-gradient(116deg,
      rgba(255,180,0,.036) 0 26px,
      transparent 26px 74px);
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink);
  color:var(--mist);
  font-family:var(--body);
  font-size:clamp(15.5px,.45vw + 14.6px,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0 0 1em}
dd{margin:0}
address{font-style:normal}
p:last-child{margin-bottom:0}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  color:var(--white);
  line-height:.92;
  letter-spacing:-.005em;
  text-transform:uppercase;
  margin:0;
}

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

.skip-link{
  position:fixed;top:-100px;left:16px;z-index:200;
  background:var(--amber);color:var(--ink);
  padding:12px 20px;font-weight:700;border-radius:2px;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:16px}

section[id],[id="top"]{scroll-margin-top:96px}

.shell{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --------------------------------------------------------------------------
   Scroll reveal. One class, one transition, staggered with --d.
   -------------------------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none}
.reveal.is-in{will-change:auto}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  --btn-bg:transparent;
  --btn-fg:var(--white);
  --btn-bd:var(--line);
  display:inline-flex;align-items:center;gap:.6em;
  padding:15px 26px;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  font-family:var(--body);
  font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;
  position:relative;overflow:hidden;
  transition:color .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease),transform .3s var(--ease);
}
/* Amber wipes in from the left on hover rather than simply changing colour. */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--amber);
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.btn>*{position:relative}
.btn:hover{border-color:var(--amber);color:var(--ink);transform:translateY(-2px)}
.btn:hover::before{transform:scaleX(1)}
.btn:active{transform:translateY(0)}

.btn-amber{--btn-bg:var(--amber);--btn-fg:var(--ink);--btn-bd:var(--amber)}
.btn-amber::before{background:var(--white)}
.btn-amber:hover{color:var(--ink);border-color:var(--white)}

.btn-sm{padding:11px 18px;font-size:.7rem;letter-spacing:.12em}
.btn-arrow::after{content:"→";margin-left:.55em;font-weight:400;transition:transform .3s var(--ease)}
.btn:hover .btn-arrow::after,.btn-arrow:hover::after{transform:translateX(4px)}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */
.masthead{
  position:fixed;inset:0 0 auto;z-index:90;
  display:flex;align-items:center;gap:24px;
  width:100%;
  /* Full-bleed bar, but the contents still line up with .shell. Capping the
     masthead's own width left the bar short of the viewport edges. */
  padding-block:18px;
  padding-inline:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)));
  transition:padding-block .4s var(--ease);
}
.masthead::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(10,10,11,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  opacity:0;transition:opacity .4s var(--ease);
}
.masthead.is-stuck::before{opacity:1}
.masthead.is-stuck{padding-block:11px}

.brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex:0 0 auto}
.brand img{width:auto;height:46px;transition:height .4s var(--ease)}
.masthead.is-stuck .brand img{height:38px}
.brand-words{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--display);font-size:1.32rem;color:var(--white);letter-spacing:.005em;text-transform:uppercase}
.brand-est{font-size:.58rem;font-weight:700;letter-spacing:.24em;color:var(--amber);text-transform:uppercase;margin-top:5px}

.nav{margin-left:auto}
.nav ul{display:flex;gap:clamp(14px,2vw,30px)}
.nav a{
  position:relative;display:block;padding:12px 0;
  font-size:.74rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;text-decoration:none;color:var(--mist);
  transition:color .25s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--amber);
  transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav a:hover,.nav a[aria-current="true"]{color:var(--white)}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1);transform-origin:left}

.masthead-cta{flex:0 0 auto}
@media (max-width:1080px){.nav,.masthead-cta{display:none}.nav{margin-left:0}}

/* Hamburger: three bars that fold into a cross. */
.burger{
  margin-left:auto;
  width:46px;height:46px;
  display:grid;place-content:center;gap:6px;
  border:1px solid var(--line);
}
.burger span{display:block;width:20px;height:2px;background:var(--white);transition:transform .35s var(--ease),opacity .25s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* Declared after .burger so it actually wins on wide screens. */
@media (min-width:1081px){.burger{display:none}}

/* --------------------------------------------------------------------------
   Mobile navigation
   -------------------------------------------------------------------------- */
.mobile-nav{
  position:fixed;inset:0;z-index:89;
  background:var(--ink);
  display:flex;flex-direction:column;
  padding:104px var(--gutter) 40px;
  opacity:0;
  transform:translate3d(0,-14px,0);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
  overflow-y:auto;
}
/* Same as the lightbox: display:flex above outranks the UA [hidden] rule. */
.mobile-nav[hidden]{display:none}
.mobile-nav::before{content:"";position:absolute;inset:0;background:var(--hoops);opacity:.65;pointer-events:none}
.mobile-nav.is-open{opacity:1;transform:none}
.mobile-nav ul{position:relative;display:flex;flex-direction:column}
.mobile-nav li{border-bottom:1px solid var(--line-2)}
.mobile-nav a.m-link{
  display:flex;align-items:baseline;gap:14px;
  padding:19px 0;text-decoration:none;
  font-family:var(--display);font-size:clamp(1.9rem,8vw,2.7rem);
  color:var(--white);text-transform:uppercase;
  opacity:0;transform:translateY(16px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),color .2s;
}
.mobile-nav.is-open a.m-link{opacity:1;transform:none;transition-delay:calc(60ms + var(--i,0) * 45ms)}
.mobile-nav a.m-link:hover{color:var(--amber)}
.m-num{font-family:var(--body);font-size:.62rem;font-weight:700;letter-spacing:.2em;color:var(--amber)}
.mobile-foot{position:relative;margin-top:auto;padding-top:32px;display:flex;flex-wrap:wrap;gap:12px}
.mobile-crest{position:relative;margin-top:28px;width:56px;opacity:.5}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:min(100svh,880px);
  display:flex;align-items:flex-end;
  padding:clamp(112px,14vh,140px) 0 clamp(34px,6vw,72px);
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-hoops{
  position:absolute;inset:-12% -5%;
  background:var(--hoops);
  opacity:.9;
  will-change:transform;
}
/* A low amber wash rising off the touchline. */
.hero-wash{
  position:absolute;inset:0;
  background:
    radial-gradient(100% 62% at 18% 108%,rgba(255,180,0,.20),transparent 62%),
    radial-gradient(70% 50% at 88% 6%,rgba(255,180,0,.08),transparent 70%),
    linear-gradient(180deg,rgba(10,10,11,.5) 0%,rgba(10,10,11,.1) 40%,var(--ink) 100%);
}
/* One slow floodlight pass. Transform only — nothing repaints. */
.hero-sweep{
  position:absolute;top:-30%;left:-60%;
  width:45%;height:160%;
  background:linear-gradient(90deg,transparent,rgba(255,198,61,.11),transparent);
  transform:skewX(-14deg) translate3d(0,0,0);
  animation:sweep 15s var(--ease) 1.4s infinite;
  will-change:transform;
}
@keyframes sweep{
  0%{transform:skewX(-14deg) translate3d(0,0,0)}
  55%,100%{transform:skewX(-14deg) translate3d(310%,0,0)}
}
.hero-watermark{
  position:absolute;right:-4%;bottom:4%;
  width:min(44vw,620px);height:auto;
  opacity:.045;pointer-events:none;
  animation:fade-in 1.6s var(--ease) .8s both;
}
@keyframes fade-in{from{opacity:0}to{opacity:.045}}
@media (max-width:1080px){.hero-watermark{display:none}}

.hero-vignette{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 40%,transparent 40%,rgba(0,0,0,.55) 100%)}

.hero-inner{position:relative;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

.hero-crest{
  width:clamp(92px,9.5vw,140px);height:auto;margin-bottom:clamp(14px,2vw,22px);
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.6));
  animation:crest-in 1s var(--ease) both;
}
@keyframes crest-in{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:none}}

.hero-eyebrow{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:.7rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--amber);margin-bottom:14px;
}
.hero-eyebrow::before{content:"";width:clamp(28px,5vw,64px);height:2px;background:var(--amber)}

.hero-title{
  font-size:clamp(2.9rem,10.6vw,8.6rem);
  line-height:.84;
  letter-spacing:-.02em;
  margin-bottom:clamp(12px,1.8vw,20px);
}
.hero-title .line{display:block;overflow:hidden}
.hero-title .line>span{
  display:block;
  transform:translateY(102%);
  animation:line-up .95s var(--ease) both;
}
.hero-title .line:nth-child(1)>span{animation-delay:.12s}
.hero-title .line:nth-child(2)>span{animation-delay:.24s}
@keyframes line-up{to{transform:none}}

.hero-strap{
  display:flex;align-items:center;gap:clamp(12px,2vw,22px);flex-wrap:wrap;
  margin-bottom:clamp(16px,2.4vw,26px);
  animation:fade-up .9s var(--ease) .5s both;
}
.hero-wasps{
  font-family:var(--display);
  font-size:clamp(1.5rem,4.4vw,3.2rem);
  line-height:1;color:var(--amber);
  text-transform:uppercase;letter-spacing:.02em;
}
.hero-rule{flex:0 1 clamp(40px,10vw,160px);height:1px;background:linear-gradient(90deg,var(--amber-line),transparent)}
@media (max-width:620px){.hero-rule{display:none}}
.hero-est{
  font-size:.72rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--white);
  border:1px solid var(--amber-line);padding:8px 14px;white-space:nowrap;
}
@keyframes fade-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.hero-lede{
  max-width:46ch;color:var(--mist);
  font-size:clamp(.98rem,.9vw + .76rem,1.1rem);
  margin-bottom:clamp(22px,3vw,32px);
  animation:fade-up .9s var(--ease) .62s both;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;animation:fade-up .9s var(--ease) .74s both}

/* Laptops are wide but short. Sizing the hero on viewport width alone pushed
   the buttons under the fold at 720-760px tall, so scale it on height too. */
@media (min-width:700px) and (max-height:840px){
  .hero{padding-block:clamp(94px,12vh,118px) clamp(24px,3.4vw,44px)}
  .hero-crest{width:clamp(70px,6vw,98px);margin-bottom:12px}
  .hero-eyebrow{margin-bottom:10px}
  .hero-title{font-size:clamp(2.6rem,7.4vw,5.6rem);margin-bottom:12px}
  .hero-wasps{font-size:clamp(1.4rem,3.2vw,2.3rem)}
  .hero-strap{margin-bottom:16px}
  .hero-lede{margin-bottom:22px;font-size:1rem}
}

/* Small phones. The three hero buttons were wrapping to three rows once the
   arrow gained its margin, which pushed them under the fold on a 375x667
   screen. Tighten them so two sit per row, and take a little off the stack. */
@media (max-width:430px){
  .hero-cta .btn{padding:13px 17px;font-size:.71rem;letter-spacing:.1em}
}
@media (max-width:480px) and (max-height:700px){
  .hero{padding-block:94px 28px}
  .hero-crest{width:66px;margin-bottom:10px}
  .hero-eyebrow{margin-bottom:10px}
  .hero-lede{margin-bottom:16px}
}
/* Very short screens: old small phones, and any phone held sideways. */
@media (max-height:600px){
  .hero{padding-block:80px 22px}
  .hero-crest{width:56px;margin-bottom:8px}
  .hero-strap{margin-bottom:10px}
  .hero-lede{margin-bottom:14px}
}

.hero-scroll{
  position:absolute;right:calc(var(--gutter) - 6px);bottom:clamp(34px,6vw,72px);
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:10px 6px;
  font-size:.58rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--mist-dim);text-decoration:none;
  writing-mode:vertical-rl;
  animation:fade-up .9s var(--ease) .9s both;
  transition:color .25s var(--ease);
}
.hero-scroll:hover{color:var(--amber)}
.hero-scroll::after{
  content:"";width:1px;height:62px;
  background:linear-gradient(180deg,var(--amber) 0%,rgba(255,180,0,0) 100%);
  animation:cue 2.6s var(--ease) infinite;transform-origin:top;
}
@keyframes cue{0%,100%{transform:scaleY(.45);opacity:.5}45%{transform:scaleY(1);opacity:1}}
@media (max-width:900px){.hero-scroll{display:none}}

/* --------------------------------------------------------------------------
   Section furniture
   -------------------------------------------------------------------------- */
.sec{position:relative;padding-block:var(--sec-y)}
.sec-alt{background:var(--ink-1)}
.sec-deep{background:#060607}

.sec-head{max-width:760px;margin-bottom:clamp(38px,5vw,64px)}
.sec-head.is-wide{max-width:100%}
.sec-label{
  display:flex;align-items:center;gap:12px;
  font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--amber);margin-bottom:16px;
}
.sec-label::before{content:"";width:22px;height:2px;background:var(--amber);flex:0 0 auto}
.sec-title{
  font-size:clamp(2.1rem,5.6vw,4.4rem);
  line-height:.94;margin-bottom:.4em;
}
.sec-title em{font-style:normal;color:var(--amber)}
.sec-lede{max-width:60ch;font-size:clamp(1rem,.5vw + .86rem,1.1rem)}

/* --------------------------------------------------------------------------
   Decoration: wasps loose in the margins, and a halftone the sections sit on.
   All of it is transform-only, behind the content, and gone on small screens
   where there is no empty margin to fill.
   -------------------------------------------------------------------------- */
.wasp{
  position:absolute;z-index:0;pointer-events:none;
  /* A background image gives an element no height, so the ratio has to come
     from the SVG's own viewBox or every one of these collapses to nothing. */
  aspect-ratio:140 / 90;
  background:url("../assets/brand/wasp.svg") center/contain no-repeat;
  opacity:var(--o,.07);
  animation:drift var(--t,13s) ease-in-out var(--delay,0s) infinite alternate;
}
@keyframes drift{
  from{transform:rotate(var(--r,0deg)) translate3d(0,0,0)}
  to{transform:rotate(var(--r,0deg)) translate3d(16px,-20px,0)}
}
.wasp.is-flipped{transform:scaleX(-1)}
@keyframes drift-flipped{
  from{transform:scaleX(-1) rotate(var(--r,0deg)) translate3d(0,0,0)}
  to{transform:scaleX(-1) rotate(var(--r,0deg)) translate3d(16px,-20px,0)}
}
.wasp.is-flipped{animation-name:drift-flipped}
@media (max-width:1000px){.wasp,.tl-swarm{display:none}}

/* A halftone the darker sections sit on, fading out as it falls. */
.sec-alt::before,.sec-deep::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,180,0,.55) 1px,transparent 1.3px);
  background-size:26px 26px;opacity:.05;
  -webkit-mask-image:radial-gradient(130% 95% at 50% 0%,#000 18%,transparent 78%);
          mask-image:radial-gradient(130% 95% at 50% 0%,#000 18%,transparent 78%);
}

/* The timeline has a wide empty margin on big screens. Three of them follow a
   dashed flight path down it. */
.tl-swarm{
  position:absolute;z-index:0;pointer-events:none;
  right:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)));
  top:14%;width:220px;height:74%;
}
.tl-swarm svg{width:100%;height:100%;overflow:visible}
@media (max-width:1240px){.tl-swarm{display:none}}

/* The shirt used as a divider between sections. */
.hoop-rule{height:8px;background:repeating-linear-gradient(116deg,var(--amber) 0 26px,var(--ink) 26px 52px);opacity:.85}

/* --------------------------------------------------------------------------
   The club + counters
   -------------------------------------------------------------------------- */
.club-grid{display:grid;gap:clamp(24px,4vw,64px);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){.club-grid{grid-template-columns:.9fr 1.1fr}}
.club-head .sec-title{margin-bottom:0}
.club-copy{max-width:62ch}

.club-copy p{margin-bottom:1.1em}
.club-head .pull{
  font-family:var(--display);font-size:clamp(1.25rem,2vw,1.7rem);
  line-height:1.16;color:var(--white);text-transform:uppercase;
  border-left:3px solid var(--amber);padding-left:20px;
  margin:clamp(26px,3.4vw,40px) 0 0;max-width:22ch;
}

.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(46px,6vw,80px);
}
.stat{background:var(--ink);padding:clamp(26px,3.4vw,40px) clamp(20px,2.4vw,32px);position:relative;overflow:hidden}
.stat::after{
  content:"";position:absolute;left:0;top:0;width:3px;height:100%;
  background:var(--amber);transform:scaleY(0);transform-origin:bottom;
  transition:transform .7s var(--ease);transition-delay:var(--d,0ms);
}
.stat.is-in::after{transform:scaleY(1)}
.stat-num{
  font-family:var(--display);
  font-size:clamp(2.6rem,5.2vw,4.1rem);line-height:.9;
  color:var(--amber);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.stat-num.is-word{font-size:clamp(1.9rem,3.6vw,2.7rem);color:var(--white)}
.stat-label{margin-top:12px;font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--mist-dim)}
.stat-note{margin-top:8px;font-size:.84rem;color:var(--mist-dim);line-height:1.5}

/* --------------------------------------------------------------------------
   What's on / news
   -------------------------------------------------------------------------- */
.news-layout{display:grid;gap:clamp(26px,3.4vw,46px);grid-template-columns:1fr}
@media (min-width:1000px){.news-layout{grid-template-columns:1.35fr .65fr;align-items:start}}

.news-list{display:grid;gap:14px}
.news-item{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,2.4vw,30px);align-items:center;
  padding:clamp(20px,2.6vw,28px);
  background:var(--ink-2);border:1px solid var(--line);
  text-decoration:none;
  transition:border-color .35s var(--ease),background-color .35s var(--ease),transform .35s var(--ease);
}
.news-item:hover{border-color:var(--amber-line);background:var(--ink-3);transform:translateX(5px)}
.news-date{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:66px;height:66px;flex:0 0 auto;
  border:1px solid var(--amber-line);color:var(--amber);
  font-family:var(--display);line-height:1;
}
.news-day{font-size:1.5rem}
.news-mon{font-family:var(--body);font-size:.58rem;font-weight:700;letter-spacing:.14em;margin-top:5px}
.news-kicker{font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:7px}
.news-title{font-size:clamp(1.1rem,1.8vw,1.45rem);line-height:1.05;margin-bottom:6px}
.news-sum{font-size:.88rem;color:var(--mist-dim);margin:0}
.news-go{color:var(--mist-dim);font-size:1.3rem;transition:transform .3s var(--ease),color .3s}
.news-item:hover .news-go{color:var(--amber);transform:translateX(4px)}
@media (max-width:620px){
  .news-item{grid-template-columns:auto 1fr;gap:16px}
  .news-go{display:none}
}

/* Instagram panel */
.ig-panel{
  position:relative;overflow:hidden;
  padding:clamp(28px,3.4vw,40px);
  background:var(--ink-2);border:1px solid var(--line);
}
.ig-panel::before{content:"";position:absolute;inset:0;background:var(--hoops);opacity:.85}
.ig-panel>*{position:relative}
.ig-mark{width:44px;height:44px;border:1px solid var(--amber-line);display:grid;place-items:center;color:var(--amber);margin-bottom:20px}
.ig-handle{
  font-family:var(--body);font-weight:700;
  font-size:clamp(1rem,1.5vw,1.2rem);letter-spacing:.01em;
  color:var(--white);word-break:break-word;margin-bottom:12px;
}
.ig-panel p{font-size:.92rem;color:var(--mist-dim);margin-bottom:22px}
.ig-actions{display:flex;flex-wrap:wrap;gap:10px}

/* --------------------------------------------------------------------------
   Fixtures
   -------------------------------------------------------------------------- */
.fx-tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--line);margin-bottom:30px}
.fx-tab{
  position:relative;padding:14px 22px;
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mist-dim);transition:color .25s;
}
.fx-tab::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--amber);transform:scaleX(0);transition:transform .35s var(--ease)}
.fx-tab[aria-selected="true"]{color:var(--white)}
.fx-tab[aria-selected="true"]::after{transform:scaleX(1)}
.fx-tab:hover{color:var(--white)}

.fx-group{
  display:flex;align-items:center;gap:14px;
  font-size:.7rem;font-family:var(--body);font-weight:700;
  letter-spacing:.22em;color:var(--amber);
  margin:0 0 14px;
}
.fx-group::after{content:"";flex:1;height:1px;background:var(--line)}
.fx-list{display:grid;gap:10px}
.fx-list + .fx-group{margin-top:clamp(26px,3vw,38px)}
.fx-row{
  display:grid;grid-template-columns:auto auto 1fr auto;gap:clamp(14px,2.2vw,26px);align-items:center;
  padding:clamp(16px,2.2vw,22px) clamp(16px,2.4vw,26px);
  background:var(--ink-2);border:1px solid var(--line);
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.fx-row:hover{border-color:var(--amber-line);background:var(--ink-3)}
.fx-when{text-align:center;min-width:58px;font-family:var(--display);line-height:1;color:var(--white)}
.fx-d{display:block;font-size:1.65rem}
.fx-m{display:block;font-family:var(--body);font-size:.58rem;font-weight:700;letter-spacing:.16em;color:var(--mist-dim);margin-top:5px}
.fx-ha{
  width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;
  font-family:var(--display);font-size:.95rem;
}
.fx-ha.is-home{background:var(--amber);color:var(--ink)}
.fx-ha.is-away{border:1px solid var(--amber-line);color:var(--amber)}
.fx-opp{font-size:clamp(1rem,1.5vw,1.28rem);line-height:1.1;margin-bottom:5px}
.fx-meta{font-size:.78rem;color:var(--mist-dim);margin:0}
.fx-end{text-align:right;font-family:var(--display);font-size:1.15rem;color:var(--white);white-space:nowrap}
/* Set in the body face so an absent kick-off reads as a note, not a score. */
.fx-end .fx-tbc{
  font-family:var(--body);font-weight:700;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mist-dim);
}
@media (max-width:640px){
  .fx-row{grid-template-columns:auto auto 1fr;row-gap:12px}
  .fx-end{grid-column:1/-1;text-align:left}
}

/* Empty state, designed rather than apologised for. */
.panel-empty{
  position:relative;overflow:hidden;
  padding:clamp(30px,4.2vw,52px);
  background:var(--ink-2);border:1px solid var(--line);
  display:grid;gap:20px;justify-items:start;
}
.panel-empty::before{content:"";position:absolute;inset:0;background:var(--hoops);opacity:.8}
.panel-empty::after{
  content:"";position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  width:260px;height:312px;opacity:.05;
  background:url("../assets/brand/llangwm-rfc-logo.png") center/contain no-repeat;
}
@media (max-width:860px){.panel-empty::after{display:none}}
.panel-empty>*{position:relative;max-width:60ch}
.panel-empty h3{font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.02}
.panel-empty p{max-width:56ch;color:var(--mist);margin:0}
.panel-actions{display:flex;flex-wrap:wrap;gap:10px}

.matchday{
  display:grid;gap:clamp(24px,3vw,40px);grid-template-columns:1fr;
  margin-top:clamp(30px,4vw,52px);
  padding-top:clamp(30px,4vw,52px);border-top:1px solid var(--line);
}
@media (min-width:760px){.matchday{grid-template-columns:repeat(3,1fr)}}
.md-item h4{font-size:1.05rem;margin-bottom:10px;color:var(--amber)}
.md-item p{font-size:.92rem;color:var(--mist-dim);margin:0}

/* --------------------------------------------------------------------------
   Meet the team
   -------------------------------------------------------------------------- */
.people{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:1fr}
@media (min-width:560px){.people{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.people{grid-template-columns:repeat(3,1fr)}}
.person{
  position:relative;overflow:hidden;
  background:var(--ink-2);border:1px solid var(--line);
  transition:border-color .4s var(--ease),transform .4s var(--ease);
  transform-style:preserve-3d;
}
.person:hover{border-color:var(--amber-line)}
.person-photo{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  background:var(--ink-3);display:grid;place-items:center;
}
.person-photo::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(55% 45% at 50% 46%,rgba(255,180,0,.14),transparent 70%);
}
.person-photo img{
  position:relative;z-index:1;
  width:100%;height:100%;object-fit:cover;object-position:center 22%;
  transition:transform .7s var(--ease);
}
.person:hover .person-photo img{transform:scale(1.05)}
.person-photo::before{content:"";position:absolute;inset:0;background:var(--hoops);opacity:.8}
.person-mono{
  position:relative;font-family:var(--display);
  z-index:1;font-size:clamp(3rem,5.4vw,4.2rem);color:var(--amber);opacity:.72;letter-spacing:.02em;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.person:hover .person-mono{opacity:1;transform:scale(1.06)}
/* Monogram mode: no photographs yet, so the plate is a banner rather than a
   portrait, and the cards stay a sensible height. */
.people.is-monogram{max-width:1140px}
.people.is-monogram .person-photo{aspect-ratio:16/10}

.person-body{padding:20px clamp(16px,2vw,22px) 22px;position:relative}
.person-body::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.person:hover .person-body::before{transform:scaleX(1)}
.person-name{font-size:1.22rem;margin-bottom:7px}
.person-role{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin:0}

/* --------------------------------------------------------------------------
   Why the Wasps
   -------------------------------------------------------------------------- */
.wasps{position:relative;overflow:hidden;background:#060607}
.wasps::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(116deg,rgba(255,180,0,.05) 0 44px,transparent 44px 118px);
}
.wasps::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 22% 50%,rgba(255,180,0,.13),transparent 65%)}
.wasps>*{position:relative}
.wasps-grid{display:grid;gap:clamp(34px,5vw,74px);grid-template-columns:1fr;align-items:center}
@media (min-width:920px){.wasps-grid{grid-template-columns:.95fr 1.05fr}}

/* The shirt, drawn rather than photographed. */
.shirt{
  position:relative;aspect-ratio:1/1;max-width:460px;width:100%;margin-inline:auto;
  border:1px solid var(--line);overflow:hidden;background:var(--ink);
  display:grid;place-items:center;
}
.shirt-photo{
  width:82%;height:auto;max-height:86%;object-fit:contain;
  filter:drop-shadow(0 26px 54px rgba(0,0,0,.7));
}
.shirt-tag{
  position:absolute;right:0;bottom:0;background:var(--amber);color:var(--ink);
  padding:9px 16px;font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}
.shirt-note{margin-top:14px;font-size:.74rem;color:var(--mist-dim);text-align:center}

.wasps-copy .sec-title{margin-bottom:.5em}
.swatches{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.swatch{display:flex;align-items:center;gap:11px;border:1px solid var(--line);padding:10px 15px}
.swatch i{width:20px;height:20px;flex:0 0 auto;display:block}
.swatch span{font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}

/* --------------------------------------------------------------------------
   Timeline
   -------------------------------------------------------------------------- */
.tl{position:relative;margin-top:clamp(16px,3vw,32px)}
.tl::before{
  content:"";position:absolute;top:0;bottom:0;
  left:var(--rail,9px);width:1px;background:var(--line);
}
/* The amber line fills as you scroll past it. */
.tl-progress{
  position:absolute;top:0;left:var(--rail,9px);width:1px;
  background:linear-gradient(180deg,var(--amber),var(--amber-lo));
  height:var(--tl-fill,0%);
  transition:height .12s linear;
}
.tl-item{position:relative;padding:0 0 clamp(30px,3.8vw,48px) 42px}
.tl-item::after{content:"";position:absolute;left:42px;right:0;bottom:clamp(15px,1.9vw,24px);height:1px;background:var(--line-2)}
.tl-item:last-child{padding-bottom:0}
.tl-item:last-child::after{display:none}
.tl-dot{
  position:absolute;left:calc(var(--rail,9px) - 5px);top:9px;
  width:11px;height:11px;background:var(--ink);border:2px solid var(--amber-line);
  border-radius:50%;transition:background-color .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease);
  transition-delay:var(--d,0ms);
}
.tl-item.is-in .tl-dot{background:var(--amber);border-color:var(--amber);transform:scale(1.15)}
.tl-year{
  font-family:var(--display);
  font-size:clamp(1.9rem,4.2vw,2.9rem);line-height:.9;
  color:transparent;-webkit-text-stroke:1.5px var(--amber);
  margin-bottom:10px;letter-spacing:.01em;
  transition:color .6s var(--ease);transition-delay:var(--d,0ms);
}
.tl-item.is-in .tl-year{color:rgba(255,180,0,.12)}
.tl-title{font-size:clamp(1.15rem,2.1vw,1.55rem);line-height:1.04;margin-bottom:11px}
.tl-body{max-width:74ch;font-size:.97rem;color:var(--mist);margin:0}
.tl-body em{color:var(--white);font-style:italic}

@media (min-width:860px){
  .tl{--rail:190px}
  .tl-item{padding-left:238px;min-height:88px}
  .tl-item::after{left:238px}
  .tl-year{position:absolute;left:0;top:-6px;width:170px;text-align:right;margin:0;font-size:clamp(2.4rem,3.6vw,3.4rem)}
  .tl-dot{top:16px}
}

/* --------------------------------------------------------------------------
   Archive plates
   -------------------------------------------------------------------------- */
/* align-items:start so a card with a long name list does not stretch every
   other card in its row to match. Ragged rows, no hollow cards. */
.plates{display:grid;gap:clamp(12px,1.8vw,18px);grid-template-columns:repeat(auto-fill,minmax(270px,1fr));align-items:start}
.plate{
  position:relative;display:flex;flex-direction:column;
  background:var(--ink-2);border:1px solid var(--line);
  text-decoration:none;overflow:hidden;
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.plate:hover{border-color:var(--amber-line);transform:translateY(-4px)}

/* Index cards (the caption survives, the photograph does not) keep a plate. */
.plate-visual{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:var(--ink-3);display:grid;place-items:center;
}
/* A real photograph is shown whole. These are rows of faces, and cropping one
   to a tidy rectangle takes somebody's head off. */
.plate-visual.has-photo{
  aspect-ratio:auto;display:block;width:100%;padding:0;border:0;
  background:var(--ink-3);cursor:zoom-in;
}
.plate-visual img{
  width:100%;height:auto;display:block;
  filter:sepia(.18) grayscale(.28) contrast(1.04);
  transition:transform .8s var(--ease),filter .5s;
}
.plate-visual:not(.has-photo) img.plate-ghost{width:26%;max-width:78px;height:auto}
.plate:hover .plate-visual img{transform:scale(1.03);filter:none}
/* Each plate gets its own stripe angle so the grid never looks tiled. */
.plate-visual:not(.has-photo)::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(var(--ang,116deg),rgba(255,180,0,.09) 0 22px,transparent 22px 56px);
}
.plate-visual:not(.has-photo)::after{content:"";position:absolute;inset:0;box-shadow:inset 0 -60px 60px -40px rgba(0,0,0,.8)}
.plate-ghost{position:relative;opacity:.34;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.plate:hover .plate-ghost{opacity:.5;transform:scale(1.06)}
.plate-stamp{
  position:absolute;left:14px;top:14px;z-index:2;
  background:var(--amber);color:var(--ink);
  padding:6px 11px;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 4px 14px rgba(0,0,0,.45);
}
/* Marks a stand-in photograph so nobody reads it as the real record. */
.plate-body{padding:20px clamp(16px,2vw,22px) 22px;display:flex;flex-direction:column;flex:1;text-align:left}
.plate-title{font-size:1.08rem;line-height:1.08;margin-bottom:10px}
.plate-note{font-size:.85rem;color:var(--mist-dim);margin:0 0 18px;flex:1}
/* A full team's names makes a card enormous, and one long caption stretches
   its whole row. Clamp every card: the names stay in the markup — which is
   what search engines, and anybody looking for a grandfather, actually read —
   and the full list is in the lightbox, or on the Society's page for the four
   cards whose photograph is missing. */
.plate-note{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;
  overflow:hidden;
}
.plate-link{
  font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);display:inline-flex;gap:.5em;align-items:center;
  align-self:flex-start;text-decoration:none;padding-block:9px;
}
.plate-link::after{content:"↗";transition:transform .3s var(--ease)}
.plate:hover .plate-link::after{transform:translate(3px,-3px)}

.credit{
  margin-top:clamp(30px,4vw,48px);padding:clamp(22px,3vw,32px);
  border:1px solid var(--line);background:var(--ink-2);
}
.credit h4{font-size:.95rem;margin-bottom:12px;color:var(--amber)}
.credit p{font-size:.88rem;color:var(--mist-dim);max-width:76ch}
.credit-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px}
.credit-links a{display:inline-block;padding-block:8px;font-size:.8rem;color:var(--white);text-decoration:none;border-bottom:1px solid var(--amber-line);padding-bottom:2px;transition:color .25s,border-color .25s}
.credit-links a:hover{color:var(--amber);border-color:var(--amber)}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */
.gal-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.gal-filter{
  padding:9px 17px;border:1px solid var(--line);
  font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mist-dim);
  transition:color .25s,border-color .25s,background-color .25s;
}
.gal-filter:hover{color:var(--white);border-color:var(--amber-line)}
.gal-filter[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:var(--ink)}

.gal{columns:3;column-gap:12px}
@media (max-width:900px){.gal{columns:2}}
@media (max-width:540px){.gal{columns:1}}
.gal-item{break-inside:avoid;margin-bottom:12px;display:block;width:100%;position:relative;overflow:hidden;background:var(--ink-2);border:1px solid var(--line);padding:0}
.gal-item img{width:100%;height:auto;display:block;transition:transform .7s var(--ease)}
.gal-item:hover img{transform:scale(1.04)}
.gal-item figcaption{
  position:absolute;inset:auto 0 0;padding:16px;
  background:linear-gradient(0deg,rgba(6,6,7,.92),transparent);
  font-size:.78rem;color:var(--white);text-align:left;
  transform:translateY(100%);transition:transform .4s var(--ease);
}
.gal-item:hover figcaption,.gal-item:focus-visible figcaption{transform:none}
.gal-cat{display:block;font-size:.58rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:4px}

/* Lightbox */
.lb{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,56px);
  background:rgba(4,4,5,.95);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s var(--ease);
}
/* display:flex above beats the UA [hidden] rule, so restate it. Hiding with
   the attribute rather than visibility means focus can move in immediately. */
.lb[hidden]{display:none}
.lb.is-open{opacity:1}
.lb-fig{margin:0;max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;gap:14px}
.lb-fig img{max-width:100%;max-height:70vh;width:auto;object-fit:contain;margin-inline:auto;border:1px solid var(--line)}
.lb-cap{font-size:.9rem;color:var(--mist);text-align:center;max-width:78ch;margin-inline:auto}
.lb-date{color:var(--amber);font-family:var(--display);font-weight:400;font-size:1.05rem;letter-spacing:.02em;margin-right:.4em}
.lb-note{display:block;margin-top:8px;font-size:.82rem;color:var(--mist-dim);line-height:1.6}
.lb-source{
  display:inline-block;margin-top:12px;padding-block:6px;
  font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);text-decoration:none;border-bottom:1px solid var(--amber-line);
}
.lb-source:hover{border-color:var(--amber)}
.lb-btn{
  position:absolute;width:48px;height:48px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--white);font-size:1.3rem;
  background:rgba(10,10,11,.7);transition:border-color .25s,color .25s;
}
.lb-btn:hover{border-color:var(--amber);color:var(--amber)}
.lb-close{top:clamp(14px,3vw,26px);right:clamp(14px,3vw,26px)}
.lb-prev{left:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%)}
.lb-next{right:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%)}

/* --------------------------------------------------------------------------
   Juniors
   -------------------------------------------------------------------------- */
.jr-grid{display:grid;gap:clamp(26px,4vw,56px);grid-template-columns:1fr;align-items:start}
@media (min-width:940px){.jr-grid{grid-template-columns:1fr 1fr}}
.ages{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.age{
  border:1px solid var(--amber-line);color:var(--white);
  padding:11px 17px;font-family:var(--display);font-size:1rem;letter-spacing:.03em;
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
.age:hover{background:var(--amber);color:var(--ink)}
.jr-facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:26px}
.jr-fact{background:var(--ink);padding:20px clamp(18px,2.4vw,26px);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline}
.jr-fact dt{font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);min-width:104px}
.jr-fact dd{margin:0;font-size:.95rem;color:var(--mist)}

/* --------------------------------------------------------------------------
   Find the Wasps
   -------------------------------------------------------------------------- */
.find-grid{display:grid;gap:clamp(26px,3.4vw,48px);grid-template-columns:1fr}
@media (min-width:940px){.find-grid{grid-template-columns:.85fr 1.15fr}}
.find-card{padding:clamp(26px,3.4vw,40px);background:var(--ink-2);border:1px solid var(--line);position:relative;overflow:hidden}
.find-card::before{content:"";position:absolute;inset:0;background:var(--hoops);opacity:.8}
.find-card>*{position:relative}
.addr{font-family:var(--display);font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.34;color:var(--white);margin-bottom:22px;text-transform:uppercase}
.contact-rows{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line);margin-bottom:24px}
.contact-row{background:var(--ink-2);padding:15px 0;display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:baseline}
.contact-row dt{font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.contact-row dd{margin:0;font-size:.98rem;color:var(--white)}
.contact-row a{display:inline-block;padding-block:6px;text-decoration:none;border-bottom:1px solid var(--amber-line);transition:color .25s}
.contact-row a:hover{color:var(--amber)}
.find-actions{display:flex;flex-wrap:wrap;gap:10px}

.map-frame{
  position:relative;min-height:340px;height:100%;
  border:1px solid var(--line);overflow:hidden;background:var(--ink-2);
}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) invert(.92) contrast(.86)}
.venue-shot{position:absolute;inset:0;margin:0;overflow:hidden}
.venue-shot img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.venue-shot figcaption{
  position:absolute;inset:auto 0 0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(18px,2.4vw,26px);
  background:linear-gradient(0deg,rgba(6,6,7,.94) 12%,rgba(6,6,7,.72) 55%,transparent);
}
.venue-shot figcaption p{margin:0;font-size:.9rem;color:var(--white);max-width:34ch}

/* --------------------------------------------------------------------------
   Shop / partners / accreditation
   -------------------------------------------------------------------------- */
.shop-grid{display:grid;gap:clamp(26px,3.4vw,48px);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.shop-grid{grid-template-columns:.9fr 1.1fr}}
.shop-list{display:grid;gap:12px;align-content:start}
.shop-item{
  position:relative;overflow:hidden;
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  padding:clamp(24px,3vw,34px);background:var(--ink-2);border:1px solid var(--line);
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.shop-item::before{content:"";position:absolute;inset:0;background:var(--hoops);opacity:.8}
.shop-item>*{position:relative}
.shop-item:hover{background:var(--ink-3)}
.shop-item:hover{border-color:var(--amber-line)}
.shop-name{font-size:1.25rem;margin-bottom:5px}
.shop-blurb{font-size:.86rem;color:var(--mist-dim);margin:0}

/* A second group of partners needs air above its heading. */
.partners + .fx-group{margin-top:clamp(28px,3.4vw,44px)}
/* Flex rather than grid: a group with one partner in it (the shirt sponsor)
   would otherwise leave the rest of the grid row as a dead panel. */
.partners{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line)}
/* Sponsor logos arrive with their own backgrounds baked in — some white,
   some black, one a blue gradient. There is no filter that flatters all of
   them, and greyscaling would turn a Welsh dragon and a set of rainbow pipes
   into grey mush. So the board is light and every logo is shown in its own
   colours, as its owner drew it. */
.partner{
  flex:1 1 190px;background:#fff;min-height:152px;
  display:grid;place-items:center;padding:18px 16px;text-align:center;text-decoration:none;
  transition:transform .3s var(--ease);
}
.partner img{max-height:94px;width:auto;max-width:100%;object-fit:contain}
/* A partner with no logo file carries its name instead, so it is set at a
   size that holds its own against the artwork beside it. */
.partner span{
  font-family:var(--display);font-size:clamp(1.3rem,2.4vw,2rem);
  line-height:1;letter-spacing:.01em;color:var(--ink);transition:color .3s;
}
/* Lift rather than tint: a colour change would fight the logo underneath. */
.partner[href]:hover{transform:translateY(-3px)}
.partner[href]:hover span{color:#9a6a00}
.partner-name{background:var(--amber)}
.partner[href]:focus-visible{outline:3px solid var(--amber);outline-offset:-3px}
/* One logo per row on a phone would make the board scroll for pages, so the
   tiles halve. Two across stays legible; three does not. */
@media (max-width:640px){
  .partner{flex:1 1 42%;min-height:124px;padding:12px 10px}
  .partner img{max-height:68px}
}

.accred{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,3vw,40px);
  padding:clamp(26px,3.4vw,40px);border:1px solid var(--amber-line);background:var(--ink-2);
  position:relative;overflow:hidden;
}
.accred::before{content:"";position:absolute;inset:0;background:var(--hoops);opacity:.8}
.accred>*{position:relative}
.accred-badge{
  width:108px;height:108px;flex:0 0 auto;
  display:grid;place-content:center;justify-items:center;gap:4px;text-align:center;
  background:var(--amber);color:var(--ink);
  box-shadow:0 12px 34px rgba(255,180,0,.16);
}
.accred-badge img{max-width:100%;height:auto}
.accred-level{font-family:var(--display);font-size:1.75rem;line-height:1;text-transform:uppercase}
.accred-word{font-size:.5rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.accred-copy h3{font-size:clamp(1.2rem,2.2vw,1.7rem);margin-bottom:10px}
.accred-copy p{font-size:.92rem;color:var(--mist-dim);max-width:60ch;margin:0}

/* --------------------------------------------------------------------------
   Follow / footer
   -------------------------------------------------------------------------- */
.follow{position:relative;overflow:hidden;background:var(--amber);color:var(--ink);padding-block:clamp(56px,7vw,96px)}
.follow::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(116deg,rgba(10,10,11,.09) 0 30px,transparent 30px 74px)}
.follow>*{position:relative}
.follow-inner{display:flex;flex-wrap:wrap;gap:clamp(22px,3vw,44px);align-items:center;justify-content:space-between}
.follow h2{color:var(--ink);font-size:clamp(2rem,5.6vw,4rem);line-height:.92;margin-bottom:10px}
.follow p{color:rgba(10,10,11,.78);font-weight:700;font-size:1.05rem;letter-spacing:.01em;margin:0;max-width:44ch}
.follow .btn{--btn-fg:var(--ink);--btn-bd:rgba(10,10,11,.32)}
.follow .btn::before{background:var(--ink)}
.follow .btn:hover{color:var(--amber);border-color:var(--ink)}

.site-foot{background:#060607;border-top:1px solid var(--line);padding-block:clamp(52px,6vw,80px) 0}
.foot-top{display:grid;gap:clamp(30px,4vw,56px);grid-template-columns:1fr;margin-bottom:clamp(38px,5vw,60px)}
@media (min-width:820px){.foot-top{grid-template-columns:1.2fr .8fr .8fr}}
.foot-brand{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.foot-brand img{height:56px;width:auto}
.foot-name{font-family:var(--display);font-size:1.45rem;color:var(--white);line-height:1;text-transform:uppercase}
.foot-est{font-size:.58rem;font-weight:700;letter-spacing:.24em;color:var(--amber);text-transform:uppercase;margin-top:6px;display:block}
.foot-blurb{font-size:.9rem;color:var(--mist-dim);max-width:40ch}
.foot-h{font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:18px;font-family:var(--body)}
.foot-list{display:grid;gap:11px}
.foot-list a,.foot-list span{font-size:.92rem;color:var(--mist);text-decoration:none;transition:color .25s;display:inline-block;padding-block:5px}
.foot-list a:hover{color:var(--amber)}
.jr-h{font-size:1.05rem;color:var(--amber);margin-bottom:14px}

.foot-legal{
  display:flex;flex-wrap:wrap;gap:6px 26px;
  border-top:1px solid var(--line);padding-block:20px 4px;
}
.foot-legal a{
  display:inline-block;padding-block:6px;
  font-size:.78rem;font-weight:700;color:var(--mist);text-decoration:none;
  transition:color .25s;
}
.foot-legal a:hover{color:var(--amber)}

.foot-bar{
  border-top:1px solid var(--line-2);padding-block:20px 26px;
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between;
  font-size:.76rem;color:var(--mist-dim);
}
.foot-bar a{color:var(--mist-dim);text-decoration:none;display:inline-block;padding-block:4px}
.foot-bar a:hover{color:var(--amber)}

/* Grain, kept very light so it costs nothing to composite. */
.grain{
  position:fixed;inset:0;z-index:110;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Information pages (privacy, accessibility) and the 404.
   Same identity, quieter: a single readable column, no decoration competing
   with the text.
   ========================================================================== */
.doc-head{
  position:sticky;top:0;z-index:90;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding-block:16px;
  padding-inline:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)));
  background:rgba(10,10,11,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.doc-head .brand{margin-right:auto}

.doc{padding-block:clamp(56px,8vw,96px) clamp(56px,8vw,104px)}
.doc-inner{max-width:72ch;margin-inline:auto}
.doc h1{font-size:clamp(2.1rem,5.6vw,3.8rem);line-height:.96;margin-bottom:18px}
.doc-updated{
  font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mist-dim);margin-bottom:clamp(28px,4vw,44px);
}
.doc-lede{font-size:clamp(1rem,.5vw + .88rem,1.12rem);color:var(--white);margin-bottom:1.4em}
.doc h2{
  font-size:clamp(1.1rem,2vw,1.42rem);
  margin:clamp(34px,4.4vw,54px) 0 14px;
  padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--line);
}
.doc h2:first-of-type{border-top:0;padding-top:0}
.doc p,.doc li{color:var(--mist)}
.doc ul{margin:0 0 1.1em;padding-left:1.15em;list-style:disc}
.doc li{margin-bottom:.5em}
.doc li::marker{color:var(--amber)}
.doc a:not(.btn){color:var(--amber);text-decoration:none;border-bottom:1px solid var(--amber-line);padding-bottom:1px}
.doc a:not(.btn):hover{border-color:var(--amber)}
.doc dl{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin:0 0 1.4em}
.doc dt{background:var(--ink-2);padding:14px 18px 4px;font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.doc dd{background:var(--ink-2);padding:0 18px 14px;margin:0;color:var(--white)}
.doc-note{
  margin-top:clamp(34px,4vw,50px);padding:clamp(20px,2.6vw,28px);
  border:1px solid var(--amber-line);background:var(--ink-2);
}
.doc-note p{margin:0;font-size:.92rem}

/* 404 */
.oops{
  position:relative;min-height:100svh;display:grid;place-items:center;
  padding:clamp(100px,14vh,150px) var(--gutter) clamp(50px,8vw,90px);
  text-align:center;overflow:hidden;
}
.oops::before{content:"";position:absolute;inset:0;background:var(--hoops);opacity:.8}
.oops::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(90% 60% at 50% 110%,rgba(255,180,0,.16),transparent 62%);
}
.oops-inner{position:relative;max-width:56ch}
/* Scoped past `.oops p`, which is more specific than a lone class and would
   otherwise style these numerals as body copy. */
.oops .oops-code{
  font-family:var(--display);font-size:clamp(5.5rem,22vw,15rem);line-height:.82;
  color:transparent;-webkit-text-stroke:2px var(--amber);letter-spacing:.02em;
  margin-bottom:clamp(14px,2.4vw,26px);
}
.oops h1{font-size:clamp(1.6rem,4.4vw,3rem);line-height:1;margin-bottom:18px}
.oops p{color:var(--mist);font-size:clamp(1rem,.5vw + .86rem,1.1rem);margin-bottom:clamp(26px,3.4vw,38px)}
.oops-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.oops-crest{width:clamp(78px,10vw,120px);height:auto;margin:0 auto clamp(20px,3vw,32px)}