:root {
  --cream: #F3E9D2;
  --black: #141414;
  --blue: #1D4E89;
  --teal: #1A9E9A;
  --yellow: #F7B500;
  --orange: #F26A1B;
  --red: #D7263D;
  --bg: var(--cream);
  --ink: var(--black);
  --panel: var(--black);
  --panel-ink: var(--cream);
  --accent: var(--orange);
  --accent-ink: var(--black);
  --gutter: clamp(16px, 6vw, 96px);
  --display: 'Archivo', 'Arial Black', sans-serif;
  --label: 'Michroma', 'Arial', sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
/* headlights on: a dark beige night, never pure black */
:root[data-mode="dark"] {
  --bg: #4A4132;
  --ink: var(--cream);
  --panel: #342D22;
  --panel-ink: var(--cream);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { transition: background-color 500ms, color 500ms; margin: 0; background: var(--bg); color: var(--ink); font: 400 18px/1.55 var(--body); overflow-x: clip; }
h1, h2, p, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
section { padding: clamp(64px, 10vw, 128px) var(--gutter); }
canvas { display: block; }

h2, .channel, .marquee {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 1.02;
}
h2 { font-size: clamp(40px, 7vw, 88px); }
.label, .tagline {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 13px;
  line-height: 1.6;
}
.intro { max-width: 34em; margin-top: 20px; font-size: clamp(18px, 2vw, 22px); }

/* scroll reveal (only when scripts run) */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* hero */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: clip; }
.hero h1 { max-width: 1120px; }
.logo { display: block; width: 100%; height: auto; overflow: visible; }
.tagline { margin-top: clamp(16px, 2.5vw, 32px); }
.lead { max-width: 30em; margin-top: 28px; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.35; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }
.button {
  display: inline-block;
  padding: 16px 28px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
  transform: skewX(-12deg);
  transition: background-color 300ms, color 300ms, transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.button:hover { transform: skewX(-12deg) translate(-3px, -3px); box-shadow: 6px 6px 0 currentColor; }
.text-link { font-weight: 600; text-underline-offset: 4px; overflow-wrap: anywhere; }

/* hero, below the logo: the words on the left, the Convoy game on the right */
.hero-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start;
  max-width: 1120px; margin-top: clamp(16px, 2.5vw, 32px);
}
.hero-cols .tagline { margin-top: 0; }
.hero-game .convoy .score { font-size: clamp(26px, 3vw, 36px); }
.hero-game .convoy .overlay-title { font-size: clamp(24px, 3.4vw, 40px); }
@media (max-width: 639px) { .hero-game .how-link { display: none; } }
body:has(.convoy .game.playing) .tach { opacity: 0; pointer-events: none; }   /* the rev counter would sit on the corner of the lot */

/* convoy game (home page hero and convoy.html) */
.convoy { --ratio: 1.6; width: 100%; }
.convoy .hud { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.convoy .hud > span:first-child { display: flex; align-items: baseline; gap: 10px; }
.convoy .score, .convoy .overlay-title {
  font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 125%;
  letter-spacing: -0.03em; text-transform: uppercase; line-height: 1;
}
.convoy .score { font-size: clamp(32px, 5vw, 52px); }
.convoy .game {
  position: relative; width: 100%; aspect-ratio: var(--ratio);
  box-shadow: 0 0 0 3px var(--ink); background: var(--bg); overflow: hidden; cursor: pointer;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  transition: background-color 500ms, box-shadow 500ms;
}
.convoy .game.playing { touch-action: none; }   /* swipes steer during a run; otherwise the page still scrolls */
.convoy .game:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
.convoy canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.convoy .stripes { display: flex; flex-direction: column; margin-top: 3px; }
.convoy .stripes i { height: 5px; }
.convoy .overlay {
  position: absolute; inset: 0 0 52% 0; padding: 0 16px; pointer-events: none; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  transition: opacity 200ms;
}
.convoy .game.playing .overlay { opacity: 0; }
.convoy .overlay-title { font-size: clamp(26px, 5vw, 52px); }
.convoy .overlay-title:empty { display: none; }
.convoy .overlay-title, .convoy .overlay-sub { background: var(--bg); padding: 4px 10px; transition: background-color 500ms; }
.convoy .overlay-cta { padding: 10px 20px; background: var(--accent); color: var(--accent-ink); font-weight: 600; transform: skewX(-12deg); }
.convoy .dpad { display: none; grid-template-columns: repeat(3, 68px); grid-template-rows: repeat(2, 56px); gap: 8px; justify-content: center; margin-top: 18px; touch-action: manipulation; }
.convoy .dpad button { background: var(--ink); color: var(--bg); display: grid; place-items: center; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.convoy .dpad button:active { background: var(--accent); color: var(--accent-ink); }
.convoy .dpad svg { width: 22px; height: 22px; }
.convoy .dpad [data-dir="up"] { grid-column: 2; grid-row: 1; }
.convoy .dpad [data-dir="left"] { grid-column: 1; grid-row: 2; }
.convoy .dpad [data-dir="down"] { grid-column: 2; grid-row: 2; }
.convoy .dpad [data-dir="right"] { grid-column: 3; grid-row: 2; }
.convoy .dpad [data-dir="right"] svg { transform: rotate(90deg); }
.convoy .dpad [data-dir="down"] svg { transform: rotate(180deg); }
.convoy .dpad [data-dir="left"] svg { transform: rotate(-90deg); }

/* convoy.html: the game on a page of its own */
.game-page {
  --chrome: 380px;
  min-height: 100svh; padding: clamp(16px, 3vw, 40px) var(--gutter);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
}
.game-page h2 { font-size: clamp(34px, 6vw, 68px); }
.game-page .label a { text-decoration: none; }
.game-page .convoy { width: min(100%, 880px, max(250px, calc((100svh - var(--chrome)) * var(--ratio)))); }
.how { max-width: 880px; margin-top: 8px; }
.how ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 32px; margin-top: 8px; font-size: 15px; line-height: 1.45; text-align: left; }
.how li { padding-left: 16px; position: relative; }
.how li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; background: var(--accent); transform: skewX(-12deg); }
.how .on-touch { display: none; }
@media (hover: none), (max-width: 640px) {
  .game-page { --chrome: 480px; }
  .convoy .dpad { display: grid; }
  .how ul { grid-template-columns: 1fr; }
  .how .on-keys { display: none; }
  .how .on-touch { display: inline; }
}

/* globe */
.world {
  background: var(--panel); color: var(--panel-ink);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center;
}
.world .label { color: var(--yellow); }
.world h2 { margin-top: 16px; font-size: clamp(30px, 4.3vw, 60px); }
.globe { position: relative; width: 100%; max-width: 560px; justify-self: center; }
.globe canvas { width: 100%; height: auto; aspect-ratio: 1; touch-action: pan-y; cursor: grab; }
.globe canvas:active { cursor: grabbing; }
.globe-hint { margin-top: 28px; text-align: center; opacity: .7; color: var(--panel-ink) !important; pointer-events: none; }

/* ticker */
.marquee { overflow: hidden; background: var(--accent); color: var(--accent-ink); font-size: clamp(20px, 2.6vw, 30px); padding: 14px 0; transition: background-color 300ms, color 300ms; }
.marquee-track { display: flex; width: max-content; animation: ticker 18s linear infinite; }
.marquee-track span { white-space: pre; }
@keyframes ticker { to { transform: translateX(-12.5%); } }

/* find us (in the hero's left column, under the intro) */
.find-us { margin-top: clamp(32px, 4vw, 48px); }
.channels { margin-top: 12px; }
.channels li {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 6px 24px; padding: 16px 0; border-top: 2px solid var(--ink);
}
.channel { font-size: clamp(20px, 2.2vw, 26px); }

footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding: 28px var(--gutter); padding-right: calc(var(--gutter) + 96px);
  background: var(--panel); color: var(--panel-ink); font-size: 15px;
  border-top: 1px solid rgba(243, 233, 210, .25);
}

/* headlight switch and the beam that follows the cursor at night */
.logo path { fill: var(--ink); transition: fill 500ms; }
section, footer, .channels li { transition: background-color 500ms, color 500ms, border-color 500ms; }
.lights { position: fixed; top: 16px; right: 16px; z-index: 11; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); transition: transform 200ms var(--ease), background-color 500ms; }
.lights:hover { transform: scale(1.08); }
.lights svg { display: block; width: 100%; height: 100%; }
.lights .lamp { fill: var(--bg); transition: fill 500ms; }
.lights .beams { stroke: var(--bg); opacity: .35; transition: stroke 500ms, opacity 500ms; }
[data-mode="dark"] .lights { background: var(--panel); }
[data-mode="dark"] .lights .lamp { fill: var(--yellow); }
[data-mode="dark"] .lights .beams { stroke: var(--yellow); opacity: 1; }
.beam {
  position: fixed; inset: 0; z-index: 9; pointer-events: none; opacity: 0; transition: opacity 500ms;
  background: radial-gradient(circle 340px at var(--mx, 50%) var(--my, 30%), rgba(255, 232, 170, .20), rgba(255, 232, 170, .07) 55%, transparent 100%);
  mix-blend-mode: screen;
}
[data-mode="dark"] .beam { opacity: 1; }
@media (hover: none) { .beam { display: none; } }

/* rev counter that follows the scroll */
.tach { position: fixed; right: 16px; bottom: 16px; width: 76px; height: 76px; z-index: 10; border-radius: 50%; transition: transform 200ms var(--ease), opacity 300ms; }
.tach:hover { transform: scale(1.08); }
.tach svg { display: block; width: 100%; height: 100%; }
.tach-needle { stroke: var(--accent); transform-box: view-box; transform-origin: 50% 50%; transform: rotate(var(--deg, -120deg)); transition: transform 180ms ease-out, stroke 300ms; }

@media (max-width: 860px) {
  .hero-cols { grid-template-columns: 1fr; }
  .world { grid-template-columns: 1fr; }
  .globe { grid-row: 1; max-width: 420px; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .label, .tagline { font-size: 12px; letter-spacing: 0.16em; }
  .tach { display: none; }   /* it would sit on top of the text on a phone */
  footer { padding-right: var(--gutter); }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  .tach-needle, .button { transition: none; }
}

/* things that need scripts stay hidden without them */
html:not(.js) .lights, html:not(.js) .paint, html:not(.js) .globe, html:not(.js) .tach, html:not(.js) .hero-game { display: none; }