:root {
  --bg: #f8f7f3;
  --panel: #ffffff;
  --ink: #252422;
  --muted: #68635d;
  --line: #e0ddd5;
  --accent: #7a4f2b;
  --accent-2: #2f6b64;
  --shadow: 0 1rem 3rem rgba(37, 36, 34, 0.08);
  --radius: 1.2rem;
  --page-gutter: clamp(1rem, 4vw, 3rem);
  --content-max: 1120px;
  --narrow-max: 780px;
  --wide-max: 1420px;
  --ambient-bg: #f8f7f3;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--ambient-bg); line-height: 1.65; transition: background-color 900ms ease; }
.voronoi-background { position: fixed; inset-block-start: -7.5vh; inset-inline-start: -7.5vw; z-index: 0; width: 115vw; height: 115vh; opacity: 0.95; pointer-events: none; animation: voronoi-drift 34s ease-in-out infinite alternate; will-change: transform; background-image: url("../images/voronoi-background.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; }
.site-header, .site-main, .site-footer { position: relative; z-index: 1; }
a { color: var(--accent-2); text-decoration-thickness: 0.08em; text-underline-offset: 0.15em; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 0.65rem; }
h1 { font-size: clamp(2.4rem, 6vw, 5rem); letter-spacing: -0.05em; }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -0.035em; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }

.site-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem var(--page-gutter); background: rgba(248, 247, 243, 0.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.brand { color: var(--ink); font-weight: 800; text-decoration: none; letter-spacing: -0.03em; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0.8rem 1.1rem; font-size: 0.95rem; }
.site-nav a { color: var(--ink); text-decoration: none; }
.site-nav a:hover { color: var(--accent); }
.site-main { min-height: 72vh; }
.site-footer { padding: 2rem var(--page-gutter); color: var(--muted); border-top: 1px solid var(--line); }

.module { padding: clamp(2rem, 7vw, 6rem) 0; }
.module-inner { width: min(var(--content-max), calc(100% - (var(--page-gutter) * 2))); margin-inline: auto; }
.module-inner.narrow, .narrow-block { width: min(var(--narrow-max), calc(100% - (var(--page-gutter) * 2))); margin-inline: auto; }
.module-inner.wide { width: min(var(--content-max), calc(100% - (var(--page-gutter) * 2))); }
.two-column { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.content-block > * + * { margin-top: 1rem; }
.eyebrow, .meta, .breadcrumb { color: var(--muted); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; }
.lede { font-size: 1.2rem; color: var(--muted); }

.module-hero { padding-block: clamp(1.5rem, 5vw, 4rem); }
.hero-shell { position: relative; display: grid; align-items: center; padding: clamp(0.6rem, 1.2vw, 1rem); overflow: hidden; border-radius: calc(var(--radius) * 1.4); background: #171514; box-shadow: var(--shadow); }
.hero-background, .hero-bg-slide, .hero-bg-visual { position: absolute; inset: 0; }
.hero-background { z-index: 0; overflow: hidden; }
.hero-background::after { position: absolute; inset: 0; z-index: 2; content: ""; background: linear-gradient(90deg, rgba(23, 21, 20, 0.52), rgba(23, 21, 20, 0.14) 58%, rgba(23, 21, 20, 0.3)); pointer-events: none; }
.hero-bg-slide { opacity: 0; transition: opacity 1600ms ease; will-change: opacity; }
.hero-bg-slide.is-active { opacity: 1; }
.hero-bg-visual { background-image: var(--hero-image); background-position: center; background-size: cover; backface-visibility: hidden; }
.hero-content { position: relative; z-index: 3; max-width: 760px; margin: 0; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius); color: #141311; background: rgba(255, 255, 255, 0.25); box-shadow: 0 1.25rem 4rem rgba(23, 21, 20, 0.24); text-shadow: 0 1px 1.5rem rgba(255, 255, 255, 0.6); }
.hero-content .eyebrow, .hero-content p { color: rgba(20, 19, 17, 0.92); }
.hero-content::before { position: absolute; inset: 0; content: ""; border-radius: inherit; background-image: radial-gradient(rgba(255, 255, 255, 0.18) 0.6px, transparent 0.6px), radial-gradient(rgba(37, 36, 34, 0.06) 0.6px, transparent 0.6px); background-position: 0 0, 1.5px 1.8px; background-size: 4px 4px, 5px 5px; opacity: 0.18; pointer-events: none; }
.hero-content > * { position: relative; }
.hero-indicators { position: absolute; inset-block-end: clamp(1rem, 3vw, 1.6rem); inset-inline-end: clamp(1rem, 3vw, 1.6rem); display: flex; gap: 0.45rem; z-index: 4; }
.hero-indicator { inline-size: 0.7rem; block-size: 0.7rem; border: 1px solid rgba(255, 255, 255, 0.78); border-radius: 999px; padding: 0; background: rgba(255, 255, 255, 0.36); cursor: pointer; }
.hero-indicator.is-active { inline-size: 1.6rem; background: #ffffff; }
.hero-indicator:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.92); outline-offset: 3px; }
.module-text .module-inner { padding-block: clamp(1rem, 3vw, 2rem); }

.card-grid, .post-grid, .split-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.card-row + .card-row { margin-top: 1rem; }
.card, .post-card, .timeline-item, .compact-item, .cta-box { display: block; padding: 1.2rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card { color: var(--ink); text-decoration: none; transition: transform 160ms ease, border-color 160ms ease; }
.card-align-left, .card-align-left h3, .card-align-left p { text-align: left; }
.card-align-center, .card-align-centre, .card-align-center h3, .card-align-centre h3, .card-align-center p, .card-align-centre p { text-align: center; }
.card-align-right, .card-align-right h3, .card-align-right p { text-align: right; }
.card:hover { transform: translateY(-2px); border-color: var(--accent); }
.card p, .post-card p, .timeline-item p { color: var(--muted); }
.section-block { margin-top: clamp(2rem, 5vw, 4rem); }
.timeline-item + .timeline-item, .compact-item + .compact-item, .list-card + .list-card { margin-top: 1rem; }
.cta-box { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.button { display: inline-flex; padding: 0.75rem 1rem; background: var(--ink); color: var(--panel); border-radius: 999px; text-decoration: none; }
.button:hover { background: var(--accent); }
.page { padding-block: clamp(2rem, 7vw, 6rem); }
.page-header { margin-bottom: 2rem; }
.post-hero-image { position: relative; margin: 0 0 clamp(1.5rem, 4vw, 3rem); overflow: hidden; border-radius: var(--radius); background: #171514; box-shadow: var(--shadow); }
.post-hero-image img { width: 100%; aspect-ratio: 16 / 6; object-fit: cover; }
.post-hero-image::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(23, 21, 20, 0.02), rgba(23, 21, 20, 0.24)); pointer-events: none; }
.post-hero-image figcaption { position: absolute; inset-inline-start: 1rem; inset-block-end: 1rem; z-index: 1; max-width: calc(100% - 2rem); padding: 0.45rem 0.7rem; border-radius: 999px; color: #fff; background: rgba(23, 21, 20, 0.64); font-size: 0.9rem; }
.cv-header { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
.avatar { inline-size: 190px; block-size: 190px; border-radius: 50%; background: var(--panel); object-fit: cover; }
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tags span { padding: 0.15rem 0.5rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 0.85rem; }
table { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: var(--radius); overflow: hidden; }
th, td { padding: 0.75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: #efede7; }
.table-wrap { overflow-x: auto; }
.publication-overview { margin-top: clamp(1.5rem, 4vw, 3rem); }
.publication-histogram { position: relative; display: flex; align-items: end; gap: 0.25rem; min-height: 11rem; padding: 1.2rem 0 0.9rem; overflow-x: auto; }
.publication-histogram::before { position: absolute; inset-inline: 0; inset-block-end: 2.05rem; content: ""; border-block-start: 1px solid rgba(47, 107, 100, 0.22); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.publication-year-bar { position: relative; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: end; min-inline-size: 2.45rem; block-size: 9rem; color: var(--ink); text-align: center; text-decoration: none; }
.publication-year-bar::before { position: absolute; inset-block-end: 2.05rem; inline-size: 1px; block-size: var(--bar-position); content: ""; background: linear-gradient(180deg, rgba(47, 107, 100, 0.02), rgba(47, 107, 100, 0.28)); transform-origin: bottom; transform: rotate(var(--node-tilt, 0deg)); }
.publication-bar-count { position: absolute; inset-block-end: calc(2.05rem + var(--bar-position)); z-index: 2; padding: 0.05rem 0.35rem; border-radius: 999px; color: var(--ink); background: rgba(255, 255, 255, 0.78); box-shadow: 0 0.35rem 1rem rgba(37, 36, 34, 0.08); font-size: 0.72rem; opacity: 0; transform: translateY(-1.1rem); transition: opacity 160ms ease, transform 160ms ease; pointer-events: none; }
.publication-bar-fill { position: absolute; inset-block-end: calc(2.05rem + var(--bar-position)); z-index: 1; display: block; inline-size: var(--cell-size); block-size: var(--cell-size); border: 1px solid rgba(47, 107, 100, 0.38); border-radius: 43% 57% 52% 48% / 48% 42% 58% 52%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.86), rgba(47, 107, 100, 0.22) 58%, rgba(122, 79, 43, 0.22)); box-shadow: 0 0.25rem 0.9rem rgba(47, 107, 100, 0.1); transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.publication-bar-fill::before, .publication-bar-fill::after { position: absolute; content: ""; border-radius: inherit; opacity: 0.55; pointer-events: none; }
.publication-bar-fill::before { inset: -0.42rem -0.18rem; border: 1px solid rgba(47, 107, 100, 0.12); transform: rotate(18deg); }
.publication-bar-fill::after { inset: 0.18rem -0.32rem -0.28rem 0.12rem; border: 1px solid rgba(122, 79, 43, 0.14); transform: rotate(-24deg); }
.publication-bar-year { color: var(--muted); font-size: 0.74rem; }
.publication-year-bar:hover .publication-bar-count, .publication-year-bar:focus-visible .publication-bar-count { opacity: 1; transform: translateY(-1.45rem); }
.publication-year-bar:hover .publication-bar-fill, .publication-year-bar:focus-visible .publication-bar-fill { border-color: var(--accent); box-shadow: 0 0.45rem 1.2rem rgba(122, 79, 43, 0.18); transform: translateY(-2px) scale(1.04); }
.accordion-list, .publication-categories { display: grid; gap: 1rem; }
.accordion-item, .publication-category { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, 0.68); box-shadow: var(--shadow); overflow: hidden; }
.accordion-item summary, .publication-category summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; cursor: pointer; font-weight: 800; }
.accordion-item summary span, .publication-category summary span { color: var(--muted); font-weight: 600; }
.accordion-item .timeline-list, .publication-category .timeline-list { padding: 0 1rem 1rem; }
.cv-accordion-item summary h2 { margin: 0; }
.publication-list { list-style: none; padding: 0; }
.publication-category .publication-list { padding: 0 1rem 1rem; }
.publication-list li { position: relative; margin-bottom: 1rem; padding: 1rem 1rem 1rem 1.2rem; border: 1px solid var(--line); border-left: 3px solid rgba(47, 107, 100, 0.42); border-radius: calc(var(--radius) * 0.75); background: rgba(255, 255, 255, 0.72); }
.publication-list li.is-selected-publication { border-left-color: var(--accent); background: linear-gradient(90deg, rgba(122, 79, 43, 0.12), rgba(255, 255, 255, 0.74) 22%); }
.publication-list li.is-selected-publication::after { position: absolute; inset-block-start: 0.8rem; inset-inline-end: 0.8rem; content: "★"; color: var(--accent); font-size: 0.85rem; line-height: 1; }
.publication-list-selected { list-style: none; padding: 0; }
.publication-citation { min-width: 0; }
.author-highlight { padding: 0.02rem 0.22rem; border-radius: 0.35rem; color: var(--ink); background: rgba(122, 79, 43, 0.16); }
.publication-year { display: inline-flex; margin-bottom: 0.35rem; color: var(--accent); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.publication-note { display: inline-flex; margin-left: 0.35rem; color: var(--muted); font-size: 0.9rem; }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 800px) {
  .site-header, .cta-box, .cv-header { align-items: flex-start; flex-direction: column; display: flex; }
  .two-column { grid-template-columns: 1fr; }
  .hero-shell { align-items: end; padding-block-end: 4rem; }
  .hero-content { background: rgba(255, 255, 255, 0.24); }
  .hero-indicators { inset-inline: 1rem auto; }
}

@keyframes voronoi-drift {
  from { transform: translate3d(-1.4vw, -1vh, 0); }
  to { transform: translate3d(1.4vw, 1vh, 0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  body { transition: none; }
  .voronoi-background { animation: none; transform: none; }
  .hero-bg-slide { transition: none; }
}