/* Base layout and typography, mobile first. Components get their own files
   under css/components/ as they arrive (plan 1b: player, settings). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--step-0)/1.6 var(--font-text); }
a { color: var(--link); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
img { max-width: 100%; height: auto; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--space-3); top: var(--space-3); z-index: 10; padding: var(--space-2) var(--space-3); background: var(--surface-2); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); background: var(--surface); }
.brand { display: flex; align-items: center; gap: var(--space-2); color: var(--text); font-weight: 600; text-decoration: none; }
.brand img { flex: none; border-radius: 8px; }
/* The same in every language, so switching language never changes the header (spec 2026-10-21-shell-redesign §5). */
.brand-text { display: grid; line-height: 1.15; }
.brand-zh { font: 600 var(--step-0) var(--font-zh); letter-spacing: 0.08em; }
.brand-py { color: var(--text-muted); font: 400 0.8rem var(--font-text); letter-spacing: 0.02em; }

main { max-width: var(--measure); margin: 0 auto; padding: var(--space-4) var(--space-3) var(--space-5); }
h1 { margin: 0 0 var(--space-3); font-size: var(--step-2); line-height: 1.25; }
/* Chapter heading: the chapter in Chinese, then the book and number in the page language (no brackets). */
.h1-zh { display: block; font-family: var(--font-zh); font-size: var(--step-3); font-weight: 600; letter-spacing: 0.06em; }
.h1-sub { display: block; margin-top: var(--space-1); color: var(--text-muted); font: 600 var(--step-0) var(--font-text); letter-spacing: 0.01em; }
h2 { margin: var(--space-5) 0 var(--space-3); font-size: var(--step-1); }
.lead { color: var(--text-muted); font-size: var(--step-1); line-height: 1.5; }

.zh { margin: 0; font-family: var(--font-zh); font-size: calc(var(--zh-size) * var(--user-scale, 1)); line-height: 1.5; letter-spacing: 0.04em; }
.tr { margin: var(--space-2) 0 0; font-family: var(--font-text); font-size: calc(var(--step-1) * var(--user-scale, 1)); line-height: 1.5; }

.lines { margin: 0; padding: 0; list-style: none; }
.line { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.chapter-audio { width: 100%; margin: var(--space-3) 0; }
.commentary p { font-family: var(--font-text); }
.pager { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); }
.pager a[rel="next"] { margin-left: auto; text-align: right; }

.ft-chapter .zh { font-size: var(--step-1); }
.ft-chapter .tr { margin-bottom: var(--space-3); font-size: var(--step-0); }


.site-footer { padding: var(--space-4) var(--space-3); background: var(--surface); color: var(--text-muted); font: var(--step--1)/1.6 var(--font-ui); text-align: center; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-3); margin-bottom: var(--space-2); }
.site-footer nav a { padding: var(--space-1) 0; }   /* taller than 24px to tap */

@media (min-width: 48rem) {
  :root { --zh-size: 1.9rem; }
  main { padding-top: var(--space-5); }
  h1 { font-size: var(--step-3); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}