/* gewrit.net: an illuminated manuscript crossed with timber and parchment.
   Vellum and iron-gall ink by day, a timber hall by night (on request).

   Proportion: everything steps by the golden ratio, φ = 1.618.
   Type sizes and spacing are powers of φ from a 1rem base, lines are
   φ ems apart, and the reading measure is 21φ rem. Flat colour only. */

:root {
  --phi: 1.618;

  /* spacing: φ⁻², φ⁻¹, 1, φ, φ², φ³ */
  --s-2: 0.382rem;
  --s-1: 0.618rem;
  --s0: 1rem;
  --s1: 1.618rem;
  --s2: 2.618rem;
  --s3: 4.236rem;

  /* type: φ^-½ … φ² */
  --t-1: 0.786rem;
  --t0: 1rem;
  --t1: 1.272rem;
  --t2: 1.618rem;
  --t3: 2.618rem;

  --measure: 38.83rem;       /* 24 × φ */
  --wide: 58.25rem;          /* 36 × φ: the original beside its translation */

  --vellum: #f6efdf;
  --ink: #2a221d;
  --ink-soft: #5e5145;
  --rule: #d6c8a8;
  --rubric: #b3391f;
  --lapis: #1f4fa3;
  --gold: #a87a08;
  --timber: #7a4a26;
  --leaf: #2f7a34;
  --moss: #748a1f;
  --rose: #c2305f;
  --amber: #d4760d;
  --berry: #4b1f5c;
  --violet: #7a3aa6;
  --teal: #16807a;
  --sky: #2f8fcc;
  --woad: #3d5d72;
  --brass: #9c7a2e;
  --page: #8e8069;

  --serif: 'Alegreya', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --caps: 'Alegreya SC', 'Alegreya', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --art: 12.36px;            /* 20px ÷ φ */
  color-scheme: light;
}

:root { --card: #f0e6cf; --card-rule: #cdbd97; }

/* hearth: a timber hall by firelight */
:root[data-theme="hearth"] {
  --vellum: #1c1a16;
  --card: #25221c;
  --card-rule: #4a4236;
  --ink: #ecdfc0;
  --ink-soft: #bcae8f;
  --rule: #413a2f;
  --rubric: #ef8a6b;
  --lapis: #8fb4ec;
  --gold: #e8c45f;
  --timber: #cf9563;
  --leaf: #8fcf7e;
  --moss: #c3d36b;
  --rose: #f28bb0;
  --amber: #f3a54a;
  --berry: #c6a3dd;
  --violet: #cf9df0;
  --teal: #6fd0c4;
  --sky: #86c9f2;
  --woad: #8daeb9;
  --brass: #d2ad62;
  --page: #938772;
  color-scheme: dark;
}

/* night: woad and indigo, lit by the moon */
:root[data-theme="night"] {
  --vellum: #11172a;
  --card: #172040;
  --card-rule: #2f3b66;
  --ink: #e8e3d3;
  --ink-soft: #a9b1c9;
  --rule: #2b3559;
  --rubric: #ff8f78;
  --lapis: #a4c2ff;
  --gold: #f2d27a;
  --timber: #d6ab82;
  --leaf: #8ddc9d;
  --moss: #cfe38a;
  --rose: #ff9cc2;
  --amber: #ffba66;
  --berry: #d6b8f5;
  --violet: #e0b0ff;
  --teal: #86eadd;
  --sky: #a8dcff;
  --woad: #9fbcd0;
  --brass: #ecc987;
  --page: #8e96b0;
  color-scheme: dark;
}

/* ---------- the realms: each section takes the colour of its place on the tree ---------- */

/* Valhalla, in the crown: gold and crimson, shields and mead */
body.realm-valhalla { --vellum: #f8eed6; --card: #f2e2bd; --card-rule: #d2ad63; --rubric: #9c1d1a; --realm: #a87a08; --rule: #dcc58f; }
:root[data-theme="hearth"] body.realm-valhalla { --vellum: #201a12; --card: #2b2216; --card-rule: #6b5325; --rubric: #f2b45c; --realm: #e8c45f; --rule: #4d3f28; }
:root[data-theme="night"] body.realm-valhalla { --vellum: #17142e; --card: #221c42; --card-rule: #5c4a86; --rubric: #f5cd6b; --realm: #ff9f8a; --rule: #3a3160; }

/* Wyrd's Well, in the roots: water, stone and white clay */
body.realm-well { --vellum: #eff0e7; --card: #e2e9e3; --card-rule: #9fbfb9; --rubric: #17606f; --realm: #1f7f86; --rule: #c3d1c9; }
:root[data-theme="hearth"] body.realm-well { --vellum: #141b1c; --card: #1b2527; --card-rule: #37575a; --rubric: #7fd8cb; --realm: #9fd8ff; --rule: #2c3d3f; }
:root[data-theme="night"] body.realm-well { --vellum: #0d1a27; --card: #122636; --card-rule: #2c5670; --rubric: #8fe6da; --realm: #a8dcff; --rule: #223d52; }

/* Midgard, on the trunk: earth and leaf, inside the serpent */
body.realm-midgard { --vellum: #f3f0da; --card: #e9e6ca; --card-rule: #b4bd8a; --rubric: #2f6a2c; --realm: #6b7f1c; --rule: #d3d0ad; }
:root[data-theme="hearth"] body.realm-midgard { --vellum: #171b14; --card: #1f251b; --card-rule: #45553a; --rubric: #9fd88a; --realm: #c3d36b; --rule: #313b29; }
:root[data-theme="night"] body.realm-midgard { --vellum: #0f1a1f; --card: #15262a; --card-rule: #2f5048; --rubric: #9ce6a8; --realm: #d6e690; --rule: #22393a; }


* { box-sizing: border-box; }

html {
  background: var(--vellum);
  color: var(--ink);
  font-family: var(--serif), 'Noto Sans Runic', serif;
  font-size: clamp(17px, 0.95rem + 0.3vw, 20px);
  line-height: var(--phi);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  /* no rubber-banding past either end of the page */
  overscroll-behavior: none;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--vellum);
  overscroll-behavior: none;
}

/* The page: the text block in the middle, the margins either side filled
   with each section's border plant and the creatures living in it. The
   margins take 1 part each to the text's φ² (a golden page). */
.page { flex: 1; width: 100%; display: flex; justify-content: center; }
main {
  flex: 0 1 calc(var(--measure) + 2 * var(--s1));
  min-width: 0;
  padding: var(--s0) var(--s1) var(--s3);
}
.margin { display: none; position: relative; flex: 0 1 14.83rem; min-width: 0; }
.margin .fill {
  position: absolute;
  inset: var(--s1) 0 var(--s2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.margin .art { margin: 0; font-size: 11.5px; flex-shrink: 0; overflow: visible; }
.margin .m-creature { margin: var(--s-1) 0; }
.margin .m-plant { opacity: 0.9; }
@media (min-width: 66rem) { .framed .margin { display: block; } }

a { color: var(--lapis); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--rubric); }
:focus-visible { outline: 2px solid var(--rubric); outline-offset: 3px; border-radius: 2px; }

h1, h2 {
  font-family: var(--caps);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.272;
  color: var(--rubric);
  text-align: center;
}
h1 { font-size: var(--t3); margin: var(--s-1) 0 var(--s1); }
h2 { font-size: var(--t1); margin: var(--s2) 0 var(--s0); }

::selection { background: var(--lapis); color: var(--vellum); }

/* ---------- drawings ---------- */

.art {
  font-family: var(--mono);
  font-size: var(--art);
  line-height: 1.236;          /* 2 ÷ φ */
  margin: 0 auto;
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  color: var(--ink-soft);
  font-variant-ligatures: none;
  user-select: none;
}
.c-s { color: var(--timber); }
.c-l { color: var(--leaf); }
.c-m { color: var(--moss); }
.c-f { color: var(--rubric); }
.c-r { color: var(--rose); }
.c-a { color: var(--amber); }
.c-y, .c-g { color: var(--gold); }
.c-b { color: var(--berry); }
.c-v { color: var(--violet); }
.c-w { color: var(--lapis); }
.c-t { color: var(--teal); }
.c-k { color: var(--sky); }
.c-p { color: var(--page); }
.c-i { color: var(--ink); }
.c-o { color: var(--brass); }

/* ---------- header and footer ---------- */

header.site, footer.site { text-align: center; padding: var(--s1) var(--s1) 0; }
header.site .wordmark {
  display: inline-block;
  font-family: var(--caps);
  font-size: var(--t1);
  letter-spacing: 0.08em;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: var(--s-2);
}
header.site nav {
  font-family: var(--caps);
  letter-spacing: 0.05em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
}
header.site nav a { color: var(--ink-soft); text-decoration: none; }
header.site nav a:hover, header.site nav a[aria-current] { color: var(--rubric); }
.dot { color: var(--gold); margin: 0 var(--s-1); }
.art.rule { font-size: 11px; margin-top: var(--s-1); }
footer.site { padding-bottom: var(--s2); }
.themes { margin-top: var(--s-1); font-family: var(--caps); letter-spacing: 0.06em; font-size: var(--t-1); }
.themes[hidden] { display: none; }
.themes button {
  font: inherit;
  color: var(--ink-soft);
  background: none;
  border: 0;
  padding: var(--s-2) var(--s-2);
  cursor: pointer;
}
.themes button:hover { color: var(--rubric); }
.themes button[aria-pressed="true"] { color: var(--rubric); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 0.3em; }

/* ---------- home: the tree ---------- */

.sitename { font-size: var(--t3); margin: var(--s0) 0 var(--s-1); color: var(--ink); letter-spacing: 0.1em; }

.epigraph {
  margin: 0 auto var(--s2);
  width: max-content;
  max-width: 100%;
  font-style: italic;
  color: var(--ink-soft);
}
.epigraph .verse { margin: 0; }

.tree {
  /* one character cell of the drawing: labels are placed by cell */
  --tree-fs: min(16.18px, calc((100vw - 2rem) / 39.5));
  --cell-w: calc(var(--tree-fs) * 0.6);
  --cell-h: calc(var(--tree-fs) * 1.236);
  position: relative;
  width: calc(65 * var(--cell-w));
  margin: 0 auto;
}
.tree > .art { font-size: var(--tree-fs); line-height: 1.236; margin: 0; max-width: none; }

.realm {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
}
.realm .name { font-family: var(--caps); letter-spacing: 0.05em; }
.realm.open .name { font-size: calc(var(--tree-fs) * 1.618); color: var(--rubric); }
.realm.open .sub { font-size: calc(var(--tree-fs) * 1.1); font-style: italic; color: var(--lapis); }
.realm.open:hover .name, .realm.open:focus-visible .name { color: var(--lapis); }
.realm.open:hover .sub { text-decoration: underline; }
.realm.closed { cursor: default; }
.realm.closed .name { font-size: calc(var(--tree-fs) * 1.1); color: var(--page); opacity: 0.618; font-style: italic; }

.cosmos { display: flex; justify-content: center; align-items: flex-start; gap: var(--s1); }
.sky { display: none; flex: 0 0 auto; flex-direction: column; align-items: center; gap: var(--s0); padding-top: var(--s2); }
.sky .art { font-size: 13px; margin: 0; }
.sky .wolf { margin-top: calc(-1 * var(--s-1)); }
.sky .stars { font-size: 13px; margin-top: var(--s0); }
@keyframes twinkle { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: no-preference) {
  .stars .c-y { animation: twinkle 3.2s ease-in-out infinite; }
  .stars .c-k { animation: twinkle 5.2s ease-in-out infinite 1.3s; }
  .stars .c-y:nth-of-type(3n) { animation-delay: 1.6s; }
  .stars .c-y:nth-of-type(5n) { animation-duration: 4.2s; }
}
@media (min-width: 72rem) { .sky { display: flex; } }
main:has(.cosmos) { flex-basis: 100%; }

.closed-note { text-align: center; color: var(--ink-soft); font-style: italic; font-size: var(--t-1); margin: var(--s1) 0 0; }

/* ---------- section index pages ---------- */

.cards {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.09rem, 1fr));   /* 11.09 = φ⁵ */
  gap: var(--s1);
}
.cards li { margin: 0; }
.cards a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  padding: var(--s0) var(--s-1) var(--s-1);
  background: var(--card);
  border: 1px solid var(--card-rule);
  outline: 1px solid var(--card-rule);
  outline-offset: 3px;
  border-radius: 1px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.2s ease, outline-color 0.2s ease, transform 0.2s ease;
}
.cards a:hover, .cards a:focus-visible { border-color: var(--rubric); outline-color: var(--gold); transform: translateY(-2px); }
.card-art {
  container-type: inline-size;
  width: 100%;
  height: calc(11 * 1.236 * 10px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: var(--s-1);
}
.card-art .art { font-size: min(10.5px, calc(100cqw / (var(--cols) * 0.62))); margin: 0; }
.card-title { font-family: var(--caps); letter-spacing: 0.04em; font-size: var(--t1); color: var(--rubric); line-height: 1.272; }
.card-line { font-style: italic; color: var(--ink-soft); font-size: var(--t-1); line-height: 1.272; margin-top: var(--s-2); }

.section-head { text-align: center; margin: var(--s0) 0 var(--s1); }
.section-head .art { font-size: 14px; }
.section-head h1 { margin-bottom: var(--s-2); }
.section-head .sub { margin: 0; color: var(--ink-soft); font-style: italic; }
.section-head .sub.part { font-style: normal; font-family: var(--caps); letter-spacing: 0.08em; }

.toc { list-style: none; padding: 0; margin: 0 auto; max-width: 21rem; counter-reset: toc; }
.toc li { padding: var(--s-1) 0; border-bottom: 1px solid var(--rule); counter-increment: toc; }
.toc li:last-child { border-bottom: 0; }
.toc li::before {
  content: counter(toc, lower-roman) '.';
  display: inline-block;
  min-width: var(--s2);
  color: var(--gold);
  font-size: var(--t-1);
}
.toc a { font-size: var(--t1); text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.toc .first { display: block; padding-left: var(--s2); color: var(--ink-soft); font-style: italic; font-size: var(--t-1); line-height: 1.272; }
.toc.chapters li::before { content: counter(toc, decimal-leading-zero); }

.invocation { font-style: italic; margin-top: 0; }

/* ---------- pieces ---------- */

.piece-head { text-align: center; margin: var(--s0) 0 var(--s1); }
.piece-head .headpiece { margin-bottom: var(--s0); font-size: 14px; }
.piece-head h1 { margin: 0; }
.piece-head .source { margin: var(--s-2) 0 0; color: var(--ink-soft); font-style: italic; }
.piece-head .kicker { font-family: var(--caps); letter-spacing: 0.1em; margin: 0 0 var(--s-2); font-size: var(--t-1); }
.piece-head .kicker a { color: var(--ink-soft); text-decoration: none; }
.piece-head .kicker a:hover { color: var(--rubric); }
.realm-name { color: var(--realm, var(--gold)); font-family: var(--caps); letter-spacing: 0.12em; }
.section-head .realm-name { margin: var(--s0) 0 0; font-size: var(--t1); }
.section-head .realm-where { margin: 0; font-style: italic; color: var(--ink-soft); font-size: var(--t-1); }
.section-head h1 { margin-top: var(--s-1); }
.section-head .emblem { font-size: 14px; }
:focus-visible { outline: 2px solid var(--rubric); outline-offset: 3px; border-radius: 2px; }

/* verse */
.verse { width: max-content; max-width: 100%; margin: 0 auto; }
.stanza { margin: 0 0 1.618em; }
.stanza:last-child { margin-bottom: 0; }
.line { display: block; padding-left: 1.618em; text-indent: -1.618em; }
.poem .verse .stanza:first-child .line:first-child::first-letter { color: var(--rubric); font-size: 1.618em; line-height: 0; font-family: var(--caps); }

/* the original, glossed */
.oe { display: block; font-style: italic; }
.gl { display: block; font-size: var(--t-1); color: var(--ink-soft); line-height: 1.272; }
.interlinear { width: max-content; max-width: 100%; margin: 0 auto; }
.interlinear .line { padding: 0; text-indent: 0; margin-bottom: var(--s-1); }
.edition { font-size: var(--t-1); color: var(--ink-soft); text-align: center; margin-top: var(--s1); }

.wide { display: none; }
.parallel {
  display: grid;
  grid-template-columns: 1.272fr 1fr;   /* √φ : 1, so the gloss has room and the translation rarely wraps */
  column-gap: var(--s2);
  row-gap: 0;
  align-items: baseline;
}
.parallel .colhead {
  font-family: var(--caps);
  letter-spacing: 0.06em;
  color: var(--gold);
  font-size: var(--t-1);
  margin: 0 0 var(--s-2);
  border-bottom: 1px solid var(--rule);
}
.parallel .gap { height: var(--s-1); }
.parallel .prow {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: baseline;
  padding: var(--s-2) var(--s-1);
  margin: 0 calc(-1 * var(--s-1));
  border-radius: 2px;
  transition: background-color 0.15s ease;
}
.parallel .prow:hover { background: var(--card); }
.parallel .tr { padding-left: 1.618em; text-indent: -1.618em; }

@media (min-width: 60rem) {
  main:has(.with-original) { flex-basis: calc(var(--wide) + 2 * var(--s1)); }
  .with-original .narrow { display: none; }
  .with-original .wide { display: block; }
}

.note {
  max-width: var(--measure);
  margin: var(--s2) auto 0;
  padding: var(--s-1) var(--s1);
  border-left: 2px solid var(--rubric);
  color: var(--ink-soft);
  font-size: var(--t-1);
  line-height: 1.618;
}
.note p { margin: 0; }

/* prose */
.prose { max-width: var(--measure); margin: 0 auto; position: relative; }
.prose .text p { margin: 0 0 var(--s0); hyphens: auto; -webkit-hyphens: auto; }
.chapter .text > p:first-of-type::first-letter {
  /* an illuminated initial: a letter on lapis, ruled in gold */
  float: left;
  font-family: var(--caps);
  font-size: 2.618em;          /* φ² */
  line-height: 1;
  padding: 0.12em 0.2em 0.1em;
  margin: 0.16em 0.3em 0 0;
  color: var(--vellum);
  background: var(--lapis);
  border: 2px solid var(--gold);
  border-radius: 2px;
}

.art.break { margin: var(--s1) auto; }
.art.end { margin: var(--s2) auto var(--s1); }

/* ---------- pager ---------- */

.pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s0);
  align-items: baseline;
  border-top: 1px solid var(--rule);
  padding-top: var(--s0);
  margin-top: var(--s0);
  font-family: var(--caps);
  letter-spacing: 0.04em;
  font-size: var(--t-1);
}
.pager > :first-child { text-align: left; }
.pager > :last-child { text-align: right; }
.pager a { text-decoration: none; }
.pager a:hover { text-decoration: underline; }

.notfound { text-align: center; margin-top: var(--s1); }

/* ---------- the drawn scrollbar ---------- */

html.ascii-scroll { scrollbar-width: none; }
html.ascii-scroll body { padding-right: calc(5 * 0.6 * var(--art) + 8px); }  /* the bar never covers the page */
html.ascii-scroll::-webkit-scrollbar { display: none; }
.scrollbar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(5 * 0.6 * var(--art) + 8px);
  z-index: 10;
  user-select: none;
}
.scrollbar[hidden] { display: none; }
.scrollbar .art { margin: 0; font-size: var(--art); line-height: 1.236; overflow: visible; }
.scrollbar .track { position: absolute; top: 0; bottom: 0; right: calc(0.6 * var(--art) + 4px); opacity: 0.618; cursor: pointer; overflow: hidden; }
.scrollbar .thumb { position: absolute; top: 0; right: 4px; cursor: grab; background: var(--vellum); will-change: transform; }
.scrollbar.dragging .thumb { cursor: grabbing; }
.scrollbar .thumb:hover .c-b, .scrollbar.dragging .thumb .c-b { color: var(--rubric); }

/* ---------- small screens ---------- */

@media (max-width: 34rem) {
  h1 { font-size: var(--t2); }
  .sitename { font-size: var(--t2); }
  header.site nav { font-size: var(--t-1); }
  .dot { margin: 0 var(--s-2); }
  .pager { grid-template-columns: 1fr 1fr; }
  .pager > :nth-child(2) { display: none; }
}

@media print {
  header.site, footer.site, .pager, .art, .illumination, .scrollbar { display: none; }
}