/* v6 (Claude): overrides on top of Erfan's styles. Loaded last.
   Header wordmark, hero and "Choose your North" titles, the nutrition band,
   the ultras with photos and route maps, and a calmer type scale. */

/* "Aso North" inside running text uses the same font as the text around it */
.an{font:inherit;letter-spacing:inherit;white-space:nowrap}

/* Header logo (v8): the needle's top tip lines up with the top of the capitals,
   and its crossbar with the top of the small letters (Diyako's alignment).
   Everything is in em, so the font size alone sets the whole logo. */
.brand{font:700 23px/1 var(--display);gap:.33em;align-items:center}
.brand .north-star{position:relative;top:.104em;width:1.4615em;height:1em}
.brand-name{font-size:1em;line-height:1;letter-spacing:-.01em;color:var(--red);white-space:nowrap}
.story-link{font-size:15px}
.header-choose{font-size:12px}

/* Section marks: the North needle */
.north-star{width:36px;height:24px}

/* Buttons */
.button,.btn{font-size:12.5px}

/* Hero: Erfan's layout, live text instead of the image (fixes the REYTHM typo).
   v8: the title stays on one line at every screen width. The line is about
   15.2 times as wide as the font size, so on phones the size shrinks to fit. */
.hero-title{font-family:var(--display);font-weight:700;font-style:italic;font-size:clamp(16px,calc((100vw - 48px) / 15.2),38px);line-height:1.02;letter-spacing:-.025em;text-transform:uppercase;color:var(--red);margin:0 0 30px}
h1,h2,h3,.lede{text-wrap:balance}

/* Headings */
h2{font-size:28px;letter-spacing:-.02em;margin:10px 0 12px}
.kicker{margin:20px 0 0;font:600 11.5px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.specifics .kicker{color:var(--ice)}
.lede,.life .lede{font-size:16px;line-height:1.5}

/* Choose your North: same size and form as the hero title */
.choose h2{font-size:38px;font-style:italic;line-height:1.02;letter-spacing:-.025em;text-transform:uppercase;margin:0 0 60px}
.choose .program-label{height:90px;gap:9px}
.choose .program-label .north-star{width:22px;height:15px}
/* v8: the three Asonauts labels use Urbanist. Urbanist is much narrower than Druk,
   so 21px Urbanist covers about the same space as the old 16px Druk. */
.choose .program-label h3{font-family:var(--body);font-weight:700;font-size:21px;font-style:italic;letter-spacing:-.01em}
.program-kind{margin:-2px 0 0;font:600 12px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#3f4566}
.choose .program-copy p{font-size:16px;line-height:1.25}
.choose .program-cta{font-size:12.5px}

/* Nutrition: one clear band under the three paths */
.addon-band{display:flex;align-items:center;gap:18px;width:min(1024px,calc(100% - var(--gutter)*2));margin:36px auto 0;padding:20px 26px;border:1px solid rgba(233,238,245,.26);border-left:4px solid var(--choose-red,#d6403c);border-radius:14px;background:rgba(255,255,255,.07);color:#fff}
.addon-plus{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--choose-red,#d6403c);color:#fff;font:700 24px/1 var(--body)}
.addon-title{margin:0 0 4px;font:700 15px/1.2 var(--display);letter-spacing:-.01em;text-transform:uppercase;color:#fff}
.addon-text{margin:0;font-size:15px;line-height:1.4;color:#dfe3ee}

/* Grid North: Erfan's table, without the small distance names under the numbers */
.race-distance-label{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.road-other{margin:28px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
.road-other-link{padding:0;border:0;background:none;color:var(--red-ink);font:600 15px/1.5 var(--body);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.road-other-link:hover{color:var(--red)}

/* Magnetic North: each ultra is a photo with its route map set into it */
.specifics{padding:100px 0 140px}
.routes{margin:60px 0 0}
.ultra{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,392px);grid-template-areas:"photo photo" "text map";gap:0 56px;align-items:start}
.ultra+.ultra{margin-top:100px;padding-top:0;border-top:0}
.ultra-photo{grid-area:photo;position:relative;isolation:isolate;aspect-ratio:2/1;border-radius:16px;overflow:hidden;background:#0e112b}
.ultra-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ultra-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,23,53,0) 46%,rgba(19,23,53,.42) 74%,rgba(19,23,53,.84) 100%)}
.ultra--assiniboine .ultra-photo img{object-position:50% 28%}
.ultra--rockwall .ultra-photo img{object-position:50% 32%}
.ultra-title{grid-area:photo;align-self:end;justify-self:start;position:relative;z-index:1;max-width:52%;padding:0 0 28px 32px}
.ultra-title h3{font-size:26px;line-height:1.1;letter-spacing:-.02em;margin:0 0 8px;color:#fff;white-space:normal}
.ultra-title .date{margin:0;font:600 14px/1.3 var(--body);letter-spacing:.01em;color:var(--ice)}
.ultra-map{grid-area:map;position:relative;z-index:2;margin:-236px 28px 0 0;padding:18px 18px 12px;border-radius:14px;background:rgba(14,18,44,.78);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(233,238,245,.12);box-shadow:0 30px 60px -20px rgba(4,7,22,.65)}
.map-route{display:block;width:100%;height:auto;overflow:visible}
.route-halo{fill:none;stroke:rgba(8,11,30,.55);stroke-width:9;stroke-linejoin:round;stroke-linecap:round}
.route-line{fill:none;stroke:var(--red);stroke-width:3.6;stroke-linejoin:round;stroke-linecap:round}
.pt-start{fill:#fff}
.pt-end{fill:var(--ice)}
.lbl-start,.lbl-end{font-family:var(--body);font-size:15px;font-weight:700}
.lbl-start{fill:#fff}
.lbl-end{fill:var(--ice)}
.map-profile{display:block;width:100%;height:60px;margin-top:4px}
.prof-fill{fill:#35788b;fill-opacity:.4}
.prof-line{fill:none;stroke:#8fe2ea;stroke-width:2;vector-effect:non-scaling-stroke}
.ultra-map figcaption{margin:8px 0 0;font:500 12px/1.4 var(--body);color:#aab2cf}
.ultra-text{grid-area:text;padding-top:36px}
.ultra-text p{font-size:15px;line-height:1.6;color:var(--on-dark);margin:0 0 14px}
.stats{margin:20px 0 24px}
.stats b{font-size:17px}
.stats span{font-size:11.5px}

/* True North */
.life{padding:140px 0 150px}
.tracks{margin-top:56px}
.track h3{font-size:18px}
.track p,.track ul{font-size:14px}

/* About */
.about{padding:140px 0}
.founder{grid-template-columns:260px 1fr;gap:60px}
.founder-photo{width:260px;height:260px}
/* v8: the name is smaller and set in Urbanist, the same font as the text under it */
.founder h2{font-family:var(--body);font-weight:700;font-size:28px;letter-spacing:-.01em;margin:0 0 18px}
.founder p{font-size:16px;line-height:1.6;margin:0 0 12px;color:#434b66}
.founder .cred{color:#434b66}

.site-footer{font-size:14px}

/* Questionnaire: a little smaller; inputs stay at 16px so phones don't zoom in */
.q-top .prog{font-size:14px}
.q-body h3,.result .pathname{font-size:20px}
.q-body .help{font-size:15px}
.opt{padding:12px 14px}
.opt b{font-size:15px;font-weight:600}
.opt small{font-size:13px}
label.f{font-size:14px}
.other-race{margin-top:14px}
input[type=number],input[type=text],input[type=email],select{font-size:16px;min-height:46px}
.units label,.yn .pair label{font-size:14px}
.yn span{font-size:15px}
.consent{font-size:14px}
.addon-choice{color:var(--navy);margin:14px 0 4px}
.err{font-size:14px}
.q-foot .btn{font-size:14px;min-height:42px}
.result li{font-size:15px}
.result .demo{font-size:14px}

@media (min-width:761px) and (max-width:1100px){
  .choose h2{font-size:clamp(30px,3.6vw,38px)}
  .choose .program-label h3{font-size:clamp(15.75px,1.9vw,21px)}
  .choose .program-copy p{font-size:clamp(12.5px,1.45vw,16px)}
  .ultra{grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:0 32px}
  .ultra-map{margin:-150px 18px 0 0;padding:14px 14px 10px}
  .ultra-title{padding:0 0 22px 24px;max-width:48%}
  .ultra-title h3{font-size:22px}
  .stats b{font-size:16px}
  .founder{grid-template-columns:220px 1fr;gap:44px}
  .founder-photo{width:220px;height:220px}
}

@media (max-width:760px){
  .brand{font-size:17px}
  .hero-title{margin-bottom:24px}
  .north-star{width:32px;height:21px}
  h2{font-size:clamp(22px,6vw,25px)}
  .kicker{font-size:11px;margin-top:16px}
  .lede,.life .lede{font-size:15px}
  .choose h2{font-size:clamp(24px,7.4vw,30px);margin-bottom:40px}
  .choose .program-label{height:78px;gap:8px}
  .choose .program-label .north-star{width:21px;height:14px}
  .choose .program-label h3{font-size:clamp(18px,5.25vw,21px)}
  .program-kind{font-size:11px}
  .choose .program-copy p{font-size:clamp(14px,3.8vw,16px)}
  .addon-band{width:calc(100% - 48px);gap:14px;margin-top:26px;padding:16px 18px}
  .addon-plus{width:34px;height:34px;font-size:21px}
  .addon-title{font-size:13px}
  .addon-text{font-size:14px}
  .road-other,.road-other-link{font-size:14.5px}
  .specifics{padding:80px 0 100px}
  .routes{margin-top:40px}
  .ultra{grid-template-columns:minmax(0,1fr);grid-template-areas:"photo" "map" "title" "text";gap:0}
  .ultra+.ultra{margin-top:72px}
  .ultra-photo{aspect-ratio:1/1;border-radius:12px}
  .ultra-photo::after{background:linear-gradient(180deg,rgba(19,23,53,0) 55%,rgba(19,23,53,.55) 100%)}
  .ultra-title{grid-area:title;align-self:start;max-width:none;padding:24px 0 0}
  .ultra-title h3{font-size:23px}
  .ultra-title .date{font-size:13.5px}
  .ultra-map{margin:-96px 12px 0;padding:14px 14px 10px}
  .ultra-text{padding-top:14px}
  .ultra-text p{font-size:15px}
  .stats b{font-size:16px}
  .life{padding:90px 0}
  .tracks{margin-top:40px}
  .track h3{font-size:17px}
  .track p,.track ul{font-size:15px}
  .about{padding:90px 0 80px}
  .founder{grid-template-columns:1fr;gap:30px}
  .founder-photo{width:200px;height:200px}
  .founder h2{font-size:24px}
  .founder p{font-size:15.5px}
}

@media (max-width:430px){
  .brand{font-size:15px}
}

@media (max-width:360px){
  .brand{font-size:13px}
}