/* ==========================================================================
   DARK ACADEMIA — one page. Loaded on a/dark-academia.html.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   A lamp plate over a wall of book spines, then the record set as a bound
   volume: chapter numerals, engraved ornament, drop caps, a marginal aside,
   dotted rules. One lamp lights the page (dark-academia.js); its vignette
   stops short of the artifact's so the unlit text stays readable: the gloom
   is depicted, not inflicted. The shell (rail, top bar, community drawer)
   is never restyled: every rule here is scoped to .da-hero, .da-rec or the
   lamp, and the ground is set on main alone.

   Colour (deep brown and oxblood, SUPPORTED; the values are ours), in this
   order so the swatch row reads the palette. No other hex appears below:
   ground #201612 · spine #33251A · board #2A1E16 · parchment #E4D5BE
   taupe #A08D77 · oxblood #93392F · ember #D0785F

   Type: Alegreya for reading, Alegreya SC for GENUINE small caps. The
   self-hosted cuts are Medium only, so each face spans 400–700 from one
   file (no synthesized weight), and emphasis is set in small caps, not bold.
   ========================================================================== */
@font-face {
  font-family: "Alegreya DA";
  src: url("fonts/alegreya.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya DA";
  src: url("fonts/alegreya-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya SC DA";
  src: url("fonts/alegreya-sc.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

.da-page {
  --da-bk: #201612;
  --da-br: #33251A;
  --da-br2: #2A1E16;
  --da-parch: #E4D5BE;
  --da-taupe: #A08D77;
  --da-ox: #93392F;
  --da-ember: #D0785F;
  --da-dot: rgb(74, 56, 42);
  --da-serif: "Alegreya DA", Georgia, "Times New Roman", serif;
  --da-sc-face: "Alegreya SC DA", "Alegreya DA", Georgia, serif;
  --mx: 50%; --my: 30%;
  background: var(--paper); /* shell mat; the reading room lives on main */
}
.da-page main { position: relative; background: var(--da-bk); color: var(--da-parch); overflow-x: clip; }

/* ---- shared register: both roots, nothing outside them ---------------- */
.da-hero, .da-rec { font: 400 19px/1.65 var(--da-serif); color: var(--da-parch); }
.da-hero a, .da-rec a { color: var(--da-ember); text-underline-offset: 3px; }
.da-hero a:hover, .da-rec a:hover { color: var(--da-parch); }
.da-hero :focus-visible, .da-rec :focus-visible { outline: 2px solid var(--da-ember); outline-offset: 4px; }
.da-rec b, .da-sc { font-family: var(--da-sc-face); font-weight: 500; letter-spacing: 0.04em; }
.da-rec i, .da-rec em { font-style: italic; }

/* ---- the lamp (made by dark-academia.js; absent without it) ------------ */
.da-lamp {
  position: absolute; left: 0; right: 0; top: 0; height: 0;
  pointer-events: none; z-index: 3;
  background: radial-gradient(circle 360px at var(--mx) var(--my), rgba(255, 190, 110, 0.10), transparent 60%, rgba(10, 6, 4, 0.42) 100%);
}
.da-lamp-off .da-lamp { display: none; }

/* ---- hero: the lamp plate over the spines ------------------------------ */
.da-hero {
  position: relative; min-height: min(90vh, 820px);
  display: grid; place-items: center; text-align: center;
  padding: 60px 16px;
  background:
    radial-gradient(60% 50% at 50% 40%, rgba(208, 120, 95, 0.18), transparent 70%),
    repeating-linear-gradient(90deg, var(--da-br2) 0 38px, rgb(36, 26, 19) 38px 40px, var(--da-br) 40px 62px, var(--da-br2) 62px 70px);
  box-shadow: inset 0 -120px 120px var(--da-bk), inset 0 120px 120px var(--da-bk);
}
.da-plate {
  max-width: 760px; width: 100%;
  padding: 40px clamp(18px, 5vw, 60px);
  background: rgba(32, 22, 18, 0.88);
  border: 1px solid var(--da-taupe); outline: 1px solid var(--da-taupe); outline-offset: 6px;
}
.da-stage { margin: 0; font: 500 clamp(24px, 3.4vw, 38px)/1.2 var(--da-sc-face); letter-spacing: 0.06em; color: var(--da-taupe); }
.da-stage span { display: block; }
.da-stage span:nth-child(2) { color: var(--da-parch); font-size: 1.4em; }
.da-h1 { margin: 18px 0 6px; font: 500 clamp(46px, 8vw, 96px)/1 var(--da-sc-face); letter-spacing: 0.04em; color: var(--da-parch); overflow-wrap: anywhere; }
.da-tag { margin: 0; font-style: italic; color: var(--da-taupe); }
.da-motto { margin: 16px 0 0; font-family: var(--da-sc-face); letter-spacing: 0.2em; color: var(--da-ember); }
.da-orn { display: block; width: min(320px, 70%); height: 30px; margin: 18px auto; color: var(--da-taupe); }
.da-lampbtn {
  margin-top: 22px; min-height: 44px; padding: 0 18px;
  background: transparent; border: 1px solid var(--da-taupe); border-radius: 0;
  color: var(--da-parch); font: 500 16px/1 var(--da-sc-face); letter-spacing: 0.08em; cursor: pointer;
}
.da-lampbtn:hover { background: var(--da-ox); border-color: var(--da-ox); }
.da-lampbtn[hidden] { display: none; }

/* ---- the record: a bound volume ---------------------------------------- */
.da-rec { position: relative; }
.da-wrap { max-width: 900px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 80px; }
.da-chap { margin-top: 110px; }
.da-chap:first-child { margin-top: 40px; }
.da-num { display: block; text-align: center; font: 500 22px/1.4 var(--da-sc-face); color: var(--da-ember); letter-spacing: 0.3em; }
.da-chap h2 { margin: 4px 0 0; text-align: center; font: 500 clamp(32px, 5vw, 50px)/1.1 var(--da-sc-face); letter-spacing: 0.03em; color: var(--da-parch); }
.da-sub { margin: 6px 0 0; text-align: center; font-style: italic; color: var(--da-taupe); }
.da-body { margin-top: 26px; }
.da-body p { margin: 0 0 16px; text-align: justify; hyphens: auto; }
.da-body a { hyphens: manual; overflow-wrap: anywhere; }
.da-drop::first-letter { float: left; font-family: var(--da-sc-face); font-size: 4.2em; line-height: 0.82; margin: 0.06em 0.1em 0 0; color: var(--da-ox); text-shadow: 1px 1px 0 rgb(0, 0, 0); }
.da-drop b::first-letter { color: var(--da-ox); }
.da-claim { font-size: 1.2em; line-height: 1.5; }

.da-marg { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; }
.da-marg--one { grid-template-columns: minmax(0, 1fr); }
.da-marg aside { font-style: italic; font-size: 15px; line-height: 1.5; color: var(--da-taupe); border-right: 1px solid var(--da-br); padding-right: 14px; text-align: right; }

.da-meta { margin: 0; }
.da-meta div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px; padding: 6px 0; border-bottom: 1px dotted var(--da-dot); }
.da-meta dt { font-family: var(--da-sc-face); color: var(--da-taupe); letter-spacing: 0.05em; }
.da-meta dd { margin: 0; }

.da-dx { margin: 24px 0 !important; padding: 18px 24px; border-top: 1px solid var(--da-taupe); border-bottom: 1px solid var(--da-taupe); text-align: center !important; font-style: italic; font-size: 22px; line-height: 1.5; }
.da-origin { background: var(--da-br2); padding: 16px 20px; border-left: 3px solid var(--da-ox); }
.da-origin p { margin: 0 !important; }

/* what carries the look */
.da-tw { overflow-x: auto; }
.da-ct { width: 100%; border-collapse: collapse; font-size: 17px; }
.da-ct th, .da-ct td { padding: 8px 6px; border-bottom: 1px dotted var(--da-dot); text-align: left; vertical-align: top; }
.da-ct th { width: 34%; font-weight: 400; }
.da-ct th a { display: inline-block; padding: 8px 0; font-family: var(--da-sc-face); letter-spacing: 0.04em; text-decoration: none; }
.da-ct small { display: block; font-style: italic; color: var(--da-ember); font-size: 14px; }
.da-nl { color: var(--da-taupe); font-style: italic; }
.da-after { margin-top: 12px !important; }
.da-tags { margin: 0 0 6px !important; }
.da-swatch { display: flex; flex-wrap: wrap; gap: 6px; }
.da-swatch span { width: 74px; padding: 28px 4px 3px; font: 11px/1.3 ui-monospace, Menlo, monospace; border: 1px solid var(--da-dot); }
.da-asbuilt { margin: 4px 0 0 !important; font-style: italic; color: var(--da-taupe); }

/* rules */
.da-rules { list-style: none; margin: 0; padding: 0; }
.da-rules li { padding: 14px 0; border-bottom: 1px dotted var(--da-dot); }
.da-rules h3 { display: inline; margin: 0; font: 500 22px/1.3 var(--da-sc-face); color: var(--da-parch); }
.da-k { font-style: italic; color: var(--da-taupe); margin-left: 10px; font-size: 16px; }
.da-rules p { margin: 4px 0 0 !important; }
.da-rules small { display: block; font-style: italic; color: var(--da-taupe); font-size: 15px; }

/* what stands behind it */
.da-firm { font-style: italic; }
.da-held { padding: 12px 0 12px 16px; border-left: 3px solid var(--da-ox); }
.da-rt { width: 100%; min-width: 440px; border-collapse: collapse; font-size: 16px; margin-top: 10px; }
.da-rt th, .da-rt td { padding: 6px; border-bottom: 1px dotted var(--da-dot); text-align: left; font-weight: 400; }
.da-rt thead th { font-family: var(--da-sc-face); font-weight: 500; border-bottom: 1px solid var(--da-taupe); color: var(--da-taupe); }

/* often confused with */
.da-conf p { text-align: center !important; }
.da-conf__n { font: 500 24px/1.4 var(--da-sc-face); letter-spacing: 0.04em; }
.da-conf__n a { display: inline-block; padding: 4px 0; }
.da-conf__n b { font-size: inherit; }

/* use it */
.da-use { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.da-use a { display: block; padding: 20px; border: 1px solid var(--da-taupe); outline: 1px solid var(--da-taupe); outline-offset: 4px; text-decoration: none; color: var(--da-parch); text-align: center; }
.da-use a b { display: block; font-size: 22px; color: var(--da-ember); }
.da-use a:hover { background: var(--da-br); color: var(--da-parch); }
.da-use a:focus-visible { outline: 2px solid var(--da-ember); }
.da-mach { text-align: center !important; margin-top: 22px !important; }
.da-mach .da-sc { color: var(--da-taupe); }

.da-colophon { text-align: center; margin: 90px 0 0; font-style: italic; color: var(--da-taupe); }

@media (max-width: 720px) {
  .da-marg { grid-template-columns: minmax(0, 1fr); }
  .da-marg aside { border-right: 0; text-align: left; padding: 0 0 8px; border-bottom: 1px solid var(--da-br); }
  .da-meta div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .da-use { grid-template-columns: minmax(0, 1fr); }
  .da-body p { text-align: left; }
  .da-chap { margin-top: 80px; }
  .da-dx { padding: 14px 8px; font-size: 20px; }
  .da-ct th { width: auto; }
}
@media (max-width: 420px) {
  .da-plate { outline-offset: 3px; }
  .da-ct, .da-ct tbody, .da-ct tr, .da-ct th, .da-ct td { display: block; width: auto; }
  .da-ct th { border-bottom: 0; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .da-hero *, .da-rec * { transition: none !important; }
}

/* research-dimension table at phone width: no fixed floor, cells wrap (QA 2026-09-29) */
@media (max-width: 480px) {
  .da-rt { min-width: 0; }
  .da-rt th, .da-rt td { padding-inline: 6px; overflow-wrap: break-word; }
}