/* Training Zone blog — shared styles */
:root{
  --bg:#0b0c0e; --panel:#101216; --panel-2:#111418; --line:#1e2126; --line-soft:#1a1d22;
  --fg:#f2f2f0; --fg-2:#d3d8de; --fg-3:#b6bdc5; --muted:#9ba3ad; --muted-2:#8d959f;
  --orange:#f25c19; --orange-hi:#ff7a3d;
  --cat-shooting:#f25c19; --cat-recruiting:#3ea8f5; --cat-strength:#ffd028;
  --cat-academy:#7ee081; --cat-facility:#c58cf7; --cat-spotlights:#ff5d8f; --cat-parent:#4ee0d0;
  --cond:"Barlow Condensed",Helvetica,Arial,sans-serif;
  --body:"Barlow",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font-family:var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--orange);text-decoration:none}
a:hover{color:var(--orange-hi)}
img{display:block;max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.cond{font-family:var(--cond);font-weight:800;text-transform:uppercase}
.mono{font-family:var(--mono);letter-spacing:.08em}

/* ticker */
.ticker{background:var(--orange);height:34px;display:flex;align-items:center;overflow:hidden}
.ticker__label{background:var(--bg);color:var(--orange);font-family:var(--cond);font-weight:800;font-size:14px;letter-spacing:.14em;padding:0 14px;height:34px;display:flex;align-items:center;flex-shrink:0}
.ticker__track{overflow:hidden;flex:1}
.ticker__run{display:flex;width:max-content;animation:tzTicker 42s linear infinite}
.ticker__item{display:flex;align-items:center;gap:10px;padding:0 22px;height:34px;font-size:13px;font-weight:600;color:#140b06;white-space:nowrap}
.ticker__item::before{content:"";width:5px;height:5px;background:#140b06;border-radius:50%;flex-shrink:0}
@keyframes tzTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__run{animation:none}}

/* header */
.site-head{border-bottom:1px solid var(--line);background:rgba(11,12,14,.96);backdrop-filter:blur(8px);position:sticky;top:0;z-index:20}
.site-head__in{display:flex;align-items:center;gap:28px;padding:14px 24px;max-width:1240px;margin:0 auto}
.logo{display:flex;align-items:center;gap:10px}
.logo__mark{width:32px;height:32px;background:var(--orange);color:var(--bg);display:flex;align-items:center;justify-content:center;font-family:var(--cond);font-weight:800;font-size:16px}
.logo__type{font-family:var(--cond);font-weight:800;font-size:19px;letter-spacing:.1em;color:var(--fg)}
.site-nav{display:flex;gap:22px;margin-left:auto;font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.09em}
.site-nav a{color:var(--muted)}
.site-nav a:hover,.site-nav a[aria-current]{color:var(--fg)}
.btn-cta{background:var(--orange);color:var(--bg);font-family:var(--cond);font-weight:800;font-size:14px;letter-spacing:.1em;padding:10px 16px}
.btn-cta:hover{background:var(--orange-hi);color:var(--bg)}
@media (max-width:900px){.site-nav{display:none}}

/* hero */
.hero{position:relative;min-height:440px;display:flex;align-items:flex-end;overflow:hidden;border-bottom:3px solid var(--orange)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:grayscale(70%) contrast(1.06)}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,12,14,.97) 6%,rgba(11,12,14,.7) 42%,rgba(11,12,14,.28) 78%,rgba(11,12,14,.15))}
.hero__in{position:relative;width:100%;max-width:1240px;margin:0 auto;padding:56px 24px 40px}
.hero h1{font-family:var(--cond);font-weight:800;font-size:clamp(44px,7vw,86px);line-height:.93;margin:0 0 18px;max-width:15ch;text-transform:uppercase}
.hero p{font-size:18px;line-height:1.5;color:#c3c9d0;max-width:56ch;margin:0;text-wrap:pretty}
.kicker{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.tag{font-family:var(--cond);font-weight:800;font-size:12px;letter-spacing:.11em;padding:4px 9px;color:var(--bg);background:var(--orange);text-transform:uppercase}
.kicker .mono{font-size:12px;color:var(--muted)}
@media (max-width:699px){.hero{display:none}}

/* category strip */
.cats{border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:66px;z-index:15}
.cats__in{max-width:1240px;margin:0 auto;padding:0 24px;display:flex;overflow-x:auto;scrollbar-width:none}
.cats__in::-webkit-scrollbar{display:none}
.cats a{padding:14px 16px;font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.09em;white-space:nowrap;color:var(--muted-2);border-bottom:3px solid transparent;text-transform:uppercase}
.cats a:hover{color:var(--fg)}
.cats a[aria-current]{color:var(--fg);border-bottom-color:var(--orange)}

/* featured + rail */
.lead{max-width:1240px;margin:0 auto;padding:44px 24px 8px;display:grid;grid-template-columns:1.55fr 1fr;gap:36px;align-items:start}
.feat__media{position:relative;aspect-ratio:16/9;background:#1a1a1a;overflow:hidden}
.feat__media img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.flag{position:absolute;top:0;left:0;background:var(--orange);color:var(--bg);font-family:var(--cond);font-weight:800;font-size:13px;letter-spacing:.12em;padding:6px 12px}
.meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 10px;font-family:var(--mono);font-size:11px;color:var(--muted-2)}
.feat h2{font-family:var(--cond);font-weight:800;font-size:clamp(30px,3.6vw,46px);line-height:1;margin:0 0 12px;text-transform:uppercase}
.feat h2 a{color:var(--fg)}
.feat h2 a:hover{color:var(--orange)}
.feat p{font-size:17px;line-height:1.55;color:var(--fg-3);margin:0;max-width:62ch;text-wrap:pretty}

.rail{border-left:1px solid var(--line);padding-left:28px}
.rail__head{font-family:var(--cond);font-weight:800;font-size:17px;letter-spacing:.12em;padding-bottom:14px;border-bottom:2px solid var(--orange);text-transform:uppercase}
.rail__item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.rail__rank{font-family:var(--cond);font-weight:800;font-size:30px;line-height:.9;width:30px;flex-shrink:0}
.rail__title{font-family:var(--cond);font-weight:700;font-size:19px;line-height:1.1;text-transform:uppercase;margin-bottom:5px;color:var(--fg-2)}
.rail__meta{font-family:var(--mono);font-size:10px;color:var(--muted-2)}
.promo{margin-top:24px;display:block;background:#141821;border:1px solid #262b34;padding:22px}
.promo h3{font-family:var(--cond);font-weight:800;font-size:24px;line-height:1;color:var(--fg);text-transform:uppercase;margin:0 0 8px}
.promo p{font-size:14px;line-height:1.5;color:var(--muted);margin:0 0 14px}
.promo span{font-family:var(--cond);font-weight:800;font-size:14px;letter-spacing:.1em;color:var(--orange)}

/* grid */
.section-head{display:flex;align-items:baseline;gap:14px;border-bottom:2px solid var(--line);padding-bottom:12px;margin-bottom:28px}
.section-head h2{font-family:var(--cond);font-weight:800;font-size:26px;letter-spacing:.1em;margin:0;text-transform:uppercase}
.section-head .mono{font-size:11px;color:var(--muted-2)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:32px 28px}
.card__media{position:relative;aspect-ratio:4/3;background:repeating-linear-gradient(115deg,#1b1f24 0 18px,#161a1e 18px 36px);display:flex;align-items:center;justify-content:center;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__slot{font-family:var(--mono);font-size:10px;color:#5b636d;text-align:center;padding:0 12px}
.card__bar{position:absolute;bottom:0;left:0;height:4px;width:100%}
.card h3{font-family:var(--cond);font-weight:700;font-size:24px;line-height:1.05;margin:0 0 8px;text-transform:uppercase;color:var(--fg)}
.card p{font-size:15px;line-height:1.5;color:var(--muted);margin:0;text-wrap:pretty}
.card--soon{opacity:.62}
.card--soon .card__media{background:repeating-linear-gradient(115deg,#15181c 0 18px,#111418 18px 36px)}
.soon{font-family:var(--cond);font-weight:800;font-size:11px;letter-spacing:.12em;padding:3px 8px;border:1px solid #3a4149;color:var(--muted-2)}

/* article */
.post-hero{position:relative;min-height:400px;display:flex;align-items:flex-end;overflow:hidden;border-bottom:3px solid var(--orange);background:#14171b}
.post-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(70%) contrast(1.06)}
.post-hero__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,12,14,.97) 6%,rgba(11,12,14,.72) 45%,rgba(11,12,14,.3))}
.post-hero__in{position:relative;width:100%;max-width:1240px;margin:0 auto;padding:60px 24px 40px}
.crumb{font-family:var(--mono);font-size:11px;color:var(--muted);display:flex;gap:10px;margin-bottom:18px}
.post-hero h1{font-family:var(--cond);font-weight:800;font-size:clamp(40px,6.4vw,78px);line-height:.94;margin:0 0 20px;max-width:20ch;text-transform:uppercase}
.byline{display:flex;flex-wrap:wrap;border-top:1px solid #2a2f36;padding-top:14px}
.byline div{padding-right:22px;margin-right:22px;border-right:1px solid #2a2f36}
.byline div:last-child{border-right:0}
.byline dt{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#7f8892;margin-bottom:4px}
.byline dd{margin:0;font-family:var(--cond);font-weight:700;font-size:17px;letter-spacing:.05em;text-transform:uppercase}

.post-body{max-width:1240px;margin:0 auto;padding:52px 24px 60px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start}
article{font-size:18px;line-height:1.68;color:var(--fg-2)}
article > p{margin:0 0 20px;text-wrap:pretty}
.lede{font-size:21px;line-height:1.55;color:var(--fg);font-weight:500}
article h2{font-family:var(--cond);font-weight:800;font-size:34px;line-height:1.05;text-transform:uppercase;margin:40px 0 14px;color:var(--fg)}
article ul{margin:0 0 20px;padding-left:22px}
article li{margin-bottom:8px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);margin:34px 0;border-top:3px solid var(--orange)}
.stats > div{background:var(--panel-2);padding:22px 20px}
.stats b{display:block;font-family:var(--cond);font-weight:800;font-size:44px;line-height:.9;color:var(--orange);margin-bottom:6px}
.stats strong{display:block;font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.09em;text-transform:uppercase;color:var(--fg);margin-bottom:6px}
.stats span{font-size:13px;line-height:1.45;color:var(--muted-2)}
.rows{display:flex;flex-direction:column;gap:1px;background:var(--line);margin:0 0 28px}
.rows > div{background:var(--panel-2);padding:16px 20px;display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}
.rows dt{font-family:var(--cond);font-weight:800;font-size:15px;letter-spacing:.1em;color:var(--orange);width:110px;flex-shrink:0;text-transform:uppercase}
.rows dd{margin:0;font-size:16px;line-height:1.5;color:#c3c9d0}
figure{margin:34px 0}
figcaption{font-family:var(--mono);font-size:11px;color:#7f8892;margin-top:10px}
blockquote{margin:34px 0;padding:0 0 0 24px;border-left:4px solid var(--orange)}
blockquote p{font-family:var(--cond);font-weight:700;font-size:28px;line-height:1.15;color:var(--fg);margin:0 0 10px}
blockquote cite{font-family:var(--mono);font-size:11px;color:var(--muted-2);font-style:normal}
.endcap{background:var(--orange);color:var(--bg);padding:32px;margin:40px 0 0;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.endcap h2{font-family:var(--cond);font-weight:800;font-size:34px;line-height:1;text-transform:uppercase;margin:0 0 6px;color:var(--bg)}
.endcap p{font-size:15px;font-weight:500;opacity:.85;margin:0}
.endcap a{background:var(--bg);color:var(--fg);font-family:var(--cond);font-weight:800;font-size:16px;letter-spacing:.1em;padding:15px 24px;white-space:nowrap}
.side{display:flex;flex-direction:column;gap:26px;position:sticky;top:88px}
.side__box{border:1px solid #262b34;background:var(--panel);padding:22px}
.side__head{font-family:var(--cond);font-weight:800;font-size:15px;letter-spacing:.12em;color:var(--muted-2);margin-bottom:14px;text-transform:uppercase}
.side__toc{display:flex;flex-direction:column;gap:11px}
.side__toc a{font-family:var(--cond);font-weight:700;font-size:18px;line-height:1.15;text-transform:uppercase;color:var(--fg-2);border-left:3px solid #262b34;padding-left:12px}
.side__toc a:hover{border-left-color:var(--orange);color:var(--fg)}
.side__next{padding:13px 0;border-bottom:1px solid var(--line-soft)}
.side__next .rail__title{margin:7px 0 0}

/* footer */
.site-foot{border-top:1px solid var(--line);background:#0e1013;padding:40px 24px;margin-top:0}
.site-foot__in{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
.site-foot__name{font-family:var(--cond);font-weight:800;font-size:19px;letter-spacing:.1em;margin-bottom:6px}
.site-foot__addr{font-family:var(--mono);font-size:11px;color:#7f8892}
.site-foot__links{display:flex;gap:20px;flex-wrap:wrap;font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.09em}

@media (max-width:860px){
  .lead{grid-template-columns:1fr;gap:32px}
  .rail{border-left:0;padding-left:0}
  .post-body{grid-template-columns:1fr;gap:32px}
  .side{position:static}
}
@media (max-width:620px){
  .stats{grid-template-columns:1fr}
  .rows dt{width:auto}
  .byline div{border-right:0;margin-right:16px}
}

/* mobile nav — added at build time; BUILD-NOTES listed this as an open TODO.
   Without it the site-nav was display:none under 900px with no way to reach it. */
.nav-toggle{display:none;background:none;border:0;padding:8px 4px;cursor:pointer;flex-direction:column;gap:5px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--fg);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:900px){
  .site-head__in{flex-wrap:wrap;gap:12px}
  .logo{order:1}
  .btn-cta{order:2;margin-left:auto}
  .nav-toggle{order:3;display:flex}
  .site-nav{display:none;order:4;flex-basis:100%;margin-left:0;flex-direction:column;gap:0;border-top:1px solid var(--line);padding-top:4px}
  .site-nav.is-open{display:flex}
  .site-nav a{padding:14px 2px;font-size:17px;border-bottom:1px solid var(--line-soft)}
  .site-nav a:last-child{border-bottom:0}
}

/* --- blocks introduced by "What's the Academy?" --- */

/* quick-fact panel: label over value, 3-up */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin:30px 0;border-top:3px solid var(--orange)}
.facts > div{background:var(--panel-2);padding:18px 20px}
.facts dt{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:7px}
.facts dd{margin:0;font-size:15px;line-height:1.45;color:var(--fg-2);font-weight:500}

/* 4-up stat strip (base .stats is 3-up) */
.stats--four{grid-template-columns:repeat(4,1fr)}

/* endcap variant: copy above, two CTAs below, address note */
.endcap--pair{display:block}
.endcap--pair .endcap__copy{max-width:54ch}
.cta-pair{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.endcap--pair .cta-pair a{background:var(--bg);color:var(--fg);font-family:var(--cond);font-weight:800;font-size:16px;letter-spacing:.1em;padding:15px 24px;text-transform:uppercase;white-space:nowrap}
.endcap--pair .cta-pair a:hover{background:#000;color:#fff}
.endcap--pair .cta-pair a.is-alt{background:transparent;color:var(--bg);border:2px solid rgba(20,11,6,.5)}
.endcap--pair .cta-pair a.is-alt:hover{background:rgba(20,11,6,.12);color:var(--bg)}
.cta-note{margin-top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:rgba(20,11,6,.72)}

/* author avatar */
.author-avatar{width:52px;height:52px;flex-shrink:0;object-fit:cover;background:#161a1e}

@media (max-width:900px){.stats--four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){
  .facts{grid-template-columns:1fr}
  .stats--four{grid-template-columns:1fr}
  .cta-pair a{width:100%;text-align:center}
}