/* pages.css — M11 info pages: site shell + page-specific classes.
   Reuses site.css tokens; adds ONLY what the info pages need.
   Same language: bone paper, ink serif, ember ONLY for Eaters/final gate.
   Decisions: docs/superpowers/plans/2026-08-07-m6-play-ui-decisions.md */

/* ---------- site shell: header + footer nav ---------- */
.lw-sitehead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4) var(--space-2);
  border-bottom: var(--line);
}
.lw-wordmark {
  font-size: 1.05rem; letter-spacing: 0.24em; font-weight: 600;
  text-decoration: none; color: var(--ink);
}
.lw-sitenav { display: flex; gap: var(--space-2) var(--space-3); flex-wrap: wrap; }
.lw-sitenav a {
  font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none;
  padding: 0.15rem 0; border-bottom: 1px solid transparent;
}
.lw-sitenav a:hover, .lw-sitenav a:focus-visible {
  color: var(--ink); border-bottom-color: var(--ink); outline: none;
}
.lw-sitenav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

.lw-sitefoot {
  border-top: var(--line);
  padding: var(--space-3) var(--space-4) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-1);
  margin-top: auto;
}
.lw-footnote { font-size: 0.75rem; color: var(--ink-faint); letter-spacing: 0.06em; margin: 0; }

/* ---------- page frame ---------- */
.lw-page { flex: 1; width: 100%; max-width: 46em; margin: 0 auto; padding: var(--space-4) var(--space-4) var(--space-5); }
.lw-page.wide { max-width: 68em; }
.lw-kicker { letter-spacing: 0.3em; font-size: 0.72rem; color: var(--ink-soft); text-transform: uppercase; margin-bottom: var(--space-1); }
.lw-page h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); letter-spacing: 0.04em; line-height: 1.05; }
.lw-lede { color: var(--ink-soft); font-size: clamp(1rem, 2vw, 1.15rem); max-width: 34em; margin-bottom: var(--space-3); }

/* ---------- prose (editorial text pages) ---------- */
.lw-prose { max-width: 40em; }
.lw-prose h2 { font-size: 1.35rem; margin-top: var(--space-4); letter-spacing: 0.03em; }
.lw-prose h3 { font-size: 1.05rem; margin-top: var(--space-3); }
.lw-prose p { margin: 0 0 var(--space-2); }
.lw-prose ul, .lw-prose ol { margin: 0 0 var(--space-2); padding-left: 1.4em; }
.lw-prose li { margin-bottom: 0.4rem; }
.lw-prose blockquote {
  margin: var(--space-3) 0; padding: var(--space-2) var(--space-3);
  border-left: 2px solid var(--ink); background: var(--parchment);
  font-style: italic;
}
.lw-prose code, .lw-prose .mono { font-family: var(--mono); font-size: 0.85em; color: var(--ink-soft); }
.lw-prose hr { border: none; border-top: var(--line); margin: var(--space-4) 0; }
.lw-prose table { border-collapse: collapse; width: 100%; margin: var(--space-2) 0 var(--space-3); font-size: 0.92rem; }
.lw-prose th, .lw-prose td { border: 1px solid var(--ink-faint); padding: 0.45rem 0.6rem; text-align: left; vertical-align: top; }
.lw-prose th { background: var(--parchment); font-weight: 600; letter-spacing: 0.04em; }
.lw-note {
  border: 1px solid var(--ink-faint); border-left: 3px solid var(--ink);
  padding: var(--space-2) var(--space-3); margin: var(--space-3) 0;
  font-size: 0.95rem; color: var(--ink-soft);
}
.lw-toc { display: flex; gap: var(--space-2) var(--space-3); flex-wrap: wrap; font-size: 0.85rem; letter-spacing: 0.06em; margin: var(--space-2) 0 var(--space-3); }
.lw-toc a { color: var(--ink-soft); }
.lw-ember { color: var(--ember); font-style: normal; font-weight: 600; }

/* ---------- words exhibit (the one sanctioned card grid) ---------- */
.lw-exhibit-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.lw-tier { margin-top: var(--space-5); }
.lw-tier h2 { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.lw-tier-count { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-faint); }
.lw-tier-note { color: var(--ink-soft); font-size: 0.95rem; max-width: 36em; margin: var(--space-1) 0 var(--space-3); }
.lw-exhibit {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--space-2);
}
.lw-word {
  border: 1px solid var(--ink); border-radius: 0.1rem;
  background: var(--parchment);
  padding: var(--space-2);
  display: flex; flex-direction: column; gap: 0.3rem;
}
.lw-word .glyph { font-size: 1.5rem; line-height: 1; }
.lw-word .name { font-size: 1.02rem; font-weight: 600; letter-spacing: 0.1em; }
.lw-word .tierline { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.lw-word .speak { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-faint); }
.lw-word .rune { font-size: 0.72rem; color: var(--ink-soft); }
.lw-word .tierdot { width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1px solid var(--ink-soft); display: inline-block; margin-right: 0.4rem; }
.lw-word.tier-3 { border-color: color-mix(in oklch, var(--gold) 70%, var(--ink)); }
.lw-word.tier-2 { border-color: color-mix(in oklch, var(--gold) 45%, var(--ink-faint)); }
.lw-word.tier-3 .tierdot { background: var(--gold); border-color: var(--gold); }
.lw-word.tier-2 .tierdot { background: color-mix(in oklch, var(--gold) 60%, var(--paper)); }
.lw-word.tier-1 .tierdot { background: transparent; }

/* ---------- your archive ---------- */
.lw-archive-empty { border: 1px dashed var(--ink-faint); padding: var(--space-3); margin: var(--space-3) 0; color: var(--ink-soft); }
.lw-archive-empty p { margin: 0 0 var(--space-1); }
.lw-run-ledger { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-3); }
.lw-run-entry { border-top: var(--line); padding-top: var(--space-3); }
.lw-run-entry .ending { font-size: 1.1rem; letter-spacing: 0.1em; text-transform: uppercase; }
.lw-run-entry .final { font-size: clamp(1.3rem, 4vw, 2rem); letter-spacing: 0.06em; margin: var(--space-1) 0; }
.lw-run-entry .consumed { color: var(--ink-faint); font-size: 0.95rem; line-height: 1.9; }
.lw-run-entry .meta { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-faint); margin-top: var(--space-1); }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .lw-sitehead { flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: var(--space-2); }
  .lw-sitefoot { padding: var(--space-2); }
  .lw-page { padding: var(--space-3) var(--space-2) var(--space-4); }
}