/* =========================================================================
   La Dame Blanche — victoriastansfield.com
   Single-theme by design: matches the sponsor pack (dark, amber, condensed).
   Every colour is painted explicitly; nothing inherits from the host.
   ========================================================================= */

@font-face{
  font-family:"Anton";
  src:url("/assets/anton.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Spectral";
  src:url("/assets/spectral-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Spectral";
  src:url("/assets/spectral-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Boldoa";
  src:url("/assets/boldoa-mat.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

/* Victoria's palette. Every value is either one of her stated brand colours or
   lifted from the sponsor pack, nothing invented:
     #F2F4EC  off-white ground     (brand)
     #D5006D  deep magenta         (brand)   primary accent
     #FF69B4  hot pink             (brand)   secondary
     #FF8FA0  soft pink            (brand)
     #FFB74D  amber                (brand)   the bike leg
     #2A1320  plum-black           (pack)    text
     #6A5460  muted mauve          (pack)
     #D9C6CF  pale pink-grey       (pack)    rules
   The two disciplines are encoded in two brand colours: amber for the ride,
   magenta for the run. */
:root{
  --bg:#F2F4EC;
  --bg-2:#EAEDE2;
  --surface:#FFFFFF;
  --surface-2:#F7F8F2;
  --line:#D9C6CF;
  --line-soft:#E6DCE1;
  --ink:#2A1320;
  --ink-2:#4A3340;
  --muted:#6A5460;

  --accent:#D5006D;
  --accent-2:#FF69B4;
  --accent-soft:#FF8FA0;
  --warm:#FFB74D;

  --amber:#D5006D;
  --amber-ink:#FFFFFF;
  --amber-dim:rgba(213,0,109,.08);
  --amber-line:rgba(213,0,109,.28);

  --display:"Anton",Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
  /* Boldoa Mat has no middle dot, en dash or em dash, so it is used only where
     those never appear. Separators in Boldoa text use the bullet it does have. */
  --brand:"Boldoa","Anton",Impact,sans-serif;
  --sans:"Spectral",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --gut:clamp(20px,5vw,48px);
  --maxw:1120px;
  --sec-gap:clamp(56px,9vw,120px);
}

*,*::before,*::after{box-sizing:border-box}

/* An author `display` rule beats the UA stylesheet's [hidden]{display:none},
   so .climbed and .next were visible before the event with empty values. */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%}

.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

.display{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:.92;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--amber);color:var(--amber-ink);padding:10px 16px;font-weight:600;
}
.skip:focus{left:8px;top:8px}

a{color:var(--amber);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#FF69B4}

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

.cap{
  display:block;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--muted);
  line-height:1.4;
}

.eyebrow{
  font-family:var(--brand);
  font-size:15px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--amber);
  margin:0 0 18px;
}

/* ============================================================ STATUS BAR */
.statusbar{
  position:sticky;top:0;z-index:40;
  background:rgba(242,244,236,.93);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.statusbar-in{
  max-width:var(--maxw);margin:0 auto;
  padding:10px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.sb-clocks{display:flex;gap:24px;align-items:baseline}
.sb-clock b{
  display:block;font-family:var(--mono);font-weight:700;
  font-size:clamp(20px,3.6vw,28px);line-height:1.05;letter-spacing:-.02em;color:var(--ink);
}
.sb-secondary b{font-size:clamp(14px,2.2vw,17px);color:var(--ink-2)}
.sb-where{text-align:right;min-width:0}
.sb-where b{display:block;font-size:14px;font-weight:600;color:var(--ink-2);line-height:1.3}

/* ============================================================ HERO */
.hero{
  position:relative;
  min-height:min(92vh,860px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(56px,10vh,120px) var(--gut) 0;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 100%,rgba(213,0,109,.06) 0%,transparent 60%),
    linear-gradient(180deg,#F2F4EC 0%,#EDEFE4 55%,#F2F4EC 100%);
  border-bottom:1px solid var(--line);
}
/* Same treatment as the home hero: a real image in its own column, flush to
   the bottom rule, no scrim over it. It sits beside the type on desktop and
   tablet and drops below it on a phone, so nothing ever has to be washed out
   to keep the headline legible. */
.hero-in{
  position:relative;width:100%;max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,64px);
  align-items:stretch;
}
.hero-col{min-width:0}
/* The photo fills its column for the whole height of the copy, so the hero has
   no dead corner. Cropped from the 6000px original rather than upscaled. */
.hero-shot{position:relative;min-width:0}
/* Absolutely placed so the picture contributes no intrinsic height: the copy
   sets how tall the row is and the photo fills exactly that, leaving no gap
   under the last line. */
.hero-shot img{
  position:absolute;inset:0;
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:50% 55%;
  border-radius:6px;
}
/* Decorative here; the live marker lives on the full profile further down.
   Sits below the grid, under the photo, spanning the content width. */
.hero-media{
  width:100%;max-width:var(--maxw);margin:clamp(26px,4.5vh,44px) auto 0;
  height:min(28vh,210px);pointer-events:none;opacity:.9;
}
.hero-prof{width:100%;height:100%;display:block}

h1.display{
  font-size:clamp(58px,14.5vw,168px);
  margin:0 0 20px;
  color:var(--ink);
  text-wrap:balance;
}
.hero-sub{color:var(--ink-2);
  font-family:var(--mono);font-size:clamp(11px,1.5vw,13px);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);
  margin:0 0 clamp(32px,5vh,52px);
}
.hero-sub .arw{color:var(--amber);padding:0 2px}
.hero-sub .sep{padding:0 .5em;color:var(--muted)}
.hero-blurb{color:var(--ink);
  margin:clamp(28px,4vh,40px) 0 0;
  max-width:34ch;font-size:clamp(16px,2vw,19px);color:var(--ink-2);line-height:1.5;
}

/* timer */
.timer{
  border-left:3px solid var(--amber);
  padding:2px 0 2px 18px;
}
.timer-val{
  font-size:clamp(38px,8.5vw,84px);
  margin:6px 0 4px;color:var(--ink);line-height:.95;
}
.timer-note{margin:0;font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em}

/* ============================================================ SECTIONS */
.sec{
  max-width:var(--maxw);
  margin:0 auto;
  padding:var(--sec-gap) var(--gut);
  border-bottom:1px solid var(--line-soft);
}
.sec:last-of-type{border-bottom:0}
.sec-h{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  letter-spacing:.005em;line-height:.92;
  font-size:clamp(30px,6vw,62px);
  margin:0 0 20px;color:var(--ink);text-wrap:balance;
}
.sec-lede{
  margin:0 0 clamp(30px,5vw,46px);
  max-width:62ch;color:var(--ink-2);font-size:clamp(15.5px,1.8vw,18px);
}
/* Paragraphs that belong together should read as paragraphs, not as separate
   blocks with a section-sized hole between them. */
.sec-lede + .sec-lede{margin-top:calc(clamp(30px,5vw,46px) * -1 + 8px)}

/* ============================================================ MAP */
.mapwrap{
  border:1px solid var(--line);border-radius:6px;overflow:hidden;
  background:var(--surface);min-height:clamp(420px,70vh,720px);
  display:flex;
}
.mapwrap iframe{width:100%;height:clamp(420px,70vh,720px);border:0;display:block}
.map-placeholder{
  margin:auto;padding:32px;text-align:center;color:var(--muted);max-width:38ch;
}
.map-placeholder p{margin:8px 0 0;font-size:15px}
.map-fallback-cta{margin-top:18px !important}
.map-meta-right{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
#trackerLink{color:var(--amber);text-decoration:underline;text-underline-offset:3px}
.map-slow{
  margin:12px 0 0;padding:12px 16px;border-radius:4px;
  background:var(--amber-dim);border:1px solid var(--amber-line);
  font-size:14px;color:var(--ink-2);
}
.map-meta{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin:12px 0 0;font-family:var(--mono);font-size:11.5px;color:var(--muted);
}
.linkbtn{
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  font:inherit;color:var(--amber);text-decoration:underline;text-underline-offset:3px;
}
.deadzone{
  margin:14px 0 0;padding:16px 18px;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:4px;
}
.deadzone p{margin:0;font-size:15px;color:var(--ink-2)}

/* ============================================================ NEXT CHECKPOINT */
.next{
  display:grid;grid-template-columns:1.2fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:6px;overflow:hidden;margin:18px 0 0;
}
.next > div{background:var(--surface);padding:18px 20px;display:flex;flex-direction:column;gap:7px}
.next-name{font-size:clamp(24px,4.2vw,38px);color:var(--ink);line-height:.95}
.next-dist{font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.next-eta b{
  font-family:var(--mono);font-size:clamp(19px,3.2vw,26px);font-weight:700;
  color:var(--amber);line-height:1.05;font-variant-numeric:tabular-nums;
}
.next-cav{font-size:12.5px;color:var(--muted);line-height:1.45}
.next-last{
  grid-column:1/-1;background:var(--surface);margin:0;padding:12px 20px;
  font-family:var(--mono);font-size:12px;color:var(--muted);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-variant-numeric:tabular-nums;
}
.next-last b{color:var(--ink-2);font-weight:600}
.next-last .behind{color:var(--amber)}
.next-last .ahead{color:#1E7A4}
@media (max-width:620px){ .next{grid-template-columns:1fr} }

/* ============================================================ STATS */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  margin:0 0 clamp(34px,5vw,52px);
}
.stat{background:var(--surface);padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px}
.stat-when{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.02em}
/* Three cards in a two-column grid leaves a hole, and the divider colour shows
   through it as a stray pink block. Make the last card span the full width. */
@media (max-width:719px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats .stat:last-child{grid-column:1/-1}
}
@media (max-width:459px){
  .stats{grid-template-columns:1fr}
  .stats .stat:last-child{grid-column:auto}
}
.stat b{font-size:clamp(38px,6.5vw,60px);color:var(--ink);line-height:.9}
.stat b i{font-family:var(--brand);font-style:normal;font-size:.32em;color:var(--muted);padding-left:.18em;letter-spacing:.01em}
.stat-sub{font-size:14.5px;color:var(--muted);line-height:1.5}

/* ============================================================ PROFILE */
/* The caption row was flex space-between, so the middle label sat at 50% while
   the dashed split line sits at the real changeover. Pin it to --split, which
   the profile drawing sets from the data. */
.proffig{margin:0;position:relative}
.proflabels{position:relative}
.pl-mid{
  position:absolute;left:var(--split,50%);transform:translateX(-50%);
  white-space:nowrap;
}
.prof{width:100%;height:clamp(120px,22vw,200px);display:block}
.proflabels{
  display:flex;justify-content:space-between;gap:12px;
  margin:10px 0 0;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.pl-mid{color:var(--amber);opacity:.8}

.climbed{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  margin:24px 0 0;
}
.climbed .pbar{grid-column:1/-1}
.cell{background:var(--surface);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.cell b{font-family:var(--mono);font-size:clamp(20px,3.4vw,28px);font-weight:700;color:var(--ink);line-height:1}
.pbar{height:5px;background:var(--surface)}
.pbar i{display:block;height:100%;background:var(--amber);width:0;transition:width .6s ease}

/* ============================================================ TIMELINE */
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tl-day{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);padding:26px 0 10px;border-bottom:1px solid var(--line-soft);margin-bottom:4px;
}
.timeline > li:first-child .tl-day{padding-top:0}
.tl-item{
  display:grid;grid-template-columns:78px 1fr;gap:16px;
  padding:14px 0 14px 14px;border-left:2px solid var(--line);
  transition:border-color .4s ease,opacity .4s ease;
}
.tl-item .tl-time{
  font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink-2);
  font-variant-numeric:tabular-nums;padding-top:1px;
}
.tl-item h3{margin:0 0 3px;font-size:16px;font-weight:650;color:var(--ink);letter-spacing:-.01em}
.tl-item p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.5}
.tl-item.is-past{opacity:.48}
.tl-item.is-now{border-left-color:var(--amber);background:var(--amber-dim)}
.tl-item.is-now .tl-time{color:var(--amber)}
.tl-badge{
  display:inline-block;margin-left:8px;padding:1px 7px;border-radius:2px;
  background:var(--amber);color:var(--amber-ink);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  vertical-align:2px;font-weight:700;
}

/* ============================================================ FUELLING */
.fuel-head{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:0 0 28px;
}
.fuel-head .cell b{font-family:var(--display);font-size:clamp(34px,5.5vw,52px);line-height:.9}
.fuel-head .cell b i{font-family:var(--brand);font-style:normal;font-size:.32em;color:var(--muted);padding-left:.15em}
.fuel-head .cell b i.word{padding-left:.4em}

.fuelchart{
  display:flex;align-items:flex-end;gap:2px;height:clamp(90px,16vw,140px);
  padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:6px;
}
.fuelchart i{
  flex:1;min-width:2px;background:var(--surface-2);border-radius:1px 1px 0 0;
  transition:background .3s ease;
}
.fuelchart i.is-bike{background:#FFB74D}
.fuelchart i.is-rest{background:#FFD69A}
.fuelchart i.is-run{background:#FF8FA0}
.fuelchart i.is-now{background:var(--amber)}
.fuel-axis{
  display:flex;justify-content:space-between;margin:9px 0 30px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}

.fuelphases{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.fuelphases li{
  background:var(--surface);padding:14px 18px;
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
}
.fuelphases h4{margin:0;font-size:15.5px;font-weight:650;color:var(--ink)}
.fuelphases p{margin:2px 0 0;font-size:14px;color:var(--muted)}
.fuelphases .fp-num{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--amber);white-space:nowrap;font-variant-numeric:tabular-nums}

.sponsor{display:flex;align-items:center;gap:14px;margin:26px 0 0;flex-wrap:wrap}
.sponsor-slot{
  font-family:var(--brand);font-size:20px;letter-spacing:.04em;color:var(--ink-2);
  border:1px solid var(--line);border-radius:4px;padding:8px 16px;text-transform:uppercase;
}

/* ============================================================ CTA */
.cta{background:var(--bg-2)}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 34px}
.btn{
  display:inline-block;padding:14px 24px;border-radius:3px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-family:var(--brand);font-size:14px;letter-spacing:.08em;text-transform:uppercase;font-weight:400;
  text-decoration:none;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.btn:hover{background:var(--surface-2);border-color:var(--accent);color:var(--accent)}
.btn-primary{background:var(--amber);border-color:var(--amber);color:var(--amber-ink)}
.btn-primary:hover{background:#FF69B4;border-color:#FF69B4;color:#FFFFFF}

.signup{max-width:520px}
.signup .cap{margin-bottom:10px}
.signup-row{display:flex;gap:8px;flex-wrap:wrap}
.signup input[type=email]{
  flex:1 1 220px;min-width:0;padding:14px 16px;border-radius:3px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  font-family:var(--sans);font-size:16px;
}
.signup input::placeholder{color:#9B8794}
.signup-msg{margin:10px 0 0;font-size:14px;color:var(--amber);min-height:1.2em}
.signup-msg.is-err{color:#B03A2E}

/* ============================================================ STORY */
.story-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,4vw,52px);align-items:start}
.story-body p{margin:0 0 18px;color:var(--ink-2);font-size:clamp(16px,1.9vw,18.5px);max-width:60ch}
.story-body .pull{
  margin-top:28px;padding-left:18px;border-left:3px solid var(--amber);
  color:var(--ink);font-size:clamp(18px,2.4vw,23px);line-height:1.42;font-weight:500;
}

/* ============================================================ FOOTER */
.foot{border-top:1px solid var(--line);background:var(--bg-2)}
.foot-in{
  max-width:var(--maxw);margin:0 auto;padding:clamp(40px,7vw,68px) var(--gut);
  display:flex;flex-direction:column;gap:22px;
}
.foot-mark{font-size:clamp(30px,6vw,54px);color:var(--line);margin:0;line-height:.9}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;
}
.foot-links a:hover{color:var(--amber)}
.foot-meta{margin:0;font-size:13px;color:var(--muted);line-height:1.6}

/* ============================================================ RESPONSIVE */
@media (max-width:760px){
  .story-grid{grid-template-columns:1fr}
  .story-media{order:-1;max-width:280px}
  .sb-where{display:none}
  .statusbar-in{justify-content:flex-start}
  .tl-item{grid-template-columns:64px 1fr;gap:12px}
}

/* The headline still spans most of the width well past the layout breakpoint,
   and no scrim rescues full-bleed type sitting over a busy graphic. Below
   1000px, reserve the media height as padding so the profile sits fully BELOW
   the type rather than behind it. Above it, the horizontal scrim does the job. */
/* Below 820px, the same breakpoint the home hero stacks at, the headline
   spans the full width and the photo drops under the type instead of beside
   it. Above that, tablet included, they sit side by side. */
@media (max-width:820px){
  .hero{min-height:auto;padding-top:clamp(48px,9vh,80px)}
  .hero-in{grid-template-columns:1fr;gap:0}
  .hero-col{padding-bottom:26px}
  .hero-shot{max-width:340px}
  .hero-shot img{position:static;height:auto;aspect-ratio:4/5;object-position:62% 26%}
  .hero-media{margin-top:clamp(22px,4vh,34px);height:min(26vh,210px);opacity:.8}
  .hero-blurb{color:var(--ink);margin-top:26px}
  .hero-sub{color:var(--ink-2);letter-spacing:.12em;line-height:1.7}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* =========================================================================
   HOME PAGE
   Same tokens, same three faces. The only live element is the strip, which
   exists solely while she is on the course.
   ========================================================================= */

.livestrip{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px var(--gut);
  background:var(--accent);color:#FFFFFF;text-decoration:none;
  font-family:var(--mono);font-size:13px;
}
.livestrip b{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.livestrip-label{
  font-family:var(--brand);font-size:14px;letter-spacing:.08em;text-transform:uppercase;
}
.livestrip-where{color:rgba(255,255,255,.85)}
.livestrip-go{margin-left:auto;font-weight:600}
.livestrip:hover{background:#BA0060;color:#FFFFFF}
.livedot{
  width:9px;height:9px;border-radius:50%;background:#FFFFFF;flex:none;
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.livedot{animation:none}}

/* ---- hero ---- */
.h-hero{
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(90% 70% at 15% 0%,rgba(213,0,109,.05) 0%,transparent 60%),
    var(--bg);
}
.h-hero-in{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(48px,8vw,96px) var(--gut) 0;
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,64px);
  align-items:end;
}
.h-hero-text{padding-bottom:clamp(48px,8vw,96px)}
.h-hero h1{
  font-size:clamp(48px,9vw,104px);margin:0 0 24px;color:var(--ink);line-height:.9;
}
.h-lede{
  margin:0 0 32px;max-width:46ch;
  font-size:clamp(17px,2vw,21px);line-height:1.5;color:var(--ink-2);
}
.h-hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.h-hero-media{align-self:end}
.h-hero-media img{
  display:block;width:100%;height:auto;border-radius:6px 6px 0 0;
}

/* ---- story ---- */
.h-story{max-width:62ch}
.h-story p{margin:0 0 18px;color:var(--ink-2);font-size:clamp(16px,1.9vw,18.5px)}
.h-story .pull{
  margin:28px 0;padding-left:18px;border-left:3px solid var(--accent);
  font-family:var(--brand);color:var(--accent);
  font-size:clamp(18px,2.3vw,24px);line-height:1.38;max-width:30ch;
}

/* ---- results ---- */
.results{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;
}
.results li{
  background:var(--surface);padding:20px 22px;
  display:grid;grid-template-columns:1fr auto;gap:6px 18px;align-items:baseline;
}
.results b{
  font-size:clamp(20px,2.6vw,26px);color:var(--ink);line-height:1;grid-column:1;
}
.r-note{grid-column:1;color:var(--muted);font-size:15.5px}
.r-tag{
  grid-column:2;grid-row:1/3;align-self:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}

/* ---- current project ---- */
.h-project{background:var(--bg-2)}
.h-project-grid{
  display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(24px,4vw,52px);align-items:start;
}
.h-project-stats{
  display:flex;flex-direction:column;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;
}
.h-project-stats > div{
  background:var(--surface);padding:16px 20px;display:flex;flex-direction:column;gap:6px;
}
.h-project-stats b{font-size:clamp(28px,4vw,40px);color:var(--ink);line-height:.9}
.h-project-stats b i{
  font-family:var(--brand);font-style:normal;font-size:.34em;color:var(--muted);
  padding-left:.15em;
}

/* ---- partnerships ---- */
.h-partner{max-width:60ch}
.h-partner p{margin:0 0 16px;color:var(--ink-2);font-size:clamp(16px,1.9vw,18px)}
.h-partner b{color:var(--ink);font-weight:600}
.h-contact{margin-top:26px !important}

@media (max-width:820px){
  .h-hero-in{grid-template-columns:1fr;padding-bottom:0}
  .h-hero-text{padding-bottom:32px}
  .h-hero-media{max-width:340px}
  .h-project-grid{grid-template-columns:1fr}
  .results li{grid-template-columns:1fr}
  .r-tag{grid-column:1;grid-row:auto;padding-top:4px}
  .livestrip{font-size:12px;gap:10px}
  .livestrip-go{margin-left:0;width:100%}
}

/* Her strongest lines get to sit on their own. */
.h-line{
  font-family:var(--brand);
  font-size:clamp(19px,2.5vw,26px) !important;
  color:var(--accent) !important;
  line-height:1.35;
  margin:clamp(30px,5vw,44px) 0 !important;
  max-width:34ch;
  text-wrap:balance;
}
.h-why{background:var(--bg-2)}
.home .h-hero h1{font-size:clamp(38px,6.4vw,74px);line-height:.98}
.h-project-stats b i{white-space:nowrap}

/* The challenge page was a dead end with no route back to the site. */
.masthead{margin:0 0 20px;font-family:var(--mono);font-size:12px;letter-spacing:.1em}
.masthead a{color:var(--muted);text-decoration:none}
.masthead a:hover{color:var(--accent)}

.foot-mark a{color:inherit;text-decoration:none}
.foot-mark a:hover{color:var(--accent)}

/* ============================================================ THE PAUSE
   Not a section. A held breath between who she is and what she is doing.
   Full width, her deepest ground, nothing else on screen. */
.pause{
  background:var(--ink);
  padding:clamp(72px,14vw,164px) var(--gut);
  text-align:center;
}
.pause-in{max-width:var(--maxw);margin:0 auto}
.pause-lead{
  margin:0 0 14px;font-family:var(--mono);
  font-size:clamp(12px,1.7vw,15px);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-soft);
}
.pause-name{
  margin:0;color:var(--bg);
  font-size:clamp(40px,9vw,110px);line-height:.92;text-wrap:balance;
}

/* the legend, standing in for the old one-line hero blurb */
.hero-legend{margin-top:clamp(26px,4vw,40px);max-width:46ch}
.hero-legend p{
  margin:0 0 14px;color:var(--ink-2);
  font-size:clamp(15.5px,1.8vw,17.5px);line-height:1.55;
}
.hero-legend .hero-legend-last{
  font-family:var(--brand);color:var(--accent);
  font-size:clamp(17px,2.2vw,22px);line-height:1.38;margin-top:20px;
}