:root {
--paper: #F0EDE6;
--paper-dark: #E8E4DB;
--ink: #1C1C1C;
--ink-soft: #3D3D38;
--accent: #1B2A4A;
--accent-light: #263d6e;
--meta: #8A8880;
--rule: #D0CCC3;
--rule-strong: #1C1C1C;
--white: #FAFAF8;
--active-bg: #E2DDD4;
--sidebar-w: 260px;
}

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

body {
background: var(--paper);
color: var(--ink);
font-family: 'Inter', sans-serif;
font-size: 15px;
line-height: 1.6;
display: flex;
min-height: 100vh;
}

/* SIDEBAR */
.sidebar {
width: var(--sidebar-w);
min-height: 100vh;
border-right: 1px solid var(--rule-strong);
display: flex;
flex-direction: column;
position: fixed;
top: 0; left: 0;
background: var(--paper);
z-index: 10;
}

.sidebar-header {
padding: 20px 20px 16px;
border-bottom: 1px solid var(--rule-strong);
}

.sidebar-brand {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
text-decoration: none;
}

.sidebar-mark {
width: 24px;
height: 24px;
background: var(--accent);
display: flex;
align-items: center;
justify-content: center;
font-family: 'IBM Plex Mono', monospace;
font-size: 9px;
color: var(--white);
font-weight: 500;
}

.sidebar-brand-text {
font-size: 13px;
font-weight: 600;
color: var(--ink);
}

.sidebar-title {
font-family: 'Newsreader', serif;
font-size: 20px;
font-weight: 600;
color: var(--ink);
line-height: 1.2;
}

.sidebar-nav {
flex: 1;
overflow-y: auto;
padding: 10px 0 20px;
}

.nav-area { margin-bottom: 2px; }

.nav-area-toggle {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 20px;
cursor: pointer;
user-select: none;
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--meta);
transition: color .15s;
}

.nav-area-toggle:hover { color: var(--ink); }
.nav-area-toggle.open { color: var(--accent); }

.nav-area-toggle .arrow {
font-size: 8px;
transition: transform .2s;
}

.nav-area-toggle.open .arrow { transform: rotate(90deg); }

.nav-project { display: none; }
.nav-project.open { display: block; }

.nav-project-title {
display: flex;
align-items: baseline;
gap: 8px;
padding: 8px 20px 6px 28px;
cursor: pointer;
border-left: 2px solid transparent;
}

.nav-project-title:hover { background: var(--active-bg); }

.nav-project-title.active {
border-left-color: var(--accent);
background: var(--active-bg);
}

.nav-project-id {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
color: var(--accent);
white-space: nowrap;
font-weight: 500;
}

.nav-project-name {
font-size: 13px;
color: var(--ink-soft);
font-weight: 500;
line-height: 1.3;
}

.nav-pages { display: none; padding: 2px 0 6px 0; }
.nav-pages.open { display: block; }

.nav-page {
display: block;
padding: 6px 20px 6px 44px;
font-size: 13px;
color: var(--meta);
cursor: pointer;
text-decoration: none;
transition: color .12s;
border-left: 2px solid transparent;
}

.nav-page:hover { color: var(--ink); }

.nav-page.active {
color: var(--accent);
font-weight: 500;
border-left-color: var(--accent);
background: var(--active-bg);
}

.nav-roadmap {
margin-top: 10px;
border-top: 1px solid var(--rule);
padding-top: 12px;
}

.nav-roadmap-label {
padding: 6px 20px;
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--rule);
}

.nav-roadmap-item {
padding: 7px 20px 7px 28px;
font-size: 12.5px;
color: var(--rule);
display: flex;
align-items: center;
gap: 8px;
}

.nav-roadmap-item::before {
content: '·';
font-family: 'IBM Plex Mono', monospace;
}

.sidebar-footer {
padding: 14px 20px;
border-top: 1px solid var(--rule);
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
color: var(--meta);
letter-spacing: .04em;
}

/* MAIN */
.main {
margin-left: var(--sidebar-w);
flex: 1;
min-height: 100vh;
display: flex;
flex-direction: column;
}

/* PROJECT PANELS — only one project block visible at a time */
.project { display: none; }
.project.active { display: block; }

.topbar {
border-bottom: 1px solid var(--rule);
padding: 12px 48px;
display: flex;
align-items: center;
gap: 6px;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
color: var(--meta);
position: sticky;
top: 0;
background: var(--paper);
z-index: 5;
}

.topbar span { color: var(--ink); }
.topbar .sep { color: var(--rule); }

.content {
padding: 52px 48px 80px;
max-width: 820px;
}

/* Project header */
.project-eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
color: var(--accent);
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 16px;
}

.project-eyebrow::after {
content: '';
flex: 1;
max-width: 60px;
height: 1px;
background: var(--accent);
opacity: .3;
}

.project-title {
font-family: 'Newsreader', serif;
font-size: 36px;
font-weight: 600;
line-height: 1.15;
letter-spacing: -.01em;
margin-bottom: 14px;
}

.project-meta-row {
display: flex;
gap: 28px;
margin-bottom: 28px;
padding-bottom: 22px;
border-bottom: 1px solid var(--rule);
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
color: var(--meta);
flex-wrap: wrap;
}

.project-meta-row b { color: var(--ink); font-weight: 500; }

.status-live {
color: #3D6B4F;
font-weight: 500;
}

.status-live::before {
content: '●';
margin-right: 5px;
font-size: 8px;
}

/* Tabs */
.tab-nav {
display: flex;
border-bottom: 1px solid var(--rule);
margin-bottom: 36px;
}

.tab {
padding: 10px 20px;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--meta);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color .12s;
}

.tab:hover { color: var(--ink); }

.tab.active {
color: var(--accent);
border-bottom-color: var(--accent);
}

.section { display: none; }
.section.active { display: block; }

/* Content typography */
h2.section-heading {
font-family: 'Newsreader', serif;
font-size: 22px;
font-weight: 600;
margin-bottom: 14px;
margin-top: 36px;
}

h2.section-heading:first-child { margin-top: 0; }

p.body {
color: var(--ink-soft);
font-size: 15px;
margin-bottom: 16px;
max-width: 640px;
line-height: 1.7;
}

/* Problem block */
.problem-block {
background: var(--paper-dark);
border-left: 3px solid var(--accent);
padding: 18px 22px;
margin: 24px 0;
max-width: 640px;
}

.problem-block p {
font-family: 'Newsreader', serif;
font-style: italic;
font-size: 17px;
color: var(--ink-soft);
line-height: 1.55;
}

/* Decision list */
.decision-list {
margin: 20px 0;
display: flex;
flex-direction: column;
gap: 0;
max-width: 640px;
}

.decision-item {
display: grid;
grid-template-columns: 140px 1fr;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid var(--rule);
}

.decision-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px;
color: var(--accent);
text-transform: uppercase;
letter-spacing: .04em;
padding-top: 2px;
}

.decision-text {
font-size: 14px;
color: var(--ink-soft);
line-height: 1.6;
}

/* Architecture diagram */
.diagram-wrap {
border: 1px solid var(--rule);
padding: 28px 24px;
margin: 24px 0;
background: var(--paper-dark);
max-width: 680px;
}

.diagram-wrap pre {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
line-height: 1.65;
color: var(--ink-soft);
overflow-x: auto;
}

.fig-caption {
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px;
color: var(--meta);
margin-top: 12px;
}

.fig-caption b { color: var(--ink-soft); }

/* GitHub section */
.repo-block {
border: 1px solid var(--rule-strong);
padding: 20px 24px;
margin: 20px 0;
max-width: 640px;
}

.repo-block-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--rule);
}

.repo-name {
font-family: 'IBM Plex Mono', monospace;
font-size: 13px;
color: var(--accent);
font-weight: 500;
}

.repo-link {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
color: var(--meta);
text-decoration: none;
border-bottom: 1px solid var(--rule);
padding-bottom: 1px;
transition: color .12s;
}

.repo-link:hover { color: var(--ink); }

.folder-tree {
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
color: var(--ink-soft);
line-height: 1.7;
padding: 16px 0;
border-top: 1px solid var(--rule);
margin-top: 14px;
}

.code-block {
background: var(--ink);
color: #C8C4BC;
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
padding: 16px 18px;
line-height: 1.7;
margin: 14px 0;
overflow-x: auto;
max-width: 640px;
}

.code-block .comment { color: #6B7A6B; }
.code-block .cmd { color: #A8C4A8; }

/* Playbook section */
.playbook-card {
border: 1px solid var(--rule-strong);
max-width: 500px;
margin: 24px 0;
}

.playbook-card-header {
background: var(--accent);
padding: 20px 24px;
}

.playbook-card-header .label {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
color: rgba(255,255,255,.4);
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 6px;
}

.playbook-card-header h3 {
font-family: 'Newsreader', serif;
font-size: 21px;
color: var(--white);
font-weight: 600;
line-height: 1.2;
}

.playbook-card-body {
padding: 20px 24px;
background: var(--paper-dark);
}

.playbook-contents {
list-style: none;
margin-bottom: 20px;
}

.playbook-contents li {
font-size: 13.5px;
color: var(--ink-soft);
padding: 8px 0;
border-bottom: 1px solid var(--rule);
display: flex;
align-items: center;
gap: 10px;
}

.playbook-contents li::before {
content: attr(data-n);
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
color: var(--meta);
min-width: 20px;
}

.playbook-cta {
display: block;
background: var(--accent);
color: var(--white);
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
letter-spacing: .05em;
text-transform: uppercase;
padding: 12px 18px;
text-decoration: none;
text-align: center;
transition: background .15s;
}

.playbook-cta:hover { background: var(--accent-light); }

.playbook-note {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
color: var(--meta);
margin-top: 10px;
text-align: center;
}