/* Chrestomathia.  The page is a lane through a nineteenth-century English landscape: a painted sky and hills
   along the top (the one decorative thing), and the text set on a mounted sheet of paper below it.
   Colours come from the pastoral oil paintings the design is drawn on: golden-hour straw and ochre, olive
   and moss, umber trees, the madder-brown of a Devon cow, the grey-blue of a cloud. */
/* Fette classic UNZ Fraktur, by Peter Wiegel (catfonts.de): SIL Open Font License 1.1, served unmodified; the
   licence is in fette_unz_fraktur/.  The long s is at its standard code point (U+017F), which is what the
   German pages use. */
@font-face {
  font-family: "Fette classic UNZ Fraktur";
  src: url("fette_unz_fraktur/FetteClassicUNZFraktur.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* afternoon */
  --hay: #d8d3b0;            /* the wall the mount hangs on: dried meadow grass */
  --paper: #efe8cc;          /* the mounted sheet */
  --frame: #8b7a4e;          /* gilt gone brown */
  --ink: #2c2415;            /* umber, not black */
  --ink-soft: #66573a;
  --rule: #c2b383;
  --link: #4b5c24;           /* moss */
  --link-hover: #8a3d22;     /* Devon red */
  --sky-top: #b4bfc8;        /* cloud grey-blue */
  --sky-mid: #d9d2b2;
  --sky-low: #ecc979;        /* straw gold at the horizon */
  --glow: #fff0b8;
  --hill-far: #9a9a94;
  --hill-mid: #7f8559;
  --meadow: #5f7234;
  --water: #c3cbc0;
  --lane: #bfa273;
  --tree: #2e3317;
  --tree-lit: #5d6a2c;
  --trunk: #2a2314;
  --cow: #8a3a22;
  --sheep: #f1ead6;

  --modern: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --period: "Old Standard TT", "EB Garamond", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --fraktur: "Fette classic UNZ Fraktur", "Old Standard TT", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --measure: 38rem;
}
html { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  /* evening: the same landscape after the sun has gone down behind the hill */
  --hay: #15120c;
  --paper: #231e15;
  --frame: #6f5f38;
  --ink: #eadfc0;
  --ink-soft: #b3a584;
  --rule: #4a3f2a;
  --link: #e0bb62;
  --link-hover: #f0a77e;
  --sky-top: #2f3a4a;
  --sky-mid: #6e5543;
  --sky-low: #dca25c;
  --glow: #f5c97a;
  --hill-far: #5d5a66;
  --hill-mid: #4a5133;
  --meadow: #364622;
  --water: #6a6a62;
  --lane: #6b5430;
  --tree: #14170a;
  --tree-lit: #2d3315;
  --trunk: #0f0d07;
  --cow: #5b2a1a;
  --sheep: #cdbf9b;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink);
  background-color: var(--hay);
  /* a little tooth, like canvas or laid paper */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .12 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  font-family: var(--period); font-size: 1.2rem; line-height: 1.68; font-kerning: normal;
  min-height: 100vh; display: flex; flex-direction: column;
}
html[data-face="fraktur"] body { font-family: var(--fraktur); font-size: 1.25rem; line-height: 1.65; font-synthesis: none; }
html[data-face="fraktur"]:not([data-orth="modern"]) em, html[data-face="fraktur"]:not([data-orth="modern"]) strong {
  font-style: normal; font-weight: 400; letter-spacing: 0.07em; }
/* The post-war version of a page: the plain serif, whatever the language. */
html[data-orth="modern"] body { font-family: var(--modern); font-size: 1.2rem; line-height: 1.68; }
.ant, .grc { font-family: var(--period); }
html[data-orth="modern"] .ant, html[data-orth="modern"] .grc { font-family: inherit; }

a { color: var(--link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--link-hover); outline-offset: 3px; }
.wrap { width: min(100%, calc(var(--measure) + 2 * var(--gutter))); margin-inline: auto; padding-inline: var(--gutter); }

/* ---- the sky: header, language links and the painted band ---------------------------------------- */
.sky {
  position: relative; overflow: hidden;
  min-height: clamp(14rem, 31vw, 19rem);
  background:
    radial-gradient(ellipse 18rem 3.2rem at 14% 38%, rgba(255, 255, 255, .5), transparent 72%),
    radial-gradient(ellipse 22rem 3.6rem at 40% 24%, rgba(255, 255, 255, .42), transparent 72%),
    radial-gradient(ellipse 16rem 3rem at 78% 34%, rgba(255, 255, 255, .46), transparent 72%),
    radial-gradient(ellipse 55% 60% at 68% 74%, var(--glow), transparent 72%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 52%, var(--sky-low) 82%);
}
html[data-theme="dark"] .sky {
  background:
    radial-gradient(ellipse 18rem 3rem at 16% 36%, rgba(220, 170, 120, .14), transparent 72%),
    radial-gradient(ellipse 22rem 3.4rem at 46% 26%, rgba(220, 170, 120, .12), transparent 72%),
    radial-gradient(ellipse 55% 60% at 68% 74%, var(--glow), transparent 70%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 50%, var(--sky-low) 82%);
}
.land { position: absolute; inset-inline: 0; bottom: 0; width: 100%; height: clamp(8rem, 17vw, 12rem); display: block; }
/* the meadow runs out into the page rather than ending on a ruled line */
.sky::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3.4rem; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--hay)); }
.s-far { fill: var(--hill-far); } .s-mid { fill: var(--hill-mid); } .s-meadow { fill: var(--meadow); }
.s-water { fill: var(--water); } .s-lane { fill: var(--lane); } .s-tree { fill: var(--tree); }
.s-lit { fill: var(--tree-lit); } .s-trunk { fill: var(--trunk); } .s-cow { fill: var(--cow); } .s-sheep { fill: var(--sheep); }

.bar {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; align-items: center;
  padding-block: 1.1rem; font-family: var(--sans); font-size: 0.85rem;
}
.wordmark { color: var(--ink); text-decoration: none; font-family: var(--period); font-size: 1.5rem; letter-spacing: 0.02em; }
html[data-orth="modern"] .wordmark { font-family: var(--modern); }
.wordmark:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.25em; }
/* The language links are always at the far right of the first row and never move; the orthography button,
   where a page has one, stands to their left (on a narrow screen, on a row of its own beneath them). */
.tools { display: contents; }
.wordmark { order: 1; margin-inline-end: auto; }
.orth-toggle { order: 2; }
.langs { order: 3; flex: none; }
@media (max-width: 640px) {
  .langs { order: 2; }
  .orth-toggle { order: 3; margin-inline-start: auto; }
}
.langs { display: flex; gap: 0.2rem; }
.langs a { color: var(--ink); text-decoration: none; padding: 0.15rem 0.45rem; }
.langs a[aria-current] { text-decoration: underline; text-underline-offset: 0.3em; font-weight: 700; }
.langs a:hover { text-decoration: underline; color: var(--ink); }
.orth-toggle {
  font: inherit; color: var(--ink); background: color-mix(in srgb, var(--paper) 70%, transparent);
  border: 1px solid var(--frame); border-radius: 0.3rem; padding: 0.25rem 0.7rem; cursor: pointer;
}
.orth-toggle:hover { border-color: var(--link-hover); color: var(--link-hover); }
.orth-toggle[hidden] { display: none; }

/* Both versions are in the page; only one is shown.  Without script, the period version is shown. */
html[data-orth="modern"] .orth-period { display: none; }
html:not([data-orth="modern"]) .orth-modern { display: none; }

/* ---- the mounted sheet ---------------------------------------------------------------------------- */
.content {
  position: relative; z-index: 2;
  margin-block: -2.6rem 3.5rem;
  padding-block: 2.6rem 3rem;
  background: var(--paper);
  border: 1px solid var(--frame);
  box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px var(--frame), 0 22px 28px -20px rgba(44, 30, 8, .55);
}
@media (max-width: 38rem) {
  .content { box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--frame); margin-inline: 0.55rem; width: auto; }
}
h1 { font-size: clamp(2.3rem, 7vw, 3.5rem); line-height: 1.08; font-weight: 400; margin: 0 0 0.7rem; letter-spacing: -0.005em; }
.lead { font-size: 1.4rem; line-height: 1.4; color: var(--ink-soft); font-style: italic; margin: 0 0 1.8rem; padding-block-end: 1.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='16' viewBox='0 0 120 16'%3E%3Cg fill='none' stroke='%238b7a4e' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M2 8 H46 M74 8 H118'/%3E%3Cpath d='M60 12 C60 7 60 5 60 3'/%3E%3C/g%3E%3Cg fill='%238b7a4e'%3E%3Cpath d='M60 8 C54 8 51 5 50 2 C55 2 59 4 60 8Z'/%3E%3Cpath d='M60 8 C66 8 69 5 70 2 C65 2 61 4 60 8Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat left bottom / 7.5rem 1rem;
}
html[data-face="fraktur"] .lead, html[data-orth="modern"] .lead { font-style: normal; }
h2 { font-size: 1.45rem; font-weight: 400; font-style: italic; color: var(--link); margin: 2.4rem 0 0.35rem; }
html[data-face="fraktur"] h2 { font-style: normal; font-size: 1.5rem; }
p, ul { margin: 0 0 1rem; }
ul { padding-inline-start: 1.3rem; }
li { margin-block: 0.4rem; }
li::marker { color: var(--frame); }
em { font-style: italic; }

.theme-toggle {
  font: inherit; color: var(--ink-soft); background: transparent; border: 1px solid var(--rule); border-radius: 0.3rem;
  padding: 0.3rem 0.8rem; margin-top: 0.9rem; cursor: pointer;
}
.theme-toggle:hover { color: var(--link-hover); border-color: var(--link-hover); }
.theme-toggle[hidden] { display: none; }
.foot { padding-block: 0 2.4rem; font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft); text-align: center; }
.foot p { margin: 0; }
@media (max-width: 560px) { body { font-size: 1.1rem; } html[data-face="fraktur"] body { font-size: 1.2rem; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* ---- the painting behind the pages ------------------------------------------------------------------
   A painting of a river valley at dawn (background.jpg), fixed behind the page.  The menu is a bar of frosted
   paper as wide as the sheet below it.  In the dark version the picture is dimmed.  The painted band of
   the earlier design is still in the build (BACKGROUND in source/build.py). */
html[data-bg="painting"] body { background-image: none; }
html[data-bg="painting"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(255, 250, 235, 0.12), rgba(255, 250, 235, 0) 14rem), url("background.jpg") center / cover no-repeat var(--hay);
}
html[data-bg="painting"][data-theme="dark"] body::before {
  background: linear-gradient(rgba(8, 10, 8, 0.64), rgba(8, 10, 8, 0.64)), url("background.jpg") center / cover no-repeat var(--hay);
}
html[data-bg="painting"] .sky { min-height: 0; background: none; overflow: visible; }
html[data-bg="painting"] .sky::after { display: none; }
html[data-bg="painting"] .bar {
  margin: 1.1rem auto 0; padding: 0.6rem 1.2rem;
  background: color-mix(in srgb, var(--paper) 80%, transparent); border: 1px solid var(--frame); border-radius: 0.5rem;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
html[data-bg="painting"] .content { margin-block: 1.1rem 3.5rem; padding-block: 3rem; }
html[data-bg="painting"] .foot { color: var(--ink); }
html[data-bg="painting"] .foot p { display: inline-block; padding: 0.25rem 0.9rem; border-radius: 0.4rem; background: color-mix(in srgb, var(--paper) 72%, transparent); }
@media (max-width: 38rem) {
  html[data-bg="painting"] .bar { width: auto; margin-inline: 0.55rem; }
}