/* ==========================================================================
   The Valdrin Codex
   Dark, ashen, sharp-cornered. Engraved Roman capitals for titles, a humanist
   serif for reading, blackletter reserved for illuminated initials.
   No rounded corners, no soft shadows.
   ========================================================================== */

:root {
  --ink:        #0d0c0a;
  --panel:      #15130f;
  --panel-2:    #1c1914;
  --panel-3:    #241f18;
  --line:       #322b21;
  --line-soft:  #241f18;

  --text:       #ddd2ba;
  --text-dim:   #a2977f;
  --text-faint: #6f6653;

  --blood:      #93301d;
  --blood-lit:  #bf4429;
  --brass:      #c19a52;
  --moss:       #6d8464;

  --measure: 68ch;
  --rail: 300px;
  --gap: 2.5rem;

  --display: 'Cinzel', 'Trajan Pro', 'Palatino Linotype', serif;
  --initial: 'UnifrakturCook', 'Cinzel', serif;
  --serif: 'EB Garamond', 'Iowan Old Style', Georgia, serif;
  --cond: 'Barlow Condensed', 'Oswald', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

.prose :is(h2, h3)[id] { scroll-margin-top: 1.4rem; }

body {
  margin: 0;
  background-color: var(--ink);
  background-image:
    radial-gradient(1100px 620px at 50% -10%, #1b1811 0%, rgba(13,12,10,0) 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.045'/></svg>");
  color: var(--text);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.72;
  text-rendering: optimizeLegibility;
}

.wrap { width: min(1180px, 92vw); margin-inline: auto; }

a { color: var(--text); text-decoration-color: color-mix(in srgb, var(--brass) 55%, transparent); text-underline-offset: 3px; }
a:hover { color: #fff; text-decoration-color: var(--blood-lit); }

.dim { color: var(--text-dim); }

.skip {
  position: absolute; left: -9999px;
  background: var(--blood); color: #fff; padding: .6rem 1rem; z-index: 50;
}
.skip:focus { left: 1rem; top: 1rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- masthead */

.masthead {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.15));
}

.masthead-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; padding: 1.4rem 0 1.1rem;
}

.brand { display: flex; align-items: center; gap: .95rem; text-decoration: none; }
.brand-mark {
  width: 46px; height: 46px; object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 10px rgba(193,154,82,.35));
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.42rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
}
.brand:hover .brand-title { color: #fff; }
.brand-tag {
  font-family: var(--cond);
  font-size: .84rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint);
}

.search { display: flex; border: 1px solid var(--line); background: var(--panel); }
.search input {
  background: transparent; border: 0; color: var(--text);
  font-family: var(--serif); font-size: .95rem; padding: .58rem .85rem; width: 15rem;
}
.search input::placeholder { color: var(--text-faint); }
.search input:focus { outline: none; background: rgba(255,255,255,.02); }
.search button {
  background: var(--panel-3); border: 0; border-left: 1px solid var(--line);
  color: var(--text-dim); cursor: pointer;
  font-family: var(--cond); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  padding: 0 1rem;
}
.search button:hover { background: var(--blood); color: #fff; }

.topnav { border-top: 1px solid var(--line-soft); background: rgba(0,0,0,.28); }
.topnav-inner {
  display: flex; gap: 1.6rem; flex-wrap: wrap;
  padding: .55rem 0;
  font-family: var(--cond); font-size: .92rem; letter-spacing: .13em; text-transform: uppercase;
}
.topnav a { color: var(--text-dim); text-decoration: none; padding-block: .15rem; border-bottom: 2px solid transparent; }
.topnav a:hover { color: var(--text); border-bottom-color: var(--blood); }

/* ----------------------------------------------------------------- main */

main { padding: 2.6rem 0 4rem; }

.breadcrumb {
  font-family: var(--cond); font-size: .84rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 1.6rem;
  display: flex; gap: .55rem; flex-wrap: wrap;
}
.breadcrumb a { color: var(--text-dim); text-decoration: none; }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb .here { color: var(--brass); }

.page-head { margin-bottom: 2.2rem; }
.page-head h1, .hero h1 { font-family: var(--display); font-weight: 600; letter-spacing: .01em; }

h1 { font-size: clamp(2.2rem, 4.4vw, 3.1rem); line-height: 1.08; margin: 0 0 .5rem; }

.entry-sub {
  font-family: var(--cond); font-size: 1.05rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--blood-lit); margin: 0 0 1rem;
}
.entry-summary { color: var(--text-dim); font-size: 1.1rem; font-style: italic; max-width: var(--measure); margin: 0; }
/* Listing pages reserve no rail, so nothing is competing for the width and the
   summary has no reason to stop at the reading measure. Entry pages keep it:
   there the infobox is sitting in the space the measure leaves. */
.page-head .entry-summary { max-width: none; }

/* ----------------------------------------------------------------- hero */

.hero {
  border: 1px solid var(--line);
  border-top: 3px solid var(--blood);
  background:
    linear-gradient(180deg, rgba(147,48,29,.10), rgba(0,0,0,0) 60%),
    var(--panel);
  padding: 3rem 2.4rem 2.6rem;
  margin-bottom: 3rem;
}
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); }
.hero-lede { max-width: 60ch; color: var(--text); font-size: clamp(1.25rem, 2.4vw, 1.55rem); line-height: 1.5; }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.8rem; }

.btn {
  display: inline-block; text-decoration: none;
  font-family: var(--cond); font-size: .92rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .62rem 1.35rem;
  background: var(--blood); color: #f3e9d8;
  border: 1px solid var(--blood-lit);
}
.btn:hover { background: var(--blood-lit); color: #fff; }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--text-dim); }
.btn.ghost:hover { border-color: var(--brass); color: var(--text); background: rgba(193,154,82,.08); }

/* ------------------------------------------------------------ sections */

.rule {
  font-family: var(--cond); font-weight: 500;
  font-size: 1.05rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--brass);
  display: flex; align-items: center; gap: 1rem;
  margin: 2.8rem 0 1.2rem;
}
.rule::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.rule a { color: inherit; text-decoration: none; }
.rule a:hover { color: var(--text); }

.cat-blurb { color: var(--text-dim); margin: -.4rem 0 1.2rem; max-width: none; }

/* ---------------------------------------------------------------- cards */

.cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.card { background: var(--panel); }
.card a {
  display: block; height: 100%; padding: 1.25rem 1.3rem 1.4rem;
  text-decoration: none; border-left: 2px solid transparent;
}
.card a:hover { background: var(--panel-2); border-left-color: var(--blood); }
.card h3 {
  font-family: var(--display); font-weight: 600; font-size: 1.12rem;
  letter-spacing: .04em;
  margin: 0 0 .4rem; color: var(--text);
}
.card-sub {
  font-family: var(--cond); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 .55rem;
}
.card-sum { margin: 0; font-size: .96rem; color: var(--text-dim); line-height: 1.55; }
.card-cat {
  font-family: var(--cond); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--moss);
}

.plainlist { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 3rem; }
.plainlist li { break-inside: avoid; padding: .18rem 0; }
@media (max-width: 700px) { .plainlist { columns: 1; } }

.empty { color: var(--text-faint); font-style: italic; }

/* ------------------------------------------------------------ entry page */

.entry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail);
  gap: var(--gap);
  align-items: start;
}
.entry-grid.no-box { grid-template-columns: minmax(0, 1fr) 220px; }

.entry-head { border-bottom: 1px solid var(--line); padding-bottom: 1.4rem; margin-bottom: 1.8rem; }

.tags { margin: 1rem 0 0; display: flex; gap: .4rem; flex-wrap: wrap; }
.tag {
  font-family: var(--cond); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim); text-decoration: none;
  border: 1px solid var(--line); padding: .12rem .55rem; background: var(--panel);
}
.tag:hover { border-color: var(--blood); color: var(--text); }


/* ---------------------------------------------------------------- prose */

.prose { max-width: var(--measure); }
.prose > *:first-child { margin-top: 0; }

.prose h2 {
  font-family: var(--display); font-weight: 600;
  font-size: 1.55rem; line-height: 1.25; letter-spacing: .02em;
  margin: 2.6rem 0 .8rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--line);
}
.prose h3 {
  font-family: var(--cond); font-weight: 600;
  font-size: 1.12rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--brass); margin: 2rem 0 .6rem;
}
.prose h4 {
  font-family: var(--cond); font-weight: 600; font-size: 1rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text);
  margin: 1.4rem 0 .4rem;
}
.prose p { margin: 0 0 1.15rem; }
.prose strong { color: #efe4cd; font-weight: 600; }
.prose em { color: #e7dcc4; }

.anchor {
  margin-left: .45rem; color: var(--text-faint); text-decoration: none;
  font-size: .7em; opacity: 0; transition: opacity .12s;
}
h2:hover .anchor, h3:hover .anchor { opacity: 1; }

.prose ul, .prose ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.prose li { margin: .3rem 0; }
.prose ul { list-style: none; padding-left: 1.15rem; }
.prose ul > li::before {
  content: '\2756'; color: var(--blood-lit);
  font-size: .62em; margin-left: -1.15rem; margin-right: .6rem; vertical-align: .18em;
}
.prose ul ul > li::before { color: var(--text-faint); }

.prose blockquote {
  margin: 1.6rem 0; padding: .2rem 0 .2rem 1.4rem;
  border-left: 3px solid var(--blood);
  color: var(--text-dim); font-style: italic;
}
.prose blockquote p:last-child { margin-bottom: 0; }

.pullquote {
  margin: 2rem 0; padding: 1.6rem 1.8rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,.22);
  font-family: var(--serif); font-size: 1.22rem; font-style: italic; color: #e8dcc2;
}
.pullquote p:last-of-type { margin-bottom: 0; }
.pullquote cite {
  display: block; margin-top: .9rem;
  font-family: var(--cond); font-style: normal; font-size: .84rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint);
}

.note {
  margin: 1.8rem 0; padding: 1.1rem 1.3rem;
  border: 1px solid var(--line); border-left: 3px solid var(--brass);
  background: var(--panel);
  font-size: .97rem;
}
.note h4 { margin-top: 0; color: var(--brass); }
.note p:last-child { margin-bottom: 0; }
.note-warn { border-left-color: var(--blood-lit); }
.note-warn h4 { color: var(--blood-lit); }
.note-tip { border-left-color: var(--moss); }
.note-tip h4 { color: var(--moss); }
.note-lore {
  border-left-color: var(--text-faint);
  background: rgba(0,0,0,.28); font-style: italic; color: var(--text-dim);
}

.spoiler {
  margin: 1.6rem 0; border: 1px dashed var(--line); background: rgba(0,0,0,.25); padding: .8rem 1.1rem;
}
.spoiler summary {
  cursor: pointer; color: var(--blood-lit);
  font-family: var(--cond); font-size: .88rem; letter-spacing: .16em; text-transform: uppercase;
}
.spoiler[open] summary { margin-bottom: .8rem; }

.wikilink { text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--brass) 45%, transparent); }
.wikilink:hover { border-bottom-color: var(--blood-lit); color: #fff; }
.wikilink.missing { color: var(--text-faint); border-bottom: 1px dotted var(--blood); }

.prose code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: .86em; background: var(--panel-3); border: 1px solid var(--line);
  padding: .05em .35em; color: #e0cfa8;
}
.prose pre {
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--line);
  padding: 1rem 1.1rem; overflow-x: auto; font-size: .88rem;
}
.prose pre code { background: none; border: 0; padding: 0; }

.table-wrap { overflow-x: auto; margin: 1.6rem 0; border: 1px solid var(--line); }
.prose table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.prose th {
  font-family: var(--cond); font-weight: 600; font-size: .85rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--brass);
  text-align: left; background: var(--panel-2);
  padding: .6rem .9rem; border-bottom: 1px solid var(--line);
}
.prose td { padding: .55rem .9rem; border-bottom: 1px solid var(--line-soft); }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:hover td { background: rgba(255,255,255,.018); }

.fig { margin: 1.8rem 0; }
.fig img { max-width: 100%; height: auto; border: 1px solid var(--line); image-rendering: pixelated; }
.fig figcaption {
  font-family: var(--cond); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); margin-top: .5rem;
}

/* A category page carries no infobox, so the rail an entry page reserves on the
   right sits empty and the intro is stranded in a 68ch column. Nothing is
   competing for the width here, so the intro takes all of it. */
.prose.intro { max-width: none; }
.prose.intro .fig { width: 100%; margin: 0 0 2rem; }
.prose.intro .fig img { width: 100%; }

.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }

/* ----------------------------------------------------------------- rail */

.rail { position: sticky; top: 1.4rem; display: flex; flex-direction: column; gap: 1.6rem;
  max-height: calc(100vh - 2.8rem); overflow-y: auto; }

.infobox {
  border: 1px solid var(--line); border-top: 3px solid var(--blood);
  background: var(--panel);
}
.infobox-title {
  font-family: var(--display); font-weight: 600; font-size: 1.16rem; letter-spacing: .06em;
  margin: 0; padding: 1rem 1.1rem .85rem; line-height: 1.15;
}
.infobox-art {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #1a1712, #0f0d0a);
  display: grid; place-items: center; padding: 1.2rem;
}
.infobox-art img { max-width: 100%; image-rendering: pixelated; }
.infobox dl { margin: 0; padding: .4rem 0; }
.infobox-row {
  display: grid; grid-template-columns: 42% 1fr; gap: .6rem;
  padding: .42rem 1.1rem; border-bottom: 1px solid var(--line-soft);
}
.infobox-row:last-child { border-bottom: 0; }
.infobox dt {
  font-family: var(--cond); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); padding-top: .18rem;
}
.infobox dd { margin: 0; font-size: .93rem; }
.infobox dd span { display: block; }
.infobox dd span + span { margin-top: .22rem; }


.infobox-block {
  border-top: 1px solid var(--line); padding: .9rem 1.1rem 1.05rem;
}
.infobox-block span {
  display: block; font-family: var(--cond); font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: .45rem;
}
.infobox-block p { margin: 0; font-size: .93rem; line-height: 1.5; }
.infobox-block p + p { margin-top: .4rem; }
.infobox-dogma p {
  font-style: italic; border-left: 2px solid var(--blood); padding-left: .7rem;
}

.toc h2, .backlinks h2 {
  font-family: var(--cond); font-size: .85rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass); margin: 0 0 .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line);
}
.toc { border-left: 2px solid var(--line); padding-left: 1rem; }
.toc ol { list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.toc li { padding: .16rem 0; }
.toc .lvl3 { padding-left: 1rem; font-size: .9rem; }
.toc a { color: var(--text-dim); text-decoration: none; }
.toc a:hover { color: var(--text); }

.backlinks { margin-top: 3rem; max-width: var(--measure); }
.backlinks ul { list-style: none; margin: 0; padding: 0; }
.backlinks li { padding: .2rem 0; }
.backlinks .dim { font-family: var(--cond); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-left: .5rem; }

.stamp {
  margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line-soft);
  font-family: var(--cond); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint);
}
.stamp code { font-family: inherit; letter-spacing: .06em; color: var(--text-dim); }

/* -------------------------------------------------------------- results */

.results { list-style: none; margin: 0; padding: 0; }
.results li { border-bottom: 1px solid var(--line-soft); padding: 1.1rem 0; max-width: var(--measure); }
.result-title { font-family: var(--display); font-weight: 600; font-size: 1.14rem; letter-spacing: .04em; text-decoration: none; }
.result-ex { margin: .35rem 0 0; color: var(--text-dim); font-size: .96rem; }

/* --------------------------------------------------------------- footer */

.footsite { border-top: 1px solid var(--line); background: rgba(0,0,0,.35); margin-top: 4rem; }
.footsite-inner {
  padding: 2rem 0 2.6rem;
  font-family: var(--cond); font-size: .9rem; letter-spacing: .06em; color: var(--text-faint);
}
.footsite p { margin: .3rem 0; }
.footsite code { font-family: inherit; color: var(--text-dim); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 940px) {
  .entry-grid, .entry-grid.no-box { grid-template-columns: 1fr; }
  .rail { position: static; flex-direction: column-reverse; max-height: none; overflow: visible; }
  .infobox { max-width: 420px; }
}

@media (max-width: 640px) {
  body { font-size: 18px; }
  .masthead-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .search input { width: 100%; }
  .search { width: 100%; }
  .hero { padding: 2rem 1.3rem; }
  .infobox-row { grid-template-columns: 1fr; gap: 0; }
}

@media print {
  .masthead, .footsite, .rail, .toc, .breadcrumb { display: none; }
  body { background: #fff; color: #000; }
}

/* ------------------------------------------------------- illumination */

/* Blackletter initial on the opening paragraph of an entry, the way a
   scriptorium would have started a chapter. Kept to one letter so the page
   stays readable at speed. */
.prose > p:first-of-type::first-letter {
  font-family: var(--initial);
  font-size: 3.1em;
  line-height: .82;
  float: left;
  margin: .08em .12em 0 0;
  color: var(--blood-lit);
  text-shadow: 0 0 18px rgba(191,68,41,.25);
}
.prose > p:first-of-type::first-letter { padding-right: .04em; }

/* Do not illuminate paragraphs inside furniture. */
.note p::first-letter,
.pullquote p::first-letter,
blockquote p::first-letter,
.spoiler p::first-letter,
li p::first-letter,
.intro p::first-letter {
  font-family: inherit; font-size: inherit; float: none; margin: 0;
  color: inherit; text-shadow: none; line-height: inherit;
}

/* Rubricated paragraph mark before major sections, as in a chapter book. */
.prose h2::before {
  content: '\00B6';
  font-family: var(--serif);
  color: var(--blood);
  font-size: .7em;
  margin-right: .55rem;
  vertical-align: .12em;
}

/* Hairline flourish closing an entry. */
.stamp::before {
  content: '\2766';
  display: block;
  text-align: center;
  color: var(--text-faint);
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
  letter-spacing: .4em;
}

/* Small caps opening line gives the first sentence a manuscript weight. */
.entry .prose > p:first-of-type {
  font-size: 1.06rem;
}
.entry .prose > p:first-of-type::first-line {
  font-variant-caps: small-caps;
  letter-spacing: .04em;
  color: #ece0c6;
}