/* ==========================================================================
   CV — "executive summary" design system. See CLAUDE.md → Design system.
   Layout concept: a consultant's one-page summary. Section headings sit in a
   left rail; content runs in the main column; every block opens with a
   full-width ink rule. One amber highlighter marks what matters.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-variable.woff2") format("woff2-variations"),
       url("fonts/archivo-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  /* Archivo's "&" is a stylised Et that reads like a stray letter at text
     sizes, so it falls through to the fallback face. */
  unicode-range: U+0000-0025, U+0027-FFFF;
}

:root {
  /* Colour */
  --paper: #f6f7f4;          /* page ground */
  --surface: #ffffff;        /* inputs */
  --ink: #16181d;            /* text, rules, secondary buttons */
  --ink-soft: #4d5159;       /* metadata; 7.4:1 on paper */
  --line: #d4d7d0;           /* hairlines */
  --line-strong: #858990;    /* control borders; 3.2:1 on paper (WCAG 1.4.11) */
  --mark: #eeb23c;           /* amber highlighter + primary action */
  --mark-strong: #d99a1f;    /* primary hover */
  --mark-wash: #fbefd3;      /* matched-role background */
  --link: #2b2f8f;           /* footnote markers, text links */

  /* Type */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-md: 1.25rem;
  --text-lg: clamp(1.4rem, 2.4vw, 2.05rem);
  --text-fig: clamp(2.2rem, 4.2vw, 3.4rem);
  --text-name: clamp(2.6rem, 6.4vw, 4.75rem);

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3.5rem;
  --space-9: 5rem;

  /* Layout */
  --wrap: 72rem;
  --rail: 11rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: 66ch;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 4.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.55;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--mark); color: var(--ink); }

h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.skip-link {
  position: absolute; left: var(--space-4); top: -3rem; z-index: 10;
  background: var(--ink); color: var(--paper); padding: var(--space-2) var(--space-4);
}
.skip-link:focus { top: var(--space-2); }

.print-only { display: none; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Tracker (sticky section nav) ---------------------------------------- */

.tracker {
  position: sticky; top: 0; z-index: 5;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
}
.tracker-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  font-size: 0.8125rem; font-stretch: 82%; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.tracker a { color: var(--ink-soft); text-decoration: none; }
.tracker a:hover { color: var(--ink); }
.tracker-name { color: var(--ink) !important; padding-block: var(--space-4); white-space: nowrap; }
.tracker nav { display: flex; gap: var(--space-5); overflow-x: auto; scrollbar-width: none; }
.tracker nav a { padding-block: var(--space-4) calc(var(--space-4) - 3px); border-bottom: 3px solid transparent; white-space: nowrap; }
.tracker nav a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--ink); }

/* ---- Blocks ---------------------------------------------------------------- */

.block {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--space-5) var(--space-7);
  padding-block: var(--space-7) var(--space-8);
  border-top: 2px solid var(--ink);
}
.block h2 { font-size: var(--text-md); font-weight: 700; font-stretch: 105%; letter-spacing: -0.01em; }
.rail-note { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.45; }
.block-body { min-width: 0; }

/* ---- Intro (first screen) ------------------------------------------------ */

.intro {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--space-6) var(--space-7);
}
.intro > * { grid-column: 2; }
.intro > .figures, .intro > .footnotes { grid-column: 1 / -1; }
.intro {
  padding-block: var(--space-8) var(--space-6);
}
.intro h1 {
  font-size: var(--text-name); font-weight: 800; font-stretch: 112%;
  letter-spacing: -0.03em; line-height: 0.95;
}
.intro-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin-top: var(--space-4); color: var(--ink-soft); font-size: 0.9375rem; }

.statement {
  font-size: var(--text-lg); font-weight: 500; line-height: 1.3; letter-spacing: -0.012em;
  max-width: 34ch;
}

mark {
  background: linear-gradient(transparent 56%, var(--mark) 56%);
  color: inherit; font-weight: 700; padding-inline: 0.06em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.fn-ref { font-size: 0.6875rem; font-weight: 600; line-height: 0; margin-left: 1px; }
.statement .fn-ref { font-size: 0.8125rem; }
.fn-ref a { text-decoration: none; padding-inline: 1px; }

.figures {
  grid-column: 1 / -1;
  list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line);
}
.figure { padding: var(--space-5) var(--space-5) var(--space-5) 0; border-right: 1px solid var(--line); }
.figure + .figure { padding-left: var(--space-5); }
.figure:last-child { border-right: 0; }
.figure b {
  display: inline-block; font-size: var(--text-fig); font-weight: 800; font-stretch: 125%;
  letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  /* Highlighter swipe: the amber band draws left to right on hover/focus. */
  background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 88% / 0% 38%;
  transition: background-size 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.figure span { display: block; margin-top: var(--space-2); max-width: 22ch; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.4; }
.figure:hover b, .figure:focus-within b { background-size: 100% 38%; }

.intro-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.intro-contact:has(> [hidden]) { display: none; }

.footnotes {
  margin-bottom: var(--space-5);
  list-style: none; font-size: 0.8125rem; color: var(--ink-soft);
  counter-reset: fn;
}
.footnotes li { counter-increment: fn; padding-left: 1.2em; text-indent: -1.2em; transition: background-color 0.3s; }
.footnotes li::before { content: counter(fn) " "; color: var(--link); font-weight: 600; }
.footnotes a { color: inherit; }
.footnotes li.is-source { background: var(--mark-wash); color: var(--ink); }

/* ---- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: 0 var(--space-5);
  font: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1;
  color: var(--ink); background: transparent; text-decoration: none;
  border: 1.5px solid var(--ink); border-radius: 0; cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--primary { background: var(--mark); border-color: var(--mark); }
.btn--primary:hover { background: var(--mark-strong); border-color: var(--mark-strong); color: var(--ink); }
.btn--small { min-height: 2.25rem; padding-inline: var(--space-4); font-size: var(--text-sm); }
.btn:disabled { opacity: 0.55; cursor: progress; }

/* ---- Contact form --------------------------------------------------------- */

.contact-panel { max-width: 46rem; padding-top: var(--space-5); border-top: 1px solid var(--line); }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; gap: var(--space-2) var(--space-5); }
.contact-intro { grid-column: 1 / -1; margin-bottom: var(--space-2); color: var(--ink-soft); }
.contact-field {
  font-size: 0.8125rem; font-weight: 600; font-stretch: 85%; text-transform: uppercase; letter-spacing: 0.05em;
}
/* Name/email labels + inputs pair up in two columns; message spans both. */
.contact-form label[for="contact-name"] { grid-column: 1; grid-row: 2; }
.contact-form #contact-name { grid-column: 1; grid-row: 3; }
.contact-form label[for="contact-email"] { grid-column: 2; grid-row: 2; }
.contact-form #contact-email { grid-column: 2; grid-row: 3; }
.contact-field--full, .contact-form textarea, .cf-turnstile, .contact-submit { grid-column: 1 / -1; }
.contact-field--full { margin-top: var(--space-3); }
.contact-submit { justify-self: start; margin-top: var(--space-3); }
.contact-form input, .contact-form textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--surface);
  border: 1px solid var(--ink-soft); border-radius: 0; padding: var(--space-3);
  width: 100%;
}
.contact-form textarea { resize: vertical; min-height: 8rem; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--link); outline-offset: 0; border-color: var(--link); }
.contact-status { margin-top: var(--space-4); font-weight: 600; }
.contact-privacy { margin-top: var(--space-4); max-width: var(--measure); font-size: var(--text-sm); color: var(--ink-soft); }

/* ---- Roles ---------------------------------------------------------------- */

.role { scroll-margin-top: 5rem; }
article.role + article.role { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.role h3 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; }
.role-meta { margin-top: var(--space-1); color: var(--ink-soft); font-size: 0.9375rem; }
.role-meta em { font-style: normal; font-weight: 600; color: var(--ink); }
.role-outcome { margin-top: var(--space-4); font-size: var(--text-md); line-height: 1.35; font-weight: 500; max-width: 44ch; }
.role p:not(.role-meta):not(.role-outcome) { margin-top: var(--space-4); max-width: var(--measure); }
.role strong { font-weight: 700; }
/* Skills used: one row per category (condensed label, then chips), in the
   same language as the skills matrix but quieter (paper fill, soft ink,
   hairline) since they are labels, not controls. */
.role-tags { display: grid; gap: var(--space-2); margin-top: var(--space-5); max-width: var(--measure); }
.role-tags > div { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: var(--space-1) var(--space-3); align-items: baseline; }
.role-tags dt { font-size: 0.75rem; font-weight: 600; font-stretch: 80%; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-soft); }
.role-tags dd { margin: 0; }
.role-tags ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.role-tags li { padding: 0.125rem var(--space-2); font-size: 0.8125rem; line-height: 1.5; color: var(--ink-soft); border: 1px solid var(--line); }

/* Skill-highlight states (driven by the Skills section). */
.role { transition: opacity 0.25s, background-color 0.25s; }
.role.is-match { background: var(--mark-wash); box-shadow: 0 0 0 var(--space-4) var(--mark-wash); }
.role.is-dim, .role.is-dim .role-meta em { color: var(--ink-soft); }

/* Earlier roles: one line each, expandable. */
.earlier-list { border-bottom: 1px solid var(--line); }
.role--earlier h3 { font-size: inherit; }
.accordion-trigger {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-5); align-items: baseline;
  width: 100%; padding: var(--space-4) 0; text-align: left;
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
}
.role--earlier + .role--earlier .accordion-trigger, .role--gap + .role--earlier .accordion-trigger { border-top: 1px solid var(--line); }
/* A gap between roles (e.g. a career break): a plain, quiet line, not a role. */
.role--gap { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); align-items: baseline; padding-block: var(--space-3); border-top: 1px solid var(--line); color: var(--ink-soft); }
.role--gap .role-meta { margin: 0; }
.accordion-trigger .role-title { font-size: 1.0625rem; font-weight: 700; }
.accordion-trigger .role-meta { grid-column: 1; margin: 0; font-weight: 400; }
.accordion-icon { grid-column: 2; grid-row: 1 / span 2; align-self: center; position: relative; width: 14px; height: 14px; }
.accordion-icon::before, .accordion-icon::after { content: ""; position: absolute; background: var(--ink); transition: transform 0.2s; }
.accordion-icon::before { left: 0; top: 6px; width: 14px; height: 2px; }
.accordion-icon::after { left: 6px; top: 0; width: 2px; height: 14px; }
.accordion-trigger[aria-expanded="true"] .accordion-icon::after { transform: scaleY(0); }
.accordion-trigger:hover .role-title { text-decoration: underline; text-underline-offset: 0.2em; }
.accordion-panel { padding-bottom: var(--space-5); }
.accordion-panel > :first-child { margin-top: 0 !important; }

/* ---- Skills ---------------------------------------------------------------- */

.skill-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; grid-auto-flow: dense; gap: var(--space-6) var(--space-7); align-items: start; }
/* The last group in CATEGORY_ORDER (MarTech & Analytics, the longest) takes
   the whole right column; the others stack in the left one, so reading order
   and visual order match. */
.skill-group:last-child { grid-column: 2; grid-row: 1 / span 3; }
.skill-group:not(:last-child) { grid-column: 1; }
.skill-group h3 { font-size: 0.8125rem; font-weight: 600; font-stretch: 80%; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-soft); padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
.skill-group ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.skill {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  padding: var(--space-1) var(--space-3); min-height: 2rem;
  font: inherit; font-size: 0.9375rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 0; cursor: pointer;
}
button.skill:hover { border-color: var(--ink); }
.skill[aria-pressed="true"] { background: var(--mark); border-color: var(--mark); font-weight: 600; }
/* No role lists it, so nothing to highlight: same chip, no count, no hover. */
.skill--static { cursor: default; border-color: var(--line); }
.skill-count { font-size: 0.75rem; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.skill[aria-pressed="true"] .skill-count { color: var(--ink); }
.skill-status {
  position: sticky; bottom: var(--space-4); z-index: 4;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5);
  margin-top: var(--space-6); padding: var(--space-4) var(--space-5);
  background: var(--ink); color: var(--paper);
  box-shadow: 0 8px 24px rgb(22 24 29 / 0.18);
}
.skill-status p { flex: 1 1 20rem; }
.skill-status a { color: var(--mark); }
.skill-status .btn { color: var(--paper); border-color: var(--paper); }
.skill-status .btn:hover { background: var(--paper); color: var(--ink); }

/* ---- Credentials, education, languages ------------------------------------ */

.credentials { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-7); }
.credentials h3, .edu h3 { font-size: 1.0625rem; font-weight: 700; }
.credentials h3 { margin-bottom: var(--space-3); }
.cert-list, .award-list { list-style: none; }
.cert-list li, .award-list li { padding-block: var(--space-3); border-top: 1px solid var(--line); }
.cert-list strong { display: block; }
.cert-list span { display: block; color: var(--ink-soft); font-size: 0.9375rem; max-width: 56ch; }
.award-list li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-3); }
.award-list b { font-weight: 800; font-stretch: 115%; font-variant-numeric: tabular-nums; }

.edu + .edu { margin-top: var(--space-5); }
.edu p:not(.role-meta) { margin-top: var(--space-2); max-width: var(--measure); }
.edu--compact p:not(.role-meta) { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--ink-soft); }
.edu--compact p strong { color: var(--ink); }
.lang-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.lang-list strong { margin-right: var(--space-1); }

/* ---- Summary ---- */

.summary-text { max-width: var(--measure); font-size: 1.125rem; }

/* ---- Closing + footer ------------------------------------------------------ */

.block--closing .closing-text { font-size: var(--text-lg); line-height: 1.3; font-weight: 500; max-width: 30ch; margin-bottom: var(--space-5); }

.site-footer { border-top: 1px solid var(--line); padding-block: var(--space-5) var(--space-7); font-size: var(--text-sm); color: var(--ink-soft); }

/* ---- Responsive -------------------------------------------------------------- */

@media (max-width: 760px) {
  .intro, .block { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .intro { padding-top: var(--space-6); gap: var(--space-5); }
  .intro > * { grid-column: 1; }
  .intro-actions { gap: var(--space-2); }
  .intro-actions .btn { padding-inline: var(--space-3); font-size: 0.875rem; }
  .intro > .intro-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .block { padding-block: var(--space-6) var(--space-7); }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figure, .figure + .figure { padding: var(--space-4) var(--space-3) var(--space-4) 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .figure:nth-child(odd) { border-right: 1px solid var(--line); }
  .figure:nth-child(even) { padding-left: var(--space-4); }
  .figure:nth-last-child(-n + 2) { border-bottom: 0; }
  .skill-groups, .credentials { grid-template-columns: minmax(0, 1fr); }
  .skill-group:nth-child(n) { grid-column: 1; grid-row: auto; }
  .contact-form { grid-template-columns: minmax(0, 1fr); }
  .contact-form label[for="contact-name"], .contact-form #contact-name,
  .contact-form label[for="contact-email"], .contact-form #contact-email { grid-column: 1; grid-row: auto; }
  .role-tags > div { grid-template-columns: minmax(0, 1fr); }
  .tracker-name { display: none; }
  .tracker nav { gap: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ---- Print: a 2-page A4 summary ------------------------------------------------ */

@page { size: A4; margin: 11mm 13mm; }

@media print {
  html { font-size: 8.1pt; }
  /* Ligature glyphs (fi, fl) drop out of some PDF text parsers (pypdf). */
  body { font-variant-ligatures: none; }
  body { background: #fff; line-height: 1.4; }
  .wrap { max-width: none; padding: 0; }
  .tracker, .skip-link, .intro-actions, .intro-contact,
  .screen-only, .skill-status, .block--closing, .site-footer, .role-tags,
  .accordion-icon, .edu p:not(.role-meta), .cert-list span { display: none !important; }
  .print-only { display: block; margin-top: var(--space-2); color: var(--ink-soft); }

  .intro { display: block; padding-block: 0 var(--space-4); }
  .intro h1 { font-size: 2.4rem; }
  .intro-meta { margin-top: var(--space-2); }
  .statement { margin-top: var(--space-3); font-size: 1.25rem; max-width: 60ch; }
  .figures { margin-top: var(--space-3); }
  .footnotes { margin: var(--space-2) 0 0; font-size: 0.85rem; }
  .footnotes li { display: inline; margin-right: var(--space-4); }
  .figure { padding-block: var(--space-2); }
  .figure b { font-size: 1.9rem; }
  mark, .skill[aria-pressed="true"] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .block { grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--space-2) var(--space-5); padding-block: var(--space-3) var(--space-4); break-inside: auto; }
  .block h2 { font-size: 1.15rem; }
  article.role + article.role { margin-top: var(--space-4); padding-top: var(--space-3); }
  .role h3 { font-size: 1.2rem; break-after: avoid; }
  .role-outcome { margin-top: var(--space-2); font-size: 1.05rem; max-width: none; }
  .role p:not(.role-meta):not(.role-outcome) { margin-top: var(--space-2); max-width: none; }
  .role.is-match, .role.is-dim { background: none; box-shadow: none; opacity: 1; }
  .role--earlier { break-inside: avoid; }
  /* Selected work must finish on page 1; everything from Earlier roles on is page 2. */
  #earlier { break-before: page; }
  .accordion-panel { display: none !important; }
  .accordion-trigger { padding-block: var(--space-1); }
  .role--gap { padding-block: var(--space-1); font-size: 0.9rem; }
  .accordion-trigger .role-title { font-size: 1rem; }
  .accordion-trigger .role-meta { font-size: 0.9rem; }

  .skill-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-5); }
  .skill-group ul { display: block; margin-top: var(--space-1); }
  /* Each item is unbreakable with its comma; lines break only at the spaces
     between items, so no line starts with a comma. */
  .skill-group li { display: inline; white-space: nowrap; }
  .skill-group li:not(:last-child)::after { content: ","; }
  .skill, .skill--static { display: inline; padding: 0; min-height: 0; border: 0; background: none; color: var(--ink); font-size: 0.95rem; }
  .skill-count { display: none; }

  .credentials { grid-template-columns: 3fr 2fr; gap: var(--space-5); }
  .cert-list li, .award-list li { padding-block: var(--space-1); }
  .lang-list { margin-top: var(--space-3); padding-top: var(--space-2); }
  .edu + .edu { margin-top: var(--space-2); }
  .edu { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); align-items: baseline; }
  .edu .role-meta { margin: 0; }
  a { color: inherit; text-decoration: none; }
}