/* ==========================================================================
   Layout — page chrome, containers, section rhythm.
   ========================================================================== */

/* --- Fixed chrome --------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 14px 16px;
  background: linear-gradient(var(--paper) 74%, transparent);
}

/* Spacer that keeps content clear of the fixed header. */
.header-spacer {
  height: 74px;
}

.site-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(12px, 2.2vw, 26px);
  padding: 8px clamp(16px, 3vw, 28px);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--wob);
  box-shadow: var(--sh);
  transform: rotate(calc(var(--tilt) * -0.6deg));
}

.mascot {
  position: fixed;
  top: 10px;
  left: 18px;
  z-index: 56;
  display: block;
  width: 56px;
  height: 56px;
  overflow: hidden;
  background: var(--card);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  box-shadow: var(--sh);
  animation: bob 3.4s ease-in-out infinite;
}

.mascot:hover {
  box-shadow: var(--sh-md);
}

.mascot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.theme-switch {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 56;
  display: flex;
  justify-content: flex-end;
}

/* The mascot collides with the nav pill on narrow viewports. */
@media (max-width: 900px) {
  .mascot {
    display: none;
  }
}

/* Below this the nav pill and the theme switch fight over the same corner, so
   both drop out of the fixed layer and stack at the top of the page instead. */
@media (max-width: 640px) {
  .site-header {
    position: static;
    padding-top: 4px;
    background: none;
  }

  .header-spacer {
    display: none;
  }

  .theme-switch {
    position: static;
    padding: 14px 16px 0;
  }

  .section {
    scroll-margin-top: 16px;
  }
}

/* --- Containers ----------------------------------------------------------- */

.wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 40px) 40px;
}

.wrap--narrow {
  max-width: 820px;
  padding: clamp(16px, 3vw, 28px) clamp(18px, 4vw, 40px) 60px;
}

/* --- Sections ------------------------------------------------------------- */

.section {
  scroll-margin-top: 96px;
  padding-top: clamp(48px, 7vw, 80px);
}

.section--first {
  padding-top: clamp(24px, 4vw, 44px);
}

.section__head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.section__title {
  font-size: clamp(32px, 4.4vw, 44px);
}

/* A dashed pencil rule that fills the space beside a heading. */
.rule {
  flex: 1;
  min-width: 30px;
  border-top: 2px dashed var(--ink);
  opacity: 0.4;
}

.rule--block {
  margin-top: 38px;
  border-top: 2px dashed var(--ink);
  opacity: 0.4;
}

.year-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 44px;
}

.year-head--first {
  margin-top: 34px;
}

.year-head__label {
  font-size: clamp(34px, 4.6vw, 46px);
  line-height: 1;
}

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

.hero {
  display: flex;
  flex-wrap: wrap-reverse;
  gap: clamp(24px, 4vw, 44px);
  align-items: flex-end;
}

.hero__text {
  flex: 1 1 320px;
  min-width: 280px;
}

.hero__name {
  font-size: clamp(44px, 7vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.5px;
}

.hero__lede {
  margin: 20px 0 0;
  font-size: clamp(17px, 1.9vw, 20px);
  max-width: 56ch;
}

.hero__lede + .hero__lede {
  margin-top: 14px;
}

.hero__portrait {
  position: relative;
  flex: 0 1 330px;
  min-width: 270px;
  align-self: flex-end;
}

/* --- Two-column entry (publications, talks) ------------------------------- */

.entry {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 20px;
}

.entry__media {
  position: relative;
  flex: 0 1 330px;
  min-width: 270px;
}

.entry__body {
  flex: 1 1 340px;
  min-width: 280px;
}

/* --- Figure grid on project pages ----------------------------------------- */

.figure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 26px;
}

.figure-caption {
  margin: 12px 0 0;
  text-align: center;
  font-size: 16px;
  color: var(--muted-fg);
}

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  border-top: 2px dashed var(--ink);
  margin-top: 20px;
}

.site-footer__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 26px clamp(18px, 4vw, 40px) 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: var(--muted-fg);
}