/* Late Pack · main.css
   Design-System: brand-board-v1.html
   Palette: Dusk / Ash / Copper / Peach / Bone / Slate
*/

:root {
  --dusk: #14172A;
  --ash: #22263D;
  --ash-2: #2E3350;
  --copper: #D46236;
  --copper-dark: #A64828;
  --peach: #EAB090;
  --bone: #F5EFE4;
  --slate: #7A7C8A;
  --slate-mute: #383B52;
  --font-display: 'Impact', 'Haettenschweiler', 'Franklin Gothic Bold', 'Arial Narrow Bold', 'Helvetica Neue Condensed', 'Helvetica Neue', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, 'Menlo', Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--dusk);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--peach); text-decoration: none; }
a:hover, a:focus-visible { color: var(--copper); }

/* Skip link (a11y) */
.skip {
  position: absolute; left: -9999px; top: -9999px;
  background: var(--copper); color: var(--dusk); padding: 8px 16px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase;
}
.skip:focus { left: 12px; top: 12px; z-index: 100; }

/* Topbar */
.topbar {
  max-width: 1080px; margin: 0 auto;
  padding: 1.25rem 2rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
.brand {
  display: flex; align-items: center; gap: 0.75rem;
  color: var(--bone);
}
.brand:hover, .brand:focus-visible { color: var(--bone); }
.brand-bib { flex-shrink: 0; }
.brand-word {
  font-family: var(--font-display);
  font-size: 22px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400;
}
.brand-slash { color: var(--copper); }

.topnav { display: flex; gap: 1.5rem; }
.topnav a {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--slate); letter-spacing: 0.16em; text-transform: uppercase;
}
.topnav a:hover, .topnav a:focus-visible { color: var(--peach); }

@media (max-width: 640px) {
  .topbar { padding: 1rem 1.25rem; flex-wrap: wrap; }
  .topnav { gap: 1rem; width: 100%; justify-content: flex-start; padding-top: 0.5rem; border-top: 1px solid var(--slate-mute); }
}

/* Hero */
.hero {
  border-top: 1px solid var(--slate-mute);
  border-bottom: 1px solid var(--slate-mute);
  padding: 4rem 0 5rem;
}
.hero-inner {
  max-width: 1080px; margin: 0 auto;
  padding: 0 2rem;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--copper);
  letter-spacing: 0.18em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.75rem;
  margin-bottom: 2rem;
}
.eyebrow .dot { width: 8px; height: 8px; background: var(--copper); border-radius: 50%; display: inline-block; }

.wordmark {
  font-family: var(--font-display);
  font-size: clamp(64px, 18vw, 200px);
  line-height: 0.88; letter-spacing: -0.005em;
  color: var(--bone);
  margin: 0 0 1.5rem;
  font-weight: 400;
  text-wrap: balance;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.wordmark .slash { color: var(--copper); padding: 0 0.03em; }

.tagline {
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--peach);
  max-width: 42ch; line-height: 1.35;
  margin: 0 0 3rem;
}

.countdown {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  border-top: 1px solid var(--slate-mute);
  padding-top: 2rem;
}
.cd-block { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
@media (min-width: 640px) {
  .countdown { grid-template-columns: minmax(80px, 1fr) minmax(220px, 1.5fr) 2fr; }
}
.cd-label {
  font-family: var(--font-mono);
  font-size: 10px; color: var(--slate);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.cd-value {
  font-family: var(--font-mono);
  font-size: clamp(38px, 6vw, 56px);
  color: var(--copper);
  line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cd-value-mono { color: var(--peach); }
.cd-value-text {
  font-family: var(--font-body);
  font-size: 16px; color: var(--bone);
  letter-spacing: 0; font-weight: 500;
  margin-top: 4px;
}

/* Sections */
.section {
  max-width: 1080px; margin: 0 auto;
  padding: 4rem 2rem;
  border-bottom: 1px solid var(--slate-mute);
}
.km-marker {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--copper);
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 1rem;
}
h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 400;
  margin: 0 0 1.5rem;
  color: var(--bone);
  text-transform: uppercase; letter-spacing: 0.005em;
  line-height: 0.95; text-wrap: balance;
}

.lead {
  font-size: 18px; line-height: 1.6;
  color: var(--bone);
  max-width: 62ch;
  margin: 0 0 1rem;
}
.lead strong { color: var(--copper); font-weight: 500; }
.lead .peach { color: var(--peach); }
.lead-small {
  font-size: 14px; color: var(--slate);
  max-width: 60ch; margin-top: 1.5rem; font-style: italic;
}

/* Roadmap */
.roadmap {
  list-style: none; padding: 0; margin: 2rem 0 0;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--slate-mute);
}
.rm-item {
  display: grid;
  grid-template-columns: 80px 1fr 2fr;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--slate-mute);
  align-items: baseline;
}
.rm-year {
  font-family: var(--font-mono);
  font-size: 14px; color: var(--slate);
  letter-spacing: 0.05em;
}
.rm-race {
  font-family: var(--font-display);
  font-size: 22px; color: var(--bone);
  text-transform: uppercase; letter-spacing: 0.02em;
}
.rm-note {
  font-size: 14px; color: var(--peach); line-height: 1.4;
}
.rm-current { background: linear-gradient(90deg, rgba(212,98,54,0.08), transparent 60%); border-left: 3px solid var(--copper); padding-left: 1rem; margin-left: -1rem; }
.rm-current .rm-year { color: var(--copper); }
.rm-highlight .rm-race { color: var(--copper); }
.rm-optional { opacity: 0.6; }

@media (max-width: 640px) {
  .rm-item { grid-template-columns: 60px 1fr; gap: 0.75rem; }
  .rm-note { grid-column: 1 / -1; padding-left: 0; }
}

/* Signup */
.section-signup { background: var(--ash); border-radius: 0; }
.signup { margin-top: 2rem; max-width: 480px; }
.signup-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px; color: var(--slate);
  letter-spacing: 0.15em; text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.signup-row {
  display: flex; gap: 8px;
  border: 1px solid var(--slate-mute);
  background: var(--dusk);
  padding: 4px;
}
.signup-input {
  flex: 1;
  background: transparent; border: 0; color: var(--bone);
  padding: 0.75rem 0.75rem;
  font-family: var(--font-body); font-size: 15px;
}
.signup-input:focus { outline: 1px solid var(--copper); outline-offset: -1px; }
.signup-btn {
  background: var(--copper); color: var(--dusk);
  border: 0; padding: 0.75rem 1.25rem;
  font-family: var(--font-display); font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease;
}
.signup-btn:hover, .signup-btn:focus-visible { background: var(--peach); }
.signup-note {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--slate);
  margin: 0.75rem 0 0;
  letter-spacing: 0.02em;
}
.signup-soon {
  margin-top: 2rem;
  padding: 1.5rem 1.75rem;
  background: var(--dusk);
  border-left: 3px solid var(--copper);
}
.signup-soon p { margin: 0; color: var(--bone); font-size: 15px; line-height: 1.55; }
.signup-soon strong { color: var(--copper); font-weight: 500; }

/* Footer */
.site-footer {
  max-width: 1080px; margin: 0 auto;
  padding: 3rem 2rem 4rem;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--slate-mute);
  align-items: flex-end;
}
.foot-brand { display: flex; flex-direction: column; gap: 0.4rem; }
.foot-word {
  font-family: var(--font-display);
  font-size: 22px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bone);
}
.foot-tag {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--slate);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.foot-meta {
  display: flex; flex-direction: column; gap: 0.3rem;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px; color: var(--slate);
  letter-spacing: 0.05em;
}
.foot-meta a { color: var(--slate); text-decoration: underline; text-decoration-color: var(--slate-mute); }
.foot-meta a:hover, .foot-meta a:focus-visible { color: var(--peach); }
@media (max-width: 640px) {
  .foot-grid { grid-template-columns: 1fr; }
  .foot-meta { text-align: left; }
}