/* ==========================================================================
   Home Workout Hero — seasonal challenge pages
   Layered on top of assets/site.css: tokens, fonts and .wrap come from there.
   ========================================================================== */

.ch-bar{position:sticky; top:0; z-index:40; padding:clamp(10px,2vw,16px) clamp(10px,3vw,24px) 0}
.ch-bar__in{max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:clamp(8px,2vw,20px)}
.ch-bar__brand{display:flex; align-items:center; gap:10px; padding:6px 12px 6px 8px;
  border:1px solid var(--border); border-radius:18px; background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:var(--accent);
  font-weight:900; letter-spacing:.04em; font-size:clamp(12px,3.2vw,15px); white-space:nowrap}
.ch-bar__brand-name{display:flex; flex-direction:column; line-height:.95}
.ch-bar__brand-workout{color:var(--ink)}
.ch-bar__brand img{width:44px; height:44px; flex-shrink:0; border-radius:50%}
.ch-lang{display:flex; gap:2px; padding:4px; border-radius:12px; background:var(--tint)}
.ch-lang button{padding:5px 10px; border-radius:8px; font-size:13px; font-weight:700;
  background:transparent; color:var(--muted); line-height:1.4;
  transition:background .15s, color .15s, box-shadow .15s, transform .15s}
.ch-lang button:hover{background:var(--surface); color:var(--ink); box-shadow:var(--sh-seg); transform:translateY(-1px)}
.ch-lang button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--sh-seg)}
.ch-lang button:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

/* hero — case file --------------------------------------------------------- */
.ch-hero{padding-top:clamp(36px,7vw,72px)}
.ch-file{position:relative; background:var(--subtle); border:2px dashed var(--dash);
  border-radius:22px; padding:clamp(22px,4.5vw,48px); overflow:hidden}
.ch-file__meta{display:flex; flex-wrap:wrap; gap:8px 20px; font-family:'DM Mono',ui-monospace,monospace;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.ch-file__meta b{color:var(--ink); font-weight:500}
.ch-h1{margin:18px 0 0; font-size:clamp(40px,8.5vw,86px); line-height:.94; font-weight:700;
  letter-spacing:-.04em; text-transform:uppercase; max-width:14ch; text-wrap:balance}
.ch-stamp{display:inline-block; margin:14px 0 0; padding:7px 16px; border:2px solid var(--accent);
  color:var(--accent); border-radius:6px; transform:rotate(-4deg); font-weight:700;
  font-size:clamp(14px,2.4vw,20px); letter-spacing:.08em; text-transform:uppercase}
.ch-lede{margin:20px 0 0; max-width:56ch; font-size:clamp(16px,2vw,19px); line-height:1.55;
  color:var(--muted)}


/* the countdown sits above the case file, centred — it's the first thing the
   page says, so it gets the top of the page and nothing competing beside it */
.ch-clockband{margin:0 0 clamp(28px,5vw,44px); text-align:center}
.ch-clockband .ch-count{margin:0}
.ch-clockband .ch-count__row{justify-content:center}
.ch-clockband .ch-count__bar{margin-left:auto; margin-right:auto}
.ch-clockband .ch-count__u{align-items:center}
.ch-facts{margin:18px 0 0; font-family:'DM Mono',ui-monospace,monospace;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}

/* countdown — the numbers ARE the design: display type at headline scale,
   sitting on the case file itself rather than inside a box */
.ch-count{margin:30px 0 0}
.ch-count__lbl{display:inline-flex; align-items:center; gap:8px;
  font-family:'DM Mono',ui-monospace,monospace; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent)}
.ch-count__lbl::before{content:""; width:7px; height:7px; border-radius:50%;
  background:var(--accent); animation:chPulse 2s ease-in-out infinite}

.ch-count__row{display:flex; align-items:stretch; gap:0; margin-top:10px;
  flex-wrap:wrap}
.ch-count__u{display:flex; flex-direction:column; align-items:flex-start;
  padding:0 clamp(16px,3.4vw,30px); border-left:1px dashed var(--dash-2)}
.ch-count__u:first-child{padding-left:0; border-left:0}
.ch-count__u b{font-size:clamp(46px,11vw,88px); font-weight:700; line-height:.88;
  letter-spacing:-.05em; color:var(--ink); font-variant-numeric:tabular-nums}
.ch-count__u:first-child b{color:var(--accent)}
.ch-count__u em{margin-top:8px; font-style:normal;
  font-family:'DM Mono',ui-monospace,monospace; font-size:10px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--faint)}

/* a hairline showing how much of the season has gone */
.ch-count__bar{position:relative; height:2px; margin:22px 0 0; max-width:420px;
  border-radius:2px; background:var(--dash)}
.ch-count__bar span{position:absolute; inset:0 auto 0 0; border-radius:2px;
  background:var(--accent); transition:width 1s linear}
.ch-count__sub{margin:10px 0 0; font-family:'DM Mono',ui-monospace,monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.ch-count__after{margin:10px 0 0; font-size:15px; line-height:1.6; max-width:52ch;
  color:var(--muted)}

/* last day — everything goes orange */
.ch-count--urgent .ch-count__u b{color:var(--accent)}
.ch-count--urgent .ch-count__lbl{animation:chPulse 1.3s ease-in-out infinite}

.ch-count--soon .ch-count__lbl{color:var(--freeze)}
.ch-count--soon .ch-count__lbl::before{background:var(--freeze)}
.ch-count--soon .ch-count__u:first-child b{color:var(--freeze)}
.ch-count--done .ch-count__lbl,.ch-count--open .ch-count__lbl{color:var(--muted)}
.ch-count--done .ch-count__lbl::before{background:var(--faint); animation:none}

@keyframes chPulse{0%,100%{opacity:1} 50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){ .ch-count__lbl::before{animation:none} }
@media (max-width:420px){
  .ch-count__u{padding:0 14px}
  .ch-count__u b{font-size:clamp(38px,15vw,56px)}
}

/* ---- closed challenge --------------------------------------------------- */
.ch-file--closed{background:var(--band-2); border-style:solid; border-color:var(--border)}
.ch-file__ghost--gone{opacity:.1; transform:rotate(14deg)}
.ch-h1--gone{font-size:clamp(38px,7.5vw,74px); max-width:18ch; text-transform:none}
.ch-stamp--closed{border-color:var(--muted); color:var(--muted); transform:rotate(-3deg)}
/* the two ways out, stacked with an "or" between them */
.ch-gone-cta{display:flex; flex-direction:column; align-items:flex-start; gap:0; margin:28px 0 0}
.ch-gone-cta .ch-btn{width:auto}
.ch-or{margin:12px 0; padding-left:4px; font-family:'DM Mono',ui-monospace,monospace;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
@media (max-width:620px){
  .ch-gone-cta{align-items:stretch}
  .ch-or{text-align:center; padding-left:0}
}

.ch-stats{display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 0; padding:0; list-style:none}
.ch-stats li{background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:10px 16px; min-width:104px}
.ch-stats .v{display:block; font-size:22px; font-weight:700; letter-spacing:-.02em}
.ch-stats .l{display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); margin-top:2px}

.ch-cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:28px 0 0}
.ch-btn{display:inline-flex; align-items:center; gap:9px; padding:14px 24px; border-radius:999px;
  font-weight:600; font-size:16px; background:var(--accent); color:#fff;
  box-shadow:0 10px 24px rgba(240,138,75,.32); transition:transform .15s, box-shadow .15s}
.ch-btn:hover{color:#fff; transform:translateY(-1px); box-shadow:0 14px 30px rgba(240,138,75,.4)}
.ch-btn .ic{width:19px; height:19px}
.ch-btn--ghost{background:var(--surface); color:var(--ink); border:1px solid var(--border);
  box-shadow:none}
.ch-btn--ghost:hover{color:var(--ink); border-color:var(--dash); box-shadow:var(--sh-card)}
.ch-cta__note{font-size:13px; color:var(--faint); flex-basis:100%; margin:2px 0 0}

/* ghost mascot in the corner of the file */
.ch-file__ghost{position:absolute; right:-14px; top:-10px; width:clamp(90px,14vw,170px);
  opacity:.16; color:var(--accent); pointer-events:none}
.ch-file__ghost svg{width:100%; height:auto; fill:currentColor; stroke:none}

/* the ritual — day list ---------------------------------------------------- */
.ch-sec{padding-top:clamp(56px,9vw,96px)}
/* case-file divider: roman numeral, label, hairline out to the margin */
.ch-eyebrow{display:flex; align-items:center; gap:11px; margin-bottom:16px;
  font-family:'DM Mono',ui-monospace,monospace; font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.ch-eyebrow span{display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:22px; padding:0 7px; border:1px solid var(--dash);
  border-radius:5px; color:var(--accent); font-size:10px; letter-spacing:.1em}
.ch-eyebrow::after{content:""; flex:1; height:1px; background:var(--dash); opacity:.7}
.ch-sec__head{display:flex; flex-wrap:wrap; gap:8px 24px; align-items:baseline}
.ch-h2{font-size:clamp(28px,4.4vw,46px); line-height:1.05; font-weight:700; letter-spacing:-.035em}
.ch-sec__sub{color:var(--muted); font-size:15px; max-width:52ch; margin:10px 0 0; line-height:1.55}

/* tape view: selected-day card under the strip */
#ch-daycard{margin-top:12px}
.ch-daycard{display:grid; grid-template-columns:minmax(160px,240px) minmax(0,1fr);
  background:var(--surface); border:1px solid var(--border); border-radius:18px; overflow:hidden}
.ch-daycard--rest{grid-template-columns:1fr}
.ch-daycard__sh{position:relative; aspect-ratio:16/9; overflow:hidden;
  background:repeating-linear-gradient(135deg,#FCE9D8 0 10px,#F8DDC6 10px 20px)}
.ch-video-link{display:block; color:inherit; text-decoration:none}
.ch-video-link:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.ch-daycard__sh img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ch-daycard__sh .playdot{width:36px; height:36px}
.ch-daycard__b{padding:16px 18px; min-width:0; display:flex; flex-direction:column; justify-content:center}
.ch-daycard__e{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
.ch-daycard h4{margin:6px 0 10px; font-size:clamp(16px,2vw,20px); font-weight:700; line-height:1.25}
.ch-daycard p{margin:6px 0 0; font-size:15px; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:8px}
.ch-daycard p .ic{width:16px; height:16px; color:var(--freeze)}
.ch-daycard__b > a{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--ink)}
.ch-daycard__b > a:hover{color:var(--accent)}
.ch-daycard__b > a .ic{width:16px; height:16px; color:#c4302b}
@media (max-width:620px){
  .ch-daycard{grid-template-columns:1fr}
}

.ch-days{margin:26px 0 0; padding:0; list-style:none; background:var(--surface);
  border:1px solid var(--border); border-radius:18px; overflow:hidden}
.ch-day{display:grid; grid-template-columns:62px 1fr auto; gap:0 16px; align-items:center;
  padding:15px 20px; border-top:1px solid var(--border)}
.ch-day:first-child{border-top:0}
.ch-day__n{font-family:'DM Mono',ui-monospace,monospace; font-size:13px; letter-spacing:.08em;
  color:var(--faint); text-transform:uppercase}
.ch-day__t{font-weight:600; font-size:16px; line-height:1.3}
.ch-day__by{display:block; font-size:13px; color:var(--muted); margin-top:3px}
.ch-day__by a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}
.ch-day__by a:hover{color:var(--accent)}
.ch-day__m{font-family:'DM Mono',ui-monospace,monospace; font-size:13px; color:var(--muted);
  white-space:nowrap}
.ch-day--rest{background:var(--band-2)}
.ch-day--rest .ch-day__t{font-weight:500; font-style:italic; color:var(--muted)}
.ch-day--rest .ic{width:15px; height:15px; vertical-align:-.15em; margin-right:7px; color:var(--freeze)}

/* steps -------------------------------------------------------------------- */
.ch-steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px;
  margin:26px 0 0; padding:0; list-style:none; counter-reset:s}
.ch-step{counter-increment:s; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:20px}
.ch-step::before{content:counter(s,upper-roman); display:flex; align-items:center;
  justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--tint);
  color:var(--ink); font-weight:700; font-size:14px; margin-bottom:12px}
.ch-step b{display:block; font-size:16px; margin-bottom:5px}
.ch-step p{margin:0; font-size:14px; line-height:1.55; color:var(--muted)}
.ch-step code{font-family:'DM Mono',ui-monospace,monospace; font-size:.92em;
  background:var(--tint); padding:1px 5px; border-radius:4px; color:var(--ink)}

/* creators ----------------------------------------------------------------- */
.ch-creators{display:flex; flex-wrap:wrap; gap:9px; margin:22px 0 0; padding:0; list-style:none}
.ch-creators a{display:inline-flex; align-items:center; gap:7px; padding:9px 15px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  font-size:14px; font-weight:500}
.ch-creators a:hover{border-color:var(--accent); color:var(--accent)}
.ch-creators .ic{width:16px; height:16px; color:#c4302b}

/* notes + footer ----------------------------------------------------------- */
.ch-note{display:flex; gap:11px; margin:18px 0 0; font-size:13.5px; line-height:1.6;
  color:var(--muted); max-width:78ch}
.ch-note .ic{width:17px; height:17px; flex-shrink:0; margin-top:3px; color:var(--accent)}
/* Centred sign-off with the mascot, closing the page the same way the case
   file opens it — dashed rule rather than the hard border it had. */
.ch-foot{margin-top:clamp(64px,10vw,110px); padding:0 0 clamp(40px,7vw,64px)}
.ch-foot__in{display:flex; flex-direction:column; align-items:center; gap:14px;
  padding-top:clamp(28px,5vw,40px); border-top:1px dashed var(--dash); text-align:center}
.ch-foot__mark{width:44px; height:44px; border-radius:50%;
  box-shadow:0 2px 10px rgba(107,36,16,.12)}
.ch-foot p{margin:0; max-width:46ch; font-size:14px; line-height:1.65; color:var(--muted)}
.ch-foot a{color:var(--ink); font-weight:600; text-decoration:none;
  border-bottom:1.5px solid var(--accent-2); transition:color .15s, border-color .15s}
.ch-foot a:hover{color:var(--accent); border-color:var(--accent)}

/* index of challenges ------------------------------------------------------ */
.ch-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px;
  margin:30px 0 0; padding:0; list-style:none}
.ch-card{display:block; background:var(--surface); border:1px solid var(--border);
  border-radius:18px; padding:24px; transition:transform .15s, box-shadow .15s}
.ch-card:hover{transform:translateY(-2px); box-shadow:var(--sh-card); color:var(--ink)}
.ch-card__meta{font-family:'DM Mono',ui-monospace,monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint)}
.ch-card h3{margin:9px 0 0; font-size:21px; letter-spacing:-.02em; line-height:1.2}
.ch-card p{margin:9px 0 0; font-size:14px; line-height:1.55; color:var(--muted)}
.ch-card__go{display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-size:14px; font-weight:600; color:var(--accent)}
.ch-pill{display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:var(--t-body-bg); color:var(--t-body-ink)}
.ch-pill--past{background:var(--tint); color:var(--muted)}

@media (max-width:620px){
  .ch-day{grid-template-columns:48px 1fr; gap:0 12px; padding:14px 16px}
  .ch-day__m{grid-column:2; margin-top:4px}
  .ch-btn{width:100%; justify-content:center}
}