@layer settings, base, layout, components, effects, responsive;

@layer settings {
    @font-face {
        font-family: "Space Grotesk";
        font-style: normal;
        font-weight: 100 900;
        font-display: swap;
        src: url("fonts/SpaceGrotesk-subset.woff2?v=20260505") format("woff2");
    }

    @font-face {
        font-family: "PNTBR Mono";
        font-style: normal;
        font-weight: 100 900;
        font-display: swap;
        src: url("fonts/NotoSansMono-subset.woff2?v=20260505") format("woff2");
    }

    @font-face {
        font-family: "Material Symbols Outlined";
        font-style: normal;
        font-weight: 400;
        font-display: block;
        src: url("fonts/MaterialSymbolsOutlined-subset.woff2?v=20260505") format("woff2");
    }

    :root {
        --surface: #f9f9f9;
        --surface-container: #eeeeee;
        --surface-container-highest: #e2e2e2;
        --on-surface: #1a1c1c;
        --on-surface-variant: #444748;
        --outline: #686c6c;
        --outline-variant: #c4c7c7;
        --primary: #000000;
        --on-primary: #ffffff;
        --error: #ba1a1a;
        --error-container: #ffdad6;
        --on-error-container: #93000a;
        --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
        --font-body: "PNTBR Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        --xs: 4px;
        --sm: 8px;
        --md: 16px;
        --lg: 32px;
        --xl: 64px;
        --gutter: 24px;
        --page-max: 1440px;
    }
}

@layer base {
    * {
        box-sizing: border-box;
    }

    html {
        background: var(--surface);
    }

    body {
        min-height: 100vh;
        margin: 0;
        background: var(--surface);
        color: var(--on-surface);
        font-family: var(--font-body);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.6;
        letter-spacing: 0;
        text-rendering: geometricPrecision;
        -webkit-font-smoothing: antialiased;
    }

    img {
        max-width: 100%;
    }

    a {
        color: inherit;
        text-decoration-thickness: 1px;
        text-underline-offset: 4px;
    }

    a:focus-visible,
    button:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 4px;
    }

    [tabindex="-1"]:focus {
        outline: none;
    }

    p,
    h1,
    h2,
    h3 {
        margin: 0;
    }

    p + p {
        margin-top: var(--md);
    }

    .u-sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        border: 0;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@layer layout {
    .l-shell {
        width: min(calc(100% - 64px), var(--page-max));
        margin-inline: auto;
    }

    .l-main {
        padding-block: var(--xl);
    }

    .l-split {
        display: grid;
        grid-template-columns: minmax(160px, 4fr) minmax(0, 8fr);
        gap: var(--gutter);
        padding-block: var(--xl);
    }

    .l-split__rail {
        border-right: 1px solid var(--primary);
        padding-right: var(--lg);
    }

    .l-panel-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--gutter);
        margin-bottom: var(--xl);
    }

    .l-trace-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--gutter);
    }
}

@layer components {
    .c-topbar {
        position: sticky;
        top: 0;
        z-index: 10;
        border-bottom: 1px solid var(--primary);
        background: var(--surface);
    }

    .c-topbar__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 72px;
        gap: var(--md);
    }

    .c-brand {
        min-width: 0;
        font-family: var(--font-display);
        font-size: 18px;
        font-weight: 700;
        line-height: 1.1;
        text-transform: uppercase;
    }

    .c-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        border: 1px solid transparent;
        padding: var(--xs) var(--sm);
        color: var(--on-surface-variant);
        font-family: var(--font-body);
        font-size: 12px;
        line-height: 1.2;
        text-transform: uppercase;
        text-decoration: none;
    }

    .c-button:hover {
        border-color: var(--primary);
        background: var(--primary);
        color: var(--on-primary);
    }

    .u-skip-link {
        position: absolute;
        top: var(--md);
        left: var(--md);
        z-index: 100;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        border: 2px solid var(--primary);
        background: var(--surface);
        color: var(--on-surface);
        padding: var(--xs) var(--md);
        font-family: var(--font-body);
        font-size: 14px;
        line-height: 1.2;
        text-decoration: none;
        transform: translateY(calc(-100% - var(--lg)));
    }

    .u-skip-link:focus-visible {
        transform: translateY(0);
    }

    .c-kicker {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        padding: var(--xs) var(--sm);
        color: var(--outline);
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .c-hero {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr);
        align-items: center;
        gap: var(--gutter);
        padding-bottom: var(--xl);
        border-bottom: 1px solid var(--primary);
    }

    .c-hero__copy {
        min-width: 0;
        max-width: 820px;
        overflow-wrap: break-word;
    }

    .c-hero__title {
        margin-top: var(--md);
        font-family: var(--font-display);
        font-size: 48px;
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: 0;
    }

    .c-hero__role {
        max-width: 760px;
        margin-top: var(--sm);
        color: var(--on-surface-variant);
        font-family: var(--font-display);
        font-size: 32px;
        font-weight: 600;
        line-height: 1.2;
    }

    .c-hero__role-line {
        display: block;
    }

    .c-hero__motto {
        margin-top: var(--lg);
        border-left: 2px solid var(--primary);
        padding: var(--xs) 0 var(--xs) var(--md);
        color: var(--on-surface-variant);
        font-style: italic;
    }

    .c-hero__intro {
        max-width: 720px;
        margin-top: var(--lg);
        color: var(--on-surface-variant);
    }

    .c-hero__actions {
        margin-top: var(--lg);
    }

    .c-hero__visual {
        min-width: 0;
        justify-self: end;
        width: min(100%, 458px);
    }

    .c-portrait {
        position: relative;
        border: 2px solid var(--primary);
        background: var(--surface-container-highest);
        padding: var(--xs);
    }

    .c-portrait::before,
    .c-portrait::after,
    .c-portrait__corners::before,
    .c-portrait__corners::after {
        position: absolute;
        width: 6px;
        height: 6px;
        background: var(--primary);
        content: "";
    }

    .c-portrait::before {
        top: -2px;
        left: -2px;
    }

    .c-portrait::after {
        top: -2px;
        right: -2px;
    }

    .c-portrait__corners::before {
        bottom: -2px;
        left: -2px;
    }

    .c-portrait__corners::after {
        right: -2px;
        bottom: -2px;
    }

    .c-portrait__image {
        display: block;
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        filter: grayscale(1);
    }

    .c-statement {
        min-width: 0;
        max-width: 980px;
        overflow-wrap: break-word;
    }

    .c-statement__lead {
        font-family: var(--font-display);
        font-size: 32px;
        font-weight: 600;
        line-height: 1.2;
    }

    .c-statement__support {
        margin-top: var(--lg);
        color: var(--on-surface-variant);
    }

    .c-panel {
        position: relative;
        display: flex;
        min-height: 100%;
        border: 1px solid var(--primary);
        background: var(--surface);
        flex-direction: column;
    }

    .c-panel::before {
        position: absolute;
        top: -1px;
        left: -1px;
        width: 4px;
        height: 4px;
        background: var(--primary);
        content: "";
    }

    .c-panel__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sm);
        min-height: 40px;
        border-bottom: 1px solid var(--primary);
        background: var(--surface-container);
        padding: var(--sm);
    }

    .c-panel__title {
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .c-panel__icon {
        color: var(--on-surface-variant);
    }

    .c-panel__body {
        min-width: 0;
        padding: var(--lg);
        overflow-wrap: break-word;
    }

    .c-panel__body p {
        max-width: 72ch;
        color: var(--on-surface-variant);
    }

    .c-panel__body p:first-child {
        color: var(--on-surface);
    }

    .c-redaction {
        display: inline-block;
        border: 1px solid var(--primary);
        background: var(--primary);
        color: var(--on-primary);
        padding: 0 6px 1px;
        line-height: 1.15;
        transform: rotate(-.8deg);
        transform-origin: center;
    }

    .c-icon {
        display: block;
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
        fill: none;
        stroke: currentColor;
        stroke-linecap: square;
        stroke-linejoin: miter;
        stroke-width: 1.75;
    }

    .c-symbol {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
        font-family: "Material Symbols Outlined";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-feature-settings: "liga";
        font-feature-settings: "liga";
        -webkit-font-smoothing: antialiased;
    }

    .c-alert {
        position: relative;
        margin-bottom: var(--xl);
        border: 1px solid var(--error);
        background: var(--error-container);
        padding: var(--lg);
        color: var(--on-error-container);
    }

    .c-alert__tag {
        position: absolute;
        top: 0;
        right: 0;
        border-bottom: 1px solid var(--error);
        border-left: 1px solid var(--error);
        background: var(--error);
        padding: var(--sm);
        color: #ffffff;
        font-size: 12px;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .c-alert__title {
        max-width: calc(100% - 110px);
        color: var(--error);
        font-family: var(--font-display);
        font-size: 32px;
        font-weight: 600;
        line-height: 1.2;
    }

    .c-alert__grid {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        gap: var(--md);
        margin-top: var(--lg);
    }

    .c-alert__content {
        min-width: 0;
        overflow-wrap: break-word;
    }

    .c-alert__icon {
        color: var(--error);
    }

    .c-trace-card {
        min-width: 0;
        border-top: 1px solid var(--primary);
        padding-top: var(--md);
        overflow-wrap: break-word;
    }

    .c-trace-card__title {
        margin-bottom: var(--md);
        font-family: var(--font-display);
        font-size: 32px;
        font-weight: 600;
        line-height: 1.2;
    }

    .c-trace-card p {
        color: var(--on-surface-variant);
    }

    .c-footer {
        border-top: 1px solid var(--primary);
        background: var(--surface);
        color: var(--on-surface-variant);
        font-size: 12px;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .c-footer__inner {
        display: flex;
        justify-content: space-between;
        gap: var(--md);
        padding-block: var(--lg);
    }

    .c-footer strong {
        color: var(--on-surface);
    }

    .c-footer a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

@layer effects {
    .u-text-glitch-source {
        position: relative;
        isolation: isolate;
        transform-origin: 48% 52%;
        overflow-anchor: none;
    }

    .u-text-glitch-source.is-electric-glitching {
        color: transparent !important;
        animation: electric-text-shiver 180ms steps(2, end);
    }

    .u-text-glitch__ghost,
    .u-text-glitch__trace {
        position: absolute;
        z-index: 2;
        pointer-events: none;
        user-select: none;
    }

    .u-text-glitch__ghost {
        inset: 0;
        display: block;
        width: 100%;
        color: var(--glitch-ink, var(--on-surface));
        font: inherit;
        letter-spacing: inherit;
        line-height: inherit;
        text-align: inherit;
        text-transform: inherit;
        white-space: inherit;
        overflow-wrap: inherit;
        opacity: 0;
        text-shadow:
            1px 0 0 rgba(0, 213, 213, 0.38),
            -1px 0 0 rgba(0, 0, 0, 0.28);
        transform: translate3d(0, 0, 0);
        animation: electric-vowel-drop 320ms steps(1, end) both;
    }

    .u-text-glitch__trace {
        top: var(--glitch-trace-y, 58%);
        left: var(--glitch-trace-x, -2%);
        width: var(--glitch-trace-w, 42%);
        height: 1px;
        background: rgba(0, 213, 213, 0.62);
        background: color-mix(in srgb, #00d5d5 68%, var(--glitch-ink, var(--primary)));
        box-shadow: 5px 0 0 rgba(0, 0, 0, 0.72);
        opacity: 0;
        transform: translate3d(-3px, 0, 0) scaleX(0.25);
        transform-origin: left center;
        animation: electric-trace 320ms steps(2, end) both;
    }

    @keyframes electric-text-shiver {
        0%,
        100% {
            transform: translate3d(0, 0, 0);
        }

        24% {
            transform: translate3d(1px, 0, 0);
        }

        52% {
            transform: translate3d(-1px, 1px, 0);
        }

        76% {
            transform: translate3d(1px, -1px, 0);
        }
    }

    @keyframes electric-vowel-drop {
        0%,
        100% {
            opacity: 0;
            transform: translate3d(0, 0, 0);
        }

        8% {
            opacity: 0.92;
            transform: translate3d(1px, 0, 0);
        }

        26% {
            opacity: 0.76;
            transform: translate3d(-1px, 0, 0);
        }

        42% {
            opacity: 0.35;
            transform: translate3d(2px, -1px, 0);
        }

        58% {
            opacity: 0.9;
            transform: translate3d(0, 1px, 0);
        }

        74% {
            opacity: 0.18;
            transform: translate3d(-1px, 0, 0);
        }
    }

    @keyframes electric-trace {
        0%,
        100% {
            opacity: 0;
            transform: translate3d(-3px, 0, 0) scaleX(0.25);
        }

        18% {
            opacity: 0.78;
            transform: translate3d(0, 0, 0) scaleX(1);
        }

        44% {
            opacity: 0.32;
            transform: translate3d(3px, 0, 0) scaleX(0.62);
        }

        68% {
            opacity: 0.65;
            transform: translate3d(-1px, 0, 0) scaleX(0.86);
        }
    }
}

@layer responsive {
    @media (max-width: 980px) {
        .c-hero,
        .l-split {
            grid-template-columns: 1fr;
        }

        .c-hero__visual {
            justify-self: start;
        }

        .l-split__rail {
            border-right: 0;
            border-bottom: 1px solid var(--primary);
            padding-right: 0;
            padding-bottom: var(--md);
        }

        .l-panel-grid,
        .l-trace-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 720px) {
        body {
            font-size: 15px;
        }

        .l-shell {
            width: min(calc(100% - 32px), var(--page-max));
        }

        .l-main {
            padding-block: var(--lg);
        }

        .c-topbar__inner {
            min-height: 64px;
        }

        .c-brand {
            font-size: 15px;
        }

        .c-hero {
            padding-bottom: var(--lg);
        }

        .c-hero__title {
            font-size: 36px;
        }

        .c-hero__role,
        .c-statement__lead,
        .c-alert__title,
        .c-trace-card__title {
            font-size: 24px;
        }

        .l-split {
            padding-block: var(--lg);
        }

        .c-panel__body,
        .c-alert {
            padding: var(--md);
        }

        .c-alert__title {
            max-width: none;
            padding-top: var(--lg);
        }

        .c-footer__inner {
            flex-direction: column;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            scroll-behavior: auto !important;
        }

        .u-text-glitch-source,
        .u-text-glitch-source.is-electric-glitching,
        .u-text-glitch__ghost,
        .u-text-glitch__trace {
            animation: none !important;
            transform: none !important;
        }

        .u-text-glitch-source.is-electric-glitching {
            color: inherit !important;
        }

        .u-text-glitch__ghost,
        .u-text-glitch__trace {
            display: none !important;
        }
    }

    @media (forced-colors: active) {
        .c-button:hover,
        .c-button:focus-visible {
            border-color: ButtonText;
            background: ButtonFace;
            color: ButtonText;
        }

        .c-portrait__image {
            filter: none;
        }
    }
}