/* Magazine layout for the homepage and news hub */
.mag{--ball:#dfff62;--grass:#1c6b3c;--clay:#b4532f;--navy:#0f2a26;--card-r:18px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mag h1,.mag h2,.mag h3{font-family:Manrope,system-ui,sans-serif}
.mag .stretch::after{content:"";position:absolute;inset:0;z-index:1}
.mag .stretch:focus-visible{outline:none}
.mag article:has(.stretch:focus-visible){outline:3px solid #bd4925;outline-offset:3px}
.ico{width:1em;height:1em;flex:none}
.kicker{margin:0;font:800 .74rem/1 Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}

/* masthead + freshness */
.masthead{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0 16px;flex-wrap:wrap}
.fresh{margin:0;display:inline-flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;color:var(--muted)}
.fresh time{color:var(--ink);font-weight:800}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--grass);box-shadow:0 0 0 4px rgba(28,107,60,.15)}

/* shared meta row */
.meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;font-size:.8rem}
.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;border-radius:999px;background:var(--accent,var(--grass));color:#fff;font:800 .7rem/1 Manrope,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.tag .ico{font-size:1rem}
.meta time{color:var(--muted);font-weight:600}
.read{display:inline-flex;align-items:center;gap:8px;font:800 .92rem Manrope,sans-serif;color:var(--ink)}
.read .ico{transition:transform .2s ease}
article:hover .read .ico{transform:translateX(4px)}

/* court + ball visuals */
.court{position:absolute;inset:-4%;width:108%;height:108%;color:rgba(255,255,255,.28)}
.ball{position:absolute;width:74px;height:74px;right:9%;top:12%;filter:drop-shadow(0 10px 18px rgba(0,0,0,.25))}
.callout{position:relative;z-index:0;line-height:.8}
.callout b{display:block;font:800 clamp(5.5rem,13vw,11.5rem)/.8 Manrope,sans-serif;letter-spacing:-.06em;color:var(--ball);text-shadow:0 6px 0 rgba(0,0,0,.18)}
.callout-label{position:relative;margin:14px 0 0;font:800 .78rem/1.3 Manrope,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.sets{display:flex;gap:8px}
.sets span{display:grid;place-items:center;min-width:3.1em;padding:.5em .3em;border-radius:10px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.22);font:800 1.5rem/1 Manrope,sans-serif;color:#fff;letter-spacing:-.02em}
.sets span:nth-child(odd){background:var(--ball);color:var(--ink);border-color:transparent}

/* lead story */
.lead{position:relative;display:grid;grid-template-columns:1.05fr .95fr;min-height:430px;border-radius:26px;overflow:hidden;background:var(--navy);color:#fff;box-shadow:0 24px 60px rgba(16,42,38,.18)}
.lead-copy{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:18px;padding:clamp(26px,4.2vw,54px)}
.lead .meta time{color:#b9cdc6}
.lead-title{margin:0;font-size:clamp(2.1rem,4.3vw,3.7rem);line-height:1.02;letter-spacing:-.045em;font-weight:800}
.lead .standfirst{margin:0;font-size:1.12rem;line-height:1.5;color:#d3e0db;max-width:34em}
.lead .read{color:var(--ball)}
.lead-visual{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 70%,#000) 100%);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px 24px}
.lead:hover .lead-title a{text-decoration:underline;text-decoration-color:var(--ball);text-decoration-thickness:3px;text-underline-offset:6px}

/* magazine grid */
.mag-grid{display:grid;gap:18px;margin-top:18px}
.mag-grid--home{grid-template-columns:1.4fr 1fr 1fr;grid-template-areas:"big s1 s2" "big next next"}
.mag-grid--home .card--big{grid-area:big}.mag-grid--home .card--small:nth-of-type(2){grid-area:s1}.mag-grid--home .card--small:nth-of-type(3){grid-area:s2}.mag-grid--home .next-up{grid-area:next}
.mag-grid--hub{grid-template-columns:repeat(3,1fr)}
.mag-grid--hub .card--big,.mag-grid--hub .next-up{grid-column:span 2}
.card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--card-r);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(16,42,38,.12);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.card-visual{position:relative;overflow:hidden;background:var(--accent);display:flex;flex-direction:column;justify-content:center;padding:22px 24px;min-height:150px}
.court--full{inset:8% 6%;width:88%;height:84%;color:rgba(255,255,255,.3)}
.card-visual .court{color:rgba(255,255,255,.2)}
.card--small .callout b{font-size:3.6rem;text-shadow:none}
.card--small .sets span{font-size:1rem}
.card--big .card-visual{min-height:260px;flex:1}
.card--big .callout b{font-size:clamp(4.5rem,8vw,7rem)}
.card--big .sets span{font-size:clamp(1.3rem,2.4vw,2rem);border-radius:12px}
.card-visual .callout-label{margin-top:10px;font-size:.7rem}
.card-icon{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:1.3rem}
.card-copy{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px}
.card h3{margin:0;font-size:1.28rem;line-height:1.18;letter-spacing:-.03em}
.card--big h3{font-size:clamp(1.5rem,2.4vw,2rem)}
.card-copy p{margin:0;color:var(--muted);font-size:.95rem}
.card:hover h3 a{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}

/* next up fixture */
.next-up{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:var(--card-r);background:var(--ball);color:var(--ink);position:relative;overflow:hidden}
.next-up::after{content:"";position:absolute;right:-60px;bottom:-60px;width:180px;height:180px;border-radius:50%;border:2px solid rgba(16,42,38,.14);box-shadow:0 0 0 22px rgba(16,42,38,.05)}
.next-up .tag{align-self:flex-start;background:var(--ink)}
.fixture{margin:6px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font:800 clamp(2rem,3.2vw,2.6rem)/1 Manrope,sans-serif;letter-spacing:-.05em}
.fixture span{font-size:.5em;font-weight:700;color:var(--muted)}
.next-up p{margin:0}.when{font-weight:800}.where{color:#3b504a;font-size:.93rem}
.next-up .text-link{margin-top:auto;position:relative;z-index:1;text-decoration-color:var(--ink)}
.more-link{margin:22px 0 0;text-align:right}

/* sections below */
.front{padding-bottom:26px}
.block{padding:42px 0 8px}
.block-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:18px;border-top:3px solid var(--ink);padding-top:14px}
.block-head h2{margin:0;font-size:clamp(1.55rem,2.6vw,2.1rem);letter-spacing:-.04em;line-height:1.1}
.block-head p{margin:0;color:var(--muted)}
.start-row,.guide-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.start-card2,.guide-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px;background:#fff;border:1px solid var(--line);border-radius:var(--card-r);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.start-card2:hover,.guide-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(16,42,38,.1);border-color:#b8c7c0}
.start-card2 .num{position:absolute;top:18px;right:22px;font:800 2.6rem/1 Manrope,sans-serif;letter-spacing:-.05em;color:#e7ece5}
.start-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--ink);color:var(--ball);font-size:1.5rem}
.start-card2 h3,.guide-card h3{margin:6px 0 0;font-size:1.3rem;letter-spacing:-.03em;line-height:1.2}
.start-card2 p,.guide-card p{margin:0;color:var(--muted);font-size:.95rem}
.start-card2 .read,.guide-card .read{margin-top:auto;padding-top:6px}
.brand-pills{display:flex;flex-wrap:wrap;gap:10px}
.brand-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:999px;background:#fff;border:1px solid var(--line);font:700 .95rem Manrope,sans-serif;transition:border-color .2s,background .2s,transform .2s}
.brand-pill span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#edf1e9;color:var(--green);font-weight:800;font-size:.85rem;transition:background .2s,color .2s}
.brand-pill:hover{border-color:var(--green);transform:translateY(-2px)}
.brand-pill:hover span{background:var(--ball);color:var(--ink)}
.guide-card{border-top:5px solid var(--accent)}
.guide-card small{font:800 .72rem/1 Manrope,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.guide-ico{position:absolute;top:20px;right:20px;color:var(--accent);font-size:1.6rem;opacity:.85}
.how-note{display:flex;gap:14px;align-items:flex-start;margin-top:40px;margin-bottom:10px;padding:16px 20px;border-radius:14px;background:#e9eee4;color:#3b504a;font-size:.92rem}
.how-note>.ico{font-size:1.4rem;color:var(--green);margin-top:1px}
.how-note p{margin:0}
.how-note .text-link{margin:0}

/* news hub header + chips */
.hub-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:40px 0 18px;flex-wrap:wrap}
.hub-head h1{margin:10px 0 8px;font-size:clamp(2.6rem,5vw,4.2rem);line-height:1;letter-spacing:-.05em}
.hub-sub{margin:0;color:var(--muted);font-size:1.08rem;max-width:40em}
.chips-bar{padding-bottom:18px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font:700 .9rem Manrope,sans-serif;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.chip-btn:hover{border-color:var(--green)}
.chip-btn .count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#edf1e9;font-size:.75rem}
.chip-btn[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip-btn[aria-pressed=true] .count{background:var(--ball);color:var(--ink)}
.chip-btn[hidden],[data-story][hidden],.next-up[hidden]{display:none!important}
.empty{padding:30px;text-align:center;background:#fff;border:1px dashed var(--line);border-radius:var(--card-r);color:var(--muted)}
.linkish{background:none;border:0;padding:0;min-height:0;font-weight:800;text-decoration:underline;color:var(--ink);cursor:pointer}
/* when filtering, grid reflows simply */
.is-filtered .mag-grid--hub{grid-template-columns:repeat(3,1fr)}
.is-filtered .mag-grid--hub .card--big,.is-filtered .mag-grid--hub .next-up{grid-column:auto}
.is-filtered .mag-grid--hub .card--big .card-visual{min-height:150px;flex:none}

@media (max-width:980px){
  .lead{grid-template-columns:1fr}
  .lead-visual{order:-1;min-height:260px}
  .mag-grid--home{grid-template-columns:1fr 1fr;grid-template-areas:"big big" "s1 s2" "next next"}
  .mag-grid--hub,.is-filtered .mag-grid--hub{grid-template-columns:1fr 1fr}
  .start-row,.guide-row{grid-template-columns:1fr 1fr}
  .start-row>:last-child,.guide-row>:last-child{grid-column:span 2}
}
@media (max-width:650px){
  .masthead{padding:16px 0 12px;gap:6px}
  .lead{border-radius:20px;min-height:0}
  .lead-visual{min-height:210px;padding:28px 18px}
  .lead-visual .ball{width:44px;height:44px;right:5%;top:7%}
  .lead-copy{padding:22px 20px 24px;gap:14px}
  .lead-title{font-size:clamp(1.8rem,8vw,2.3rem);line-height:1.08}
  .lead .standfirst{font-size:1rem}
  .callout b{font-size:6.5rem}
  .mag-grid{gap:14px;margin-top:14px}
  .mag-grid--home,.mag-grid--hub,.is-filtered .mag-grid--hub{grid-template-columns:1fr;grid-template-areas:none}
  .mag-grid--home>*{grid-area:auto!important}
  .mag-grid--hub .card--big,.mag-grid--hub .next-up{grid-column:auto}
  .card--big .card-visual{min-height:190px}
  .card--small .card-visual{min-height:120px}
  .sets{gap:6px}.card--big .sets span{font-size:1.2rem;min-width:2.8em}
  .start-row,.guide-row{grid-template-columns:1fr}
  .start-row>:last-child,.guide-row>:last-child{grid-column:auto}
  .block{padding-top:32px}
  .block-head{flex-direction:column;gap:4px}
  .hub-head{padding:26px 0 12px}
  .chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip-btn{flex:none}
  .more-link{text-align:left}
  .brand-pill{padding:6px 14px 6px 6px;font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){.card,.start-card2,.guide-card,.brand-pill,.read .ico{transition:none}.card:hover,.start-card2:hover,.guide-card:hover{transform:none}}

/* tagline hero (homepage) */
.tagline-hero{position:relative;overflow:hidden;margin-top:22px;padding:clamp(30px,4.6vw,56px) clamp(24px,4.8vw,60px);border-radius:26px;background:var(--green);color:#fff;box-shadow:0 24px 60px rgba(16,42,38,.14)}
.tagline-hero::before{content:"";position:absolute;inset:16px;border:2px solid rgba(255,255,255,.14);border-radius:4px;pointer-events:none}
.tagline-hero::after{content:"";position:absolute;top:16px;bottom:16px;right:16px;border-left:2px solid rgba(255,255,255,.14);background:linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)) left center/100% 2px no-repeat;width:30%;pointer-events:none}
.tagline-ball{position:absolute;right:calc(15% - 22px);top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;background:var(--acid);box-shadow:0 10px 22px rgba(0,0,0,.28)}
.tagline-kicker{position:relative;color:var(--acid)}
.tagline{position:relative;margin:14px 0 0;max-width:14ch;font:800 clamp(2.4rem,5.6vw,4.8rem)/.98 Manrope,system-ui,sans-serif;letter-spacing:-.05em;color:#fff}
.tagline em{font-style:normal;color:var(--acid)}
.tagline-sub{position:relative;margin:18px 0 0;max-width:54ch;font-size:clamp(1rem,1.45vw,1.16rem);line-height:1.5;color:#cfe0d9}
.footer-tagline{color:#fff}
@media (max-width:980px){.tagline-hero::after{width:24%}.tagline-ball{right:calc(12% - 18px);width:36px;height:36px;margin-top:-18px}.tagline-sub{max-width:44ch}}
@media (max-width:650px){
  .tagline-hero{margin-top:14px;border-radius:20px;padding:30px 24px 28px}
  .tagline-hero::before{inset:10px}
  .tagline-hero::after{display:none}
  .tagline-ball{top:22px;right:22px;margin-top:0;width:26px;height:26px}
  .tagline-kicker{padding-right:36px}
  .tagline{font-size:clamp(2.1rem,10.5vw,2.7rem);line-height:1.02;max-width:none}
  .tagline-sub{font-size:1rem;max-width:none}
}