/* =====================================================================
   resume-print.css — print stylesheet for the Resume + Narrative CV page
   =====================================================================

   USAGE
     <link rel="stylesheet" href="resume-print.css" media="print">

   …or paste the entire @media print { … } block into your existing
   stylesheet. Everything below is print-only — including @page — so
   it has no effect on screen rendering.

   ASSUMES the markup uses the same class names as the source artifact:
     .page-header / .ph-left / .ph-right / .ph-vline
     .page-title (with .underline span around the surname)
     .ph-eyebrow / .page-framing
     .sys-readout / .sys-row(.stack) / .sys-key / .sys-val(.hi)
     .section-break(.stay) / .section-break-label / .lbl-accent
     .exp-card / .ec-index / .ec-num / .ec-vline / .ec-meta
       / .ec-row / .ec-k / .ec-v(.hi) / .ec-content / .ec-title
       / .ec-bullets / .ec-bullet / .ec-comment
     .resume-block / .rb-meta / .rb-kicker / .rb-content
     .early-roles / .er-index / .er-content / .er-list / .er-item
       / .er-role / .er-org / .er-year / .er-kicker
     .skill-group / .skill-cat / .skill-list (.sep)
     .edu-row / .edu-degree / .edu-school / .edu-note
     .writing-block / .writing-title / .writing-body
     .cv-intro / .cvi-portrait-zone / .cvi-vline / .cvi-right
       / .cvi-mission
     .cv-section-head(.heavy) / .cv-sh-num / .cv-sh-vline
       / .cv-sh-title-col / .cv-sh-kicker / .cv-sh-title
     .cv-project / .cvp-meta / .cvp-content / .cvp-title / .cvp-body
     .cv-prose / .cv-bullets / .cv-bullet / .slash-comment
     .cv-mission-full
     .page-foot
     #mainNav / .float-ctrl / .breadcrumb / .scroll-cue (hidden in print)
     .blink (animated cursor — neutralized in print)

   COLOR + TYPE TOKENS the source uses (defined in colors_and_type.css):
     --bg #F5F1E8 · --fg #14110D · --mid #6F6A60
     --divider rgba(20,17,13,.20) · --accent per data-accent, light variant
     --f-disp 'Syne' · --f-body 'Lora' · --f-mono 'IBM Plex Mono'
     (These are now actually PINNED for print — see PRINT PALETTE LOCK at
      the end of this file. They previously were not, so print inherited
      whatever theme/accent the screen was in.)
   ===================================================================== */

/* @page margin is set to 0 in the FULL BLEED block at the end of this
   file; the 18mm inset now lives as padding on .view so the cream
   reaches the sheet edge. */

@media print {
  html { font-size: 9pt; }
  body {
    background: #F5F1E8;
    color: #14110D;
    padding: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    orphans: 3;
    widows: 3;
  }
  .page, .view, main, .resume-list, .cv-list { background: transparent !important; }

  /* Hide on-screen chrome */
  nav#mainNav, .float-ctrl, .breadcrumb, .scroll-cue { display: none !important; }

  /* Clean break between Resume and CV views */
  #resume-view { page-break-after: always !important; break-after: page !important; }

  .page-foot {
    page-break-before: avoid !important;
    break-before: avoid !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  .page, .page-wrap { max-width: 100%; width: 100%; padding: 0; }
  .page-header { padding-top: 0; }
  .ph-left, .cvi-portrait-zone { padding-top: 0 !important; }

  /* Title block — name fills 2/3, summary + readout stack on right 1/3 */
  .page-header, .cv-intro {
    grid-template-columns: 2fr 1px 1fr !important;
    column-gap: 0 !important;
    grid-template-rows: 1fr;
    border-bottom: 1px solid rgba(20,17,13,0.20);
    min-height: 3.4in;
    align-items: end !important;
  }
  .ph-vline, .cvi-vline {
    display: block !important;
    background: rgba(20,17,13,0.20) !important;
    align-self: stretch;
  }
  .ph-left, .cvi-portrait-zone {
    padding: 0 0 24mm 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    min-width: 0 !important;
    overflow-wrap: break-word;
  }
  .ph-right, .cvi-right {
    padding: 0 0 16px 6mm !important;
    border-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    min-width: 0 !important;
  }
  .page-title {
    font-size: 44pt !important;
    line-height: .95 !important;
    margin: 0 !important;
    padding-bottom: 8pt;
  }
  .ph-eyebrow { margin-bottom: 0 !important; }
  .page-framing { font-size: 9pt !important; line-height: 1.55 !important; }
  .sys-key, .sys-val { font-size: 6.5pt !important; }

  .sys-readout {
    flex-direction: column !important;
    gap: 5px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(20,17,13,0.20) !important;
    margin: 0 !important;
  }
  .sys-row {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 10px !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }
  .sys-row.stack {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1px !important;
    padding-bottom: 3px !important;
    border-bottom: 1px solid rgba(20,17,13,0.20) !important;
  }
  .sys-row.stack:last-child { border-bottom: 0 !important; }
  .sys-row.stack .sys-val { text-align: left !important; }

  /* Page-break rules */
  .section-break {
    page-break-before: always !important;
    break-before: page !important;
  }
  .section-break.stay {
    page-break-before: auto !important;
    break-before: auto !important;
  }
  .page-header + .section-break,
  .cv-intro + .section-break,
  .cv-mission-full + .cv-prose,
  .cv-mission-full + .cv-section-head {
    page-break-before: avoid !important;
    break-before: avoid !important;
  }
  .cv-section-head.heavy {
    page-break-before: always !important;
    break-before: page !important;
  }
  .cv-mission-full + .cv-section-head.heavy,
  .cv-section-head.heavy:first-of-type {
    page-break-before: avoid !important;
    break-before: avoid !important;
  }

  .resume-list, .cv-list, .early-roles {
    display: flex;
    flex-direction: column;
  }
  .writing-block,
  .writing-block + .section-break,
  .writing-block ~ .resume-block {
    page-break-before: auto !important;
    break-before: auto !important;
  }

  /* Padding on tall blocks */
  .exp-card, .resume-block, .cv-project, .cv-section-head, .early-roles {
    padding-top: 0; padding-bottom: 0;
  }
  .ec-meta, .ec-content, .rb-meta, .rb-content, .cvp-meta, .cvp-content,
  .er-content, .cv-sh-title-col {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  .resume-list, .cv-list { padding-bottom: 0 !important; }

  /* Avoid splitting cards across pages */
  .exp-card, .resume-block, .cv-project, .cv-section-head, .early-roles,
  .role, .edu-block, .publication {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* CV project rows — meta column needs breathing room */
  .cv-project {
    grid-template-columns: calc(var(--pad-x) + 2.5rem) 1px minmax(1.7in, 0.42fr) 1px minmax(0, 0.58fr) !important;
  }
  .cvp-meta { padding-right: 6mm !important; }
  .cvp-content { padding-left: 6mm !important; }
  .cvp-title { font-size: 13pt !important; line-height: 1.2 !important; }
  .cvp-body { font-size: 9.5pt !important; line-height: 1.55 !important; }

  /* Mission band */
  .cv-mission-full {
    padding: 14mm 0 12mm 0 !important;
    border-bottom: 1px solid rgba(20,17,13,0.20);
  }
  .cv-mission-full .cvi-mission {
    font-family: 'Lora', Georgia, serif !important;
    font-style: italic !important;
    font-size: 13pt !important;
    line-height: 1.5 !important;
    max-width: none !important;
  }
  .cv-mission-full .cvi-mission strong {
    font-style: normal !important;
    font-weight: 500 !important;
    color: #00B8A8 !important;
    font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
    font-size: 8pt !important;
    letter-spacing: 0.1em !important;
  }

  .skills-grid, .skill-group, .section {
    break-inside: auto;
    page-break-inside: auto;
  }

  /* Don't break right after a heading/label */
  .section-label, .section-break, .ph-eyebrow, .ec-k, .skill-cat,
  .cv-sh-title, .writing-title, .cvp-title, h1, h2, h3 {
    page-break-after: avoid;
    break-after: avoid;
  }
  p, li { orphans: 3; widows: 3; }

  /* Links */
  a { color: #00B8A8 !important; text-decoration: none; }
  a[href]::after { content: none !important; }

  /* ── DEFEAT TEXT RASTERIZATION (keep text selectable in PDF) ──
     Strip every CSS property that promotes elements to compositing
     layers. Chrome's Save-as-PDF backend rasterizes those layers
     instead of embedding their text glyphs. */
  *, *::before, *::after {
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    mix-blend-mode: normal !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
    opacity: 1 !important;
    isolation: auto !important;
    contain: none !important;
    -webkit-font-smoothing: auto !important;
    text-rendering: auto !important;
    text-wrap: wrap !important;
    text-shadow: none !important;
    box-shadow: none !important;
    perspective: none !important;
    clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;
    letter-spacing: normal !important;
  }
  /* Restore tight tracking on display headlines only */
  .page-title, .ec-title, .cv-sh-title, .writing-title, .cvp-title,
  .edu-degree {
    letter-spacing: -0.02em !important;
  }
  /* Containers that clip — force visible so they don't promote layers */
  .exp-card, .resume-block, .cv-project, .cv-section-head, .early-roles,
  .view, main, body, html { overflow: visible !important; }
  /* Kill the animated accent-bar pseudo-element on experience cards */
  .exp-card::before { display: none !important; content: none !important; }

  /* Replace opacity-based muting with explicit grey colors so secondary
     text stays selectable but still reads softer. */
  .ec-num, .er-year, .ec-k, .skill-cat, .rb-kicker, .er-kicker,
  .cv-sh-num span, .cv-sh-kicker, .bc-egg-k, .bc-egg-v,
  .sys-key, .sys-val, .skill-list .sep, .ec-bullet,
  .ec-comment, .cv-bullet, .cvp-body, .writing-body, .edu-note,
  .cv-prose p, .cv-prose .lead, .cv-prose .pull,
  .page-framing, .ph-eyebrow {
    color: #14110D !important;
  }
  .ec-num, .er-year, .ec-k, .skill-cat, .rb-kicker, .er-kicker,
  .cv-sh-num span, .cv-sh-kicker, .bc-egg-k, .bc-egg-v,
  .sys-key, .sys-val { color: #6F6A60 !important; }
  .skill-list .sep { color: #B8B1A4 !important; }
  .sys-val.hi, .ec-v.hi, .ec-comment, .slash-comment,
  .ph-eyebrow .accent, .lbl-accent, .cvi-mission strong,
  .writing-title a { color: #00B8A8 !important; }

  /* The cyan underline under the surname is a background-image —
     replace with a real bottom border so it doesn't trigger raster. */
  .page-title .underline {
    background-image: none !important;
    border-bottom: 4px solid #00B8A8 !important;
    padding-bottom: 0 !important;
  }
  /* Static cursor */
  .blink { animation: none !important; opacity: 1 !important; }
}


/* =====================================================================
   PRINT CORRECTIONS — 2026-08
   ---------------------------------------------------------------------
   Four defects found by rendering this stylesheet to PDF:

   1. br{display:none} on .skill-cat / .rb-kicker removed the line break
      *and* the whitespace, printing "LEADERSHIP& STRATEGY" and
      "PRACTICEMAP". Fixed in resume.html by padding the <br> with spaces
      (harmless on screen, where the break still renders).
   2. #cv-view is display:none until routed, so printing only ever emitted
      whichever view was on screen — even though #resume-view already
      carries page-break-after:always, which assumed both.
   3. The right-hand readout sat flush against the page margin.
   4. break-inside:avoid on .exp-card pushed every long role onto a fresh
      page, leaving ~45% of the preceding page empty.
   ===================================================================== */
@media print {
  /* (2) Print emits Resume + CV in one pass, whichever view is active. */
  #cv-view, .view { display: block !important; }
  .view-switcher { display: none !important; }

  /* The title block was claiming roughly two-thirds of page one. */
  .page-header, .cv-intro { min-height: 2.1in !important; }
  .page-title { font-size: 36pt !important; }
  .ph-left, .cvi-portrait-zone { padding-bottom: 10mm !important; }

  /* (3) */
  .ph-right, .cvi-right { padding-right: 2mm !important; }

  /* (4) Let a long role flow across the page boundary; protect the
     smaller units instead so nothing splits mid-thought. */
  .exp-card {
    page-break-inside: auto !important;
    break-inside: auto !important;
  }
  .ec-bullet, .ec-meta, .er-item {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  .ec-title, .ec-comment {
    page-break-after: avoid !important;
    break-after: avoid !important;
  }

  .cv-prose { padding-top: 6mm !important; padding-bottom: 6mm !important; }

  /* ── PAGE FLOW: resume flows, CV stays sectioned ──────────────────
     .section-break carries page-break-before:always, which gave the
     resume a title page plus a fresh page per section — page one ran
     ~55% empty and the resume alone ran five pages. A resume is skimmed,
     so it now flows continuously. The Narrative CV is a considered read,
     so it keeps the deliberate one-idea-per-page pacing. */
  #resume-view .section-break {
    page-break-before: auto !important;
    break-before: auto !important;
  }
  #resume-view .page-header { min-height: 1.7in !important; }

  /* The CV still opens each major section on its own page. */
  #cv-view .cv-section-head.heavy {
    page-break-before: always !important;
    break-before: page !important;
  }
  #cv-view .cv-section-head.heavy:first-of-type,
  #cv-view .cv-mission-full + .cv-section-head.heavy {
    page-break-before: avoid !important;
    break-before: avoid !important;
  }

  /* The CV always opens on a fresh sheet. */
  #resume-view {
    page-break-after: always !important;
    break-after: page !important;
  }
}

/* =====================================================================
   FULL BLEED — cream to the trim
   ---------------------------------------------------------------------
   @page margins sit OUTSIDE the page box, and Chrome paints no background
   into them: not from body, not from the root element (the canvas-
   background propagation the spec describes does not reach the margin
   area in Chrome's PDF export), and not from a position:fixed layer
   (Chrome repeats fixed elements per page but clips them to the content
   box, so negative offsets do not bleed). Both were tried and measured.

   The only mechanism that works is @page{margin:0} with the inset
   re-created as padding — and then box-decoration-break:clone, which
   repeats that padding on EVERY page fragment instead of just the first
   and last. Without clone, middle pages run hard against the trim and a
   full-width divider can land exactly on the top edge.

   Measured result: cream to all four corners on every page, first ink
   15–20mm from the top, last ink no closer than 22mm to the bottom.
   ===================================================================== */
@page { size: letter; margin: 0; }

@media print {
  html, body {
    background: #F5F1E8 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body { padding: 0 !important; margin: 0 !important; }
  .view {
    padding: 15mm 18mm !important;
    -webkit-box-decoration-break: clone !important;
    box-decoration-break: clone !important;
  }
}

/* =====================================================================
   PRINT PALETTE LOCK — theme- and accent-proof
   ---------------------------------------------------------------------
   This stylesheet hardcodes its colours, but everything it does NOT
   override still resolves screen tokens from style.css — and those
   follow whatever theme and accent the visitor last chose. Printing from
   dark mode therefore put --fg #F0EFE9 (near-white) and --accent #F0E44A
   (bright yellow) on a cream sheet: the funding figure and every //
   comment label came out barely legible.

   The display typeface drifted too. --f-disp is set per ACCENT, not per
   theme: Syne for yellow, DM Serif Display for green, Space Grotesk for
   cyan. So the printed headline face depended on which accent dot the
   visitor last clicked.

   Everything is pinned below so the PDF is identical no matter what
   state the page was in. Verified: light/yellow and dark/yellow now
   render pixel-identical. To change the printed accent or headline face,
   change it here — this block is the single source of truth for print.
   ===================================================================== */
@media print {
  html,
  html[data-theme="light"],
  html[data-theme="dark"] {
    --bg:      #F5F1E8 !important;
    --fg:      #14110D !important;
    --mid:     #6F6A60 !important;
    --faint:   #B8B1A4 !important;
    --divider: rgba(20,17,13,0.20) !important;
    --f-disp:  'Syne', sans-serif !important;
    --f-body:  'Lora', Georgia, serif !important;
    --f-mono:  'IBM Plex Mono', ui-monospace, monospace !important;
    --name-weight: 300 !important;
    color-scheme: light !important;
  }

  /* Accent keeps its identity but always prints its LIGHT variant, which
     is the only one legible on cream. */
  html[data-accent="yellow"], html[data-theme="dark"][data-accent="yellow"] {
    --accent:     #C9A800 !important;
    --accent-dim: rgba(201,168,0,0.10) !important;
  }
  html[data-accent="green"], html[data-theme="dark"][data-accent="green"] {
    --accent:     #00C032 !important;
    --accent-dim: rgba(0,192,50,0.10) !important;
  }
  html[data-accent="cyan"], html[data-theme="dark"][data-accent="cyan"] {
    --accent:     #00B8A8 !important;
    --accent-dim: rgba(0,184,168,0.10) !important;
  }
}