:root {
    --ground:#E8DFD0;
    --surface:#DAD0BF;
    --surface-2:#CABEAB;
    --line:#A79C8A;
    --ink-soft:#534C3F;
    --ink:#2C2821;
    --accent:#B5542B;
    --accent-ink:#FFFFFF;

    --japa-3da:'Bitter', "Bitter Fallback", Georgia, serif;
    --japa-7e1:"Zilla Slab", "Zilla Slab Fallback", Georgia, serif;
    --japa-37d:'JetBrains Mono', "JetBrains Mono Fallback", 'Courier New', monospace;

    --font-size-xs:clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
    --font-size-sm:clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
    --font-size-base:clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
    --font-size-md:clamp(1.1875rem, 1.12rem + 0.4vw, 1.375rem);
    --font-size-lg:clamp(1.5rem, 1.38rem + 0.75vw, 1.875rem);
    --font-size-xl:clamp(2rem, 1.75rem + 1.4vw, 2.75rem);
    --font-size-2xl:clamp(2.5rem, 2.1rem + 2.4vw, 3.875rem);
    --font-size-hero:clamp(2.75rem, 2.2rem + 3.4vw, 4.75rem);

    --line-height-tight:1.12;
    --line-height-heading:1.2;
    --line-height-snug:1.35;
    --line-height-body:1.55;

    --tracking-tight:-0.025em;
    --tracking-normal:0;
    --tracking-loose:0.04em;
    --tracking-caps:0.08em;

    --radius-xs:2px;
    --radius-sm:4px;
    --radius-md:6px;
    --radius-lg:8px;

    --space-2xs:clamp(0.25rem, 0.22rem + 0.15vw, 0.375rem);
    --space-xs:clamp(0.5rem, 0.45rem + 0.25vw, 0.6875rem);
    --space-sm:clamp(0.875rem, 0.8rem + 0.4vw, 1.125rem);
    --space-md:clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
    --space-lg:clamp(2rem, 1.7rem + 1.4vw, 3rem);
    --space-xl:clamp(3rem, 2.5rem + 2.2vw, 4.5rem);
    --space-2xl:clamp(4.5rem, 3.8rem + 3.6vw, 7rem);

    --container-max:1360px;
    --container-pad:clamp(1.25rem, 4vw, 3.5rem);
    --reading-max:65ch;
    --rail-width:320px;

    --trans-fast:140ms;
    --trans-base:220ms;
    --trans-slow:380ms;
    --ease-standard:cubic-bezier(0.22, 1, 0.36, 1);
    --ease-tactile:cubic-bezier(0.16, 1, 0.3, 1);

    --shadow-line:0 1px 0 var(--line);
    --shadow-sm:0 2px 4px rgba(44, 40, 33, 0.06);
    --shadow-md:0 4px 12px rgba(44, 40, 33, 0.08);
    --shadow-lg:0 12px 32px rgba(44, 40, 33, 0.12);

    --header-height:4.75rem;
    --tap-min:44px;
}

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

html {
    font-size:16px;
    scroll-behavior:smooth;
    scroll-padding-top:var(--header-height);
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    background-color:var(--ground);
    color:var(--ink);
}

body {
    min-height:100vh;
    background-color:var(--ground);
    color:var(--ink);
    font-family:var(--japa-7e1);
    font-size:var(--font-size-base);
    line-height:var(--line-height-body);
    letter-spacing:var(--tracking-normal);
    font-weight:400;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
    position:relative;
}

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

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

a {
    color:inherit;
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
    transition:color var(--trans-fast) var(--ease-standard),
                            text-decoration-color var(--trans-fast) var(--ease-standard);
}

a:hover {
    color:var(--accent);
    text-decoration-color:var(--accent);
}

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

h1, h2, h3, h4, h5, h6 {
    font-family:var(--japa-3da);
    font-weight:700;

    line-height:var(--line-height-heading);
    letter-spacing:var(--tracking-tight);
    color:var(--ink);
    text-wrap:balance;
    overflow-wrap:break-word;
}

h1 {
    font-size:var(--font-size-2xl);
    line-height:var(--line-height-tight);
}

h2 { font-size:var(--font-size-xl); }

h3 { font-size:var(--font-size-lg); }

h4 { font-size:var(--font-size-md); }

p {
    max-width:var(--reading-max);
    text-wrap:pretty;
}

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

ul, ol {
    padding-left:1.35rem;
    max-width:var(--reading-max);
}

li { padding-left:0.25rem; }

li + li { margin-top:var(--space-2xs); }

code, kbd, samp, pre {
    font-family:var(--japa-37d);
    font-size:0.9em;
}

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

figure { margin:0; }

blockquote {
    border-left:3px solid var(--accent);
    padding-left:var(--space-md);
    color:var(--ink-soft);
    font-style:italic;
    max-width:var(--reading-max);
}

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

.skip-link {
    position:absolute;
    top:-999px;
    left:var(--space-md);
    background:var(--ink);
    color:var(--ground);
    padding:var(--space-xs) var(--space-md);
    font-family:var(--japa-37d);
    font-size:var(--font-size-sm);
    font-weight:500;
    text-decoration:none;
    z-index:10000;
    border-radius:var(--radius-xs);
    box-shadow:var(--shadow-md);
}

.skip-link:focus {
    top:var(--space-sm);
    outline:2px solid var(--accent);
    outline-offset:2px;
}

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

.tabular {
    font-family:var(--japa-37d);
    font-variant-numeric:tabular-nums;
    letter-spacing:-0.01em;
}

.prose {
    color:var(--ink);
    line-height:var(--line-height-body);
}

.prose p { max-width:var(--reading-max); }

.prose p + p { margin-top:1.15em; }

.prose h2,
.prose h3 {
    margin-top:1.8em;
    margin-bottom:0.6em;

}

.prose ul,
.prose ol { margin:1em 0; }

.prose li + li { margin-top:0.4em; }

.prose strong {
    font-weight:600;
    color:var(--ink);
}

.prose a { text-decoration-color:var(--line); }

.prose a:hover { text-decoration-color:var(--accent); }

.container {
    width:100%;
    max-width:var(--container-max);
    margin-left:auto;
    margin-right:auto;
    padding-left:var(--container-pad);
    padding-right:var(--container-pad);
}

.container-wide {
    width:100%;
    max-width:1520px;
    margin-left:auto;
    margin-right:auto;
    padding-left:var(--container-pad);

    padding-right:var(--container-pad);
}

.layout-offcenter {
    display:grid;
    grid-template-columns:minmax(0, 2fr) minmax(0, 1fr);
    gap:var(--space-lg);
    align-items:start;
}

.layout-reverse {
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 2fr);
    gap:var(--space-lg);
    align-items:start;
}

@media (max-width: 860px) {
    .layout-offcenter,
    .layout-reverse {
        grid-template-columns:100% !important;
        gap:var(--space-md);
    }
}

@media (max-width: 1439px) {
    div.layout-offcenter { grid-template-columns:1fr !important; }
}

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

.band-divider {
    border:0;
    height:1px;
    background-color:var(--line);
    margin:0;
}

@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;
    }
}