:root {
  --bg: #f5f2ea;                      /* the paper: off-white with a trace of cream */
  --paper: radial-gradient(circle at 50% 45%, #faf8f3 0%, #f5f2ea 45%, #ece7dc 100%);
  --raised: rgba(250, 248, 243, 0.88); /* windows laid on the paper */
  --ink: #11100f;                     /* a warm black, the same ink as the graphic */
  --burn: #3a2614;                    /* scorch around ink squares: near-black with a trace of umber */
  --text: #37332e;
  --text-strong: var(--ink);
  --muted: #6b655c;
  --line: rgba(17, 16, 15, 0.13);
  --line-strong: rgba(17, 16, 15, 0.42);
  --chip-bg: rgba(255, 255, 255, 0.5);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --gutter: 16px;
  color-scheme: light;
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

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

a {
  color: var(--text-strong);
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}
a:hover { text-decoration-color: var(--ink); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ---------- the paper and the graphic (fixed layers behind the page) ---------- */

/* The paper: a touch lighter in the middle, settling into a warmer cream at the edges. */
.void {
  position: fixed;
  inset: 0;
  z-index: -3;
  background: var(--paper);
}

/* A faint scorch on the paper behind the graphic; voxel.js centres and scales it on it every frame. */
.voxel-halo {
  position: fixed;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  z-index: -2;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(58, 38, 20, 0.1) 0%, rgba(58, 38, 20, 0.035) 40%, transparent 70%);
  will-change: transform, opacity;
}

#voxel-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  touch-action: pan-y;   /* the page must still scroll when a swipe starts on the graphic */
}

/* Where the graphic rests once scrolled. Invisible; voxel.js reads its box.
   Below 1100px there's no room beside the text, so it sinks to the bottom edge like a horizon:
   centred below the screen so only its top --horizon-band shows. Loose and flowing squares above
   --horizon-clip (a share of the screen height) fade out, and #paper-fade fades the text out above it. */
.voxel-rest {
  --rest-brightness: 0.8;
  --horizon-size: min(118vw, 700px);
  --horizon-band: 16svh;
  --horizon-clip: 0.8;
  position: fixed;
  left: 50%;
  /* 100% = the bottom of the same fixed layer the canvas and #paper-fade fill, so the three stay
     together while a phone's address bar slides in and out. */
  top: calc(100% + var(--horizon-size) / 2 - var(--horizon-band));
  width: var(--horizon-size);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  visibility: hidden;
  pointer-events: none;
}

/* The flower stands on the horizon whole: small, with its ground just above the bottom edge. */
html[data-graphic="flower"] .voxel-rest {
  --horizon-size: min(26svh, 60vw);
  --horizon-clip: 0.62;
  top: calc(100% - 0.42 * var(--horizon-size));
}
html[data-graphic="flower"] .paper-fade {
  --fade-solid: 21%;
  --fade-clear: 36%;
}

@media (min-width: 1100px) {
  .voxel-rest, html[data-graphic] .voxel-rest {
    --rest-brightness: 0.5;
    --horizon-clip: 0;
    left: 74%;
    top: 50%;
    width: min(40vw, 72svh);
  }
}

/* The horizon's fade: a copy of the paper, shown only along the bottom, laid over the text but
   under the graphic. voxel.js fades it in as the graphic settles and lifts it above the text (.horizon). */
.paper-fade {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: var(--paper);
  -webkit-mask-image: linear-gradient(to top, #000 var(--fade-solid, 15%), transparent var(--fade-clear, 30%));
  mask-image: linear-gradient(to top, #000 var(--fade-solid, 15%), transparent var(--fade-clear, 30%));
  opacity: 0;
  pointer-events: none;
}
html.horizon #voxel-canvas { z-index: 2; pointer-events: none; }

@media (min-width: 1100px) {
  .paper-fade { display: none; }
}

/* Where the graphic glides while a project pane is open: beside the pane on desktop, above the sheet on phones. */
.voxel-focus {
  --focus-brightness: 0.95;
  position: fixed;
  left: 27%;
  top: 50%;
  width: min(34vw, 60svh);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 800px) {
  .voxel-focus {
    --focus-brightness: 0.9;
    left: 50%;
    top: 11svh;
    width: min(40vw, 17svh);
  }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(3rem, 11svh, 7rem);
  padding: var(--gutter);
  padding-bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 60px);   /* room for the scroll cue */
  pointer-events: none;   /* taps and hovers reach the canvas underneath */
}

.voxel-slot {
  width: min(68vw, 52svh, 520px);   /* svh, not dvh: stays put while a phone's address bar hides */
  aspect-ratio: 1;
}

.hero-text {
  display: grid;
  gap: 1rem;
  text-align: center;
}

.tagline {
  margin: 0;
  color: var(--ink);
  font-weight: 300;
  font-size: clamp(1.1rem, 4.5vw, 1.75rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.hero-name {
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: clamp(0.7rem, 2.6vw, 0.8rem);
  letter-spacing: 0.08em;
}

/* LinkedIn and Heyra: two small square windows under the name; they invert on hover, like the PDF button. */
.hero-links {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
}
.hero-links a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  background: rgba(250, 248, 243, 0.6);
  color: var(--ink);
  pointer-events: auto;   /* the rest of the hero lets pointers through to the graphic */
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.hero-links a:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }

.scroll-cue {
  position: absolute;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  left: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  color: var(--muted);
  pointer-events: auto;
  transition: opacity 0.4s;
}
.scroll-cue svg { animation: cue 2.6s ease-in-out infinite; }
.scroll-cue.hidden { opacity: 0; pointer-events: none; }

@keyframes cue {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* ---------- CV column ---------- */

.cv {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--gutter) 3rem;
  pointer-events: none;   /* gaps beside the text reach the graphic */
  text-shadow: 0 0 10px var(--bg), 0 0 3px var(--bg);   /* lifts the text off the graphic behind it */
  counter-reset: section;
}
.cv > * { pointer-events: auto; }

@media (max-width: 1099px) {
  .cv {   /* the footer can scroll clear of the horizon's fade, even with the address bar hidden */
    padding-bottom: calc(30vh + 3rem);
    padding-bottom: calc(30lvh + 3rem);
  }
}

@media (min-width: 1100px) {
  .cv {
    max-width: 640px;
    margin-left: max(7vw, 48px);
  }
}

.cv section { padding-top: 5rem; }
.cv p { margin: 0 0 1rem; }

/* Section labels: a numbered index in mono, then a hairline to the edge. */
.cv h2 {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.75rem;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  counter-increment: section;
}
.cv h2::before {
  content: counter(section, decimal-leading-zero);
  color: var(--muted);
}
.cv h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.cv h3 {
  margin: 0;
  color: var(--text-strong);
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.35;
}

.cv ul { margin: 0; padding-left: 1.1rem; list-style: square; }
.cv li { margin-bottom: 0.35rem; }
.cv li::marker { color: var(--muted); }

/* intro */
.intro { padding-top: 18vh !important; }
.intro h1 {
  margin: 0 0 0.5rem;
  color: var(--ink);
  font-size: clamp(2.1rem, 8vw, 3.3rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.role {
  color: var(--text);
  font-size: clamp(1rem, 3.6vw, 1.18rem);
}
.role a { color: var(--ink); }
.lead {
  margin-top: 1.75rem !important;
  color: var(--text-strong);
  font-size: 1.1rem;
}

.contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  margin: 0 0 1rem !important;
  padding: 0 !important;
  list-style: none !important;
  font-family: var(--mono);
  font-size: 0.8rem;
}
.contact li { margin: 0; }

/* chips: sharp tags with a hairline edge */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.25rem 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.chips li {
  margin: 0;
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--line);
  background: var(--chip-bg);
  color: var(--text-strong);
  font-size: 0.8rem;
  line-height: 1.5;
  text-shadow: none;
}
.chips-small { margin-top: 1rem !important; }
.chips-small li { font-size: 0.75rem; padding: 0.16rem 0.5rem; }

/* timeline */
.timeline {
  position: relative;
  margin: 0;
  padding: 0 !important;
  list-style: none !important;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.8rem;
  bottom: 1rem;
  width: 1px;
  background: var(--line);
}
.cv .tl-item, .project {
  position: relative;
  margin: 0 0 2.75rem;
  padding-left: 2rem;
}
/* Each entry's marker is a small ink square with a scorch around it; its squares fly into the graphic from here. */
.tl-marker {
  --c: var(--dot, var(--ink));
  --b: var(--dot, var(--burn));
  position: absolute;
  left: 2px;
  top: 0.5rem;
  width: 7px;
  height: 7px;
  background: var(--c);
  box-shadow: 0 0 5px 1px color-mix(in srgb, var(--b) 35%, transparent);
}
.tl-item.current .tl-marker { animation: pulse 3.2s ease-in-out infinite; }
.dropped .tl-marker { animation: release 1.2s ease-out; }
.tl-item.current.dropped .tl-marker { animation: release 1.2s ease-out, pulse 3.2s ease-in-out 1.2s infinite; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 4px 1px color-mix(in srgb, var(--b) 30%, transparent); }
  50% { box-shadow: 0 0 12px 3px color-mix(in srgb, var(--b) 45%, transparent); }
}
@keyframes release {
  0% { transform: scale(1); box-shadow: 0 0 5px 1px color-mix(in srgb, var(--b) 35%, transparent); }
  25% { transform: scale(1.6); box-shadow: 0 0 18px 5px color-mix(in srgb, var(--b) 55%, transparent); }
  100% { transform: scale(1); box-shadow: 0 0 5px 1px color-mix(in srgb, var(--b) 35%, transparent); }
}

.tl-meta {
  margin: 0.2rem 0 0.8rem !important;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}
.tl-meta a { color: inherit; }
.tl-date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-kind {
  color: var(--ink);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* project cards: sharp windows; the whole window opens the project pane */
.project {
  padding: 1.15rem 1.25rem 1.1rem 2.4rem;
  margin: 0 0 1rem;
  border: 1px solid var(--line);
  background: var(--raised);
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.project .tl-marker { left: 1.15rem; top: 1.62rem; }
.project:hover, .project:focus-within {
  border-color: var(--line-strong);
  box-shadow: 0 18px 40px -26px rgba(58, 38, 20, 0.45);
}
.project-open {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.project-open::after {        /* stretch the click target over the whole card */
  content: "";
  position: absolute;
  inset: 0;
}
.project-open:focus-visible { outline: none; }
.project:has(.project-open:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.project-summary { margin-bottom: 0.6rem !important; }
.project-hint {
  display: inline-block;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform 0.3s;
}
.project:hover .project-hint { transform: translateX(4px); }
.project-more { display: none; }

/* the dimmed page behind an open project */
html.focusing { overflow: hidden; }
html.focusing .cv, html.focusing .hero { opacity: 0.12; transition: opacity 0.5s; }
.cv, .hero { transition: opacity 0.6s; }

/* project pane: a sharp panel from the right on desktop, a bottom sheet on phones */
.project-dialog {
  --c: var(--dot, var(--ink));
  position: fixed;
  inset: 0 0 0 auto;
  width: min(580px, 48vw);
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line-strong);
  background: rgba(250, 248, 243, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--text);
  box-shadow: -40px 0 80px -30px rgba(58, 38, 20, 0.28);
  overscroll-behavior: contain;
}
.project-dialog::backdrop { background: transparent; }
.project-dialog[open] { animation: pane-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
.project-dialog.closing { animation: pane-out 0.28s ease-in forwards; }
@keyframes pane-in { from { transform: translateX(48px); opacity: 0; } }
@keyframes pane-out { to { transform: translateX(48px); opacity: 0; } }

.dialog-inner {
  position: relative;
  padding: clamp(3.5rem, 9vh, 6rem) clamp(1.25rem, 4vw, 3rem) 3rem;
}
.dialog-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.dialog-close:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.dialog-body h2 {
  margin: 0 0 0.5rem;
  color: var(--ink);
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.005em;
}
.dialog-body h2::before {       /* the project's own square, scorched */
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin-bottom: 1.25rem;
  background: var(--c);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--dot, var(--burn)) 40%, transparent);
}
.dialog-body .tl-meta { margin: 0 0 1.5rem; color: var(--muted); }
.dialog-body .project-summary { color: var(--text-strong); font-size: 1.08rem; margin: 0 0 1.5rem; }
.dialog-body .project-more { display: block; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.dialog-body ul { margin: 0; padding-left: 1.1rem; list-style: square; }
.dialog-body li { margin-bottom: 0.5rem; }
.dialog-body li::marker { color: var(--muted); }
.dialog-body .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.dialog-body .chips li { margin: 0; padding: 0.22rem 0.6rem; border: 1px solid var(--line); background: var(--chip-bg); color: var(--text-strong); font-size: 0.8rem; }

@media (max-width: 800px) {
  .project-dialog {
    inset: auto 0 0 0;
    width: 100%;
    height: min(78svh, 100%);
    border-left: 0;
    border-top: 1px solid var(--line-strong);
    box-shadow: 0 -40px 80px -30px rgba(58, 38, 20, 0.28);
  }
  .project-dialog[open] { animation-name: sheet-in; }
  .project-dialog.closing { animation-name: sheet-out; }
  @keyframes sheet-in { from { transform: translateY(60px); opacity: 0; } }
  @keyframes sheet-out { to { transform: translateY(60px); opacity: 0; } }
  .dialog-inner { padding-top: 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .project-dialog[open], .project-dialog.closing { animation: none; }
}

/* skills: one window, a row per group: the group's name in mono on the left, its tags on the right */
.skill-groups {
  border: 1px solid var(--line);
  background: var(--raised);
}
.skill-group {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  align-content: start;
}
.skill-group + .skill-group { border-top: 1px solid var(--line); }
.skill-group > * { grid-column: 2; }
.cv .skill-group h3 {
  grid-column: 1;
  grid-row: 1 / span 2;
  padding: 1rem 1rem 1rem 1.1rem;
  border-right: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.skill-group .chips { margin: 0 !important; padding: 0.9rem 1rem 0.9rem !important; }
.skill-group .note {
  margin: -0.3rem 0 0 !important;
  padding: 0 1rem 1rem;
}
.note {
  margin: 0.6rem 0 0 !important;
  color: var(--muted);
  font-size: 0.86rem;
}

@media (max-width: 560px) {
  .skill-group { grid-template-columns: 1fr; }
  .skill-group > * { grid-column: 1; }
  .cv .skill-group h3 {
    grid-row: auto;
    padding: 0.7rem 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* personal skills: panes of one window, split by hairlines */
.traits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.trait {
  padding: 1.15rem 1.25rem 1rem;
  background: #f8f6f0;
}
.trait h3 { margin-bottom: 0.6rem !important; font-size: 0.98rem; }
.trait li { font-size: 0.93rem; }

.cv h3.sub {
  margin: 2.75rem 0 0.9rem;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.languages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
  padding: 0 !important;
  list-style: none !important;
}
.languages li { margin: 0; }
.languages strong { color: var(--ink); font-weight: 500; }
.languages span {
  margin-left: 0.5rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
}

/* footer */
.site-footer {
  margin-top: 6rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  text-align: center;
}
.site-footer .contact { justify-content: center; }
.pdf-button {
  margin: 1.25rem 0 1.25rem;
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.pdf-button:hover { background: var(--ink); color: var(--bg); }
.updated { color: var(--muted); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; }

.print-only { display: none; }

/* ---------- gentle reveal on scroll (only when JS is running) ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.js .reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-cue svg, .tl-marker { animation: none !important; }
  .project, .project-hint { transition: none; }
}

/* ---------- phones ---------- */

@media (max-width: 480px) {
  .cv section { padding-top: 4rem; }
  .intro { padding-top: 14vh !important; }
  .cv .tl-item { padding-left: 1.6rem; }
  .project { padding-right: 1rem; }
}

/* ---------- print / PDF: clean paper version ---------- */

@page { size: A4; margin: 14mm 16mm; }

@media print {
  :root {
    --text: #222;
    --text-strong: #000;
    --ink: #000;
    --muted: #555;
    --line: #ccc;
    --chip-bg: transparent;
    --raised: transparent;
  }
  html, body { background: #fff !important; }
  body { font-size: 9.5pt; line-height: 1.45; color: var(--text); }
  .void, .voxel-halo, #voxel-canvas, .paper-fade, .voxel-rest, .voxel-focus, .hero, .pdf-button, .print-hide, .tune-panel,
  .project-hint, .project-dialog { display: none !important; }
  .project-more { display: block; }
  .project { padding: 0; border: 0; margin-bottom: 0.9rem; break-inside: avoid; }
  .project-open { font-weight: inherit; }
  .print-only { display: block; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  a { color: var(--text-strong); text-decoration: none; }

  .cv { max-width: none; margin: 0; padding: 0; text-shadow: none; }
  .cv section { padding-top: 1.1rem; break-inside: auto; }
  .intro { padding-top: 0 !important; }
  .intro h1 { font-size: 22pt; font-weight: 400; }
  .role { font-size: 11pt; margin-bottom: 0.4rem; }
  .lead { margin-top: 0.8rem !important; font-size: 10pt; }
  .print-link { color: var(--muted); font-size: 8.5pt; margin-bottom: 0.4rem !important; }
  .cv h2 { margin-bottom: 0.7rem; font-size: 8pt; }
  .cv h3 { font-size: 10.5pt; }
  .contact { font-size: 8.5pt; }
  .timeline::before, .tl-marker { display: none; }
  .cv .tl-item, .project { padding-left: 0; margin-bottom: 0.9rem; break-inside: avoid; }
  .tl-meta { margin-bottom: 0.3rem !important; font-size: 8.5pt; }
  .chips { gap: 0.25rem; margin-top: 0.5rem !important; }
  .chips li { padding: 0.05rem 0.45rem; font-size: 8pt; border-color: #bbb; }
  .skill-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 1.4rem; border: 0; }
  .skill-group { display: block; break-inside: avoid; }
  .skill-group + .skill-group { border-top: 0; }
  .cv .skill-group h3 { padding: 0; border: 0; font-size: 8pt; }
  .skill-group .chips { padding: 0 !important; margin-top: 0.4rem !important; }
  .skill-group .note { margin-top: 0.4rem !important; padding: 0; }
  .traits { grid-template-columns: 1fr 1fr; gap: 0.8rem 1.4rem; border: 0; background: none; }
  .trait { padding: 0; background: none; break-inside: avoid; }
  .trait li { font-size: 9pt; }
  .cv h3.sub { margin-top: 1rem; }
  .site-footer { margin-top: 1.2rem; padding-top: 0.6rem; }
  .site-footer .contact { display: none; }
  .updated { margin: 0; }
}