/* Earthsea is parchment and ink by day, deep sea and rune-gold by night: a
   compendium page, not a screen. The slate blue the legacy site used for its
   background survives as --accent, the one colour actually carried over. */

:root {
  --bg: #f3ead2;
  --ink: #2c2416;
  --muted: #796945;
  --rule: #d9c8a0;
  --accent: #2b3f5c;
  --accent-ink: #f3ead2;
  --quote-bg: #e9dcb9;
  --mark-bg: #e0c674;
  --max: 44rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141a26;
    --ink: #e9e0c6;
    --muted: #9aa2b4;
    --rule: #2a3345;
    --accent: #c9a227;
    --accent-ink: #141a26;
    --quote-bg: #1b2334;
    --mark-bg: #4d3f0f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1rem/1.6 Georgia, "Iowan Old Style", "Times New Roman", serif;
  padding: 0 1rem 4rem;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--bg); padding: .5rem; z-index: 10; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}

header, main, footer { max-width: var(--max); margin: 0 auto; }

header { padding: 1.5rem 0 1.2rem; border-bottom: 1px solid var(--rule); position: relative; }
header h1 { font-size: 1.8rem; margin: 0; letter-spacing: .03em; font-variant: small-caps; }
header h1 a { color: inherit; text-decoration: none; }
.tagline { margin: .2rem 0 1rem; color: var(--muted); font-style: italic; }
/* A book's asterism: the printer's mark old texts used to divide a section,
   standing in here for the frameset banner the legacy site can't keep. */
header::after {
  content: "\2042";
  display: block; text-align: center; margin-top: 1.1rem;
  color: var(--accent); font-size: 1rem; letter-spacing: .5em; opacity: .8;
}

#q {
  width: 100%; padding: .6rem .7rem; font: inherit; font-style: italic;
  border: 1px solid var(--rule); border-radius: .3rem;
  background: var(--bg); color: var(--ink);
}
#q:focus { outline: 2px solid var(--accent); outline-offset: 1px; font-style: normal; }

header nav { margin-top: .8rem; display: flex; gap: 1rem; font-size: .95rem; }

#status {
  max-width: var(--max); margin: .8rem auto 0; padding: .5rem .7rem;
  background: var(--quote-bg); border-radius: .3rem; font-size: .9rem;
}

main { padding-top: 1.2rem; }
main:focus { outline: none; }

h2 { font-size: 1.4rem; margin: 0 0 .2rem; font-variant: small-caps; letter-spacing: .02em; }
.meta { color: var(--muted); font-size: .9rem; font-style: italic; margin: 0 0 1rem; }

.entry-list { columns: 2 12rem; column-gap: 2rem; list-style: none; padding: 0; }
.entry-list li { break-inside: avoid; }
.entry-list .redirect { color: var(--muted); font-style: italic; }

.letter { margin: 1.4rem 0 .3rem; font-size: 1rem; letter-spacing: .12em;
  font-variant: small-caps; color: var(--accent); border-bottom: 1px solid var(--rule); }

.filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.filters button {
  font: inherit; font-size: .85rem; font-variant: small-caps; padding: .25rem .7rem; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 1rem; background: transparent; color: var(--ink);
}
.filters button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.fields { margin: 0 0 1rem; }
.fields dt { font-weight: bold; font-size: .85rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-top: .6rem; }
.fields dd { margin: .1rem 0 0; }

.prose p { margin: 0 0 .9rem; }

blockquote {
  position: relative;
  margin: 1rem 0; padding: .8rem 1rem .8rem 2.2rem; background: var(--quote-bg);
  border-left: 3px solid var(--accent); border-radius: 0 .3rem .3rem 0;
}
blockquote::before {
  content: "\201C"; position: absolute; left: .5rem; top: .1rem;
  font-size: 2rem; font-family: Georgia, serif; color: var(--accent); opacity: .5;
}
blockquote p { margin: 0; font-style: italic; }
blockquote cite { display: block; margin-top: .5rem; font-size: .85rem;
  font-style: normal; color: var(--muted); }

.sources li, .links li { margin-bottom: .3rem; }

/* A dead link keeps its label and shows where it pointed, without pretending to
   still work. */
.dead-link { color: var(--muted); }
.dead-link .url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem; overflow-wrap: anywhere; }
.dead-link .tag { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }

/* Legacy page bodies are 2004 table layouts with fixed-width images. */
.legacy-page table { width: 100% !important; border-collapse: collapse; }
.legacy-page td { display: block; width: auto !important; }
.legacy-page center { text-align: left; }

/* Images off for now: the crawler's title-banner JPEGs and inline photos are
   unstyled against the new theme. Revisit once they're actually wanted back. */
.legacy-page img { display: none; }

/* The legacy body colour was set against the site's own slate-blue background
   (bgcolor="#717fb4"), so <font color="#FFFFFF"> text is invisible against the
   new parchment/night themes. `color` on <font> is a presentational hint, the
   lowest-priority layer in the cascade, so this plain rule already wins without
   needing !important. */
.legacy-page font[color] { color: inherit; }

mark { background: var(--mark-bg); color: var(--ink); border-radius: .15rem; padding: 0 .1rem; }

footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule);
  color: var(--muted); font-size: .85rem; font-style: italic; }

@media (max-width: 30rem) { .entry-list { columns: 1; } }