/*
 * The CV at /cv, loaded by that page alone (app/cv/page.tsx) so the landing page's
 * stylesheet does not carry it. It builds on a project page's column
 * (app/projects/projects.module.css) and lays the PDF's sections on a sheet of
 * parchment lying under the waves.
 */

/* Above the live ocean and the sea life, as the landing page's sections are. */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/cv/fonts/source-sans-3-latin.woff2") format("woff2");
}

.cv-toolbar, .cv-slab, .cv-seabed { position: relative; z-index: 2; }
/* Element and class, to outweigh the project page rules it builds on. */
main.cv-page { padding-bottom: 0; font-family: "Source Sans 3", ui-sans-serif, system-ui, sans-serif; }
.cv-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 56rem; margin-inline: auto; }
.cv-toolbar .cv-crumbs { margin: 0; }
.cv-crumbs [aria-current] { color: #a7c0cb; }

/* The ocean shows only on the live way down; a still frame of it would be the surface from above. */
main.cv-page:not([data-descent="ready"]) div[data-atmosphere] { display: none; }

/* Over the live ocean the page opens just under the surface, so the waves show above the slab. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .cv-page[data-descent="ready"] .cv-slab { margin-top: max(7rem, 24svh); }
}

/*
 * The sheet: a waterlogged page of parchment from a wreck's chest, dimmed by the water
 * over it. Its torn edge is a mask of the name's gapped cells (the tear:begin block,
 * written by scripts/generate-cv-paper.mjs from components/content/cv-paper.ts); grain
 * is a noise tile (public/cv/paper.svg), under a map's fold creases, water stains
 * and edges browned like a burnt page.
 */
article.cv-slab {
  /* tear:begin (generated by scripts/generate-cv-paper.mjs; do not edit by hand) */
  --tear-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 5' preserveAspectRatio='none' shape-rendering='crispEdges'%3E%3Cg  stroke='%23000'%3E%3Cpath d='M14 0.5h1M24 0.5h1M29 0.5h1M32 0.5h1M62 0.5h1M64 0.5h1M68 0.5h1M73 0.5h1M101 0.5h1M103 0.5h4M111 0.5h1M121 0.5h1M12 1.5h6M19 1.5h1M21 1.5h15M50 1.5h1M52 1.5h2M55 1.5h1M62 1.5h13M84 1.5h2M101 1.5h12M114 1.5h1M119 1.5h1M121 1.5h4M10 2.5h26M37 2.5h1M42 2.5h1M44 2.5h1M47 2.5h12M60 2.5h17M80 2.5h1M82 2.5h4M89 2.5h1M91 2.5h2M96 2.5h1M98 2.5h29M1 3.5h38M40 3.5h88M0 4.5h128'/%3E%3Cpath d='M11 0.44h1M20 0.44h1M57 0.44h2M61 0.44h1M92 0.44h1M38 1.44h1M40 1.44h1M78 1.44h1M81 1.44h1' stroke-width='0.88' stroke-dasharray='0.88 0.12'/%3E%3C/g%3E%3C/svg%3E");
  --tear-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 5' preserveAspectRatio='none' shape-rendering='crispEdges'%3E%3Cg transform='matrix(1 0 0 -1 0 5)' stroke='%23000'%3E%3Cpath d='M14 0.5h1M24 0.5h1M29 0.5h1M32 0.5h1M62 0.5h1M64 0.5h1M68 0.5h1M73 0.5h1M101 0.5h1M103 0.5h4M111 0.5h1M121 0.5h1M12 1.5h6M19 1.5h1M21 1.5h15M50 1.5h1M52 1.5h2M55 1.5h1M62 1.5h13M84 1.5h2M101 1.5h12M114 1.5h1M119 1.5h1M121 1.5h4M10 2.5h26M37 2.5h1M42 2.5h1M44 2.5h1M47 2.5h12M60 2.5h17M80 2.5h1M82 2.5h4M89 2.5h1M91 2.5h2M96 2.5h1M98 2.5h29M1 3.5h38M40 3.5h88M0 4.5h128'/%3E%3Cpath d='M11 0.44h1M20 0.44h1M57 0.44h2M61 0.44h1M92 0.44h1M38 1.44h1M40 1.44h1M78 1.44h1M81 1.44h1' stroke-width='0.88' stroke-dasharray='0.88 0.12'/%3E%3C/g%3E%3C/svg%3E");
  --tear-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 128' preserveAspectRatio='none' shape-rendering='crispEdges'%3E%3Cg transform='matrix(0 1 1 0 0 0)' stroke='%23000'%3E%3Cpath d='M14 0.5h1M24 0.5h1M29 0.5h1M32 0.5h1M62 0.5h1M64 0.5h1M68 0.5h1M73 0.5h1M101 0.5h1M103 0.5h4M111 0.5h1M121 0.5h1M12 1.5h6M19 1.5h1M21 1.5h15M50 1.5h1M52 1.5h2M55 1.5h1M62 1.5h13M84 1.5h2M101 1.5h12M114 1.5h1M119 1.5h1M121 1.5h4M10 2.5h26M37 2.5h1M42 2.5h1M44 2.5h1M47 2.5h12M60 2.5h17M80 2.5h1M82 2.5h4M89 2.5h1M91 2.5h2M96 2.5h1M98 2.5h29M1 3.5h38M40 3.5h88M0 4.5h128'/%3E%3Cpath d='M11 0.44h1M20 0.44h1M57 0.44h2M61 0.44h1M92 0.44h1M38 1.44h1M40 1.44h1M78 1.44h1M81 1.44h1' stroke-width='0.88' stroke-dasharray='0.88 0.12'/%3E%3C/g%3E%3C/svg%3E");
  --tear-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 128' preserveAspectRatio='none' shape-rendering='crispEdges'%3E%3Cg transform='matrix(0 1 -1 0 5 0)' stroke='%23000'%3E%3Cpath d='M14 0.5h1M24 0.5h1M29 0.5h1M32 0.5h1M62 0.5h1M64 0.5h1M68 0.5h1M73 0.5h1M101 0.5h1M103 0.5h4M111 0.5h1M121 0.5h1M12 1.5h6M19 1.5h1M21 1.5h15M50 1.5h1M52 1.5h2M55 1.5h1M62 1.5h13M84 1.5h2M101 1.5h12M114 1.5h1M119 1.5h1M121 1.5h4M10 2.5h26M37 2.5h1M42 2.5h1M44 2.5h1M47 2.5h12M60 2.5h17M80 2.5h1M82 2.5h4M89 2.5h1M91 2.5h2M96 2.5h1M98 2.5h29M1 3.5h38M40 3.5h88M0 4.5h128'/%3E%3Cpath d='M11 0.44h1M20 0.44h1M57 0.44h2M61 0.44h1M92 0.44h1M38 1.44h1M40 1.44h1M78 1.44h1M81 1.44h1' stroke-width='0.88' stroke-dasharray='0.88 0.12'/%3E%3C/g%3E%3C/svg%3E");
  /* tear:end */
  --tear: 20px;
  --pad: clamp(1.5rem, 5vw, 4.5rem);
  /* Ink on the paper. */
  --ink: #261c11;
  --ink-body: #3a2d1d;
  --ink-muted: #63502f;
  --ink-sea: #123f43;
  --ink-rule: rgb(84 60 32 / 0.34);
  max-width: 56rem;
  padding: var(--pad);
  overflow: clip;
  color: var(--ink-body);
  font-size: 0.96875rem;
  line-height: 1.62;
  background:
    /* Fold creases across the sheet every 45rem: a soft valley, then the lit ridge beside it. */
    repeating-linear-gradient(180deg, transparent 0 calc(45rem - 2.5rem), rgb(70 48 22 / 0.08) calc(45rem - 0.2rem), rgb(255 246 222 / 0.16) calc(45rem + 0.2rem), transparent calc(45rem + 2rem)),
    /* Water stains, and a ring left by something set down on it. */
    radial-gradient(circle at calc(100% - 11rem) 21rem, transparent 3.3rem, rgb(104 72 34 / 0.16) 3.4rem, rgb(104 72 34 / 0.06) 3.65rem, transparent 3.8rem),
    radial-gradient(18rem 11rem at 9% 52rem, rgb(126 92 46 / 0.13), transparent),
    radial-gradient(22rem 13rem at 88% 98rem, rgb(126 92 46 / 0.11), transparent),
    radial-gradient(16rem 12rem at 22% 160rem, rgb(126 92 46 / 0.12), transparent),
    radial-gradient(20rem 14rem at 78% 225rem, rgb(126 92 46 / 0.1), transparent),
    /* Moonlight from the surface, strongest at the top of the sheet. */
    linear-gradient(180deg, rgb(196 232 228 / 0.18), transparent 38rem),
    url("/cv/paper.svg") 0 0 / 320px 320px,
    radial-gradient(ellipse 120% 60% at 50% 18%, #d3c299, #c2ad80 75%, #b39b6c);
  background-color: #c4b084;
  box-shadow: inset 0 0 2.75rem rgb(92 60 24 / 0.5), inset 0 0 0.6rem rgb(70 44 16 / 0.55);
  mask:
    var(--tear-top) 0 0 / 512px var(--tear) repeat-x,
    var(--tear-bottom) 0 100% / 512px var(--tear) repeat-x,
    var(--tear-left) 0 0 / var(--tear) 512px repeat-y,
    var(--tear-right) 100% 0 / var(--tear) 512px repeat-y,
    linear-gradient(#000 0 0) 50% 50% / calc(100% - 2 * var(--tear) + 2px) calc(100% - 2 * var(--tear) + 2px) no-repeat;
}

/* A corner of the sheet, lifted and let down again by the current. */
.cv-slab::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 4.5rem;
  height: 4.5rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  background: linear-gradient(to bottom left, #ddd0aa, #c9b68a 42%, rgb(84 56 24 / 0.5) 49.5%, transparent 50%);
  transform-origin: 0 0;
  pointer-events: none;
}

/* A compass rose inked in the other top corner, faded into the paper; a phone's name needs the room. */
.cv-header::before {
  content: "";
  position: absolute;
  top: calc(var(--tear) + 1.25rem);
  left: calc(var(--tear) + 1.25rem);
  width: 63px;
  height: 66px;
  background: url("/cv/compass.svg") 0 0 / 100% 100%;
  opacity: 0.5;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* The sheet sinks into place as the page opens, then the corner rides the current. */
  article.cv-slab { animation: cv-settle 1.9s cubic-bezier(0.22, 0.9, 0.3, 1) both; }
  .cv-slab::before { animation: cv-lift 7.5s ease-in-out 1.9s infinite; }
}

@keyframes cv-settle {
  from { opacity: 0; transform: translateY(-2.5rem) rotate(-0.8deg); }
  55% { opacity: 1; transform: translateY(0.35rem) rotate(0.15deg); }
  to { opacity: 1; transform: none; }
}

@keyframes cv-lift {
  0%, 100% { transform: perspective(20rem) rotate3d(1, 1, 0, 6deg); }
  42% { transform: perspective(20rem) rotate3d(1, 1, 0, 58deg); }
  58% { transform: perspective(20rem) rotate3d(1, 1, 0, 44deg); }
}

/* The deeper it lies, the darker the water over it. */
.cv-slab::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(1 4 6);
  opacity: 0;
  pointer-events: none;
}

/*
 * Moonlight caustics drift over the slab: two copies of one seamless tile
 * (public/cv/caustics.svg, from scripts/generate-caustics.mjs) at different scales,
 * moving apart. They live on a screen-sized layer that stays in view as the slab
 * scrolls, so the moving layer is never larger than the screen.
 */
.cv-caustics {
  position: sticky;
  top: 0;
  z-index: -1;
  height: 100svh;
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) calc(-100svh + var(--pad));
  overflow: clip;
  pointer-events: none;
}

.cv-caustics::before, .cv-caustics::after {
  content: "";
  position: absolute;
  inset: -384px;
  background: url("/cv/caustics.svg") 0 0 / 256px 256px;
  opacity: 0.1;
}

.cv-caustics::after {
  background-size: 384px 384px;
  opacity: 0.06;
}

@media (prefers-reduced-motion: no-preference) {
  .cv-caustics::before { animation: cv-drift 46s linear infinite; }
  .cv-caustics::after { animation: cv-drift-back 73s linear infinite; }

  /* With the scroll as the clock, the light fades and the slab darkens on the way down. */
  @supports (animation-timeline: scroll()) {
    .cv-caustics { animation: cv-fade linear both; animation-timeline: scroll(root); }
    .cv-slab::after { animation: cv-darken linear both; animation-timeline: scroll(root); }
  }
}

/* Whole tiles, so each loop ends where it began. */
@keyframes cv-drift { to { transform: translate(256px, 256px); } }
@keyframes cv-drift-back { to { transform: translate(384px, -384px); } }
@keyframes cv-fade { to { opacity: 0.2; } }
@keyframes cv-darken { to { opacity: 0.3; } }

/* The header, in the slab's first lines. */
.cv-header { --cell: 5px; text-align: center; padding-block: 0.5rem 1.6rem; border-bottom: 1px solid var(--ink-rule); }
.cv-name { margin: 0; line-height: 1; }
.cv-name [data-pixel-words] { justify-content: center; }
.cv-headline { max-width: 36rem; margin: 1.25rem auto 0.6rem; color: var(--ink); font-size: 1.0625rem; font-weight: 500; line-height: 1.45; letter-spacing: -0.005em; text-wrap: balance; }
.cv-contacts .cv-site { display: none; }
/* Contact details on one line, divided by short rules. */
.cv-header .cv-contacts { justify-content: center; align-items: center; gap: 0; font-size: 0.875rem; }
.cv-contacts li { display: flex; align-items: center; }
.cv-contacts li + li::before { content: ""; width: 1px; height: 0.9em; margin-inline: 0.9rem; background: var(--ink-rule); }
.cv-header .cv-contacts a { min-height: 2rem; color: var(--ink-sea); text-decoration-color: rgb(24 73 77 / 0.4); }
.cv-header .cv-contacts a:hover { color: var(--ink); text-decoration-color: currentColor; }
.cv-pdf a { gap: 0.55rem; padding: 0.1rem 0.9rem; border: 1px solid #3c5967; border-radius: 3px; text-decoration: none; font-weight: 600; background: #0b1b24; }
.cv-pdf a:hover { background: #142b35; border-color: #8eabb9; }
article.cv-slab p.cv-summary { margin: 1.5rem 0 0; color: var(--ink-body); }
.cv-toolbar a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cv-slab a:focus-visible { outline: 2px solid var(--ink-sea); outline-offset: 3px; }

/* Running text is justified, hyphenated where a line would gape; a phone's column is too narrow for it. */
@media (min-width: 701px) {
  .cv-slab .cv-summary, .cv-bullets li { text-align: justify; hyphens: auto; hyphenate-limit-chars: 10 4 4; text-wrap: pretty; }
}
.cv-bullets strong { color: var(--ink); font-weight: 700; }

/* The pixel words glint on a canvas over their drawing (components/content/PixelGlint.tsx); on the paper, ink with a gold glint. */
[data-pixel-words] { position: relative; }
.cv-slab [data-pixel-words] { --glint-face: #2a2014; --glint-light: #9a7330; --glint-shadow: #a48c5c; }
.cv-slab.cv-slab [data-pixel-words] svg path { stroke: #2a2014; }
.cv-slab.cv-slab [data-pixel-words] svg path:first-child { stroke: #a48c5c; }
@media screen {
  [data-glint] > svg { visibility: hidden; }
}

/* Each heading in the name's pixel face over a rule, as the PDF rules its small capitals. */
.cv-slab .cv-heading { --cell: 2px; margin: 2.6rem 0 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--ink-rule); }
.cv-section { scroll-margin-top: 2rem; }
.cv-entry + .cv-entry { margin-top: 1.6rem; }

/* An entry's head: title and dates on one line, organisation and place under them. */
.cv-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title period" "place location";
  align-items: baseline;
  gap: 0.1rem 1.5rem;
  margin-bottom: 0.55rem;
}
.cv-head p { margin: 0; }
.cv-title { grid-area: title; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.9rem; }
.cv-head h3 { margin: 0; color: var(--ink); font-size: 1.0625rem; line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; }
.cv-place { grid-area: place; color: var(--ink-sea); font-size: 0.9375rem; font-weight: 500; }
.cv-period, .cv-location { text-align: right; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.cv-period { grid-area: period; color: var(--ink-body); }
.cv-location { grid-area: location; color: var(--ink-muted); }

/* Project pages beside the title, small. */
.cv-pages { display: flex; flex-wrap: wrap; gap: 0 0.9rem; margin: 0; padding: 0; list-style: none; font-size: 0.8125rem; line-height: 1.5; }
.cv-pages a { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 1.5rem; color: var(--ink-sea); text-decoration: underline; text-decoration-color: rgb(24 73 77 / 0.4); text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.cv-pages a:hover { color: var(--ink); text-decoration-color: currentColor; }
.cv-pages svg { width: 0.55rem; height: 0.55rem; }

.cv-slab .cv-bullets { color: var(--ink-body); padding-left: 1.05rem; }
.cv-slab .cv-bullets li + li { margin-top: 0.3rem; }
.cv-slab .cv-bullets li::marker { color: var(--ink-muted); }

/* Tools as small chips, each with its logo in a faded trace of the brand's colour. */
.cv-tech-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.cv-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.cv-badges li { display: inline-flex; align-items: center; gap: 0.32rem; max-width: 100%; padding: 0.12rem 0.45rem; border: 1px solid rgb(84 60 32 / 0.3); border-radius: 3px; background: rgb(240 228 198 / 0.4); color: var(--ink); font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.01em; }
.cv-badges svg { flex: 0 0 auto; width: 0.8rem; height: 0.8rem; fill: currentColor; color: color-mix(in srgb, var(--brand) 55%, #2a1f12); }

/* Skills: each group's name in a column beside its chips. */
.cv-skills { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: 0.75rem 1.25rem; align-items: start; }
.cv-skill-group { display: contents; }
.cv-skill-group h3 { margin: 0; color: var(--ink); font-size: 0.875rem; font-weight: 600; line-height: 1.6rem; }
.cv-skill-group .cv-badges { margin: 0; }
.cv-languages { display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; margin: 0; padding: 0; list-style: none; }
.cv-languages li { display: flex; align-items: baseline; gap: 0.5rem; color: var(--ink-muted); font-size: 0.875rem; }
.cv-languages .cv-language-name { color: var(--ink); font-size: 0.9375rem; font-weight: 600; }

/*
 * The sea floor under the slab. Over the live ocean it gets a whole screen, where the
 * camera levels over the 3D floor, and the still drawings stand aside (app/globals.css);
 * otherwise the still floor and wreck lie at the foot of the page.
 */
.cv-seabed {
  --cell: 6px;
  display: grid;
  align-content: end;
  justify-items: center;
  gap: 2rem;
  margin: 0 calc(-1 * clamp(1.25rem, 6vw, 7rem));
  padding-top: 3rem;
  overflow-x: clip;
}

/* Over the live floor, the link rests at the foot of the last screen and the still drawings leave the flow. */
main[data-descent="ready"] .cv-seabed { min-height: 100svh; padding-bottom: 2.5rem; }
main[data-descent="ready"] .cv-wreck { position: absolute; }

.cv-floor, .cv-wreck { display: block; pointer-events: none; }

.cv-floor {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(var(--floor-rows) * var(--cell));
  object-fit: cover;
  object-position: left bottom;
}

/* The wreck rests under the link, its bed sunk into the floor as the contact section's is; on a phone its ends crop. */
.cv-wreck {
  position: relative;
  width: calc(var(--wreck-columns) * var(--cell));
  max-width: none;
  height: auto;
  margin-bottom: calc((var(--floor-rows) - var(--wreck-sink)) * var(--cell));
}

/* Phones: dates and places go under the title, and the wreck's ends crop at the edges. */
@media (max-width: 700px) {
  main.cv-page { padding-inline: 1rem; }
  article.cv-slab { --pad: 1.4rem; font-size: 0.9375rem; }
  .cv-header { --cell: 3px; text-align: left; }
  .cv-header::before { display: none; }
  .cv-slab::before { width: 3rem; height: 3rem; }
  .cv-name [data-pixel-words] { justify-content: flex-start; }
  .cv-headline { margin-inline: 0; font-size: 1rem; text-wrap: initial; }
  .cv-header .cv-contacts { flex-direction: column; align-items: flex-start; }
  .cv-contacts li + li::before { display: none; }
  .cv-contacts a { overflow-wrap: anywhere; }
  .cv-slab .cv-heading { margin-top: 2.25rem; }
  .cv-head { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "title title" "place place" "period location"; column-gap: 0.75rem; }
  .cv-period, .cv-location { text-align: left; font-size: 0.8125rem; }
  .cv-location::before { content: "· "; }
  .cv-skills { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .cv-skill-group .cv-badges + h3 { margin-top: 0.6rem; }
  .cv-seabed { --cell: 4px; margin-inline: -1rem; }
}

/* Printed: black on white, the pixel letters in ink, links as text, no water or screen controls. */
@media print {
  @page { margin: 14mm 16mm; }
  div[data-atmosphere], nav[data-depth-gauge], button[data-sound], [data-glint] > canvas, main.cv-page > canvas,
  div.cv-toolbar, nav.cv-crumbs, p.cv-pdf, ul.cv-pages, footer.cv-seabed, div.cv-caustics, article.cv-slab::after,
  article.cv-slab::before, header.cv-header::before { display: none; }
  .cv-page.cv-page { min-height: 0; padding: 0; color: #111; background: #fff; }
  .cv-slab.cv-slab { max-width: none; margin: 0; padding: 0; overflow: visible; font-size: 9.5pt; line-height: 1.4; background: none; box-shadow: none; mask: none; animation: none; }
  .cv-slab.cv-slab a { min-height: 0; text-decoration: none; }
  .cv-page .cv-slab :is(p, ul, h3, a, strong) { color: #111; }
  .cv-page .cv-slab .cv-entry > ul, .cv-page article.cv-slab p.cv-summary { color: #111; }
  .cv-page .cv-slab li::marker { color: #555; }
  .cv-page .cv-slab :is(.cv-place, .cv-period, .cv-location, .cv-languages span) { color: #555; }
  .cv-slab.cv-slab [data-pixel-words] svg path { stroke: #111; }
  .cv-slab.cv-slab [data-pixel-words] svg path:first-child { stroke: #ccc; }
  .cv-slab .cv-heading { --cell: 2px; margin-top: 1rem; border-color: #111; break-after: avoid; }
  .cv-contacts .cv-site { display: flex; }
  .cv-header { --cell: 4px; padding: 0 0 0.75rem; text-align: center; }
  .cv-name [data-pixel-words] { justify-content: center; }
  .cv-headline { max-width: none; margin: 0.75rem auto 0.25rem; font-size: 11pt; }
  .cv-header .cv-contacts { justify-content: center; font-size: 8pt; }
  .cv-contacts li + li::before { margin-inline: 0.6rem; background: #999; }
  .cv-contacts li:first-child { flex-basis: auto; }
  .cv-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title period" "place location"; }
  .cv-head h3 { font-size: 11pt; }
  .cv-place, .cv-period, .cv-location { font-size: 9pt; text-align: right; }
  .cv-place { text-align: left; }
  .cv-location::before { content: none; }
  .cv-entry + .cv-entry { margin-top: 0.85rem; }
  .cv-badges { gap: 0.2rem; margin-top: 0.5rem; }
  .cv-badges li { padding: 0.1rem 0.35rem; border-color: #ccc; background: none; color: #111; font-size: 8pt; }
  .cv-badges svg { width: 0.75rem; height: 0.75rem; color: #111; }
  .cv-skills { grid-template-columns: 9rem minmax(0, 1fr); gap: 0.35rem 0.75rem; }
  .cv-skill-group h3 { font-size: 9pt; line-height: 1.5; }
  .cv-languages li, .cv-languages .cv-language-name { font-size: 9pt; color: #111; }
  .cv-entry { break-inside: avoid; }
}

@media (forced-colors: active) {
  article.cv-slab { border: 1px solid CanvasText; mask: none; }
  .cv-badges svg { color: CanvasText; }
  .cv-caustics, .cv-slab::before, .cv-header::before { display: none; }
}