/* ==========================================================================
   Pawnborn — pawnborn.com marketing site
   --------------------------------------------------------------------------
   Colour roles and the two type registers are lifted from @tessera/ui's tokens
   (packages/ui/src/tokens.ts), so the marketing site and the game read as one
   world. Canon 20 §Color, §Type.

   Deliberate constraints, all of them canon 20's cost law:
     - zero network dependencies (no CDN, no font service, no analytics)
     - fonts resolve to metric-ish system fallbacks until self-hosted OFL
       woff2 subsets land; that is the honest degraded state, not a bug
     - light + dark parity, prefers-reduced-motion honoured, WCAG AA contrast
     - colour never carries meaning alone
   ========================================================================== */

/* --- Tokens: parchment by day --------------------------------------------- */
:root {
  --surface: #fdfaf3;
  --surface-raised: #f0e2c4;
  --surface-sunken: #e7d7b4;
  --ink: #2b2118;
  --ink-muted: #6b5843;
  --ink-faint: #9c8a72;
  --gilt: #8a6a3f;
  --gilt-strong: #b58c5a;
  --on-gilt: #fffaf0;
  --line: #b58c5a;
  --danger: #a32b1c;
  --positive: #2f6b3f;
  --focus-ring: #4a6fa5;

  --veil: #3a4148;
  --shadow: 0 1px 2px rgba(43, 33, 24, 0.06), 0 8px 24px rgba(43, 33, 24, 0.08);

  --voice: "EB Garamond", Georgia, "Times New Roman", serif;
  --hand: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --lapidary: Cinzel, "Trajan Pro", Georgia, serif;

  --measure: 68ch;
  --page: 1120px;
  --radius: 8px;
  --radius-sm: 4px;
}

/* --- The same world by candlelight ---------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #241d12;
    --surface-raised: #33291b;
    --surface-sunken: #1b1509;
    --ink: #f2ead6;
    --ink-muted: #b8a888;
    --ink-faint: #8a7a5e;
    --gilt: #d7b25f;
    --gilt-strong: #e0b93a;
    --on-gilt: #171208;
    --line: #5a4a30;
    --danger: #d1483a;
    --positive: #6fae7f;
    --focus-ring: #6f9bd6;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] {
  --surface: #241d12;
  --surface-raised: #33291b;
  --surface-sunken: #1b1509;
  --ink: #f2ead6;
  --ink-muted: #b8a888;
  --ink-faint: #8a7a5e;
  --gilt: #d7b25f;
  --gilt-strong: #e0b93a;
  --on-gilt: #171208;
  --line: #5a4a30;
  --danger: #d1483a;
  --positive: #6fae7f;
  --focus-ring: #6f9bd6;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--hand);
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--line); opacity: 0.5; margin: 2.5rem 0; }

/* --- Type ----------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--voice);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 0.6em;
  letter-spacing: 0.005em;
}
h1 { font-size: clamp(2.1rem, 5.5vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.1rem); margin-top: 2.4em; }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.4rem); margin-top: 1.9em; }
h2:first-child, h3:first-child { margin-top: 0; }

p, li { max-width: var(--measure); }
p { margin: 0 0 1.15rem; }

.voice { font-family: var(--voice); font-size: 1.12em; line-height: 1.6; }
.lapidary {
  font-family: var(--lapidary);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.74rem;
  color: var(--gilt);
  font-weight: 600;
}

a { color: var(--gilt); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--gilt-strong); }
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

blockquote {
  font-family: var(--voice);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--ink-muted);
  border-left: 3px solid var(--gilt);
  margin: 1.8rem 0;
  padding: 0.2rem 0 0.2rem 1.4rem;
  max-width: var(--measure);
}
blockquote p:last-child { margin-bottom: 0; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--surface-sunken);
  padding: 0.12em 0.35em;
  border-radius: var(--radius-sm);
}

/* --- Layout --------------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px;
  background: var(--gilt); color: var(--on-gilt);
  padding: 0.7rem 1.1rem; border-radius: var(--radius); z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

.wrap { width: min(100% - 2.5rem, var(--page)); margin-inline: auto; }
.narrow { width: min(100% - 2.5rem, 760px); margin-inline: auto; }

section { padding: 3.2rem 0; }
section.tight { padding: 2rem 0; }

/* --- Header --------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex; align-items: center; gap: 1rem;
  min-height: 62px; padding-block: 0.5rem;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--lapidary);
  text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.94rem; font-weight: 700;
  color: var(--ink); text-decoration: none;
  margin-right: auto;
}
.brand img { width: 30px; height: 30px; border-radius: var(--radius-sm); }

.site-nav { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.site-nav a {
  color: var(--ink-muted); text-decoration: none;
  font-size: 0.92rem; padding: 0.42rem 0.6rem; border-radius: var(--radius-sm);
}
.site-nav a:hover { color: var(--ink); background: var(--surface-raised); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--gilt); }

.theme-toggle {
  background: transparent; border: 1px solid var(--line); color: var(--ink-muted);
  border-radius: var(--radius-sm); cursor: pointer;
  font: inherit; font-size: 0.85rem; padding: 0.35rem 0.6rem; line-height: 1;
}
.theme-toggle:hover { color: var(--ink); background: var(--surface-raised); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: inherit; font-weight: 600; font-size: 0.98rem;
  padding: 0.72rem 1.35rem; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--gilt); color: var(--on-gilt); }
.btn-primary:hover { background: var(--gilt-strong); color: var(--on-gilt); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-raised); color: var(--ink); }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.6rem 0 0; }

/* --- Hero ----------------------------------------------------------------- */
.hero { padding: 3.4rem 0 2.6rem; }
.hero h1 { margin-bottom: 0.4em; }
.hero .lede {
  font-family: var(--voice);
  font-size: clamp(1.18rem, 2.4vw, 1.42rem);
  line-height: 1.55; color: var(--ink-muted);
  max-width: 40ch;
}
.hero-figure {
  margin: 2.4rem 0 0; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow);
}

/* --- Cards / grids -------------------------------------------------------- */
.grid { display: grid; gap: 1.1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.35rem 1.4rem;
}
.card h3 { margin-top: 0; font-size: 1.15rem; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card p, .card li { max-width: none; }

figure { margin: 2rem 0; }
/* A fixed 16:9 box, as a backstop rather than a layout trick.
   The art library was rendered per posture and NOT every artifact kept one aspect across them —
   the onboarding hero and the mist wall are 16:9 at `table`, 4:3 at `lap` and portrait 750×1334 at
   `hand`. When a <picture> offers sources of different shapes, CSS `height:auto` beats the <img>'s
   `height` attribute, so the browser lays the chosen file out at ITS aspect and the figure silently
   becomes several times too tall. `tools/site-content.mjs` fixes that properly by serving one shape
   per picture; this rule means the next mismatched asset crops instead of wrecking the page.
   It also pins the box before the image loads, so there is no layout shift (which Core Web Vitals
   measures and which this site is being judged on). */
figure img {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
figcaption {
  font-size: 0.88rem; color: var(--ink-faint);
  margin-top: 0.6rem; font-family: var(--voice); font-style: italic;
}

/* --- Signup --------------------------------------------------------------- */
.signup {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: var(--shadow);
}
.signup h2 { margin-top: 0; }
.field-row { display: flex; gap: 0.65rem; flex-wrap: wrap; margin: 1.1rem 0 0.8rem; }
.field-row input[type="email"] {
  flex: 1 1 240px; min-width: 0;
  font: inherit; font-size: 1rem;
  padding: 0.72rem 0.9rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.field-row input::placeholder { color: var(--ink-faint); }

.consent {
  display: flex; gap: 0.6rem; align-items: flex-start;
  font-size: 0.9rem; color: var(--ink-muted); max-width: var(--measure);
}
.consent input { margin-top: 0.28rem; flex: none; width: 1rem; height: 1rem; }
.consent label { max-width: none; }

.form-note {
  margin: 1rem 0 0; font-size: 0.92rem;
  padding: 0.75rem 0.9rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface-sunken);
  max-width: var(--measure);
}
.form-note[data-state="error"] { border-color: var(--danger); color: var(--danger); }
.form-note[data-state="ok"] { border-color: var(--positive); color: var(--positive); }
.form-note[hidden] { display: none; }

/* --- Tables --------------------------------------------------------------- */
.table-scroll { overflow-x: auto; margin: 1.5rem 0; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--ink); background: var(--surface-raised); }

/* --- FAQ ------------------------------------------------------------------ */
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 0.35rem 0;
}
.faq summary {
  cursor: pointer; padding: 0.9rem 0;
  font-family: var(--voice); font-size: 1.16rem; font-weight: 600;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "＋"; color: var(--gilt); margin-right: 0.6rem; font-family: var(--hand); }
.faq details[open] summary::before { content: "－"; }
.faq details > *:not(summary) { padding-bottom: 0.7rem; }

/* --- Journal -------------------------------------------------------------- */
.post-meta { color: var(--ink-faint); font-size: 0.9rem; margin-bottom: 1.6rem; }
.post-list { list-style: none; padding: 0; margin: 0; }
.post-list li { max-width: none; border-bottom: 1px solid var(--line); padding: 1.3rem 0; }
.post-list h3 { margin: 0 0 0.3rem; }
.post-list a { text-decoration: none; }
.post-list a:hover h3 { text-decoration: underline; }
.post-list p { margin: 0.3rem 0 0; color: var(--ink-muted); }

/* --- Callout -------------------------------------------------------------- */
.callout {
  border: 1px solid var(--gilt);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--surface-raised);
  padding: 1.2rem 1.4rem;
  margin: 1.8rem 0;
}
.callout p:last-child { margin-bottom: 0; }

/* --- Footer --------------------------------------------------------------- */
.site-foot {
  border-top: 1px solid var(--line);
  margin-top: 3rem; padding: 2.6rem 0 3.4rem;
  color: var(--ink-muted); font-size: 0.92rem;
  background: var(--surface-raised);
}
.foot-cols { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.foot-cols h4 {
  font-family: var(--lapidary); text-transform: uppercase; letter-spacing: 0.13em;
  font-size: 0.72rem; color: var(--gilt); margin: 0 0 0.7rem;
}
.foot-cols ul { list-style: none; padding: 0; margin: 0; }
.foot-cols li { margin-bottom: 0.42rem; max-width: none; }
.foot-cols a { color: var(--ink-muted); text-decoration: none; }
.foot-cols a:hover { color: var(--ink); text-decoration: underline; }
.colophon { margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: 0.86rem; color: var(--ink-faint); }
.colophon p { max-width: none; }

/* --- Utilities ------------------------------------------------------------ */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.center { text-align: center; }
.center p, .center h1, .center h2 { margin-inline: auto; }
.muted { color: var(--ink-muted); }
.small { font-size: 0.9rem; }