/* ==========================================================================
   democraticsocialism101.com base stylesheet
   All design tokens live in :root below. Component rules reference tokens for
   colors, spacing, radii, and blur. No en dashes or em dashes anywhere,
   including comments. ASCII hyphens only.
   ========================================================================== */

/* Design tokens */
:root {
  /* Color: blues (dominant) */
  --color-navy: #0b2545;
  --color-blue-dark: #13315c;
  --color-blue: #1b4e8f;
  --color-blue-strong: #16406f;
  --color-link: #1b4e8f;
  --color-link-hover: #16406f;

  /* Color: red (accent) */
  --color-red: #b3141c;
  --color-red-strong: #8f1016;
  /* Lighter red for use on dark (navy) surfaces, meets WCAG AA there */
  --color-red-on-dark: #ff6b6b;

  /* Color: surfaces (white and off-white) */
  --color-white: #ffffff;
  --color-surface: #f5f8fc;
  --color-surface-2: #e7eef7;

  /* Color: ink (text) */
  --color-ink: #10233a;
  --color-ink-muted: #415068;
  --color-on-dark: #f5f8fc;
  --color-on-dark-muted: #c6d4e6;

  /* Color: comparison matrix, one hue per economic model.
     Ordered from predominantly social ownership to predominantly private.
     Validated as a categorical set on the light surface: all five clear the
     lightness band and chroma floor, worst adjacent pair separation is
     15.6 normal vision and 15.2 under simulated deuteranopia. Every column
     also carries a text label, so color never carries identity alone. */
  --model-1: #2a78d6;
  --model-2: #1baf7a;
  --model-3: #008300;
  --model-4: #eda100;
  --model-5: #e34948;
  /* Ink chosen per fill so header text clears WCAG large-text contrast */
  --model-1-ink: #ffffff;
  --model-2-ink: #10233a;
  --model-3-ink: #ffffff;
  --model-4-ink: #10233a;
  --model-5-ink: #ffffff;
  /* Pale washes of the same hues for cell backgrounds */
  --model-1-wash: #eaf2fc;
  --model-2-wash: #e4f7f0;
  --model-3-wash: #e8f4e8;
  --model-4-wash: #fdf3e0;
  --model-5-wash: #fdecec;

  /* Color: borders and hairlines */
  --color-border: #d3deec;
  --color-hairline-on-dark: rgba(255, 255, 255, 0.14);

  /* Color: focus ring */
  --color-focus: #2667b0;

  /* Typography */
  --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --line-body: 1.65;
  --line-heading: 1.2;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Blur and glass surfaces */
  --blur-glass: 10px;
  --glass-card-bg: rgba(255, 255, 255, 0.72);
  --glass-card-bg-solid: #ffffff;
  --glass-card-border: rgba(19, 49, 92, 0.18);
  --glass-nav-bg: rgba(11, 37, 69, 0.72);
  --glass-nav-bg-solid: #0b2545;
  --glass-nav-border: rgba(255, 255, 255, 0.16);
  --glass-btn-bg: rgba(255, 255, 255, 0.16);
  --glass-btn-bg-solid: #1b4e8f;
  --glass-btn-border: rgba(255, 255, 255, 0.34);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(11, 37, 69, 0.12);
  --shadow-md: 0 8px 24px rgba(11, 37, 69, 0.16);

  /* Layout */
  --container-max: 72rem;
  --container-narrow: 60rem;
  --container-pad: var(--space-5);
}

/* Reset and base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: var(--line-body);
  color: var(--color-ink);
  background-color: var(--color-surface);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
img { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  line-height: var(--line-heading);
  color: var(--color-navy);
  margin: 0 0 var(--space-4);
}
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 var(--space-4); }

a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--color-link-hover); }
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Layout container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.page { padding-block: var(--space-7); }
.page .container { max-width: var(--container-narrow); }
.page h1 { margin-bottom: var(--space-5); }

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -4rem;
  background-color: var(--color-navy);
  color: var(--color-on-dark);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  text-decoration: none;
  z-index: 100;
  transition: top 0.15s ease;
}
.skip-link:focus { top: var(--space-2); color: var(--color-on-dark); }

/* Glass utility (translucent surface with a solid fallback) */
.glass {
  background-color: var(--glass-card-bg-solid);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass {
    background-color: var(--glass-card-bg);
    -webkit-backdrop-filter: blur(var(--blur-glass));
    backdrop-filter: blur(var(--blur-glass));
  }
}

/* Site header and primary nav (glass over navy) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--glass-nav-bg-solid);
  border-bottom: 1px solid var(--glass-nav-border);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header {
    background-color: var(--glass-nav-bg);
    -webkit-backdrop-filter: blur(var(--blur-glass));
    backdrop-filter: blur(var(--blur-glass));
  }
}
.site-header__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-3) var(--container-pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}
.brand {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-on-dark);
  text-decoration: none;
  margin-right: auto;
}
.brand__num { color: var(--color-red-on-dark); }
.site-nav__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
}
.site-nav__list a {
  color: var(--color-on-dark);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
  padding: var(--space-2) var(--space-1);
  display: inline-block;
  border-bottom: 2px solid transparent;
}
.site-nav__list a:hover { color: var(--color-white); border-bottom-color: var(--color-red-on-dark); }
.site-nav__list a[aria-current="page"] { color: var(--color-white); border-bottom-color: var(--color-red-on-dark); }

/* Hero and homepage doors */
.hero {
  background-image: linear-gradient(160deg, var(--color-navy), var(--color-blue));
  color: var(--color-on-dark);
  padding-block: var(--space-8);
}
.hero__title { color: var(--color-on-dark); }
.hero__intro {
  max-width: 44rem;
  font-size: 1.15rem;
  color: var(--color-on-dark-muted);
  margin-bottom: var(--space-7);
}
.doors {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.door-card { padding: var(--space-5); }
.door-card__title { margin-bottom: var(--space-2); }
.door-card__title a { color: var(--color-navy); text-decoration: none; }
.door-card__title a:hover { color: var(--color-blue); }
.door-card__desc { color: var(--color-ink-muted); }
.door-card__links { list-style: none; margin: 0; padding: 0; }
.door-card__links li { margin-bottom: var(--space-1); }
.door-card__links a { font-weight: 600; }

/* Generic card */
.card { padding: var(--space-5); }

/* Wide tables scroll inside their own container rather than pushing the page
   sideways. Keyboard users can reach the scroll area because it is focusable. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
.table-scroll table {
  width: 100%;
  min-width: var(--table-min, 44rem);
  border-collapse: collapse;
  font-size: 0.9375rem;
}
/* For tables with more columns or longer cell text */
.table-scroll--wide { --table-min: 52rem; }
.table-scroll caption {
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-ink-muted);
  padding-bottom: var(--space-3);
}
.table-scroll th,
.table-scroll td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  line-height: 1.5;
}
.table-scroll thead th {
  color: var(--color-navy);
  border-bottom-width: 2px;
}
.table-scroll tbody th {
  color: var(--color-navy);
}
.table-scroll tbody tr:last-child th,
.table-scroll tbody tr:last-child td { border-bottom: 0; }

/* Comparison matrix: five economic models across six dimensions.
   Designed to be read at a glance, so at desktop it breaks out of the
   reading column to near full width and uses compact type, which keeps the
   whole matrix in view rather than making the reader scroll through it.
   Stacks to one column on phones and two at tablet. From the two-column
   breakpoint up, subgrid keeps every dimension row aligned across columns. */
.matrix {
  margin: 0 0 var(--space-6);
}
@media (min-width: 78rem) {
  .matrix {
    width: min(110rem, calc(100vw - 3rem));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}
.matrix__gradient {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-ink-muted);
}
.matrix__gradient::after {
  content: "";
  flex: 1 1 12rem;
  min-width: 8rem;
  height: 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    to right,
    var(--model-1),
    var(--model-2),
    var(--model-3),
    var(--model-4),
    var(--model-5)
  );
}
.matrix__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.matrix__col {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background-color: var(--color-white);
}
.matrix__head {
  margin: 0;
  padding: var(--space-3);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.25;
  text-align: center;
  background-color: var(--model-color);
  color: var(--model-ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.matrix__head span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.3;
  opacity: 0.92;
}
.matrix__list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
}
.matrix__cell {
  padding: var(--space-3);
  background-color: var(--model-wash);
  flex: 1 1 auto;
}
.matrix__cell dt {
  margin: 0 0 0.15rem;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--color-navy);
}
.matrix__cell dd {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-ink);
}
.matrix__col--1 { --model-color: var(--model-1); --model-ink: var(--model-1-ink); --model-wash: var(--model-1-wash); }
.matrix__col--2 { --model-color: var(--model-2); --model-ink: var(--model-2-ink); --model-wash: var(--model-2-wash); }
.matrix__col--3 { --model-color: var(--model-3); --model-ink: var(--model-3-ink); --model-wash: var(--model-3-wash); }
.matrix__col--4 { --model-color: var(--model-4); --model-ink: var(--model-4-ink); --model-wash: var(--model-4-wash); }
.matrix__col--5 { --model-color: var(--model-5); --model-ink: var(--model-5-ink); --model-wash: var(--model-5-wash); }
.matrix__note {
  margin: var(--space-3) 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-ink-muted);
}

@media (min-width: 44rem) {
  .matrix__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 78rem) {
  .matrix__grid { grid-template-columns: repeat(5, 1fr); column-gap: var(--space-2); }
}

/* Row alignment across columns. Falls back to the flex layout above where
   subgrid is unavailable, which costs alignment but nothing else. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 44rem) {
    .matrix__grid {
      grid-template-rows: auto repeat(6, auto);
      row-gap: 2px;
    }
    .matrix__col {
      display: grid;
      grid-row: span 7;
      grid-template-rows: subgrid;
    }
    .matrix__list {
      display: grid;
      grid-row: 2 / span 6;
      grid-template-rows: subgrid;
      gap: 0;
    }
  }
}

/* Forced-colors and print: fall back to hairlines, since the fills drop out */
@media (forced-colors: active) {
  .matrix__col { border: 1px solid CanvasText; }
  .matrix__cell { border-top: 1px solid CanvasText; }
}

/* Figures with captions */
.figure {
  margin: 0 0 var(--space-5);
}
.figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}
.figure__caption {
  margin: var(--space-3) 0 0;
  font-size: 0.9375rem;
  line-height: var(--line-body);
  color: var(--color-ink-muted, inherit);
}

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary { background-color: var(--color-blue); color: var(--color-on-dark); }
.btn--primary:hover { background-color: var(--color-blue-strong); color: var(--color-white); }
.btn--accent { background-color: var(--color-red); color: var(--color-white); }
.btn--accent:hover { background-color: var(--color-red-strong); color: var(--color-white); }
.btn--glass {
  background-color: var(--glass-btn-bg-solid);
  color: var(--color-on-dark);
  border-color: var(--glass-btn-border);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .btn--glass {
    background-color: var(--glass-btn-bg);
    -webkit-backdrop-filter: blur(var(--blur-glass));
    backdrop-filter: blur(var(--blur-glass));
  }
}

/* Placeholder note for shell pages */
.placeholder { color: var(--color-ink-muted); }

/* Site footer (full sitemap) */
.site-footer {
  background-color: var(--color-navy);
  color: var(--color-on-dark);
  margin-top: var(--space-8);
  padding-block: var(--space-7);
}
.site-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.footer-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.footer-col__title {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-red-on-dark);
  margin-bottom: var(--space-3);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: var(--space-2); }
.footer-col a { color: var(--color-on-dark-muted); text-decoration: none; font-size: 0.95rem; }
.footer-col a:hover { color: var(--color-white); text-decoration: underline; }
.footer-col a[aria-current="page"] { color: var(--color-white); }
.site-footer__note {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-hairline-on-dark);
  color: var(--color-on-dark-muted);
  font-size: 0.9rem;
  max-width: 44rem;
}

/* Responsive: tablet and up */
@media (min-width: 40rem) {
  .doors { grid-template-columns: repeat(3, 1fr); }
  .footer-nav { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60rem) {
  .footer-nav { grid-template-columns: repeat(4, 1fr); }
}