/* Layout: topographic ground → race-bib hero → career as an elevation profile with checkpoints → aid stations (skills) → results table (projects) → start line (contact) */
:root{
  --ground:#EEF0E9; --surface:#FFFFFF; --ink:#1C2A24; --muted:#536057; --line:#C9D1C4;
  --signal:#C2440F; --on-signal:#FFFFFF; --forest:#2F5A43; --soft:#DCE5D5;
  --display:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body:'Barlow', system-ui, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;overflow-x:hidden}
h1,h2,h3,p,ul{margin:0}
a{color:var(--signal)}
a:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.g{padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.in{max-width:1160px;margin:0 auto}
.topo{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.topo svg{width:100%;height:100%;animation:drift 40s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(-30px,20px) scale(1.04)}}
.eyebrow{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--forest)}
h2{font-family:var(--display);font-weight:800;font-size:clamp(38px,5.5vw,64px);line-height:.95;text-transform:uppercase;text-wrap:balance}

/* Nav */
.nav{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-block:18px}
.brand{font-family:var(--display);font-weight:800;font-size:24px;text-transform:uppercase;color:var(--ink);text-decoration:none;font-style:italic}
.brand span{color:var(--signal)}
.nav nav{display:flex;gap:4px 22px;flex-wrap:wrap}
.nav nav a{font-family:var(--display);font-weight:600;font-size:18px;text-transform:uppercase;color:var(--ink);text-decoration:none;min-height:44px;display:flex;align-items:center}
.nav nav a:hover{color:var(--signal)}

/* Hero */
.hero-wrap{position:relative}
.hero{display:flex;flex-wrap:wrap;gap:48px;align-items:center;padding-block:48px 80px}
.hero-txt{flex:1 1 400px;min-width:0;display:flex;flex-direction:column;gap:20px}
.hero h1{font-family:var(--display);font-weight:800;font-style:italic;font-size:clamp(48px,7.5vw,96px);line-height:.9;text-transform:uppercase}
.hero h1 span{color:var(--signal)}
.hero p{font-size:20px;color:var(--muted);max-width:44ch}
.btn{font-family:var(--display);font-weight:800;font-size:20px;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;padding:12px 26px;min-height:48px;display:inline-flex;align-items:center;gap:10px;border-radius:4px;transition:transform .2s}
.btn-p{background:var(--signal);color:var(--on-signal)}
.btn-s{border:2px solid var(--ink);color:var(--ink)}
.btn:hover{transform:translateY(-3px)}
.actions{display:flex;gap:12px;flex-wrap:wrap}

/* Race bib */
.bib{flex:0 1 400px;max-width:100%;background:var(--surface);border-radius:10px;box-shadow:0 24px 50px -24px rgba(28,42,36,.45);position:relative;transform:rotate(-3deg);transition:transform .5s cubic-bezier(.2,.8,.2,1);animation:bibIn 1s cubic-bezier(.2,.8,.2,1) both}
.bib:hover{transform:rotate(0) scale(1.02)}
@keyframes bibIn{from{opacity:0;transform:rotate(-14deg) translateY(40px)}}
.bib-top{background:var(--signal);color:var(--on-signal);font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.12em;text-transform:uppercase;padding:12px 24px;border-radius:10px 10px 0 0;display:flex;justify-content:space-between}
.bib-num{font-family:var(--display);font-weight:800;font-size:clamp(120px,22vw,180px);line-height:.85;text-align:center;padding:24px 16px 6px;font-variant-numeric:tabular-nums}
.bib-num small{font-size:.28em;vertical-align:top;margin-left:4px}
.bib-name{text-align:center;font-family:var(--display);font-weight:800;font-size:28px;text-transform:uppercase;padding:0 16px}
.bib-sub{text-align:center;color:var(--muted);padding:2px 16px 22px;font-size:15px}
.bib-code{border-top:2px dashed var(--line);display:flex;justify-content:space-between;padding:12px 24px 16px;font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.08em;color:var(--muted)}
.pin{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--ground);border:2px solid var(--line)}
.pin:nth-of-type(1){top:56px;left:12px}.pin:nth-of-type(2){top:56px;right:12px}.pin:nth-of-type(3){bottom:12px;left:12px}.pin:nth-of-type(4){bottom:12px;right:12px}

/* Elevation profile */
.course{padding-block:72px;background:var(--surface);border-block:1px solid var(--line)}
.course-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.course-head p{color:var(--muted);max-width:44ch}
.profile{width:100%;overflow:hidden}
.profile svg{display:block;width:100%;height:auto}
.prof-line{stroke-dasharray:1;stroke-dashoffset:1}
.on .prof-line{animation:drawl 3s ease forwards}
.prof-fill{opacity:0}
.on .prof-fill{animation:fadein 1.2s ease 1.6s forwards}
.flag{opacity:0}
.on .flag{animation:fadein .5s ease forwards;animation-delay:var(--d)}
@keyframes drawl{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}
.cps{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-top:24px}
.cp{border-top:3px solid var(--ink);padding-top:12px}
.cp b{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--signal)}
.cp h3{font-family:var(--display);font-weight:800;font-size:26px;text-transform:uppercase;line-height:1;margin:4px 0 6px}
.cp p{font-size:15.5px;color:var(--muted)}

/* Aid stations */
.ravito{padding-block:80px}
.ravito h2{margin-bottom:12px}
.ravito > .in > p{color:var(--muted);margin-bottom:32px;max-width:52ch}
.stations{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.st{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:22px;display:flex;flex-direction:column;gap:10px;transition:transform .3s,border-color .3s}
.st:hover{transform:translateY(-4px);border-color:var(--forest)}
.st h3{font-family:var(--display);font-weight:800;font-size:24px;text-transform:uppercase;line-height:1}
.st .tags{display:flex;flex-wrap:wrap;gap:6px}
.st .tags span{background:var(--soft);color:var(--forest);font-weight:600;font-size:14px;padding:3px 10px;border-radius:4px}

/* Results */
.results{padding-block:80px;background:var(--ink);color:var(--ground)}
.results .eyebrow{color:#9CC7AE}
.results h2{margin-bottom:32px}
.tbl{border-top:2px solid var(--ground)}
.res{display:grid;grid-template-columns:minmax(0,60px) minmax(0,1.3fr) minmax(0,1.6fr) minmax(0,170px);gap:8px 28px;align-items:baseline;padding:24px 0;border-bottom:1px solid #3B4C44}
.res .pos{font-family:var(--display);font-weight:800;font-size:32px;color:#F08A5D}
.res h3{font-family:var(--display);font-weight:800;font-size:30px;text-transform:uppercase;line-height:1}
.res p{color:#B9C4BD;font-size:16px}
.res .time{font-family:var(--display);font-weight:800;font-size:26px;text-align:right;font-variant-numeric:tabular-nums}
.res .time small{display:block;font-family:var(--body);font-weight:400;font-size:13px;color:#B9C4BD}
.res a{color:#F08A5D}
.res.todo h3,.res.todo .time{color:#7E8C84}
@media (max-width:760px){.res{grid-template-columns:minmax(0,48px) minmax(0,1fr)}.res p,.res .time{grid-column:2}.res .time{text-align:left}}

/* Start / Contact */
.start{padding-block:96px 56px;text-align:center;position:relative}
.start h2{font-size:clamp(48px,8vw,104px);font-style:italic}
.start p{color:var(--muted);max-width:52ch;margin:20px auto 28px;font-size:19px}
.line{height:14px;max-width:560px;margin:0 auto 40px;background:repeating-linear-gradient(90deg,var(--ink) 0 20px,var(--ground) 20px 40px);border:2px solid var(--ink)}
.mail{display:block;margin-top:20px;font-weight:600;user-select:all}
.start .actions{justify-content:center}
footer{padding-block:24px 40px;border-top:1px solid var(--line);font-size:14px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
footer a{color:var(--muted)}
footer a:hover{color:var(--signal)}

.js .rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;transition-delay:calc(var(--r,0) * 100ms)}
.js .rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}.prof-line{stroke-dashoffset:0}.prof-fill,.flag{opacity:1}html{scroll-behavior:auto}}