/* Explora design system — base: reset, page backdrop, typography, layout, motion.
   Load order (a contract): tokens → base → shell → components [→ admin].
   Brand colours are injected inline after tokens (shell/_theme.html). */
*{box-sizing:border-box}
/* `hidden` must win over component display rules (.btn is inline-flex, etc.) */
[hidden]{display:none!important}
html,body{margin:0}
body{background-color:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.5;
  font-size:14px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* the "breadboard": a faint dot grid under two warm/cool light pools */
  background-image:
    radial-gradient(60rem 40rem at 105% -10%, color-mix(in oklab,var(--caramel) 16%,transparent), transparent 60%),
    radial-gradient(50rem 36rem at -10% 110%, color-mix(in oklab,var(--accent-hi) 12%,transparent), transparent 60%),
    radial-gradient(circle at 1px 1px, var(--bg-dot) 1px, transparent 1.4px);
  background-size:auto,auto,22px 22px;background-attachment:fixed}
::selection{background:color-mix(in oklab,var(--accent-hi) 30%,transparent)}
a{color:var(--accent);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px;border-radius:6px}
.i{flex:0 0 auto;display:inline-block;vertical-align:middle}

/* ── layout ───────────────────────────────────────────────────────────── */
.container{max-width:66rem;margin:0 auto;padding:1.6rem 1.6rem 5rem;width:100%;animation:rise .45s var(--ease) both}
.container.narrow{max-width:46rem}
.container.wide{max-width:88rem}
.pagehead{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin:.1rem 0 1.3rem}
.pagehead .grow{flex:1;min-width:12rem}
.eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:.45rem;margin-bottom:.35rem}
.eyebrow::before{content:"";width:18px;height:1px;background:currentColor;opacity:.6}
h1{font-family:var(--display);font-size:1.75rem;line-height:1.15;margin:.1rem 0;letter-spacing:-.025em;
  font-weight:750;text-wrap:balance}
h2{font-family:var(--display);font-size:1.1rem;margin:1.8rem 0 .6rem;letter-spacing:-.015em;font-weight:700}
h3{font-size:.92rem;margin:1rem 0 .4rem}
.muted{color:var(--muted)}
p.meta,.lead{color:var(--muted);font-size:.92rem;max-width:62ch;margin:.3rem 0 0}
.back{color:var(--muted);font-size:.82rem}
.mono{font-family:var(--mono)}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}