/* ============================================================
   INNUMBRA — "in shadow": a dark-native editorial reference.
   Light (gold) breaks through shadow; the citation apparatus
   is the signature. Fraunces / Newsreader / IBM Plex Mono.
   ============================================================ */

:root{
  color-scheme: light dark;
  /* palette — resolved per theme via light-dark() */
  --bg:        light-dark(#f4f5f8, #0c0f14);
  --surface:   light-dark(#ffffff, #141922);
  --surface-2: light-dark(#f0f2f6, #1b212c);
  --ink:       light-dark(#161a21, #e9ebef);
  --muted:     light-dark(#586072, #929aa8);
  --faint:     light-dark(#8b93a2, #5f6775);
  --line:      light-dark(#e4e7ee, #242c38);
  --line-soft: light-dark(#eef0f5, #1c2330);
  --gold:      light-dark(#9a6410, #e6b25b);
  --gold-lit:  light-dark(#7d5109, #f4cd84);
  --glow:      light-dark(rgba(230,178,91,.10), rgba(230,178,91,.16));

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body:    "Newsreader", Georgia, serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --measure: 40rem;      /* optimal reading width */
  --wide:    68rem;
  --step--1: clamp(.82rem,.79rem + .15vw,.9rem);
  --step-0:  clamp(1.06rem,1.02rem + .2vw,1.19rem);
  --step-1:  clamp(1.3rem,1.2rem + .5vw,1.6rem);
  --step-2:  clamp(1.7rem,1.5rem + 1vw,2.3rem);
  --step-3:  clamp(2.4rem,1.9rem + 2.4vw,4rem);
  --step-4:  clamp(3rem,2.2rem + 4vw,5.5rem);
}
:root[data-theme="dark"]{ color-scheme: dark; }
:root[data-theme="light"]{ color-scheme: light; }

*{ box-sizing:border-box; margin:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }

body{
  background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:var(--step-0); line-height:1.7;
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex; flex-direction:column; min-height:100vh;
}
/* ambient umbra: a faint light source top-center, the brand's "shadow with light" */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 60% at 50% -10%, var(--glow), transparent 60%);
}

::selection{ background:var(--gold); color:var(--bg) }
a{ color:inherit; text-decoration:none }

/* ---------- reading progress (light tracking through shadow) ---------- */
.progress{ position:fixed; top:0; left:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-lit)); z-index:60;
  box-shadow:0 0 12px var(--gold); transition:width .1s linear }

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1rem clamp(1.2rem,4vw,2.5rem);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--display);
  font-weight:600; font-size:1.15rem; letter-spacing:.14em; text-transform:uppercase }
.brand .eclipse{ width:20px; height:20px; flex:0 0 auto; display:block }
.brand:hover .eclipse circle:last-child{ transform:translateX(1px) }
.nav{ display:flex; align-items:center; gap:1.4rem; font-family:var(--mono);
  font-size:var(--step--1); letter-spacing:.02em }
.nav a{ color:var(--muted); transition:color .2s }
.nav a:hover{ color:var(--gold) }
.theme-toggle{ display:grid; place-items:center; width:34px; height:34px;
  border:1px solid var(--line); border-radius:50%; background:transparent;
  color:var(--muted); cursor:pointer; transition:.2s }
.theme-toggle:hover{ color:var(--gold); border-color:var(--gold) }

/* ---------- layout shell ---------- */
main{ flex:1; width:100%; margin-inline:auto; padding-inline:clamp(1.2rem,4vw,2.5rem) }
.wrap-wide{ max-width:var(--wide); margin-inline:auto }
.wrap-read{ max-width:var(--measure); margin-inline:auto }

/* ---------- eyebrow / labels (the apparatus voice) ---------- */
.eyebrow{ font-family:var(--mono); font-size:var(--step--1); letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold) }

/* ---------- home ---------- */
.home-hero{ max-width:var(--wide); margin:clamp(3rem,9vw,6.5rem) auto clamp(2rem,5vw,3.5rem) }
.home-hero h1{ font-family:var(--display); font-weight:500; font-size:var(--step-3);
  line-height:1.02; letter-spacing:-.02em; margin:.5rem 0 .8rem; max-width:16ch }
.home-hero p{ color:var(--muted); font-size:var(--step-1); max-width:46ch; line-height:1.5 }

.index{ max-width:var(--wide); margin:0 auto clamp(4rem,10vw,7rem);
  border-top:1px solid var(--line) }
.entry{ display:grid; grid-template-columns:auto 1fr auto; gap:1.5rem; align-items:baseline;
  padding:1.6rem .4rem; border-bottom:1px solid var(--line-soft);
  transition:background .25s, padding-left .25s }
.entry:hover{ background:var(--surface-2); padding-left:1rem }
.entry .idx{ font-family:var(--mono); font-size:var(--step--1); color:var(--faint) }
.entry h2{ font-family:var(--display); font-weight:500; font-size:var(--step-1);
  line-height:1.15; letter-spacing:-.01em }
.entry:hover h2{ color:var(--gold-lit) }
.entry .dek{ color:var(--muted); font-size:var(--step-0); margin-top:.25rem; max-width:60ch }
.entry .stamp{ font-family:var(--mono); font-size:var(--step--1); color:var(--faint);
  white-space:nowrap; text-align:right }
.empty{ color:var(--muted); padding:3rem 0; font-style:italic }

/* ---------- article ---------- */
.post{ position:relative; padding:clamp(2.5rem,7vw,5rem) 0 2rem }
/* penumbra glow behind the headline — the signature moment */
.post-head{ position:relative; max-width:var(--measure); margin-inline:auto; text-align:center;
  padding-bottom:clamp(2rem,5vw,3.2rem); margin-bottom:clamp(2rem,5vw,3.2rem);
  border-bottom:1px solid var(--line) }
.post-head::before{ content:""; position:absolute; left:50%; top:-8%; transform:translateX(-50%);
  width:min(46rem,120%); height:22rem; z-index:-1; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 40%, var(--glow), transparent 70%) }
.post-head h1{ font-family:var(--display); font-weight:500; font-size:var(--step-3);
  line-height:1.04; letter-spacing:-.022em; margin:.7rem auto .9rem; max-width:20ch }
.stamp-row{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  font-family:var(--mono); font-size:var(--step--1); letter-spacing:.03em; color:var(--faint) }
.stamp-row .dot{ color:var(--gold) }

/* prose */
.body{ max-width:var(--measure); margin-inline:auto; font-size:var(--step-0) }
.body > p:first-of-type{ font-size:1.14em; line-height:1.62 }
/* refined drop of light on the opening letter */
.body > p:first-of-type::first-letter{
  font-family:var(--display); font-weight:600; float:left; line-height:.72;
  font-size:3.4em; padding:.05em .12em 0 0; color:var(--gold) }
.body p{ margin:1.15em 0 }
.body h2{ font-family:var(--display); font-weight:500; font-size:var(--step-2);
  line-height:1.15; letter-spacing:-.015em; margin:2.4em 0 .7em; scroll-margin-top:5rem }
.body h3{ font-family:var(--display); font-weight:500; font-size:var(--step-1);
  margin:1.8em 0 .5em }
.body a:not(.entry){ color:var(--gold); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--gold) 40%,transparent); transition:.2s }
.body a:hover{ text-decoration-color:var(--gold) }
.body strong{ font-weight:600 }
.body ul,.body ol{ padding-left:1.3em; margin:1.1em 0 }
.body li{ margin:.4em 0 }
.body ul li::marker{ color:var(--gold) }
.body blockquote{ margin:1.6em 0; padding:.2em 0 .2em 1.4em; border-left:2px solid var(--gold);
  font-style:italic; color:var(--muted) }

/* citation markers — the signature apparatus */
sup.cite{ font-family:var(--mono); font-size:.62em; font-weight:500; color:var(--gold);
  padding:0 .12em; vertical-align:super; line-height:0 }
sup.cite::before{ content:"[" } sup.cite::after{ content:"]" }

/* comparison table ("At a glance") */
.body table{ width:100%; border-collapse:collapse; margin:1.8em 0; font-size:.94em }
.body th,.body td{ text-align:left; padding:.7em .9em; border-bottom:1px solid var(--line) }
.body thead th{ font-family:var(--mono); font-size:.8em; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--gold) }
.body tbody tr:hover{ background:var(--surface-2) }

/* apparatus sections: References / Related / FAQ */
.body h2.apparatus{ font-family:var(--mono); font-weight:500; font-size:var(--step-0);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  border-top:1px solid var(--line); padding-top:1.6em; margin-top:2.6em }
.body h2.apparatus + ol,.body h2.apparatus + ul{ font-family:var(--mono);
  font-size:var(--step--1); line-height:1.9; color:var(--muted) }
.body h2.apparatus + ol a,.body h2.apparatus + ul a{ color:var(--ink) }
.body h2.apparatus + ol a:hover,.body h2.apparatus + ul a:hover{ color:var(--gold) }

.back{ max-width:var(--measure); margin:3.5rem auto 0; font-family:var(--mono);
  font-size:var(--step--1) }
.back a{ color:var(--muted) } .back a:hover{ color:var(--gold) }

/* ---------- ads (unobtrusive, labeled) ---------- */
.ad{ max-width:var(--measure); margin:2.6rem auto; text-align:center; overflow:hidden }
.ad-label{ display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint); margin-bottom:8px }
.ad iframe{ max-width:100%; border:0 }

/* ---------- footer ---------- */
.site-foot{ border-top:1px solid var(--line); margin-top:auto;
  padding:2.5rem clamp(1.2rem,4vw,2.5rem);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:var(--step--1); color:var(--faint) }
.site-foot a{ color:var(--muted) } .site-foot a:hover{ color:var(--gold) }

/* ---------- focus / a11y ---------- */
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px }

/* ---------- load motion ---------- */
@keyframes rise{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
.post-head,.home-hero{ animation:rise .7s cubic-bezier(.2,.7,.2,1) both }

@media (max-width:640px){
  .entry{ grid-template-columns:1fr; gap:.3rem }
  .entry .stamp{ text-align:left } .entry .idx{ display:none }
  .body > p:first-of-type::first-letter{ font-size:2.8em }
}

/* ---------- topics / categories ---------- */
.crumbs{ max-width:var(--wide); margin:0 auto; padding-top:1.4rem;
  font-family:var(--mono); font-size:var(--step--1); color:var(--faint); letter-spacing:.02em }
.crumbs a{ color:var(--muted) } .crumbs a:hover{ color:var(--gold) }
.post-head .crumbs{ padding-top:0; margin-bottom:1.2rem; text-align:center }

.topics-strip{ max-width:var(--wide); margin:clamp(1.5rem,4vw,2.5rem) auto 0 }
.index-head{ max-width:var(--wide); margin:clamp(2.5rem,6vw,4rem) auto .4rem }
.topics-grid{ display:grid; gap:.9rem; margin:1rem auto 0;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr)) }
.topics-grid.wide{ max-width:var(--wide) }
.topic-card{ display:flex; flex-direction:column; gap:.35rem; padding:1.1rem 1.2rem;
  border:1px solid var(--line); border-radius:12px; background:var(--surface);
  transition:border-color .2s, transform .2s, background .2s }
.topic-card:hover{ border-color:var(--gold); transform:translateY(-2px) }
.topic-name{ font-family:var(--display); font-weight:500; font-size:1.15rem; letter-spacing:-.01em }
.topic-card:hover .topic-name{ color:var(--gold-lit) }
.topic-count{ font-family:var(--mono); font-size:var(--step--1); color:var(--faint);
  letter-spacing:.04em }

/* linked citation markers + reference list */
sup.cite a{ color:var(--gold); text-decoration:none }
sup.cite a:hover{ text-decoration:underline; text-decoration-thickness:1px }
.body ol.reflist{ font-family:var(--mono); font-size:var(--step--1); line-height:1.9;
  color:var(--muted); padding-left:1.6em }
.body ol.reflist li{ margin:.3em 0 }
.body ol.reflist a{ color:var(--ink); word-break:break-word }
.body ol.reflist a:hover{ color:var(--gold) }

/* preview banner (only shown on /preview/ token links) */
.preview-banner{ max-width:var(--wide); margin:1.2rem auto -.5rem; padding:.7rem 1.1rem;
  border:1px solid var(--gold); border-radius:8px; background:var(--glow);
  font-family:var(--mono); font-size:var(--step--1); color:var(--gold-lit);
  text-align:center; letter-spacing:.02em }

/* featured image (self-hosted, license-safe) */
.hero-img{ max-width:var(--wide); margin:0 auto clamp(1.5rem,4vw,2.5rem) }
.hero-img img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  border-radius:14px; border:1px solid var(--line); display:block; background:var(--surface-2) }
.hero-img figcaption{ margin-top:.5rem; font-family:var(--mono); font-size:var(--step--1);
  color:var(--faint); text-align:right }
.hero-img figcaption a{ color:var(--muted) }
.hero-img figcaption a:hover{ color:var(--gold) }

/* review note (shown only on preview links, when a post is close to an existing one) */
.review-note{ max-width:var(--wide); margin:.6rem auto 0; padding:.7rem 1.1rem;
  border:1px solid #c98a2b; border-left-width:4px; border-radius:8px;
  background:color-mix(in srgb, #c98a2b 12%, transparent);
  font-family:var(--mono); font-size:var(--step--1); color:var(--ink) }
.review-note a{ color:var(--gold); text-decoration:underline }

/* homepage: subtle link to the topics page (strip removed from main page) */
.index-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem }
.index-topics-link{ font-family:var(--mono); font-size:var(--step--1); color:var(--muted) }
.index-topics-link:hover{ color:var(--gold) }