/* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* ── Body ── */ body { background-color: var(--cream); color: var(--ink); font-family: var(--font-body); font-size: 1rem; font-weight: 400; line-height: 1.65; /* `clip` (not `hidden`): prevents horizontal overflow from parallax/decorative elements WITHOUT turning into a scroll container — `hidden` here breaks `position: sticky` on the header and traps the page scroll. */ overflow-x: clip; } /* ── Headings ── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--moss); line-height: 1.15; font-weight: 300; } h1 { font-size: clamp(2.4rem, 5vw, 4.5rem); } h2 { font-size: clamp(1.9rem, 3.5vw, 3rem); } h3 { font-size: clamp(1.3rem, 2.5vw, 1.9rem); } h4 { font-size: 1.25rem; } h5 { font-size: 1.05rem; } h6 { font-size: 0.95rem; } /* ── Container ── */ .container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); } /* ── Links ── */ a { color: var(--sage); text-decoration: none; transition: color 0.2s var(--ease); } a:hover { color: var(--sage-dark); } a:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; border-radius: var(--radius-sm); } /* ── Images ── */ img, video { max-width: 100%; height: auto; display: block; } /* ── Lists ── */ ul, ol { list-style: none; } /* ── Buttons base ── */ button { cursor: pointer; border: none; background: none; font-family: var(--font-body); } /* ── Section rhythm ── */ .section { padding-block: var(--space); } .section__head { margin-bottom: clamp(2rem, 4vw, 3.5rem); } .eyebrow { display: inline-block; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage); margin-bottom: 0.75rem; } .section__title { font-family: var(--font-display); color: var(--moss); font-weight: 300; } /* ── Reveal (motion hook) ── */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); } .reveal.is-in { opacity: 1; transform: translateY(0); } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; transition: none; } }