/* Generated by tools/build_fonts.py: do not edit. Self-hosted, OFL 1.1 (see /fonts/OFL-*.txt). */
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/Fraunces.cfc521a9.woff2") format("woff2-variations"), url("/assets/fonts/Fraunces.cfc521a9.woff2") format("woff2"); font-weight: 360 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); size-adjust: 106.55%; ascent-override: 91.79%; descent-override: 23.93%; line-gap-override: 0.00%; }
@font-face { font-family: "Source Serif 4"; src: url("/assets/fonts/SourceSerif4.967ec36c.woff2") format("woff2-variations"), url("/assets/fonts/SourceSerif4.967ec36c.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4 Fallback"; src: local("Georgia"); size-adjust: 102.14%; ascent-override: 101.43%; descent-override: 32.80%; line-gap-override: 0.00%; }

/* crucibulum.ch — production stylesheet. Source of truth for every value: ../DESIGN.md.
   Light is the default. "Nachtlampe" is an explicit switch: a checkbox in the colophon, applied with
   :has() -- zero JavaScript, so the strict CSP stays (not remembered across pages; operator 2026-10-13). */
:root {
  --paper: #FAF8F3; --ink: #1C1A17; --muted: #6B655C; --rule: #D9D3C7; --oxide: #B4471F; --frame: #1C1A17;
  --display: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --text: "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif;
  color-scheme: light;
}
:root:has(#nachtlampe:checked) { --paper: #16140F; --ink: #ECE6DA; --muted: #A39B8E; --rule: #3A352C; --oxide: #DE7A50; --frame: #6E665A; color-scheme: dark; }

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); }
body { margin: 0; font-family: var(--text); font-size: 1.1875rem; line-height: 1.5;
       font-variant-numeric: oldstyle-nums; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }

/* Links (review 6A): underline at rest, oxide on hover and focus; visited stays ink (declared exception). */
a, a:visited { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 0.2em; }
a:hover { color: var(--oxide); text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid var(--oxide); outline-offset: 3px; }
.sc { font-variant-caps: all-small-caps; letter-spacing: 0.06em; }

/* ---------- the leaf ---------- */
.leaf { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto;
        padding: clamp(1rem, 4vh, 3rem) clamp(1rem, 7vw, 7.5rem) clamp(1rem, 3vh, 2.5rem); }
.runhead { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: 1.125rem;
           padding-bottom: 0.6rem; border-bottom: 0.5px solid var(--rule); max-width: 78rem; width: 100%; margin: 0 auto; }
.spread { max-width: 78rem; width: 100%; margin: 0 auto; padding-top: clamp(1.5rem, 5vh, 4rem);
          display: grid; column-gap: clamp(3rem, 7vw, 7rem); align-items: start;
          grid-template-columns: minmax(0, 35rem) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr;
          grid-template-areas: "word plate" "gram plate" "entry plate" "close plate"; }
.spread.no-plate { grid-template-columns: minmax(0, 35rem); grid-template-areas: "word" "gram" "entry" "close"; }  /* launch without Fig. I */
.word { grid-area: word; margin: 0 0 0 -0.055em; font-family: var(--display); font-weight: 360;
        font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; font-size: clamp(2.75rem, 6.2vw, 4.5rem);
        line-height: 1; letter-spacing: -0.015em; }
.gram { grid-area: gram; margin: 0.9rem 0 1.6rem; color: var(--muted); font-size: 1.125rem; }
.gram i { font-style: normal; }   /* roman only: italic is not part of this system */
.entry { grid-area: entry; max-width: 35rem; hanging-punctuation: first; }
.entry p { margin: 0 0 0.9rem; }
.entry .num { font-variant-numeric: lining-nums; margin-right: 0.35em; }
.entry .ety { color: var(--muted); font-size: 1rem; margin-top: 1.3rem; }
.close { grid-area: close; margin: 2.2rem 0 0; font-family: var(--display); font-weight: 500;
         font-variation-settings: "opsz" 36, "SOFT" 0, "WONK" 0; font-size: 1.1875rem; }
.close::before { content: "\2014"; color: var(--muted); margin-right: 0.6em; }

/* The leaf fits the window: Fig. I is sized by the viewport HEIGHT as well as its column (4:5 art + frame),
   24rem being the running head, rhythm, caption and colophon. Below 16rem it stops shrinking and the page scrolls. */
.plate { grid-area: plate; margin: 0; padding-top: 0.6rem; justify-self: end;
         width: min(100%, max(16rem, calc((100svh - 24rem) * 0.8 + 2 * clamp(0.75rem, 2vw, 1.5rem)))); }
.plate .frame { border: 0.5px solid var(--frame); padding: clamp(0.75rem, 2vw, 1.5rem); background: var(--paper); }
.plate .art { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; mix-blend-mode: multiply; }
.plate figcaption { margin-top: 0.7rem; color: var(--muted); font-size: 1.125rem; }
.plate figcaption b { font-weight: 400; color: var(--oxide); }
/* Nachtlampe: the plate as a negative. invert(1) makes the paper black and the graphite light; screen lets the
   page colour through the black, so the paper becomes the page (the mirror of multiply by day). */
:root:has(#nachtlampe:checked) .plate .art { filter: invert(1) sepia(0.12); mix-blend-mode: screen; }

/* The switch: the checkbox is visually hidden but focusable; its label looks like the other colophon links. */
.nl-box { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.nl { cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.2em;
      display: inline-block; padding: 0.25rem 0; }
.nl:hover { color: var(--oxide); text-decoration-color: currentColor; }
:root:has(.nl-box:focus-visible) .nl { outline: 2px solid var(--oxide); outline-offset: 3px; }
:root:has(#nachtlampe:checked) .nl { color: var(--ink); }   /* on = ink, like the current language */

.colophon { max-width: 78rem; width: 100%; margin: clamp(1.5rem, 5vh, 4rem) auto 0; padding-top: 0.8rem;
            border-top: 0.5px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between;
            column-gap: 2.5rem; row-gap: 0.4rem; align-items: baseline; color: var(--muted); font-size: 1.125rem; }
.colophon nav a, .colophon .lang a, .colophon .lang [aria-current] { margin-right: 1.1em; display: inline-block; padding: 0.25rem 0; }
.colophon .lang { margin-left: 0.6em; padding-left: 1.4em; border-left: 0.5px solid var(--rule); }
.colophon .night { margin-left: 0.6em; padding-left: 1.4em; border-left: 0.5px solid var(--rule); }
.colophon .lang [aria-current] { color: var(--ink); }
.colophon nav, .colophon .lang, .colophon .firm { white-space: nowrap; }   /* groups never break inside */
.colophon .folio { text-align: center; }
.colophon .firm { text-align: right; }

@media (max-width: 760px) {
  .spread, .spread.no-plate { grid-template-columns: 1fr; grid-template-rows: none; }
  .spread { grid-template-areas: "word" "gram" "plate" "entry" "close"; }
  .plate { margin-bottom: 2rem; width: auto; justify-self: stretch; }   /* phones scroll: the plate takes the column */
  .plate .frame { padding: 0; border: 0; }
  .colophon { flex-direction: column; align-items: center; row-gap: 0.5rem; text-align: center; }
  .colophon nav, .colophon .firm { white-space: normal; }
  .colophon .firm { text-align: center; text-wrap: balance; }
  .colophon nav a, .colophon .lang a, .colophon .lang [aria-current] { margin: 0 0.5em; min-height: 44px; display: inline-flex; align-items: center; }
  .colophon .lang { display: block; margin: 0.25rem 0 0; padding: 0; border: 0; }
  .colophon .night { display: block; margin: 0; padding: 0; border: 0; }
  .nl { min-height: 44px; display: inline-flex; align-items: center; }
  .runhead { justify-content: center; text-align: center; }
  .runhead span:first-child { display: none; }   /* the headword sits right below */
  .runhead span { text-wrap: balance; }
}

/* Forced colours (review 6B): hairlines become 1 px system rules; Fig. I keeps emphasis by weight. */
@media (forced-colors: active) {
  .runhead, .colophon, .colophon .lang { border-color: CanvasText; border-width: 1px; }
  .plate .frame { border: 1px solid CanvasText; }
  .plate .art { mix-blend-mode: normal; filter: none; }
  .plate figcaption b { font-weight: 600; }
  a { text-decoration-color: currentColor; }
}

/* Print (review 6C): ink on white, A4 on the canon, plate without its frame, link targets spelled out. */
@media print {
  @page { size: A4; margin: 18mm 20mm 28mm 24mm; }
  :root { --paper: #fff; --ink: #000; --muted: #444; --rule: #999; }
  .leaf { min-height: auto; padding: 0; }
  .plate .frame { border: 0; padding: 0; }
  .plate .art { filter: none; mix-blend-mode: normal; }
  .colophon .lang, .colophon .night { display: none; }
  .colophon nav a[href^="mailto:"]::after { content: " (" attr(href) ")"; }
}