/* Element defaults. Display is a warm grotesk in sentence case; the italic serif is opt-in via
   .accent for one personal phrase per screen. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface-page); color: var(--text-body); font-family: var(--font-sans); font-size: var(--fs-body-l); font-weight: var(--fw-body); line-height: var(--lh-body); letter-spacing: var(--track-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--fw-display); letter-spacing: var(--track-display); line-height: var(--lh-display); color: var(--text-display); margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-display-xl); }
h2 { font-size: var(--fs-display-l); }
h3 { font-size: var(--fs-display-m); line-height: var(--lh-display-s); letter-spacing: var(--track-display-s); }
h4, h5, h6 { text-wrap: wrap; font-family: var(--font-sans); font-size: var(--fs-label); font-weight: var(--fw-label); text-transform: uppercase; letter-spacing: var(--track-label); line-height: var(--lh-label); color: var(--text-label); margin: 0; }
p { margin: 0; max-width: var(--measure); text-wrap: pretty; }
.accent { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: var(--track-accent); }
a { color: var(--text-body); text-decoration: none; background-image: linear-gradient(var(--rule-accent), var(--rule-accent)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; transition: background-size var(--dur-link) var(--ease-power2); padding-bottom: 1px; }
a:hover, a:focus-visible { background-size: 100% 2px; }
:where(:focus-visible) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
img, svg, video { display: block; max-width: 100%; }
img { background: var(--surface-frame); }
button, input, select, textarea { font: inherit; color: inherit; }
::placeholder { color: var(--text-muted); opacity: 1; }
::selection { background: var(--buttermilk); color: var(--espresso); }
hr { border: 0; border-top: var(--hairline); margin: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } }