/* LLOS.ai — SHARED SKIN + CONTAINER TOKENS (the ONE source every page inherits, so no page can drift).
   [2026-07-04] Extracted verbatim from the word_discovery gold reference — the evolved token system:
   palette + the web-team-locked WIDTH MENU (context-driven --page-max) + 8-pt spacing scale + the .wrap
   container + base html/body + the 3 fonts. Ship this from the shell; a page loads it and DROPS its own
   :root, so the skin AND the margins are single-sourced and cannot drift. Fonts are shipped here too. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@700;800;900&family=JetBrains+Mono:wght@500;600&display=swap');
:root{
  --bg:#fdfcfa; --bg-warm:#faf5ea; --card:#fff; --border:#eadfce; --border-soft:#f0ebe0;
  --primary:#ea7a27; --primary-deep:#b85c12; --primary-light:#f59f0a;
  --ink:#171717; --ink-2:#404040; --ink-3:#737373; --muted:#8a8378;
  --accent-soft:#fdf0dc; --mist:#fdf0dd;
  --shadow:0 10px 30px -18px rgba(0,0,0,.2); --shadow-lg:0 16px 44px rgba(120,72,20,.14);
  --spring:cubic-bezier(.22,1,.36,1);
  --hh:64px; /* header height (8pt grid) */
  /* ===== UNIFIED MARGIN / CONTAINER SYSTEM — one set of tokens, every page, both modes. ===== */
  --gutter:1.25rem;        /* side margin — base (mobile) */
  /* WIDTH MENU (web-team locked 2026-06-30) — separate widths so article text, hub cards, and app frames never share one width */
  --content-reading-max:680px;   /* reading/hero text measure (gold: 560-680) */
  --content-page-max:820px;      /* article content column (gold: grammar main = 820) */
  --hub-grid-max:1180px;         /* hub width (gold: designer min(92vw,1180)) */
  --app-frame-max:1440px;        /* App-mode contained desktop frame (default) */
  --app-frame-wide-max:1600px;   /* App-mode canvas/visual-heavy only */
  --page-max:var(--content-page-max); /* per-context below so header/footer/body align within the page */
  /* ===== 8-POINT VERTICAL SPACING SCALE — every gap a multiple of 8 ===== */
  --sp-xs:.5rem; --sp-sm:1rem; --sp-md:1.5rem; --sp-lg:2rem; --sp-xl:3rem; --sp-2xl:4rem;
  --sp-section:1.75rem;    /* between-section rhythm */
}
@media(min-width:640px){:root{--gutter:2rem}}
@media(min-width:1024px){:root{--gutter:3rem;--sp-section:2.5rem}}
@media(min-width:1440px){:root{--gutter:4rem}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif}
a{color:inherit;text-decoration:none}
/* per-page width set by data-context, so header/footer/body all align within a page */
[data-context="hub"]{--page-max:var(--hub-grid-max)}
[data-context="article"]{--page-max:var(--content-page-max)}
[data-shell-mode="app"]{--page-max:var(--app-frame-max)}
/* every container shares the SAME page-max + gutter, so all left edges align across the page */
.wrap{max-width:var(--page-max);margin:0 auto;padding-inline:var(--gutter)}
.wrap.reading,.wrap.prose{max-width:var(--content-reading-max)}