/* Bygholm Classic look ("Startnummer").
   Race-day adrenaline: start bibs, timing boards and speed. Huge italic condensed type,
   parallelogram buttons, and a racing-green field lit by signal gold.
   Palette: Bane-grøn #0E3B2B · Dyb #082519 · Signalguld #F4B731 · Startnummer-hvid #F6F5EE · Blæk #0B140F */
html[data-design="race"]{
  --bg:#082519; --fg:#F6F5EE; --muted:#A9C2B5; --accent:#F4B731; --accent-fill:#F4B731; --accent-fg:#0B140F;
  --line:rgba(246,245,238,.18); --surface:rgba(255,255,255,.04);
  --hero-bg:#062016; --hero-fg:#F6F5EE;
  --hdr-fg:#F6F5EE; --hdr-bg:rgba(6,26,18,.92); --hdr-solid-fg:#F6F5EE; --hdr-swap:#0B140F;
  --badge-bg:#1F4D3A; --badge-fg:#FFFFFF; --badge-accent:#F4B731;
  --f-display:"Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --radius:4px; --btn-radius:0;
  --d-day:#F4B731; --d-low:#F0862A; --d-twilight:#2F7A5E; --d-dark:#0E2E22; --d-hover:#FFFFFF; --d-stroke:#082519;
  --d-num-dark:#0B140F; --d-num-light:#F6F5EE; --d-sun:#FFFFFF; --d-face:transparent;
  --trail-course:rgba(246,245,238,.35); --trail-buoy:#F4B731; --trail-light:#FFFFFF; --trail-light-2:#F4B731; --trail-water:transparent;
  --boat-fill:rgba(255,255,255,.05); --boat-line:#F6F5EE; --boat-seat:#F4B731; --boat-paddle:#F4B731;
  color-scheme:dark;
}
html[data-design="race"] .band{background:var(--c)}
html[data-design="race"] .tone-light{--c:#F6F5EE; --fg:#0B140F; --muted:#3F4D45; --line:rgba(11,20,15,.2); --accent:#0E3B2B; --accent-fill:#0E3B2B; --accent-fg:#F6F5EE; --surface:#FFFFFF;
  --boat-fill:#FFFFFF; --boat-line:#0B140F; --boat-seat:#F4B731; --boat-paddle:#0E3B2B; --d-stroke:#F6F5EE}
html[data-design="race"] .tone-alt{--c:#0E3B2B}
html[data-design="race"] .tone-dark{--c:#082519}
html[data-design="race"] .tone-night,
html[data-design="race"] .tone-foot{--c:#04150D}
html[data-design="race"] .tone-accent{--c:#F4B731; --fg:#0B140F; --muted:#3B2F0A; --line:rgba(11,20,15,.25); --accent:#0B140F; --accent-fill:#0B140F; --accent-fg:#F4B731; --surface:rgba(255,255,255,.2)}

/* type: everything big is italic, condensed and upper case */
html[data-design="race"] .sec-title,
html[data-design="race"] .hero-title,
html[data-design="race"] .ph-title,
html[data-design="race"] .statement,
html[data-design="race"] .sp-title,
html[data-design="race"] .live-title,
html[data-design="race"] .ex-name,
html[data-design="race"] .sub-title,
html[data-design="race"] .dc-big,
html[data-design="race"] .lr-num,
html[data-design="race"] .mobile-menu a,
html[data-design="race"] .ftr-tag{font-style:italic;font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:.88}
html[data-design="race"] .sec-title{font-size:clamp(2.8rem, 1.6rem + 5vw, 6.4rem)}
html[data-design="race"] .exp h3,
html[data-design="race"] .timeline h3,
html[data-design="race"] .timeline h4,
html[data-design="race"] .ath-name,
html[data-design="race"] .cg-name{font-family:var(--f-label);font-style:italic;font-weight:800;text-transform:uppercase;letter-spacing:0;line-height:1}

/* buttons: parallelograms, text stays upright */
html[data-design="race"] .btn{position:relative;isolation:isolate;background:none;border:0;text-transform:uppercase;font-style:italic;font-weight:800;letter-spacing:.02em;padding:.7em 1.7em}
html[data-design="race"] .btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(-14deg);transition:background-color .2s, box-shadow .2s, transform .2s}
html[data-design="race"] .btn-primary::before{background:var(--accent-fill);box-shadow:5px 5px 0 rgba(0,0,0,.35)}
html[data-design="race"] .btn-primary{color:var(--accent-fg)}
html[data-design="race"] .btn-primary:hover{background:none}
html[data-design="race"] .btn-primary:hover::before{transform:skewX(-14deg) translate(-2px,-2px);box-shadow:7px 7px 0 rgba(0,0,0,.4)}
html[data-design="race"] .btn-secondary::before{box-shadow:inset 0 0 0 2.5px currentColor}
html[data-design="race"] .btn-secondary:hover{background:none}
html[data-design="race"] .btn-secondary:hover::before{background:color-mix(in srgb, currentColor 10%, transparent)}

/* header */
html[data-design="race"] .brand-name{font-style:italic;font-weight:800;text-transform:uppercase;font-size:1.25rem}
html[data-design="race"] .main-nav a{font-style:italic;font-weight:800;text-transform:uppercase;border-radius:0}
html[data-design="race"] .lang-switch,
html[data-design="race"] .lang-switch button{border-radius:0}
html[data-design="race"] .site-header.is-solid{box-shadow:0 3px 0 #F4B731}

/* hero: speed, a giant 24 and a timing board */
html[data-design="race"] .hero-shade{background:linear-gradient(90deg, rgba(4,20,13,.9) 0%, rgba(4,20,13,.55) 45%, rgba(4,20,13,.1) 100%)}
html[data-design="race"] .hero-bignum{display:block;position:absolute;right:.02em;bottom:-.16em;z-index:-1;font-family:var(--f-label);font-style:italic;font-weight:800;font-size:clamp(16rem, 44vw, 54rem);line-height:.8;color:transparent;-webkit-text-stroke:2px rgba(244,183,49,.55);letter-spacing:-.04em;pointer-events:none;user-select:none}
html[data-design="race"] .hero-badge{display:none}
html[data-design="race"] .hero-title{font-size:clamp(4.2rem, 1rem + 13vw, 13.5rem);line-height:.8}
html[data-design="race"] .ht-line{display:block}
html[data-design="race"] .ht-line + .ht-line{padding-left:.42em}
html[data-design="race"] .hero-tagline{margin-top:18px;font-style:italic;font-weight:800;text-transform:uppercase;color:#F4B731;font-size:clamp(1.4rem, 1rem + 1.6vw, 2.4rem);letter-spacing:.01em}
html[data-design="race"] .hero-facts{gap:10px}
html[data-design="race"] .hero-facts > div{position:relative;padding:6px 16px 7px;background:#F6F5EE;color:#0B140F;transform:skewX(-12deg)}
html[data-design="race"] .hero-facts > div > *{transform:skewX(12deg)}
html[data-design="race"] .hero-facts dt{font-size:.78rem;opacity:.7;font-weight:600}
html[data-design="race"] .hero-facts dd{font-style:italic;font-weight:800;text-transform:uppercase;font-size:1.15rem}
html[data-design="race"] .cd-hero .cd-units,
html[data-design="race"] .cd-live .cd-units,
html[data-design="race"] .cd-big .cd-units{gap:6px}
html[data-design="race"] .cd-hero .cd-units li,
html[data-design="race"] .cd-live .cd-units li,
html[data-design="race"] .cd-big .cd-units li{justify-items:center;padding:10px 12px 8px;min-width:clamp(64px,8vw,104px);background:#03110A;border:2px solid rgba(244,183,49,.35)}
html[data-design="race"] .cd-hero .cd-num,
html[data-design="race"] .cd-live .cd-num{color:#F4B731;font-weight:800;text-shadow:0 0 18px rgba(244,183,49,.35)}
html[data-design="race"] .cd-big .cd-num{color:#F4B731;font-weight:800}
html[data-design="race"] .cd-lbl{text-transform:uppercase;font-family:var(--f-label);font-weight:700;letter-spacing:.06em;font-size:.78rem}
html[data-design="race"] .cd-units li .cd-lbl{color:#F6F5EE}
/* page-load: the title slides in at speed */
html[data-design="race"] .hero-home .ht-line{animation:race-in .7s cubic-bezier(.2,.9,.2,1) both}
html[data-design="race"] .hero-home .ht-line + .ht-line{animation-delay:.08s}
html[data-design="race"] .hero-home .hero-bignum{animation:race-big 1.2s cubic-bezier(.2,.9,.2,1) both}
@keyframes race-in{from{opacity:0;transform:translateX(-12vw) skewX(-18deg)}to{opacity:1;transform:none}}
@keyframes race-big{from{opacity:0;transform:translateX(20vw)}to{opacity:1;transform:none}}

/* page heroes */
html[data-design="race"] .ph-title{font-size:clamp(3.4rem, 1rem + 9vw, 9rem);max-width:12ch}
html[data-design="race"] .ph-kicker{display:inline-block;justify-self:start;padding:4px 14px;background:#F4B731;color:#0B140F;font-style:italic;font-weight:800;text-transform:uppercase;transform:skewX(-12deg)}
html[data-design="race"] .page-hero .hero-content{display:grid;justify-items:start}
html[data-design="race"] .ph-nav a{border-radius:0;font-style:italic;font-weight:800;text-transform:uppercase;border-width:2px}

/* class marquee */
html[data-design="race"] .marquee{display:block;background:#F4B731;color:#0B140F;transform:rotate(-1.5deg);margin:-28px -2vw 0;position:relative;z-index:2;padding:10px 0;box-shadow:0 10px 0 rgba(0,0,0,.25)}
html[data-design="race"] .marquee-track{animation-duration:30s}
html[data-design="race"] .marquee-track span{font-family:var(--f-label);font-style:italic;font-weight:800;font-size:clamp(1.8rem,1.4rem + 2vw,3.2rem);line-height:1;padding:0 .6em}
html[data-design="race"] .marquee-track span:nth-child(even){color:transparent;-webkit-text-stroke:1.5px #0B140F}

/* statement on white */
html[data-design="race"] .statement{font-size:clamp(2.6rem, 1.2rem + 6vw, 7.2rem);line-height:.86;gap:.04em}
html[data-design="race"] .st-num{color:transparent;-webkit-text-stroke:2px var(--fg);margin-right:.08em}
html[data-design="race"] .manifesto-body{color:var(--muted)}

/* split: two start bibs */
html[data-design="race"] .split-panel{background:#F6F5EE;color:#0B140F;border-radius:6px;padding-top:64px;box-shadow:8px 8px 0 rgba(0,0,0,.35);transition:transform .2s, box-shadow .2s}
html[data-design="race"] .split-panel:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 rgba(0,0,0,.4)}
html[data-design="race"] .split-panel::before{content:"";position:absolute;left:0;right:0;top:0;height:40px;background:#F4B731}
html[data-design="race"] .sp-athletes::before{background:#0B140F}
html[data-design="race"] .split-panel::after{content:"";position:absolute;inset:12px;pointer-events:none;background:
  radial-gradient(circle, #082519 5px, transparent 6px) 0 0/12px 12px no-repeat,
  radial-gradient(circle, #082519 5px, transparent 6px) 100% 0/12px 12px no-repeat,
  radial-gradient(circle, #082519 5px, transparent 6px) 0 100%/12px 12px no-repeat,
  radial-gradient(circle, #082519 5px, transparent 6px) 100% 100%/12px 12px no-repeat}
html[data-design="race"] .sp-title{font-size:clamp(3rem, 1.4rem + 5vw, 5.8rem)}
html[data-design="race"] .sp-kicker{position:absolute!important;top:9px;left:36px;font-style:italic;font-weight:800;text-transform:uppercase;font-size:1rem;opacity:1}
html[data-design="race"] .sp-athletes .sp-kicker{color:#F4B731}
html[data-design="race"] .sp-list li::before{height:3px;background:#F4B731;opacity:1}
html[data-design="race"] .sp-cta{text-transform:uppercase;font-style:italic;font-weight:800;text-decoration-color:#F4B731;text-decoration-thickness:3px}
html[data-design="race"] .sp-art{opacity:.14}
html[data-design="race"] .sp-sun,html[data-design="race"] .sp-shore{fill:#0B140F}
html[data-design="race"] .sp-wave{fill:none;stroke:#0B140F;stroke-width:3}
html[data-design="race"] .sp-hull{fill:#0B140F}
html[data-design="race"] .sp-seats ellipse{fill:#F4B731}
html[data-design="race"] .sp-paddles path{stroke:#0B140F;stroke-width:4;fill:none}

/* dial as an LED tachometer */
html[data-design="race"] .dnum{font-style:italic;font-weight:800}
html[data-design="race"] .dc-big{color:#F4B731;font-size:clamp(3.6rem,2rem + 5vw,6.4rem)}
html[data-design="race"] .lg{border-radius:0;transform:skewX(-12deg)}

/* cards and lists */
html[data-design="race"] .exp-feature{background:#0E3B2B;color:#F6F5EE;--muted:#C2D6CB;--accent:#F4B731}
html[data-design="race"] .exp{border-top-width:3px}
html[data-design="race"] .steps li::before{font-family:var(--f-label);font-style:italic;font-weight:800;font-size:4rem;color:transparent;-webkit-text-stroke:2px #F4B731}
html[data-design="race"] .steps h3{font-style:italic;text-transform:uppercase}
html[data-design="race"] .timeline time{font-style:italic;font-weight:800}
html[data-design="race"] .cls-chip{border-radius:0;font-style:italic;transform:skewX(-10deg);background:#F4B731;color:#0B140F}
html[data-design="race"] .crew-dot{border-radius:2px;transform:skewX(-12deg);border-width:2.5px}
html[data-design="race"] .ath-class{border-radius:0;transform:skewX(-10deg);font-style:italic}
html[data-design="race"] .ex-tabs button,
html[data-design="race"] .ath-filter button,
html[data-design="race"] .res-filter button{border-radius:0;font-style:italic;font-weight:800;text-transform:uppercase}
html[data-design="race"] .chip{border-radius:0;font-style:italic;text-transform:uppercase}
html[data-design="race"] .p-tile{border-radius:0;border-width:2px}
html[data-design="race"] .pt-name{font-family:var(--f-label);font-style:italic;font-weight:800;text-transform:uppercase;font-size:1.6rem;line-height:.95}
html[data-design="race"] .p-empty{font-style:italic;text-transform:uppercase}
html[data-design="race"] .cause-mark{border-radius:0;transform:skewX(-10deg);font-family:var(--f-label);font-style:italic;font-weight:800}
html[data-design="race"] .help h3{font-family:var(--f-label);font-style:italic;font-weight:800;text-transform:uppercase}
html[data-design="race"] .lap-num{font-style:italic;color:var(--accent)}
html[data-design="race"] .logo-slots li{border-radius:0;border-width:2px;font-style:italic;text-transform:uppercase}
html[data-design="race"] .faq summary{text-transform:uppercase;font-style:italic;font-weight:800}
html[data-design="race"] .key-facts{border-radius:0}
html[data-design="race"] .key-facts dd{font-style:italic;font-weight:800;text-transform:uppercase}
html[data-design="race"] .sun-facts dd{font-style:italic;font-weight:800;color:#F4B731}

/* footer */
html[data-design="race"] .ftr-tag{font-size:clamp(1.8rem,1.4rem + 1.4vw,2.6rem)}
html[data-design="race"] .site-footer{border-top:6px solid #F4B731}

/* live page */
html[data-design="race"] .live-status{border-radius:0;transform:skewX(-12deg);font-style:italic;text-transform:uppercase}
html[data-design="race"] .live-ring{--lr-color:#F4B731}
html[data-design="race"] .board{font-family:var(--f-label);font-size:1.12rem}
html[data-design="race"] .board td.c-pos{font-style:italic;color:#F4B731;font-size:1.6rem}
html[data-design="race"] .board td.c-laps{font-style:italic;font-size:1.6rem}
html[data-design="race"] .board .cls-tag{border-radius:0;transform:skewX(-10deg);background:#F4B731;color:#0B140F}
html[data-design="race"] .board tr.grp td{text-transform:uppercase;font-style:italic;font-weight:800}
html[data-design="race"] .board-wrap{border-radius:0;border-width:2px}

html[data-design="race"] .exp-feature{--fg:#F6F5EE}
html[data-design="race"] .live-info-grid .sec-title,
html[data-design="race"] .faq-wrap .sec-title{font-size:clamp(2.2rem,1.4rem + 2.6vw,3.8rem)}

html[data-design="race"] .member{border-radius:0;border-width:2px}
html[data-design="race"] .m-title{font-family:var(--f-label);font-style:italic;font-weight:800;text-transform:uppercase;line-height:.9;font-size:clamp(1.9rem,1.3rem + 2vw,3.2rem)}
html[data-design="race"] .m-name{font-style:italic;text-transform:uppercase}
