/* RYDSKIN — site styles */
:root{--ink:#111111;--paper:#F4F0E6;--volt:#D7FF00;--white:#FFFFFF;--pad:clamp(16px,4vw,48px);--display:'Anton',Impact,sans-serif;--cond:'Barlow Condensed',sans-serif;--body:'Barlow',system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:2px}
img{display:block;max-width:100%}
input,select,button,textarea{font-family:inherit}

/* type */
.display{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.9;margin:0}
.label{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:15px}
.volt{color:var(--volt)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 16px;font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:16px;border:0;cursor:pointer;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn-volt{background:var(--volt);color:var(--ink)}.btn-volt:hover{background:var(--white)}
.btn-ink{background:var(--ink);color:var(--volt)}.btn-ink:hover{background:var(--volt);color:var(--ink)}
.btn-lg{min-height:56px;padding:14px 28px;font-size:22px;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.btn-block{width:100%;min-height:60px;font-size:24px;border:3px solid currentColor}
.btn:disabled{opacity:.6;cursor:default}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px 28px;flex-wrap:wrap;padding:16px var(--pad);font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:15px}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(14px,3vw,32px);align-items:center}
.nav-paper{background:var(--paper);border-bottom:3px solid var(--ink)}
.nav-active{border-bottom:3px solid var(--volt)}

/* hero (shared) */
.hero{position:relative;background:var(--ink);color:var(--white);display:flex;flex-direction:column}
.hero .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.retro .photo,.retro .tile-photo img,.retro .side-photo img{filter:contrast(1.08) saturate(1.28) sepia(.12) brightness(1.02)}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.14;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.scrim{position:absolute;inset:0;pointer-events:none}
.keyline{position:absolute;inset:8px;border:2px solid rgba(255,255,255,.9);pointer-events:none;z-index:2}
.hero > .nav,.hero .masthead,.hero .hero-foot{position:relative;z-index:2}

/* home hero */
.hero-home{min-height:min(100vh,1040px)}
/* The hero is a portrait frame in a landscape slot: on desktop it crops
   vertically, and 45% buried the rider. 18% keeps helmet to front wheel.
   On phones the image crops horizontally instead, so this value is inert there. */
.hero-home .photo{object-position:50% 50%}
.hero-home .scrim{background:linear-gradient(180deg,rgba(17,17,17,.6) 0%,rgba(17,17,17,0) 32%,rgba(17,17,17,0) 52%,rgba(17,17,17,.78) 100%)}
.masthead{padding:0 clamp(12px,3vw,40px);pointer-events:none}
.masthead img{width:100%;height:auto;filter:drop-shadow(0 5px 0 var(--ink))}
.hero-foot{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(32px,6vw,72px) var(--pad) clamp(28px,5vw,56px)}
.hero-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px}
.hero-home h1{font-size:clamp(56px,8.5vw,140px);color:var(--white);text-shadow:0 4px 0 var(--ink);text-wrap:balance}
.sticker{transform:rotate(3deg);margin-bottom:.5em;display:flex;flex-direction:column;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.sticker b{display:block;background:var(--volt);color:var(--ink);font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(16px,1.8vw,26px);line-height:1;padding:6px 10px 4px;white-space:nowrap}
.sticker small{display:block;background:var(--ink);color:var(--white);font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(11px,.9vw,13px);line-height:1.2;padding:4px 10px;white-space:nowrap}

/* crew hero */
.hero-crew{min-height:min(92vh,900px);justify-content:flex-end}
.hero-crew .photo{object-position:50% 40%}
.hero-crew .scrim{background:linear-gradient(180deg,rgba(17,17,17,.15) 0%,rgba(17,17,17,0) 30%,rgba(17,17,17,.85) 100%)}
.hero-crew .hero-foot{flex:0 0 auto;padding:clamp(48px,8vw,120px) var(--pad) clamp(32px,5vw,64px);gap:28px}
.hero-crew h1{font-size:clamp(56px,10vw,170px);line-height:.88;color:var(--white);text-shadow:0 4px 0 var(--ink)}
.hero-crew .btn{align-self:flex-start}

/* sections */
.section{padding:clamp(48px,7vw,96px) var(--pad);display:flex;flex-direction:column;gap:32px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;border-bottom:3px solid var(--ink);padding-bottom:14px}
.h2{font-size:clamp(48px,7vw,104px)}

/* finishes */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(340px,40%)),1fr));gap:20px}
.tile{display:flex;flex-direction:column;border:3px solid var(--ink);background:var(--ink)}
.tile-photo{position:relative;aspect-ratio:3/2;background:var(--paper)}
.tile-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px;background:var(--ink);color:var(--white);border-top:3px solid var(--ink);min-height:76px;container-type:inline-size}
.tile-bar .display{font-size:clamp(20px,6.5cqw,34px);line-height:1.05;white-space:nowrap;min-width:0}
.tile-bar .btn{border:2px solid var(--volt)}.tile-bar .btn:hover{border-color:var(--white)}

/* action spread */
.spread{position:relative;background:var(--ink);color:var(--white);min-height:min(80vh,760px);display:flex;align-items:flex-end}
.spread .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.spread .scrim{background:linear-gradient(180deg,rgba(17,17,17,0) 45%,rgba(17,17,17,.8) 100%)}
.spread .display{position:relative;z-index:2;padding:clamp(40px,6vw,80px) var(--pad);font-size:clamp(56px,10vw,170px);text-shadow:0 4px 0 var(--ink)}

/* split (photo + form) */
.split{display:flex;flex-wrap:wrap;border-top:3px solid var(--ink)}
.side-photo{flex:1 1 420px;min-width:min(100%,320px);position:relative;min-height:min(70vw,540px);background:var(--ink)}
.side-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 50%}
.side-body{flex:1 1 360px;min-width:min(100%,300px);padding:clamp(40px,6vw,88px) var(--pad);display:flex;flex-direction:column;gap:24px;justify-content:center}
.picked{align-self:flex-start;background:var(--ink);color:var(--volt);font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:18px;line-height:1.2;padding:8px 14px}
.picked:empty{display:none}

/* forms */
.form{display:flex;flex-direction:column;gap:22px;max-width:560px}
.field{display:flex;flex-direction:column;gap:8px}
.field .opt{font-weight:400;text-transform:none;letter-spacing:0}
.input{width:100%;min-height:52px;padding:12px 14px;font-size:17px;background:var(--white);color:var(--ink);border:3px solid var(--ink);border-radius:0;outline:none}
.input:focus{box-shadow:4px 4px 0 var(--ink)}
textarea.input{min-height:120px;line-height:1.4;resize:vertical}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px}
.grid-age{display:grid;grid-template-columns:minmax(90px,120px) minmax(0,1fr);gap:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border:3px solid var(--ink);cursor:pointer;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:16px;background:transparent;color:var(--ink)}
.chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.chip:has(input:checked){background:var(--ink);color:var(--volt)}
fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
legend{padding:0;margin-bottom:8px}
.alert{margin:0;padding:12px 14px;background:var(--ink);color:var(--white);font-size:16px;font-weight:600}
.fine{margin:0;font-size:14px;line-height:1.45}
.hidden{display:none!important}
.success{display:flex;flex-direction:column;gap:16px;border:3px solid var(--ink);background:var(--paper);padding:28px}
.success .display{font-size:clamp(36px,4vw,56px);line-height:.95}
.btn-ghost{background:transparent;color:var(--ink);border:3px solid var(--ink);min-height:44px;padding:8px 16px;font-size:15px;font-weight:700;align-self:flex-start}
.btn-ghost:hover{background:var(--ink);color:var(--white)}

/* dark form variant (crew) */
.dark{background:var(--ink);color:var(--white)}
.dark .input{border-color:var(--white)}
.dark .input:focus{border-color:var(--volt);box-shadow:4px 4px 0 var(--volt)}
.dark .alert{background:var(--white);color:var(--ink)}
.dark .success{border-color:var(--volt);background:transparent}
.dark .success .display{color:var(--volt)}
.dark .btn-ghost{color:var(--white);border-color:var(--white)}
.dark .btn-ghost:hover{background:var(--white);color:var(--ink)}
.guardian{display:flex;flex-direction:column;gap:14px;border:3px solid var(--volt);padding:20px}
.guardian .title{font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:22px;line-height:1;color:var(--volt)}

/* crew page */
.numbers{background:var(--volt);color:var(--ink);border-bottom:3px solid var(--ink);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.numbers > div{display:flex;flex-direction:column;gap:4px;padding:clamp(24px,3vw,40px) var(--pad);border-right:3px solid var(--ink)}
.numbers > div:last-child{border-right:0}
.numbers .display{font-size:clamp(56px,7vw,110px)}
.numbers span{font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:18px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));border:3px solid var(--ink)}
.steps li{display:flex;flex-direction:column;gap:14px;padding:28px 24px;border:1.5px solid var(--ink);background:var(--paper)}
.steps .num{align-self:flex-start;font-family:var(--display);font-size:40px;line-height:1;background:var(--ink);color:var(--volt);padding:4px 12px}
.steps .title{font-family:var(--cond);font-weight:800;text-transform:uppercase;font-size:clamp(28px,2.6vw,38px);line-height:1}
.steps p{margin:0;font-size:16px;line-height:1.45}
.steps li.dark{background:var(--ink);color:var(--white)}
.steps li.dark .num{background:var(--volt);color:var(--ink)}
.steps li.dark .title{color:var(--volt)}
.apply{border-top:3px solid var(--ink);padding:clamp(56px,8vw,112px) var(--pad)}
.apply-row{display:flex;flex-wrap:wrap;gap:40px clamp(32px,6vw,96px);align-items:flex-start}
.apply-intro{flex:1 1 300px;min-width:min(100%,280px);max-width:520px;display:flex;flex-direction:column;gap:24px}
.apply-intro .display{font-size:clamp(64px,10vw,170px);line-height:.86}
.apply-intro p{margin:0;font-size:clamp(17px,1.5vw,21px);line-height:1.4;max-width:24em}
.under18{background:var(--volt);color:var(--ink);padding:24px;display:flex;flex-direction:column;gap:14px}
.under18 .display{font-size:clamp(30px,3vw,44px)}
.under18 p,.under18 li{margin:0;font-size:16px;line-height:1.45}
.under18 ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.under18 li{display:flex;gap:12px;align-items:flex-start}
.under18 li b{flex:none;font-family:var(--display);font-weight:400;background:var(--ink);color:var(--volt);padding:2px 10px;line-height:1.3}
.under18 .rule{font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:18px}
.apply .form{flex:1 1 400px;min-width:min(100%,300px);max-width:640px}
.apply .form .grid2{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}

/* footer */
.footer{background:var(--ink);color:var(--white);padding:28px var(--pad);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.footer img{height:26px;width:auto}
.footer span{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:13px}

@media (max-width:759px){.hero-home .sticker{display:none}}