:root {
  --color-bg: #ffffff;
  --color-text: #1e1c19;
  --color-muted: #5d6470;
  --color-accent: #1f3a5f;
  --color-border: #e2e4e8;
  --content-width: 50rem;
}

* { box-sizing: border-box; }
html {
  color-scheme: light;
  /* Without this, Mobile Safari auto-boosts paragraph/list text size
     based on perceived column width, independently of any CSS here,
     and inconsistently between portrait and landscape. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Georgia, serif;
  line-height: 1.65;
  font-size: 1.2rem;
}

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { text-decoration-thickness: 2px; }

header.site-header {
  padding: 3rem 0 1.25rem;
}
header.site-header .header-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 0.75rem;
}
header.site-header .header-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem 1rem;
  margin: 0 0 0.85rem;
}
header.site-header h1 {
  font-size: 1.6rem;
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.04em;
}
header.site-header p.tagline {
  margin: 0;
  color: var(--color-muted);
  font-size: 1.2rem;
  font-style: italic;
  text-align: right;
}
header.site-header p.tagline .kern-tight {
  margin-right: -0.01em;
}

nav.site-nav {
  display: flex;
  gap: 1.75rem;
  font-family: inherit;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  padding: 0;
}
nav.site-nav a {
  color: var(--color-text);
  text-decoration: none;
}
nav.site-nav a:hover,
nav.site-nav a[aria-current="page"] {
  color: var(--color-accent);
}

main {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 0.75rem 4rem;
}

/* Landing-page layout: the bio is a normal centred --content-width column,
   identical to main on every other page - so the central text matches the
   research/publications width and lines up under the centred header/footer.
   The sidebar is lifted out of flow into the left gutter (the empty margin
   left of the centred column), so it sits beside the bio without shifting
   it off-centre. position:relative makes main the sidebar's containing
   block. Below 86rem the gutter is too narrow and the sidebar stacks. */
main.with-sidebar {
  position: relative;
}

main h2 {
  font-size: 1.45rem;
  font-weight: 400;
  margin-top: 2.5rem;
  margin-bottom: 0.85rem;
  color: var(--color-accent);
}
main h2:first-child { margin-top: 0; }
main p {
  margin: 0 0 1.1rem;
  text-align: justify;
}
ol.pub-list {
  list-style: none;
  counter-reset: pub 24;
  margin: 0;
  padding: 0;
}
ol.pub-list li {
  counter-increment: pub -1;
  position: relative;
  margin: 0 0 1.1rem;
  text-align: justify;
}
ol.pub-list li::before {
  content: counter(pub);
  position: absolute;
  right: 100%;
  margin-right: 0.75rem;
  min-width: 1.5rem;
  text-align: right;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
ol.pub-list li strong {
  font-weight: 400;
}

figure.portrait {
  float: right;
  margin: 0 0 1rem 2rem;
  width: 12rem;
}
figure.portrait img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 50%;
}
figure.portrait figcaption { display: none; }

aside.sidebar {
  font-size: 1rem;
}
/* Sidebar sits in the left gutter, anchored by its right edge to the bio's
   left edge (right:100%), so the divider keeps a fixed gap from the bio no
   matter the sidebar's own width. width holds the affiliation on two lines;
   margin-right is the divider-to-bio gap, padding-right the text-to-divider
   gap; top nudges its first line level with the bio's opening heading. */
main.with-sidebar aside.sidebar {
  position: absolute;
  top: 0.35rem;
  right: 100%;
  width: 16rem;
  margin-right: 1.75rem;
  padding-right: 0.75rem;
  border-right: 1px solid var(--color-border);
}
aside.sidebar h2 {
  margin-top: 0;
}
aside.sidebar .sidebar-block {
  margin-bottom: 1.75rem;
}
aside.sidebar .sidebar-block:last-child {
  margin-bottom: 0;
}
aside.sidebar h3 {
  font-size: 0.82rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin: 0 0 0.5rem;
}
aside.sidebar p {
  margin: 0 0 0.4rem;
  text-align: left;
}
aside.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
aside.sidebar ul li {
  margin-bottom: 0.4rem;
}

.research-area h3 {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--color-accent);
  margin: 0 0 0.35rem;
}

footer.site-footer {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 1.5rem 0.75rem 3rem;
  color: var(--color-muted);
  font-size: 0.88rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
footer.site-footer p {
  margin: 0;
}

/* Tablet tier (e.g. iPad landscape/portrait, ~48-86rem): the desktop
   layout hangs the sidebar in a gutter outside the centered header/main/
   footer column, which needs symmetric empty space on both sides and so
   needs a very wide viewport. A previous attempt tried to keep the
   sidebar beside the bio here by giving main.with-sidebar its own wider
   flex-based width — but header/footer still centered on the narrower
   shared --content-width, so the bio column no longer lined up under the
   header. Simplest fix: let the sidebar drop below the bio (like it
   already does below 60rem) across this whole tier too, and instead
   widen the *shared* --content-width variable so header/main/footer all
   still line up (since they all read from the same variable) while using
   more of the page width now that nothing needs to sit beside the bio. */
@media (min-width: 60rem) and (max-width: 86rem) {
  :root {
    --content-width: 56rem;
  }
}

/* Below this width the gutter is too narrow for the sidebar, so it drops
   out of the gutter and back into normal flow beneath the bio. Page-edge
   padding also widens to 2rem here (it was fine at 0.75rem on laptop) -
   narrower let the publication-list numbers sit almost off the edge on iPad
   portrait, where main spans the full viewport width. */
@media (max-width: 86rem) {
  main.with-sidebar aside.sidebar {
    position: static;
    width: auto;
    margin-right: 0;
    margin-top: 2.5rem;
    padding-right: 0;
    padding-top: 1.75rem;
    border-right: none;
    border-top: 1px solid var(--color-border);
  }
  header.site-header .header-inner,
  main,
  footer.site-footer {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Phone tier: shrink text, stack the header, shrink the portrait so body
   text has room, and pull the publication numbers back inside the padded
   column so they don't hang off the edge of the viewport. Matched on
   max-width for portrait phones, or (short viewport height + landscape)
   for the same phone rotated — a phone in landscape is much wider than
   40rem but still a phone, not a tablet (tablets are much taller in
   landscape too), so without the height clause it fell through to
   desktop sizing and text ended up bigger in landscape than portrait. */
@media (max-width: 40rem), (max-height: 34rem) and (orientation: landscape) {
  body {
    font-size: 1.1rem;
  }
  header.site-header .header-row {
    flex-direction: column;
    align-items: flex-start;
  }
  header.site-header p.tagline {
    text-align: left;
    font-size: 0.95rem;
  }
  ol.pub-list {
    padding-left: 2rem;
  }
  ol.pub-list li::before {
    /* right: 100% (inherited) keeps the number inside the reserved
       padding-left gutter above, instead of left: 0 which put it on
       top of the title text */
    margin-right: 0.5rem;
    width: 1.25rem;
    min-width: 0;
  }
}

/* Phone portrait only: not enough width for the photo to float beside
   wrapped text and still leave a readable measure, so it sits as its own
   block between the heading and the bio text instead (falls out of DOM
   order already, no HTML change needed) and can be bigger since it's not
   competing with the text column for width. */
@media (max-width: 40rem) and (orientation: portrait) {
  figure.portrait {
    float: none;
    width: 11rem;
    margin: 0 auto 1.25rem;
  }
}

/* Phone landscape: back to floated/wrapped like desktop, just smaller -
   there's more width here than portrait, so the text has room beside it. */
@media (max-height: 34rem) and (orientation: landscape) {
  figure.portrait {
    width: 11rem;
    margin: 0 0 0.75rem 1.5rem;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #14161a;
    --color-text: #e6e2d8;
    --color-muted: #9aa1ab;
    --color-accent: #7fa8d9;
    --color-border: #2c3036;
  }
  html { color-scheme: dark; }
}