:root {
    --ground:#4A1F22;
    --ground-deep:#381417;
    --surface:#582528;
    --surface-elevated:#662C30;
    --surface-sunken:#301013;
    --surface-subtle:rgba(88, 37, 40, 0.65);
    --ink:#F5EBE1;
    --ink-muted:#D8C2B4;
    --ink-dim:#C4AE9F;
    --accent:#C99758;
    --accent-hover:#DCAB6E;
    --accent-active:#B88544;
    --accent-muted:rgba(201, 151, 88, 0.18);
    --accent-glow:rgba(201, 151, 88, 0.35);
    --accent-soft:rgba(201, 151, 88, 0.08);
    --border:rgba(201, 151, 88, 0.28);
    --border-strong:rgba(201, 151, 88, 0.55);
    --border-subtle:rgba(245, 235, 225, 0.12);
    --border-hairline:rgba(201, 151, 88, 0.2);
    --frame-border:#C99758;
    --frame-edge:rgba(201, 151, 88, 0.4);
    --status-error:#E57373;
    --status-error-bg:rgba(229, 115, 115, 0.12);
    --status-success:#81C784;
    --status-success-bg:rgba(129, 199, 132, 0.12);


    --jigu-b0c:'Cinzel', 'Cinzel Decorative', Georgia, serif;
    --jigu-b0c-decorative:'Cinzel Decorative', 'Cinzel', Georgia, serif;
    --jigu-46b:'Crimson Pro', Georgia, serif;
    --jigu-6c3:'Space Mono', 'Courier New', monospace;


    --text-2xs:clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem);
    --text-xs:clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
    --text-sm:clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
    --text-base:clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
    --text-md:clamp(1.1875rem, 1.12rem + 0.35vw, 1.35rem);
    --text-lg:clamp(1.35rem, 1.25rem + 0.5vw, 1.625rem);
    --text-xl:clamp(1.6rem, 1.45rem + 0.8vw, 2.1rem);
    --text-2xl:clamp(2rem, 1.7rem + 1.4vw, 2.85rem);
    --text-3xl:clamp(2.4rem, 2rem + 2.2vw, 3.8rem);
    --text-hero:clamp(2.6rem, 2.1rem + 2.8vw, 4.6rem);


    --space-3xs:0.25rem;
    --space-2xs:0.5rem;
    --space-xs:0.75rem;
    --space-sm:1rem;
    --space-md:1.5rem;
    --space-lg:2rem;
    --space-xl:3rem;
    --space-2xl:4.5rem;
    --space-3xl:6rem;
    --space-4xl:8rem;


    --frame-width:1240px;
    --frame-inset:12px;
    --frame-border-width:1px;
    --header-height:84px;
    --header-condensed-height:68px;


    --radius-xs:2px;
    --radius-sm:4px;
    --radius-md:6px;
    --radius-lg:10px;
    --radius-xl:16px;
    --radius-full:9999px;


    --dur-instant:100ms;
    --dur-fast:160ms;
    --dur-base:260ms;
    --dur-med:420ms;
    --dur-slow:700ms;


    --ease-standard:cubic-bezier(0.2, 0, 0, 1);
    --ease-out-quad:cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out-cubic:cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-out-expo:cubic-bezier(0.19, 1, 0.22, 1);
    --ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);


    --shadow-sm:0 2px 8px rgba(32, 10, 12, 0.35);
    --shadow-subtle:0 4px 18px rgba(32, 10, 12, 0.45);
    --shadow-elevated:0 10px 30px rgba(24, 7, 9, 0.65);
    --shadow-inset:inset 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-glow:0 0 20px rgba(201, 151, 88, 0.25);
}


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


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


body {
    font-family:var(--jigu-46b);
    font-size:var(--text-base);
    line-height:1.68;
    color:var(--ink);
    background-color:var(--ground);
    min-height:100vh;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}


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


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


img {
    height:auto;
    font-style:italic;
    shape-margin:0.75rem;
}


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


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


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(--jigu-b0c);
    font-weight:600;
    line-height:1.25;
    color:var(--ink);
    letter-spacing:0.03em;
    text-wrap:balance;
    margin-block-end:0.75em;
}


h1 {
    font-size:var(--text-3xl);
    font-weight:700;
    letter-spacing:0.04em;
    line-height:1.15;
}


h2 {
    font-size:var(--text-2xl);
    font-weight:600;
    line-height:1.2;
}


h3 {
    font-size:var(--text-xl);
    font-weight:600;
    line-height:1.25;
}


h4 {
    font-size:var(--text-lg);
    font-weight:600;
    line-height:1.3;
}


h5 {
    font-size:var(--text-md);
    font-weight:500;
    line-height:1.35;
}


h6 {
    font-size:var(--text-base);
    font-weight:500;
    letter-spacing:0.06em;
    text-transform:uppercase;
}


p {
    margin-block-end:1.25em;
    max-width:68ch;
}


p:last-child {
    margin-block-end:0;
}


.lead {
    font-size:var(--text-md);
    line-height:1.6;
    color:var(--ink);
}


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


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


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


.font-display {
    font-family:var(--jigu-b0c);
}


.font-decorative {
    font-family:var(--jigu-b0c-decorative);
}


.font-body {
    font-family:var(--jigu-46b);
}


.font-mono,
.num,
.spec-code,
.price-val {
    font-family:var(--jigu-6c3);
    font-feature-settings:'tnum' 1, 'zero' 1;
}


ul,
ol {
    margin-block-end:1.25em;
    padding-inline-start:1.5em;
    max-width:68ch;
}


li {
    margin-block-end:0.5em;
}


li:last-child {
    margin-block-end:0;
}


ul.unstyled,
ol.unstyled {
    list-style:none;
    padding-inline-start:0;
}


blockquote {
    margin-block:2em;
    padding-inline:1.75em;
    padding-block:1em;
    border-inline-start:2px solid var(--accent);
    background-color:var(--surface-subtle);
    font-style:italic;
    font-size:var(--text-md);
    color:var(--ink);
}


blockquote cite {
    display:block;
    font-style:normal;
    font-family:var(--jigu-6c3);
    font-size:var(--text-xs);
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--accent);
    margin-block-start:0.75em;
}


hr {
    border:0;
    border-top:1px solid var(--border);
    margin-block:3em;

}


hr.gold {
    border-top-color:var(--accent);
    opacity:0.6;
}


code,
kbd,
samp {
    font-family:var(--jigu-6c3);
    font-size:0.875em;
    padding:0.15em 0.4em;

    border-radius:var(--radius-xs);
    background-color:var(--surface-sunken);
    color:var(--accent);
}


pre {
    font-family:var(--jigu-6c3);
    font-size:var(--text-xs);
    line-height:1.5;
    padding:1.25em;
    border-radius:var(--radius-sm);
    background-color:var(--surface-sunken);
    border:1px solid var(--border);
    color:var(--ink);
    overflow-x:auto;
    margin-block-end:1.5em;
}


table {
    width:100%;
    border-collapse:collapse;
    text-align:left;
    margin-block-end:2em;
}


th,
td {
    padding:0.85em 1em;
    border-bottom:1px solid var(--border);
    vertical-align:top;
}


th {
    font-family:var(--jigu-b0c);
    font-weight:600;
    font-size:var(--text-sm);
    letter-spacing:0.04em;
    color:var(--accent);
    text-transform:uppercase;
    background-color:var(--surface-sunken);
    min-width:200px;
}


.table-responsive {
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin-block-end:2em;
    border:1px solid var(--border);

    border-radius:var(--radius-sm);
}


.table-responsive table {
    margin-block-end:0;
}


.container {
    width:100%;
    max-width:var(--frame-width);
    margin-inline:auto;
    padding-inline:clamp(1rem, 4vw, 2.5rem);
}


.container-narrow {
    width:100%;
    max-width:840px;
    margin-inline:auto;
    padding-inline:clamp(1rem, 4vw, 2rem);
}


.container-prose {
    width:100%;
    max-width:720px;
    margin-inline:auto;
    padding-inline:clamp(1rem, 3vw, 1.5rem);
}


.site-frame {
    min-height:100vh;
    background-color:var(--ground);
    border:var(--frame-border-width) solid var(--frame-border);
    margin:var(--frame-inset);
    position:relative;
    box-shadow:0 0 0 var(--frame-inset) var(--ground-deep), var(--shadow-elevated);
}


.site-frame-strip {
    background-color:var(--ground-deep);
    border-bottom:1px solid var(--border);
    padding:0.4rem 1rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    font-family:var(--jigu-6c3);
    font-size:var(--text-2xs);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-muted);
}


.site-frame-strip > div:last-child {
    white-space:nowrap;
    flex-shrink:0;
}


@media (max-width: 480px) {
    .site-frame-strip {
        flex-direction:column;
        align-items:flex-start;
        gap:0.25rem;
    }
}


.site-frame-strip-meta {
    display:flex;
    align-items:center;
    gap:1.25rem;
    flex-wrap:wrap;
}


.site-frame-strip-tag {
    color:var(--accent);
}


.flow > * + * {
    margin-block-start:1.25em;
}


.flow-sm > * + * {
    margin-block-start:0.75em;
}


.flow-lg > * + * {
    margin-block-start:2em;
}


.flow-xl > * + * {
    margin-block-start:3em;
}


.grid {
    display:grid;
    gap:var(--space-md);
}


.grid > * {
    min-width:0;
}


.grid-cols-2 {
    grid-template-columns:repeat(1, minmax(0, 1fr));
}


@media (min-width: 640px) {
    .grid-cols-2 {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}


.grid-cols-3 {
    grid-template-columns:repeat(1, minmax(0, 1fr));
}


@media (min-width: 600px) {
    .grid-cols-3 {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}


@media (min-width: 1040px) {
    .grid-cols-3 {
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}


.grid-cols-4 {
    grid-template-columns:repeat(1, minmax(0, 1fr));
}


@media (min-width: 540px) {
    .grid-cols-4 {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}


@media (min-width: 980px) {
    .grid-cols-4 {
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}


.flex {
    display:flex;
}


.flex > * {
    min-width:0;
}


.flex-col {
    flex-direction:column;
}


.flex-wrap {
    flex-wrap:wrap;
}


.items-center {
    align-items:center;
}


.items-start {
    align-items:flex-start;
}


.items-end {
    align-items:flex-end;
}


.justify-between {
    justify-content:space-between;
}


.justify-center {
    justify-content:center;
}


.justify-end {
    justify-content:flex-end;
}


.gap-2xs {
    gap:var(--space-2xs);
}


.gap-xs {
    gap:var(--space-xs);
}


.gap-sm {
    gap:var(--space-sm);
}


.gap-md {
    gap:var(--space-md);
}


.gap-lg {
    gap:var(--space-lg);
}


.gap-xl {
    gap:var(--space-xl);
}


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


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


.icon-sm {
    width:1em;
    height:1em;
    vertical-align:-0.15em;
}


.icon-lg {
    width:1.75em;
    height:1.75em;
    vertical-align:-0.3em;
}


.icon-xl {
    width:2.5em;
    height:2.5em;
    vertical-align:-0.4em;
}


@media (max-width: 768px) {
    :root {
        --frame-inset:6px;
        --header-height:72px;
    }
}


@media (max-width: 480px) {
    :root {
        --frame-inset:0px;
        --frame-border-width:0px;
    }


    .site-frame {
        margin:0;
        border:none;
        box-shadow:none;
    }
}


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