/* ==========================================================================
   ADA Run System · Athletico De Alleppey · v1.0
   Layout: Swiss 12-column grid on an 8px rhythm. White field, navy ink, one
   signal orange. The sea-level datum (a 1px blue line marked 0.00 m) is the
   recurring structural device. One typeface (Archivo) used at three widths.
   ========================================================================== */
:root{
  /* TOKENS (mirrored in tokens.json) */
  --paper:#FFFFFF; --mist:#F1F4F8; --ink:#0B1533; --ink-2:#4A5573; --ink-3:#6B7590; --rule:#DCE1EA;
  --on-ink:#FFFFFF; --on-ink-2:#B4BDD3; --on-ink-3:#9AA6C4; --rule-on-ink:#FFFFFF33;
  --signal:#F25A1D; --signal-2:#FF8A2B; --datum:#2453A6; --datum-soft:#E3EAF5; --sun:#FFE629;
  --fm:#C2185B; --hm:#5E35B1; --tk:#2E8B3A; --fk:#1E88E5;
  --ok:#1C7443; --bad:#BE2A1C; --warn:#8E5D00; --ok-soft:#E3F1E8; --bad-soft:#FBE6E2; --warn-soft:#FAEED3;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --radius-none:0px;
  --stroke-hair:1px; --stroke-start:2px;
  --t-step:160ms; --t-stride:320ms; --t-tempo:640ms; --t-long:1200ms;
  --ease-stride:cubic-bezier(.22,.8,.16,1); --ease-pace:cubic-bezier(.65,0,.35,1);
}
:root{
  /* SYSTEM (not tokens): one family, three widths; fluid type scale */
  --f:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --w-cond:62%; --w-text:100%; --w-label:112%; --w-wide:125%;
  --fs-mega:clamp(76px,16.5vw,250px); --fs-d1:clamp(54px,8.6vw,128px); --fs-d2:clamp(40px,5.8vw,84px); --fs-d3:clamp(26px,3vw,40px);
  --fs-lead:clamp(17px,1.5vw,21px); --fs-body:16px; --fs-small:14px; --fs-label:11.5px;
  --max:1320px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-body)/1.55 var(--f);font-stretch:var(--w-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,dl,dd,figure{margin:0}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
::selection{background:var(--signal);color:var(--ink)}
.tnum{font-variant-numeric:tabular-nums}

/* grid */
.w{max-width:var(--max);margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
@media (max-width:860px){.g12{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px}}

/* type roles */
.lbl{font-size:var(--fs-label);font-weight:650;font-stretch:var(--w-label);letter-spacing:.14em;text-transform:uppercase;line-height:1.3;color:var(--ink-2)}
.d-c{font-weight:850;font-stretch:var(--w-cond);text-transform:uppercase;line-height:.86;letter-spacing:-.01em}
.d-x{font-weight:900;font-stretch:var(--w-wide);text-transform:uppercase;line-height:.84;letter-spacing:-.035em}
.d1{font-size:var(--fs-d1)} .d2{font-size:var(--fs-d2)} .d3{font-size:var(--fs-d3)}
.lead{font-size:var(--fs-lead);line-height:1.45;color:var(--ink-2);max-width:44ch}
.small{font-size:var(--fs-small)}
.muted{color:var(--ink-2)}

/* rules */
.start{border-top:2px solid var(--ink)}           /* start line: opens a section or list */
.hair{border-top:1px solid var(--rule)}

/* buttons: square, label + arrow, ink wipe on hover */
.btn{--bg:var(--ink);--fg:var(--paper);--wipe:var(--signal);--wfg:var(--ink);position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:52px;padding:0 18px 0 20px;border:1.5px solid var(--bg);border-radius:0;background:var(--bg);color:var(--fg);font-size:16px;font-weight:700;letter-spacing:.005em;text-decoration:none;white-space:nowrap;transition:color var(--t-stride) var(--ease-stride),border-color var(--t-stride) var(--ease-stride)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--wipe);transform:scaleX(0);transform-origin:right;transition:transform var(--t-stride) var(--ease-stride)}
.btn .ar{display:inline-block;width:18px;height:12px;flex:none;transition:transform var(--t-stride) var(--ease-stride)}
.btn .ar svg{display:block;width:100%;height:100%}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn:hover{color:var(--wfg);border-color:var(--wipe)}
.btn:hover .ar{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}
.btn.signal{--bg:var(--signal);--fg:var(--ink);--wipe:var(--ink);--wfg:var(--paper)}
.btn.line{--bg:transparent;--fg:var(--ink);border-color:var(--ink);--wipe:var(--ink);--wfg:var(--paper)}
.btn.on-ink{--bg:transparent;--fg:var(--paper);border-color:rgb(255 255 255 / .5);--wipe:var(--paper);--wfg:var(--ink)}
.btn.big{min-height:60px;font-size:18px;padding:0 22px 0 24px;gap:28px}
.btn.sm{min-height:40px;font-size:14.5px;padding:0 12px 0 14px;gap:12px}
.btn[disabled],.btn:disabled{opacity:.4;pointer-events:none}

/* text link with wipe underline */
.lnk{font-weight:650;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;padding-bottom:2px;transition:background-size var(--t-stride) var(--ease-stride)}
.lnk:hover{background-size:0 1.5px;background-position:100% 100%}

/* race code: square swatch + code */
.rc{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-label);font-weight:700;font-stretch:var(--w-label);letter-spacing:.12em;text-transform:uppercase}
.rc::before{content:"";width:10px;height:10px;background:var(--c,var(--ink));flex:none}
.c-FM{--c:var(--fm)} .c-HM{--c:var(--hm)} .c-TK{--c:var(--tk)} .c-FK{--c:var(--fk)}

/* early-bird flag: the only use of sun yellow */
.flag{display:inline-block;background:var(--sun);color:var(--ink);font-size:var(--fs-label);font-weight:750;font-stretch:var(--w-label);letter-spacing:.1em;text-transform:uppercase;padding:3px 7px 2px;line-height:1.3}

/* datum: the sea-level line */
.datum{position:relative;height:0;border-top:1px solid var(--datum)}
.datum>span{position:absolute;left:0;top:6px;font-size:10.5px;font-weight:700;font-stretch:var(--w-label);letter-spacing:.14em;text-transform:uppercase;color:var(--datum);white-space:nowrap}

/* countdown with rolling digits */
.cd{display:flex;gap:clamp(14px,2.4vw,28px);align-items:flex-end}
.cd-u{display:grid;gap:6px}
.cd-n{display:flex;font-size:clamp(40px,4.6vw,64px);font-weight:800;font-stretch:var(--w-cond);line-height:1;font-variant-numeric:tabular-nums;color:var(--datum)}
.cd-d{display:block;height:1em;overflow:hidden}
.cd-s{display:flex;flex-direction:column;transition:transform var(--t-tempo) var(--ease-stride)}
.cd-s i{font-style:normal;height:1em;line-height:1}
.cd .lbl{font-size:10.5px}

/* scroll odometer: the page as 42.195 km */
.odo{font-size:12px;font-weight:700;font-stretch:var(--w-label);letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.odo b{color:var(--ink);font-weight:800}
.odo-bar{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--signal);transform-origin:left;transform:scaleX(var(--p,0))}

/* reveal: content is visible by default; JS opts below-fold items into a rise */
.rv-wait{opacity:0;transform:translateY(28px)}
.rv-in{opacity:1;transform:none;transition:opacity var(--t-tempo) var(--ease-stride),transform var(--t-tempo) var(--ease-stride)}
.mask{display:block;overflow:hidden;padding-bottom:.04em;margin-bottom:-.04em}
.mask>span{display:block}
.rise>.mask>span{animation:rise var(--t-long) var(--ease-stride) both}
.rise>.mask:nth-child(2)>span{animation-delay:80ms}
.rise>.mask:nth-child(3)>span{animation-delay:160ms}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv-wait{opacity:1;transform:none}
}

/* forms */
.fld{display:grid;gap:8px;min-width:0}
.fld>label,.fld>.fl{font-size:var(--fs-label);font-weight:700;font-stretch:var(--w-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.fld .hint{font-size:13.5px;color:var(--ink-2)}
.fld .err{font-size:13.5px;color:var(--bad);font-weight:650}
.inp{width:100%;min-height:52px;border:1.5px solid var(--ink-3);border-radius:0;background:var(--paper);padding:12px 14px;font-size:17px;font-weight:500;transition:border-color var(--t-step),box-shadow var(--t-step)}
.inp::placeholder{color:var(--ink-3)}
.inp:hover{border-color:var(--ink-2)}
.inp:focus{outline:none;border-color:var(--ink);box-shadow:inset 0 -3px 0 var(--signal)}
.inp[aria-invalid="true"]{border-color:var(--bad);box-shadow:inset 0 -3px 0 var(--bad)}
.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));border:1.5px solid var(--ink)}
.seg>button{border:0;border-left:1.5px solid var(--ink);background:var(--paper);min-height:52px;padding:8px 6px;font-weight:700;transition:background var(--t-step),color var(--t-step)}
.seg>button:first-child{border-left:0}
.seg>button:hover{background:var(--mist)}
.seg>button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.chk{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:15px}
.chk input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:1px 0 0;border:1.5px solid var(--ink);border-radius:0;background:var(--paper);display:grid;place-items:center}
.chk input:checked{background:var(--ink)}
.chk input:checked::after{content:"";width:10px;height:5px;border:2px solid var(--on-ink);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
/* status pill: square, text + colour */
.st{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-label);font-weight:750;font-stretch:var(--w-label);letter-spacing:.1em;text-transform:uppercase;padding:4px 8px 3px;line-height:1.2}
.st::before{content:"";width:6px;height:6px;background:currentColor}
.st.paid{background:var(--ok-soft);color:var(--ok)} .st.review{background:var(--warn-soft);color:var(--warn)} .st.pending{background:var(--mist);color:var(--ink-2)} .st.cancelled{background:var(--bad-soft);color:var(--bad)}