/* Workout pages: the landing's night at the track, set for reading. Dusk only at the very top, lime only
   for work phases and the call to action, ruled lists instead of cards. Motion speaks one language: the
   landing's ease-out, the strip drawing itself in session order, and the floodlight striking over the
   host block (workouts.js adds .lights, then .lit). Without JS or with reduced motion, all is static and lit. */

.read {
  --soft: #A9AFBE;
  --lede: #DADDE4;
  --prose: #D8D8D2;
  --rule: rgb(245 245 240 / 0.12);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  background:
    radial-gradient(70% 380px at 85% 0, rgb(201 119 63 / 0.12), transparent 70%) no-repeat,
    linear-gradient(180deg, #17213A 0, #101218 260px, var(--bg) 640px) no-repeat,
    var(--bg);
  overflow-x: clip;
}

.workout, .hub, .more { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter); }

/* Intro: headline and lede on the left, the session's numbers on the right */
.intro { padding: clamp(40px, 8vw, 88px) 0 0; display: grid; gap: 36px; }
.intro h1 { font-size: clamp(44px, 6.2vw, 88px); line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance; }
.lede { color: var(--lede); font-size: 20px; line-height: 1.5; margin: 24px 0 0; max-width: 56ch; }
.lede.quiet { color: var(--soft); font-size: 17px; margin-top: 14px; max-width: 52ch; }

.facts { margin: 0; display: grid; border-top: 1px solid var(--rule); }
.facts div { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--soft); font-size: 15px; font-weight: 600; }
.facts dd { margin: 0; font-weight: 900; font-size: 20px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

.session-strip { display: grid; gap: 10px; }
@media (min-width: 960px) {
  .workout .intro { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px 72px; align-items: end; }
  .workout .session-strip { grid-column: 1 / -1; margin-top: 8px; }
  .facts div { grid-template-columns: 1fr auto; }
  .facts dd { text-align: right; }
}

/* The phase strip, as on the landing */
.strip { list-style: none; margin: 0; padding: 0; display: flex; gap: 3px; height: 12px; }
.strip.dense { gap: 1px; }
.seg { flex: var(--d) 1 0; min-width: 1px; border-radius: 2px; background: rgb(245 245 240 / 0.45); transform-origin: left; }
.seg.work { background: var(--accent); }
.session-strip .strip { height: 16px; }
.strip-labels { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: 15px; font-weight: 600; color: var(--soft); }
.strip-labels b { color: var(--accent); font-weight: 900; font-variant-numeric: tabular-nums; text-align: center; }

/* Body: one reading column, left-aligned under the headline */
.body { max-width: 720px; }
.part { margin-top: clamp(56px, 9vw, 96px); }
.part h2, .more h2, .group h2 { font-size: clamp(24px, 4.5vw, 34px); letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
.part p { color: var(--prose); margin: 16px 0 0; max-width: 65ch; }
.source p { color: var(--soft); font-size: 15px; }

/* The session, phase by phase */
.recipe, .sub { list-style: none; margin: 0; padding: 0; }
.recipe { margin-top: 24px; border-top: 1px solid var(--rule); }
.step { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.dur { font-weight: 900; font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.step.work .dur { color: var(--accent); }
.what { display: grid; gap: 2px; }
.what-name { font-weight: 600; }
.what-note { color: var(--soft); font-size: 15px; }
.effort { color: var(--soft); font-size: 15px; font-weight: 600; }
.rep { display: grid; grid-template-columns: 64px 1fr; gap: 0 16px; padding-top: 12px; border-bottom: 1px solid var(--rule); }
.times { font-weight: 900; font-size: 20px; font-variant-numeric: tabular-nums; padding-top: 12px; white-space: nowrap; }
.rep > .sub { border-left: 1px solid var(--rule); padding-left: 16px; }
.rep > .sub > .step:last-child, .rep > .sub > .rep:last-child { border-bottom: 0; }
.sub .rep { grid-template-columns: 48px 1fr; padding-top: 0; }
.sub .step { grid-template-columns: 56px 1fr auto; }
@media (max-width: 420px) {
  .step, .sub .step { grid-template-columns: 52px 1fr; }
  .effort { grid-column: 2; }
  .rep { grid-template-columns: 44px 1fr; gap: 0 10px; }
  .times { font-size: 17px; }
  .rep > .sub { padding-left: 12px; }
}

/* Host it: the one floodlight on the page, beside the coach at the track */
.host { position: relative; margin-top: clamp(96px, 13vw, 160px); padding-top: clamp(48px, 7vw, 72px); display: grid; gap: 40px; isolation: isolate; }
.host::before { content: ''; position: absolute; inset: 0 calc(-1 * var(--gutter)) auto; height: 100%; z-index: -1; pointer-events: none; background: radial-gradient(40% 60% at 50% 0, rgb(200 245 60 / 0.13), rgb(236 255 196 / 0.04) 45%, transparent 75%); }
.host::after { content: ''; position: absolute; top: 0; left: 50%; width: min(240px, 40%); height: 3px; translate: -50% 0; border-radius: 2px; background: var(--accent); }
.host h2 { font-size: clamp(34px, 5.2vw, 60px); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.host-copy > p:not(.note) { color: var(--lede); font-weight: 600; max-width: 44ch; margin: 18px 0 26px; }
.host .note { color: var(--soft); max-width: 58ch; }
.host-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; border-radius: 16px; transition: filter 1100ms var(--ease) 150ms; }
@media (min-width: 900px) {
  .host { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 72px; align-items: center; }
  .host-photo { aspect-ratio: 4 / 5; }
}

/* Lists of workouts: the hub and "More" */
.list { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.item { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 20px 0 22px; border-bottom: 1px solid var(--rule); text-decoration: none; transition: transform 140ms var(--ease); }
.item::before { content: ''; position: absolute; inset: 0 calc(-1 * 16px); z-index: -1; border-radius: 14px; background: rgb(245 245 240 / 0.035); opacity: 0; transition: opacity 180ms var(--ease); pointer-events: none; }
.item-name { font-weight: 900; font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; }
.item-meta { color: var(--soft); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; align-self: baseline; text-align: right; }
.item-sum { grid-column: 1 / -1; color: var(--soft); }
.item .strip { grid-column: 1 / -1; height: 6px; margin-top: 12px; }
.item .seg { background: rgb(245 245 240 / 0.16); transition: background-color 220ms var(--ease); }
.item .seg.work { background: rgb(200 245 60 / 0.4); }
.list li { position: relative; isolation: isolate; }
@media (hover: hover) {
  .item:hover::before { opacity: 1; }
  .item:hover .seg.work { background: var(--accent); }
  .item:hover .seg:not(.work) { background: rgb(245 245 240 / 0.45); }
}
.item:focus-visible .seg.work { background: var(--accent); }
.item:active { transform: scale(0.99); }
@media (max-width: 480px) {
  .item { grid-template-columns: 1fr; }
  .item-meta { text-align: left; }
}

.more { margin-top: clamp(96px, 13vw, 144px); padding-bottom: 72px; }
.more h2, .more .list, .more .all { max-width: 720px; }
.all { margin: 28px 0 0; }

/* Hub: photo beside the intro, each group's heading pinned beside its list */
.hub { padding-bottom: 72px; }
.intro-photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 28%; border-radius: 16px; }
.group { margin-top: clamp(72px, 11vw, 128px); display: grid; gap: 8px; }
.group-head p { color: var(--soft); margin: 12px 0 0; max-width: 40ch; }
@media (min-width: 960px) {
  .hub .intro { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 72px; align-items: end; }
  .intro-photo { aspect-ratio: 4 / 5; }
  .group { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: start; }
  .group-head { position: sticky; top: 32px; padding-top: 20px; }
  .group .list { margin-top: 0; }
}

/* Motion */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes draw { from { transform: scaleX(0); } }
@keyframes strike { 0% { opacity: 0; } 9% { opacity: 0.9; } 15% { opacity: 0.1; } 26% { opacity: 1; } 32% { opacity: 0.35; } 55%, 100% { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  /* Entry: the headline block rises, then the session draws itself in the order you would run it */
  .intro-copy > *, .facts, .intro-photo { animation: rise 800ms var(--ease) both; }
  .intro-copy > :nth-child(2) { animation-delay: 90ms; }
  .intro-copy > :nth-child(n+3), .facts { animation-delay: 180ms; }
  .intro-photo { animation-duration: 1100ms; animation-delay: 120ms; }
  .session-strip .seg { animation: draw 520ms var(--ease) both; animation-delay: calc(320ms + var(--at) * 900ms); }
  .session-strip .strip-labels { animation: rise 700ms var(--ease) 1100ms both; }

  /* Lists light up row by row when they arrive (small groups only) */
  .lights [data-reveal] > li { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
  .lights [data-reveal].lit > li { opacity: 1; transform: none; }

  /* The floodlight strikes over the host block */
  .lights .host::before, .lights .host::after { opacity: 0; }
  .lights .host.lit::before, .lights .host.lit::after { animation: strike 1000ms linear forwards; }
  .lights .host .host-copy > * { opacity: 0.3; transform: translateY(14px); transition: opacity 700ms var(--ease) 280ms, transform 700ms var(--ease) 280ms; }
  .lights .host.lit .host-copy > * { opacity: 1; transform: none; }
  .lights .host .host-photo { filter: brightness(0.35) saturate(0.5); }
  .lights .host.lit .host-photo { filter: none; }
}

@media (prefers-reduced-motion: reduce) { .read *, .read *::before { transition: none !important; animation: none !important; } }