/* * Schusei base layer — reset, document, typography, links, media. * Depends on tokens.css. No layout or component rules here. * Introduced in Phase 3A (migrated from the former main.css). */ /* -------------------------------------------------------------- webfont */ /* IBM Plex Sans, self-hosted (SIL OFL 1.1). Weights 400 + 500 only — the * two @font-face rules for the real family live in theme.json so the block * editor gets them too; WordPress prints them into . Only Regular/400 * is preloaded (inc/enqueue.php). * * "IBM Plex Sans Fallback" is a metric-matched Arial used while the webfont * loads, so text does not reflow on swap. Values are derived from the * shipped font's own metrics (unitsPerEm 1000, ascent 1025, descent 275, * lineGap 0, avg Latin advance 451) against Arial (unitsPerEm 2048, avg * Latin advance 913), capsize method: * size-adjust = (451/1000) / (913/2048) = 101.17% * ascent-override = (1025/1000) / 1.011663 = 101.32% * descent-override = (275/1000) / 1.011663 = 27.18% * line-gap-override= 0 = 0% */ @font-face { font-family: "IBM Plex Sans Fallback"; src: local("Arial"); size-adjust: 101.17%; ascent-override: 101.32%; descent-override: 27.18%; line-gap-override: 0%; } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background-color: var(--sch-bg); color: var(--sch-text); font-family: var(--sch-font-sans); font-size: var(--sch-text-body); line-height: var(--sch-leading-normal); font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Headings are restrained: normal weight, tight leading, never enormous. */ h1, h2, h3, h4, h5, h6 { font-weight: 400; line-height: var(--sch-leading-tight); letter-spacing: -0.005em; text-wrap: balance; color: var(--sch-text); } p, li { text-wrap: pretty; } /* Prose keeps a readable measure. */ .schusei-prose { max-width: var(--sch-measure); } .schusei-prose > * + * { margin-top: var(--sch-space-md); } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: var(--sch-transition-fade); } a:hover { color: var(--sch-accent-warm); } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } /* Emphasis uses Medium (500) — the heaviest self-hosted weight. font-synthesis is off, so 600 here would silently resolve to 500 anyway; this makes it explicit and keeps the emphasis restrained. */ strong, b { font-weight: 500; } ::selection { background-color: var(--sch-accent-warm); color: var(--sch-bg); } :focus-visible { outline: 2px solid var(--sch-accent-warm); outline-offset: 3px; } :focus:not(:focus-visible) { outline: none; } /* Visually-hidden text for screen readers (used by pagination, aria labels). */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .screen-reader-text:focus { position: fixed !important; top: var(--sch-space-2xs); left: var(--sch-space-2xs); width: auto; height: auto; padding: var(--sch-space-2xs) var(--sch-space-sm); margin: 0; clip: auto; background: var(--sch-bg-elevated); color: var(--sch-text); z-index: var(--sch-z-skip-link); } /* Motion is opt-in everywhere; strip it when the user asks. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }