@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/* ===========================================
   MAIN — Assemble via postcss-import
   =========================================== */
/* ===========================================
   TOKENS — epaper-ui design system
   Warm paper tones · 4px grid · fluid type
   =========================================== */

:root {
  /* 4px grid base */
  --epaper-grid: 0.25rem;

  /* Primitive grayscale — warm paper palette */
  --epaper-color-000: hsl(43, 41%, 97%);
  --epaper-color-100: hsl(43, 28%, 89%);
  --epaper-color-200: hsl(42, 20%, 79%);
  --epaper-color-300: hsl(35, 13%, 69%);
  --epaper-color-400: hsl(30, 7%, 59%);
  --epaper-color-500: hsl(22, 6%, 49%);
  --epaper-color-600: hsl(20, 6%, 39%);
  --epaper-color-700: hsl(20, 6%, 29%);
  --epaper-color-800: hsl(20, 6%, 19%);
  --epaper-color-900: hsl(20, 6%, 9%);

  --epaper-color-red: hsl(354, 42%, 56%);
  --epaper-color-orange: hsl(14, 51%, 63%);
  --epaper-color-yellow: hsl(40, 71%, 73%);
  --epaper-color-green: hsl(92, 28%, 65%);
  --epaper-color-purple: hsl(311, 20%, 63%);
  --epaper-color-blue-dark: hsl(213, 32%, 52%);
  --epaper-color-blue-muted: hsl(210, 34%, 63%);
  --epaper-color-blue-soft: hsl(193, 43%, 67%);
  --epaper-color-blue-aqua: hsl(179, 25%, 65%);

  /* Semantic tokens */
  --epaper-fg: var(--epaper-color-900);
  --epaper-fg-muted: var(--epaper-color-600);
  --epaper-fg-subtle: var(--epaper-color-400);
  --epaper-bg: var(--epaper-color-000);
  --epaper-bg-muted: var(--epaper-color-100);
  --epaper-border-color: var(--epaper-color-300);
  --epaper-border-strong: var(--epaper-color-600);
  --epaper-surface: var(--epaper-color-000);
  --epaper-focus-color: var(--epaper-color-900);
  --epaper-selection-bg: var(--epaper-color-300);
  --epaper-mark-bg: var(--epaper-color-200);

  /* Spacing scale — 4px increments */
  --epaper-space-1: calc(var(--epaper-grid) * 1);
  --epaper-space-2: calc(var(--epaper-grid) * 2);
  --epaper-space-3: calc(var(--epaper-grid) * 3);
  --epaper-space-4: calc(var(--epaper-grid) * 4);
  --epaper-space-5: calc(var(--epaper-grid) * 6);
  --epaper-space-6: calc(var(--epaper-grid) * 8);
  --epaper-space-7: calc(var(--epaper-grid) * 12);
  --epaper-space-8: calc(var(--epaper-grid) * 16);
  --epaper-space-9: calc(var(--epaper-grid) * 20);

  /* Typography */
  --epaper-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --epaper-font-mono: "Fira Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Fluid type — segmented, rounded to 4px grid
     Stable sizes, no clamp. Base: 16px.
     Every value = calc(var(--epaper-grid) * N) for N grid units. */
  --epaper-text-xs: calc(var(--epaper-grid) * 3);     /* 12px */
  --epaper-text-sm: calc(var(--epaper-grid) * 3.5);   /* 14px */
  --epaper-text-base: calc(var(--epaper-grid) * 4);   /* 16px */
  --epaper-text-lg: calc(var(--epaper-grid) * 5);     /* 20px */
  --epaper-text-xl: calc(var(--epaper-grid) * 6);     /* 24px */
  --epaper-text-2xl: calc(var(--epaper-grid) * 7);    /* 28px */
  --epaper-text-3xl: calc(var(--epaper-grid) * 8);    /* 32px */
  --epaper-text-4xl: calc(var(--epaper-grid) * 10);   /* 40px */

  /* Line heights — paired with text-* tokens
     line = calc(1 + (grid * N) / font-size) where N = extra grid units above text */
  --epaper-line-tight: calc(1 + (var(--epaper-grid) * 1) / var(--epaper-text-sm));    /* 14px + 4px  = 18px → 1.286 */
  --epaper-line-xs: calc(1 + (var(--epaper-grid) * 2) / var(--epaper-text-xs));       /* 12px + 8px  = 20px → 1.667 */
  --epaper-line-sm: calc(1 + (var(--epaper-grid) * 2) / var(--epaper-text-sm));     /* 14px + 8px  = 22px → 1.571 */
  --epaper-line-base: calc(1 + (var(--epaper-grid) * 3) / var(--epaper-text-base));  /* 16px + 12px = 28px → 1.75 */
  --epaper-line-lg: calc(1 + (var(--epaper-grid) * 3) / var(--epaper-text-lg));      /* 20px + 12px = 32px → 1.6 */
  --epaper-line-xl: calc(1 + (var(--epaper-grid) * 3) / var(--epaper-text-xl));      /* 24px + 12px = 36px → 1.5 */
  --epaper-line-2xl: calc(1 + (var(--epaper-grid) * 3) / var(--epaper-text-2xl));    /* 28px + 12px = 40px → 1.429 */
  --epaper-line-3xl: calc(1 + (var(--epaper-grid) * 3) / var(--epaper-text-3xl));    /* 32px + 12px = 44px → 1.375 */
  --epaper-line-4xl: calc(1 + (var(--epaper-grid) * 4) / var(--epaper-text-4xl));    /* 40px + 16px = 56px → 1.4 */

  /* Generic leading tokens for body text */
  --epaper-leading-tight: var(--epaper-line-tight);
  --epaper-leading-snug: var(--epaper-line-sm);
  --epaper-leading-normal: var(--epaper-line-base);
  --epaper-leading-relaxed: var(--epaper-line-lg);

  /* Weights */
  --epaper-weight-normal: 400;
  --epaper-weight-medium: 500;
  --epaper-weight-bold: 700;

  /* Borders */
  --epaper-border-thin: calc(var(--epaper-grid) * 0.25);
  --epaper-border-medium: calc(var(--epaper-grid) * 0.5);
  --epaper-border-thick: var(--epaper-grid);
  --epaper-radius-sm: calc(var(--epaper-grid) * 1);
  --epaper-radius-md: calc(var(--epaper-grid) * 2);

  /* Measure */
  --epaper-measure: 65ch;
  --epaper-measure-narrow: 45ch;
  --epaper-measure-wide: 80ch;

  /* Column presets */
  --epaper-col-4:  calc(var(--epaper-grid) * 16);
  --epaper-col-6:  calc(var(--epaper-grid) * 24);
  --epaper-col-8:  calc(var(--epaper-grid) * 32);
  --epaper-col-12: calc(var(--epaper-grid) * 48);
  --epaper-col-16: calc(var(--epaper-grid) * 64);
  --epaper-col-20: calc(var(--epaper-grid) * 80);
}
/* ===========================================
   RESET
   =========================================== */

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

html {
  font-size: 100%;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, fieldset, pre {
  margin: 0;
}

:where(ul, ol)[class] {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ===========================================
   TYPOGRAPHY — Manifesto prose (original style)
   All sizes on epaper-grid
   =========================================== */

body {
  font-family: var(--epaper-font-sans);
  font-size: var(--epaper-text-base);
  line-height: var(--epaper-line-base);
  color: var(--epaper-fg);
  background: var(--epaper-bg);
  -webkit-font-smoothing: antialiased;
}

/* Headings */

h1, h2, h3, h4 {
  line-height: var(--epaper-line-tight);
  font-weight: 600;
}

h1 {
  font-size: var(--epaper-text-4xl);
  letter-spacing: -0.02em;
  margin-top: var(--epaper-space-8);
  margin-bottom: var(--epaper-space-6);
  padding-top: var(--epaper-space-6);
}

h2 {
  font-size: var(--epaper-text-xl);
  margin-top: var(--epaper-space-9);
  margin-bottom: var(--epaper-space-4);
  padding-top: var(--epaper-space-4);
  border-top: var(--epaper-border-thin) solid var(--epaper-border-color);
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--epaper-text-lg);
  margin-top: var(--epaper-space-5);
  margin-bottom: var(--epaper-space-2);
}

h4 {
  font-size: var(--epaper-text-sm);
  margin-top: var(--epaper-space-4);
  margin-bottom: var(--epaper-space-1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Prose */

p {
  margin-bottom: var(--epaper-space-4);
}

p:last-child {
  margin-bottom: 0;
}

p img {
  max-width: var(--epaper-measure);
}

/* Links */

a {
  color: var(--epaper-fg);
  text-decoration: underline;
  text-underline-offset: calc(var(--epaper-grid) * 0.5);
}

a:hover {
  text-decoration: none;
}

a:visited {
  color: var(--epaper-fg-muted);
}

strong {
  font-weight: var(--epaper-weight-bold);
}

/* Lists */

ul, ol, dl {
  margin-bottom: var(--epaper-space-4);
  padding-left: var(--epaper-space-5);
}

li {
  margin-bottom: var(--epaper-space-1);
}

dt {
  margin-top: var(--epaper-space-4);
}

/* Tables */

table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--epaper-space-6);
  font-size: var(--epaper-text-sm);
}

th {
  text-align: left;
  font-weight: var(--epaper-weight-bold);
  padding: var(--epaper-space-2) var(--epaper-space-3);
  border-bottom: var(--epaper-border-thin) solid var(--epaper-fg);
}

td {
  padding: var(--epaper-space-2) var(--epaper-space-3);
  border-bottom: var(--epaper-border-thin) solid var(--epaper-border-color);
  vertical-align: top;
}

tr:last-child td {
  border-bottom: none;
}

/* Blockquote — manifesto statements */

blockquote {
  margin: var(--epaper-space-5) 0;
  padding: var(--epaper-space-4) var(--epaper-space-5);
  border-left: var(--epaper-border-thick) solid var(--epaper-fg);
  background: var(--epaper-bg-muted);
  font-weight: 600;
  font-size: var(--epaper-text-base);
  line-height: var(--epaper-line-base);
}

blockquote p {
  margin-bottom: 0;
}

/* Code */

code {
  font-family: var(--epaper-font-mono);
  font-size: 0.85em;
  background: var(--epaper-bg-muted);
  padding: 0.15em 0.4em;
  border-radius: 0;
}

pre {
  font-family: var(--epaper-font-mono);
  background: var(--epaper-bg-muted);
  padding: var(--epaper-space-4) var(--epaper-space-5);
  margin-bottom: var(--epaper-space-5);
  overflow-x: auto;
  border: var(--epaper-border-thin) solid var(--epaper-border-color);
  font-size: var(--epaper-text-sm);
  line-height: var(--epaper-line-sm);
}

pre code {
  background: none;
  padding: 0;
}

/* Horizontal rule */

hr {
  border: none;
  border-top: var(--epaper-border-thin) solid var(--epaper-border-color);
  margin: var(--epaper-space-6) 0;
}

/* Appendix list */

.appendix-list {
  list-style: none;
  padding: 0;
}

.appendix-list li {
  padding: var(--epaper-space-2) 0;
  border-bottom: var(--epaper-border-thin) solid var(--epaper-border-color);
}

.appendix-list a {
  font-weight: 600;
  text-decoration: none;
}

.appendix-list a:hover {
  text-decoration: underline;
}

/* Principles list */

.principles {
  list-style: none;
  padding: 0;
  margin: var(--epaper-space-5) 0;
  counter-reset: principle;
}

.principles li {
  counter-increment: principle;
  padding: var(--epaper-space-4) 0;
  border-bottom: var(--epaper-border-thin) solid var(--epaper-border-color);
  font-weight: var(--epaper-weight-medium);
}

.principles li::before {
  content: counter(principle) ".";
  font-weight: 800;
  font-size: var(--epaper-text-sm);
  color: var(--epaper-fg-subtle);
  margin-right: var(--epaper-space-2);
}

/* Selection & focus */

::selection {
  background: var(--epaper-selection-bg);
  color: var(--epaper-fg);
}

:focus-visible {
  outline: var(--epaper-border-medium) solid var(--epaper-focus-color);
  outline-offset: calc(var(--epaper-grid) * 0.5);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Mobile */

@media (max-width: 48rem) {
  h1 { font-size: var(--epaper-text-2xl); }
  h2 { font-size: var(--epaper-text-lg); }
  h3 { font-size: var(--epaper-text-base); }

  blockquote {
    margin: var(--epaper-space-4) 0;
    padding: var(--epaper-space-3) var(--epaper-space-4);
    font-size: var(--epaper-text-base);
  }

  pre {
    padding: var(--epaper-space-3);
    font-size: var(--epaper-text-xs);
  }
}

/* ===========================================
   LAYOUT — Manifesto sidebar + content (original structure)
   All sizes on epaper-grid
   =========================================== */

/* App shell */

html, body {
  height: 100%;
}

.wrapper {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(var(--epaper-grid) * 70);  /* 17.5rem = 280px */
  height: 100vh;
  background: var(--epaper-bg);
  /* border-right: var(--epaper-border-thin) solid var(--epaper-border-color); */
  padding: 0;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: var(--epaper-space-6) var(--epaper-space-6) var(--epaper-space-6);
  margin-bottom: var(--epaper-space-4);
}

.sidebar-title {
  font-size: var(--epaper-text-base);
  font-weight: var(--epaper-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--epaper-fg);
  line-height: var(--epaper-line-base);
  display: block;
  text-decoration: none;
}

.sidebar-title small {
  font-weight: var(--epaper-weight-normal);
  font-size: var(--epaper-text-xs);
  color: var(--epaper-fg-subtle);
  display: block;
  margin-top: var(--epaper-space-1);
  text-transform: none;
  letter-spacing: 0;
}

.sidebar-nav-wrap {
  flex: 1;
  overflow-y: auto;
}

.sidebar-nav {
  list-style: none;
  padding: 0 var(--epaper-space-6);
  line-height: var(--epaper-line-base);
}

.sidebar-nav li {
  margin-bottom: 0;
}

.sidebar-nav a {
  display: block;
  padding: var(--epaper-space-2) 0;
  font-size: var(--epaper-text-sm);
  color: var(--epaper-fg-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
  color: var(--epaper-fg);
  font-weight: 600;
}

.sidebar-nav .subsection {
  padding-left: var(--epaper-space-4);
  font-size: var(--epaper-text-xs);
}

.sidebar-nav .divider {
  margin: var(--epaper-space-3) 0;
  border: none;
  border-top: var(--epaper-border-thin) solid var(--epaper-border-color);
}

/* Sidebar footer */

.sidebar-footer {
  padding: var(--epaper-space-4) var(--epaper-space-6);
  /* border-top: var(--epaper-border-thin) solid var(--epaper-border-color); */
  font-size: var(--epaper-text-xs);
}

.sidebar-footer-links {
  display: flex;
  gap: var(--epaper-space-3);
}

.sidebar-footer a {
  color: var(--epaper-fg-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.sidebar-footer a:hover,
.sidebar-footer a.active {
  color: var(--epaper-fg);
  font-weight: 600;
}

.sidebar-copy {
  color: var(--epaper-fg-subtle);
  display: block;
  margin-top: var(--epaper-space-1);
}

/* Submenu — page headings nested under active section */

.sidebar-submenu {
  list-style: none;
  padding: 0 0 0 var(--epaper-space-4);
  margin: 0;
}

.sidebar-submenu ul {
  list-style: none;
  padding: 0 0 0 var(--epaper-space-4);
  margin: 0;
}

.sidebar-submenu a.subsection {
  padding: var(--epaper-space-1) 0;
  font-size: var(--epaper-text-xs);
  color: var(--epaper-fg-subtle);
  font-weight: var(--epaper-weight-normal);
}

.sidebar-submenu a.subsection:hover {
  color: var(--epaper-fg);
}

/* Main content */

.main {
  margin-left: calc(var(--epaper-grid) * 70);  /* 17.5rem = 280px */
  flex: 1;
  min-height: 100vh;
}

.content {
  max-width: calc(var(--epaper-grid) * 200);  /* 45rem = 720px */
  padding: var(--epaper-space-6) var(--epaper-space-6) calc(var(--epaper-space-6) * 2);
  margin-bottom: var(--epaper-space-8);
}

/* Mobile */

/* Skip to content — keyboard accessibility */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--epaper-space-4);
  z-index: 1000;
  padding: var(--epaper-space-2) var(--epaper-space-4);
  background: var(--epaper-fg);
  color: var(--epaper-bg);
  font-size: var(--epaper-text-sm);
  font-weight: var(--epaper-weight-bold);
  text-decoration: none;
  transition: top 0.15s;
}

.skip-link:focus {
  top: var(--epaper-space-2);
  outline: var(--epaper-border-medium) solid var(--epaper-focus-color);
  outline-offset: var(--epaper-border-thin);
}

@media (max-width: 48rem) {
  html, body {
    height: auto;
  }

  .wrapper {
    flex-direction: column;
    min-height: auto;
  }

  .sidebar {
    position: relative;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: var(--epaper-border-thin) solid var(--epaper-border-color);
    padding: 0;
    overflow: visible;
  }

  .sidebar-header {
    padding: var(--epaper-space-4) var(--epaper-space-4);
    margin-bottom: var(--epaper-space-3);
  }

  .sidebar-nav-wrap {
    overflow: visible;
  }

  .sidebar-nav {
    padding: 0 var(--epaper-space-4) var(--epaper-space-3);
  }

  .sidebar-footer {
    padding: var(--epaper-space-3) var(--epaper-space-4);
  }

  .main {
    margin-left: 0;
  }

  .content {
    max-width: none;
    padding: var(--epaper-space-4) var(--epaper-space-4) calc(var(--epaper-space-4) * 2);
  }
}