:root{
  --ink:#071829;
  --ink-soft:#16324C;
  --teal:#008C89;
  --teal-deep:#006C68;
  --paper:#FBFBF9;
  --side-tint:#EEF2F3;
  --text:#111827;
  --grey:#3F4A56;
  --grey-soft:#667382;
  --line:#DCE1E4;
  --sans:'Inter', 'Segoe UI', Calibri, Arial, sans-serif;
  --display:'Inter', 'Segoe UI Semibold', var(--sans);
  --mono:'Inter', var(--sans);
  --page-w:900px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  background:#E6E9EA;
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  padding:18px 16px 48px;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}

.resumeMenu .menuBar{position:fixed;left:0;top:0;z-index:2;width:auto}
.clBodyContainer{min-height:100vh;transition:margin-left .3s ease}

.letterPage{
  max-width:var(--page-w);
  margin:0 auto;
  background:var(--paper);
  box-shadow:0 1px 2px rgba(10,15,25,.06), 0 20px 40px rgba(10,15,25,.14);
  overflow:hidden;
}

.letterHero{
  background:var(--ink);
  color:#F4F6F7;
  padding:30px 40px 26px;
  display:grid;
  grid-template-columns:1fr 230px;
  gap:30px;
  align-items:start;
}

.documentType{
  margin:0 0 8px;
  color:var(--teal);
  font-family:var(--display);
  font-size:12px;
  font-weight:800;
  letter-spacing:0;
  text-transform:uppercase;
}

.candidateBlock h1{
  margin:0 0 7px;
  color:#fff;
  font-family:var(--display);
  font-size:36px;
  line-height:1;
  font-weight:800;
}

.currentRole{
  margin:0 0 14px;
  color:#D8E2EA;
  font-weight:700;
  font-size:14px;
}

.contactRow{
  display:grid;
  gap:6px;
}

.contactRow a,
.contactRow span{
  color:#F3FBFB;
  display:flex;
  align-items:flex-start;
  gap:7px;
  font-size:13.2px;
  line-height:1.35;
  text-decoration:none;
  word-break:break-word;
}

.contactRow i{
  color:#65D3CD;
  flex:0 0 13px;
  font-size:13px;
  line-height:1.35;
  text-align:center;
  margin-top:1px;
}

.fitPanel{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.07);
  padding:14px 16px;
}

.fitLabel{
  margin:0 0 10px;
  color:#65D3CD;
  font-family:var(--display);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}

.fitPanel ul{
  margin:0;
  padding-left:17px;
}

.fitPanel li{
  color:#F3FBFB;
  font-size:12.8px;
  line-height:1.42;
  margin-bottom:5px;
}

.letterMeta{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding:22px 40px 18px;
  border-bottom:1px solid var(--line);
  color:var(--grey);
  font-size:13.2px;
}

.letterMeta p{margin:0 0 5px}

.printButton{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:#fff;
  font-family:var(--mono);
  font-size:13px;
  font-weight:600;
  line-height:1;
  padding:10px 12px;
  text-decoration:none;
}

.letterBody{
  padding:24px 40px 34px;
  max-width:820px;
}

.letterBody p{
  margin:0 0 13px;
  color:#101820;
  font-size:14px;
}

.subjectLine{
  color:var(--ink);
  border-left:3px solid var(--teal);
  padding-left:10px;
}

.strengthBox{
  background:var(--side-tint);
  border:1px solid var(--line);
  border-left:3px solid var(--teal);
  margin:18px 0;
  padding:14px 16px;
}

.strengthBox h2{
  margin:0 0 10px;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:7px;
  font-family:var(--display);
  font-size:14px;
  font-weight:800;
  text-transform:uppercase;
}

.strengthBox h2 i{color:var(--teal-deep);font-size:13px}
.strengthBox ul{margin:0;padding-left:18px}
.strengthBox li{font-size:13.6px;line-height:1.45;margin-bottom:6px;color:#162233}
.strengthBox li:last-child{margin-bottom:0}

.signatureBlock{
  margin-top:24px;
}

.signatureBlock p{margin:0 0 4px;color:var(--grey)}
.signatureBlock strong{
  color:var(--ink);
  font-family:var(--display);
  font-size:15px;
}

@media print{
  html,
  body{
    width:210mm;
    min-height:auto;
    background:#E6E9EA;
    padding:0;
    margin:0;
    font-size:13px;
  }

  .resumeMenu,
  .printButton{display:none!important}

  .clBodyContainer{
    margin-left:0!important;
    min-height:auto;
    padding:0;
    background:#E6E9EA;
  }

  .letterPage{
    width:192mm;
    max-width:192mm;
    margin:0 auto;
    box-shadow:none;
    overflow:visible;
  }

  .letterHero{
    padding:6mm 9mm 5mm;
    grid-template-columns:1fr 52mm;
    gap:6mm;
  }

  .documentType{font-size:10px;margin-bottom:5px}
  .candidateBlock h1{font-size:26px}
  .currentRole{font-size:10.8px;margin-bottom:6px}
  .contactRow a,
  .contactRow span{font-size:10.1px}
  .contactRow{gap:4px}
  .fitPanel{padding:6px 8px}
  .fitLabel{font-size:10px;margin-bottom:7px}
  .fitPanel li{font-size:9.8px;line-height:1.2;margin-bottom:2px}
  .letterMeta{padding:3mm 9mm 2.5mm;font-size:10.6px}
  .letterMeta p{margin-bottom:3px}
  .letterBody{padding:3.5mm 9mm 5mm}
  .letterBody p{font-size:10.8px;line-height:1.28;margin-bottom:5px}
  .strengthBox{margin:7px 0;padding:7px 9px}
  .strengthBox h2{font-size:10.8px;margin-bottom:5px}
  .strengthBox li{font-size:10.5px;line-height:1.24;margin-bottom:2px}
  .signatureBlock{margin-top:8px}
  .signatureBlock strong{font-size:12px}
  a{color:inherit;text-decoration:none}

  @page{size:A4;margin:10mm 0}
}

@media screen and (max-width:800px){
  body{padding:0 0 44px}
  .resumeMenu .menuBar{position:static;width:100%}
  .clBodyContainer{margin-left:0!important}
  .letterPage{box-shadow:none}
  .letterHero{grid-template-columns:1fr;padding:32px 26px}
  .letterMeta{flex-direction:column;padding:22px 26px 18px}
  .letterBody{padding:24px 26px 34px}
  .fitPanel{max-width:320px}
}