*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-weight: 400;
    font-size: var(--fs-md);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color 400ms var(--ease-out), color 400ms var(--ease-out);
}
img, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, blockquote, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 500; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--brand-purple); color: #fff; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--bg); border-radius: var(--r-pill); transform: translateY(-150%); transition: transform var(--dur-ui) var(--ease-out); }
.skip-link:focus { transform: none; }

.section-title {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-display);
    line-height: 1.04;
    letter-spacing: var(--track-display);
    max-width: 18ch;
}

/* SplitText line masks */
.split-line { overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }

/* Pre-JS states: hide only when JS + motion are allowed, so no-JS and reduced-motion users get content */
@media (prefers-reduced-motion: no-preference) {
    .js [data-hero-item], .js [data-reveal] { opacity: 0; }
    .js [data-split] { visibility: hidden; }
}

/* View transitions between v2 pages */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 320ms var(--ease-in-out) both vt-out; }
::view-transition-new(root) { animation: 520ms var(--ease-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-16px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Theme toggle: slow whole-page fade, light comes on / goes off */
html.theme-vt::view-transition-old(root),
html.theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theme-vt-on::view-transition-new(root) { animation: theme-light-on 1800ms cubic-bezier(.4,0,.2,1) both; }
html.theme-vt-off::view-transition-old(root) { z-index: 2; animation: theme-light-off 1600ms cubic-bezier(.4,0,.2,1) both; }
html.theme-vt-off::view-transition-new(root) { z-index: 1; }
@keyframes theme-light-on {
    from { opacity: 0; filter: brightness(1.4) blur(4px); }
    to   { opacity: 1; filter: none; }
}
@keyframes theme-light-off {
    from { opacity: 1; filter: none; }
    to   { opacity: 0; filter: brightness(.4); }
}
@media (max-width: 520px) { .hide-sm { display: none; } }