@layer reset, tokens, base, layout, components, utilities, pages, motion;

@layer reset {
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html {
        scroll-behavior: smooth;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: oklch(50% 0 0 / 0.08) transparent;
    }

    @supports not (scrollbar-gutter: stable) {
        html {
            overflow-y: scroll;
        }
    }
}


@layer tokens {
    html.preload *,
    html.preload *::before,
    html.preload *::after {
        transition: none !important;
    }

    :root {
        --gray-0: oklch(9% 0.01 260);
        --gray-1: oklch(12% 0.01 260);
        --gray-2: oklch(15% 0.01 260);
        --gray-3: oklch(25% 0.01 260);
        --gray-4: oklch(50% 0.01 260);
        --gray-5: oklch(55% 0.01 260);
        --gray-6: oklch(56% 0.01 260);

        --gray-7: oklch(74% 0.01 260);
        --gray-8: oklch(82% 0.01 260);
        --gray-9: oklch(92% 0.01 260);

        --sand-0: oklch(90% 0.01 85);
        --sand-1: oklch(92% 0.005 85);
        --sand-2: oklch(96% 0.005 85);
        --sand-3: oklch(98.5% 0.005 85);

        --umber-0: oklch(22% 0.02 50);
        --umber-1: oklch(42% 0.01 50);
        --umber-2: oklch(45% 0.02 50);
        --umber-3: oklch(48% 0.01 50);
        --umber-4: oklch(52% 0.01 50);
        --umber-5: oklch(54% 0.01 50);

        --black: oklch(0% 0 0);
        --white: oklch(100% 0 0);
        --white-a10: oklch(100% 0 0 / 0.1);
        --white-a60: oklch(100% 0 0 / 0.6);
        --neutral-a22: oklch(45% 0 0 / .22);

        --purple-1: oklch(50% 0.22 305);
        --purple-2: oklch(72% 0.14 305);
        --purple-3: oklch(72% 0.18 305);
        --blue-1: oklch(48% 0.20 245);
        --blue-2: oklch(72% 0.16 245);
        --blue-3: oklch(74% 0.14 245);
        --violet-1: oklch(46% 0.20 270);
        --violet-2: oklch(70% 0.17 270);
        --cyan-1: oklch(46% 0.20 200);
        --cyan-2: oklch(74% 0.17 200);
        --red-1: oklch(48% 0.22 25);
        --red-2: oklch(63% 0.21 25);
        --red-3: oklch(68% 0.18 25);
        --green-1: oklch(70% 0.15 150);
        --amber-1: oklch(75% 0.15 85);

        --space-1: 0.5rem;
        --space-2: 0.75rem;
        --space-3: 1.25rem;
        --space-4: 2rem;
        --space-5: 3rem;

        --size-1: 0.6875rem;
        --size-2: 0.75rem;
        --size-3: 0.875rem;
        --size-4: 1rem;
        --size-5: 1.0625rem;
        --size-6: clamp(1.12rem, 1.6vw, 1.35rem);
        --size-7: clamp(1.4rem, 2.4vw, 1.75rem);
        --size-8: clamp(1.85rem, 3.4vw, 2.6rem);
        --size-9: clamp(2.5rem, 5vw, 3.5rem);

        --size-10: clamp(2.75rem, min(5.5vw, 7vh), 5rem);
        --size-11: clamp(3.5rem, min(8vw, 10vh), 6rem);

        --radius-1: 0.5rem;
        --radius-2: 1.25rem;
        --radius-3: 999px;

        --duration-1: 220ms;
        --duration-2: 600ms;

        --ease-1: cubic-bezier(.25, .46, .45, .94);
        --ease-2: cubic-bezier(0.34, 1.56, 0.64, 1);
        --ease-3: cubic-bezier(.2, .8, .2, 1);
        --ease-4: cubic-bezier(0.175, 0.885, 0.32, 1.275);

        --font-1: system-ui, -apple-system, sans-serif;
        --font-2: ui-monospace, "SF Mono", Monaco, Consolas, monospace;

        --layout-max: 88rem;
        --layout-content: 72rem;

        --page-col: 44rem;

        --page-col-wide: 56rem;
        --layout-article: 48rem;
        --nav-height: 5rem;

        --nav-toggle-width: 4.5rem;
        --nav-knob-size: calc(var(--nav-toggle-width) / 2);

        --nav-floating-btn-size: clamp(2rem, 6vw, 2.25rem);

        --nav-corner-inset: 1.25rem;

        --nav-row-center: calc(var(--nav-corner-inset) + var(--nav-floating-btn-size) / 2);

        --page-header-top: clamp(3.5rem, 4vw + 1vh, 6rem);

        --spacing-xs: var(--space-1);
        --spacing-sm: var(--space-2);
        --spacing-md: var(--space-3);
        --spacing-lg: var(--space-4);
        --spacing-xl: var(--space-5);
        --spacing-gutter: clamp(1.25rem, 4vw, 2.5rem);
        --spacing-section: clamp(4rem, 12vw, 10rem);

        --text-2xs: var(--size-1);
        --text-xs: var(--size-2);
        --text-sm: var(--size-3);
        --text-base: var(--size-4);
        --text-md: var(--size-5);
        --text-lg: var(--size-6);
        --text-xl: var(--size-7);
        --text-2xl: var(--size-8);
        --display-md: var(--size-9);
        --display-lg: var(--size-10);
        --display-xl: var(--size-11);

        --radius-sm: var(--radius-1);
        --radius-md: var(--radius-2);
        --radius-full: var(--radius-3);

        --font-sans: var(--font-1);
        --font-mono: var(--font-2);

        --ease-elastic: var(--ease-1);
        --ease-spring-fallback: var(--ease-2);
        --ease-spring: var(--ease-spring-fallback);
        --ease-smooth: var(--ease-3);
        --ease-bounce: var(--ease-4);
        --duration-fast: var(--duration-1);
        --duration-slow: var(--duration-2);

        --accent-purple: var(--purple-2);
        --accent-blue: var(--blue-3);
        --accent-green: var(--green-1);
        --accent-amber: var(--amber-1);
        --accent-red: var(--red-2);
        --grad-accent: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
        --blur-frost: 12px;

        --btn-glow: 0 0 10px oklch(60% 0.08 260 / .04);

        --bg-canvas: light-dark(var(--sand-3), var(--gray-0));
        --bg-surface: light-dark(var(--sand-2), var(--gray-1));
        --bg-elevated: light-dark(var(--white), var(--gray-2));
        --text-ink: light-dark(var(--umber-0), var(--gray-9));
        --text-muted: light-dark(var(--umber-2), var(--gray-8));

        --text-muted-2: light-dark(var(--umber-4), var(--gray-7));
        --border-dim: light-dark(var(--sand-0), var(--neutral-a22));

        --border-card: light-dark(
            color-mix(in oklch, var(--sand-0) 62%, transparent),
            oklch(62% 0 0 / 0.20)
        );
        --border-subtle: light-dark(var(--sand-1), var(--gray-3));
        --btn-sheen: light-dark(var(--white-a60), var(--white-a10));
        --focus-ring: light-dark(var(--accent-purple), var(--accent-blue));

        --hl-keyword:     light-dark(var(--purple-1), var(--purple-3));
        --hl-function:    light-dark(var(--blue-1), var(--blue-2));
        --hl-type:        light-dark(var(--violet-1), var(--violet-2));
        --hl-variable:    light-dark(var(--cyan-1), var(--cyan-2));
        --hl-string:      light-dark(var(--red-1), var(--red-3));
        --hl-number:      light-dark(var(--umber-1), var(--gray-7));
        --hl-constant:    light-dark(var(--umber-1), var(--gray-7));
        --hl-comment:     light-dark(var(--umber-5), var(--gray-4));
        --hl-operator:    light-dark(var(--purple-1), var(--purple-3));
        --hl-punctuation: light-dark(var(--umber-3), var(--gray-6));
    }

    @supports (transition-timing-function: linear(0, 1)) {
        :root {
            --ease-spring: linear(
                0,
                0.386 18%,
                0.796 42%,
                1.056 62%,
                0.972 80%,
                1
            );
        }
    }

    :root, :root[data-theme="dark"] {
        color-scheme: dark;

        --btn-shadow: 0 2px 5px oklch(0% 0 0 / .08);
        --btn-shadow-hover: 0 3px 8px oklch(0% 0 0 / .14);
        --effect-vignette: radial-gradient(1400px 1100px at 50% 55%, transparent 40%, oklch(0% 0 0 / .58) 100%);
        --effect-orb-a: radial-gradient(1200px 900px at 16% 14%, oklch(30% 0.04 260 / .14), transparent 62%);
        --effect-orb-b: radial-gradient(1100px 900px at 86% 68%, oklch(35% 0.04 250 / .12), transparent 58%);
        --display-sun: block;
        --display-moon: none;
        --fw-heading: 300;
        --card-hairline: 2px;
    }

    :root[data-theme="light"] {
        color-scheme: light;
        --btn-shadow: 0 1px 3px oklch(43.8% 0.021 67 / 0.025);
        --btn-shadow-hover: 0 2px 5px oklch(43.8% 0.021 67 / 0.05);
        --effect-vignette: none;
        --effect-orb-a: radial-gradient(circle at 10% 20%, oklch(92% 0.04 85 / 0.3), transparent 40%);
        --effect-orb-b: radial-gradient(circle at 90% 60%, oklch(94% 0.04 60 / 0.3), transparent 40%);
        --display-sun: none;
        --display-moon: block;
        --fw-heading: 400;
        --card-hairline: 3px;
    }
}

@layer base {
    body {
        font-family: var(--font-sans);
        color: var(--text-ink);
        background-color: var(--bg-canvas);
        background-image: var(--effect-vignette), var(--effect-orb-a), var(--effect-orb-b);
        background-repeat: no-repeat;
        background-attachment: fixed;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        -webkit-font-smoothing: antialiased;

        [data-theme="dark"] & {
            font-weight: 300;
        }
    }

    h1, h2, h3, h4, h5, h6 {
        font-weight: 300;
        text-wrap: balance;

        [data-theme="dark"] & {
            font-weight: 200;
        }
    }
    :where(a, a:visited, a:hover, a:focus-visible) {
        color: inherit;
        text-decoration: none;
    }
    h1 .h1-self-link {
        color: inherit;
        text-decoration: none;
        cursor: pointer;

        &:hover,
        &:focus-visible {
            color: inherit;
            text-decoration: none;
        }
    }
    button { border: none; background: none; font-family: inherit; cursor: pointer; }
    :focus { outline: none; }
    :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

    ::selection {
        background: color-mix(in oklch, var(--accent-purple) 28%, transparent);
        color: var(--text-ink);
    }

    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }

        *,
        *::before,
        *::after,
        *::backdrop {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }

        @supports (view-transition-name: none) {
            @view-transition {
                navigation: none;
            }
        }
    }
}

@layer layout {
    .skip-link {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 200;
        padding: 0.75rem 1.25rem;
        border: 1px solid var(--border-dim);
        border-radius: 0 0 var(--radius-sm) 0;
        background: var(--bg-canvas);
        color: var(--text-ink);
        font-size: var(--text-sm);
        letter-spacing: 0.04em;
        translate: 0 -150%;
        transition: translate var(--duration-fast) var(--ease-smooth);

        &:focus-visible {
            translate: 0 0;
        }
    }

    .site-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        height: var(--nav-height);
        pointer-events: none;

        &::before {
            content: '';
            position: absolute;
            inset: 0 0 auto;
            height: calc(var(--nav-height) + 1.5rem);
            background: linear-gradient(to bottom, var(--bg-canvas) 45%, transparent);
            opacity: 0;
            transition: opacity var(--duration-1) var(--ease-3);
            pointer-events: none;
        }

        &[data-scroll="up"]::before {
            opacity: 1;
        }

        & > :where(.nav-logo, .menu-btn) {
            transition: translate var(--duration-1) var(--ease-3);
        }

        &[data-scroll="down"] > :where(.nav-logo, .menu-btn) {
            translate: 0 calc(-1 * (var(--nav-height) + 1rem));
        }
    }

    @media (width >= 1024px) {
        .site-nav ~ .site-menu {
            transition: translate var(--duration-1) var(--ease-3);
        }

        .site-nav[data-scroll="down"] ~ .site-menu {
            translate: 0 calc(-1 * (var(--nav-height) + 1rem));
        }
    }

    .nav-logo {
        position: fixed;
        top: calc(var(--nav-row-center) - 0.5lh);
        left: var(--spacing-gutter);
        z-index: 101;
        pointer-events: auto;
    }
    .menu-btn {
        position: fixed !important;
        top: var(--nav-corner-inset);
        right: var(--spacing-gutter);
        z-index: 101;
        pointer-events: auto;

        & .menu-btn__close {
            display: none;
        }

        &[aria-expanded="true"] {
            & .menu-btn__open {
                display: none;
            }

            & .menu-btn__close {
                display: inline;
            }
        }
    }

    .floating-actions {
        position: fixed;
        right: var(--spacing-gutter);
        bottom: var(--nav-corner-inset);
        z-index: 101;
        display: flex;
        align-items: center;
        gap: 1.2rem;

        --nav-knob-size: var(--nav-floating-btn-size);
        --nav-toggle-width: calc(var(--nav-floating-btn-size) * 2);
    }


    @media (width >= 1024px) {
        .floating-actions .theme-toggle {
            position: fixed;
            top: var(--nav-corner-inset);
            right: var(--spacing-gutter);
        }
    }

    .nav-cookie-btn,
    .nav-sponsor-btn {
        width: var(--nav-floating-btn-size) !important;
        height: var(--nav-floating-btn-size) !important;
    }

    .theme-toggle {
        display: flex;
        align-items: center;
        cursor: pointer;

        & input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        & input:not(:checked) ~ .toggle-track .toggle-knob {
            translate: 0;
            rotate: -20deg;
        }

        & input:checked ~ .toggle-track .toggle-knob {
            translate: calc(var(--nav-toggle-width) - var(--nav-knob-size));
            rotate: 20deg;
        }

        &:hover .toggle-track::after {
            opacity: 1;
        }
    }

    .toggle-track {
        position: relative;
        isolation: isolate;
        width: var(--nav-toggle-width);
        height: var(--nav-knob-size);

        &::after {
            content: '';
            position: absolute;
            inset: 0.5rem;
            z-index: -1;
            border-radius: var(--radius-full);
            background: color-mix(in oklch, var(--bg-canvas) 52%, transparent);
            border: 1px solid color-mix(in oklch, var(--border-dim) 38%, transparent);
            opacity: 0;
            transition: opacity 220ms var(--ease-smooth);
            pointer-events: none;
        }
    }

    .toggle-knob {
        position: absolute;
        top: 0;
        left: 0;
        width: var(--nav-knob-size);
        height: var(--nav-knob-size);

        & svg {
            width: 45%;
            height: auto;
            position: absolute;

            transition: opacity 150ms ease 150ms, scale 150ms ease 150ms;
        }
    }

    [data-theme="light"] .toggle-knob .icon-sun {
        opacity: 1;
        scale: 0.95;
    }

    [data-theme="light"] .toggle-knob .icon-moon {
        opacity: 0;
        scale: 0.5;
    }

    [data-theme="dark"] .toggle-knob .icon-sun {
        opacity: 0;
        scale: 0.5;
    }

    [data-theme="dark"] .toggle-knob .icon-moon {
        opacity: 1;
        scale: 0.95;
    }

    [data-theme="light"] .theme-toggle:hover .toggle-knob .icon-sun {
        opacity: 1;
        scale: 1;
    }

    [data-theme="dark"] .theme-toggle:hover .toggle-knob .icon-moon {
        opacity: 1;
        scale: 1;
    }

    @media (width >= 1024px) {
        .menu-btn { display: none !important; }
    }
    main {
        flex-grow: 1;
        margin: 0 auto;
        width: calc(100% - var(--spacing-gutter) * 2);
        max-width: var(--layout-content);
        padding: calc(var(--nav-height) + 1rem) 0 8rem;

        @media (width <= 1024px) {
            padding-top: 6rem;
        }
    }
    body > footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
        gap: clamp(1.25rem, 4vw, 2rem);
    }

    .footer-legal {
        display: flex;
        align-items: center;
        gap: 0.125rem;
    }

    @media (width < 1024px) {
        .floating-actions {
            position: static;
            justify-content: center;

            /* No travel here: the switch is one round button among three, so
               the knob stays put and only its icon turns over. The checked
               translate is width minus knob, which this makes zero. */
            --nav-toggle-width: var(--nav-floating-btn-size);
        }

        body > footer {
            justify-items: center;
            text-align: center;
        }
    }

    footer {
        padding: 2rem var(--spacing-gutter);
        text-align: left;
        font-size: var(--text-2xs);
        font-weight: 300;
        font-stretch: semi-condensed;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted-2);
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 0.125rem;

        & a {
            color: inherit;
            position: relative;
            transition: color 0.25s ease;

            &::after {
                content: '';
                position: absolute;
                left: 0;
                bottom: -2px;
                width: 100%;
                height: 1px;
                background: var(--grad-accent);
                transform: scaleX(0);
                transform-origin: left;
                transition: transform 0.3s var(--ease-elastic);
            }

            &:hover { color: var(--text-ink); }
            &:hover::after { transform: scaleX(1); }
        }

        & .sep { opacity: 0.5; }
    }
}
@layer pages {
    .page-header {
        padding-top: var(--page-header-top);
        max-width: var(--layout-content);
        margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
        position: relative;
        isolation: isolate;
        overflow: visible;

        &:has(:is(.page-subtitle, .page-hero-viz)) {
            min-height: clamp(11rem, 20vh, 16rem);
            margin-bottom: clamp(2rem, 3vw + 1vh, 4rem);
        }
    }

    .page-title {
        margin: 0 0 0.34em;
        font-weight: 250;
        font-size: var(--display-lg);
        letter-spacing: -0.03em;
        line-height: 0.95;
        text-wrap: balance;
        position: relative;
        z-index: 2;

        .info-page & {
            font-size: var(--text-2xl);
        }
    }

    .page-subtitle {
        margin: 0;
        font-size: var(--text-lg);
        line-height: 1.6;
        color: var(--text-muted);

        max-width: 38ch;
        text-wrap: balance;
        position: relative;
        z-index: 2;
    }

    .page-hero-viz {
        position: absolute;
        inset-inline-end: clamp(-1rem, 2vw, 5rem);

        top: 78%;
        translate: 0 -50%;
        width: min(48rem, 60vw);
        margin: 0;
        pointer-events: none;
        z-index: 1;
        opacity: 0.9;

        & .hero-smn {
            --hero-smn-width: min(100%, var(--hero-viz-size, 26rem));
        }
    }

    @media (width <= 860px) {
        .page-header {
            min-height: 0;

            &:has(.page-hero-viz) {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
        }

        .page-hero-viz {
            position: static;
            translate: none;
            order: -1;
            width: min(100%, 20rem);
            margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
            opacity: 0.8;
        }
    }

    .hero-smn {
        --hero-smn-width: min(100%, 32rem);

        --hero-pen: 2.4;
        --hero-smn-main: color-mix(in oklch, var(--text-ink) 88%, oklch(100% 0 0));
        --hero-smn-accent: color-mix(in oklch, var(--accent-purple) 86%, var(--accent-blue));
        --hero-smn-muted: color-mix(in oklch, var(--text-muted-2) 70%, transparent);
        width: var(--hero-smn-width);
        max-width: 100%;
        margin: 0;
        margin-inline-start: auto;
        position: relative;
        pointer-events: none;
        contain: layout style;
        isolation: isolate;

        &::before {
            content: '';
            position: absolute;
            inset: 20% 14% 18%;
            background: radial-gradient(circle at 56% 48%, color-mix(in oklch, var(--accent-blue) 12%, transparent), transparent 72%);
            filter: blur(28px);
            opacity: 0.24;
            z-index: 0;
        }
    }

    .hero-smn--compact {
        --hero-smn-width: min(100%, 24rem);
    }

    .hero-smn-shell {
        position: relative;
        z-index: 1;
        transform-origin: 52% 54%;
        will-change: transform;
    }

    .hero-smn-svg {
        width: 100%;
        height: auto;
        display: block;
        overflow: visible;

        & :is(path, circle, polyline) {
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: var(--hero-pen);
            opacity: 1;
        }

        & .main {
            stroke: var(--hero-smn-main);

            &.thick {
                stroke-width: calc(var(--hero-pen) * 1.25);
            }
        }

        & .accent {
            stroke: var(--hero-smn-accent);
        }

        & .muted {
            stroke: var(--hero-smn-muted);
            stroke-width: calc(var(--hero-pen) * 0.75);
        }

        & .lab-bubble {
            animation:
                hero-smn-draw 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards,
                hero-smn-bubble-rise var(--rise-dur, 5s) ease-in-out var(--rise-delay, 0s) infinite;
            animation-delay: var(--d, 0s), calc(2.2s + var(--rise-delay, 0s));
        }
    }

    @media (prefers-reduced-motion: no-preference) {
        .hero-smn-shell {
            animation: hero-smn-float 8.8s cubic-bezier(0.43, 0.05, 0.57, 0.95) infinite;
        }

        .hero-smn-svg :is(path, circle, polyline) {
            stroke-dasharray: 1;
            stroke-dashoffset: 1;
            animation: hero-smn-draw 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
            animation-delay: var(--d, 0s);
        }
    }

    @keyframes hero-smn-draw {
        0% {
            stroke-dashoffset: 1;
            opacity: 0;
        }
        5% {
            opacity: 1;
        }
        100% {
            stroke-dashoffset: 0;
            opacity: 1;
        }
    }

    @keyframes hero-smn-float {
        0%, 100% { transform: translate3d(0, 0, 0); }
        36% { transform: translate3d(1.3px, -3.2px, 0) rotate(-0.22deg); }
        68% { transform: translate3d(-1px, -0.3px, 0) rotate(0.16deg); }
    }

    @keyframes hero-smn-bubble-rise {
        0%, 10% {
            translate: 0 0;
            opacity: 1;
        }
        70% {
            opacity: 0.6;
        }
        100% {
            translate: 0 calc(var(--rise-h, 60) * -1px);
            opacity: 0;
        }
    }

    @media (width <= 1024px) {
        .hero-smn {
            --hero-smn-width: min(100%, 16rem) !important;

            --hero-pen: 3.9;
            margin-inline: auto;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .hero-smn-shell,
        .hero-smn-svg :is(path, circle, polyline) {
            animation: none !important;
            stroke-dasharray: none !important;
            stroke-dashoffset: 0 !important;
            opacity: 1 !important;
            transform: none !important;
        }
    }
}

@layer pages {
    .page-split {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: clamp(2rem, 5vw, 4rem);
        align-items: start;

        & > .page-next {
            grid-column: 1 / -1;
            max-width: var(--page-col);
        }

        &:has(.page-split__rail) {
            & .page-header {
                min-height: 0;
            }

            & .page-hero-viz {
                display: none;
            }
        }
    }

    .page-split__main {
        display: flex;
        flex-direction: column;
        min-width: 0;
        max-width: var(--page-col);
        gap: clamp(4rem, 6vw + 1vh, 8rem);
    }

    .page-split__rail {
        position: sticky;
        top: calc(var(--nav-height) + clamp(1.5rem, 4vh, 3rem));
        justify-self: end;
        width: 100%;
        opacity: 0.9;
        pointer-events: none;

        & .hero-smn {
            --hero-smn-width: min(100%, 26rem);
            --hero-pen: 2.9;
        }
    }

    @media (prefers-reduced-motion: no-preference) {
        .page-split__rail .hero-smn-shell {
            animation: none;
        }
    }

    @media (width <= 1024px) {
        .page-split {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            position: relative;
        }

        .page-split__rail {
            position: static;
            order: -1;
            align-self: center;
            width: min(60%, 11rem);
            margin-bottom: clamp(0.5rem, 2vh, 1.5rem);
            opacity: 0.75;
        }

        .page-split__rail .hero-smn {
            --hero-pen: 5.7;
            animation: none;
        }
    }

    .page-split__rail--content {
        position: static;
        display: grid;
        gap: clamp(1.75rem, 3vw, 2.5rem);
        opacity: 1;
        pointer-events: auto;
    }

    @media (width <= 1024px) {
        .page-split__rail--content {
            order: 0;
            align-self: stretch;
            width: 100%;
            margin-block: clamp(2.5rem, 6vw, 4rem) 0;
            opacity: 1;
        }

        .page-split__rail--content .hero-smn {
            --hero-smn-width: min(60%, 11rem);
            justify-self: center;
        }
    }

    .page-next {
        display: grid;
        grid-template-columns: 2fr 1fr;
        /* The arrow lines up with the destination, not with the middle of the
           block: centred, it floats between the eyebrow and the name. */
        align-items: end;
        gap: clamp(1.5rem, 4vw, 3rem);
        padding-block: clamp(3rem, 7vw, 6rem) 0;
        color: inherit;
        text-decoration: none;

        & > span {
            display: grid;
            gap: 0.3rem;
        }

        & > span > span:first-child:not(:only-child) {
            font-size: var(--text-xs);
            font-weight: 200;
            font-stretch: semi-condensed;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            opacity: 0.75;
        }

        & > span > span:last-child {
            font-size: var(--text-xl);
            font-weight: 450;
            letter-spacing: -0.02em;
            line-height: 1.25;
        }

        & > svg:last-child {
            justify-self: end;
            width: 2rem;
            height: 2rem;
            color: var(--text-muted);
            transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1), color 250ms ease;
        }

        &:hover > svg:last-child {
            color: var(--text-ink);
            transform: translateX(0.25rem);
        }
    }

    @media (width <= 640px) {
        .page-next {
            grid-template-columns: 1fr;
            gap: 0.75rem;
        }
    }
}

@layer layout {
    .page-split__rail .illu {
        width: min(100%, 10rem);
        margin-inline-start: auto;
    }
}
@layer layout {
    .page-column {
        max-width: var(--layout-content);
        margin-inline: auto;
        display: flex;
        flex-direction: column;
        gap: clamp(4.5rem, 9vw, 8rem);

    }

    .content-section {
        display: grid;
        gap: 1.5rem;
    }

    .content-section--spacious {
        gap: clamp(1.75rem, 3.5vw, 2.75rem);
    }

    .prose-block {
        display: grid;
        gap: 1.1rem;

        & p {
            margin: 0;
            color: var(--text-muted);
            font-size: var(--text-base);
            line-height: 1.75;
        }

        & strong {
            color: var(--text-ink);
            font-weight: 400;
        }

        & a {
            color: var(--text-ink);
            text-decoration: underline;
            text-decoration-color: color-mix(in oklch, var(--text-ink) 40%, transparent);
            text-decoration-thickness: 1px;
            text-underline-offset: 0.2em;
            background-image: var(--grad-accent);
            background-repeat: no-repeat;
            background-position: 0 100%;
            background-size: 0 1px;
            transition: background-size 300ms var(--ease-elastic), text-decoration-color 250ms ease;

            &:hover {
                background-size: 100% 1px;
                text-decoration-color: transparent;
            }
        }
    }

    .prose-block--measure {
        max-width: 52ch;
    }

    .facts-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
        gap: 1.4rem 2rem;

        & > div {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }

        & .meta {
            color: var(--text-muted-2);
            font-family: var(--font-mono);
            font-size: var(--text-xs);
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        & > div > dd {
            color: var(--text-ink);
        }
    }

    .facts-grid--lead {
        padding-bottom: clamp(1.75rem, 4vw, 2.75rem);
        border-bottom: 1px solid color-mix(in oklch, var(--border-dim) 45%, transparent);
    }

    .card-grid {
        --card-grid-columns: 2;
        display: grid;
        grid-template-columns: repeat(var(--card-grid-columns), minmax(0, 1fr));
        gap: clamp(1.25rem, 3vw, 2.2rem);
        list-style: none;
    }

    .card-grid--spaced {
        margin-block: 2.2rem;
    }

    .card-grid--four {
        --card-grid-columns: 4;
        gap: clamp(1rem, 2vw, 1.5rem);
    }

    @media (width <= 1024px) {
        .card-grid--four {
            --card-grid-columns: 2;
        }
    }

    @media (width <= 640px) {
        .card-grid {
            --card-grid-columns: 1;
            gap: 1rem;
        }
    }
}

@layer pages {
    .page-column .page-header {
        margin-bottom: 0;
    }
}

@layer components {
    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}
@layer components {
    .btn {
        --control-shadow: var(--btn-shadow);
        position: relative;
        isolation: isolate;
        display: inline-grid;
        place-items: center;
        border: 1px solid color-mix(in oklch, var(--border-dim) 70%, transparent);
        border-radius: var(--radius-full);
        background: color-mix(in oklch, var(--bg-canvas) 70%, transparent);
        box-shadow: var(--control-shadow), var(--btn-glow);
        color: var(--text-ink);
        cursor: pointer;
        text-decoration: none;
        backdrop-filter: blur(var(--blur-frost));
        -webkit-backdrop-filter: blur(var(--blur-frost));
        transition: transform 250ms var(--ease-elastic), border-color 250ms ease, box-shadow 250ms ease;

        &::before {
            content: '';
            position: absolute;
            inset: -2px;
            z-index: -1;
            padding: 2px;
            border-radius: inherit;
            background: var(--grad-accent);
            opacity: 0;
            visibility: hidden;
            filter: blur(4px);
            mask: linear-gradient(oklch(100% 0 0) 0 0) content-box, linear-gradient(oklch(100% 0 0) 0 0);
            -webkit-mask: linear-gradient(oklch(100% 0 0) 0 0) content-box, linear-gradient(oklch(100% 0 0) 0 0);
            mask-composite: exclude;
            -webkit-mask-composite: xor;
            pointer-events: none;
            transition: opacity 250ms ease, visibility 250ms ease;
        }

        &::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(110deg, transparent 0 40%, var(--btn-sheen) 50%, transparent 60% 100%);
            background-position-x: 150%;
            background-size: 200% 100%;
            opacity: 0;
            pointer-events: none;
            transition: opacity 400ms ease, background-position-x 600ms var(--ease-smooth);
        }

        &:active::before {
            opacity: 1;
            animation: gradient-rotate 4s linear infinite;
        }

        &:focus-visible {
            outline-offset: 4px;
        }
    }

    .btn:hover,
    .theme-toggle:hover .toggle-knob {
        transform: translateY(-2px);
        border-color: transparent;
        box-shadow: var(--control-shadow-hover, var(--btn-shadow-hover)), var(--btn-glow);
    }

    .btn:hover::before,
    .theme-toggle:hover .toggle-knob::before {
        opacity: 1;
        visibility: visible;
        animation: gradient-rotate 4s linear infinite;
    }

    .btn:hover::after,
    .theme-toggle:hover .toggle-knob::after {
        opacity: 1;
        background-position-x: -50%;
    }

    .btn-icon {
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;

        & svg {
            width: 50%;
            height: auto;
            opacity: 0.5;
            scale: 0.95;
            transition: opacity var(--duration-slow) ease, scale 400ms var(--ease-elastic);
        }
    }

    .btn-nav {
        width: 2.25rem;
        height: 2.25rem;
        padding: 0;

        & svg {
            width: 45%;
            height: auto;
            opacity: 0.5;
            scale: 0.95;
            transition: opacity var(--duration-slow) ease, scale 400ms var(--ease-elastic);
        }

        &:hover svg {
            opacity: 1;
            scale: 1;
        }
    }

    .nav-sponsor-btn {
        &.btn-nav svg {
            width: 50.4%;
            transition: opacity var(--duration-slow) ease, scale 400ms var(--ease-elastic), color 180ms ease;
        }

        &:hover svg {
            color: var(--accent-purple);
        }
    }

    .btn-social {
        width: 3.4rem;
        height: 3.4rem;
        padding: 0;

        & svg {
            width: 45%;
            height: auto;
            opacity: 0.5;
            scale: 0.95;
            transition: opacity var(--duration-slow) ease, scale 400ms var(--ease-elastic);
        }

        &:hover svg {
            opacity: 1;
            scale: 1;
        }
    }

    .social-icons .btn-social,
    .nav-cookie-btn,
    .nav-sponsor-btn,
    .theme-toggle .toggle-knob {
        --control-shadow: 0 1px 2px color-mix(in oklch, var(--text-ink) 4%, transparent);
        --control-shadow-hover: 0 2px 5px color-mix(in oklch, var(--text-ink) 8%, transparent);
    }

    .theme-toggle .toggle-knob {
        transition:
            translate 520ms var(--ease-spring),
            rotate 520ms var(--ease-spring),
            transform 250ms var(--ease-elastic),
            background-color 220ms var(--ease-smooth),
            border-color 220ms var(--ease-smooth);
    }

    .social-button--x svg {
        width: 42.75%;
    }

    .social-button--github svg {
        width: 49.5%;
    }

    .social-button--symfony svg {
        width: 54.45%;
    }

    .btn-text {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        min-height: 2.5rem;
        gap: 0.5rem;
        padding-inline: 1rem;
        font-size: var(--text-base);
        font-weight: 300;
        white-space: nowrap;

        & svg {
            width: 1rem;
            height: 1rem;
            opacity: 0.7;
            transition: opacity var(--duration-slow) ease;
        }

        &:hover svg {
            opacity: 1;
        }
    }
}

@layer components {
    kbd {
        display: inline-block;
        padding: 0.25rem 0.5rem;
        background: color-mix(in oklch, var(--bg-surface) 50%, transparent);
        border: 1px solid var(--border-dim);
        border-radius: 0.375rem;
        font-family: var(--font-mono);
        font-size: 0.875em;
        box-shadow: 0 2px 0 color-mix(in oklch, var(--bg-canvas) 80%, oklch(0% 0 0));
        position: relative;
        top: -1px;
    }

    mark { background: color-mix(in oklch, var(--accent-amber) 20%, transparent); color: var(--accent-amber); padding: 0.1em 0.3em; border-radius: 0.25rem; }

    .section-label {
        margin: 0;
        font-size: var(--text-base);
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-ink);

        & em {
            font-style: normal;
            font-weight: 200;
        }
    }

    .info-page {
        max-width: 42rem;
        margin: 0 auto;
        padding-bottom: 6rem;

        & h2 {
            font-size: var(--text-xs);
            font-weight: 300;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--text-muted-2);
            margin-top: 2.5rem;
            margin-bottom: 0.75rem;
        }

        & > h2:first-child {
            margin-top: 0;
        }

        & p {
            font-size: var(--text-base);
            font-weight: 300;
            color: var(--text-muted);
            line-height: 1.7;
        }

        & p + p { margin-top: 0.5rem; }

        /* The air sits on the term rather than between the rows: a list written
           in Markdown has no box around each pair to space out. */
        & dt {
            font-size: var(--text-xs);
            font-weight: 300;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--text-muted-2);
            margin-top: 2rem;
            margin-bottom: 0.5rem;
        }

        & dt:first-child {
            margin-top: 0;
        }

        & dd {
            font-size: var(--text-base);
            font-weight: 300;
            color: var(--text-muted);
            line-height: 1.6;
        }

        & a {
            color: var(--text-muted);
            text-decoration-color: color-mix(in oklch, var(--text-muted-2) 40%, transparent);
            text-underline-offset: 0.2em;
            transition: color 0.2s ease;

            &:hover { color: var(--text-ink); }
        }
    }

    .alto-highlight {
        font-family: var(--font-mono);
        line-height: 1.6;
        position: relative;

        &[data-language]::before {
            content: attr(data-language);
            position: absolute;
            top: 0.65rem;
            right: 0.9rem;
            font-size: var(--text-2xs);
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--text-muted-2);
            opacity: 0.55;
            pointer-events: none;
            user-select: none;
        }

        & code {
            font-size: 0.88em;
            background: none;
            padding: 0;
            border: none;
        }
    }

    .alto-keyword,
    .alto-operator       { color: var(--hl-keyword); }
    .alto-function       { color: var(--hl-function); }
    .alto-type           { color: var(--hl-type); }
    .alto-variable       { color: var(--hl-variable); }
    .alto-variable-special { color: var(--hl-variable); font-style: italic; }
    .alto-string         { color: var(--hl-string); }
    .alto-number,
    .alto-constant       { color: var(--hl-number); }
    .alto-comment        { color: var(--hl-comment); font-style: italic; }
    .alto-punctuation    { color: var(--hl-punctuation); }

    /* A card is a box, and the link inside it covers the box rather than
       wrapping it. An <a> around a heading is not what the element is for, and
       anything reading the document as text flattens the card into one line.
       The card it covers carries position: relative. */
    .stretched-link::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    /* The anchor a reader lands on, and the one they copy to send someone here.
       It is worth nothing until the heading is pointed at, so that is when it
       appears. Written for the whole site: prose is Markdown wherever it is. */
    /* The heading owns it, which is also what keeps it above the prose link
       rule of an article: that one reads .article-content a, and a bare class
       would lose to it. */
    :is(h1, h2, h3, h4, h5, h6) > .heading-permalink {
        display: inline-block;
        width: 0;
        overflow: visible;
        position: relative;
        left: 0.35ch;
        color: var(--text-muted-2);
        border: none;
        text-decoration: none;
        opacity: 0;
        transition: opacity 180ms ease;
    }

    :is(h1, h2, h3, h4, h5, h6):hover > .heading-permalink,
    .heading-permalink:focus-visible {
        opacity: 1;
    }

    /* One row of a list, wherever a list of things appears: a post, a talk, an
       experiment. Three pages used to carry three sets of rules for the same
       two lines of text. */
    .entry {
        position: relative;
        display: grid;
        gap: 0.6rem;
    }

    /* The rule between two rows belongs to the list, not to a row: written on
       the row it took a first-child exception on every page that has a list,
       and drew a line inside the lab card, which is one row and no list. */
    .entry-list {
        display: grid;
        list-style: none;
        min-width: 0;
    }

    .entry-list > * + * {
        margin-top: clamp(2rem, 4vw, 2.75rem);
        padding-top: clamp(2rem, 4vw, 2.75rem);
        border-top: 1px solid color-mix(in oklch, var(--border-dim) 40%, transparent);
    }

    .entry-meta {
        margin: 0;
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted-2);
        font-variant-numeric: tabular-nums;
    }

    .entry-title {
        margin: 0;
        font-size: var(--text-xl);
        font-weight: var(--fw-heading);
        letter-spacing: -0.02em;
        line-height: 1.25;
        text-wrap: balance;
        color: var(--text-muted);
        transition: color 250ms ease;

        & a {
            color: inherit;
            text-decoration: none;
        }
    }

    .entry:hover .entry-title {
        color: var(--text-ink);
    }
}
@layer components {
.nav-card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;

    --nav-card-pad-block: clamp(1.75rem, 3vw, 2.5rem);
    --nav-card-pad-inline: clamp(1.75rem, 3vw, 2.5rem);
    padding-block: var(--nav-card-pad-block);
    padding-inline: var(--nav-card-pad-inline);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-sm, 0.5rem);
    transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
    color: inherit;

    &:hover {
        border-color: color-mix(in oklch, var(--border-dim) 80%, transparent);
        background: color-mix(in oklch, var(--bg-surface) 32%, transparent);
        transform: translateY(-2px);
    }

    &::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 0.25rem;
        background: var(--grad-accent);
        opacity: 0;
        transform: scaleX(1);
        transform-origin: left center;
        transition: opacity 260ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    &:hover::before {
        opacity: 1;
        animation: nav-card-top-sweep 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }

    & .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: clamp(0.7rem, 1.6vw, 1rem);
    }

    & h3 {
        font-size: var(--text-lg);
        font-weight: 200;
        letter-spacing: -0.02em;
        min-width: 0;
    }

    & p {
        margin: 0;
        font-size: var(--text-base);
        line-height: 1.6;
    }

    & .body {
        font-weight: 300;
        font-stretch: semi-condensed;
        color: var(--text-muted);
        opacity: 0.8;
        max-width: 36ch;

        & a {
            color: var(--text-ink);
            font-weight: 450;
        }
    }

    & .mark {
        display: grid;
        place-items: center;
        flex: none;
        width: clamp(4rem, 7vw, 5.5rem);
        aspect-ratio: 1;
    }

    & .logo {
        display: block;
        width: 42%;
        aspect-ratio: 1;
        transition: filter 320ms ease, scale 650ms ease-out;

        & .illu,
        & .pds-logo,
        & .pds-logo svg {
            width: 100%;
        }

        & .illu {
            rotate: 0deg;
            --illus-pen: 0.6px;
        }

        & .illu :is(.muted, .fine, .dot) {
            opacity: 0;
            transition: opacity 260ms ease;
        }
    }

    &:hover .logo :is(.pds-logo, .illu)[data-mono] {
        opacity: 1;
    }

    &:hover .logo .illu :is(.muted, .fine, .dot) {
        opacity: 1;
    }

    @media (prefers-reduced-motion: no-preference) {
        &:hover .mark {
            rotate: 2deg;
        }

        &:hover .logo {
            scale: 1.22;
            transition-duration: 320ms, 250ms;
        }
    }
}

    [data-card] {
        position: relative;

        & :where(h2, h3, .link-card__title) a {
            color: inherit;
            text-decoration: none;

            &::after {
                content: '';
                position: absolute;
                inset: 0;
                z-index: 1;
            }
        }

        & a:not(:where(h2, h3, .link-card__title) a) {
            position: relative;
            z-index: 2;
        }

    }

    .link-card__title {
        display: block;
        font-size: var(--text-lg);
        font-weight: 300;
        text-wrap: balance;
    }

    [data-theme="dark"] .link-card__title {
        font-weight: 200;
    }

    :is(.small-card, .link-card--small) {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        min-height: 0;
        gap: 0.9rem;
        padding: 1.15rem 1.1rem;
        overflow: hidden;
        position: relative;
        border: 1px solid var(--border-card);
        border-radius: 0.8rem;
        color: inherit;
        transition: border-color 300ms ease, transform 300ms ease;

        &::before {
            content: '';
            position: absolute;
            inset: 0 0 auto;
            height: var(--card-hairline);
            background: var(--grad-accent);
            opacity: 0;
            transform: scaleX(1);
            transform-origin: left center;
            transition: opacity 260ms cubic-bezier(0.4, 0, 0.2, 1);
        }

        &:hover {
            border-color: color-mix(in oklch, var(--border-dim) 80%, transparent);
            transform: translateY(-3px);

            &::before {
                opacity: 1;
                animation: small-card-top-sweep 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
            }

            & .icon {
                color: var(--text-ink);
                transform: translateX(1px) scale(1.18);
            }

            & .icon .pds-logo,
            & .icon :is(.muted, .fine, .dot) {
                opacity: 1;
            }
        }

        & .name {
            font-size: var(--text-base);
            font-weight: var(--fw-heading);
            letter-spacing: -0.01em;
            line-height: 1.2;
        }

        & .icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.6rem;
            height: 1.6rem;
            color: var(--text-muted);
            transition: color 260ms ease, transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);

            & > svg {
                width: 100%;
                height: auto;
                fill: currentColor;
            }

            & .pds-logo,
            & .pds-logo svg {
                width: 100%;
                height: 100%;
            }

            & .pds-logo--email svg {
                overflow: visible;
                fill: none;
                stroke: currentColor;
                stroke-width: 1.6;
                stroke-linecap: round;
                stroke-linejoin: round;
            }

            & :is(.muted, .fine, .dot) {
                opacity: 0;
                transition: opacity 260ms ease;
            }

            & .accent {
                stroke: var(--accent-green);
            }

            & .dot {
                fill: currentColor;
                stroke: none;
            }
        }

        & .copy {
            display: flex;
            flex-direction: column;
            gap: 0.22rem;
        }

        & .id {
            color: var(--text-muted-2);
            font-size: var(--text-xs);
            line-height: 1.3;
            overflow-wrap: anywhere;
        }
    }

    .small-card--compact {
        gap: 0.75rem;
        padding: 0.85rem 0.9rem;

        & .icon {
            width: 1.25rem;
            height: 1.25rem;
        }

        & .id {
            font-size: var(--text-2xs);
            overflow-wrap: normal;
        }
    }

    .nav-card--project {
        --nav-card-pad-block: clamp(1.6rem, 2.6vw, 2.1rem);
        --nav-card-pad-inline: clamp(1.6rem, 2.6vw, 2.1rem);

        & .mark {
            width: clamp(2.6rem, 4.4vw, 3.4rem);
        }

        & .logo {
            width: 86%;
            filter: grayscale(1) opacity(0.7);
        }

        &:hover .logo {
            filter: none;
        }
    }

    .card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 1.2rem;

        /* A row inside a card gives up its own positioning. The link a row
           stretches covers its nearest positioned ancestor, and on a card that
           has to be the card, media included, or only the title answers. */
        & .entry {
            position: static;
        }
    }

    .card__media {
        display: block;
        position: relative;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        border: 1px solid var(--border-card);
        border-radius: var(--radius-sm);
        background:
            linear-gradient(165deg, color-mix(in oklch, var(--bg-elevated) 50%, transparent), transparent 70%),
            color-mix(in oklch, var(--bg-surface) 26%, transparent);
        transition: border-color 300ms ease, translate 300ms ease;

        &::before {
            content: '';
            position: absolute;
            inset: 0 0 auto;
            height: 0.25rem;
            background: var(--grad-accent);
            opacity: 0;
            transform: scaleX(0);
            transform-origin: left center;
            transition: opacity 260ms cubic-bezier(0.4, 0, 0.2, 1), transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
        }

        & .illu {
            padding: 8%;
            rotate: none;
        }

        & svg {
            display: block;
            width: 100%;
            height: 100%;
        }
    }

    .card:hover .card__media {
        border-color: color-mix(in oklch, var(--border-dim) 80%, transparent);
    }

    .card:hover .card__media::before {
        opacity: 1;
        transform: scaleX(1);
    }

    @media (prefers-reduced-motion: no-preference) {
        .card:hover .card__media {
            translate: 0 -4px;
        }
    }

    @keyframes small-card-top-sweep {
        from { transform: scaleX(0); }
        to { transform: scaleX(1); }
    }

@keyframes nav-card-top-sweep {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.page-nav .nav-card {
    & .mark {
        width: clamp(1.75rem, 3vw, 2.25rem);
    }

    & .logo {
        width: 88%;

        & .illu :is(path, circle, line, rect, ellipse, polyline, polygon) {
            stroke-width: 1.1;
        }

        & .illu .muted {
            stroke-width: 0.85;
        }

        & .illu :is(.main, .accent).thick {
            stroke-width: 1.6;
        }
    }
}
}
@layer components {
    .timeline-year {
        display: grid;
        grid-template-columns: minmax(0, clamp(3.5rem, 8vw, 7rem)) minmax(0, 1fr);
        gap: clamp(1.25rem, 3vw, 2.5rem);
        align-items: start;

        & + & {
            margin-top: clamp(1rem, 2vw, 1.5rem);
        }
    }

    .timeline-year__label {
        position: sticky;
        top: calc(var(--nav-height) + clamp(1.5rem, 4vh, 3rem));
        margin: 0;
        color: var(--text-muted-2);
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        font-variant-numeric: tabular-nums;
        font-weight: inherit;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    .entry-note {
        color: var(--text-muted);
        line-height: 1.7;
    }

    @media (width <= 640px) {
        .timeline-year {
            grid-template-columns: 1fr;
        }

        .timeline-year__label {
            position: static;
        }
    }
}
@layer components {
    :is(.illu, .pds-logo) {
        display: block;
        position: relative;
        width: 100%;

        & svg {
            display: block;
            width: 100%;
            height: auto;
        }
    }

    .illu {
        --illus-main: color-mix(in oklch, var(--text-ink) 86%, oklch(100% 0 0));
        --illus-muted: color-mix(in oklch, var(--text-muted-2) 55%, transparent);
        --illus-pen: 1.5px;

        rotate: -3.5deg;

        .page-split__rail & { --illus-pen: 3px; }
        .article-visual & { --illus-pen: 2px; }

        & svg {
            overflow: visible;
        }

        & :is(path, circle, line, rect, ellipse, polyline, polygon) {
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: var(--illus-pen);
            vector-effect: non-scaling-stroke;
        }

        & :is(path, circle, line, rect, ellipse, polyline, polygon):not([fill]) {
            fill: none;
        }

        & .main {
            stroke: var(--illus-main);
        }

        & :is(.main, .accent).thick {
            stroke-width: calc(var(--illus-pen) * 1.52);
        }

        & :is(.muted, .fine) {
            stroke: var(--illus-muted);
        }

        & .muted {
            stroke-width: calc(var(--illus-pen) * 0.71);
        }

        & .fine {
            stroke-width: calc(var(--illus-pen) * 0.5);
            opacity: 0.6;
        }

        & .dot {
            stroke: none;

            &:not([fill]) { fill: var(--illus-main); }

            &.muted:not([fill]) {
                fill: var(--illus-muted);
            }
        }

        & .accent:not([stroke]) {
            stroke: var(--illus-accent, var(--accent-purple));
        }
    }

    .pds-logo {
        color: var(--text-ink);
        transition: color 260ms ease, opacity 320ms ease;

        & svg {
            aspect-ratio: 1;
            overflow: hidden;
            /* Each mark sits differently inside its own viewBox, so a shared
               box does not make them look the same size. This is the per-logo
               correction, alongside --brand. */
            scale: var(--logo-scale, 1);
        }

        [data-card]:hover & {
            color: var(--brand, var(--text-ink));
        }
    }

    :is(.pds-logo, .illu)[data-mono] {
        opacity: 0.5;
    }

    .pds-logo--twig { --brand: oklch(72% 0.17 140); }
    .pds-logo--playwright-php { --brand: oklch(70% 0.17 150); }
    .pds-logo--php-cs-fixer { --brand: oklch(62% 0.14 285); }
    .pds-logo--symfony-ux,
    .pds-logo--symfony { --brand: var(--text-ink); }
    .pds-logo--phpcolor { --brand: oklch(70% 0.19 320); --logo-scale: 1.15; }
    .pds-logo--atelier-svg { --brand: oklch(74% 0.15 75); }
    .pds-logo--zenstruck { --brand: oklch(68% 0.16 25); }
}
@layer components {
    .nav-logo {
        color: var(--text-muted);
        font-size: var(--text-xs);
        font-weight: 300;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        transition: color 250ms ease-out;

        &:hover {
            color: var(--text-ink);
        }

        & .logo-tld {
            opacity: 0.55;
            transition: opacity 400ms var(--ease-smooth);
        }

        &:hover .logo-tld {
            opacity: 1;
        }
    }

    .menu-link {
        color: var(--text-muted);
        transition: color 180ms ease;

        &:hover,
        &.active {
            color: var(--text-ink);
        }
    }

    @media (width >= 1024px) {
        .site-menu {
            position: fixed;
            font-size: var(--text-xs);
            top: calc(var(--nav-row-center) - 0.5lh);
            right: calc(var(--spacing-gutter) + var(--nav-toggle-width) + 2rem);
            z-index: 102;
        }

        .menu-aside {
            display: none;
        }

        .menu-nav {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 1.15rem;
        }

        .menu-link {
            font-size: var(--text-xs);
            font-weight: 300;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }
    }

    @media (width <= 1023px) {
        .site-menu {
            position: fixed;
            inset: 0;
            z-index: 200;
            background: var(--bg-canvas);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 320ms var(--ease-smooth), visibility 320ms linear;

            &.active {
                opacity: 1;
                visibility: visible;
                pointer-events: auto;

                & .menu-content {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
        }

        .menu-content {
            position: absolute;
            inset: 0;
            display: grid;
            grid-template-columns: 1fr 1fr;
            padding: var(--nav-height) var(--spacing-gutter) var(--spacing-gutter);
            opacity: 0;
            transform: translateY(0.875rem);
            transition: opacity 300ms var(--ease-smooth), transform 440ms var(--ease-spring);
            pointer-events: none;
        }

        .menu-nav {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: start;
            gap: 0.5rem;
            padding-left: 10%;
        }

        .menu-link,
        .menu-social a {
            pointer-events: auto;
        }

        .menu-link {
            display: inline-block;
            font-size: var(--display-md);
            font-weight: 100;
            letter-spacing: -0.02em;
            transition: color 180ms ease, transform 360ms var(--ease-spring);

            &:hover {
                transform: translateX(0.5rem);
            }
        }

        .menu-aside {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-end;
            padding-bottom: 4rem;
            gap: 2rem;
        }

        .menu-social {
            display: flex;
            gap: 1.5rem;

            & a {
                color: var(--text-muted);
                transition: color 180ms ease;

                &:hover { color: var(--text-ink); }
            }

            & svg { width: 1.5rem; height: 1.5rem; }
        }

        body:has(#site-menu.active) .site-nav {
            z-index: 201;
        }

        html.menu-open,
        html.menu-open body {
            overflow: hidden;
        }

        @media (prefers-reduced-motion: no-preference) {
            @supports (transition-behavior: allow-discrete) {
                .site-menu {
                    display: none;
                    transition:
                        opacity 320ms var(--ease-smooth),
                        visibility 320ms linear,
                        display 320ms allow-discrete;

                    &.active {
                        display: block;

                        @starting-style {
                            opacity: 0;
                        }

                        & .menu-content {
                            @starting-style {
                                opacity: 0;
                                transform: translateY(0.875rem);
                            }
                        }
                    }
                }
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .site-menu,
            .menu-content,
            .menu-link,
            .menu-social a {
                transition: none !important;
            }

            .menu-content {
                transform: none;
            }
        }

        @media (width <= 768px) {
            .menu-content {
                grid-template-columns: 1fr;
                padding-bottom: 5rem;
                place-content: center;
                gap: 2.5rem;
            }
            .menu-nav {
                padding-left: 0;
                padding-top: 0;
                justify-content: center;
                align-items: center;
                gap: 0.5rem;
            }
            .menu-aside {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding-bottom: 0;
                gap: 2rem;
            }
            .menu-social {
                flex-direction: row;
                gap: 1.5rem;

                & svg {
                    width: 1.375rem;
                    height: 1.375rem;
                }
            }
        }
    }
}

@layer motion {
    @keyframes gradient-rotate {
        to { filter: blur(4px) hue-rotate(360deg); }
    }

    :root {
        --route-vt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
        --route-vt-duration-root: 220ms;
        --route-vt-duration-hero: 300ms;
        --scroll-reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
        --scroll-reveal-distance: clamp(0.875rem, 2.1vw, 1.625rem);
    }

    [data-list-card] {
        transition: var(--list-card-transition, transform 340ms var(--route-vt-ease), opacity 340ms var(--route-vt-ease));
    }

    .page-split__rail {
        --illu-scroll-travel: min(7vh, 3.5rem);
    }

    @media (prefers-reduced-motion: no-preference) {
        @supports (animation-timeline: scroll()) {
            .page-split__rail > .hero-smn {
                animation: illu-scroll-drift linear both;
                animation-timeline: scroll(root block);
                animation-range: 0% 100%;
                will-change: transform, opacity;
            }
        }

        @supports (view-transition-name: none) {
            @view-transition {
                navigation: auto;
            }

            ::view-transition {
                pointer-events: none;
            }

            ::view-transition-group(root) {
                animation-duration: var(--route-vt-duration-root);
                animation-timing-function: var(--route-vt-ease);
            }

            ::view-transition-old(root),
            ::view-transition-new(root) {
                animation-duration: var(--route-vt-duration-root);
                animation-timing-function: var(--route-vt-ease);
            }

            [data-vt*="-mark-"] { view-transition-class: route-mark; }
            [data-vt*="-title-"] { view-transition-class: route-title; }

            ::view-transition-group(.route-mark),
            ::view-transition-group(.route-title) {
                animation-duration: var(--route-vt-duration-hero);
                animation-timing-function: var(--route-vt-ease);
            }

            ::view-transition-old(.route-mark),
            ::view-transition-new(.route-mark),
            ::view-transition-old(.route-title),
            ::view-transition-new(.route-title) {
                animation: none;
                mix-blend-mode: normal;
                height: 100%;
                overflow: clip;
            }
        }

        @supports (animation-timeline: view()) {
            :where(
                [data-list-card],
                .entry-list > *,
                .article-content > *
            ) {
                animation-name: scroll-reveal-up;
                animation-duration: 1s;
                animation-timing-function: var(--scroll-reveal-ease);
                animation-fill-mode: both;
                animation-timeline: view(block);
                animation-range: entry 8% cover 30%;
            }

            :where(
                [data-list-card],
                .entry-list > *
            ) {
                contain: layout style;

                &:nth-child(2n) {
                    animation-range: entry 10% cover 34%;
                }

                &:nth-child(3n) {
                    animation-range: entry 12% cover 36%;
                }
            }
        }
    }

    [data-route-title] {
        transform-origin: left center;
        position: relative;
        display: inline-block;
    }

    @keyframes illu-scroll-drift {
        from {
            transform: translateY(calc(var(--illu-scroll-travel) / -2));
            opacity: 0.7;
        }
        35% {
            opacity: 0.9;
        }
        to {
            transform: translateY(calc(var(--illu-scroll-travel) / 2));
            opacity: 0.7;
        }
    }

    @keyframes scroll-reveal-up {
        from {
            opacity: 0.12;
            transform: translateY(var(--scroll-reveal-distance)) scale(0.985);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .page-split__rail > .hero-smn {
            animation: none !important;
            transform: none !important;
            opacity: 1 !important;
            will-change: auto;
        }

        [data-list-card] {
            animation: none !important;
            transition: none !important;
            transform: none !important;
        }

        .site-nav > * {
            transition: none !important;
        }

        @supports (animation-timeline: view()) {
            :where(
                [data-list-card],
                .entry-list > *,
                .article-content > *
            ) {
                animation: none !important;
                opacity: 1 !important;
                transform: none !important;
            }
        }

        @supports (view-transition-name: none) {
            ::view-transition-group(root),
            ::view-transition-old(root),
            ::view-transition-new(root) {
                animation-duration: 1ms;
            }
        }
    }

    @media (width <= 1024px) {
        .page-split__rail > .hero-smn {
            animation: none;
            transform: none;
            will-change: auto;
        }
    }
}