/* The landing page, in the game's archive look: its night library behind, its pixel fonts, its frames.
   Frames are 9-slice images in frames/ drawn in art pixels of 2 CSS px (as in the game's theme.css). */
@font-face { font-family: 'Jacquard 24'; src: url(fonts/jacquard24-latin.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Jersey 25'; src: url(fonts/jersey25-latin.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Jersey 10'; src: url(fonts/jersey10-latin.woff2) format('woff2'); font-display: swap; }

:root {
  --ink: #07090a; --ink-t: #2a1a10;
  --ox: #621a1f; --brass-hi: #f0c85a; --brass-lo: #5a3a0c;
  --parch: #e6cf9c; --parch-hi: #f2e0b4; --parch2: #b49a6c; --parch4: #4d3e28;
  --candle: #ffd35a;
  --f-logo: 'Jacquard 24', serif;
  --f-disp: 'Jersey 25', 'Jersey 10', monospace;
  --f-ui: 'Jersey 10', 'Segoe UI', monospace;
  --fr-btn: url(frames/menu-btn.svg) 3 1 7 1 fill / 6px 2px 14px 2px / 2px 2px 8px 2px;
  --fr-btn-hover: url(frames/menu-btn-hover.svg) 5 1 9 1 fill / 10px 2px 18px 2px / 2px 2px 12px 2px;
  --fr-primary: url(frames/menu-btn-primary.svg) 3 1 8 1 fill / 6px 2px 16px 2px / 2px 2px 8px 2px;
  --fr-primary-hover: url(frames/menu-btn-primary-hover.svg) 5 1 10 1 fill / 10px 2px 20px 2px / 2px 2px 12px 2px;
  --fr-page: url(frames/page.svg) 3 4 6 4 fill / 6px 8px 12px 8px repeat;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--ink); }
body { margin: 0; min-height: 100vh; font-family: var(--f-ui); font-size: 22px; line-height: 1.15; color: var(--parch); }

/* The library at night, behind everything, darker toward the edges and the bottom. */
.room { position: fixed; inset: 0; z-index: -1; background: url(library.png) center 30% / cover; image-rendering: pixelated; }
.room::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, #07090a33, #07090acc 70%), linear-gradient(transparent 40%, #07090af0); }

/* ---------- the top: the Scribe, the logo, the demo */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 16px 24px; min-height: min(92vh, 960px); justify-content: center; }
.scribe { width: 128px; height: 160px; background: url(scribe.svg) 0 0 / 1024px auto; image-rendering: pixelated;
  animation: idle 2s steps(8) infinite; }
@keyframes idle { to { background-position-x: -1024px; } }
.logo { margin: 8px 0 0; font-family: var(--f-logo); font-weight: 400; font-size: clamp(52px, 10vw, 120px); line-height: .9; color: var(--parch-hi);
  text-shadow: 0 6px 0 var(--ox), 0 12px 0 var(--ink); }
.logo span { display: block; color: var(--brass-hi); text-shadow: 0 6px 0 var(--brass-lo), 0 12px 0 var(--ink); }
.pitch { margin: 28px 0 22px; max-width: 30ch; font-family: var(--f-disp); font-size: clamp(28px, 4vw, 40px); line-height: 1; color: var(--parch-hi);
  text-shadow: 0 4px 0 var(--ink); }
.note { margin: 14px 0 0; color: var(--parch2); text-shadow: 0 2px 0 var(--ink); }

.btn { display: inline-block; padding: 10px 22px 14px; font-family: var(--f-ui); font-size: 28px; color: var(--parch-hi); text-decoration: none;
  border-image: var(--fr-btn); transition: transform .1s steps(2); }
.btn:hover, .btn:focus-visible { transform: translateY(-4px); border-image: var(--fr-btn-hover); outline: none; }
.btn:active { transform: translateY(2px); }
.btn.primary { padding: 12px 34px 18px; font-family: var(--f-disp); font-size: clamp(36px, 5vw, 48px); line-height: .9; color: var(--ink-t); border-image: var(--fr-primary); }
.btn.primary:hover, .btn.primary:focus-visible { border-image: var(--fr-primary-hover); }
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; margin-top: 30px; }
.links[hidden] { display: none; }

/* ---------- what the game is: four pages */
main { max-width: 1100px; margin: 0 auto; padding: 0 16px 40px; }
.pages { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.page { padding: 14px 22px 22px; color: var(--ink-t); border-image: var(--fr-page); }
.page h2 { margin: 0 0 8px; font-family: var(--f-disp); font-weight: 400; font-size: 34px; line-height: .95; color: var(--ox); }
.page p { margin: 0; font-size: 21px; }
.page i { font-style: normal; color: var(--ox); }

.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 36px; }
.shots[hidden] { display: none; }
.shots img { display: block; width: 100%; border: 4px solid var(--ink); box-shadow: 0 0 0 2px var(--parch4); image-rendering: pixelated; }

.cta { text-align: center; margin: 48px 0 8px; }

footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; padding: 18px 16px 28px; color: var(--parch2); }
footer a { color: var(--parch-hi); }
footer [hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { .scribe { animation: none; } .btn { transition: none; } }