/* Google Fonts are loaded via in Layout.astro for parallel loading.
@import would force a sequential waterfall: base.css downloads → then fonts start.
allows fonts to fetch in parallel with CSS, eliminating the FOUT window. */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
overflow-y: scroll;
scrollbar-gutter: stable;
}
/*
Anti-Gliding Scroll Architecture:
By scoping smooth scrolling strictly to :focus-within, we prevent the browser
from animating the native scroll-restoration jump on page reload/refresh.
When the user actually clicks an anchor link, the document immediately gains focus,
and the hardware-composited smooth scroll executes beautifully.
*/
@media (prefers-reduced-motion: no-preference) {
html:focus-within {
scroll-behavior: smooth;
}
}
body {
font-family: var(--font-body);
background-color: var(--bg);
color: var(--text-primary);
line-height: 1.6;
transition: background-color var(--transition-base), color var(--transition-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 600;
line-height: 1.2;
color: var(--text-primary);
margin-bottom: var(--space-4);
letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h4 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
p {
margin-bottom: var(--space-4);
color: var(--text-secondary);
}
a {
color: var(--accent);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
text-decoration: underline;
color: var(--accent-secondary);
}
/* Layout Component Media Reset Constraints */
img, video, iframe {
max-width: 100%;
height: auto;
display: block;
}
svg {
height: auto;
display: block;
}
/* Global Content Geometry Barricades
(Containment temporarily disabled due to Chromium scroll-restoration height calculation bugs) */
section {
/* contain: layout style; */
}
::selection {
background-color: var(--accent);
color: #fff;
}
/* Base list styling */
ul, ol {
margin-bottom: var(--space-4);
padding-left: var(--space-6);
color: var(--text-secondary);
}
li {
margin-bottom: var(--space-2);
}
strong {
font-weight: 600;
color: var(--text-primary);
}
/* Prevent transitions when resizing */
.no-transitions * {
transition: none !important;
}