:root {
    --ink: #2b2118;
    --muted: #776755;
    --sand: #eee1c4;
    --paper: #fffaf0;
    --sun: #ba6b26;
    --sun-dark: #7d3d18;
    --night: #211b25;
    --line: #d8c5a3;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 90% 4%, rgb(186 107 38 / 12%), transparent 24rem),
        var(--paper);
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1.7;
}

.masthead {
    min-height: 76px;
    padding: 12px clamp(18px, 4vw, 52px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff8e8;
    background: var(--night);
    border-bottom: 3px solid var(--sun);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
    letter-spacing: .04em;
}

.brand-mark { color: #e9aa51; font-size: 2rem; }
.brand strong, .brand small { display: block; }
.brand small { color: #d9c8aa; font-size: .78rem; text-transform: uppercase; }

.shell {
    display: grid;
    grid-template-columns: minmax(220px, 290px) minmax(0, 850px);
    gap: clamp(32px, 6vw, 84px);
    max-width: 1260px;
    margin: 0 auto;
    padding: 42px clamp(18px, 4vw, 52px) 80px;
}

.sidebar { border-right: 1px solid var(--line); padding-right: 28px; }
.sidebar nav { position: sticky; top: 28px; }
.nav-label { margin: 0 0 12px; color: var(--sun-dark); font-size: .75rem; font-weight: bold; letter-spacing: .14em; text-transform: uppercase; }
.sidebar a { display: block; padding: 7px 10px; border-left: 2px solid transparent; color: #514535; font-family: system-ui, sans-serif; font-size: .9rem; line-height: 1.35; text-decoration: none; }
.sidebar a:hover { color: var(--sun-dark); background: #f5ead3; }
.sidebar a[aria-current='page'] { color: var(--sun-dark); border-left-color: var(--sun); background: #f2e2c4; font-weight: 650; }

.content { min-width: 0; }
.prose { font-size: 1.05rem; }
.prose h1, .prose h2, .prose h3 { color: var(--night); line-height: 1.2; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { scroll-margin-top: 96px; }
.prose h1 { margin: 0 0 1.5rem; font-size: clamp(2.2rem, 6vw, 4.2rem); letter-spacing: -.035em; }
.prose h1::after { content: ''; display: block; width: 74px; height: 3px; margin-top: 18px; background: var(--sun); }
.prose h2 { margin-top: 2.6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line); font-size: 1.7rem; }
.prose h3 { margin-top: 2rem; font-size: 1.25rem; }
.prose a { color: var(--sun-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose blockquote { margin: 1.5rem 0; padding: .5rem 1.25rem; color: #5f4e3b; background: #f4e7cf; border-left: 4px solid var(--sun); }
.prose code { padding: .12em .35em; background: #eee4d3; border-radius: 3px; font-size: .9em; }
.prose pre { overflow-x: auto; padding: 18px; color: #f9efd9; background: var(--night); border-radius: 5px; }
.prose pre code { padding: 0; background: transparent; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table-responsive { width: 100%; overflow-x: auto; }
.prose th, .prose td { padding: 9px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { background: #f1e1c4; }
.prose hr { margin: 3rem 0; border: 0; border-top: 1px solid var(--line); }
.notice { margin-bottom: 24px; padding: 12px 16px; background: #f4e7cf; border-left: 4px solid var(--sun); font-family: system-ui, sans-serif; }
.menu-button { display: none; padding: 8px 12px; color: #fff8e8; background: transparent; border: 1px solid #806f73; border-radius: 4px; }

@media (max-width: 760px) {
    .masthead { position: sticky; top: 0; z-index: 2; }
    .menu-button { display: block; }
    .shell { display: block; padding-top: 24px; }
    .sidebar { display: none; margin-bottom: 28px; padding: 16px; background: #f2e2c4; border: 0; }
    .sidebar.is-open { display: block; }
    .sidebar nav { position: static; }
    .prose h1 { font-size: 2.3rem; }
}