/* Fitness, "Sweat, then glam.": her workouts in a graphite world with one hot-pink accent. Big
   sporty type ("Sweat," in heavy caps, "then glam." in a pink italic), four large photographs in a
   staggered editorial row (Warm up, Cardio, Lift, Glow: the cardio shot leads, taller), each moving
   at its own speed as the page scrolls, a routine tracker that fills as you go, and a short roll of
   film with five more frames. Photos turn only flat (the strip tilts 2deg); no flashes, sparkles only. */
#gym {
  --gy-w: min(100vw - 2 * var(--pad), 1320px);
  --u: calc(var(--gy-w) / 100);
  --gy-line: rgba(255, 255, 255, 0.13);
  --gy-faint: rgba(244, 240, 245, 0.5);
  position: relative; overflow: clip;
  padding: clamp(104px, 13vh, 150px) var(--pad) clamp(20px, 3vh, 40px);
  color: var(--ink);
  background:
    radial-gradient(42% 34% at 38% 62%, rgba(255, 46, 136, 0.15), rgba(255, 46, 136, 0.04) 55%, transparent 78%),
    linear-gradient(180deg, #1a191d 0%, #141316 46%, #100f12 82%, var(--bg) 100%);
}

/* ---- background: one soft pink glow, a giant outlined word drifting behind the photographs */
#gym .gy-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
#gym .gy-glow { position: absolute; left: 40%; top: 50%; width: 70vmin; height: 70vmin; margin: -35vmin 0 0 -35vmin; border-radius: 50%; background: radial-gradient(circle, rgba(255, 46, 136, 0.2), rgba(255, 46, 136, 0.05) 46%, transparent 70%); filter: blur(10px); }
#gym .gy-giant { position: absolute; left: 0; top: 66%; margin: 0; white-space: nowrap; line-height: 0.8; transform: translate3d(var(--gx, 6vw), -50%, 0); will-change: transform; color: transparent; }
#gym .gy-giant span { font: 700 clamp(150px, 22vw, 360px) / 0.8 var(--sans); letter-spacing: -0.05em; text-transform: uppercase; -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.085); }
#gym .gy-giant em { font: italic 300 clamp(140px, 20vw, 330px) / 0.8 var(--serif); -webkit-text-stroke: 1.2px rgba(255, 46, 136, 0.2); }

#gym .gy-wrap { position: relative; z-index: 2; width: var(--gy-w); margin: 0 auto; }

/* ---- the words */
#gym .gy-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 26%); align-items: end; column-gap: clamp(32px, 5vw, 96px); }
#gym .gy-title { margin: clamp(14px, 2vh, 22px) 0 0; display: flex; flex-direction: column; font-weight: 400; }
#gym .gy-l { display: block; width: fit-content; clip-path: inset(-0.3em -0.4em -0.32em -0.2em); }
#gym .gy-l > span { display: inline-block; will-change: transform; }
#gym .gy-sweat { position: relative; font: 700 clamp(64px, 11.6 * var(--u), 168px) / 0.84 var(--sans); letter-spacing: -0.05em; text-transform: uppercase; color: var(--ink); }
#gym .gy-l2 { margin: 0.02em 0 0 calc(var(--u) * 9); }
#gym .gy-sweat b { font-weight: inherit; color: var(--hot); }
#gym .gy-glam { padding-right: 0.1em; font: italic 300 clamp(50px, 8.6 * var(--u), 128px) / 1.02 var(--serif); letter-spacing: -0.01em;
  background: linear-gradient(100deg, #ffe3ec 0%, #f7a8c4 45%, #ff4f97 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

#gym .gy-side { padding-bottom: 0.6em; }
#gym .gy-lede { margin: 0; max-width: 30ch; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.6; color: var(--muted); text-wrap: pretty; }
#gym .gy-lede em { font: italic 400 1.12em/1.35 var(--serif); color: var(--ink); }

/* the routine: four steps on a thin rail that fills hot pink as the photographs go by */
#gym .gy-sets { position: relative; margin-top: clamp(22px, 3.4vh, 32px); padding-bottom: 14px; }
#gym .gy-sets ol { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 0; list-style: none; }
#gym .gy-sets li { font: 600 10.5px/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gy-faint); white-space: nowrap; transition: color 0.5s var(--ease); }
#gym .gy-sets li.on { color: var(--ink); }
#gym .gy-track { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--gy-line); overflow: hidden; }
#gym .gy-track i { display: block; height: 100%; background: linear-gradient(90deg, #ff2e88, #ff6aa8); transform-origin: 0 50%; transform: scaleX(var(--gy-p, 1)); }

/* ---- the row: four large photographs, staggered */
#gym .gy-row { display: grid; grid-template-columns: 0.92fr 1.34fr 1fr 0.92fr; column-gap: calc(var(--u) * 2.3); align-items: start; margin-top: clamp(40px, 7vh, 72px); }
#gym .gy-ph { position: relative; margin: 0; }
#gym .gy-a { margin-top: calc(var(--u) * 8.5); }
#gym .gy-b { margin-top: calc(var(--u) * -1); }
#gym .gy-c { margin-top: calc(var(--u) * 12.5); }
#gym .gy-d { margin-top: calc(var(--u) * 4.5); }
#gym .gy-cap { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 600 10px/1 var(--sans); letter-spacing: 0.26em; text-transform: uppercase; color: var(--gy-faint); }
#gym .gy-cap b { font-weight: 700; color: var(--hot); }
#gym .gy-cap span { transition: color 0.5s var(--ease); }
#gym .gy-cap::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gy-line), transparent); }
#gym .gy-ph.on .gy-cap span { color: var(--ink); }
#gym .gy-ph { will-change: transform; }
#gym .gy-img { position: relative; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: #1d1b20;
  box-shadow: 0 44px 70px -36px rgba(0, 0, 0, 0.9), 0 12px 26px -16px rgba(0, 0, 0, 0.7); transition: box-shadow 0.8s var(--ease); }
#gym .gy-img img { width: 100%; height: 100%; object-fit: cover; }
#gym .gy-img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 22%); }
#gym .gy-feat .gy-img { aspect-ratio: 4 / 5.35; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.95), 0 40px 120px -50px rgba(255, 46, 136, 0.55); }
#gym .gy-feat .gy-img img { object-position: 50% 40%; }
#gym .gy-d .gy-img img { object-position: 50% 100%; }

/* ---- the roll: five more frames on a short strip of film */
#gym .gy-foot { display: flex; align-items: center; justify-content: flex-end; gap: clamp(28px, 4vw, 64px); margin-top: calc(var(--u) * 2); }
#gym .gy-note { margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; }
#gym .gy-note-k { font: 600 10px/1 var(--sans); letter-spacing: 0.28em; text-transform: uppercase; color: var(--gy-faint); }
#gym .gy-note-t { font: italic 400 clamp(26px, 2.3vw, 36px) / 1 var(--serif); color: var(--rose); }
#gym .gy-roll { margin: 0; flex: none; }
#gym .gy-strip { --fh: clamp(150px, 13.2 * var(--u), 184px); --sb: 26px; position: relative; display: flex; gap: 10px; padding: var(--sb) 14px; border-radius: 2px; transform: rotate(-2deg); will-change: transform;
  background-color: #0a090b;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='26' viewBox='0 0 20 26'%3E%3Crect x='5' y='4' width='10' height='8.5' rx='2' fill='%23f4e4ec' fill-opacity='.15'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='26' viewBox='0 0 20 26'%3E%3Crect x='5' y='13.5' width='10' height='8.5' rx='2' fill='%23f4e4ec' fill-opacity='.15'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: 0 0, 0 100%; background-size: 20px var(--sb);
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.7)); }
#gym .gy-fr { position: relative; flex: none; width: calc(var(--fh) * 0.8); height: var(--fh); border-radius: 2px; overflow: hidden; background: #1d1b20; }
#gym .gy-fr img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
#gym .gy-fr::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
#gym .gy-edge { position: absolute; left: 22px; right: 22px; bottom: calc(var(--sb) - 11.5px); display: flex; justify-content: space-between; gap: 18px; font: 700 7px/1 var(--sans); letter-spacing: 0.34em; text-transform: uppercase; color: rgba(255, 170, 92, 0.6); white-space: nowrap; overflow: hidden; pointer-events: none; }
#gym .gy-edge b { font-weight: 700; }
#gym .gy-edge i { font-style: normal; letter-spacing: 0; }

/* ---- motion (04g-gym.js adds .is-live): the photographs wipe up into their frames as they arrive */
#gym.is-live .gy-img img { clip-path: inset(100% 0 0 0); scale: 1.12; transition: clip-path 1.25s var(--ease), scale 1.8s var(--ease); }
#gym.is-live .gy-ph.in .gy-img img { clip-path: inset(0 0 0 0); scale: 1; }
#gym.is-live .gy-ph .gy-cap { opacity: 0; translate: 0 10px; transition: opacity 0.8s var(--ease) 0.25s, translate 1s var(--ease) 0.25s; }
#gym.is-live .gy-ph.in .gy-cap { opacity: 1; translate: none; }
#gym.is-live .gy-b .gy-img img, #gym.is-live .gy-b .gy-cap { transition-delay: 0.1s; }
#gym.is-live .gy-c .gy-img img, #gym.is-live .gy-c .gy-cap { transition-delay: 0.2s; }
#gym.is-live .gy-d .gy-img img, #gym.is-live .gy-d .gy-cap { transition-delay: 0.3s; }
#gym.is-live .gy-fr img { opacity: 0; transition: opacity 1s var(--ease); }
#gym.is-live .gy-roll.in .gy-fr img { opacity: 1; }
#gym.is-live .gy-roll.in .gy-fr:nth-child(2) img { transition-delay: 0.12s; }
#gym.is-live .gy-roll.in .gy-fr:nth-child(3) img { transition-delay: 0.24s; }
#gym.is-live .gy-roll.in .gy-fr:nth-child(4) img { transition-delay: 0.36s; }
#gym.is-live .gy-roll.in .gy-fr:nth-child(5) img { transition-delay: 0.48s; }
@media (hover: hover) and (pointer: fine) {
  #gym .gy-img:hover img { scale: 1.035; transition: scale 1.2s var(--ease), clip-path 1.25s var(--ease); }
}

/* ---- tablets and phones: the words, then a staggered two-column grid, then the roll (it slides
   along as the page scrolls so every frame shows) */
@media (max-width: 900px), (max-aspect-ratio: 85/100) {
  #gym { --u: calc(var(--gy-w) / 100); padding: calc(80px + 3svh) var(--pad) 12px; }
  #gym .gy-head { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  #gym .gy-sweat { font-size: min(25vw, 150px); }
  #gym .gy-glam { font-size: min(17.5vw, 112px); }
  #gym .gy-l2 { margin-left: 0.5em; }
  #gym .gy-side { padding: 0; }
  #gym .gy-lede { max-width: 34ch; font-size: clamp(16px, 4.2vw, 18px); }
  #gym .gy-sets li { font-size: 9.5px; letter-spacing: 0.18em; }
  #gym .gy-row { grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 22px; margin-top: 34px; }
  #gym .gy-a { grid-column: 1; grid-row: 1; margin-top: 56px; }
  #gym .gy-b { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  #gym .gy-c { grid-column: 1; grid-row: 2 / span 2; margin-top: 0; }
  #gym .gy-d { grid-column: 2; grid-row: 3; margin-top: 0; }
  #gym .gy-row { grid-template-rows: auto auto auto; }
  #gym .gy-feat .gy-img { aspect-ratio: 4 / 5.9; }
  #gym .gy-cap { gap: 8px; margin-bottom: 10px; font-size: 9px; letter-spacing: 0.2em; }
  #gym .gy-foot { display: block; margin: 38px calc(var(--pad) * -1) 0; }
  #gym .gy-note { align-items: flex-start; gap: 8px; padding: 0 var(--pad); margin-bottom: 6px; text-align: left; }
  #gym .gy-note-t { font-size: 26px; }
  #gym .gy-roll { overflow: hidden; padding: 14px 0 22px; }
  #gym .gy-strip { --fh: min(31vw, 150px); --sb: 22px; width: max-content; margin-left: var(--pad); gap: 8px; padding: var(--sb) 10px; background-size: 17px var(--sb); transform: rotate(-1.5deg); }
  #gym:not(.is-live) .gy-edge > :nth-child(n+4) { display: none; }
  #gym:not(.is-live) .gy-strip { --fh: min(31vw, 150px, calc((100vw - 2 * var(--pad) - 52px) / 4)); }   /* still (reduced motion, no JS): the whole roll fits */
  #gym .gy-giant { top: 64%; }
  #gym .gy-giant span { font-size: 40vw; }
  #gym .gy-giant em { font-size: 36vw; }
  #gym .gy-glow { left: 50%; top: 62%; width: 110vw; height: 110vw; margin: -55vw 0 0 -55vw; }
}
@media (min-width: 600px) and (max-width: 900px), (min-width: 600px) and (max-aspect-ratio: 85/100) {
  #gym .gy-head { grid-template-columns: minmax(0, 1fr) minmax(240px, 40%); }
  #gym .gy-sweat { font-size: min(15vw, 150px); }
  #gym .gy-glam { font-size: min(11vw, 112px); }
  #gym .gy-row { column-gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  #gym .gy-giant, #gym .gy-ph, #gym .gy-strip, #gym .gy-l > span { will-change: auto; }
  #gym .gy-img:hover img { scale: none; }
}