@layer Reset, Tokens, Base, Frame, Containers, Components, Interaction, Motion, Accessibility;

@layer Reset {
    *, *::before, *::after { box-sizing: border-box; }
    *:not(dialog) { margin: 0; }
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
    }
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    img, picture, video, canvas, svg { display: block; max-inline-size: 100%; block-size: auto; }
    input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
    p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
    p { text-wrap: pretty; }
    h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
    [hidden] { display: none !important; }
}

@layer Tokens {
    :root {
        --Color-Canvas: #000000;
        --Color-Surface: #0c0c0e;
        --Color-Border: #1c1c20;
        --Color-Text: #e8e8ea;
        --Color-Muted: #9a9aa2;
        --Color-Focus: #7aa2ff;
        --Color-Ink: #efe8dc;
        --Color-Ink-Soft: #cfc8bb;
        --Color-Ink-Muted: #9c958a;
        --Color-Accent: #d4b072;
        --Color-Rule: #24221f;
        --Color-Inset: #131210;
        --Color-Stone: #1b1916;
        --Color-Stone-Edge: #2e2a25;
    }
}

@layer Tokens {
    :root {
        --Font-Sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --Font-Serif: "Iowan Old Style", "Palatino Linotype", Palatino, "URW Palladio L", P052, "Book Antiqua", Georgia, "Noto Serif", "DejaVu Serif", "Times New Roman", serif;
        --Font-Mono: ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --Line-Height: 1.5;
        --Text-Label: 0.75rem;
        --Text-Small: 0.875rem;
        --Text-Caption: 0.9375rem;
        --Measure: 40rem;
    }
}

@layer Tokens {
    :root {
        --Gutter: clamp(12px, 4vw, 32px);
        --Container-Max: 72rem;
        --Container-Padding: clamp(16px, 4cqi, 48px);
    }
}

@layer Tokens {
    :root {
        --Safe-Top: env(safe-area-inset-top, 0px);
        --Safe-Right: env(safe-area-inset-right, 0px);
        --Safe-Bottom: env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0px));
        --Safe-Left: env(safe-area-inset-left, 0px);
    }
}

@layer Base {
    :root {
        color-scheme: dark;
        background-color: var(--Color-Canvas);
        color: var(--Color-Text);
        font-family: var(--Font-Sans);
        line-height: var(--Line-Height);
        scrollbar-gutter: stable both-edges;
    }
    body {
        background-color: var(--Color-Canvas);
    }
}

@layer Base {
    h1 {
        font-size: 1.75rem;
        line-height: 1.2;
        font-weight: 650;
        letter-spacing: -0.01em;
    }
    p {
        color: var(--Color-Muted);
    }
}

@layer Frame {
    .Frame {
        container: Frame / inline-size;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 1fr auto;
        min-block-size: 100vh;
        min-block-size: 100svh;
        padding-top: max(var(--Gutter), var(--Safe-Top));
        padding-right: max(var(--Gutter), var(--Safe-Right));
        padding-bottom: max(var(--Gutter), var(--Safe-Bottom));
        padding-left: max(var(--Gutter), var(--Safe-Left));
        overflow-x: clip;
        isolation: isolate;
    }
}

@layer Containers {
    .Container {
        container: Container / inline-size;
        inline-size: min(100%, var(--Container-Max));
        margin-inline: auto;
        padding: var(--Container-Padding);
        border: 2px solid var(--Color-Border);
        border-radius: clamp(12px, 2.5cqi, 28px);
        background-color: var(--Color-Surface);
    }
    .Container > * + * {
        margin-block-start: 0.75em;
    }
    @container Container (inline-size >= 40rem) {
        .Container > * + * {
            margin-block-start: 1em;
        }
    }
}

@layer Components {
    .Numeral-Less {
        color: var(--Color-Accent);
    }
}

@layer Components {
    .Masthead {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.25rem 1rem;
        padding-block-end: 1rem;
        border-block-end: 2px solid var(--Color-Rule);
    }
    .Masthead-Mark {
        font-family: var(--Font-Serif);
        font-size: 1.125rem;
        line-height: 1;
        letter-spacing: 0.12em;
        color: var(--Color-Ink);
    }
    .Masthead-Topic {
        font-size: var(--Text-Label);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--Color-Ink-Muted);
    }
}

@layer Components {
    .Hero {
        margin-block-start: 0;
        padding-block: clamp(2.5rem, 9cqi, 6rem) clamp(2rem, 7cqi, 4.5rem);
        text-align: center;
    }
    .Hero-Kicker {
        font-size: var(--Text-Label);
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--Color-Ink-Muted);
    }
    .Hero-Heading {
        display: grid;
        justify-items: center;
        gap: clamp(0.5rem, 2cqi, 1rem);
        margin-block-start: clamp(1rem, 3cqi, 1.75rem);
        font-family: var(--Font-Serif);
        font-weight: 400;
        letter-spacing: normal;
    }
    .Hero-Mark {
        display: block;
        padding-inline-start: 0.06em;
        font-size: clamp(5.5rem, 30cqi, 14rem);
        line-height: 0.85;
        letter-spacing: 0.06em;
        color: var(--Color-Ink);
    }
    .Hero-Title {
        display: block;
        font-size: clamp(1.375rem, 4.6cqi, 2.25rem);
        font-style: italic;
        line-height: 1.2;
        color: var(--Color-Ink-Soft);
    }
    .Hero-Lede {
        max-inline-size: 34rem;
        margin-inline: auto;
        margin-block-start: clamp(1.25rem, 3.5cqi, 2rem);
        font-family: var(--Font-Serif);
        font-size: clamp(1.0625rem, 2.6cqi, 1.25rem);
        line-height: 1.6;
        color: var(--Color-Ink-Muted);
    }
}

@layer Components {
    .Equation {
        max-inline-size: 36rem;
        margin-inline: auto;
        margin-block-start: clamp(2rem, 6cqi, 3.5rem);
        padding: clamp(1.25rem, 4cqi, 2rem) clamp(1rem, 4cqi, 2rem);
        border: 2px solid var(--Color-Rule);
        border-radius: clamp(12px, 2cqi, 18px);
        background-color: var(--Color-Inset);
    }
    .Equation-Row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 0.75rem clamp(0.75rem, 3.5cqi, 1.75rem);
        padding: 0;
        list-style: none;
    }
    .Equation-Step {
        display: flex;
        align-items: flex-start;
        gap: clamp(0.75rem, 3.5cqi, 1.75rem);
    }
    .Equation-Term {
        display: grid;
        justify-items: center;
        gap: 0.5rem;
    }
    .Equation-Glyph,
    .Equation-Sign {
        font-family: var(--Font-Serif);
        font-size: clamp(1.625rem, 7cqi, 2.75rem);
        line-height: 1;
        letter-spacing: 0.04em;
        color: var(--Color-Ink);
    }
    .Equation-Sign {
        color: var(--Color-Ink-Muted);
    }
    .Equation-Word {
        font-size: var(--Text-Label);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--Color-Ink-Muted);
    }
    @container Container (inline-size < 30rem) {
        .Equation-Row {
            display: grid;
            grid-template-columns: auto auto auto;
            justify-content: center;
            align-items: start;
            gap: 0.875rem 0.75rem;
        }
        .Equation-Step {
            display: grid;
            grid-column: 1 / -1;
            grid-template-columns: subgrid;
            align-items: baseline;
        }
        .Equation-Sign {
            grid-column: 1;
        }
        .Equation-Term {
            display: grid;
            grid-column: 2 / 4;
            grid-template-columns: subgrid;
            align-items: baseline;
            justify-items: start;
        }
        .Equation-Word {
            letter-spacing: 0.08em;
        }
    }
    .Equation-Caption {
        max-inline-size: 28rem;
        margin-inline: auto;
        margin-block-start: 1.25rem;
        font-family: var(--Font-Serif);
        font-size: var(--Text-Caption);
        font-style: italic;
        line-height: 1.55;
        color: var(--Color-Ink-Muted);
    }
}

@layer Components {
    .NoteList {
        max-inline-size: 48rem;
        margin-inline: auto;
        margin-block-start: 0;
    }
    .Note {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
        padding-block: clamp(2.25rem, 7cqi, 4rem);
        border-block-start: 2px solid var(--Color-Rule);
    }
    .Note-Number {
        font-family: var(--Font-Serif);
        font-size: 1rem;
        line-height: 1;
        letter-spacing: 0.14em;
        color: var(--Color-Accent);
    }
    .Note-Body {
        min-inline-size: 0;
        max-inline-size: var(--Measure);
    }
    .Note-Body > * + * {
        margin-block-start: 1.1em;
    }
    .Note-Heading {
        font-family: var(--Font-Serif);
        font-size: clamp(1.625rem, 4.6cqi, 2.25rem);
        font-weight: 400;
        line-height: 1.15;
        letter-spacing: normal;
        color: var(--Color-Ink);
    }
    .Note-Body p {
        font-family: var(--Font-Serif);
        font-size: clamp(1.0625rem, 2.3cqi, 1.1875rem);
        line-height: 1.7;
        color: var(--Color-Ink-Soft);
        hyphens: auto;
    }
    .Note-Body i,
    .Note-Body em {
        color: var(--Color-Ink);
    }
    .Note-Body > p .Numeral {
        letter-spacing: 0.04em;
        color: var(--Color-Ink);
    }
    @container Container (inline-size >= 44rem) {
        .Note {
            grid-template-columns: 5rem minmax(0, 1fr);
            gap: 2rem;
        }
        .Note-Number {
            padding-block-start: 0.45rem;
            font-size: 1.375rem;
            text-align: end;
        }
    }
}

@layer Components {
    .Inscription {
        padding: clamp(1.5rem, 6cqi, 2.5rem) 1rem;
        border: 2px solid var(--Color-Stone-Edge);
        border-radius: clamp(10px, 2cqi, 16px);
        background-color: var(--Color-Stone);
        background-image: linear-gradient(180deg, rgb(255 255 255 / 0.035), rgb(0 0 0 / 0.25));
        text-align: center;
    }
    .Inscription-Text {
        padding-inline-start: 0.24em;
        font-family: var(--Font-Serif);
        font-size: clamp(1.75rem, 8cqi, 3.25rem);
        line-height: 1.1;
        letter-spacing: 0.24em;
        color: var(--Color-Ink-Soft);
        text-shadow: 0 1px 0 rgb(0 0 0 / 0.9), 0 -1px 0 rgb(255 255 255 / 0.06);
    }
    .Inscription-Caption {
        margin-block-start: 0.875rem;
        font-family: var(--Font-Serif);
        font-size: var(--Text-Caption);
        font-style: italic;
        line-height: 1.5;
        color: var(--Color-Ink-Muted);
    }
}

@layer Components {
    .Dial {
        display: grid;
        justify-items: center;
        gap: 0.875rem;
    }
    .Dial-Face {
        inline-size: min(100%, 17rem);
        block-size: auto;
        aspect-ratio: 1;
    }
    .Dial-Rim,
    .Dial-Tick,
    .Dial-Tick-Hour,
    .Dial-Hand {
        vector-effect: non-scaling-stroke;
    }
    .Dial-Rim {
        fill: var(--Color-Inset);
        stroke: var(--Color-Stone-Edge);
        stroke-width: 2px;
    }
    .Dial-Tick {
        stroke: var(--Color-Stone-Edge);
        stroke-width: 2px;
    }
    .Dial-Tick-Hour {
        stroke: var(--Color-Ink-Muted);
        stroke-width: 3px;
    }
    .Dial-Numeral {
        fill: var(--Color-Ink-Soft);
        font-family: var(--Font-Serif);
        font-size: 14px;
        letter-spacing: 0.02em;
    }
    .Dial-Numeral-Marked {
        fill: var(--Color-Accent);
    }
    .Dial-Hand {
        stroke: var(--Color-Ink);
        stroke-linecap: round;
    }
    .Dial-Hand-Hour {
        stroke-width: 5px;
    }
    .Dial-Hand-Minute {
        stroke-width: 3px;
    }
    .Dial-Hub {
        fill: var(--Color-Accent);
    }
    .Dial-Caption {
        font-family: var(--Font-Serif);
        font-size: var(--Text-Caption);
        font-style: italic;
        color: var(--Color-Ink-Muted);
        text-align: center;
    }
}

@layer Components {
    .FormsTable-Scroll {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }
    .FormsTable {
        inline-size: 100%;
        border-collapse: collapse;
        font-variant-numeric: tabular-nums lining-nums;
    }
    .FormsTable th {
        padding: 0 0.75rem 0.625rem 0;
        border-block-end: 2px solid var(--Color-Stone-Edge);
        font-size: var(--Text-Label);
        font-weight: 600;
        letter-spacing: 0.12em;
        text-align: start;
        text-transform: uppercase;
        color: var(--Color-Ink-Muted);
    }
    .FormsTable td {
        padding: 0.875rem 0.75rem 0.875rem 0;
        border-block-end: 2px solid var(--Color-Rule);
        vertical-align: baseline;
    }
    .FormsTable th:last-child,
    .FormsTable td:last-child {
        padding-inline-end: 0;
    }
    .FormsTable-Value {
        inline-size: 3.5rem;
        font-size: var(--Text-Small);
        color: var(--Color-Ink-Muted);
    }
    .FormsTable-Usual,
    .FormsTable-Also {
        font-family: var(--Font-Serif);
        letter-spacing: 0.06em;
    }
    .FormsTable-Usual {
        font-size: 1rem;
        color: var(--Color-Ink-Muted);
    }
    .FormsTable-Also {
        font-size: 1.125rem;
        color: var(--Color-Ink);
    }
    .FormsTable-Where {
        display: block;
        margin-block-start: 0.25rem;
        font-family: var(--Font-Sans);
        font-size: 0.8125rem;
        letter-spacing: normal;
        line-height: 1.45;
        color: var(--Color-Ink-Muted);
    }
    .FormsTable-Caption {
        caption-side: bottom;
        padding-block-start: 1rem;
        font-family: var(--Font-Serif);
        font-size: var(--Text-Caption);
        font-style: italic;
        text-align: start;
        color: var(--Color-Ink-Muted);
    }
}

@layer Components {
    .SiteFooter {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.5rem 1.5rem;
        inline-size: min(100%, var(--Container-Max));
        margin-inline: auto;
        padding: 1.5rem var(--Container-Padding) 0.5rem;
        font-size: var(--Text-Small);
        color: var(--Color-Ink-Muted);
    }
    .SiteFooter p {
        color: inherit;
    }
    .SiteFooter-Year {
        font-family: var(--Font-Serif);
        letter-spacing: 0.1em;
    }
}

@layer Interaction {
    a, button, input, select, textarea, label, summary, [role="button"] {
        touch-action: manipulation;
    }
    input, select, textarea {
        font-size: max(16px, 1rem);
    }
}

@layer Interaction {
    :focus-visible {
        outline: 2px solid var(--Color-Focus);
        outline-offset: 2px;
    }
}

@layer Motion {
    @media (prefers-reduced-motion: no-preference) {
        :root {
            scroll-behavior: smooth;
            interpolate-size: allow-keywords;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}

@layer Motion {
    @media (prefers-reduced-motion: no-preference) {
        @keyframes Rise {
            from {
                opacity: 0;
                translate: 0 0.75rem;
            }
        }
        .Hero-Mark,
        .Hero-Title,
        .Hero-Lede,
        .Equation {
            animation: Rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
        }
        .Hero-Title {
            animation-delay: 0.08s;
        }
        .Hero-Lede {
            animation-delay: 0.16s;
        }
        .Equation {
            animation-delay: 0.24s;
        }
    }
}

@layer Accessibility {
    @media (prefers-contrast: more) {
        :root {
            --Color-Border: #4a4a52;
            --Color-Muted: #c4c4cc;
            --Color-Ink-Soft: #e6dfd3;
            --Color-Ink-Muted: #cbc4b8;
            --Color-Rule: #4a463f;
            --Color-Stone-Edge: #5a544b;
        }
    }
}

@layer Accessibility {
    @media (forced-colors: active) {
        .Container {
            border-color: CanvasText;
        }
        .Numeral-Less {
            color: Highlight;
        }
        .Dial-Rim {
            fill: Canvas;
            stroke: CanvasText;
        }
        .Dial-Tick,
        .Dial-Tick-Hour,
        .Dial-Hand {
            stroke: CanvasText;
        }
        .Dial-Numeral,
        .Dial-Hub {
            fill: CanvasText;
        }
        .Dial-Numeral-Marked {
            fill: Highlight;
        }
    }
}