/* Copyright © 2026 Patrick Angle. All rights reserved. */

@layer reset, tokens, base, components, utilities;

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

    body,
    h1,
    h2,
    h3,
    h4,
    p,
    figure,
    blockquote,
    dl,
    dd,
    ol,
    ul {
        margin: 0;
        padding: 0;
    }

    ol,
    ul {
        list-style: none;
    }

    img,
    svg {
        display: block;
        max-inline-size: 100%;
    }

    a {
        color: inherit;
        text-decoration-thickness: 0.08em;
        text-underline-offset: 0.18em;
    }

    button,
    input,
    textarea {
        font: inherit;
        color: inherit;
    }
}

@layer tokens {
    /* -OC Format Collage carries no weight axis, so the three variation axes below are the only way to change its
       presentation. Synthetic bolding and obliquing are disabled everywhere to keep the drawn shapes intact. */
    @font-face {
        font-family: "OC Format Collage";
        src: url("../fonts/OCFormatCollageVariable/font.woff2") format("woff2"),
             url("../fonts/OCFormatCollageVariable/font.woff") format("woff");
        font-display: block;
    }

    /* How far an element's variation axes are pushed toward the top of their ranges, 0 at rest and 1 at full. It is
       registered so it can be transitioned; the axis values themselves stay plain `calc()` expressions that
       re-resolve from it, which keeps any other input to those axes — the header's scroll progress — out of the
       transition. Shared by the wordmark's letters and the footer heading. */
    @property --axis-boost {
        syntax: "<number>";
        inherits: false;
        initial-value: 0;
    }

    :root {
        --collage-font-family: "OC Format Collage", "Avenir Next", "Helvetica Neue", sans-serif;

        --ink-color: #0C0B0F;
        --ink-soft-color: #1A181F;
        --paper-color: #FAF6EE;

        --color-red: #FE4C54;
        --color-orange: #FF8C2E;
        --color-yellow: #FFC721;
        --color-green: #47AB59;
        --color-teal: #21B6B8;
        --color-blue: #2C5BE0;
        --color-purple: #B26CE0;
        --color-pink: #FF83B6;

        --page-background-color: var(--ink-color);
        --page-text-color: var(--paper-color);
        --page-accent-color: var(--color-red);
        --page-accent-text-color: var(--ink-color);
        --page-muted-text-color: color-mix(in srgb, var(--page-text-color) 62%, transparent);
        --page-rule-color: color-mix(in srgb, var(--page-text-color) 22%, transparent);

        /* The heading a dark `collage-block` wears. Each palette picks the hue that carries against its own ground, so
           an individual block never has to name a color. */
        --dark-block-heading-color: var(--color-yellow);

        /* Body leading, named because a heading small enough to read as running text borrows it back. */
        --body-line-height: 1.55;

        --gutter-inline-size: clamp(1.25rem, 5vw, 4.5rem);
        --content-max-inline-size: 78rem;
        /* The gutter sits inside the 78rem wrapper, so the content track subtracts it back out to land on the same
           measure the design was drawn against. */
        --content-inline-size: calc(var(--content-max-inline-size) - 2 * var(--gutter-inline-size));
        --prose-max-inline-size: 34rem;
        --section-block-padding: clamp(1rem, 10vw, 2rem);

        /* The header floats, so nothing in the flow reserves room for it and every masthead has to clear it itself.
           One row of wordmark-and-nav is all it is until `chrome.css` drops the nav beneath the wordmark, which is
           the whole of the increase below: a second row of type, plus the air a kicker wants under the pill. */
        --header-clearance-block-size: 7.25rem;

        --block-corner-radius: 1.5rem;
        --chip-corner-radius: 999px;
    }

    /* The width at which `chrome.css` stacks the header, and so the width at which the pill grows a second row. The
       extra half-rem over the pill's own depth is for the kickers: they are rotated, so a wide one carries its last
       word a good deal higher than its baseline, and the widest of them is what this leaves room for. */
    @media (width < 52rem) {
        :root {
            --header-clearance-block-size: 10.75rem;
        }
    }

    /* Each page claims its own ground color; the floating header stays ink-on-any-ground so the wordmark reads
       identically across the whole site. */

    /* Warm charcoal rather than the near-black `--ink-color`: dark enough to carry the full spectrum, light enough
       that the ink header pill and the footer read as their own masses against it. */
    .palette-spectrum {
        --page-background-color: #2E2A25;
        --page-text-color: var(--paper-color);
        --page-accent-color: var(--color-yellow);
        --page-accent-text-color: var(--ink-color);
    }

    .palette-gel {
        --page-background-color: #1B1360;
        --page-text-color: #F2ECFF;
        --page-accent-color: var(--color-teal);
        --page-accent-text-color: var(--ink-color);
    }

    /* The only palette that accents with ink, which would disappear against the ink header pill — inside the header
       the ground color stands in as the page's signature. */
    .palette-ember {
        --page-background-color: #FF6A2B;
        --page-text-color: var(--ink-color);
        --page-accent-color: var(--ink-color);
        --page-accent-text-color: var(--color-yellow);
        --header-accent-color: var(--page-background-color);
    }

    .palette-moss {
        --page-background-color: #16693C;
        --page-text-color: #EFFBEF;
        --page-accent-color: var(--color-yellow);
        --page-accent-text-color: var(--ink-color);
        --dark-block-heading-color: var(--color-teal);
    }

    .palette-graphite {
        --page-background-color: #131215;
        --page-text-color: var(--paper-color);
        --page-accent-color: var(--color-yellow);
        --page-accent-text-color: var(--ink-color);
    }

    .palette-lagoon {
        --page-background-color: #0F8A8F;
        --page-text-color: #F6FFFE;
        --page-accent-color: var(--color-pink);
        --page-accent-text-color: var(--ink-color);
        --dark-block-heading-color: var(--color-pink);
    }

    /* Ripe raspberry rather than the cooler `--color-pink`, with the accent in `--color-green` for the basil that
       shares the page. */
    .palette-raspberry {
        --page-background-color: #93103F;
        --page-text-color: #FFF2F6;
        --page-accent-color: var(--color-green);
        --page-accent-text-color: var(--ink-color);
    }
}

@layer base {
    html {
        scroll-behavior: smooth;
        /* The floating header overlaps the top of the viewport, so in-page anchors clear it. */
        scroll-padding-block-start: 9rem;
    }

    body {
        background-color: var(--page-background-color);
        color: var(--page-text-color);
        font-family: var(--collage-font-family);
        font-size: clamp(1rem, 0.94rem + 0.28vw, 1.15rem);
        font-synthesis: none;
        line-height: var(--body-line-height);
        min-block-size: 100dvh;
        overflow-x: hidden;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }

    main {
        display: block;
    }

    p {
        max-inline-size: var(--prose-max-inline-size);
    }

    strong {
        /* No weight axis exists, so emphasis is carried by color rather than by a heavier cut. */
        color: var(--page-accent-color);
    }

    /* The whole site is set in one typeface, so inline code borrows a tinted plate instead of a monospace cut. */
    code {
        background-color: color-mix(in srgb, var(--page-accent-color) 22%, transparent);
        border-radius: 0.3em;
        font-family: inherit;
        padding: 0.05em 0.35em;
    }

    ::selection {
        background-color: var(--page-accent-color);
        color: var(--page-accent-text-color);
    }

    :focus-visible {
        outline: 3px solid var(--page-accent-color);
        outline-offset: 3px;
    }
}

@layer components {
    /* The specimen's rotated, underlined micro-label, shared by the page kickers and the footer's column titles. */
    .kicker {
        align-self: flex-start;
        border-block-end: 2px solid currentColor;
        display: inline-block;
        font-size: 0.75rem;
        letter-spacing: 0.22em;
        max-inline-size: none;
        padding-block-end: 0.2em;
        rotate: -3deg;
        text-transform: uppercase;
        transform-origin: 0 100%;
    }
}

@layer utilities {
    .visually-hidden {
        block-size: 1px;
        clip-path: inset(50%);
        inline-size: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
    }

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

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