:root {
    --ground:#EDE6E4;
    --surface:#F7F3F2;
    --surface-alt:#E3DBD9;
    --ink:#1E1B1A;
    --ink-muted:#635C59;
    --ink-faint:#8E8480;
    --border:#D8CFCD;
    --border-subtle:rgba(30, 27, 26, 0.08);
    --border-strong:#BAAFAC;
    --accent:#A34837;
    --accent-dark:#823223;
    --accent-soft:#F3E6E3;
    --accent-focus:rgba(184, 90, 72, 0.25);
    --white:#FFF;
    --black:#0E0C0C;

    --foho-cf8:'Syne', system-ui, -apple-system, sans-serif;
    --foho-6a4:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --foho-308:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --step--2:clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
    --step--1:clamp(0.82rem, 0.78rem + 0.18vw, 0.92rem);
    --foho-d1f:  clamp(0.95rem, 0.90rem + 0.25vw, 1.05rem);
    --foho-a9b:  clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem);
    --foho-a04:  clamp(1.35rem, 1.20rem + 0.75vw, 1.72rem);
    --foho-9d8:  clamp(1.65rem, 1.40rem + 1.20vw, 2.20rem);
    --foho-166:  clamp(2.05rem, 1.65rem + 1.90vw, 2.85rem);
    --foho-388:  clamp(2.55rem, 1.95rem + 2.80vw, 3.75rem);

    --measure-narrow:56ch;
    --measure-normal:68ch;
    --measure-wide:82ch;

    --space-3xs:clamp(0.25rem, 0.22rem + 0.12vw, 0.35rem);
    --space-2xs:clamp(0.45rem, 0.40rem + 0.20vw, 0.60rem);
    --space-xs:  clamp(0.70rem, 0.62rem + 0.35vw, 0.90rem);
    --space-s:   clamp(0.95rem, 0.85rem + 0.50vw, 1.25rem);
    --space-m:   clamp(1.40rem, 1.20rem + 0.85vw, 1.90rem);
    --space-l:   clamp(2.10rem, 1.80rem + 1.30vw, 2.85rem);
    --space-xl:  clamp(3.15rem, 2.65rem + 2.10vw, 4.30rem);
    --space-2xl:clamp(4.50rem, 3.80rem + 3.20vw, 6.40rem);
    --space-3xl:clamp(6.00rem, 5.00rem + 4.50vw, 8.50rem);

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

    --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
    --ease-swift:cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast:140ms;
    --duration-normal:220ms;

    --duration-slow:400ms;

    --container-max:1280px;
    --container-pad:clamp(1rem, 3.5vw, 2.5rem);
    --header-height:4.5rem;
    --header-height-condensed:3.5rem;
}

*, *::before, *::after {

    box-sizing:border-box;
    margin:0;
    padding:0;
}

html {
    font-size:16px;
    scroll-behavior:smooth;
    background-color:var(--ground);
    color:var(--ink);
    -webkit-text-size-adjust:100%;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
}

body {
    font-family:var(--foho-6a4);
    font-size:var(--foho-d1f);
    line-height:1.68;
    letter-spacing:-0.015em;
    background-color:var(--ground);
    color:var(--ink);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
}

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

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

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

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

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

h1, h2, h3, h4, h5, h6 {
    font-family:var(--foho-cf8);
    font-weight:800;
    line-height:1.15;
    letter-spacing:-0.025em;
    color:var(--ink);
    text-wrap:balance;
    overflow-wrap:break-word;
}

h1 { font-size: var(--foho-166); }
h2 { font-size: var(--foho-9d8); }
h3 { font-size: var(--foho-a04); }
h4 { font-size: var(--foho-a9b); }
h5 { font-size: var(--foho-d1f); }
h6 { font-size: var(--step--1); }

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

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

strong, b {
    font-weight:600;
    color:var(--ink);
}

small {
    font-size:var(--step--1);
    line-height:1.5;
}

ul, ol { padding-left:1.4em; }

li { margin-bottom:0.35em; }

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

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

code, kbd, samp, pre {
    font-family:var(--foho-308);
    font-size:0.9em;
}

.skip-link {
    position:absolute;
    top:-100px;
    left:1rem;
    z-index:10000;
    padding:0.75rem 1.25rem;
    background-color:var(--ink);
    color:var(--surface);
    text-decoration:none;
    font-family:var(--foho-308);
    font-weight:600;
    font-size:var(--step--1);
    border:1px solid var(--accent);
    border-radius:var(--radius-xs);

    box-shadow:0 4px 12px rgba(0, 0, 0, 0.2);
    transition:top var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
    top:1rem;
    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;
}

.shell-main {
    flex:1 0 auto;
    width:100%;
}

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

.container-narrow {
    width:100%;
    max-width:860px;
    margin-inline:auto;
    padding-inline:var(--container-pad);
}

.container-wide {
    width:100%;
    max-width:1440px;
    margin-inline:auto;
    padding-inline:var(--container-pad);
}

.flow > * + * { margin-top:var(--space-s); }

.flow-l > * + * { margin-top:var(--space-l); }

.flow-xl > * + * { margin-top:var(--space-xl); }

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

.split {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:var(--space-s);
}

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

.icon-s { width: 0.9em; height: 0.9em; }
.icon-m { width: 1.25em; height: 1.25em; }
.icon-l { width: 1.75em; height: 1.75em; }

.frame-interface {
    position:relative;
    border:1px solid var(--border);
    background-color:var(--surface);
    padding:var(--space-m);
}

.frame-interface::before,
.frame-interface::after {
    content:'+';
    position:absolute;
    font-family:var(--foho-308);
    font-size:0.85rem;
    line-height:1;
    color:var(--accent);
    pointer-events:none;
}

.frame-interface::before {
    top:-6px;
    left:-5px;
}

.frame-interface::after {
    bottom:-7px;
    right:-5px;
}

.frame-status-bar {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:0.5rem;
    padding:0.35rem 0.65rem;
    background-color:var(--surface-alt);
    border-bottom:1px solid var(--border);
    font-family:var(--foho-308);
    font-size:var(--step--2);
    letter-spacing:0.04em;
    color:var(--ink);
    text-transform:uppercase;
}

.frame-status-bar > * { min-width:0; }

.frame-status-bar [data-status-dot] {
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background-color:var(--accent);
    margin-right:0.35rem;
    box-shadow:0 0 0 2px var(--accent-soft);
}

.frame-ticks {
    position:relative;
    height:6px;
    border-top:1px dashed var(--border);
    margin-top:var(--space-xs);
    display:flex;
    justify-content:space-between;
}

.frame-ticks span {
    width:1px;
    height:4px;
    background-color:var(--border-strong);
}

.prose {
    font-size:var(--foho-d1f);
    line-height:1.72;
    color:var(--ink);
}

.prose h2 {
    font-size:var(--foho-a04);
    margin-top:var(--space-xl);
    margin-bottom:var(--space-xs);
}

.prose h3 {
    font-size:var(--foho-a9b);
    margin-top:var(--space-l);
    margin-bottom:var(--space-2xs);
}

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

.prose ul, .prose ol { margin:var(--space-s) 0 var(--space-m) 1.25rem; }

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

.prose hr { margin:var(--space-xl) 0; }

.text-caption-lead {
    font-weight:600;
    color:var(--ink);
    letter-spacing:-0.01em;
}

.text-meta {
    font-family:var(--foho-308);
    font-size:var(--step--1);
    color:var(--ink-muted);
    letter-spacing:-0.01em;
}

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

.text-mono { font-family:var(--foho-308); }

.text-display { font-family:var(--foho-cf8); }

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