/* =====================================================================
   Thomas Lustenberger — website stylesheet
   Plain CSS, no frameworks, no JavaScript.

   Contents
     1. Fonts
     2. Colours (change the whole look here)
     3. Basics (reset, page, links)
     4. Top menu (sticky, glassy, burger on small screens)
     5. Landing page (photo, intro, stats, "Published in", "Covered by")
     6. Content sections (sticky headings, research tabs, publications)
     7. Data, About, Contact
     8. Footer and "back to top" button
     9. Scroll effects (photo fade, arrow appears)
   ===================================================================== */


/* 1. FONTS ------------------------------------------------------------ */
/* IBM Plex Sans, stored locally in fonts/ (no external font service). */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-regular.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-medium.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-semibold.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-bold.ttf") format("truetype"); }


/* 2. COLOURS ---------------------------------------------------------- */
:root {
  --background: oklch(15.5% .008 250);       /* page background (dark blue-grey) */
  --foreground: oklch(93% .01 85);           /* main text */
  --card: oklch(19% .01 250);                /* boxes, buttons */
  --muted: oklch(21% .01 250);               /* tab bar, abstract panels */
  --muted-foreground: oklch(66% .01 250);    /* secondary grey text */
  --accent: oklch(24% .012 250);             /* hover background */
  --primary: oklch(72% .12 235);             /* blue links and highlights */
  --border: oklch(27% .01 250);              /* thin lines */
  --glass: color-mix(in oklch, var(--background) 62%, transparent); /* see-through menu */
  --header-height: 72px;
  --font: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
}


/* 3. BASICS ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid var(--border); }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--background); color: var(--foreground); font-family: var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
ul, ol { list-style: none; }
img, svg { display: block; vertical-align: middle; }
img { max-width: 100%; height: auto; }
pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Centred column used by every part of the page (64rem wide). */
.container { width: 100%; max-width: 64rem; margin-inline: auto; padding-inline: 1.5rem; }

/* Small grey capital-letter label ("PUBLISHED IN", "COVERED BY"). */
.eyebrow { margin-bottom: 1.5rem; font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }

/* Underlined blue link ("Read the research →"). */
.link-accent { font-size: .875rem; line-height: 1.25rem; color: var(--primary); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in oklab, var(--primary) 45%, transparent); }


/* 4. TOP MENU --------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid var(--border);
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
.header-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  max-width: 64rem; min-height: var(--header-height); margin-inline: auto; padding-inline: 1.5rem;
}
.brand { min-width: 0; font-size: 15px; font-weight: 500; }
.site-navigation { display: flex; gap: 1.5rem; min-width: 0; font-size: .875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.site-navigation a { transition: color .15s; }
.site-navigation a:hover { color: var(--foreground); }

/* Burger (☰) and close (×) buttons — only on small screens. */
.menu-button {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.25rem; height: 2.25rem; border-radius: 4px;
  font-size: .875rem; font-weight: 500; cursor: pointer; transition: background .15s, color .15s;
}
.menu-button:hover { background: var(--accent); }
.menu-button:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--primary); }
.menu-button svg { width: 1rem; height: 1rem; pointer-events: none; }
.menu-close { display: none; }

@media (min-width: 768px) {
  .header-inner { display: flex; justify-content: space-between; }
  .menu-button { display: none !important; }
}
@media (max-width: 767px) {
  /* The menu drops down when the burger link opens #main-navigation. */
  .site-navigation {
    display: none; position: absolute; inset: 100% 0 auto; padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in oklch, var(--background) 96%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }
  .site-navigation a { padding: .75rem 0; }
  #main-navigation:target { display: grid; gap: 0; }
  .site-header:has(#main-navigation:target) .menu-open { display: none; }
  .site-header:has(#main-navigation:target) .menu-close { display: inline-flex; font-size: 24px; }
}
#main-navigation { scroll-margin-top: 73px; }


/* 5. LANDING PAGE ----------------------------------------------------- */
/* The photo starts under the see-through menu and fills the first screen. */
.landing {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: calc(100svh - 48px); margin-top: -73px; padding-top: 73px;
}
.landing-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
/* Dark shading so the white text stays readable (lighter towards the right). */
.landing-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--background) 28%, transparent), color-mix(in oklch, var(--background) 56%, transparent)),
    linear-gradient(90deg, color-mix(in oklch, var(--background) 86%, transparent), color-mix(in oklch, var(--background) 62%, transparent) 46%, color-mix(in oklch, var(--background) 18%, transparent));
}
/* Soft fade from the photo into the page colour at the bottom. */
.landing::after { content: ""; position: absolute; inset: auto 0 0; height: 100px; pointer-events: none; background: linear-gradient(transparent, var(--background)); }
@media (max-width: 640px) {
  .landing-image { object-position: 54% 60%; }
  .landing-shade { background: color-mix(in oklch, var(--background) 68%, transparent); }
}

/* Introduction */
.landing-intro { flex: 1; min-height: min-content; display: flex; align-items: center; }
.intro { padding-block: 2.5rem; }
.intro h1 { max-width: 42rem; font-size: 2.25rem; line-height: 1.25; font-weight: 600; }
.intro-text { max-width: 36rem; margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.625; color: color-mix(in oklab, var(--foreground) 90%, transparent); }
.highlight { font-weight: 600; color: var(--foreground); }
.intro-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1.75rem; }
@media (min-width: 768px) {
  .intro h1 { font-size: 3.75rem; }
  .intro-text { font-size: 1.25rem; }
}

/* Bands below the introduction */
.band { flex-shrink: 0; }

/* Stats: 5 / 4 / 1 / 20+ */
.band-stats { padding-bottom: 1.5rem; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); border-block: 1px solid var(--border); background: color-mix(in oklab, var(--background) 25%, transparent); }
.stats > div { padding-block: 1.25rem; }
.stats > div:nth-child(even) { border-left: 1px solid var(--border); padding-left: 1.25rem; }
.stats dt { font-size: 1.875rem; line-height: 2.25rem; font-weight: 600; }
.stats dd { margin-top: .25rem; font-size: .75rem; line-height: 1rem; color: var(--muted-foreground); }
@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stats > div + div { border-left: 1px solid var(--border); padding-left: 1.25rem; }
  .stats dt { font-size: 2.25rem; line-height: 2.5rem; }
  .stats dd { font-size: .875rem; line-height: 1.25rem; }
}

/* Published in */
.venues-box { border-block: 1px solid var(--border); padding: 1.5rem 1.25rem; background: color-mix(in oklab, var(--card) 85%, transparent); }
.venues { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.venue-short { font-size: 1.5rem; line-height: 2rem; font-weight: 500; }
.venue-long { margin-top: .5rem; font-size: .75rem; line-height: 1.375; color: var(--muted-foreground); }
@media (min-width: 768px) { .venues { grid-template-columns: repeat(5, 1fr); } }

/* Covered by: moving names (the list is written twice so the loop is seamless) */
.band-covered { overflow: hidden; padding-block: 1.5rem; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.marquee-track { display: flex; gap: 3.5rem; width: max-content; white-space: nowrap; font-size: 1.125rem; line-height: 1.75rem; animation: marquee 40s linear infinite; }
.marquee-track span { color: oklch(1 0 0); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* "Scroll down" link */
.landing-scroll { padding-top: 1rem; padding-bottom: 1.5rem; }
.scroll-link { display: inline-flex; align-items: center; gap: .75rem; font-size: .75rem; line-height: 1rem; color: var(--muted-foreground); }
.scroll-link:hover { color: var(--primary); }

/* Which bands fit: phones show only the introduction; taller screens add
   stats, then "Published in", then "Covered by". Adjust the heights here. */
@media (max-width: 767px), (max-height: 639px) {
  .band { position: absolute; width: 100%; visibility: hidden; pointer-events: none; }
}
@media (min-width: 768px) and (max-height: 821px) {
  .band-published, .band-covered { position: absolute; width: 100%; visibility: hidden; pointer-events: none; }
}
@media (min-width: 768px) and (max-height: 939px) {
  .band-covered { position: absolute; width: 100%; visibility: hidden; pointer-events: none; }
}


/* 6. CONTENT SECTIONS ------------------------------------------------- */
.content section { border-top: 1px solid var(--border); padding: 4rem 0; scroll-margin-top: 88px; }
.content svg { display: inline-block; }

/* Section heading (e.g. "Research — Articles, chapters & working papers") */
.sh { margin-bottom: 2rem; padding: 1rem 0; border-bottom: 1px solid var(--border); scroll-margin-top: 3.5rem; }
.kick { font-size: .75rem; font-weight: 500; color: var(--primary); }
.sh h2 { margin-top: .25rem; font-size: 1.5rem; line-height: 1.25; font-weight: 500; }
@media (min-width: 640px) { .sh h2 { font-size: 1.875rem; } }

/* Headings stay pinned under the top menu, with the same glass look. */
.sticky-head {
  position: sticky; top: var(--header-height); z-index: 20;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
.research-head { margin-bottom: 1rem; padding-bottom: .5rem; }
.research-head .sh { margin-bottom: .75rem; }

/* Research tabs: Peer-reviewed / Book chapters / Working papers */
.tabs { display: flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; border-radius: .5rem; background: var(--muted); }
@media (min-width: 640px) { .tabs { display: inline-flex; } }
.tab {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 2.25rem; padding: .5rem 1rem; border-radius: 4px; white-space: nowrap;
  font-size: .875rem; line-height: 1.25rem; font-weight: 500; cursor: pointer; transition: background .15s, color .15s;
}
.tab:hover { background: var(--accent); }
.tab:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--primary); }
.tabs .n { margin-left: .25rem; font-size: .75rem; opacity: .6; }
/* Highlight the chosen tab (first tab is highlighted by default). */
.tab[href="#group-peer"] { background: var(--card); color: var(--primary); }
body:has(#group-book:target, #group-working:target) .tab[href="#group-peer"] { background: transparent; color: inherit; }
body:has(#group-book:target) .tab[href="#group-book"],
body:has(#group-working:target) .tab[href="#group-working"] { background: var(--card); color: var(--primary); }
/* Where a tab jump lands (just below the pinned heading and tabs). */
#group-peer, #group-book, #group-working { scroll-margin-top: 238px; }
@media (max-width: 767px) { #group-peer, #group-book, #group-working { scroll-margin-top: 300px; } }

.pub-group + .pub-group { margin-top: 2.5rem; }
.group-title { margin-bottom: .5rem; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }

/* One publication row: year on the left, details on the right */
.pubs { margin-top: 1rem; }
.pub { display: grid; grid-template-columns: 3.5rem 1fr; column-gap: 1rem; padding: 1.25rem 0; border-top: 1px solid var(--border); }
@media (min-width: 640px) { .pub { grid-template-columns: 4.5rem 1fr; } }
.pub > div { min-width: 0; }
.yr { padding-top: .25rem; font-size: .75rem; color: var(--muted-foreground); }
.pt { font-size: 1.125rem; line-height: 1.375; transition: color .15s; }
.pt:hover { color: var(--primary); }
@media (min-width: 640px) { .pt { font-size: 1.25rem; } }
.by { margin-top: .25rem; font-size: .875rem; color: var(--muted-foreground); }

/* Link groups: PUBLISHED / WORKING PAPER / MEDIA */
.links { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem 1rem; margin-top: .75rem; font-size: .75rem; }
.grp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; }
.gl { text-transform: uppercase; color: color-mix(in oklab, var(--muted-foreground) 80%, transparent); }
.grp a { font-weight: 500; color: var(--primary); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in oklab, var(--primary) 35%, transparent); }
.grp a:hover { text-decoration-color: var(--primary); }

/* "Abstract & cite" fold-out */
.pub details { margin-top: .5rem; }
.pub summary { display: inline-flex; align-items: center; gap: .25rem; list-style: none; cursor: pointer; font-size: .75rem; font-weight: 500; color: color-mix(in oklab, var(--foreground) 70%, transparent); }
.pub summary::-webkit-details-marker { display: none; }
.pub summary::after { content: ""; width: .4rem; height: .4rem; margin-left: .25rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.pub details[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.pub summary:hover { color: var(--primary); }
.panel { margin-top: 1rem; padding: 1rem; border-radius: .5rem; background: var(--muted); font-size: .875rem; line-height: 1.625; }
@media (min-width: 640px) { .panel { padding: 1.25rem; } }
.panel > p + .ref, .ref:not(:first-child) { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
/* One click on a reference selects all of it, ready to copy. */
.ref p { cursor: text; -webkit-user-select: all; user-select: all; }

/* Small button-style labels under the reference */
.copy-btn, .bibtex > summary {
  cursor: pointer; font-family: inherit;
  display: inline-block; margin-top: .75rem; margin-right: .5rem; padding: .25rem .625rem;
  border: 1px solid var(--border); border-radius: .375rem; background: var(--card);
  font-size: .75rem; line-height: 1.5; font-weight: 500; color: var(--muted-foreground);
}
.bibtex { display: inline; }
.pub .bibtex > summary { display: inline-block; color: var(--muted-foreground); transition: color .15s, border-color .15s; }
.pub .bibtex > summary::after { display: none; }
.pub .bibtex > summary:hover { border-color: var(--primary); color: var(--primary); }
.bibtex pre { margin-top: .5rem; padding: .75rem; overflow-x: auto; border-radius: .375rem; background: var(--card); font-size: .75rem; line-height: 1.5; cursor: text; -webkit-user-select: all; user-select: all; }


/* 7. DATA, ABOUT, CONTACT --------------------------------------------- */
.data-pub .data-text { margin-top: .5rem; font-size: .875rem; line-height: 1.6; color: color-mix(in oklab, var(--foreground) 80%, transparent); }
.data-pub .data-img { grid-column: 2; margin-top: 1rem; }
.data-pub .data-img img { width: 100%; max-width: 20rem; border: 1px solid var(--border); border-radius: .375rem; }
@media (min-width: 768px) {
  .data-pub .data-img { grid-column: 3; margin-top: 0; }
}
.u { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }

.about { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .about { grid-template-columns: 16rem 1fr; } }
.about img { width: 100%; max-width: 20rem; aspect-ratio: 4 / 5; object-fit: cover; border-radius: .5rem; }
figcaption { margin-top: .75rem; font-size: .875rem; font-style: italic; color: var(--muted-foreground); }
.bio { line-height: 1.625; }
.bio p + p { margin-top: 1.25rem; }

.cards { display: grid; gap: .5rem; }
@media (min-width: 640px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cards { grid-template-columns: 1fr 1fr 1fr; } }
.card { display: flex; align-items: center; justify-content: space-between; padding: .875rem 1rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--card); font-size: .875rem; font-weight: 500; transition: color .15s, border-color .15s; }
.card svg { width: 1rem; height: 1rem; color: var(--muted-foreground); }
.card:hover { border-color: var(--primary); color: var(--primary); }


/* 8. FOOTER AND BACK-TO-TOP ------------------------------------------- */
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 4rem; padding: 2rem 0 3rem; border-top: 1px solid var(--border); font-size: .875rem; color: var(--muted-foreground); }
.site-footer a:hover { color: var(--primary); }
.to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); color: var(--foreground); cursor: pointer;
}


/* 9. SCROLL EFFECTS --------------------------------------------------- */
/* Modern browsers: the photo fades out while scrolling and the up-arrow
   appears after scrolling down. Older browsers simply show both. */
@supports (animation-timeline: scroll()) {
  .to-top { animation: show-to-top linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
  @keyframes show-to-top { 0%, 99% { opacity: 0; pointer-events: none; } 100% { opacity: 1; pointer-events: auto; } }
  .landing { view-timeline-name: --landing; view-timeline-axis: block; }
  /* Starts fading with the very first scroll; gone after ~60% of a screen. */
  .landing-image { animation: fade-photo linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
  @keyframes fade-photo { from { opacity: 1; } to { opacity: 0; } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track, .landing-image { animation: none; }
}

/* ==========================================================================
   "You are here" highlighting while scrolling (pure CSS, no scripts)
   Each section/group gets a named view timeline; the matching menu link
   lights up while that section passes just below the sticky menu.
   Browsers without support simply show the menus without highlighting.
   ========================================================================== */
@keyframes here-nav { from, to { color: var(--primary); } }
@keyframes here-tab { from, to { background: var(--card); color: var(--primary); } }
@supports (animation-timeline: view()) {
  html { timeline-scope: --s-research, --s-other, --s-data, --s-about, --s-contact, --g-peer, --g-book, --g-working; }
  #research, #other, #data, #about, #contact, .pub-group {
    view-timeline-axis: block;
    view-timeline-inset: 100px calc(100% - 101px); /* a thin line just under the menu */
  }
  #research { view-timeline-name: --s-research; }
  #other    { view-timeline-name: --s-other; }
  #data     { view-timeline-name: --s-data; }
  #about    { view-timeline-name: --s-about; }
  #contact  { view-timeline-name: --s-contact; }
  #group-peer    { view-timeline-name: --g-peer;    view-timeline-inset: 200px calc(100% - 201px); }
  #group-book    { view-timeline-name: --g-book;    view-timeline-inset: 200px calc(100% - 201px); }
  #group-working { view-timeline-name: --g-working; view-timeline-inset: 200px calc(100% - 201px); }

  .site-navigation a { animation: here-nav linear both; animation-range: cover 0% cover 100%; animation-fill-mode: none; }
  .site-navigation a[href="#research"] { animation-timeline: --s-research; }
  .site-navigation a[href="#other"]    { animation-timeline: --s-other; }
  .site-navigation a[href="#data"]     { animation-timeline: --s-data; }
  .site-navigation a[href="#about"]    { animation-timeline: --s-about; }
  .site-navigation a[href="#contact"]  { animation-timeline: --s-contact; }

  /* Research sub-menu: replace click-based highlight with scroll-based one */
  .tab[href="#group-peer"],
  body:has(#group-book:target, #group-working:target) .tab { background: transparent; color: inherit; }
  .tab { animation: here-tab linear; animation-range: cover 0% cover 100%; animation-fill-mode: none; }
  .tab[href="#group-peer"]    { animation-timeline: --g-peer; }
  .tab[href="#group-book"]    { animation-timeline: --g-book; }
  .tab[href="#group-working"] { animation-timeline: --g-working; }
}
.copy-btn:hover, .bibtex > summary:hover { border-color: var(--primary); color: var(--primary); }