/* ============================================================================
   iONE — Series A Investment Memorandum
   Visual Design System  ·  v1.1 (wider measure + marginalia support)
   ----------------------------------------------------------------------------
   PHILOSOPHY
   ----------
   This system treats the document as a printed monograph that happens to be
   delivered through a browser. Everything is built from a single family
   (Inter), a single warm-cream paper, and one institutional accent (oxblood);
   restraint, not ornament, signals seriousness. The cover is brutalist editorial
   — display type cropped to the margins, declarative, no decoration — while the
   reading interior is an 880px column at 1.65 line-height, the way a long
   FT Weekend piece or McKinsey monograph would be set, with the side margins
   available as marginalia space for sidebars and full-bleed figures.

   v1.1 CHANGES
   ------------
   — Reading measure widened from 680 → 880px for better desktop fit
   — Page-max widened from 1200 → 1400px to host right-side marginalia
   — New chapter layout with three-column grid: left gutter / column / right gutter
   — Sidebars can now float into the right gutter via .sidebar--margin-right
   — Figures can break out to full-bleed via .figure--full-bleed
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------------------------- */

:root {

  /* -- PAPER & INK -------------------------------------------------------- */
  --paper:            #F2EDE2;
  --paper-deep:       #EAE3D4;
  --paper-shadow:     #DFD7C5;

  --ink:              #1C1F24;
  --ink-secondary:    #5C5B53;
  --ink-tertiary:     #8A887E;

  --rule:             #C9C0AC;
  --rule-soft:        #DBD3BF;

  /* -- ACCENT -------------------------------------------------------------  */
  --accent:           #6B2620;
  --accent-deep:      #4E1A16;
  --accent-tint:      #E6CFC9;

  /* -- TYPOGRAPHY ---------------------------------------------------------  */
  --font-sans:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, Menlo, monospace;

  --voice-weight:     800;
  --body-weight:      400;
  --body-weight-bold: 700;

  --t-cover:          clamp(96px, 14vw, 200px);
  --t-cover-sub:      clamp(20px, 1.8vw, 26px);
  --t-classification: 11px;

  --t-chapter:        clamp(48px, 6vw, 80px);
  --t-eyebrow:        12px;
  --t-h2:             28px;
  --t-h3:             19px;
  --t-body:           17px;
  --t-lede:           20px;
  --t-sidebar-label:  11px;
  --t-sidebar:        14px;
  --t-caption:        12px;
  --t-footnote:       12px;
  --t-pagenum:        11px;

  --lh-cover:         0.86;
  --lh-chapter:       0.96;
  --lh-h2:            1.18;
  --lh-h3:            1.32;
  --lh-body:          1.65;
  --lh-lede:          1.55;
  --lh-sidebar:       1.5;
  --lh-caption:       1.45;

  --ls-cover:         -0.045em;
  --ls-chapter:       -0.03em;
  --ls-h2:            -0.015em;
  --ls-h3:            -0.005em;
  --ls-body:          0;
  --ls-eyebrow:       0.18em;
  --ls-classification:0.22em;

  /* -- LAYOUT (v1.1 — widened) -------------------------------------------- */
  --measure:          880px;     /* primary reading measure                   */
  --measure-wide:     1080px;    /* tables, full-bleed content                */
  --margin-col:       320px;     /* right-side marginalia column              */
  --gutter:           48px;      /* gap between text column and marginalia    */
  --page-max:         1700px;    /* outer page frame                          */

  --pad-page-x:       clamp(24px, 5vw, 80px);
  --pad-page-y:       clamp(48px, 8vh, 120px);

  --gap-section:      56px;
  --gap-subsection:   32px;
  --gap-paragraph:    18px;
  --gap-block:        40px;

  /* -- MOTION ------------------------------------------------------------- */
  --ease:             cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:              360ms;
  --dur-fast:         180ms;

  /* -- ELEVATION ---------------------------------------------------------- */
  --shadow-nav:       0 0 0 1px var(--rule), -20px 0 60px -20px rgba(28,31,36,0.18);
}


/* ----------------------------------------------------------------------------
   2. RESET & BASE
   ---------------------------------------------------------------------------- */

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

html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--body-weight);
  font-feature-settings: "ss01", "cv11", "tnum";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  text-rendering: geometricPrecision;
}

::selection { background: var(--accent); color: var(--paper); }

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-tint);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
a:hover { color: var(--accent-deep); border-bottom-color: var(--accent); }


/* ----------------------------------------------------------------------------
   3. PAGE FRAME (v1.1 — three-column chapter layout)
   ----------------------------------------------------------------------------
   On chapter pages, the page is a CSS grid: a primary reading column with a
   right-side gutter for marginalia (sidebars, side figures). When the viewport
   is narrower than text+margin+gutter+padding, marginalia collapse inline
   beneath the text via the responsive rules at the bottom of this file.
   ---------------------------------------------------------------------------- */

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--pad-page-y) var(--pad-page-x);
  position: relative;
}

/* Chapter pages: explicit grid with LEFT margin column + text column + symmetric right padding */
.page.chapter {
  display: grid;
  grid-template-columns: minmax(0, var(--margin-col)) var(--gutter) minmax(0, var(--measure)) var(--gutter) minmax(0, var(--margin-col));
  justify-content: center;
  column-gap: 0;
}

.page.chapter > .running-head,
.page.chapter > .chapter-head,
.page.chapter > .body {
  grid-column: 3;
}

/* Marginalia children sit in column 1 (LEFT side) */
.page.chapter > .marginalia {
  grid-column: 1;
  grid-row: 3;
  border-right: 1px solid var(--rule);
  padding-right: 28px;
  align-self: start;
}

.page.chapter > .running-head { grid-row: 1; }
.page.chapter > .chapter-head { grid-row: 2; }
.page.chapter > .body { grid-row: 3; }

.page.chapter > .marginalia .sidebar {
  border-left: none;
  padding: 0;
}

/* SECTION-WITH-PORTRAIT — each chapter VIII team section is wrapped in this
   container, with a portrait absolutely positioned at the top of the section.
   This anchors each portrait to ITS section, regardless of section length. */
.section-with-portrait {
  position: relative;
  min-height: 400px;  /* ensure space for portrait */
}

/* TEAM PORTRAIT — positioned absolute relative to its section wrapper,
   sitting in the negative left margin (outside the text column). */
.team-portrait {
  position: absolute;
  top: 0;
  left: calc((-1 * var(--margin-col)) - var(--gutter));
  width: var(--margin-col);
  margin: 0;
  padding-right: 28px;
  border-right: 1px solid var(--rule);
}

/* Modifier: lift portrait higher to overlap the h2 heading above the section */
.team-portrait--high {
  top: -120px;
}

/* Modifier: sidebar instead of portrait (no image, just a list of facts) */
.team-portrait--sidebar {
  border-right: 1px solid var(--rule);
}
.team-portrait--sidebar .sidebar {
  background: transparent;
  border-left: none;
  padding: 0;
  margin: 0;
}
.team-portrait img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin-bottom: 16px;
}
.team-portrait figcaption {
  max-width: 260px;
}
.team-portrait__name {
  font-weight: var(--voice-weight);
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 4px;
}
.team-portrait__born {
  margin: 4px 0 0;
  font-size: 12px;
  font-style: italic;
  font-weight: 500;
  color: var(--ink-secondary);
  line-height: 1.4;
}
.team-portrait__role {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--rule-soft);
  font-size: 11px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-secondary);
  font-weight: var(--voice-weight);
  line-height: 1.5;
}

/* Collapse portraits inline on narrow viewports */
@media (max-width: 1280px) {
  .section-with-portrait {
    position: static;
    min-height: 0;
  }
  .team-portrait {
    position: static;
    left: auto;
    width: auto;
    max-width: 320px;
    margin: var(--gap-block) auto;
    padding-right: 0;
    border-right: none;
  }
}

/* PORTRAIT in marginalia — for team chapter */
.portrait {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.portrait img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin-bottom: 18px;
}
.portrait figcaption {
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  width: 100%;
  max-width: 280px;
}
.portrait__name {
  font-weight: var(--voice-weight);
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 4px;
}
.portrait__role {
  font-size: 12px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-secondary);
  font-weight: var(--voice-weight);
  line-height: 1.5;
  margin: 0;
}

/* PORTRAIT-ASIDE — portrait inside body, displaced into LEFT margin column.
   Anchored at the section it accompanies; flows alongside body text rather
   than at the top of the page. */
.portrait-aside {
  margin: 0;
  float: left;
  width: var(--margin-col);
  margin-left: calc((-1 * var(--margin-col)) - var(--gutter));
  padding-right: 28px;
  border-right: 1px solid var(--rule);
  margin-top: -8px;
  margin-bottom: 24px;
}
.portrait-aside img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin-bottom: 16px;
}
.portrait-aside figcaption {
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  max-width: 280px;
}
.portrait-aside .portrait__name {
  font-weight: var(--voice-weight);
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 4px;
}
.portrait-aside .portrait__born {
  margin: 4px 0 0;
  font-size: 12px;
  font-style: italic;
  font-weight: 500;
  color: var(--ink-secondary);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
.portrait-aside .portrait__role {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--rule-soft);
  font-size: 11px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-secondary);
  font-weight: var(--voice-weight);
  line-height: 1.5;
}

/* Collapse portrait-aside inline on narrow viewports */
@media (max-width: 1280px) {
  .portrait-aside {
    float: none;
    width: auto;
    max-width: 320px;
    margin: var(--gap-block) auto;
    padding-right: 0;
    border-right: none;
  }
}

/* Content that should span the full width of the text + gutter + margin */
.page.chapter > .full-bleed,
.page.chapter > .figure--full-bleed {
  grid-column: 1 / -1;
}

/* For non-chapter pages (cover, contents), keep the older column model */
.column {
  max-width: var(--measure);
  margin: 0 auto;
}
.column--wide { max-width: var(--measure-wide); }


/* ----------------------------------------------------------------------------
   4. TYPOGRAPHY — HEADINGS & DISPLAY
   ---------------------------------------------------------------------------- */

.t-cover,
.t-chapter,
.t-h2,
.t-h3,
.t-eyebrow,
.t-classification {
  font-family: var(--font-sans);
  font-weight: var(--voice-weight);
  font-style: normal;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

.t-cover {
  font-size: var(--t-cover);
  line-height: var(--lh-cover);
  letter-spacing: var(--ls-cover);
  font-feature-settings: "ss01", "cv11";
}

.t-cover-sub {
  font-family: var(--font-sans);
  font-weight: var(--voice-weight);
  font-style: italic;
  font-size: var(--t-cover-sub);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.t-classification {
  font-size: var(--t-classification);
  letter-spacing: var(--ls-classification);
  text-transform: uppercase;
  color: var(--ink-secondary);
  line-height: 1.4;
}

.t-chapter {
  font-size: var(--t-chapter);
  line-height: var(--lh-chapter);
  letter-spacing: var(--ls-chapter);
}

.t-eyebrow {
  font-size: var(--t-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.4;
  margin-bottom: 24px;
}

.t-h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  margin-top: var(--gap-section);
  margin-bottom: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

.t-h3 {
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  margin-top: var(--gap-subsection);
  margin-bottom: 10px;
}


/* ----------------------------------------------------------------------------
   5. TYPOGRAPHY — BODY
   ---------------------------------------------------------------------------- */

.body p,
.body ul,
.body ol {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--body-weight);
  color: var(--ink);
  margin: 0 0 var(--gap-paragraph);
  hyphens: auto;
}

.body p strong { font-weight: var(--body-weight-bold); }
.body p em     { font-style: italic; font-weight: var(--body-weight); }

.body > .lede {
  font-size: var(--t-lede);
  line-height: var(--lh-lede);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 32px;
}

.body > .lede.dropcap::first-letter {
  font-family: var(--font-sans);
  font-weight: var(--voice-weight);
  font-size: 78px;
  line-height: 0.86;
  color: var(--accent);
  float: left;
  margin: 6px 12px -4px 0;
  letter-spacing: -0.04em;
}

.body ul, .body ol {
  padding-left: 1.4em;
}
.body ul li, .body ol li {
  margin-bottom: 8px;
  padding-left: 6px;
}
.body ul li::marker { color: var(--accent); }


/* ----------------------------------------------------------------------------
   6. COMPONENT — COVER
   ---------------------------------------------------------------------------- */

.cover {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--pad-page-y) var(--pad-page-x);
  background: var(--paper);
  position: relative;
}

/* SPREAD LAYOUT — cover left, ToC right, on one screen.
   Vertical padding tightened so the 15-item contents list fits within
   100vh without scroll on common desktop viewports. */
.spread {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 0 64px;
  padding: clamp(24px, 4vh, 56px) var(--pad-page-x);
  background: var(--paper);
  position: relative;
}

.spread__slug {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

.spread__contents-head {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.spread__contents-head h2 {
  font-weight: var(--voice-weight);
  font-size: 26px;
  letter-spacing: -0.02em;
  margin: 0;
}

.spread__cover {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0;
  position: relative;
  min-height: 75vh;
}

.spread__cover-image {
  /* D3 lives in the same flex column as the iONEColor wordmark and is
     anchored to its top edge. As the column resizes, image scales but
     stays tied to the logo below — it cannot drift up into the header
     row of the grid. */
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}
.spread__cover-image img {
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
}

.spread__wordmark-block {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  max-width: 55%;
  padding-bottom: 0;
}

.spread__wordmark {
  margin: 0 0 14px;
}
.spread__wordmark img {
  display: block;
  max-width: 240px;
  width: 100%;
  height: auto;
}

.spread__contents-list {
  grid-column: 2;
  grid-row: 2;
  list-style: none;
  margin: 0;
  padding: 0;
  align-self: start;
}

.spread__contents-list li {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 20px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.spread__contents-list li:last-child { border-bottom: none; }

.spread__contents-list a {
  display: contents;
  text-decoration: none;
  border: none;
  color: var(--ink);
}
.spread__contents-list a:hover .ci__title { color: var(--accent); }
.spread__contents-list a:hover .ci__num { color: var(--accent); }

.ci__num {
  font-weight: var(--voice-weight);
  font-size: 14px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease);
}
.ci__title {
  font-weight: var(--voice-weight);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 2px;
  transition: color var(--dur-fast) var(--ease);
}
.ci__sub {
  font-weight: var(--voice-weight);
  font-style: italic;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-secondary);
  margin: 0;
}
.ci__meta {
  font-size: 10px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  font-weight: var(--voice-weight);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.spread__foot {
  grid-column: 1 / 3;
  grid-row: 3;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.spread__foot dt {
  font-size: var(--t-classification);
  letter-spacing: var(--ls-classification);
  text-transform: uppercase;
  color: var(--ink-secondary);
  font-weight: var(--voice-weight);
  margin-bottom: 6px;
}
.spread__foot dd {
  margin: 0;
  font-size: 13px;
  font-weight: var(--voice-weight);
  color: var(--ink);
  line-height: 1.4;
}

.cover__slug {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}

.cover__slug-block { display: flex; flex-direction: column; gap: 4px; max-width: 360px; }
.cover__slug-block .t-classification + .t-classification { color: var(--ink); font-weight: var(--voice-weight); }

.cover__wordmark-wrap {
  align-self: end;
  padding-bottom: 0;
}

.cover__wordmark {
  font-family: var(--font-sans);
  font-weight: var(--voice-weight);
  font-size: var(--t-cover);
  line-height: var(--lh-cover);
  letter-spacing: var(--ls-cover);
  color: var(--ink);
  margin: 0;
}

.cover__wordmark .i { color: var(--accent); }

.cover__subtitle {
  margin-top: 24px;
  max-width: 640px;
  font-weight: var(--voice-weight);
  font-style: italic;
  font-size: var(--t-cover-sub);
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.cover__foot {
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.cover__foot dt {
  font-size: var(--t-classification);
  letter-spacing: var(--ls-classification);
  text-transform: uppercase;
  color: var(--ink-secondary);
  font-weight: var(--voice-weight);
  margin-bottom: 6px;
}
.cover__foot dd {
  margin: 0;
  font-size: 13px;
  font-weight: var(--voice-weight);
  color: var(--ink);
  line-height: 1.4;
}


/* ----------------------------------------------------------------------------
   7. COMPONENT — CHAPTER CARDS (LANDING PAGE)
   ---------------------------------------------------------------------------- */

.contents {
  padding-top: var(--gap-section);
}

.contents__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 40px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}

.contents__head .t-h2 {
  margin: 0;
  padding: 0;
  border: none;
}

.contents__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.chapter-card {
  display: grid;
  grid-template-columns: 80px 1fr 120px;
  gap: 32px;
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  border-radius: 0;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease), padding var(--dur-fast) var(--ease);
}
.chapter-card:hover {
  background: var(--paper-deep);
  border-bottom-color: var(--rule);
  padding-left: 16px;
  padding-right: 16px;
}
.chapter-card:hover .chapter-card__title { color: var(--accent); }

.chapter-card__num {
  font-weight: var(--voice-weight);
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-tertiary);
  font-variant-numeric: tabular-nums;
}

.chapter-card__title {
  font-weight: var(--voice-weight);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 6px;
  transition: color var(--dur-fast) var(--ease);
}

.chapter-card__sub {
  font-weight: var(--voice-weight);
  font-style: italic;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-secondary);
  margin: 0;
}

.chapter-card__meta {
  font-size: var(--t-classification);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  font-weight: var(--voice-weight);
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* ----------------------------------------------------------------------------
   8. COMPONENT — SIDEBAR ("KEY SPECIFICATIONS AT A GLANCE")
   ----------------------------------------------------------------------------
   Default: inline in the text column.
   .sidebar--margin-right: floats into the right marginalia column,
   aligned to the top of the paragraph that introduced it.
   ---------------------------------------------------------------------------- */

.sidebar {
  background: var(--paper-deep);
  border-left: 3px solid var(--accent);
  padding: 28px 32px;
  margin: var(--gap-block) 0;
}

/* Marginalia variant — float into right gutter */
.sidebar--margin-right {
  /* When inside .page.chapter grid, this gets repositioned via .marginalia wrapper */
  margin: 0;
  padding: 24px 24px;
  background: transparent;
  border-left: 2px solid var(--accent);
  font-size: 0.95em;
}

.marginalia {
  align-self: start;
  padding-top: 0;
}

.marginalia .sidebar {
  margin: 0;
  padding: 22px 24px;
  background: transparent;
  border-left: 2px solid var(--accent);
}

.marginalia .sidebar__list li { padding: 8px 0; font-size: 13px; }

.sidebar__label {
  font-size: var(--t-sidebar-label);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: var(--voice-weight);
  margin: 0 0 4px;
}

.sidebar__title {
  font-weight: var(--voice-weight);
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-soft);
}

.sidebar__title em { font-style: italic; font-weight: var(--voice-weight); }

.sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-sidebar);
  line-height: var(--lh-sidebar);
}

.sidebar__list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
}
.sidebar__list li:last-child { border-bottom: none; padding-bottom: 0; }

.sidebar__list dt,
.sidebar__list .k {
  color: var(--ink-secondary);
  font-weight: var(--body-weight);
}

.sidebar__list dd,
.sidebar__list .v {
  margin: 0;
  font-weight: var(--voice-weight);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}


/* ----------------------------------------------------------------------------
   9. COMPONENT — BLOCKQUOTE / PULL QUOTE
   ---------------------------------------------------------------------------- */

.pullquote {
  margin: var(--gap-block) 0;
  padding: 8px 0 8px 28px;
  border-left: 3px solid var(--accent);
}

.pullquote__body {
  font-family: var(--font-sans);
  font-weight: var(--voice-weight);
  font-style: italic;
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 12px;
  text-wrap: balance;
}

.pullquote__attr {
  font-size: var(--t-classification);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-secondary);
  font-weight: var(--voice-weight);
}


/* ----------------------------------------------------------------------------
   10. COMPONENT — FIGURES & CAPTIONS
   ----------------------------------------------------------------------------
   .figure: inline in column.
   .figure--full-bleed: spans the full grid width (column + gutter + margin).
   .figure--wide: spans column + part of right margin.
   ---------------------------------------------------------------------------- */

.figure {
  margin: var(--gap-block) 0;
}

.figure--full-bleed {
  margin-left: 0;
  margin-right: 0;
}

.figure__frame {
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  background-image:
    repeating-linear-gradient(135deg,
      transparent 0, transparent 11px,
      rgba(28,31,36,0.035) 11px, rgba(28,31,36,0.035) 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  padding: 24px;
  position: relative;
}

.figure__placeholder {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-tertiary);
  text-transform: uppercase;
  text-align: center;
}

.figure img { display: block; width: 100%; height: auto; }

.figure__caption {
  margin-top: 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  color: var(--ink-secondary);
}

.figure__caption .fig-num {
  font-weight: var(--voice-weight);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--accent);
  font-size: 10px;
}


/* ----------------------------------------------------------------------------
   11. COMPONENT — CODE / DATA BLOCK
   ---------------------------------------------------------------------------- */

code, .code-inline {
  font-family: var(--font-mono);
  font-size: 0.88em;
  font-weight: 500;
  background: var(--paper-deep);
  padding: 1px 6px;
  border-radius: 0;
  color: var(--ink);
}

pre.code-block {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  background: var(--paper-deep);
  border-left: 3px solid var(--ink-secondary);
  padding: 20px 24px;
  margin: var(--gap-block) 0;
  overflow-x: auto;
  color: var(--ink);
  white-space: pre;
}


/* ----------------------------------------------------------------------------
   12. COMPONENT — DATA TABLE
   ---------------------------------------------------------------------------- */

.table-wrap { margin: var(--gap-block) 0; overflow-x: auto; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
table.data thead th {
  text-align: left;
  font-size: var(--t-sidebar-label);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-secondary);
  font-weight: var(--voice-weight);
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--ink);
}
table.data tbody td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-weight: var(--body-weight);
}
table.data tbody td:last-child,
table.data thead th:last-child { text-align: right; padding-right: 0; }
table.data tbody td.num { font-weight: var(--voice-weight); }


/* ----------------------------------------------------------------------------
   13. COMPONENT — FOOTNOTES
   ---------------------------------------------------------------------------- */

.footnotes {
  margin-top: var(--gap-section);
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: var(--t-footnote);
  line-height: 1.5;
  color: var(--ink-secondary);
}
.footnotes ol { padding-left: 1.4em; margin: 0; }
.footnotes li { margin-bottom: 8px; }
.fn-ref {
  font-size: 0.7em;
  vertical-align: super;
  color: var(--accent);
  font-weight: var(--voice-weight);
  margin-left: 2px;
}


/* ----------------------------------------------------------------------------
   14. COMPONENT — PAGE HEADER / RUNNING HEAD / FOLIO
   ---------------------------------------------------------------------------- */

.running-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 16px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-pagenum);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-secondary);
  font-weight: var(--voice-weight);
}
.running-head__doc { color: var(--ink); }
.running-head__loc { color: var(--ink-secondary); }
.running-head__folio { font-variant-numeric: tabular-nums; }


/* ----------------------------------------------------------------------------
   15. COMPONENT — CHAPTER HEAD BLOCK
   ---------------------------------------------------------------------------- */

.chapter-head {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--ink);
}
.chapter-head__num {
  font-size: var(--t-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: var(--voice-weight);
  margin-bottom: 24px;
}
.chapter-head__title {
  font-weight: var(--voice-weight);
  font-size: var(--t-chapter);
  line-height: var(--lh-chapter);
  letter-spacing: var(--ls-chapter);
  margin: 0 0 16px;
  text-wrap: balance;
}
.chapter-head__subtitle {
  font-weight: var(--voice-weight);
  font-style: italic;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink-secondary);
  margin: 0;
  max-width: 720px;
  text-wrap: balance;
}


/* ----------------------------------------------------------------------------
   16. COMPONENT — KEY FIGURE INLINE EMPHASIS
   ---------------------------------------------------------------------------- */

.figure-inline {
  font-weight: var(--voice-weight);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  background-image: linear-gradient(to top, var(--accent-tint) 0, var(--accent-tint) 28%, transparent 28%);
  padding: 0 2px;
}


/* ----------------------------------------------------------------------------
   17. SLIDE-OUT NAVIGATION
   ---------------------------------------------------------------------------- */

.nav-trigger {
  position: fixed;
  top: 64px;
  right: 32px;
  width: 32px;
  height: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 50;
  padding: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.nav-trigger:hover { opacity: 0.65; }

.nav-trigger__bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}

.nav-trigger[aria-expanded="true"] .nav-trigger__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-trigger[aria-expanded="true"] .nav-trigger__bar:nth-child(2) { opacity: 0; }
.nav-trigger[aria-expanded="true"] .nav-trigger__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(28,31,36,0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
  z-index: 40;
}
.nav-scrim.is-open { opacity: 1; pointer-events: auto; }

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(440px, 92vw);
  height: 100vh;
  background: var(--paper);
  box-shadow: var(--shadow-nav);
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
  z-index: 45;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 80px 40px 40px;
}
.nav-drawer.is-open { transform: translateX(0); }

.nav-drawer__label {
  font-size: var(--t-classification);
  letter-spacing: var(--ls-classification);
  text-transform: uppercase;
  color: var(--ink-secondary);
  font-weight: var(--voice-weight);
  margin: 0 0 4px;
}
.nav-drawer__title {
  font-weight: var(--voice-weight);
  font-size: 22px;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}

.nav-list { list-style: none; padding: 0; margin: 0; }

.nav-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none;
  color: var(--ink);
  border-bottom-color: var(--rule-soft);
  align-items: baseline;
  transition: color var(--dur-fast) var(--ease);
  position: relative;
}
.nav-item:hover { color: var(--accent); border-bottom-color: var(--rule-soft); }
.nav-item:hover .nav-item__num { color: var(--accent); }

.nav-item__num {
  font-weight: var(--voice-weight);
  font-size: 13px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease);
}

.nav-item__title {
  font-weight: var(--voice-weight);
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
}
.nav-item__sub {
  font-weight: var(--voice-weight);
  font-style: italic;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-secondary);
  margin: 4px 0 0;
}

.nav-item.is-current { color: var(--accent); }
.nav-item.is-current .nav-item__num { color: var(--accent); }
.nav-item.is-current::before {
  content: "";
  position: absolute;
  left: -40px;
  top: 16px;
  bottom: 16px;
  width: 3px;
  background: var(--accent);
}

.nav-drawer__foot {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: var(--t-classification);
  letter-spacing: var(--ls-classification);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  font-weight: var(--voice-weight);
  line-height: 1.5;
}


/* ----------------------------------------------------------------------------
   18. RESPONSIVE
   ----------------------------------------------------------------------------
   At narrower viewports the chapter grid collapses: marginalia drop inline
   under the text column. At ≤780px the grid disappears entirely and
   typography compresses.
   ---------------------------------------------------------------------------- */

@media (max-width: 1280px) {
  .page.chapter {
    grid-template-columns: minmax(0, var(--measure));
    justify-content: center;
  }
  .page.chapter > .running-head,
  .page.chapter > .chapter-head,
  .page.chapter > .body {
    grid-column: 1;
  }
  .page.chapter > .marginalia {
    grid-column: 1;
    margin-top: var(--gap-block);
    border-right: none;
    padding-right: 0;
  }
  .marginalia .sidebar {
    background: var(--paper-deep);
    padding: 28px 32px;
    border-left: 3px solid var(--accent);
  }
  .spread {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
  }
  .spread__slug { grid-column: 1; grid-row: 1; }
  .spread__cover { grid-column: 1; grid-row: 2; }
  .spread__contents-head { grid-column: 1; grid-row: 3; margin-top: 48px; }
  .spread__contents-list { grid-column: 1; grid-row: 4; }
  .spread__foot { grid-column: 1; grid-row: 5; }
}

@media (max-width: 780px) {
  :root {
    --t-h2: 24px;
    --t-h3: 17px;
    --t-body: 16px;
    --t-lede: 18px;
  }
  .cover__foot { grid-template-columns: 1fr 1fr; }
  .chapter-card { grid-template-columns: 56px 1fr; }
  .chapter-card__meta { display: none; }
  .nav-trigger { top: 16px; right: 16px; }
}


/* ----------------------------------------------------------------------------
   19. PRINT
   ---------------------------------------------------------------------------- */

@media print {
  @page {
    size: A4;
    margin: 22mm 20mm 22mm 20mm;
  }

  :root {
    --paper: #FFFFFF;
    --paper-deep: #F5F2EA;
    --paper-shadow: #E8E2D0;
    --ink: #1A1A1A;
    --ink-secondary: #4A4A4A;
    --ink-tertiary: #7A7A7A;
    --t-body: 11pt;
    --t-h2: 18pt;
    --t-h3: 13pt;
    --t-eyebrow: 8pt;
    --t-chapter: 32pt;
    --lh-body: 1.5;
  }

  body { background: #fff; }

  .nav-trigger, .nav-scrim, .nav-drawer { display: none !important; }

  .page.chapter {
    display: block;
  }
  .marginalia .sidebar {
    background: var(--paper-deep);
    padding: 20px 24px;
    border-left: 2px solid var(--accent);
  }

  .chapter, .cover { page-break-after: always; break-after: page; }
  h1, h2, h3 { page-break-after: avoid; break-after: avoid; }
  .sidebar, .pullquote, .figure, table { page-break-inside: avoid; break-inside: avoid; }

  .body a[href^="http"]::after {
    content: " [" attr(href) "]";
    font-size: 9pt;
    color: var(--ink-tertiary);
    font-weight: var(--body-weight);
  }

  .fn-ref { color: var(--ink); }
}


/* ----------------------------------------------------------------------------
   20. UTILITIES
   ---------------------------------------------------------------------------- */

.u-rule         { border-bottom: 1px solid var(--rule); }
.u-rule-top     { border-top:    1px solid var(--rule); }
.u-mute         { color: var(--ink-secondary); }
.u-tab-nums     { font-variant-numeric: tabular-nums; }
.u-italic       { font-style: italic; }
.u-accent       { color: var(--accent); }
.u-mt-0         { margin-top: 0 !important; }
.u-mt-section   { margin-top: var(--gap-section); }
.u-mb-section   { margin-bottom: var(--gap-section); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


/* EPIGRAPH — used for institutional voice quotes at chapter openings
   and as pull-quotes inside sections. Oxblood left rule, italic Inter,
   block-level treatment that visually separates the institutional voice
   from the body register. */
.epigraph {
  margin: 32px 0 56px;
  padding: 24px 0 24px 32px;
  border-left: 3px solid var(--accent);
  max-width: var(--measure);
}
.epigraph__quote {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 18px;
}
.epigraph__attribution {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0 0 2px;
}
.epigraph__role {
  font-size: 12px;
  font-style: italic;
  color: var(--ink-secondary);
  margin: 0 0 2px;
  line-height: 1.5;
}
.epigraph__source {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--ink-secondary);
  margin: 10px 0 0;
}
.epigraph__source a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
}
.epigraph__source a:hover {
  background: var(--paper-deep);
}

/* VIDEO EMBED — used in Chapter IX for the Mettler keynote.
   16:9 responsive aspect ratio, oxblood top rule, caption block below. */
.video-embed {
  margin: 48px 0;
  max-width: var(--measure);
  border-top: 2px solid var(--accent);
  padding-top: 24px;
}
.video-embed__player {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  background: var(--paper-deep);
  overflow: hidden;
}
.video-embed__player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-embed__caption {
  margin-top: 16px;
  padding: 16px 0 0;
  border-top: 1px solid var(--rule-soft);
}
.video-embed__title {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 4px;
}
.video-embed__source {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--ink-secondary);
  margin: 0;
}


/* SOURCE CARD — FT-style embedded source reference, positioned as
   marginalia in the RIGHT margin column, mirroring the left-side
   sidebars and the Chapter VIII portrait architecture.
   Each card is fully clickable and opens its source in a new tab. */

.section-with-source {
  position: relative;
  min-height: 200px;
}

.source-card {
  display: block;
  position: absolute;
  top: 0;
  left: calc((-1 * var(--margin-col)) - var(--gutter));
  width: var(--margin-col);
  padding: 18px 24px 18px 0;
  border-right: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background 120ms ease, border-color 120ms ease;
}

.source-card:hover {
  background: var(--paper-deep);
}

.source-card__source {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 4px;
}

.source-card__date {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--ink-secondary);
  margin: 0 0 12px;
}

.source-card__title {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.005em;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 8px;
}

.source-card__lede {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-secondary);
  margin: 0 0 12px;
}

.source-card__action {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  font-weight: 700;
  color: var(--accent);
  margin: 0;
}

.source-card__action::after {
  content: " \2192";
}

/* Collapse source-card to inline on narrow viewports */
@media (max-width: 1280px) {
  .section-with-source {
    position: static;
    min-height: 0;
  }
  .source-card {
    position: static;
    width: auto;
    max-width: 100%;
    margin: 24px 0;
    padding: 18px 22px;
    border-left: 3px solid var(--accent);
  }
}