/* ========================================================================== Studio base — fonts, neutral ink/paper tokens, and base typography for the standalone studio-system pages (writing, services). Pair with studio-nav.css + studio-nav.js. Dark mode is driven by [data-theme="dark"] on . ========================================================================== */ @font-face { font-family: "PP Museum"; src: url("/fonts/PPMuseum-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "PP Museum"; src: url("/fonts/PPMuseum-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "PP Museum"; src: url("/fonts/PPMuseum-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "PP Museum"; src: url("/fonts/PPMuseum-RegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "PP Museum"; src: url("/fonts/PPMuseum-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } /* Metric-matched fallback — Times New Roman rescaled to PP Museum's own metrics (width +8.7%, ascent 90%, descent 25%) so the fallback occupies the exact same box. With font-display: swap the web font repaints in place with zero layout shift instead of reflowing the text. See DESIGN.md "No font-swap reflow". */ @font-face { font-family: "PP Museum Fallback"; src: local("Times New Roman"); font-style: normal; size-adjust: 108.7%; ascent-override: 82.8%; descent-override: 23%; line-gap-override: 0%; } @font-face { font-family: "PP Museum Fallback"; src: local("Times New Roman Italic"), local("Times New Roman"); font-style: italic; size-adjust: 107.3%; ascent-override: 83.9%; descent-override: 23.3%; line-gap-override: 0%; } :root, :root[data-theme="light"] { --ink: #0F0E0C; --paper: #F2F1EC; --paper-raise: #FBFAF7; --muted: #6B6760; --rule: rgba(15,14,12,0.12); --link: #2A4BFF; /* anchors read blue */ --font-display: "PP Museum", "PP Museum Fallback", "Times New Roman", serif; } :root[data-theme="dark"] { --ink: #EFEAE0; --paper: #131210; --paper-raise: #1c1a17; --muted: #8C8880; --rule: rgba(239,234,224,0.14); --link: #7E97FF; /* lighter blue for dark paper */ } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-display); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.5; } /* page shell — leaves room for the top toggle and the bottom pill */ .wrap { max-width: 780px; margin: 0 auto; padding: 120px 24px 140px; } .wrap-wide { max-width: 1080px; } /* editorial header */ .page-head { text-align: center; margin: 0 auto 64px; max-width: 720px; } .page-eyebrow { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; } .page-title { font-weight: 300; font-size: clamp(48px, 7vw, 96px); line-height: 0.98; letter-spacing: -0.03em; color: var(--ink); } .page-title em { font-style: italic; } .page-lead { font-size: clamp(17px, 2vw, 21px); color: var(--muted); line-height: 1.45; margin-top: 20px; } .page-lead em { font-style: italic; color: var(--ink); } /* generic prose */ .prose p { font-size: 18px; line-height: 1.65; color: var(--ink); margin-bottom: 22px; } .prose h2 { font-weight: 300; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.02em; margin: 52px 0 18px; } .prose h2 em { font-style: italic; } .prose em { font-style: italic; } .prose a { color: var(--link); text-underline-offset: 3px; } hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; } @media (max-width: 640px) { .wrap { padding: 96px 20px 130px; } }