/* ════════════════════════════════════════════════════════════════
AI ResearchPartner — Reset, typography, layout primitives
════════════════════════════════════════════════════════════════ */
/* Google Fonts are loaded via in each page's
(with preconnect hints), not an @import here — a render-blocking @import in a
linked stylesheet serializes the download behind base.css. The URL still
carries `display=swap`, so text renders in the system fallback (system-ui /
Georgia below) and swaps when Inter and Source Serif 4 arrive. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; }
/* ── Focus visibility ──
A branded keyboard-focus ring for interactive elements. :focus-visible keeps
it off for mouse clicks and on for keyboard/AT navigation. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
border-radius: 3px;
}
/* ── Skip link ──
Visually hidden until focused, then a branded pill pinned top-left so
keyboard users can jump past the nav straight to main content. Pages add the
markup. */
.skip-link {
position: absolute;
left: 8px;
top: -60px;
z-index: 100;
padding: 10px 16px;
background: var(--brand);
color: #fff;
font-size: 14px;
font-weight: 600;
border-radius: var(--r-sm);
box-shadow: var(--shadow-soft);
transition: top var(--t-fast) var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible {
top: 8px;
outline: 2px solid var(--brand-deep);
outline-offset: 2px;
}
/* ── Typography ── */
.serif { font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; }
.italic { font-style: italic; }
h1, h2, h3, h4 {
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--text);
}
h1 { font-size: clamp(36px, 5vw, 60px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
h2 { font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.03em; line-height: 1.1; }
h3 { font-size: clamp(20px, 2.2vw, 28px); }
h4 { font-size: 18px; }
p { color: var(--text2); }
.eyebrow {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brand-deep);
margin-bottom: 16px;
}
.lead {
font-family: 'Source Serif 4', Georgia, serif;
font-style: italic;
font-size: clamp(17px, 1.6vw, 21px);
line-height: 1.55;
color: var(--text2);
max-width: 720px;
}
.muted { color: var(--text3); }
/* ── Layout primitives ── */
.container {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--gutter);
}
.container-narrow {
max-width: 880px;
margin: 0 auto;
padding: 0 var(--gutter);
}
section {
padding: clamp(56px, 8vw, 112px) 0;
position: relative;
scroll-margin-top: 80px; /* clear the sticky nav when jumping via #anchor */
}
section.compact { padding: clamp(40px, 5vw, 72px) 0; }
section.tight { padding: clamp(28px, 4vw, 56px) 0; }
.section-divider {
border: none;
border-top: 1px solid var(--border2);
margin: 0;
}
.bg-cream { background: var(--bg); }
.bg-surface { background: var(--surface); }
.bg-sand { background: var(--sand); }
.bg-dark {
background: var(--bg-dark);
color: var(--text-inv);
}
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 { color: var(--text-inv); }
.bg-dark p { color: var(--text-inv2); }
.bg-dark .eyebrow { color: var(--coral); }
/* ── Grids ── */
.grid { display: grid; gap: 24px; }
/* Grid items default to min-width:auto, so one child with intrinsic width
(a Chart.js canvas, a table) silently forces its card wider than the
track and past the viewport on phones. min-width:0 lets every card
shrink to its track; inner content then wraps, scrolls, or (Chart.js)
resizes to fit. */
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
:root { --gutter: 20px; }
}
@media (max-width: 1100px) {
.grid-3-md { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.grid-4 { grid-template-columns: 1fr; }
}
/* ── Utility ── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.text-center { text-align: center; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }
.mb-5 { margin-bottom: 40px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mt-5 { margin-top: 48px; }
.hidden { display: none !important; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.fade-in { animation: fadeUp 0.4s var(--ease) both; }
/* ── Scroll reveals (fade + rise, once) ──
The .reveal class is only ever added by js/motion.js, and only when
IntersectionObserver exists and prefers-reduced-motion is off — so
content is never hidden for no-JS visitors, crawlers, or anyone who
asked for reduced motion. */
.reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
will-change: opacity, transform;
}
.reveal.on {
opacity: 1;
transform: none;
}
/* ── Respect reduced-motion preference ── */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}