/* quiet.css — the quiet register (essays, florilegia, static pages).
 *
 * Tufte-leaning: generous measure, small-caps headings, a calm page that
 * gets out of the reader's way.  Hand-rolled against ox-html's actual
 * output, with Tufte CSS only as a reference for what good looks like.
 */
@import url("base.css");

/* The quiet register stays close to the base; its character is restraint.
 * (Sidenote machinery — the footnote-fed right-margin notes — now lives in
 * base.css, since both registers may use marginalia.) */

/* Last-updated stamp at the top of an accreting florilegium. */
.updated {
  font-variant: small-caps;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  color: var(--ink-red);
  margin: -0.8rem 0 1.8rem;
}

/* Metadata stamps (dates, tier tags) take the rubric red in the quiet
 * register too — the ostraka register keeps its stamps muted (no red). */
.entry-date, .entry-tier { color: var(--ink-red); }

/* Florilegia index: the last-tended stamp beside each incipit, and the
 * dense by-number concordance at the foot (one paragraph, book-index
 * style, "Ps 1 — Beatus vir · …"). The number is the lookup key, so it
 * takes the rubric like the other metadata stamps. */
.entry-tended {
  font-variant: small-caps;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  color: var(--ink-red);
}
.concordance { font-size: 0.9rem; }
.concordance .ps-num { color: var(--ink-red); white-space: nowrap; }

/* Terminal sample on the verba project page: an accurate preview. The
 * spans carry verba's own ANSI colour roles, and the values here are the
 * ef-night palette (the alacritty theme this gets used under), dark
 * background included — the block shows what the terminal shows. */
.verba-sample {
  background: #000e17;           /* ef-night bg-main */
  color: #afbcbf;                /* ef-night fg-main */
  padding: 0.8rem 1.1rem;
}
.verba-sample .v-prompt { color: #70819f; }                    /* bright black (dim) */
.verba-sample .v-head   { font-weight: bold; color: #4fb0cf; } /* 1;36 bold cyan */
.verba-sample .v-gram   { color: #c48502; }                    /* 33   yellow */
.verba-sample .v-morph  { color: #379cf6; }                    /* 34   blue */
.verba-sample .v-gloss  { color: #1fa526; }                    /* 32   green */
.verba-sample .v-grk    { font-weight: bold; color: #1fa526; } /* 1;32 bold green */
.verba-sample .v-cite   { color: #70819f; }                    /* 90   bright black */
.verba-sample .v-label  { color: #4fb0cf; }                    /* 36   cyan */
.verba-sample .v-lat    { font-style: italic; color: #c48502; }/* 3;33 italic yellow */
.verba-sample .v-lemma  { font-weight: bold; color: #d570af; } /* 1;35 bold magenta */
.verba-sample .v-use    { font-weight: bold; color: #379cf6; } /* 1;34 bold blue */

/* Primary-text quotation in a florilegium — set apart in the core-text
 * face (see --face-primary). Sized up a little because that face runs
 * smaller on the body than the commentary serif. */
blockquote.primary {
  border-left: none;
  padding-left: 0;
  /* Japanese primary text (a 文語訳 psalm) takes Kouzan Mouhitsu, a
   * brush kaisho — received text in the hand of its own manuscript
   * tradition, as the textura is for the Latin. Missaali carries no
   * kana/kanji, so the brush serves exactly the characters it can't. */
  /* Greek Book leads so LXX Greek never gets half-claimed by the
   * Japanese faces' JIS Greek rows (monotonic only — the same trap
   * TT2020 set before its Greek was stripped). */
  font-family: "Greek Book", "Missaali Text", "Kouzan Mouhitsu",
               var(--face-primary);
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 1.6rem 0;
}

/* Illuminated initial: an explicit <span class="dropcap"> around the first
 * letter of the primary (psalm) text, set as a Lombardic drop-cap in
 * Missaali (a drop-cap-only cut whose capitals ARE the Lombardic initials).
 * An explicit span, not ::first-letter, so nothing can misfire. */
.dropcap {
  font-family: "Missaali", serif;
  float: left;
  font-size: 3.4em;
  line-height: 0.66;
  margin-top: 0.34em;            /* drop it so its top meets the first line */
  padding: 0 0.18em 0 0.02em;
  color: var(--ink-red);         /* a rubricated initial */
}

/* Rubricated incipit — the opening words a psalm is named by, set in red as
 * manuscripts did. A colour change, so it sits happily in the blackletter. */
.incipit { color: var(--ink-red); }

/* The annotator's pen on the primary text: a hand-wavering underline in
 * the same azurite as the margin glosses, marking the words a gloss
 * attaches to — stroke under the phrase, note in the margin, one ink
 * saying they belong together. An SVG background rather than
 * text-decoration so the line can actually waver; the tile joins
 * seamlessly under long phrases. (Settled 2026-07-03 — bible:
 * "Reader's and annotator's marks".) */
.anno {
  background: url("pen-underline.svg") repeat-x left bottom / 6em 0.3em;
  padding-bottom: 0.12em;
}

/* Dated changelog at the foot of a florilegium. */
.changelog { font-size: 0.9rem; color: var(--ink-soft); margin-top: 2.5rem; }
.changelog h2 { font-size: 1rem; }

/* Code/example blocks as PUNCH CARDS — the one paper artifact computing
 * ever had, which keeps code inside the site's everything-is-paper
 * material system. Manila stock, a faint column ruling every character
 * cell (cards held 80 columns; so does the code line-length
 * convention, a happy resonance), printed field rules and labels, and
 * a real clipped corner — the .card wrapper emitted by dp-html carries
 * the drop shadow, which then traces the cut. The verba terminal
 * sample is exempt: it is an accurate preview of a terminal, not a
 * document artifact. (Settled 2026-07-03 — bible: "Reader's and
 * annotator's marks".) */
pre.example:not(.verba-sample) {
  position: relative;            /* anchors the interpreter row */
  background-color: #f1e8cf;     /* manila card stock */
  /* Modelled on the IBM 888157 FORTRAN coding card: corner cut top
   * RIGHT (a real clip — the .card wrapper emitted by dp-html carries
   * the drop shadow, which then traces the cut), full-height printed
   * rules dividing the fields (statement number | statement |
   * identification), the field label centred in the head band, and
   * code beginning past the statement-number field. Painted layers,
   * top to bottom:
   * 1. punched chads down the identification field, page-coloured
   *    (holes through to the paper), with bridges so the card holds;
   *    the column starts below the corner cut;
   * 2. the chad column again in shadow ink, phased 1px higher — the
   *    sliver inside each hole's top edge;
   * 3. vertical form rule closing the statement field's left edge;
   * 4. vertical form rule fencing the identification/punch field;
   * 5. horizontal form rule under the head band;
   * 6. stock-coloured patch keeping the head band clean of ruling
   *    (the reference card's head is bare stock; the field rules and
   *    punches still cross it, as on the real card);
   * 7. stock-coloured patch blanking the ruling in the punch field;
   * 8. the per-character column ruling. */
  /* Chads ride the text-line rhythm: one punch per line box (the lh
   * unit), centred on its line, starting with the first code line. */
  background-image:
    repeating-linear-gradient(180deg,
                    var(--paper) 0 0.6lh,
                    rgba(0, 0, 0, 0) 0.6lh 1lh),
    repeating-linear-gradient(180deg,
                    rgba(43, 38, 34, 0.45) 0 0.6lh,
                    rgba(0, 0, 0, 0) 0.6lh 1lh),
    linear-gradient(rgba(107, 79, 42, 0.30), rgba(107, 79, 42, 0.30)),
    linear-gradient(rgba(107, 79, 42, 0.30), rgba(107, 79, 42, 0.30)),
    linear-gradient(rgba(107, 79, 42, 0.30), rgba(107, 79, 42, 0.30)),
    linear-gradient(#f1e8cf, #f1e8cf),
    linear-gradient(#f1e8cf, #f1e8cf),
    repeating-linear-gradient(90deg, rgba(43, 38, 34, 0.05) 0 1px,
                              rgba(0, 0, 0, 0) 1px 1ch);
  /* The ruling layer stays EXACTLY as verified for glyph alignment
   * (auto size, repeating, phased -0.22ch) — a sized no-repeat tile
   * shifts its phase (tried; misaligned). It is blanked in the punch
   * field by the stock patch instead. The vertical rules sit on
   * column boundaries (n·1ch - 0.22ch). */
  /* The strip runs to the card's foot (a cap at the last text line was
   * tried and looked worse — the running column reads more like a
   * punched card). The head rule spans statement-number field and
   * statement field alike, stopping at the punch-field fence. */
  background-size: 0.9ch calc(100% - 1.35rem - 0.2lh),
                   0.9ch calc(100% - 1.35rem - 0.2lh),
                   1px 100%, 1px 100%, calc(100% - 4.2ch) 1px,
                   100% 1.05rem, 4.2ch 100%, auto;
  background-position: right 1.6ch top calc(1.35rem + 0.2lh + 1px),
                       right 1.6ch top calc(1.35rem + 0.2lh),
                       4.78ch 0, right 4.2ch top 0, 0 1.05rem,
                       0 0, right 0 top 0, -0.22ch 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat,
                     no-repeat, no-repeat, no-repeat, repeat;
  border-radius: 0.45em 0 0.45em 0.45em;   /* square where the corner is cut */
  clip-path: polygon(0 0, calc(100% - 1.1em) 0, 100% 1.1em,
                     100% 100%, 0 100%);
  /* The same typewriter face as the body — code was typed on the same
   * machine — and, crucially, the face the 1ch ruling is measured in.
   * Code begins just past the statement-number field; the wide right
   * padding keeps it clear of the punch field. */
  font-family: var(--face-commentary);
  line-height: 1.4;              /* tighter than prose — card rows */
  padding: 1.35rem 5ch 0.9rem 5ch;
}

/* The wrapper (emitted by dp-html around example blocks) carries the
 * shadow so it follows the clipped card, cut corner included. */
.card {
  filter: drop-shadow(1px 2px 1px rgba(43, 38, 34, 0.25));
}

/* The card's printed form, in the faint warm ink card forms were
 * printed in: the field label top centre — IBM FORTRAN coding cards
 * really did print "FORTRAN STATEMENT" over the statement field — and
 * the box ruled around the field itself. A label, not content, so no
 * reader mistakes it for what the snippet does. (An earlier version
 * printed a hello-world as an interpreter row; reverted for exactly
 * that confusion.) */
pre.example:not(.verba-sample)::before {
  content: "FORTRAN  STATEMENT";
  position: absolute;
  top: 0.3em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.55em;
  font-weight: bold;             /* synthesised — TT2020 has no bold cut,
                                    fine at label size */
  letter-spacing: 0.3em;
  color: rgba(107, 79, 42, 0.55);   /* printed form ink */
  white-space: pre;
}
/* The statement-number field's own label, two tiny lines as the form
 * printed it. */
pre.example:not(.verba-sample)::after {
  content: "STATEMENT\A NUMBER";
  position: absolute;
  top: 0.3em;
  left: 0;
  /* The field is 4.78ch wide in the CARD's font — but ch here resolves
   * against this pseudo's own 0.38em font, so divide it back out to
   * recover card columns and centre the label in the true field. */
  width: calc(4.78ch / 0.38);
  text-align: center;
  font-size: 0.38em;
  line-height: 1.3;
  letter-spacing: 0.05em;
  color: rgba(107, 79, 42, 0.55);
  white-space: pre;
  pointer-events: none;
}

/* (The apparatus styling lives in base.css — it is shared by both
 * registers, since folded footnotes can appear anywhere.) */