/* ==========================================================================
   Resume Studio Pro — app shell
   Type: Fraunces (brand/display) + Inter (UI/body) + JetBrains Mono (meta)
   Chrome palette: ink navy + warm paper + forest-teal brand + burnt-orange CTA
   (Deliberately not cream+terracotta / near-black+neon / hairline-broadsheet —
   the five RESUME templates further down each have their own distinct look.)
   ========================================================================== */

:root {
  --ink: #151B2B;
  --paper: #F7F5F1;
  --paper-card: #FFFFFF;
  --line: rgba(21, 27, 43, 0.10);
  --line-strong: rgba(21, 27, 43, 0.18);
  --text: #1D2333;
  --text-soft: #5B6273;
  --text-faint: #9198A8;
  --brand: #0F6E5C;
  --brand-soft: #E4F1EC;
  --cta: #C4632A;
  --cta-hover: #A94F1F;
  --danger: #B23B3B;

  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-card: 0 1px 2px rgba(21,27,43,0.04), 0 8px 24px rgba(21,27,43,0.06);
  --shadow-lift: 0 12px 40px rgba(21,27,43,0.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------------- Topbar ---------------- */
.topbar {
  background: var(--ink);
  position: sticky; top: 0; z-index: 40;
}
.topbar-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--brand);
  color: #EAF6F1;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.brand-name { color: #F3F1EA; font-family: var(--font-display); font-size: 19px; font-weight: 500; letter-spacing: 0.01em; }
.brand-name em { color: #B9C4C0; font-style: normal; font-weight: 400; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.autosave-note { font-family: var(--font-mono); font-size: 11.5px; color: #8B93A0; letter-spacing: 0.02em; display: none; }
@media (min-width: 720px) { .autosave-note { display: inline; } }

.btn {
  font-family: var(--font-body); font-weight: 600; font-size: 13.5px;
  border-radius: 999px; padding: 9px 18px; border: 1px solid transparent;
  cursor: pointer; transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--cta); color: #FFF8F3; box-shadow: 0 4px 14px rgba(196,99,42,0.35); }
.btn-primary:hover { background: var(--cta-hover); }
.btn-ghost { background: transparent; color: #E7E4DC; border-color: rgba(231,228,220,0.28); }
.btn-ghost:hover { border-color: rgba(231,228,220,0.55); }
.btn-add {
  background: var(--brand-soft); color: var(--brand); border: 1px solid transparent;
  font-size: 12.5px; padding: 7px 14px; white-space: nowrap;
}
.btn-add:hover { background: #D6EBE4; }
.btn-remove {
  background: none; border: none; color: var(--text-faint); font-size: 12px; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; padding: 4px 8px; border-radius: 6px;
}
.btn-remove:hover { color: var(--danger); background: rgba(178,59,59,0.08); }

/* ---------------- Layout ---------------- */
.studio {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
  gap: 28px;
  padding: 28px 28px 80px;
  align-items: start;
}
@media (max-width: 980px) {
  .studio { grid-template-columns: 1fr; }
  .preview-col { order: -1; }
}

.form-col { min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* ---------------- Stepper ---------------- */
.stepper {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 4px;
  scrollbar-width: thin;
}
.stepper-pill {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--text-faint);
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px 7px 8px;
  cursor: pointer; white-space: nowrap; transition: all 0.15s ease;
}
.stepper-pill .num {
  width: 20px; height: 20px; border-radius: 50%; background: var(--paper);
  display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; color: var(--text-faint);
  flex: 0 0 auto;
}
.stepper-pill.is-active { color: var(--ink); border-color: var(--step-accent, var(--brand)); background: var(--step-accent-soft, var(--brand-soft)); }
.stepper-pill.is-active .num { background: var(--step-accent, var(--brand)); color: #fff; }
.stepper-pill.is-done .num { background: var(--step-accent, var(--brand)); color: #fff; }
.stepper-pill.is-done .num::after { content: '✓'; }

/* ---------------- Step panels (coloured per step) ---------------- */
.wizard-step { display: none; }
.wizard-step.is-active { display: block; }

.step-panel {
  background: var(--step-accent-soft, var(--paper-card));
  border: 1px solid var(--line);
  border-top: 4px solid var(--step-accent, var(--brand));
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  box-shadow: var(--shadow-card);
}
.step-panel-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.step-panel-icon {
  width: 40px; height: 40px; border-radius: 11px; background: var(--step-accent, var(--brand)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 17px; flex: 0 0 auto;
}
.step-panel-title { font-family: var(--font-display); font-size: 21px; font-weight: 600; margin: 0 0 3px; color: var(--ink); }
.step-panel-sub { font-size: 13px; color: var(--text-soft); margin: 0; line-height: 1.5; }

.step-panel .form-card {
  background: #FFFFFF; box-shadow: none; border: 1px solid var(--line);
}
.step-panel > .form-card { margin-bottom: 14px; }
.step-panel > .form-card:last-of-type { margin-bottom: 0; }

/* colour themes per step */
.wizard-step[data-accent="teal"]   { --step-accent: #0F6E5C; --step-accent-soft: #E4F1EC; }
.wizard-step[data-accent="amber"]  { --step-accent: #B4790A; --step-accent-soft: #FBF0DC; }
.wizard-step[data-accent="coral"]  { --step-accent: #C1503D; --step-accent-soft: #FBE9E4; }
.wizard-step[data-accent="indigo"] { --step-accent: #3B4C8C; --step-accent-soft: #E7EAF5; }
.wizard-step[data-accent="plum"]   { --step-accent: #7B4B8A; --step-accent-soft: #F1E7F3; }
.wizard-step[data-accent="ink"]    { --step-accent: #151B2B; --step-accent-soft: #E9E8E4; }
.wizard-step[data-accent="rose"]   { --step-accent: #B23B5E; --step-accent-soft: #FBE7ED; }

/* ---------------- Sticky bottom nav (Next / Back) ---------------- */
.step-nav {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 16px; padding: 14px 4px 4px;
  position: sticky; bottom: 0; background: var(--paper);
  z-index: 5;
}
.step-nav-progress { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); }
.btn-nav-group { display: flex; gap: 10px; }
.btn-back { background: #fff; color: var(--text); border: 1px solid var(--line-strong); }
.btn-back:hover { border-color: var(--text-faint); }
.btn-next { background: var(--step-accent, var(--brand)); color: #fff; box-shadow: 0 4px 14px rgba(15,110,92,0.28); }
.btn-next:hover { filter: brightness(0.93); }

.form-card {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
}
.form-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.form-card-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 0 0 4px; color: var(--ink); }
.form-card-sub { font-size: 13px; color: var(--text-soft); margin: 0 0 14px; line-height: 1.5; }
.optional-tag {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); font-weight: 400;
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle;
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.field { display: block; margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field > span { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-soft); margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 14px; color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 10px 12px; background: #FCFBF9;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.field input:focus, .field textarea:focus { border-color: var(--brand); background: #fff; outline: none; }
.field textarea { resize: vertical; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }

.repeat-list { display: flex; flex-direction: column; gap: 14px; }
.repeat-item {
  border: 1px dashed var(--line-strong); border-radius: var(--radius-md);
  padding: 16px; background: #FCFBF9;
}
.repeat-item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.repeat-item-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.bullets-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.bullet-row { display: flex; gap: 6px; align-items: center; }
.bullet-row input { flex: 1; }
.repeat-empty { font-size: 13px; color: var(--text-faint); padding: 10px 2px; }

.privacy-note { font-size: 12px; color: var(--text-faint); text-align: center; margin: 4px 0 0; line-height: 1.6; }

/* ---------------- Template picker ---------------- */
.template-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.template-tile {
  border: 2px solid var(--line); border-radius: var(--radius-md);
  padding: 10px; cursor: pointer; text-align: left;
  background: #FCFBF9;
  transition: border-color 0.15s ease, transform 0.12s ease;
}
.template-tile:hover { transform: translateY(-2px); }
.template-tile.is-selected { border-color: var(--brand); background: var(--brand-soft); }
.template-tile-swatch {
  width: 100%; aspect-ratio: 210/297; border-radius: 6px; margin-bottom: 8px;
  overflow: hidden; position: relative; border: 1px solid var(--line);
}
.template-tile-name { font-size: 12.5px; font-weight: 700; color: var(--ink); display: block; }
.template-tile-tag { font-size: 10.5px; color: var(--text-faint); display: block; margin-top: 1px; }

/* ---------------- Preview column ---------------- */
.preview-col { min-width: 0; }
.preview-sticky { position: sticky; top: 88px; }
.preview-frame {
  background: #EDEBE6; border-radius: var(--radius-lg); border: 1px solid var(--line);
  box-shadow: var(--shadow-lift); padding: 18px; overflow: auto; max-height: calc(100vh - 160px);
  display: flex; justify-content: center;
}
.a4-page-sizer { position: relative; flex: 0 0 auto; }
.a4-page {
  width: 794px; height: 1123px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  overflow: hidden; position: relative; transform-origin: top left;
}
.preview-hint { text-align: center; font-size: 12px; color: var(--text-faint); margin: 10px 0 0; }

/* ==========================================================================
   Print — only the resume page, exactly one A4 sheet
   ========================================================================== */
#printArea { display: none; }
@media print {
  body * { visibility: hidden; }
  #printArea, #printArea * { visibility: visible; }
  #printArea { display: block; position: absolute; inset: 0; }
  #printArea .a4-page { width: 210mm; height: 297mm; position: relative; overflow: hidden; }
  @page { size: A4 portrait; margin: 0; }
}

/* ==========================================================================
   RESUME TEMPLATES — distinct designs
   Each template is a self-contained .a4-inner.a4-tpl-XXXX block. The same
   resume data object feeds every template (see resume-templates.js) — only
   the HTML structure + these styles differ.

   Fit-to-page: .a4-inner always renders at its natural (100%) size first;
   app.js measures its real content height against the fixed A4 container
   and, if it would overflow, applies a single transform:scale() so the
   WHOLE page shrinks proportionally to fit — never clipping or cutting
   off content. transform-origin must stay top-left for that math to work.
   ========================================================================== */

.a4-inner {
  width: 100%; height: 100%; box-sizing: border-box;
  overflow: hidden; position: relative;
  transform-origin: top left;
}
.a4-page .a4-inner, #printArea .a4-inner { position: absolute; inset: 0; }

/* ---------- shared small helpers reused across templates ---------- */
.rz-contact-row { display: flex; flex-wrap: wrap; }
.rz-empty-hint { font-size: 0.8em; opacity: 0.5; font-style: italic; }
.a4-photo-fallback {
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-weight: 600;
  background: #E9E4DA; color: #8A7F6D;
}

/* --------------------------------------------------------------------
   1) LEDGER — ATS-safe classic. White paper, ink text, slate accent.
      Source Serif display, Inter body. Signature: right-aligned date
      column that reads like a register/ledger (genuinely chronological
      data, so the alignment carries real meaning).
-------------------------------------------------------------------- */
.a4-tpl-ledger { background: #FFFFFF; color: #1A1D24; font-family: 'Inter', sans-serif; padding: 30px 36px; }
.a4-ledger-head { display: flex; align-items: flex-start; gap: 16px; }
.a4-ledger-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid #E1E4EA; font-size: 24px; }
.a4-ledger-name { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 2em; line-height: 1.08; color: #14171E; }
.a4-ledger-title { font-family: 'Inter', sans-serif; font-size: 0.78em; font-weight: 600; color: #35507A; letter-spacing: 0.02em; margin-top: 3px; }
.a4-ledger-contact { font-size: 0.62em; color: #545B6B; margin-top: 8px; letter-spacing: 0.01em; }
.a4-ledger-contact span:not(:last-child)::after { content: '  ·  '; color: #B8BEC9; }
.a4-ledger-rule { height: 1px; background: #1A1D24; margin: 12px 0 14px; }
.a4-ledger-summary { font-size: 0.68em; line-height: 1.6; color: #2B2F3A; margin-bottom: 14px; }
.a4-ledger-section { margin-bottom: 13px; }
.a4-ledger-section-title { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 0.72em; color: #35507A; text-transform: uppercase; letter-spacing: 0.09em; border-bottom: 1px solid #D8DCE3; padding-bottom: 3px; margin-bottom: 8px; }
.a4-ledger-entry { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.a4-ledger-entry-main { flex: 1; min-width: 0; }
.a4-ledger-role { font-size: 0.68em; font-weight: 700; color: #14171E; }
.a4-ledger-org { font-size: 0.65em; color: #35507A; font-weight: 600; }
.a4-ledger-dates { flex: 0 0 auto; font-size: 0.6em; color: #767C8B; font-family: 'JetBrains Mono', monospace; text-align: right; padding-top: 2px; white-space: nowrap; }
.a4-ledger-bullets { margin: 4px 0 0; padding-left: 14px; }
.a4-ledger-bullets li { font-size: 0.64em; line-height: 1.55; color: #2B2F3A; margin-bottom: 2px; }
.a4-ledger-skills { display: flex; flex-wrap: wrap; gap: 5px 10px; font-size: 0.64em; color: #2B2F3A; }
.a4-ledger-skills span::after { content: '·'; color: #B8BEC9; margin-left: 10px; }
.a4-ledger-skills span:last-child::after { content: ''; }

/* --------------------------------------------------------------------
   2) SIDEBAR COMPASS — modern two-column. Deep teal sidebar + cream
      panel, warm gold in the main column. Fraunces + Inter.
-------------------------------------------------------------------- */
.a4-tpl-sidebar { background: #FFFFFF; display: flex; height: 100%; font-family: 'Inter', sans-serif; }
.a4-sb-side { width: 33%; flex: 0 0 33%; background: #0F4C4C; color: #EAF3EF; padding: 26px 18px; box-sizing: border-box; display: flex; flex-direction: column; }
.a4-sb-photo { width: 78px; height: 78px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(234,243,239,0.4); margin-bottom: 12px; }
.a4-sb-photo img, .a4-sb-photo .a4-photo-fallback { width: 100%; height: 100%; object-fit: cover; font-size: 26px; }
.a4-sb-block { margin-bottom: 18px; }
.a4-sb-block-title { font-family: 'Inter', sans-serif; font-size: 0.6em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #C98A3D; margin-bottom: 8px; }
.a4-sb-contact-item { font-size: 0.62em; line-height: 1.7; color: #D9E9E3; word-break: break-word; }
.a4-sb-chip-row { display: flex; flex-wrap: wrap; gap: 5px; }
.a4-sb-chip { font-size: 0.58em; border: 1px solid rgba(234,243,239,0.45); border-radius: 999px; padding: 3px 9px; color: #EAF3EF; }
.a4-sb-main { flex: 1; min-width: 0; padding: 28px 26px; box-sizing: border-box; overflow: hidden; }
.a4-sb-name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.85em; line-height: 1.08; color: #0F1E1B; }
.a4-sb-title { font-size: 0.72em; font-weight: 600; color: #C98A3D; margin-top: 4px; }
.a4-sb-summary { font-size: 0.66em; line-height: 1.6; color: #35392F; margin: 12px 0 14px; }
.a4-sb-section { margin-bottom: 12px; }
.a4-sb-section-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 0.78em; color: #0F4C4C; margin-bottom: 7px; }
.a4-sb-entry { margin-bottom: 8px; }
.a4-sb-entry-head { display: flex; justify-content: space-between; gap: 8px; }
.a4-sb-role { font-size: 0.67em; font-weight: 700; color: #16241F; }
.a4-sb-org { font-size: 0.63em; color: #4E5A50; }
.a4-sb-dates { font-size: 0.58em; color: #8A9088; white-space: nowrap; padding-top: 2px; }
.a4-sb-bullets { margin: 3px 0 0; padding-left: 13px; }
.a4-sb-bullets li { font-size: 0.63em; line-height: 1.55; color: #35392F; margin-bottom: 2px; }

/* --------------------------------------------------------------------
   3) MONOLINE — ultra-minimal editorial. Pure black/white, one
      hairline grey, oversized masthead name. No colour accent at all.
-------------------------------------------------------------------- */
.a4-tpl-monoline { background: #FFFFFF; color: #101010; font-family: 'Inter', sans-serif; padding: 34px 40px; }
.a4-mono-name { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 2.5em; line-height: 0.98; letter-spacing: -0.01em; }
.a4-mono-meta { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 10px; padding-bottom: 12px; border-bottom: 1px solid #101010; gap: 14px; }
.a4-mono-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; filter: grayscale(100%) contrast(1.05); font-size: 18px; }
.a4-mono-title { font-size: 0.72em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
.a4-mono-contact { font-size: 0.58em; color: #6B6B6B; text-align: right; line-height: 1.6; }
.a4-mono-summary { font-size: 0.68em; line-height: 1.65; margin: 16px 0 18px; max-width: 92%; color: #1A1A1A; }
.a4-mono-section { margin-bottom: 15px; }
.a4-mono-section-title { font-size: 0.62em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: #101010; margin-bottom: 9px; }
.a4-mono-entry { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin-bottom: 8px; }
.a4-mono-role { font-size: 0.68em; font-weight: 700; grid-column: 1; }
.a4-mono-dates { font-size: 0.58em; color: #8A8A8A; grid-column: 2; white-space: nowrap; }
.a4-mono-org { font-size: 0.62em; color: #6B6B6B; grid-column: 1 / -1; margin-top: -2px; }
.a4-mono-bullets { grid-column: 1 / -1; margin: 4px 0 0; padding-left: 14px; }
.a4-mono-bullets li { font-size: 0.63em; line-height: 1.55; color: #232323; margin-bottom: 2px; }
.a4-mono-skills { font-size: 0.64em; line-height: 1.8; color: #232323; }

/* --------------------------------------------------------------------
   4) EXECUTIVE NOIR — dark charcoal header band with a gold double
      rule, white body. Fraunces italic name, Inter body.
-------------------------------------------------------------------- */
.a4-tpl-noir { background: #FFFFFF; color: #22262E; font-family: 'Inter', sans-serif; }
.a4-noir-band { background: #14171C; padding: 26px 34px 20px; display: flex; align-items: center; gap: 18px; }
.a4-noir-photo { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 2px solid #B08D46; font-size: 26px; }
.a4-noir-name { font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; font-size: 2em; color: #F3EFE6; line-height: 1.1; }
.a4-noir-title { font-size: 0.68em; font-weight: 600; color: #B08D46; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 5px; }
.a4-noir-rules { margin: 10px 0 8px; }
.a4-noir-rules div { height: 1px; background: #B08D46; opacity: 0.8; }
.a4-noir-rules div:first-child { margin-bottom: 3px; }
.a4-noir-contact { font-size: 0.6em; color: #C9C6BC; margin-top: 6px; }
.a4-noir-contact span:not(:last-child)::after { content: '   /   '; color: #5A5F52; }
.a4-noir-body { padding: 22px 34px 26px; }
.a4-noir-summary { font-size: 0.68em; line-height: 1.6; color: #2E323C; margin-bottom: 15px; }
.a4-noir-section { margin-bottom: 13px; }
.a4-noir-section-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 0.8em; color: #14171C; border-bottom: 1px solid #E5E1D6; padding-bottom: 4px; margin-bottom: 8px; }
.a4-noir-entry { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.a4-noir-role { font-size: 0.68em; font-weight: 700; color: #14171C; }
.a4-noir-org { font-size: 0.64em; color: #6B6152; }
.a4-noir-dates { font-size: 0.58em; color: #9A9587; white-space: nowrap; padding-top: 2px; }
.a4-noir-bullets { margin: 4px 0 0; padding-left: 14px; }
.a4-noir-bullets li { font-size: 0.64em; line-height: 1.55; color: #2E323C; margin-bottom: 2px; }
.a4-noir-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.a4-noir-skill { font-size: 0.6em; border: 1px solid #B08D46; color: #7A5F26; border-radius: 3px; padding: 2px 8px; }

/* --------------------------------------------------------------------
   5) STUDIO BOLD — creative colour-block spine. Brick-rust panel with
      a monogram badge, cream body. Fraunces bold + Inter.
-------------------------------------------------------------------- */
.a4-tpl-studio { background: #FBF9F5; display: flex; height: 100%; font-family: 'Inter', sans-serif; }
.a4-st-side { width: 36%; flex: 0 0 36%; background: #B8452F; color: #FBF3EA; padding: 26px 20px; box-sizing: border-box; display: flex; flex-direction: column; }
.a4-st-monogram { width: 46px; height: 46px; border-radius: 12px; background: rgba(251,243,234,0.16); border: 1.5px solid rgba(251,243,234,0.5); display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.3em; margin-bottom: 16px; overflow: hidden; }
.a4-st-monogram img { width: 100%; height: 100%; object-fit: cover; }
.a4-st-name { font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.55em; line-height: 1.12; }
.a4-st-title { font-size: 0.68em; font-weight: 600; color: #F6D9CC; margin-top: 5px; letter-spacing: 0.02em; }
.a4-st-block { margin-top: 20px; }
.a4-st-block-title { font-size: 0.58em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #F6D9CC; margin-bottom: 7px; }
.a4-st-contact-item { font-size: 0.6em; line-height: 1.75; word-break: break-word; }
.a4-st-chip-row { display: flex; flex-wrap: wrap; gap: 5px; }
.a4-st-chip { font-size: 0.57em; border: 1px solid rgba(251,243,234,0.55); border-radius: 5px; padding: 3px 8px; }
.a4-st-main { flex: 1; min-width: 0; padding: 28px 24px; box-sizing: border-box; overflow: hidden; }
.a4-st-summary { font-size: 0.66em; line-height: 1.6; color: #362A22; margin-bottom: 15px; }
.a4-st-section { margin-bottom: 13px; }
.a4-st-section-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.62em; text-transform: uppercase; letter-spacing: 0.1em; color: #B8452F; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.a4-st-section-title::before { content: ''; width: 7px; height: 7px; background: #B8452F; display: inline-block; }
.a4-st-entry { margin-bottom: 8px; }
.a4-st-entry-head { display: flex; justify-content: space-between; gap: 10px; }
.a4-st-role { font-size: 0.68em; font-weight: 700; color: #241C17; }
.a4-st-org { font-size: 0.63em; color: #6B5B4E; }
.a4-st-dates { font-size: 0.58em; color: #9C8E82; white-space: nowrap; padding-top: 2px; }
.a4-st-bullets { margin: 4px 0 0; padding-left: 14px; }
.a4-st-bullets li { font-size: 0.63em; line-height: 1.55; color: #362A22; margin-bottom: 2px; }

/* ---------------- Watermark (shown in preview only, stripped for final PDF via param) ---------------- */
.a4-wm { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 7px; color: rgba(0,0,0,0.32); font-family: 'Inter', sans-serif; }

/* --------------------------------------------------------------------
   6) TIMELINE — vertical dot-and-rail timeline connecting every dated
      entry (experience + education together, chronological). Sage
      green accent, Fraunces + Inter. The rail is a genuine structural
      device here: the content really is a sequence.
-------------------------------------------------------------------- */
.a4-tpl-timeline { background: #FFFFFF; color: #1E2A22; font-family: 'Inter', sans-serif; padding: 30px 36px; }
.a4-tl-head { display: flex; align-items: flex-start; gap: 16px; }
.a4-tl-photo { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 2px solid #CFE0D3; font-size: 24px; }
.a4-tl-name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.9em; color: #16201A; line-height: 1.1; }
.a4-tl-title { font-size: 0.7em; font-weight: 600; color: #4C7A5D; margin-top: 4px; }
.a4-tl-contact { font-size: 0.6em; color: #5C685F; margin-top: 8px; }
.a4-tl-contact span:not(:last-child)::after { content: '  ·  '; color: #B7C4B9; }
.a4-tl-summary { font-size: 0.66em; line-height: 1.6; color: #263229; margin: 14px 0; }
.a4-tl-section-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 0.8em; color: #16201A; margin: 14px 0 10px; }
.a4-tl-rail { position: relative; padding-left: 18px; border-left: 2px solid #CFE0D3; }
.a4-tl-item { position: relative; margin-bottom: 12px; }
.a4-tl-item::before { content: ''; position: absolute; left: -23px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: #4C7A5D; }
.a4-tl-item-head { display: flex; justify-content: space-between; gap: 8px; }
.a4-tl-role { font-size: 0.68em; font-weight: 700; color: #16201A; }
.a4-tl-dates { font-size: 0.56em; color: #6E7A70; font-family: 'JetBrains Mono', monospace; white-space: nowrap; padding-top: 2px; }
.a4-tl-org { font-size: 0.63em; color: #4C7A5D; font-weight: 600; }
.a4-tl-bullets { margin: 4px 0 0; padding-left: 14px; }
.a4-tl-bullets li { font-size: 0.63em; line-height: 1.55; color: #263229; margin-bottom: 2px; }
.a4-tl-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.a4-tl-tag { font-size: 0.6em; border: 1px solid #4C7A5D; color: #3A5F48; border-radius: 999px; padding: 3px 10px; }

/* --------------------------------------------------------------------
   7) TWO-TONE HEADER — bold navy/coral split header band with the name
      overlapping the seam. Confident, memorable, single-column body.
-------------------------------------------------------------------- */
.a4-tpl-twotone { background: #FFFFFF; color: #22262E; font-family: 'Inter', sans-serif; }
.a4-tt-header { display: flex; min-height: 108px; position: relative; }
.a4-tt-half-a { flex: 0 0 58%; background: #1C2B4A; }
.a4-tt-half-b { flex: 1; background: #E2603F; }
.a4-tt-name-wrap { position: absolute; inset: 0; display: flex; align-items: center; gap: 16px; padding: 0 34px; }
.a4-tt-photo { width: 86px; height: 86px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 3px solid #FFFFFF; box-shadow: 0 2px 10px rgba(0,0,0,0.25); font-size: 30px; }
.a4-tt-name { font-family: 'Fraunces', serif; font-weight: 700; font-size: 2em; color: #FFFFFF; line-height: 1.05; text-shadow: 0 1px 10px rgba(0,0,0,0.15); }
.a4-tt-title { font-size: 0.7em; font-weight: 600; color: #FDEDE7; margin-top: 5px; letter-spacing: 0.02em; }
.a4-tt-contact { display: flex; flex-wrap: wrap; gap: 0 14px; padding: 10px 34px; background: #F7F5F1; font-size: 0.6em; color: #4A4F5A; border-bottom: 1px solid #E7E4DC; }
.a4-tt-body { padding: 20px 34px 26px; }
.a4-tt-summary { font-size: 0.67em; line-height: 1.6; color: #2A2E38; margin-bottom: 14px; }
.a4-tt-section { margin-bottom: 13px; }
.a4-tt-section-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.66em; text-transform: uppercase; letter-spacing: 0.08em; color: #1C2B4A; border-bottom: 2px solid #E2603F; padding-bottom: 3px; margin-bottom: 8px; display: inline-block; }
.a4-tt-entry { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.a4-tt-role { font-size: 0.68em; font-weight: 700; color: #1C2B4A; }
.a4-tt-org { font-size: 0.64em; color: #5A5F6A; }
.a4-tt-dates { font-size: 0.58em; color: #8B8F98; white-space: nowrap; padding-top: 2px; }
.a4-tt-bullets { margin: 4px 0 0; padding-left: 14px; }
.a4-tt-bullets li { font-size: 0.64em; line-height: 1.55; color: #2A2E38; margin-bottom: 2px; }
.a4-tt-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.a4-tt-skill { font-size: 0.6em; background: #1C2B4A; color: #fff; border-radius: 4px; padding: 3px 9px; }

/* --------------------------------------------------------------------
   8) COMPACT GRID — dense two-column information grid for technical /
      data roles. Cool slate palette, monospace date badges.
-------------------------------------------------------------------- */
.a4-tpl-gridpro { background: #F7F8FA; color: #1B1F27; font-family: 'Inter', sans-serif; padding: 26px 30px; }
.a4-gp-header { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 12px; border-bottom: 2px solid #1B1F27; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.a4-gp-head-left { display: flex; align-items: center; gap: 14px; }
.a4-gp-photo { width: 58px; height: 58px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; font-size: 20px; }
.a4-gp-name { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1.55em; color: #10131A; }
.a4-gp-title { font-size: 0.68em; font-weight: 600; color: #33538F; margin-top: 3px; }
.a4-gp-contact { font-size: 0.58em; color: #545B6B; text-align: right; line-height: 1.7; }
.a4-gp-summary { font-size: 0.65em; line-height: 1.6; color: #262A33; margin-bottom: 14px; grid-column: 1 / -1; }
.a4-gp-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0 20px; }
.a4-gp-col { min-width: 0; }
.a4-gp-section { margin-bottom: 12px; }
.a4-gp-section-title { font-size: 0.62em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #33538F; margin-bottom: 8px; }
.a4-gp-entry { margin-bottom: 8px; background: #FFFFFF; border: 1px solid #E3E6EC; border-radius: 6px; padding: 8px 10px; }
.a4-gp-entry-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.a4-gp-role { font-size: 0.66em; font-weight: 700; color: #10131A; }
.a4-gp-org { font-size: 0.6em; color: #545B6B; }
.a4-gp-dates { font-family: 'JetBrains Mono', monospace; font-size: 0.52em; color: #33538F; background: #EAF0FB; border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
.a4-gp-bullets { margin: 5px 0 0; padding-left: 13px; }
.a4-gp-bullets li { font-size: 0.6em; line-height: 1.5; color: #262A33; margin-bottom: 2px; }
.a4-gp-skills { display: flex; flex-wrap: wrap; gap: 5px; }
.a4-gp-skill { font-size: 0.56em; background: #fff; border: 1px solid #D7DCE5; border-radius: 4px; padding: 3px 7px; color: #33538F; font-family: 'JetBrains Mono', monospace; }

/* ==========================================================================
   8 NEW TEMPLATES — inspired by user-supplied reference designs
   ========================================================================== */

/* --------------------------------------------------------------------
   9) SUNSET BLOCKS — orange colour-block photo panel with rounded
      corner, monogram badge, software/skill tag chips, QR-style
      portfolio placeholder. (ref: orange/cream design with "AR" logo)
-------------------------------------------------------------------- */
.a4-tpl-sunsetblock { background: #FBF4EC; color: #2B2620; font-family: 'Inter', sans-serif; padding: 26px 30px; }
.a4-sun-top { display: flex; gap: 20px; align-items: stretch; margin-bottom: 16px; }
.a4-sun-photo-wrap { flex: 0 0 150px; background: #E8792E; border-radius: 22px; overflow: hidden; position: relative; }
.a4-sun-photo-wrap img, .a4-sun-photo-wrap .a4-photo-fallback { width: 100%; height: 100%; object-fit: cover; min-height: 150px; font-size: 42px; background: transparent; color: #FDEBDD; }
.a4-sun-head-right { flex: 1; padding-top: 6px; display: flex; flex-direction: column; justify-content: space-between; }
.a4-sun-badge { width: 46px; height: 46px; border-radius: 50%; border: 3px solid #E8792E; color: #E8792E; display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.1em; align-self: flex-end; }
.a4-sun-name { font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.7em; color: #233142; line-height: 1.12; }
.a4-sun-title { font-size: 0.7em; font-weight: 600; color: #E8792E; margin-top: 3px; }
.a4-sun-summary { font-size: 0.62em; line-height: 1.55; color: #45403A; margin-top: 8px; }
.a4-sun-contact-pill { display: inline-block; background: #233142; color: #FBF4EC; font-size: 0.68em; font-weight: 700; padding: 4px 12px; border-radius: 999px; margin-bottom: 8px; }
.a4-sun-contact-row { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.6em; color: #45403A; margin-bottom: 12px; }
.a4-sun-cols { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0 20px; }
.a4-sun-section { margin-bottom: 12px; }
.a4-sun-section-title { display: inline-block; background: #E8792E; color: #FFF; font-size: 0.6em; font-weight: 700; letter-spacing: 0.04em; padding: 4px 12px; border-radius: 999px; margin-bottom: 8px; }
.a4-sun-entry { margin-bottom: 8px; }
.a4-sun-role { font-size: 0.64em; font-weight: 700; color: #233142; }
.a4-sun-org { font-size: 0.58em; color: #E8792E; font-weight: 600; }
.a4-sun-dates { font-size: 0.54em; color: #8A8074; }
.a4-sun-bullets { margin: 3px 0 0; padding-left: 12px; }
.a4-sun-bullets li { font-size: 0.58em; line-height: 1.5; color: #45403A; margin-bottom: 1px; }
.a4-sun-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.a4-sun-tag { font-size: 0.56em; background: #FFF; border: 1px solid #E8792E; color: #233142; border-radius: 6px; padding: 3px 8px; font-weight: 600; }
.a4-sun-qr { width: 64px; height: 64px; border: 1.5px solid #233142; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.5em; color: #8A8074; text-align: center; background: repeating-linear-gradient(45deg, #EDE4D6, #EDE4D6 3px, #FBF4EC 3px, #FBF4EC 6px); }

/* --------------------------------------------------------------------
   10) PASTEL POP — colourful rounded pill section headers, arched
      photo, playful accent dots. (ref: purple/green/pink pastel design)
-------------------------------------------------------------------- */
.a4-tpl-pastelpop { background: #FDF8F0; color: #2B2620; font-family: 'Inter', sans-serif; padding: 28px 32px; }
.a4-pp-top { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 16px; }
.a4-pp-photo-wrap { flex: 0 0 108px; height: 130px; background: #F6C9DC; border-radius: 54px 54px 12px 12px; overflow: hidden; }
.a4-pp-photo-wrap img, .a4-pp-photo-wrap .a4-photo-fallback { width: 100%; height: 100%; object-fit: cover; font-size: 36px; background: transparent; color: #B5568A; }
.a4-pp-hi { display: inline-block; border: 1.5px solid #2B2620; border-radius: 999px; padding: 5px 16px; font-family: 'Fraunces', serif; font-style: italic; font-size: 0.72em; margin-bottom: 8px; }
.a4-pp-intro { font-size: 0.62em; line-height: 1.55; color: #3A342C; }
.a4-pp-intro b { color: #B79CE8; }
.a4-pp-contact { font-size: 0.58em; margin-top: 8px; line-height: 1.9; color: #45403A; }
.a4-pp-pill { display: inline-block; font-weight: 800; font-size: 0.78em; padding: 6px 18px; border-radius: 999px; margin-bottom: 8px; color: #211D33; }
.a4-pp-pill-purple { background: #C9B6F0; }
.a4-pp-pill-green { background: #A9E0B4; }
.a4-pp-pill-pink { background: #F6C9DC; }
.a4-pp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.a4-pp-section { margin-bottom: 12px; }
.a4-pp-date { font-size: 0.56em; color: #E8792E; font-weight: 700; }
.a4-pp-role { font-size: 0.62em; font-weight: 700; color: #2B2620; }
.a4-pp-org { font-size: 0.58em; color: #5A5448; }
.a4-pp-rail { border-left: 2px solid #C9B6F0; padding-left: 12px; }
.a4-pp-rail-item { position: relative; margin-bottom: 8px; }
.a4-pp-rail-item::before { content: ''; position: absolute; left: -16px; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: #C9B6F0; }
.a4-pp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.a4-pp-tag { font-size: 0.56em; background: #FFF; border: 1px solid #D8D2C4; border-radius: 999px; padding: 3px 10px; }

/* --------------------------------------------------------------------
   11) GOLDEN BLOB — warm mustard organic blob-shaped photo backdrop,
      references section at the bottom. (ref: "Becky Lu" yellow design)
-------------------------------------------------------------------- */
.a4-tpl-goldenblob { background: #FFFFFF; color: #2E2A25; font-family: 'Inter', sans-serif; padding: 30px 34px; }
.a4-gb-top { display: flex; gap: 18px; margin-bottom: 16px; position: relative; }
.a4-gb-text { flex: 1; padding-top: 6px; }
.a4-gb-eyebrow { font-family: 'Fraunces', serif; font-style: italic; font-size: 0.85em; color: #E8AC3E; }
.a4-gb-name { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1.9em; color: #201C17; letter-spacing: -0.01em; }
.a4-gb-rule { width: 40px; height: 3px; background: #E8AC3E; margin: 8px 0 10px; }
.a4-gb-summary { font-size: 0.62em; line-height: 1.55; color: #45403A; max-width: 92%; }
.a4-gb-photo-wrap { flex: 0 0 190px; height: 170px; background: #E8AC3E; border-radius: 50% 50% 20% 50%; overflow: hidden; }
.a4-gb-photo-wrap img, .a4-gb-photo-wrap .a4-photo-fallback { width: 100%; height: 100%; object-fit: cover; font-size: 46px; background: transparent; color: #7A5A16; }
.a4-gb-contact-title { color: #E8AC3E; font-weight: 700; font-size: 0.66em; margin-bottom: 6px; }
.a4-gb-contact-row { display: flex; gap: 18px; font-size: 0.58em; color: #45403A; margin-bottom: 14px; flex-wrap: wrap; }
.a4-gb-cols { display: grid; grid-template-columns: 1fr 1.6fr; gap: 0 22px; border-top: 1px solid #E7E2D8; padding-top: 12px; }
.a4-gb-h2 { font-size: 0.78em; font-weight: 800; color: #201C17; margin-bottom: 8px; }
.a4-gb-skill-item { font-size: 0.6em; color: #45403A; margin-bottom: 3px; }
.a4-gb-role { font-size: 0.66em; font-weight: 700; color: #E8AC3E; }
.a4-gb-org { font-size: 0.6em; color: #201C17; font-weight: 600; }
.a4-gb-dates { font-size: 0.56em; color: #8A8074; margin-bottom: 3px; }
.a4-gb-bullets { margin: 3px 0 10px; padding-left: 13px; }
.a4-gb-bullets li { font-size: 0.58em; line-height: 1.5; color: #45403A; margin-bottom: 1px; }
.a4-gb-refs { border-top: 1px solid #E7E2D8; margin-top: 10px; padding-top: 10px; display: flex; gap: 26px; flex-wrap: wrap; }
.a4-gb-ref-name { font-weight: 700; color: #E8AC3E; font-size: 0.6em; }
.a4-gb-ref-detail { font-size: 0.56em; color: #45403A; }

/* --------------------------------------------------------------------
   12) ARCH GREY — corporate grey header block, arch-shaped photo
      cutout, timeline dots for experience. (ref: "Jonathan Patterson")
-------------------------------------------------------------------- */
.a4-tpl-archgrey { background: #FFFFFF; color: #26241F; font-family: 'Inter', sans-serif; }
.a4-ag-band { background: #6E6A64; padding: 22px 30px; display: flex; gap: 20px; align-items: flex-end; }
.a4-ag-photo-wrap { flex: 0 0 108px; height: 130px; background: #D8D5CE; border-radius: 54px 54px 6px 6px; overflow: hidden; margin-bottom: -22px; border: 5px solid #6E6A64; }
.a4-ag-photo-wrap img, .a4-ag-photo-wrap .a4-photo-fallback { width: 100%; height: 100%; object-fit: cover; font-size: 34px; background: transparent; color: #6E6A64; }
.a4-ag-name { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1.55em; color: #FFFFFF; letter-spacing: 0.02em; }
.a4-ag-title { font-size: 0.68em; color: #E4E2DC; margin-top: 3px; }
.a4-ag-body { display: flex; gap: 24px; padding: 34px 30px 26px; }
.a4-ag-side { flex: 0 0 34%; }
.a4-ag-main { flex: 1; min-width: 0; }
.a4-ag-h2 { font-size: 0.74em; font-weight: 800; color: #26241F; border-bottom: 1px solid #D8D5CE; padding-bottom: 4px; margin-bottom: 8px; }
.a4-ag-item { font-size: 0.6em; color: #45403A; margin-bottom: 10px; line-height: 1.5; }
.a4-ag-item b { display: block; font-size: 1.03em; color: #26241F; }
.a4-ag-rail { border-left: 1.5px solid #D8D5CE; padding-left: 14px; }
.a4-ag-rail-item { position: relative; margin-bottom: 12px; }
.a4-ag-rail-item::before { content: ''; position: absolute; left: -19px; top: 3px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid #6E6A64; background: #fff; }
.a4-ag-rail-head { display: flex; justify-content: space-between; gap: 8px; }
.a4-ag-role { font-size: 0.64em; font-weight: 700; color: #26241F; }
.a4-ag-dates { font-size: 0.56em; color: #8A8074; white-space: nowrap; }
.a4-ag-org { font-size: 0.58em; color: #6E6A64; font-weight: 600; }
.a4-ag-bullets { margin: 3px 0 0; padding-left: 12px; }
.a4-ag-bullets li { font-size: 0.58em; line-height: 1.5; color: #45403A; }

/* --------------------------------------------------------------------
   13) BLUSH CARD — soft blush/tan rounded photo card top-left, pill
      section headers, skill progress bars. (ref: "Rupika" design)
-------------------------------------------------------------------- */
.a4-tpl-blushcard { background: #F3E9E1; color: #2A2019; font-family: 'Inter', sans-serif; padding: 20px; }
.a4-bc-grid { display: flex; gap: 16px; height: 100%; }
.a4-bc-left { flex: 0 0 40%; }
.a4-bc-photo-wrap { width: 100%; aspect-ratio: 1/1; background: #D9B8A0; border-radius: 20px; overflow: hidden; margin-bottom: 12px; }
.a4-bc-photo-wrap img, .a4-bc-photo-wrap .a4-photo-fallback { width: 100%; height: 100%; object-fit: cover; font-size: 40px; background: transparent; color: #8A6B4E; }
.a4-bc-qualities-title { font-weight: 700; font-size: 0.62em; margin: 10px 0 6px; }
.a4-bc-quality { font-size: 0.55em; color: #4A3E33; line-height: 1.6; }
.a4-bc-right { flex: 1; min-width: 0; background: #E4D3C4; border-radius: 20px; padding: 16px; }
.a4-bc-pill { display: inline-block; background: #D9B8A0; color: #2A2019; font-weight: 700; font-size: 0.66em; padding: 6px 16px; border-radius: 999px; margin-bottom: 8px; }
.a4-bc-contact-item { font-size: 0.58em; color: #4A3E33; margin-bottom: 4px; }
.a4-bc-profile { font-size: 0.6em; font-style: italic; line-height: 1.55; color: #3A2E24; margin-bottom: 4px; }
.a4-bc-section { margin: 12px 0; }
.a4-bc-role { font-size: 0.62em; font-weight: 700; color: #2A2019; }
.a4-bc-org { font-size: 0.58em; color: #6B5540; }
.a4-bc-dates { font-size: 0.54em; color: #8A7460; }
.a4-bc-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 0.56em; }
.a4-bc-bar-track { flex: 1; height: 6px; background: #C9AF98; border-radius: 999px; overflow: hidden; }
.a4-bc-bar-fill { height: 100%; background: #FFFFFF; }
.a4-bc-hobby-cols { display: grid; grid-template-columns: 1fr 1fr; font-size: 0.56em; color: #4A3E33; gap: 3px 10px; }

/* --------------------------------------------------------------------
   14) COCOA HEADER — warm brown two-block header (dark strip + tan
      panel), circular photo. (ref: "Isabel Mercado")
-------------------------------------------------------------------- */
.a4-tpl-cocoaheader { background: #FBF6F0; color: #3A2A1D; font-family: 'Inter', sans-serif; }
.a4-ch-header { display: flex; height: 132px; }
.a4-ch-block-a { flex: 0 0 30%; background: #4A3527; }
.a4-ch-block-b { flex: 1; background: #C9A084; display: flex; align-items: center; padding: 0 26px; }
.a4-ch-name { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1.7em; color: #FFFFFF; line-height: 1.05; }
.a4-ch-title { font-size: 0.7em; color: #FBF0E6; letter-spacing: 0.06em; margin-top: 4px; }
.a4-ch-photo-wrap { width: 108px; height: 108px; border-radius: 50%; overflow: hidden; margin: 0 auto; margin-top: -54px; border: 5px solid #FBF6F0; position: relative; z-index: 2; }
.a4-ch-photo-wrap img, .a4-ch-photo-wrap .a4-photo-fallback { width: 100%; height: 100%; object-fit: cover; font-size: 34px; background: transparent; color: #4A3527; }
.a4-ch-body { padding: 8px 34px 24px; }
.a4-ch-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; margin-top: 10px; }
.a4-ch-h2 { font-size: 0.7em; font-weight: 800; color: #4A3527; border-bottom: 1.5px solid #4A3527; padding-bottom: 3px; margin-bottom: 8px; display: inline-block; }
.a4-ch-role { font-size: 0.62em; font-weight: 700; text-align: center; color: #4A3527; }
.a4-ch-dates { font-size: 0.56em; text-align: center; color: #8A6F58; margin-bottom: 3px; }
.a4-ch-desc { font-size: 0.56em; text-align: center; color: #5A4738; line-height: 1.5; }
.a4-ch-listitem { font-size: 0.58em; text-align: center; color: #5A4738; margin-bottom: 2px; }

/* --------------------------------------------------------------------
   15) OVAL PROFILE — editorial cream design, oval-arched photo, big
      "MY PROFILE" statement type. (ref: "Olivia Wilson")
-------------------------------------------------------------------- */
.a4-tpl-ovalprofile { background: #F4EFE7; color: #1A1712; font-family: 'Inter', sans-serif; padding: 30px 34px; }
.a4-ov-top { display: flex; gap: 20px; }
.a4-ov-photo-wrap { flex: 0 0 130px; height: 165px; background: #E4D6C2; border-radius: 65px 65px 65px 65px / 82px 82px 40px 40px; overflow: hidden; }
.a4-ov-photo-wrap img, .a4-ov-photo-wrap .a4-photo-fallback { width: 100%; height: 100%; object-fit: cover; font-size: 40px; background: transparent; color: #B99C7A; }
.a4-ov-name { font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.5em; line-height: 1.15; }
.a4-ov-about-title { font-size: 0.62em; font-weight: 800; letter-spacing: 0.08em; margin: 6px 0 4px; color: #6B5B42; }
.a4-ov-about { font-size: 0.58em; line-height: 1.55; color: #3A342A; }
.a4-ov-statement { font-family: 'Fraunces', serif; font-weight: 700; font-size: 2.5em; letter-spacing: -0.01em; margin: 16px 0 14px; color: #1A1712; }
.a4-ov-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.a4-ov-h2 { font-size: 0.68em; font-weight: 800; letter-spacing: 0.04em; border-bottom: 1px solid #C9BBA1; padding-bottom: 3px; margin-bottom: 8px; }
.a4-ov-role { font-size: 0.62em; font-weight: 700; }
.a4-ov-org { font-size: 0.58em; color: #6B5B42; margin-bottom: 2px; }
.a4-ov-bullets { margin: 2px 0 8px; padding-left: 13px; }
.a4-ov-bullets li { font-size: 0.57em; line-height: 1.5; color: #3A342A; }
.a4-ov-skill-item { font-size: 0.58em; margin-bottom: 4px; }
.a4-ov-skill-item::before { content: '✦ '; color: #B99C7A; }
.a4-ov-contact-row { display: flex; gap: 20px; font-size: 0.56em; color: #6B5B42; margin-top: 12px; border-top: 1px solid #C9BBA1; padding-top: 8px; flex-wrap: wrap; }

/* --------------------------------------------------------------------
   16) HEX SKILLS — beige circular photo, hexagon/dot skill rating
      system, timeline achievements list. (ref: "Eushuen Tong")
-------------------------------------------------------------------- */
.a4-tpl-hexskills { background: #F6F1E9; color: #2E2A22; font-family: 'Inter', sans-serif; padding: 26px 30px; }
.a4-hx-top { display: flex; gap: 18px; align-items: center; margin-bottom: 14px; }
.a4-hx-photo { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 3px solid #FFFFFF; box-shadow: 0 2px 8px rgba(0,0,0,0.1); font-size: 30px; }
.a4-hx-name { font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.55em; color: #1E1B15; }
.a4-hx-title { font-size: 0.68em; font-weight: 700; color: #B89A6E; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }
.a4-hx-summary { font-size: 0.6em; line-height: 1.5; color: #45403A; margin-top: 6px; }
.a4-hx-cols { display: grid; grid-template-columns: 0.85fr 1.3fr; gap: 0 20px; }
.a4-hx-pill { display: inline-block; background: #E4D9C3; font-weight: 700; font-size: 0.62em; padding: 4px 12px; border-radius: 999px; margin-bottom: 8px; }
.a4-hx-contact-item { font-size: 0.57em; color: #45403A; margin-bottom: 5px; }
.a4-hx-skill-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; font-size: 0.57em; }
.a4-hx-dots { display: flex; gap: 2px; }
.a4-hx-dot { width: 6px; height: 6px; border-radius: 1px; transform: rotate(45deg); background: #D9CBA9; }
.a4-hx-dot.on { background: #3A342C; }
.a4-hx-role { font-size: 0.62em; font-weight: 700; color: #1E1B15; }
.a4-hx-org { font-size: 0.57em; color: #B89A6E; font-weight: 600; }
.a4-hx-bullets { margin: 3px 0 8px; padding-left: 13px; }
.a4-hx-bullets li { font-size: 0.57em; line-height: 1.5; color: #45403A; }
.a4-hx-timeline-item { font-size: 0.56em; color: #45403A; margin-bottom: 3px; padding-left: 12px; position: relative; }
.a4-hx-timeline-item::before { content: '—'; position: absolute; left: 0; color: #B89A6E; }

/* ==========================================================================
   Shared "extra details" block — Personal Bio-data, Hobbies, References,
   Declaration. Deliberately generic/unstyled-in-colour so it inherits
   each template's own font-family and text colour from its .a4-tpl-X
   ancestor and always looks "at home", without needing bespoke styling
   repeated 16 times.
   ========================================================================== */
.a4-extra-block { margin-top: 10px; }
.a4-extra-title { font-weight: 700; font-size: 0.64em; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 5px; opacity: 0.9; }
.a4-extra-row { font-size: 0.58em; line-height: 1.65; }
.a4-extra-row b { font-weight: 700; }
.a4-extra-declaration { font-size: 0.56em; line-height: 1.5; font-style: italic; opacity: 0.85; }