/* cran-modern.css: drop-in modernization for cran.r-project.org. Targets CRAN's auto-generated HTML via attribute selectors and :has(); the HTML is never modified. Geist + Geist Mono, single R-blue accent, zinc neutrals, no decorative motion. */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap'); /* ---- 1. Tokens ---- */ :root { color-scheme: light dark; --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; --bg: #ffffff; --bg-soft: #fafafa; /* zinc-50 */ --bg-card: #ffffff; --fg: #09090b; /* zinc-950 */ --fg-soft: #52525b; /* zinc-600 */ --fg-muted: #a1a1aa; /* zinc-400 */ --border: #e4e4e7; /* zinc-200 */ --border-strong: #d4d4d8; /* zinc-300 */ --accent: #1f6feb; /* R blue */ --accent-soft: #eff6ff; --accent-fg: #ffffff; --visited: #6f42c1; --ok: #15803d; --code-bg: #f4f4f5; /* zinc-100 */ --radius: 6px; --maxw: 72rem; } @media (prefers-color-scheme: dark) { :root { --bg: #09090b; --bg-soft: #18181b; --bg-card: #18181b; --fg: #fafafa; --fg-soft: #a1a1aa; --fg-muted: #71717a; --border: #27272a; --border-strong: #3f3f46; --accent: #6ea8fe; --accent-soft: #1e3a8a; --accent-fg: #09090b; --visited: #c4b5fd; --code-bg: #18181b; } } /* Manual theme override (viewer.js writes data-theme on ) */ html[data-theme="dark"] { --bg: #09090b; --bg-soft: #18181b; --bg-card: #18181b; --fg: #fafafa; --fg-soft: #a1a1aa; --fg-muted: #71717a; --border: #27272a; --border-strong: #3f3f46; --accent: #6ea8fe; --accent-soft: #1e3a8a; --accent-fg: #09090b; --visited: #c4b5fd; --code-bg: #18181b; } html[data-theme="light"] { --bg: #ffffff; --bg-soft: #fafafa; --bg-card: #ffffff; --fg: #09090b; --fg-soft: #52525b; --fg-muted: #a1a1aa; --border: #e4e4e7; --border-strong: #d4d4d8; --accent: #1f6feb; --accent-soft: #eff6ff; --accent-fg: #ffffff; --visited: #6f42c1; --code-bg: #f4f4f5; } /* ---- 2. Reset + base ---- */ html { box-sizing: border-box; -webkit-text-size-adjust: 100%; } *, *::before, *::after { box-sizing: inherit; } html, body { background: var(--bg); } body { margin: 0; color: var(--fg); font-family: var(--font-sans); font-size: 15.5px; line-height: 1.6; font-feature-settings: "ss03", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { max-width: 100%; height: auto; } code, kbd, pre, samp, tt { font-family: var(--font-mono); } code { background: var(--code-bg); padding: 0.1em 0.4em; border-radius: 4px; font-size: 0.88em; } pre { background: var(--code-bg); border: 1px solid var(--border); padding: 1rem 1.25rem; border-radius: var(--radius); overflow-x: auto; } table { font-variant-numeric: tabular-nums; } /* ---- 3. Typography ---- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); color: var(--fg); margin: 1.5em 0 0.5em; } h1 { font-weight: 600; font-size: clamp(2rem, 1.5rem + 1.8vw, 2.875rem); letter-spacing: -0.025em; line-height: 1.1; } h2 { font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); letter-spacing: -0.02em; line-height: 1.15; } h3 { font-weight: 600; font-size: 1.1rem; letter-spacing: -0.005em; } h4 { font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-soft); margin: 2em 0 0.75em; } p, ul, ol, dl { margin: 0 0 1rem; } /* ---- 4. Links ---- */ a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in oklch, var(--accent) 30%, transparent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: text-decoration-color 0.12s ease; } a:hover { text-decoration-color: var(--accent); } a:visited { color: var(--visited); } /* ---- 5. Layout primitive ---- Constrain BODY itself (not `body > *`) so bare text nodes share the same content edge as block elements; otherwise orphan text between

and