/* ── fonts: self-hosted, only the weights in use ─────────────
   Schibsted Grotesk  display (name, big titles, numbers)
   IBM Plex Sans      body text, lists, UI
   IBM Plex Serif     long reading: lede, story, quotes
   IBM Plex Mono      tiny meta only: dates, stack lines, eyebrow */
@font-face { font-family: "Schibsted"; src: url("../fonts/schibsted-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Schibsted"; src: url("../fonts/schibsted-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("../fonts/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("../fonts/plex-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Serif"; src: url("../fonts/plex-serif-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Serif"; src: url("../fonts/plex-serif-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* paper and ink */
  --bg: #f5f2eb;
  --ink: #1b1a17;
  --muted: #5c5a53;
  --faint: #6f6c64;
  --rule: #ddd8cc;
  --rule-strong: #1b1a17;
  --accent: #b0331f;            /* Falu red */
  --link: #a12f1d;
  --live: #1f7a46;
  /* the dark "stage" behind screenshots: the same in both modes */
  --stage: #121214;
  --stage-line: #2c2c31;
  --stage-ink: #ecebe6;
  --stage-muted: #a3a29b;
  --frame-bg: #1a1a1e;
  --discord: #313338;           /* Discord's own grey, behind its small screenshots */
  --display: "Schibsted", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Plex Serif", Georgia, "Times New Roman", serif;
  --mono: "Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171614;
    --ink: #ebe8e1;
    --muted: #aaa69d;
    --faint: #949087;
    --rule: #2e2c28;
    --rule-strong: #ebe8e1;
    --accent: #e8785c;
    --link: #ee8a70;
    --live: #5cc98a;
    --stage: #0e0e10;
    --stage-line: #2a2a2e;
  }
}

/* ── base ──────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4rem; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); }
img { max-width: 100%; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
/* keyboard users can jump past the menu */
.skip { position: absolute; left: 1rem; top: -3rem; z-index: 20; padding: 0.5rem 0.9rem; background: var(--ink); color: var(--bg); border-radius: 4px; text-decoration: none; }
.skip:focus { top: 0.6rem; color: var(--bg); }
::selection { background: var(--ink); color: var(--bg); }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

.wrap { width: min(66rem, calc(100% - 2.5rem)); margin-left: auto; margin-right: auto; }
.row { display: grid; grid-template-columns: 12rem minmax(0, 1fr); column-gap: 3.5rem; }
.side { grid-column: 1; }
.row > :not(.side) { grid-column: 2; }

/* ── top bar ───────────────────────────────── */
.top { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--rule); }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 3.25rem; }
.home { font: 400 0.875rem var(--mono); color: var(--ink); text-decoration: none; }
.top nav { display: flex; gap: 1.5rem; font-size: 0.95rem; }
.top nav a { color: var(--muted); text-decoration: none; padding: 0.1rem 0; border-bottom: 1px solid transparent; }
.top nav a:hover { color: var(--ink); }
.top nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.top nav .cta { color: var(--link); font-weight: 600; }

/* ── intro (resume) ────────────────────────── */
.intro { padding: 5rem 0 3.5rem; border-bottom: 1px solid var(--rule); }
.eyebrow { font: 400 0.8125rem/1.6 var(--mono); color: var(--muted); margin: 0 0 1.1rem; }
.eyebrow span { color: var(--accent); }
h1 { font-size: clamp(2.75rem, 6.5vw, 4.75rem); line-height: 1; letter-spacing: -0.03em; margin: 0 0 1.75rem; }
.lede { font: 400 clamp(1.25rem, 2vw, 1.5rem)/1.45 var(--serif); margin: 0 0 1rem; max-width: 40rem; }
.sub { font-size: 1.05rem; color: var(--muted); margin: 0; max-width: 38rem; }
.facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1.5rem;
  margin: 3rem 0 0; border-top: 1px solid var(--rule-strong);
}
.facts div { padding-top: 0.75rem; }
.facts dt { font-size: 0.8125rem; line-height: 1.4; color: var(--muted); }
.facts dd { margin: 0.15rem 0 0; font: 600 1.05rem/1.3 var(--display); letter-spacing: -0.01em; }

/* ── sections with a label column ──────────── */
.block { padding: 4rem 0; border-bottom: 1px solid var(--rule); }
.block.last { border-bottom: 0; }
.side { align-self: start; position: sticky; top: 4.5rem; }
.side h2 { font-size: 1.2rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.side-note { color: var(--muted); font-size: 0.925rem; margin: 0.5rem 0 0; max-width: 11rem; }

/* side-projects teaser on the resume */
.teaser-text { font: 400 clamp(1.15rem, 1.7vw, 1.3rem)/1.5 var(--serif); margin: 0; max-width: 40rem; }
.teaser-shot { display: block; margin-top: 1.75rem; }
.teaser-shot img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: top left; border-radius: 6px; border: 1px solid var(--stage-line); }
.more-link { margin: 1.25rem 0 0; }
.more { font-weight: 600; }
.more::after { content: "\00a0\2192"; }

/* ── the dark stage behind screenshots ─────── */
.stage { background: var(--stage); color: var(--stage-ink); border: 1px solid var(--stage-line); border-radius: 10px; padding: 1rem; }
.stage a { color: var(--stage-ink); }
.stage .pic figcaption { color: var(--stage-muted); }

/* a framed screenshot that opens full size, with a caption under it */
.pic { margin: 0; }
.pic figcaption { margin-top: 0.55rem; font-size: 0.85rem; line-height: 1.5; color: var(--muted); }
.frame {
  position: relative; display: block; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--rule); background: var(--frame-bg); transition: border-color 0.15s;
}
.frame:hover { border-color: var(--accent); }
/* every screenshot can be enlarged: zoom cursor plus a small expand mark on hover */
.frame, .screen { cursor: zoom-in; }
.frame::after, .screen::after {
  content: ""; position: absolute; right: 0.5rem; bottom: 0.5rem; width: 1.75rem; height: 1.75rem; border-radius: 4px;
  background: rgba(10, 10, 12, 0.8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ecebe6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2h4v4M6 14H2v-4M14 2 9.5 6.5M2 14l4.5-4.5'/%3E%3C/svg%3E") center / 0.9rem no-repeat;
  opacity: 0; transition: opacity 0.15s;
}
.frame:hover::after, .frame:focus-visible::after, .screen:hover::after, .screen:focus-visible::after { opacity: 1; }
@media (hover: none) { .frame::after, .screen::after { opacity: 0.9; } }
.frame img { display: block; width: 100%; height: auto; }
.frame.crop { aspect-ratio: 16 / 10; }
.frame.crop img { height: 100%; object-fit: cover; object-position: top left; }
.frame.small { position: relative; background: var(--discord); }
.frame.small img { position: absolute; inset: 0.75rem; width: calc(100% - 1.5rem); height: calc(100% - 1.5rem); object-fit: contain; }

/* video slots: a screenshot of today's version until the video is ready */
.videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; }
.videos .main { grid-column: 1 / -1; }
.screen {
  position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--stage-line); background: var(--frame-bg); transition: border-color 0.15s;
}
.screen:hover { border-color: var(--accent); }
.screen img, .screen video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.soon {
  position: absolute; left: 0.75rem; top: 0.75rem; display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.35rem 0.7rem; border-radius: 4px; border: 1px solid var(--stage-line);
  background: rgba(10, 10, 12, 0.85); font: 600 0.75rem/1 var(--sans); color: var(--stage-ink);
}
.soon::before { content: ""; border-left: 0.45rem solid var(--stage-ink); border-top: 0.28rem solid transparent; border-bottom: 0.28rem solid transparent; }

/* ── projects page ─────────────────────────── */
.page-head { padding: 5rem 0 3rem; max-width: 44rem; }
.page-head h1 { font-size: clamp(2.4rem, 5vw, 3.5rem); margin: 0 0 1.25rem; }
.page-head p { font: 400 clamp(1.15rem, 1.7vw, 1.35rem)/1.5 var(--serif); margin: 0; }

/* project index, so a visitor can jump straight to one */
.toc { list-style: none; margin: 0 0 2.5rem; padding: 0; border-bottom: 1px solid var(--rule); }
.toc a {
  display: grid; grid-template-columns: 2.5rem 10rem minmax(0, 1fr); align-items: baseline; column-gap: 1rem;
  padding: 0.85rem 0; border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none;
}
.toc .n { font: 400 0.8125rem var(--mono); color: var(--muted); }
.toc b { font: 600 1.05rem var(--display); letter-spacing: -0.01em; }
.toc .d { color: var(--muted); font-size: 0.975rem; }
.toc a:hover b { color: var(--accent); }


/* the featured project */
.feature { padding-top: 3.5rem; border-top: 1px solid var(--rule); }
.feature-head { max-width: 44rem; margin-bottom: 2.5rem; }
.meta { font: 400 0.8125rem/1.6 var(--mono); color: var(--muted); margin: 0 0 0.6rem; }
.live { color: var(--live); margin-right: 0.35rem; }
.live::before {
  content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--live); margin-right: 0.4rem; vertical-align: 0.08em;
}
.feature-head h2 { font-size: clamp(2.2rem, 4.5vw, 3rem); line-height: 1; letter-spacing: -0.03em; margin: 0 0 1rem; }
.hook { font: 400 clamp(1.15rem, 1.7vw, 1.35rem)/1.5 var(--serif); margin: 0; }

.numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1.25rem; margin: 0; }
.numbers div {
  display: flex; flex-direction: column-reverse; justify-content: flex-end;
  padding: 0.9rem 0 1.25rem; border-top: 1px solid var(--rule);
}
.numbers dd { margin: 0; font: 700 clamp(1.8rem, 3vw, 2.4rem)/1 var(--display); letter-spacing: -0.03em; }
.numbers dt { margin-top: 0.45rem; font-size: 0.8125rem; line-height: 1.4; color: var(--muted); }
.label { font: 600 0.9rem/1.4 var(--sans); color: var(--ink); margin: 0 0 0.9rem; }
/* numbers in labelled rows: Scale, Speed, Reliability */
.num-group { display: grid; grid-template-columns: 9rem minmax(0, 1fr); column-gap: 1.25rem; border-top: 1px solid var(--rule); }
.num-group .label { margin: 0; padding-top: 1.1rem; }
.num-group .numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.num-group .numbers div { border-top: 0; }

/* sub-sections of the featured project */
.part { margin-top: 4.5rem; padding-top: 3.5rem; border-top: 1px solid var(--rule); }
.part-head { font-size: clamp(1.6rem, 3vw, 2rem); letter-spacing: -0.025em; margin: 0 0 0.5rem; }
.part-sub { color: var(--muted); margin: 0 0 2.25rem; max-width: 40rem; }

.feature-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem 4rem; align-items: start; }
.prose p { margin: 0 0 1.1rem; font: 400 1.0625rem/1.65 var(--serif); }
.prose p:last-child { margin-bottom: 0; }
.does { list-style: none; margin: 0; padding: 0; }
.does li { padding: 0.8rem 0; border-top: 1px solid var(--rule); }
.does b { font-weight: 600; }

/* how it grew: a timeline with screenshots beside each step */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { border-top: 1px solid var(--rule); padding: 1.75rem 0 2rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline time { display: block; font: 400 0.8125rem/1.4 var(--mono); color: var(--accent); margin-bottom: 0.4rem; }
.timeline p { margin: 0; }
.timeline.steps li { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); column-gap: 3rem; align-items: start; }
.timeline.steps li.text-only { display: block; }
.timeline.steps li.text-only .t-text { max-width: 40rem; }
/* two equal slots per step, so every thumbnail has the same size */
.t-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

/* behind the scenes */
.feature-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 4rem; }
.story .stack { margin: 0; }
.story { margin: 0; }
.story div { padding: 1rem 0; border-top: 1px solid var(--rule); }
.story div:first-child { border-top: 0; padding-top: 0; }
.story dt { font: 600 0.9rem/1.4 var(--sans); margin-bottom: 0.3rem; }
.story dd { margin: 0; }
.stack { font: 400 0.8125rem/1.6 var(--mono); color: var(--muted); margin: 1.25rem 0 0; }

/* smaller projects */
.more-head { font-size: clamp(1.6rem, 3vw, 2rem); letter-spacing: -0.025em; margin: 5rem 0 1.5rem; padding-top: 3.5rem; border-top: 1px solid var(--rule); }
.projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 4rem; }
.proj { border-top: 1px solid var(--rule); padding-top: 1.25rem; display: flex; flex-direction: column; }
.proj h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 0.6rem; }
.proj p { margin: 0; }
.proj .stack { margin-top: auto; padding-top: 1.25rem; }

.outro { margin: 5rem 0 0; padding: 3.5rem 0 4rem; border-top: 1px solid var(--rule); }
.outro p { font: 400 clamp(1.15rem, 1.7vw, 1.35rem)/1.5 var(--serif); margin: 0; max-width: 50rem; }

/* ── CV part ───────────────────────────────── */
.job + .job { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--rule); }
.job header { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; column-gap: 1rem; align-items: start; }
.job h3 { font: 600 1.05rem/1.4 var(--sans); letter-spacing: 0; }
.logo { width: 2.25rem; height: 2.25rem; border-radius: 6px; object-fit: cover; }
.org { margin: 0; color: var(--muted); font-size: 0.95rem; }
.when { margin: 0.2rem 0 0; font: 400 0.8125rem/1.6 var(--mono); color: var(--muted); white-space: nowrap; }
.job ul { margin: 0.8rem 0 0 3.25rem; padding: 0; list-style: none; max-width: 40rem; }
.job li { position: relative; padding-left: 1.1rem; margin: 0.25rem 0; }
.job li::before { content: "–"; position: absolute; left: 0; color: var(--faint); }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.list { margin: 0; }
.list dt { font: 600 0.9rem/1.4 var(--sans); margin-bottom: 0.5rem; }
.list dd { margin: 0; padding: 0.4rem 0; border-top: 1px solid var(--rule); }

.open-to { margin: 0 0 1.5rem; max-width: 36rem; }
.open-to b { font-weight: 600; }
.open-to::before {
  content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--live); margin-right: 0.55rem; vertical-align: 0.1em;
}
.facts-list { margin: 0; }
.facts-list div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 1.25rem; padding: 0.8rem 0; border-top: 1px solid var(--rule); }
.facts-list div:first-child { border-top: 0; padding-top: 0; }
.facts-list dt { font: 600 0.9rem/1.65 var(--sans); }
.facts-list dd { margin: 0; }
.facts-list .when { display: inline; margin-left: 0.6rem; }
.certs {list-style: none; margin: 0; padding: 0; }
.certs li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.25rem;
  padding: 0.75rem 0; border-top: 1px solid var(--rule);
}
.certs li:first-child { border-top: 0; padding-top: 0; }
.certs .name { grid-column: 1; }
.certs .by { grid-column: 1; font-size: 0.85rem; color: var(--muted); }
.certs a { grid-column: 2; grid-row: 1; font-size: 0.9rem; }
.aside { color: var(--muted); margin: 1.75rem 0 0; max-width: 40rem; }

.quotes { display: grid; gap: 2rem; }
.quotes figure { margin: 0; padding-left: 1.5rem; border-left: 2px solid var(--accent); max-width: 42rem; }
.quotes blockquote { margin: 0; font: italic 400 1.2rem/1.5 var(--serif); }
.quotes figcaption { margin-top: 0.7rem; font-size: 0.9rem; color: var(--muted); }

.big { font: 400 clamp(1.35rem, 2.2vw, 1.7rem)/1.4 var(--serif); margin: 0 0 1.5rem; max-width: 34rem; text-wrap: balance; }
.contact-links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; font-size: 1.05rem; margin: 0; }
.note { margin: 2rem 0 0; color: var(--muted); }

.foot {
  display: flex; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap;
  padding: 1.75rem 0 2.5rem; border-top: 1px solid var(--rule);
  font: 400 0.8125rem/1.6 var(--mono); color: var(--faint);
}
.foot p { margin: 0; }

/* ── screenshot viewer (js/lightbox.js) ────── */
html:has(dialog.lightbox[open]) { overflow: hidden; }
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(12, 12, 13, 0.96); color: #ecebe6;
}
.lightbox::backdrop { background: rgba(12, 12, 13, 0.6); }
.lightbox figure {
  margin: 0; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center;
  gap: 0.9rem; padding: 3.75rem 4.5rem 1.5rem;
}
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.lightbox figcaption { max-width: 48rem; text-align: center; font: 400 0.95rem/1.5 var(--sans); color: #c8c6bf; }
.lb-count { position: absolute; left: 1.25rem; top: 1.1rem; margin: 0; font: 400 0.8125rem var(--mono); color: #a3a29b; }
.lightbox button {
  position: absolute; width: 3rem; height: 3rem; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: #ecebe6; font: 400 2rem/1 var(--sans);
}
.lightbox button:hover, .lightbox button:focus-visible { background: rgba(255, 255, 255, 0.12); outline: none; }
.lb-close { top: 0.5rem; right: 0.6rem; }
.lb-prev, .lb-next { top: 50%; translate: 0 -50%; font-size: 2.6rem; }
.lb-prev { left: 0.6rem; }
.lb-next { right: 0.6rem; }

/* ── smaller screens ───────────────────────── */
@media (max-width: 900px) {
  .feature-grid, .feature-more { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline.steps li { display: block; }
  .t-shots { margin-top: 1.25rem; }
}
@media (max-width: 800px) {
  .row { grid-template-columns: minmax(0, 1fr); }
  .side, .row > :not(.side) { grid-column: 1; }
  .side { position: static; margin-bottom: 1.5rem; }
  .side-note { max-width: none; }
  .intro { padding: 3rem 0 2.5rem; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; }
  .page-head { padding: 3rem 0 2rem; }
  .projects { grid-template-columns: minmax(0, 1fr); }
  .part, .more-head { margin-top: 3.5rem; padding-top: 3rem; }
  .outro { margin-top: 3.5rem; padding: 3rem 0; }
  .block { padding: 3rem 0; }
  .job header { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .job header .when { grid-column: 2; }
  .job ul { margin-left: 0; }
  .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .videos { grid-template-columns: minmax(0, 1fr); }
  .toc a { grid-template-columns: 2rem minmax(0, 1fr); }
  .toc .d { grid-column: 2; font-size: 0.95rem; }
  .stage { padding: 0.75rem; }
  .num-group { grid-template-columns: minmax(0, 1fr); }
  .num-group .label { padding-top: 1rem; }
  .lightbox figure { padding: 3.5rem 0.75rem 4.5rem; }
  .lb-prev, .lb-next { top: auto; bottom: 0.75rem; translate: none; }
}
@media (max-width: 460px) {
  .home { font-size: 0.8125rem; }
  .top nav { gap: 0.9rem; font-size: 0.9rem; }
  .t-shots { grid-template-columns: minmax(0, 1fr); }
  /* numbers become a compact list: figure, then what it means */
  .num-group .numbers { grid-template-columns: minmax(0, 1fr); }
  .num-group .numbers div { flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 0.9rem; padding: 0.55rem 0; }
  .num-group .numbers dd { flex: 0 0 5.5rem; font-size: 1.6rem; }
  .num-group .numbers dt { margin-top: 0; }
}

/* ── print: a clean CV on white paper ──────── */
@media print {
  :root { --bg: #fff; --ink: #000; --muted: #444; --faint: #555; --rule: #bbb; --rule-strong: #000; --accent: #000; --link: #000; }
  body { font-size: 10pt; }
  .top, .foot, .note, .teaser-shot, .more-link, .stage, .pic, .in-action, .toc, .how, .part-sub, .certs a { display: none; }
  .intro, .block, .page-head, .outro { padding: 0.75rem 0; }
  .feature, .part, .more-head, .feature-more, .outro { margin-top: 1rem; padding-top: 1rem; }
  .side { position: static; }
  .row { grid-template-columns: 9rem minmax(0, 1fr); column-gap: 2rem; }
  h1 { font-size: 24pt; }
  .block, .job, .proj, .quotes figure { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}