:root {
  --asphalt: #1d1e1b;
  --paper: #f1e8d5;
  --chalk: #fffaf0;
  --dust: #b59a72;
  --clay: #c95136;
  --petrol: #236d70;
  --yellow: #efb82d;
  --line: rgba(29, 30, 27, 0.22);
}

* { box-sizing: border-box; }

html { background: var(--asphalt); }

body {
  margin: 0;
  min-width: 320px;
  color: var(--asphalt);
  background:
    radial-gradient(circle at 18% 12%, rgba(181, 154, 114, 0.16) 0 1px, transparent 1.5px) 0 0 / 17px 17px,
    var(--paper);
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  min-height: 100vh;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10;
  padding: 10px 14px;
  color: var(--chalk);
  background: var(--asphalt);
  transform: translateY(-140%);
}

.skip-link:focus { transform: translateY(0); }

.site-header,
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px clamp(20px, 4vw, 64px);
}

.site-header {
  min-height: 68px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-decoration: none;
}

.brand-logo {
  display: block;
  width: auto;
  height: clamp(38px, 4vw, 46px);
  max-width: 132px;
  object-fit: contain;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-logo {
  display: block;
  width: auto;
  max-width: min(78%, 420px);
  max-height: 226px;
  height: auto;
  margin: 14px 0 24px;
  object-fit: contain;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.status span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--clay);
  box-shadow: 0 0 0 5px rgba(201, 81, 54, 0.13);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(360px, 1.06fr);
  min-height: calc(100vh - 165px);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(54px, 7vw, 112px) clamp(24px, 5.6vw, 96px);
}

.eyebrow,
.track-label,
.coordinate {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.eyebrow { color: var(--petrol); }

h1 {
  margin: 22px 0 26px;
  font-family: "Arial Narrow", "Avenir Next Condensed", Impact, sans-serif;
  font-size: clamp(88px, 12.6vw, 210px);
  font-stretch: condensed;
  font-weight: 900;
  letter-spacing: -0.065em;
  line-height: 0.73;
}

h1 span { display: block; }
h1 span:last-child { color: var(--clay); }

.tagline {
  margin: 0;
  font-size: clamp(25px, 2.3vw, 38px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.intro {
  max-width: 520px;
  margin: 25px 0 0;
  color: rgba(29, 30, 27, 0.73);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
}

.launch-note {
  display: flex;
  align-items: center;
  gap: 18px;
  width: fit-content;
  margin-top: 44px;
  padding-top: 18px;
  border-top: 2px solid var(--asphalt);
}

.launch-number {
  color: var(--clay);
  font-family: "Arial Narrow", Impact, sans-serif;
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
}

.launch-note p { margin: 0; font-size: 13px; line-height: 1.45; }

.track-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 640px;
  overflow: hidden;
  color: var(--chalk);
  background: var(--asphalt);
  isolation: isolate;
}

.track-stage::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: 0.14;
  background-image: repeating-linear-gradient(103deg, transparent 0 28px, rgba(255,255,255,.09) 29px, transparent 31px);
}

.track-label,
.coordinate { position: absolute; z-index: 2; }
.track-label { top: 34px; left: 34px; color: var(--yellow); }
.coordinate { right: 34px; bottom: 32px; color: rgba(255, 250, 240, 0.56); }

.track-art { width: min(94%, 760px); overflow: visible; }
.world-frame {
  position: relative;
  display: grid;
  width: min(96%, 780px);
  place-items: center;
}

.world-visual {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(.94) contrast(1.03);
  transform-origin: center;
}

.world-dust {
  position: absolute;
  width: 18%;
  aspect-ratio: 2.8;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(181, 154, 114, .2);
  filter: blur(15px);
  opacity: 0;
}

.world-dust-a { top: 35%; right: 12%; transform: rotate(-16deg); }
.world-dust-b { bottom: 23%; left: 11%; transform: rotate(13deg); }
.track-shadow,
.track-main,
.track-inner { fill: none; }
.track-shadow { stroke: #0e0f0d; stroke-width: 78; opacity: 0.65; transform: translate(8px, 12px); }
.track-main { stroke: var(--dust); stroke-width: 66; stroke-linecap: round; }
.track-inner { stroke: rgba(255, 250, 240, 0.26); stroke-width: 2; stroke-dasharray: 8 14; }
.tread { fill: none; stroke: rgba(29, 30, 27, 0.62); stroke-width: 8; stroke-linecap: round; }
.waypoint circle:first-child { fill: var(--asphalt); stroke: var(--chalk); stroke-width: 3; }
.waypoint circle:last-child { fill: var(--yellow); }
.waypoint-a circle:last-child { fill: var(--clay); }
.vehicle { fill: var(--clay); stroke: var(--chalk); stroke-width: 3; }
.vehicle circle { fill: var(--asphalt); }

.site-footer {
  min-height: 76px;
  color: rgba(255, 250, 240, 0.66);
  background: var(--asphalt);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.site-footer p { margin: 0; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { min-height: 630px; }
  .track-stage { min-height: min(100vw, 690px); }
  .site-footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 520px) {
  .site-header { min-height: 60px; padding-block: 8px; }
  .brand-logo { height: 36px; max-width: 104px; }
  .status { font-size: 0; }
  .status span { display: block; }
  .hero-copy { min-height: 590px; padding-top: 64px; padding-bottom: 64px; }
  h1 { font-size: clamp(84px, 30vw, 140px); }
  .hero-logo { max-width: min(88%, 350px); max-height: 188px; }
  .track-stage { min-height: 470px; }
  .track-label { top: 25px; left: 20px; }
  .coordinate { right: 20px; bottom: 24px; }
}

@media (prefers-reduced-motion: no-preference) {
  .brand-logo { transition: transform 240ms ease; }
  .brand:hover .brand-logo { transform: rotate(-1.5deg) scale(1.015); }
  .world-visual { animation: world-breathe 10s ease-in-out infinite; }
  .world-dust-a { animation: dust-drift-a 5.8s ease-out infinite; }
  .world-dust-b { animation: dust-drift-b 6.8s 1.4s ease-out infinite; }
  @keyframes world-breathe {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(0, -7px, 0) scale(1.018); }
  }
  @keyframes dust-drift-a {
    0%, 30% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-16deg) scale(.55); }
    44% { opacity: .65; }
    78%, 100% { opacity: 0; transform: translate3d(-48px, -8px, 0) rotate(-16deg) scale(1.35); }
  }
  @keyframes dust-drift-b {
    0%, 30% { opacity: 0; transform: translate3d(0, 0, 0) rotate(13deg) scale(.5); }
    45% { opacity: .55; }
    80%, 100% { opacity: 0; transform: translate3d(52px, -9px, 0) rotate(13deg) scale(1.3); }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}