/* CV site styles, translated from the Claude Design file "CV Maximilien Charlier v2". */

@font-face {
  font-family: "Mona Sans";
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("../fonts/mona-sans-latin-wdth-normal.woff2") format("woff2");
}

:root {
  --blue: #2f6b9c;
  --blue-dark: #255a85;
  --blue-light: #4a90d9;
  --green: #1f8a4c;
  --gold: #ffd166;
  --text: #525252;
  --muted: #737373;
  --pale: #eef3f8;
  --chip: #f1f5f9;
  --chip-hover: #e2eaf2;
  --rule: rgba(47, 107, 156, .1);
  --gutter: clamp(1.5rem, 4vw, 2rem);
  --section-gap: clamp(6rem, 10vw, 10rem);
  /* Pointy-top regular hexagon, for boxes with a 1 / 1.1547 aspect ratio */
  --hexagon: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  /* Same hexagon with sharp corners, and the band along its inner edge, used as
     masks for the framed photos (AWS certification badge look). The photo mask is
     slightly smaller so the band hides its anti-aliased edge. */
  --hexagon-photo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115.47'%3E%3Cpolygon points='50,2.021 98.25,29.88 98.25,85.59 50,113.449 1.75,85.59 1.75,29.88' fill='%23000' stroke='%23000' stroke-width='2.5' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --hexagon-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115.47'%3E%3Cpolygon points='50,2.021 98.25,29.88 98.25,85.59 50,113.449 1.75,85.59 1.75,29.88' fill='none' stroke='%23000' stroke-width='3.5' stroke-linejoin='miter'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
html, body { margin: 0; background: var(--blue); }
body {
  font-family: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; transition: color .15s, background .15s, border-color .15s; }
a:hover { color: var(--green); }
strong { color: var(--blue); font-weight: 600; }
h1, h2, h3 { color: var(--blue); }
.wide, h1, h2 { font-weight: 500; font-variation-settings: "wdth" 125; letter-spacing: -0.025em; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--blue); }
.site-header .bar {
  max-width: 80rem; margin: 0 auto; padding: 1.25rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.brand { color: #fff; font-size: 1.125rem; }
.site-header nav { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; font-size: .875rem; }
.site-header nav a:not(.pill) { color: var(--pale); }
.site-header nav a:not(.pill):hover { color: var(--green); }

/* Pills (buttons) */
.pill {
  display: inline-block; border: 0; border-radius: 9999px; padding: .375rem 1rem;
  font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
  background: var(--chip); color: var(--blue);
}
.pill:hover { background: var(--chip-hover); color: var(--blue); }
.pill.primary { background: var(--blue); color: #fff; }
.pill.primary:hover { background: var(--blue-dark); color: #fff; }
.pill.white { background: #fff; color: var(--blue); }
.pill.white:hover { background: var(--chip-hover); color: var(--blue); }
.pill.ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .2); padding: calc(.375rem - 1px) 1rem; }
.pill.ghost:hover { border-color: #fff; color: #fff; }
.pill.small { padding: .25rem .875rem; font-size: .75rem; line-height: 1.25rem; }
.pill.small:hover { background: var(--blue); color: #fff; }
.pills { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Layout */
main { background: #fff; border-radius: 40px 40px 0 0; padding-bottom: 6rem; }
section { max-width: 80rem; margin: 0 auto; padding: var(--section-gap) var(--gutter) 0; }
.eyebrow { font-size: .875rem; font-weight: 600; color: var(--green); }
h2 { margin: 1rem 0 0; font-size: clamp(2rem, 4vw, 2.5rem); line-height: 1.2; text-wrap: balance; }
h3 { margin: 0; }
p { text-wrap: pretty; }

/* Rule with a green accent on the left */
.rule { display: flex; align-items: center; gap: 8px; }
.rule::before { content: ""; width: 24px; height: 1px; background: var(--green); }
.rule::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* Vertical accent line used in compact lists */
.accent { display: flex; gap: 1.25rem; }
.accent::before {
  content: ""; flex: 0 0 1px; align-self: stretch;
  background: linear-gradient(var(--green) 0 24px, var(--rule) 24px);
}

.meta { font-size: .75rem; line-height: 1rem; font-weight: 600; color: var(--muted); }
.grid { display: grid; gap: 2.5rem 3rem; }

/* Hero */
#home { padding-top: clamp(4rem, 9vw, 8rem); }
.hero { display: flex; flex-wrap: wrap; gap: clamp(2.5rem, 6vw, 5rem); align-items: flex-end; }
.hero-text { flex: 1 1 30rem; min-width: 0; }
.hero-tags { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .875rem; font-weight: 600; color: var(--blue); }
.hero-tags .role { color: var(--green); }
.hero-tags .place { color: var(--muted); font-weight: 500; }
h1 { margin: 1.5rem 0 0; font-size: clamp(2.75rem, 6.5vw, 4.5rem); line-height: 1.05; text-wrap: balance; }
.hero-intro { margin: 1.75rem 0 0; max-width: 42rem; font-size: 1.25rem; line-height: 2rem; }
.hero .pills { margin-top: 2.5rem; }
.portrait { flex: 0 1 22rem; min-width: 14rem; }
.portrait { --frame: var(--blue-light); }
.portrait img { width: 100%; height: auto; }
/* Hexagonal photo with a coloured band drawn inside its edge, like the AWS badges */
.portrait, .contact-photo { position: relative; }
.portrait img, .contact-photo img {
  display: block; aspect-ratio: 1 / 1.1547; object-fit: cover;
  mask: var(--hexagon-photo) center / 100% 100% no-repeat;
}
.portrait::after, .contact-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--frame);
  mask: var(--hexagon-band) center / 100% 100% no-repeat;
}
.portrait.mono img { filter: grayscale(1); }
.stats { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin-top: clamp(4rem, 7vw, 6rem); }
.stat-value { margin-top: 1.25rem; font-size: 3rem; line-height: 3.5rem; color: var(--blue); }
.stat-label { margin-top: .25rem; }

/* Experience */
.jobs { display: flex; flex-direction: column; gap: 3.5rem; margin-top: 4rem; }
.job-body { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; margin-top: 1.75rem; }
.job-when { flex: 0 0 14rem; min-width: 0; font-size: .875rem; }
.job-when .date { font-weight: 600; color: var(--blue); }
.job-when .place { margin-top: .25rem; color: var(--muted); }
.job-what { flex: 1 1 28rem; min-width: 0; }
.job-what h3 { font-size: 1.5rem; line-height: 2.25rem; }
.org { margin-top: .125rem; font-weight: 600; color: var(--green); }
.job-what p, .job-what ul { max-width: 46rem; line-height: 1.75rem; }
.job-what p { margin: 1rem 0 0; }
.bullets { margin: 1.25rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .625rem; }
.bullets li { display: flex; gap: .875rem; }
.bullets li::before { content: ""; flex: 0 0 6px; height: 6px; margin-top: .7rem; border-radius: 9999px; background: var(--blue); }

/* Collapsible blocks (<details>, no JavaScript needed) */
details { margin-top: 3.5rem; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary .when-open { display: none; }
details[open] > summary .when-open { display: inline; }
details[open] > summary .when-closed { display: none; }
.compact { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 2rem 2.5rem; margin-top: 2.5rem; }
.compact .title { margin-top: .375rem; font-weight: 600; color: var(--blue); line-height: 1.5rem; }
.compact .text { margin-top: .25rem; font-size: .875rem; line-height: 1.5rem; }
.compact .report { display: inline-block; margin-top: .5rem; font-size: .875rem; font-weight: 600; color: var(--green); }

/* Certifications */
.golden {
  background: var(--blue); border-radius: 40px; padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 5vw, 3rem);
  display: flex; flex-wrap: wrap; gap: 2.5rem 4rem; align-items: center;
}
/* Golden Jacket sticker: black ink PNG over a gold hexagon. js/gold.js moves the
   light (--gx, --gy) with the mouse and turns the sheen (--ga) while scrolling. */
.gold-sticker {
  position: relative; flex: 0 0 auto; width: 11rem; aspect-ratio: 1 / 1.1547;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .25));
}
.gold-sticker::before {
  content: ""; position: absolute; inset: 1%; clip-path: var(--hexagon);
  background:
    radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 38%),
    linear-gradient(var(--ga, 115deg), #8a6a1f 0%, #d4af37 20%, #fff3b0 36%, #c9a227 50%, #f6dc7c 64%, #a37c1c 82%, #e6c55a 100%);
}
.gold-sticker img { position: relative; display: block; width: 100%; height: auto; }
.golden-text { flex: 1 1 26rem; min-width: 0; }
.golden .eyebrow { color: var(--gold); }
.golden h2 { color: #fff; }
.golden p { margin: 1.25rem 0 0; max-width: 40rem; font-size: 1.125rem; line-height: 1.75rem; color: var(--pale); }
.certs { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 2.5rem 1.5rem; margin-top: 4rem; }
.cert { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .75rem; color: var(--blue); }
.cert img { width: auto; height: 110px; object-fit: contain; transition: transform .2s; }
.cert:hover img { transform: translateY(-3px); }
.cert .name { font-size: .875rem; line-height: 1.25rem; font-weight: 600; }
.cert .meta { margin-top: .25rem; font-weight: 400; }
.also { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin-top: 3rem; font-size: .875rem; }
.also span { font-weight: 600; color: var(--blue); }
.also a { color: var(--text); }
.also a:hover { color: var(--green); }

/* Skills */
.skills { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); margin-top: 3.5rem; }
.skills p { margin: 0; line-height: 1.75rem; }

/* Talks, publications, education rows */
.rows { display: flex; flex-direction: column; }
.row { display: flex; gap: 1.5rem; padding: 1.25rem 0; border-top: 1px solid var(--rule); }
.row .year { flex: 0 0 3rem; font-size: .875rem; font-weight: 600; color: var(--green); }
.row .title { font-weight: 600; color: var(--blue); line-height: 1.5rem; }
.row .detail { margin-top: .375rem; font-size: .875rem; line-height: 1.5rem; }
.talks { margin-top: 3rem; }
.talk { flex-wrap: wrap; gap: .75rem 3rem; padding: 1.75rem 0; }
.talk .when { flex: 0 0 14rem; min-width: 0; }
.talk .when .date { font-size: .875rem; font-weight: 600; color: var(--blue); }
.talk .when .meta { margin-top: .25rem; }
.talk .what { flex: 1 1 24rem; min-width: 0; }
.talk h3 { font-size: 1.25rem; line-height: 1.75rem; text-wrap: balance; }
.talk .links { flex: 0 0 auto; display: flex; gap: .5rem; align-items: flex-start; }

/* Research */
.research-intro { margin: 1.5rem 0 0; max-width: 46rem; font-size: 1.125rem; line-height: 1.75rem; }
.contributions { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 3.5rem; }
.contributions h3 { margin: 1.25rem 0 0; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; }
.contributions p { margin: .5rem 0 0; line-height: 1.75rem; }
.columns { display: flex; flex-wrap: wrap; gap: 4rem; margin-top: clamp(5rem, 8vw, 7rem); }
.columns > div { min-width: 0; }
.columns > div:first-child { flex: 1 1 30rem; }
.columns > div:last-child { flex: 1 1 22rem; }
.columns h3 { font-size: 1.5rem; line-height: 2.25rem; }
.columns .rows { margin-top: 1.5rem; }
.extras { display: flex; flex-wrap: wrap; gap: 2rem 3rem; margin-top: 2.5rem; font-size: .875rem; line-height: 1.5rem; }
.extras .label { font-weight: 600; color: var(--blue); }
.extras ul { margin: .5rem 0 0; padding: 0; list-style: none; }
.extras a { color: var(--text); }
.extras a:hover { color: var(--green); }
#research details { margin-top: 4rem; }

/* Contact */
.contact {
  background: var(--blue); border-radius: 40px; padding: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 5vw, 3rem);
  display: flex; align-items: center; justify-content: space-between; gap: 4rem;
}
.contact-photo { --frame: var(--blue-light); flex: 0 1 20rem; min-width: 0; width: 20rem; }
.contact-photo img { width: 100%; height: auto; }
@media (max-width: 900px) { .contact-photo { display: none; } }
.contact h2 { margin: 0; max-width: 40rem; color: #fff; }
.contact p { margin: 1.25rem 0 0; max-width: 36rem; font-size: 1.125rem; line-height: 1.75rem; color: var(--pale); }
.contact .pills { margin-top: 2.5rem; }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; font-size: .875rem; color: var(--muted); }

/* Small screens: the wrapped navigation is too tall to stay pinned */
/* Hamburger button, only shown on small screens */
.menu-toggle {
  display: none; position: relative; width: 2.5rem; height: 2.5rem; padding: 0;
  border: 0; border-radius: 9999px; background: transparent; cursor: pointer;
}
.menu-toggle:hover { background: rgba(255, 255, 255, .1); }
.menu-toggle span {
  position: absolute; left: .625rem; width: 1.25rem; height: 2px; border-radius: 2px;
  background: #fff; transition: transform .2s, opacity .2s;
}
.menu-toggle span:nth-child(1) { top: calc(50% - 7px); }
.menu-toggle span:nth-child(2) { top: calc(50% - 1px); }
.menu-toggle span:nth-child(3) { top: calc(50% + 5px); }
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Small screens: the header stays pinned, the menu collapses behind the button */
@media (max-width: 768px) {
  html { scroll-padding-top: 4.5rem; }
  .site-header .bar { padding-top: .75rem; padding-bottom: .75rem; }
  .menu-toggle { display: block; }
  .site-header nav {
    display: none; flex: 1 0 100%; flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem 0 1rem; font-size: 1rem;
  }
  .site-header nav a:not(.pill) { padding: .75rem 0; border-top: 1px solid rgba(255, 255, 255, .12); }
  .site-header nav .pill { align-self: flex-start; margin-top: 1rem; }
  .menu-open nav { display: flex; }
}

/* Print: browser "Save as PDF" gives a clean CV */
@media print {
  html, body, main { background: #fff; }
  .site-header, .pills, .talk .links, footer, .contact { display: none; }
  main { border-radius: 0; padding: 0; }
  section { padding-top: 2rem; }
  .portrait.mono img { filter: none; }
  .golden { background: none; padding: 0; border-radius: 0; }
  .golden h2, .golden p, .golden .eyebrow { color: var(--blue); }
  article, .row, .cert { break-inside: avoid; }
}