/* ══════════════════════════════════════════════════════════════════════════
   THE READING FACE, AND THE READING MEASURE  (DESIGN-PLAN §7, phase 3)
   ══════════════════════════════════════════════════════════════════════════

   ── WHY THIS IS A SECOND STYLESHEET AND NOT PART OF app.css ───────────────

   Only because app.css was being edited by somebody else on the day this
   landed. There is nothing about these rules that wants its own file: the
   `@font-face` blocks belong beside the `--bk-font-*` tokens they make real,
   and `.prose` is defined in app.css's `base` layer. When the two files can be
   merged without a collision, merge them — this comment is the note that says
   doing so loses nothing.

   The layer is what keeps that merge honest in the meantime. `@layer
   components` joins the layer app.css opened in its own first line, so these
   rules sit exactly where they would if they were written there, and an
   unlayered rule anywhere still beats them. Nothing here depends on which of
   the two stylesheets the browser happens to have parsed first.

   ── WHAT WAS ACTUALLY WRONG, MEASURED 2026-08-28 ──────────────────────────

   app.css has named Literata as the reading face since phase 1 and has said,
   correctly, that it "is NOT vendored yet — no font files are in this repo".
   So `--bk-font-reading` has resolved to Georgia for every reader since the
   token was written.

   And `.prose` never referenced it. The long-form pages — terms, privacy,
   contact — inherited `--bk-font-ui` from `html`, which is the system sans.
   The one place in the app that is unambiguously LANGUAGE rather than a
   CONTROL, by app.css's own rule for choosing between the two stacks, was set
   in the interface face. Both halves of that are fixed below and neither
   needed a token changed: `--bk-font-reading` already named Literata first,
   which is why phase 1's "swapping in Literata later is a change to two lines"
   turns out to be a change to none.

   ── THE FILES ─────────────────────────────────────────────────────────────

   `wwwroot/fonts/` holds the roman and italic LATIN subsets, and its own
   OFL.txt. The full account — the licence, why a variable font, why four
   subsets on the books origin and two here, and why the books origin may serve
   them from `/_shell/` at all — is in
   `services/reader-shell/app/fonts/PIN.txt`, which is the copy this one is
   taken from. FontVendorTests asserts the shared files are byte-identical.

   latin-ext is deliberately NOT here. The books origin carries it because a
   book may be in any language; this origin's only reading surface is Bookary's
   own product copy, in English.

   ── NO CSP CHANGES ANYWHERE ───────────────────────────────────────────────

   The app origin sends `default-src 'self'` with no `font-src` of its own, so
   `'self'` is what a font falls back to and these files are on it. The books
   origin already sends `font-src 'self' data: blob:`. Neither directive moves
   for this, in either direction.
   ══════════════════════════════════════════════════════════════════════════ */

/* Literata — SIL Open Font License 1.1. See wwwroot/fonts/OFL.txt.

   `font-weight: 200 900` and no `font-stretch`: this is ONE variable file per
   style covering the whole weight axis, and an optical-size axis with it.
   `font-optical-sizing` is `auto` by default, so a 30px heading and 16px body
   text are drawn from different optical sizes of the same face with nothing
   asked of any rule below — which is most of the reason the variable file is
   worth its bytes.

   `unicode-range` is not an optimisation to be tidied away later. It is what
   makes the second declaration free: a browser fetches a subset only when a
   character in its range is actually rendered, and the italic file is not
   fetched at all until something is emphasised.

   `font-display: swap` — the page is text, and text a reader can read in
   Georgia now beats text they cannot read for 300ms. */
@font-face {
    font-family: 'Literata';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url('/fonts/Literata-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Literata';
    font-style: italic;
    font-weight: 200 900;
    font-display: swap;
    src: url('/fonts/Literata-Italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer components {
    /* THE LONG-FORM PAGES ARE SET IN THE READING FACE, which is what
       `--bk-font-reading` was defined for and had never been used for.

       `.prose` and not `.bk-prose`: the mode is a COLUMN — the upload form and
       the auth cards declare it too — and app.css's rule for which stack to use
       is about what a human is doing with the words. A form label is a control.
       Terms of service is language.

       ── THE MEASURE, CLOSED HERE BECAUSE §7 SAID IT WOULD BE ───────────────

       app.css's own comment hands this over: "§7 wants 60-70 characters: 85 was
       over it and 79 is less over it. Closing the remaining gap is phase 3's,
       which owns measure and will be setting it against real column geometry
       anyway."

       Measured on /terms at 1280px by counting real line boxes, in the face
       this file installs: 42rem gave 78 characters and 34rem gave 73, both over
       §7's range. 31rem gives 66, which is the middle of it. At 390px the cap
       does not bind at all — the phone does — and the line comes to 53.

       The cap includes the mode's own 1.5rem gutters, because the base layer's
       box-sizing reset made `max-inline-size` a border-box cap. So the text
       column is 31rem minus 3rem of padding, and the number to reason about is
       the one in the declaration rather than the one left after subtracting.

       It is a smaller number than the reader's 580px cap and that is not an
       inconsistency: this text is 16px and the book is 18px, and measure is
       characters, not pixels. */
    .prose {
        font-family: var(--bk-font-reading);
        max-inline-size: 31rem;
    }

    /* A heading in a reading column is part of the reading, so it takes the
       same face — which it already does by inheritance. What it does NOT take
       is the interface stack, and stating that here is what stops a future
       component rule from quietly reintroducing it. */
    .prose :is(h1, h2, h3) {
        font-family: inherit;
    }
}