/* Board Years — blue on near-black, the show's own palette.
   Raked stripes echo the bumper cards so site and video read as one thing. */
:root{
  --ink:#05070E; --ink-2:#0B111F; --surface:#111A2C;
  --fg:#FFFFFF; --fg-dim:#9FB0CC; --fg-faint:#63739063;
  --blue:#2E6BFF; --blue-deep:#1B3FA8; --blue-lit:#7FD4FF;
  --line:rgba(127,212,255,.16); --line-2:rgba(127,212,255,.34);
  --display:'Anton',Impact,'Haettenschweiler','Arial Narrow Bold',sans-serif;
  --cond:'Barlow Condensed',system-ui,sans-serif;
  --body:'Barlow',system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--fg);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* raked stripe field, fixed behind everything */
.stripes{
  position:fixed; inset:-20% -10%; z-index:0; opacity:.5; pointer-events:none;
  background:repeating-linear-gradient(114deg,
    var(--blue) 0 6px, transparent 6px 34px,
    var(--blue-deep) 34px 42px, transparent 42px 76px,
    var(--blue-lit) 76px 80px, transparent 80px 128px);
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.nav,main,footer{ position:relative; z-index:2; }

.nav{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px clamp(18px,4vw,52px);
  background:rgba(5,7,14,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); position:sticky; top:0;
}
.mark{ font-family:var(--display); font-size:22px; letter-spacing:.02em; color:var(--fg); text-decoration:none; }
.mark span{ color:var(--blue-lit); }
.nav nav{ display:flex; gap:22px; }
.nav nav a{ font-family:var(--cond); font-size:16px; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-dim); text-decoration:none; }
.nav nav a:hover,.nav nav a:focus-visible{ color:var(--blue-lit); }

main{ width:min(1120px,calc(100% - 40px)); margin-inline:auto; }
section{ padding:clamp(64px,9vw,120px) 0; }

.eyebrow{ font-family:var(--cond); font-size:14px; letter-spacing:.20em; text-transform:uppercase; color:var(--blue-lit); margin:0 0 22px; }
h1{ font-family:var(--display); font-size:clamp(3rem,11vw,7rem); line-height:.92; letter-spacing:-.005em; margin:0 0 26px; text-wrap:balance; }
h1 em{ font-style:normal; color:var(--blue); }
h2{ font-family:var(--display); font-size:clamp(2rem,5.5vw,3.4rem); line-height:1; margin:0 0 12px; }
.lede{ font-size:clamp(1.05rem,2.1vw,1.3rem); color:var(--fg-dim); max-width:58ch; margin:0 0 34px; }
.sub{ color:var(--fg-dim); max-width:62ch; margin:0 0 40px; }

.cta{ display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  font-family:var(--cond); font-size:17px; letter-spacing:.06em; text-transform:uppercase;
  padding:14px 28px; border-radius:2px; text-decoration:none; border:2px solid transparent;
  cursor:pointer; white-space:nowrap; transition:transform .2s ease, background-color .2s ease, color .2s ease;
}
.btn:hover,.btn:focus-visible{ transform:translateY(-2px); }
.btn--go{ background:var(--blue); color:#fff; }
.btn--go:hover{ background:var(--blue-lit); color:var(--ink); }
.btn--ghost{ border-color:var(--line-2); color:var(--fg); }
.btn--ghost:hover{ background:var(--surface); }

.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.ep{ margin:0; }
.ep video{ width:100%; aspect-ratio:9/16; background:#05070E; border:1px solid var(--line); display:block; object-fit:cover; }
.ep figcaption{ padding-top:12px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.ep figcaption b{ font-family:var(--display); font-size:1.6rem; color:var(--blue-lit); }
.ep figcaption span{ font-family:var(--cond); font-size:15px; line-height:1.3; letter-spacing:.03em; color:var(--fg-dim); }

.steps{ counter-reset:s; list-style:none; padding:0; margin:0; display:grid; gap:2px; background:var(--line); border:1px solid var(--line); }
.steps li{ background:var(--ink-2); padding:28px clamp(20px,3vw,34px); }
.steps li b{ display:block; font-family:var(--cond); font-size:1.35rem; letter-spacing:.01em; margin-bottom:6px; }
.steps li b::before{ counter-increment:s; content:counter(s,decimal-leading-zero); color:var(--blue); margin-right:14px; }
.steps li p{ margin:0; color:var(--fg-dim); max-width:62ch; }
.note{ margin-top:26px; color:var(--fg-dim); font-size:15.5px; border-left:3px solid var(--blue); padding-left:16px; max-width:62ch; }

.form{ display:grid; gap:16px; max-width:760px; }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
label{ display:grid; gap:7px; font-family:var(--cond); font-size:15px; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-dim); }
input,textarea{
  font-family:var(--body); font-size:16.5px; color:var(--fg); text-transform:none; letter-spacing:normal;
  background:var(--ink-2); border:1px solid var(--line-2); border-radius:2px; padding:13px 15px;
}
input::placeholder,textarea::placeholder{ color:#5C6B87; }
input:focus,textarea:focus{ outline:2px solid var(--blue); outline-offset:1px; border-color:transparent; }
.form .btn{ justify-self:start; }
.fineprint{ margin:0; font-size:14px; color:var(--fg-dim); }

footer{
  border-top:1px solid var(--line); padding:26px 0 46px; margin-top:40px;
  width:min(1120px,calc(100% - 40px)); margin-inline:auto;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--cond); font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim);
}

@media (max-width:900px){ .grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){
  .nav nav{ display:none; }
  .grid,.row{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .btn{ transition:none; } }

/* --- Rode it -------------------------------------------------------------
   Footage of the boards actually being ridden. At launch every archive is
   empty, so the empty state has to recruit rather than apologise. */
.rode-btn{
  margin-top:12px; justify-self:start; align-self:start; white-space:nowrap;
  font-family:var(--cond); font-size:14px; letter-spacing:.08em; text-transform:uppercase;
  background:transparent; color:var(--blue-lit); border:1px solid var(--line-2);
  border-radius:2px; padding:7px 13px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition:background-color .2s ease, color .2s ease;
}
.rode-btn:hover,.rode-btn:focus-visible{ background:var(--blue); color:#fff; border-color:transparent; }
.rode-n{ font-family:var(--body); font-size:12px; opacity:.75; }

.rode-lanes{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); border:1px solid var(--line); margin-bottom:34px; }
.lane{ background:var(--ink-2); padding:30px clamp(20px,3vw,34px); }
.lane--now{ background:var(--surface); }
.lane__tag{
  display:inline-block; font-family:var(--cond); font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); background:var(--blue-lit);
  padding:3px 10px; border-radius:2px; margin-bottom:14px;
}
.lane--now .lane__tag{ background:var(--blue); color:#fff; }
.lane h3{ font-family:var(--display); font-size:1.6rem; margin:0 0 10px; font-weight:400; }
.lane p{ margin:0; color:var(--fg-dim); }

.rode-panel{ border:1px solid var(--line-2); background:var(--ink-2); }
.rode-panel__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--line);
}
.rode-panel__head b{ font-family:var(--display); font-size:1.3rem; font-weight:400; }
.rode-close{ background:none; border:0; color:var(--fg-dim); font-size:28px; line-height:1; cursor:pointer; padding:0 4px; }
.rode-close:hover{ color:var(--fg); }
.rode-body{ padding:26px 20px 30px; }
.rode-empty{ color:var(--fg-dim); max-width:60ch; }
.rode-empty b{ display:block; font-family:var(--cond); font-size:1.2rem; color:var(--fg); margin-bottom:8px; letter-spacing:.02em; }
.rode-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.rode-item img,.rode-item video{ width:100%; display:block; border:1px solid var(--line); background:#000; }
.rode-item figcaption{ padding-top:8px; font-family:var(--cond); font-size:14px; color:var(--fg-dim); letter-spacing:.03em; }
.rode-item .era{ color:var(--blue-lit); }

@media (max-width:760px){ .rode-lanes{ grid-template-columns:1fr; } }

/* --- Timeline ------------------------------------------------------------
   The site's premise is years, so the years are the spine. Filled slots carry
   an episode; empty ones are the recruitment surface — a visible gap somebody
   can claim beats a grid that looks finished. */
.timeline{ padding-top:clamp(60px,8vw,110px); }
.tl-head{ margin-bottom:clamp(34px,5vw,62px); }
.tl-wrap{ position:relative; }

/* the rail and its scroll-linked fill */
.tl-rail{
  position:absolute; left:11px; top:0; bottom:0; width:2px;
  background:linear-gradient(var(--line),rgba(127,212,255,.05));
}
.tl-progress{
  position:absolute; inset:0 0 auto 0; height:100%;
  background:linear-gradient(var(--blue-lit),var(--blue));
  transform:scaleY(0); transform-origin:50% 0;
}
html.no-motion .tl-progress{ transform:scaleY(1); }

/* year counter, parked beside the rail while the timeline is on screen */
.tl-ticker{
  position:sticky; top:96px; z-index:3; float:right;
  font-family:var(--display); font-size:clamp(2.4rem,7vw,5rem); line-height:1;
  color:var(--blue); opacity:.28; pointer-events:none;
  margin-top:-10px; padding-right:6px;
}

.tl-list{ list-style:none; margin:0; padding:0; }
.tl-year{ position:relative; padding:0 0 0 44px; min-height:52px; }
.tl-tick{
  position:absolute; left:4px; top:14px; width:16px; height:16px; border-radius:50%;
  background:var(--ink); border:2px solid var(--line-2);
}
.tl-year--filled .tl-tick{ background:var(--blue); border-color:var(--blue-lit); box-shadow:0 0 0 5px rgba(46,107,255,.16); }
.tl-label{
  display:block; font-family:var(--display); font-size:1.5rem; line-height:1;
  color:var(--fg-dim); padding:9px 0 0;
}
.tl-year--filled .tl-label{ color:var(--blue-lit); font-size:2.1rem; }

.tl-year--open{ padding-bottom:16px; }
.tl-claim{
  display:inline-block; margin:4px 0 0; font-family:var(--cond); font-size:14.5px;
  letter-spacing:.05em; color:#6E7F9C; text-decoration:none; border-bottom:1px dashed rgba(127,212,255,.22);
}
.tl-claim:hover,.tl-claim:focus-visible{ color:var(--blue-lit); border-bottom-color:var(--blue-lit); }

.tl-year--filled{ padding-bottom:52px; }
.tl-card{ margin:14px 0 0; display:grid; grid-template-columns:280px 1fr; gap:26px; align-items:start; }
.tl-media video{
  width:100%; aspect-ratio:9/16; object-fit:cover; display:block;
  background:var(--ink); border:1px solid var(--line);
}
.tl-card figcaption{ display:flex; flex-direction:column; align-items:stretch; gap:10px; padding-top:2px; }
.tl-card figcaption b{ font-family:var(--display); font-size:1.7rem; font-weight:400; line-height:1.12; }
.tl-card figcaption span{ font-family:var(--cond); font-size:16px; line-height:1.35; color:var(--fg-dim); max-width:46ch; }
.tl-card figcaption .rode-btn{ align-self:flex-start; margin-top:2px; }

html.motion .tl-year{ opacity:0; }

@media (max-width:820px){
  /* No pinning on phones. The rail stays, the cards drop into flow, and the
     media goes full width — nothing is height-constrained, so nothing clips. */
  .tl-ticker{ float:none; position:sticky; top:74px; text-align:right; margin:0 0 -34px; opacity:.20; }
  .tl-card{ grid-template-columns:1fr; gap:14px; }
  .tl-media{ max-width:300px; }
  .tl-year{ padding-left:38px; }
  .tl-year--filled{ padding-bottom:40px; }
}

/* --- Surface taxonomy + category filter ---------------------------------
   "Boards" is the interactive word because the range of surfaces is the
   surprise: most people assume snow. Hover reveals it on a pointer, focus and
   tap reveal it everywhere else — hover alone would hide it from every phone. */
.surf{
  color:var(--blue-lit); border-bottom:2px dotted var(--blue);
  cursor:help; font-weight:600;
}
.surf:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:2px; }
.surf-pop{
  margin:18px 0 30px; padding:22px 24px;
  background:var(--ink-2); border:1px solid var(--line-2); border-radius:3px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:20px 26px;
  max-width:820px;
}
.surf-pop[hidden]{ display:none; }
.surf-pop div{ display:flex; flex-direction:column; gap:5px; }
.surf-pop b{
  font-family:var(--cond); font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-lit); margin-bottom:3px;
}
.surf-pop span{ font-family:var(--cond); font-size:15.5px; color:var(--fg-dim); letter-spacing:.02em; }

.tl-filter{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 30px; }
.chip{
  font-family:var(--cond); font-size:14px; letter-spacing:.05em;
  background:transparent; color:var(--fg-dim);
  border:1px solid var(--line); border-radius:999px; padding:7px 15px; cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
.chip:hover,.chip:focus-visible{ color:var(--fg); border-color:var(--line-2); }
.chip.is-on{ background:var(--blue); border-color:var(--blue); color:#fff; }
.tl-none{ color:var(--fg-dim); margin:0 0 26px; }
.tl-none a{ color:var(--blue-lit); }
.tl-year[hidden]{ display:none; }

@media (max-width:820px){
  .surf-pop{ grid-template-columns:1fr 1fr; gap:16px 18px; padding:18px; }
  .tl-filter{ gap:6px; }
  .chip{ font-size:13px; padding:6px 12px; }
}

/* --- Timeline search -----------------------------------------------------
   Searching a year that nobody has filled is the useful case, not an edge
   case: it lands the visitor on an empty slot with a claim link. */
.tl-tools{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 0 16px; }
.tl-search{ position:relative; flex:1 1 320px; max-width:420px; }
.tl-search__icon{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; fill:none; stroke:var(--fg-dim); stroke-width:2; stroke-linecap:round;
  pointer-events:none;
}
.tl-search input{
  width:100%; padding:12px 40px 12px 42px;
  font-family:var(--body); font-size:16px; color:var(--fg);
  background:var(--ink-2); border:1px solid var(--line-2); border-radius:999px;
  -webkit-appearance:none; appearance:none;
}
.tl-search input::placeholder{ color:#5C6B87; }
.tl-search input:focus{ outline:2px solid var(--blue); outline-offset:1px; border-color:transparent; }
.tl-search input::-webkit-search-cancel-button{ display:none; }
.tl-search__clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:0; color:var(--fg-dim); font-size:24px; line-height:1;
  cursor:pointer; padding:2px 8px;
}
.tl-search__clear:hover{ color:var(--fg); }
.tl-count{
  margin:0; font-family:var(--cond); font-size:14px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--fg-dim); white-space:nowrap;
}
@media (max-width:820px){ .tl-search{ max-width:none; } .tl-count{ font-size:13px; } }