/* Local Latin subsets of Source Serif 4 and Source Sans 3 (SIL OFL), so every device shows the same pair. */
@font-face { font-family: "Source Serif 4"; src: url("source-serif-4.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("source-sans-3.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --gutter: clamp(1rem, 5vw, 3rem);
  color-scheme: light;
  --paper: #f2ebe1;
  --ink: #2b2622;
  --muted: #6a6058;
  --line: #dcd1c3;
  --accent: #8a5236;
  --accent-soft: #e8d9c8;
  --photo-paper: #fdfbf6;
  --serif: "Source Serif 4", Georgia, serif;
  font-family: "Source Sans 3", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  /* Subtle paper grain: inline SVG noise, no external request. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  line-height: 1.65;
}

* { box-sizing: border-box; }
body { margin: 0; }
p, li, h1, h2, h3 { overflow-wrap: break-word; }
a { color: var(--accent); text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 0.15em; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
p { margin: 0 0 1rem; }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
p, li { text-wrap: pretty; }
h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(3rem, 9vw, 5.75rem); line-height: 0.95; letter-spacing: -0.02em; margin: 0 0 1.5rem; }
h2 { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0; }
h3 { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; margin: 0 0 0.35rem; }

.site-header, main { width: min(100% - 2 * var(--gutter), 62rem); margin-inline: auto; }
.site-header { display: flex; justify-content: flex-end; align-items: center; padding-block: 0.75rem; }
.languages { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-inline-start: auto; }
.languages a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.25rem 0.4rem; }
.languages a[aria-current="page"] { font-weight: 700; text-decoration-thickness: 0.15em; }
.intro { display: grid; gap: 1.5rem; padding-block: clamp(1.5rem, 4vw, 3rem); }
.intro-text { min-width: 0; max-width: 44rem; }
.intro-text > :last-child { margin-bottom: 0; }
/* The portrait is a Polaroid 600 print: 88 × 107 mm with a square 79 mm image, taped on. */
.intro > picture { order: -1; position: relative; display: block; transform: rotate(-2.5deg); }
.intro > picture::before { content: ""; position: absolute; z-index: 1; top: -0.8rem; left: 50%; width: 38%; height: 1.7rem; transform: translateX(-50%) rotate(-3deg); background: rgb(236 224 194 / 0.8); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); clip-path: polygon(0 8%, 3% 0, 6% 10%, 9% 0, 100% 0, 97% 90%, 94% 100%, 91% 88%, 88% 100%, 0 100%); }
.portrait { display: block; width: 100%; height: auto; aspect-ratio: 88 / 107; object-fit: cover; padding: 7.4% 5.1% 24.4%; border-radius: 2px; background: var(--photo-paper); box-shadow: 0 1px 2px rgb(40 25 10 / 0.18), 0 0.9rem 2rem rgb(60 40 20 / 0.16); }
.eyebrow { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
.bio { max-width: 60ch; margin-block: 1.5rem; font-family: var(--serif); font-size: 1.15rem; line-height: 1.55; }
.cv-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 1rem 2rem; align-items: baseline; padding-block: 2rem; border-top: 1px solid var(--line); }
.cv-section > * { min-width: 0; }
.entry p:not(.organisation):not(.period) { max-width: 65ch; }
.entry + .entry { margin-top: 2rem; }
.responsibilities, .skills { padding-inline-start: 1.2rem; line-height: 1.6; }
.responsibilities li, .skills li { padding-inline-start: 0.45rem; }
.responsibilities li::marker, .skills li::marker { color: var(--accent); font-size: 0.8em; }
.responsibilities { max-width: 65ch; margin: 1rem 0 0; }
.responsibilities li + li { margin-top: 0.5rem; }
.credential p { margin-bottom: 0.25rem; }
.credential .credential-summary { max-width: 65ch; margin-bottom: 0.5rem; line-height: 1.5; }
.credential-meta { color: var(--muted); font-size: 0.9rem; }
.organisation { margin-bottom: 0.15rem; }
.period { color: var(--muted); font-size: 0.9rem; }
.muted { color: var(--muted); }
.skills { margin: 0; }
.skills li + li { margin-top: 0.2rem; }
.language-proficiency { margin: 0; line-height: 1.6; }
.language-proficiency > div { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); gap: 0 1rem; overflow-wrap: break-word; }
.language-proficiency > div + div { margin-top: 0.4rem; }
.language-proficiency dt { font-weight: 600; }
.language-proficiency dd { margin: 0; }
.language-note { grid-column: 2; color: var(--muted); font-size: 0.95rem; }
.contact-links { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.625rem; font-style: normal; }
.contact-links a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.4rem 0.8rem; border: 1px solid var(--line); border-radius: 0.4rem; text-decoration: none; }
.contact-links a:hover { border-color: var(--accent); background: var(--accent-soft); }
/* The label sets the baseline, so it lines up with the section heading; the icon stays centred. */
.contact-icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; }
.skip-link-container { position: absolute; z-index: 1; }
.skip-link { position: fixed; top: -10rem; left: 1rem; padding: 0.75rem 1rem; background: var(--paper); }
.skip-link:focus { top: 1rem; }

/* Phones: the print is centred above the name. */
@media (max-width: 44.99rem) {
  .intro > picture { justify-self: center; width: min(66%, 15rem); margin: 0.75rem 0 1.75rem; }
  .intro h1 { text-align: center; }
}

/* Tablets and up: introduction on the left, print on the right; the print grows with the screen. */
@media (min-width: 45rem) {
  .intro { grid-template-columns: minmax(0, 1fr) minmax(0, 13rem); align-items: center; gap: 2rem 2.5rem; padding-block: 1rem 3rem; }
  .intro > picture { order: 0; width: 100%; }
}

@media (min-width: 52rem) {
  .intro { grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); gap: 2rem 4.5rem; padding-block: 1rem 3.5rem; }
}

/* Two skill columns only once the page reaches its full width. */
@media (min-width: 64rem) {
  .skills { columns: 2; column-gap: 2rem; padding-inline-start: 0; }
  .skills li { margin-inline-start: 1.2rem; break-inside: avoid; }
  .skills li + li { margin-top: 0; }
  .skills li:not(:last-child) { padding-block-end: 0.2rem; }
}

@media (min-width: 40.0625rem) {
  /* Align the heading with the first line of its content. */
  .cv-section > h2 { position: sticky; top: 1rem; align-self: baseline; }
}

@media (max-width: 40rem) {
  .cv-section { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .intro > picture { display: none; }
  .site-header, .skip-link-container { display: none; }
  :root { color: #000; background: #fff; }
  main { width: 100%; }
  .intro { padding-block: 1rem; }
  h1 { font-size: 3rem; }
  .cv-section { break-inside: avoid; }
}