/* latin-reading.css — house style for latin.craven.fr reading pages.
   Spec: docs/latin-reading-house-style.md (t_4aa2cddc).
   Dependency-free. Do not extend latin.css. */

:root {
  --font-serif: "EB Garamond", "Libre Baskerville", Georgia, "Times New Roman", serif;
  --fs-body: 26px;   /* readability bump 20 -> 26 (t_f4056c7d) */
  --lh-body: 1.7;
  --measure: 72ch;
  --page-margin: 2.5rem;
  --p-margin: 1em;
  /* Headings sized in rem (root 16px). Re-based x1.3 (= 26/20) with the body
     bump so h1 > h2 > h3 stay >= 26px; rem ratio 1.3:1.0 (= 26/20) preserved. */
  --fs-h1: 2.6rem;   /* 32 -> 41.6px */
  --fw-h1: 600;
  --lh-h1: 1.25;
  --fs-h2: 1.95rem;  /* 24 -> 31.2px */
  --fw-h2: 600;
  --lh-h2: 1.3;
  --fs-h3: 1.625rem; /* 20 -> 26px (= body) */
  --fw-h3: 500;
  --lh-h3: 1.35;
  --color-bg: #f6f1e7;
  --color-text: #2a2a28;
  --color-muted: #5e5a54;
  --color-link: #3f4f46;
  --color-rule: #c9c0b3;
}

html {
  background: var(--color-bg);
  color: var(--color-text);
  box-sizing: border-box;
  /* t_f9e7c880: anchor-nav smooth scroll; honoured only when the reader
     has not asked for reduced motion (below). */
  scroll-behavior: smooth;
  /* House orthography (t_8a099124 KO): keep lang="la" on the document, but
     EB Garamond's locl LAT maps u/U → u.LAT/U.LAT (a v-shaped glyph) so
     "juvenis" copy-pastes correctly and paints as "jvvenis". locl off
     preserves the u/v and i/j distinction. æ/œ are real characters in the
     HTML where the diphthong is pronounced /e/; Google Fonts EB Garamond
     has no dlig ae/oe liga independent of that locl set. */
  font-feature-settings: "liga" 1, "kern" 1, "locl" 0;
  -webkit-font-feature-settings: "liga" 1, "kern" 1, "locl" 0;
}

/* t_dc2e5fd8 (iOS Safari u→v regression): WebKit ignores font-feature-settings
   "locl" 0 above — CoreText applies EB Garamond's locl LAT subsystem purely
   from the inherited language, so every lang="la" content page paints u as
   the v-shaped u.LAT glyph on iOS Safari (Chrome/Blink honours locl 0; that
   is why only Safari showed the regression, and why it appeared the moment
   pages started carrying lang="la"). -webkit-locale is WebKit's private
   control of the language CoreText sees: pinning it to "en" disables the
   locl trigger without touching lang="" semantics, hyphenation, or voice;
   real v letters keep their own glyphs (verified per-glyph on iOS 26
   Simulator: u rounded, v still pointed). Non-WebKit browsers ignore the
   declaration entirely. */
[lang="la"],
[lang="LA"] {
  -webkit-locale: "en";
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  margin: 0 auto;
  max-width: var(--measure);
  padding: var(--page-margin);
}

/* Reading column. Body already carries measure + padding so unwrapped
   corpus pages (Livy, Seneca) match wrapped ones (.page_wrapper). Nested
   wrappers must not add a second pad. */
.latin-text,
.page_wrapper {
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

p {
  margin: 0 0 var(--p-margin);
  text-align: left;
  hyphens: none;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
p.pagehead,
p.subpagehead {
  font-family: var(--font-serif);
  color: var(--color-text);
  text-wrap: balance;
  margin: 0 0 0.6em;
}

h1,
p.pagehead {
  font-size: var(--fs-h1);
  font-weight: var(--fw-h1);
  line-height: var(--lh-h1);
  letter-spacing: 0.01em;
  text-align: center;
}

h2,
p.subpagehead {
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
}

h3,
p.sectionhead {
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
}

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: var(--color-text);
  text-decoration: underline;
}

/* Bracket section refs (t_c7c27aeb) --------------------------------------
   Corpus body text carries [n] section markers that interrupt reading flow.
   scripts/hide_bracket_refs.py rewrites each into <span class="ref" ...>;
   the brackets render invisibly (21px transparent hit box, net-1px layout)
   and the number appears only on hover / keyboard focus. The number stays
   in the DOM for screen readers, so the reference is still announced. */
/* Hover hit-area (t_38a4eb25 live review). The 1px column from t_c7c27aeb
   is still too thin in practice: a real pointer sweeping diagonally across
   the line rarely stops on a one-pixel-wide band between glyph ascenders,
   so mouse users saw no tooltip. The hit box is now ~21px wide (about one
   letter each side of the marker); the two -10px side margins pull its
   layout contribution back to 1px, so the text never reflows and adjacent
   words remain the hover/click targets outside that narrow band. */
.ref-brackets {
  display: inline-block;
  width: 21px;
  height: 1.2em;
  margin: 0 -10px;
  overflow: hidden;
  color: transparent;
}

/* Inherited colour must not leak back through descendants: the corpus
   anchors sit INSIDE the brackets as [<a name="75">75</a>] (gall/bc, bede,
   livy, cicero — 52 pages), and a direct a{color} declaration beats the
   inherited transparent, so the number repainted in link colour — the
   stray "7" of §75 on /caesar/bc1.html (t_03363d7f/t_8d75fa9f). The
   :hover/:focus-visible pins outspecify the global a:hover rule so the
   digit cannot repaint under the pointer. */
.ref-brackets,
.ref-brackets a,
.ref-brackets a:hover,
.ref-brackets a:focus-visible {
  color: transparent;
  text-decoration: none;
}

.ref {
  position: relative;
  color: inherit;
  text-decoration: none;
  cursor: help;
  outline-offset: 2px;
}

.ref-num {
  position: absolute;
  left: 0;
  /* Clear the .ref-brackets hit box (which reaches ~5px under the anchor
     bottom): with bottom:1em the tooltip overlapped its own hover target,
     so moving down inside the hit area hid it (t_38a4eb25). */
  bottom: 1.6em;
  display: none;
  padding: 0.15em 0.5em;
  border: 1px solid var(--color-rule);
  border-radius: 0.35em;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.6em;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.18);
  z-index: 10;
}

.ref:hover .ref-num,
.ref:focus .ref-num,
.ref:focus-visible .ref-num {
  display: block;
}

/* First paragraph of a page: tooltip would clip the top edge; the injected
   ref-tooltip script adds .ref-below in that case (see hide_bracket_refs.py). */
.ref.ref-below .ref-num {
  bottom: auto;
  top: 1em;
}

/* Sticky era tabs (t_f9e7c880 bar, t_8426bce1 tabs). Vanilla CSS only:
   the bar sticks to the top edge, and on narrow viewports the tab list
   WRAPS to a second row so every label renders in full — no horizontal
   scrollbar (t_c72d0cdd: the old scroll-overflow clipped long labels such
   as Polish "Średniowiecze i renesans" / Russian "Средневековье и
   Возрождение"; a scrollbar is not a way to present this page).
   t_8426bce1: the anchors became title-sized tab buttons — the active tab
   carries the text colour + an underline rule, inactive tabs are muted.
   No-JS readers see every panel (the template's noscript style un-hides
   them), so the hidden-state default below never strands content. */
.section-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-rule);
  margin: 0 0 1em;
  /* full-bleed: undo the body pad so the rule spans the column edge */
  margin-inline: calc(-1 * var(--page-margin));
  padding-inline: var(--page-margin);
}

.section-nav .tablist {
  display: flex;
  flex-wrap: wrap;           /* narrow viewports: wrap to a 2nd row, no
                               horizontal scrollbar (t_c72d0cdd) */
  gap: 1.25em;
  margin: 0;
  padding: 0.5em 0 0;
}

.era-tab {
  /* the tab label doubles as the section heading: title type, semibold */
  font-family: inherit;
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  flex: 0 0 auto;
  margin: 0;
  padding: 0 0.15em 0.35em;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--color-muted);
  cursor: pointer;
  text-align: left;
}

.era-tab:hover,
.era-tab:focus-visible {
  color: var(--color-text);
}

.era-tab[aria-selected="true"] {
  color: var(--color-text);
  border-bottom-color: var(--color-link);
}

/* Only the selected panel shows; [hidden] needs the explicit rule
   because .home-section is styled below and could win specificity. */
.home-section[hidden] {
  display: none;
}

/* Deep links (#panel-id) still land below the sticky bar. */
.home-section {
  scroll-margin-top: 3.5em;
}

/* Author entry type (t_4fe54785, spec t_63a1afb6 §6; t_8426bce1).
   The era name no longer repeats as an h2 inside the panel — the tab
   label heads it — so only the author entries are styled here: h4
   leads at body size and the work-title lines under it drop a step,
   so names read bigger than the titles beneath them (t_dabf41c8).
   t_e4bd1bc5: each author is one flex child (home.html wraps the
   h4 + optional work <p>). Column gap, not h4/p margin, is the
   space above the next name, so heading-only Catullus / Propertius
   match Tully / Seneca / Livy. Flex gap adds nothing above the
   first entry or below the last. */
.home-section .corpus {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.home-section .corpus h4 {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 0.25em;
}

.home-section .corpus > div:not(:has(p)) h4 {
  margin-bottom: 0;
}

.home-section .corpus p {
  font-size: 0.85em;
  margin-bottom: 0;
}

/* t_0653d2af: major-work titles wrap in <strong> from the :major? flag.
   EB Garamond is loaded at 400/500/600 only; UA strong is 700 and can
   fail to paint a heavier face (review KO on /lang/fr/). Pin 600 — the
   same weight as author h4s — so the letters landing reads bold among
   the essays. Layout and sibling titles are untouched. */
.home-section .corpus strong {
  font-weight: 600;
}

/* About moved to the end of the home (spec §3): quiet, centred closer. */
.about-at-end {
  margin-top: 2.5em;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.footer,
.main_footer,
.internal_navigation,
p.internal_navigation {
  color: var(--color-muted);
  font-size: 0.85em;
  border-color: var(--color-rule);
}

.footer,
.main_footer {
  margin-top: 1.5em;
  padding-top: 0.75em;
  border-top: 1px solid var(--color-rule);
  text-align: center;
}

.footer a,
.main_footer a,
.internal_navigation a,
p.internal_navigation a {
  padding: 0.35em 0.5em;
}

p.internal_navigation {
  text-align: center;
  line-height: 1.4;
  margin: 0 0 1em;
  padding: 0.5em 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}

/* Current page in a book-navigation bar (aria-current="page"): mark it
   distinctly from the sibling links (t_e4bfba47). Inherits the muted
   nav color; weight + underline carry the "you are here" signal. */
p.internal_navigation a[aria-current="page"] {
  color: var(--color-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

p.border,
p.smallborder {
  border-top: 1px solid var(--color-rule);
  margin: 0 0 1em;
  padding: 0;
  min-height: 0;
}

.poem {
  font-size: var(--fs-body);
  line-height: 1.6;
  text-align: left;
  white-space: pre-wrap;
}

/* One-line provenance note under a pagehead (t_8e256173, Fulcher):
   quiet chrome like the footer, not body prose. */
p.source-note {
  color: var(--color-muted);
  font-size: 0.85em;
  text-align: center;
  margin: -0.3em 0 1.5em;
}

.poem p {
  white-space: pre-wrap;
  margin-left: 0;
}

/* Whole-section hover bubble (t_5d2c34f3 round-2 review). One floating
   bubble, injected and positioned by the ref-tooltip v4 script; it shows
   the section number of the text under the pointer. position:fixed +
   pointer-events:none: zero reflow, never a hover target itself. Styled
   like .ref-num so the two read as the same affordance. */
.ref-section {
  position: fixed;
  left: 0;
  top: 0;
  display: none;
  padding: 0.15em 0.5em;
  border: 1px solid var(--color-rule);
  border-radius: 0.35em;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.6em;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.18);
  z-index: 20;
}

.ref-section.ref-section-show {
  display: block;
}

/* Hover-only section numbers (t_0ba8a02b, t_01df3b81 follow-up) -----------
   House rule (docs/latin-reading-house-style.md): a section's number is
   reference metadata, not reading text. Round 1 hid .section-num with
   visibility:hidden but left p.section-marker in flow (min-height:1em),
   which threw off paragraph spacing and only revealed on the empty line.
   Round 2: display:none so the marker occupies no layout (same as .linum);
   the injected `section-hover v1` script on mirandola/oratio.html shows
   § N in a pointer-following .section-tip when the caret is anywhere in
   that section. print.css force-shows the marker paragraphs on paper. */
p.section-marker {
  display: none;
}

.section-tip {
  position: fixed;
  left: 0;
  top: 0;
  display: none;
  padding: 0.15em 0.5em;
  border: 1px solid var(--color-rule);
  border-radius: 0.35em;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.6em;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.18);
  z-index: 20;
}

.section-tip.section-tip-show {
  display: block;
}

/* Hover-only verse line numbers — Gilo Via Hierosolymitana (t_2ef12758) ----
   The edition prints a number every 5th verse in the gutter. House ruling
   (same affordance as .ref-num / .section-num): reference numbers are
   metadata, invisible on screen, revealed only as a pointer-following
   tooltip by the injected `line-hover v1` script in gilo/via.html — which
   hovers WHOLE verse lines, not hit boxes, so the spans can be fully
   display:none (no 1px gutter artifact, zero layout contribution).
   print.css force-shows them on paper (print has no hover). The bubble is
   styled like .ref-section so all three read as one affordance. */
.linum {
  display: none;
}

/* .verse-tip: the Fulcher line-number bubble (t_22d5ffae, `verse-line-
   tooltip v1`). Same fixed/pointer-events:none affordance family as
   .ref-section and .linum-tip — one shared rule keeps them identical. */
.linum-tip,
.verse-tip {
  position: fixed;
  left: 0;
  top: 0;
  display: none;
  padding: 0.15em 0.5em;
  border: 1px solid var(--color-rule);
  border-radius: 0.35em;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.6em;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.18);
  z-index: 20;
}

.linum-tip.linum-tip-show,
.verse-tip.verse-tip-show {
  display: block;
}

/* Floating "Index" link (t_0618399c) — replaces the old footer link bars
   ("Christian Latin / Bede / Index / Classics" and friends). One fixed
   anchor pinned to the extreme bottom-left of the viewport, always visible
   regardless of scroll position, linking to the site index
   (https://latin.craven.fr). Small and unobtrusive: it sits in the dead
   corner of the page margin (body measure is 72ch, centred), never inside
   the text column, so it cannot obscure body text. z-index 40 keeps it
   above the hover tooltip family (.ref-num / .section-tip / .verse-tip at
   20) and the sticky elements at 10; pointer-events apply only to the
   link itself, never a full-width bar. Suppress the old .footer/.main_footer
   blocks (already muted rules above remain for non-text pages). */
.floating-index {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 40;
  margin: 0;
  padding: 0.4em 0.7em;
  font-size: 0.95em;
  line-height: 1.2;
  border-top: 1px solid var(--color-rule);
  border-right: 1px solid var(--color-rule);
  border-top-right-radius: 0.6em;
  background: var(--color-bg);
}

.floating-index a {
  /* Prominence pass (t_db0994e9 KO): the 0.7em muted no-underline chip was
     rendered but not noticed in the dead corner. Idle state is now body-size,
     link colour, underlined — clearly a link, not stray page furniture. */
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  padding: 0.15em 0.35em;
  font-weight: 500;
}

.floating-index a:hover,
.floating-index a:focus-visible {
  color: var(--color-text);
  text-decoration: underline;
}

/* Reserve dead space under the last line so the fixed link never sits on
   body text at the bottom of the scroll (matters on narrow viewports where
   the measure fills the width; on wide screens the corner is already in the
   page margin). scroll-padding-bottom keeps #anchor jumps clear too. */
body {
  padding-bottom: calc(var(--page-margin) + 1.75em);
}

html {
  scroll-padding-bottom: 2.25em;
}

@media (max-width: 600px) {
  :root {
    --fs-body: 18px;
    --lh-body: 1.65;
    --page-margin: 1.25rem;
    /* Keep 72ch (not 100%) so padding + measure cannot overflow.
       html { box-sizing: border-box } is the other half of this contract. */
    --measure: 72ch;
    --fs-h1: 1.6rem;
    --fs-h2: 1.3rem;
    --fs-h3: 1.15rem;
  }
}