/* Gnothia — design system. Transcribed from canon VISUAL_REGISTER §11 (the
   literal source of truth). The page is composed like a standing figure:
   Crown (sky headroom) · Spine (the content column) · Base (the weighted anchor). */

/* ── Webfonts (open-licensed: Fraunces + IBM Plex Mono) ── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..600&family=IBM+Plex+Mono:wght@400&display=swap');

/* Ceremonial script (OFL, self-hosted). Only fetched when a .type-ceremonial
   element is actually on the page — reserved use, see canon §3.6. */
@font-face {
  font-family: "Pinyon Script";
  src: url("/static/fonts/pinyon-script.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* ── Earth (the base — weight, root) ── */
  --earth-basalt:         #232021;
  --earth-wood:           #3A2A20;
  --earth-terracotta:     #AE5A3C;
  --earth-terracotta-deep:#9A4A2E;
  --earth-ochre:          #B5803A;
  /* ── Sky (the crown — reach) ── */
  --sky-night:            #171E38;
  --sky-indigo:           #2E3866;
  --sky-indigo-line:      #2A3454;
  --sky-dawn:             #E9CBA6;
  /* ── Connecting light (the spine, lit) ── */
  --light-warm:           #E8B87C;
  --light-warm-soft:      #F0D2A4;
  /* ── Paper & stone (the day-lit reading surface) ── */
  --paper:                #F4EEE3;
  --paper-deep:           #ECE3D3;
  --stone-mid:            #6B6258;
  --stone-ash:            #9A9085;
  --stone-hairline:       #D8CDBA;
  /* ── Semantic (held inside the register) ── */
  --sem-affirm:           #5E6A3F;
  --sem-caution:          #9A6E28;
  --sem-stop:             #8E3826;
  --sem-info:             #2E3866;
  /* ── Type ── */
  --font-primary: "Fraunces","Fraunces 144pt",Georgia,"Times New Roman",serif;
  --font-instrument: "IBM Plex Mono","SFMono-Regular",ui-monospace,"Roboto Mono",monospace;
  /* Ceremonial script — RESERVED. Read canon §3.6 before using it. One line, large,
     rare: hero reveals, a book's title flourish, a threshold or closing line. NEVER a
     header, label, button, or anything below ~2rem, and never a full sentence of text.
     Self-hosted @font-face below downloads only on pages that actually render it. */
  --font-ceremonial: "Pinyon Script","Snell Roundhand","Apple Chancery",cursive;
  --measure: 60ch;
  --measure-max: 620px;
  --fs-display: clamp(2.75rem,6vw,4.5rem);
  --fs-coldopen: clamp(1.5rem,3.2vw,2.3rem);
  /* ── Spacing (vertically biased) ── */
  --space-1:4px;  --space-2:8px;   --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px;  --space-7:48px; --space-8:64px;
  --space-9:96px; --space-10:128px;--space-11:192px;--space-12:256px;
  /* ── Radii (upright, never pill) ── */
  --radius-sm:2px; --radius-md:4px; --radius-lg:8px;
  --hairline: 1px solid var(--stone-hairline);
  /* ── Elevation (warm light, not grey shadow) ── */
  --elev-raised: 0 1px 0 rgba(35,32,33,0.04), 0 8px 24px rgba(35,32,33,0.06);
  --glow-warm: 0 0 0 2px rgba(232,184,124,0.55), 0 0 18px rgba(232,184,124,0.25);
  /* ── Motion (settle, never bounce) ── */
  --motion-settle: 520ms cubic-bezier(0.16, 1, 0.30, 1);
  --motion-quiet:  240ms cubic-bezier(0.33, 0, 0.20, 1);
  --motion-reveal: 600ms cubic-bezier(0.16, 1, 0.30, 1);
}

/* Surface modes — paper (day) is default; sky (night/sacred) opt-in */
:root, [data-surface="paper"] {
  --bg: var(--paper); --bg-inset: var(--paper-deep);
  --ink: var(--earth-basalt); --ink-2: var(--stone-mid); --ink-3: var(--stone-ash);
  --line: var(--stone-hairline); --link: var(--earth-terracotta-deep);
  --accent: var(--light-warm); --focus: var(--light-warm);
}
[data-surface="sky"] {
  --bg: var(--sky-night); --bg-inset: #1C2442;
  --ink: #EDE3D2; --ink-2: var(--sky-dawn); --ink-3: #9AA0B8;
  --line: var(--sky-indigo-line); --link: var(--sky-dawn);
  --accent: var(--light-warm); --focus: var(--light-warm);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1.1875rem/1.62 var(--font-primary);
  font-variation-settings: "opsz" 20;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* ── Type roles (§11.2) ── */
.type-display   { font:400 var(--fs-display)/1.10 var(--font-primary); letter-spacing:-0.01em;
                  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0; margin:0; }
/* Ceremonial (§3.6) — the reserved script tier, ABOVE the workhorse, not part of it.
   One line, large, rare. Pinyon's ascenders/descenders are tall, so it wants air. */
.type-ceremonial { font-family:var(--font-ceremonial); font-weight:400;
                   font-size:clamp(2.5rem,6vw,5rem); line-height:1.14;
                   padding:0.1em 0 0.16em; margin:0; }
/* Optional gild — strike the script in aged gold. Pair with .type-ceremonial. */
.type-gilt { background-image:linear-gradient(176deg,#E4C36A 0%,#A97C22 52%,#6B4A12 100%);
             -webkit-background-clip:text; background-clip:text;
             color:transparent; -webkit-text-fill-color:transparent;
             filter:drop-shadow(0 1px 1px rgba(60,40,8,0.18)); }
.type-cold-open { font:470 var(--fs-coldopen)/1.5 var(--font-primary);
                  letter-spacing:0.006em; word-spacing:0.04em;
                  font-variation-settings:"opsz" 78,"SOFT" 0,"WONK" 0; margin:0; }
.type-h1        { font:440 2.5rem/1.12 var(--font-primary); letter-spacing:-0.005em;
                  font-variation-settings:"opsz" 72; margin:0; }
.type-h2        { font:460 1.875rem/1.18 var(--font-primary); font-variation-settings:"opsz" 48; margin:0; }
.type-h3        { font:480 1.375rem/1.28 var(--font-primary); font-variation-settings:"opsz" 40; margin:0; }
.type-body-lg   { font:400 1.3125rem/1.60 var(--font-primary); font-variation-settings:"opsz" 28; }
.type-body      { font:400 1.1875rem/1.62 var(--font-primary); font-variation-settings:"opsz" 20; }
.type-small     { font:400 1rem/1.55 var(--font-primary); }
.type-eyebrow   { font:520 0.8125rem/1.4 var(--font-primary); letter-spacing:0.14em;
                  font-variant-caps:small-caps; color:var(--ink-2); }
.type-micro     { font:440 0.8125rem/1.5 var(--font-primary); letter-spacing:0.02em; }
.type-instrument{ font:400 0.875rem/1.5 var(--font-instrument); }

/* ── The standing figure (§1, §5, §11.3) ── */
.spine  { max-width:min(var(--measure), var(--measure-max)); margin-inline:auto;
          padding-inline:var(--space-5); }
.crown  { padding-top:var(--space-11); }
.base   { padding-bottom:var(--space-8); }
.section + .section { margin-top:var(--space-9); }   /* sections breathe far apart */
.section > p { margin:0; }
.section > p + p    { margin-top:var(--space-5); }    /* stanza space */

@media (min-width:720px) {
  .spine { padding-inline:var(--space-7); }
}

/* A full-viewport surface that stands (threshold, wait, cold open) */
.standing {
  min-height:100svh; display:flex; flex-direction:column;
  background:var(--bg); color:var(--ink);
}
.standing__crown { flex:1 1 auto; min-height:var(--space-11); }
.standing__anchor { flex:0 0 auto; text-align:center; padding:var(--space-7) var(--space-5) var(--space-9); }
.standing__base  { flex:0 0 auto; }

/* the faint warm horizon seam at the footing (sky surface) — NOT a wash */
.horizon-seam { height:1px; background:linear-gradient(90deg,
   transparent, rgba(232,184,124,0.0) 8%, rgba(232,184,124,0.35) 50%, rgba(232,184,124,0.0) 92%, transparent);
   box-shadow:0 0 24px rgba(232,184,124,0.18); }

/* ── Wordmark (§4) ── */
.wordmark { font:460 1.25rem/1 var(--font-primary); font-variation-settings:"opsz" 72;
            letter-spacing:0.005em; color:var(--ink); text-decoration:none; }
.wordmark--display { font-size:clamp(2rem,5vw,3.25rem); }

/* ── Buttons (§11.4) — upright, weighted, never pill ── */
.btn { font:480 1.0625rem/1 var(--font-primary); font-variation-settings:"opsz" 28;
       padding:var(--space-3) var(--space-6); border-radius:var(--radius-md);
       border:1px solid transparent; cursor:pointer; display:inline-block;
       text-decoration:none; transition:box-shadow var(--motion-quiet), background var(--motion-quiet); }
.btn-primary { background:var(--earth-basalt); color:var(--paper); }
[data-surface="sky"] .btn-primary { background:var(--light-warm); color:var(--sky-night); }
.btn-primary:hover { box-shadow:var(--glow-warm); }
.btn-secondary { background:transparent; color:var(--ink); border-color:var(--line); }
.btn-quiet { background:transparent; color:var(--link); padding:0; border:none;
             font:480 1.0625rem/1.4 var(--font-primary); font-variation-settings:"opsz" 28;
             text-decoration:underline; text-underline-offset:0.18em; text-decoration-thickness:1px;
             cursor:pointer; }
.btn-destructive { background:transparent; color:var(--sem-stop); border-color:var(--sem-stop); }
.btn:focus-visible, .btn-quiet:focus-visible { outline:none; box-shadow:var(--glow-warm); }

/* ── Inputs (§11.5) — a line to write on, not a box ── */
.field { display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-7); }
.field-label { color:var(--ink-2); }
.field-meaning { color:var(--ink-2); font:400 1rem/1.5 var(--font-primary); }
.input { font:400 1.1875rem/1.4 var(--font-primary); font-variation-settings:"opsz" 20;
         background:var(--bg); color:var(--ink); border:none;
         border-bottom:1.5px solid var(--line); border-radius:0; padding:var(--space-3) 0; width:100%; }
.input:focus { outline:none; border-bottom-color:var(--light-warm); box-shadow:0 1px 0 var(--light-warm); }
.input::placeholder { color:var(--ink-3); }
.input-echo { color:var(--ink-2); font:400 0.875rem/1.5 var(--font-instrument); }

/* ── Notices (§11.6) — composed, never an alarm banner ── */
.notice--error  { color:var(--sem-stop); border-left:2px solid var(--sem-stop); padding-left:var(--space-4); }
.notice--affirm { color:var(--sem-affirm); }

/* ── Reading surface (§10) ── */
.eyebrow-mark { display:block; margin-bottom:var(--space-3); }
.cold-open { color:var(--ink-2); }   /* sky-dawn on sky */

/* the cold open stands in a field of space, alone (§5.2, §13.2) */
.coldopen-field { display:flex; flex-direction:column; justify-content:center; align-items:center;
                  min-height:100svh; text-align:center; padding:var(--space-9) var(--space-5); }
/* Contain the measure — the ground stays full-bleed, but the words don't run edge to
   edge on a wide screen (a centred reading column, like any page). */
.coldopen-field > * { max-width:min(40rem, 90vw); margin-inline:auto; }
.coldopen-field .share-row { margin-top:var(--space-11); }

/* ── Share row (§8.7) ── */
.share-row { display:flex; gap:var(--space-6); justify-content:center; align-items:center;
             color:var(--ink-2); font:400 1rem/1 var(--font-primary); }
.share-row a, .share-row button { color:var(--ink-2); }

/* ── Quiet list / dashboard (§8.6) — a vertical shelf, never a feed ── */
.shelf { list-style:none; margin:0; padding:0; }
.shelf li { padding:var(--space-5) 0; border-bottom:var(--hairline); }
.shelf .row-title { color:var(--ink); }
.shelf .row-date  { color:var(--ink-3); }

hr.quarantine { border:none; border-top:var(--hairline); margin:var(--space-9) 0 var(--space-5); }

/* the legal/footer, quarantined (§9.2) */
.footer-legal { color:var(--ink-3); text-align:center; padding:var(--space-8) var(--space-5) var(--space-9); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}