/* Cwaude’s Constitution — visual mirror of anthropic.com/constitution.
   Free fonts (Source Serif 4, Inter) stand in for Anthropic's proprietary
   type (Copernicus / Styrene). All visual assets (wordmark, hero shape)
   are our own. */

:root {
  /* Palette — source: ae6fb50648020e93.css :root --color-slate-* / --color-ivory-* */
  --slate-050: #faf9f5;  /* --color-slate-050 */
  --slate-100: #f5f4ed;  /* --color-slate-100 */
  --slate-150: #f0eee6;  /* --color-slate-150 */
  --slate-200: #e8e6dc;  /* --color-slate-200 */
  --slate-250: #dedcd1;  /* --color-slate-250 */
  --slate-300: #d1cfc5;  /* --color-slate-300 */
  --slate-400: #b0aea5;  /* --color-slate-400 */
  --slate-500: #87867f;  /* --color-slate-500 / --color-cloud-dark */
  --slate-600: #5e5d59;  /* --color-slate-600 / --color-slate-light */
  --slate-700: #3d3d3a;  /* --color-slate-700 / --color-slate-medium */
  --slate-750: #30302e;  /* --color-slate-750 */
  --slate-800: #262624;  /* --color-slate-800 */
  --slate-900: #1a1918;  /* --color-slate-900 */
  --slate-950: #141413;  /* --color-slate-950 / --color-slate-dark */

  /* Accent — source: --color-clay, --color-oat */
  --color-clay: #d97757;
  --color-clay-dark: #c6613f;
  --color-oat: #e3dacc;

  /* Header foreground — slightly darker than body text. Source: --color-dark. */
  --color-dark: #0f0f0e;

  /* Themed surfaces — source: [data-theme=ivory] in ae6fb50648020e93.css */
  --color-bg: var(--slate-050);              /* --background-primary */
  --color-bg-soft: var(--slate-150);         /* --background-secondary */
  --color-bg-card: var(--slate-200);         /* --background-tertiary */
  --color-text: var(--slate-950);            /* --foreground-primary */
  --color-text-secondary: var(--slate-750);  /* --foreground-secondary */
  --color-muted: var(--slate-600);           /* --foreground-tertiary */
  --color-faint: var(--slate-500);           /* --color-cloud-dark — rail labels */
  --color-border-strong: var(--slate-950);   /* --border-strong */
  --color-border: var(--slate-300);          /* --border-subtle */
  --color-border-faint: var(--slate-150);    /* --border-faint */

  /* Typography stacks — Anthropic's are Copernicus + Styrene (licensed);
     these are free substitutes per the parody scope rules. */
  --font-serif: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Weights — source: --weight-display-* / --weight-text-* */
  --weight-text-regular: 400;
  --weight-text-medium: 500;
  --weight-text-semibold: 600;
  --weight-text-bold: 700;
  --weight-display-medium: 500;
  --weight-display-semibold: 600;
  --weight-display-bold: 700;

  /* Type scale — source: :root in ae6fb50648020e93.css (base = mobile).
     Bumped per-breakpoint below. */
  --headline-1: 32px;
  --headline-2: 30px;
  --headline-3: 28px;
  --headline-4: 23px;
  --headline-5: 20px;
  --headline-6: 17px;
  --body-large-1: 22px;
  --body-large-2: 20px;
  --body-1: 19px;
  --body-2: 17px;
  --body-3: 15px;
  --body-4: 12px;
  --caption: 14px;
  --mono: 15px;
  --micro: 10px;

  /* Line heights — source: --leading-* */
  --leading-100: 100%;
  --leading-120: 120%;
  --leading-125: 125%;  /* used by .tight (subtitle) */
  --leading-140: 140%;
  --leading-155: 155%;

  /* Easing — source: --ease-out-quart / --ease-in-out-quart */
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);

  /* Spacing — source: --sp-* */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-56: 56px;
  --sp-64: 64px;
  --sp-80: 80px;
  --sp-96: 96px;
  --sp-128: 128px;

  /* Layout — source: --container-max-width / --page-margins / --gutter /
     --text-column-max-width / --media-max-width / --header-nav-height */
  --container-max: 1400px;
  --page-margin: 32px;
  --gutter: 24px;
  --reading-max: 640px;       /* the centered reading column */
  --media-max: 880px;
  --header-height: 64px;
  --sidebar-gap: 16px;

  /* Section spacers — source: --section-spacer-* */
  --section-spacer-lg: 64px;
  --section-spacer-sm: 32px;

  /* Card padding — source: --card-padding-md */
  --card-padding-md: 24px;
}

/* Responsive type tiers — source: @media (min-width:567|992|1024) { :root } */
@media (min-width: 567px) {
  :root {
    --page-margin: 32px;
    --headline-1: 32px;
    --headline-2: 30px;
    --headline-3: 28px;
    --headline-4: 23px;
    --headline-5: 20px;
    --headline-6: 17px;
    --body-large-1: 22px;
    --body-large-2: 20px;
    --body-1: 19px;
    --body-2: 17px;
    --body-3: 15px;
  }
}
@media (min-width: 992px) {
  :root {
    --page-margin: 48px;
    --section-spacer-lg: 80px;
    --section-spacer-sm: 40px;
    --card-padding-md: 32px;
    --headline-1: 44px;
    --headline-2: 36px;
    --headline-3: 30px;
    --headline-4: 23px;
    --headline-5: 20px;
    --headline-6: 17px;
  }
}
@media (min-width: 1024px) {
  :root {
    --page-margin: 64px;
    --section-spacer-lg: 96px;
    --section-spacer-sm: 48px;
    --header-height: 68px;
    --headline-1: 52px;
    --headline-2: 44px;
    --headline-3: 36px;
    --headline-4: 32px;
    --headline-5: 25px;
    --headline-6: 19px;
    --body-large-1: 25px;
    --body-large-2: 23px;
    --body-1: 20px;
  }
}
/* Reference keeps --page-margins at 32 even at mobile (<567px), so I
   don't drop below 32 here either. */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--color-bg);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-serif);
  font-feature-settings: "pnum" on, "lnum" on, "liga" on;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
  font-size: 16px;
  font-weight: 400;
  line-height: var(--leading-125);
  letter-spacing: -0.01em;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  transition: color 0.15s ease;
}
a:hover { color: var(--color-muted); }

button {
  font: inherit;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

/* Skip links — visible only on focus */
.skip-links { position: absolute; top: 0; left: 0; z-index: 100; }
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  text-decoration: none;
}
.skip-link:focus {
  left: var(--sp-16);
  top: var(--sp-16);
  background: var(--color-text);
  color: var(--color-bg);
  padding: var(--sp-8) var(--sp-12);
  font-family: var(--font-sans);
  font-size: var(--body-3);
}
.skip-link + .skip-link:focus { left: calc(var(--sp-16) + 240px); }

/* ============================================================
   Site header — 1:1 with anthropic.com nav (wordmark left, nav +
   Twy Cwaude split-button right). Bar bg matches page bg
   (ivory-light #faf9f5), color is slate-dark, sticky, no hairline.
   Source: reference SiteHeader-module rules.
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: var(--color-bg);
  color: var(--color-dark);
  padding: var(--sp-16) 0;
  width: 100%;
}
.site-header__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--page-margin);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header__content {
  display: flex;
  align-items: center;
  gap: var(--sp-24);
  margin-left: auto;
}
/* Wordmark zone — heights only (no fixed widths). SVG viewBoxes are
   cropped tight to glyphs in /assets/, so a CSS height of N renders
   N px of visible glyph (~96% of the box is artwork).
   Both states share ONE height: real ANTHROPIC is 16px and its
   compact A is 32px, but real never shows both at the same viewport
   (it's a viewport breakpoint). Mine crossfades on SCROLL — both
   states are on the same screen, so any size diff between them reads
   as a layout pop. 24px gives the wordmark presence (>16, since
   ANTHWO is shorter than ANTHROPIC and reads small at parity) and
   shrinks the OwO mark below the visually-loud 32px box. */
.wordmark {
  --wordmark-h: 20px;
  --wordmark-compact-h: 20px;
  color: var(--color-dark);
  text-decoration: none;
  line-height: 1;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}
.wordmark:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 4px;
  border-radius: 2px;
}
.wordmark:hover { color: var(--color-dark); }
.wordmark__icon { display: block; }
.wordmark__icon img { display: block; width: auto; }
.wordmark__icon--full img { height: var(--wordmark-h); }
.wordmark__icon--compact img { height: var(--wordmark-compact-h); }

/* Crossfade timing — gentler/longer than a snap-fade so it feels closer
   to the slow Lottie morph anthropic.com uses. Material's "standard"
   ease (0.4, 0, 0.2, 1) gives a smooth in/out with no overshoot. The
   wordmark leads (fades out first); the compact mark trails by ~120ms
   so the two never overlap at full opacity, avoiding the "both visible"
   thick frame in the middle of the transition. */
.wordmark__icon--full {
  opacity: 1;
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1) 120ms;
}
.wordmark__icon--compact {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.site-header.scrolled .wordmark__icon--full {
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.site-header.scrolled .wordmark__icon--compact {
  opacity: 1;
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1) 180ms;
}

@media (prefers-reduced-motion: reduce) {
  .wordmark__icon { transition: opacity 0.15s linear; }
}

/* Sentinel — 1px tall at the very top of the page; when it scrolls
   out of view, IntersectionObserver toggles .site-header.scrolled. */
.site-header__sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
/* Primary nav — flex of body-3 links, hidden below 950px in favor
   of the hamburger. Source: SiteHeader-module __nav. */
.site-header__nav {
  align-items: center;
  display: none;
  z-index: 10;
}
@media (min-width: 950px) {
  .site-header__nav { display: flex; }
}
.site-header__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--sp-24);
}
.site-header__nav-item {
  color: var(--color-dark);
  font-family: var(--font-sans);
  font-size: var(--body-3);
  font-weight: 400;
  line-height: var(--leading-140);
  position: relative;
}
.site-header__nav-link {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  white-space: nowrap;
  color: inherit;
  letter-spacing: -0.0025em;
  text-decoration: none;
  text-underline-offset: 0.2em;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
}
.site-header__nav-link:hover { text-decoration: underline; }
.site-header__nav-link:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 4px;
  border-radius: 2px;
}
.site-header__caret {
  display: block;
  transition: transform 0.2s ease-in-out;
  transform: translateY(1px);
}
.site-header__nav-link:hover .site-header__caret,
.site-header__nav-link[aria-expanded="true"] .site-header__caret {
  transform: translateY(0) rotate(180deg);
}

/* Dropdown menu panel — anchored below the nav item, two-column when
   multiple sections are present. Source: real Dropdown-module — white
   bg, slight shadow, 12px radius, 20px padding. Sections stacked
   vertically with caption-style titles. */
.site-header__nav-item--has-menu { position: relative; }
.site-header__nav-menu {
  position: absolute;
  top: calc(100% + var(--sp-12));
  left: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  min-width: 260px;
  padding: var(--sp-20);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}
.site-header__nav-menu:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.site-header__nav-menu[hidden] { display: none; }
.site-header__nav-menu-title {
  font-family: var(--font-sans);
  font-size: var(--body-4);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-muted);
  margin: 0 0 var(--sp-12);
  text-transform: none;
}
.site-header__nav-menu-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.site-header__nav-menu-list a {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--body-3);
  font-weight: 400;
  line-height: var(--leading-140);
  letter-spacing: 0;
  color: var(--color-dark);
  text-decoration: none;
  padding: 2px 0;
  transition: color 0.15s ease;
}
.site-header__nav-menu-list a:hover,
.site-header__nav-menu-list a:focus-visible {
  color: var(--color-muted);
  outline: none;
}

/* Twy Cwaude split-button — primary fill on the left, narrower
   caret-trigger pill on the right, 1px translucent divider between.
   Source: SiteHeader-module __claudeCtaButton + __claudeCtaDropdownTrigger. */
.site-header__cta {
  display: none;
  position: relative;
}
@media (min-width: 950px) {
  .site-header__cta { display: flex; }
}
.site-header__cta-button,
.site-header__cta-trigger {
  background: var(--color-dark);
  color: var(--color-bg);
  font-family: var(--font-sans);
  font-size: var(--body-3);
  font-weight: 400;
  line-height: var(--leading-140);
  letter-spacing: 0;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
}
.site-header__cta-button {
  padding: var(--sp-8) var(--sp-16);
  border-radius: 8px 0 0 8px;
}
.site-header__cta-trigger {
  padding: var(--sp-12) var(--sp-16);
  border-radius: 0 8px 8px 0;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.site-header__cta-button:hover,
.site-header__cta-trigger:hover {
  background: rgba(0, 0, 0, 0.8);
}
.site-header__cta-trigger svg {
  transition: transform 0.2s ease-in-out;
}
.site-header__cta-trigger:hover svg { transform: rotate(180deg); }
.site-header__cta-button:focus-visible,
.site-header__cta-trigger:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}
@media (max-width: 991px) {
  .site-header__cta-button { border-radius: 4px 0 0 4px; }
  .site-header__cta-trigger { border-radius: 0 4px 4px 0; }
}

/* Hamburger — shown below 950px. Toggles the mobile menu panel. */
.site-header__mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-text);
  border: 0;
  padding: var(--sp-4);
  cursor: pointer;
}
.site-header__mobile-toggle:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (min-width: 950px) {
  .site-header__mobile-toggle { display: none; }
}

/* Mobile menu panel — drops down below the header at <950px. */
.site-header__mobile-menu {
  display: block;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  padding: var(--sp-16) var(--page-margin);
}
.site-header__mobile-menu[hidden] { display: none; }
@media (min-width: 950px) {
  .site-header__mobile-menu { display: none !important; }
}
.site-header__mobile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.site-header__mobile-list a {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--body-2);
  color: var(--color-text);
  text-decoration: none;
  padding: var(--sp-8) 0;
}
.site-header__mobile-list a:hover { text-decoration: underline; }
.site-header__mobile-cta {
  display: inline-block !important;
  margin-top: var(--sp-8);
  background: var(--color-text);
  color: var(--color-bg) !important;
  padding: var(--sp-8) var(--sp-16) !important;
  border-radius: 4px;
  align-self: flex-start;
}
.site-header__mobile-cta:hover { text-decoration: none !important; opacity: 0.85; }

/* Mobile nav grouped sub-items (Commitments / Weawn) */
.site-header__mobile-group { padding: var(--sp-8) 0; }
.site-header__mobile-group-title {
  font-family: var(--font-sans);
  font-size: var(--body-4);
  font-weight: 500;
  color: var(--color-muted);
  margin: 0 0 var(--sp-8);
}
.site-header__mobile-group ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-left: var(--sp-16);
}
.site-header__mobile-group ul a {
  font-size: var(--body-3);
  padding: var(--sp-4) 0;
}

/* ============================================================
   Article hero — bg-oat, circular illustration, serif H1
   ============================================================ */
/* Hero section — bg oat. Vertical padding lives on the SECTION (not
   on __inner) so the bg extends through the padding band the same way
   the reference treats its ConstitutionHero wrapper as a flex column
   with 0 padding inside a section that supplies the breathing room. */
.hero {
  background: var(--color-oat);
  padding: var(--section-spacer-lg) 0;
}
/* Hero inner — gap between image and the H1+subtitle header is 24px
   per the gap audit (image → h1 = 24, h1 → subtitle = 24). */
.hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--page-margin);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}

/* Hero illustration — height-anchored to match the real wordmark/A
   illustration's 168px box (real renders 168×168 square; mine is 735×674
   aspect so width follows). */
.hero__illustration {
  display: block;
  width: auto;
  height: 168px;
  max-width: 100%;
  aspect-ratio: 735 / 674;
  margin: 0;
}
/* H1+subtitle live inside a header-wrapper with NO gap between them
   so they butt up vertically — real measures 0px between h1 bottom
   and subtitle top. The image-to-header gap (--gap-lg) still applies
   via .hero__inner's flex gap. */
.hero__header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* H1+subtitle gap — gap audit says real is 24px between H1 bottom and
   subtitle top. */
.hero__header { gap: 24px; }

/* H1 — heaviest available Inter (800) to approximate Styrene Bold's
   visual weight. Without 800 loaded the browser fakes bold from 400
   and the title looks thin compared to the reference. */
.hero__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--headline-1);
  line-height: var(--leading-100);
  letter-spacing: 0;
  margin: 0;
  max-width: 18ch;
  color: var(--color-text);
  text-wrap: balance;
}

/* Subtitle — body-large-2 serif. Real renders at 155% line-height
   (audit measured 35.65px at 23px font). Letter-spacing 0. */
.hero__lede {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--body-large-2);
  line-height: var(--leading-155);
  letter-spacing: 0;
  color: var(--color-text);
  max-width: 40ch;
  margin: 0;
  text-wrap: balance;
}

/* Hero preamble — the paragraphs Anthropic places below the hero,
   above the main article body. Still oat background. */
.hero-preamble {
  background: var(--color-oat);
  border-bottom: 1px solid #1919191a;
}
.hero-preamble__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--page-margin) var(--section-spacer-lg);
}

/* ============================================================
   Article grid — body spans the full middle (0 1fr 0 pattern),
   reading column is centered INSIDE the body by margin-inline:auto.
   This makes the reading column page-centered regardless of whether
   the sidebar is present. Sidebar at ≥1200px overlaps the body's
   left margin (which is empty space because the 640px reading column
   is centered in the wider body container).
   Source: reference ArticleDetail-module grid `0 1fr 0`. */
.article {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--page-margin);
  display: grid;
  grid-template-columns: 0 minmax(0, 1fr) 0;
  column-gap: 0;
  align-items: start;
}
@media (max-width: 1199px) {
  .article {
    grid-template-columns: 1fr;
    gap: var(--sp-24);
  }
}

/* Sidebar TOC — lives in the left gutter at ≥1200px, overlapping
   the body's empty left margin. Width matches real (172px); rows are
   small-caption type with their own padding+hairline. The container
   is a flex column with 16px gap between sections (toggle, list,
   downloads), matching the real Sidebar-module values. */
.sidebar {
  grid-column: 1 / 2;
  width: 172px;
  padding-top: var(--section-spacer-lg);
  position: sticky;
  top: calc(var(--header-height) + var(--sp-24));
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  font-family: var(--font-sans);
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
}
@media (max-width: 1199px) {
  .sidebar {
    grid-column: 1 / -1;
    /* Pin the rail under the site header so it stays reachable as
       the user scrolls through the long article. Break out of the
       article's horizontal padding so the bar spans full viewport. */
    position: sticky;
    top: var(--header-height);
    z-index: 20;
    width: auto;
    margin: 0 calc(var(--page-margin) * -1);
    padding: var(--sp-16) var(--page-margin);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
  }
  .sidebar.is-collapsed {
    /* When collapsed the bar is just the toggle row — shrink padding
       so it reads as a compact navigation strip, not a section. */
    padding-top: var(--sp-12);
    padding-bottom: var(--sp-12);
    overflow: hidden;
  }
  .sidebar.is-collapsed .sidebar__list,
  .sidebar.is-collapsed .sidebar__downloads,
  .sidebar.is-collapsed .sidebar__header { display: none; }
}
.body { grid-column: 2 / 3; }
@media (max-width: 1199px) {
  .body { grid-column: 1 / -1; }
}
/* Mobile rail toggle — matches real __sidebar-button: 16/400 sans,
   normal letter-spacing, 0 padding (the row owns its own padding).
   Mobile-first: shown by default, hidden at desktop width where the
   sidebar lives in the gutter and there's nothing to toggle. */
.sidebar__toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--color-text);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 20px;
  cursor: pointer;
}
.sidebar__toggle-label {
  flex: 1;
  text-align: left;
}
@media (min-width: 1200px) {
  .sidebar__toggle { display: none; }
  .sidebar__toggle-label { display: none; }
}
.sidebar__toggle svg {
  width: 12px;
  height: 7.5px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
/* Collapsed → chevron points DOWN (signals "tap to expand").
   Expanded → chevron rotates UP (signals "tap to collapse"). */
.sidebar:not(.is-collapsed) .sidebar__toggle svg { transform: rotate(180deg); }
.sidebar__list {
  display: flex;
  flex-direction: column;
}
/* Rail rows — small caption-style. Non-current rows are 400 regular
   in muted gray; current row is 500 medium in primary text color
   (matches real: LI.caption=400 vs LI.caption.bold=500). */
.sidebar__chapter {
  border-bottom: 1px solid var(--color-border);
  padding: var(--sp-12) 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.15px;
  line-height: 1.2;
}
.sidebar__chapter:last-of-type { border-bottom: none; }
.sidebar__chapter-link {
  display: block;
  text-decoration: none;
  color: var(--color-faint);
  transition: color 0.15s ease;
}
.sidebar__chapter-link:hover,
.sidebar__chapter.is-current .sidebar__chapter-link {
  color: var(--color-text);
}
.sidebar__chapter.is-current { font-weight: 500; }
.sidebar__chapter-name {
  display: block;
}

/* Download CTAs — inter-section spacing is handled by the parent
   .sidebar flex gap (16px), so no extra margin-top here. Real has the
   download-ctas div sit directly below the chapter UL with a single
   16px gap between them. */
.sidebar__downloads {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
/* Sidebar download buttons — small style with caption-sized label
   (14px) on a 28px-tall pill. Real has 14px text inside a 16/400
   button shell. The label is in a <span> at 14; the icon sits to its
   right; container is justify-between so icon hugs the right edge. */
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.14px;
  line-height: 20px;
  text-decoration: none;
  height: 28px;
  padding: 4px 12px 4px 8px;
  border-radius: 8px;
  border: none;
  transition: background-color 0.2s var(--ease-in-out-quart, ease),
              color 0.2s var(--ease-in-out-quart, ease),
              border-color 0.2s var(--ease-in-out-quart, ease),
              opacity 0.2s ease;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}
.cta-button__icon {
  width: 16px;
  height: 16px;
  flex: none;
}
.cta-button--primary {
  background: var(--color-text);
  color: var(--color-bg);
  border: 1.5px solid var(--color-text);
}
.cta-button--primary:hover {
  background: var(--slate-700);
  border-color: var(--slate-700);
  color: var(--color-bg);
}
.cta-button--secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}
.cta-button--secondary:hover {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}
.cta-button.is-disabled {
  color: var(--color-faint);
  border-color: var(--color-border);
  pointer-events: none;
  cursor: not-allowed;
}

/* ============================================================
   Body container — reading column, headings, paragraphs, lists
   ============================================================ */
.body {
  color: var(--color-text);
  padding: var(--section-spacer-lg) 0 var(--sp-32);
  font-family: var(--font-serif);
}

.hero-preamble .body {
  padding: 0;
}

/* The reading column is centered on the page by giving each element
   max-width: 640 + margin-inline: auto. Important: .post-* classes
   below must NOT use `margin:` shorthand for vertical rhythm, since
   the shorthand resets margin-inline and breaks centering. */
.reading-column {
  max-width: var(--reading-max);
  margin-inline: auto;
  width: 100%;
}
/* At narrow viewports the reading column drops its width cap — source:
   @media (max-width:800px) { .reading-column { max-width: none } }. */
@media (max-width: 800px) {
  .reading-column { max-width: none; }
}

/* Article headings — all sans (anthropic-sans substitute), display weights
   per reference: H1=700, H2/H3/H4/H5/H6=600, letter-spacing 0. */
.post-heading {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--headline-4);
  line-height: var(--leading-120);
  letter-spacing: 0;
  margin-top: 4rem;
  margin-bottom: 2rem;
  text-wrap: pretty;
  scroll-margin-top: calc(var(--header-height) + var(--sp-16));
}
.body > .post-heading:first-child { margin-top: 0; }

.post-section {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--headline-5);
  line-height: var(--leading-120);
  letter-spacing: 0;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  text-wrap: pretty;
  scroll-margin-top: calc(var(--header-height) + var(--sp-16));
}
@media (min-width: 567px) { .post-section { margin-top: 2rem; } }

.post-subsection {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--headline-5);
  line-height: var(--leading-120);
  letter-spacing: 0;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  text-wrap: pretty;
  scroll-margin-top: calc(var(--header-height) + var(--sp-16));
}
@media (min-width: 567px) { .post-subsection { margin-top: 2rem; } }

.post-text {
  font-family: var(--font-serif);
  font-feature-settings: "pnum" on, "lnum" on, "liga" on;
  font-size: var(--body-2);
  font-weight: 400;
  line-height: var(--leading-155);
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: 1rem;
}
.post-text + .post-text { margin-top: 1rem; }

.body ul.post-text,
.body ol.post-text {
  padding-left: 2rem;
}
.body ul.post-text li,
.body ol.post-text li {
  margin-bottom: 0.75rem;
  line-height: var(--leading-140);
  list-style: revert;
}
.body ul.post-text ul,
.body ul.post-text ol,
.body ol.post-text ul,
.body ol.post-text ol {
  padding-left: 1.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.body li:last-child { margin-bottom: 0; }

.body strong { font-weight: 500; }
.body em { font-style: italic; }

.body a:not([class]) {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  transition: color 0.15s ease;
}
.body a:not([class]):hover { color: var(--color-muted); }

/* ============================================================
   Collapsible <details> sections — two variants:
   1) Hairline (default): "Wead a summawy" in the hero-preamble.
      Source: ConstitutionHero __dropdown-header — 1px top border,
      padding 20px 0, toggle bars 13.5×1.248 inside a 24×24 box.
   2) Card (.summary-section--card): the three article collapsibles
      "Nyavigating hewpfuwness", "The wowe of intentions",
      "Instwuctabwe behaviows". Source: ExpandableSection — tinted
      slate-150 background, 12px radius, 24/32px padding.
   ============================================================ */
.summary-section {
  border-top: 1px solid var(--color-border);
  margin-top: 2rem;
}
.summary-section + .summary-section { margin-top: 0; }

.summary-section__summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  padding: var(--sp-20) 0;
}
.summary-section__summary::-webkit-details-marker { display: none; }
.summary-section__summary:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 4px;
}

.summary-section__summary > .post-heading,
.summary-section__summary > .post-section,
.summary-section__summary > .post-subsection {
  margin: 0;
  flex: 1 1 auto;
}
/* The hero-preamble's "Wead a summawy" h2 in the reference uses
   class headline-6 (sans, semibold, 17→19px). Smaller than the
   article's section headings. h3-level collapsibles inside cards
   keep their inherited .post-section (headline-5) sizing. */
.summary-section__summary > .post-heading {
  font-family: var(--font-sans);
  font-size: var(--headline-6);
  font-weight: 600;
  letter-spacing: 0;
}

/* Toggle box — 24×24, with a 13.5px horizontal bar and 13.5px
   vertical bar; the vertical fades + rotates 90° on open. */
.toggle {
  position: relative;
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--color-text);
}
.toggle::before,
.toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
}
.toggle::before { width: 13.5px; height: 1.25px; }   /* horizontal */
.toggle::after {
  width: 1.25px;
  height: 13.5px;
  transition: opacity 0.25s cubic-bezier(0.165, 0.84, 0.44, 1),
              transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.summary-section[open] .toggle::after {
  opacity: 0;
  transform: rotate(90deg);
}

.summary-section__body {
  padding-bottom: var(--sp-20);
}
.summary-section__body > .post-heading:first-child,
.summary-section__body > .post-section:first-child,
.summary-section__body > .post-subsection:first-child {
  margin-top: 1rem;
}

/* Card variant — tinted background, rounded, generous padding.
   Source: .ExpandableSection-module __expandableSection. */
.summary-section--card {
  margin-top: 2rem;
  border-top: none;
  background: var(--color-bg-soft);
  border-radius: 12px;
  padding: var(--card-padding-md);
}
.summary-section--card + .summary-section--card { margin-top: 1.5rem; }
.summary-section--card .summary-section__summary {
  padding: 0;
}
.summary-section--card[open] .summary-section__summary {
  padding-bottom: var(--sp-12);
}
.summary-section--card .summary-section__body {
  padding-bottom: 0;
}
.summary-section--card .summary-section__body > .post-text:first-child {
  margin-top: var(--sp-12);
}

/* ============================================================
   Site footer — dark slate, matches the real page's footer surface.
   Source: data-theme=slate token block (background #141413, fg #faf9f5,
   foreground-tertiary #87867f for muted text).
   ============================================================ */
.site-footer {
  background: var(--slate-950);
  color: var(--slate-050);
}
.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--section-spacer-lg) var(--page-margin) var(--section-spacer-sm);
  display: grid;
  grid-template-columns: 1.2fr 3fr;
  gap: var(--sp-48);
}
@media (max-width: 960px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: var(--sp-32); }
}
.site-footer__brand-link {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--sp-16);
  text-decoration: none;
}
.site-footer__brand-mark {
  display: block;
  height: 28px;
  width: auto;
  /* Invert the dark mark for use on the dark footer surface. */
  filter: invert(1);
}
.site-footer__tag {
  font-family: var(--font-sans);
  font-size: var(--body-4);
  color: var(--slate-400);
  max-width: 32ch;
  margin: 0;
  line-height: var(--leading-140);
}
.site-footer__nav {
  display: block;
}
.site-footer__column h3 {
  font-family: var(--font-sans);
  font-size: var(--body-4);
  font-weight: 500;
  color: var(--slate-050);
  margin: 0 0 var(--sp-16);
  letter-spacing: -0.1px;
}
.site-footer__column ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.site-footer__column a {
  font-family: var(--font-sans);
  font-size: var(--body-4);
  color: var(--slate-400);
  text-decoration: none;
  letter-spacing: -0.1px;
  line-height: var(--leading-140);
}
.site-footer__column a:hover { color: var(--slate-050); }

/* Fan-tribute closer — small muted line at the very bottom, separated
   from the sitemap above by the same hairline used elsewhere, centered
   in the content column. The link to the real page is the load-bearing
   bit; everything else is voice. */
.site-footer__tribute {
  border-top: 1px solid var(--slate-700);
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--sp-24) var(--page-margin);
  text-align: center;
}
.site-footer__tribute p {
  font-family: var(--font-sans);
  font-size: var(--body-4);
  line-height: var(--leading-140);
  letter-spacing: 0;
  color: var(--slate-400);
  margin: 0 auto;
  max-width: 64ch;
  font-style: italic;
}
.site-footer__tribute a {
  color: var(--slate-050);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
.site-footer__tribute a:hover { color: var(--slate-400); }