:root {
      /* Warm ivory premium palette */
      --paper: #fbf6ec;          /* main background — warm cream */
      --paper-2: #f6efe1;        /* subtly deeper cream for layering */
      --paper-3: #efe6d3;        /* card lift */
      --ink: #1c1814;            /* deep warm charcoal */
      --ink-strong: #0d0a07;     /* near-black for headlines */
      --muted: #5a5048;          /* warm muted */
      --muted-2: #6f6253;        /* secondary muted — darkened to meet WCAG AA (≈5:1) on small labels */
      --line: #e3d8c0;           /* hairline */
      --line-strong: #cdbfa3;    /* stronger line */

      /* Accents — share chroma, vary hue */
      --plum: oklch(0.45 0.09 320);
      --plum-2: oklch(0.55 0.10 320);
      --plum-soft: oklch(0.93 0.03 320);
      --copper: oklch(0.62 0.12 50);
      --copper-soft: oklch(0.94 0.04 60);
      --indigo: oklch(0.45 0.09 280);

      --focus: oklch(0.55 0.18 290);

      --radius-xl: 28px;
      --radius-lg: 22px;
      --radius-md: 14px;
      --radius-sm: 10px;

      --shadow-sm: 0 1px 2px rgba(28, 24, 20, 0.04), 0 2px 6px rgba(28, 24, 20, 0.04);
      --shadow-md: 0 1px 2px rgba(28, 24, 20, 0.05), 0 14px 32px -12px rgba(28, 24, 20, 0.10);
      --shadow-lg: 0 1px 2px rgba(28, 24, 20, 0.05), 0 28px 60px -20px rgba(28, 24, 20, 0.18);

      --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
      --serif: "Fraunces", ui-serif, Georgia, serif;
      --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    }

    * { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
    }

    /* Global keyboard focus ring */
    :focus-visible {
      outline: 2px solid var(--focus);
      outline-offset: 2px;
      border-radius: 4px;
    }

    /* Skip-to-content link — visible only when focused via keyboard */
    .skip-link {
      position: absolute;
      top: -48px;
      left: 12px;
      z-index: 1000;
      padding: 8px 14px;
      background: var(--ink-strong);
      color: var(--paper);
      text-decoration: none;
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 600;
      border-radius: 6px;
      transition: top 160ms ease;
    }
    .skip-link:focus { top: 12px; }

    /* Visually hidden but available to screen readers */
    .sr-only {
      position: absolute;
      width: 1px; height: 1px;
      margin: -1px; padding: 0;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    body {
      margin: 0;
      color: var(--ink);
      font-family: var(--sans);
      font-size: 15px;
      line-height: 1.55;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;

      background:
        radial-gradient(1200px 600px at 85% -10%, oklch(0.92 0.04 60 / 0.55), transparent 60%),
        radial-gradient(900px 500px at -10% 30%, oklch(0.90 0.04 320 / 0.45), transparent 60%),
        radial-gradient(700px 400px at 50% 110%, oklch(0.93 0.03 50 / 0.4), transparent 60%),
        var(--paper);
      background-attachment: fixed;
      min-height: 100vh;
    }

    /* Subtle paper grain (very faint) */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.25;
      mix-blend-mode: multiply;
      background-image:
        radial-gradient(circle at 25% 35%, rgba(122, 90, 50, 0.025) 0 1px, transparent 1.5px),
        radial-gradient(circle at 75% 65%, rgba(122, 90, 50, 0.02) 0 1px, transparent 1.5px);
      background-size: 4px 4px, 7px 7px;
    }

    a {
      color: var(--plum);
      text-decoration: none;
      position: relative;
      transition: color 180ms ease;
    }
    a:hover { color: var(--plum-2); }

    /* Animated underline for inline links */
    .link-underline,
    .contact-value a,
    .project-link {
      background-image: linear-gradient(var(--plum), var(--plum));
      background-repeat: no-repeat;
      background-size: 0% 1px;
      background-position: 0 100%;
      transition: background-size 280ms ease, color 180ms ease;
      padding-bottom: 1px;
    }
    .link-underline:hover,
    .contact-value a:hover,
    .project-link:hover {
      background-size: 100% 1px;
    }

    a:focus-visible,
    button:focus-visible {
      outline: 2px solid var(--focus);
      outline-offset: 3px;
      border-radius: 6px;
    }

    h1, h2, h3, h4, p, ul { margin-top: 0; }

    /* ───── Toolbar ───── */
    .toolbar {
      position: sticky;
      top: 0;
      z-index: 20;
      display: flex;
      justify-content: center;
      gap: 8px;
      padding: 12px 14px;
      background: oklch(0.98 0.01 75 / 0.7);
      backdrop-filter: saturate(140%) blur(14px);
      -webkit-backdrop-filter: saturate(140%) blur(14px);
      border-bottom: 1px solid oklch(0.85 0.02 70 / 0.5);
    }

    .tb-btn {
      appearance: none;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      background: var(--paper);
      color: var(--ink);
      cursor: pointer;
      font: 600 13px/1 var(--sans);
      letter-spacing: -0.005em;
      padding: 9px 14px;
      transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
    }
    .tb-btn:hover {
      border-color: var(--plum);
      box-shadow: var(--shadow-md);
      transform: translateY(-1px);
    }
    .tb-btn svg { width: 14px; height: 14px; }
    .tb-btn .copied {
      color: oklch(0.55 0.10 150);
      font-weight: 700;
    }

    /* ───── Language switcher ───── */
    .tb-btn.is-active { border-color: var(--plum); color: var(--plum); }
    .references-intro {
      margin: 0 0 24px;
      padding: 18px 20px;
      border: 1px solid var(--line-strong);
      border-left: 3px solid var(--plum);
      border-radius: 12px;
      background: var(--paper);
      font-size: 14px;
    }
    .references-intro h3 { margin-bottom: 8px; font-size: 17px; }
    .references-intro p:last-child { margin-bottom: 0; }
    .claim-references {
      margin: 10px 0 18px;
      padding: 10px 14px;
      border-left: 2px solid var(--line-strong);
      font-size: 13px;
      line-height: 1.5;
    }
    .reference-details summary { cursor: pointer; color: var(--plum); font-weight: 600; }
    .job-card .reference-list { margin: 8px 0 0; padding-left: 18px; }
    .job-card .reference-list li { margin: 6px 0; padding: 0; }
    .reference-link { overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; }
    .reference-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
    @media print { .references-only, .online-detail { display: none !important; } }

    .lang-switcher {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      background: var(--paper);
    }
    .lang-switcher .lang-button {
      appearance: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 11px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-family: var(--mono);
      font-size: 11.5px;
      font-weight: 500;
      letter-spacing: 0.02em;
      line-height: 1;
      transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
    }
    .lang-switcher .lang-button:hover {
      color: var(--ink);
      background: var(--paper-2);
    }
    .lang-switcher .lang-button:focus-visible {
      outline: 2px solid var(--focus);
      outline-offset: 2px;
    }
    .lang-switcher .lang-button[aria-current="page"] {
      background: var(--ink-strong);
      color: var(--paper);
      box-shadow: var(--shadow-sm);
    }
    @media (max-width: 480px) {
      .lang-switcher .lang-button {
        padding: 5px 8px;
        font-size: 10.5px;
      }
    }

    /* ───── Resume container ───── */
    .resume {
      position: relative;
      width: min(1180px, calc(100% - 28px));
      margin: 28px auto 60px;
      padding: 56px 56px 48px;
      background: linear-gradient(180deg, oklch(0.99 0.005 75) 0%, var(--paper) 100%);
      border: 1px solid oklch(0.88 0.02 70 / 0.7);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      z-index: 1;
    }

    /* Animated gradient hairline at top of resume */
    .resume::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg,
        transparent 0%,
        var(--plum) 25%,
        var(--copper) 55%,
        var(--indigo) 80%,
        transparent 100%);
      background-size: 200% 100%;
      animation: shimmer 12s linear infinite;
      opacity: 0.55;
    }
    @keyframes shimmer {
      0% { background-position: 0% 0; }
      100% { background-position: 200% 0; }
    }

    /* ───── Hero ───── */
    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
      gap: 40px;
      padding-bottom: 36px;
      border-bottom: 1px solid var(--line);
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      width: fit-content;
      margin-bottom: 30px;
      padding: 6px 11px 6px 9px;
      border: 1px solid oklch(0.85 0.04 60 / 0.7);
      border-radius: 999px;
      background: oklch(0.97 0.02 60 / 0.6);
      color: var(--muted);
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.02em;
    }
    .eyebrow .pulse {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: oklch(0.65 0.15 150);
      box-shadow: 0 0 0 0 oklch(0.65 0.15 150 / 0.55);
      animation: pulse 2.6s ease-out infinite;
    }
    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 oklch(0.65 0.15 150 / 0.55); }
      80%, 100% { box-shadow: 0 0 0 7px oklch(0.65 0.15 150 / 0); }
    }

    h1 {
      margin-bottom: 14px;
      color: var(--ink-strong);
      font-family: var(--serif);
      font-optical-sizing: auto;
      font-variation-settings: "opsz" 144, "SOFT" 50;
      font-size: clamp(48px, 6.5vw, 84px);
      font-weight: 500;
      line-height: 0.96;
      letter-spacing: -0.035em;
    }
    h1 .name-accent {
      font-style: italic;
      font-weight: 400;
      color: var(--plum);
      padding-right: 0.2em;
    }

    .title {
      max-width: 640px;
      margin: 0 0 18px;
      color: var(--ink);
      font-size: clamp(17px, 1.6vw, 21px);
      font-weight: 500;
      line-height: 1.35;
      letter-spacing: -0.012em;
    }
    .title .pipe {
      display: inline-block;
      width: 3px; height: 3px;
      border-radius: 50%;
      background: var(--copper);
      vertical-align: middle;
      margin: 0 9px 4px;
    }

    .hero-pitch {
      max-width: 640px;
      margin: 0 0 14px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: clamp(17px, 1.6vw, 20px);
      font-style: italic;
      font-weight: 400;
      line-height: 1.4;
      letter-spacing: -0.005em;
    }

    .hero-summary {
      max-width: 640px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.6;
      margin-bottom: 22px;
    }

    .ctas {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
    }
    .cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 11px 16px;
      border-radius: 999px;
      border: 1px solid var(--line-strong);
      background: var(--paper);
      color: var(--ink-strong);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: -0.005em;
      cursor: pointer;
      transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
    }
    .cta:hover {
      transform: translateY(-1px);
      border-color: var(--plum);
      box-shadow: var(--shadow-md);
      color: var(--plum);
    }
    .cta.primary {
      background: var(--ink-strong);
      border-color: var(--ink-strong);
      color: var(--paper);
    }
    .cta.primary:hover {
      background: var(--plum);
      border-color: var(--plum);
      color: #fff;
    }
    .cta svg { width: 14px; height: 14px; }

    /* Contact card */
    .contact-card {
      align-self: stretch;
      position: relative;
      display: grid;
      gap: 4px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background:
        linear-gradient(180deg, oklch(0.99 0.01 75) 0%, oklch(0.97 0.015 70) 100%);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      font-style: normal;
    }
    .contact-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      padding-bottom: 12px;
      border-bottom: 1px dashed var(--line);
    }
    .contact-card-head h2 {
      margin: 0;
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--muted-2);
    }
    .avatar-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px; height: 30px;
      border-radius: 50%;
      background: linear-gradient(140deg, var(--plum) 0%, var(--copper) 100%);
      color: #fff;
      font-family: var(--serif);
      font-style: italic;
      font-size: 16px;
      font-weight: 600;
      line-height: 1;
    }
    .contact-head-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .contact-bubble {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px; height: 30px;
      border-radius: 50%;
      border: 1px solid var(--line-strong);
      background: var(--paper);
      color: var(--muted-2);
      transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
    }
    .contact-bubble:hover {
      color: var(--plum);
      border-color: var(--plum);
      background: var(--plum-soft);
      transform: translateY(-1px);
    }
    .contact-bubble svg { width: 15px; height: 15px; }

    .contact-item {
      display: grid;
      grid-template-columns: 16px 88px minmax(0, 1fr);
      gap: 9px;
      align-items: center;
      padding: 7px 0;
      min-width: 0;
    }
    .contact-item + .contact-item {
      border-top: 1px solid oklch(0.91 0.02 70 / 0.6);
    }
    .contact-item .ico {
      width: 14px; height: 14px;
      color: var(--muted-2);
      flex-shrink: 0;
    }
    .contact-label {
      color: var(--muted-2);
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .contact-value {
      color: var(--ink);
      font-size: 13px;
      font-weight: 500;
      overflow-wrap: anywhere;
    }
    .contact-value a { color: var(--ink); }
    .contact-value a:hover { color: var(--plum); }

    /* ───── Proof strip ───── */
    .proof-strip {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin: 36px 0 8px;
    }
    .proof-card {
      position: relative;
      padding: 22px 20px 20px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: linear-gradient(180deg, oklch(0.99 0.005 75) 0%, oklch(0.97 0.015 70) 100%);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
    }
    .proof-card:hover {
      transform: translateY(-2px);
      border-color: oklch(0.78 0.06 60 / 0.7);
      box-shadow: var(--shadow-md);
    }
    .proof-card::before {
      content: "";
      position: absolute;
      top: 0; left: 0;
      width: 36px; height: 1px;
      background: var(--copper);
    }
    .proof-icon {
      position: absolute;
      top: 18px; right: 18px;
      width: 18px; height: 18px;
      color: var(--muted-2);
      opacity: 0.55;
    }
    .proof-value {
      display: block;
      margin-bottom: 6px;
      color: var(--ink-strong);
      font-family: var(--serif);
      font-variation-settings: "opsz" 96;
      font-size: 38px;
      font-weight: 500;
      letter-spacing: -0.04em;
      line-height: 1;
    }
    .proof-value .small {
      font-size: 22px;
      vertical-align: top;
      letter-spacing: -0.02em;
    }
    .proof-label {
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.4;
      max-width: 24ch;
    }

    /* ───── Section heads ───── */
    .section { margin-top: 44px; }

    .section-title {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 22px;
    }
    .section-title h2 {
      margin: 0;
      color: var(--ink-strong);
      font-family: var(--serif);
      font-size: 30px;
      font-weight: 500;
      letter-spacing: -0.025em;
      line-height: 1;
    }
    .section-title .num {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--muted-2);
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .section-title .num::before {
      content: "";
      display: inline-block;
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--copper);
    }
    .section-title .rule {
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, var(--line) 0%, transparent 100%);
    }

    /* ───── Body grid ───── */
    .body-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.85fr);
      gap: 44px;
      align-items: start;
      margin-top: 44px;
    }

    /* ───── Expertise cards (in main, full-width row) ───── */
    .expertise-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
    .expertise-card {
      position: relative;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: oklch(0.99 0.005 75 / 0.7);
      transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
    }
    .expertise-card:hover {
      transform: translateY(-2px);
      border-color: oklch(0.65 0.08 320 / 0.4);
      box-shadow: var(--shadow-md);
      background: #fff;
    }
    .expertise-card .ec-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }
    .expertise-card .ec-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px; height: 28px;
      border-radius: 8px;
      background: var(--plum-soft);
      color: var(--plum);
    }
    .expertise-card .ec-icon svg { width: 14px; height: 14px; }
    .expertise-card h3 {
      margin: 0;
      color: var(--ink-strong);
      font-size: 13.5px;
      font-weight: 700;
      letter-spacing: -0.01em;
    }
    .expertise-card p {
      margin: 0;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.5;
    }
    .expertise-card.copper .ec-icon { background: var(--copper-soft); color: var(--copper); }
    .expertise-card.indigo .ec-icon { background: oklch(0.93 0.03 280); color: var(--indigo); }

    /* ───── Open Source Highlights ───── */
    .os-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .os-card {
      position: relative;
      padding: 18px 18px 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: oklch(0.99 0.005 75 / 0.7);
      transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
      overflow: hidden;
    }
    .os-card::before {
      content: "";
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      background: linear-gradient(180deg, var(--plum), var(--copper));
      opacity: 0.5;
    }
    .os-card:hover {
      transform: translateY(-2px);
      border-color: oklch(0.65 0.08 320 / 0.4);
      box-shadow: var(--shadow-md);
      background: #fff;
    }
    .os-card .os-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 7px;
    }
    .os-card h3 {
      margin: 0;
      color: var(--ink-strong);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -0.01em;
    }
    .os-card .os-badge {
      flex-shrink: 0;
      font-family: var(--mono);
      font-size: 10.5px;
      font-weight: 600;
      color: var(--copper);
      padding: 3px 8px;
      border-radius: 999px;
      background: var(--copper-soft);
      border: 1px solid oklch(0.85 0.06 60 / 0.5);
      white-space: nowrap;
    }
    .os-card p {
      margin: 0;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.5;
    }
    .os-card strong { color: var(--ink); font-weight: 600; }

    /* ───── Experience timeline ───── */
    .experience {
      position: relative;
    }
    .job {
      position: relative;
      padding: 0 0 24px 32px;
    }
    .job::before {
      content: "";
      position: absolute;
      left: 6px; top: 0; bottom: 0;
      width: 1px;
      background: linear-gradient(180deg, var(--line-strong), var(--line));
    }
    .job:last-child::before { background: linear-gradient(180deg, var(--line-strong) 0%, var(--line-strong) 30px, transparent 30px); }
    .job::after {
      content: "";
      position: absolute;
      left: 0; top: 6px;
      width: 13px; height: 13px;
      border-radius: 50%;
      background: var(--paper);
      border: 2px solid var(--plum);
      box-shadow: 0 0 0 4px var(--paper);
      transition: background 200ms ease, transform 200ms ease;
    }
    .job:hover::after {
      background: var(--plum);
      transform: scale(1.1);
    }
    .job.featured::after {
      background: var(--plum);
      box-shadow: 0 0 0 4px var(--paper), 0 0 0 7px oklch(0.7 0.10 320 / 0.3);
    }

    .job-card {
      padding: 18px 20px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: oklch(0.99 0.005 75 / 0.6);
      transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
    }
    .job-card:hover {
      transform: translateY(-1px);
      border-color: oklch(0.65 0.08 320 / 0.4);
      box-shadow: var(--shadow-md);
      background: #fff;
    }
    .job.featured .job-card {
      background: linear-gradient(180deg, oklch(0.97 0.02 320 / 0.4) 0%, oklch(0.99 0.005 75) 100%);
      border-color: oklch(0.83 0.04 320 / 0.5);
    }

    .job-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 16px;
      align-items: baseline;
      margin-bottom: 10px;
    }
    .job h3 {
      margin: 0 0 3px;
      color: var(--ink-strong);
      font-family: var(--serif);
      font-size: 19px;
      font-weight: 500;
      letter-spacing: -0.02em;
      line-height: 1.2;
    }
    .role {
      margin: 0;
      color: var(--plum);
      font-size: 12.5px;
      font-weight: 600;
      letter-spacing: 0.005em;
    }
    .job-meta {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 10.5px;
      font-weight: 500;
      line-height: 1.4;
      text-align: right;
      white-space: nowrap;
    }

    .job ul {
      margin-bottom: 0;
      padding-left: 1.05rem;
    }
    .job ul li {
      margin-bottom: 7px;
      color: var(--ink);
      font-size: 13.5px;
      line-height: 1.55;
    }
    .job ul li::marker {
      color: var(--copper);
    }
    .job ul li:last-child { margin-bottom: 0; }
    .job li strong { color: var(--ink-strong); font-weight: 700; }

    .earlier-roles {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px 16px;
      margin: 0;
      padding: 0;
      list-style: none;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
    }
    .job .earlier-roles li {
      margin: 0;
      padding: 8px 0 0;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: inherit;
      line-height: inherit;
    }
    .earlier-roles strong {
      color: var(--ink-strong);
      font-weight: 600;
    }

    /* ───── Project cards ───── */
    .project-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .project-card {
      position: relative;
      padding: 16px 18px 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: oklch(0.99 0.005 75 / 0.6);
      transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
    }
    .project-card:hover {
      transform: translateY(-2px);
      border-color: oklch(0.65 0.08 320 / 0.4);
      box-shadow: var(--shadow-md);
      background: #fff;
    }
    .project-card .pc-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }
    .project-card h3 {
      margin: 0;
      color: var(--ink-strong);
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: -0.01em;
    }
    .pc-ext {
      width: 14px; height: 14px;
      color: var(--muted-2);
      transition: transform 220ms ease, color 220ms ease;
      flex-shrink: 0;
    }
    .project-card:hover .pc-ext {
      color: var(--plum);
      transform: translate(2px, -2px);
    }
    .project-link {
      display: inline-block;
      margin-bottom: 8px;
      color: var(--plum);
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 500;
      overflow-wrap: anywhere;
    }
    .project-links {
      display: flex;
      flex-wrap: wrap;
      gap: 0 12px;
      margin-bottom: 8px;
    }
    .project-card p {
      margin: 0;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.5;
    }

    /* ───── Sidebar panels ───── */
    .sidebar { display: grid; gap: 14px; }
    .side-panel {
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: linear-gradient(180deg, oklch(0.99 0.005 75) 0%, oklch(0.97 0.015 70) 100%);
      box-shadow: var(--shadow-sm);
    }
    .side-panel-head {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 14px;
      padding-bottom: 12px;
      border-bottom: 1px dashed var(--line);
    }
    .side-panel-head h2 {
      margin: 0;
      color: var(--ink-strong);
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 500;
      letter-spacing: -0.015em;
    }
    .side-panel-head .sp-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px; height: 24px;
      border-radius: 7px;
      background: var(--copper-soft);
      color: var(--copper);
    }
    .side-panel-head .sp-icon svg { width: 13px; height: 13px; }

    /* Impact list */
    .impact-list {
      margin: 0;
      padding-left: 0;
      list-style: none;
    }
    .impact-list li {
      position: relative;
      padding: 10px 0 10px 18px;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.5;
      border-top: 1px solid oklch(0.91 0.02 70 / 0.6);
    }
    .impact-list li:first-child { border-top: 0; padding-top: 2px; }
    .impact-list li:last-child { padding-bottom: 0; }
    .impact-list li::before {
      content: "";
      position: absolute;
      left: 0; top: 17px;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--copper);
    }
    .impact-list li:first-child::before { top: 9px; }
    .impact-list strong { color: var(--ink-strong); font-weight: 600; }

    /* Education */
    .edu-group {
      padding: 12px 0;
      border-top: 1px solid oklch(0.91 0.02 70 / 0.6);
    }
    .edu-group:first-of-type { padding-top: 0; border-top: 0; }
    .edu-group:last-child { padding-bottom: 0; }
    .edu-group h3 {
      margin: 0 0 4px;
      color: var(--ink-strong);
      font-size: 13.5px;
      font-weight: 600;
      letter-spacing: -0.01em;
    }
    .edu-group p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    /* Languages */
    .lang-list {
      display: grid;
      gap: 10px;
    }
    .lang-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .lang-row strong {
      color: var(--ink-strong);
      font-size: 13px;
      font-weight: 600;
    }
    .lang-row span {
      color: var(--muted);
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.02em;
    }

    /* Tag row */
    .tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .tag {
      display: inline-flex;
      align-items: center;
      border: 1px solid oklch(0.85 0.04 70 / 0.6);
      border-radius: 999px;
      background: oklch(0.97 0.01 75 / 0.8);
      color: var(--ink);
      font-family: var(--mono);
      font-size: 10.5px;
      font-weight: 500;
      letter-spacing: 0.005em;
      padding: 4px 9px;
      transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
    }
    .tag:hover {
      border-color: var(--plum);
      color: var(--plum);
      background: var(--plum-soft);
    }

    /* ───── Sidebar Summary (3-paragraph form) ───── */
    .summary-body p {
      margin: 0 0 9px;
      color: var(--ink);
      font-size: 13px;
      line-height: 1.6;
    }
    .summary-body p:last-child { margin-bottom: 0; }
    .summary-body strong {
      color: var(--ink-strong);
      font-weight: 600;
    }

    /* ───── Compact repository chips ───── */
    .repo-intro {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 13.5px;
      line-height: 1.55;
      max-width: 70ch;
    }
    .repo-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 18px;
    }
    a.tag.repo-chip {
      text-decoration: none;
      background-image: none !important;
      padding-bottom: 4px;
    }
    a.tag.repo-chip::before {
      content: "↗";
      margin-right: 6px;
      opacity: 0.55;
      font-size: 10px;
      transition: opacity 180ms ease, transform 180ms ease;
    }
    a.tag.repo-chip:hover::before {
      opacity: 1;
      transform: translate(1px, -1px);
    }

    /* ───── Social Preview Card ───── */
    .social-preview-section {
      margin-top: 56px;
      display: none;
    }
    .social-preview-section.is-revealed {
      display: block;
    }
    .sps-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 18px;
    }
    .sps-head .left {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .sps-head h2 {
      margin: 0;
      color: var(--ink-strong);
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 500;
      letter-spacing: -0.02em;
    }
    .sps-head .num {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--muted-2);
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .sps-head .num::before {
      content: "";
      display: inline-block;
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--copper);
    }
    .sps-hint {
      color: var(--muted);
      font-size: 12px;
      max-width: 360px;
    }

    .social-preview-card {
      position: relative;
      width: 100%;
      max-width: 1200px;
      aspect-ratio: 1200 / 630;
      margin: 0 auto;
      padding: 64px 72px;
      border-radius: var(--radius-xl);
      overflow: hidden;
      color: oklch(0.97 0.01 75);
      background:
        radial-gradient(900px 500px at 100% 0%, oklch(0.55 0.13 50 / 0.55), transparent 60%),
        radial-gradient(700px 500px at 0% 100%, oklch(0.45 0.12 280 / 0.55), transparent 60%),
        linear-gradient(135deg, oklch(0.22 0.05 320) 0%, oklch(0.16 0.04 290) 100%);
      box-shadow: var(--shadow-lg);
      display: grid;
      grid-template-rows: auto 1fr auto;
    }

    /* Subtle node motif */
    .social-preview-card svg.nodes {
      position: absolute;
      right: -40px; bottom: -40px;
      width: 360px; height: 360px;
      opacity: 0.18;
      pointer-events: none;
    }
    .social-preview-card .grid-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(oklch(0.97 0.01 75 / 0.04) 1px, transparent 1px),
        linear-gradient(90deg, oklch(0.97 0.01 75 / 0.04) 1px, transparent 1px);
      background-size: 40px 40px;
      mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
    }

    .sps-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      position: relative;
    }
    .sps-mark {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-family: var(--mono);
      font-size: 13px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: oklch(0.85 0.05 60);
    }
    .sps-mark .dot {
      width: 10px; height: 10px;
      border-radius: 50%;
      background: linear-gradient(140deg, oklch(0.7 0.15 50), oklch(0.55 0.12 320));
      box-shadow: 0 0 18px oklch(0.7 0.15 50 / 0.6);
    }
    .sps-meta {
      font-family: var(--mono);
      font-size: 12px;
      color: oklch(0.75 0.04 60 / 0.85);
      letter-spacing: 0.04em;
    }

    .sps-body {
      align-self: center;
      position: relative;
    }
    .sps-name {
      margin: 0 0 14px;
      color: oklch(0.98 0.01 75);
      font-family: var(--serif);
      font-size: 72px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: -0.035em;
    }
    .sps-name em {
      font-style: italic;
      font-weight: 400;
      color: oklch(0.78 0.10 50);
      font-size: 64px;
      letter-spacing: -0.03em;
    }
    .sps-role {
      margin: 0 0 20px;
      color: oklch(0.88 0.03 60);
      font-size: 20px;
      font-weight: 500;
      letter-spacing: -0.012em;
      max-width: 100%;
    }
    .sps-keywords {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      max-width: 100%;
    }
    .sps-keywords span {
      padding: 7px 14px;
      border-radius: 999px;
      border: 1px solid oklch(0.97 0.01 75 / 0.18);
      background: oklch(0.97 0.01 75 / 0.06);
      backdrop-filter: blur(4px);
      font-family: var(--mono);
      font-size: 12.5px;
      letter-spacing: 0.02em;
      color: oklch(0.92 0.02 75);
    }

    .sps-bottom {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 20px;
      position: relative;
    }
    .sps-stats {
      display: flex;
      gap: 36px;
    }
    .sps-stat {
      display: grid;
      gap: 4px;
    }
    .sps-stat b {
      color: oklch(0.97 0.01 75);
      font-family: var(--serif);
      font-size: 32px;
      font-weight: 500;
      letter-spacing: -0.03em;
      line-height: 1;
    }
    .sps-stat span {
      color: oklch(0.78 0.04 60);
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .sps-handle {
      font-family: var(--mono);
      font-size: 13px;
      color: oklch(0.85 0.04 60);
      letter-spacing: 0.04em;
    }

    /* ───── Footer ───── */
    .resume-footer {
      margin-top: 96px;
      padding-top: 28px;
      border-top: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      color: var(--muted-2);
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.02em;
    }

    /* Additional evidence panels used only by the three-page PDF layout. */
    .print-only { display: none; }

    /* ───── Reduced motion ───── */
    @media (prefers-reduced-motion: reduce) {
      * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
      }
    }

    /* ───── Responsive ───── */
    @media (max-width: 1000px) {
      .resume { padding: 40px 32px; }
      .hero {
        grid-template-columns: 1fr;
        gap: 28px;
      }
      .body-grid {
        grid-template-columns: 1fr;
        gap: 28px;
      }
      .proof-strip { grid-template-columns: repeat(2, 1fr); }
      .expertise-grid { grid-template-columns: repeat(2, 1fr); }
      .os-grid, .project-grid { grid-template-columns: 1fr; }
      h1 { font-size: 60px; }
      .sps-name { font-size: 64px; }
      .sps-role { font-size: 18px; }
      .sps-stat b { font-size: 24px; }
    }

    @media (max-width: 620px) {
      body {
        overflow-x: hidden;
        font-size: 14px;
      }
      .toolbar {
        position: sticky;
        top: 0;
        z-index: 20;
        flex-wrap: wrap;
        justify-content: center;
        padding: 8px 10px;
        gap: 6px;
      }
      .toolbar > * { min-width: 0; }
      .tb-btn {
        gap: 5px;
        padding: 6px 8px;
        font-size: 11px;
      }
      .tb-btn svg { width: 12px; height: 12px; }
      .lang-button {
        padding: 6px 9px;
        font-size: 11.5px;
      }
      .resume {
        width: min(100% - 16px, 1180px);
        margin: 12px auto 32px;
        padding: 26px 20px;
        border-radius: 22px;
      }
      .hero > *,
      .contact-card,
      .technical-line,
      .hero-pitch,
      .hero-summary {
        min-width: 0;
        max-width: 100%;
      }
      .eyebrow {
        width: 100%;
        max-width: 100%;
        border-radius: 16px;
      }
      .eyebrow > span:last-child { min-width: 0; }
      .ctas .cta { max-width: 100%; }
      h1 { font-size: 44px; }
      .title { font-size: 16px; }
      .proof-strip { grid-template-columns: 1fr; gap: 10px; }
      .expertise-grid { grid-template-columns: 1fr; }
      .job { padding-left: 26px; }
      .job-head {
        grid-template-columns: 1fr;
        gap: 4px;
      }
      .job-meta { text-align: left; white-space: normal; }
      .earlier-roles { grid-template-columns: 1fr; }
      .section-title h2 { font-size: 24px; }
      .social-preview-card { padding: 32px 28px; aspect-ratio: auto; }
      .sps-name { font-size: 38px; }
      .sps-role { font-size: 14px; max-width: 100%; }
      .sps-stat b { font-size: 20px; }
      .sps-keywords span { font-size: 10.5px; padding: 5px 10px; }
      .sps-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
    }

    /* ───── Refinements ───── */

    .proof-value,
    .sps-stat b,
    .job-meta,
    .lang-row span,
    .contact-label,
    .os-badge,
    .repo-intro,
    .resume-footer {
      font-variant-numeric: tabular-nums lining-nums;
      font-feature-settings: "tnum" 1, "lnum" 1, "ss01" 1, "calt" 1;
    }

    h1, h2, h3, .sps-name {
      font-feature-settings: "ss01" 1, "calt" 1, "kern" 1;
    }

    h1, h2, h3,
    .section-title h2,
    .sps-name,
    .sps-role {
      text-wrap: balance;
    }

    p,
    .hero-pitch,
    .hero-summary,
    .summary-body p,
    .expertise-card p,
    .os-card p,
    .job ul li,
    .project-card p,
    .impact-list li,
    .earlier-roles {
      text-wrap: pretty;
    }

    a {
      text-decoration-thickness: 0.06em;
      text-underline-offset: 0.22em;
      text-decoration-skip-ink: auto;
    }

    ::selection {
      background: oklch(0.78 0.10 320 / 0.55);
      color: var(--ink-strong);
    }

    html {
      scrollbar-width: thin;
      scrollbar-color: var(--line-strong) transparent;
    }
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
      background: var(--line-strong);
      border: 2px solid transparent;
      background-clip: content-box;
      border-radius: 999px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: oklch(0.55 0.09 320 / 0.55);
      background-clip: content-box;
    }

    :where([id]) { scroll-margin-top: 84px; }

    @keyframes pulse {
      0%   { box-shadow: 0 0 0 0 oklch(0.65 0.15 150 / 0.55); }
      70%  { box-shadow: 0 0 0 9px oklch(0.65 0.15 150 / 0); }
      100% { box-shadow: 0 0 0 9px oklch(0.65 0.15 150 / 0); }
    }
    .eyebrow .pulse {
      animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    }

    @supports (background-clip: text) {
      h1 .name-accent {
        background: linear-gradient(120deg, var(--plum) 0%, var(--copper) 95%);
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
                color: transparent;
        /* Italic overhang and tight line-height can clip the dot of the final
           "i" — pad the box on top and right so nothing is cut off. */
        padding-top: 0.1em;
        padding-right: 0.2em;
      }
    }

    .cta.primary {
      background:
        linear-gradient(180deg, oklch(0.20 0.02 30) 0%, var(--ink-strong) 100%);
      box-shadow:
        inset 0 1px 0 oklch(0.97 0.01 75 / 0.10),
        0 1px 2px rgba(28, 24, 20, 0.10);
    }
    .cta.primary:hover {
      background:
        linear-gradient(180deg, var(--plum-2) 0%, var(--plum) 100%);
      box-shadow:
        inset 0 1px 0 oklch(0.97 0.01 75 / 0.18),
        0 8px 20px -8px oklch(0.45 0.09 320 / 0.55);
    }

    .proof-card,
    .expertise-card,
    .os-card,
    .project-card,
    .job-card,
    .cta,
    .tb-btn,
    .contact-bubble {
      will-change: transform;
    }

    .tag {
      transition:
        border-color 180ms ease,
        color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
    }
    .tag:hover { transform: translateY(-1px); }

    a.tag.repo-chip { transition: border-color 180ms ease, color 180ms ease, background 180ms ease, transform 180ms ease; }
    a.tag.repo-chip:hover { transform: translateY(-1px); }

    .project-card:hover .pc-ext { transform: translate(2px, -2px) rotate(-2deg); }

    .impact-list li::before,
    .section-title .num::before {
      box-shadow: 0 0 0 2px oklch(0.62 0.12 50 / 0.18);
    }

    .section-title .rule {
      background: linear-gradient(90deg, var(--line-strong) 0%, transparent 100%);
      opacity: 0.85;
    }

    .side-panel-head .sp-icon {
      box-shadow:
        inset 0 0 0 1px oklch(0.85 0.06 60 / 0.45),
        0 1px 2px oklch(0.55 0.10 50 / 0.10);
    }

    .avatar-mark {
      box-shadow:
        inset 0 1px 0 oklch(0.97 0.01 75 / 0.25),
        0 4px 10px -4px oklch(0.45 0.09 320 / 0.45);
    }

    .job.featured::after {
      box-shadow:
        0 0 0 4px var(--paper),
        0 0 0 7px oklch(0.7 0.10 320 / 0.30),
        0 0 18px oklch(0.55 0.10 320 / 0.35);
    }

    .tb-btn:hover { color: var(--plum); }
    .tb-btn:hover svg { color: var(--plum); }

    .tb-btn .copied {
      animation: copied-pop 280ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    @keyframes copied-pop {
      0%   { transform: translateY(-2px); opacity: 0; }
      100% { transform: none; opacity: 1; }
    }

    .sps-name {
      text-shadow: 0 1px 30px oklch(0.45 0.09 320 / 0.35);
    }

    /* ───── Protocol-first positioning ───── */
    .person-name {
      margin: 0 0 10px;
      color: var(--muted-2);
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    h1 {
      max-width: 760px;
      font-size: clamp(44px, 5.8vw, 72px);
      line-height: 0.98;
    }

    .technical-line {
      color: var(--plum);
      font-family: var(--mono);
      font-size: clamp(14px, 1.5vw, 17px);
      font-weight: 600;
      letter-spacing: -0.02em;
    }

    .hero-pitch {
      max-width: 680px;
      font-style: normal;
      font-size: clamp(17px, 1.55vw, 20px);
    }

    button.cta {
      appearance: none;
      font-family: var(--sans);
    }

    .section-intro {
      max-width: 68ch;
      margin: -8px 0 20px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55;
    }

    .impact-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border-top: 1px solid var(--line-strong);
      border-bottom: 1px solid var(--line-strong);
    }

    .impact-card {
      padding: 24px 26px 22px 0;
      border-bottom: 1px solid var(--line);
    }
    .impact-card:nth-child(even) {
      padding-right: 0;
      padding-left: 26px;
      border-left: 1px solid var(--line);
    }
    .impact-card:nth-last-child(-n + 2) { border-bottom: 0; }

    .impact-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }
    .impact-card h3 {
      margin: 0;
      color: var(--ink-strong);
      font-family: var(--serif);
      font-size: 20px;
      font-weight: 600;
      letter-spacing: -0.02em;
    }
    .impact-card p {
      display: grid;
      grid-template-columns: 9.5rem 1fr;
      gap: 12px;
      margin: 0;
      padding: 8px 0;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }
    .impact-card p strong {
      color: var(--muted-2);
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .evidence-links {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 12px;
      padding-top: 10px;
      border-top: 1px solid var(--line);
      font-family: var(--mono);
      font-size: 10.5px;
    }
    .evidence-links > span {
      margin-right: auto;
      color: var(--muted-2);
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .evidence-links a::after { content: " ↗"; opacity: 0.55; }

    .expertise-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .expertise-card:nth-child(n) { grid-column: span 2; }

    .body-grid {
      display: block;
      margin-top: 0;
    }
    .main-column { width: 100%; }

    .supporting-sections { width: 100%; }
    .teaching-grid,
    .credentials-grid {
      display: grid;
      gap: 14px;
      align-items: stretch;
    }
    .teaching-grid { grid-template-columns: 0.85fr 0.85fr 1.3fr; }
    .credentials-grid { grid-template-columns: 1.2fr 0.8fr; }
    .teaching-grid .side-panel,
    .credentials-grid .side-panel { box-shadow: none; }
    .teaching-grid h3,
    .credentials-grid h3 {
      margin: 0 0 8px;
      color: var(--ink-strong);
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 600;
      letter-spacing: -0.015em;
    }
    .teaching-grid p,
    .credentials-grid p {
      margin: 0 0 8px;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.55;
    }
    .credentials-grid p:last-child { margin-bottom: 0; }

    .contact-cta {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 32px;
      margin-top: 52px;
      padding: 32px 34px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-lg);
      background:
        radial-gradient(420px 180px at 100% 0%, oklch(0.88 0.05 320 / 0.45), transparent 70%),
        var(--paper-2);
    }
    .contact-cta-eyebrow {
      margin: 0 0 8px;
      color: var(--plum);
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .contact-cta h2 {
      max-width: 18ch;
      margin: 0 0 8px;
      color: var(--ink-strong);
      font-family: var(--serif);
      font-size: clamp(26px, 3vw, 38px);
      font-weight: 500;
      line-height: 1.08;
      letter-spacing: -0.03em;
    }
    .contact-cta p:last-child { margin: 0; color: var(--muted); }
    .contact-cta-actions { display: flex; flex-wrap: wrap; gap: 8px; }

    @media (max-width: 1000px) {
      .expertise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .expertise-card:nth-child(n) { grid-column: auto; }
      .teaching-grid,
      .credentials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .teaching-grid .side-panel:last-child,
      .credentials-grid .side-panel:first-child { grid-column: 1 / -1; }
    }

    @media (max-width: 700px) {
      .impact-grid,
      .teaching-grid,
      .credentials-grid { grid-template-columns: 1fr; }
      .impact-card,
      .impact-card:nth-child(even) {
        padding: 20px 0;
        border-left: 0;
        border-bottom: 1px solid var(--line);
      }
      .impact-card:nth-last-child(2) { border-bottom: 1px solid var(--line); }
      .impact-card:last-child { border-bottom: 0; }
      .impact-card p { grid-template-columns: 1fr; gap: 4px; }
      .teaching-grid .side-panel:last-child,
      .credentials-grid .side-panel:first-child { grid-column: auto; }
      .contact-cta { align-items: flex-start; flex-direction: column; padding: 26px 22px; }
    }

    /* ───── Classic editorial screen layout ─────
       The broader Go and distributed-systems positioning uses the established
       name-led hero, balanced expertise cards, a wide evidence/timeline
       column, and a continuous supporting sidebar. */
    @media screen {
      .person-name {
        margin: 0 0 6px;
        color: var(--ink-strong);
        font-family: var(--serif);
        font-size: clamp(46px, 5vw, 68px);
        font-weight: 500;
        letter-spacing: -0.055em;
        line-height: 0.96;
        text-transform: none;
        text-wrap: balance;
      }
      .person-name .name-accent {
        font-style: italic;
        font-weight: 400;
      }
      h1 {
        max-width: 100%;
        margin: 0 0 6px;
        font-family: var(--sans);
        font-size: clamp(20px, 2.15vw, 28px);
        font-weight: 650;
        letter-spacing: -0.035em;
        line-height: 1.08;
        text-wrap: balance;
      }
      .technical-line {
        margin-bottom: 12px;
        font-size: clamp(13px, 1.25vw, 16px);
      }
      .hero-pitch {
        max-width: 65ch;
        font-family: var(--serif);
        font-size: clamp(16px, 1.4vw, 18px);
        font-style: italic;
        line-height: 1.48;
        text-wrap: pretty;
      }
      .hero-summary { max-width: 68ch; }

      .section[aria-labelledby="expertise-title"] { width: 100%; }
      .expertise-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
      .expertise-card:nth-child(n) { grid-column: span 2; }

      .body-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.62fr) minmax(290px, 0.88fr);
        gap: 28px;
        align-items: start;
        margin-top: 48px;
      }
      .main-column,
      .supporting-sections { width: auto; }
      .main-column > .protocol-impact { margin-top: 0; }

      .impact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        border: 0;
      }
      .impact-card,
      .impact-card:nth-child(even) {
        position: relative;
        padding: 18px 18px 16px;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        background: oklch(0.99 0.005 75 / 0.72);
        overflow: hidden;
        transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
      }
      .impact-card:nth-last-child(-n + 2) { border-bottom: 1px solid var(--line); }
      .impact-card::before {
        content: "";
        position: absolute;
        inset: 8px auto 8px 0;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--copper);
        opacity: 0.6;
      }
      .impact-card:hover {
        transform: translateY(-2px);
        border-color: oklch(0.65 0.08 320 / 0.4);
        background: #fff;
        box-shadow: var(--shadow-md);
      }
      .impact-card-head { margin-bottom: 8px; }
      .impact-card h3 { font-size: 15px; }
      .impact-card p {
        grid-template-columns: 7.25rem 1fr;
        gap: 8px;
        padding: 6px 0;
        font-size: 12px;
        line-height: 1.4;
      }
      .impact-card p strong { font-size: 9px; }
      .evidence-links { gap: 5px 9px; padding-top: 7px; font-size: 9.5px; }

      .supporting-sections {
        display: grid;
        gap: 14px;
      }
      .print-sidebar-only {
        display: grid !important;
        gap: 14px;
      }
      .supporting-sections > .section {
        margin-top: 0;
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: linear-gradient(180deg, oklch(0.99 0.005 75) 0%, oklch(0.97 0.015 70) 100%);
        box-shadow: var(--shadow-sm);
      }
      .supporting-sections > .section .section-title {
        margin: 0 0 14px;
        padding-bottom: 12px;
        border-bottom: 1px dashed var(--line);
      }
      .supporting-sections > .section .section-title .num,
      .supporting-sections > .section .section-title .rule { display: none; }
      .supporting-sections > .section .section-title h2 {
        font-size: 17px;
        font-weight: 500;
      }
      .teaching-grid,
      .credentials-grid { display: block; }
      .teaching-grid .side-panel,
      .credentials-grid .side-panel {
        margin: 0;
        padding: 10px 0;
        border: 0;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }
      .teaching-grid .side-panel:first-child,
      .credentials-grid .side-panel:first-child { padding-top: 0; }
      .teaching-grid .side-panel:last-child,
      .credentials-grid .side-panel:last-child {
        padding-bottom: 0;
        border-bottom: 0;
      }
      .teaching-grid h3,
      .credentials-grid h3 { font-size: 14px; }
      .teaching-grid p,
      .credentials-grid p { font-size: 12px; line-height: 1.45; }

      .contact-cta { display: none; }
    }

    @media screen and (max-width: 1000px) {
      .expertise-card:nth-child(n) { grid-column: span 3; }
      .body-grid { grid-template-columns: 1fr; gap: 28px; }
      .supporting-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .print-sidebar-only { display: contents !important; }
    }

    @media screen and (max-width: 700px) {
      .person-name { font-size: clamp(40px, 13vw, 54px); }
      h1 { font-size: clamp(19px, 6vw, 24px); }
      .expertise-grid,
      .impact-grid,
      .supporting-sections { grid-template-columns: 1fr; }
      .expertise-card:nth-child(n),
      .expertise-card:last-child { grid-column: auto; }
      .impact-card,
      .impact-card:nth-child(even) { padding: 18px; }
      .impact-card p { grid-template-columns: 1fr; gap: 3px; }
    }

    .earlier-experience { margin-top: 20px; }
    .earlier-job { margin: 0 0 8px; }
    .earlier-job h4 { margin: 0; font-size: 14px; }
    .earlier-job p { margin: 2px 0 0; font-size: 12px; }
    .personal-projects p, .online-project-list { font-size: 13px; line-height: 1.45; }
    .online-project-list { padding-left: 20px; }
    .online-project-list > li { margin-bottom: 12px; }

    /* ───── Print / PDF ─────
       One coherent, single-column stylesheet for the exported CV.

       ATS constraints honoured here:
       - Single column, top-to-bottom reading order that matches the DOM.
       - Contact details as plain text directly under the name (no boxes,
         no icons, nothing in page headers or footers).
       - Conventional section names: Professional Summary, Technical
         Skills, Professional Experience, Education & Certifications,
         Languages.
       - Static system fonts only. Google Fonts serves Inter / Fraunces /
         JetBrains Mono as variable fonts, which Chrome's PDF engine embeds
         as Type 3 outlines; static TrueType faces embed as real CID fonts
         with a Unicode map, for extraction checks with the installed PDF readers.
       - No auto-hyphenation (soft hyphens break keyword matching).
       Everything screen-only (toolbar, proof strip, impact cards, share
       preview, footer) is removed rather than restyled. */
    @page {
      size: A4;
      margin: 10mm 14mm;
    }
    @media print {
      :root {
        --paper: #ffffff;
        --paper-2: #ffffff;
        --ink: #161616;
        --ink-strong: #0b0b0b;
        --muted: #4a4a4a;
        --muted-2: #5c5c5c;
        --line: #d9d3c6;
        --line-strong: #bdb5a4;
        --print-plum: #5b3a7a;
        --print-copper: #b8763f;
        --print-sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
        --print-serif: Charter, "Iowan Old Style", Georgia, "Times New Roman", serif;
      }

      /* Neutralize screen layering so PDF text follows document order. */
      .resume, .resume * {
        position: static !important;
        z-index: auto !important;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
        will-change: auto !important;
        transition: none !important;
        animation: none !important;
        font-variant-ligatures: none;
        font-feature-settings: "liga" 0, "clig" 0;
      }
      html, body { background: #fff !important; }
      body {
        margin: 0;
        color: var(--ink);
        font-family: var(--print-sans);
        font-size: 9pt;
        line-height: 1.25;
        -webkit-hyphens: manual;
        hyphens: manual;
        orphans: 2;
        widows: 2;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
      body::before { display: none !important; }
      a { color: inherit; text-decoration: none; background-image: none !important; }
      strong { color: var(--ink-strong); font-weight: 700; }

      /* Screen-only chrome and decorative duplicates. */
      .toolbar,
      .eyebrow,
      .ctas,
      .contact-card,
      .proof-strip,
      .protocol-impact,
      .section-intro,
      .section-title .num,
      .section-title .rule,
      .expertise-card .ec-icon,
      .side-panel-head .sp-icon,
      .repo-intro,
      .contact-cta,
      .social-preview-section,
      .resume-footer,
      .print-sidebar-only .side-panel[aria-labelledby="sidebar-summary-title"],
      .print-sidebar-only .side-panel[aria-labelledby="print-stack-title"],
      .print-sidebar-only .side-panel[aria-labelledby="print-seeking-title"],
      .print-sidebar-only .side-panel[aria-labelledby="print-highlights-title"] {
        display: none !important;
      }
      .print-only { display: block !important; }

      /* Collapse every screen grid / float / column into one flow. */
      .resume,
      .resume::before { border: 0; border-radius: 0; box-shadow: none; }
      .resume {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        background: #fff !important;
        overflow: visible;
      }
      .resume::before { display: none; }
      .hero,
      .hero > div,
      .body-grid,
      .main-column,
      .supporting-sections,
      .print-sidebar-only,
      .expertise-grid,
      .experience,
      .teaching-grid,
      .credentials-grid,
      .lang-list {
        display: block;
        float: none;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        columns: auto;
        gap: 0;
      }

      /* ── Header ── */
      .hero { padding-bottom: 0; border: 0; }
      .person-name {
        margin: 0 0 1.2mm;
        color: var(--ink-strong);
        font-family: var(--print-serif);
        font-size: 26pt;
        font-weight: 700;
        letter-spacing: -0.015em;
        line-height: 1;
        text-transform: none;
      }
      .person-name .name-accent {
        color: var(--print-plum);
        font-style: normal;
        font-weight: 700;
        background: none !important;
        -webkit-text-fill-color: currentColor;
      }
      h1 {
        max-width: none;
        margin: 0 0 0.8mm;
        color: var(--ink-strong);
        font-family: var(--print-sans);
        font-size: 12.5pt;
        font-weight: 700;
        letter-spacing: -0.012em;
        line-height: 1.2;
        text-wrap: initial;
      }
      h1 .name-accent {
        padding: 0;
        color: inherit;
        font-style: normal;
        font-weight: inherit;
        background: none !important;
        -webkit-text-fill-color: currentColor;
      }
      .technical-line {
        max-width: none;
        margin: 0 0 2mm;
        color: var(--print-plum);
        font-family: var(--print-sans);
        font-size: 9pt;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 1.3;
      }
      .ats-contact-summary {
        margin: 0;
        padding: 0 0 2.2mm;
        border: 0;
        border-bottom: 1.4px solid var(--ink-strong);
        background: none;
        color: var(--ink);
        font-family: var(--print-sans);
        font-style: normal;
      }
      .ats-contact-summary p {
        margin: 0;
        font-size: 9pt;
        line-height: 1.5;
      }
      .ats-contact-summary a { color: var(--ink); }

      /* ── Section headings (shared by summary, sections, languages) ── */
      .ats-summary-title,
      .section-title,
      .side-panel-head {
        display: block;
        margin: 1mm 0 0.6mm;
        padding: 0 0 0.7mm;
        border-bottom: 1px solid var(--line-strong);
        break-after: avoid;
        page-break-after: avoid;
      }
      .ats-summary-title,
      .section-title h2,
      .side-panel-head h2 {
        margin: 0;
        color: var(--print-plum);
        font-family: var(--print-sans);
        font-size: 9pt;
        font-weight: 700;
        /* Tracking above ~0.05em makes PDF text extractors insert spaces
           between letters ("T E A C H I N G"), which breaks ATS matching. */
        letter-spacing: 0.045em;
        line-height: 1.2;
        text-transform: uppercase;
      }
      .section { margin: 0; padding: 0; }

      /* ── Professional summary ── */
      .hero-pitch,
      .hero-summary {
        display: block !important;
        max-width: none;
        margin: 0 0 1.4mm;
        color: var(--ink);
        font-family: var(--print-sans);
        font-size: 9pt;
        font-style: normal;
        line-height: 1.38;
      }
      .hero-summary { margin-bottom: 0; }

      /* ── Technical skills: "Category: keywords" rows ── */
      .expertise-card,
      .expertise-card:nth-child(n) {
        display: block;
        grid-column: auto;
        margin: 0;
        padding: 0.9mm 0;
        border: 0;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        background: #fff !important;
        box-shadow: none;
        transform: none;
        break-inside: avoid;
        page-break-inside: avoid;
      }
      .expertise-card:last-child { border-bottom: 0; }
      .expertise-card .ec-head { display: inline; margin: 0; gap: 0; }
      .expertise-card h3 {
        display: inline;
        margin: 0;
        color: var(--ink-strong);
        font-size: 9pt;
        font-weight: 700;
        letter-spacing: 0;
      }
      .expertise-card h3::after { content: ": "; }
      .expertise-card p {
        display: inline;
        margin: 0;
        color: var(--ink);
        font-size: 9pt;
        line-height: 1.25;
      }

      .expertise-card:nth-child(n + 5) { display: none; }

      /* ── Professional experience ── */
      .job {
        display: block;
        width: 100%;
        margin: 0 0 1.3mm;
        padding: 0;
        break-inside: avoid;
        page-break-inside: avoid;
      }
      .job:last-child { margin-bottom: 0; }
      .job::before,
      .job::after { display: none; }
      .job-card,
      .job.featured .job-card {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: #fff !important;
        box-shadow: none;
        transform: none;
      }
      .job-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 6mm;
        margin: 0 0 0.9mm;
        break-after: avoid;
        page-break-after: avoid;
      }
      .job h3 {
        margin: 0;
        color: var(--ink-strong);
        font-family: var(--print-sans);
        font-size: 9.5pt;
        font-weight: 700;
        letter-spacing: -0.008em;
        line-height: 1.25;
      }
      .role {
        margin: 0.3mm 0 0;
        color: var(--print-plum);
        font-size: 9pt;
        font-weight: 600;
        letter-spacing: 0;
        line-height: 1.3;
      }
      .job-meta {
        flex-shrink: 0;
        margin: 0.4mm 0 0;
        color: var(--muted);
        font-family: var(--print-sans);
        font-size: 9pt;
        font-weight: 500;
        line-height: 1.35;
        text-align: right;
        white-space: nowrap;
      }
      .job ul {
        margin: 0.6mm 0 0;
        padding-left: 3.8mm;
      }
      .job ul li {
        margin: 0 0 0.5mm;
        color: var(--ink);
        font-size: 9pt;
        line-height: 1.25;
      }
      .job ul li::marker { color: var(--print-copper); }
      .earlier-roles {
        display: block;
        font-size: 9pt;
        line-height: 1.25;
      }
      .job .earlier-roles li { padding: 0; margin-bottom: 0.4mm; }
      .earlier-roles strong { color: var(--ink-strong); }

      /* ── Selected repositories: one plain-text line of links ── */
      .repos-section {
        display: block !important;
        break-inside: avoid;
        page-break-inside: avoid;
      }
      .repo-chips {
        display: block;
        margin: 0;
        font-size: 9pt;
        line-height: 1.5;
      }
      a.tag.repo-chip {
        display: inline;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none !important;
        color: var(--ink);
        font-family: var(--print-sans);
        font-size: 9pt;
        font-weight: 500;
        letter-spacing: 0;
      }
      a.tag.repo-chip::before { content: none; }
      a.tag.repo-chip + a.tag.repo-chip::before {
        content: "·";
        margin: 0 1.6mm 0 0.6mm;
        color: var(--line-strong);
        font-size: 9pt;
        opacity: 1;
      }

      /* ── Teaching & talks, education & certifications ── */
      .supporting-sections .side-panel,
      .print-sidebar-only .side-panel {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none !important;
        box-shadow: none;
      }
      .teaching-grid .side-panel {
        margin-bottom: 1mm;
        break-inside: avoid;
        page-break-inside: avoid;
      }
      .teaching-grid h3,
      .credentials-grid h3 {
        margin: 0;
        color: var(--ink-strong);
        font-family: var(--print-sans);
        font-size: 9pt;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1.35;
      }
      .teaching-grid h3 { display: inline; }
      .teaching-grid h3::after { content: " — "; color: var(--muted-2); font-weight: 400; }
      .teaching-grid p {
        display: inline;
        margin: 0;
        color: var(--ink);
        font-size: 9pt;
        line-height: 1.25;
      }
      .credentials-grid .side-panel {
        margin-bottom: 1.8mm;
        break-inside: avoid;
        page-break-inside: avoid;
      }
      .credentials-grid .side-panel:last-child { margin-bottom: 0; }
      .credentials-grid h3 { display: block; margin-bottom: 0.5mm; }
      .credentials-grid p {
        margin: 0;
        color: var(--ink);
        font-size: 9pt;
        line-height: 1.25;
      }

      /* ── Languages: one inline line ── */
      .print-sidebar-only .side-panel[aria-labelledby="sidebar-languages-title"] {
        display: block !important;
      }
      .lang-list { font-size: 9pt; line-height: 1.5; }
      .lang-row { display: inline; }
      .lang-row strong {
        color: var(--ink-strong);
        font-size: 9pt;
        font-weight: 700;
      }
      .lang-row span {
        color: var(--ink);
        font-family: var(--print-sans);
        font-size: 9pt;
        letter-spacing: 0;
      }
      .lang-row span::before { content: " ("; }
      .lang-row span::after { content: ")"; }
      .lang-row + .lang-row::before {
        content: "·";
        margin: 0 1.8mm;
        color: var(--line-strong);
      }
      .earlier-experience { margin-top: 2mm; }
      .earlier-experience > h3 { margin: 0 0 1mm; font-size: 9.5pt; }
      .earlier-job { margin: 0 0 0.6mm; break-inside: avoid; }
      .earlier-job h4 { display: inline; margin: 0; font-size: 9pt; }
      .earlier-job h4::after { content: " — "; }
      .earlier-job p { display: inline; margin: 0; font-size: 9pt; line-height: 1.25; }
      .personal-projects p { margin: 0 0 1mm; font-size: 9pt; line-height: 1.25; }
    }
  
.generated-style-1 {font-family: var(--mono);}