/* =============================================================================
   resume.css — the printed document. Shared base + one block per template.
   Loaded only by preview.php and builder.php; never with the site chrome.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Base sheet — A4, always white paper regardless of the site theme
   -------------------------------------------------------------------------- */
.rs {
  /* ---- sheet geometry ----------------------------------------------------
     Every bleed below (rail, banner, split) is derived from these two, so a
     template that changes its own padding — compact, ats-minimal — still has a
     rail that reaches the paper edge. Hard-coded -15mm/-16mm margins only
     worked for templates that kept the default padding. */
  --rs-pad-y: 15mm;
  --rs-pad-x: 16mm;
  /* ---- colour ---- */
  --accent: #4f46e5;
  --rs-ink: #111827;
  --rs-muted: #4b5563;
  --rs-rule: #d1d5db;
  --rs-tint: #f3f4f6;
  /* ---- type -------------------------------------------------------------
     --rs-font is the reader's chosen body face; the builder writes it inline.
     --rs-face is the template's own typographic identity and lands only on the
     name, section titles, job titles and labels. Keeping it in a second
     variable is what stops the inline --rs-font from wiping out every serif
     and monospace template: an inline custom property always beats a class
     rule, so a template setting --rs-font could never win.
     --rs-size-delta is how a template asks for a denser page without fighting
     the inline size either. */
  --rs-font: Inter;
  --rs-face: var(--rs-font);
  --rs-size: 10.5pt;
  --rs-size-delta: 0pt;
  display: block;
  width: 210mm;
  min-height: 297mm;
  padding: var(--rs-pad-y) var(--rs-pad-x);
  background: #ffffff;
  color: var(--rs-ink);
  font-family: var(--rs-font), Inter, Helvetica, Arial, sans-serif;
  font-size: calc(var(--rs-size) + var(--rs-size-delta));
  line-height: 1.5;
  box-sizing: border-box;
  /* Without this Chrome throws away the rail, banner and chip backgrounds when
     the sheet is printed or saved as a PDF. */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  -webkit-font-smoothing: antialiased;
}

.rs * { box-sizing: border-box; }

/* Zero-specificity reset. `:where()` adds nothing to specificity, so every class
   rule below always wins. A plain `.rs h2 { margin: 0 }` would otherwise beat
   `.rs-section__title { margin-bottom: .55em }` and collapse the space under
   every section heading — which is exactly what it did. */
.rs :where(h1, h2, h3, h4, p, ul, ol, li, figure, blockquote) { margin: 0; }
.rs :where(ul, ol) { padding: 0; list-style: none; }
.rs :where(h1, h2, h3) { letter-spacing: -0.01em; color: var(--rs-ink); }
.rs :where(a) { color: inherit; text-decoration: none; }

/* The identity face, applied in one place rather than per template. */
.rs-name, .rs-role, .rs-section__title,
.rs-job__role, .rs-certs__name, .rs-custom__label, .rs-bar__label {
  font-family: var(--rs-face, var(--rs-font)), Inter, Helvetica, Arial, sans-serif;
}

.rs-name {
  margin: 0;
  font-size: 1.85em;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.rs-role { font-size: 1.05em; font-weight: 600; color: var(--accent); margin: 0.15em 0 0; }
.rs-contact { font-size: 0.86em; color: var(--rs-muted); margin: 0.5em 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1em; }
.rs-contact__sep { margin: 0 0.5em; opacity: 0.5; }

.rs-section { margin-top: 1.15em; }
.rs-section__title {
  font-size: 0.82em;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.55em;
}

.rs-text { font-size: 0.95em; color: var(--rs-muted); margin: 0 0 0.4em; }
.rs-text:last-child { margin-bottom: 0; }

.rs-job, .rs-edu, .rs-project { margin-bottom: 0.8em; }
.rs-job:last-child, .rs-edu:last-child, .rs-project:last-child { margin-bottom: 0; }
.rs-job__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rs-job__role { font-size: 1em; font-weight: 700; }
.rs-job__dates { font-size: 0.82em; color: var(--rs-muted); white-space: nowrap; flex: none; }
.rs-job__org { font-size: 0.88em; color: var(--rs-muted); font-style: italic; margin: 0.1em 0 0.35em; }

.rs-bullets { margin: 0.3em 0 0; }
.rs-bullets li { position: relative; padding-left: 0.95em; font-size: 0.93em; margin-bottom: 0.22em; }
.rs-bullets li::before { content: ""; position: absolute; left: 0.12em; top: 0.62em; width: 0.28em; height: 0.28em; border-radius: 50%; background: var(--accent); }

.rs-skills--chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em; }
.rs-skills--chips li {
  font-size: 0.82em;
  font-weight: 500;
  padding: 0.22em 0.6em;
  border-radius: 999px;
  background: var(--rs-tint);
  color: var(--rs-ink);
}
.rs-skills--inline { font-size: 0.93em; color: var(--rs-muted); margin: 0; }
.rs-skills--columns { columns: 3; column-gap: 1.2em; }
.rs-skills--columns li { font-size: 0.9em; margin-bottom: 0.15em; break-inside: avoid; }
.rs-skills--plain li { font-size: 0.93em; margin-bottom: 0.15em; }
.rs-skills--bars { display: block; }
.rs-skills--bars li { margin: 0 0 0.5em; }
.rs-skills--bars li:last-child { margin-bottom: 0; }

.rs-bar { margin-bottom: 0.4em; }
.rs-bar__label { display: block; font-size: 0.85em; margin-bottom: 0.15em; }
.rs-bar__track { display: block; height: 0.4em; background: var(--rs-tint); border-radius: 999px; overflow: hidden; }
.rs-bar__fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

.rs-certs li { font-size: 0.93em; margin-bottom: 0.25em; }
.rs-certs__meta { color: var(--rs-muted); }

.rs-langs { font-size: 0.93em; color: var(--rs-muted); margin: 0; }
.rs-langs-list li { font-size: 0.93em; margin-bottom: 0.15em; }

/* min-width:0 stops a long unbroken line in the wide column from blowing the
   grid out past the page width. */
.rs-main { min-width: 0; }
.rs-skills { margin: 0; }
.rs-certs { margin: 0; }
.rs-certs__name { font-weight: 600; }

/* Contact item hooks: no rules of their own, they exist so a template can
   single one out (e.g. hide the phone number for an overseas application). */

.rs-custom li { font-size: 0.93em; margin-bottom: 0.2em; }
.rs-custom__label { font-weight: 700; }

.rs-photo { display: block; width: 24mm; height: 24mm; border-radius: 50%; object-fit: cover; }

/* -----------------------------------------------------------------------------
   Layout primitives shared by several templates
   -------------------------------------------------------------------------- */
.rs-split { display: grid; grid-template-columns: 34% 1fr; gap: 8mm; min-height: calc(297mm - (var(--rs-pad-y) * 2)); }
.rs-split--right { grid-template-columns: 1fr 32%; }

/* A rail bleeds to the paper edge: negative margins pull it out through the
   sheet's own padding. `--rs-rail-bleed-x` flips for a right-hand rail. */
.rs-rail { background: var(--rs-tint); padding: 6mm 5mm; margin: calc(var(--rs-pad-y) * -1) 0 calc(var(--rs-pad-y) * -1) calc(var(--rs-pad-x) * -1); }
.rs-rail--right { margin: calc(var(--rs-pad-y) * -1) calc(var(--rs-pad-x) * -1) calc(var(--rs-pad-y) * -1) 0; }

/* A rail painted in a brand colour. Every text rule inside it has to be
   re-stated: the base rules put ink on the name and grey on metadata as direct
   declarations, which beat anything merely inherited from the rail. Without
   this the name in modern/creative/sidebar-left rendered near-black on a dark
   panel and the skill-bar labels were invisible. */
.rs-rail--on-color { color: rgba(255, 255, 255, 0.88); }
.rs-rail--on-color .rs-name,
.rs-rail--on-color .rs-role,
.rs-rail--on-color .rs-job__role,
.rs-rail--on-color .rs-certs__name,
.rs-rail--on-color .rs-custom__label { color: #fff; }
.rs-rail--on-color .rs-section__title { color: rgba(255, 255, 255, 0.72); }
.rs-rail--on-color .rs-contact,
.rs-rail--on-color .rs-contact__item,
.rs-rail--on-color .rs-text,
.rs-rail--on-color .rs-langs,
.rs-rail--on-color .rs-langs-list li,
.rs-rail--on-color .rs-certs li,
.rs-rail--on-color .rs-certs__meta,
.rs-rail--on-color .rs-custom li,
.rs-rail--on-color .rs-bar__label,
.rs-rail--on-color .rs-job__org,
.rs-rail--on-color .rs-job__dates { color: inherit; }
.rs-rail--on-color .rs-skills--chips li { background: rgba(255, 255, 255, 0.16); color: #fff; }
.rs-rail--on-color .rs-bar__track { background: rgba(255, 255, 255, 0.24); }
.rs-rail--on-color .rs-bar__fill { background: #fff; }
.rs-rail--on-color .rs-bullets li::before { background: #fff; }

/* Centred header. `.rs-contact` is a flex row, so centring the text is not
   enough on its own. */
.rs-head--centre { text-align: center; }
.rs-head--centre .rs-contact { justify-content: center; }

.rs-head--banner { margin: calc(var(--rs-pad-y) * -1) calc(var(--rs-pad-x) * -1) 0; padding: 9mm var(--rs-pad-x); background: var(--accent); color: #fff; }
.rs-head--banner .rs-name, .rs-head--banner .rs-role { color: #fff; }
.rs-head--banner .rs-contact, .rs-head--banner .rs-contact__item { color: rgba(255, 255, 255, 0.88); }
.rs-head--banner .rs-bullets li::before { background: #fff; }

/* =============================================================================
   1. ats-clean (free) — one column, black on white, nothing decorative
   ========================================================================== */
.rs-ats-clean { --accent: #111827; }
.rs-ats-clean .rs-section__title { color: #111827; border-bottom: 1px solid var(--rs-rule); padding-bottom: 0.2em; }
.rs-ats-clean .rs-bullets li::before { background: #111827; }

/* =============================================================================
   2. ats-minimal (free) — hairline rules, generous whitespace
   ========================================================================== */
.rs-ats-minimal { --rs-pad-y: 18mm; --rs-pad-x: 18mm; line-height: 1.62; }
.rs-ats-minimal .rs-section__title { color: var(--rs-ink); font-size: 0.78em; letter-spacing: 0.16em; }
.rs-ats-minimal .rs-section { border-top: 1px solid var(--rs-rule); padding-top: 1.1em; }
.rs-ats-minimal .rs-bullets li::before { background: var(--rs-ink); }

/* =============================================================================
   3. ats-pro — bold name header with a heavy rule under it
   ========================================================================== */
.rs-ats-pro .rs-name { font-size: 2.1em; letter-spacing: -0.02em; }
.rs-ats-pro .rs-head { border-bottom: 3px solid var(--accent); padding-bottom: 0.6em; }
.rs-ats-pro .rs-section__title { display: inline-block; background: var(--rs-tint); padding: 0.15em 0.6em; border-radius: 2px; }

/* =============================================================================
   4. ats-tech — monospace accents, dense two-column skills
   ========================================================================== */
.rs-ats-tech { --rs-face: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --rs-size-delta: -0.7pt; }
.rs-ats-tech .rs-name { font-weight: 700; letter-spacing: -0.03em; }
.rs-ats-tech .rs-section__title { color: var(--rs-ink); }
.rs-ats-tech .rs-section__title::before { content: "// "; color: var(--accent); }
.rs-ats-tech .rs-skills--columns { columns: 2; }
.rs-ats-tech .rs-bullets li::before { content: ""; border-radius: 0; width: 0.35em; height: 2px; top: 0.7em; }

/* =============================================================================
   5. ats-executive — serif headings, restrained
   ========================================================================== */
.rs-ats-executive { --rs-face: Merriweather, Georgia, serif; --rs-size-delta: -0.5pt; }
.rs-ats-executive .rs-name { letter-spacing: 0.01em; }
.rs-ats-executive .rs-section__title { border-bottom: 1px solid var(--rs-rule); padding-bottom: 0.25em; letter-spacing: 0.12em; }
.rs-ats-executive .rs-job__org { font-style: normal; }

/* =============================================================================
   6. ats-classic — timeless centred header
   ========================================================================== */
.rs-ats-classic .rs-head { border-bottom: 1px solid var(--rs-rule); padding-bottom: 0.8em; }
.rs-ats-classic .rs-section__title { color: var(--rs-ink); text-align: center; letter-spacing: 0.18em; }
.rs-ats-classic .rs-bullets li::before { background: var(--rs-ink); }

/* =============================================================================
   7. modern — coloured sidebar on the left
   ========================================================================== */
.rs-modern .rs-rail { background: var(--accent); border-radius: 0 3mm 3mm 0; }

/* =============================================================================
   8. minimal — almost no colour at all
   ========================================================================== */
.rs-minimal { --rs-muted: #52525b; --rs-rule: #e4e4e7; }
.rs-minimal .rs-role { color: var(--rs-muted); font-weight: 500; }
.rs-minimal .rs-section__title { color: var(--rs-ink); font-weight: 700; letter-spacing: 0.14em; }
.rs-minimal .rs-bullets li::before { display: none; }
.rs-minimal .rs-bullets li { padding-left: 0; }

/* =============================================================================
   9. executive — serif with a muted gold accent
   ========================================================================== */
.rs-executive { --accent: #b08d3f; --rs-face: Merriweather, Georgia, serif; --rs-size-delta: -0.5pt; }
.rs-executive .rs-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--accent); padding-bottom: 0.7em; }
.rs-executive .rs-section__title { color: var(--accent); }
.rs-executive .rs-bullets li::before { background: var(--accent); }

/* =============================================================================
   10. creative — geometric colour block
   ========================================================================== */
.rs-creative .rs-rail { background: var(--accent); padding: 10mm 6mm; }
.rs-creative .rs-name { font-size: 2em; }

/* =============================================================================
   11. elegant-serif — Merriweather headings, airy
   ========================================================================== */
.rs-elegant-serif { --rs-face: Merriweather, Georgia, serif; --rs-size-delta: -0.5pt; line-height: 1.6; }
.rs-elegant-serif .rs-name { font-weight: 700; }
.rs-elegant-serif .rs-section__title { font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 1.1em; color: var(--rs-ink); }
.rs-elegant-serif .rs-section__title::after { content: ""; display: block; width: 32px; height: 2px; background: var(--accent); margin-top: 0.25em; }

/* =============================================================================
   12. two-column — main column plus a compact side rail
   ========================================================================== */
.rs-two-column .rs-rail { background: var(--rs-tint); padding: 6mm 5mm; border-radius: 3mm 0 0 3mm; }

/* =============================================================================
   13. timeline — vertical timeline for experience
   ========================================================================== */
.rs-timeline .rs-job { position: relative; padding-left: 6mm; border-left: 2px solid var(--rs-rule); }
.rs-timeline .rs-job::before { content: ""; position: absolute; left: -3.4px; top: 0.28em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.rs-timeline .rs-job:last-child { border-left-color: transparent; }

/* =============================================================================
   14. sidebar-left — dark sidebar
   ========================================================================== */
.rs-sidebar-left .rs-rail { background: #111827; padding: 10mm 6mm; }

/* =============================================================================
   15. sidebar-right — light sidebar on the right
   ========================================================================== */
.rs-sidebar-right .rs-rail { background: var(--rs-tint); padding: 6mm 5mm; border-radius: 3mm 0 0 3mm; border-left: 3px solid var(--accent); }

/* =============================================================================
   16. bold-header — full width name banner
   ========================================================================== */
.rs-bold-header .rs-head--banner .rs-name { font-size: 2.2em; }
.rs-bold-header .rs-section__title { color: var(--rs-ink); border-left: 4px solid var(--accent); padding-left: 0.5em; }

/* =============================================================================
   17. gradient-accent — subtle gradient rules
   ========================================================================== */
.rs-gradient-accent .rs-head { border-bottom: 1px solid var(--rs-rule); padding-bottom: 0.7em; }
.rs-gradient-accent .rs-section__title { position: relative; padding-bottom: 0.3em; }
.rs-gradient-accent .rs-section__title::after {
  content: ""; display: block; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--accent), rgba(6, 182, 212, 0.35));
  margin-top: 0.28em;
}
.rs-gradient-accent .rs-bullets li::before { background: linear-gradient(135deg, var(--accent), #06b6d4); }

/* =============================================================================
   18. monochrome — grayscale only
   ========================================================================== */
.rs-monochrome { --accent: #52525b; --rs-tint: #e4e4e7; }
.rs-monochrome .rs-role { color: #52525b; }
.rs-monochrome .rs-section__title { color: #27272a; }

/* =============================================================================
   19. european — Europass-style with a photo slot
   ========================================================================== */
.rs-european { --rs-size-delta: -0.5pt; }
.rs-european .rs-head { display: flex; gap: 6mm; align-items: center; border-bottom: 1px solid var(--rs-rule); padding-bottom: 0.8em; }
.rs-european .rs-photo { width: 28mm; height: 28mm; border-radius: 2mm; border: 1px solid var(--rs-rule); }
.rs-european .rs-section__title { color: var(--rs-ink); }
/* Dates get their own left column, the way Europass reads. The head has to be a
   plain block for that: as a flex row it pinned the dates to the right edge. */
.rs-european .rs-job { position: relative; padding-left: 32mm; }
.rs-european .rs-job__head { display: block; }
.rs-european .rs-job__dates { position: absolute; left: 0; top: 0; width: 27mm; white-space: normal; text-align: left; }

/* =============================================================================
   20. infographic — skill bars and icon accents
   ========================================================================== */
.rs-infographic .rs-rail { background: var(--rs-tint); padding: 6mm 5mm; }
.rs-infographic .rs-rail .rs-section__title { color: var(--rs-ink); }
.rs-infographic .rs-bar__fill { background: linear-gradient(90deg, var(--accent), #22d3ee); }
.rs-infographic .rs-name { font-size: 2em; }

/* =============================================================================
   21. compact — everything on one page, tight margins
   ========================================================================== */
.rs-compact { --rs-pad-y: 11mm; --rs-pad-x: 12mm; --rs-size-delta: -1pt; line-height: 1.42; }
.rs-compact .rs-section { margin-top: 0.85em; }
.rs-compact .rs-section__title { margin-bottom: 0.35em; }
.rs-compact .rs-job, .rs-compact .rs-edu, .rs-compact .rs-project { margin-bottom: 0.65em; }
.rs-compact .rs-skills--columns { columns: 4; color: var(--rs-muted); }

/* =============================================================================
   22. academic — long form for publications and grants
   ========================================================================== */
.rs-academic { --rs-face: Merriweather, Georgia, serif; --rs-size-delta: -0.5pt; line-height: 1.58; }
.rs-academic .rs-section__title { color: var(--rs-ink); text-align: left; border-bottom: 1px solid var(--rs-rule); padding-bottom: 0.2em; }

/* -----------------------------------------------------------------------------
   Shared devices for the extended library. Each template block below composes
   these with its own accent and spacing instead of repeating the same rules.
   -------------------------------------------------------------------------- */

/* Header rules. The space under the header comes from the first section's own
   margin-top, so these only set the rule and its padding. */
.rs-head--thin { border-bottom: 1px solid var(--rs-rule); padding-bottom: 0.7em; }
.rs-head--rule { border-bottom: 2px solid var(--accent); padding-bottom: 0.7em; }

/* Name, role and contact close together, for the templates that carry no rules. */
.rs-head--stack .rs-contact { margin-top: 0.35em; }

/* Dates in their own left column. The head has to be a plain block for that —
   as a flex row it pinned the dates to the right edge. */
.rs-dates--gutter .rs-job { position: relative; padding-left: 32mm; }
.rs-dates--gutter .rs-job__head { display: block; }
.rs-dates--gutter .rs-job__dates { position: absolute; left: 0; top: 0; width: 27mm; white-space: normal; text-align: left; }

/* A plain two-column split, for templates whose structure already comes from a
   header band or a gutter, so no rail bleeds to the paper edge. */
.rs-cols { display: grid; grid-template-columns: 1fr 34%; gap: 8mm; margin-top: 1.15em; }
.rs-cols--even { grid-template-columns: 1fr 1fr; }
.rs-cols__main { min-width: 0; }
.rs-cols__side { border-left: 1px solid var(--rs-rule); padding-left: 6mm; min-width: 0; }
.rs-cols .rs-section:first-child,
.rs-cols .rs-main > .rs-section:first-child { margin-top: 0; }

/* Skills as a grid of blocks. */
.rs-skills--mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4em 0.6em; }
.rs-skills--mosaic li { background: var(--rs-tint); color: var(--rs-ink); padding: 0.24em 0.55em; font-size: 0.82em; }

/* =============================================================================
   23. ats-simple (free) — plain single column, nothing decorative
   ========================================================================== */
.rs-ats-simple { --accent: #111827; --rs-size-delta: -0.25pt; }
.rs-ats-simple .rs-section__title { color: #111827; font-size: 0.8em; }
.rs-ats-simple .rs-bullets li::before { background: #111827; }

/* =============================================================================
   24. ats-bold (free) — heavy rules, larger name, still one column
   ========================================================================== */
.rs-ats-bold { --rs-size-delta: -0.2pt; }
.rs-ats-bold .rs-name { font-size: 2.1em; }
.rs-ats-bold .rs-section__title { color: var(--rs-ink); border-bottom: 2px solid var(--accent); padding-bottom: 0.2em; }

/* =============================================================================
   25. ats-graduate (free) — education before experience
   ========================================================================== */
.rs-ats-graduate { --rs-size-delta: -0.25pt; }
.rs-ats-graduate .rs-role { color: var(--rs-muted); font-weight: 500; }
.rs-ats-graduate .rs-section__title { color: var(--rs-ink); }
.rs-ats-graduate .rs-edu { border-left: 2px solid var(--accent); padding-left: 3mm; margin-bottom: 0.7em; }

/* =============================================================================
   26. ats-trades (free) — licences and certifications near the top
   ========================================================================== */
.rs-ats-trades { --rs-size-delta: -0.25pt; }
.rs-ats-trades .rs-section__title { color: var(--rs-ink); background: var(--rs-tint); border-left: 3px solid var(--accent); padding: 0.28em 0.6em; }
.rs-ats-trades .rs-certs li { font-weight: 600; }

/* =============================================================================
   27. ats-federal — date-led gutter and long-form headings
   ========================================================================== */
.rs-ats-federal { --rs-size-delta: -0.5pt; line-height: 1.55; }
.rs-ats-federal .rs-section__title { color: var(--rs-ink); border-bottom: 1px solid var(--rs-rule); padding-bottom: 0.2em; }
.rs-ats-federal .rs-dates--gutter .rs-job__dates { color: var(--rs-ink); font-weight: 600; }

/* =============================================================================
   28. ats-compact (free) — a long career squeezed onto one page
   ========================================================================== */
.rs-ats-compact { --rs-pad-y: 12mm; --rs-pad-x: 13mm; --rs-size-delta: -1.2pt; line-height: 1.38; }
.rs-ats-compact .rs-section { margin-top: 0.8em; }
.rs-ats-compact .rs-section__title { color: var(--rs-ink); font-size: 0.78em; margin-bottom: 0.3em; }
.rs-ats-compact .rs-job, .rs-ats-compact .rs-edu, .rs-ats-compact .rs-project { margin-bottom: 0.55em; }

/* =============================================================================
   29. modern-rail-right — the coloured sidebar, on the right
   ========================================================================== */
.rs-modern-rail-right .rs-role { color: var(--accent); }
.rs-modern-rail-right .rs-rail .rs-section:first-child { margin-top: 0; }

/* =============================================================================
   30. modern-band — colour header, two columns beneath it
   ========================================================================== */
.rs-modern-band .rs-head--banner { margin-bottom: 0; }
.rs-modern-band .rs-cols { margin-top: 1.2em; }

/* =============================================================================
   31. modern-cards — every role in its own tinted block
   ========================================================================== */
.rs-modern-cards .rs-job, .rs-modern-cards .rs-edu, .rs-modern-cards .rs-project {
  background: var(--rs-tint);
  border-left: 3px solid var(--accent);
  padding: 3mm 4mm;
  margin-bottom: 0.7em;
}
.rs-modern-cards .rs-section { margin-top: 1.05em; }

/* =============================================================================
   32. modern-ledger — dates in a gutter, in the accent colour
   ========================================================================== */
.rs-modern-ledger .rs-section__title { color: var(--rs-ink); border-bottom: 1px solid var(--rs-rule); padding-bottom: 0.18em; }
.rs-modern-ledger .rs-dates--gutter .rs-job__dates { color: var(--accent); font-weight: 600; }

/* =============================================================================
   33. modern-duo — two even columns
   ========================================================================== */
.rs-modern-duo .rs-name { font-size: 2.1em; }
.rs-modern-duo .rs-cols__side { font-size: 0.95em; }

/* =============================================================================
   34. modern-rule — headings hung off a rule with a dot
   ========================================================================== */
.rs-modern-rule { padding-left: calc(var(--rs-pad-x) + 9mm); }
.rs-modern-rule .rs-section { position: relative; }
.rs-modern-rule .rs-section::before {
  content: "";
  position: absolute;
  left: -9mm; top: 0.25em; bottom: -0.35em;
  width: 1px;
  background: var(--rs-rule);
}
.rs-modern-rule .rs-section:last-child::before { bottom: 0.25em; }
.rs-modern-rule .rs-section__title { position: relative; color: var(--rs-ink); }
.rs-modern-rule .rs-section__title::before {
  content: "";
  position: absolute;
  left: -9.35mm; top: 0.42em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* =============================================================================
   35. modern-mosaic — skills as a grid of blocks
   ========================================================================== */
.rs-modern-mosaic .rs-section__title { color: var(--rs-ink); }

/* =============================================================================
   36. minimal-hairline — one hairline above every section
   ========================================================================== */
.rs-minimal-hairline .rs-head { padding-bottom: 0.6em; }
.rs-minimal-hairline .rs-section { border-top: 1px solid var(--rs-rule); padding-top: 1em; }
.rs-minimal-hairline .rs-section__title { color: var(--rs-ink); font-size: 0.76em; letter-spacing: 0.18em; }
.rs-minimal-hairline .rs-bullets li::before { background: var(--rs-ink); }

/* =============================================================================
   37. minimal-wide — wide margins, short measure
   ========================================================================== */
.rs-minimal-wide { --rs-pad-y: 22mm; --rs-pad-x: 28mm; line-height: 1.62; }
.rs-minimal-wide .rs-section { max-width: 118mm; }
.rs-minimal-wide .rs-section__title { color: var(--rs-ink); font-size: 0.76em; letter-spacing: 0.2em; }
.rs-minimal-wide .rs-bullets li::before { background: var(--rs-ink); }

/* =============================================================================
   38. minimal-type — typography only, wide leading
   ========================================================================== */
.rs-minimal-type { --rs-size-delta: 0.5pt; line-height: 1.7; }
.rs-minimal-type .rs-name { font-size: 2.2em; }
.rs-minimal-type .rs-section { margin-top: 1.5em; }
.rs-minimal-type .rs-section__title { color: var(--rs-ink); font-size: 0.72em; letter-spacing: 0.26em; }

/* =============================================================================
   39. minimal-quiet — one grey tone, space instead of rules
   ========================================================================== */
.rs-minimal-quiet { --accent: #6b7280; --rs-muted: #4b5563; --rs-size-delta: -0.25pt; line-height: 1.65; }
.rs-minimal-quiet .rs-name { font-weight: 600; }
.rs-minimal-quiet .rs-role { color: var(--rs-muted); font-weight: 500; }
.rs-minimal-quiet .rs-section__title { color: var(--rs-ink); font-size: 0.74em; font-weight: 700; letter-spacing: 0.2em; }
.rs-minimal-quiet .rs-bullets li::before { background: #9ca3af; }
.rs-minimal-quiet .rs-skills--inline { color: var(--rs-ink); }

/* =============================================================================
   40. minimal-index — section names in a column down the left
   ========================================================================== */
.rs-minimal-index .rs-section::after { content: ""; display: block; clear: both; }
.rs-minimal-index .rs-section__title { float: left; width: 32mm; margin: 0; color: var(--rs-ink); font-size: 0.72em; letter-spacing: 0.14em; }
.rs-minimal-index .rs-section > *:not(.rs-section__title) { margin-left: 36mm; }

/* =============================================================================
   41. creative-band — the name set in a band of colour
   ========================================================================== */
.rs-creative-band .rs-head--band .rs-name { display: inline-block; background: var(--accent); color: #fff; padding: 0.08em 0.34em 0.14em; }
.rs-creative-band .rs-role { margin-top: 0.4em; }
.rs-creative-band .rs-section__title { color: var(--rs-ink); }

/* =============================================================================
   42. creative-offset — a colour block down the left edge
   ========================================================================== */
.rs-creative-offset { position: relative; padding-left: calc(var(--rs-pad-x) + 10mm); }
.rs-creative-offset::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6mm;
  background: var(--accent);
}

/* =============================================================================
   43. creative-stamp — initials set in a solid square
   ========================================================================== */
.rs-head--stamp { display: flex; align-items: center; gap: 5mm; }
.rs-head--stamp .rs-head__id { min-width: 0; }
.rs-stamp {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 17mm; height: 17mm;
  border-radius: 1mm;
  background: var(--accent);
  color: #fff;
  font-family: var(--rs-face, var(--rs-font)), Inter, Helvetica, Arial, sans-serif;
  font-size: 1.5em;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}
.rs-creative-stamp .rs-section__title { color: var(--rs-ink); border-bottom: 2px solid var(--rs-tint); padding-bottom: 0.24em; }

/* =============================================================================
   44. creative-split — a colour triangle cut across the header
   ========================================================================== */
.rs-head--split { display: flex; align-items: center; gap: 8mm; border-bottom: 1px solid var(--rs-rule); padding-bottom: 0.9em; }
.rs-head--split .rs-head__id { flex: 1; min-width: 0; }
.rs-head--split .rs-head__mark { flex: none; width: 30mm; height: 22mm; background: var(--accent); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.rs-creative-split .rs-section__title { color: var(--rs-ink); }

/* =============================================================================
   45. creative-poster — the name as large as it will go
   ========================================================================== */
.rs-head--poster .rs-name { font-size: 2.6em; letter-spacing: -0.035em; }
.rs-creative-poster .rs-name { font-size: 3.1em; line-height: 1.02; letter-spacing: -0.04em; }
.rs-creative-poster .rs-head { border-bottom: 3px solid var(--accent); padding-bottom: 0.7em; }
.rs-creative-poster .rs-role { font-size: 0.95em; }
.rs-creative-poster .rs-section { margin-top: 1.05em; }
.rs-creative-poster .rs-section__title { color: var(--rs-ink); font-size: 0.72em; letter-spacing: 0.24em; }

/* =============================================================================
   46. creative-tape — headings on a strip of colour
   ========================================================================== */
.rs-creative-tape .rs-head { padding-bottom: 0.7em; }
.rs-creative-tape .rs-section { margin-top: 1.25em; }
.rs-creative-tape .rs-section__title { display: inline-block; background: var(--accent); color: #fff; font-size: 0.74em; padding: 0.22em 0.7em 0.26em; }

/* =============================================================================
   47. executive-classic — centred serif heading over ruled sections
   ========================================================================== */
.rs-executive-classic { --rs-face: Georgia, 'Times New Roman', serif; --rs-size-delta: -0.25pt; }
.rs-executive-classic .rs-head { padding-bottom: 0.7em; }
.rs-executive-classic .rs-role { font-style: italic; font-weight: 500; }
.rs-executive-classic .rs-section__title { color: var(--rs-ink); font-weight: 700; letter-spacing: 0.16em; border-bottom: 1px solid var(--rs-rule); padding-bottom: 0.22em; }

/* =============================================================================
   48. executive-board — the summary held in a panel
   ========================================================================== */
.rs-executive-board { --rs-face: Georgia, 'Times New Roman', serif; }
.rs-executive-board .rs-section__title { color: var(--rs-ink); }
.rs-executive-board .rs-section--panel { background: var(--rs-tint); border-left: 4px solid var(--accent); padding: 4mm 5mm; }
.rs-executive-board .rs-section--panel .rs-section__title { color: var(--accent); margin-bottom: 0.35em; }

/* =============================================================================
   49. executive-ledger — dates in a gutter, set in italic serif
   ========================================================================== */
.rs-executive-ledger { --rs-face: Georgia, 'Times New Roman', serif; --rs-size-delta: -0.3pt; }
.rs-executive-ledger .rs-section__title { color: var(--rs-ink); font-size: 0.76em; letter-spacing: 0.18em; }
.rs-executive-ledger .rs-dates--gutter .rs-job__dates { color: var(--rs-ink); font-style: italic; }

/* =============================================================================
   50. executive-caps — small caps headings, wide margins, no colour
   ========================================================================== */
.rs-executive-caps { --rs-pad-x: 22mm; --rs-face: Georgia, 'Times New Roman', serif; line-height: 1.6; }
.rs-executive-caps .rs-name { font-weight: 600; letter-spacing: 0.01em; }
.rs-executive-caps .rs-role { color: var(--rs-muted); font-weight: 400; }
.rs-executive-caps .rs-section__title { color: var(--rs-ink); font-size: 1em; font-weight: 600; letter-spacing: 0.08em; text-transform: none; font-variant: small-caps; }

/* =============================================================================
   51. executive-letter — headed notepaper: name left, contact right
   ========================================================================== */
.rs-head--letter { display: flex; align-items: flex-end; justify-content: space-between; gap: 8mm; border-bottom: 1px solid var(--rs-rule); padding-bottom: 0.8em; }
.rs-head--letter .rs-head__contact { flex: none; text-align: right; }
.rs-head--letter .rs-contact { justify-content: flex-end; }
.rs-executive-letter { --rs-face: Georgia, 'Times New Roman', serif; }
.rs-executive-letter .rs-role { color: var(--rs-muted); font-style: italic; }
.rs-executive-letter .rs-section__title { color: var(--rs-ink); font-size: 0.78em; }

/* =============================================================================
   52. executive-columns — history left, credentials right
   ========================================================================== */
.rs-executive-columns { --rs-face: Georgia, 'Times New Roman', serif; --rs-size-delta: -0.3pt; }
.rs-executive-columns .rs-role { font-style: italic; }
.rs-executive-columns .rs-section__title { color: var(--rs-ink); border-bottom: 1px solid var(--rs-rule); padding-bottom: 0.2em; }

/* -----------------------------------------------------------------------------
   Print — the sheet is the only thing on the page
   -------------------------------------------------------------------------- */
@media print {
  @page { size: A4; margin: 0; }

  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }

  /* main.js scales the sheet, and the stage that holds it, to fit the screen.
     Both have to be undone or the PDF comes out shrunk and clipped. */
  .preview-sheet, .tpl-render { transform: none !important; }
  .preview-stage { height: auto !important; padding: 0 !important; background: #fff !important; }

  .rs {
    width: 210mm;
    min-height: 0;
    box-shadow: none !important;
    margin: 0 !important;
    border: 0 !important;
  }

  /* Chrome that must never reach paper. */
  .no-print, .site-header, .site-footer, .builder-bar, .builder-panel,
  .ad-slot, .preview-bar, .toast-stack { display: none !important; }

  /* Keep single entries whole. `.rs-section` is deliberately NOT in this list:
     anchoring a whole section pushes a third of the page onto sheet two and
     leaves a hole behind it. */
  .rs-job, .rs-edu, .rs-project, .rs-bullets li, .rs-bar { break-inside: avoid; page-break-inside: avoid; }
  .rs-section__title { break-after: avoid; page-break-after: avoid; }
  .rs-section:first-of-type .rs-section__title { break-before: avoid; }
}

/* Free-plan watermark. Defined outside the print block on purpose: while it
   lived inside `@media print` a free preview showed the words as a stray line
   of text at the foot of the sheet instead of a watermark. */
.rs { position: relative; }
.rs-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}
.rs-watermark span {
  transform: rotate(-32deg);
  font-family: var(--font-head, inherit);
  font-size: 34pt;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.075);
  white-space: nowrap;
}