@page {
  size: letter;
  margin: 0.25in;
}

@media print {
  :root {
    color-scheme: light;
    --print-scale: 0.94;
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-surface-2: #ffffff;
    --color-border: #c9c9c9;
    --color-fg: #111111;
    --color-fg-muted: #111111;
    --color-emphasis: #111111;
    --color-accent: #606060;
    --color-accent-soft: #ffffff;
    --accent-l: 0.58;
    --accent-hue: 0;
    --accent-chroma: 0;
    --accent-soft-chroma: 0;
    /* Keep print sizing viewport-invariant (Safari can leak screen width into clamp/vw). */
    --font-scale: 1rem;
    --spacing-scale: 1rem;
    --max-width: 84rem;
    --section-gap: 1rem;
    /* Freeze detail-text-scale to prevent base.css responsive breakpoints
       from inflating font sizes inside the print stylesheet. */
    --detail-text-scale: 1;
  }

  /* Beat dark-theme specificity from tokens.css */
  html[data-theme='dark'] {
    --accent-l: 0.58;
    --accent-hue: 0;
    --accent-chroma: 0;
    --accent-soft-chroma: 0;
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-surface-2: #ffffff;
    --color-border: #c9c9c9;
    --color-fg: #111111;
    --color-fg-muted: #111111;
    --color-emphasis: #111111;
    --color-accent: #606060;
    --color-accent-soft: #ffffff;
    --detail-text-scale: 1;
  }

  html {
    /* Lock layout width to paper content area (letter − 2×0.25in margins = 8in).
     * Mobile Safari uses the screen viewport (390px CSS px) as the cascade root
     * during print preview; without this, width:100% descendants compute from
     * 390px instead of 768px, causing text to wrap ~2× more per line and
     * inflating every section's height — pushing page 1 past the 1008px
     * printable area and forcing a third page. */
    width: 8in;
    font-size: calc(16px * var(--print-scale));
    background: #fff;
    color-scheme: light !important;
    height: auto !important;
    overflow: visible !important;
  }

  html[data-theme='dark'],
  html[data-theme='light'] {
    color-scheme: light !important;
  }

  body {
    margin: 0;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    background: #fff !important;
    color: #111;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    font-family: 'Georgia', 'Times New Roman', serif;
    line-height: 1.38;
  }

  *,
  *::before,
  *::after {
    text-shadow: none !important;
    box-shadow: none !important;
    background-image: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    -webkit-text-fill-color: currentColor !important;
    transition: none !important;
  }

  h1,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
    break-after: avoid-page;
    page-break-after: avoid;
    text-shadow: none !important;
  }

  p,
  li {
    orphans: 3;
    widows: 3;
  }

  /* Layout reset */
  .resume-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    /* Page margin (0.25in via @page) provides the top gutter — zero out the
     * vw-based clamp from base.css so it doesn't add extra space at 390px. */
    padding-top: 0;
    padding-bottom: 0;
    display: block;
  }

  /* Remove all card/item chrome — clean print surface */
  .resume-card {
    box-shadow: none !important;
    border: none !important;
    background: #fff !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
  }

  .resume-section {
    box-shadow: none !important;
    border: none !important;
    border-top: 1.5px solid #aaa !important;
    background: #fff !important;
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
    overflow: visible !important;
    contain: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
  }

  .experience-item,
  .project-item,
  .education-item,
  .skill-group {
    box-shadow: none !important;
    border: none !important;
    background: #fff !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
  }

  /* Between-sibling separator */
  .experience-item + .experience-item,
  .project-item + .project-item,
  .education-item + .education-item {
    border-top: 0.75px solid #d0d0d0 !important;
    padding-top: 0.14rem;
    margin-top: 0.10rem;
  }

  /* Hidden print elements */
  .resume-header::after,
  .resume-section::before,
  .section-icon,
  .site-footer {
    display: none !important;
  }

  /* Crest-style perspective watermark — centered in header with breathing room */
  .perspective-viz {
    display: block !important;
    position: absolute !important;
    width: 0.88in !important;
    height: 0.88in !important;
    right: 0.64in !important;
    top: 0.01in !important;
    transform: none !important;
    opacity: 0.28 !important;
    color: #787878 !important;
    animation: none !important;
    pointer-events: none !important;
    contain: none !important;
  }

  .viz-shape {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  html[data-view='general'] .viz-general,
  html[data-view='qa'] .viz-qa,
  html[data-view='fullstack'] .viz-fullstack,
  html[data-view='frontend'] .viz-frontend,
  html[data-view='leadership'] .viz-leadership,
  html[data-view='builder'] .viz-builder {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Header refinement */
  .resume-header {
    padding: 0.10rem 0.02rem 0.06rem;
    margin-bottom: 0.04rem;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  .resume-title-row {
    min-height: 0.92in !important;
    overflow: visible !important;
  }

  .resume-title-text {
    padding-right: 2.16in !important;
  }

  .resume-title {
    color: #111 !important;
    background: none !important;
    text-shadow: none !important;
    font-size: 1.58rem;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .resume-role {
    font-size: 0.84rem;
  }

  .resume-tagline {
    margin: 0.08rem 0 0;
    font-size: 0.84rem;
    max-width: 75ch;
    line-height: 1.38;
  }

  /* Section headings — uppercase with underline for print distinction */
  .resume-section > h2 {
    font-family: 'Avenir Next', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.90rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #222 !important;
    border-bottom: 1px solid #d4d4d4;
    padding-bottom: 0.14rem;
    margin-bottom: 0.20rem;
  }

  /* Main content reset — block layout for reliable cross-browser print pagination.
   * Section ordering is handled by JS (beforeprint/afterprint DOM reorder)
   * to ensure balanced two-page output across all perspective views.
   * Print order: Summary → Experience → Skills → Projects → Education → Contact */
  .resume-main {
    display: block;
    padding: 0;
    gap: 0;
  }

  /* Deterministic page-2 start — the JS print reorder places Experience
   * second (after Summary). Skills starts page 2.
   * break-after on Experience (not break-before on Skills) avoids a Safari
   * print engine bug where break-inside:avoid-page on a section + break-before:page
   * on its next sibling inserts a phantom third page in non-general perspectives. */
  [data-section='experience'] {
    break-after: page;
    page-break-after: always;
  }

  /* Section spacing — enough breathing room between sections for clean scanning */
  .resume-section {
    margin-top: 0.22rem;
    padding: 0.16rem 0;
    break-inside: avoid-page;
    page-break-inside: avoid;
  }

  .resume-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  /*
   * All sections use break-inside: avoid-page (inherited from .resume-section).
   * This is safe because every section fits within a single printable page:
   *   - summary:    ~170–230px  (varies by perspective view)
   *   - experience: ~440px      (largest — 4 jobs, 12 bullets)
   *   - skills:     ~192px
   *   - projects:   ~171–225px
   *   - education:  ~120px
   *   - contact:    ~105px
   * All well under the 1008px printable area (letter at 96 DPI minus margins).
   *
   * CSS order places Summary + Experience on page 1 (~750px total with header)
   * and Skills + Projects + Education + Contact on page 2 (~640px).
   * This balanced split avoids a sparse page 1 / cramped page 2 layout.
   *
   * If experience or skills content grows beyond ~500px in the future,
   * re-evaluate whether break-inside: auto is needed (with heading protection
   * rules below as a fallback).
   */

  /*
   * Defensive heading protection: if break-inside: avoid-page ever needs to be
   * relaxed for experience/skills (e.g., content grows too large), these rules
   * prevent h2 headings from being stranded alone at the bottom of a page.
   */
  [data-section='experience'] > h2,
  [data-section='skills'] > h2 {
    break-after: avoid-page;
    page-break-after: avoid;
  }

  /* First child after the heading must not break away from it */
  [data-section='experience'] > h2 + .experience-list,
  [data-section='experience'] > h2 + .experience-list > .experience-item:first-child,
  [data-section='skills'] > h2 + .resume-grid {
    break-before: avoid-page;
    page-break-before: avoid;
  }

  /* Keep all small/medium sections together on one page */
  [data-section='summary'],
  [data-section='projects'],
  [data-section='education'],
  [data-section='contact'] {
    break-inside: avoid-page;
    page-break-inside: avoid;
  }

  /*
   * Do not force per-view page breaks here. Safari pagination differs from Chromium
   * and can promote an extra third page when a forced break lands after content
   * that already flowed to page two. Keep natural section-boundary pagination.
   */

  /* Item spacing — keep each job/education entry as an atomic unit across page breaks */
  .experience-item,
  .education-item {
    break-inside: avoid-page;
    page-break-inside: avoid;
    padding: 0.12rem 0;
  }

  .skill-group {
    break-inside: avoid-page;
    page-break-inside: avoid;
    padding: 0.06rem 0;
  }

  /* Skill group headings must not separate from their bullet list */
  .skill-group h3 {
    break-after: avoid-page;
    page-break-after: avoid;
  }

  .project-item,
  .project-list,
  .project-list li {
    break-inside: auto;
    page-break-inside: auto;
  }

  /* Skills grid — controlled print spacing; override inherited screen margins */
  .resume-grid.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.10rem 0.38rem;
  }

  .skill-group h3 {
    font-size: 0.84rem;
    font-weight: 700;
    margin: 0 0 0.10rem;
  }

  .skill-group li {
    margin: 0.03rem 0;
    font-size: 0.82rem;
    line-height: 1.32;
  }

  .skill-group ul {
    margin: 0;
    padding: 0;
  }

  .experience-list,
  .project-list {
    display: block;
  }

  .experience-list > .experience-item + .experience-item,
  .project-list > li + li {
    margin-top: 0.1rem;
  }

  [data-section='contact'] .contact-list {
    columns: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.38rem;
    row-gap: 0.04rem;
    margin-top: 0.04rem;
  }

  [data-section='contact'] .contact-list li {
    break-inside: avoid-page;
    page-break-inside: avoid;
    margin: 0;
    padding: 0;
  }

  .entry-header {
    margin-bottom: 0.07rem;
  }

  .entry-title {
    font-size: 0.84rem;
    color: #111 !important;
  }

  .entry-meta {
    font-size: 0.74rem;
    color: #444 !important;
  }

  .entry-bullets {
    margin-top: 0.09rem;
    padding-left: 0.62rem;
    list-style: disc;
  }

  .entry-bullets li {
    margin: 0.04rem 0;
    padding-left: 0;
    line-height: 1.30;
  }

  .entry-bullets li::before {
    display: none;
  }

  .project-item > p,
  .education-item > p,
  .helper-note {
    margin: 0.02rem 0 0;
    font-size: 0.86rem;
    line-height: 1.30;
    color: #111 !important;
  }

  .resume-actions,
  .perspective-nav {
    display: none !important;
  }

  [data-section='summary'] > :not(h2):not([hidden]) {
    margin: 0 !important;
  }

  [data-section='summary'] {
    display: block !important;
  }

  [data-section='summary'] > :not(h2):not([hidden]) + :not(h2):not([hidden]) {
    margin-top: 0.12rem !important;
  }

  [data-section='summary'] > p.is-muted {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-inline: 0 !important;
  }

  /* Emphasis in print — subtle left-border callout */
  .is-emphasis {
    border: none !important;
    border-left: 1.5px solid #bbb !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    padding-left: 0.18rem !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  .is-emphasis::after {
    display: none !important;
    background: transparent !important;
  }

  .resume-section > p.is-emphasis,
  .resume-section > .experience-item.is-emphasis {
    margin: 0 !important;
  }

  .experience-item.is-emphasis,
  .project-item.is-emphasis,
  .education-item.is-emphasis,
  .skill-group.is-emphasis {
    padding: 0.1rem 0 !important;
    padding-left: 0.18rem !important;
  }

  .is-muted {
    opacity: 0.88;
    filter: none;
    color: #333 !important;
  }

  a,
  .resume-role,
  .resume-tagline {
    color: #111 !important;
    text-decoration: none;
  }

  /* Entry meta (dates/locations) uses a lighter shade for visual hierarchy —
     distinct from body text but still easily readable in print. */
  .entry-meta {
    color: #444 !important;
    text-decoration: none;
  }

  .resume-section > p,
  .resume-section li,
  .resume-section dt,
  .resume-section dd,
  .contact-list li,
  .contact-list li *,
  .skill-group,
  .skill-group h3 {
    color: #111 !important;
  }

  /* Ensure all animated glyph internals render as complete static line icons in print. */
  .viz-check {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    stroke-width: 1.8 !important;
    opacity: 0.98 !important;
  }

  .viz-shield {
    opacity: 0.98 !important;
  }

  .viz-dot-1,
  .viz-dot-2,
  .viz-dot-3,
  .viz-line-1,
  .viz-line-2,
  .viz-cursor,
  .viz-compass-center,
  .viz-compass-ring,
  .viz-node-core-1,
  .viz-node-core-2,
  .viz-node-core-3,
  .viz-node-outer-1,
  .viz-node-outer-2,
  .viz-node-outer-3,
  .viz-layer-mid-sep,
  .viz-edge {
    opacity: 1 !important;
  }

  /* Remove all remaining border-radius for clean print */
  .contact-list li,
  .skill-group h3,
  .perspective-link {
    border-radius: 0 !important;
  }

  /*
   * Override base.css responsive font-size clamps that leak into print.
   * Print should use fixed sizes, not viewport-dependent calculations.
   * Body-level text (summary paragraphs, experience bullets, project
   * descriptions) inherits naturally at ~15px / 11pt — do not override those.
   * Only normalize elements that have incorrect or inconsistent sizing.
   */
  .resume-section > p {
    font-size: 0.92rem;
    line-height: 1.38;
  }

  .entry-bullets li {
    font-size: 0.88rem;
    line-height: 1.32;
  }

  /*
   * General view emphasis suppression: the general/default perspective applies
   * is-emphasis to ALL elements (because all focus areas match). This creates
   * visual noise in print — left-border callouts on every item = nothing stands
   * out. Suppress the border in general view; keep it for perspective-specific
   * views where it guides the reader's eye to relevant content.
   */
  html[data-view='general'] .is-emphasis {
    border-left: none !important;
    padding-left: 0 !important;
  }

  html[data-view='general'] .is-emphasis.experience-item,
  html[data-view='general'] .is-emphasis.project-item,
  html[data-view='general'] .is-emphasis.education-item,
  html[data-view='general'] .is-emphasis.skill-group {
    padding-left: 0 !important;
  }
}