:root {
    --ground:#4a1f22;

    --surface:#5b272b;
    --surface-2:#6f3337;
    --line:#915255;
    --ink-soft:#d0aeae;
    --ink:#fce0e0;
    --accent:#c2a262;
    --accent-ink:#111111;


    --hami-3be:'Fraunces', "Fraunces Fallback", Georgia, serif;
    --hami-cf0:"Spectral", "Spectral Fallback", Georgia, serif;
    --hami-b70:'JetBrains Mono', 'JetBrains Mono Fallback', Consolas, monospace;


    --fs-xs:clamp(0.75rem, 0.72rem + 0.16vw, 0.84rem);
    --fs-sm:clamp(0.85rem, 0.81rem + 0.22vw, 0.96rem);
    --fs-base:clamp(1rem, 0.95rem + 0.28vw, 1.125rem);
    --fs-md:clamp(1.15rem, 1.08rem + 0.42vw, 1.35rem);
    --fs-lg:clamp(1.35rem, 1.22rem + 0.75vw, 1.75rem);

    --fs-xl:clamp(1.75rem, 1.5rem + 1.2vw, 2.35rem);
    --fs-display:clamp(2.1rem, 1.75rem + 2vw, 3.25rem);
    --fs-hero:clamp(2.4rem, 1.95rem + 2.6vw, 3.9rem);


    --lh-tight:1.12;
    --lh-snug:1.28;
    --lh-base:1.62;
    --lh-relaxed:1.78;


    --space-2xs:clamp(0.25rem, 0.22rem + 0.12vw, 0.375rem);
    --space-xs:clamp(0.5rem, 0.45rem + 0.22vw, 0.75rem);
    --space-sm:clamp(0.875rem, 0.78rem + 0.4vw, 1.25rem);
    --space-md:clamp(1.25rem, 1.1rem + 0.7vw, 1.875rem);
    --space-lg:clamp(2rem, 1.7rem + 1.4vw, 3rem);
    --space-xl:clamp(3rem, 2.4rem + 2.6vw, 4.75rem);
    --space-2xl:clamp(4.5rem, 3.6rem + 4vw, 7rem);


    --radius-sm:2px;
    --radius-base:2px;
    --radius-lg:3px;


    --ease-out-quad:cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring:cubic-bezier(0.175, 0.885, 0.32, 1.15);
    --dur-fast:140ms;
    --dur-med:240ms;
    --dur-slow:420ms;


    --container-max:1360px;
    --dock-height:64px;
}


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


html {
    -webkit-text-size-adjust:100%;
    tab-size:4;
    scroll-behavior:smooth;
    scroll-padding-top:5rem;
    background-color:var(--ground);
}


body {
    margin:0;
    padding:0;
    padding-bottom:var(--dock-height);
    background-color:var(--ground);
    color:var(--ink);
    font-family:var(--hami-cf0);
    font-size:var(--fs-base);
    font-weight:400;
    line-height:var(--lh-base);
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    min-height:100vh;
    overflow-x:hidden;
}


@media (min-width: 1024px) {
    body {
        padding-bottom:0;
    }
}


h1, h2, h3, h4, h5, h6 {
    margin:0;
    color:var(--ink);
    font-family:var(--hami-3be);
    font-weight:600;
    line-height:var(--lh-snug);
    letter-spacing:-0.015em;
    text-wrap:balance;
    overflow-wrap:break-word;
}


h1 {
    font-size:var(--fs-hero);
    line-height:var(--lh-tight);
    font-weight:700;
    letter-spacing:-0.025em;
}


h2 {
    font-size:var(--fs-display);
    line-height:var(--lh-tight);
}


h3 {
    font-size:var(--fs-xl);
}


h4 {
    font-size:var(--fs-lg);
}


p {
    margin:0 0 var(--space-sm) 0;
    max-width:65ch;
    color:var(--ink);
}


p:last-child {
    margin-bottom:0;
}


.lede {
    font-size:var(--fs-md);
    line-height:var(--lh-base);
    color:var(--ink-soft);
    max-width:58ch;
}


a {
    color:var(--accent);
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
    transition:color var(--dur-fast) var(--ease-out-quad);
}


a:hover {
    color:var(--ink);
}


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


img, picture, svg, video, canvas {
    display:block;
    max-width:100%;
    height:auto;
}


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


button {
    cursor:pointer;
}


table {
    border-collapse:collapse;
    width:100%;
}


ul, ol {
    margin:0;
    padding:0;
    list-style:none;
}


figure {
    margin:0;
}


blockquote {
    margin:0;
    padding-left:var(--space-md);
    border-left:2px solid var(--accent);
    font-style:italic;
    color:var(--ink-soft);
}


hr {
    border:0;
    border-top:1px solid var(--line);
    margin:var(--space-lg) 0;
}


.skip-link {
    position:absolute;
    top:-100px;
    left:var(--space-md);
    background:var(--accent);
    color:var(--accent-ink);
    padding:var(--space-xs) var(--space-md);
    font-family:var(--hami-b70);
    font-size:var(--fs-sm);
    font-weight:600;
    z-index:9999;
    text-decoration:none;
    border-radius:var(--radius-sm);
    transition:top var(--dur-fast) var(--ease-out-quad);
}


.skip-link:focus {
    top:var(--space-md);
}


.mono-num {
    font-family:var(--hami-b70);
    font-feature-settings:"tnum" 1, 'zero' 1;
}


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


.icon {
    width:1.25rem;
    height:1.25rem;
    fill:currentColor;
    display:inline-block;
    vertical-align:middle;
    flex-shrink:0;
}


.layout-shell {
    width:100%;
    max-width:var(--container-max);
    margin-left:auto;
    margin-right:auto;
    padding-left:clamp(1rem, 0.6rem + 1.8vw, 2.5rem);
    padding-right:clamp(1rem, 0.6rem + 1.8vw, 2.5rem);
}


.margin-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:var(--space-md);
}


@media (min-width: 900px) {
    .margin-grid {
        grid-template-columns:minmax(0, 65ch) minmax(220px, 320px);
        column-gap:clamp(2rem, 1.5rem + 2vw, 4.5rem);
        align-items:start;
    }
}


.margin-grid.reverse-split {
    grid-template-columns:1fr;
}


@media (min-width: 900px) {
    .margin-grid.reverse-split {
        grid-template-columns:minmax(220px, 320px) minmax(0, 65ch);
    }
}


.book-layout {
    display:grid;
    grid-template-columns:1fr;
    gap:var(--space-lg);
}


@media (min-width: 960px) {
    .book-layout {
        grid-template-columns:minmax(0, 65ch) minmax(240px, 320px);
        column-gap:clamp(2.5rem, 1.8rem + 2.4vw, 5rem);
        align-items:start;
    }
}


.book-layout.asymmetric-reverse {
    grid-template-columns:1fr;
}


@media (min-width: 960px) {
    .book-layout.asymmetric-reverse {
        grid-template-columns:minmax(240px, 320px) minmax(0, 65ch);
    }
}


.margin-note {
    font-family:var(--hami-cf0);
    font-size:var(--fs-sm);
    line-height:var(--lh-snug);
    color:var(--ink-soft);
    border-top:1px solid var(--line);
    padding-top:var(--space-xs);
    margin-top:var(--space-xs);
}


.margin-note strong {
    display:block;
    color:var(--ink);
    font-family:var(--hami-b70);
    font-size:var(--fs-xs);
    letter-spacing:0.04em;
    text-transform:uppercase;
    margin-bottom:0.25rem;
}


@media (min-width: 900px) {
    .margin-note {
        border-top:1px solid var(--line);

        margin-top:0;
        padding-top:var(--space-xs);
    }
}


.stack-xs > * + * {
    margin-top:var(--space-xs);
}


.stack-sm > * + * {
    margin-top:var(--space-sm);
}


.stack-md > * + * {
    margin-top:var(--space-md);
}


.stack-lg > * + * {
    margin-top:var(--space-lg);
}


.cluster {
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-xs) var(--space-sm);
    align-items:center;
}


.band {
    padding-block:var(--space-xl);
    border-top:1px solid var(--line);
}


.band--surface {
    background-color:var(--surface);
}


.band--surface-2 {
    background-color:var(--surface-2);
}


.measure {
    max-width:65ch;
}


.min-w-0 {
    min-width:0;
}


.prose-block p + p {
    margin-top:var(--space-sm);
}


.prose-block h2,
.prose-block h3 {
    margin-top:var(--space-lg);
    margin-bottom:var(--space-xs);
}


.prose-block ul {
    list-style:square;
    padding-left:1.35rem;
    margin-bottom:var(--space-sm);
    max-width:65ch;
}


.prose-block li {
    margin-bottom:var(--space-2xs);
    color:var(--ink);
}


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


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