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

@layer base {
    :root {
        --black: oklch(0.08 0 0);
        --white: oklch(0.95 0.015 70);
        --accent: oklch(0.56 0.24 27);
        --chrome: #C0C0C0;
        --chrome-light: #DFDFDF;
        --chrome-dark: #808080;
        --chrome-darker: #404040;
        --ed-bg: #FFF8F0;
        --ed-gutter: #F0EDE5;
        --syn-tag: #8B1A1A;
        --syn-attr: #2E4A7A;
        --syn-val: #1A6B3A;
        --syn-txt: #333;
        --syn-dec: #6A3A8A;
        --syn-ln: #999;
        --highlight: oklch(0.95 0.05 80);
        /* Stack colors */
        --html: oklch(0.78 0.14 165);
        --http: oklch(0.72 0.14 250);
        --server: oklch(0.72 0.12 300);
        --html-dim: color-mix(in oklch, var(--html) 20%, transparent);
        --http-dim: color-mix(in oklch, var(--http) 20%, transparent);
        --server-dim: color-mix(in oklch, var(--server) 20%, transparent);
        --mono: 'IBM Plex Mono', 'Consolas', monospace;
    }

    html, body { height: 100%; }

    body {
        background: var(--black);
        color: var(--white);
        font-family: 'Instrument Serif', Georgia, serif;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 6vh 6vw;
        overflow: hidden;
        position: relative;

        &::before {
            content: '';
            position: fixed;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
            pointer-events: none;
            z-index: 20;
        }
    }

    .mark {
        position: fixed;
        width: 22px;
        height: 22px;
        opacity: 0.18;

        &::before, &::after {
            content: '';
            position: absolute;
            background: var(--white);
        }
        &::before { width: 1px; height: 100%; left: 50%; }
        &::after  { height: 1px; width: 100%; top: 50%; }
    }
    .mark--tl { top: 3vh; left: 3vw; }
    .mark--tr { top: 3vh; right: 3vw; }
    .mark--bl { bottom: 3vh; left: 3vw; }
    .mark--br { bottom: 3vh; right: 3vw; }

    .wordmark { position: relative; z-index: 1; }

    .line {
        display: block;
        font-size: clamp(4.5rem, 19vw, 24rem);
        line-height: 0.82;
        letter-spacing: -0.04em;
        font-weight: 400;
    }
    .line--hyper {
        color: var(--accent);
        font-style: italic;
    }
    .line--media {
        font-size: clamp(2.2rem, 8vw, 11rem);
        padding-left: 0.05em;

        & .dot {
            color: var(--accent);
            margin-right: -0.02em;
        }
    }

    .rule {
        width: 0;
        height: 1px;
        background: var(--accent);
        margin: 5vh 0 2.5vh;
    }

    .tagline {
        font-size: clamp(0.65rem, 1.2vw, 0.95rem);
        letter-spacing: 0.2em;
        text-transform: uppercase;
        font-style: italic;
        text-wrap: balance;
    }

    .colophon {
        position: fixed;
        bottom: 3vh;
        left: 6vw;
        font-family: var(--mono);
        font-size: 0.6rem;
        letter-spacing: 0.1em;
        color: var(--white);
        opacity: 0.2;
        text-decoration: none;
        transition: opacity 0.3s ease;

        &:hover {
            opacity: 0.5;
        }
    }
}