:root {
    --ground:#100d0a;
    --surface:#181410;
    --surface-raised:#221b15;
    --surface-hover:#292019;
    --garnet:#8c271e;
    --garnet-glow:#e04838;
    --garnet-deep:#5e1812;
    --brass:#c89d5c;
    --brass-soft:#dfb97f;
    --brass-dim:#8b6b3b;
    --brass-tint:rgba(200, 157, 92, 0.12);
    --ink:#f5ede4;
    --ink-muted:#b8aba0;
    --ink-faint:#a6988c;
    --line:#2b231c;
    --line-strong:#3f3329;
    --line-brass:rgba(200, 157, 92, 0.35);

    --zepu-014:'Playfair Display', Georgia, serif;
    --zepu-bd4:"Source Sans 3", system-ui, -apple-system, sans-serif;
    --zepu-cf4:'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

    --step--2:clamp(0.72rem, 0.70rem + 0.10vw, 0.80rem);
    --step--1:clamp(0.85rem, 0.82rem + 0.16vw, 0.94rem);
    --zepu-ef3:clamp(1.00rem, 0.96rem + 0.22vw, 1.125rem);
    --zepu-299:clamp(1.18rem, 1.10rem + 0.38vw, 1.35rem);
    --zepu-343:clamp(1.40rem, 1.28rem + 0.60vw, 1.70rem);
    --zepu-67f:clamp(1.68rem, 1.48rem + 0.95vw, 2.15rem);
    --zepu-334:clamp(2.05rem, 1.72rem + 1.48vw, 2.75rem);
    --zepu-3be:clamp(2.50rem, 2.00rem + 2.25vw, 3.60rem);
    --zepu-4b3:clamp(3.05rem, 2.32rem + 3.40vw, 4.75rem);

    --space-3xs:clamp(0.25rem, 0.23rem + 0.08vw, 0.30rem);
    --space-2xs:clamp(0.45rem, 0.40rem + 0.18vw, 0.55rem);
    --space-xs:clamp(0.65rem, 0.60rem + 0.28vw, 0.85rem);
    --space-s:clamp(0.95rem, 0.88rem + 0.38vw, 1.20rem);

    --space-m:clamp(1.40rem, 1.25rem + 0.70vw, 1.85rem);
    --space-l:clamp(2.00rem, 1.75rem + 1.20vw, 2.80rem);
    --space-xl:clamp(2.80rem, 2.40rem + 2.00vw, 4.00rem);
    --space-2xl:clamp(4.00rem, 3.40rem + 3.00vw, 6.00rem);
    --space-3xl:clamp(5.50rem, 4.50rem + 4.50vw, 8.50rem);

    --measure-narrow:56ch;
    --measure-reading:68ch;
    --measure-wide:84ch;
    --measure-full:1240px;

    --radius-xs:2px;
    --radius-s:4px;
    --radius-m:6px;

    --ease-warm:cubic-bezier(0.22, 1, 0.36, 1);
    --ease-snappy:cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast:160ms;
    --dur-base:240ms;
    --dur-slow:420ms;

    --focus-ring:2px solid var(--brass);
    --focus-offset:3px;
}

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

html {
    font-size:100%;
    color-scheme:dark;
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
    background-color:var(--ground);
}

body {
    background-color:var(--ground);
    color:var(--ink);
    font-family:var(--zepu-bd4);
    font-size:var(--zepu-ef3);
    font-weight:400;
    line-height:1.65;
    letter-spacing:-0.01em;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
}

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

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

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

ul[role="list"], ol[role="list"] { list-style:none; }

a {
    color:inherit;
    text-decoration-thickness:1px;
    text-underline-offset:0.22em;
}

:focus { outline:none; }

:focus-visible {
    outline:var(--focus-ring);
    outline-offset:var(--focus-offset);
}

h1, h2, h3, h4, h5, h6 {
    font-family:var(--zepu-014);
    font-weight:600;
    line-height:1.15;
    letter-spacing:-0.02em;
    color:var(--ink);
    text-wrap:balance;
}

h1 {
    font-size:var(--zepu-3be);
    font-weight:600;
}

h2 {
    font-size:var(--zepu-334);
    font-weight:600;
}

h3 {
    font-size:var(--zepu-343);
    font-weight:500;
}

h4 {
    font-size:var(--zepu-299);
    font-weight:500;
}

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

p + p { margin-top:1.25em; }

blockquote {
    border-left:2px solid var(--brass);
    padding-left:var(--space-s);
    margin-block:var(--space-m);
    font-family:var(--zepu-014);
    font-style:italic;
    font-size:var(--zepu-299);
    color:var(--ink);
}

cite {
    display:block;
    font-family:var(--zepu-cf4);
    font-size:var(--step--1);
    font-style:normal;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--brass);
    margin-top:var(--space-2xs);
}

mark {
    background:var(--brass-tint);
    color:var(--brass-soft);
    padding:0.1em 0.3em;
    border-radius:var(--radius-xs);
}

hr {
    border:none;
    border-top:1px solid var(--line);
    margin-block:var(--space-xl);
}

.skip-link {
    position:absolute;
    top:var(--space-xs);
    left:var(--space-xs);
    z-index:1000;
    padding:var(--space-2xs) var(--space-s);
    background:var(--surface-raised);
    color:var(--brass);
    border:1px solid var(--brass);
    border-radius:var(--radius-xs);
    font-family:var(--zepu-cf4);
    font-size:var(--step--1);
    text-decoration:none;
    transform:translateY(-200%);
    transition:transform var(--dur-fast) var(--ease-snappy);
}

.skip-link:focus-visible { transform:translateY(0); }

.site-wrap {
    width:100%;
    max-width:var(--measure-full);
    margin-inline:auto;
    padding-inline:var(--space-s);
}

.reading-column {
    width:100%;
    max-width:var(--measure-reading);
    margin-inline:auto;
    min-width:0;
}

.narrow-column {
    width:100%;
    max-width:var(--measure-narrow);
    margin-inline:auto;
    min-width:0;
}

.wide-measure {
    width:100%;

    max-width:var(--measure-wide);
    margin-inline:auto;
    min-width:0;
}

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

.lead-text {
    font-size:var(--zepu-299);
    line-height:1.6;
    color:var(--ink);
    font-weight:300;
    max-width:var(--measure-narrow);
}

.mono-tag {
    font-family:var(--zepu-cf4);
    font-size:var(--step--2);
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--brass);
}

.tabular-price {
    font-family:var(--zepu-cf4);
    font-size:var(--zepu-299);
    font-weight:500;
    color:var(--ink);
    letter-spacing:-0.02em;
}

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

/* --- FOUNDATION TYPOGRAPHY UTILITIES & INLINE ORNAMENTS --- */

.text-garnet { color:#ff6b5e; }

.text-brass { color:var(--brass); }

.text-muted { color:var(--ink-muted); }

.text-faint { color:var(--ink-faint); }

.hairline-brass {
    height:1px;
    background:linear-gradient(90deg, transparent 0%, var(--brass-dim) 20%, var(--brass) 50%, var(--brass-dim) 80%, transparent 100%);
    border:none;
    margin-block:var(--space-m);
}

.hairline-subtle {
    height:1px;
    background:var(--line);
    border:none;
    margin-block:var(--space-m);
}

.surface-card {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-s);
    padding:var(--space-m);
}

.surface-raised {
    background:var(--surface-raised);
    border:1px solid var(--line-strong);
    border-radius:var(--radius-s);

    padding:var(--space-m);
}

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

.icon-s {
    width:0.95em;
    height:0.95em;
}

.icon-m {
    width:1.35em;
    height:1.35em;
}

.icon-l {
    width:1.85em;
    height:1.85em;
}

.prose-block {
    max-width:var(--measure-reading);
    margin-inline:auto;
}

.prose-block h2,
.prose-block h3 {
    margin-top:1.6em;
    margin-bottom:0.55em;
}

.prose-block ul {
    margin-block:1em;
    padding-left:1.4em;
}

.prose-block li {
    margin-bottom:0.45em;
    color:var(--ink-muted);
}

.prose-block li strong { color:var(--ink); }

.prose-block a {
    color:var(--brass-soft);
    text-decoration:underline;
    text-underline-offset:3px;
    text-decoration-color:var(--brass-dim);
    transition:color var(--dur-fast) var(--ease-warm), text-decoration-color var(--dur-fast) var(--ease-warm);
}

.prose-block a:hover {
    color:var(--ink);
    text-decoration-color:var(--brass);
}