/* First session guide. Built on fleks-page.css (base); a long-read training card that is easy to follow on a phone in the gym. */

/* Small uppercase kicker with the oxblood tick, for section labels */
.fs-kicker{display:flex;align-items:center;gap:10px;margin-bottom:24px;color:var(--mute-light)}
.fs-kicker::before{content:'';flex:none;width:16px;height:2px;background:var(--oxblood)}
.on-dark .fs-kicker{color:var(--mute-dark)}

/* Hero: headline left, the session at a glance right. Text only.
   Same two columns and gap as .split, so the right column lines up with every section below. */
.fs-hero{padding-bottom:clamp(40px,5vw,72px)}
.fs-hero .page-mega{top:clamp(150px,13vw,200px);bottom:auto}
.fs-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:end}
.fs-hero h1{max-width:10ch}
.fs-hero-side{width:100%}
.fs-hero-side .lead{margin-top:0;text-wrap:pretty}
.fs-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:40px 0 0;border-top:1px solid var(--line-dark)}
.fs-facts div{padding-top:20px}
.fs-facts dt{font:400 clamp(40px,4vw,56px)/.9 var(--display);text-transform:uppercase;letter-spacing:.01em}
.fs-facts dd{margin:10px 0 0;font-size:14px;line-height:1.45;color:var(--mute-dark)}
.fs-start{width:100%;margin-top:40px}

/* Session head: title left, intro and the route right */
.fs-session-head h2{max-width:6ch}
.fs-intro{margin-top:0;max-width:30ch}
.fs-route{margin-top:clamp(40px,4vw,56px)}
.fs-route-title{padding-bottom:16px;border-bottom:1px solid var(--ink)}
.fs-route ol{list-style:none;margin:0;padding:0}
.fs-route a{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:60px;padding:12px 0;border-bottom:1px solid var(--stone);font:600 16px/1.35 var(--body);text-decoration:none}
.fs-route-no{font:400 26px/1 var(--display);letter-spacing:.02em;color:var(--mute-light);text-transform:uppercase}
.fs-route-arrow{color:var(--mute-light);transition:transform .2s var(--ease),color .2s}
.fs-route a:hover .fs-route-name{text-decoration:underline}
.fs-route a:hover .fs-route-arrow{color:var(--ink);transform:translateY(3px)}

/* Stations: a giant number on the left, the work on the right, on the same axis as the head */
.fs-stations{list-style:none;margin:clamp(80px,10vw,152px) 0 0;padding:0}
.fs-station{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);padding:clamp(40px,4.5vw,64px) 0 clamp(64px,7vw,104px);border-top:2px solid var(--ink);scroll-margin-top:24px}
.fs-station:last-child{padding-bottom:0}
.fs-station-no{position:sticky;top:32px;align-self:start;font:400 clamp(128px,17vw,264px)/.76 var(--display);letter-spacing:-.01em}
.fs-station-of{color:var(--mute-light)}
.fs-station h3{margin-top:16px;font:400 clamp(52px,6.2vw,96px)/.88 var(--display);text-transform:uppercase;letter-spacing:.005em;text-wrap:balance}
.fs-rx{width:100%;margin-top:clamp(28px,3vw,40px);border-collapse:collapse}
.fs-rx thead th{padding:0 0 12px;border-bottom:1px solid var(--ink);font:600 11px/1.3 var(--body);text-transform:uppercase;letter-spacing:.14em;color:var(--mute-light);text-align:left}
.fs-rx thead th:last-child{text-align:right}
.fs-rx tbody th{padding:16px 16px 16px 0;border-bottom:1px solid var(--stone);font:600 17px/1.35 var(--body);text-align:left}
.fs-rx td{padding:14px 0 12px;border-bottom:1px solid var(--stone);font:400 clamp(44px,4.2vw,60px)/1 var(--display);text-align:right;white-space:nowrap}
.fs-cue{position:relative;margin-top:28px;padding-left:30px;font:600 clamp(18px,1.5vw,21px)/1.4 var(--body);max-width:36ch;text-wrap:balance}
.fs-cue::before{content:'';position:absolute;left:0;top:.68em;width:16px;height:2px;background:var(--oxblood)}
.fs-swap{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;margin-top:32px;padding:20px 22px;background:var(--sand);font-size:16px;line-height:1.5;color:#2b2b28}
.fs-swap .label{padding-top:4px;color:var(--mute-light)}
.fs-swap strong{display:block;color:var(--ink)}

/* Finish: the three things to do after station 03, on dark */
.fs-finish h2{max-width:none;text-wrap:balance}
.fs-finish-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--bone);counter-reset:finish}
.fs-finish-list li{counter-increment:finish;display:grid;grid-template-columns:56px minmax(0,1fr);align-items:baseline;gap:12px;padding:24px 0;border-bottom:1px solid var(--line-dark);font:400 clamp(34px,3.6vw,52px)/.95 var(--display);text-transform:uppercase;letter-spacing:.01em}
.fs-finish-list li::before{content:counter(finish,decimal-leading-zero);font:600 12px/1 var(--body);letter-spacing:.14em;color:var(--mute-dark)}

/* Next four weeks: the one action, in a single column */
.fs-next-grid{grid-template-columns:minmax(0,1fr)}
.fs-next-copy h2{max-width:8ch}
.fs-next-copy .lead{max-width:28ch}
.fs-next-button{margin-top:40px;min-width:300px}

@media(max-width:899px){
  .fs-hero-grid{grid-template-columns:1fr;gap:36px}
  .fs-hero-side{max-width:560px}
  .fs-station{grid-template-columns:1fr;gap:20px}
  .fs-station-no{position:static}
  .fs-route{max-width:none}
  .fs-finish .split{gap:40px}
}
@media(max-width:699px){
  .fs-hero .page-mega{top:96px;font-size:52vw}
  .fs-hero h1{font-size:clamp(56px,17vw,84px)}
  .fs-hero-side .lead{font-size:17px}
  .fs-facts{margin-top:32px}
  .fs-facts dt{font-size:40px}
  .fs-start{margin-top:32px}
  .fs-session-head{gap:28px}
  .fs-intro{font-size:18px}
  .fs-stations{margin-top:72px}
  .fs-station{padding:28px 0 64px;gap:12px}
  .fs-station-no{font-size:132px}
  .fs-station-of{position:absolute;top:34px;right:0}
  /* Below the 52px section h2 on phones, so the heading order still reads by size */
  .fs-station h3{margin-top:12px;font-size:clamp(40px,11.5vw,46px)}
  .fs-rx tbody th{font-size:16px}
  .fs-rx td{font-size:44px}
  .fs-swap{grid-template-columns:1fr;gap:6px;padding:16px}
  .fs-swap .label{padding-top:0}
  .fs-finish-list li{grid-template-columns:40px minmax(0,1fr);font-size:34px;padding:20px 0}
  .fs-next-button{width:100%;min-width:0}
}

/* Printing the guide to take to the gym: ink on white, no chrome */
@media print{
  .site-header,.site-footer,.skip-link,.page-mega,.fs-start,.fs-route,.fs-next{display:none!important}
  body,.page-hero,.section,.section.on-dark,.fs-swap{background:#fff!important;color:#000!important}
  /* Light-on-dark text colours (hero lead, kickers, facts) would print near-white on white */
  main *,.fs-finish-list li::before{color:#000!important}
  .fs-finish-list,.fs-finish-list li{border-color:#000!important}
  .page-hero,.section{padding:24px 0!important}
  .fs-station{break-inside:avoid;padding:24px 0}
  .fs-station-no{position:static;font-size:96px}
}