/* ==========================================================================
   stevenbondsmith  |  hand-written stylesheet

   Typefaces follow UHERO: Roboto for headings and interface, Open Sans for
   reading text. Surfaces are flat and squared, no rounded corners, no shadows.

   Warm neutrals carry the page. UHERO's deep teal #006080 is the single
   accent and stays in small doses: rules under headings, eyebrow labels,
   links, active states and hovers. Headings are warm ink, not teal, so the
   site reads as related to UHERO rather than as a UHERO page.
   ========================================================================== */

:root {
  /* Type */
  --font-head: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --size-display: 2.5rem;
  --size-h1: 2rem;
  --size-h2: 1.375rem;
  --size-h3: 1.0625rem;
  --size-body: 1.0625rem;
  --size-meta: 0.85rem;
  --lead-tight: 1.18;
  --lead-snug: 1.4;
  --lead-body: 1.7;
  --track-kicker: 0.14em;

  /* Space */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;

  /* Colour. One accent, UHERO deep teal, on warm neutrals. */
  --teal: #006080;
  --teal-dark: #00485f;
  --teal-deep: #00445c;
  --teal-wash: #eaf2f5;
  --link: #006080;
  --link-hover: #00445c;
  --ink: #1b2428;
  --ink-soft: #57666d;
  --ink-faint: #7d8b91;
  --paper: #fbfaf7;
  --card: #ffffff;
  --rule: #e2ded7;
  --rule-strong: #cdc7bd;
  --on-teal: #ffffff;
  --on-teal-soft: #cfe3ec;

  --radius: 0;
  --wrap: 960px;
  --measure: 68ch;

  /* Light only. A dark palette was tried twice and abandoned: the publisher
     logo tiles are dark artwork on transparent backgrounds and vanish on a
     dark card, and the journal cover thumbnails are white-background images
     that glare. Fixing it needs a light variant of every logo. */
  color-scheme: only light;
}

}

/* --------------------------------------------------------------- reset -- */

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lead-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: var(--lead-tight);
  margin: 0 0 var(--s4);
}

p { margin: 0 0 var(--s4); }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s5);
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--s4); top: var(--s4); z-index: 100;
  background: var(--card); padding: var(--s2) var(--s4);
}

:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* Short accent rule under headings and eyebrow labels. */
.kicker::after,
.pub-section h2::after,
.section > h2::after,
.cv-block h3::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  background: var(--teal);
  margin-top: var(--s2);
}

/* -------------------------------------------------------------- header -- */

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding-top: var(--s3);
  padding-bottom: var(--s3);
  flex-wrap: wrap;
}

.brand { text-decoration: none; color: var(--ink); display: block; }
.brand:hover { color: var(--ink); }
.brand-name {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}
.brand-role {
  display: block;
  font-family: var(--font-head);
  font-size: 0.72rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-nav { display: flex; gap: var(--s5); }
.site-nav a {
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 3px solid transparent;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.site-nav a.active { color: var(--ink); border-bottom-color: var(--teal); }

.nav-toggle {
  display: none;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--rule-strong);
  padding: var(--s2) var(--s3);
  color: var(--ink);
  cursor: pointer;
}

/* ---------------------------------------------------------------- hero -- */

.hero { padding: var(--s8) 0 var(--s7); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: var(--s8);
  align-items: start;
}

.kicker {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: var(--s4);
}

.hero h1 {
  font-size: var(--size-display);
  color: var(--ink);
  margin-bottom: var(--s3);
}

.hero-lead {
  font-size: 1.15rem;
  color: var(--ink-soft);
  line-height: var(--lead-snug);
  margin-bottom: var(--s5);
  max-width: 36ch;
}

/* The hero column is already bounded by the portrait beside it. */
.hero-text p { max-width: none; }

.hero-figure { margin: 0; }
.hero-figure img { width: 100%; border-bottom: 4px solid var(--teal); }
.hero-figure figcaption {
  font-family: var(--font-head);
  font-size: var(--size-meta);
  color: var(--ink-faint);
  margin-top: var(--s3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------- profile links -- */

.profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s5);
}

.profile-link {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--teal);
  border: 1px solid var(--rule-strong);
  padding: var(--s2) var(--s4);
  background: var(--card);
}
.profile-link:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--on-teal);
}

/* --------------------------------------------------------------- bands -- */

.band {
  background: var(--teal-wash);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--s7) 0;
  margin: var(--s7) 0;
}

.focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s5);
}

/* Four cards fall as three then one, which looks accidental. Two by two reads
   as deliberate. min(100%, 340px) still collapses to a single column on a
   phone. Applies to any four-card band, so adding a fifth topic reverts to the
   normal flow without anyone editing this. */
.focus-grid:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.focus-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--teal);
  padding: var(--s5);
}
.focus-card h3 {
  font-size: var(--size-h3);
  color: var(--ink);
  margin-bottom: var(--s2);
}
.focus-card p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }

/* Link through to the page that collects the work on this theme. The card is
   a flex column and the link takes the leftover space above it, so the links
   sit on one line across the row however unevenly the text falls. */
.focus-card { display: flex; flex-direction: column; }
.focus-card h3 a { color: inherit; text-decoration: none; }
.focus-card h3 a:hover { color: var(--teal); }
.focus-more { margin-top: auto !important; padding-top: var(--s4); }
.focus-more a {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.focus-more a::after { content: "\00a0\2192"; }
.focus-more a:hover { text-decoration: underline; }

/* -------------------------------------------- teal page banner, UHERO's -- */

.page-head {
  padding: var(--s8) 0 var(--s6);
  border-bottom: 1px solid var(--rule);
}
.page-head h1 { color: var(--ink); font-size: var(--size-h1); }
.page-lead {
  font-size: 1.05rem;
  color: var(--ink-soft);
}
.page-head + .band { margin-top: 0; border-top: none; }

.section {
  padding-top: var(--s7);
  padding-bottom: var(--s8);
}

/* -------------------------------------------------- publication lists -- */

.pub-section { margin-bottom: var(--s8); }
.pub-section h2 {
  font-size: var(--size-h2);
  color: var(--ink);
  margin-bottom: var(--s5);
}

.section-blurb {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-top: calc(var(--s5) * -1 + var(--s2));
  margin-bottom: var(--s5);
}

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

.pub {
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--rule);
}

/* Entries with a cover image put it in a narrow column to the left. Entries
   without one are unaffected, so covers can be added a few at a time. */
.pub.with-cover {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
}
.pub-cover {
  width: 60px;
  height: auto;
  border: 1px solid var(--rule);
}

/* Entries with no cover art get a labelled tile of the same size, so the
   column stays straight instead of collapsing on some rows. */
.pub-cover-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 85px;
  background: var(--teal-wash);
  border-top: 3px solid var(--teal);
  font-family: var(--font-head);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  text-align: center;
  padding: 0 2px;
}

/* Video thumbnails are 16:9, so they get a wider column than a book cover
   and sit centred against the first line of the entry. */
/* Wider thumbnail than a cover, so the max-width has to grow to match or the
   text column ends up 44px narrower than every other entry. */
.pub.pub-video {
  grid-template-columns: 104px minmax(0, 1fr);
}
.pub-video .pub-cover { width: 104px; }
.pub-video .pub-cover-blank { height: 59px; }

/* Where a publisher logo exists, it sits centred in the tile instead of the
   lettering. Contained, never cropped or stretched. */
.pub-cover-logo { padding: 0 6px; background: var(--card); }
.pub-cover-logo img {
  width: 100%;
  height: auto;
  max-height: 70%;
  object-fit: contain;
}
.pub-body > *:last-child { margin-bottom: 0; }
.pub:last-child { border-bottom: none; }

.pub-title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: var(--lead-snug);
  color: var(--ink);
  margin-bottom: var(--s2);
}

.pub-meta, .pub-venue, .pub-note {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-bottom: var(--s1);
}
.pub-venue em { color: var(--ink); font-style: italic; }
.pub-note { color: var(--ink-faint); font-size: var(--size-meta); }

.pub-abstract { margin: var(--s3) 0 var(--s2); }
.pub-abstract summary {
  font-family: var(--font-head);
  font-size: var(--size-meta);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
  cursor: pointer;
}
.pub-abstract[open] summary { margin-bottom: var(--s3); }
.pub-abstract p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  border-left: 3px solid var(--teal);
  padding-left: var(--s4);
  margin: 0;
}

.pub-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin: var(--s3) 0 0;
  font-family: var(--font-head);
  font-size: var(--size-meta);
}
.pub-links a { font-weight: 700; }
/* A live data tool is a different kind of thing from a PDF, so it is marked. */
.pub-links a.pub-data { color: var(--teal); }
.pub-links a.pub-data::before { content: "\2192\00a0"; }

/* Press coverage is secondary to the paper itself, so it reads quieter:
   normal weight, muted colour, comma separated, behind a small label. */
.pub-coverage {
  margin: var(--s2) 0 0;
  font-size: var(--size-meta);
  color: var(--ink-faint);
  line-height: 1.6;
}
.pub-coverage-label {
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: var(--s2);
}
.pub-coverage a {
  color: var(--ink-soft);
  font-weight: 400;
  text-decoration: none;
  border-bottom: 1px dotted var(--rule-strong);
}
.pub-coverage a:hover { color: var(--link); border-bottom-color: var(--link); }

.pub-list.compact .pub {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s5);
  padding: var(--s3) 0;
  max-width: none;
}
.pub-list.compact .pub-title { font-size: 0.98rem; font-weight: 400; margin: 0; }
.pub-when {
  font-family: var(--font-head);
  font-size: var(--size-meta);
  color: var(--ink-faint);
  white-space: nowrap;
}
.pub-where { color: var(--ink-faint); font-size: var(--size-meta); }
.pub-where::before { content: "\2009\00b7\2009"; }

/* ---------------------------------------------------------------- media -- */

/* Coverage is grouped by the story that prompted it, as in the CV.
   Group headings carry the structure; the items themselves stay compact,
   one line each wherever the headline is short enough. */
.media-group { margin-bottom: var(--s6); }
.media-topic {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: var(--lead-snug);
  color: var(--ink);
  margin: 0 0 var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--rule);
}

.media-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.media-item {
  padding: 0 0 var(--s2);
  line-height: var(--lead-snug);
}
.media-item:last-child { padding-bottom: 0; }

.media-headline { font-size: 0.97rem; color: var(--ink); }
.media-headline a { text-decoration: none; }
.media-headline a:hover { text-decoration: underline; }

.media-meta { font-size: var(--size-meta); white-space: nowrap; }
.media-outlet {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink-soft);
}
.media-date { color: var(--ink-faint); }
.media-note { font-size: var(--size-meta); color: var(--ink-faint); }

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.88em;
  background: var(--teal-wash);
  padding: 0.1em 0.35em;
  border: 1px solid var(--rule);
}

/* ------------------------------------------------------------------ cv -- */

/* A pub-section used inside a band carries its own trailing margin, which
   would leave a gap between the cards and the foot of the band. */
.pub-section.in-band { margin-bottom: 0; }

.downloads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s4);
}
.download {
  display: block;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--teal);
  padding: var(--s4) var(--s5);
}
.download:hover { background: var(--teal-wash); }
.download-label {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--s2);
}
.download-note {
  display: block;
  font-size: var(--size-meta);
  color: var(--ink-soft);
  line-height: var(--lead-snug);
}

.cv-block { margin-bottom: var(--s6); }
.cv-block h3 {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: var(--s4);
}

/* --measure is the comfortable reading width for the text itself, so the date
   column and the gap have to be added on top of it. Setting the measure on the
   grid as a whole squeezed the description column by 9rem and wrapped entries
   that fit on one line. Same reasoning as .pub.with-cover above. */
/* The date column only has to hold "2026 to present", so 9rem left about 4rem
   of dead space before the description. Fixed rather than max-content so that
   every block on the page lines up: max-content sizes each list separately,
   and a list of bare years would indent differently from a list of ranges. */
.cv-list {
  display: grid;
  grid-template-columns: 6.75rem minmax(0, 1fr);
  gap: var(--s2) var(--s4);
  margin: 0;
}
.cv-list dt {
  font-family: var(--font-head);
  font-size: var(--size-meta);
  color: var(--ink-faint);
  padding-top: 0.2em;
}
.cv-list dd { margin: 0; font-size: 0.97rem; }

.cv-bullets { margin: 0; padding-left: 1.1rem; }
.cv-bullets li { margin-bottom: var(--s2); font-size: 0.97rem; }
.cv-bullets li::marker { color: var(--teal); }

/* --------------------------------------------------------------- footer -- */

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink-soft);
  padding: var(--s7) 0 var(--s8);
  margin-top: var(--s8);
}

.footer-links { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.footer-note { font-size: 0.92rem; color: var(--ink-soft); }
.footer-fine {
  font-size: var(--size-meta);
  color: var(--ink-faint);
  margin: 0;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 800px) {
  :root { --size-display: 2rem; --size-h1: 1.6rem; }

  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .hero-figure { max-width: 260px; }

  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: var(--s3);
    padding-top: var(--s4);
  }
  .site-nav.open { display: flex; }
  .site-nav a { border-bottom: none; }
  .site-nav a.active { border-bottom: none; color: var(--teal); }

  .cv-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cv-list dt { padding-top: var(--s3); }
  .cv-list dd { margin-bottom: var(--s2); }

  .pub-list.compact .pub { flex-direction: column; gap: var(--s1); }
  .pub.with-cover { grid-template-columns: 48px minmax(0, 1fr); gap: var(--s4); }
  .pub-cover { width: 48px; }
  .pub.pub-video { grid-template-columns: 80px minmax(0, 1fr); }
  .pub-video .pub-cover { width: 80px; }
  .pub-video .pub-cover-blank { height: 45px; }
}

@media print {
  .site-header, .site-footer, .nav-toggle, .hero-figure { display: none; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .page-head h1, .page-head .kicker, .page-lead { color: #000; }
  .pub-abstract { display: none; }
  a { color: #000; text-decoration: none; }
}