/* =========================================================================
   David Clark · High-Dimensional Dynamics and Computation Group
   Minimal, light, left-aligned. Palette sampled from the HDDC logo.
   Fonts are self-hosted system faces only — no external requests.
   ========================================================================= */

:root {
  /* type */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Charter, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
          Arial, sans-serif;
  --display: "Helvetica Neue", Helvetica, Arial, sans-serif; /* title + section heads */

  /* ink + surfaces */
  --bg: #ffffff;
  --ink: #171717;        /* neutral near-black — ink on paper, no tint */
  --ink-soft: #171717;
  --ink-faint: #767a8f;
  --rule: #e5e6ef;

  /* logo-derived accents */
  --cyan: #23d6ea;
  --blue: #1b92e7;
  --indigo: #6041e3;
  --purple: #9164ff;
  --pink: #cf3d9e;
  --link: #1a53d6;                                             /* rich royal blue — clearly "blue", not azure-pastel and not AI-indigo */
  --link-hover: #123fb0;                                       /* deeper royal blue */
  --hover-link-bg: color-mix(in srgb, var(--link) 12%, transparent);   /* soft blue wash */
  --hover-nav-bg: color-mix(in srgb, var(--ink) 8%, transparent);       /* soft gray */
  --grad: linear-gradient(90deg, #23d6ea 0%, #1b92e7 34%, #6041e3 73%, #9164ff 100%);
  /* section-bar accent: a small neon hot-pink -> magenta -> violet sweep.
     Subtle because the bar is tiny, but fun/queer up close. */
  --bar-pink: #fb1c9e;   /* kept for reference */
  --bar-grad: linear-gradient(90deg, #ff1f9c 0%, #f01ab6 48%, #b23cff 100%);

  /* measure — single content width; header, bio, pubs, notes all align to it */
  --measure: 49.7rem;
  --logo-max: 26.6rem;  /* the logo runs deliberately large — the centerpiece */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1.25rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.075rem;
  line-height: 1.5;   /* tighter than the airy 1.6 — reads more like a written page, less "designed" */
  text-rendering: optimizeLegibility;
}

/* ---- top navigation -------------------------------------------------- */
.nav {
  /* part of the page flow — scrolls away, only visible at the top */
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  max-width: 64rem;
  margin: 0;
  padding: 0 clamp(1rem, 2.9vw, 2.4rem);
  min-height: 2.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.15rem;
  align-items: stretch;   /* links fill the full bar height */
}
.nav a {
  display: flex;
  align-items: center;    /* text centered; background fills full height */
  padding: 0 0.65rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  text-decoration: none;
}
.nav a:first-child { margin-left: -0.65rem; }  /* "Home" text aligns to the content edge */
.nav a:hover,
.nav a:focus-visible {
  color: var(--ink);
  background: var(--hover-nav-bg);
  outline: none;
}

/* ---- page frame ------------------------------------------------------ */
.wrap {
  max-width: 64rem;
  margin: 0;
  padding: clamp(0.9rem, 2.1vw, 1.55rem) clamp(1rem, 2.9vw, 2.4rem) 6rem;
}
.measure { max-width: var(--measure); }

section { margin-top: clamp(2.5rem, 5vw, 3.9rem); }
section:first-of-type { margin-top: 0.5rem; }

/* ---- header / identity ---------------------------------------------- */
.group-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.76rem;   /* fixed — wraps naturally on narrow screens instead of shrinking */
  line-height: 1.2;
  letter-spacing: -0.018em;
  margin: 0 0 0.9rem;
  max-width: none;   /* single line; wraps naturally only on narrow screens */
  text-align: left;
}
.person {
  font-family: var(--sans);
  font-size: 1.0rem;
  color: var(--ink-soft);
  margin: 0;
  max-width: var(--measure);
}
.person .name {
  color: var(--ink);
  font-weight: 600;
  font-size: 1.22rem;   /* a clear step above the bold position titles */
  margin: 0 0 0.9rem;
}
.person .role {
  margin: 0 0 0.65rem;
  line-height: 1.5;
}
.person .role .pos { color: var(--ink); font-weight: 600; }   /* bold, matching the name */
.person .role .pos-note { color: var(--ink-faint); }   /* e.g. "Starting September 2026" */
.person .email { margin: 0.75rem 0 0; }
.person .email-note {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink-faint);
  max-width: 31rem;   /* sized so the note breaks as two lines */
}
.person a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.person a:hover, .person a:focus-visible { border-bottom-color: color-mix(in srgb, currentColor 55%, transparent); outline: none; }

/* ---- identity row + headshot ---------------------------------------- */
.id-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 2rem;
  max-width: var(--measure);
  margin-bottom: 0.95rem;   /* photo row -> contact block */
}
.contact { margin: 0 0 clamp(1.9rem, 3.4vw, 2.5rem); }   /* contact -> blurb */
.contact .email { margin-top: 0; }
.id-row .person { flex: 0 1 auto; }
.headshot {
  flex: 0 0 clamp(140px, 26%, 185px);
  aspect-ratio: 1 / 1;      /* always a perfect square, at any size/layout */
  align-self: flex-start;   /* top-aligned with the name; height no longer tracks the text */
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--rule);
}
.headshot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
}

@media (max-width: 34rem) {
  .id-row { flex-wrap: wrap; }
  .headshot { flex-basis: 140px; }   /* still square via aspect-ratio */
}

/* ---- logo hero ------------------------------------------------------- */
.logo-hero {
  max-width: var(--measure);
  margin: -0.6rem 0 0.4rem;   /* tightened space above/below the logo */
}
hddc-orbit-logo {
  display: block;
  width: min(100%, var(--logo-max));
  margin: 0 auto;   /* centered within the content-width column */
}

/* ---- bio ------------------------------------------------------------- */
.bio p { margin: 0 0 0.8rem; max-width: var(--measure); }
.bio .personal { color: var(--ink-soft); font-style: normal; }
.bio a { color: var(--link); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.bio a:hover, .bio a:focus-visible { border-bottom-color: color-mix(in srgb, currentColor 55%, transparent); outline: none; }

/* ---- profile links --------------------------------------------------- */
.profiles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 1.6rem 0 0;
  font-family: var(--sans);
  font-size: 0.95rem;
}
.profiles a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.profiles a:hover,
.profiles a:focus-visible {
  border-bottom-color: color-mix(in srgb, currentColor 55%, transparent);
  outline: none;
}

/* ---- section headings ------------------------------------------------ */
.section-head {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.3vw, 1.5rem);
  letter-spacing: -0.015em;
  margin: 0 0 0.35rem;
}
.section-head::after {
  content: "";
  display: block;
  width: 3.3rem;
  height: 3.6px;
  background: var(--bar-grad);
  margin-top: 0.7rem;
}

/* ---- publications ---------------------------------------------------- */
.pub-list {
  list-style: none;
  margin: 1.9rem 0 0;
  padding: 0;
  max-width: var(--measure);
  counter-reset: pub;
}
.pub {
  margin: 0 0 1.35rem 0;   /* whitespace, no dividers — reads like a real bibliography */
}
.pub:last-child { margin-bottom: 0; }
.pub-authors { color: var(--ink); }
.pub-authors strong { font-weight: 700; }
.pub-year { color: var(--ink-soft); }
.pub-title { }
.pub-venue { font-style: italic; color: var(--ink-soft); }

.pub-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.2rem;
  margin: 0.45rem 0 0 -0.4rem;   /* negative offset keeps first link's text on the content edge */
  font-family: var(--sans);
  font-size: 0.9rem;
}
.pub-links a {
  color: var(--link);
  text-decoration: none;
  padding: 0.12rem 0.4rem;
}
.pub-links a:hover,
.pub-links a:focus-visible {
  color: var(--link-hover);
  background: var(--hover-link-bg);
  outline: none;
}

/* ---- invited talks --------------------------------------------------- */
.talk-list {
  list-style: none;
  margin: 1.7rem 0 0;
  padding: 0;
  max-width: var(--measure);
  font-family: var(--sans);
  font-size: 0.9rem;
  color: #575757;                 /* lighter gray — a de-emphasized "showcase" list */
}
.talk {
  display: flex;
  gap: 0.9rem;
  padding: 0.26rem 0;
  line-height: 1.45;
}
.talk-date {
  flex: 0 0 4.75rem;
  color: #9a9a9a;                 /* lightest — the date column */
  font-variant-numeric: tabular-nums;
}
.talk-venue { flex: 1 1 auto; }
.talk-list:not(.show-all) .talk.extra { display: none; }  /* toggled, no animation */

.talks-toggle {
  margin-top: 0.85rem;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--link);
  cursor: pointer;
}
.talks-toggle:hover,
.talks-toggle:focus-visible { color: var(--link-hover); outline: none; }

@media (max-width: 33rem) {
  .talk { flex-direction: column; gap: 0.05rem; }
  .talk-date { flex-basis: auto; }
}

/* ---- notes ----------------------------------------------------------- */
.note-list {
  list-style: none;
  margin: 1.9rem 0 0;
  padding: 0;
  max-width: var(--measure);
}
.note { padding: 0 0 0.9rem; margin: 0 0 0.9rem; }
.note-title {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.note-title:hover, .note-title:focus-visible { border-bottom-color: color-mix(in srgb, currentColor 55%, transparent); outline: none; }
.note-meta {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink-faint);
  margin-left: 0.5rem;
}

/* ---- footer ---------------------------------------------------------- */
.foot {
  max-width: var(--measure);
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--ink-faint);
}

/* ---- small screens --------------------------------------------------- */
@media (max-width: 33rem) {
  .nav-inner { padding-left: 1rem; padding-right: 1rem; }
  body { font-size: 1rem; }
}