/* Element defaults + section scaffolding — copied from the live site. */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink-1); font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin: 0; color: var(--ink-1); } p { margin: 0; color: var(--ink-2); } .mono { font-family: var(--font-mono); font-feature-settings: 'liga' 0; letter-spacing: 0.02em; } .container { max-width: var(--max-w); margin: 0 auto; padding-inline: var(--gutter); } section { position: relative; padding-block: var(--section-pad-y); } .section-label { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink-3); text-transform: lowercase; margin-bottom: 1.5rem; } .section-label::before { content: '§'; color: var(--accent); font-size: 0.95rem; } .section-title { font-size: var(--fs-2xl); max-width: 22ch; margin-bottom: 1rem; } .section-title--wide { max-width: 32ch; } .section-intro { font-size: var(--fs-md); color: var(--ink-3); max-width: 55ch; margin-top: 0.5rem; } .src { display: block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.03em; color: var(--ink-4); margin-top: 0.45rem; } .on-dark { background: var(--bg-dark); color: var(--ink-on-dark); } .on-dark .section-label { color: var(--ink-on-dark-muted); } .on-dark .section-title, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--ink-on-dark); } .on-dark .section-intro, .on-dark p { color: var(--ink-on-dark-muted); } /* Scroll reveal */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .eyebrow .dot, .hero__eyebrow .dot { animation: none; } } /* Film grain overlay — brand motif; apply via */ body.grain::after { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.035; pointer-events: none; z-index: 9999; mix-blend-mode: multiply; }