/* ===========================================================================
   IronCore World
   ---------------------------------------------------------------------------
   Self-contained. No engine, no scroll rig, no WebGL. The page scrolls the way
   the browser scrolls it; the only thing that reacts to scroll is the header
   condensing and a short fade-up on entry, which is CSS.

   Direction: athletic editorial. Near-black ground, bone, one hot red. Sharp
   corners, heavy condensed caps, big numbers, hard rules. Nothing rounded,
   nothing soft, nothing that reads as a cartoon.
   ========================================================================= */

:root {
  --ink:        #0A0C0F;   /* near black, the ground                  */
  --ink-2:      #12161B;   /* raised surface on dark                  */
  --bone:       #F4F2ED;   /* light ground                            */
  --bone-2:     #E7E3DA;   /* sunk light                              */
  --paper-ink:  #0E1216;   /* text on light                           */
  --soft:       #8E9AA6;   /* secondary on dark                       */
  --soft-dark:  #545E68;   /* secondary on light                      */
  --red:        #E8320C;   /* the accent, on dark                     */
  --red-deep:   #C22A0A;   /* same hue, 5:1 on bone                   */
  --line:       color-mix(in oklab, #F4F2ED 15%, transparent);
  --line-dark:  color-mix(in oklab, #0A0C0F 16%, transparent);

  --display: "Archivo", Impact, system-ui, sans-serif;
  --text:    "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem;   --s7:3rem;  --s8:4rem;   --s9:6rem; --s10:8rem;

  --gutter: clamp(1.15rem, 4.5vw, 4.5rem);
  --maxw:   80rem;
  --section: clamp(4rem, 8vw, 8.5rem);
  --navh: 68px;

  --ease: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--navh) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--text);font-size:clamp(1rem,.97rem + .15vw,1.08rem);
  line-height:1.62;-webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
::selection{background:var(--red);color:#fff}

:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

.skip{
  position:fixed;top:-100px;left:1rem;z-index:300;background:var(--red);color:#fff;
  padding:.7rem 1.1rem;font-weight:700;text-decoration:none;
}
.skip:focus-visible{top:.75rem}

/* ------------------------------------------------------------------ type -- */
.display{
  font-family:var(--display);font-weight:800;font-stretch:112%;
  line-height:.96;letter-spacing:-.028em;text-wrap:balance;margin:0;
}
.h2{font-size:clamp(1.95rem,1.25rem + 2.9vw,3.5rem)}

.kicker{
  margin:0 0 var(--s4);font-family:var(--display);font-weight:750;
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);
}
.kicker--dark{color:var(--red-deep)}

.lede{font-size:clamp(1.05rem,1rem + .4vw,1.3rem);line-height:1.5;max-width:44ch;text-wrap:pretty}

/* --------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--display);font-weight:750;letter-spacing:.01em;
  padding:.85rem 1.35rem;min-height:48px;border:2px solid transparent;
  text-decoration:none;white-space:nowrap;
  transition:background 160ms var(--ease),color 160ms var(--ease),
             border-color 160ms var(--ease),transform 120ms var(--ease);
}
.btn__i{width:20px;height:20px;flex:none}
.btn--lg{padding:1.05rem 1.7rem;min-height:56px;font-size:1.05rem}
.btn--accent{background:var(--red);color:#fff}
.btn--dark{background:var(--ink);color:var(--bone)}
.btn--ghost{border-color:color-mix(in oklab,#F4F2ED 45%,transparent);color:var(--bone)}
.btn--outline{border-color:var(--line-dark);color:var(--paper-ink)}
@media (hover:hover){
  .btn--accent:hover{background:#ff4a22}
  .btn--dark:hover{background:#000}
  .btn--ghost:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
  .btn--outline:hover{background:var(--paper-ink);color:var(--bone);border-color:var(--paper-ink)}
  .btn:active{transform:translateY(1px)}
}

.row{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s6)}

/* ------------------------------------------------------------------ logo -- */
.logo{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;color:inherit}
.logo__mark{width:36px;height:36px;flex:none}
.logo__word{display:flex;flex-direction:column;line-height:1}
.logo__a{font-family:var(--display);font-weight:800;font-size:1.12rem;letter-spacing:.015em}
.logo__b{
  font-family:var(--display);font-weight:700;font-size:.53rem;
  letter-spacing:.40em;color:var(--red);margin-top:3px;
}
.logo--foot .logo__mark{width:42px;height:42px}

/* ------------------------------------------------------------------- nav -- */
.nav{
  position:sticky;top:0;z-index:100;
  background:color-mix(in oklab,var(--ink) 88%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color 200ms var(--ease),background 200ms var(--ease);
}
.nav.is-stuck{border-bottom-color:var(--line);background:color-mix(in oklab,var(--ink) 96%,transparent)}
.nav__in{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding:0 var(--gutter);
  height:var(--navh);display:flex;align-items:center;gap:var(--s5);
}
.nav__links{display:flex;gap:var(--s5);margin-left:auto}
.nav__links a{
  text-decoration:none;font-weight:600;font-size:.94rem;color:var(--soft);
  padding:.35rem 0;position:relative;transition:color 160ms var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform 200ms var(--ease);
}
@media (hover:hover){.nav__links a:hover{color:var(--bone)}.nav__links a:hover::after{transform:scaleX(1)}}
.nav__cta{padding:.6rem 1.05rem;min-height:42px;font-size:.92rem}
.nav__toggle{display:none;width:44px;height:44px;margin-left:auto;flex-direction:column;justify-content:center;gap:5px;padding:0 10px}
.nav__toggle span{display:block;height:2px;background:var(--bone);transition:transform 200ms var(--ease),opacity 160ms}
.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)}

.drawer{display:none;flex-direction:column;gap:var(--s2);padding:var(--s4) var(--gutter) var(--s6);border-top:1px solid var(--line)}
.drawer a{text-decoration:none;font-family:var(--display);font-weight:700;font-size:1.3rem;padding:.6rem 0}
.drawer .btn{margin-top:var(--s3);font-size:1rem}

@media (max-width:899px){
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:flex}
  .drawer[data-open]{display:flex}
}

/* ------------------------------------------------------------------ hero -- */
.hero{position:relative;min-height:clamp(560px,86vh,860px);display:flex;align-items:flex-end;overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,12,15,.72) 0%,rgba(10,12,15,.30) 34%,rgba(10,12,15,.82) 78%,rgba(10,12,15,.96) 100%);
}
.hero__in{position:relative;padding-top:var(--s9);padding-bottom:clamp(3rem,7vw,6rem)}
.hero__h{font-size:clamp(2.9rem,1.2rem + 7.4vw,7.6rem);max-width:13ch}
.hero__p{margin:var(--s5) 0 0;font-size:clamp(1.05rem,1rem + .45vw,1.35rem);max-width:46ch;color:#E2E0DA;text-wrap:pretty}

/* ------------------------------------------------------- the stats band -- */
.band{background:var(--bone);color:var(--paper-ink);border-bottom:1px solid var(--line-dark)}
.stats{
  list-style:none;margin:0;padding:clamp(2rem,3.5vw,3.25rem) 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);
}
.stat{display:flex;flex-direction:column;align-items:flex-start;padding-left:var(--s5);border-left:2px solid var(--line-dark)}
.stat:first-child{padding-left:0;border-left:0}
.stat--hot{color:var(--red-deep)}
.stat__n{font-family:var(--display);font-weight:850;font-size:clamp(2rem,1rem + 3.6vw,3.9rem);line-height:.9;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.stat__u{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-top:.35rem;opacity:.72}
.stat__l{font-weight:600;font-size:.92rem;margin-top:.5rem;color:var(--soft-dark)}
.stat--hot .stat__l{color:var(--red-deep)}
@media (max-width:719px){
  .stats{grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s4)}
  .stat:nth-child(3){padding-left:0;border-left:0}
}

/* -------------------------------------------------------------- sections -- */
.sec{padding-block:var(--section)}
.sec--dark{background:var(--ink)}
.sec--light{background:var(--bone);color:var(--paper-ink)}
.sec--light .lede{color:#2B333B}

.head{max-width:52rem;margin-bottom:clamp(2.5rem,4.5vw,4.5rem)}
.head__p{margin:var(--s5) 0 0;color:var(--soft);max-width:52ch;text-wrap:pretty}
.sec--light .head__p{color:var(--soft-dark)}
.head--split{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s6);flex-wrap:wrap}

.sub-h{font-family:var(--display);font-weight:750;font-size:1.15rem;letter-spacing:.01em;margin:var(--s8) 0 var(--s5)}
.inline-link{margin:var(--s5) 0 0}
.inline-link a{font-weight:600;text-underline-offset:4px}
.note{margin:var(--s5) 0 0;font-size:.85rem;color:var(--soft-dark);max-width:54ch}

/* --------------------------------------------------------- why choose us -- */
.why{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(2rem,4.5vw,4.5rem);align-items:start}
.why__media{position:sticky;top:calc(var(--navh) + 2rem)}
.why__media img{width:100%;height:clamp(20rem,46vh,30rem);object-fit:cover}
.why__body{min-width:0}

.reasons{list-style:none;margin:var(--s8) 0 0;padding:0}
.reason{display:grid;grid-template-columns:3rem 1fr;gap:var(--s5);padding:var(--s6) 0;border-top:1px solid var(--line-dark)}
.reason:last-child{border-bottom:1px solid var(--line-dark)}
.reason__n{font-family:var(--display);font-weight:800;font-size:.9rem;letter-spacing:.06em;color:var(--red-deep);font-variant-numeric:tabular-nums;padding-top:.25em}
.reason__h{margin:0 0 var(--s2);font-family:var(--display);font-weight:750;font-size:1.22rem;letter-spacing:-.012em;line-height:1.2}
.reason__p{margin:0;color:var(--soft-dark);text-wrap:pretty}

@media (max-width:949px){
  .why{grid-template-columns:1fr}
  .why__media{position:static;order:2}
  .why__body{order:1}
  .reasons{margin-top:var(--s6)}
  .reason{grid-template-columns:2.4rem 1fr;gap:var(--s4);padding:var(--s5) 0}
}



/* =============================================================== training --
   Three full-width bands, one per discipline, alternating ground and side:
   brick, bone, charcoal. Each band's photograph sits in a large circle with a
   smaller solid disc overlapping it, and that small disc carries the real
   split distance. Each variant only sets custom properties; the layout is
   shared. */
:root{ --brick:#86210F; }

.train{background:var(--ink)}
.train__intro{padding-block:var(--section) clamp(2.75rem,4.5vw,4rem)}
.train__intro .head{margin-bottom:0}

.leg{
  position:relative;overflow:hidden;
  padding-block:clamp(3.75rem,7.5vw,7.5rem);
  background:var(--band);color:var(--ink-on);
}
.leg--brick{
  --band:var(--brick); --ink-on:#fff; --soft-on:rgba(255,255,255,.84);
  --kick:#FFD2C6; --hl:rgba(232,50,12,.92); --rule:rgba(255,255,255,.24);
  --badge:var(--ink); --badge-ink:#fff; --num:rgba(255,255,255,.17);
}
.leg--light{
  --band:var(--bone); --ink-on:var(--paper-ink); --soft-on:var(--soft-dark);
  --kick:var(--red-deep); --hl:rgba(232,50,12,.26); --rule:var(--line-dark);
  --badge:var(--red-deep); --badge-ink:#fff; --num:rgba(10,12,15,.11);
}
.leg--dark{
  --band:var(--ink-2); --ink-on:var(--bone); --soft-on:var(--soft);
  --kick:var(--red); --hl:rgba(232,50,12,.82); --rule:var(--line);
  --badge:var(--bone); --badge-ink:var(--ink); --num:rgba(244,242,237,.11);
}

.leg__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5.5vw,6.5rem);align-items:center;
}
.leg--flip .leg__text{order:2}
.leg--flip .leg__art{order:1}

.leg__kick{color:var(--kick)}
.leg__h{font-size:clamp(2.2rem,1.25rem + 4vw,4.7rem);max-width:12ch}
.leg__p{margin:var(--s5) 0 0;color:var(--soft-on);max-width:44ch;text-wrap:pretty}
.leg__p + .leg__p{margin-top:var(--s4)}
.leg__pull{
  margin:var(--s6) 0 0;padding-top:var(--s5);max-width:30ch;
  border-top:1px solid var(--rule);
  font-family:var(--display);font-weight:750;font-size:clamp(1.05rem,1rem + .35vw,1.25rem);
  line-height:1.28;letter-spacing:-.01em;
}
.leg__pull span{display:block}

/* marker highlight behind a phrase, drawn across the lower part of the glyphs.
   box-decoration-break keeps the bar whole when the phrase wraps. */
.hl{
  background-image:linear-gradient(transparent 56%,var(--hl,rgba(232,50,12,.26)) 56%,var(--hl,rgba(232,50,12,.26)) 90%,transparent 90%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding-inline:.04em;
}

/* the art: big circle, smaller solid disc biting its lower edge, and the leg
   number turned on its side behind both */
.leg__art{position:relative;width:min(100%,540px);justify-self:center;isolation:isolate}
.leg__disc{position:relative;z-index:1;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#000}
.leg__disc img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
@media (hover:hover){.leg__art:hover .leg__disc img{transform:scale(1.04)}}

.leg__badge{
  position:absolute;z-index:2;left:-3%;bottom:2%;margin:0;
  width:clamp(104px,33%,176px);aspect-ratio:1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--badge);color:var(--badge-ink);
  /* a ring in the band colour, so the small disc reads as cut into the big one */
  box-shadow:0 0 0 clamp(6px,.9vw,10px) var(--band);
}
.leg--flip .leg__badge{left:auto;right:-3%}
.leg__badge-n{font-family:var(--display);font-weight:850;font-size:clamp(1.9rem,1rem + 2.4vw,3.2rem);line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.leg__badge-u{margin-top:.4rem;font-family:var(--display);font-weight:750;font-size:clamp(.6rem,.55rem + .2vw,.74rem);letter-spacing:.16em;text-transform:uppercase}

/* the leg number sits in the band's outer gutter, set vertically. It only
   appears where the gutter is wide enough to hold it clear of the circle;
   narrower than that it would sit behind the photo and read as a smudge. */
.leg__num{
  display:none;position:absolute;z-index:0;top:50%;right:clamp(.5rem,1.4vw,2rem);
  transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  font-family:var(--display);font-weight:900;font-stretch:115%;
  font-size:8.5rem;line-height:.78;letter-spacing:-.04em;
  color:var(--num);pointer-events:none;user-select:none;
}
.leg--flip .leg__num{right:auto;left:clamp(.5rem,1.4vw,2rem)}
@media (min-width:1400px){.leg__num{display:block}}

@media (max-width:899px){
  .leg__in{grid-template-columns:1fr;gap:var(--s7)}
  .leg__art,.leg--flip .leg__art{order:-1;width:min(82vw,420px)}
  .leg--flip .leg__text{order:0}
  .leg__h{max-width:14ch}
  .leg__badge{left:-2%}
  .leg--flip .leg__badge{right:-2%}
}

/* ---------------------------------------------------------- testimonials -- */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5)}
.quote{margin:0;background:var(--bone-2);border-left:3px solid var(--red-deep);padding:clamp(1.5rem,2.5vw,2.25rem)}
.quote__text{margin:0;font-size:clamp(1.02rem,.98rem + .35vw,1.2rem);line-height:1.5;text-wrap:pretty}
.quote__by{margin-top:var(--s5);display:flex;flex-direction:column;gap:2px}
.quote__name{font-family:var(--display);font-weight:750}
.quote__meta{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--soft-dark)}
@media (max-width:759px){.quotes{grid-template-columns:1fr}}

.reels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.reel a{position:relative;display:block;overflow:hidden;background:#000}
.reel img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;object-position:50% 22%;transition:transform 600ms var(--ease)}
.reel__play{
  position:absolute;left:50%;top:50%;width:46px;height:46px;transform:translate(-50%,-50%);
  background:color-mix(in oklab,#0A0C0F 55%,transparent);border:2px solid #fff;border-radius:50%;
}
.reel__play::after{content:"";position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);
  border-left:12px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.reel__name{
  position:absolute;left:0;bottom:0;right:0;padding:.55rem .7rem;
  font-family:var(--display);font-weight:700;font-size:.85rem;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.82));
}
@media (hover:hover){.reel a:hover img{transform:scale(1.05)}}
@media (max-width:719px){.reels{grid-template-columns:repeat(2,1fr)}}

/* ------------------------------------------------------------- cta band -- */
.cta{background:var(--red);color:#fff;padding-block:clamp(3rem,6vw,5.5rem)}
.cta__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);flex-wrap:wrap}
.cta__h{font-size:clamp(1.9rem,1.2rem + 2.6vw,3.2rem);max-width:18ch}
.cta__p{margin:var(--s4) 0 0;max-width:46ch;color:#FFE7E1}

/* ----------------------------------------------------------------- blog -- */
.posts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.post__a{
  display:flex;flex-direction:column;height:100%;text-decoration:none;
  padding:var(--s6);border:1px solid var(--line);
  transition:background 200ms var(--ease),border-color 200ms var(--ease);
}
@media (hover:hover){.post__a:hover{background:var(--ink-2);border-color:color-mix(in oklab,#F4F2ED 30%,transparent)}}
.post__tag{font-family:var(--display);font-weight:750;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.post__h{margin:var(--s4) 0 var(--s3);font-family:var(--display);font-weight:750;font-size:1.3rem;line-height:1.18;letter-spacing:-.015em}
.post__p{margin:0 0 var(--s6);color:var(--soft);font-size:.96rem;text-wrap:pretty}
.post__go{margin-top:auto;font-weight:650;color:var(--bone);border-bottom:2px solid var(--red);align-self:flex-start;padding-bottom:2px}
@media (max-width:899px){.posts{grid-template-columns:1fr}}

/* ------------------------------------------------------------ instagram -- */
.wall{list-style:none;margin:var(--s7) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s4)}
.tile a{display:block;overflow:hidden;background:#000}
/* height:auto is load-bearing: these stills carry height="1920", which makes
   the height definite and makes aspect-ratio a no-op. Without it every tile
   renders 1920px tall and cover crops a sliver of ceiling. */
.tile img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 28%;
  filter:saturate(.9);transition:transform 500ms var(--ease),filter 300ms var(--ease)}
@media (hover:hover){.tile a:hover img{transform:scale(1.05);filter:saturate(1.05)}}
@media (max-width:959px){.wall{grid-template-columns:repeat(3,1fr)}}
@media (max-width:639px){.wall{grid-template-columns:repeat(2,1fr)}.tile:nth-child(n+5){display:none}}

/* ---------------------------------------------------------------- footer -- */
.foot{background:#06080A;border-top:1px solid var(--line);padding-top:var(--section)}
.foot__in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s6);padding-bottom:var(--s8)}
.foot__tag{margin:var(--s4) 0 0;color:var(--soft);font-size:.95rem}
.foot__col h4{margin:0 0 var(--s4);font-family:var(--display);font-weight:750;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.foot__col p{margin:0 0 var(--s4)}
.foot__col ul{list-style:none;margin:0;padding:0}
/* inline-block + padding so the tap target matches the visual spacing.
   A bare inline <a> here is 18px tall, which fails WCAG 2.2 target size. */
.foot__col a,.foot__col li a{display:inline-block;padding:.42rem 0;text-decoration:none;color:var(--bone);border-bottom:1px solid transparent}
@media (hover:hover){.foot__col a:hover{border-bottom-color:var(--red)}}
.foot__fine{border-top:1px solid var(--line);padding-block:var(--s6) var(--s7)}
.foot__fine p{margin:0 0 var(--s3);color:var(--soft);font-size:.84rem;max-width:74ch}
@media (max-width:899px){.foot__in{grid-template-columns:1fr 1fr}}
@media (max-width:539px){.foot__in{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- reveal --
   One short fade-up, nothing scroll-linked. Visible by default so the page
   is fully readable if the script never runs. */
@media (prefers-reduced-motion:no-preference){
  .js [data-rv]{opacity:0;transform:translate3d(0,14px,0);
    transition:opacity 420ms var(--ease),transform 420ms var(--ease)}
  .js [data-rv].in{opacity:1;transform:none}
}

/* ===========================================================================
   Article pages (blog/*.html). The <html> carries .article, which flips the
   whole page to the light ground; the nav above inverts with it.
   ========================================================================= */
.article body{background:var(--bone);color:var(--paper-ink)}
.article .nav{background:color-mix(in oklab,var(--bone) 88%,transparent)}
.article .nav.is-stuck{background:color-mix(in oklab,var(--bone) 96%,transparent);border-bottom-color:var(--line-dark)}
.article .nav__links a{color:var(--soft-dark)}
@media (hover:hover){.article .nav__links a:hover{color:var(--paper-ink)}}
.article .nav__toggle span{background:var(--paper-ink)}
.article .drawer{border-top-color:var(--line-dark)}
.article .logo__b{color:var(--red-deep)}

.ahero{margin-top:var(--s6)}
.ahero__img{width:100%;height:clamp(13rem,34vh,22rem);object-fit:cover}

.ahead{width:100%;max-width:46rem;margin:clamp(2rem,4vw,3.5rem) auto 0;padding-inline:var(--gutter)}
.ahead__kicker{margin:0 0 var(--s4);font-family:var(--display);font-weight:750;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red-deep)}
.ahead__h{font-size:clamp(1.8rem,1.15rem + 2.6vw,3.1rem);text-wrap:balance}
.ahead__meta{margin:var(--s5) 0 0;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;color:var(--soft-dark)}

.prose{
  width:100%;max-width:42rem;margin:clamp(2.5rem,5vw,4rem) auto 0;
  padding-inline:var(--gutter);font-size:1.08rem;line-height:1.72;
}
.prose > *{max-width:100%}
.prose p{margin:0 0 var(--s5);text-wrap:pretty}
.prose .lede{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);line-height:1.5;color:var(--paper-ink);margin-bottom:var(--s6);max-width:none}
.prose h2{
  font-family:var(--display);font-weight:780;font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem);
  line-height:1.2;letter-spacing:-.018em;margin:var(--s8) 0 var(--s4);text-wrap:balance;
}
.prose ul,.prose ol{margin:0 0 var(--s5);padding-left:1.3rem}
.prose li{margin-bottom:var(--s3)}
.prose strong{font-weight:650}
.prose a{color:var(--red-deep);text-underline-offset:3px}

.aend{
  width:100%;max-width:42rem;margin:var(--s9) auto 0;padding:clamp(1.75rem,3.5vw,2.75rem) var(--gutter);
  border-top:2px solid var(--red-deep);
}
.aend__h{font-family:var(--display);font-weight:780;font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);line-height:1.14;letter-spacing:-.02em;margin:0 0 var(--s4)}
.aend__p{margin:0 0 var(--s6);color:var(--soft-dark);text-wrap:pretty}

.aback{display:block;width:100%;max-width:42rem;margin:var(--s8) auto 0;padding-inline:var(--gutter);font-weight:600}
.adisc{
  width:100%;max-width:42rem;margin:var(--s7) auto 0;padding:0 var(--gutter) var(--s9);
  font-size:.84rem;color:var(--soft-dark);
}

/* ------------------------------------------ elements the copy deck adds -- */

/* body paragraphs under a lede, on the light ground */
.body-p{margin:var(--s4) 0 0;color:var(--soft-dark);max-width:52ch;text-wrap:pretty}
.sec--dark .body-p{color:var(--soft)}

/* the bold promise line between a reason title and its body */
.reason__sub{margin:0 0 var(--s2);font-weight:650;color:var(--paper-ink);text-wrap:pretty}


/* the bold promise line under a post title */
.post__sub{margin:0 0 var(--s3);font-weight:650;color:var(--bone);text-wrap:pretty}

/* community band: kicker on the accent, and the reassurance under the button */
.cta__kicker{color:#FFD9D0}
.cta__act{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
.cta__note{margin:0;font-size:.88rem;font-style:italic;color:#FFE7E1}

/* the staccato list in The club. Short lines, held as a rhythm, not bullets. */
.beats{
  list-style:none;margin:var(--s5) 0 0;padding:0;
  font-family:var(--display);font-weight:750;
  font-size:clamp(1.05rem,1rem + .5vw,1.35rem);line-height:1.45;
  letter-spacing:-.01em;
}
.beats li{color:var(--paper-ink)}
.beats li + li{margin-top:2px}

/* "In their own words" sits directly under the section head, so it needs less
   air above it than the second sub-head does */
.sub-h--first{margin-top:0}