/* ============================================================
   BASE & RESET
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0d1117;
  --bg-card:   #161b22;
  --bg-card2:  #1c2330;
  --border:    #30363d;
  --text:      #e6edf3;
  --text-muted:#8b949e;
  --accent:    #2f81f7;
  --accent2:   #58a6ff;
  /* Filled controls with white text. #2f81f7 under white reads at 3.7:1 —
     under the 4.5:1 that WCAG AA asks of body-size text — so anything that
     paints white ON the accent uses this darker step (4.6:1) instead. Lines,
     borders and coloured text keep --accent, which is fine on the dark bg. */
  --accent-strong: #1f6feb;
  --accent-strong-hover: #1a5fd6;
  --accent-glow: rgba(47, 129, 247, 0.15);
  --radius:    10px;
  --font:      'Inter', system-ui, sans-serif;
  --mono:      'JetBrains Mono', monospace;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Offset anchored sections for the fixed ~60px navbar */
section[id] { scroll-margin-top: 70px; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
}

a { color: var(--accent2); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}

.icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ============================================================
   NAVBAR
============================================================ */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(13, 17, 23, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s;
}

.nav-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--accent2);
  background: var(--accent-glow);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 4px 10px;
  letter-spacing: 1px;
}

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--text); text-decoration: none; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.4rem;
  cursor: pointer;
}

/* ============================================================
   LANGUAGE SWITCHER
============================================================ */
.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lang-switcher {
  position: relative;
}

.lang-current {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 6px 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.lang-current:hover { border-color: var(--accent); background: var(--accent-glow); }
.lang-current[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-glow); }

.lang-flag {
  width: 22px;
  height: 15px;
  display: inline-block;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}
.lang-flag svg { width: 100%; height: 100%; display: block; }

.lang-code { letter-spacing: 0.5px; }

.lang-caret {
  font-size: 0.7rem;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.lang-current[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  list-style: none;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 200;
}
.lang-menu[hidden] { display: none; }

.lang-menu li button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.88rem;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.lang-menu li button:hover { background: var(--accent-glow); }
.lang-menu li[aria-selected="true"] button { background: var(--accent-glow); color: var(--accent2); font-weight: 600; }

/* ============================================================
   HERO
============================================================ */
#hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 24px 60px;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(47,129,247,0.08) 0%, transparent 70%);
  position: relative;
}

.hero-content {
  max-width: 820px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 48px;
}

.hero-photo-placeholder {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  /* The portrait has a white studio background, which on this page turned it
     into a bare white disc. A gradient ring (the padding shows the
     background through) frames it as a deliberate medallion instead. */
  background: linear-gradient(135deg, #79c0ff 0%, var(--accent) 55%, #1d4ed8 100%);
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 2.5rem;
  color: var(--accent2);
  flex-shrink: 0;
  box-shadow: 0 0 40px var(--accent-glow);
  overflow: hidden;
}

.hero-photo-placeholder img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.hero-text h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #e6edf3 0%, var(--accent2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-title {
  font-size: 1.1rem;
  color: var(--accent2);
  font-weight: 500;
  margin-bottom: 16px;
  font-family: var(--mono);
}

.hero-affil {
  font-size: 0.9rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.hero-links {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--accent-strong);
  color: #fff;
}
.btn-primary:hover {
  background: var(--accent-strong-hover);
  box-shadow: 0 0 0 4px var(--accent-glow);
  text-decoration: none;
}

.btn-outline {
  background: transparent;
  color: var(--accent2);
  border: 1px solid var(--accent);
}
.btn-outline:hover { background: var(--accent-glow); text-decoration: none; }

.hero-scroll-hint {
  position: absolute;
  bottom: 30px;
  font-size: 1.4rem;
  color: var(--text-muted);
}

/* Decorative articulated robot arm */
.hero-arm {
  position: absolute;
  right: max(24px, calc(50% - 560px));
  top: 50%;
  transform: translateY(-46%);
  width: clamp(190px, 22vw, 290px);
  height: auto;
  opacity: 0.85;
  filter: drop-shadow(0 0 26px rgba(47,129,247,0.25));
  pointer-events: none;
  z-index: 0;
  /* --arm-tilt / --arm-shift are driven by scroll in script.js (reacts to the
     section you scroll into); pivot at the pedestal base so it leans naturally. */
  transform: translateY(calc(-46% + var(--arm-shift, 0px))) rotate(var(--arm-tilt, 0deg));
  transform-origin: 50% 94%;
  will-change: transform;
}
.hero-content { position: relative; z-index: 1; }
/* hide on narrower screens where it would overlap the text */
@media (max-width: 1080px) { .hero-arm { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  .hero-scroll-hint { animation: bounce 2s infinite; }

  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
  }
}

/* ============================================================
   SECTIONS
============================================================ */
section { padding: 90px 0; }
section:nth-child(even) { background: var(--bg-card); }
/* The homepage sections sit inside <main> (the page's one main landmark),
   which shifts every nth-child by one. Counting odd inside main keeps the
   same stripes as before: About dark, Research raised, Skills dark, … */
main > section:nth-child(even) { background: transparent; }
main > section:nth-child(odd) { background: var(--bg-card); }

.section-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  margin-bottom: 48px;
  position: relative;
  display: inline-block;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}

/* ============================================================
   ABOUT
============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: start;
}

.about-text p {
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 16px;
  font-size: 1.02rem;
}
.about-text p strong { color: var(--text); }
.about-text p a strong { color: var(--accent2); } /* linked affiliations stay recognizable as links */

.about-stats {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.stat {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 28px;
  text-align: center;
  min-width: 140px;
  transition: border-color 0.2s;
}
.stat:hover { border-color: var(--accent); }

.stat-number {
  display: block;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--accent2);
  font-family: var(--mono);
}
.stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ============================================================
   EXPERIENCE / CV (timeline + research projects)
============================================================ */
.timeline-wrap { position: relative; margin: 46px 0 56px; }

/* filament spool feeding the printed spine — only the reel disc spins (--tl-spin),
   so the filament strand stays put and looks like it unwinds off the side. */
.tl-spool {
  position: absolute;
  left: -8px;
  top: -44px;
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 0 6px rgba(47,129,247,0.4));
  z-index: 3;
  pointer-events: none;
}
.tl-spool svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tl-spool-disc {
  transform: rotate(var(--tl-spin, 0deg));
  transform-box: fill-box;
  transform-origin: center;
}

/* Z-axis guide rail (left) the print head rides on; printing happens to its right */
.tl-rail {
  position: absolute;
  left: -16px;
  top: 0;
  bottom: 0;
  width: 8px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    #6b7280 0, #6b7280 2px,
    transparent 2px, transparent 6px,
    #6b7280 6px, #6b7280 8px);
  opacity: 0.5;
}
.tl-rail::before, .tl-rail::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  height: 5px;
  background: #6b7280;
  border-radius: 2px;
}
.tl-rail::before { top: 0; }
.tl-rail::after { bottom: 0; }

.timeline {
  list-style: none;
  position: relative;
  padding-left: 32px;
  margin: 0;
}

/* vertical spine — faint full track + bright "printed" fill that grows on scroll */
.tl-track, .tl-fill {
  position: absolute;
  left: 7px;
  top: 6px;
  width: 2px;
  border-radius: 2px;
  pointer-events: none;
}
.tl-track { bottom: 6px; background: rgba(47,129,247,0.16); }
.tl-fill {
  height: var(--tl-fill, 0px);
  background: linear-gradient(180deg, var(--accent2) 0%, var(--accent) 100%);
  box-shadow: 0 0 12px rgba(47,129,247,0.6);
}
/* the travelling print head sits at the tip of the printed line */
.tl-nozzle {
  position: absolute;
  left: -18px;
  top: 0;
  width: 30px;
  height: 30px;
  transform: translateY(calc(6px + var(--tl-fill, 0px) - 26px));
  filter: drop-shadow(0 0 7px rgba(47,129,247,0.6));
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 2;
}
.tl-nozzle svg { width: 100%; height: 100%; display: block; }
.timeline-wrap.is-printing .tl-nozzle { opacity: 1; }
.timeline-wrap.is-printing .tl-nozzle-tip { animation: nozzlePulse 0.9s ease-in-out infinite; }
@keyframes nozzlePulse { 0%,100% { opacity: 1; r: 2; } 50% { opacity: 0.4; r: 2.6; } }

/* No-JS / reduced-motion fallback: show the spine fully, hide the head */
.timeline-wrap.tl-static .tl-fill { height: calc(100% - 12px) !important; }
.timeline-wrap.tl-static .tl-nozzle { display: none; }

/* "printed" reveal — JS adds .print-in (initial hidden) then .printed (animate in).
   Gated behind JS so no-JS / reduced-motion users always see the content. */
.print-in {
  opacity: 0;
  transform: translateY(18px);
  clip-path: inset(0 0 100% 0);
}
.print-in.printed {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2,0.7,0.2,1), clip-path 0.65s cubic-bezier(0.2,0.7,0.2,1);
}

.tl-item {
  position: relative;
  padding: 0 0 32px 24px;
}
.tl-item:last-child { padding-bottom: 0; }

.tl-marker {
  position: absolute;
  left: -32px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 4px var(--bg), 0 0 14px var(--accent-glow);
  transition: transform 0.2s, box-shadow 0.2s;
}
.tl-item:hover .tl-marker {
  transform: scale(1.18);
  box-shadow: 0 0 0 4px var(--bg), 0 0 20px rgba(47,129,247,0.5);
}

.tl-period {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent2);
  background: var(--accent-glow);
  border: 1px solid rgba(47,129,247,0.3);
  border-radius: 6px;
  padding: 3px 10px;
  margin-bottom: 10px;
}
.tl-role {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.tl-place {
  font-size: 0.88rem;
  color: var(--accent2);
  margin-bottom: 8px;
}
.tl-desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 760px;
}

.rproject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

.rproject-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 22px 18px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.rproject-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px var(--accent-glow);
  text-decoration: none;
}
.rproject-icon { font-size: 1.8rem; margin-bottom: 12px; }
.rproject-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.rproject-card p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 14px;
  flex-grow: 1;
}
.rproject-cta {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--accent2);
  font-weight: 500;
}
.rproject-card:hover .rproject-cta { color: var(--text); }

/* --- Card media (thumbnail) --- */
.rproject-card { padding: 0; overflow: hidden; }
.rproject-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #1c2330, #232c3d);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 12px;
}
.rproject-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  display: block;
  transition: transform 0.4s ease;
}
/* Photo cards show the full figure (no crop) as a banner */
.rproject-media.is-photo {
  aspect-ratio: auto;
  min-height: 150px;
  padding: 14px;
}
.rproject-media.is-photo img {
  height: auto;
  max-height: 210px;
  object-fit: contain;
}
.rproject-card:hover .rproject-media img { transform: scale(1.05); }
.rproject-media .rproject-icon {
  font-size: 2.4rem;
  margin: 0;
  opacity: 0.85;
}
.rproject-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 18px 20px 16px;
}
.rproject-body p { margin-bottom: 14px; }
.rproject-cta { cursor: pointer; }
.rproject-card.is-interactive { cursor: pointer; }

/* --- Read-more modal --- */
.rmodal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 20px;
  overflow-y: auto;
  background: rgba(3, 6, 12, 0.72);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.rmodal-backdrop.open { opacity: 1; pointer-events: auto; }
.rmodal {
  position: relative;
  width: 100%;
  max-width: 760px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  transform: translateY(14px) scale(0.985);
  transition: transform 0.22s ease;
}
.rmodal-backdrop.open .rmodal { transform: none; }
.rmodal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  background: rgba(13, 17, 23, 0.6);
  color: var(--text-muted);
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  z-index: 3;
}
.rmodal-close:hover { color: var(--text); border-color: var(--accent); background: var(--bg-card2); }
.rmodal-hero {
  aspect-ratio: 16 / 9;
  background: #0b0e14;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}
.rmodal-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rmodal-hero.is-contain { aspect-ratio: auto; }
.rmodal-hero.is-contain img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  margin: 0 auto;
}
.rmodal-content { padding: 24px 28px 28px; }
.rmodal-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 8px;
}
.rmodal-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 14px;
}
.rmodal-about {
  color: var(--text-muted);
  line-height: 1.75;
  font-size: 0.95rem;
  margin-bottom: 26px;
}
.rmodal-h {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 14px;
}
.rmodal-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.rmodal-fig { margin: 0; }
.rmodal-fig-wide { grid-column: 1 / -1; }
.rmodal-fig-wide img { max-height: 440px; object-fit: contain; }
.rmodal-fig img {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  display: block;
}
.rmodal-fig video {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #000;
  display: block;
}
.rmodal-fig-wide video { max-height: 460px; }
.rmodal-fig figcaption {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 7px;
}
.rmodal-cite {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 12px;
}
.rmodal-cite .rmodal-cite-src { color: var(--text-muted); }
.rmodal-cite p { margin: 0 0 10px; }
.rmodal-cite p:last-child { margin-bottom: 0; }
.rmodal-license {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-bottom: 22px;
}
.rmodal-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.rmodal-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.rmodal-btn-primary { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.rmodal-btn-primary:hover { background: var(--accent-strong-hover); border-color: var(--accent-strong-hover); text-decoration: none; }
.rmodal-btn[hidden] { display: none; }
.rmodal-btn-ghost { background: transparent; color: var(--text-muted); }
.rmodal-btn-ghost:hover { color: var(--text); border-color: var(--accent); text-decoration: none; }
body.rmodal-open { overflow: hidden; }

@media (max-width: 560px) {
  .rmodal-gallery { grid-template-columns: 1fr; }
  .rmodal-title { font-size: 1.25rem; }
  .rmodal-content { padding: 20px 18px 22px; }
}

/* ============================================================
   PUBLICATIONS
============================================================ */
.pub-sort {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}
.pub-sort-label {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-family: var(--mono);
  margin-right: 4px;
}
.pub-sort-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-muted);
  padding: 6px 16px;
  font-size: 0.8rem;
  font-family: var(--mono);
  cursor: pointer;
  transition: all 0.2s;
}
.pub-sort-btn:hover { border-color: var(--accent); color: var(--text); }
.pub-sort-btn.active {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #fff;
}

.pub-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.pub-filter {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-muted);
  padding: 6px 18px;
  font-size: 0.85rem;
  font-family: var(--mono);
  cursor: pointer;
  transition: all 0.2s;
}
.pub-filter:hover { border-color: var(--accent); color: var(--text); }
.pub-filter.active {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #fff;
}

.pub-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pub-item {
  display: flex;
  gap: 16px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  transition: border-color 0.2s, transform 0.15s;
}
.pub-item:hover {
  border-color: var(--accent);
  transform: translateX(4px);
}
.pub-item.hidden { display: none; }

.pub-year-badge {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent2);
  background: var(--accent-glow);
  border: 1px solid rgba(47,129,247,0.3);
  border-radius: 6px;
  padding: 4px 10px;
  height: fit-content;
  white-space: nowrap;
  flex-shrink: 0;
}

.pub-title {
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.5;
}

/* seznam autorů z OpenAlexu; vlastní jméno je zvýrazněné */
.pub-authors {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 6px;
  line-height: 1.5;
}
.pub-authors strong { color: var(--text); font-weight: 650; }

.pub-venue {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-style: italic;
}

.pub-doi {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent2);
  opacity: 0.8;
  transition: opacity 0.2s;
}
.pub-doi:hover { opacity: 1; text-decoration: none; }

/* ============================================================
   SUB-PAGE LAYOUT (projekty/, jazyky/, …)
============================================================ */
.page-section {
  padding: 140px 0 90px;
  min-height: 100vh;
}

.page-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  margin-bottom: 16px;
  position: relative;
  display: inline-block;
}
.page-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}

.breadcrumbs {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--accent2); }
.breadcrumbs .sep { margin: 0 8px; opacity: 0.5; }

/* ============================================================
   PROJECTS
============================================================ */
.section-intro {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 720px;
  margin-bottom: 32px;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.project-card {
  display: block;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 28px 24px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  position: relative;
}
.project-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px var(--accent-glow);
  text-decoration: none;
}

.project-icon { font-size: 2rem; margin-bottom: 12px; }

.project-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text);
}

.project-card p {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}
.project-card p strong { color: var(--text); }

.project-cta {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--accent2);
  font-weight: 500;
}
.project-cta::after { content: " \2192"; }
.project-card:hover .project-cta { color: var(--text); }

/* --- Cards with illustrated header (side projects) --- */
.project-card.has-media {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.project-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #151c29, #232d3f);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.project-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.project-card:hover .project-media img { transform: scale(1.05); }
.project-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 20px 24px 22px;
}
.project-kicker {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.project-card.has-media h3 { font-size: 1.2rem; margin-bottom: 8px; }
.project-card.has-media p { flex-grow: 1; }

@media (prefers-reduced-motion: reduce) {
  .project-media img { transition: none; }
  .project-card:hover .project-media img { transform: none; }
}

/* ============================================================
   LANGUAGE PICKER (jazyky/)
============================================================ */
.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.lang-card {
  display: block;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  position: relative;
  /* The illustration runs edge to edge, so the padding moved off the card and
     onto .lang-card-body. overflow:hidden is what keeps the picture inside
     the rounded corner. */
  padding: 0;
  overflow: hidden;
}
.lang-card--active:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px var(--accent-glow);
  text-decoration: none;
}
.lang-card--soon {
  opacity: 0.55;
  cursor: not-allowed;
}

/* The illustrated banner. Each language gets its own place — London for
   English, Lofoten for Norwegian, Prague for Czech — with the flag pair and
   the app name drawn into the artwork itself (Images/projects/_build-lang-art.cjs),
   so there is nothing here to keep in step with it. */
.lang-card-media {
  display: block;
  line-height: 0;
  background: #060c18;
  border-bottom: 1px solid var(--border);
}
.lang-card-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: opacity 0.2s;
}
.lang-card--active:hover .lang-card-media img { opacity: 0.94; }
.lang-card-body { padding: 18px 22px 20px; }

.lang-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.lang-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 14px;
}
.lang-soon-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  letter-spacing: 0.5px;
}

/* ============================================================
   CONTACT
============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.2s;
  font-size: 0.95rem;
}
.contact-item:hover { border-color: var(--accent); }
.contact-item .icon { color: var(--accent2); }

/* "Where to find me" — replaces a box that held nothing but a grey pin and
   the word Førde. No map tiles (no third-party requests on this site), so it
   says what a map would: the place, the coordinates and the time zone. */
.where-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(var(--bg-card2), var(--bg-card2)) padding-box,
    linear-gradient(135deg, rgba(47,129,247,0.55), rgba(47,129,247,0.08)) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius);
  min-height: 220px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.where-card::before {
  /* a faint graticule, so the coordinates have something to sit on */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(88,166,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88,166,255,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.where-card > * { position: relative; }
.where-kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent2);
}
.where-place {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.where-coords {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--text);
}
.where-tz { font-size: 0.85rem; color: var(--text-muted); }
.where-pin {
  position: absolute;
  right: 22px;
  bottom: 18px;
  width: 64px;
  height: 64px;
  color: var(--accent2);
  opacity: 0.35;
  filter: drop-shadow(0 0 12px rgba(47,129,247,0.5));
}

/* ============================================================
   FOOTER
============================================================ */
footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 28px 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.footer-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-flex p { margin: 0; }
.footer-legal {
  display: flex;
  gap: 18px;
  font-size: 0.85rem;
}
.footer-legal a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-legal a:hover { color: var(--accent2); }
@media (max-width: 600px) {
  .footer-flex { justify-content: center; }
}

/* ============================================================
   LEGAL PAGES (privacy / terms / cookies)
============================================================ */
.legal-page {
  padding: 120px 0 80px;
  min-height: 100vh;
}
.legal-page .container { max-width: 780px; }
.legal-page article { animation: pageFadeIn 0.2s ease; }
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }

.legal-page h1 {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.legal-page .effective {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 32px;
  letter-spacing: 0.5px;
}
.legal-page .lede {
  font-size: 1.02rem;
  color: var(--text);
  line-height: 1.7;
  border-left: 3px solid var(--accent);
  background: var(--bg-card2);
  padding: 14px 18px;
  border-radius: 6px;
  margin-bottom: 32px;
}
.legal-page h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 36px;
  margin-bottom: 12px;
  color: var(--text);
}
.legal-page h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 10px;
  color: var(--text);
}
.legal-page p {
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 12px;
  font-size: 0.95rem;
}
.legal-page p strong { color: var(--text); }
.legal-page ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 14px;
}
.legal-page ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 6px;
  color: var(--text-muted);
  line-height: 1.7;
  font-size: 0.95rem;
}
.legal-page ul li::before {
  content: '•';
  position: absolute;
  left: 6px;
  color: var(--accent);
  font-weight: 700;
}
.legal-page ul li strong { color: var(--text); }
.legal-page a {
  color: var(--accent2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.legal-page a:hover { border-bottom-color: var(--accent2); }
.legal-page code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--bg-card2);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--text);
}
.legal-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 22px;
  font-size: 0.88rem;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.legal-page table th,
.legal-page table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.5;
}
.legal-page table tr:last-child td { border-bottom: none; }
.legal-page table th {
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.legal-page table td {
  color: var(--text-muted);
}
.legal-page table td strong { color: var(--text); }
@media (max-width: 600px) {
  .legal-page { padding: 90px 0 60px; }
  .legal-page table { font-size: 0.8rem; display: block; overflow-x: auto; }
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 768px) {
  .nav-links { display: none; flex-direction: column; gap: 16px; }
  .nav-links.open {
    display: flex;
    position: absolute;
    top: 60px; left: 0; right: 0;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 20px 24px;
  }
  .nav-toggle { display: block; }
  .lang-current { padding: 5px 8px; font-size: 0.75rem; }
  .lang-code { display: none; }
  .lang-flag { width: 20px; height: 14px; }

  .hero-content { flex-direction: column; text-align: center; gap: 28px; }
  .hero-affil { justify-content: center; }
  .hero-links { justify-content: center; }

  .about-grid { grid-template-columns: 1fr; }
  .about-stats { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .stat { min-width: 110px; }

  .contact-grid { grid-template-columns: 1fr; }

  .pub-item { flex-direction: column; gap: 10px; }
  /* stacked, the year chip would stretch to the card's full width */
  .pub-year-badge { align-self: flex-start; }
}

@media (max-width: 480px) {
  section { padding: 60px 0; }
  .hero-photo-placeholder { width: 120px; height: 120px; font-size: 2rem; }
}

/* ============================================================
   PUBLICATION METRICS BADGES
============================================================ */
.pub-metrics {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.pub-badge {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: transparent;
  letter-spacing: 0.3px;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.pub-if {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  transition: color 0.3s ease;
}

/* ── Colored mode ── */
.pub-list--colored .pub-badge.q1 { /* gold */
  color: #f0c050;
  border-color: #f0c050;
  background: rgba(240, 192, 80, 0.1);
}
.pub-list--colored .pub-badge.q2 { /* silver */
  color: #cbd1d8;
  border-color: #aeb6bf;
  background: rgba(203, 209, 216, 0.1);
}
.pub-list--colored .pub-badge.q3 { /* bronze */
  color: #cd7f32;
  border-color: #cd7f32;
  background: rgba(205, 127, 50, 0.1);
}
.pub-list--colored .pub-badge.q4 { /* white */
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.08);
}
.pub-list--colored .pub-badge.conf,
.pub-list--colored .pub-badge.book,
.pub-list--colored .pub-badge.thesis {
  color: #bc8cff;
  border-color: #bc8cff;
  background: rgba(188, 140, 255, 0.1);
}
.pub-list--colored .pub-badge.scopus {
  color: #f0883e;
  border-color: #f0883e;
  background: rgba(240, 136, 62, 0.1);
}
.pub-list--colored .pub-if { color: var(--text); }

/* ── Live research metrics (OpenAlex + Semantic Scholar, refreshed weekly) ── */
.research-metrics[hidden] { display: none; } /* .research-metrics sets display:flex, which would otherwise override the [hidden] attr and show an empty box until data loads */
.research-metrics {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 28px;
  padding: 18px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.research-metrics .rm-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
}
.research-metrics .rm-src {
  min-width: 112px;
  padding-right: 16px;
  border-right: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.3s ease;
}
.research-metrics .rm-src:hover { color: var(--accent2); }
.research-metrics .rm-item { display: flex; flex-direction: column; line-height: 1.1; }
.research-metrics .rm-num {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent2);
}
.research-metrics .rm-label { font-size: 0.76rem; color: var(--text-muted); margin-top: 3px; }
.research-metrics .rm-note {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}
@media (max-width: 540px) {
  .research-metrics .rm-src { min-width: 0; border-right: none; padding-right: 0; flex-basis: 100%; }
}

/* live "cited by N" badge on publication cards */
.pub-cites {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  color: #3fb950;
  border: 1px solid #3fb950;
  background: rgba(63, 185, 80, 0.1);
  cursor: default;
}
/* "newly indexed" auto-added papers */
.pub-list--colored .pub-badge.auto {
  color: var(--accent2);
  border-color: var(--accent);
  background: var(--accent-glow);
}
/* popular-science (outreach) articles */
.pub-list--colored .pub-badge.pop {
  color: #39c5cf;
  border-color: #39c5cf;
  background: rgba(57, 197, 207, 0.1);
}

/* ── Teaching & research stays (Experience section) ── */
.exp-extra-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.exp-extra-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 26px;
}
.exp-extra-title {
  font-size: 1.02rem;
  color: var(--accent2);
  margin-bottom: 12px;
}
.exp-extra-card p {
  color: var(--text-muted);
  font-size: 0.93rem;
  line-height: 1.6;
}
.exp-extra-card p + p { margin-top: 10px; }
.exp-stays {
  list-style: none;
  margin: 0;
  padding: 0;
}
.exp-stays li {
  color: var(--text-muted);
  font-size: 0.93rem;
  line-height: 1.55;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.exp-stays li + li { margin-top: 9px; }
.exp-stays .stay-flag {
  flex: 0 0 21px;
  height: 14px;
  margin-top: 0.3em;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--border);
}
.exp-stays .stay-flag svg { display: block; width: 100%; height: 100%; }
.exp-stays strong { color: var(--text); font-weight: 600; }

/* ============================================================
   SKILLS — kolo vývojového cyklu
   ============================================================ */
#skills { padding: 80px 0; }
.sw-outer { display: flex; justify-content: center; }
.sw-scaler { width: 860px; height: 730px; transform-origin: top center; flex: none; }
.sw { position: relative; width: 860px; height: 730px; }

.sw-arcs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sw-ring {
  fill: none; stroke: #232a35; stroke-width: 1; stroke-dasharray: 2 7;
  transform-box: fill-box; transform-origin: center; animation: swSpin 140s linear infinite;
}
@keyframes swSpin { to { transform: rotate(360deg); } }
.sw-arc { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.sw-tick { stroke: #3a4757; stroke-width: 1.4; stroke-linecap: round; }

/* střed */
.sw-hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 250px; height: 250px; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #14273f 0%, var(--bg-card) 72%);
  border: 1.5px solid rgba(47, 129, 247, 0.75);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  box-shadow: 0 0 0 10px rgba(47, 129, 247, 0.05), 0 18px 46px rgba(0, 0, 0, 0.5);
  z-index: 2; overflow: hidden;
}
.hub-scene {
  width: 188px; height: 188px; color: #79c0ff; fill: none; stroke: currentColor;
  stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; flex: none;
}
.hub-cap { margin-top: 2px; font-size: 11px; font-weight: 650; line-height: 1.25; color: var(--text); }
.hub-cap i {
  display: block; font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: #79c0ff; margin-bottom: 1px;
}

/* fáze */
.sw-list { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.sw-node { position: absolute; left: var(--x); top: var(--y); }
.sw-bub {
  position: absolute; left: 0; top: 0; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%;
  background: var(--bg-card); border: 1.5px solid rgba(47, 129, 247, 0.5);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px rgba(47, 129, 247, 0.05);
}
.sw-bub svg {
  width: 31px; height: 31px; color: #79c0ff; fill: none; stroke: currentColor;
  stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round;
}

.sw-label { position: absolute; display: block; }
.sw-label b { display: block; font-size: 14px; font-weight: 650; line-height: 1.25; margin-bottom: 4px; color: var(--text); }
.sw-desc { display: block; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); }
.sw-desc + .tools { margin-top: 8px; }
.tools { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sw-node[data-pos="top"] .tools,
.sw-node[data-pos="bottom"] .tools { justify-content: center; }
.sw-node[data-pos="left"] .tools { justify-content: flex-end; }

.sw-node[data-pos="top"]    .sw-label { left: 0; bottom: 51px; transform: translateX(-50%); width: 300px; text-align: center; }
.sw-node[data-pos="bottom"] .sw-label { left: 0; top: 51px; transform: translateX(-50%); width: 300px; text-align: center; }
.sw-node[data-pos="right"]  .sw-label { left: 49px; top: 0; transform: translateY(-50%); width: 215px; text-align: left; }
.sw-node[data-pos="left"]   .sw-label { right: 49px; top: 0; transform: translateY(-50%); width: 215px; text-align: right; }

.tools .chip {
  font-size: 10.5px; font-family: var(--mono); padding: 2.5px 7px; border-radius: 6px;
  background: rgba(47, 129, 247, 0.10); border: 1px solid rgba(47, 129, 247, 0.26);
  color: #cfe4ff; line-height: 1.45;
  /* nezmenšovat a nezalamovat — kromě chipu, který sám o sobě přeteče sloupec */
  flex: 0 0 auto; max-width: 100%; white-space: normal;
}

/* animace: fáze se rozsvěcují po směru cyklu */
.sw .sw-hub,
.sw .sw-node { opacity: 0; transition: opacity .5s ease, transform .5s cubic-bezier(.2, .9, .3, 1.25); }
.sw .sw-hub { transform: translate(-50%, -50%) scale(.8); }
.sw .sw-node .sw-bub { transform: scale(.55); }
.sw .sw-arc { stroke-dasharray: 108; stroke-dashoffset: 108; transition: stroke-dashoffset .55s ease; }
.sw .sw-tick { opacity: 0; transition: opacity .4s ease; }
.sw.is-in .sw-hub { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.sw.is-in .sw-node { opacity: 1; transition-delay: calc(.3s + var(--i) * .16s); }
.sw.is-in .sw-node .sw-bub { transform: scale(1); transition-delay: calc(.3s + var(--i) * .16s); }
.sw.is-in .sw-arc { stroke-dashoffset: 0; transition-delay: calc(.46s + var(--i) * .16s); }
.sw.is-in .sw-tick { opacity: 1; transition-delay: calc(.5s + var(--i) * .16s); }

@media (prefers-reduced-motion: reduce) {
  .sw-ring { animation: none; }
  .sw .sw-hub,
  .sw .sw-node { opacity: 1 !important; transition: none !important; }
  .sw .sw-hub { transform: translate(-50%, -50%) !important; }
  .sw .sw-node .sw-bub { transform: none !important; }
  .sw .sw-arc { stroke-dashoffset: 0 !important; }
  .sw .sw-tick { opacity: 1 !important; }
}

/* zmenšení a mobilní rozvržení */
@media (max-width: 920px) { .sw-scaler { transform: scale(.85); height: 621px; } }
@media (max-width: 800px) { .sw-scaler { transform: scale(.72); height: 526px; } }
@media (max-width: 760px) {
  #skills { padding: 56px 0; }
  .sw-scaler { transform: none; width: 100%; height: auto; }
  .sw { width: 100%; height: auto; }
  .sw-arcs { display: none; }
  .sw-list { position: static; inset: auto; }

  .sw-hub {
    position: static; transform: none !important; width: 100% !important; height: auto; border-radius: var(--radius);
    flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px;
    padding: 12px 16px; margin-bottom: 16px; box-shadow: none; text-align: left; overflow: visible;
  }
  .hub-scene { width: 54px; height: 54px; }
  .hub-cap { margin: 0; font-size: 15px; font-weight: 700; }
  .hub-cap i { display: inline; margin-right: 7px; font-size: 9.5px; }

  .sw-node {
    position: static !important; display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center;
    width: 100%; padding: 15px 0; border-bottom: 1px solid var(--border);
    opacity: 1 !important; transform: none !important; text-align: left;
  }
  .sw-bub { position: static; margin: 0; width: 56px; height: 56px; transform: none !important; }
  .sw-bub svg { width: 27px; height: 27px; }
  .sw-label { position: static !important; transform: none !important; width: auto !important; text-align: left !important; }
  .tools { justify-content: flex-start !important; }
}

/* =======================================================================
   PRINT
   The page is a dark, animated, JavaScript-revealed document, and all three
   of those things print badly: a near-black background either burns a
   cartridge or comes out as a grey slab, and anything still waiting for its
   scroll-reveal prints as an empty rectangle. Someone printing this wants
   the CV, not the choreography.

   So: light paper, ink-cheap text, every reveal forced open, and the
   controls (nav, language menu, sort buttons, modals, the animated arm)
   dropped — a button is not information on paper. External references keep
   their URLs, because a printed link that only says "ORCID" is a dead end.
   ======================================================================= */
@media print {
  @page { margin: 14mm 12mm; }

  /* Ink first. The variables drive nearly every colour on the page, so
     redefining them here beats chasing individual rules. */
  :root {
    --bg: #fff; --bg-card: #fff; --bg-card2: #fff;
    --text: #111; --text-muted: #444; --border: #bbb;
  }
  html, body {
    background: #fff !important; color: #111 !important;
    font-size: 10.5pt; line-height: 1.42;
  }
  body * { background-image: none !important; box-shadow: none !important;
           text-shadow: none !important; }

  /* Chrome and controls: nothing here survives on paper.

     .btn is deliberately NOT in this list. The hero's ORCID link is styled
     as one, and hiding every .btn took the only durable identifier on the
     page with it — while the rule further down that prints link URLs was
     left aiming at an element that no longer existed. Only the call to
     action goes, since "Contact Me" cannot be clicked on paper. */
  nav, .nav-inner, .nav-toggle, .lang-switcher, .lang-menu,
  .hero-scroll-hint, .hero-arm, .map-placeholder, .contact-map,
  .pub-filters, .pub-sort, .pub-sort-btn, .pub-sort-label,
  .rmodal, .rmodal-backdrop, .btn-primary, .project-cta,
  footer .lang-grid { display: none !important; }

  /* What is left of a button on paper is its text and its address. */
  .btn, .btn-outline {
    border: 0 !important; padding: 0 !important; margin: 0 4mm 0 0 !important;
    font-weight: 600; display: inline !important;
  }

  /* Every scroll-reveal forced open. .print-in without .printed is the
     pre-animation state — on screen JS always removes it, but a print can
     be triggered before the observer has fired, and then whole sections go
     to paper blank. */
  .print-in, .print-in.printed, .is-in, .sw .sw-node, .sw .sw-tick,
  [class*="reveal"] {
    opacity: 1 !important; transform: none !important;
    clip-path: none !important; animation: none !important;
    transition: none !important;
  }
  .timeline-wrap .tl-nozzle { display: none !important; }
  .timeline-wrap .tl-fill { height: calc(100% - 12px) !important; }

  /* Keep units of meaning whole. A publication split across a page break is
     the one thing a reader of this document will actually curse at. */
  .pub-item, .timeline li, .project-card, .contact-item, .lang-card,
  .research-metrics { break-inside: avoid; page-break-inside: avoid; }
  section { break-before: auto; }
  h1, h2, h3, .section-title { break-after: avoid; page-break-after: avoid; }

  a { color: #111 !important; text-decoration: underline; }
  /* Spell out only the references worth chasing offline. Doing it for every
     link turns the prose into a wall of parentheses. */
  .pub-doi a[href]::after, .contact-item a[href^="http"]::after,
  .hero-links a[href^="http"]::after {
    content: " (" attr(href) ")"; font-size: 8.5pt; color: #444;
    word-break: break-all;
  }
}