/* ==========================================================================
   PETER KRAUSE — SITE STYLESHEET
   ==========================================================================

   This is the ONLY stylesheet for the whole site. Every page uses it.

   HOW TO CHANGE THE LOOK OF THE SITE
   ----------------------------------
   Everything you are likely to want to change lives in the block below,
   between "SETTINGS — START" and "SETTINGS — END".

   You do NOT need to read or understand anything after that block.
   Change a value between the colon and the semicolon, save the file,
   then refresh your browser.

   Example — to make the highlight colour navy instead of brick red,
   change this one line:

       --accent: #b8442f;      becomes      --accent: #1f3a68;

   ========================================================================== */


/* ==========================================================================
   SETTINGS — START.  Edit the values here. Keep the semicolons.
   ========================================================================== */

:root {

   /* --- COLOURS -----------------------------------------------------------
      Colours are written as "hex codes" — a # followed by 6 characters.
      You can pick new ones at https://htmlcolorcodes.com and paste them in.
      Changing just the first two lines re-themes the entire site.          */

   --accent:       #b8442f;   /* the main highlight colour — buttons, links, underlines */
   --accent-dark:  #8e3222;   /* a darker version of the highlight — used on button hover */

   --ink:          #17181c;   /* main text colour (near-black) */
   --ink-soft:     #5a5e66;   /* lighter grey text — descriptions, dates, captions */
   --ink-faint:    #8c9099;   /* faintest grey — small labels above headings */

   --paper:        #ffffff;   /* the normal page background */
   --paper-warm:   #f7f5f2;   /* the soft off-white used on alternating stripes */
   --paper-dark:   #17181c;   /* the dark background used on the footer and dark sections */

   --line:         #e4e0da;   /* the colour of thin dividing lines and card borders */


   /* --- FONTS -------------------------------------------------------------
      These use fonts already installed on the reader's computer, so the site
      loads instantly and works with no internet connection.
      To change the typeface, replace the FIRST name in the list.
      Safe alternatives: Georgia, "Times New Roman", Verdana, Tahoma.      */

   --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --font-head: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

   --text-size:    1.0625rem; /* normal paragraph size (1rem = 16px, so this is 17px) */
   --head-weight:  600;       /* how bold headings are. 400 = normal, 600 = semi-bold, 700 = bold */


   /* --- SPACING & WIDTH ---------------------------------------------------
      Add "px" after any number you change here.                           */

   --page-width:     1180px;  /* how wide the content can get on a big screen */
   --page-narrow:    760px;   /* width used for long blocks of reading text */
   --gutter:         28px;    /* space between the content and the screen edge */
   --section-space:  110px;   /* vertical space above and below each section */
   --card-gap:       28px;    /* space between cards in a grid */
   --radius:         6px;     /* how rounded corners are. 0 = square corners */
}

/* ==========================================================================
   SETTINGS — END.  You can stop reading here.
   Everything below this line is layout machinery — best left alone.
   ========================================================================== */




/* --------------------------------------------------------------------------
   1. BASE / RESET
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-size);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: var(--head-weight);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.75rem, 7vw, 5.25rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }

::selection { background: var(--accent); color: #fff; }

/* Visible keyboard focus ring — do not remove, it is what makes the site
   navigable without a mouse. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Text that is read aloud by screen readers but not shown on screen. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 200;
  background: var(--accent); color: #fff;
  padding: 12px 20px; border-radius: var(--radius);
  font-weight: 600; text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; }


/* --------------------------------------------------------------------------
   2. LAYOUT HELPERS
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: calc(var(--page-narrow) + var(--gutter) * 2); }

.section { padding-block: var(--section-space); }
.section--tight { padding-block: calc(var(--section-space) * 0.6); }
.section--warm { background: var(--paper-warm); }
.section--dark { background: var(--paper-dark); color: #fff; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .section-label { color: rgba(255,255,255,.55); }
.section--dark .lede, .section--dark p, .section--dark .topic-list li { color: rgba(255,255,255,.78); }

/* Small uppercase label that sits above a section heading. */
.section-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.1rem;
}

.section-head { max-width: 720px; margin-bottom: 2rem; }
.section-head .lede { margin-top: 1.25rem; }

/* Use when the heading and lede need the section's full width instead of
   the standard 720px cap, e.g. so a longer heading stays on one line. */
.section-head--wide { max-width: none; }

/* A small, muted one-line key/legend under a heading (e.g. the RA/URF/
   term abbreviations on the team page). Deliberately not .lede-sized,
   so a short line of abbreviations doesn't wrap unnecessarily. */
.legend {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  margin-top: 0.75rem;
  white-space: nowrap;
}

.lede {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.rule { height: 1px; background: var(--line); border: 0; margin: 4rem 0; }

/* A row of buttons. */
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2rem; }


/* --------------------------------------------------------------------------
   3. BUTTONS & LINKS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.95em 1.9em;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.btn:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-2px); }

.btn--accent { background: var(--accent); border-color: var(--accent); }
.btn--accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }

.section--dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.section--dark .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* Text link with an animated underline. */
.link {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size .28s ease, color .2s ease;
}
.link:hover { background-size: 100% 2px; color: var(--accent); }

/* An arrow link, e.g. "Read more →" */
.arrow-link {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-weight: 600; font-size: 0.9375rem;
  color: var(--accent); text-decoration: none;
}
.arrow-link::after { content: "→"; transition: transform .22s ease; }
.arrow-link:hover::after { transform: translateX(5px); }

/* Links inside body copy get a subtle underline so they are obvious. */
.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.prose a:hover { color: var(--accent); }


/* --------------------------------------------------------------------------
   4. SITE HEADER / NAVIGATION
   (the markup for this is built by js/site.js)
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgba(0,0,0,.05);
}

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 76px;
}

.brand { text-decoration: none; line-height: 1.15; flex-shrink: 0; }
.brand__name {
  display: block;
  width: fit-content;
  font-family: var(--font-head);
  font-size: 1.93rem; font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink);
}
.brand__role {
  display: block;
  font-size: 0.86rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-faint);
}

.nav__list {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.nav__link {
  display: block;
  padding: 9px 13px;
  font-size: 1.0625rem; font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 999px;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease;
}
.nav__link:hover { color: var(--ink); background: var(--paper-warm); }

/* The page you are currently on is marked with the accent colour. */
.nav__link[aria-current="page"] { color: var(--accent); }

.nav__link--cta {
  background: var(--ink); color: #fff; margin-left: 8px; padding-inline: 20px;
}
.nav__link--cta:hover { background: var(--accent); color: #fff; }
.nav__link--cta[aria-current="page"] { background: var(--accent); color: #fff; }

/* Hamburger button — hidden on desktop, shown on small screens. */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: transparent; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle__bars { position: relative; display: block; width: 20px; height: 2px; background: var(--ink); }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink);
  transition: transform .22s ease, opacity .22s ease;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }


/* --------------------------------------------------------------------------
   5. HERO
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(56px, 8vw, 104px) clamp(64px, 9vw, 120px); }

/* Use on a hero with no buttons below the intro text, so it doesn't leave a
   big empty gap before the next section. */
.hero--compact { padding-bottom: clamp(24px, 3vw, 48px); }

.hero__grid {
  display: grid;
  /* Make the image column slightly larger for optical balance at desktop */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(36px, 5vw, 72px);
  /* Align tops so the photo lines up with the heading column */
  align-items: start;
}

.hero__eyebrow {
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.4rem;
}

.hero h1 { margin-bottom: 0.35em; }

.hero__role {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 1.5rem;
  max-width: 44ch;
  text-wrap: balance;
}
.hero__role span { display: block; color: var(--ink-soft); font-weight: 400; }

.hero__lede { max-width: 48ch; }

/* Full-bleed photo hero: the photo fills the whole band, and the intro
   text sits in a translucent card on top of it. */
.hero--photo {
  position: relative;
  padding-block: clamp(48px, 8vw, 96px);
  min-height: 560px;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg picture { display: block; width: 100%; height: 100%; }
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
.hero__overlay {
  position: relative;
  z-index: 1;
  max-width: min(50ch, 90%);
  background: rgba(255, 255, 255, 0.625);
  backdrop-filter: blur(3px);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 34px);
}
.hero__overlay .hero__lede { max-width: none; color: var(--ink); font-size: 1.0625rem; line-height: 1.6; }

.hero__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 1.5rem;
  /* Inset the row by one icon width on each side so the end icons sit in
     from the card edges instead of flush against them. */
  padding: 0 40px;
}
.hero__social a {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color .18s ease, transform .18s ease;
}
.hero__social a:hover { border-color: var(--accent); transform: translateY(-2px); }
/* The icons are already full-bleed colour squares, so filling the whole
   button with the image (instead of a small icon floating in a white
   box) makes them bigger with no visible white space around them. */
.hero__social img { width: 100%; height: 100%; object-fit: cover; }

/* Below this width the overlay card's text (the full bio) is taller than any
   reasonable photo height. Left as an absolute-positioned overlay, the photo
   would be stretched to match that text height and crop down to a sliver.
   So on mobile the photo instead gets its own fixed-ratio band, with the
   text card stacked in normal flow underneath it instead of on top of it. */
@media (max-width: 620px) {
  .hero--photo { display: block; min-height: 0; padding: 0; overflow: visible; }
  /* Matches krause-headshot.jpg's own portrait crop (466x574), which is
     already centered on him, so no extra object-position offset is
     needed here the way the full desktop bench photo requires. */
  .hero__bg { position: relative; inset: auto; aspect-ratio: 4 / 5; }
  .hero__bg img { object-position: center; }
  .hero__overlay {
    max-width: none;
    margin: 20px auto 0;
    background: var(--paper-warm);
    backdrop-filter: none;
  }
  /* Shrink the social icons so all six fit on one row instead of wrapping. */
  /* The card is too narrow on mobile to also inset by a full icon width
     on each side, so the icons stay flush with the edges here. */
  .hero__social { gap: 8px; flex-wrap: nowrap; padding: 0; }
}

.hero__figure { position: relative; }
.hero__figure img {
  width: 120%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Move the subject upward so the face sits near the upper third of the card */
  object-position: 62% 28%;
  border-radius: var(--radius);
}
/* Thin accent frame offset behind the photo. */
.hero__figure::after {
  content: "";
  position: absolute;
  /* Symmetric, reduced offset so the frame does not overhang the bottom */
  inset: 18px -18px 18px 18px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  z-index: -1;
}

/* ===== ADDED: profile-photo helper for the homepage image ===== */
.profile-photo {
  width: 300px;
  height: 300px;      /* or aspect-ratio: 1 / 1 */
  object-fit: cover;
  object-position: 65% 40%;  /* x, y — tune these */
  border-radius: var(--radius);
  display: block;
}

/* Responsive: stack on smaller screens, put the image above the text */
@media (max-width: 768px) {
  .hero__grid {
    grid-template-columns: 1fr;
    align-items: center;
    gap: clamp(20px, 6vw, 40px);
  }
  /* Ensure the photo visually appears above the text when stacked */
  .hero__figure { order: -1; }
  .hero__figure::after { /* tightened inset on mobile to avoid overflow */
    inset: 12px -12px 12px 12px;
  }
}

/* Small styles for newly added homepage sections (uses existing tokens) */
.section--books .card { border-radius: var(--radius); background: var(--paper); padding: 20px; }
.books-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.books-list a { color: var(--accent); font-weight: 600; text-decoration: none; }
.current-projects { margin-top: 8px; color: var(--ink); }
/* Centers the mailing-list heading and button on the contact page. */
.mailing-list--center { text-align: center; }
.mailing-list--center .actions { justify-content: center; }

/* The email address on the contact page, shown as a pill-shaped badge
   instead of a plain text link. */
.email-pill {
  display: inline-block;
  margin-top: 14px;
  margin-bottom: 28px;
  padding: 10px 26px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  transition: background .18s ease;
}
.email-pill:hover { background: var(--accent-dark); }

/* A row of square icon links, e.g. the profile-site icons on the
   contact page. Same visual treatment as .hero__social. */
.social-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.social-link {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color .18s ease, transform .18s ease;
}
.social-link:hover { border-color: var(--accent); transform: translateY(-2px); }
.social-link img { width: 100%; height: 100%; object-fit: cover; }

/* Row of small facts under the hero. */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.facts__item { background: var(--paper); padding: 30px 26px; }
.facts__label {
  display: block; font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 8px;
}
.facts__value { font-size: 1rem; line-height: 1.45; margin: 0; }

/* Hidden on mobile only — four cramped columns of credentials don't read
   well at that width. Still shown on tablet and desktop. */
@media (max-width: 620px) {
  .facts { display: none; }
}


/* --------------------------------------------------------------------------
   6. CARD GRIDS
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: var(--card-gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

/* Always exactly two columns, regardless of how much room a wide screen
   has to fit more — used where the content reads best as a fixed 2x2. */
.grid--fixed-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px) {
  .grid--fixed-2 { grid-template-columns: 1fr; }
}

.card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 44px rgba(20,22,28,.10);
  border-color: var(--ink-faint);
}

.card__media { position: relative; overflow: hidden; background: var(--paper-warm); }
.card__media img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.card:hover .card__media img { transform: scale(1.045); }

/* Portrait crop, used for book covers. */
.card__media--tall img { aspect-ratio: 3 / 4; object-fit: contain; padding: 22px; }

/* For a source photo where the display's own further crop would
   otherwise cut into the top of the subject. */
.card__media--top img { object-position: top; }

.card__body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }

.card__kicker {
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.75rem;
}
.card__title { font-size: 1.1875rem; margin-bottom: 0.6rem; }
.card__text { font-size: 0.9375rem; color: var(--ink-soft); margin-bottom: 1.4rem; }

/* A small line-icon above a card's title, used where a card is mostly
   text (talk topics, audience types) so the row reads faster than a
   wall of headings. */
.card__icon { width: 40px; height: 40px; margin-bottom: 16px; color: var(--accent); }
.card__icon svg { width: 100%; height: 100%; display: block; }
.card__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.card__foot { margin-top: auto; }

/* Whole-card link: makes the entire card clickable while keeping the
   heading as the accessible link text. */
.card__link { text-decoration: none; color: inherit; }
.card__link::after { content: ""; position: absolute; inset: 0; }
.card--linked { position: relative; }


/* --------------------------------------------------------------------------
   7. FEATURE BAND  (Constructive Conversations promo)
   -------------------------------------------------------------------------- */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
.feature__media img {
  width: 100%; aspect-ratio: 5 / 4; object-fit: cover;
  border-radius: var(--radius);
}

/* For a source photo cropped tight around the subject, so the 5:4 box
   crops further off the bottom (empty suit/torso) instead of the top
   (which would otherwise cut into the head). */
.feature__media--top img { object-position: top; }

/* Pin the photo to the top of the row instead of the default vertical
   centering, so it lines up with the heading beside it. The margin
   offsets the small "Current focus" label above the heading, so the
   photo's top edge lines up with the heading text itself, not the label. */
.feature__media--align-start {
  align-self: start;
  margin-top: calc(0.75rem * 1.65 + 1.1rem);
}

/* Headings inside a two-column band have half the width to play with,
   so they are set a step smaller than a full-width section heading. */
.feature__text h1 { font-size: 35px; }
.feature__text h2 { font-size: clamp(1.6rem, 2.9vw, 2.35rem); }
.feature__text h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }

/* Book covers must never be cropped — show the whole cover, upright. */
.feature__media--cover img {
  aspect-ratio: 3 / 4;
  object-fit: contain;
  max-width: 360px;
  margin-inline: auto;
}

/* "Order Here" box under a book cover. To add another retailer, copy one
   whole <a class="order-box__link"> line. The title is a small gray label
   (not a link) so it reads clearly as a caption, not another button. */
.order-box {
  max-width: 360px;
  margin: 1.5rem auto 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.order-box__title {
  margin: 0;
  padding: 0.7em 1em 0.5em;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--paper-warm);
}

/* Each retailer is a clickable row with a trailing arrow, so it is
   unmistakably a link (unlike the title above it). */
.order-box__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 1em;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-top: 1px solid var(--line);
  transition: background .18s ease, color .18s ease;
}
.order-box__link::after { content: "\2192"; transition: transform .2s ease; }
.order-box__link:hover::after { transform: translateX(4px); }
.order-box__link:first-of-type { border-top: none; }
.order-box__link:hover { background: var(--ink); color: #fff; }

/* The discount-code row under a retailer link: plain text plus a small
   copy button. Not a link, so it sits outside the <a>. */
.order-box__code {
  margin: 0;
  padding: 0.65em 1em;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  background: var(--paper-warm);
}
.code-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-left: 0.4em;
  padding: 0.2em 0.7em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s ease;
}
.code-copy::after { content: "Copy"; font-weight: 600; font-size: 0.7rem; color: var(--ink-faint); }
.code-copy:hover { border-color: var(--accent); }
.code-copy:hover::after { color: var(--accent); }
.code-copy.is-copied::after { content: "Copied!"; color: var(--accent); }

/* Simple bulleted list of topics with accent markers. */
.topic-list { list-style: none; margin: 2rem 0 0; padding: 0; }
.topic-list li {
  position: relative;
  padding: 0 0 0 26px;
  margin-bottom: 0.85rem;
  font-size: 1rem;
  line-height: 1.5;
}
.topic-list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 12px; height: 2px; background: var(--accent);
}
.topic-list li:last-child { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   8. LINK TILES  (quick links row)
   -------------------------------------------------------------------------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px; background: var(--line); }
.tile {
  position: relative;
  display: block;
  background: var(--paper);
  padding: 36px 28px 32px;
  text-decoration: none;
  transition: background .22s ease;
}
.tile:hover { background: var(--paper-warm); }
.tile__title {
  font-family: var(--font-head); font-weight: var(--head-weight);
  font-size: 1.1rem; letter-spacing: -0.01em;
  margin: 0 0 0.4rem;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.tile__title::after { content: "→"; color: var(--accent); transition: transform .22s ease; }
.tile:hover .tile__title::after { transform: translateX(5px); }
.tile__text { font-size: 0.875rem; color: var(--ink-soft); margin: 0; }


/* --------------------------------------------------------------------------
   9. MEDIA EMBEDS  (video + audio)
   -------------------------------------------------------------------------- */

.embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
}
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* For clips where the uploader disabled embedding, so the iframe player
   can show nothing at all. A linked thumbnail with a play icon always
   renders, and takes the visitor to YouTube on click. */
.embed--thumb { display: block; }
.embed--thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.embed--thumb:hover img { transform: scale(1.04); }
.embed--thumb__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(20, 20, 20, 0.78);
  display: flex; align-items: center; justify-content: center;
  transition: background .18s ease;
}
.embed--thumb:hover .embed--thumb__play { background: var(--accent); }
.embed--thumb__play svg { width: 20px; height: 20px; fill: #fff; margin-left: 3px; }

audio { width: 100%; margin-top: 14px; }

.mt-lg { margin-top: 2.5rem; }

.note {
  font-size: 0.875rem;
  color: var(--ink-soft);
  background: var(--paper-warm);
  border-left: 3px solid var(--accent);
  padding: 12px 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-top: 14px;
}


/* --------------------------------------------------------------------------
   9b. INTERIOR PAGE HEADER
   The band at the top of every page except the homepage.
   -------------------------------------------------------------------------- */

.page-head { padding-block: clamp(48px, 6vw, 84px) clamp(36px, 4vw, 56px); }
.page-head h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); margin-bottom: 0.4em; }
.page-head .lede { max-width: 62ch; }
.page-head .actions { margin-top: 1.75rem; }

/* Use on a page-head with no lede/actions below the title, so it doesn't leave a big empty gap. */
.page-head--compact { padding-bottom: clamp(8px, 1.5vw, 16px); }
.page-head--compact h1 { margin-bottom: 0; }

/* Removes the page-head's own bottom padding entirely. Pair with
   .section--flush-top on the very next section so only a small gap
   remains between them, not the usual full section spacing. */
.page-head--flush-bottom { padding-bottom: 0; }

/* Shrinks a section's own top padding down to a small gap, so it sits
   close to whatever comes before it (see .page-head--flush-bottom above). */
.section--flush-top { padding-block-start: clamp(12px, 2vw, 20px); }

/* An even smaller gap, for two blocks that should sit almost flush
   (e.g. the team photo and the text right below it). */
.section--flush-top-tight { padding-block-start: clamp(4px, 1vw, 10px); }

/* Long-form reading column. */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.6em; }
.prose h3 { margin-top: 2em; }
.prose > :first-child { margin-top: 0; }

blockquote.quote {
  margin: 0;
  padding: 0 0 0 26px;
  border-left: 3px solid var(--accent);
  font-size: 1.0625rem;
  line-height: 1.6;
}
blockquote.quote cite {
  display: block;
  margin-top: 0.9rem;
  font-style: normal;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ink-faint);
}


/* --------------------------------------------------------------------------
   9c. PUBLICATION LIST
   One row per publication: small cover, citation, expandable abstract.
   -------------------------------------------------------------------------- */

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

.pub {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 26px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
}
.pub:last-child { border-bottom: 1px solid var(--line); }

.pub__thumb img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-warm);
}
.pub__cite { font-size: 1.0625rem; line-height: 1.55; margin: 0 0 0.5rem; }
.pub__cite .pub__title { font-weight: 600; }
.pub__meta { font-size: 0.875rem; color: var(--ink-soft); margin: 0; }
.pub__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 0.85rem; }
.pub__links a { font-size: 0.875rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.pub__links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Expandable abstract — uses the browser's own show/hide, no JavaScript. */
details.abstract { margin-top: 0.9rem; }
details.abstract > summary {
  cursor: pointer;
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint);
  list-style: none;
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 4px 0;
}
details.abstract > summary::-webkit-details-marker { display: none; }
details.abstract > summary::after { content: "+"; font-size: 1.1rem; line-height: 1; }
details.abstract[open] > summary::after { content: "\2212"; }
details.abstract > summary:hover { color: var(--accent); }
details.abstract p {
  margin-top: 0.8rem;
  font-size: 0.9375rem; line-height: 1.65; color: var(--ink-soft);
  max-width: 72ch;
}


/* --------------------------------------------------------------------------
   9d. TALK HISTORY
   Long dated lists, flowed into columns on wide screens.
   -------------------------------------------------------------------------- */

.talk-list {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 56px;
}
.talk-list li {
  break-inside: avoid;
  padding: 9px 0 9px 18px;
  position: relative;
  font-size: 0.9375rem; line-height: 1.5;
  border-bottom: 1px solid var(--line);
}
.talk-list li::before {
  content: ""; position: absolute; left: 0; top: 1.15em;
  width: 8px; height: 1px; background: var(--accent);
}


/* --------------------------------------------------------------------------
   9d-2. PHOTO WITH CAPTION
   -------------------------------------------------------------------------- */

.photo { margin: 0; }
.photo img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius);
}

/* Use on a photo that should crop from the top instead of the middle
   (e.g. when the interesting part of the shot is near the top). */
.photo--top img { object-position: top; }
.photo figcaption {
  margin-top: 12px;
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint);
}


/* --------------------------------------------------------------------------
   9e. PEOPLE GRID
   Team member photo cards.
   -------------------------------------------------------------------------- */

.people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 30px 22px;
  list-style: none; margin: 0; padding: 0;
}

/* Used for the small people-lists inside the two-column Current Team row
   (Doctoral Researcher / Undergraduate Research Fellows), so photos stay
   a fixed, consistent size instead of stretching to fill the column the
   way the grid above would with only a couple of people in it. */
.people--flex {
  display: flex;
  flex-wrap: wrap;
}
.people--flex > .person { width: 158px; }

/* Centers each row, so a short final row (or a lone photo, as with
   Doctoral Researcher) doesn't sit stranded against empty space. */
.people--even { justify-content: center; }
.person img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 50%;
  background: var(--paper-warm);
  margin-bottom: 12px;
}

/* For a source photo that's a taller, more full-body shot than the usual
   headshot, so the circular crop lands on the face instead of the chest. */
.person--top-crop img { object-position: top; }

/* Empty circle shown for a person with no photo on file, instead of an <img>. */
.person__photo-placeholder {
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--paper-warm);
  border: 1px dashed var(--line);
  margin-bottom: 12px;
}

/* The current-team group photo, shown edge to edge (no .wrap around it)
   and cropped to a shorter band so the people fill the frame instead of
   the sky and grass in the original wide landscape shot. The ratio here
   must stay wider than the source photo's own (2000x817, ~2.45:1) at
   every breakpoint, or object-fit: cover crops the sides instead of the
   top and bottom. */
.team-photo--full {
  display: block;
  width: 100%;
  aspect-ratio: 3.8 / 1;
  object-fit: cover;
  object-position: center 56%;
}

/* The Undergraduate Research Fellows / Doctoral Researcher row: centered
   as a unit with one normal gap between the groups, instead of each
   stretching to fill a wide grid column (which stranded the single
   Doctoral Researcher photo in a lot of empty space). */
.team-groups { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--card-gap); }
.team-groups .team-group { text-align: center; }

/* One named group under the shared "Current Team" title (e.g. "Doctoral
   Researcher"). Its heading is a plain h3, smaller than the title above it. */
.team-group h3 { margin-bottom: 1.25rem; }

/* Space above the Research Assistants group, which follows the two-column
   Doctoral / Undergraduate row instead of sitting inside it. */
.team-group--assistants { margin-top: 3.5rem; }
.person__name { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; margin: 0 0 4px; }
.person__meta { font-size: 0.8125rem; color: var(--ink-soft); line-height: 1.45; margin: 0; }
.person__terms { font-size: 0.75rem; color: var(--ink-faint); line-height: 1.45; margin: 6px 0 0; }

/* Alumni are listed as compact text, without photos. */
.alumni {
  columns: 3; column-gap: 44px;
  list-style: none; margin: 0; padding: 0;
}
.alumni li {
  break-inside: avoid;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 0.875rem; line-height: 1.45;
}
.alumni strong { display: block; font-weight: 600; font-size: 0.9375rem; }
.alumni span { color: var(--ink-soft); }


/* --------------------------------------------------------------------------
   9f. COURSE BLOCKS
   -------------------------------------------------------------------------- */

.course {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  padding: 44px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.course:last-child { border-bottom: 1px solid var(--line); }
.course__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.course__code {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 0.6rem;
}
.course h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin-bottom: 0.9rem; }
.course p { font-size: 0.9375rem; color: var(--ink-soft); }


/* --------------------------------------------------------------------------
   10. FOOTER
   (the markup for this is built by js/site.js)
   -------------------------------------------------------------------------- */

.site-footer { background: var(--paper-dark); color: #fff; padding-block: 76px 40px; }
.site-footer a { color: #fff; }

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 44px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.footer-name {
  font-family: var(--font-head); font-weight: var(--head-weight);
  font-size: 1.6rem; letter-spacing: -0.02em; margin: 0 0 0.5rem;
}
.footer-role { color: rgba(255,255,255,.62); font-size: 0.9375rem; margin: 0 0 1.5rem; max-width: 34ch; }
.footer-email { font-size: 1.0625rem; font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.footer-email:hover { color: var(--accent); }

.footer-col h3 {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.6rem; }
.footer-col a { font-size: 0.9375rem; color: rgba(255,255,255,.8); text-decoration: none; transition: color .18s ease; }
.footer-col a:hover { color: #fff; }

.social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.social a {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2); border-radius: 50%;
  background: rgba(255,255,255,.05);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.social a:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.social img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* The CV icon is dark text with a transparent background, so it needs
   its own white circle to read against the dark footer. */
.social a.social__cv { background: var(--paper); border-color: var(--paper); }
.social a.social__cv img { object-fit: contain; padding: 9px; }

.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  padding-top: 28px;
  font-size: 0.8125rem; color: rgba(255,255,255,.5);
}
.site-footer__bottom a { color: rgba(255,255,255,.5); text-decoration: none; }
.site-footer__bottom a:hover { color: #fff; }


/* --------------------------------------------------------------------------
   11. SCROLL ANIMATIONS
   Elements fade and slide up as they scroll into view.
   The ".has-js" guard means content is always visible if JavaScript is off.
   -------------------------------------------------------------------------- */

.has-js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.has-js .reveal.is-visible { opacity: 1; transform: none; }

/* Stagger children of a revealed grid slightly. */
.has-js .reveal[data-delay="1"] { transition-delay: .09s; }
.has-js .reveal[data-delay="2"] { transition-delay: .18s; }
.has-js .reveal[data-delay="3"] { transition-delay: .27s; }

@media (prefers-reduced-motion: reduce) {
  .has-js .reveal { opacity: 1; transform: none; transition: none; }
  .card:hover, .btn:hover, .social a:hover { transform: none; }
  .card__media img, .arrow-link::after, .tile__title::after { transition: none; }
}


/* --------------------------------------------------------------------------
   12. RESPONSIVE — tablet and phone
   -------------------------------------------------------------------------- */

/* Tablet and below: collapse the navigation into a hamburger menu. */
@media (max-width: 1040px) {

  .nav-toggle { display: inline-flex; }

  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(0,0,0,.09);
    display: none;
  }
  .nav.is-open { display: block; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 10px var(--gutter) 22px; }
  .nav__link { padding: 14px 4px; font-size: 1rem; border-radius: 0; border-bottom: 1px solid var(--line); }
  .nav__link:hover { background: transparent; }
  .nav__link--cta {
    margin: 16px 0 0; border-radius: 999px; text-align: center;
    justify-content: center; border-bottom: 0; padding: 14px;
  }
}

@media (max-width: 900px) {
  :root { --section-space: 78px; }

  /* On narrow screens the name leads and the photo follows underneath. */
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .hero__figure { max-width: 460px; }
  .hero__figure img { aspect-ratio: 5 / 4; object-position: 62% 22%; }
  .hero__figure::after { inset: 14px -14px -14px 14px; }
  .hero__role, .hero__lede { max-width: none; }

  .feature { grid-template-columns: 1fr; }
  .feature__media { order: -1; }

  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }

  /* Smaller than the desktop credentials strip, on tablet as well as mobile.
     Forced to exactly 4 columns (rather than auto-fit's minmax) so all four
     stay on one row on tablet widths instead of the last one wrapping. */
  .facts { grid-template-columns: repeat(4, 1fr); }
  .facts__item { padding: 18px 16px; }
  .facts__label { font-size: 0.625rem; margin-bottom: 6px; }
  .facts__value { font-size: 0.9375rem; }
}

@media (max-width: 900px) {
  .talk-list { columns: 1; }
  .alumni { columns: 2; }
  .course { grid-template-columns: 1fr; padding: 34px 0; }
  .course__media { max-width: 420px; }
}

@media (max-width: 620px) {
  :root { --gutter: 20px; --section-space: 62px; --card-gap: 18px; }

  .alumni { columns: 1; }
  .pub { grid-template-columns: 76px minmax(0, 1fr); gap: 18px; padding: 24px 0; }
  .pub__cite { font-size: 1rem; }
  .people { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 24px 16px; }
  .legend { white-space: normal; }

  body { font-size: 1rem; }

  h1 { font-size: clamp(2.25rem, 11vw, 3rem); }

  .site-header__inner { min-height: 66px; }
  .brand__name { font-size: 1.44rem; }
  .brand__role { font-size: 0.625rem; }

  .hero { padding-block: 40px 56px; }
  .hero__eyebrow { font-size: 0.6875rem; letter-spacing: 0.11em; }

  .section-head { margin-bottom: 2.4rem; }

  .card__body { padding: 22px 20px 24px; }
  /* Four cramped columns don't fit at phone width — go back to auto-fit's
     stacking instead of the tablet breakpoint's forced 4 columns. */
  .facts { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .facts__item { padding: 14px 14px; }
  .facts__label { font-size: 0.625rem; margin-bottom: 4px; }
  .facts__value { font-size: 0.875rem; line-height: 1.35; }
  .tile { padding: 28px 22px 26px; }

  .actions .btn { flex: 1 1 100%; justify-content: center; }

  .site-footer { padding-block: 54px 32px; }
  .site-footer__top { grid-template-columns: 1fr; gap: 34px; }
}


/* --------------------------------------------------------------------------
   13. PRINT
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .nav-toggle, .skip-link { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .reveal { opacity: 1 !important; transform: none !important; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}