/* Haus Racing — site styles
   One Night background throughout; colour comes from photography, the powder seams
   and a single spectrum "race line" that threads each page. */

@font-face{font-family:"Poppins";src:url(../fonts/poppins-700.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-400.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-400i.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-600.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-700.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Inter Display";src:url(../fonts/interdisplay-900i.woff) format("woff");font-weight:900;font-style:italic;font-display:swap}

:root{
  --night:#1F0D16; --night-2:#27121D; --night-3:#331A27;
  --mist:#F5F0F3; --text:#EDE4E9; --muted:#BFAEB8; --line:rgba(245,240,243,.14);
  --magenta:#A8358A; --magenta-lt:#F49AD3; --cyan:#4AA3DA; --orange:#DD803E; --red:#C4362F; --plum:#702357;
  --spectrum:linear-gradient(90deg,#4AA3DA 0%,#335189 18%,#702357 36%,#A8358A 52%,#C4362F 70%,#DD803E 86%,#F29E36 100%);
  --spectrum-v:linear-gradient(180deg,#4AA3DA 0%,#335189 18%,#702357 36%,#A8358A 52%,#C4362F 70%,#DD803E 86%,#F29E36 100%);
  --gutter:clamp(16px,4vw,56px);
  --max:1240px;
  --rail:clamp(16px,4vw,56px);
  --head:"Poppins",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif; --display:"Inter Display","Inter",system-ui,sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--night);color:var(--text);font:400 1.0625rem/1.65 var(--body);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:var(--magenta-lt);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:#fff}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.08;color:var(--mist);margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,5.4vw,4.6rem)}
h2{font-size:clamp(1.9rem,3.6vw,3rem)}
h3{font-size:1.25rem;line-height:1.25}
p{margin:0 0 1em}
.lead{font-size:clamp(1.08rem,1.5vw,1.25rem);color:var(--text);max-width:36em}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--mist);color:var(--night);padding:10px 16px;font-weight:700;border-radius:4px}
.skip:focus{top:12px}

/* italic series type, the brand's lean */
.series{font-family:var(--display);font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:.005em;line-height:.95}
.eyebrow{font:700 .78rem/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin:0 0 1rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;min-height:48px;padding:.75em 1.35em;font:700 1rem/1.2 var(--body);text-decoration:none;border-radius:3px;transition:background .2s,color .2s,transform .2s;border:0;cursor:pointer}
.btn-primary{background:var(--magenta);color:#fff}
.btn-primary:hover{background:#BE3D9E;color:#fff}
.btn-light{background:var(--mist);color:var(--night)}
.btn-light:hover{background:#fff;color:var(--night)}
.btn .arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(3px)}
.textlink{font-weight:700;color:var(--mist);text-decoration:none;display:inline-flex;align-items:center;gap:.5em;min-height:48px;border-bottom:2px solid transparent}
.textlink span{border-bottom:2px solid var(--magenta)}
.textlink:hover span{border-color:var(--orange)}
.actions{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}

/* ---------- to-confirm markers (remove before launch) ---------- */
.tbc{background:rgba(221,128,62,.14);color:#F6C59C;border:1px dashed rgba(221,128,62,.7);border-radius:3px;padding:.05em .4em;font-style:normal;font-size:.95em}
.tbc::before{content:"To confirm: ";font-weight:700}
.tbc.bare::before{content:none}

.holder{color:var(--muted);font-style:italic}
.plain{display:inline-block;padding:7px 0;color:var(--text)}

/* ---------- header ---------- */
.site-header{position:absolute;inset:0 0 auto 0;z-index:20}
.site-header.solid{position:relative;background:var(--night)}
.nav{display:flex;align-items:center;gap:24px;max-width:1400px;margin:0 auto;padding:16px var(--gutter)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--mist);margin-right:auto}
.brand img{width:56px;height:56px}
.brand .series{font-size:1.05rem}
.brand .series small{display:block;font:600 .68rem/1.3 var(--body);letter-spacing:.14em;color:var(--muted);font-style:normal}
.nav-links{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav-links a{display:block;padding:12px 12px;color:var(--mist);text-decoration:none;font-weight:600;font-size:.98rem;border-bottom:2px solid transparent}
.nav-links a:hover{color:#fff;border-color:var(--magenta)}
.nav-links a[aria-current=page]{border-color:var(--orange)}
.nav .btn{min-height:44px;padding:.6em 1.1em}
.menu-btn{display:none}
@media (max-width:980px){
  .nav{flex-wrap:wrap;gap:12px}
  .menu-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;background:transparent;color:var(--mist);border:1px solid var(--line);border-radius:3px;font:700 .95rem var(--body)}
  .nav .btn{display:none}
  .js .nav-links{display:none}
  .nav-links{flex-basis:100%;flex-direction:column;background:var(--night-2);border-radius:4px;padding:8px}
  .nav-open .nav-links{display:flex}
  .nav-links a{padding:14px 12px}
  .nav-links .nav-cta{display:block}
}
.nav-links .nav-cta{display:none}
@media (max-width:980px){ .nav-links .nav-cta a{color:var(--orange)} }

/* ---------- race line (the visual thread) ---------- */
.flow{position:relative}
.flow::before{content:"";position:absolute;top:0;bottom:0;left:var(--rail);width:2px;background:var(--spectrum-v);opacity:.55;pointer-events:none}
.marker{display:flex;align-items:center;gap:14px;margin:0 0 1.2rem calc(var(--rail) * -1 + var(--rail));position:relative}
.marker b{font-family:var(--display);font-style:italic;font-weight:900;font-size:1.05rem;color:var(--mist)}
.marker span{font:700 .78rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.chapter{position:relative;padding-left:calc(var(--rail) + clamp(20px,4vw,72px));padding-right:var(--gutter)}
.chapter .marker::before{content:"";position:absolute;left:calc((var(--rail) + clamp(20px,4vw,72px)) * -1 + var(--rail) - 6px);width:14px;height:14px;border-radius:50%;background:var(--night);border:3px solid var(--orange)}

/* ---------- home hero ---------- */
.hero{position:relative;min-height:min(92vh,900px);display:flex;align-items:center;isolation:isolate}
.hero picture,.hero .hero-img{position:absolute;inset:0;z-index:-1}
.hero .hero-img{width:100%;height:100%;object-fit:cover;object-position:78% 50%}
.hero-copy{position:relative;width:100%;max-width:1400px;margin:0 auto;padding:120px var(--gutter) 150px calc(var(--rail) + clamp(20px,3vw,44px))}
.hero-copy > *{max-width:520px}
.hero h1{font-size:clamp(2.3rem,4.3vw,3.7rem);margin-bottom:.4em}
.hero .eyebrow .series{font-size:1.05rem;letter-spacing:.01em;color:var(--mist);display:block;margin-top:.35rem}
@media (max-width:980px){
  .hero{display:block;min-height:0}
  .hero picture,.hero .hero-img{position:relative;inset:auto;z-index:0}
  .hero .hero-img{height:auto;aspect-ratio:4/5;max-height:72vh;object-position:50% 40%}
  .next-race{margin-top:0}
  .hero-copy{padding:0 var(--gutter) 90px calc(var(--rail) + 20px);margin-top:-110px;z-index:1}
}
.hero .lead{margin-bottom:1.6rem}

/* next race: sits across the hero's lower edge, joined to the race line */
.next-race{position:relative;z-index:2;margin-top:-96px;padding-left:calc(var(--rail) + clamp(20px,4vw,72px));padding-right:var(--gutter)}
.next-race .row{max-width:1240px;display:grid;grid-template-columns:auto 1fr auto;gap:12px 40px;align-items:center;padding:22px 0 24px;border-top:2px solid transparent;border-image:var(--spectrum) 1;background:linear-gradient(180deg,rgba(31,13,22,.0),rgba(31,13,22,.85) 30%)}
.next-race .label{font:700 .78rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.next-race .what{font-family:var(--head);font-weight:700;font-size:clamp(1.25rem,2.2vw,1.6rem);color:var(--mist);margin:0;line-height:1.2}
.next-race .status{margin:.25rem 0 0;color:var(--muted)}
.next-race .status strong{color:var(--text)}
.pill-status{display:inline-block;font:700 .82rem/1 var(--body);letter-spacing:.04em;padding:.4em .7em;border-radius:2px;background:var(--night-3);color:var(--text);margin-right:.5em;vertical-align:.1em}
.pill-status.open{background:#1F6B45;color:#fff}
.pill-status.soon{background:#6B4A12;color:#FFE3B5}
.pill-status.done{background:var(--night-3);color:var(--muted)}
@media (max-width:760px){ .next-race .row{grid-template-columns:1fr} .next-race{margin-top:-40px} }

/* ---------- home: why ---------- */
.why{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;margin-top:clamp(56px,9vw,120px)}
.why .pan{grid-column:1;grid-row:1;margin-left:calc(var(--rail) * -1 - clamp(20px,4vw,72px) - 2px);position:relative;z-index:0}
.why .pan img{width:100%}
.why .copy{grid-column:2;grid-row:1/3;margin-left:-14%;position:relative;z-index:1;padding-top:clamp(24px,5vw,72px)}
.reasons{list-style:none;padding:0;margin:1.6rem 0 0;counter-reset:r}
.reasons li{display:grid;grid-template-columns:3.2rem 1fr;gap:4px 14px;padding:18px 0;border-top:1px solid var(--line)}
.reasons li::before{content:"";width:2.4rem;height:6px;margin-top:.55em;background:var(--spectrum);transform:skewX(-9deg);grid-row:1/3}
.reasons h3{margin:0;font-size:1.12rem}
.reasons p{margin:0;color:var(--muted)}
.why .bunch{grid-column:1;grid-row:2;width:min(340px,48%);justify-self:end;margin:-16% 6% 0 0;position:relative;z-index:1;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.why .bunch img{width:100%}
@media (max-width:900px){
  .why{grid-template-columns:1fr}
  .why .pan{grid-row:auto;margin-right:calc(var(--gutter) * -1)}
  .why .copy{grid-column:1;grid-row:auto;margin-left:0;margin-top:-12%}
  .why .bunch{display:none}
}

/* ---------- home: enter ---------- */
.enter{margin-top:clamp(64px,9vw,140px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:0 clamp(24px,4vw,56px);align-items:center}
.enter .copy{position:relative;z-index:1}
.enter .img{margin-right:calc(var(--gutter) * -1);position:relative;z-index:0}
.steps{list-style:none;padding:0;margin:1.6rem 0;position:relative}
.steps li{position:relative;display:grid;grid-template-columns:64px 1fr;gap:4px 18px;padding:0 0 26px}
.steps li:not(:last-child)::after{content:"";position:absolute;left:31px;top:58px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--magenta),transparent)}
.steps .num{font-family:var(--display);font-style:italic;font-weight:900;font-size:3.4rem;line-height:.9;color:var(--mist);grid-row:1/4;text-align:center}
.steps h3{margin:.2rem 0 .2rem}
.steps p{margin:0 0 .4rem;color:var(--muted)}
.steps a{font-weight:700}
.note{border-left:3px solid var(--orange);padding:4px 0 4px 16px;color:var(--text);max-width:38em}
@media (max-width:900px){ .enter{grid-template-columns:1fr} .enter .img{grid-row:1;margin:0 calc(var(--gutter) * -1) 28px 0} }

/* ---------- home: story ---------- */
.story{margin-top:clamp(80px,12vw,170px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.story .img{position:relative}
.story .img figcaption{position:absolute;left:12px;bottom:10px;font-size:.78rem;color:var(--muted)}
.story h2 .series{display:block;font-size:.55em;color:var(--orange);margin-bottom:.35em}
@media (max-width:900px){ .story{grid-template-columns:1fr} }

/* ---------- home: useful ---------- */
.useful{margin-top:clamp(80px,10vw,150px)}
.biglinks{list-style:none;margin:1rem 0 0;padding:0;border-top:1px solid var(--line)}
.biglinks a{display:grid;grid-template-columns:1fr auto;gap:4px 24px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--mist)}
.biglinks .t{font-family:var(--head);font-weight:700;font-size:clamp(1.4rem,3vw,2.2rem);line-height:1.1}
.biglinks .d{grid-column:1;color:var(--muted);font-size:1rem}
.biglinks .go{grid-row:1/3;grid-column:2;font-size:1.8rem;transition:transform .2s;color:var(--orange)}
.biglinks a:hover .t{color:#fff}
.biglinks a:hover .go{transform:translateX(6px)}
.closing{padding:clamp(56px,8vw,110px) 0 clamp(40px,6vw,80px)}
.closing p.big{font-family:var(--head);font-weight:700;font-size:clamp(1.6rem,3.4vw,2.6rem);color:var(--mist);line-height:1.15;max-width:22em;margin-bottom:1.2rem}

/* ---------- inner page header ---------- */
.page-head{position:relative;isolation:isolate;min-height:clamp(320px,34vw,500px);display:flex;align-items:flex-end}
.page-head picture,.page-head .ph-img{position:absolute;inset:0;z-index:-1}
.page-head .ph-img{width:100%;height:100%;object-fit:cover;object-position:85% 50%}
.page-head .inner{width:100%;max-width:1400px;margin:0 auto;padding:120px var(--gutter) 36px calc(var(--rail) + clamp(20px,4vw,72px))}
.page-head .inner > *{max-width:480px}
.page-head h1{font-size:clamp(2.1rem,3.6vw,3.3rem)}
@media (max-width:980px){
  .page-head{display:block;min-height:0}
  .page-head picture,.page-head .ph-img{position:relative;inset:auto;z-index:0}
  .page-head .ph-img{aspect-ratio:3/2;height:auto}
  .page-head .inner{padding-top:0;margin-top:-56px;position:relative}
}

/* ---------- content pages ---------- */
.content{padding-bottom:clamp(48px,7vw,96px)}
.content section{padding-top:clamp(36px,5vw,64px)}
.prose{max-width:42em}
.prose h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.prose ul{padding-left:1.2em}
.prose li{margin:.3em 0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px)}
@media (max-width:800px){ .two{grid-template-columns:1fr} }

/* jump links */
.jumps{display:flex;flex-wrap:wrap;gap:6px 6px;list-style:none;padding:0;margin:1.2rem 0 0}
.jumps a{display:inline-block;padding:9px 12px;border:1px solid var(--line);border-radius:3px;color:var(--text);text-decoration:none;font-size:.92rem;font-weight:600}
.jumps a:hover{border-color:var(--magenta);color:#fff}

/* info list (rider info) */
.info{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:0 32px;border-top:1px solid var(--line);margin:0}
.info dt,.info dd{padding:16px 0;border-bottom:1px solid var(--line);margin:0}
.info dt{font-weight:700;color:var(--mist)}
.info dd{color:var(--text)}
@media (max-width:640px){ .info{grid-template-columns:1fr} .info dt{border-bottom:0;padding-bottom:2px} .info dd{padding-top:0} }

details{border-top:1px solid var(--line)}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;padding:16px 0;font-weight:700;color:var(--mist);list-style:none;display:flex;justify-content:space-between;gap:16px;min-height:48px}
summary::after{content:"+";color:var(--orange);font-size:1.4rem;line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--text);max-width:42em}

/* calendar */
.season{margin-top:8px}
.season-title{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;border-bottom:2px solid transparent;border-image:var(--spectrum) 1;padding-bottom:10px;margin-bottom:0}
.season-title h2{margin:0}
.events{list-style:none;margin:0;padding:0}
.event{display:grid;grid-template-columns:150px 1fr auto;gap:8px 28px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.event .date{font-family:var(--display);font-style:italic;font-weight:900;font-size:1.4rem;color:var(--mist);text-transform:uppercase;line-height:1}
.event .date small{display:block;font:600 .85rem/1.4 var(--body);font-style:normal;color:var(--muted);text-transform:none;margin-top:4px}
.event h3{margin:0 0 4px}
.event p{margin:0;color:var(--muted)}
.event.next{background:linear-gradient(90deg,rgba(168,53,138,.16),transparent 70%)}
@media (max-width:700px){ .event{grid-template-columns:1fr} }
.empty{padding:36px 0 28px;border-bottom:1px solid var(--line)}
.empty h3{font-size:1.4rem}

/* results */
.results-list{list-style:none;margin:0;padding:0}
.results-list li{display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.results-list p{margin:0;color:var(--muted)}

/* about: organisers */
.people{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin-top:1.4rem}
.person{border-top:2px solid transparent;border-image:var(--spectrum) 1;padding-top:16px}
.person h3{font-size:1.5rem;margin-bottom:.3em}
@media (max-width:700px){ .people{grid-template-columns:1fr} }

/* contact */
.contact-email{font-family:var(--head);font-weight:700;font-size:clamp(1.4rem,3.4vw,2.4rem);color:var(--mist);word-break:break-word}
form.contact{display:grid;gap:16px;max-width:560px}
form.contact label{display:block;font-weight:700;color:var(--mist);margin-bottom:6px}
form.contact input,form.contact textarea{width:100%;font:inherit;color:var(--mist);background:var(--night-2);border:1px solid rgba(245,240,243,.3);border-radius:3px;padding:12px 14px;min-height:48px}
form.contact input:focus,form.contact textarea:focus{border-color:var(--magenta-lt);outline:2px solid var(--magenta-lt);outline-offset:1px}
form.contact textarea{min-height:160px;resize:vertical}

/* ---------- footer ---------- */
.site-footer{position:relative;isolation:isolate;margin-top:clamp(40px,6vw,80px);padding:clamp(48px,6vw,80px) 0 calc(clamp(140px,18vw,260px))}
.site-footer picture,.site-footer .ft-img{position:absolute;inset:0;z-index:-1}
.site-footer .ft-img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.site-footer .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
.site-footer h2{font:700 .78rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:0}
.site-footer li a{display:inline-block;padding:7px 0;color:var(--text);text-decoration:none}
.site-footer li a:hover{color:#fff;text-decoration:underline}
.ft-brand img{width:64px;height:64px;margin-bottom:14px}
.ft-brand .series{font-size:1.25rem;color:var(--mist)}
.ft-brand p{color:var(--muted);font-size:.95rem;margin-top:.6rem}
.ft-legal{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px;font-size:.85rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 24px}
@media (max-width:860px){ .site-footer .wrap{grid-template-columns:1fr 1fr} .ft-brand{grid-column:1/-1} }

/* gentle entrance — disabled for reduced motion */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
  .js .reveal.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important} }