@font-face{font-family:Plus Jakarta Sans;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-400.af75ea84.woff2) format("woff2")}
@font-face{font-family:Plus Jakarta Sans;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-700.e7f4ddb0.woff2) format("woff2")}
@font-face{font-family:Noto Sans;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/noto-sans-400.bf9ca818.woff2) format("woff2")}
@font-face{font-family:Noto Sans;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/noto-sans-700.1cec0a73.woff2) format("woff2")}
@font-face{font-family:Noto Serif;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/noto-serif-400.29c30c78.woff2) format("woff2")}
@font-face{font-family:Noto Serif;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/noto-serif-700.bbc7ce78.woff2) format("woff2")}
/* ResumeBuilder resume stylesheet. Driven by --rb-* custom properties set on .rb-resume.
   Logical properties only, so right-to-left languages mirror without extra rules. */

@page rb-a4 { size: 210mm 297mm; margin: 0; }
@page rb-letter { size: 8.5in 11in; margin: 0; }

html, body { margin: 0; }

.rb-resume {
  --rb-accent: #1f2933;
  --rb-text: #1f2933;
  --rb-muted: #52606d;
  --rb-bg: #ffffff;
  --rb-font: Noto Sans, sans-serif;
  --rb-size: 10.5pt;
  --rb-leading: 1.35;
  --rb-margin: 16mm;
  --rb-photo: 28mm;
  --rb-main: 100%;
  --rb-side: 0%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  margin-inline: auto;
  padding: var(--rb-margin);
  background: var(--rb-bg);
  color: var(--rb-text);
  font-family: var(--rb-font);
  font-size: var(--rb-size);
  line-height: var(--rb-leading);
  overflow-wrap: anywhere;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.rb-resume *, .rb-resume *::before, .rb-resume *::after { box-sizing: border-box; }

/* Page boxes */
.rb-paper-a4 { inline-size: 210mm; min-block-size: 297mm; page: rb-a4; }
.rb-paper-letter { inline-size: 8.5in; min-block-size: 11in; page: rb-letter; }

/* Header */
.rb-header { display: flex; align-items: center; gap: 5mm; margin-block-end: 1.2em; }
.rb-header-center { flex-direction: column; text-align: center; }
.rb-header-text { flex: 1 1 auto; min-inline-size: 0; }
.rb-name { margin: 0; font-size: 2.1em; line-height: 1.15; font-weight: 700; }
.rb-name, .rb-section-title { color: var(--rb-heading, var(--rb-accent)); font-family: var(--rb-font-heading, var(--rb-font)); }
.rb-headline { margin: 0.2em 0 0; font-size: 1.1em; color: var(--rb-muted); }
.rb-contacts { display: flex; flex-wrap: wrap; gap: 0.2em 1.2em; list-style: none; margin: 0.6em 0 0; padding: 0; color: var(--rb-muted); }
.rb-header-center .rb-contacts { justify-content: center; }
.rb-contact { display: inline-flex; align-items: center; gap: 0.35em; }
.rb-contact a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.rb-icon { inline-size: 1em; block-size: 1em; flex: none; fill: none; stroke: var(--rb-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Photo */
.rb-photo { inline-size: var(--rb-photo); block-size: var(--rb-photo); flex: none; object-fit: cover; }
.rb-photo-circle { border-radius: 50%; }
.rb-photo-rounded { border-radius: 18%; }
.rb-photo-square { border-radius: 0; }

/* Columns */
.rb-body { display: flex; gap: 8mm; align-items: flex-start; }
.rb-main { flex: 0 0 auto; inline-size: var(--rb-main); min-inline-size: 0; }
.rb-layout-one .rb-main { inline-size: 100%; }
.rb-layout-two-left-sidebar .rb-main, .rb-layout-two-right-sidebar .rb-main { inline-size: calc(var(--rb-main) - 4mm); }
.rb-side { flex: 0 0 auto; inline-size: calc(var(--rb-side) - 4mm); min-inline-size: 0; }
.rb-layout-two-left-sidebar .rb-main { order: 2; }
.rb-layout-two-left-sidebar .rb-side { order: 1; }

/* Sections */
.rb-section { margin-block-end: 1.1em; break-inside: auto; }
.rb-section-title { margin: 0 0 0.5em; font-size: 1.1em; line-height: 1.2; font-weight: 700; }
.rb-heading-plain .rb-section-title { color: var(--rb-text); }
.rb-heading-underline .rb-section-title { padding-block-end: 0.25em; border-block-end: 1.5pt solid var(--rb-accent); }
.rb-heading-bar .rb-section-title { padding-inline-start: 0.5em; border-inline-start: 3pt solid var(--rb-accent); }
.rb-heading-boxed .rb-section-title { padding: 0.15em 0.5em; border: 1pt solid var(--rb-accent); border-radius: 2pt; }
.rb-heading-caps .rb-section-title { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.95em; }

.rb-paragraph { margin: 0; white-space: pre-line; }

/* Entries */
.rb-entry { margin-block-end: 0.8em; break-inside: avoid; }
.rb-entry-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
.rb-entry-title { font-weight: 700; }
.rb-entry-title a { color: inherit; }
.rb-entry-dates { flex: none; color: var(--rb-muted); font-size: 0.92em; white-space: nowrap; }
.rb-entry-sub { color: var(--rb-muted); }
.rb-entry-location::before { content: " \00B7  "; }
.rb-entry-description { margin: 0.3em 0 0; white-space: pre-line; }
.rb-bullets { margin: 0.3em 0 0; padding-inline-start: 1.2em; }
.rb-bullets li { margin-block-end: 0.15em; }

/* Skills: tags, bars, dots, list */
.rb-skills { list-style: none; margin: 0; padding: 0; }
.rb-skill-note { margin-inline-start: 0.4em; color: var(--rb-muted); font-size: 0.92em; }
.rb-skills-tags { display: flex; flex-wrap: wrap; gap: 0.35em; }
.rb-skills-tags .rb-skill { padding: 0.1em 0.65em; border: 0.75pt solid var(--rb-accent); border-radius: 999px; }
.rb-skills-bars .rb-skill, .rb-skills-dots .rb-skill { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.2em 0.6em; margin-block-end: 0.4em; }
.rb-level { display: inline-flex; gap: 0.2em; align-items: center; }
.rb-skills-bars .rb-level { display: flex; flex: 0 0 100%; gap: 0.15em; }
.rb-skills-bars .rb-level span { flex: 1 1 0; block-size: 0.4em; background: var(--rb-muted); opacity: 0.25; border-radius: 1em; }
.rb-skills-bars .rb-level span.rb-on { background: var(--rb-accent); opacity: 1; }
.rb-skills-dots .rb-level span { inline-size: 0.6em; block-size: 0.6em; border-radius: 50%; background: var(--rb-muted); opacity: 0.25; }
.rb-skills-dots .rb-level span.rb-on { background: var(--rb-accent); opacity: 1; }
.rb-skill { position: relative; }
.rb-level-text { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.rb-skills-list .rb-skill { margin-block-end: 0.15em; }
.rb-skills-list .rb-level { display: none; }

/* Plain list */
.rb-list { margin: 0; padding-inline-start: 1.2em; }
.rb-list-note { margin-inline-start: 0.4em; color: var(--rb-muted); }

/* Branding */
.rb-branding { margin-block-start: 1.5em; padding-block-start: 0.6em; border-block-start: 0.5pt solid var(--rb-muted); color: var(--rb-muted); font-size: 0.8em; text-align: center; }
/* Career at a glance (optional, under the header): bars are tints of the accent, oldest lightest, so it reads in greyscale too */
.rb-career { break-inside: avoid; }
.rb-career-chart { display: block; inline-size: 100%; block-size: auto; overflow: visible; font-family: var(--rb-font); }
.rb-career-bar { fill: var(--rb-accent); }
.rb-career-name { fill: var(--rb-text); font-size: 12px; }
.rb-career-years { fill: var(--rb-muted); font-size: 10.5px; }
.rb-career-total { fill: var(--rb-text); font-size: 12px; font-weight: 700; font-family: var(--rb-font-heading, var(--rb-font)); }
.rb-doc-footer { margin: 1em 0; text-align: center; font: 0.8rem Noto Sans, sans-serif; color: #52606d; }

/* Free preview watermark: diagonal repeating text over the whole page, never interactive */
.rb-watermark {
  position: absolute;
  inset: -50%;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-around;
  transform: rotate(-30deg);
  pointer-events: none;
  user-select: none;
  font-size: 40pt;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(0 0 0 / 7%);
}

/* Key figures: up to three numbers with a caption, real text in a grid */
.rb-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6em 1.2em; list-style: none; margin: 0; padding: 0; }
.rb-figure { display: flex; flex-direction: column; gap: 0.1em; padding-inline-start: 0.6em; border-inline-start: 2pt solid var(--rb-accent); break-inside: avoid; }
.rb-figure-number { color: var(--rb-heading, var(--rb-text)); font-family: var(--rb-font-heading, var(--rb-font)); font-size: 1.5em; font-weight: 700; line-height: 1.1; }
.rb-figure-caption { color: var(--rb-muted); font-size: 0.9em; }
.rb-side .rb-figures { grid-template-columns: minmax(0, 1fr); }

/* Look: Executive. One column, serif name, small capitals with a hairline running to the margin, key figures under the header. */
.rb-look-executive .rb-header { display: block; margin-block-end: 1.1em; padding-block-end: 1em; border-block-end: 1.5pt solid var(--rb-heading, var(--rb-accent)); }
.rb-look-executive .rb-name { font-size: 2.6em; font-weight: 400; letter-spacing: 0.01em; line-height: 1.1; }
.rb-look-executive .rb-headline { margin-block-start: 0.15em; }
.rb-look-executive .rb-section-title { display: flex; align-items: center; gap: 0.7em; padding: 0; border: 0; font-size: 0.92em; letter-spacing: 0.14em; text-transform: uppercase; }
.rb-look-executive .rb-section-title::after { content: ""; flex: 1 1 auto; border-block-start: 0.75pt solid color-mix(in srgb, var(--rb-muted) 45%, transparent); }
.rb-look-executive .rb-kind-highlights { margin-block-end: 1.3em; }
.rb-look-executive .rb-kind-highlights .rb-section-title { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Look: Modern split. A tinted sidebar panel on the start side (photo, contact, side sections); the main column comes first in the text. */
.rb-look-split .rb-body { display: grid; grid-template-columns: var(--rb-side) minmax(0, 1fr); gap: 0 7mm; align-items: stretch; }
.rb-look-split .rb-main, .rb-look-split .rb-side { inline-size: auto; order: 0; }
.rb-look-split .rb-main { grid-column: 2; grid-row: 1; }
.rb-look-split .rb-side { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; padding: 6mm 5mm; border-radius: 2pt; background: color-mix(in srgb, var(--rb-accent) 9%, var(--rb-bg)); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rb-look-split .rb-side .rb-photo { align-self: center; margin-block-end: 5mm; }
.rb-look-split .rb-header { display: block; margin-block-end: 1em; }
.rb-look-split .rb-name { color: var(--rb-text); font-size: 2.3em; }
.rb-look-split .rb-headline { color: var(--rb-accent); font-weight: 700; }
.rb-look-split .rb-main .rb-section-title { font-size: 1em; letter-spacing: 0.1em; text-transform: uppercase; }
.rb-look-split .rb-side .rb-section-title { padding: 0 0 0.25em; border: 0; border-block-end: 1.5pt solid var(--rb-accent); font-size: 0.8em; letter-spacing: 0.1em; text-transform: uppercase; }
.rb-look-split .rb-side-contact .rb-contacts { flex-direction: column; gap: 0.3em; margin: 0; color: var(--rb-text); font-size: 0.92em; }
.rb-look-split .rb-side .rb-entry-head { flex-direction: column; gap: 0; }
.rb-look-split .rb-side .rb-entry-dates { white-space: normal; }
.rb-look-split .rb-skills-bars .rb-level span { background: color-mix(in srgb, var(--rb-accent) 22%, var(--rb-bg)); opacity: 1; }
.rb-look-split .rb-skills-bars .rb-level span.rb-on { background: var(--rb-accent); }

/* Look: Signature. A colour band header (name, job title, contact), experience as a timeline with the dates still printed. */
.rb-look-signature .rb-header { margin-block-end: 7mm; padding: 9mm 8mm 7mm; border-radius: 2pt; background: var(--rb-heading, var(--rb-accent)); color: var(--rb-bg); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rb-look-signature .rb-header-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; column-gap: 6mm; align-items: end; }
.rb-look-signature .rb-headline { align-self: start; margin-block-start: 0.35em; }
.rb-look-signature .rb-name, .rb-look-signature .rb-headline { grid-column: 1; }
.rb-look-signature .rb-name { color: inherit; font-size: 2.5em; letter-spacing: -0.01em; line-height: 1.05; }
.rb-look-signature .rb-headline { color: inherit; opacity: 0.9; }
.rb-look-signature .rb-contacts { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; align-items: end; gap: 0.15em; margin: 0; color: inherit; font-size: 0.88em; text-align: end; }
.rb-look-signature .rb-icon { stroke: currentColor; }
.rb-look-signature .rb-section-title { display: flex; align-items: center; gap: 0.5em; padding: 0; border: 0; font-size: 0.95em; letter-spacing: 0.12em; text-transform: uppercase; }
.rb-look-signature .rb-section-title::before { content: ""; flex: none; inline-size: 0.7em; block-size: 0.7em; border-radius: 50%; background: var(--rb-accent); }
.rb-look-signature .rb-kind-experience .rb-entry { position: relative; margin-block-end: 0; padding-inline-start: 1.5em; padding-block-end: 0.8em; }
.rb-look-signature .rb-kind-experience .rb-entry::before { content: ""; position: absolute; inset-inline-start: 0.32em; inset-block: 0.7em -0.3em; border-inline-start: 1.5pt solid color-mix(in srgb, var(--rb-muted) 35%, transparent); }
.rb-look-signature .rb-kind-experience .rb-entry:last-child::before { display: none; }
.rb-look-signature .rb-kind-experience .rb-entry::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.3em; inline-size: 0.75em; block-size: 0.75em; border-radius: 50%; background: var(--rb-accent); box-shadow: 0 0 0 1.5pt var(--rb-bg); }
.rb-look-signature .rb-skills-tags .rb-skill { border-color: var(--rb-accent); color: var(--rb-heading, var(--rb-text)); }
.rb-look-signature .rb-side .rb-entry-head { flex-direction: column; gap: 0; }
.rb-look-signature .rb-side .rb-entry-dates { white-space: normal; }

/* Fonts are declared by the host (@font-face for plus-jakarta-sans, noto-sans, noto-serif; weights 400 and 700). */

@media print {
  .rb-resume { margin: 0; }
  .rb-print-blocked .rb-resume { display: none; }
  .rb-print-blocked::after { content: attr(data-print-notice); display: block; padding: 20mm; font: 14pt Noto Sans, sans-serif; }
}
