/*
 * Canon for Web — CSS Reference Implementation
 *
 * Derived from: Euclid VI.12, VI.13, VI.1 (fourth proportional, mean
 *               proportional, similar figures); Archimedes (geometric
 *               progression); Boethius/Ptolemy (tetrachord intervals)
 * Constrained by: WCAG 2.2 Criterion 1.4.8
 * Authors: Biblios (AI agent) · Jakob (AI agent)
 * QA: Aristotle (AI agent)
 * Research team: Faber-Ludens Pro AI workforce
 * Date: 2026-04-18
 *
 * This file has two sections:
 *
 *   § A — Reference Implementation (§4.6 of the article)
 *         The Canon CSS proper. Copy this section into any project.
 *
 *   § B — Article Presentation
 *         Styles for the article page only. Not part of the Canon derivation.
 *
 * See article: canon-for-web-2026-04-18.md
 * See HTML:    index.html
 */


/* ════════════════════════════════════════════════════════════════════════════
   § A — REFERENCE IMPLEMENTATION
   Derived values. Every number has a source.
   ════════════════════════════════════════════════════════════════════════════

   Derivation summary (Appendix B):

     Given:
       W = viewport width
       H = viewport height
       C = column width = 70ch  (fixed by WCAG + Baymard — not proportion)
       R = 0.45                 (column occupies 45% of viewport, canonical
                                 print proportion: text block ~40–50% of page)
       k = 0.48                 (ch_ratio — advance measure of '0' / em size,
                                 typical for proportional text fonts)

     Font size coefficient (§4.2):
       vw_coefficient = R / (70 × k) × 100
                      = 0.45 / (70 × 0.48) × 100
                      ≈ 1.34

     Type scale steps (§4.5):
       step_n = step_0 × 1.333^n
       ratio r = 1.333 = Perfect Fourth (4:3) — Ptolemy's tetrachord

     Vertical padding (§4.4 Strategy A):
       m_horizontal = (W − C_px) / 2          [CSS: 50vw − 35ch]
       m_vertical   = m_horizontal × (H / W)  [Euclid VI.12]
       → padding-block: calc((50vw - 35ch) * var(--vp-aspect, 0.5625))
       --vp-aspect is set by JavaScript: window.innerHeight / window.innerWidth
       Default 0.5625 = 9/16 (applies when JS is unavailable)

     Valid Canon range: ~1194px – ~1493px viewport width.
     Below ~1194px: WCAG floor (1rem) supersedes proportion.
     Above ~1493px: cap (1.25rem) supersedes proportion. See §5.1.
*/

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

:root {
  /* Font size: vw coefficient 1.34 derived from R=0.45, ch_ratio=0.48 */
  font-size: clamp(1rem, 1.34vw, 1.25rem);
  line-height: 1.5; /* WCAG 1.4.8 minimum */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h, 3rem) + 0.5rem);

  /* Type scale: Archimedean geometric progression, Perfect Fourth (r=1.333) */
  /* Each step: min = 1rem × r^n; max = 1.25rem × r^n; vw = 1.34vw × r^n   */
  --ratio: 1.333;
  --step-0: clamp(1rem,     1.34vw, 1.25rem);   /* body */
  --step-1: clamp(1.333rem, 1.79vw, 1.666rem);  /* step 1 — r^1 */
  --step-2: clamp(1.777rem, 2.38vw, 2.221rem);  /* step 2 — r^2 */
  --step-3: clamp(2.369rem, 3.17vw, 2.961rem);  /* step 3 — r^3 */
}

body {
  container-type: inline-size;
  /* Required for Strategy C (cqi units). Also enables Strategy A via JS. */
}

article {
  /* Column: fixed by readability evidence, not by proportion (§3.3) */
  max-width: 70ch;
  margin-inline: auto;

  /* Vertical padding: §4.4 Strategy A — Euclid VI.12 fourth-proportional */
  /* m_v = (50vw − 35ch) × (H/W)                                           */
  /* --vp-aspect is set by JS (see end of file); default = 0.5625 (16:9)   */
  padding-block: calc((50vw - 35ch) * var(--vp-aspect, 0.5625));

  /* Strategy B (pure CSS approximation — proportional intent, not exact):  */
  /* padding-block: clamp(2rem, 8vh, 10rem);                                */

  /* Strategy C (container queries — best WCAG zoom compliance):            */
  /* padding-block: clamp(2rem, 4cqi, 8rem);                                */
}

article p + p {
  margin-block-start: 2em; /* WCAG 1.4.8: paragraph spacing ≥ 2× font-size */
}

/*
 * JavaScript required for Strategy A:
 *
 *   const setAspect = () =>
 *     document.documentElement.style.setProperty(
 *       '--vp-aspect',
 *       (window.innerHeight / window.innerWidth).toFixed(4)
 *     );
 *   window.addEventListener('resize', setAspect);
 *   setAspect();
 */


/* ════════════════════════════════════════════════════════════════════════════
   § B — ARTICLE PRESENTATION
   Styles for the article page only.
   Not derived from the Canon; not part of the reference implementation.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --bg:           #faf9f6;
  --text:         #1c1a17;
  --muted:        #7a736a;
  --rule:         #d8d2cb;
  --code-bg:      #f0ede8;
  --quote-accent: #c0b8ae;
}

body {
  font-family: 'Iowan Old Style', 'Apple Garamond', Baskerville,
               'Baskerville Old Face', 'Hoefler Text', Garamond,
               'Times New Roman', serif;
  background-color: var(--bg);
  color: var(--text);
  margin: 0;
  padding-inline: 1.5rem; /* safe area — small viewports */
}

/* ── Headings ───────────────────────────────────────────────────────────── */

h1 {
  font-size: var(--step-3);
  line-height: 1.15;
  font-weight: normal;
  font-style: italic;
  margin-block: 0 0.5em;
}

h2 {
  font-size: var(--step-2);
  line-height: 1.2;
  font-weight: normal;
  margin-block: 3em 0.75em;
  padding-block-start: 0.5em;
  border-block-start: 1px solid var(--rule);
}

h3 {
  font-size: var(--step-1);
  line-height: 1.3;
  font-weight: normal;
  font-style: italic;
  margin-block: 2.5em 0.5em;
}

/* ── Body text ──────────────────────────────────────────────────────────── */

p {
  margin-block: 0;
}

p + ul, p + ol,
ul + p, ol + p {
  margin-block-start: 2em;
}

h2 + p, h3 + p,
h2 + blockquote, h3 + blockquote,
h2 + pre, h3 + pre,
h2 + ul, h3 + ul,
h2 + ol, h3 + ol {
  margin-block-start: 0;
}

/* ── Lists ──────────────────────────────────────────────────────────────── */

ul, ol {
  padding-inline-start: 2ch;
  margin-block: 0;
}

li + li {
  margin-block-start: 0.75em;
}

/* ── Blockquotes ────────────────────────────────────────────────────────── */

blockquote {
  margin-inline: 0;
  border-inline-start: 2px solid var(--quote-accent);
  padding-inline: 2ch;
  font-style: italic;
  color: var(--muted);
  margin-block: 2em;
}

blockquote p {
  margin-block: 0;
}

blockquote p + p {
  margin-block-start: 1em;
}

blockquote cite {
  display: block;
  font-style: normal;
  margin-block-start: 0.75em;
  font-size: 0.9em;
  color: var(--muted);
}

/* ── Code ───────────────────────────────────────────────────────────────── */

code {
  font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Cascadia Code',
               'Consolas', 'Courier New', monospace;
  font-size: 0.85em;
  background: var(--code-bg);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}

pre {
  background: var(--code-bg);
  padding: 1.5em;
  overflow-x: auto;
  margin-block: 2em;
  border-radius: 3px;
}

pre code {
  background: none;
  padding: 0;
  font-size: 0.875em;
  line-height: 1.6;
}

/* ── HR ─────────────────────────────────────────────────────────────────── */

hr {
  border: none;
  border-block-start: 1px solid var(--rule);
  margin-block: 3em;
}

/* ── Strong / em ────────────────────────────────────────────────────────── */

strong { font-weight: 600; }
em { font-style: italic; }

/* ── Article header ─────────────────────────────────────────────────────── */

.article-header {
  margin-block-end: 3em;
}

.article-header h1 {
  margin-block-end: 1em;
}

.article-meta {
  font-size: var(--step-0);
  color: var(--muted);
  border-block-start: 1px solid var(--rule);
  padding-block-start: 1em;
}

.article-meta p {
  margin-block: 0;
}

.article-meta p + p {
  margin-block-start: 0.3em;
}

/* ── Abstract ───────────────────────────────────────────────────────────── */

.abstract {
  border-block: 1px solid var(--rule);
  padding-block: 2em;
  margin-block: 3em;
}

.abstract p {
  font-style: italic;
}

/* ── Verification / breakout blocks ─────────────────────────────────────── */

.breakout {
  background: var(--code-bg);
  border-inline-start: 3px solid var(--quote-accent);
  padding: 1.5em;
  margin-block: 2em;
  font-size: 0.95em;
}

.breakout p {
  margin-block: 0;
}

.breakout p + p {
  margin-block-start: 0.75em;
}

/* ── Appendix ───────────────────────────────────────────────────────────── */

.appendix h2 {
  font-style: italic;
}

/* ── Canon implementation note (page footer) ────────────────────────────── */

.canon-note {
  border-block-start: 1px solid var(--rule);
  margin-block-start: 4em;
  padding-block: 2em;
  font-size: 0.875em;
  color: var(--muted);
  font-style: italic;
}

.canon-note p {
  margin-block: 0;
}

.canon-note p + p {
  margin-block-start: 1em;
}

.canon-note code {
  font-style: normal;
}

/* ── Top nav bar ─────────────────────────────────────────────────────────── */

.top-nav {
  --nav-h: 3rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  z-index: 201;
  display: flex;
  align-items: center;
  padding-inline: 0.5rem;
  /* Initially transparent — blends into the page at the top */
  background: transparent;
  transition: background 0.2s, border-color 0.2s;
}

.top-nav.is-scrolled {
  background: var(--bg);
  border-block-end: 1px solid var(--rule);
}

/* Mobile: nav always visible — no room to lose the Contents button */
@media (max-width: 640px) {
  .top-nav {
    background: var(--bg);
    border-block-end: 1px solid var(--rule);
  }
}

/* ── Nav title (article short title — appears on scroll) ─────────────────── */

.nav-title {
  position: absolute;
  /* Align with article left edge — same Canon margin formula as article max-width */
  left: calc(50vw - 35ch);
  font-size: var(--step-0);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
  font-style: italic;
}

.top-nav.is-scrolled .nav-title {
  opacity: 1;
}

/* ── TOC button ─────────────────────────────────────────────────────────── */

.toc-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--step-0);
  color: var(--muted);
  padding: 0.3em 0.6em;
  border-radius: 2px;
  letter-spacing: 0.04em;
  transition: color 0.15s;
}

.toc-btn:hover,
.toc-btn[aria-expanded="true"] {
  color: var(--text);
}

/* ── TOC panel ──────────────────────────────────────────────────────────── */

.toc-panel {
  position: fixed;
  top: var(--nav-h, 3rem);
  left: 0;
  height: calc(100dvh - var(--nav-h, 3rem));
  /* Width: Canon margin formula — article left edge is at (50vw - 35ch).
     Panel ends 2rem before that edge, flush with the proportional margin.
     max() ensures a usable minimum on narrow viewports. */
  width: max(200px, calc(50vw - 35ch - 2rem));
  /* Invisible background: fades from page colour to transparent at right edge.
     Blends into the proportional margin space left of the 70ch column. */
  background: linear-gradient(to right, var(--bg) 72%, transparent);
  padding: 2rem 2.5rem 3rem 2rem;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.22s ease;
  z-index: 199;
}

.toc-panel.is-open {
  transform: translateX(0);
}

/* ── TOC title ──────────────────────────────────────────────────────────── */

.toc-title {
  font-size: 0.72em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block: 0 1.5em;
}

/* ── TOC list ───────────────────────────────────────────────────────────── */

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-list li + li {
  margin-block-start: 0.55em;
}

.toc-list a {
  text-decoration: none;
  color: var(--text);
  font-size: var(--step-0);
  line-height: 1.3;
  display: block;
  transition: color 0.15s;
}

.toc-list a:hover {
  color: var(--muted);
}

/* Subsection entries — indented, italic, smaller */
.toc-list li.toc-sub {
  margin-block-start: 0.3em;
}

.toc-list li.toc-sub a {
  padding-inline-start: 1.5ch;
  color: var(--muted);
  font-size: 0.88em;
  font-style: italic;
}

.toc-list li.toc-sub a:hover {
  color: var(--text);
}