/* ==========================================================================
   COMPONENTS — discrete, reusable blocks.
   ========================================================================== */

/* --- Home hero ---------------------------------------------------------- */

.hero { padding-block: clamp(var(--space-xl), 8vw, var(--space-3xl)) var(--space-2xl); }

.hero__inner {
  display: grid;
  gap: clamp(var(--space-m), 4vw, var(--space-2xl));
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 48rem) {
  .hero__inner { grid-template-columns: 13rem minmax(0, 1fr); }
}

.hero__portrait {
  width: 100%;
  max-width: 13rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-m);
  background: var(--bg-tint);
  box-shadow: var(--shadow-md);
  filter: saturate(0.96);
}

.hero__name {
  font-size: var(--step-6);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.hero__name em {
  display: block;
  font-style: italic;
  font-weight: 300;
}

.hero__rule {
  width: 3.5rem;
  height: 2px;
  background: var(--highlight);
  border: 0;
  margin-block: var(--space-m) var(--space-s);
}

.hero__role {
  font-size: var(--step-1);
  font-family: var(--font-display);
  color: var(--text);
  margin-block-end: var(--space-3xs);
}

.hero__affiliation { color: var(--text-faint); font-size: var(--step--1); }

.hero__statement {
  margin-block-start: var(--space-m);
  max-width: 34rem;
}

/* --- Inline link row (email, Scholar, GitHub…) --------------------------- */

.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  list-style: none;
  margin: var(--space-m) 0 0;
  padding: 0;
}

.link-row__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--step--1);
  color: var(--text-muted);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.link-row__item:hover {
  border-color: var(--rule-strong);
  color: var(--text);
  transform: translateY(-1px);
}

.link-row__item svg { width: 0.95em; height: 0.95em; }

/* --- Research cards ----------------------------------------------------- */

.card-list {
  display: grid;
  gap: 0;
  border-block-start: 1px solid var(--rule);
}

.card {
  position: relative;
  display: grid;
  gap: var(--space-2xs) var(--space-m);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-m);
  border-block-end: 1px solid var(--rule);
  transition: background-color var(--dur) var(--ease);
}

@media (min-width: 48rem) {
  .card {
    grid-template-columns: 3rem minmax(0, 15rem) minmax(0, 1fr) auto;
    align-items: baseline;
    padding-inline: var(--space-s);
    margin-inline: calc(var(--space-s) * -1);
    border-radius: var(--radius-m);
  }
  .card:hover { background: var(--bg-tint); }
}

.card__index {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--text-faint);
  letter-spacing: 0.05em;
}

.card__title {
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.card__title a {
  color: var(--text);
  text-decoration: none;
}

/* Stretch the title's link across the whole row so the card is clickable. */
.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card:hover .card__title a { color: var(--accent); }

.card__summary {
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.55;
  max-width: 46ch;
}

.card__arrow {
  color: var(--text-faint);
  font-size: var(--step-0);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

.card:hover .card__arrow { transform: translateX(4px); color: var(--accent); }

/* --- Publications ------------------------------------------------------- */

.pub-year {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  color: var(--text-faint);
  padding-block-start: 0.35rem;
}

.pub-list { list-style: none; margin: 0; padding: 0; }

.pub {
  display: grid;
  gap: var(--space-3xs) var(--space-m);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-m);
  border-block-start: 1px solid var(--rule);
}

@media (min-width: 44rem) {
  .pub { grid-template-columns: 4rem minmax(0, 1fr); }
}

.pub__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

.pub__title a { color: var(--text); text-decoration: none; }
.pub__title a:hover { color: var(--accent); }

.pub__authors { font-size: var(--step--1); color: var(--text-muted); }

/* The site owner's own name, picked out of the author list. */
.pub__authors .self { color: var(--text); font-weight: 600; }

.pub__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin-block-start: var(--space-3xs);
  font-size: var(--step--1);
}

.pub__venue {
  font-weight: 600;
  color: var(--highlight);
  font-size: var(--step--1);
}

.pub__links { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

.pub__link {
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-faint);
  text-decoration: none;
  border-block-end: 1px solid var(--rule-strong);
}

.pub__link:hover { color: var(--accent); border-color: currentColor; }

/* --- Tags --------------------------------------------------------------- */

.tag {
  display: inline-block;
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  color: var(--text-faint);
  background: var(--bg-tint);
  border-radius: var(--radius-s);
  padding: 0.1em 0.5em;
  text-decoration: none;
}

a.tag:hover { color: var(--accent); background: var(--accent-soft); }

/* --- News --------------------------------------------------------------- */

.news-list { list-style: none; margin: 0; padding: 0; }

.news {
  display: grid;
  gap: var(--space-3xs) var(--space-m);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-s);
  border-block-end: 1px solid var(--rule);
  font-size: var(--step--1);
}

@media (min-width: 44rem) {
  .news { grid-template-columns: 7rem minmax(0, 1fr); align-items: baseline; }
}

.news__date {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--text-faint);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.news__body { color: var(--text-muted); }
.news__body strong { color: var(--text); font-weight: 600; }

/* --- Research page header ------------------------------------------------ */

.page-header {
  padding-block: clamp(var(--space-xl), 7vw, var(--space-2xl)) var(--space-l);
  border-block-end: 1px solid var(--rule);
}

.page-header__title {
  font-size: var(--step-5);
  margin-block: var(--space-2xs) var(--space-m);
}

.page-header__lede { max-width: 46ch; }

/* --- Key-idea panels ----------------------------------------------------- */

.panel {
  padding: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-sm);
}

.panel__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  margin-block-end: var(--space-2xs);
}

.panel__body { color: var(--text-muted); font-size: var(--step--1); line-height: 1.6; }

.panel__number {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--highlight);
  letter-spacing: 0.1em;
  display: block;
  margin-block-end: var(--space-2xs);
}

/* --- Question list (used on research pages) ------------------------------ */

.question-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: q;
}

.question-list li {
  counter-increment: q;
  position: relative;
  padding-inline-start: 2.4rem;
  padding-block: var(--space-xs);
  border-block-end: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--text);
  font-weight: 400;
}

.question-list li::before {
  content: counter(q, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: calc(var(--space-xs) + 0.45em);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--highlight);
  letter-spacing: 0.06em;
}

/* --- Pager (prev / next research topic) ---------------------------------- */

.pager {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin-block-start: var(--space-xl);
  border-block-start: 1px solid var(--rule);
  padding-block-start: var(--space-m);
}

.pager__item {
  display: block;
  padding: var(--space-s);
  border: 1px solid var(--rule);
  border-radius: var(--radius-m);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

.pager__item:hover { border-color: var(--rule-strong); background: var(--bg-tint); }
.pager__item--next { text-align: right; }
.pager__label { display: block; margin-block-end: var(--space-3xs); }
.pager__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--text);
  font-weight: 500;
}

/* --- Callout ------------------------------------------------------------- */

.callout {
  border-inline-start: 2px solid var(--highlight);
  background: var(--bg-tint);
  padding: var(--space-m);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
}

.callout__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  margin-block-end: var(--space-2xs);
}

/* --- Definition-style facts list ----------------------------------------- */

.facts { display: grid; gap: 0; margin: 0; }

.facts__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xs) var(--space-m);
  padding-block: var(--space-xs);
  border-block-end: 1px solid var(--rule);
}

@media (min-width: 34rem) {
  .facts__row { grid-template-columns: 8.5rem minmax(0, 1fr); align-items: baseline; }
}

.facts__term {
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-faint);
  margin: 0;
}

.facts__value { margin: 0; color: var(--text-muted); font-size: var(--step--1); }

/* --- Empty / placeholder state (RSC) -------------------------------------- */

.placeholder {
  display: grid;
  place-items: center;
  text-align: center;
  gap: var(--space-s);
  padding-block: clamp(var(--space-2xl), 14vh, var(--space-3xl));
}

.placeholder__mark {
  font-family: var(--font-display);
  font-size: var(--step-6);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--rule-strong);
  line-height: 1;
}

/* --- Page intro (the standard head of every page) ------------------------ */

.page-intro {
  padding-block: var(--space-l) var(--space-m);
}

.page-intro__title {
  font-size: var(--step-5);
  letter-spacing: -0.03em;
}

.page-intro__lede {
  margin-block-start: var(--space-m);
  max-width: 46ch;
}

.page-intro__rule {
  width: 3.5rem;
  height: 2px;
  background: var(--highlight);
  border: 0;
  margin-block: var(--space-m) 0;
}

/* --- Empty-content marker ------------------------------------------------
   Shown on pages with no content yet. Delete the element to remove it.
   ------------------------------------------------------------------------ */

.placeholder-note {
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  color: var(--text-faint);
  font-size: var(--step--1);
  font-style: italic;
  background: color-mix(in srgb, var(--bg-tint) 55%, transparent);
}

.placeholder-note code {
  font-style: normal;
  background: var(--bg-tint);
}

/* The name, set plainly — used for the <h1> on the home page so it matches
   the wordmark rather than competing with it. */
.page-intro__title--plain {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step-4);
  letter-spacing: -0.02em;
}

/* --- Profile block --------------------------------------------------------
   Photo on the left; name, title, affiliation and profile links on the right.
   Stacks on narrow screens.
   ------------------------------------------------------------------------- */

/* Always two columns — the photo shrinks rather than the layout stacking. */
.profile {
  display: grid;
  gap: clamp(0.7rem, 3vw, var(--space-l));
  grid-template-columns: clamp(9rem, 38vw, 12.5rem) minmax(0, 1fr);
  align-items: center;   /* text block centred against the photo */
}

.profile__photo {
  width: 100%;
  /* 1385 * 0.85 = 1177: shows the top 85% of the photo, so the crop
     always comes off the bottom (chest) and never off the head. */
  aspect-ratio: 1030 / 1177;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-l);
  background: var(--bg-tint);
}

/* Nudge the text block down from the top of the photo. Raise or lower the
   whole name / title / university group by changing this one value. */
/* Centred against the photo, so no top offset is needed. */
.profile__body { padding-block-start: 0; }

.profile__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(0.9rem, 0.55rem + 2.6vw, var(--step-2));
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.profile__surname { color: var(--text-muted); }

.profile__title {
  margin-block-start: 0.15rem;
  font-size: clamp(0.72rem, 0.45rem + 1.6vw, var(--step-0));
  line-height: 1.28;
  color: var(--text);
}

/* Two role lines in a row sit together, with no gap between them. */
.profile__title + .profile__title { margin-block-start: 0; }

.profile__role { color: var(--text-muted); }

.profile__org {
  font-size: clamp(0.72rem, 0.45rem + 1.6vw, var(--step-0));
  line-height: 1.28;
  color: var(--text-muted);
}

.profile__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) calc(var(--space-2xs) * 0.85);
  list-style: none;
  margin: clamp(0.2rem, -0.35rem + 2.6vw, 1rem) 0 0;
  padding: 0;
}

.profile__links {
  /* The button size, fluid: small on phones, 0.7 of the original on desktop. */
  --link-size: clamp(1.15rem, 0.55rem + 3.1vw, 1.61rem);
}

.profile__link {
  display: inline-grid;
  place-items: center;
  width: var(--link-size);
  height: var(--link-size);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--text-muted);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.profile__link:hover {
  border-color: var(--rule-strong);
  color: var(--text);
  background: var(--surface);
  transform: translateY(-1px);
}

/* Contact: label on one line, address on the next. */
.profile__contact {
  margin-block-start: clamp(0.5rem, -0.5rem + 2.8vw, 0.95rem);
  font-size: clamp(0.62rem, 0.4rem + 1.4vw, var(--step--1));
  line-height: 1.3;
}

.profile__contact-label {
  display: block;
  color: var(--text-faint);
}

.profile__contact-email {
  display: block;
  /* Never push the page wider than the screen: on a viewport narrower than any
     real phone, the address wraps instead of overflowing. */
  overflow-wrap: break-word;
  color: var(--text);
  text-decoration: none;
  border-block-end: 1px solid var(--rule-strong);
  width: fit-content;
}

.profile__contact-email:hover {
  color: var(--accent);
  border-color: currentColor;
}

.profile__link svg {
  width: calc(var(--link-size) * 0.456);
  height: calc(var(--link-size) * 0.456);
}


/* On the very narrowest phones the text column is unavoidably taller than the
   photo's natural height. Let the photo stretch to match the row instead, so
   it can never be overflowed at the top or bottom. It crops a little more. */
@media (max-width: 21.5rem) {
  .profile {
    align-items: stretch;
    /* A narrower photo here leaves the text column wide enough to keep the
       email address on one line. The photo grows taller to compensate. */
    grid-template-columns: 8rem minmax(0, 1fr);
  }

  .profile__photo {
    height: 100%;
    aspect-ratio: auto;
  }
}