/* ==========================================================================
   Fonts
   ========================================================================== */

/* Atkinson Hyperlegible — body sans */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');

/* IBM Plex Mono — mono, used for accented small text (tags, meta) */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap');

/* ETBembo — Roman, lining figures (default running text / headings) */
@font-face {
  font-family: "ETBembo";
  src:
    url("fonts/ETBembo-RomanLF.woff2") format("woff2"),
    url("fonts/ETBembo-RomanLF.woff") format("woff"),
    url("fonts/ETBembo-RomanLF.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}


@font-face {
  font-family: "ETBembo";
  src:
    url("fonts/ETBembo-SemiBoldOSF.woff2") format("woff2"),
    url("fonts/ETBembo-SemiBoldOSF.woff") format("woff"),
    url("fonts/ETBembo-SemiBoldOSF.otf") format("opentype");
  font-style: bold;
  font-weight: 600;
  font-display: swap;
}

/* ETBembo Display — Italic display cut */
@font-face {
  font-family: "ETBembo";
  src:
    url("fonts/ETBembo-DisplayItalic.woff2") format("woff2"),
    url("fonts/ETBembo-DisplayItalic.woff") format("woff"),
    url("fonts/ETBembo-DisplayItalic.otf") format("opentype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* ---- Palette ---- */
  --purple: #5469a8;
  --purple-dark: #703404;
  --orange: #fc9f49;
  --plum: #8b4f8f;
  --umber: #a76a55;
  --ochre: #c98a2d;
  --paper: #ffffff;
  --ink: #24211f;

  --bg: var(--paper);
  --surface: #e2e8ff;
  --text: var(--ink);
  --muted: #6b625c;
  --border: #becbff;
  --accent: var(--orange); /* replaces the old neon-lime accent */

  /* ---- Fonts ---- */
  --font-sans: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "ETBembo", Georgia, serif;
  --font-serif-osf: "ETBembo OSF", Georgia, serif;
  --font-display: "ETBembo Display", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---- Header metrics ---- */
  --shell-max: 1060px;
  --shell-pad: 20px;                 /* left/right gutter shared by nav + searchbar */
  --nav-h: 64px;                     /* the menu row */
  --search-gap: 10px;                /* purple between menu row and search field */
  --input-h: 38px;                   /* fixed, so the logo can align to it */
  --search-pad-b: 14px;              /* purple below the search field */
  /* Logo scales continuously with the viewport rather than in breakpoint steps,
     and is anchored by its top edge so it stays put as it shrinks. That top is
     chosen so at full size its bottom lands on the bottom of the search field. */
  --logo-max: 90px;
  --logo-h: clamp(36px, 8.5vw, var(--logo-max));
  --logo-ar: 3.5762;                 /* 410.53 / 114.8 */
  --logo-w: calc(var(--logo-h) * var(--logo-ar));
  --logo-gutter: calc(var(--logo-w) + 22px);   /* space the logo claims on the left */
  --logo-top: calc(var(--nav-h) + var(--search-gap) + var(--input-h)
                   - var(--logo-max));         /* = 22px */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
}

a { color: var(--purple); }

/* ---------- Header / nav ---------- */
.site-header {
  background: var(--purple);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
}
.searchbar { order: 1; }   /* visually below the nav, though first in the DOM */
.nav {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  height: var(--nav-h);
  padding: 0 var(--shell-pad) 4px calc(var(--shell-pad) + var(--logo-gutter));
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  /* Links sit low in the row rather than centred in it: the logo hangs well
     below the row, so bottom-aligning puts them nearer its middle. */
  align-items: flex-end;
  gap: 12px 22px;
}
/* The logo is taller than the nav row, so it is taken out of flow and pinned by
   its top-left corner, hanging across both header rows. Out of flow it is also
   exactly its own size, so the link's clickable box matches the image (a margin
   used to add 12px on top); .nav and .searchbar keep clear of it with matching
   left padding. */
.brand {
  position: absolute;
  left: max(var(--shell-pad), calc(50% - var(--shell-max) / 2 + var(--shell-pad)));
  top: var(--logo-top);
  display: flex;
  align-items: center;
}
.brand-logo {
  display: block;
  height: var(--logo-h);
  width: var(--logo-w);
  box-sizing: border-box;
  background-color: #fff;
  background-image: url("img/logo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 6px;
  /* Proportional to the logo, so the white box scales with it rather than
     snapping at a breakpoint (4px/10px at the full 90px height). */
  padding: calc(var(--logo-h) * 0.045) calc(var(--logo-h) * 0.11);
}
.nav a:not(.brand) {
  color: #e9def9;
  text-decoration: none;
  font-size: 0.95rem;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.nav a:not(.brand):hover { color: #fff; }
.nav a[aria-current="page"] {
  color: #fff;
  border-bottom-color: #fff;
}

/* ---------- Layout ---------- */
main {
  max-width: 1060px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}
.hero {
  max-width: 1060px;
  margin: 0 auto;
  padding: 56px 20px 8px;
}
.hero h1 {
  font-family: var(--font-sans-serif);
  color: var(--purple);
  font-size: 2.2rem;
  margin: 0 0 0.4em;
  line-height: 1.15;
}
.lead {
  font-size: 1.88rem;
  line-height: 2.5rem;
  color: var(--text);
  font-family: var(--font-serif);

}

h2 {
  font-family: var(--font-serif);
  color: var(--purple);
  font-style: italic;
  font-size: 1.4rem;
  margin: 2.4em 0 0.8em;
}
section:first-of-type h2 { margin-top: 1.1em; }

/* Fake highlighter marker behind section headings */
h2 {
  position: relative;
  z-index: 0;
  display: inline-block;
}
h2::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.18em;
  right: -0.18em;
  bottom: 0.18em;
  height: 1em;
  background: var(--accent);
  opacity: 0.55;
  transform: rotate(-1.4deg);
}

/* ---------- News / item lists ---------- */
.items { list-style: none; margin: 0; padding: 0; }
.items li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  /*border-left: 5px solid var(--purple);*/
  border-radius: 6px 6px 6px 6px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.thumb {
  width: 120px;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
}
.thumb.avatar {        /* square headshots, shown as round portraits */
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.item-body { flex: 1; min-width: 0; }
.item-body > :first-child { margin-top: 0; }

/* Clickable tiles */
.items li.card {
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.items li.card:hover {
  /*border-left-color: var(--purple-dark);*/
  box-shadow: 0 2px 12px rgba(107, 63, 160, 0.12);
}
/* Tiles without a detail URL: not a link, so no pointer/hover affordance */
.items li.card:not([data-href]) { cursor: default; }
.items li.card:not([data-href]):hover {
  /*border-left-color: var(--purple);*/
  box-shadow: none;
}

/* Excerpt: clamped to two lines; click to reveal the rest, but only when there
   is a rest to reveal — script.js adds .expandable to the ones that overflow. */
.excerpt {
  margin: 6px 0 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.excerpt.expandable { cursor: pointer; }
.excerpt.expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.items h3 {
  font-family: var(--font-serif);
  margin: 0 0 4px;
  font-size: 1.05rem;
}
.items h3 a { color: inherit; text-decoration: none; }
.items h3 a:hover { text-decoration: underline; }

/* Accented small text: tag badges + meta lines, set in mono for a
   deliberate "label" contrast against the serif/sans body text */
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
  background: var(--purple);
  border-radius: 3px;
  padding: 2px 7px;
  vertical-align: middle;
}
.meta {
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 0.82rem;
  letter-spacing: 0.2px;
  margin: 0 0 6px;
}
.items p { margin: 4px 0 0; color: var(--text); }

/* Institution logos set in a lead paragraph: normalised to one height and
   spread across (nearly) the full column, so they read as a single row. */
.lead.logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 95%;
}
.lead.logo-row img {
  height: 52px;
  width: auto;
}

/* ---------- Institution logo grid ---------- */
.logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  align-items: center;
}
.logos li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  text-align: center;
}
.logos a {
  display: flex;
  align-items: center;
  justify-content: center;
}
.logos img {
  max-width: 100%;
  max-height: 170px;
  width: auto;
  height: auto;
}

/* ---------- Search ---------- */
/* Tally of matches that fall outside the quoted window. */
.results .more {
  font-family: var(--font-mono);
  font-size: 0.72em;
  color: var(--muted);
  white-space: nowrap;
}

/* Matched terms inside a result snippet. */
.results mark {
  background: #ffe9a8;
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

[hidden] { display: none !important; }   /* let `hidden` win over flex/grid */

/* Sits in the row below the nav, but starts clear of the overhanging logo and
   runs to the same right gutter as the nav links. */
.searchbar {
  width: 100%;
  max-width: var(--shell-max);
  margin: var(--search-gap) auto 0;
  padding: 0 var(--shell-pad) var(--search-pad-b)
             calc(var(--shell-pad) + var(--logo-gutter));
  display: flex;
  justify-content: flex-end;
}
.search-field {
  width: 100%;
}
#search-input {
  font-family: var(--font-serif);
  width: 100%;
  height: var(--input-h);
  font-size: 0.95rem;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);   /* slightly lighter purple at rest */
  color: #fff;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#search-input::placeholder { color: rgba(255, 255, 255, 0.7); }
.search-field { position: relative; }
/* "engaged" = has text, or focus is within the bar (JS toggles .active) → light purple */
.searchbar.active #search-input,
#search-input:focus {
  outline: none;
  background: #ecdff5;
  color: var(--text);
  border-color: #ecdff5;
}
.searchbar.active #search-input::placeholder,
#search-input:focus::placeholder { color: var(--muted); }

.results-inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 40px 20px 64px;
}
.results-inner h2 { margin-top: 0; }

/* Scope checkboxes overlaid on the right of the search field; revealed once the
   field is engaged (see .searchbar.active), and they stay while you use it. */
.scopes {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: none;
  flex-wrap: nowrap;
  gap: 0 14px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--muted);
  --fits: 1;   /* read by script.js; cleared at the stacking breakpoint */
}
.searchbar.active .scopes { display: flex; }
.scopes label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  white-space: nowrap;
}
.scopes input {
  accent-color: var(--accent);
  width: 11px;
  height: 11px;
  margin: 0;
}

.results-status {
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 14px;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 28px 20px 40px;
}

/* Once the shrinking logo leaves the menu too little room beside it, stop
   shrinking and stack instead: logo, then menu, then search field. */
@media (max-width: 750px) {
  :root { --logo-h: min(64px, 17vw); }   /* continuous with 8.5vw at 750px */
  .nav {
    height: auto;
    /* Same top offset as the pinned logo, so it does not shift on snapping. */
    padding: var(--logo-top) var(--shell-pad) 12px;
    justify-content: flex-start;
    row-gap: 10px;
  }
  .brand {
    position: static;
    flex: 0 0 100%;   /* own line, so the menu wraps below rather than beside */
  }
  .searchbar {
    margin-top: 0;
    padding-left: var(--shell-pad);
    justify-content: flex-start;   /* left edge under the logo, like the menu */
  }
  /* No wider than it was just before the snap (750px viewport, 64px logo). */
  .search-field { max-width: 460px; }
  /* Stacked means cramped: drop the scope checkboxes. `--fits: 0` tells
     script.js, which then searches everything — a hidden filter must never
     quietly narrow the results. */
  .scopes,
  .searchbar.active .scopes { display: none; }
  .scopes { --fits: 0; }
}

@media (max-width: 520px) {
  .hero h1 { font-size: 1.7rem; }
  .items li { flex-direction: column; }
  .thumb { width: 100%; height: 140px; }
}