/* LastRyu — the palette is the game's own: sandstone floor, grey stone wall,
   brazier ember, dusk teal. Taken from a render rather than invented, so the
   site and the screenshots belong to each other. */
:root {
  --sand: #d9c59a;
  --sand-dim: #c3ae83;
  --stone: #8b8c88;
  --ink: #1b1d20;
  --ink-2: #2a2e33;
  --paper: #f4efe4;
  --muted: #6d6a62;
  --ember: #d4772f;
  --dusk: #1e3238;
  --serif: ui-serif, "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--paper); font: 16px/1.6 var(--sans); }
img { max-width: 100%; }
a { color: inherit; }

.bar {
  display: flex; align-items: center; gap: 24px;
  padding: 16px max(20px, env(safe-area-inset-left));
  border-bottom: 1px solid #ffffff14;
  position: sticky; top: 0; background: #1b1d20e0; backdrop-filter: blur(8px); z-index: 10;
}
.wordmark { margin-right: auto; display: flex; align-items: center; line-height: 0; }
.wordmark img { height: 26px; width: auto; }
.bar nav { display: flex; gap: 18px; font-size: 0.92rem; }
.bar nav a { color: #cfc9bd; text-decoration: none; }
.bar nav a:hover { color: var(--paper); }

/* HERO. The art sits behind, the text over its empty third — which is why the
   image prompt asks for a clear left third. */
.hero { position: relative; min-height: 62vh; display: grid; align-items: center; overflow: hidden; }
.hero-art {
  position: absolute; inset: 0;
  /* The art carries itself: no multiply layer over it. Legibility comes from
     the scrim below, which darkens only the side the text sits on. */
  background: url("/assets/hero.webp") center/cover no-repeat;
}
.hero-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #1b1d20f0 0%, #1b1d20b0 42%, #1b1d2020 75%);
}
.hero-text { position: relative; min-width: 0; padding: 48px max(20px, env(safe-area-inset-left)); max-width: min(760px, 100%); }
/* The wordmark carries the name; the h1 is the promise underneath it. Kept as
   a real h1 so the page still has a heading for a reader that loads no images. */
.hero-mark { width: min(420px, 78%); height: auto; margin-bottom: 18px; display: block; }
h1 { font: 700 clamp(1.45rem, 3.4vw, 2.2rem)/1.2 var(--serif); margin: 0 0 14px; color: #ece5d7; }
.lede { font-size: clamp(1rem, 2.2vw, 1.12rem); color: #ded8cb; max-width: min(48ch, 100%); margin: 0 0 24px; }

.cta { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-block; max-width: 100%; padding: 11px 20px; border-radius: 10px;
  background: var(--ember); color: #14161a; font-weight: 650; text-decoration: none;
  border: 1px solid transparent;
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--paper); border-color: #ffffff33; }
.btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.fineprint { color: var(--muted); font-size: 0.85rem; margin-top: 12px; }

section { padding: 56px max(20px, env(safe-area-inset-left)); }
h2 { font: 650 clamp(1.3rem, 3vw, 1.7rem)/1.2 var(--serif); margin: 0 0 18px; }



.download { text-align: center; }
.download .cta { justify-content: center; }
.download p { max-width: min(52ch, 100%); margin-inline: auto; color: #ded8cb; }

footer { padding: 28px max(20px, env(safe-area-inset-left)) 48px; border-top: 1px solid #ffffff12; color: var(--muted); font-size: 0.85rem; }

@media (max-width: 640px) {
  /* On a phone the art is behind the text rather than beside it, so the scrim
     runs top-to-bottom instead of left-to-right. */
  .hero-art::after { background: linear-gradient(180deg, #1b1d20c0, #1b1d20f2); }

  .hero { min-height: auto; }
  .hero-text { padding: 32px max(16px, env(safe-area-inset-left)) 40px; }
  .hero-mark { width: min(300px, 86%); margin-bottom: 14px; }
  section { padding: 40px max(16px, env(safe-area-inset-left)); }
  footer { padding: 24px max(16px, env(safe-area-inset-left)) 40px; }

  /* Full-width stacked buttons: a thumb-sized target, and no chance of two
     sitting side by side wider than the screen. */
  .cta { flex-direction: column; align-items: stretch; }
  .btn { text-align: center; }
}