@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/turn2c-barlow-condensed-600.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/turn2c-barlow-condensed-700.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/turn2c-barlow-condensed-800.ttf') format('truetype');
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/turn2c-ibm-plex-mono-400.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/turn2c-ibm-plex-mono-500.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url('../fonts/turn2c-inter-400.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url('../fonts/turn2c-inter-400-italic.ttf') format('truetype');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url('../fonts/turn2c-inter-500.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url('../fonts/turn2c-inter-600.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url('../fonts/turn2c-inter-700.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

    /* ════════════════════════════════════════════════════════════
       SISTEMA VISUAL DO CASE
       Derivado da identidade Turn2C (laranja), da apresentação
       original (papel, tinta, display condensado, metadados mono)
       e da natureza do produto (progressão, estados, medição).
       ════════════════════════════════════════════════════════════ */
    :root {
      /* surfaces */
      --surface-primary:   #f2efe8;
      --surface-secondary: #e9e4d8;
      --surface-ink:       #1a1511;
      --surface-ink-2:     #241d16;

      /* text */
      --text-primary:   #1c1712;
      --text-secondary: #574d40;
      --text-tertiary:  #6b6055; /* darkened: contrast ≥ 4.5:1 on paper */
      --text-inverse:      #f4efe5;
      --text-inverse-soft: #b1a794;
      --text-inverse-dim:  #8d8271;

      /* case color — Turn2C orange, selective use */
      --accent:         #e4570a;   /* escala grande, marcas gráficas */
      --accent-deep:    #a33c00;   /* small text on paper (AA) */
      --accent-on-ink:  #f2823d;   /* small text on ink */

      /* rules / dividers */
      --rule:      #d3cbba;
      --rule-soft: #ded7c7;
      --rule-dark: rgba(244,239,229,0.16);

      /* typography */
      --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
      --font-body:    Inter, ui-sans-serif, -apple-system, sans-serif;
      --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

      --display-size:       clamp(3.4rem, 8vw, 8.6rem);
      --monument-size:      clamp(4.4rem, 14vw, 12.5rem);
      --chapter-title-size: clamp(2.5rem, 5.8vw, 4.8rem);
      --thesis-size:        clamp(1.65rem, 3.6vw, 3.2rem);
      --body-large:         clamp(1.05rem, 1.45vw, 1.22rem);
      --body-default:       1rem;
      --caption-size:       0.8rem;
      --label-size:         0.7rem;

      /* spacing */
      --space-chapter: clamp(6rem, 14vw, 11.5rem);
      --space-section: clamp(3rem, 7vw, 5.5rem);
      --space-content: clamp(1.5rem, 3vw, 2.5rem);
      --space-inline:  1rem;

      /* layout */
      --container: 1240px;
      --reading:   62ch;
      --bar-h:     54px;

      /* motion */
      --t-fast: 160ms;
      --t-med:  420ms;
      --ease:   cubic-bezier(0.22, 0.8, 0.36, 1);
    }

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

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      background: var(--surface-primary);
      color: var(--text-primary);
      font-family: var(--font-body);
      font-size: var(--body-default);
      line-height: 1.65;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

    img { display: block; max-width: 100%; height: auto; }
    a { color: inherit; }
    h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
    ul, ol { margin: 0; padding: 0; list-style: none; }

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

    :focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: 3px;
    }
    .ch--ink :focus-visible, .idx :focus-visible {
      outline-color: var(--accent-on-ink);
    }

    [id] { scroll-margin-top: calc(var(--bar-h) + 1rem); }

    .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;
    }

    .skip-link {
      position: fixed;
      z-index: 200;
      top: 0.6rem; left: 0.6rem;
      padding: 0.7rem 1.1rem;
      background: var(--surface-ink);
      color: var(--text-inverse);
      font-family: var(--font-mono);
      font-size: 0.78rem;
      text-decoration: none;
      transform: translateY(-300%);
    }
    .skip-link:focus { transform: translateY(0); }

    /* ─── utilitários tipográficos ─────────────────────────────── */
    .wrap {
      width: min(calc(100% - 2.5rem), var(--container));
      margin-inline: auto;
    }

    .kicker {
      display: block;
      font-family: var(--font-mono);
      font-size: var(--label-size);
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--text-tertiary);
    }
    .ch--ink .kicker { color: var(--text-inverse-dim); }
    .kicker--block { margin-bottom: 1rem; }
    .xread-fig .fig-cap { margin-top: 0.6rem; }

    .num { font-variant-numeric: tabular-nums; }

    .note {
      font-family: var(--font-mono);
      font-size: 0.73rem;
      line-height: 1.6;
      color: var(--text-tertiary);
      max-width: 52ch;
    }
    .ch--ink .note { color: var(--text-inverse-dim); }

    p { color: var(--text-secondary); }
    .ch--ink p { color: var(--text-inverse-soft); }

    /* ─── barra do case ────────────────────────────────────────── */
    .bar {
      position: fixed;
      z-index: 100;
      inset: 0 0 auto 0;
      height: var(--bar-h);
      display: flex;
      align-items: center;
      gap: 1rem;
      padding-inline: clamp(1rem, 3vw, 2rem);
      background: rgba(242,239,232,0.9);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(28,23,18,0.12);
    }

    .bar-brand {
      display: flex;
      align-items: baseline;
      gap: 0.6rem;
      text-decoration: none;
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .bar-brand b { font-weight: 500; color: var(--text-primary); }
    .bar-brand span { color: var(--text-tertiary); }

    .bar-pos {
      flex: 1;
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 0.75rem;
      min-width: 0;
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.08em;
    }
    .bar-pos-num { color: var(--accent-deep); font-weight: 500; white-space: nowrap; }
    .bar-pos-title {
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .bar-idx {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.45rem 0.9rem;
      border: 1px solid rgba(28,23,18,0.25);
      background: none;
      color: var(--text-primary);
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      cursor: pointer;
      transition: border-color var(--t-fast), background var(--t-fast);
    }
    .bar-idx:hover { border-color: var(--text-primary); background: rgba(28,23,18,0.05); }

    /* ─── trilho lateral de capítulos (desktop) ────────────────── */
    .rail {
      position: fixed;
      z-index: 90;
      left: clamp(0.8rem, 1.6vw, 1.6rem);
      top: 50%;
      transform: translateY(-50%);
      display: none;
      flex-direction: column;
      gap: 0.55rem;
    }
    @media (min-width: 1400px) { .rail { display: flex; } }

    .rail a {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      text-decoration: none;
      font-family: var(--font-mono);
      font-size: 0.62rem;
      letter-spacing: 0.08em;
      color: var(--text-tertiary);
      transition: color var(--t-fast);
    }
    .rail a::before {
      content: "";
      width: 0.9rem;
      height: 1px;
      background: currentColor;
      transition: width var(--t-fast);
    }
    .rail a:hover { color: var(--text-primary); }
    .rail a.is-active { color: var(--accent-deep); }
    .rail a.is-active::before { width: 1.5rem; }
    .rail.on-ink a { color: var(--text-inverse-dim); }
    .rail.on-ink a:hover { color: var(--text-inverse); }
    .rail.on-ink a.is-active { color: var(--accent-on-ink); }

    /* ─── índice (overlay) ─────────────────────────────────────── */
    .idx {
      position: fixed;
      inset: 0;
      z-index: 150;
      display: none;
      background: var(--surface-ink);
      color: var(--text-inverse);
      overflow-y: auto;
      padding: calc(var(--bar-h) + 1.5rem) 0 3rem;
    }
    .idx.is-open { display: block; }

    .idx-top {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 1rem;
      margin-bottom: var(--space-content);
    }
    .idx-top .kicker { color: var(--text-inverse-dim); }

    .idx-close {
      padding: 0.45rem 0.9rem;
      border: 1px solid var(--rule-dark);
      background: none;
      color: var(--text-inverse);
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      cursor: pointer;
    }
    .idx-close:hover { border-color: var(--text-inverse); }

    .idx-list { display: grid; }
    .idx-item {
      display: grid;
      grid-template-columns: 4.5rem 1fr auto;
      align-items: baseline;
      gap: 1.25rem;
      padding: 0.7rem 0.4rem;
      border-top: 1px solid var(--rule-dark);
      text-decoration: none;
      transition: background var(--t-fast);
    }
    .idx-item:last-child { border-bottom: 1px solid var(--rule-dark); }
    .idx-item:hover, .idx-item.is-active { background: rgba(244,239,229,0.05); }
    .idx-num {
      font-family: var(--font-mono);
      font-size: 0.78rem;
      color: var(--accent-on-ink);
    }
    .idx-title {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 3.4vw, 2.6rem);
      font-weight: 700;
      line-height: 1.05;
      color: var(--text-inverse);
      letter-spacing: 0.005em;
    }
    .idx-role {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-inverse-dim);
      white-space: nowrap;
    }

    /* ─── capítulos: estrutura comum ───────────────────────────── */
    .chapter { padding-block: var(--space-chapter); }
    .ch--ink {
      background: var(--surface-ink);
      color: var(--text-inverse);
    }
    .ch--paper2 { background: var(--surface-secondary); }

    /* cabeçalho de capítulo */
    .ch-head { margin-bottom: var(--space-section); }
    .ch-head-rule {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1rem;
      padding-top: 0.9rem;
      border-top: 2px solid var(--text-primary);
      margin-bottom: clamp(1.5rem, 4vw, 2.75rem);
    }
    .ch--ink .ch-head-rule { border-top-color: var(--text-inverse); }
    .ch-count {
      font-family: var(--font-mono);
      font-size: 0.78rem;
      letter-spacing: 0.1em;
      color: var(--accent-deep);
      font-weight: 500;
    }
    .ch--ink .ch-count { color: var(--accent-on-ink); }
    .ch-count span { color: var(--text-tertiary); font-weight: 400; }
    .ch--ink .ch-count span { color: var(--text-inverse-dim); }
    .ch-role {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--text-tertiary);
      text-align: right;
    }
    .ch--ink .ch-role { color: var(--text-inverse-dim); }

    .ch-title {
      font-family: var(--font-display);
      font-size: var(--chapter-title-size);
      font-weight: 800;
      line-height: 0.96;
      letter-spacing: -0.005em;
      text-wrap: balance;
      max-width: 16ch;
    }
    .ch--ink .ch-title { color: var(--text-inverse); }

    .ch-lede {
      max-width: 46ch;
      margin-top: var(--space-content);
      font-size: var(--body-large);
      line-height: 1.6;
    }

    /* fecho de capítulo: próximo */
    .ch-next {
      display: flex;
      justify-content: flex-end;
      margin-top: var(--space-section);
      padding-top: 1rem;
      border-top: 1px solid var(--rule);
    }
    .ch--ink .ch-next { border-top-color: var(--rule-dark); }
    .ch-next a {
      display: inline-flex;
      align-items: baseline;
      gap: 0.75rem;
      text-decoration: none;
      font-family: var(--font-mono);
      font-size: 0.73rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-secondary);
      transition: color var(--t-fast);
    }
    .ch-next a:hover { color: var(--accent-deep); }
    .ch--ink .ch-next a { color: var(--text-inverse-soft); }
    .ch--ink .ch-next a:hover { color: var(--accent-on-ink); }
    .ch-next .arrow { font-family: var(--font-body); }

    /* marcador de atuação */
    .marker {
      max-width: 44ch;
      padding-left: 1.1rem;
      border-left: 2px solid var(--accent);
    }
    .marker .kicker { color: var(--accent-deep); margin-bottom: 0.35rem; }
    .ch--ink .marker .kicker { color: var(--accent-on-ink); }
    .marker p { font-size: 0.92rem; line-height: 1.6; }

    /* ─── figuras ──────────────────────────────────────────────── */
    .fig { margin: 0; }
    .fig-media {
      position: relative;
      background: #fff;
      border: 1px solid var(--rule);
    }
    .ch--ink .fig-media { border-color: var(--rule-dark); }
    .fig-media img { width: 100%; }

    .fig-cap {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      margin-top: 0.7rem;
      font-family: var(--font-mono);
      font-size: 0.7rem;
      line-height: 1.55;
      color: var(--text-tertiary);
      max-width: 58ch;
    }
    .ch--ink .fig-cap { color: var(--text-inverse-dim); }
    .fig-cap b {
      font-weight: 500;
      color: var(--accent-deep);
    }
    .ch--ink .fig-cap b { color: var(--accent-on-ink); }

    /* figura sangrada (fora da coluna) */
    .fig--bleed { width: 100%; }
    .fig--bleed .fig-media { border-inline: none; }
    .fig--bleed .fig-cap { padding-inline: clamp(1.25rem, 3vw, 2rem); }

    /* figura com legenda lateral */
    .fig-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
      gap: var(--space-content);
      align-items: end;
    }
    .fig-row .fig-cap { margin-top: 0; flex-direction: column; gap: 0.4rem; }

    /* ════════════════ 00 · ABERTURA ═══════════════════════════ */
    .cover {
      display: flex;
      flex-direction: column;
      min-height: 100svh;
      padding-top: calc(var(--bar-h) + clamp(2rem, 6vh, 4.5rem));
      background: var(--surface-ink);
      color: var(--text-inverse);
    }

    .cover-top {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 1rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--rule-dark);
      font-family: var(--font-mono);
      font-size: 0.7rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .cover-top .l { color: var(--text-inverse); }
    .cover-top .l span { color: var(--accent-on-ink); }
    .cover-top .r { color: var(--text-inverse-dim); text-align: right; }

    .cover-main {
      flex: 1;
      display: grid;
      grid-template-columns: minmax(0, 1.65fr) minmax(240px, 0.85fr);
      gap: clamp(2rem, 5vw, 5rem);
      align-items: end;
      padding-block: clamp(2.5rem, 7vh, 5rem);
    }

    .cover-case {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      letter-spacing: 0.14em;
      color: var(--accent-on-ink);
      margin-bottom: clamp(1.25rem, 3vh, 2rem);
    }
    .cover-case span { color: var(--text-inverse-dim); }

    .cover-title {
      font-family: var(--font-display);
      font-size: var(--display-size);
      font-weight: 800;
      line-height: 0.92;
      letter-spacing: -0.008em;
      color: var(--text-inverse);
      text-transform: uppercase;
    }
    .cover-title em {
      font-style: normal;
      color: var(--accent);
    }

    .cover-sub {
      max-width: 40ch;
      margin-top: clamp(1.25rem, 3vh, 2rem);
      font-size: var(--body-large);
      line-height: 1.6;
      color: var(--text-inverse-soft);
    }

    .cover-meta {
      display: grid;
      gap: 1.1rem;
      padding-left: clamp(1rem, 2vw, 2rem);
      border-left: 1px solid var(--rule-dark);
    }
    .cover-meta dt {
      font-family: var(--font-mono);
      font-size: 0.62rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--text-inverse-dim);
      margin-bottom: 0.25rem;
    }
    .cover-meta dd {
      font-size: 0.9rem;
      color: var(--text-inverse);
      line-height: 1.45;
    }

    .cover-start {
      display: inline-flex;
      align-items: baseline;
      gap: 0.6rem;
      margin-top: 1.5rem;
      text-decoration: none;
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-inverse-soft);
      transition: color var(--t-fast);
    }
    .cover-start:hover { color: var(--accent-on-ink); }

    /* faixa de interface real na base da capa */
    .cover-strip { border-top: 1px solid var(--rule-dark); }
    .cover-strip img {
      width: 100%;
      height: clamp(230px, 36vh, 380px);
      object-fit: cover;
      object-position: center top;
      display: block;
      opacity: 0.96;
    }
    .cover-strip-cap {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.65rem clamp(1.25rem, 3vw, 2rem) 0.9rem;
      font-family: var(--font-mono);
      font-size: 0.65rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-inverse-dim);
    }
    .cover-strip-cap b { color: var(--accent-on-ink); font-weight: 500; }

    /* vídeo da jornada (cap. 04) — toca quando visível */
    .fig--video video {
      display: block;
      width: 100%;
      height: auto;
      background: #0d0a08;
    }
    .fig--video .fig-media {
      aspect-ratio: 1680 / 896;
      background: #0d0a08;
    }

    /* leitura cruzada — transcrição do slide da pesquisa (cap. 02) */
    .xread {
      margin-top: var(--space-section);
      max-width: 560px;
      background: var(--surface-primary);
      border: 1.5px dashed rgba(163, 60, 0, 0.55);
      padding: clamp(1.25rem, 2.5vw, 1.75rem);
    }
    .xread-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 1.5rem;
      justify-content: space-between;
      font-family: var(--font-mono);
      font-size: var(--label-size);
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent-deep);
      padding-bottom: var(--space-inline);
      border-bottom: 1px solid var(--rule);
      margin: 0;
    }
    .xread-meta span:last-child { color: var(--text-tertiary); }
    .xread-fig {
      margin: var(--space-inline) 0 0;
    }
    .xread-fig img {
      display: block;
      width: 100%;
      height: auto;
      border: 1px solid var(--rule);
    }

    /* ════════════════ 01 · O PROBLEMA ═════════════════════════ */
    .statement {
      font-family: var(--font-display);
      font-size: var(--thesis-size);
      font-weight: 700;
      line-height: 1.04;
      letter-spacing: -0.005em;
      max-width: 24ch;
      text-wrap: balance;
      color: var(--text-primary);
    }
    .statement em { font-style: normal; color: var(--accent-deep); }
    .ch--ink .statement { color: var(--text-inverse); }
    .ch--ink .statement em { color: var(--accent-on-ink); }

    .prob-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
      gap: clamp(2.5rem, 6vw, 5.5rem);
      align-items: start;
      margin-bottom: var(--space-section);
    }
    .prob-context { font-size: 0.95rem; display: grid; gap: 1rem; }

    /* ─── Who goes through this journey ─────────────────── */
    .who-block { margin-bottom: var(--space-section); }
    .who-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1px;
      background: var(--rule);
      border: 1px solid var(--rule);
      margin-bottom: 1.25rem;
    }
    .who-cell { background: var(--surface-primary); padding: 1.1rem 1.25rem; }
    .who-cell-label {
      font-family: var(--font-mono);
      font-size: 0.61rem;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--text-tertiary);
      display: block;
      margin-bottom: 0.4rem;
    }
    .who-cell-text {
      font-size: 0.87rem;
      line-height: 1.5;
      color: var(--text-secondary);
      margin: 0;
    }
    .who-progress {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.35rem 0.25rem;
      margin-bottom: 0.9rem;
      padding: 0.8rem 1rem;
      border: 1px solid var(--rule);
      background: var(--surface-primary);
    }
    .who-progress-item {
      font-family: var(--font-mono);
      font-size: 0.67rem;
      letter-spacing: 0.04em;
      color: var(--text-secondary);
    }
    .who-progress-arrow { color: var(--text-tertiary); font-size: 0.75rem; }
    .who-closing {
      font-size: 0.85rem;
      line-height: 1.55;
      color: var(--text-tertiary);
      max-width: 60ch;
      font-style: italic;
    }
    @media (max-width: 1080px) {
      .who-grid { grid-template-columns: 1fr; }
    }

    .symptoms { margin-top: var(--space-section); }
    .symptoms-label { margin-bottom: 1.25rem; }
    .symptom {
      display: grid;
      grid-template-columns: 3rem minmax(0, 1fr);
      gap: 1.25rem;
      padding-block: 1.1rem;
      border-top: 1px solid var(--rule);
      align-items: baseline;
    }
    .symptom-n {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: var(--accent-deep);
    }
    .symptom p {
      font-size: clamp(1.05rem, 1.8vw, 1.3rem);
      font-weight: 500;
      color: var(--text-primary);
      line-height: 1.45;
      max-width: 44ch;
    }
    .symptom p span { color: var(--text-tertiary); font-weight: 400; }

    .stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin-top: var(--space-section);
      border-top: 2px solid var(--text-primary);
    }
    .stat {
      padding: 1.5rem 2rem 0 0;
    }
    .stat + .stat { border-left: 1px solid var(--rule); padding-left: 2rem; }
    .stat-num {
      font-family: var(--font-display);
      font-size: clamp(3.2rem, 7vw, 6rem);
      font-weight: 800;
      line-height: 0.9;
      letter-spacing: -0.01em;
      color: var(--text-primary);
    }
    .stat-num sup { font-size: 0.45em; font-weight: 700; }
    .stat-desc { margin-top: 0.8rem; font-size: 0.88rem; max-width: 30ch; }
    .stat-desc strong { color: var(--text-primary); }

    /* a raiz do problema */
    .root {
      margin-top: clamp(4rem, 9vh, 6.5rem);
      border-top: 1px solid var(--rule);
      padding-top: 2.25rem;
    }
    .root-thesis {
      margin: 1.6rem 0 0;
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
    }
    .root-line {
      font-size: var(--body-large);
      color: var(--text-secondary);
    }
    .root-line--turn {
      font-family: var(--font-display);
      font-weight: 700;
      text-transform: uppercase;
      line-height: 0.98;
      letter-spacing: 0.005em;
      font-size: clamp(2.1rem, 4.8vw, 3.9rem);
      color: var(--accent-deep);
      margin-top: 0.7rem;
      max-width: 22ch;
    }
    .root-fails {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(1.25rem, 3vw, 2.5rem);
      margin-top: clamp(2.5rem, 5vh, 3.5rem);
    }
    .root-fail {
      border-top: 2px solid var(--text-primary);
      padding-top: 0.85rem;
    }
    .root-fail-n {
      display: block;
      font-size: var(--label-size);
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent-deep);
      margin-bottom: 0.5rem;
    }
    .root-fail p {
      margin: 0;
      font-size: var(--body-default);
      line-height: 1.5;
      font-weight: 500;
      color: var(--text-primary);
    }
    .root-quote {
      margin: clamp(3rem, 6.5vh, 4.5rem) 0 0;
    }
    .root-quote blockquote { margin: 0; }
    .root-quote blockquote p {
      margin: 0;
      font-family: var(--font-display);
      font-weight: 600;
      font-size: clamp(1.7rem, 3.6vw, 2.9rem);
      line-height: 1.12;
      color: var(--text-primary);
      max-width: 24ch;
    }
    .root-quote figcaption {
      margin-top: 1.1rem;
      font-size: var(--label-size);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-tertiary);
    }
    @media (max-width: 720px) {
      .root-fails { grid-template-columns: 1fr; gap: 1.1rem; }
    }

    /* ════════════════ 02 · O QUE DESCOBRIMOS ══════════════════ */
    .disc-layout {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: clamp(2.5rem, 6vw, 5rem);
      align-items: start;
      margin-bottom: var(--space-section);
    }

    .methods-line {
      margin-top: var(--space-content);
      font-family: var(--font-mono);
      font-size: 0.7rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-tertiary);
      line-height: 2;
    }

    /* ── How we investigated ── */
    .method-block {
      margin-bottom: var(--space-section);
      border-top: 1px solid var(--rule);
    }
    .method-kicker {
      font-family: var(--font-mono);
      font-size: 0.62rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-tertiary);
      padding: 0.55rem 0;
      display: block;
      border-bottom: 1px solid var(--rule);
    }
    .method-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }
    .method-cell {
      padding: 0.8rem 1.5rem 0.8rem 0;
      border-bottom: 1px solid var(--rule);
    }
    .method-cell--2 { grid-column: span 2; }
    .method-cell--3 { grid-column: 1 / -1; border-bottom: none; padding-right: 0; }
    .method-label {
      font-family: var(--font-mono);
      font-size: 0.58rem;
      letter-spacing: 0.11em;
      text-transform: uppercase;
      color: var(--text-tertiary);
      display: block;
      margin-bottom: 0.3rem;
    }
    .method-value {
      font-size: 0.875rem;
      color: var(--text-secondary);
      line-height: 1.5;
      margin: 0;
    }
    .method-closing {
      margin-top: 1rem;
      font-size: 0.875rem;
      color: var(--text-secondary);
      font-style: italic;
      max-width: 60ch;
      line-height: 1.55;
    }

    .areas { display: grid; }
    .area {
      display: grid;
      grid-template-columns: 9.5rem minmax(0, 1fr);
      gap: 1.25rem;
      padding-block: 1rem;
      border-top: 1px solid var(--rule);
      align-items: baseline;
    }
    .area:last-child { border-bottom: 1px solid var(--rule); }
    .area-name {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      color: var(--text-primary);
    }
    .area p { font-size: 0.92rem; }

    .quotes {
      margin-block: var(--space-section);
      padding-block: clamp(1.5rem, 4vw, 2.5rem);
      border-top: 2px solid var(--text-primary);
      display: grid;
      grid-template-columns: minmax(180px, 0.55fr) minmax(0, 1.45fr);
      gap: var(--space-content);
      align-items: start;
    }
    .quote-line {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3.8vw, 3rem);
      font-weight: 600;
      line-height: 1.12;
      color: var(--text-primary);
    }
    .quote-line + .quote-line { margin-top: 0.4rem; }
    .quote-line span { color: var(--accent-deep); }

    /* ════════════════ 03 · A MUDANÇA DE PERSPECTIVA ═══════════ */
    .turn {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      align-items: start;
    }
    .turn-a {
      grid-column: 1 / 8;
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 3vw, 2.4rem);
      font-weight: 600;
      line-height: 1.1;
      color: var(--text-inverse-soft);
      max-width: 26ch;
      margin: 0;
    }
    .turn-glyph {
      grid-column: 9 / 13;
      justify-self: end;
      align-self: start;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(4.5rem, 13vw, 11rem);
      line-height: 0.75;
      color: var(--accent);
      transform: translateY(-0.06em);
    }
    .turn-b {
      grid-column: 3 / 13;
      margin: clamp(2.25rem, 6vh, 4rem) 0 0;
      font-family: var(--font-display);
      font-size: clamp(2.4rem, 5.6vw, 4.6rem);
      font-weight: 800;
      line-height: 0.98;
      color: var(--text-inverse);
      text-wrap: balance;
      max-width: 24ch;
    }
    .turn-b em { font-style: normal; color: var(--accent); }
    .turn-c {
      grid-column: 7 / 13;
      max-width: 44ch;
      margin: var(--space-content) 0 0;
    }
    @media (max-width: 1080px) {
      .turn-b { grid-column: 2 / 13; }
      .turn-c { grid-column: 5 / 13; }
    }
    @media (max-width: 720px) {
      .turn { display: block; }
      .turn-glyph { display: none; }
      .turn-b { margin-top: 1.5rem; }
    }

    .before-after {
      margin-top: var(--space-section);
      border-top: 2px solid var(--text-inverse);
    }
    .before-after-head {
      display: grid;
      grid-template-columns: 9rem 1fr 1fr;
      gap: 1.25rem;
      padding: 0.55rem 0;
      border-bottom: 1px solid var(--rule-dark);
    }
    .ba-col-label {
      font-family: var(--font-mono);
      font-size: 0.6rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .ba-col-label.ba-moment-label { color: transparent; }
    .ba-col-label.ba-before-label { color: var(--text-inverse-dim); }
    .ba-col-label.ba-after-label  { color: var(--accent-on-ink); }
    .ba-row {
      display: grid;
      grid-template-columns: 9rem 1fr 1fr;
      gap: 1.25rem;
      align-items: start;
      padding-block: 0.9rem;
      border-bottom: 1px solid var(--rule-dark);
    }
    .ba-moment {
      font-family: var(--font-mono);
      font-size: 0.62rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--text-inverse-dim);
      padding-top: 0.15rem;
      line-height: 1.45;
    }
    .ba-before {
      font-size: clamp(0.85rem, 1.4vw, 0.95rem);
      color: var(--text-inverse-dim);
      line-height: 1.45;
    }
    .ba-after {
      font-size: clamp(0.85rem, 1.4vw, 0.95rem);
      color: var(--text-inverse);
      font-weight: 500;
      line-height: 1.45;
    }
    .ba-note {
      margin-top: 1.25rem;
      font-family: var(--font-mono);
      font-size: 0.62rem;
      letter-spacing: 0.04em;
      color: var(--text-inverse-dim);
      line-height: 1.65;
      max-width: 64ch;
    }

    .principles {
      margin-top: var(--space-section);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(1.25rem, 3vw, 2.5rem);
    }
    .principle { border-top: 1px solid var(--rule-dark); padding-top: 1rem; }
    .principle-n {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      color: var(--accent-on-ink);
    }
    .principle h3 {
      margin-top: 0.5rem;
      font-family: var(--font-display);
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--text-inverse);
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }
    .principle p { margin-top: 0.35rem; font-size: 0.85rem; }

    /* ════════════════ 04 · A NOVA JORNADA ═════════════════════ */
    .map { margin-block: var(--space-section); }
    .map-track {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 0;
      border-top: 2px solid var(--text-primary);
    }
    .map-step {
      padding: 1.1rem 0.9rem 0.5rem 0;
      border-right: 1px solid var(--rule);
      position: relative;
    }
    .map-step:last-child { border-right: none; }
    .map-step + .map-step { padding-left: 0.9rem; }
    .map-step::before {
      content: "";
      position: absolute;
      top: -2px; left: 0;
      width: 100%; height: 2px;
      background: transparent;
    }
    .map-step--hi::before { background: var(--accent); }
    .map-step-n {
      display: block;
      font-family: var(--font-mono);
      font-size: 0.68rem;
      color: var(--text-tertiary);
      margin-bottom: 0.6rem;
    }
    .map-step--hi .map-step-n { color: var(--accent-deep); font-weight: 500; }
    .map-step-name {
      display: block;
      font-family: var(--font-display);
      font-size: clamp(1rem, 1.5vw, 1.3rem);
      font-weight: 700;
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      color: var(--text-primary);
    }
    .map-step-desc {
      display: block;
      margin-top: 0.4rem;
      font-size: 0.72rem;
      line-height: 1.4;
      color: var(--text-tertiary);
    }
    .map-step--hi .map-step-desc { color: var(--accent-deep); }

    .map-phases {
      display: grid;
      grid-template-columns: 2fr 3fr 4fr;
      margin-bottom: 0.5rem;
    }
    .map-phase {
      font-family: var(--font-mono);
      font-size: 0.62rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--text-tertiary);
      padding-bottom: 0.4rem;
    }

    .map-notes {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 2.5rem;
      margin-top: 1.5rem;
    }
    .map-note { font-size: 0.85rem; color: var(--text-secondary); max-width: 30ch; }
    .map-note b { color: var(--text-primary); }

    /* ════════════════ Macro-map (cap 04) ════════════════════ */
    .arch-intro { max-width: 660px; margin-top: var(--space-section); }
    .arch-intro h3 {
      font-family: var(--font-display);
      font-size: clamp(1.15rem, 2vw, 1.6rem);
      font-weight: 800;
      text-transform: uppercase;
      color: var(--text-primary);
      letter-spacing: 0.01em;
      line-height: 1.05;
      margin-bottom: 1.25rem;
    }
    .arch-intro p { color: var(--text-secondary); margin-bottom: 0.8rem; line-height: 1.6; }
    .arch-intro p:last-child { color: var(--text-primary); font-style: italic; margin-bottom: 0; }


    /* ── Two-layers block (04 · A nova jornada) ── */
    .two-layers {
      border-top: 1px solid var(--rule);
      padding-top: var(--space-section);
      margin-top: var(--space-section);
    }
    .tl-title {
      font-family: var(--font-display);
      font-size: clamp(0.95rem, 2vw, 1.2rem);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: var(--text-primary);
      margin-bottom: var(--space-section);
    }
    .tl-label {
      font-family: var(--font-mono);
      font-size: 0.68rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-tertiary);
      display: block;
      margin-bottom: 0.6rem;
    }
    .tl-user-row,
    .tl-product-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border: 1px solid var(--rule);
    }
    .tl-macro-col {
      padding: 0.85rem 1rem;
      border-right: 1px solid var(--rule);
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(0.78rem, 1.1vw, 0.9rem);
      text-transform: uppercase;
      letter-spacing: 0.02em;
      line-height: 1.25;
    }
    .tl-macro-col:last-child { border-right: none; }
    .tl-product-col {
      padding: 0.75rem 1rem;
      border-right: 1px solid var(--rule);
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }
    .tl-product-col:last-child { border-right: none; }
    .tl-chip {
      font-family: var(--font-mono);
      font-size: 0.62rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--text-secondary);
      border: 1px solid var(--rule);
      padding: 0.25rem 0.5rem;
      display: inline-block;
      width: fit-content;
      line-height: 1.4;
    }
    .tl-benefit {
      margin-top: 0.7rem;
      margin-bottom: 0.7rem;
      padding: 0.55rem 1rem;
      border-left: 2px solid var(--accent);
      background: color-mix(in srgb, var(--accent) 5%, var(--surface-primary));
      display: flex;
      gap: 1rem;
      align-items: baseline;
    }
    @media (min-width: 641px) { .tl-benefit { margin-left: 25%; } }
    .tl-benefit-kicker {
      font-family: var(--font-mono);
      font-size: 0.62rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent-deep);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .tl-benefit-value {
      font-size: 0.86rem;
      font-weight: 500;
      color: var(--text-primary);
    }
    .tl-note {
      border-top: 1px solid var(--rule);
      padding-top: 1.25rem;
      margin-top: var(--space-section);
      font-size: 0.88rem;
      line-height: 1.65;
      color: var(--text-secondary);
      max-width: 68ch;
    }
    @media (max-width: 640px) {
      .tl-user-row,
      .tl-product-row { grid-template-columns: 1fr 1fr; }
      .tl-macro-col:nth-child(2n),
      .tl-product-col:nth-child(2n) { border-right: none; }
      .tl-macro-col:nth-child(n+3),
      .tl-product-col:nth-child(n+3) { border-top: 1px solid var(--rule); }
      .tl-benefit { flex-direction: column; gap: 0.25rem; }
    }

    /* ════════════════ 05 · AS DECISÕES ════════════════════════ */
    .momento { padding-block: var(--space-chapter); }
    .momento--paper2 { background: var(--surface-secondary); }
    .momento--ink { background: var(--surface-ink); color: var(--text-inverse); }
    .momento--ink p { color: var(--text-inverse-soft); }

    .momento-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
    .momento-count {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      letter-spacing: 0.14em;
      color: var(--accent-deep);
      display: block;
      margin-bottom: 1rem;
    }
    .momento--ink .momento-count { color: var(--accent-on-ink); }
    .momento-count span { color: var(--text-tertiary); }
    .momento--ink .momento-count span { color: var(--text-inverse-dim); }

    .momento-title {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4.6vw, 3.8rem);
      font-weight: 800;
      line-height: 0.96;
      max-width: 17ch;
      text-wrap: balance;
    }
    .momento--ink .momento-title { color: var(--text-inverse); }

    .m-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: clamp(2.5rem, 6vw, 5rem);
      align-items: start;
    }

    .dblocks { display: grid; }
    .dblock {
      padding-block: 1.1rem;
      border-top: 1px solid var(--rule);
      display: grid;
      grid-template-columns: 8.5rem minmax(0, 1fr);
      gap: 1rem;
      align-items: baseline;
    }
    .momento--ink .dblock { border-top-color: var(--rule-dark); }
    .dblock-label {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-tertiary);
    }
    .momento--ink .dblock-label { color: var(--text-inverse-dim); }
    .dblock p { font-size: 0.95rem; color: var(--text-secondary); }
    .momento--ink .dblock p { color: var(--text-inverse-soft); }
    .dblock--key .dblock-label { color: var(--accent-deep); }
    .momento--ink .dblock--key .dblock-label { color: var(--accent-on-ink); }
    .dblock--key p { color: var(--text-primary); font-weight: 500; }
    .momento--ink .dblock--key p { color: var(--text-inverse); }

    /* D02: afirmação tipográfica */
    .d2-claim {
      font-family: var(--font-display);
      font-size: clamp(1.7rem, 3.6vw, 3rem);
      font-weight: 700;
      line-height: 1.05;
      color: var(--text-inverse);
      max-width: 18ch;
    }
    .d2-claim em { font-style: normal; color: var(--accent); }

    /* D04: composição de duas telas */
    .duo {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(1rem, 2.5vw, 2rem);
      align-items: start;
    }
    .duo .fig:nth-child(2) { margin-top: clamp(2rem, 5vw, 3.5rem); }

    /* ════════════════ 06 · DA ESTRATÉGIA À ENTREGA ════════════ */
    .phases { border-top: 1px solid var(--rule-dark); max-width: 900px; }
    .phase {
      display: grid;
      grid-template-columns: 11rem minmax(0, 1fr);
      gap: 1.5rem;
      padding-block: 1.4rem;
      border-bottom: 1px solid var(--rule-dark);
    }
    .phase-label {
      font-family: var(--font-mono);
      font-size: 0.68rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent-on-ink);
      padding-top: 0.3rem;
    }
    .phase h3 {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--text-inverse);
      text-transform: uppercase;
      letter-spacing: 0.02em;
      margin-bottom: 0.3rem;
    }
    .phase p { font-size: 0.92rem; max-width: 56ch; }

    .tradeoff {
      margin-top: var(--space-section);
      max-width: 820px;
    }
    .tradeoff .kicker { margin-bottom: 1rem; }
    .tradeoff-text {
      font-family: var(--font-display);
      font-size: clamp(1.7rem, 3.8vw, 3.1rem);
      font-weight: 700;
      line-height: 1.05;
      color: var(--text-inverse);
    }
    .tradeoff-text em { font-style: normal; color: var(--accent); }

    /* ── Cap 06 · grade fases + figura lateral ── */
    .entrega-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.7fr);
      gap: clamp(2rem, 5vw, 4rem);
      align-items: start;
      margin-top: var(--space-section);
    }
    .entrega-layout .phases { max-width: none; margin-top: 0; }
    .entrega-fig { margin: 0; }
    .entrega-fig .lightbox-trigger {
      all: unset;
      display: block;
      cursor: zoom-in;
      position: relative;
      border-radius: 3px;
      overflow: hidden;
    }
    .entrega-fig .lightbox-trigger img {
      width: 100%;
      display: block;
      border-radius: 3px;
      opacity: 0.82;
      transition: opacity 0.2s;
    }
    .entrega-fig .lightbox-trigger:hover img,
    .entrega-fig .lightbox-trigger:focus-visible img { opacity: 1; }
    .lightbox-hint {
      position: absolute;
      bottom: 0.5rem;
      right: 0.6rem;
      font-family: var(--font-mono);
      font-size: 0.6rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #fff;
      background: rgba(0,0,0,0.48);
      padding: 0.18rem 0.45rem;
      border-radius: 2px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.2s;
    }
    .entrega-fig .lightbox-trigger:hover .lightbox-hint,
    .entrega-fig .lightbox-trigger:focus-visible .lightbox-hint { opacity: 1; }

    /* ── Lightbox overlay ── */
    .lightbox-overlay {
      position: fixed; inset: 0; z-index: 9000;
      background: rgba(20,16,12,0.92);
      display: flex; align-items: center; justify-content: center;
      opacity: 0;
      transition: opacity 0.25s;
      cursor: zoom-out;
      padding: clamp(1rem, 4vw, 3rem);
    }
    .lightbox-overlay.is-open { opacity: 1; }
    .lightbox-inner {
      position: relative;
      max-width: min(92vw, 1100px);
      max-height: 90vh;
      transform: scale(0.95);
      transition: transform 0.25s;
    }
    .lightbox-overlay.is-open .lightbox-inner { transform: scale(1); }
    .lightbox-inner img {
      display: block;
      width: 100%;
      max-height: 90vh;
      object-fit: contain;
      border-radius: 4px;
      cursor: default;
    }
    .lightbox-close {
      all: unset;
      position: absolute;
      top: -2rem; right: -0.5rem;
      font-size: 1.3rem;
      color: rgba(255,255,255,0.7);
      cursor: pointer;
      line-height: 1;
      transition: color 0.15s;
    }
    .lightbox-close:hover { color: #fff; }
    @media (max-width: 780px) {
      .entrega-layout { grid-template-columns: 1fr; }
    }

    /* overrides ch--paper2 para cap 06 (elementos originalmente em ch--ink) */
    .ch--paper2 .phase-label { color: var(--accent-deep); }
    .ch--paper2 .phase h3    { color: var(--text-primary); }
    .ch--paper2 .phases,
    .ch--paper2 .phase       { border-color: var(--rule); }
    .ch--paper2 .tradeoff-text { color: var(--text-primary); }
    .ch--paper2 .tradeoff-text em { color: var(--accent-deep); }

    /* ════════════════ 07 · MENSURÁVEL ═════════════════════════ */
    .track {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      border-top: 2px solid var(--text-primary);
      margin-block: var(--space-section) var(--space-content);
    }
    .track-item {
      padding: 1rem 1rem 0 0;
      border-right: 1px solid var(--rule);
    }
    .track-item:last-child { border-right: none; }
    .track-item + .track-item { padding-left: 1rem; }
    .track-n {
      display: block;
      font-family: var(--font-mono);
      font-size: 0.68rem;
      color: var(--accent-deep);
      margin-bottom: 0.5rem;
    }
    .track-name {
      display: block;
      font-family: var(--font-display);
      font-size: 1.15rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      color: var(--text-primary);
    }

    .meta-line {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      letter-spacing: 0.08em;
      color: var(--text-tertiary);
      text-transform: uppercase;
    }

    .med-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
      gap: clamp(2.5rem, 6vw, 5rem);
      align-items: start;
      margin-top: var(--space-section);
    }

    /* ════════════════ 08 · RESULTADOS ═════════════════════════ */

    /* ── Intro de dois colunas: título esquerda, nota direita ── */
    .results-intro {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.6fr);
      gap: clamp(2.5rem, 6vw, 5rem);
      align-items: start;
      margin-bottom: var(--space-section);
    }
    .results-intro .tracking-note { margin-bottom: 0; }
    @media (max-width: 680px) {
      .results-intro { grid-template-columns: 1fr; }
    }

    .monument-label { margin-bottom: 1.25rem; }
    .monument {
      font-family: var(--font-display);
      font-size: var(--monument-size);
      font-weight: 800;
      line-height: 0.85;
      letter-spacing: -0.015em;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums;
    }
    .monument .arr { font-weight: 600; color: var(--text-tertiary); font-size: 0.55em; vertical-align: 0.18em; padding-inline: 0.08em; }
    .monument .to { color: var(--accent); }
    .monument-sub {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 2rem;
      align-items: baseline;
      margin-top: 1.25rem;
    }
    .monument-sub .big { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--text-primary); }

    .seconds {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin-top: var(--space-section);
      border-top: 2px solid var(--text-primary);
    }
    .second { padding: 1.5rem 2rem 0 0; }
    .second + .second { border-left: 1px solid var(--rule); padding-left: 2rem; }
    .second-num {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 4.6vw, 3.8rem);
      font-weight: 800;
      line-height: 0.95;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums;
    }
    .second-num .arr { color: var(--text-tertiary); font-weight: 600; font-size: 0.6em; }
    .second-num .to { color: var(--accent-deep); }
    .second-desc { margin-top: 0.7rem; font-size: 0.85rem; max-width: 28ch; }
    .second-desc b { color: var(--text-primary); }

    .funnel-block {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
      gap: clamp(2.5rem, 6vw, 5rem);
      align-items: start;
      margin-top: var(--space-section);
    }
    .funnel { display: grid; gap: 0; border-top: 2px solid var(--text-primary); }
    .f-row {
      display: grid;
      grid-template-columns: 8.5rem minmax(0, 1fr) 4.5rem;
      gap: 1.25rem;
      align-items: center;
      padding-block: 0.85rem;
      border-bottom: 1px solid var(--rule);
    }
    .f-name {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }
    .f-bar { height: 8px; background: var(--text-primary); }
    .f-row:first-child .f-bar { background: var(--accent); }
    .f-val {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 800;
      text-align: right;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums;
    }

    .f-callout {
      margin-top: 1.5rem;
      max-width: 46ch;
    }
    .f-callout b {
      display: block;
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--accent-deep);
      line-height: 1.1;
      margin-bottom: 0.35rem;
    }
    .f-callout p { font-size: 0.9rem; }

    .f-step {
      display: grid;
      grid-template-columns: 8.5rem minmax(0, 1fr) 4.5rem;
      gap: 1.25rem;
      padding: 0.22rem 0;
      align-items: center;
    }
    .f-step-arrow {
      font-family: var(--font-mono);
      font-size: 0.6rem;
      color: var(--text-tertiary);
      text-align: right;
    }
    .f-step-rate {
      grid-column: 2 / -1;
      font-family: var(--font-mono);
      font-size: 0.62rem;
      letter-spacing: 0.04em;
      color: var(--text-tertiary);
    }
    .f-warn {
      grid-column: 1 / -1;
      font-family: var(--font-mono);
      font-size: 0.58rem;
      letter-spacing: 0.05em;
      color: var(--text-tertiary);
      padding-bottom: 0.5rem;
      line-height: 1.5;
    }
    .second-ctx {
      display: block;
      font-family: var(--font-mono);
      font-size: 0.68rem;
      letter-spacing: 0.05em;
      color: var(--text-tertiary);
      margin-top: 0.35rem;
    }

    /* ── Gargalo block (cap 08) ── */
    .gargalo {
      margin-top: var(--space-section);
      border-top: 2px solid var(--text-primary);
      padding-top: clamp(1.5rem, 4vw, 2.5rem);
    }
    .gargalo-head { margin-bottom: var(--space-content); }
    .gargalo-title {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 2.6vw, 2rem);
      font-weight: 700;
      line-height: 1.12;
      color: var(--text-primary);
      max-width: 26ch;
      margin-top: 0.5rem;
    }
    .gargalo-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2rem, 5vw, 4rem);
      border-top: 1px solid var(--rule);
      margin-bottom: var(--space-content);
    }
    .gargalo-panel { padding-top: 1rem; }
    .gargalo-panel-label {
      font-family: var(--font-mono);
      font-size: 0.62rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-tertiary);
      display: block;
      margin-bottom: 0.75rem;
    }
    .gargalo-panel-body {
      font-size: 0.88rem;
      color: var(--text-secondary);
      line-height: 1.55;
      margin-bottom: 0.75rem;
    }
    .gargalo-panel-note {
      display: block;
      font-family: var(--font-mono);
      font-size: 0.6rem;
      letter-spacing: 0.05em;
      color: var(--text-tertiary);
      margin-top: 0.65rem;
      line-height: 1.5;
    }
    .gmf { border-top: 2px solid var(--text-primary); margin-top: 0.75rem; }
    .gmf-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) 3.5rem;
      gap: 0.75rem;
      align-items: center;
      padding-block: 0.65rem;
      border-bottom: 1px solid var(--rule);
    }
    .gmf-name {
      font-family: var(--font-mono);
      font-size: 0.6rem;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--text-secondary);
      white-space: nowrap;
    }
    .gmf-bar { height: 5px; background: var(--text-primary); }
    .gmf-row:first-child .gmf-bar { background: var(--accent); }
    .gmf-val {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--text-primary);
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    .gmf-step { display: flex; gap: 0.5rem; padding: 0.18rem 0; align-items: baseline; }
    .gmf-step-arrow { font-family: var(--font-mono); font-size: 0.55rem; color: var(--text-tertiary); }
    .gmf-step-rate { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.04em; color: var(--text-tertiary); }
    .gargalo-quote {
      border-left: 3px solid var(--accent);
      padding: 0.85rem 1.25rem;
      margin-bottom: var(--space-content);
    }
    .gargalo-quote p {
      font-size: 0.97rem;
      color: var(--text-primary);
      font-weight: 500;
      line-height: 1.55;
      margin: 0;
    }
    .gargalo-reading {
      font-size: 0.92rem;
      color: var(--text-secondary);
      line-height: 1.6;
      max-width: 64ch;
      margin-bottom: var(--space-content);
    }
    .inst-section { margin-bottom: var(--space-content); }
    .inst-label {
      font-family: var(--font-mono);
      font-size: 0.62rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-tertiary);
      display: block;
      margin-bottom: 0.6rem;
    }
    .inst-track {
      display: flex;
      flex-wrap: wrap;
      gap: 0.2rem 0;
      align-items: center;
      border-top: 1px solid var(--rule);
      padding-top: 0.75rem;
    }
    .inst-item {
      font-family: var(--font-mono);
      font-size: 0.63rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-secondary);
      padding: 0.25rem 0;
    }
    .inst-arrow {
      font-family: var(--font-mono);
      font-size: 0.6rem;
      color: var(--text-tertiary);
      margin: 0 0.5rem;
      flex-shrink: 0;
    }
    .gargalo-close {
      border-top: 1px solid var(--rule);
      padding-top: 1.25rem;
      font-size: 0.92rem;
      color: var(--text-secondary);
      line-height: 1.6;
      max-width: 64ch;
    }

    /* ── O que passamos a conseguir medir ────────────── */
    .measurable-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--rule);
      border: 1px solid var(--rule);
    }
    .measurable-item {
      background: var(--surface-primary);
      padding: 0.85rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }
    .measurable-item b {
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.3;
    }
    .measurable-item span {
      font-size: 0.76rem;
      color: var(--text-tertiary);
      line-height: 1.4;
    }
    @media (max-width: 720px) {
      .measurable-list { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 460px) {
      .measurable-list { grid-template-columns: 1fr; }
    }

    /* ── Evidence items (within results-legend) ───────── */
    .evidence-items {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }
    .evidence-item {
      font-size: 0.83rem;
      color: var(--text-secondary);
      line-height: 1.45;
      padding-left: 0.8rem;
      position: relative;
    }
    .evidence-item::before {
      content: "–";
      position: absolute;
      left: 0;
      color: var(--text-tertiary);
    }

    /* ─── Triagem rationale block ─────────────────── */
    .triagem-rationale { margin-top: var(--space-section); }
    .triagem-intro {
      max-width: 58ch;
      font-size: 0.93rem;
      line-height: 1.55;
      color: var(--text-secondary);
      margin-bottom: var(--space-content);
    }
    .triagem-axes {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
      gap: 1px;
      background: var(--rule);
      border: 1px solid var(--rule);
      margin-bottom: var(--space-content);
    }
    .triagem-axis {
      background: var(--surface-primary);
      padding: 1rem 1.1rem;
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
    }
    .triagem-axis-meta { display: flex; flex-direction: column; gap: 0.2rem; }
    .triagem-axis-n {
      font-family: var(--font-mono);
      font-size: 0.57rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
    }
    .triagem-axis-name {
      font-size: 0.84rem;
      font-weight: 600;
      color: var(--text-primary);
      line-height: 1.25;
    }
    .triagem-axis-chip {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 0.63rem;
      letter-spacing: 0.02em;
      color: var(--text-secondary);
      border: 1px solid var(--rule);
      padding: 0.2rem 0.5rem;
      border-radius: 2px;
      max-width: fit-content;
      background: color-mix(in srgb, var(--accent) 5%, var(--surface-primary));
    }
    .triagem-axis-row { display: flex; flex-direction: column; gap: 0.15rem; }
    .triagem-axis-row-label {
      font-family: var(--font-mono);
      font-size: 0.57rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-tertiary);
    }
    .triagem-axis-row-text {
      font-size: 0.78rem;
      line-height: 1.45;
      color: var(--text-secondary);
      margin: 0;
    }
    .triagem-result {
      padding: 0.9rem 1.1rem;
      border-left: 3px solid var(--accent);
      background: color-mix(in srgb, var(--accent) 5%, var(--surface-primary));
      margin-bottom: var(--space-content);
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
    }
    .triagem-result-main {
      font-size: 0.88rem;
      line-height: 1.5;
      color: var(--text-primary);
      margin: 0;
      font-weight: 500;
    }
    .triagem-result-note {
      font-size: 0.82rem;
      line-height: 1.45;
      color: var(--text-secondary);
      margin: 0;
    }
    .triagem-closing {
      max-width: 58ch;
      font-size: 0.88rem;
      line-height: 1.55;
      color: var(--text-secondary);
      font-style: italic;
      border-top: 1px solid var(--rule);
      padding-top: 1.1rem;
      margin: 0;
    }

    /* ─── Próximo ciclo block ─────────────────────────── */
    .cycle-block {
      padding-top: var(--space-section);
      border-top: 1px solid var(--rule);
      margin-top: var(--space-section);
    }
    .cycle-opening {
      max-width: 56ch;
      font-size: clamp(1rem, 2vw, 1.1rem);
      line-height: 1.55;
      color: var(--text-primary);
      margin-bottom: var(--space-content);
    }
    .cycle-meta {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1px;
      background: var(--rule);
      border: 1px solid var(--rule);
      margin-bottom: var(--space-content);
    }
    .cycle-meta-cell {
      background: var(--surface-primary);
      padding: 1rem 1.25rem;
    }
    .cycle-meta-label {
      font-family: var(--font-mono);
      font-size: 0.61rem;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--text-tertiary);
      display: block;
      margin-bottom: 0.4rem;
    }
    .cycle-meta-value {
      font-size: 0.88rem;
      line-height: 1.45;
      color: var(--text-primary);
      margin: 0;
    }
    .cycle-guard-note {
      max-width: 60ch;
      font-size: 0.84rem;
      line-height: 1.5;
      color: var(--text-tertiary);
      font-style: italic;
      margin-bottom: var(--space-content);
    }
    .cycle-hyp-title {
      font-family: var(--font-mono);
      font-size: 0.63rem;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--text-tertiary);
      display: block;
      margin-bottom: 0.85rem;
    }
    .cycle-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--rule);
      border: 1px solid var(--rule);
      margin-bottom: var(--space-content);
    }
    .cycle-card {
      background: var(--surface-primary);
      padding: 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .cycle-card-head { display: flex; flex-direction: column; gap: 0.2rem; }
    .cycle-card-n {
      font-family: var(--font-mono);
      font-size: 0.6rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
    }
    .cycle-card-title {
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--text-primary);
      line-height: 1.3;
    }
    .cycle-row { display: flex; flex-direction: column; gap: 0.2rem; }
    .cycle-row-label {
      font-family: var(--font-mono);
      font-size: 0.59rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-tertiary);
    }
    .cycle-row-text {
      font-size: 0.8rem;
      line-height: 1.45;
      color: var(--text-secondary);
      margin: 0;
    }
    .cycle-closing {
      max-width: 54ch;
      font-size: clamp(0.95rem, 1.8vw, 1.05rem);
      line-height: 1.55;
      color: var(--text-primary);
      margin-top: var(--space-content);
      font-style: italic;
    }
    @media (max-width: 1080px) {
      .cycle-grid { grid-template-columns: 1fr; }
    }

    /* ════════════════ 09 · GOVERNANÇA E LEGADO ════════════════ */
    .gov-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(2.5rem, 6vw, 5.5rem);
      align-items: start;
      margin-bottom: var(--space-section);
    }

    .steps-list { border-top: 1px solid var(--rule); }
    .steps-item {
      display: grid;
      grid-template-columns: 2.6rem minmax(0, 1fr);
      gap: 1rem;
      padding-block: 1rem;
      border-bottom: 1px solid var(--rule);
      align-items: baseline;
    }
    .steps-n { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-deep); }
    .steps-item strong {
      display: block;
      font-size: 0.98rem;
      color: var(--text-primary);
      margin-bottom: 0.2rem;
    }
    .steps-item p { font-size: 0.88rem; }

    .pull {
      margin-block: var(--space-section);
      padding-block: clamp(1.5rem, 4vw, 2.5rem);
      border-top: 2px solid var(--text-primary);
      border-bottom: 1px solid var(--rule);
    }
    .pull p {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3.4vw, 2.8rem);
      font-weight: 700;
      line-height: 1.08;
      color: var(--text-primary);
      max-width: 26ch;
    }
    .pull p em { font-style: normal; color: var(--accent-deep); }
    .pull .kicker { margin-top: 1rem; }

    .aside-note {
      margin-top: var(--space-section);
      padding: clamp(1.5rem, 4vw, 2.5rem);
      border: 1px solid var(--text-primary);
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(200px, 0.7fr);
      gap: clamp(1.5rem, 4vw, 3rem);
      align-items: start;
    }
    .aside-note h3 {
      font-family: var(--font-display);
      font-size: 1.6rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      margin: 0.5rem 0 1rem;
    }
    .aside-note p { font-size: 0.92rem; }
    .aside-note p + p { margin-top: 0.8rem; }
    .aside-list { margin-top: 1.25rem; border-top: 1px solid var(--rule); }
    .aside-list li {
      padding-block: 0.55rem;
      border-bottom: 1px solid var(--rule);
      font-size: 0.88rem;
      color: var(--text-secondary);
    }
    .aside-list b { color: var(--text-primary); font-weight: 600; }

    /* ════════════════ CONTEÚDO COMPLEMENTAR ═══════════════════ */
    .complement {
      border-top: 1px solid var(--rule);
      background: var(--surface-secondary);
      padding: clamp(2rem, 4vw, 3.5rem) 0;
    }
    .complement-head { margin-bottom: 1.25rem; }
    .complement-kicker {
      display: block;
      font-family: var(--font-mono);
      font-size: 0.62rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-tertiary);
      margin-bottom: 0.25rem;
    }
    .complement-title {
      font-family: var(--font-display);
      font-size: clamp(0.95rem, 1.8vw, 1.1rem);
      font-weight: 700;
      color: var(--text-secondary);
    }
    details.complement-details {
      border: 1px solid var(--rule);
      border-radius: 3px;
      max-width: 820px;
    }
    summary.complement-summary {
      cursor: pointer;
      padding: 1.1rem 1.4rem;
      font-size: 0.88rem;
      line-height: 1.6;
      color: var(--text-secondary);
      display: grid;
      grid-template-columns: 1fr 1.4rem;
      gap: 1rem;
      align-items: start;
      list-style: none;
    }
    summary.complement-summary::-webkit-details-marker { display: none; }
    summary.complement-summary::after {
      content: '+';
      font-family: var(--font-mono);
      font-size: 0.85rem;
      color: var(--text-tertiary);
      text-align: right;
      padding-top: 0.15rem;
    }
    details[open] > summary.complement-summary::after { content: '−'; }
    .complement-body {
      padding: 0 1.4rem 1.4rem;
      border-top: 1px solid var(--rule);
    }
    .complement-body .aside-list { margin-top: 1rem; border-top: none; }

    /* ════════════════ 10 · ENCERRAMENTO ═══════════════════════ */
    .closing-title {
      font-family: var(--font-display);
      font-size: clamp(2.6rem, 6.5vw, 5.6rem);
      font-weight: 800;
      line-height: 0.94;
      color: var(--text-inverse);
      max-width: 16ch;
      text-wrap: balance;
    }
    .closing-title em { font-style: normal; color: var(--accent); }

    .closing-body {
      max-width: 46ch;
      margin-top: var(--space-content);
      font-size: var(--body-large);
    }

    .cycle {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0.75rem 1rem;
      margin-block: var(--space-section);
      padding-block: 1.5rem;
      border-top: 1px solid var(--rule-dark);
      border-bottom: 1px solid var(--rule-dark);
    }
    .cycle-step {
      font-family: var(--font-display);
      font-size: clamp(1.2rem, 2.6vw, 2rem);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: var(--text-inverse);
    }
    .cycle-sep { font-family: var(--font-mono); color: var(--accent-on-ink); font-size: 0.9em; }
    .cycle-loop { color: var(--text-inverse-dim); }

    .closing-contact {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0.5rem 1.5rem;
      margin-bottom: var(--space-content);
      font-family: var(--font-mono);
      font-size: 0.73rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-inverse-dim);
    }
    .closing-contact a {
      text-transform: none;
      letter-spacing: 0.04em;
      color: var(--text-inverse-soft);
      text-decoration: none;
      padding-bottom: 0.3rem;
      border-bottom: 1px solid var(--rule-dark);
      transition: color var(--t-fast), border-color var(--t-fast);
    }
    .closing-contact a:hover { color: var(--accent-on-ink); border-color: var(--accent-on-ink); }

    .end-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem 2.5rem;
    }
    .end-nav a {
      font-family: var(--font-mono);
      font-size: 0.73rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-inverse-soft);
      text-decoration: none;
      padding-bottom: 0.3rem;
      border-bottom: 1px solid var(--rule-dark);
      transition: color var(--t-fast), border-color var(--t-fast);
    }
    .end-nav a:hover { color: var(--accent-on-ink); border-color: var(--accent-on-ink); }

    .site-footer {
      background: var(--surface-ink);
      border-top: 1px solid var(--rule-dark);
      padding-block: 2.8rem 1.4rem;
    }
    .footer-author {
      display: flex;
      align-items: flex-start;
      gap: 1.6rem;
      padding-bottom: 2rem;
      margin-bottom: 1.6rem;
      border-bottom: 1px solid var(--rule-dark);
    }
    .footer-author__avatar {
      flex-shrink: 0;
      width: 88px;
      height: 88px;
      border-radius: 50%;
      object-fit: cover;
      object-position: center top;
      border: 2px solid var(--accent);
      filter: grayscale(15%);
    }
    .footer-author__body {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }
    .footer-author__label {
      font-family: var(--font-mono);
      font-size: 0.6rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 0.15rem;
    }
    .footer-author__name {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-inverse);
      line-height: 1.2;
    }
    .footer-author__role {
      font-size: 0.68rem;
      color: var(--text-inverse-dim);
      font-family: var(--font-mono);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 0.5rem;
    }
    .footer-author__bio {
      font-size: 0.82rem;
      color: var(--text-inverse-dim);
      line-height: 1.7;
      max-width: 64ch;
    }
    .footer-row {
      display: flex;
      justify-content: space-between;
      gap: 1rem 2rem;
      flex-wrap: wrap;
      font-family: var(--font-mono);
      font-size: 0.65rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-inverse-dim);
    }
    .portfolio-footer {
      margin-top: 2rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--rule-dark);
      color: #1B9CFC;
      font: 700 12px/20px qqmf, sans-serif;
      text-align: center;
    }
    @media (max-width: 540px) {
      .footer-author { flex-direction: column; align-items: center; text-align: center; }
      .footer-author__bio { max-width: 100%; }
    }

    /* ─── movimento (progressivo, discreto) ────────────────────── */
    @media (prefers-reduced-motion: no-preference) {
      html.js .reveal {
        opacity: 0;
        transform: translateY(16px);
        transition:
          opacity var(--t-med) var(--ease),
          transform var(--t-med) var(--ease);
        transition-delay: var(--rd, 0ms);
      }
      html.js .reveal.is-in {
        opacity: 1;
        transform: none;
      }
    }

    /* ─── responsivo ───────────────────────────────────────────── */
    @media (max-width: 1080px) {
      .cover-main { grid-template-columns: 1fr; align-items: start; }
      .cover-meta {
        border-left: none;
        border-top: 1px solid var(--rule-dark);
        padding-left: 0;
        padding-top: 1.5rem;
        grid-template-columns: repeat(2, 1fr);
      }
      .prob-layout, .disc-layout, .m-grid,
      .gov-layout, .funnel-block, .med-layout { grid-template-columns: 1fr; }
      .method-grid { grid-template-columns: 1fr; }
      .method-cell--2, .method-cell--3 { grid-column: 1; }
      .method-cell { padding-right: 0; }
      .gargalo-split { grid-template-columns: 1fr; }

      .quotes { grid-template-columns: 1fr; }
      .map-track { grid-template-columns: repeat(3, 1fr); }
      .map-step:nth-child(3n) { border-right: none; }
      .map-step:nth-child(3n+1) { padding-left: 0; }
      .map-step { border-bottom: 1px solid var(--rule); padding-bottom: 1rem; }
      .map-phases { display: none; }
      .principles { grid-template-columns: repeat(2, 1fr); }
      .track { grid-template-columns: repeat(3, 1fr); }
      .track-item:nth-child(3n) { border-right: none; }
      .track-item:nth-child(3n+1) { padding-left: 0; }
      .track-item { padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
      .aside-note { grid-template-columns: 1fr; }
    }

    @media (max-width: 720px) {
      :root {
        --space-chapter: clamp(4.5rem, 16vw, 6.5rem);
      }
      .bar { gap: 0.6rem; }
      .bar-brand span { display: none; }
      .bar-pos { justify-content: flex-start; }
      .bar-pos-title { letter-spacing: 0.06em; }

      .stats, .seconds { grid-template-columns: 1fr; }
      .stat, .second { padding-right: 0; }
      .stat + .stat, .second + .second {
        border-left: none;
        border-top: 1px solid var(--rule);
        padding-left: 0;
        margin-top: 1.25rem;
        padding-top: 1.25rem;
      }

      .area { grid-template-columns: 1fr; gap: 0.2rem; }
      .symptom { grid-template-columns: 2.2rem 1fr; gap: 0.8rem; }

      .before-after-head { display: none; }
      .ba-row { grid-template-columns: 1fr; gap: 0.3rem; }
      .ba-before::before {
        content: 'Antes';
        display: block;
        font-family: var(--font-mono);
        font-size: 0.58rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-inverse-dim);
        margin-bottom: 0.15rem;
        opacity: 0.7;
      }
      .ba-after::before {
        content: 'Nova jornada';
        display: block;
        font-family: var(--font-mono);
        font-size: 0.58rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--accent-on-ink);
        margin-bottom: 0.15rem;
      }

      .principles { grid-template-columns: 1fr; gap: 1rem; }

      .map-track { grid-template-columns: 1fr; border-top: none; }
      .map-step {
        border-right: none !important;
        border-top: 1px solid var(--rule);
        border-bottom: none;
        display: grid;
        grid-template-columns: 2.6rem 1fr;
        gap: 0.2rem 1rem;
        padding: 0.9rem 0;
      }
      .map-step::before { height: 100%; width: 2px; top: 0; }
      .map-step-n { grid-row: 1 / span 2; padding-top: 0.2rem; }
      .map-step--hi::before { background: var(--accent); }

      .dblock { grid-template-columns: 1fr; gap: 0.25rem; padding-block: 0.9rem; }

      .duo { grid-template-columns: 1fr; }
      .duo .fig:nth-child(2) { margin-top: 0; }

      .phase { grid-template-columns: 1fr; gap: 0.4rem; }

      .track { grid-template-columns: repeat(2, 1fr); }
      .track-item:nth-child(3n) { border-right: 1px solid var(--rule); }
      .track-item:nth-child(2n) { border-right: none; }
      .track-item:nth-child(2n+1) { padding-left: 0; }

      .f-row { grid-template-columns: 6.4rem minmax(0, 1fr) 3.4rem; gap: 0.7rem; }
      .f-step { grid-template-columns: 6.4rem minmax(0, 1fr) 3.4rem; gap: 0.7rem; }

      .fig-row { grid-template-columns: 1fr; }

      .idx-item { grid-template-columns: 3rem 1fr; }
      .idx-role { display: none; }

      .cover-meta { grid-template-columns: 1fr; }
      .cover-title { font-size: clamp(3rem, 15vw, 4.4rem); }
      .monument { font-size: clamp(3.4rem, 17vw, 5.5rem); }
      .ch-title { font-size: clamp(2.2rem, 10vw, 3rem); }
    }

    @media (max-width: 400px) {
      .cover-title { font-size: clamp(1.8rem, 11vw, 3rem); }
      .bar-pos-title { display: none; }
    }

    /* ─── resiliência tipográfica — capa sem fonte remota ───────── */
    /* impede overflow horizontal quando Barlow Condensed não carrega */
    .cover-main,
    .cover-main > * {
      min-width: 0;
      max-width: 100%;
    }
    .cover-title {
      overflow-wrap: normal;
      word-break: keep-all;
    }

    /* ─── status de efeito nas decisões ─────────────────────────── */
    .effect-status {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      margin-top: 0.5rem;
      font-family: var(--font-mono);
      font-size: 0.68rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .effect-status::before {
      content: "";
      display: inline-block;
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      background: currentColor;
      flex-shrink: 0;
    }
    .effect-status--observed { color: var(--accent-deep); }
    .effect-status--partial  { color: var(--text-secondary); }
    .effect-status--pending  { color: var(--text-tertiary); }
    .momento--ink .effect-status--observed { color: var(--accent-on-ink); }
    .momento--ink .effect-status--partial  { color: var(--text-inverse-soft); }
    .momento--ink .effect-status--pending  { color: var(--text-inverse-dim); }

    /* ── Decision impact block ── */
    .decision-impact {
      border-top: 1px solid var(--rule);
      margin-top: var(--space-section);
    }
    .dimpact-row {
      display: grid;
      grid-template-columns: 13rem 1fr;
      gap: 0.4rem 2rem;
      padding: 0.65rem 0;
      border-bottom: 1px solid var(--rule);
      align-items: baseline;
    }
    .dimpact-row:last-child { border-bottom: none; padding-bottom: 0; }
    .dimpact-label {
      font-family: var(--font-mono);
      font-size: 0.63rem;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--text-tertiary);
    }
    .dimpact-text {
      font-size: 0.87rem;
      line-height: 1.55;
      color: var(--text-secondary);
    }
    .momento--ink .decision-impact { border-top-color: var(--rule-dark); }
    .momento--ink .dimpact-row { border-bottom-color: var(--rule-dark); }
    .momento--ink .dimpact-label { color: var(--text-inverse-dim); }
    .momento--ink .dimpact-text { color: var(--text-inverse-soft); }
    .dimpact-row--obs .dimpact-label { color: var(--text-secondary); font-weight: 600; }
    .dimpact-row--obs .dimpact-text { color: var(--text-primary); font-weight: 500; font-size: 0.92rem; }
    .momento--ink .dimpact-row--obs .dimpact-label { color: var(--text-inverse-soft); font-weight: 600; }
    .momento--ink .dimpact-row--obs .dimpact-text { color: var(--text-inverse); font-weight: 500; }
    @media (max-width: 600px) {
      .dimpact-row { grid-template-columns: 1fr; gap: 0.2rem; }
    }

    /* ─── Callout annotations ─────────────────────────── */
    .callout-markers {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 2;
    }
    .callout-pin {
      position: absolute;
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 50%;
      background: var(--accent);
      color: #fff;
      font-family: var(--font-mono);
      font-size: 0.68rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: translate(-50%, -50%);
      box-shadow: 0 1px 8px rgba(0,0,0,0.4);
      line-height: 1;
    }
    .callout-pin::after {
      content: '';
      position: absolute;
      left: 100%;
      top: 50%;
      width: 0.65rem;
      height: 1px;
      background: var(--accent);
      opacity: 0.7;
    }
    .callout-labels {
      list-style: none;
      padding: 0;
      margin: 0.6rem 0 0;
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
    }
    .callout-label {
      display: flex;
      gap: 0.45rem;
      align-items: flex-start;
      font-size: 0.77rem;
      line-height: 1.4;
      color: var(--text-secondary);
    }
    .callout-label-n {
      flex-shrink: 0;
      width: 1.3rem;
      height: 1.3rem;
      border-radius: 50%;
      background: var(--accent);
      color: #fff;
      font-family: var(--font-mono);
      font-size: 0.62rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .callout-label-text { padding-top: 0.05rem; }
    .ch--ink .callout-label { color: var(--text-inverse-soft); }
    .ch--ink .callout-pin,
    .ch--ink .callout-label-n { background: var(--accent-on-ink); }
    .ch--ink .callout-pin::after { background: var(--accent-on-ink); }

    /* ── Results legend ── */
    .results-legend {
      border: 1px solid var(--rule);
      margin-bottom: var(--space-section);
    }
    .results-legend-title {
      font-family: var(--font-mono);
      font-size: 0.68rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-tertiary);
      display: block;
      padding: 0.75rem 1rem;
      border-bottom: 1px solid var(--rule);
    }
    .results-legend-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--rule);
    }
    .results-legend-col {
      background: var(--surface-primary);
      padding: 0.85rem 1rem;
    }
    .results-legend-col-label {
      font-family: var(--font-mono);
      font-size: 0.62rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      display: block;
      margin-bottom: 0.35rem;
    }
    .results-legend-col:nth-child(1) .results-legend-col-label { color: var(--accent-deep); }
    .results-legend-col:nth-child(2) .results-legend-col-label { color: var(--text-secondary); }
    .results-legend-col:nth-child(3) .results-legend-col-label { color: var(--text-tertiary); }
    .results-legend-col-text {
      font-size: 0.84rem;
      line-height: 1.5;
      color: var(--text-secondary);
    }
    .results-legend-note {
      padding: 0.85rem 1rem;
      border-top: 1px solid var(--rule);
      font-size: 0.84rem;
      line-height: 1.6;
      color: var(--text-secondary);
      font-style: italic;
    }
    .tracking-note {
      border-left: 3px solid var(--accent-deep);
      padding: 0.75rem 1.1rem;
      max-width: 62ch;
      margin-bottom: var(--space-content);
    }
    .tracking-note p {
      font-size: 0.88rem;
      color: var(--text-secondary);
      line-height: 1.55;
      margin: 0;
    }
    @media (max-width: 600px) {
      .results-legend-grid { grid-template-columns: 1fr; }
    }

    /* ─── resumo executivo ───────────────────────────────────────── */
    /* ── Project brief ── */
    .project-card {
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      padding-block: var(--space-section);
    }
    .project-card-title {
      font-family: var(--font-mono);
      font-size: 0.68rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-tertiary);
      display: block;
      margin-bottom: clamp(1rem, 3vw, 1.75rem);
    }
    .project-card-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--rule);
      border: 1px solid var(--rule);
    }
    .project-field {
      background: var(--surface-primary);
      padding: 0.9rem 1rem;
    }
    .project-field--wide { grid-column: span 2; }
    .project-field-label {
      font-family: var(--font-mono);
      font-size: 0.62rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-tertiary);
      display: block;
      margin-bottom: 0.4rem;
    }
    .project-field-value {
      font-size: 0.86rem;
      line-height: 1.55;
      color: var(--text-secondary);
    }
    .project-resp {
      background: var(--surface-primary);
      border: 1px solid var(--rule);
      border-top: none;
      padding: 0.85rem 1rem;
      display: grid;
      grid-template-columns: 11rem 1fr;
      gap: 1.5rem;
      align-items: baseline;
    }
    .project-resp .project-field-label { margin-bottom: 0; }
    @media (max-width: 640px) {
      .project-card-grid { grid-template-columns: 1fr 1fr; }
      .project-field--wide { grid-column: span 2; }
      .project-resp { grid-template-columns: 1fr; gap: 0.35rem; }
    }
    @media (max-width: 380px) {
      .project-card-grid { grid-template-columns: 1fr; }
      .project-field--wide { grid-column: span 1; }
    }

    .exec-summary {
      background: var(--surface-ink);
      border-top: 1px solid var(--rule-dark);
      padding-block: clamp(2.5rem, 6vw, 4rem);
    }
    .exec-summary-inner {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: clamp(2rem, 5vw, 4rem);
      align-items: start;
    }
    .exec-summary-head {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }
    .exec-summary-title {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3.2vw, 2.6rem);
      font-weight: 800;
      line-height: 1;
      color: var(--text-inverse);
      text-transform: uppercase;
    }
    .exec-summary-lede {
      font-size: 0.9rem;
      line-height: 1.6;
      color: var(--text-inverse-soft);
      max-width: 36ch;
    }
    .exec-items {
      display: grid;
      gap: 0;
    }
    .exec-item {
      display: grid;
      grid-template-columns: 9rem minmax(0, 1fr);
      gap: 0.75rem 1rem;
      padding-block: 0.85rem;
      border-top: 1px solid var(--rule-dark);
      align-items: baseline;
    }
    .exec-item:last-child { border-bottom: 1px solid var(--rule-dark); }
    .exec-item-label {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent-on-ink);
    }
    .exec-item-value {
      font-size: 0.92rem;
      color: var(--text-inverse-soft);
      line-height: 1.5;
    }
    .exec-item-value strong { color: var(--text-inverse); font-weight: 500; }
    @media (max-width: 720px) {
      .exec-summary-inner { grid-template-columns: 1fr; }
      .exec-item { grid-template-columns: 1fr; gap: 0.2rem; }
    }

    /* ─── acessibilidade / impressão ───────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
      }
    }

    @media print {
      .bar, .rail, .idx, .skip-link, .ch-next, .cover-start { display: none; }
      .chapter, .momento { break-inside: avoid-page; padding-block: 2rem; }
      body { background: #fff; }
    }

    /* ─── lightbox ─────────────────────────────────────────────── */
    .lb {
      position: fixed;
      inset: 0;
      z-index: 300;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      background: rgba(26,21,17,0.94);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .lb.is-open { display: flex; }
    .lb-img {
      display: block;
      max-width: 92vw;
      max-height: 84vh;
      width: auto;
      height: auto;
      object-fit: contain;
      box-shadow: 0 12px 60px rgba(0,0,0,0.6);
    }
    .lb-close {
      position: absolute;
      top: 1rem; right: 1rem;
      padding: 0.45rem 0.9rem;
      border: 1px solid rgba(244,239,229,0.25);
      background: none;
      color: var(--text-inverse);
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      cursor: pointer;
      transition: border-color var(--t-fast);
    }
    .lb-close:hover { border-color: var(--text-inverse); }
    .lb-caption {
      position: absolute;
      bottom: 1.25rem;
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--font-mono);
      font-size: 0.65rem;
      letter-spacing: 0.1em;
      color: var(--text-inverse-dim);
      max-width: 80vw;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .fig--lb .fig-media {
      cursor: zoom-in;
      position: relative;
    }
    .fig-lightbox-trigger {
      display: block;
      width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      text-align: inherit;
      cursor: zoom-in;
    }
    .fig--lb .fig-media::after {
      content: "↗ ampliar";
      position: absolute;
      bottom: 0.5rem; right: 0.75rem;
      font-family: var(--font-mono);
      font-size: 0.6rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-inverse);
      background: rgba(26,21,17,0.65);
      padding: 0.18rem 0.45rem;
      pointer-events: none;
      line-height: 1.4;
    }

    /* ─── xread: separação visual do fundo ─────────────────────── */
    .xread { box-shadow: 0 2px 14px rgba(0,0,0,0.09); }

    /* ─── xread pair: dois slides lado a lado ──────────────────── */
    .xread-pair {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-content);
    }
    @media (max-width: 860px) {
      .xread-pair { grid-template-columns: 1fr; }
    }

    /* ─── phone frame: tamanho de celular ──────────────────────── */
    .fig--phone { max-width: 280px; margin-inline: auto; }
    .fig-pair { display: flex; flex-direction: column; gap: var(--space-content); }
    @media (min-width: 640px) {
      .fig-pair { flex-direction: row; align-items: flex-start; gap: 2rem; }
      .fig-pair .fig--phone { margin-inline: 0; }
    }

    /* ─── phone pair: dois celulares lado a lado ────────────────── */
    .fig-phone-pair {
      display: flex;
      gap: var(--space-content);
      justify-content: center;
      align-items: flex-start;
    }
    .fig-phone-pair .fig { flex: 1; max-width: 210px; }
    @media (max-width: 520px) {
      .fig-phone-pair { flex-direction: column; align-items: center; }
      .fig-phone-pair .fig { max-width: 280px; width: 100%; }
    }


    /* ─── duo: gap no mobile ───────────────────────────────────── */
    @media (max-width: 720px) {
      .duo { gap: var(--space-content); }
      .duo .fig:nth-child(2) { margin-top: 0; }
    }

    /* ─── CNP anterior: evidência da experiência anterior ────── */
    .cnp-evidence { margin-top: var(--space-section); margin-bottom: var(--space-section); }
    .cnp-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2rem, 5vw, 4rem);
      align-items: start;
      margin-top: var(--space-content);
    }
    .cnp-layout .fig { max-width: 360px; margin-inline: auto; }
    .cnp-reading p {
      font-size: 0.92rem;
      color: var(--text-secondary);
      line-height: 1.65;
      margin-bottom: 0.75rem;
    }
    .cnp-reading p:last-child { margin-bottom: 0; }
    .cnp-bridge {
      margin-top: var(--space-content);
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.6;
      border-left: 2px solid var(--rule);
      padding-left: 1rem;
    }
    @media (max-width: 720px) {
      .cnp-layout { grid-template-columns: 1fr; }
      .cnp-layout .fig { max-width: 420px; margin-inline: auto; }
    }

    /* ─── portfolio shell navigation ───────────────────────────── */
    .portfolio-shell {
      position: fixed;
      inset: 0 0 auto;
      z-index: 120;
      display: flex;
      align-items: center;
      height: 32px;
      padding-inline: 3%;
      background: #012B55;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      color: #fff;
      font-family: qqmf, sans-serif;
    }
    .portfolio-shell .nav-container {
      display: flex;
      align-items: center;
      gap: 1.2rem;
      width: 30%;
      white-space: nowrap;
    }
    .portfolio-shell .nav-container a,
    .portfolio-shell .portfolio-logo a {
      color: #fff;
      font-size: 12px;
      line-height: 20px;
      text-decoration: none;
    }
    .portfolio-shell .nav-container a:hover,
    .portfolio-shell .nav-container a:focus-visible,
    .portfolio-shell .portfolio-logo a:hover,
    .portfolio-shell .portfolio-logo a:focus-visible {
      color: #3eff92;
    }
    .portfolio-logo {
      flex: 1;
      width: 40%;
      text-align: center;
    }
    .portfolio-logo a {
      font-size: 24px !important;
      font-weight: 700;
      line-height: 30px !important;
    }
    .portfolio-hamburger {
      display: none;
      position: absolute;
      right: 5%;
      top: 50%;
      width: 24px;
      padding: 10px 0;
      transform: translateY(-50%);
      cursor: pointer;
    }
    .portfolio-hamburger i {
      display: block;
      height: 2px;
      margin-bottom: 4px;
      background: #EAEAEA;
    }
    .portfolio-hamburger i:last-child { margin-bottom: 0; }
    .portfolio-shell-responsive {
      display: none;
    }

    /* The case index stays below the portfolio header. */
    .bar {
      top: 32px;
    }
    .cover {
      padding-top: calc(32px + var(--bar-h) + clamp(2rem, 6vh, 4.5rem));
    }
    [id] {
      scroll-margin-top: calc(32px + var(--bar-h) + 1rem);
    }

    @media (max-width: 932px) {
      .portfolio-shell {
        padding-inline: 5%;
      }
      .portfolio-shell > .nav-container,
      .portfolio-shell > .portfolio-social {
        display: none;
      }
      .portfolio-logo {
        width: 100%;
      }
      .portfolio-logo a {
        padding-left: 39px;
      }
      .portfolio-hamburger {
        display: block;
      }
      .portfolio-shell-responsive {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: auto;
        padding: 50px 5% 80px;
        background: #012B55;
        color: #fff;
        text-align: center;
      }
      body.show-responsive-nav .portfolio-shell-responsive {
        display: flex;
      }
      .portfolio-shell-responsive .nav-container {
        display: block;
        width: 100%;
      }
      .portfolio-shell-responsive .page-title {
        display: block;
        padding-bottom: 30px;
      }
      .portfolio-shell-responsive .page-title a {
        color: #fff;
        font: 400 22px/32px qqmf, sans-serif;
        text-decoration: none;
      }
      .portfolio-shell-responsive .page-title a:hover,
      .portfolio-shell-responsive .page-title a:focus-visible {
        color: #3eff92;
      }
      .portfolio-shell-close {
        position: fixed;
        top: 40px;
        right: 5%;
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
      .portfolio-shell-close::before,
      .portfolio-shell-close::after {
        content: "";
        position: absolute;
        left: 50%;
        width: 2px;
        height: 20px;
        background: #EAEAEA;
      }
      .portfolio-shell-close::before { transform: rotate(45deg); }
      .portfolio-shell-close::after { transform: rotate(-45deg); }
      body.show-responsive-nav {
        overflow: hidden;
      }
    }

/* Portfolio refinement layer */
:root {
  --surface-primary: rgba(1, 43, 85, 0.72);
  --surface-secondary: rgba(6, 57, 91, 0.72);
  --surface-ink: rgba(2, 28, 59, 0.86);
  --surface-ink-2: rgba(1, 43, 85, 0.9);
  --text-primary: #eaeaea;
  --text-secondary: #d6dee7;
  --text-tertiary: #a9b7c5;
  --text-inverse: #eaeaea;
  --text-inverse-soft: #c0cbd5;
  --text-inverse-dim: #91a3b5;
  --accent: #3eff92;
  --accent-deep: #3eff92;
  --accent-on-ink: #3eff92;
  --rule: rgba(234, 234, 234, 0.22);
  --rule-soft: rgba(234, 234, 234, 0.14);
  --rule-dark: rgba(234, 234, 234, 0.18);
  --font-display: qqmf, monospace;
  --font-body: hrpf, sans-serif;
  --font-mono: qqmf, monospace;
}

html {
  background: #041c44;
}

body {
  background:
    radial-gradient(circle at 76% 12%, rgba(0, 217, 122, 0.55), transparent 35%),
    radial-gradient(circle at 24% 44%, rgba(0, 128, 118, 0.42), transparent 42%),
    linear-gradient(150deg, #00744e 0%, #00666a 31%, #043d6a 62%, #001b5c 100%);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-body);
}

body::before {
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.016) 0 1px, transparent 1px 4px);
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

p,
.project-field-value,
.exec-item-value,
.who-cell-text,
.dimpact-text,
.cycle-row-text {
  color: var(--text-secondary);
}

.bar {
  background: #012b55;
  border-bottom: 0;
  color: #eaeaea;
  font-family: qqmf, monospace;
  height: 54px;
  justify-content: space-between;
}

.portfolio-nav {
  align-items: center;
  display: flex;
  gap: 1.5rem;
  white-space: nowrap;
}

.portfolio-nav a,
.bar-brand {
  color: #eaeaea;
  font-family: qqmf, monospace;
  font-size: .78rem;
  letter-spacing: .04em;
  text-decoration: none;
  text-transform: none;
}

.portfolio-nav a:hover,
.portfolio-nav a:focus-visible,
.bar-brand:hover {
  color: #3eff92;
}

.bar-brand {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

.bar-brand b {
  color: #eaeaea;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: lowercase;
}

.bar-pos {
  display: none;
}

.bar-idx {
  border: 0;
  color: #eaeaea;
  font-family: qqmf, monospace;
  font-size: .76rem;
  letter-spacing: .04em;
  padding: .35rem 0;
  text-transform: none;
}

.bar-idx:hover {
  background: transparent;
  color: #3eff92;
}

.idx {
  background:
    radial-gradient(circle at 70% 10%, rgba(0, 202, 111, .35), transparent 40%),
    #012b55;
}

.idx-title,
.cover-title,
.ch-title,
.momento-title,
.closing-title,
.gargalo-title {
  font-family: qqmf, monospace;
  letter-spacing: .02em;
}

.cover,
.ch--ink,
.momento--ink {
  background: rgba(2, 28, 59, .72);
}

.chapter,
.project-card,
.momento,
.complement,
.site-footer {
  background: rgba(1, 43, 85, .5);
}

.ch--paper2,
.momento--paper2,
.exec-summary {
  background: rgba(4, 48, 82, .6);
}

.cover {
  padding-top: calc(var(--bar-h) + clamp(3rem, 8vh, 6rem));
  overflow-x: clip;
}

.cover-title {
  color: #eaeaea;
  font-size: clamp(3rem, 7.4vw, 7.4rem);
  text-transform: none;
}

.cover-title em,
.statement em,
.closing-title em {
  color: #3eff92;
}

.cover-case,
.ch-count,
.idx-num,
.fig-cap b,
.momento-count,
.track-n,
.stat-num {
  color: #3eff92;
}

.cover-strip img {
  filter: saturate(.9) contrast(1.02);
}

.project-card,
.exec-summary,
.chapter,
.momento,
.complement,
.site-footer {
  border-color: var(--rule);
}

.project-card-title,
.project-field-label,
.exec-item-label,
.kicker,
.ch-role,
.method-label,
.who-cell-label,
.dblock-label,
.phase-label,
.track-name,
.results-legend-col-label,
.cycle-meta-label,
.cycle-row-label {
  color: #3eff92;
  font-family: qqmf, monospace;
}

.fig-media,
.xread,
.tracking-note,
.gargalo-panel,
.cycle-card,
.inst-section {
  background: rgba(2, 28, 59, .62);
  border-color: var(--rule);
}

.fig-media img {
  background: #082f52;
}

.statement,
.ch-title,
.momento-title,
.gargalo-title,
.closing-title,
.exec-summary-title {
  color: #eaeaea;
}

.before-after,
.principles,
.root,
.stats,
.method-block,
.triagem-rationale,
.results-legend,
.cycle-block,
.tradeoff {
  border-color: var(--rule);
}

.principle h3,
.phase h3,
.triagem-axis-name,
.cycle-card-title,
.steps-item strong {
  color: #eaeaea;
}

.f-bar,
.gmf-bar {
  background: #3eff92;
}

.site-footer {
  color: #eaeaea;
}

.footer-author__label,
.footer-author__name,
.footer-author__role {
  font-family: qqmf, monospace;
}

.portfolio-contact {
  border-top: 1px solid var(--rule);
  color: #1b9cfc;
  font-family: qqmf, monospace;
  font-size: .75rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  text-align: center;
}

.portfolio-hamburger,
.portfolio-shell-close {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
}

.portfolio-hamburger {
  min-height: 44px;
  min-width: 44px;
}

.portfolio-nav a[aria-current="page"],
.nav-container a[aria-current="page"] {
  color: #3eff92;
  text-decoration: underline;
  text-underline-offset: .35em;
}

.case-jumps {
  align-items: stretch;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block: 2rem 3.5rem;
  padding: 1px;
  background: var(--rule);
}

.case-jumps a {
  align-items: center;
  background: rgba(2, 28, 59, .8);
  color: #eaeaea;
  display: flex;
  font-family: qqmf, monospace;
  justify-content: center;
  min-height: 52px;
  padding: .8rem 1rem;
  text-align: center;
  text-decoration: none;
}

.case-jumps a:hover,
.case-jumps a:focus-visible,
.case-cta__links a:hover,
.case-cta__links a:focus-visible,
.case-footer-nav a:hover,
.case-footer-nav a:focus-visible {
  color: #3eff92;
}

.seconds {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.entrega-fig .lightbox-trigger {
  display: block;
  width: 100%;
}

.entrega-fig .lightbox-trigger img {
  aspect-ratio: 2426 / 1478;
  display: block;
  height: auto;
  width: 100%;
}

.lb-close {
  min-height: 44px;
  min-width: 44px;
}

.case-cta {
  align-items: center;
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  padding-bottom: 2rem;
}

.case-cta p {
  color: #eaeaea;
  font-family: qqmf, monospace;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
}

.case-cta__links,
.case-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
}

.case-cta__links a {
  border: 1px solid var(--rule);
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: .6rem .9rem;
  text-decoration: none;
}

.case-footer-nav {
  justify-content: center;
  line-height: 1.5;
}

.case-footer-nav a {
  min-height: 44px;
  align-items: center;
  display: inline-flex;
}

@media (max-width: 760px) {
  .portfolio-nav {
    gap: .8rem;
  }

  .portfolio-nav a {
    font-size: .68rem;
  }

  .bar-brand {
    display: none;
  }

  .bar-idx {
    font-size: .68rem;
  }

  .cover-title {
    font-size: clamp(2.2rem, 11vw, 3.4rem);
  }

  .case-jumps {
    grid-template-columns: 1fr;
  }

  .case-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .seconds {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  body {
    background-attachment: scroll;
  }
}