/* =====================================================================
   SINGLE ATHLETE BIOGRAPHY (single-spolead_athlete.php) — reuses the site's existing design
   tokens (base.css :root), the blog Single Post's reading-column treatment for pull quotes,
   inline captions and the share row (single-post.css: .post-quote / .post-inline-media /
   .lede / .post-share-row / .post-crumbs), and the Beyond the Game directory's own card
   component (beyond-the-game.css: .btg-grid / .btg-card) for "More athlete stories" — so this
   page only adds the pieces those don't already cover: the identity header, the two-column
   biography+panel layout, the achievements timeline and the gallery.
   ===================================================================== */

/* ---- Identity header ---- */
.ath-head{max-width:900px;margin:clamp(24px,3vw,34px) auto 0}
.ath-kicker{display:inline-block;font:700 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--dark);text-decoration:none}
.ath-kicker:hover{color:var(--dark2)}
.ath-h1{margin:14px 0 0;font:800 clamp(2.1rem,1.5rem + 2.8vw,3.4rem)/1.08 var(--serif);letter-spacing:-.02em;color:var(--fg);text-wrap:balance}
.ath-subline{margin:14px 0 0;font:700 .92rem/1.3 var(--sans);letter-spacing:.02em;color:var(--dark);text-transform:uppercase}
.ath-standfirst{margin:14px 0 0;font:400 clamp(1.1rem,1rem + .5vw,1.35rem)/1.5 var(--serif);color:var(--fg2);max-width:62ch}
.ath-meta{margin-top:24px}
.ath-back-link{margin-left:auto;font:600 .86rem/1 var(--sans);color:var(--fg2);text-decoration:none}
.ath-back-link:hover{color:var(--dark)}

/* ---- Hero photograph ---- */
.ath-media-wrap{max-width:var(--max);margin:clamp(20px,3vw,32px) auto 0}
.ath-media{width:100%;aspect-ratio:16/9;border-radius:4px}
.ath-media img{object-position:top center}

/* ---- Two-column layout: biography + info panel ---- */
.ath-body-wrap{max-width:1180px;margin:clamp(32px,4.4vw,52px) auto 0}
.ath-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(32px,4.4vw,64px);align-items:start}
.ath-article{font:400 1.14rem/1.72 var(--serif);color:var(--fg);max-width:68ch}
.ath-article p{margin:0 0 26px}
.ath-article h2{font:800 clamp(1.4rem,1.2rem + 1vw,1.8rem)/1.24 var(--serif);letter-spacing:-.012em;color:var(--fg);margin:44px 0 18px}
.ath-article h3{font:700 1.15rem/1.3 var(--serif);color:var(--fg);margin:32px 0 14px}
.ath-article a{color:var(--dark);text-underline-offset:.14em}
.ath-article a:hover{color:var(--dark2)}
.ath-bio-empty{font:italic 400 1.05rem/1.5 var(--serif);color:var(--fg2)}

/* ---- Info panel ---- */
.ath-panel{position:sticky;top:calc(env(safe-area-inset-top,0px) + 90px);background:var(--bg2);border:1px solid var(--rule);border-radius:6px;padding:22px}
.ath-panel-h{margin:0 0 14px;font:700 .78rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--dark)}
.ath-panel-list{margin:0}
.ath-panel-row{display:flex;flex-direction:column;gap:2px;padding-block:10px;border-top:1px solid var(--rule)}
.ath-panel-row:first-child{border-top:0}
.ath-panel-row dt{font:600 .72rem/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--fg2)}
.ath-panel-row dd{margin:0;font:600 .96rem/1.3 var(--sans);color:var(--fg)}
.ath-panel-link{display:block;margin-top:16px;font:700 .88rem/1 var(--sans);color:var(--dark);text-decoration:none}
.ath-panel-link:hover{color:var(--dark2)}
.ath-panel-social{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--rule)}
.ath-panel-social a{font:600 .82rem/1 var(--sans);color:var(--fg2);text-decoration:none}
.ath-panel-social a:hover{color:var(--dark)}

/* ---- Career highlights timeline ---- */
.ath-narrow{max-width:900px}
.ath-timeline{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.ath-timeline-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:20px;padding-block:20px;border-bottom:1px solid var(--rule)}
.ath-timeline-year{font:700 1rem/1.3 var(--sans);color:var(--dark)}
.ath-timeline-title{margin:0;font:700 1.08rem/1.35 var(--serif);color:var(--fg)}
.ath-timeline-detail{margin:6px 0 0;font:400 .95rem/1.5 var(--sans);color:var(--fg2)}

/* ---- Gallery ---- */
.ath-gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.ath-gallery-item a{display:block}
.ath-gallery-item .media{aspect-ratio:4/3;border-radius:4px}
.ath-gallery-item .post-cap{margin-top:8px}

/* ---- Related athletes: 3-up variant of the directory grid ---- */
.ath-related-grid{grid-template-columns:repeat(3,1fr)}

/* ---- Tablet ---- */
@media (max-width:1180px){
  .ath-layout{grid-template-columns:1fr}
  .ath-panel{position:static;margin-top:8px}
  .ath-gallery-grid{grid-template-columns:repeat(3,1fr)}
}
/* ---- Mobile ---- */
@media (max-width:720px){
  .ath-h1{font-size:clamp(1.7rem,1.4rem + 3vw,2.2rem)}
  .ath-media{aspect-ratio:4/3}
  .ath-gallery-grid{grid-template-columns:repeat(2,1fr)}
  .ath-related-grid{grid-template-columns:repeat(2,1fr)}
  .ath-timeline-row{grid-template-columns:1fr;gap:4px}
  .ath-back-link{margin-left:0;width:100%}
}