@font-face {
    font-family: 'Typewriter';
    src: url('/fonts/typewriter-latin-20260708.woff2') format('woff2');
    font-display: swap;
}

:root {
    color-scheme: light;
    --bg: #f5f1e8;
    --text: #26221d;
    --text-soft: #5f574d;
    --text-dim: #6f675c;
    --title: #15120f;
    --accent: #7a5529;
    --accent-bright: #4f3418;
    --accent-dim: #80623b;
    --rule: #d8cdbc;
    --rule-soft: #e7ded0;
    --link-rule: #c9b89c;
    --code-bg: #ede5d8;
    --panel-bg: #f0e8dc;
    --measure: 680px;
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b0b0a;
    --text: #c8c1b6;
    --text-soft: #9d9588;
    --text-dim: #8f877d;
    --title: #e0d5c2;
    --accent: #b79a64;
    --accent-bright: #d0b980;
    --accent-dim: #9f8b62;
    --rule: #25211b;
    --rule-soft: #181612;
    --link-rule: #4c3f2a;
    --code-bg: #13110e;
    --panel-bg: #10100e;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg);
    text-size-adjust: 100%;
}

body {
    min-height: 100%;
    max-width: var(--measure);
    margin: 0;
    padding: clamp(1.75rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem) 3rem;
    background: var(--bg);
    color: var(--text);
    font-family: 'Typewriter', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 15px;
    line-height: 1.72;
}

h1,
h2,
h3,
p,
pre,
dl {
    margin-top: 0;
}

h1 {
    margin-bottom: 0.35rem;
    color: var(--title);
    font-size: 1.25rem;
    font-weight: normal;
    line-height: 1.35;
    letter-spacing: 0.04em;
}

h3 {
    margin: 0 0 0.5rem;
    color: var(--accent-bright);
    font-size: 0.98rem;
    font-weight: normal;
    line-height: 1.45;
    letter-spacing: 0.02em;
}

p {
    margin-bottom: 0.95rem;
}

a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--link-rule);
}

a:hover {
    color: var(--accent-bright);
    border-bottom-color: var(--accent);
}

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

.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1;
    padding: 0.35rem 0.55rem;
    background: var(--bg);
    transform: translateY(-200%);
}

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

.site-header {
    margin-bottom: 1.75rem;
}

nav p {
    margin-bottom: 1rem;
}

.aside,
.note {
    color: var(--text-soft);
    font-style: italic;
}

.aside {
    max-width: 39rem;
}

.realm-state {
    margin: 0;
    color: var(--accent-dim);
    font-size: 0.86rem;
}

.realm-state span {
    padding-right: 0.25rem;
    color: var(--accent);
    font-size: 0.65rem;
}

.section-title {
    margin: 1.35rem 0 0.65rem;
    color: var(--text-dim);
    font-size: 0.78rem;
    font-weight: normal;
    line-height: 1.45;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.realm-details {
    margin-bottom: 1.6rem;
    border-bottom: 1px solid var(--rule-soft);
}

.realm-details div {
    display: grid;
    grid-template-columns: minmax(7rem, 9rem) 1fr;
    gap: 1rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--rule-soft);
}

dt {
    color: var(--text-dim);
}

dt::before {
    content: "- ";
}

dd {
    margin: 0;
    color: var(--text-soft);
}

code {
    padding: 0.1rem 0.35rem;
    border: 1px solid var(--rule-soft);
    border-radius: 2px;
    background: var(--code-bg);
    color: var(--accent-bright);
    font: inherit;
    font-size: 0.88em;
}

pre {
    overflow-x: auto;
    margin: 1.15rem 0;
    padding: 1rem;
    border: 1px solid var(--rule);
    background: var(--code-bg);
    color: var(--text-soft);
    font-size: 0.88rem;
    line-height: 1.55;
    white-space: pre-wrap;
}

pre code {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
}

.note {
    margin-top: 0.4rem;
    font-size: 0.85rem;
}

.site-footer {
    margin-top: 2.2rem;
}

.footer {
    margin-bottom: 0;
    color: var(--text-dim);
    font-size: 0.86rem;
}

.theme-toggle-wrap {
    display: flex;
    justify-content: flex-start;
    margin: 2rem 0 0;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.2rem 0;
    border: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    color: var(--text-dim);
    font: inherit;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    color: var(--accent);
}

.theme-toggle:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 4px;
}

.theme-toggle-track {
    position: relative;
    width: 2rem;
    height: 1rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--panel-bg);
}

.theme-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(1rem - 6px);
    height: calc(1rem - 6px);
    border-radius: 50%;
    background: var(--accent);
    transition: transform 160ms ease, background-color 160ms ease;
}

[data-theme="dark"] .theme-toggle-thumb {
    transform: translateX(1rem);
    background: var(--accent-bright);
}

@media (max-width: 640px) {
    body {
        padding: 1.7rem 1rem 2.5rem;
        font-size: 14.5px;
    }

    h1 {
        font-size: 1.18rem;
    }

    .realm-details div {
        grid-template-columns: 6rem 1fr;
        gap: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle-thumb {
        transition: none;
    }
}