:root {
      --paper: #ffffff;
      --canvas: #ece9e4;
      --ink: #161412;
      --ink-soft: #36312d;
      --ink-muted: #67615b;
      --ink-faint: #8c867e;
      --line: rgba(0, 0, 0, 0.10);
      --line-strong: rgba(0, 0, 0, 0.18);
      --panel: #f7f4f0;
      --accent: #e58253;
      --accent-soft: rgba(229, 130, 83, 0.08);
      --shadow: 0 20px 48px rgba(0, 0, 0, 0.08), 0 4px 14px rgba(0, 0, 0, 0.05);
      --font-sans: Inter, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
      --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
      --t-2xs: 6.5pt;
      --t-xs: 7.2pt;
      --t-sm: 7.9pt;
      --t-base: 8.75pt;
      --t-md: 9.8pt;
      --t-lg: 11.2pt;
      --t-xl: 17pt;
      --t-2xl: 20.5pt;
      --lh-tight: 1.2;
      --lh-body: 1.46;
      --sp-1: 3pt;
      --sp-2: 5pt;
      --sp-3: 7pt;
      --sp-4: 10pt;
      --sp-5: 13pt;
      --sp-6: 16pt;
      --sp-7: 20pt;
      --sp-8: 24pt;
      --page-w: 8.5in;
      --page-px: 0.52in;
      --page-pt: 0.38in;
      --page-pb: 0.42in;
      --page-min-h: 10.8in;
      --radius: 10px;
    }

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

    html, body {
      margin: 0;
      padding: 0;
      background: var(--canvas);
      color: var(--ink);
      font-family: var(--font-sans), sans-serif;
      -webkit-font-smoothing: antialiased;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }

    body { padding: 24px; }

    .page {
      width: min(100%, var(--page-w));
      min-height: var(--page-min-h);
      margin: 0 auto;
      background: var(--paper);
      border: 1px solid rgba(0, 0, 0, 0.08);
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
    }

    .page::before {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      height: 11px;
      background: var(--accent);
    }

    .page__inner {
      padding: calc(var(--page-pt) + 8pt) var(--page-px) var(--page-pb);
    }

    .page-header {
      display: grid;
      gap: var(--sp-3);
      padding-bottom: var(--sp-4);
      border-bottom: 1px solid var(--line);
    }

    .header-top {
      display: grid;
      gap: var(--sp-2);
    }

    .identity { display: grid; gap: var(--sp-2); min-width: 0; }

    .doc-name {
      margin: 0;
      font-size: var(--t-2xl);
      line-height: 1;
      font-weight: 800;
      letter-spacing: -0.03em;
    }

    .doc-role {
      margin: 0;
      font-size: var(--t-md);
      line-height: 1.3;
      font-weight: 650;
      color: var(--accent);
    }

    .contact-row {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 4pt 14pt;
      margin: 0;
      padding: 0;
    }

    .contact-row li {
      font: 500 var(--t-xs)/1.4 var(--font-mono), monospace;
      color: var(--ink-muted);
    }

    .contact-row a,
    .letter-body a {
      color: inherit;
      text-decoration: none;
    }

    .contact-row a:hover,
    .letter-body a:hover {
      color: var(--accent);
    }

    .contact-row li + li::before {
      content: "•";
      margin-right: 10pt;
      color: var(--ink-faint);
    }

    .section-heading {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: var(--sp-4);
      margin-top: var(--sp-5);
      padding-bottom: var(--sp-2);
      border-bottom: 1.5pt solid var(--accent);
    }

    .section-heading h2 {
      margin: 0;
      font-size: var(--t-lg);
      line-height: 1.2;
      font-weight: 800;
    }

    .letter-meta {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: var(--sp-6);
      margin-top: var(--sp-3);
      padding-bottom: var(--sp-2);
      border-bottom: 1px solid var(--line);
    }

    .meta-block {
      display: grid;
      gap: var(--sp-1);
    }

    .meta-label {
      margin: 0;
      font: 700 var(--t-2xs)/1.35 var(--font-mono), monospace;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-muted);
    }

    .meta-value {
      margin: 0;
      font-size: var(--t-sm);
      line-height: 1.4;
      color: var(--ink-soft);
    }

    .meta-value strong { color: var(--ink); }

    .letter-greeting {
      margin: var(--sp-4) 0 0;
      font-size: var(--t-base);
      line-height: 1.4;
      font-weight: 700;
      color: var(--ink);
    }

    .letter-body {
      display: grid;
      gap: var(--sp-3);
      max-width: 63ch;
      margin-top: var(--sp-3);
    }

    .letter-body p {
      margin: 0;
      font-size: var(--t-base);
      line-height: var(--lh-body);
      color: var(--ink-soft);
    }

    .letter-body strong { color: var(--ink); }

    .proof-band {
      margin-top: var(--sp-1);
      padding: var(--sp-3) var(--sp-4);
      border: 1px solid var(--line);
      border-left: 3px solid var(--accent);
      border-radius: 0 var(--radius) var(--radius) 0;
      background: linear-gradient(180deg, var(--panel), rgba(247, 244, 240, 0.70));
    }

    .proof-band p + p { margin-top: var(--sp-1); }

    .qr-legend {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: var(--sp-4);
      margin-top: var(--sp-3);
      padding: var(--sp-3) var(--sp-4);
      border: 1px solid rgba(0, 0, 0, 0.10);
      border-radius: var(--radius);
      background: rgba(229, 130, 83, 0.045);
      break-inside: avoid;
      page-break-inside: avoid;
    }

    .qr-note {
      display: grid;
      gap: var(--sp-1);
    }

    .qr-note p {
      margin: 0;
      font-size: var(--t-xs);
      line-height: 1.4;
      color: var(--ink-soft);
    }

    .qr-note strong {
      font: 800 var(--t-2xs)/1.35 var(--font-mono), monospace;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink);
    }

    .qr-cards {
      display: grid;
      grid-template-columns: repeat(2, 0.92in);
      gap: var(--sp-2);
    }

    .qr-card {
      display: grid;
      gap: 3pt;
      justify-items: center;
      color: var(--ink-soft);
      text-decoration: none;
    }

    .qr-card img {
      width: 0.76in;
      height: 0.76in;
      image-rendering: pixelated;
      border: 1px solid var(--line);
      background: #fff;
    }

    .qr-card span {
      font: 700 var(--t-2xs)/1.2 var(--font-mono), monospace;
      text-align: center;
      color: var(--ink-muted);
    }

    .closing {
      margin-top: var(--sp-6);
      display: grid;
      gap: var(--sp-2);
    }

    .closing p {
      margin: 0;
      font-size: var(--t-base);
      line-height: 1.45;
      color: var(--ink-soft);
    }

    .signature {
      font-size: var(--t-sm);
      line-height: 1.4;
      font-weight: 700;
      color: var(--ink);
    }

    .doc-footer {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: var(--sp-4);
      margin-top: var(--sp-6);
      padding-top: var(--sp-2);
      border-top: 1px solid var(--line);
      break-inside: avoid;
      page-break-inside: avoid;
    }

    .doc-footer span {
      font: 500 var(--t-2xs)/1.4 var(--font-mono), monospace;
      color: var(--ink-faint);
      letter-spacing: 0.04em;
    }

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

    @media print {
      body { padding: 0; background: #fff; }
      .page { width: auto; min-height: auto; border: 0; box-shadow: none; }
    }

    @media (max-width: 760px) {
      body { padding: 12px; }
      .page__inner { padding: 28px 20px 24px; }
      .header-top,
      .letter-meta { flex-direction: column; }
      .contact-row { flex-direction: column; gap: 2pt; }
      .contact-row li + li::before { content: none; }
      .qr-legend { grid-template-columns: 1fr; }
      .qr-cards { grid-template-columns: repeat(2, minmax(72px, 1fr)); justify-content: start; }
    }