/* ========================================================= DBLD Projects — Base styles Reset + global element defaults. No component styles here. ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Paint the page colour on , not just . If anything ever overflows sideways, the body's background only covers the original viewport width and the extra strip renders unpainted — which reads as "the background stops at the sides of the page". */ background-color: var(--color-bg); } body { margin: 0; background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; /* Belt and braces against sideways scroll. `clip` rather than `hidden` on purpose: `hidden` makes body a scroll container, which silently breaks the sticky site header. */ overflow-x: clip; } main { flex: 1; width: 100%; } h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: 0.01em; line-height: 1.05; margin: 0 0 var(--sp-3); color: var(--color-text); } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); } p { margin: 0 0 var(--sp-4); color: var(--color-text-dim); } a { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-border); text-underline-offset: 2px; } a:hover, a:focus-visible { text-decoration-color: currentColor; } img { max-width: 100%; display: block; } ul, ol { padding-left: 1.25em; } button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } button { cursor: pointer; } :focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--sp-4); } .page-section { padding: var(--sp-7) 0; } .page-section--tight { padding: var(--sp-5) 0; } [data-partial] { animation: partial-in 0.15s ease-out; } @keyframes partial-in { from { opacity: 0; } to { opacity: 1; } }