/* ===========================================================================
   Jenna M. Kline — site styles
   One stylesheet. No webfonts, no CDN, no framework.
   Light only, warm off-white ground, single muted marsh-green accent.
   =========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* ground & ink */
  --paper:        #FBFAF7;   /* warm off-white page */
  --paper-sunk:   #F4F2ED;   /* faintly recessed panels */
  --ink:          #17191B;   /* near-black body text */
  --ink-strong:   #0D0F10;   /* headings */
  --ink-muted:    #5C636B;   /* metadata, venue, dates */
  --ink-faint:    #868D95;   /* least important text */

  /* single accent — deep marsh green, kept clear of the hi-vis
     chartreuse in the field photography so the two never compete */
  --accent:       #2F4739;
  --accent-deep:  #1E2F26;
  --accent-wash:  #EAEFEA;
  --selection:    #C2D8C9;   /* clearly green, readable under near-black text */

  --star:         #A9762A;   /* awards */

  /* hairlines, never boxes */
  --rule:         #E3E0D8;
  --rule-strong:  #CFCBC0;

  /* type */
  /* Newsreader for display headings; IBM Plex Sans for body, navigation,
     metadata, and interface; IBM Plex Mono sparingly for technical labels.
     Faces are self-hosted in assets/fonts.css with font-display: swap. */
  --serif: "Newsreader", "Iowan Old Style", Georgia, ui-serif,
           "Times New Roman", serif;
  --sans:  "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
           "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular,
           Menlo, Consolas, monospace;

  /* measure & rhythm */
  --measure:   68ch;
  --container: 1120px;
  --gutter:    clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(2.5rem, 5vw, 4.25rem);

  --radius: 3px;   /* barely there */

  /* every browser-drawn UI accent (focus rings, carets, form controls,
     selection) resolves to the site green rather than the default blue */
  accent-color: #2F4739;
  caret-color: #2F4739;
}

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

html {
  scroll-behavior: smooth;
  /* keep anchored headings clear of the sticky nav */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;        /* 17px */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  color: var(--ink-strong);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}

h1, h2 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.005em;
  font-optical-sizing: auto;
}

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

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Safari and Firefox can paint a default (blue) ring on plain :focus —
   force the accent there too. */
:focus { outline-color: var(--accent); }

::selection      { background: var(--selection); color: var(--ink-strong); }
::-moz-selection { background: var(--selection); color: var(--ink-strong); }

/* ---------------------------------------------------------- skip to main -- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: #fff;
  padding: .7rem 1.1rem; font-size: .9rem; text-decoration: none;
}
.skip:focus { left: .5rem; top: .5rem; color: #fff; }

/* ------------------------------------------------------------ containers -- */
.wrap  { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--measure); }

section[id] { scroll-margin-top: 5.5rem; }

.band { padding-block: var(--section-y); border-top: 1px solid var(--rule); }
.band--first { border-top: 0; }
.band--sunk  { background: var(--paper-sunk); }

/* ------------------------------------------------------------------- nav -- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
@supports not (backdrop-filter: blur(1px)) { .nav { background: var(--paper); } }

.nav__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4rem;
  flex-wrap: wrap;
}
.nav__name {
  font-family: var(--serif); font-size: 1.0625rem; font-weight: 600;
  color: var(--ink-strong); text-decoration: none; letter-spacing: -0.01em;
  margin-right: auto; white-space: nowrap;
}
.nav__name:hover { color: var(--accent); }

.nav__links { display: flex; gap: clamp(.85rem, 2vw, 1.6rem); flex-wrap: wrap; }
.nav__links a {
  color: var(--ink-muted); text-decoration: none;
  font-size: .9375rem; padding-block: .25rem;
  border-bottom: 1px solid transparent;
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

@media (max-width: 640px) {
  .nav__inner { min-height: 0; padding-block: .7rem; gap: .5rem 1rem; }
  .nav__name  { margin-right: 0; width: 100%; }
  .nav__links { gap: .5rem 1.1rem; }
  .nav__links a { font-size: .875rem; }
}

/* ----------------------------------------------------------------- hero -- */
.hero { padding-block: clamp(1.75rem, 4vw, 3rem) var(--section-y); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero__name {
  font-size: clamp(2.35rem, 5.5vw, 3.5rem);
  line-height: 1.05; letter-spacing: -0.022em;
  margin-bottom: .5rem;
}
.hero__field {
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  font-weight: 600; color: var(--accent);
  letter-spacing: .005em;
  margin-bottom: 1.5rem;
}
.hero__lede { font-size: 1.125rem; max-width: 54ch; }
.hero__lede + .hero__lede { color: var(--ink-muted); font-size: 1.0625rem; }
.hero__note {
  font-family: var(--serif); font-style: italic;
  color: var(--ink-muted); font-size: 1.0625rem;
  border-left: 2px solid var(--accent); padding-left: .95rem;
  margin-block: 1.5rem;
}
.hero__bio {
  color: var(--ink-muted); font-size: 1rem; max-width: 56ch;
  margin-top: 1.5rem;
}
.hero__bio strong { color: var(--ink); font-weight: 600; }

.hero__portrait { position: relative; }
.hero__portrait img {
  width: 100%; border-radius: var(--radius);
  aspect-ratio: 4 / 5; object-fit: cover;
}
.hero__caption {
  margin-top: .6rem; font-size: .8125rem; color: var(--ink-faint);
  line-height: 1.45;
}

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .hero__portrait { max-width: 22rem; }
}

/* --------------------------------------------------------- link cluster -- */
.linkrow { display: flex; flex-wrap: wrap; gap: .5rem .6rem; margin-top: 1.5rem; }
.hero__bio + .linkrow { padding-top: 1.5rem; border-top: 1px solid var(--rule); margin-top: 1.75rem; }
.linkrow a {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: .9375rem; text-decoration: none; color: var(--accent);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  padding: .4rem .8rem; background: transparent;
  transition: border-color .15s ease, background-color .15s ease;
}
.linkrow a:hover { border-color: var(--accent); background: var(--accent-wash); }
.linkrow a::after { content: ""; }

/* -------------------------------------------------------- section header -- */
.shead { margin-bottom: clamp(1.25rem, 2.4vw, 1.85rem); }
.shead__eyebrow {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint);
  display: block; margin-bottom: .7rem;
}
.shead h2 { font-size: clamp(1.6rem, 3.2vw, 2.15rem); }
.shead__sub { margin-top: .85rem; color: var(--ink-muted); max-width: var(--measure); }

.shead__more {
  font-size: .9375rem; text-decoration: none; white-space: nowrap;
}
.shead__more:hover { text-decoration: underline; }
.shead--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }

/* ---------------------------------------------------- research intro ---- */
/* Prose and the callout share one row so the section fills the container
   instead of trailing off mid-page. */
.research-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.research-intro .prose { max-width: none; }
.research-intro .aside-note { max-width: none; margin-block: .3rem 0; }

@media (max-width: 860px) {
  .research-intro { grid-template-columns: 1fr; gap: 1.5rem; }
  .research-intro .prose { max-width: var(--measure); }
}

/* ------------------------------------------------------- why / callout ---- */
.aside-note {
  max-width: 60ch;
  border-left: 2px solid var(--accent);
  padding-left: clamp(1rem, 2vw, 1.4rem);
  margin-block: clamp(1.25rem, 2.4vw, 1.75rem);
}
.aside-note h3 {
  font-family: var(--serif); font-size: 1.1875rem; font-weight: 600;
  margin-bottom: .5rem;
}
.aside-note p { color: var(--ink-muted); margin-bottom: 0; }

/* ------------------------------------------------------ research areas -- */
/* Three tiles across; each expands in place. Native <details> keeps the
   content in the DOM, keyboard-operable, and findable by the browser. */
.areas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.75rem, 1.6vw, 1.1rem);
  align-items: start;
  margin-top: .75rem;
}

.area {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper);
}
.area[open] { border-color: var(--accent); }

.area__face {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: .5rem .75rem;
  padding: clamp(.9rem, 2vw, 1.15rem);
  cursor: pointer;
  list-style: none;
}
.area__face::-webkit-details-marker { display: none; }
.area__face:hover .area__title { color: var(--accent); }
.area__face:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.area__num {
  font-family: var(--mono); font-size: .75rem; color: var(--accent);
  padding-top: .15rem; letter-spacing: .04em;
}
.area__title {
  font-weight: 600; font-size: 1.0625rem; line-height: 1.3;
  color: var(--ink-strong); text-wrap: balance;
}

/* chevron, drawn in CSS so there is no icon dependency */
.area__chev {
  width: .58rem; height: .58rem; margin-top: .35rem;
  border-right: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(45deg);
  transition: transform .18s ease, border-color .18s ease;
}
.area[open] .area__chev { transform: rotate(-135deg); border-color: var(--accent); }
.area__face:hover .area__chev { border-color: var(--accent); }

.area__body {
  padding: 0 clamp(.9rem, 2vw, 1.15rem) clamp(.9rem, 2vw, 1.15rem);
  border-top: 1px solid var(--rule);
  margin-top: -.15rem; padding-top: .9rem;
}
.area__body p { color: var(--ink-muted); font-size: .9375rem; margin-bottom: .8rem; }
.area__body .thrust__links { font-size: .875rem; gap: .3rem .8rem; }

@media (max-width: 860px) {
  .areas { grid-template-columns: 1fr; }
  .area__face { padding-block: .95rem; }
}
@media (prefers-reduced-motion: reduce) { .area__chev { transition: none; } }

/* ---------------------------------------------------------- thrust list -- */
.thrusts__label {
  font-family: var(--sans);
  font-size: .9375rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: clamp(1.5rem, 2.8vw, 2rem);
}
.thrusts__label + .thrusts { margin-top: .75rem; }

.thrusts { display: grid; gap: 0; margin-top: clamp(1.5rem, 2.8vw, 2rem); }
.thrust {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0 1.25rem;
  padding-block: clamp(1.6rem, 3vw, 2.1rem);
  border-top: 1px solid var(--rule);
}
.thrust:last-child { border-bottom: 1px solid var(--rule); }
.thrust__num {
  font-family: var(--mono); font-size: .8125rem; color: var(--accent);
  padding-top: .3rem; letter-spacing: .04em;
}
.thrust__body { max-width: var(--measure); }
.thrust h4 { font-size: 1.1875rem; margin-bottom: .5rem; }
.thrust p  { color: var(--ink-muted); margin-bottom: .9rem; }

.thrust__links { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .875rem; }
.thrust__links a { text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.thrust__links a:hover { border-bottom-color: var(--accent); }

@media (max-width: 560px) {
  .thrust { grid-template-columns: 1fr; gap: .5rem; }
  .thrust__num { padding-top: 0; }
}

/* ----------------------------------------------------------- figure box -- */
.figure { margin: 0; }
.figure img, .figure video { width: 100%; border-radius: var(--radius); }
.figure figcaption {
  margin-top: .6rem; font-size: .8125rem; color: var(--ink-faint); line-height: 1.5;
}

/* ------------------------------------------------------------ pub items -- */
.pubs { border-top: 1px solid var(--rule); }
.pub {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  gap: 0 1.25rem;
  padding-block: clamp(1.35rem, 2.6vw, 1.75rem);
  border-bottom: 1px solid var(--rule);
}
.pub--media { grid-template-columns: 3.75rem minmax(0, 1fr) 12.5rem; }
.pub__year {
  font-family: var(--mono); font-size: .8125rem; color: var(--ink-faint);
  padding-top: .25rem;
}
.pub__title {
  font-family: var(--sans); font-size: 1.0625rem; font-weight: 600;
  line-height: 1.35; margin-bottom: .35rem;
}
.pub__title a { color: var(--ink-strong); text-decoration: none; }
.pub__title a:hover { color: var(--accent); text-decoration: underline; }

.pub__authors { font-size: .9375rem; color: var(--ink-muted); margin-bottom: .3rem; }
.pub__authors .me { color: var(--ink); font-weight: 650; }

.pub__venue { font-size: .9375rem; color: var(--ink-muted); margin-bottom: .55rem; }
.pub__venue a { color: var(--ink-muted); text-decoration: underline; text-decoration-color: var(--rule-strong); }
.pub__venue a:hover { color: var(--accent); text-decoration-color: currentColor; }
.pub__type { color: var(--ink-faint); }
.pub__metric { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.pub__sep { color: var(--rule-strong); margin-inline: .45em; }
.pub__status { font-style: italic; }

.pub__award { color: var(--star); }
.pub__award::before { content: "★ "; }

.pub__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin-bottom: .5rem; }

.tag {
  display: inline-block;
  font-size: .75rem; letter-spacing: .01em;
  color: var(--accent); text-decoration: none;
  background: var(--accent-wash);
  border-radius: 100px; padding: .18rem .6rem;
  border: 1px solid transparent;
}
a.tag:hover { border-color: var(--accent); color: var(--accent-deep); }

.badge {
  display: inline-block; font-size: .75rem;
  color: var(--ink-muted); border: 1px solid var(--rule-strong);
  border-radius: 100px; padding: .18rem .6rem;
}

.pub__links { display: flex; flex-wrap: wrap; align-items: center; font-size: .875rem; }
.pub__links a { text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.pub__links a:hover { border-bottom-color: var(--accent); }
.pub__links .pub__sep { margin-inline: .5em; }

.pub__fig { align-self: start; }
.pub__fig img, .pub__fig video {
  width: 100%; height: auto;
  border-radius: var(--radius);
}

@media (max-width: 820px) {
  .pub, .pub--media { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .pub__fig { grid-column: 2; margin-top: .85rem; max-width: 20rem; }
}
@media (max-width: 520px) {
  .pub, .pub--media { grid-template-columns: 1fr; gap: .3rem; }
  .pub__year { padding-top: 0; }
  .pub__fig { grid-column: 1; }
}

/* ------------------------------------------------------------- projects -- */
.projects { display: grid; gap: clamp(1.75rem, 3.5vw, 2.5rem); }
.project {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
}
.projects > .project:last-child { border-bottom: 0; padding-bottom: 0; }
.project--nofig { grid-template-columns: minmax(0, 1fr); }

.project__fig img, .project__fig video {
  width: 100%; height: auto;
  border-radius: var(--radius);
}
.project h3 { font-size: 1.1875rem; margin-bottom: .2rem; }
.project h3 a { color: var(--ink-strong); text-decoration: none; }
.project h3 a:hover { color: var(--accent); }
.project__tagline { font-size: .9375rem; color: var(--accent); margin-bottom: .55rem; }
.project__blurb { color: var(--ink-muted); margin-bottom: .7rem; max-width: var(--measure); }
.project__collab { font-size: .875rem; color: var(--ink-faint); margin-bottom: .7rem; }
.project__related { font-size: .875rem; color: var(--ink-muted); margin-top: .6rem; }
.project__related span { color: var(--ink-faint); }

@media (max-width: 720px) {
  .project { grid-template-columns: 1fr; }
  .project__fig { max-width: 22rem; }
}

/* ------------------------------------------------------- research story -- */
.story {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  border: 1px solid var(--rule-strong); border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: var(--paper);
}
.story__eyebrow {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .7rem; display: block;
}
.story h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin-bottom: .6rem; }
.story p { color: var(--ink-muted); margin-bottom: 1.1rem; }
.story__fig img { border-radius: var(--radius); width: 100%; height: auto; }

.story--slim {
  border: 0; border-left: 3px solid var(--accent);
  padding: clamp(.25rem, 1vw, .5rem) 0 clamp(.25rem, 1vw, .5rem) clamp(1.1rem, 2.5vw, 1.75rem);
  background: transparent;
  grid-template-columns: minmax(0, 1fr) minmax(0, .7fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
@media (max-width: 760px) { .story--slim { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .story { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- news -- */
.news { border-top: 1px solid var(--rule); }
.news.scrollpanel { border-top: 1px solid var(--rule); }
.news.scrollpanel .news__item:last-child { border-bottom: 0; }
.news__item {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0 1.25rem;
  padding-block: clamp(1.1rem, 2.2vw, 1.4rem);
  border-bottom: 1px solid var(--rule);
}
.news__date {
  font-family: var(--mono); font-size: .8125rem; color: var(--ink-faint);
  padding-top: .2rem; white-space: nowrap;
}
.news__item h3 { font-size: 1rem; margin-bottom: .3rem; }
.news__item p { font-size: .9375rem; color: var(--ink-muted); margin-bottom: 0; max-width: var(--measure); }
.news__item--star h3::before { content: "★ "; color: var(--star); font-weight: 400; }
@media (max-width: 560px) {
  .news__item { grid-template-columns: 1fr; gap: .2rem; }
  .news__date { padding-top: 0; }
}

/* --------------------------------------------------------- scroll panel -- */
/* Used for the talks list: ~5 visible, the rest reached by scrolling.
   All items stay in the DOM so find-in-page and screen readers see them. */
.scrollpanel {
  position: relative;
  max-height: 34rem;              /* rem so it scales with user font size */
  overflow-y: auto;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  /* soft fade at the bottom edge as an affordance, not an instruction */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent);
  overscroll-behavior: contain;
}
.scrollpanel:focus-visible { outline-offset: 0; }
.scrollpanel[data-scrolled-end="true"] {
  -webkit-mask-image: none; mask-image: none;
}
.scrollpanel__count {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
  margin-top: .6rem;
}

/* ---------------------------------------------------------------- talks -- */
.talk {
  padding-block: clamp(.95rem, 2vw, 1.25rem);
  border-bottom: 1px solid var(--rule);
}
.talk:last-child { border-bottom: 0; }
.talk h3 { font-size: 1rem; margin-bottom: .25rem; }
.talk__meta { font-size: .9375rem; color: var(--ink-muted); }
.talk__type { color: var(--ink-faint); }

/* ------------------------------------------------------------- teaching -- */
.teach { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.teach__item { border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.teach__item--wide { grid-column: 1 / -1; }
.teach__kind {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: .5rem;
}
.teach__item h3 { font-size: 1.0625rem; margin-bottom: .2rem; }
.teach__role { font-size: .9375rem; color: var(--accent); margin-bottom: .5rem; }
.teach__item p, .teach__item li { font-size: .9375rem; color: var(--ink-muted); }
.teach__item ul { margin: 0; padding-left: 1.1rem; }
.teach__item li { margin-bottom: .35rem; }


/* ------------------------------------------------- dated entry list ------ */
/* Fieldwork, mentoring, teaching: a label column plus a body. */
.entries { border-top: 1px solid var(--rule); }
.entry {
  display: grid; grid-template-columns: 10rem minmax(0, 1fr);
  gap: 0 1.5rem;
  padding-block: clamp(1.1rem, 2.4vw, 1.5rem);
  border-bottom: 1px solid var(--rule);
}
.entry__date {
  font-family: var(--mono); font-size: .8125rem; color: var(--ink-faint);
  padding-top: .2rem; line-height: 1.45;
}
.entry h3 { font-size: 1.0625rem; margin-bottom: .25rem; }
.entry__place {
  display: block; font-family: var(--sans); font-size: .9375rem;
  font-weight: 400; color: var(--ink-muted); margin-top: .1rem;
}
.entry__role { font-size: .9375rem; color: var(--accent); margin-bottom: .4rem; }
.entry p { font-size: .9375rem; color: var(--ink-muted); margin-bottom: 0; max-width: var(--measure); }
.entry__role + p { margin-top: 0; }

@media (max-width: 620px) {
  .entry { grid-template-columns: 1fr; gap: .25rem; }
  .entry__date { padding-top: 0; }
}

/* --------------------------------------------------- record list --------- */
/* Awards and service: name + detail on the left, date right-aligned. */
.records { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.record {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: .8rem;
  border-bottom: 1px solid var(--rule);
}
.record__name { font-weight: 600; color: var(--ink-strong); }
.record__name a { color: var(--ink-strong); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.record__name a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.record__detail {
  display: block; font-size: .9375rem; color: var(--ink-muted);
  margin-top: .15rem; max-width: var(--measure);
}
.record__date {
  font-family: var(--mono); font-size: .8125rem; color: var(--ink-faint);
  white-space: nowrap; flex-shrink: 0;
}

/* One line per entry: name and detail run inline instead of stacking. */
.records--tight .record { padding-block: .6rem; }
.records--tight .record__detail {
  display: inline; margin-top: 0;
  max-width: none;
}
.records--tight .record__detail::before { content: " — "; color: var(--ink-faint); }

/* Leadership / high-impact service. The rule is mirrored by a transparent
   one on every other row so the text stays aligned. */
.record { padding-left: .85rem; border-left: 2px solid transparent; }
.record--hl { border-left-color: var(--accent); }
.record--hl .record__name,
.record--hl .record__name a { color: var(--accent); }

.records__note {
  margin-top: 1.1rem; font-size: .875rem; color: var(--ink-faint);
  max-width: var(--measure);
}
.records__note::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 2px; height: .85em; background: var(--accent);
  margin-right: .55em;
}
@media (max-width: 620px) {
  .record { flex-direction: column; gap: .2rem; }
  .record__date { order: -1; }
}

.pointer {
  font-size: 1.0625rem; color: var(--ink-muted);
  padding-left: .85rem; border-left: 2px solid var(--accent);
  max-width: var(--measure); margin: 0;
}

/* --------------------------------------------------- inline list --------- */
.inlinelist { font-size: .9375rem; color: var(--ink-muted); max-width: var(--measure); }

/* ------------------------------------------------- dated entry list end -- */

/* --------------------------------------------------------------- footer -- */
.foot {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2rem, 3.5vw, 2.75rem);
  background: var(--paper-sunk);
}
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 2rem; }
.foot h2 { font-size: 1.35rem; margin-bottom: .6rem; }
.foot p { color: var(--ink-muted); font-size: .9375rem; }
.foot__mail { font-family: var(--mono); font-size: .9375rem; }
/* Obfuscated address: no rest-state underline, but still discoverable on hover. */
.foot__mail a { text-decoration: none; }
.foot__mail a:hover { text-decoration: underline; }
.foot__links { display: flex; flex-wrap: wrap; gap: .5rem .6rem; margin-top: .9rem; }
.foot__links a { font-size: .875rem; text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.foot__links a:hover { border-bottom-color: var(--accent); }
.foot__fine { margin-top: 2.25rem; font-size: .8125rem; color: var(--ink-faint); }

/* ------------------------------------------------------------- utility --- */
.vh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }

/* ------------------------------------------------------------- motion ---- */
/* The only motion on the site: a short fade-up as sections enter. */
.rise { opacity: 0; transform: translateY(10px); }
.rise.is-in {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s ease;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .rise.is-in { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* -------------------------------------------------------------- print ---- */
@media print {
  .nav, .skip, .hero__portrait, .pub__fig, .project__fig { display: none; }
  body { font-size: 11pt; }
  .scrollpanel { max-height: none; overflow: visible; mask-image: none; -webkit-mask-image: none; }
  a { text-decoration: none; color: #000; }
  .band { border-color: #ccc; }
}