/* RYVAKAI - ryvakai.com. Two pages: home, download. No framework, no build step.
   The palette and the type are the game's own UI tokens, so the site and the client
   read as one thing. One accent (gold) for the one action that matters: download. */

:root {
  --ground: #0a0c10;
  --ground-2: #10141b;
  --panel: #141a23;
  --line: #263041;
  --ink: #e8ebf0;
  --ink-muted: #a3adbb;
  --ink-faint: #6f7a8a;
  --veil: #a8c8dd;
  --gold: #d2a657;
  --gold-hover: #e2bd78;
  --bad: #e07a6a;
  --max: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 0.9, 0.3);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.65 ui-sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }

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

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 20;
  background: var(--ink); color: var(--ground); padding: 12px 16px; text-decoration: none; font-weight: 600;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------------------------------------------------------------- top bar */
.bar {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
}
.bar--solid { position: static; border-bottom: 1px solid var(--line); }
.mark {
  font-weight: 700; letter-spacing: 0.3em; font-size: 15px; text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
}
.bar nav { display: flex; gap: 4px; }
.bar nav a {
  text-decoration: none; font-size: 14px; letter-spacing: 0.04em; color: var(--ink-muted);
  min-height: 44px; min-width: 44px; padding: 0 12px; display: inline-flex; align-items: center;
  transition: color 160ms var(--ease-out);
}
.bar nav a:hover, .bar nav a[aria-current="page"] { color: var(--ink); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px;
  font: inherit; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 14px;
  text-decoration: none; border: 1px solid transparent; border-radius: 2px; cursor: pointer;
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--gold); color: #14100a; }
.btn--primary:hover { background: var(--gold-hover); }
.btn--ghost { border-color: var(--line); color: var(--ink); background: rgba(10, 12, 16, 0.55); }
.btn--ghost:hover { border-color: var(--ink-muted); }
.btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; min-height: min(92vh, 860px); display: flex; align-items: flex-end; overflow: hidden; }
.hero picture, .hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,12,16,0) 0%, rgba(10,12,16,0.05) 38%, rgba(10,12,16,0.55) 68%, rgba(10,12,16,0.97) 100%);
}
.hero .wrap { position: relative; z-index: 1; padding-top: 80px; padding-bottom: clamp(36px, 7vh, 72px); }
.hero h1 { font-size: clamp(44px, 9vw, 104px); line-height: 0.95; letter-spacing: 0.16em; font-weight: 800; margin-left: -0.04em; }
.hero .lede { margin-top: 18px; max-width: 34em; font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: var(--ink); }
.actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }

.build {
  margin-top: 22px; min-height: 22px;
  font-size: 13px; letter-spacing: 0.06em; color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.build b { color: var(--ink); font-weight: 600; }
.build[data-state="error"] { color: var(--ink-faint); }

/* ---------------------------------------------------------------- sections */
section { padding: clamp(56px, 9vw, 112px) 0; }
.eyebrow { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); }
h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.12; letter-spacing: 0.01em; font-weight: 700; margin-top: 10px; max-width: 18em; }
.intro { margin-top: 16px; max-width: 40em; color: var(--ink-muted); font-size: 18px; }

/* ---------------------------------------------------------------- walkthrough */
.film { margin: clamp(28px, 4vw, 48px) 0 0; }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line); }
.film figcaption { margin-top: 10px; color: var(--ink-faint); font-size: 14px; }
.steps { margin-top: clamp(36px, 6vw, 72px); display: grid; gap: clamp(48px, 8vw, 104px); }
.step { display: grid; gap: clamp(20px, 3vw, 44px); align-items: center; }
@media (min-width: 880px) {
  .step { grid-template-columns: 1.55fr 1fr; }
  .step:nth-child(even) { grid-template-columns: 1fr 1.55fr; }
  .step:nth-child(even) figure { order: 2; }
}
.step figure { margin: 0; border: 1px solid var(--line); background: var(--ground-2); }
.step figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.step .n { font-size: 13px; letter-spacing: 0.2em; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.step h3 { margin-top: 8px; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; font-weight: 700; }
.step p { margin-top: 12px; color: var(--ink-muted); max-width: 30em; }
.step .key {
  display: inline-block; min-width: 26px; padding: 1px 7px; margin: 0 2px;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px;
  font: 600 13px/1.5 ui-monospace, Consolas, monospace; color: var(--ink);
}

/* ---------------------------------------------------------------- closing band */
.band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--ground-2); }
.band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.band h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); }
.band p { margin-top: 8px; color: var(--ink-muted); max-width: 34em; }

/* ---------------------------------------------------------------- download page */
.dl { padding-top: clamp(40px, 6vw, 72px); }
.dl h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.08; font-weight: 800; letter-spacing: 0.01em; }
.dl .intro { font-size: 18px; }
.card {
  margin-top: 36px; border: 1px solid var(--line); background: var(--panel);
  padding: clamp(20px, 3vw, 36px); display: grid; gap: 28px;
}
@media (min-width: 880px) { .card { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.card h2 { margin: 0; font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.version { margin-top: 10px; font-size: clamp(30px, 4vw, 44px); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.notes { margin-top: 12px; color: var(--ink-muted); max-width: 34em; }
.facts { margin: 22px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; font-size: 15px; }
.facts dt { color: var(--ink-faint); }
.facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.get { display: grid; gap: 12px; }
.get .btn { width: 100%; }
.get small { color: var(--ink-faint); font-size: 13px; line-height: 1.5; }
.get a.plain { color: var(--ink-muted); font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; }
.hash { margin-top: 6px; font: 12px/1.5 ui-monospace, Consolas, monospace; color: var(--ink-faint); word-break: break-all; }

.state { margin-top: 36px; border: 1px solid var(--line); background: var(--panel); padding: 28px; }
.state h2 { margin: 0; font-size: 22px; }
.state p { margin-top: 10px; color: var(--ink-muted); max-width: 40em; }
.state .actions { margin-top: 20px; }
.skeleton { height: 14px; border-radius: 2px; background: linear-gradient(90deg, #1a212c 0%, #232c3a 50%, #1a212c 100%); background-size: 200% 100%; animation: sheen 1.4s var(--ease-out) infinite; }
.skeleton + .skeleton { margin-top: 12px; }
@keyframes sheen { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.how { display: grid; gap: 28px; margin-top: 36px; }
@media (min-width: 880px) { .how { grid-template-columns: repeat(3, 1fr); } }
.how li { list-style: none; border-top: 1px solid var(--line); padding-top: 18px; }
.how ol, ol.how { padding: 0; margin: 36px 0 0; }
.how .n { font-size: 13px; letter-spacing: 0.2em; color: var(--ink-faint); }
.how h3 { margin-top: 6px; font-size: 20px; }
.how p { margin-top: 8px; color: var(--ink-muted); }
/* An inline link still gets a full-height touch target without moving the text. */
.how a, .state p a { color: var(--ink); display: inline-block; padding: 12px 0; margin: -12px 0; }

.needs { margin-top: 20px; display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; max-width: 46em; }
.needs dt { color: var(--ink-faint); }
.needs dd { margin: 0; }

/* ---------------------------------------------------------------- footer */
footer { padding: 36px 0 48px; color: var(--ink-faint); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 4px 4px; }
footer a { color: var(--ink-muted); text-decoration: none; min-height: 44px; padding: 0 10px; display: inline-flex; align-items: center; }
footer a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- motion */
/* Below-the-fold blocks rise in once as they are reached. Never on first paint: the
   hero is static. Transform and opacity only. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .skeleton { animation: none; }
  .btn { transition: none; }
}
/* Without script the page must be whole. */
.no-js .reveal { opacity: 1; transform: none; }