/* ==========================================================================
   Junkyard Astronauts — site styles

   The look is the game's own current UI pass, "Corner Set" (see the project's
   junkyard_astronaut_ui_visual_style.md): nothing contains anything. No cards,
   no panels, no keylines around content — display type with one hard ink
   shadow, painted rules where something needs separating, and the hazard
   stripe borrowed from the key art as the only decoration.

   Palette and typefaces are the HUD's, verbatim, so the site and the game
   read as one object.
   ========================================================================== */

@font-face {
  font-family: 'Chakra Petch';
  src: url('fonts/ChakraPetch-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Share Tech Mono';
  src: url('fonts/ShareTechMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink:        #0A0B0D;
  --ink-2:      #121317;
  --cream:      #F0E6CC;
  --cream-dim:  #F0DFAF;
  --tan:        #9C8F7E;
  --explore:    #FFC23A;   /* explore / attention */
  --flight:     #5FE8CE;   /* build + flight */
  --hazard:     #FFD400;
  --danger:     #FF6E54;
  --rust:       #D4631F;
  /* the four chassis wear the team colours P1-P4 */
  --p1: #FF7A1A;
  --p2: #3399FF;
  --p3: #FFD42B;
  --p4: #46E65C;

  --display: 'Chakra Petch', 'Arial Narrow', Impact, sans-serif;
  --mono: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --measure: 68ch;
  --pad: clamp(20px, 5vw, 56px);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream-dim);
  font-family: var(--mono);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.65;
  letter-spacing: .01em;
  overflow-x: hidden;
}

/* ---------- type ---------- */

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 700;
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .95;
  margin: 0;
  text-shadow: 3px 3px 0 var(--ink);
}

h2 { font-size: clamp(28px, 4vw, 46px); }
h3 { font-size: clamp(19px, 2vw, 24px); text-shadow: 2px 2px 0 var(--ink); }

p { margin: 0 0 1.1em; max-width: var(--measure); }
a { color: var(--explore); text-decoration: none; border-bottom: 1px solid rgba(255, 194, 58, .35); }
a:hover { color: var(--ink); background: var(--explore); border-bottom-color: transparent; }
strong { color: var(--cream); font-weight: 400; }
ul { padding-left: 1.1em; margin: 0 0 1.2em; max-width: var(--measure); }
li { margin-bottom: .35em; }
li::marker { color: var(--tan); }

.label {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tan);
  display: block;
  margin-bottom: 10px;
}

.lede { font-size: clamp(17px, 1.5vw, 21px); color: var(--cream); max-width: 62ch; }

/* ---------- shell ---------- */

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--pad); }
section { padding: clamp(40px, 5.5vw, 76px) 0; }

/* two columns that do not become a card: text carries one side, a list or a
   set of painted words the other. Collapses to one column under 860px. */
.split { display: grid; gap: clamp(28px, 5vw, 72px); grid-template-columns: 1.05fr .95fr; align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split > div > *:last-child { margin-bottom: 0; }

/* the end-of-shift awards, painted large */
.awards { list-style: none; padding: 0; margin: 0; }
.awards li { padding: 0 0 16px; margin: 0 0 16px; border-bottom: 1px solid rgba(156, 143, 126, .22); }
.awards li:last-child { border-bottom: 0; }
.awards .name {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(24px, 3.2vw, 40px);
  color: var(--explore);
  line-height: 1;
  display: block;
  text-shadow: 3px 3px 0 var(--ink);
}
.awards .for { display: block; color: var(--tan); font-size: 14px; margin-top: 6px; }
.rule { height: 1px; background: linear-gradient(90deg, var(--tan), rgba(156, 143, 126, 0)); margin: 0 0 clamp(24px, 3vw, 40px); }

/* the hazard stripe from the key art — a divider, never a container */
.hazard {
  height: 10px;
  background: repeating-linear-gradient(-45deg, var(--hazard) 0 14px, var(--ink) 14px 28px);
}

/* ---------- top bar ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--pad);
  background: rgba(10, 11, 13, .82);
  backdrop-filter: blur(8px);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.top a { border: 0; color: var(--cream-dim); }
.top a:hover { background: none; color: var(--explore); }
.top .brand { font-family: var(--display); letter-spacing: .04em; color: var(--cream); font-size: 15px; }
.top nav { display: flex; gap: clamp(14px, 2.5vw, 28px); flex-wrap: wrap; }
.top nav a[aria-current="page"] { color: var(--explore); }

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

.hero {
  position: relative;
  padding: clamp(56px, 11vw, 132px) 0 clamp(40px, 6vw, 72px);
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #0A0B0D url('hero.jpg') center 38% / cover no-repeat;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 11, 13, .72) 0%, rgba(10, 11, 13, .35) 42%, rgba(10, 11, 13, .96) 100%),
    linear-gradient(90deg, rgba(10, 11, 13, .88) 0%, rgba(10, 11, 13, .25) 62%, rgba(10, 11, 13, 0) 100%);
}
.wordmark {
  font-family: var(--display);
  text-transform: uppercase;
  line-height: .86;
  font-size: clamp(40px, 11.2vw, 148px);
  letter-spacing: -.005em;
  margin: 0 0 18px;
}
.wordmark span { display: block; text-shadow: 4px 4px 0 var(--ink); }
.wordmark .a { color: var(--cream); }
.wordmark .b { color: var(--explore); }
.tagline {
  font-family: var(--mono);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--cream-dim);
  font-size: clamp(11px, 1.35vw, 16px);
  margin: 0 0 26px;
}
.hero .lede { text-shadow: 0 2px 12px rgba(10, 11, 13, .9); }

/* ---------- calls to action: paint, not buttons ---------- */

.cta-row { display: flex; flex-wrap: wrap; gap: clamp(16px, 3vw, 34px); align-items: baseline; margin-top: 28px; }
.cta {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(17px, 1.7vw, 22px);
  color: var(--explore);
  border: 0;
  border-bottom: 3px solid var(--explore);
  padding-bottom: 4px;
  text-shadow: 2px 2px 0 var(--ink);
}
.cta:hover { background: var(--explore); color: var(--ink); }
.cta--soon { color: var(--tan); border-bottom-color: var(--tan); cursor: default; }
.cta--quiet { color: var(--cream-dim); border-bottom-color: rgba(156, 143, 126, .5); font-size: clamp(15px, 1.4vw, 18px); }
.cta--quiet:hover { background: var(--cream-dim); color: var(--ink); }

/* ---------- beats: numbered, no boxes ---------- */

.beats { display: grid; gap: clamp(28px, 4vw, 52px); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.beat .num {
  font-family: var(--display);
  font-size: clamp(38px, 5vw, 58px);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--rust);
  display: block;
  line-height: 1;
  margin-bottom: 10px;
}
.beat h3 { margin-bottom: 10px; color: var(--explore); }
.beat p { color: var(--cream-dim); max-width: 42ch; margin-bottom: 0; }

/* ---------- the crew ---------- */

.crew { display: grid; gap: clamp(20px, 3vw, 34px); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.crew div { border-top: 2px solid currentColor; padding-top: 12px; }
.crew h3 { font-size: clamp(22px, 2.4vw, 30px); color: currentColor; }
.crew p { color: var(--cream-dim); margin: 6px 0 0; font-size: 15px; }
.c1 { color: var(--p1); } .c2 { color: var(--p2); } .c3 { color: var(--p3); } .c4 { color: var(--p4); }

/* ---------- the altitude ladder ---------- */

.ladder { max-width: 720px; margin: 0; padding: 0; list-style: none; }
.ladder li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(156, 143, 126, .22);
  margin: 0;
}
.ladder .step { flex: 1; color: var(--cream-dim); }
.ladder .h { font-family: var(--display); color: var(--flight); font-size: clamp(16px, 1.6vw, 20px); white-space: nowrap; }
.ladder li:last-child .step, .ladder li:last-child .h { color: var(--explore); }

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

.shots { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
/* height:auto, not 100%: a figure is image + caption, so a stretched image
   ends up taller than 16/9 and object-fit crops the HUD off both edges. */
.shots img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; }
.shots figure { margin: 0; }
.shots figcaption { font-size: 13px; color: var(--tan); letter-spacing: .12em; text-transform: uppercase; padding-top: 8px; }

/* ---------- honest two-column list ---------- */

.ledger { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ledger h3 { margin-bottom: 14px; }
.ledger .in h3 { color: var(--flight); }
.ledger .out h3 { color: var(--tan); }
.ledger ul { list-style: none; padding: 0; }
.ledger li { padding-left: 1.5em; position: relative; }
.ledger .in li::before { content: '+'; position: absolute; left: 0; color: var(--flight); }
.ledger .out li::before { content: '\2013'; position: absolute; left: 0; color: var(--tan); }

/* ---------- spec tables ---------- */

.specs { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 7px 12px 7px 0; border-bottom: 1px solid rgba(156, 143, 126, .22); }
th { color: var(--tan); font-weight: 400; white-space: nowrap; width: 34%; }
td { color: var(--cream-dim); }
caption { text-align: left; font-family: var(--display); text-transform: uppercase; color: var(--cream); padding-bottom: 10px; font-size: 19px; }

/* ---------- long-form pages ---------- */

.doc { padding-top: clamp(36px, 5vw, 64px); }
.doc h2 { font-size: clamp(22px, 2.4vw, 30px); margin: clamp(30px, 4vw, 48px) 0 12px; color: var(--explore); }
.doc h2:first-of-type { margin-top: 0; }
.doc .meta { color: var(--tan); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.doc .kv { font-family: var(--mono); }
.crumb { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--tan); margin-bottom: 18px; }
.crumb a { color: var(--tan); border-bottom-color: rgba(156, 143, 126, .4); }

.note {
  border-left: 3px solid var(--rust);
  padding-left: 16px;
  color: var(--cream-dim);
  max-width: var(--measure);
}

code, .path {
  font-family: var(--mono);
  color: var(--flight);
  word-break: break-word;
}

/* ---------- footer ---------- */

footer { padding: clamp(36px, 5vw, 60px) 0 44px; color: var(--tan); font-size: 14px; }
footer nav { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 16px; }
footer a { color: var(--cream-dim); border-bottom-color: rgba(156, 143, 126, .4); }
footer p { max-width: none; margin: 0; }

/* narrow screens: the spec labels must be allowed to wrap, or a long one
   ("Draw or stow the yard tool") pushes the table past the viewport. */
@media (max-width: 640px) {
  th { white-space: normal; width: 42%; }
  td { overflow-wrap: anywhere; }
  .top { gap: 10px; }
  .top nav { gap: 16px; font-size: 12px; }
  /* on a phone the in-page anchors are noise — the page is one scroll.
     Support and Privacy stay, because those are why people come here. */
  .top nav a[href^="#"] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}