/* Hardpack Rally, hardpackrally.com
   The palette is the game's own: the menu panel's ink (0.043 0.067 0.086),
   its text (0.93 0.95 0.96), its orange (1.0 0.416 0.169) and the cream of
   the title and the gate banners. The face is the same system monospace the
   game asks Godot for, so the page reads in the game's voice. */

:root {
  --ink:      #0b1116;   /* the menu panel's background */
  --ink-2:    #101820;   /* one step up, for the alternating bands */
  --ink-3:    #16212b;   /* card faces */
  --line:     #22303c;
  --text:     #edf2f5;   /* the menu's text */
  --dim:      #93a4b3;
  --orange:   #ff6a2b;   /* the menu's accent */
  --orange-2: #ff9959;   /* its hover */
  --cream:    #f5e6c8;   /* the title and the gate banners */
  --bar-h:    58px;
  --pad:      clamp(20px, 5vw, 72px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--bar-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono",
               "Liberation Mono", "Noto Sans Mono", monospace;
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--orange-2); }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--orange); color: #1a0800; padding: 10px 16px;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------------------------------------------------------------- the bar */

.bar {
  position: sticky; top: 0; z-index: 50;
  height: var(--bar-h);
  display: flex; align-items: center; gap: 24px;
  padding: 0 var(--pad);
  background: rgba(11, 17, 22, 0.94);
  border-bottom: 1px solid var(--line);
}
.mark {
  color: var(--cream); font-size: 14px; letter-spacing: 0.08em;
  white-space: nowrap;
}
.mark:hover { color: var(--cream); }
.bar nav { display: flex; gap: 22px; margin-left: auto; }
.bar nav a {
  color: var(--dim); font-size: 12px; letter-spacing: 0.1em;
  padding: 4px 0; border-bottom: 1px solid transparent;
}
.bar nav a:hover { color: var(--text); border-bottom-color: var(--orange); }
.pill {
  font-size: 11px; letter-spacing: 0.12em; color: var(--orange);
  border: 1px solid rgba(255, 106, 43, 0.45);
  background: rgba(255, 106, 43, 0.10);
  padding: 5px 11px; white-space: nowrap;
}
@media (max-width: 900px) { .bar nav { display: none; } .pill { margin-left: auto; } }

/* --------------------------------------------------------------- the hero */

.hero { position: relative; min-height: min(92vh, 860px); display: flex; }
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 58%;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(11,17,22,0.42) 0%, rgba(11,17,22,0.02) 30%,
                    rgba(11,17,22,0.58) 76%, var(--ink) 100%),
    linear-gradient(to right, rgba(11,17,22,0.52) 0%, rgba(11,17,22,0) 58%);
}
.hero-wrap {
  position: relative; z-index: 2;
  align-self: flex-end;
  padding: 0 var(--pad) clamp(56px, 9vh, 110px);
  max-width: 780px;
}
.hero h1 {
  font-size: clamp(42px, 9.2vw, 116px);
  line-height: 0.98;
  letter-spacing: 0.02em;
  margin: 0 0 20px;
  color: var(--cream);
  font-weight: 400;
  text-shadow: 0 3px 26px rgba(11, 17, 22, 0.75);
}
.lede {
  margin: 0 0 26px;
  font-size: clamp(15px, 1.7vw, 19px);
  line-height: 1.6;
  max-width: 30em;
  color: var(--text);
  text-shadow: 0 2px 14px rgba(11, 17, 22, 0.8);
}
.facts {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.facts li {
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text);
  border: 1px solid rgba(237, 242, 245, 0.28);
  background: rgba(11, 17, 22, 0.42);
  padding: 6px 12px;
}
.facts li:first-child { border-color: rgba(255,106,43,0.55); color: var(--orange); }
.scroll-cue {
  position: absolute; z-index: 2; right: var(--pad); bottom: 26px;
  font-size: 10px; letter-spacing: 0.3em; color: var(--dim);
  writing-mode: vertical-rl;
}
@media (max-width: 700px) {
  .scroll-cue { display: none; }
  /* a narrow frame crops the shot hard, so slide it until the car clears
     the wordmark rather than sitting behind it */
  .hero-img { object-position: 30% 56%; }
}

/* -------------------------------------------------------------- the bands */

.band { padding: clamp(64px, 9vw, 120px) var(--pad); }
.band.alt { background: var(--ink-2); border-block: 1px solid var(--line); }

.head { max-width: 1320px; margin: 0 auto clamp(36px, 5vw, 60px); }
.kicker {
  display: block; font-size: 11px; letter-spacing: 0.22em; color: var(--orange);
  margin-bottom: 14px;
}
.head h2 {
  margin: 0; font-weight: 400;
  font-size: clamp(24px, 3.6vw, 42px); line-height: 1.16;
  letter-spacing: 0.01em; color: var(--cream);
}
.head .sub {
  margin: 16px 0 0; max-width: 58ch; color: var(--dim); font-size: 14.5px;
}

.cols {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
.prose p { margin: 0 0 18px; max-width: 62ch; }
.prose p:last-child { margin-bottom: 0; }

.specs { list-style: none; margin: 0; padding: 0; }
.specs li {
  border-left: 2px solid var(--orange);
  padding: 2px 0 2px 18px; margin-bottom: 22px;
}
.specs b { display: block; font-weight: 400; color: var(--text); letter-spacing: 0.04em; }
.specs span { display: block; color: var(--dim); font-size: 13.5px; line-height: 1.6; }

@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- the run */

.run-grid {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 56px); align-items: start;
}
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li {
  position: relative; padding-left: 56px; margin-bottom: 34px;
}
.steps li:last-child { margin-bottom: 0; }
.steps .n {
  position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--orange); color: var(--orange);
  font-size: 14px;
}
.steps h3 {
  margin: 4px 0 8px; font-weight: 400; font-size: 16px;
  letter-spacing: 0.06em; color: var(--text); text-transform: uppercase;
}
.steps p { margin: 0; color: var(--dim); font-size: 14px; }

.shot { margin: 0; }
.shot img { border: 1px solid var(--line); width: 100%; }
.shot figcaption {
  margin-top: 12px; color: var(--dim); font-size: 12.5px; line-height: 1.6;
}
@media (max-width: 860px) { .run-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- the biomes */

.biomes {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
}
.biomes figure {
  margin: 0; background: var(--ink-3); border: 1px solid var(--line);
  overflow: hidden;
}
.biomes img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.biomes figcaption { padding: 16px 18px 20px; }
.biomes b {
  display: block; font-weight: 400; color: var(--orange);
  font-size: 13px; letter-spacing: 0.14em; margin-bottom: 6px;
}
.biomes span { display: block; color: var(--dim); font-size: 13px; line-height: 1.6; }
@media (max-width: 1000px) { .biomes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .biomes { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- the cars */

.cars {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px;
}
.car {
  background: var(--ink-3); border: 1px solid var(--line);
  padding: 0 0 24px;
}
.car img { width: 100%; background: #cfd8dd; }
.car h3 {
  margin: 22px 24px 6px; font-weight: 400; font-size: 20px;
  letter-spacing: 0.06em; color: var(--cream);
}
.car > p { margin: 0 24px 18px; color: var(--dim); font-size: 13.5px; }
.car dl {
  margin: 0 24px; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; gap: 28px; flex-wrap: wrap;
}
.car dl div { display: block; }
.car dt { font-size: 10.5px; letter-spacing: 0.16em; color: var(--dim); }
.car dd { margin: 2px 0 0; font-size: 16px; color: var(--text); }
.bar-speed {
  margin: 18px 24px 0; height: 3px; background: rgba(237, 242, 245, 0.12);
}
.bar-speed i { display: block; height: 100%; background: var(--orange); }
@media (max-width: 760px) { .cars { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ the gallery */

.grid {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.tile {
  padding: 0; border: 1px solid var(--line); background: var(--ink-3);
  cursor: zoom-in; overflow: hidden; display: block;
}
.tile img {
  aspect-ratio: 16 / 9; object-fit: cover; width: 100%;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.tile:hover { border-color: var(--orange); }
.tile:hover img { transform: scale(1.05); opacity: 0.92; }
@media (prefers-reduced-motion: reduce) { .tile img { transition: none; } }
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- the notes */

.notes {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px;
}
.notes h3 {
  margin: 0 0 10px; font-weight: 400; font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange);
}
.notes p { margin: 0; color: var(--dim); font-size: 13.5px; }
@media (max-width: 1000px) { .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .notes { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- the closing note */

.cta {
  text-align: center;
  padding: clamp(72px, 11vw, 140px) var(--pad);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255,106,43,0.13) 0%, rgba(11,17,22,0) 62%),
    var(--ink);
  border-top: 1px solid var(--line);
}
.cta h2 {
  margin: 0 0 16px; font-weight: 400; color: var(--cream);
  font-size: clamp(26px, 4.4vw, 48px); letter-spacing: 0.02em;
}
.cta p { margin: 0 auto; max-width: 52ch; color: var(--text); }
.cta .small { margin-top: 20px; color: var(--dim); font-size: 12.5px; }

footer {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 26px var(--pad); border-top: 1px solid var(--line);
  color: var(--dim); font-size: 11.5px; letter-spacing: 0.1em;
}

/* ----------------------------------------------------------- the lightbox */

.lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(6, 10, 13, 0.94);
  display: grid; place-items: center; padding: 3vw;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 94vh; border: 1px solid var(--line); }
.lightbox .close {
  position: absolute; top: 14px; right: 20px;
  background: none; border: 0; color: var(--text);
  font-size: 34px; line-height: 1; cursor: pointer; padding: 6px 12px;
  font-family: inherit;
}
.lightbox .close:hover { color: var(--orange); }

/* ------------------------------------------------------------ the reveals */

.rise { opacity: 0; transform: translateY(16px); }
.rise.in { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s ease; }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; }
  .rise.in { transition: none; }
}