/* ============================================================
   INDITHAR — the written edition.

   The rooms, with the lamp off. These pages exist so the world can be found:
   by a search engine, by a machine that summarises the web, by someone on a
   train with JavaScript switched off. Same words, no weather.

   Deliberately not main.css — that stylesheet is 69 KB of a building, and
   none of it applies to a page that is only a page.
   ============================================================ */

:root {
  --ink:      #140f0a;
  --void:     #0b0a0f;
  --bone:     #ddd4c2;
  --bone-dim: #b3a893;
  --faded:    #756d5e;
  --candle:   #d8b36a;
  --candle-deep: #b8823f;
  --hairline: #3a332a;

  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --fell:  'IM Fell English SC', Georgia, serif;
  --fell-text: 'IM Fell English', Georgia, serif;

  --measure: 34rem;
  --wide: 62rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scrollbar-color: var(--hairline) var(--void);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--void);
  background-image:
    radial-gradient(120% 80% at 50% 0%, #1a140d 0%, transparent 60%),
    radial-gradient(90% 60% at 50% 100%, #14100b 0%, transparent 70%);
  background-attachment: fixed;
  color: var(--bone);
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  padding: 0 1.25rem 5rem;
}

::selection { background: var(--candle-deep); color: var(--void); }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--candle); text-decoration-color: rgb(216 179 106 / 0.35); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }

/* A name in the prose that has a page of its own. It should read as part of the
   sentence and only admit to being a link when you go looking — a paragraph
   with four gold words in it is a paragraph nobody finishes. */
.xref {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(216 179 106 / 0.28);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.xref:hover { color: var(--candle); text-decoration-color: var(--candle-deep); }

:focus-visible { outline: 2px solid var(--candle); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--candle);
  padding: 0.75rem 1.25rem; border: 1px solid var(--hairline);
}
.skip:focus { left: 1rem; top: 1rem; z-index: 10; }

/* ---------- masthead & section nav ---------- */

.masthead {
  max-width: var(--wide); margin: 0 auto;
  padding: 2rem 0 1.25rem;
  border-bottom: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 2rem;
}

.wordmark {
  font-family: var(--fell);
  font-size: 1.5rem; letter-spacing: 0.3em;
  color: var(--bone); text-decoration: none;
}
.wordmark:hover { color: var(--candle); }

.sections {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem;
  font-family: var(--fell-text);
  font-size: 0.9375rem;
}
.sections a { color: var(--bone-dim); text-decoration: none; }
.sections a:hover { color: var(--candle); }
.sections a[aria-current="page"] { color: var(--candle); }

/* ---------- breadcrumb ---------- */

.crumbs {
  max-width: var(--wide); margin: 0 auto;
  padding: 1rem 0 0;
  font-family: var(--fell-text);
  font-size: 0.875rem; color: var(--faded);
}
.crumbs a { color: var(--faded); text-decoration: none; }
.crumbs a:hover { color: var(--candle); }
.crumb-sep { padding: 0 0.6em; }

/* ---------- the page itself ---------- */

main { max-width: var(--wide); margin: 0 auto; }

.placard { padding: 2.5rem 0 1rem; }

h1 {
  font-family: var(--fell);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--bone);
  max-width: 20ch;
  margin-bottom: 1.5rem;
}

h2 {
  font-family: var(--fell);
  font-weight: 400;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  line-height: 1.25;
  color: var(--bone);
  margin: 3rem 0 1rem;
}

h2.label { margin-bottom: 0.75rem; }

.label {
  font-family: var(--fell-text);
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--candle-deep);
  margin-bottom: 0.75rem;
}

.standfirst {
  font-size: 1.1875rem;
  color: var(--bone);
  max-width: var(--measure);
  margin-bottom: 2rem;
}

.placard p { max-width: var(--measure); margin-bottom: 1.15rem; }
.placard em { font-style: italic; color: var(--bone-dim); }

.motto {
  font-family: var(--fell-text);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--candle);
  margin-bottom: 2rem !important;
}

.seal, .torn {
  max-width: var(--measure);
  border-left: 2px solid var(--hairline);
  padding-left: 1.25rem;
  color: var(--faded);
  font-style: italic;
  margin-top: 2rem;
}

figure { margin: 0 0 2rem; }
figure img { border: 1px solid var(--hairline); }
figcaption {
  font-family: var(--fell-text);
  font-size: 0.8125rem;
  color: var(--faded);
  margin-top: 0.6rem;
  max-width: var(--measure);
}

hr.sep {
  border: 0;
  margin: 2.5rem 0;
  color: var(--hairline);
  text-align: center;
  max-width: var(--measure);
}
hr.sep::after { content: '◇'; color: var(--faded); }

.hairline { border: 0; border-top: 1px solid var(--hairline); margin: 2.5rem 0; }

/* ---------- long-form reading ---------- */

.text { padding-top: 2rem; }
.text h1 { margin-bottom: 2.5rem; }
.text p { font-size: 1.125rem; }
.text p + p { text-indent: 1.5em; }
.text .label + h1, .text .label { text-indent: 0; }

.aside {
  font-style: italic;
  color: var(--bone-dim);
  text-indent: 0 !important;
  margin: 1.75rem 0 !important;
}

/* ---------- timeline ---------- */

.timeline { list-style: none; }

.epoch {
  border-left: 1px solid var(--hairline);
  padding: 0 0 2.5rem 1.75rem;
  position: relative;
}
.epoch::before {
  content: ''; position: absolute; left: -4px; top: 0.7rem;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--candle-deep);
}
.epoch.torn::before { background: var(--faded); }
.epoch.torn { opacity: 0.75; }
.epoch h2 { margin: 0.15rem 0 0.35rem; font-size: 1.4rem; }
.epoch .year {
  font-family: var(--fell-text);
  font-size: 0.875rem; letter-spacing: 0.12em;
  color: var(--candle-deep);
  margin-bottom: 0 !important;
}
.epoch .label { margin-bottom: 0.85rem; }

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

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.5rem;
  margin: 2.5rem 0;
}

.card {
  display: flex; flex-direction: column; gap: 0.35rem;
  border: 1px solid var(--hairline);
  padding: 0.75rem;
  text-decoration: none;
  color: var(--bone);
  background: rgb(20 15 10 / 0.5);
  transition: border-color 200ms ease, background 200ms ease;
}
.card:hover { border-color: var(--candle-deep); background: rgb(28 21 13 / 0.7); }
.card img { margin-bottom: 0.5rem; aspect-ratio: 3 / 2; object-fit: cover; }

.c-kicker {
  font-family: var(--fell-text);
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--candle-deep);
}
.c-name { font-family: var(--fell); font-size: 1.1875rem; line-height: 1.2; }
.c-body { font-size: 0.9375rem; color: var(--bone-dim); line-height: 1.55; }

.cards-plain .card { padding: 1.25rem; }

/* ---------- lists: tomes, classes, fields ---------- */

.tomes { list-style: none; max-width: var(--measure); margin: 1.5rem 0; }
.tomes li { border-top: 1px solid var(--hairline); }
.tomes li:last-child { border-bottom: 1px solid var(--hairline); }
.tomes a, .tomes li > span:first-child { display: block; }
.tomes li > a, .tomes li:not(:has(a)) {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 1.1rem 0; text-decoration: none; color: var(--bone);
}
.tomes li > a:hover .t-name { color: var(--candle); }
.tomes .sealed { color: var(--faded); }
.tomes .sealed .t-name { color: var(--faded); }

.t-kind {
  font-family: var(--fell-text);
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--candle-deep);
}
.tomes .sealed .t-kind { color: var(--faded); }
.t-name { font-family: var(--fell); font-size: 1.25rem; line-height: 1.25; }
.t-desc { font-size: 0.9375rem; color: var(--bone-dim); }

.classes, .fields {
  max-width: var(--measure);
  border-top: 1px solid var(--hairline);
  margin: 1rem 0 2rem;
}
.classes dt, .fields dt {
  font-family: var(--fell);
  color: var(--candle);
  padding-top: 0.9rem;
}
.classes dd, .fields dd {
  color: var(--bone-dim);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--hairline);
}
.fields dt { text-transform: lowercase; letter-spacing: 0.1em; font-size: 0.9rem; }

/* Questions the library is asked. Each answer stands on its own, because the
   things that quote it — a search result card, a machine summarising the web —
   take one paragraph and no context. */
.asked { margin: 3.5rem 0 1rem; }
.asked dl { max-width: var(--measure); border-top: 1px solid var(--hairline); }
.asked dt {
  font-family: var(--fell);
  font-size: 1.1875rem;
  color: var(--bone);
  padding-top: 1.6rem;
  margin-bottom: 0.5rem;
}
.asked dd {
  color: var(--bone-dim);
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--hairline);
}
.asked dd strong { color: var(--bone); font-weight: 400; }

.shelf { margin-bottom: 3rem; }
.shelf > p { max-width: var(--measure); }
.veiled { margin-top: 3.5rem; }
.veiled > p { max-width: var(--measure); }

/* ---------- the door out, and the neighbours ---------- */

.door-out {
  max-width: var(--wide); margin: 3.5rem auto 0;
  border: 1px solid var(--hairline);
  padding: 2rem;
  text-align: center;
  background: rgb(20 15 10 / 0.5);
}
.door-out .label { margin-bottom: 1rem; }

.enter {
  display: inline-block;
  font-family: var(--fell);
  font-size: 1.125rem; letter-spacing: 0.12em;
  color: var(--candle);
  border: 1px solid var(--candle-deep);
  padding: 0.85rem 2rem;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease;
}
.enter:hover { background: var(--candle); color: var(--ink); }

.door-out .fineprint { margin-top: 1rem; }

.siblings { max-width: var(--wide); margin: 3.5rem auto 0; }
.siblings ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.25rem 2rem;
}
.siblings li { border-top: 1px solid var(--hairline); }
.siblings a {
  display: flex; flex-direction: column;
  padding: 0.85rem 0; text-decoration: none; color: var(--bone);
}
.siblings a:hover .s-name { color: var(--candle); }
.s-name { font-family: var(--fell); font-size: 1.0625rem; }
.s-note {
  font-family: var(--fell-text);
  font-size: 0.8125rem; color: var(--faded);
}

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

.foot {
  max-width: var(--wide); margin: 5rem auto 0;
  border-top: 1px solid var(--hairline);
  padding-top: 2rem;
}
.foot .sections { margin-bottom: 2rem; }

.authors-note, .fineprint {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--faded);
  max-width: var(--measure);
  margin-bottom: 0.85rem;
}
.authors-note { font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}