/* ============================================================
   Ordo Universi companion site — shared stylesheet
   Design system carried over verbatim from "The Ascent of Iqlxldie & Asnito"
   preview (2026-07-27), confirmed by the author as the permanent look.
   ============================================================ */
@font-face{font-family:'Crimson';src:url(fonts/Crimson-Roman.otf) format('opentype');font-weight:400;}
@font-face{font-family:'Crimson';src:url(fonts/Crimson-Bold.otf) format('opentype');font-weight:700;}
@font-face{font-family:'Crimson';src:url(fonts/Crimson-Italic.otf) format('opentype');font-weight:400;font-style:italic;}
@font-face{font-family:'Asnito';src:url(fonts/IqlxldieAsnito.otf) format('opentype');}

:root{
  --parchment:#f6f2e8; --parchment-2:#efe9da; --ink:#1b1712; --ink-soft:#5b5346;
  --rule:#00000022; --self:#2a2a2a; --tribe:#7a2430; --world:#a3271f; --capstone:#a8842a;
  --accent:var(--world); --panel-bg:#fdfbf5; --panel-border:#00000018; color-scheme: light;
}
/* Band accent colors (self/tribe/world) are used as direct foreground text in a few
   places (description highlights, degree-card numbers, status badges), not just as
   borders/fills -- their light-mode values are tuned against the light parchment
   background and go near-invisible against the dark one, worst of all --self (a dark
   neutral, 1.3:1 contrast, effectively invisible). Lightened here for dark mode only;
   --capstone (#a8842a, gold) already clears AA contrast unmodified, left as-is. */
@media (prefers-color-scheme: dark){
  :root{ --parchment:#141110; --parchment-2:#1c1815; --ink:#eee7d8; --ink-soft:#b8ac95;
    --rule:#ffffff22; --panel-bg:#1a1613; --panel-border:#ffffff14; color-scheme: dark;
    --self:#f1ead9; --tribe:#a97178; --world:#c3736d; }
}
:root[data-theme="dark"]{ --parchment:#141110; --parchment-2:#1c1815; --ink:#eee7d8; --ink-soft:#b8ac95;
  --rule:#ffffff22; --panel-bg:#1a1613; --panel-border:#ffffff14; color-scheme: dark;
  --self:#f1ead9; --tribe:#a97178; --world:#c3736d; }
:root[data-theme="light"]{ --parchment:#f6f2e8; --parchment-2:#efe9da; --ink:#1b1712; --ink-soft:#5b5346;
  --rule:#00000022; --panel-bg:#fdfbf5; --panel-border:#00000018; color-scheme: light; }

*{box-sizing:border-box;}
html,body{margin:0; padding:0; background:var(--parchment); color:var(--ink);
  font-family:'Crimson',Georgia,serif; overflow-x:hidden;}
body{ font-size:17px; line-height:1.6; }
a{ color:inherit; }
.wrap{ max-width:880px; margin:0 auto; padding:0 28px; }

/* ---------- site nav (new: multi-page site needs this, the artifact didn't) ---------- */
.sitenav{ padding:1em 0; text-align:center; font-variant:small-caps; letter-spacing:.14em;
  font-size:.82em; border-bottom:1px solid var(--rule); }
.sitenav a{ text-decoration:none; margin:0 .9em; }
.sitenav a:hover{ text-decoration:underline; }

/* ---------- cover ---------- */
.cover{ background:linear-gradient(180deg,#0a0a0a 0%,#1c0d0e 60%,#2a0f0d 100%);
  color:#f1ead9; text-align:center; padding:5.5em 24px 4.5em; position:relative; overflow:hidden;}
.cover.small{ padding:3.4em 24px 3em; }
.cover::before{ content:""; position:absolute; inset:0; opacity:.06; background-image:
  radial-gradient(circle at 20% 30%, #fff 0, transparent 2px),
  radial-gradient(circle at 70% 60%, #fff 0, transparent 2px),
  radial-gradient(circle at 45% 80%, #fff 0, transparent 2px); background-size: 140px 140px; }
.cover .eyebrow{ font-variant:small-caps; letter-spacing:.32em; font-size:.8em; color:#c9a9a0; margin-bottom:1.1em;}
.cover h1{ font-size:2.6em; font-weight:700; letter-spacing:.01em; margin:0 0 .3em; text-wrap:balance; }
.cover .sub{ font-style:italic; color:#d8c9b8; font-size:1.05em; max-width:34em; margin:0 auto; }
.cover .asn{ font-family:'Asnito'; font-size:2.6em; color:#e7d9c2; margin:.6em 0 .1em; opacity:.9; }
.cover .n{ font-size:1.1em; color:#c9a9a0; margin-bottom:.3em; }

/* ---------- intro ---------- */
.intro{ padding:3.4em 0 1em; }
.intro p{ max-width:640px; }
.intro .lede{ font-size:1.12em; }

/* ---------- divider (band transition) ---------- */
.divider{ background:var(--accent); color:#f1ead9; text-align:center; padding:3.2em 24px;
  letter-spacing:.34em; font-size:.95em; margin:3.6em 0 0; }
.divider .band-name{ font-variant:small-caps; font-weight:700; }
.divider .band-range{ display:block; margin-top:.5em; font-size:.72em; letter-spacing:.24em; opacity:.75; }

/* ---------- band section ---------- */
.band{ padding:3em 0 1em; --accent-local:var(--accent); }
.band-head{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap;
  gap:.4em 1.2em; border-bottom:1.5px solid var(--accent-local); padding-bottom:.5em; margin-bottom:1.1em;}
.band-head h2{ font-size:1.5em; margin:0; font-variant:small-caps; letter-spacing:.03em; }
.band-head .degrange{ font-family:'Crimson',serif; font-style:italic; color:var(--ink-soft); font-size:.95em;}
.band-status{ display:inline-block; font-variant:small-caps; letter-spacing:.14em; font-size:.68em;
  padding:.22em .7em; border-radius:2px; margin-left:.6em; vertical-align:middle;}
.status-real{ background:color-mix(in srgb, var(--accent-local) 18%, transparent); color:var(--accent-local);
  border:1px solid color-mix(in srgb, var(--accent-local) 45%, transparent);}
.status-preview{ background:transparent; border:1px dashed var(--ink-soft); color:var(--ink-soft); }

.stat-strip{ display:flex; flex-wrap:wrap; gap:0; margin:0 0 1.6em; border:1px solid var(--panel-border);
  border-radius:3px; overflow:hidden; }
.stat{ flex:1 1 140px; padding:.6em .9em; border-right:1px solid var(--panel-border); }
.stat:last-child{ border-right:none; }
.stat .k{ font-variant:small-caps; letter-spacing:.12em; font-size:.68em; color:var(--ink-soft); display:block; margin-bottom:.25em;}
.stat .v{ font-size:.86em; }
.band p.note{ max-width:640px; }

/* ---------- the manuscript panel ---------- */
.panel{ background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:2px;
  padding:2.4em 2em 2em; margin:1.4em 0 2em; box-shadow:0 1px 0 var(--panel-border); position:relative; }
.panel .cap{ text-align:center; font-variant:small-caps; letter-spacing:.2em; font-size:.78em;
  color:var(--ink-soft); margin-bottom:1.4em; }
.panel-flag{ position:absolute; top:0; right:0; font-variant:small-caps; letter-spacing:.12em;
  font-size:.62em; padding:.3em .7em; color:var(--ink-soft); }

.interlinear{ display:flex; justify-content:center; align-items:flex-start; gap:2.2em; flex-wrap:wrap; }
.word{ display:flex; flex-direction:column; align-items:center; min-width:2.4em; }
.word .asn{ font-family:'Asnito'; font-size:2.1em; line-height:1.3; }
.word .rom{ font-weight:700; margin-top:.15em; font-size:.92em; }
.word .gl{ font-style:italic; color:var(--ink-soft); font-size:.72em; margin-top:.1em; }
.translation{ text-align:center; margin-top:1.5em; font-style:italic; font-size:1.05em; }

/* ---------- degree page specific ---------- */
.knot-pair{ text-align:center; font-size:1.15em; margin:1.6em 0; }
.knot-pair .arrow{ color:var(--accent-local); margin:0 .5em; }
.hexname-block{ text-align:center; margin:1.6em 0; }
.hexname-block .asn{ font-family:'Asnito'; font-size:2.6em; }
.hexname-block .rom{ font-weight:700; font-size:1.1em; margin-top:.2em; }
.hexname-block .gl{ font-style:italic; color:var(--ink-soft); font-size:.85em; margin-top:.3em; }
.lex-link{ text-align:center; margin-top:1em; font-size:.85em; }
.lex-link a{ text-decoration:none; border-bottom:1px dotted var(--accent-local); }
.lex-link a:hover{ border-bottom-style:solid; }

.degree-cover{ text-align:center; margin:0 0 2em; }
.degree-cover img{ display:block; margin:0 auto; max-width:220px; width:100%; height:auto;
  border-radius:2px; box-shadow:0 6px 22px #00000035; }

.cover .crest{ display:block; margin:0 auto .9em; width:100px; height:auto; opacity:.92; }

.locked-note{ text-align:center; margin-top:1.4em; font-style:italic; color:var(--ink-soft); font-size:.85em; }

.degree-description{ margin:1.6em 0 2em; }
.degree-description p{ margin:0 0 1.1em; }
.degree-description p:last-child{ margin-bottom:0; }
.degree-description strong{ color:var(--accent-local); }

.related-degrees{ margin:0 0 2em; text-align:center; }
.related-degrees .cap{ font-variant:small-caps; letter-spacing:.2em; font-size:.78em;
  color:var(--ink-soft); margin-bottom:.9em; }
.related-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6em .9em; }
.related-links a{ font-size:.88em; text-decoration:none; border:1px solid var(--panel-border);
  border-radius:3px; padding:.4em .8em; }
.related-links a:hover{ border-color:var(--accent-local); }

.purchase-cta{ text-align:center; margin:1em 0 2em; }
.purchase-cta .cta-buy{ display:inline-block; padding:.7em 1.7em; background:var(--accent-local);
  color:#f6f2e8; text-decoration:none; font-variant:small-caps; letter-spacing:.12em; font-size:.9em;
  border-radius:2px; transition:opacity .15s; }
.purchase-cta .cta-buy:hover{ opacity:.85; }
.purchase-cta .cta-soon{ font-style:italic; color:var(--ink-soft); font-size:.85em; }

/* --self turns light in dark mode (see :root overrides above), which would otherwise
   leave this button's hardcoded light text sitting on its own now-light background --
   only band whose button needs a flipped (dark) text color to stay legible. */
@media (prefers-color-scheme: dark){
  .band[data-band="self"] .purchase-cta .cta-buy{ color:#1b1712; }
}
:root[data-theme="dark"] .band[data-band="self"] .purchase-cta .cta-buy{ color:#1b1712; }

.degree-nav{ display:flex; justify-content:space-between; align-items:center; margin:2.6em 0 1em;
  font-size:.9em; padding-top:1.2em; border-top:1px solid var(--rule); }
.degree-nav a{ text-decoration:none; }
.degree-nav a:hover{ text-decoration:underline; }
.degree-nav .center{ font-variant:small-caps; letter-spacing:.14em; }

/* ---------- start-here starter grid (index page) ---------- */
.starter-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1em;
  margin:1.6em 0 2.4em; }
.starter-card{ display:block; text-decoration:none; border:1px solid var(--panel-border);
  border-radius:3px; padding:1.1em 1.2em; background:var(--panel-bg); transition:border-color .15s; }
.starter-card:hover{ border-color:var(--accent); }
.starter-card .dn{ font-weight:700; font-size:1.4em; color:var(--accent); }
.starter-card .dt{ display:block; font-weight:700; margin:.2em 0 .5em; }
.starter-card .hook{ font-size:.85em; color:var(--ink-soft); font-style:italic; line-height:1.4; }

/* ---------- lexicon (word-level companion) ---------- */
.lexicon-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:.7em; margin:1.4em 0 2em; }
.lexicon-card{ display:block; text-decoration:none; border:1px solid var(--panel-border);
  border-radius:3px; padding:.85em .9em; background:var(--panel-bg); transition:border-color .15s; }
.lexicon-card:hover{ border-color:var(--accent); }
.lexicon-card .lw{ display:block; font-family:'Crimson',serif; font-weight:700; font-size:1.05em; }
.lexicon-card .lg{ display:block; font-size:.8em; font-style:italic; color:var(--ink-soft); margin-top:.25em; }
.lex-gloss{ text-align:center; font-style:italic; font-size:1.15em; }

/* ---------- degree grid (index page) ---------- */
.degree-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.7em;
  margin:1.4em 0 2em; }
.degree-card{ display:block; text-decoration:none; border:1px solid var(--panel-border);
  border-radius:3px; padding:.75em .8em; background:var(--panel-bg); transition:border-color .15s; }
.degree-card:hover{ border-color:var(--accent-local); }
.degree-card .dn{ font-weight:700; font-size:1.1em; color:var(--accent-local); }
.degree-card .dt{ display:block; font-size:.82em; margin-top:.2em; line-height:1.3; }
.degree-card.locked{ opacity:.45; pointer-events:none; }

/* ---------- footer / legend ---------- */
footer{ padding:2.6em 0 4em; border-top:1px solid var(--rule); margin-top:2em; }
.legend{ display:flex; gap:1.6em; flex-wrap:wrap; font-size:.85em; color:var(--ink-soft); }
.legend span.dot{ display:inline-block; width:.7em; height:.7em; border-radius:50%; margin-right:.4em; }

@media (max-width: 560px){
  .cover h1{ font-size:2em; }
  .stat-strip{ flex-direction:column; }
  .stat{ border-right:none; border-bottom:1px solid var(--panel-border); }
  .stat:last-child{ border-bottom:none; }
}