/* ============================================================
   Homepage styles
   Layout inspired by Jon Barron's academic website (jonbarron.info)
   Palette, base type, links and the toggle button come from the
   shared assets/css/theme.css (load it before this file).
   ============================================================ */

/* ── Page shell ──────────────────────────────────────────── */
.page {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 20px 32px;
}

/* Light/dark toggle in the top-right corner */
.page > .theme-toggle {
  position: absolute;
  top: 16px;
  right: 20px;
}

/* ── Intro: name, bio, links, portrait ───────────────────── */
.intro {
  display: flex;
  align-items: center;
  gap: 40px;
}

.intro-text {
  flex: 1 1 auto;
  min-width: 0;
}

.name {
  margin: 0 0 20px;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  color: var(--text);
}

.intro-text p {
  margin: 0 0 14px;
}

.intro-links {
  margin-top: 22px !important;
  text-align: center;
}

.intro-links .sep {
  margin: 0 0.45em;
  color: var(--faint);
}

.portrait {
  flex: 0 0 auto;
  width: 34%;
  max-width: 230px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--ring);
}

/* ── Section headings ────────────────────────────────────── */
.section-title {
  margin: 48px 0 10px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--text);
}

.section-intro {
  margin: 0 0 8px;
}

.subsection-title {
  margin: 28px 0 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Publication entries ─────────────────────────────────── */
.pub {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 20px 0;
}

/* Titles read as text and pick up the accent on hover */
.pub-title {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
}

.pub-title:hover { color: var(--link); }

.pub p { margin: 0; }

.pub-authors .me {
  font-weight: 700;
  color: var(--text);
}

.pub-authors .note {
  white-space: nowrap;
  font-size: 0.88em;
  color: var(--muted);
}

.pub-venue { margin-top: 2px !important; }

.pub-links { margin-top: 2px !important; }

.pub-links .sep {
  margin: 0 0.35em;
  color: var(--faint);
}

.pub-tldr {
  margin-top: 8px !important;
  color: var(--muted);
}

/* ── Thumbnails ──────────────────────────────────────────── */
.pub-thumb {
  position: relative;
  width: 160px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bg-subtle);
  box-shadow: 0 0 0 1px var(--ring);
}

.pub-thumb img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Non-square figures (e.g. plots): show the whole image instead of cropping. */
.pub-thumb.plot {
  background: #fff;
}

.pub-thumb.plot img {
  object-fit: contain;
}

/* Before/after comparison slider (driven by assets/js/compare-slider.js).
   --pos is the divider position: the top image shows left of it. */
.compare {
  --pos: 50%;
  cursor: ew-resize;
  touch-action: pan-y;          /* vertical scrolling still works on touch */
  user-select: none;
  -webkit-user-select: none;
}

.compare img {
  pointer-events: none;
  -webkit-user-drag: none;
}

.compare .compare-top {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

/* Keyboard / screen-reader control; pointer input is handled in JS */
.compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.compare:focus-within {
  box-shadow: 0 0 0 2px var(--link);
}

.compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.compare-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  transition: border-color 0.15s, color 0.15s;
}

.compare-knob svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.compare:hover .compare-knob,
.compare.dragging .compare-knob,
.compare:focus-within .compare-knob {
  border-color: var(--link);
  color: var(--link);
}

.compare-label {
  position: absolute;
  z-index: 1;                   /* above the divider line */
  bottom: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(8, 9, 10, 0.55);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.5;
  pointer-events: none;
}

.compare-label.left  { left: 6px; }
.compare-label.right { right: 6px; }

/* Text tile used when a paper has no thumbnail image yet.
   The faint radial rays echo sparse-view CT streaks. */
.pub-thumb.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  color: var(--text-body);
  background:
    radial-gradient(circle at 50% 50%, var(--bg-subtle) 0 30%, transparent 62%),
    repeating-conic-gradient(from 0deg at 50% 50%,
      var(--tile-line) 0deg, transparent 0.9deg, transparent 11.25deg),
    var(--bg-subtle);
}

.tile-venue {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}

.tile-year {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ── Footer ──────────────────────────────────────────────── */
/* Items sit at both ends; a single item sits on the right */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: 40px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--muted);
}

.site-footer > :only-child { margin-left: auto; }

.site-footer a {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 2px;
}

.site-footer a:hover { color: var(--text); }

/* ── Legal pages (privacy policy) ────────────────────────── */
/* Narrower column: long-form text reads better at ~80 chars */
.page.legal {
  max-width: 720px;
  padding-top: 76px;
}

/* Back link in the top-left, level with the toggle */
.page > .back-link {
  position: absolute;
  top: 16px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  font-size: 14px;
  color: var(--muted);
}

.page > .back-link:hover { color: var(--text); }

.back-link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.legal-title {
  margin: 0;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--text);
}

.legal-updated {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.legal h2 {
  margin: 32px 0 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.legal p { margin: 0 0 10px; }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .page { padding: 32px 16px 24px; }

  .page > .theme-toggle { top: 12px; right: 16px; }

  .page > .back-link { top: 12px; left: 16px; }

  .page.legal { padding-top: 64px; }

  .legal-title { font-size: 28px; }

  .intro {
    flex-direction: column-reverse;
    gap: 22px;
  }

  .portrait { width: 150px; }

  .name { font-size: 28px; margin-bottom: 16px; }

  .section-title { margin-top: 36px; }

  .pub {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 16px 0;
  }

  .pub-thumb { width: 96px; }

  .compare-label { display: none; }

  .compare-knob { width: 18px; height: 18px; }

  .compare-knob svg { width: 10px; height: 10px; }

  .pub-thumb.tile { padding: 6px; }

  .tile-venue { font-size: 11px; }

  .tile-year { font-size: 10px; }

  .pub-title { font-size: 15px; }
}