@page {
    size: letter;
    margin: 0;
  }

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

  :root {
    --orange: #d4623a;
    --orange-deep: #b04e2c;
    --teal: #3a5a58;
    --teal-08: rgba(58, 90, 88, 0.08);
    --teal-15: rgba(58, 90, 88, 0.15);
    --teal-25: rgba(58, 90, 88, 0.25);
    --teal-60: rgba(58, 90, 88, 0.60);
    --teal-75: rgba(58, 90, 88, 0.75);
    --white: #ffffff;
    --white-25: rgba(255, 255, 255, 0.25);
    --white-60: rgba(255, 255, 255, 0.60);
    --white-82: rgba(255, 255, 255, 0.82);
    --mint: #c8e0b8;
    --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  }

  html {
    background: #ece9e3;
  }

  body {
    background: var(--white);
    color: var(--teal);
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 10.5pt;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    -webkit-font-smoothing: antialiased;
  }

  /* On screen, simulate the bound document with gutters */
  @media screen {
    body {
      max-width: 8.5in;
      margin: 1rem auto;
      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
    }
  }

  /* ---- Cover page (full-bleed orange masthead) ---- */
  .cover {
    page-break-after: always;
    background: var(--orange);
    color: var(--white);
    min-height: 9in;
    height: 9in;
    padding: 0.85in 0.85in 1in 0.85in;
    display: flex;
    flex-direction: column;
  }

  .cover .edition-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 9pt;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--white-60);
    padding-bottom: 0.9em;
    border-bottom: 1px solid var(--white-25);
    margin-bottom: 4em;
  }

  .cover .eyebrow {
    font-family: var(--font-mono);
    font-size: 9pt;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--teal);
    font-weight: 500;
    margin-bottom: 1.8em;
  }

  .cover h1 {
    font-family: var(--font-display);
    font-size: 60pt;
    font-weight: 900;
    line-height: 0.97;
    letter-spacing: -0.02em;
    color: var(--white);
    margin: 0 0 0.5em 0;
    max-width: 7in;
  }

  .cover h1 em {
    font-style: italic;
    font-weight: 700;
    color: var(--white-82);
  }

  .cover .subtitle {
    font-family: var(--font-display);
    font-size: 17pt;
    font-style: italic;
    font-weight: 400;
    color: var(--white-82);
    margin-bottom: 0;
    line-height: 1.35;
    max-width: 5.5in;
  }

  .cover .meta {
    margin-top: auto;
    font-family: var(--font-mono);
    font-size: 9pt;
    line-height: 1.9;
    color: var(--white-82);
    border-top: 1px solid var(--white-25);
    padding-top: 1.4em;
    max-width: 4.5in;
  }

  .cover .meta strong {
    color: var(--white);
    display: inline-block;
    width: 1.6in;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 8pt;
  }

  /* ---- Page-flow reading container ---- */
  main.flow {
    padding: 0.85in 0.85in 0.85in 0.85in;
    max-width: 8.5in;
    margin: 0 auto;
  }

  /* Full-bleed dividers and panels escape main padding */
  main.flow > .part-divider,
  main.flow > .pullquote-panel {
    margin-left: -0.85in;
    margin-right: -0.85in;
  }

  /* First element after a divider should hug the divider, not float far below it */
  .part-divider + *,
  .part-divider + h3,
  .part-divider + p,
  .part-divider + h2 {
    margin-top: 0.4em !important;
  }

  /* ---- Part dividers (top-of-page banner) ---- */
  .part-divider {
    page-break-before: always;
    break-before: page;
    background: var(--white);
    color: var(--teal);
    padding: 0.15in 0.85in 0.35in 0.85in;
    border-bottom: 1px solid var(--teal-15);
    margin-bottom: 0.5em;
  }

  .part-divider .part-num {
    font-family: var(--font-mono);
    font-size: 9pt;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--orange);
    font-weight: 500;
    margin-bottom: 0.5em;
  }

  .part-divider .part-title {
    font-family: var(--font-display);
    font-size: 26pt;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--teal);
    max-width: 7in;
    margin: 0;
  }

  .part-divider .part-title em {
    font-style: italic;
    color: var(--orange);
    font-weight: 700;
  }

  .part-divider .part-sub {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 18pt;
    color: var(--teal-60);
    margin-top: 1.2em;
    max-width: 7in;
    line-height: 1.3;
  }

  /* ---- Section headings ---- */
  h2 {
    font-family: var(--font-display);
    font-size: 26pt;
    font-weight: 900;
    color: var(--teal);
    letter-spacing: -0.01em;
    margin: 2em 0 0.6em 0;
    page-break-after: avoid;
    line-height: 1.1;
  }

  h2.first {
    margin-top: 0;
  }

  h2 em {
    font-style: italic;
    color: var(--orange);
  }

  h3 {
    font-family: var(--font-display);
    font-size: 17pt;
    font-weight: 700;
    color: var(--teal);
    margin: 1.8em 0 0.5em 0;
    page-break-after: avoid;
    line-height: 1.25;
    letter-spacing: -0.005em;
  }

  h3 em {
    font-style: italic;
    color: var(--orange);
    font-weight: 700;
  }

  h4 {
    font-family: var(--font-mono);
    font-size: 9pt;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--orange);
    margin: 1.6em 0 0.4em 0;
    page-break-after: avoid;
  }

  p {
    margin: 0 0 0.9em 0;
    max-width: 5.6in;
  }

  strong {
    color: var(--teal);
    font-weight: 500;
  }

  em {
    font-style: italic;
  }

  a {
    color: var(--orange);
    text-decoration: none;
    border-bottom: 1px solid var(--orange);
  }

  ul, ol {
    margin: 0.6em 0 1.2em 0;
    padding-left: 0;
    list-style: none;
    max-width: 5.6in;
  }

  ul li, ol li {
    position: relative;
    padding-left: 1.4em;
    margin-bottom: 0.55em;
    line-height: 1.6;
  }

  ul li::before {
    content: '◆';
    position: absolute;
    left: 0;
    top: 0.05em;
    font-size: 0.6em;
    color: var(--orange);
  }

  ol {
    counter-reset: ol-counter;
  }

  ol li {
    counter-increment: ol-counter;
  }

  ol li::before {
    content: counter(ol-counter, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-mono);
    font-size: 0.78em;
    letter-spacing: 0.05em;
    color: var(--orange);
    font-weight: 500;
  }

  /* ---- Transition line (bridges into a new section with a question) ---- */
  .transition {
    font-family: var(--font-display);
    font-size: 22pt;
    font-style: italic;
    font-weight: 400;
    color: var(--teal);
    line-height: 1.25;
    margin: 2em 0 1.5em 0;
    max-width: 6.4in;
  }

  .transition em {
    color: var(--orange);
    font-style: italic;
  }

  /* ---- Section eyebrow (matches resume/cover eyebrows in body flow) ---- */
  .section-eyebrow {
    font-family: var(--font-mono);
    font-size: 9pt;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--orange);
    margin: 0 0 1em 0;
  }

  /* ---- Two-column dichotomy block (left vs right question) ---- */
  .two-questions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1em;
    margin: 1.4em 0 2em 0;
    page-break-inside: avoid;
    max-width: 6.4in;
  }

  .two-questions .q-col {
    background: var(--teal-08);
    border-radius: 10px;
    padding: 1.2em 1.3em;
  }

  .two-questions .q-num {
    font-family: var(--font-mono);
    font-size: 8.5pt;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--orange);
    font-weight: 500;
    margin-bottom: 0.55em;
  }

  .two-questions .q-text {
    font-family: var(--font-display);
    font-size: 15pt;
    font-weight: 700;
    color: var(--teal);
    line-height: 1.18;
    letter-spacing: -0.005em;
    margin-bottom: 0.9em;
  }

  .two-questions .q-text em {
    font-style: italic;
    color: var(--orange);
    font-weight: 700;
  }

  .two-questions ul {
    margin: 0;
    max-width: none;
  }

  .two-questions ul li {
    font-size: 9.5pt;
    margin-bottom: 0.4em;
    padding-left: 1em;
    line-height: 1.45;
  }

  .two-questions ul li::before {
    font-size: 0.55em;
    top: 0.25em;
  }

  /* ---- Callout (card with hairline border + mono label) ---- */
  .callout {
    background: var(--teal-08);
    border-radius: 10px;
    padding: 1.3em 1.5em;
    margin: 1.6em 0;
    page-break-inside: avoid;
    max-width: 5.8in;
  }

  .callout p {
    max-width: none;
  }

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

  .callout .label {
    font-family: var(--font-mono);
    font-size: 8.5pt;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--orange);
    font-weight: 500;
    margin-bottom: 0.7em;
  }

  /* ---- Verbatim quote (used in appendix for direct comment pulls) ---- */
  .verbatim-quote {
    border-left: 3px solid var(--orange);
    padding: 0.5em 0 0.5em 1.1em;
    margin: 1em 0;
    max-width: 6in;
    page-break-inside: avoid;
  }

  .verbatim-quote p {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 12pt;
    font-weight: 400;
    color: var(--teal);
    line-height: 1.45;
    margin: 0 0 0.45em 0;
    max-width: none;
  }

  .verbatim-quote p:last-of-type {
    margin-bottom: 0.5em;
  }

  .verbatim-quote .attrib {
    font-family: var(--font-mono);
    font-size: 8.5pt;
    letter-spacing: 0.05em;
    color: var(--orange);
    font-style: normal;
    margin-top: 0.2em;
  }

  /* ---- Major callout (larger, more weight, used for headline turns) ---- */
  .callout.major {
    max-width: 6.4in;
    padding: 1.8em 2em 1.9em;
    margin: 2.2em 0 2.4em 0;
    background: var(--teal-08);
    border-left: 4px solid var(--orange);
    border-radius: 4px 10px 10px 4px;
  }

  .callout.major .label {
    font-size: 9pt;
    letter-spacing: 0.22em;
    margin-bottom: 1em;
  }

  .callout.major p {
    font-family: var(--font-display);
    font-size: 15pt;
    line-height: 1.4;
    font-weight: 400;
    color: var(--teal);
    margin-bottom: 0.7em;
  }

  .callout.major p:last-child {
    margin-bottom: 0;
  }

  .callout.major strong {
    color: var(--orange);
    font-weight: 700;
  }

  .callout.major em {
    font-style: italic;
    color: var(--orange);
  }

  /* ---- Pullquote (full-bleed orange panel) ---- */
  .pullquote {
    background: var(--orange);
    color: var(--white);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 22pt;
    line-height: 1.32;
    padding: 1.2in 0.85in;
    margin: 2.4em 0;
    page-break-inside: avoid;
    border: none;
    text-align: left;
  }

  /* Inner text wrap for the pullquote's reading column */
  .pullquote {
    position: relative;
  }

  /* Full-bleed: escape main.flow's padding */
  main.flow > .pullquote {
    margin-left: -0.85in;
    margin-right: -0.85in;
  }

  /* Text inside pullquote stays narrow and centered via padding-side */
  .pullquote {
    padding-left: 1.4in;
    padding-right: 1.4in;
  }

  /* ---- Evidence card ---- */
  .evidence {
    background: var(--white);
    border: 1px solid var(--teal-15);
    border-radius: 10px;
    padding: 1.2em 1.4em;
    margin: 1.2em 0 1.6em 0;
    page-break-inside: avoid;
    max-width: 5.8in;
  }

  .evidence p {
    max-width: none;
  }

  .evidence .heading {
    font-family: var(--font-display);
    font-size: 14pt;
    font-weight: 700;
    color: var(--teal);
    margin-bottom: 0.4em;
    letter-spacing: -0.005em;
  }

  .evidence .stats {
    font-family: var(--font-mono);
    font-size: 8.5pt;
    color: var(--orange);
    letter-spacing: 0.05em;
    margin-bottom: 0.7em;
    font-weight: 500;
  }

  .evidence p {
    margin-bottom: 0.5em;
    font-size: 10pt;
  }

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

  /* ---- Screenshots ---- */
  .screenshot {
    margin: 1.2em 0 1.6em 0;
    page-break-inside: avoid;
    text-align: center;
  }

  .screenshot img {
    max-width: 6.8in;
    width: 100%;
    border: 1px solid var(--teal-15);
    border-radius: 10px;
  }

  .screenshot.large img {
    max-width: 6.8in;
  }

  .screenshot .caption {
    font-family: var(--font-mono);
    font-size: 8.5pt;
    color: var(--teal-60);
    margin-top: 0.7em;
    max-width: 6.8in;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }

  /* ---- Pitch box (card with internal sectioning) ---- */
  .pitch {
    background: var(--white);
    border: 1px solid var(--teal-15);
    border-radius: 14px;
    padding: 1.6em 1.8em;
    margin: 1.8em 0;
    page-break-inside: avoid;
    max-width: 6.4in;
  }

  .pitch p {
    max-width: none;
  }

  .pitch .pitch-eyebrow {
    font-family: var(--font-mono);
    font-size: 9pt;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--orange);
    font-weight: 500;
    margin-bottom: 0.6em;
  }

  .pitch h3 {
    margin-top: 0;
    margin-bottom: 0.6em;
    font-size: 18pt;
  }

  .pitch .source-line {
    font-family: var(--font-mono);
    font-size: 8.5pt;
    color: var(--teal-60);
    line-height: 1.5;
    margin-bottom: 1.2em;
    padding-bottom: 1.2em;
    border-bottom: 1px solid var(--teal-15);
    letter-spacing: 0.02em;
  }

  .pitch .source-line strong {
    color: var(--orange);
    font-weight: 500;
  }

  .pitch .field {
    margin: 1em 0;
    font-size: 10pt;
  }

  .pitch .field-label {
    font-family: var(--font-mono);
    font-size: 8pt;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--orange);
    margin-bottom: 0.3em;
  }

  /* ---- Tables ---- */
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2em 0;
    font-size: 9.5pt;
    page-break-inside: avoid;
    max-width: 5.6in;
  }

  th {
    background: transparent;
    color: var(--orange);
    font-family: var(--font-mono);
    font-weight: 500;
    text-align: left;
    padding: 0.5em 0.7em 0.5em 0;
    border-bottom: 1px solid var(--teal-25);
    font-size: 8pt;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  td {
    padding: 0.7em 0.7em 0.7em 0;
    border-bottom: 1px solid var(--teal-15);
    vertical-align: top;
    color: var(--teal);
  }

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

  /* ---- Status pill ---- */
  .status-pill {
    display: inline-block;
    background: var(--orange);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: 7.5pt;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    padding: 0.35em 0.85em;
    border-radius: 100px;
    vertical-align: middle;
    margin-left: 0.6em;
    line-height: 1;
  }

  /* ---- Section rule ---- */
  hr.section-rule {
    border: none;
    border-top: 1px solid var(--teal-15);
    margin: 2.4em 0;
    max-width: 5.6in;
  }

  /* ---- Avoid awkward breaks ---- */
  h2 + p, h3 + p, h4 + p {
    page-break-before: avoid;
  }

  /* ---- Print fidelity ---- */
  @media print {
    html { background: var(--white); }
    body {
      box-shadow: none;
      margin: 0;
      max-width: none;
    }
  }

  /* ============================================================ */
  /* ---- Tab navigation (sticky on scroll) --------------------- */
  /* ============================================================ */
  .tab-bar {
    display: flex;
    background: var(--orange);
    margin-top: -49px;
    position: sticky;
    top: 0;
    z-index: 100;
    border-top: 1px solid var(--white-25);
    border-bottom: 1px solid rgba(0,0,0,0.10);
  }

  .tab-bar .tab {
    flex: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.65em;
    padding: 1.05em 0.9em 1.1em;
    color: var(--white);
    text-decoration: none;
    border: none;
    border-right: 1px solid var(--white-25);
    background: transparent;
    transition: background 0.18s ease;
    min-width: 0;
  }

  .tab-bar .tab:last-child {
    border-right: none;
  }

  .tab-bar .tab:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .tab-bar .tab.active {
    background: rgba(255, 255, 255, 0.20);
  }

  .tab-bar .tab-num {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 13pt;
    color: var(--white-60);
    letter-spacing: 0;
    line-height: 1;
  }

  .tab-bar .tab.active .tab-num {
    color: var(--white-82);
  }

  .tab-bar .tab-title {
    font-family: var(--font-display);
    font-size: 14pt;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -0.005em;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ---- Smaller cover for appendix subpages ---- */
  .cover.cover-sub {
    min-height: 6.2in;
    height: 6.2in;
    padding: 0.85in 0.85in 0.85in 0.85in;
  }

  .cover.cover-sub h1 {
    font-size: 44pt;
    max-width: 6.5in;
  }

  .cover.cover-sub .meta {
    margin-top: auto;
  }

  /* ---- Back link on appendix pages ---- */
  .back-link {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 9pt;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--orange);
    font-weight: 500;
    border-bottom: none;
    margin: 0 0 1.6em 0;
  }

  .back-link:hover {
    color: var(--orange-deep);
    border-bottom: none;
  }

  /* ---- Inline appendix link (orange underline, body context) ---- */
  a.appendix-link {
    color: var(--orange);
    border-bottom: 1px solid var(--orange);
    font-weight: 500;
  }

  /* ---- Print: hide tabs and back link ---- */
  @media print {
    .tab-bar, .back-link { display: none !important; }
    .cover.cover-sub {
      min-height: 0;
      height: auto;
      page-break-after: always;
    }
  }

  /* ---- Narrow screens ---- */
  @media screen and (max-width: 720px) {
    .tab-bar {
      flex-wrap: wrap;
    }
    .tab-bar .tab {
      flex: 1 1 33%;
      padding: 0.8em 0.5em;
    }
    .tab-bar .tab-title {
      font-size: 11pt;
    }
    .tab-bar .tab-num {
      font-size: 10pt;
    }
  }

  /* ---- Anchor-jump offset (so sections land just below the sticky tab bar) ---- */
  main.flow section[id] {
    scroll-margin-top: 60px;
  }

  html {
    scroll-behavior: smooth;
  }