/* ═══════════════════════════════════════════════════════════════════════════
   temple.css — THE 37TH CHAMBER · site design canon, as one first-party sheet
   Born Day 41→42 overnight (operator order: "new canon from existing minus
   problems"). Extracted from the live pages — byte-identical donors (frankl =
   canonical roots-family donor; kerr/frankl diff was corridor-variant only).
   WHY ONE SHEET: 36 hand-copies = structurally inevitable drift (6+ instances
   caught Day-41: glow colors, palette values, class names, offsets). One
   first-party file kills the drift class, keeps sovereignty (our file, our
   server, zero external deps), halves page weight, makes canon the default.
   LAYERS:
     1. TOKENS + UNIVERSAL  (every page)
     2. FAMILY: page-roots  (references + box chapters; 740px column)
     3. FAMILY: box-chapter additions land at their migration wake (W3)
   LAWS: gold = substance · electric-blue = the charge, GLOW ONLY (Blue Law) ·
   white+blue glow = the charged word · motion = rise + lattice only ·
   the temple makes NO sound uninvited (the Silence Law).
   ═══════════════════════════════════════════════════════════════════════════ */

:root{--gold:#FFD60A;--gold-soft:#d9b400;--bg:#08080a;--text:#f3eede;--dim:#8f8a73;--electric:#0E44FF;
  --font:'Bahnschrift','DIN Alternate','Century Gothic','Futura',system-ui,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh;
  display:flex;flex-direction:column;align-items:center;padding:clamp(1.4rem,5vw,3rem) 1.1rem env(safe-area-inset-bottom,0px);
  overflow-x:hidden;position:relative;letter-spacing:.005em}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,214,10,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,214,10,.025) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(circle at 50% 18%,#000 22%,transparent 86%)}
.topnav{width:100%;max-width:740px;display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;position:relative;z-index:1;margin-bottom:1.6rem}
.back{display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);text-decoration:none;border:1px solid rgba(255,214,10,.32);padding:.4rem .7rem;border-radius:2px;transition:.16s ease}
.back:hover{border-color:var(--gold);background:rgba(255,214,10,.05)}
.meta-pill{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  border:1px solid rgba(143,138,115,.32);padding:.34rem .6rem;border-radius:2px}
.meta-pill .num{color:var(--gold-soft);font-weight:600}
.wrap{position:relative;z-index:1;width:100%;max-width:740px;display:flex;flex-direction:column;
  animation:rise .8s cubic-bezier(.22,1,.36,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.eyebrow{font-size:clamp(.66rem,2.4vw,.76rem);letter-spacing:.3em;text-transform:uppercase;color:var(--dim);margin-bottom:1rem}
h1.title{font-size:clamp(1.7rem,5.4vw,2.5rem);line-height:1.08;font-weight:600;letter-spacing:.012em;color:var(--gold);
  text-shadow:0 1px 0 #d9a800,0 2px 0 #b88e00,0 3px 0 #8f6f00,0 4px 5px rgba(0,0,0,.5);margin-bottom:1rem}
.dek{margin:.6rem 0 1.6rem;font-size:clamp(1rem,2.8vw,1.12rem);line-height:1.55;color:var(--gold-soft);font-style:italic;max-width:38rem}
hr.rule{border:none;height:1px;background:linear-gradient(90deg,transparent,rgba(255,214,10,.22),transparent);margin:2rem 0}
h2{margin:2.2rem 0 .9rem;font-size:clamp(1.14rem,3.4vw,1.34rem);letter-spacing:.04em;color:var(--gold);font-weight:600}
p{font-size:clamp(1rem,2.65vw,1.08rem);line-height:1.72;margin:.85rem 0;color:var(--text)}
p strong{color:var(--gold);font-weight:600}
p em{color:var(--gold-soft);font-style:italic}
blockquote{margin:1.4rem 0;padding:.85rem 1rem;border-left:2px solid rgba(255,214,10,.5);background:rgba(255,214,10,.02);
  color:var(--text);font-size:clamp(.98rem,2.6vw,1.06rem);line-height:1.62;font-style:italic}
blockquote .src{display:block;margin-top:.5rem;font-style:normal;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.roots{margin:2.4rem 0 0;padding:1.15rem 1.3rem;border:1px solid rgba(14,68,255,.3);background:rgba(14,68,255,.04);
  box-shadow:inset 0 0 0 1px rgba(14,68,255,.05);display:flex;flex-direction:column;gap:.55rem}
.roots .rlab{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.roots a{color:var(--gold);text-decoration:none;border-bottom:1px dotted rgba(255,214,10,.5);font-weight:600}
.roots a:hover{border-bottom-style:solid}
.roots .note{font-size:.84rem;color:var(--dim);line-height:1.55}
.signoff{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid rgba(143,138,115,.28);
  font-size:.84rem;color:var(--dim);line-height:1.6;text-align:center}
.signoff strong{color:var(--gold-soft)}
.signoff a{color:var(--gold);text-decoration:none;border-bottom:1px dotted rgba(255,214,10,.5)}
.signoff a:hover{border-bottom-style:solid}
footer{margin-top:3.4rem;width:100%;max-width:740px;position:relative;z-index:1;border-top:1px solid rgba(255,214,10,.22);
  box-shadow:0 -10px 26px -16px rgba(255,214,10,.08);padding:1.4rem .2rem 2.2rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.foot-creed{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.foot-creed .free{color:#fff;font-weight:700;text-shadow:0 0 6px rgba(255,214,10,.6),0 0 14px rgba(255,214,10,.35)}
.foot-back{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);text-decoration:none}
.foot-back:hover{text-decoration:underline}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--bg);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.6rem 1rem;font-weight:700;text-decoration:none;border-radius:0 0 4px 4px;z-index:1000}
.skip-link:focus{left:1rem;outline:3px solid var(--bg);outline-offset:0}
:focus-visible{outline:2px solid var(--electric);outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* the corridor — one dim engraved line of doors; gold on hover (Day-41 wayfinding: chamber, not maze) */
.corridor{width:100%;max-width:740px;display:flex;justify-content:center;gap:1.15rem;flex-wrap:wrap;
  position:relative;z-index:2;margin:0 auto 1.3rem;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase}
.corridor a{color:var(--dim);text-decoration:none;transition:color .15s ease}
.corridor a:hover,.corridor a:focus-visible{color:var(--gold)}
.corridor .c-home{color:var(--gold-soft)}

/* ═ PRINT — knowledge-free includes paper (Day-42) ═ */
@media print{
  body{background:#fff;color:#000;padding:0;display:block}
  body::before{display:none}
  .corridor,.topnav,.skip-link,footer,.next-up,.chnav,canvas,#now-playing,#mini-hearth{display:none!important}
  .wrap{max-width:100%;animation:none}
  h1.title,h2,h3,strong{color:#000;text-shadow:none}
  p,li,blockquote,.dek{color:#000}
  blockquote{border-left:2px solid #000;background:none}
  .roots{border:1px solid #000;background:none;box-shadow:none}
  .roots a,a.inline{color:#000;border-bottom:none}
  .roots a::after,a.inline::after{content:" (" attr(href) ")";font-size:.8em;word-break:break-all}
  pre{border:1px solid #000;background:none;color:#000}
  code{background:none;color:#000}
}