:root{
    --navy:#0F2A71;
    --navy-deep:#061737;
    --gold:#F3AF0F;
    --cream:#FFFDF0;
    --ink:#101010;
    --line:#D9D2B8;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:#EDE8D6;
    font-family:'DejaVu Sans','Liberation Sans',Arial,sans-serif;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  @media (prefers-color-scheme: dark){
    body{ background:#1b1a14; }
  }

  /* ---------- top action bar (screen only) ---------- */
  .actionbar{
    display:flex;
    justify-content:center;
    gap:.75rem;
    flex-wrap:wrap;
    padding:.85rem 1rem;
    background:var(--navy-deep);
    box-shadow:0 2px 10px rgba(0,0,0,.18);
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.6rem 1.15rem;
    border-radius:999px;
    font-size:.95rem;
    font-weight:700;
    text-decoration:none;
    border:1.5px solid transparent;
    cursor:pointer;
    transition:transform .15s ease, opacity .15s ease;
    font-family:inherit;
  }
  .btn:hover{ transform:translateY(-1px); }
  .btn:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
  .btn-gold{ background:var(--gold); color:var(--navy-deep); }
  .btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }

  /* ---------- letter sheet ---------- */
  .sheet-wrap{
    display:flex;
    justify-content:center;
    padding:2.25rem 1rem 1rem;
  }
  .sheet{
    width:210mm;
    max-width:100%;
    min-height:297mm;
    background:var(--cream);
    box-shadow:0 8px 40px rgba(6,23,55,.22);
    padding:11mm 15mm 0;
    display:flex;
    flex-direction:column;
  }

  header.letterhead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom:10px;
    border-bottom:3px solid var(--gold);
  }
  header.letterhead img.logo{
    height:30px;
    width:auto;
    display:block;
  }
  header.letterhead .kicker{
    font-size:.68rem;
    letter-spacing:.13em;
    font-weight:700;
    color:var(--navy);
    text-transform:uppercase;
    text-align:right;
    line-height:1.5;
  }

  h1.title{
    text-align:center;
    color:var(--navy);
    font-size:1.55rem;
    letter-spacing:.11em;
    font-weight:700;
    margin:12px 0 10px;
  }

  .recipients{
    margin:0 0 12px;
    font-size:.88rem;
    line-height:1.5;
  }
  .recipients .label{
    font-weight:700;
    color:var(--navy);
  }
  .recipients ul{
    margin:.3rem 0 0;
    padding-left:1.2rem;
  }
  .recipients li{ margin-bottom:.1rem; }

  .body-copy p{
    font-size:.88rem;
    line-height:1.48;
    margin:0 0 8px;
    text-align:left;
  }
  .body-copy p.quote{
    font-style:italic;
    color:var(--navy);
    font-weight:700;
  }

  table.facts{
    width:100%;
    border-collapse:collapse;
    margin:14px 0 16px;
    font-size:.83rem;
    border-top:2px solid var(--navy);
    border-bottom:2px solid var(--navy);
  }
  table.facts tr{ border-bottom:1px solid var(--line); }
  table.facts tr:last-child{ border-bottom:none; }
  table.facts th, table.facts td{
    text-align:left;
    padding:6px 10px;
    vertical-align:top;
    line-height:1.4;
  }
  table.facts th{
    width:30%;
    background:rgba(15,42,113,.06);
    color:var(--navy);
    font-weight:700;
    white-space:normal;
  }
  table.facts a{
    color:var(--navy);
    font-weight:700;
    text-decoration:underline;
    text-decoration-color:var(--gold);
    text-underline-offset:2px;
  }
  .register-cell{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
  }
  .register-cell img.qr{
    width:58px;
    height:58px;
    border:1px solid var(--line);
    padding:3px;
    background:#fff;
    flex:none;
  }
  .register-cell .rtext a{
    display:inline-block;
  }

  .closing{
    font-size:.88rem;
    line-height:1.48;
    margin:0 0 6px;
  }
  .signoff{
    margin-top:8px;
  }
  .signoff .trantrong{ margin-bottom:14px; }
  .signoff .org{
    font-weight:700;
    color:var(--navy);
    letter-spacing:.03em;
    font-size:.92rem;
  }
  .signoff .web{ margin-top:4px; }
  .signoff .web a{
    color:var(--navy-deep);
    background:linear-gradient(transparent 65%, var(--gold) 65%);
    text-decoration:none;
    font-weight:700;
    padding:0 1px;
  }

  .spacer{ flex:1; }

  footer.stripe{
    margin:16px -15mm 0;
    background:linear-gradient(90deg,var(--navy-deep),var(--navy));
    color:#fff;
    text-align:center;
    padding:8px 15mm;
    font-size:.76rem;
    letter-spacing:.07em;
    font-weight:700;
    border-top:3px solid var(--gold);
  }

  .credit{
    text-align:center;
    font-size:.78rem;
    color:#6b6656;
    padding:14px 1rem 2rem;
  }
  .credit a{ color:#6b6656; }

  /* ---------- mobile ---------- */
  @media (max-width: 640px){
    .sheet{ padding:8mm 6mm 0; min-height:0; }
    h1.title{ font-size:1.45rem; letter-spacing:.08em; margin:18px 0 16px; }
    header.letterhead{ flex-direction:column; align-items:flex-start; gap:8px; }
    header.letterhead .kicker{ text-align:left; }
    table.facts th{ width:38%; font-size:.82rem; }
    table.facts td{ font-size:.86rem; }
    .register-cell{ flex-direction:column; align-items:flex-start; }
    footer.stripe{ margin:20px -6mm 0; padding:10px 6mm; font-size:.72rem; }
    .signoff .trantrong{ margin-bottom:28px; }
  }

  /* ---------- print ---------- */
  @media print{
    body{ background:#fff; }
    .actionbar, .credit, .no-print{ display:none !important; }
    .sheet-wrap{ padding:0; }
    .sheet{
      box-shadow:none;
      width:auto;
      min-height:0;
      padding:9mm 15mm 0;
    }
    .body-copy p{ margin:0 0 6px; }
    table.facts{ margin:10px 0 12px; }
    table.facts th, table.facts td{ padding:5px 10px; }
    .signoff{ margin-top:4px; }
    .signoff .trantrong{ margin-bottom:10px; }
    footer.stripe{ margin:8px -15mm 0; padding:6px 15mm; }
    @page{ size:A4; margin:0; }
  }