/* ============ Base & print setup ============ */

:root
{
  --ink: #1c1e22;
  --ink-soft: #43474e;
  --ink-faint: #7a7f88;
  --accent: #f28118;
  --accent-deep: #d96c0a;
  --accent-tint: #fdf1e3;
  --line: #e6e2db;
  --paper: #ffffff;
  --paper-soft: #faf8f5;
  --grey-soft: #eeedeb;  /* light grey chip fill */
  --grey-line: #dfdcd8;
  --ink-mid: #34383e;    /* between ink and ink-soft, reads crisp on grey */
}

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

html, body
{
  background: #e9e7e3;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  color: var(--ink);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.page
{
  width: 210mm;
  height: 297mm;
  background: var(--paper);
  margin: 8mm auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
  page-break-after: always;
}

@media print
{
  html, body
  {
    background: none;
  }

  .page
  {
    margin: 0;
    box-shadow: none;
  }
}

/* ============ Shared elements ============ */

.mono
{
  font-family: 'JetBrains Mono', monospace;
}

.accent
{
  color: var(--accent);
}

/* Content page header */

.page-header
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10mm 16mm 0 16mm;
}

.page-header .who
{
  display: flex;
  align-items: center;
  gap: 4mm;
}

.page-header img
{
  width: 9mm;
  height: 9mm;
}

.page-header .who .name
{
  font-size: 10.5pt;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.page-header .who .role
{
  font-size: 7.5pt;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-header .tag
{
  font-size: 7.5pt;
  color: var(--ink-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.header-rule
{
  height: 0.6mm;
  margin: 4mm 16mm 0 16mm;
  background: linear-gradient(90deg, var(--accent) 0 22mm, var(--line) 22mm);
}

/* Content page foo */

.page-foo
{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16mm 8mm 16mm;
  font-size: 7.5pt;
  color: var(--ink-faint);
}

.page-foo .pagenum
{
  font-weight: 600;
  color: var(--ink-soft);
}

.page-body
{
  padding: 8mm 16mm 0 16mm;
}

/* Section headings */

.section
{
  margin-bottom: 6mm;  /* section break; stays clearly wider than the 4.5mm title gap */
}

.section-title
{
  display: flex;
  align-items: baseline;
  gap: 3mm;
  margin-bottom: 4.5mm;
}

.section-title .index
{
  font-family: 'JetBrains Mono', monospace;
  font-size: 8pt;
  font-weight: 600;
  color: var(--accent);
}

.section-title h2
{
  font-size: 13pt;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.section-title .rule
{
  flex: 1;
  height: 0.35mm;
  background: var(--line);
  align-self: center;
}

/* Comment directly under a section heading, as an info callout */

.section-comment
{
  display: flex;
  align-items: flex-start;
  gap: 2.5mm;
  font-size: 9.5pt;
  line-height: 1.5;
  color: var(--ink-soft);
  background: var(--accent-tint);
  border-left: 1mm solid var(--accent);
  border-radius: 0 2mm 2mm 0;
  padding: 2.6mm 4mm;
  margin: 0.8mm 0 4mm 0;
}

.section-comment .info  /* (i) badge drawn in CSS, so no icon font is needed */
{
  flex: 0 0 auto;
  width: 4mm;
  height: 4mm;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  font-size: 8pt;
  font-weight: 700;
  line-height: 4mm;
  text-align: center;
  margin-top: 0.5mm;
}

/* ============ Cover page ============ */

.cover
{
  display: flex;
  flex-direction: column;
}

.cover-top
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14mm 18mm 0 18mm;
  position: relative;
  z-index: 1;
}

.cover-brand
{
  display: flex;
  align-items: center;
  gap: 5mm;
}

.cover-brand img
{
  width: 14mm;
  height: 14mm;
}

.cover-brand .brand-text
{
  font-size: 9pt;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.cover-doc-tag
{
  font-family: 'JetBrains Mono', monospace;
  font-size: 8pt;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
}

/* Hero: portrait + name */

.cover-hero
{
  display: flex;
  align-items: center;
  gap: 12mm;
  padding: 16mm 18mm 0 18mm;
  position: relative;
  z-index: 1;
}

.portrait-frame  /* padding covers the offset accent frame, so the hero centers on the whole group */
{
  --portrait-w: 47mm;
  --portrait-h: 60mm;
  --frame-offset: 4mm;

  position: relative;
  flex-shrink: 0;
  padding-bottom: var(--frame-offset);
}

.portrait-frame img
{
  width: var(--portrait-w);
  height: var(--portrait-h);
  object-fit: cover;
  border-radius: 3mm;
  display: block;
}

.portrait-frame::after
{
  content: '';
  position: absolute;
  top: var(--frame-offset);
  left: var(--frame-offset);
  width: var(--portrait-w);
  height: var(--portrait-h);
  border: 1mm solid var(--accent);
  border-radius: 3mm;
  z-index: -1;
}

.cover-id .kicker
{
  font-family: 'JetBrains Mono', monospace;
  font-size: 9pt;
  color: var(--accent-deep);
  letter-spacing: 0.08em;
  margin-bottom: 4mm;
}

.cover-id h1  /* sized so the full name stays on one line next to the portrait */
{
  font-size: 27pt;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.cover-id .role-line
{
  margin-top: 4.5mm;
  font-size: 12.5pt;
  font-weight: 500;
  color: var(--ink-soft);
}

.cover-id .role-line strong
{
  color: var(--ink);
  font-weight: 700;
}

.cover-id .xp-badge
{
  display: inline-block;
  margin-top: 6mm;
  padding: 1.8mm 4.5mm;
  background: var(--ink);
  color: #fff;
  font-size: 9.5pt;
  font-weight: 600;
  border-radius: 10mm;
  letter-spacing: 0.03em;
}

.cover-id .xp-badge .accent
{
  color: var(--accent);
}

/* Value proposition bullets */

.cover-value
{
  padding: 12mm 18mm 0 18mm;
  position: relative;
  z-index: 1;
}

.cover-value h3,
.cover-skills h3,
.cover-langs h3
{
  font-size: 9pt;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 4mm;
}

.value-grid
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4mm 8mm;
}

.value-item
{
  display: flex;
  gap: 3.5mm;
  align-items: flex-start;
}

.value-item .marker
{
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 10pt;
  color: var(--accent);
  line-height: 1.45;
}

.value-item .text
{
  font-size: 10pt;
  line-height: 1.45;
  color: var(--ink-soft);
}

.value-item .text strong
{
  color: var(--ink);
  font-weight: 600;
}

/* Skill chips */

.cover-skills
{
  padding: 10mm 18mm 0 18mm;
  position: relative;
  z-index: 1;
}

.chip-row
{
  display: flex;
  flex-wrap: wrap;
  gap: 2.5mm;
}

.chip
{
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5pt;
  font-weight: 600;
  padding: 1.6mm 3.6mm;
  border: 0.35mm solid var(--line);
  border-radius: 1.5mm;
  color: var(--ink-soft);
  background: var(--paper-soft);
}

/* Compact grey chip, for the narrow skill column */

.chip-row.sm
{
  gap: 1.6mm;
}

.chip.sm
{
  font-size: 7.5pt;
  padding: 1mm 2.5mm;
  border-radius: 1mm;
  border-color: var(--grey-line);
  color: var(--ink-mid);
  background: var(--grey-soft);
}

.chip.super
{
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent-deep);
}

/* Languages */

.cover-langs
{
  padding: 9mm 18mm 0 18mm;
  position: relative;
  z-index: 1;
}

.lang-row
{
  display: flex;
  gap: 12mm;
}

.lang
{
  display: flex;
  gap: 3mm;
  align-items: baseline;
}

.lang .name  /* light grey filled pill, quieter than the outlined tech chips above */
{
  font-size: 9pt;
  font-weight: 600;
  padding: 1.4mm 3.4mm;
  border-radius: 10mm;
  color: var(--ink-soft);
  background: var(--line);
}

.lang .level
{
  font-size: 9.5pt;
  color: var(--ink-soft);
}

/* Cover base: key facts + QR + contact */

.cover-base
{
  margin-top: auto;
  position: relative;
  z-index: 1;
}

.facts-strip
{
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: space-between;  /* flush with 2 content margins */
  gap: 5mm;
  margin: 0 18mm;
  padding: 5mm 0;
  border-top: 0.35mm solid var(--line);
}

.fact .fact-label
{
  font-size: 7pt;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.2mm;
}

.fact .fact-value
{
  font-size: 10pt;
  font-weight: 600;
}

.fact .fact-value .point
{
  display: inline-block;
  width: 2.2mm;
  height: 2.2mm;
  border-radius: 50%;
  background: #2fae5f;
  margin-right: 1.5mm;
}

.cover-contact
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ink);
  color: #fff;
  padding: 6mm 18mm;
}

.contact-items
{
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 2mm;
  font-size: 9pt;
}

.contact-items .row
{
  display: contents;  /* labels and values join the parent grid, so they align in columns */
}

.contact-items .val
{
  color: #d8dade;
}

.contact-items a.val
{
  text-decoration: none;  /* clickable, but looks like the plain text values */
}

.contact-items .lbl
{
  color: var(--accent);
  font-weight: 600;
}

.contact-items .val + .lbl
{
  margin-left: 6mm;  /* gap between 2 label/value pairs */
}

.cover-qr
{
  display: flex;
  align-items: center;
  gap: 4mm;
  color: inherit;
  text-decoration: none;  /* opens the large QR page, but looks like the plain block it replaced */
}

.cover-qr img
{
  width: 18mm;
  height: 18mm;
  background: #fff;
  border-radius: 1.5mm;
  padding: 1mm;
}

.cover-qr .qr-hint
{
  font-size: 7.5pt;
  color: #a9adb5;
  max-width: 26mm;
  line-height: 1.4;
}

/* ============ Profile & key facts ============ */

.profile-text
{
  font-size: 10.5pt;
  line-height: 1.6;
  color: var(--ink-soft);
}

.profile-text strong
{
  color: var(--ink);
  font-weight: 600;
}

.highlight-cards
{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4mm;
  margin-top: 5mm;
}

.hl-card
{
  background: var(--paper-soft);
  border: 0.35mm solid var(--line);
  border-radius: 2mm;
  padding: 4mm;
}

.hl-card .hl-num
{
  font-family: 'JetBrains Mono', monospace;
  font-size: 15pt;
  font-weight: 600;
  color: var(--accent-deep);
}

.hl-card .hl-label
{
  font-size: 8pt;
  color: var(--ink-faint);
  margin-top: 1mm;
  line-height: 1.4;
}

/* ============ Services ============ */

.service-grid
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4mm;
}

.service
{
  border: 0.35mm solid var(--line);
  border-left: 1mm solid var(--accent);
  border-radius: 0 2mm 2mm 0;
  padding: 4mm 5mm;
}

.service h4
{
  font-size: 10.5pt;
  font-weight: 700;
  margin-bottom: 1.5mm;
}

.service p
{
  font-size: 9pt;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ============ Skill matrix ============ */

.skill-groups
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5mm 8mm;
}

.skill-group h4
{
  font-size: 9pt;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 2.5mm;
  padding-bottom: 1.5mm;
  border-bottom: 0.35mm solid var(--line);
}

.skill-row
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4mm 0;
  font-size: 9.5pt;
}

.skill-row .years
{
  font-family: 'JetBrains Mono', monospace;
  font-size: 8pt;
  color: var(--ink-faint);
  margin-left: auto;
  margin-right: 3mm;
}

.level
{
  display: flex;
  gap: 1mm;
}

.level i
{
  width: 4.5mm;
  height: 1.6mm;
  border-radius: 1mm;
  background: var(--line);
}

.level i.on
{
  background: var(--accent);
}

.new-tag
{
  font-size: 6.5pt;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: var(--accent-tint);
  border-radius: 1mm;
  padding: 0.5mm 1.5mm;
  margin-left: 1.5mm;
  vertical-align: 0.3mm;
}

/* Tiered AI technology detail */

.tech-detail
{
  margin-top: 5mm;
}

.tech-detail h4
{
  font-size: 9pt;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 2.5mm;
  padding-bottom: 1.5mm;
  border-bottom: 0.35mm solid var(--line);
}

.tier
{
  display: flex;
  align-items: flex-start;
  gap: 3mm;
  margin-top: 2mm;
}

.tier .tier-label
{
  flex-shrink: 0;
  width: 24mm;
  font-size: 8pt;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 1.6mm;
}

/* ============ Project history ============ */

.project
{
  display: grid;
  grid-template-columns: 32mm 1fr;  /* fits a full date range in one line */
  gap: 4mm;
  padding: 5mm 0;
  border-bottom: 0.35mm solid var(--line);
}

.project:last-child
{
  border-bottom: none;
}

.project .meta .period
{
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5pt;
  font-weight: 600;
  color: var(--accent-deep);
  white-space: nowrap;  /* a date range stays on one line, breaks only where a <br> is set */
}

.project .meta .duration
{
  font-size: 8pt;
  color: var(--ink-faint);
  margin-top: 1mm;
}

.project .meta .industry
{
  display: inline-block;
  margin-top: 2.5mm;
  font-size: 7.5pt;
  padding: 1mm 2.5mm;
  background: var(--paper-soft);
  border: 0.35mm solid var(--line);
  border-radius: 1mm;
  color: var(--ink-soft);
}

.project h4
{
  font-size: 11pt;
  font-weight: 700;
}

.project .role
{
  font-size: 9pt;
  color: var(--accent-deep);
  font-weight: 600;
  margin-top: 0.8mm;
}

.project ul
{
  margin: 2.5mm 0 0 4mm;
  font-size: 9.5pt;
  line-height: 1.5;
  color: var(--ink-soft);
}

.project ul li
{
  margin-bottom: 1mm;
}

.project .stack
{
  margin-top: 2.5mm;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8pt;
  color: var(--ink-faint);
  line-height: 1.6;
}

.project .stack .lbl
{
  color: var(--accent-deep);
  font-weight: 600;
}

/* ============ Education & certificates ============ */

.edu-list
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4mm 8mm;
}

.edu-item
{
  display: flex;
  gap: 4mm;
  align-items: baseline;
}

.edu-item .year
{
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5pt;
  font-weight: 600;
  color: var(--accent-deep);
  flex-shrink: 0;
  width: 20mm;
}

.edu-item .what
{
  font-size: 9.5pt;
  line-height: 1.45;
}

.edu-item .what .org
{
  color: var(--ink-faint);
  font-size: 8.5pt;
  display: block;
}

/* ============ Interests ============ */

.interest-list
{
  display: grid;
  gap: 2.5mm;
}

.interest-line
{
  display: flex;
  gap: 4mm;
  align-items: baseline;
  font-size: 9.5pt;
  line-height: 1.45;
  color: var(--ink-soft);
}

.interest-line .cat  /* same width as .edu-item .year, so 2 sections align */
{
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5pt;
  font-weight: 600;
  color: var(--accent-deep);
  flex-shrink: 0;
  width: 20mm;
}

/* ============ Web toolbar (screen only, hidden in print) ============ */

.web-toolbar
{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 100;
  display: flex;
  gap: 10px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(28, 30, 34, 0.12);
}

.web-toolbar a
{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.web-toolbar a:active
{
  transform: translateY(1px);
}

.web-toolbar a svg
{
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.web-toolbar .tb-print
{
  background: var(--accent);
  color: #fff;
}

.web-toolbar .tb-print:hover
{
  background: var(--accent-deep);
}

.web-toolbar .tb-site
{
  background: var(--grey-soft);
  border-color: var(--grey-line);
  color: var(--ink-mid);
}

.web-toolbar .tb-site:hover
{
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent-deep);
}

@media (max-width: 820px)
{
  .web-toolbar
  {
    top: auto;
    bottom: 14px;
    left: 14px;
    right: 14px;
    justify-content: center;
  }

  .web-toolbar a
  {
    flex: 1 1 0;
    justify-content: center;
  }
}

@media print
{
  .web-toolbar
  {
    display: none !important;
  }
}