/* =========================================================
   Cover letter page — two-column modern layout
   ========================================================= */
@font-face {
  font-family: "Allura";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/allura-latin.woff2") format("woff2");
}

:root { --fg-body: #D8D2CA; --sig: linear-gradient(110deg, #E8B48C, #D27A4D 45%, #B4592F); }
:root[data-theme="light"] { --fg-body: #2E2A26; --sig: linear-gradient(110deg, #B5602F, #8A3F22 45%, #5F2E1B); }

.letter-page .nav { position: sticky; top: 14px; }
.letter-page .nav__actions { gap: 12px; }
.cl-wrap { position: relative; isolation: isolate; overflow: hidden; padding: clamp(28px, 4vw, 56px) var(--gutter) 100px; }
.cl-wrap .hero__blobs span:nth-child(1) { right: -15vw; top: -15vw; }

/* ---------- Sheet ---------- */
.cl {
  position: relative; max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 320px 1fr;
  border-radius: 32px; overflow: hidden;
  background: var(--card-solid); border: 1px solid var(--border);
  box-shadow: 0 50px 100px -40px var(--shadow);
  animation: rise 1s var(--ease) both;
}

/* ---------- Sidebar (brand panel, dark in both themes) ---------- */
.cl-side {
  --tint: 255, 255, 255;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 30px;
  padding: 44px 32px; color: #fff;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--accent2-rgb),  .32), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(var(--cool-rgb),  .5), transparent 55%),
    linear-gradient(170deg, #1A2324 0%, #020403 100%);
}
.cl-side__glow { position: absolute; z-index: -1; width: 260px; height: 260px; right: -110px; top: 30%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb),  .35), transparent 65%); }
.cl-side__logo { width: 64px; height: 64px; filter: drop-shadow(0 12px 22px rgba(var(--accent-rgb),  .45)); }
.cl-side__name { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1.05; letter-spacing: -.035em; margin: -8px 0 0; }
.cl-side__name span { background-image: linear-gradient(110deg, #E8B48C, #D27A4D 50%, #B4592F); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cl-side__role { margin: -18px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.7; color: rgba(255, 255, 255, .72); }

.cl-block__title { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .66); }
.cl-block__title::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .14); }

.cl-contact { display: grid; gap: 10px; }
.cl-contact li { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: rgba(255, 255, 255, .9); overflow-wrap: anywhere; }
.cl-contact li > span { width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; font-size: 13px; color: #E09A6E; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); }
.cl-contact a:hover { color: #F0C4A0; }

.cl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cl-stats div { text-align: center; padding: 12px 6px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.cl-stats strong { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; background-image: linear-gradient(110deg, #F2C9A6, #E09A6E); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cl-stats span { font-size: 11px; color: rgba(255, 255, 255, .72); }
.cl-platforms { display: flex; gap: 8px; margin-top: 12px; }
.cl-platforms .pi { width: 34px; height: 34px; border-radius: 10px; font-size: 15px; }

.cl-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-skills li { font-size: 12px; padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .9); }
.cl-industries { margin: 0; font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, .78); }

/* ---------- Letter column ---------- */
.cl-main { display: flex; flex-direction: column; padding: 48px 56px 36px; min-width: 0; }
.cl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--border); }
.cl-eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.cl-re { margin: 0; font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; color: var(--fg); }
.cl-re strong { font-weight: 800; background-image: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cl-date { display: inline-flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; padding: 8px 14px; border-radius: 999px; font-size: 13px; color: var(--fg-muted); background: rgba(var(--tint), .04); border: 1px solid var(--border); }
.cl-date .ic { color: var(--accent); }

.cl-body { flex: 1; }
.cl-body p { margin: 0 0 16px; font-size: 16px; line-height: 1.75; color: var(--fg-body); }
.cl-body strong { color: var(--fg); }
.cl-body .cl-greet { font-weight: 600; color: var(--fg); }
.cl-sub { margin: 28px 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }

.cl-bring { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 26px; }
.cl-bring li { display: flex; gap: 14px; padding: 16px; border-radius: 16px; font-size: 14px; line-height: 1.5; color: var(--fg-body); background: rgba(var(--tint), .03); border: 1px solid var(--border); transition: border-color .3s, transform .3s var(--ease); }
.cl-bring li:hover { border-color: rgba(var(--accent-rgb),  .4); transform: translateY(-2px); }
.cl-bring strong { display: block; margin-bottom: 2px; font-size: 15px; color: var(--fg); }
.cl-bring__icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; display: grid; place-items: center; font-size: 15px; color: #fff; background: var(--gradient-btn); box-shadow: 0 10px 20px -10px var(--accent); }

.cl-quote { position: relative; margin: 0 0 22px; padding: 20px 24px 20px 62px; border-radius: 18px; font-size: 17px; font-weight: 600; line-height: 1.55; letter-spacing: -.01em; color: var(--fg); background: var(--gradient-soft); border: 1px solid var(--border); }
.cl-quote .ic { position: absolute; left: 22px; top: 22px; font-size: 22px; color: var(--accent); }
.cl-quote em { font-style: normal; background-image: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

.cl-sign { margin-top: 26px; }
.cl-sign p { margin: 0; }
.cl-body .cl-sign__script { margin: 4px 0 2px; padding-right: 12px; font-family: "Allura", cursive; font-size: 54px; line-height: 1.1; display: inline-block; background-image: var(--sig); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cl-sign__name strong { display: block; font-size: 16px; }
.cl-sign__name span { font-size: 13px; color: var(--fg-muted); }

.cl-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--fg-dim); }
.cl-foot b { color: var(--accent); }
.cl-foot__mark { width: 28px; height: 28px; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .cl { grid-template-columns: 1fr; }
  .cl-side { padding: 36px 28px; }
  .cl-main { padding: 36px 28px 28px; }
}
@media (max-width: 860px) {
  .letter-page .nav__toggle { display: none; }
}
@media (max-width: 600px) {
  .cl { border-radius: 24px; }
  .cl-head { flex-direction: column; }
  .cl-bring { grid-template-columns: 1fr; }
  .cl-body p { font-size: 15px; }
  .cl-quote { font-size: 16px; padding: 18px 18px 18px 54px; }
  .cl-quote .ic { left: 18px; }
  .letter-page .link-arrow span { display: none; }
  .letter-page .link-arrow { width: 44px; height: 44px; justify-content: center; border-radius: 50%; border: 1px solid var(--border); }
  .letter-page #printBtn { width: 44px; height: 44px; padding: 0; }
  .letter-page #printBtn span { display: none; }
}

/* =========================================================
   PRINT — one A4 page, light colours, sidebar kept
   ========================================================= */
@page { size: A4; margin: 0; }
@media print {
  :root, :root[data-theme] {
    --tint: 30, 20, 60; --bg: #fff; --card-solid: #fff; --fg: #141413; --fg-body: #2E2A26; --fg-muted: #4F4A44; --fg-dim: #66615A;
    --border: rgba(40, 25, 15,  .12); --accent: #8A3F22;
    --gradient: linear-gradient(120deg, #B5602F 0%, #8A3F22 38%, #5F2E1B 68%, #2F4A48 100%);
    --gradient-soft: linear-gradient(120deg, rgba(var(--accent2-rgb), .08), rgba(var(--accent-rgb), .08) 40%, rgba(var(--cool-rgb), .08));
    --sig: linear-gradient(110deg, #B5602F, #8A3F22 45%, #5F2E1B);
  }
  *, *::before, *::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; animation: none !important; transition: none !important; }
  html, body { background: #fff !important; }
  body::before, .no-print, .progress, .cursor-glow { display: none !important; }
  .cl-wrap { padding: 0; overflow: visible; }
  .cl { width: 210mm; height: 297mm; max-width: none; margin: 0; grid-template-columns: 64mm 1fr; border: 0; border-radius: 0; box-shadow: none; }

  .cl-side { padding: 13mm 7mm 10mm; gap: 6.5mm; }
  .cl-side__logo { width: 15mm; height: 15mm; filter: none; }
  .cl-side__name { font-size: 20pt; margin-top: -2mm; }
  .cl-side__role { font-size: 7.2pt; margin-top: -4.5mm; }
  .cl-block__title { font-size: 6.8pt; margin-bottom: 3mm; }
  .cl-contact { gap: 2.2mm; }
  .cl-contact li { font-size: 8pt; gap: 2.5mm; }
  .cl-contact li > span { width: 6.5mm; height: 6.5mm; font-size: 8pt; border-radius: 2mm; }
  .cl-stats { gap: 1.6mm; }
  .cl-stats div { padding: 2.4mm 1mm; border-radius: 3mm; }
  .cl-stats strong { font-size: 13pt; }
  .cl-stats span { font-size: 6.8pt; }
  .cl-platforms { gap: 1.8mm; margin-top: 2.6mm; }
  .cl-platforms .pi { width: 7.5mm; height: 7.5mm; font-size: 9pt; border-radius: 2mm; }
  .cl-skills { gap: 1.4mm; }
  .cl-skills li { font-size: 7.2pt; padding: 1.2mm 2.4mm; }
  .cl-industries { font-size: 7.8pt; line-height: 1.6; }

  .cl-main { padding: 11mm 13mm 7mm; }
  .cl-head { padding-bottom: 3.5mm; margin-bottom: 4.5mm; }
  .cl-eyebrow { font-size: 7pt; margin-bottom: 1mm; }
  .cl-re { font-size: 14pt; }
  .cl-date { font-size: 7.6pt; padding: 1.5mm 3mm; }
  .cl-body p { font-size: 9.2pt; line-height: 1.5; margin-bottom: 2.6mm; }
  .cl-sub { font-size: 7pt; margin: 3.6mm 0 2.4mm; }
  .cl-bring { gap: 2mm; margin-bottom: 3.6mm; }
  .cl-bring li { padding: 2.4mm 2.8mm; gap: 2.6mm; font-size: 7.8pt; line-height: 1.4; border-radius: 3mm; }
  .cl-bring strong { font-size: 8.8pt; }
  .cl-bring__icon { width: 7.5mm; height: 7.5mm; font-size: 9pt; border-radius: 2.2mm; box-shadow: none; }
  .cl-quote { font-size: 9.8pt; padding: 3.2mm 4.5mm 3.2mm 12mm; margin-bottom: 3.4mm; border-radius: 3.5mm; }
  .cl-quote .ic { left: 4.2mm; top: 4mm; font-size: 12pt; }
  .cl-sign { margin-top: 3mm; }
  .cl-body .cl-sign__script { font-size: 28pt; margin: 0; }
  .cl-sign__name strong { font-size: 9.6pt; }
  .cl-sign__name span { font-size: 8pt; }
  .cl-foot { margin-top: 4mm; padding-top: 3mm; font-size: 6.8pt; }
  /* Solid colours instead of gradient text — cleaner in PDF renderers */
  .cl-side__name span { background: none; color: #E09A6E; }
  .cl-stats strong { background: none; color: #F0C4A0; }
  .cl-re strong { background: none; color: #8A3F22; }
  .cl-quote em { background: none; color: #8A3F22; }
  .cl-body .cl-sign__script { background: none; color: #8A3F22; padding-right: 0; }
  .cl-foot__mark { width: 6.5mm; height: 6.5mm; }
}

/* Very small phones: keep the four nav items inside the bar */
@media (max-width: 380px) {
  .letter-page .nav__inner { padding-left: 14px; }
  .letter-page .nav__actions { gap: 6px; }
  .letter-page .logo { font-size: 18px; gap: 8px; }
  .letter-page .logo__mark { width: 30px; height: 30px; }
  .letter-page .logo__dot { margin-left: -8px; }
}

/* ---------- Sidebar portrait ---------- */
.cl-photo { position: relative; width: 112px; height: 112px; }
.cl-photo::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(from 200deg, #E8B48C, #D27A4D, #B4592F, #4F7774, #E8B48C); }
.cl-photo img { position: relative; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 4px solid #1A2324; }
.cl-photo__badge { position: absolute; right: -4px; bottom: 2px; width: 36px; height: 36px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .45)); }
@media print {
  .cl-photo { width: 25mm; height: 25mm; }
  .cl-photo img { border-width: 1mm; }
  .cl-photo__badge { width: 8.5mm; height: 8.5mm; filter: none; }
}