/* =========================================================================
   styles.css — the single source of truth for the whole site.
   Structure: (1) tokens  (2) reset  (3) base  (4) layout/nav
              (5) hero  (6) sections  (7) footer  (8) responsive + a11y
   To restyle the site, you almost always edit only the TOKENS in section 1.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS
   These are the dials. Everything below REFERENCES them and never hard-codes
   a colour or size. Change the palette here once and it propagates everywhere
   — e.g. your "slate blue not purple" lives entirely in --color-bg.
   ------------------------------------------------------------------------- */
:root {
  /* Palette — a soft, desaturated slate-blue wash, cool near-black ink */
  --color-bg:        #dce3ee;   /* light slate blue — the page wash        */
  --color-surface:   #eef1f7;   /* faint panel tint (headshot frame, etc.) */
  --color-ink:       #1f2733;   /* body text — near-black with a cool cast */
  --color-muted:     #55606f;   /* secondary text, captions                */
  --color-link:      #3a5878;   /* links — a deeper slate, harmonised      */
  --color-link-hover:#22405f;   /* link on hover/focus                     */
  --color-rule:      #c1cad9;   /* hairline dividers                       */
  --color-accent:    #1f5aa6;   /* vivid blue for sub-headings (WORKING PAPERS…) */

  /* Dark navigation bar — a near-black slate (not pure #000) so it reads as
     "black" while staying in the blue family and not clashing with the wash. */
  --color-nav-bg:    #1b232e;   /* the bar itself                          */
  --color-nav-ink:   #f4f6fa;   /* brand + hovered links (near-white)      */
  --color-nav-dim:   #b9c2d0;   /* the right-hand links at rest, dimmed     */

  /* Type — a scholarly serif for reading, a clean sans for nav/labels.
     Both are system stacks: zero network cost, no flash of unstyled text.
     To adopt a webfont later: add one <link> in the HTML, then swap the
     first name in the relevant stack below. Nothing else changes. */
  --font-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-sans:  system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Type scale — a modest, deliberate progression (~1.2 ratio) */
  --size-xs:   0.82rem;
  --size-sm:   0.92rem;
  --size-base: 1.05rem;
  --size-lg:   1.3rem;
  --size-xl:   1.9rem;

  /* Spacing rhythm — one unit, its multiples used throughout */
  --step:      1.5rem;

  /* Layout — the "measure": the max line length for comfortable reading.
     Widened to 48rem to match Dafna's roomier column and reduce scrolling.
     (Trade-off: lines run longer; nudge this down a rem or two if they feel
     too long to track.) */
  --measure:      48rem;   /* the body reading column (Research, Teaching, …) */
  --measure-wide: 58rem;   /* the roomier hero + nav bar, so the bio isn't cramped */
  --nav-h:        4rem;    /* nav height; also the anchor offset (see §6) */
}

/* -------------------------------------------------------------------------
   2. MICRO-RESET
   Neutralises the browser's default styles so they don't fight our rules.
   border-box makes width include padding — far more predictable maths.
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* -------------------------------------------------------------------------
   3. BASE
   ------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: var(--size-base);
  line-height: 1.65;               /* generous leading aids long-form reading */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--color-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;   /* underline drawn only on hover: */
  transition: color 0.15s ease, border-color 0.15s ease;
}
a:hover, a:focus-visible {
  color: var(--color-link-hover);
  border-bottom-color: currentColor;      /* subtle, deliberate underline    */
}

h1, h2 { font-weight: 600; line-height: 1.2; }

/* -------------------------------------------------------------------------
   4. LAYOUT + NAVIGATION
   The nav is STICKY. Rationale: on a single-page site the whole point of the
   section links is to jump around; if the nav scrolled away it would be
   reachable only from the very top. Sticky keeps it perpetually usable.

   Structure: .site-nav is the full-width DARK BAND (its background bleeds edge
   to edge). .nav-inner holds the content and is constrained to the same
   --measure as the body, with the same padding — so the brand's left edge and
   the links' right edge line up exactly with the text column below.
   ------------------------------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-nav-bg);        /* the offset dark bar */
}
.nav-inner {
  max-width: var(--measure-wide);
  margin-inline: auto;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--step);
  padding: 0 var(--step);
  font-family: var(--font-sans);
  font-size: var(--size-sm);
}
.nav-inner .brand {
  font-size: 1.5rem;                      /* several steps larger than the links */
  font-weight: 600;                       /* kept bold, as you liked */
  color: var(--color-nav-ink);            /* full near-white → most prominent */
  margin-right: auto;                     /* pushes the section links to the right */
  border-bottom: none;
}
.nav-inner a {
  color: var(--color-nav-dim);            /* dimmed at rest so the brand dominates */
  border-bottom: none;
}
.nav-inner a:hover, .nav-inner a:focus-visible { color: var(--color-nav-ink); }

/* The sections wrapper now matches the WIDER hero width, so its left edge lines
   up with the bio text and the section dividers can run the full width. The
   reading text inside each section is capped separately (see §6) and left-
   aligned, so lines stay comfortable while the rule above them spans full. */
.wrap {
  max-width: var(--measure-wide);
  margin-inline: auto;
  padding: 0 var(--step) calc(var(--step) * 2);
}

/* -------------------------------------------------------------------------
   5. HERO
   Intro prose beside a modest headshot on wide screens; stacked on narrow.
   ------------------------------------------------------------------------- */
.hero {
  max-width: var(--measure-wide);         /* wider than the reading column below */
  margin-inline: auto;
  padding: calc(var(--step) * 1.35) var(--step) 0;   /* less top gap under the nav */
  display: flex;
  gap: calc(var(--step) * 1.5);
  align-items: flex-start;
}
.hero__body { flex: 1 1 auto; line-height: 1.55; }   /* a touch tighter than body's 1.65 */
.hero__figure { flex: 0 0 15rem; margin-top: 0.4rem; }
.hero__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  background: var(--color-surface);       /* graceful placeholder if the file is absent */
  border: 1px solid var(--color-rule);
}
.hero__figure figcaption {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  color: var(--color-muted);
  margin-top: 0.5rem;
  text-align: center;
}

.greeting { font-size: var(--size-xl); margin-bottom: calc(var(--step) * 0.8); }

/* Job-market status — a small sans line, weighted and coloured so a skimming
   reader catches it instantly without it shouting. */
.status {
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  font-weight: 600;
  color: var(--color-link);
  margin-bottom: calc(var(--step) * 0.8);
}

/* Working papers — title on its own line, an optional JMP tag, then a muted
   abstract. Distinct from .reflist because these need a description block. */
.worklist { list-style: none; padding: 0; margin: 0; }
.worklist > li { margin-bottom: calc(var(--step) * 1.1); }
.worklist .title { font-weight: 600; font-size: var(--size-sm); }
.worklist .jmp {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-link);
  white-space: nowrap;
  margin-left: 0.35rem;
}
.worklist p {
  font-size: var(--size-sm);
  color: var(--color-muted);
  margin-top: 0.4rem;
}
.worklist li.placeholder { font-style: italic; color: var(--color-muted); }

/* Prose rhythm in the hero: a little tighter than the sections below. */
.prose > p { margin-bottom: calc(var(--step) * 0.75); }
.prose ol {
  margin: 0 0 calc(var(--step) * 0.75);
  padding-left: 1.4rem;
}
.prose ol li { margin-bottom: 0.5rem; padding-left: 0.25rem; }

/* Inline contact row under the intro */
.contact {
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  color: var(--color-muted);
  margin-top: var(--step);
}
.contact a { color: var(--color-link); }

/* -------------------------------------------------------------------------
   6. CONTENT SECTIONS (Research / Teaching / Personal)
   scroll-margin-top offsets the sticky nav so a jumped-to heading isn't hidden
   underneath it. Without this, clicking "Research" would tuck the H2 behind
   the bar. This is the single most-forgotten detail in sticky-nav pages.
   ------------------------------------------------------------------------- */
.section {
  padding-top: calc(var(--step) * 2);
  margin-top: calc(var(--step) * 2);
  border-top: 1px solid var(--color-rule);
  scroll-margin-top: calc(var(--nav-h) + var(--step));
}
.section h2 {
  font-size: 1.5rem;                       /* a step up so section titles read clearly */
  margin-bottom: var(--step);
}
.section p { margin-bottom: var(--step); }

/* The divider (the .section border-top) spans the full wrapper width, but the
   READING content is capped and left-aligned so lines stay comfortable while
   the rule above them runs full width. */
.section p,
.section ol,
.section ul,
.section blockquote,
.section .photos {
  max-width: var(--measure);
}

/* A quiet placeholder style for sections whose content you'll add later. */
.placeholder { color: var(--color-muted); font-style: italic; }

/* Sub-heading within a section ("Publications", "Conference Presentations").
   A small sans eyebrow — it labels a genuine grouping, so it earns its place. */
.section h3 {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: calc(var(--step) * 1.4) 0 calc(var(--step) * 0.75);
}
.section h3:first-of-type { margin-top: var(--step); }

/* Reference list — publications, talks, service. One reusable class, three uses.
   Hanging indent: continuation lines tuck under the first, so each entry reads
   as a discrete, scannable block the way a printed bibliography does. */
.reflist { list-style: none; padding: 0; margin: 0; }
.reflist li {
  font-size: var(--size-sm);
  line-height: 1.5;
  margin-bottom: calc(var(--step) * 0.8);
  padding-left: 1.5em;
  text-indent: -1.5em;
}
.reflist strong { font-weight: 600; }        /* your name, made scannable */
.reflist em { color: var(--color-muted); }   /* venue, quietly de-emphasised */

/* Testimonial — a quiet left rule instead of quotation-mark ornament. The rule
   is a token colour, so quotes stay visually tied to the rest of the palette. */
.quote {
  margin: 0 0 calc(var(--step) * 1.2);
  padding-left: var(--step);
  border-left: 3px solid var(--color-rule);
  font-size: var(--size-sm);
  line-height: 1.6;
}
.quote p { margin: 0; }
.quote em { font-style: italic; }            /* the emphasis the writer asked for */
.quote .attr {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  color: var(--color-muted);
}

/* Photo grid — the columns auto-fit and wrap: two side by side on a wide
   screen, stacked on a phone, with no media query needed. The min() guard
   lets a single column shrink below 15rem rather than overflow a narrow view. */
.photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--step);
  margin-top: calc(var(--step) * 1.2);
}
.photos figure { margin: 0; }
.photos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--color-surface);      /* tinted placeholder until the file exists */
  border: 1px solid var(--color-rule);
}
.photos figcaption {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  color: var(--color-muted);
  margin-top: 0.4rem;
}

/* -------------------------------------------------------------------------
   7. FOOTER
   ------------------------------------------------------------------------- */
.site-footer {
  margin-top: calc(var(--step) * 3);
  padding-top: var(--step);
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  color: var(--color-muted);
}

/* -------------------------------------------------------------------------
   8. RESPONSIVE + ACCESSIBILITY
   ------------------------------------------------------------------------- */
@media (max-width: 34rem) {
  .hero { flex-direction: column-reverse; }   /* photo above prose on phones */
  .hero__figure { flex-basis: auto; align-self: flex-start; width: 12rem; }
  .greeting { font-size: var(--size-lg); }

  /* Let the nav wrap to two rows instead of overflowing: the brand claims a
     full row (flex-basis:100%), so the section links fall neatly beneath it. */
  .nav-inner {
    height: auto;
    flex-wrap: wrap;
    gap: 0.4rem calc(var(--step) * 0.9);
    padding: 0.7rem var(--step);
  }
  .nav-inner .brand { flex-basis: 100%; margin-right: 0; font-size: 1.35rem; }
}

/* Honour users who ask the OS to reduce motion: kill smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a { transition: none; }
}