/* Reachy Dino Duel - the Space landing page.
 *
 * Same materials as the printed deck and the scoreboard: limestone card stock,
 * basalt ink, fern, amber, iron oxide, and the three period hues. Fonts are the
 * repo's own OFL files, so nothing is fetched from a CDN; if they fail to load
 * the page falls back to a serif and a condensed sans and looks nearly the same.
 */

@font-face { font-family: 'Zilla Slab'; src: url('reachy_dino_duel/static/fonts/zilla-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Zilla Slab'; src: url('reachy_dino_duel/static/fonts/zilla-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Zilla Slab'; src: url('reachy_dino_duel/static/fonts/zilla-500-italic.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Barlow Semi Condensed'; src: url('reachy_dino_duel/static/fonts/barlow-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Semi Condensed'; src: url('reachy_dino_duel/static/fonts/barlow-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap; }

/* ------------------------------------------------------------------ tokens */

:root {
  /* the deck's own hexes (deck_builder/generate_deck.py) */
  --chalk:#E9EAE3; --bone:#F6F4EC; --basalt:#1E2422;
  --fern:#2F6B4F; --amber:#C8871A; --oxide:#9A3A20;
  --tri:#C05C2B;  --jur:#3C7D46;   --cre:#2E7C93;

  --ground:var(--chalk); --panel:var(--bone); --ink:var(--basalt);
  --ink-70:#656A65; --ink-55:#8B8E8B; --line:#B0B3AD; --line-soft:#D1D2CC;

  --display:'Zilla Slab',Georgia,'Times New Roman',serif;
  --util:'Barlow Semi Condensed','Helvetica Neue',Arial,sans-serif;
  --pad:clamp(18px,4vw,44px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:#141918; --panel:#1D2422; --ink:#E7E9E1;
    --ink-70:#9EA6A0; --ink-55:#838B85; --line:#3B4340; --line-soft:#2A312F;
    --fern:#5FA97F; --amber:#E2A73E; --oxide:#CE7452;
    --tri:#D9814E; --jur:#67AD73; --cre:#58A9C4;
  }
}

* { box-sizing:border-box; }

body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--util); font-size:17px; line-height:1.55;
  -webkit-text-size-adjust:100%;
}
.wrap { max-width:1000px; margin:0 auto; padding:0 var(--pad) 72px; }
a { color:var(--fern); }
h1, h2, h3 { font-family:var(--display); font-weight:700; line-height:1.15; margin:0; }
code {
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88em;
  background:var(--panel); border:1px solid var(--line-soft); border-radius:3px; padding:1px 5px;
}

/* --------------------------------------------------------------- strata rule */

.strata { height:7px; display:flex; }
.strata i { flex:1; }
.strata i:nth-child(1) { background:var(--tri); }
.strata i:nth-child(2) { background:var(--jur); }
.strata i:nth-child(3) { background:var(--cre); }

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

/* The logo's own cream ground, held in both themes on purpose: the artwork is a
 * JPG drawn on this colour, so matching it is what makes the edge vanish. */
.crest {
  background:#F9F0DF;
  padding:clamp(20px,4vw,44px) var(--pad);
  display:flex; justify-content:center;
}
.crest img {
  display:block; width:100%; max-width:620px; height:auto;
}

header { padding:clamp(34px,6vw,68px) 0 12px; }
.eyebrow {
  font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  font-size:12.5px; color:var(--ink-55); margin:0 0 12px;
}
h1 { font-size:clamp(38px,7.4vw,68px); letter-spacing:-.015em; }
h1 .em { font-size:.82em; vertical-align:.02em; }
.tagline {
  font-family:var(--display); font-weight:500; font-style:italic;
  font-size:clamp(19px,2.5vw,25px); color:var(--ink-70); margin:10px 0 0; max-width:34ch;
}
.hero { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(20px,4vw,52px); align-items:start; }
.lead { margin:22px 0 0; max-width:46ch; }
.lead strong { font-weight:600; color:var(--ink); }
.chips { display:flex; flex-wrap:wrap; gap:7px; margin:20px 0 0; padding:0; list-style:none; }
.chips li {
  font-weight:600; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:999px; padding:3px 11px; color:var(--ink-70);
}
.cta { display:flex; flex-wrap:wrap; gap:11px; margin:26px 0 0; }
.btn {
  display:inline-block; font-family:var(--util); font-weight:800; font-size:16px;
  letter-spacing:.03em; text-decoration:none; cursor:pointer;
  padding:12px 22px; border-radius:4px; border:1.5px solid var(--fern);
  background:var(--fern); color:var(--bone);
}
.btn--ghost { background:transparent; color:var(--fern); }
.btn:disabled { opacity:.5; cursor:default; }

/* the two shots: a printed page and a single card */

.shots { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:end; }
.shots figure { margin:0; }
.shots img {
  display:block; width:100%; height:auto; border-radius:4px;
  border:1px solid var(--line-soft); background:var(--bone);
}
figcaption { font-size:12.5px; color:var(--ink-55); margin-top:7px; letter-spacing:.02em; }

/* ------------------------------------------------------------------ sections */

section { padding-top:clamp(38px,5.5vw,64px); }
h2 { font-size:clamp(25px,3.4vw,34px); letter-spacing:-.01em; }
h2 + p { margin-top:12px; }
.sub { color:var(--ink-70); max-width:62ch; }

.cards3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px; }
.card { background:var(--panel); border:1px solid var(--line-soft); border-radius:5px; padding:20px 20px 22px; }
.card h3 { font-size:20px; margin-bottom:7px; }
.card p { margin:0; font-size:15.5px; color:var(--ink-70); }
.card .n {
  font-family:var(--util); font-weight:800; font-size:12px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--amber); display:block; margin-bottom:9px;
}

ol.steps { margin:24px 0 0; padding-left:1.35em; }
ol.steps li { margin-bottom:11px; max-width:64ch; }

.note {
  margin-top:26px; padding:16px 18px; background:var(--panel);
  border-left:3px solid var(--amber); border-radius:0 4px 4px 0;
  font-size:15.5px; color:var(--ink-70); max-width:70ch;
}
.note strong { color:var(--ink); }

/* ------------------------------------------------------------------- install */

.install {
  background:var(--panel); border:1px solid var(--line-soft); border-radius:5px;
  padding:clamp(20px,3vw,32px); margin-top:26px;
}
label {
  display:block; font-weight:700; font-size:12.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-55); margin-bottom:7px;
}
input[type=text] {
  width:100%; max-width:420px; font-family:var(--util); font-size:16px;
  padding:10px 12px; border-radius:4px; border:1px solid var(--line);
  background:var(--ground); color:var(--ink);
}
#status { margin:16px 0 0; font-size:15.5px; min-height:1.5em; }
#status.ok { color:var(--fern); font-weight:600; }
#status.bad { color:var(--oxide); font-weight:600; }
details { margin-top:18px; }
summary { cursor:pointer; font-weight:600; color:var(--ink-70); font-size:15px; }
pre {
  overflow-x:auto; margin:12px 0 0; padding:13px 15px; border-radius:4px;
  background:var(--ground); border:1px solid var(--line-soft);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; line-height:1.6;
}

footer {
  margin-top:clamp(44px,6vw,76px); padding-top:26px; border-top:1px solid var(--line-soft);
  font-size:14.5px; color:var(--ink-55);
}
footer a { margin-right:18px; white-space:nowrap; }
.foot-links { margin:0 0 14px; }

@media (max-width:820px) {
  .hero { grid-template-columns:1fr; }
  .cards3 { grid-template-columns:1fr; }
  .shots { max-width:520px; }
}

/* demo clip */
figure.demo { margin: 1.5rem auto; text-align: center; max-width: 420px; }
figure.demo video { max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 6px 24px rgba(30,36,34,.18); background: #1E2422; }
figure.demo figcaption { font-size: .9rem; opacity: .8; margin-top: .5rem; }