/*
  ajainphysics.com — design B "Charcoal". See DESIGN.md for the colour tokens and components.
  Sections: fonts · tokens · base · top bar · hero · sections · cards · papers · talks · inner pages · footer · responsive
*/

@font-face { font-family: "Lato"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/lato-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/lato-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/lato-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/lato-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 900; font-style: normal; font-display: swap; src: url("../fonts/lato-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "AJ"; src: url("../fonts/AJ.woff") format("woff"); font-display: block; }

:root {
  --ink: #1d2126;
  --ink-2: #262b32;
  --ink-3: #323843;
  --on-ink: #f2f4f7;
  --on-ink-muted: #aab2bd;
  --paper: #f3f4f6;
  --surface: #ffffff;
  --text: #1f2328;
  --muted: #59616d;
  --rule: #e1e4e8;
  --blue: #1a63d6;
  --blue-ink: #5a9cff;
  --chip-text: #1757c0;                  /* chip labels: --blue is just under 4.5:1 on the chip tint over grey */
  --gold: #8a5a00;                       /* conference talks and single-authored papers: labels and stars */
  --gold-tint: rgb(212 167 44 / 0.16);
  --font: "Lato", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --wrap: 1120px;
  --radius: 14px;
  --light-only: block;  /* display value for things shown only in light mode, e.g. the switch's moon icon */
  --dark-only: none;
  color-scheme: light;
}

/* Dark colours. They apply when the visitor picks dark with the switch in the top bar,
   or when their system is set to dark and they haven't picked light.
   Keep the two blocks below identical. */
:root[data-theme="dark"] {
  --paper: #14171b;
  --surface: #1c2026;
  --text: #e8ebef;
  --muted: #a4acb7;
  --rule: #2c323a;
  --blue: #6aa6ff;
  --chip-text: #6aa6ff;
  --gold: #e3b341;
  --gold-tint: rgb(227 179 65 / 0.14);
  --light-only: none;
  --dark-only: block;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14171b;
    --surface: #1c2026;
    --text: #e8ebef;
    --muted: #a4acb7;
    --rule: #2c323a;
    --blue: #6aa6ff;
    --chip-text: #6aa6ff;
    --gold: #e3b341;
    --gold-tint: rgb(227 179 65 / 0.14);
    --light-only: none;
    --dark-only: block;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--blue); text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 3px; border-radius: 4px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 0.5rem; background: #fff; color: #000; padding: 0.5rem 0.9rem; border-radius: 8px; z-index: 20; }
.skip-link:focus { left: 0.5rem; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* ---------- Top bar ---------- */

.topbar { position: sticky; top: 0; z-index: 10; background: rgb(29 33 38 / 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid rgb(255 255 255 / 0.06); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4rem; }
.brand { display: flex; align-items: center; gap: 0.65rem; color: var(--on-ink); text-decoration: none; }
.brand-mark { font-family: "AJ", var(--font); font-size: 2rem; line-height: 1; color: var(--blue-ink); }
.brand-name { font-weight: 700; font-size: 1.1rem; letter-spacing: 0.02em; }
.brand-name span { color: var(--blue-ink); }

.nav { margin-left: auto; }
.nav ul { display: flex; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.nav a { display: block; padding: 0.45rem 0.8rem; border-radius: 999px; color: var(--on-ink-muted); text-decoration: none; font-size: 0.98rem; letter-spacing: 0.02em; transition: background 150ms ease, color 150ms ease; }
.nav a:hover { color: var(--on-ink); background: rgb(255 255 255 / 0.07); }
.nav a[aria-current="page"] { color: var(--on-ink); background: rgb(90 156 255 / 0.18); }

/* Light/dark switch: hidden unless JavaScript runs (the script in <head> adds the "js" class) */
.theme-toggle { display: none; flex: none; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; margin-left: -0.6rem; padding: 0; border: 1px solid rgb(255 255 255 / 0.16); border-radius: 50%; background: transparent; color: var(--on-ink-muted); cursor: pointer; transition: background 150ms ease, color 150ms ease, border-color 150ms ease; }
.js .theme-toggle { display: inline-flex; }
.theme-toggle:hover { color: var(--on-ink); border-color: rgb(255 255 255 / 0.3); background: rgb(255 255 255 / 0.07); }
.theme-toggle:focus-visible { border-radius: 50%; }
.theme-toggle svg { width: 1.15rem; height: 1.15rem; }
.theme-icon-moon { display: var(--light-only); }
.theme-icon-sun { display: var(--dark-only); }

/* ---------- Hero ---------- */

.hero { position: relative; overflow: hidden; background: var(--ink); color: var(--on-ink); border-bottom: 6px solid var(--blue-ink); }
.hero::after {
  content: "A"; position: absolute; right: -2rem; bottom: -9rem;
  font-family: "AJ", var(--font); font-size: 34rem; line-height: 1; color: #fff; opacity: 0.045; pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.8rem, 4vw, 3rem); align-items: center; padding-block: clamp(2.8rem, 7vw, 5rem); }
.hero-photo { width: clamp(11rem, 22vw, 16.5rem); aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 4px solid var(--blue-ink); box-shadow: 0 0 0 8px rgb(90 156 255 / 0.12); }
.hero h1 { margin: 0; font-weight: 400; font-size: clamp(2.6rem, 6.5vw, 4.4rem); line-height: 1.05; letter-spacing: 0.01em; }
.hero h1 strong { font-weight: 900; color: var(--blue-ink); }
.role { margin: 0.6rem 0 0; color: var(--on-ink-muted); font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; }
.tagline { margin: 1rem 0 0; max-width: 46ch; font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.5; color: var(--on-ink); }
.career { margin: 0.7rem 0 0; max-width: 62ch; color: var(--on-ink-muted); font-size: 0.98rem; line-height: 1.6; }

.quick-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.quick-links a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.95rem; border: 1px solid rgb(255 255 255 / 0.22); border-radius: 999px; color: var(--on-ink); text-decoration: none; font-size: 0.95rem; transition: border-color 150ms ease, background 150ms ease; }
.quick-links a:hover { border-color: var(--blue-ink); background: rgb(90 156 255 / 0.12); }
.quick-links a.primary { background: var(--blue-ink); border-color: var(--blue-ink); color: #0d1726; font-weight: 700; }
.quick-links svg { width: 1rem; height: 1rem; flex: none; }

/* ---------- Sections ---------- */

.section { padding-block: clamp(2.4rem, 6vw, 3.8rem); }
.section + .section { padding-top: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.section h2 { margin: 0; font-size: 0.95rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); }
.section h2::before { content: ""; display: inline-block; width: 1.6rem; height: 4px; margin-right: 0.7rem; vertical-align: middle; background: var(--blue); border-radius: 4px; }
.section-head a { font-weight: 700; text-decoration: none; white-space: nowrap; }
.section-head a:hover { text-decoration: underline; }

.intro { margin: -0.4rem 0 1.6rem; max-width: 70ch; color: var(--muted); }
.research-summary { margin: 0; max-width: 72ch; font-size: 1.05rem; line-height: 1.7; }

/* Theme cards */
.themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.theme { position: relative; display: flex; flex-direction: column; background: var(--ink-2); color: var(--on-ink); border-radius: var(--radius); overflow: hidden; transition: transform 160ms ease, box-shadow 160ms ease; }
.theme:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -20px rgb(0 0 0 / 0.6); }
.theme-art { color: var(--blue-ink); padding: 1rem 1.2rem 0.4rem; background: radial-gradient(120% 90% at 50% 0%, rgb(90 156 255 / 0.14), transparent 70%); }
.theme-art img { width: 100%; height: 118px; object-fit: contain; filter: drop-shadow(0 0 6px rgb(90 156 255 / 0.35)); }
.theme-body { padding: 0.9rem 1.25rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.theme h3 { margin: 0 0 0.35rem; font-size: 1.02rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.35; }
.theme h3 a { color: inherit; text-decoration: none; }
.theme h3 a::after { content: ""; position: absolute; inset: 0; }
.theme p { margin: 0; color: var(--on-ink-muted); font-size: 0.96rem; line-height: 1.55; }
.theme .more { margin-top: auto; padding-top: 0.9rem; color: var(--blue-ink); font-size: 0.9rem; font-weight: 700; }

/* Papers */
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.8rem, 4vw, 3rem); }
.papers, .talks { margin: 0; padding: 0; list-style: none; }
.paper { --card: var(--surface); background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--blue); border-radius: 10px; padding: 1rem 1.15rem; }
.paper + .paper { margin-top: 0.8rem; }
.paper-title { margin: 0 0 0.3rem; font-size: 1.06rem; font-weight: 700; line-height: 1.4; }
.paper-title a { color: var(--text); text-decoration: none; }
.paper-title a:hover { color: var(--blue); }
/* Authors: a list, each name with a small round photo (or initials) before it */
.paper-authors { display: flex; flex-wrap: wrap; gap: 0.3rem 0.95rem; margin: 0.15rem 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 0.95rem; }
.paper .paper-authors > li { display: inline-flex; align-items: center; gap: 0.4em; margin: 0; }
.paper-authors strong { color: var(--text); }
.author-photo { flex: none; width: 1.55em; height: 1.55em; border-radius: 50%; object-fit: cover; background: var(--rule); }
span.author-photo { display: inline-grid; place-items: center; width: 2.6em; height: 2.6em; font-size: 0.6em; font-weight: 700; letter-spacing: 0.02em; background: var(--ink-3); color: var(--on-ink); }
.paper-meta { margin: 0.55rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; font-size: 0.86rem; color: var(--muted); }
.chip { display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px; background: rgb(31 111 235 / 0.1); color: var(--chip-text); font-weight: 700; text-decoration: none; }
a.chip:hover { background: rgb(31 111 235 / 0.18); }
.chip.muted { background: transparent; border: 1px solid var(--rule); color: var(--muted); font-weight: 400; }

/* Talks timeline */
.talks { position: relative; padding-left: 1.4rem; }
.talks::before { content: ""; position: absolute; left: 0.32rem; top: 0.4rem; bottom: 0.4rem; width: 2px; background: var(--rule); }
.talk { position: relative; padding-bottom: 1.2rem; }
.talk::before { content: ""; position: absolute; left: -1.38rem; top: 0.42rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--paper); border: 3px solid var(--blue); }
.talk time { display: block; color: var(--blue); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; }
.talk-title { margin: 0.1rem 0 0; font-weight: 700; line-height: 1.4; }
.talk-where { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.95rem; line-height: 1.45; }
.talk-place { margin: 0.05rem 0 0; color: var(--muted); font-size: 0.86rem; line-height: 1.4; }
.talk-subject { margin: 0.3rem 0 0; font-size: 0.95rem; line-height: 1.45; }

/* ---------- Theme page ---------- */

.page-hero { position: relative; overflow: hidden; background: var(--ink); color: var(--on-ink); border-bottom: 6px solid var(--blue-ink); }
.page-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem; align-items: center; padding-block: clamp(2.2rem, 6vw, 3.6rem); }
.breadcrumb { margin: 0 0 0.8rem; padding: 0; list-style: none; display: flex; gap: 0.5rem; font-size: 0.92rem; color: var(--on-ink-muted); }
.breadcrumb li + li::before { content: "›"; margin-right: 0.5rem; }
.breadcrumb a { color: var(--on-ink-muted); }
.page-hero h1 { margin: 0; font-weight: 900; font-size: clamp(2.2rem, 5vw, 3.3rem); line-height: 1.1; letter-spacing: 0.01em; }
.lead { margin: 0.8rem 0 0; color: var(--on-ink-muted); font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.5; max-width: 42ch; }
.page-art { color: var(--blue-ink); }
.page-art img { width: 100%; height: auto; filter: drop-shadow(0 0 8px rgb(90 156 255 / 0.4)); }

.article-wrap { display: grid; grid-template-columns: minmax(0, 47rem) 18rem; justify-content: space-between; gap: clamp(2rem, 4vw, 3rem); padding-block: clamp(2rem, 5vw, 3rem); align-items: start; }
.talk-group { margin: -0.3rem 0 0.9rem; font-weight: 700; font-size: 1.05rem; }
.prose { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 2.2rem); }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.1rem; }
.prose h2 { margin: 2.2rem 0 1rem; font-size: 0.95rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; }
.figure { margin: 1.6rem 0; padding: 1rem; background: #fff; border-radius: 10px; border: 1px solid var(--rule); }
.figure img { margin-inline: auto; width: min(100%, 420px); }
.figure figcaption { margin-top: 0.7rem; color: #4f5661; font-size: 0.9rem; text-align: center; line-height: 1.5; }

.aside { position: sticky; top: 5.5rem; display: grid; gap: 1rem; }
.aside-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.aside-card h2 { margin: 0 0 0.8rem; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.people { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.8rem; }
.person { display: flex; align-items: center; gap: 0.75rem; }
.avatar { width: 2.9rem; height: 2.9rem; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; background: var(--ink-3); color: var(--on-ink); font-weight: 700; font-size: 0.95rem; }
.person-name { margin: 0; font-weight: 700; line-height: 1.3; }
.person-aff { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.3; }
.funding { margin: 0; font-size: 0.93rem; color: var(--muted); line-height: 1.5; }

.related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }

/* ---------- Footer ---------- */

.site-footer { position: relative; overflow: hidden; margin-top: 2rem; background: var(--ink); color: var(--on-ink-muted); border-top: 8px solid var(--blue-ink); font-size: 0.97rem; }
.site-footer::after { content: "A"; position: absolute; left: -1.5rem; bottom: -6.5rem; font-family: "AJ", var(--font); font-size: 20rem; line-height: 1; color: #fff; opacity: 0.05; pointer-events: none; }
.site-footer .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; padding-block: 2.6rem 2.2rem; }
.site-footer address { font-style: normal; line-height: 1.6; }
.site-footer address strong { display: block; color: var(--on-ink); font-size: 1.15rem; margin-bottom: 0.3rem; }
.site-footer a { color: var(--on-ink); }
.footer-links { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.3rem; text-align: right; }
.copyright { grid-column: 1 / -1; margin: 0; font-size: 0.85rem; opacity: 0.8; }
.analytics-toggle { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
.analytics-toggle:disabled { text-decoration: none; cursor: default; }
.analytics-toggle[hidden] { display: none; }

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .article-wrap { grid-template-columns: minmax(0, 1fr); }
  .aside { position: static; }
}

/* The menu moves to its own row once it no longer fits beside the name (7 items need about 830px) */
@media (max-width: 860px) {
  .topbar .wrap { flex-wrap: wrap; gap: 0.3rem 1rem; padding-block: 0.7rem 0.5rem; }
  .theme-toggle { order: 2; margin-left: auto; }
  .nav { order: 3; flex-basis: 100%; margin-left: 0; }
  .nav ul { flex-wrap: wrap; gap: 0.1rem; margin-left: -0.8rem; }
  .nav a { padding: 0.35rem 0.8rem; }
  .topbar { position: static; }
}

@media (max-width: 760px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); text-align: left; gap: 1.4rem; }
  .hero-photo { width: 11rem; }
  .page-hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .page-art { max-width: 22rem; }
  .site-footer .wrap { grid-template-columns: minmax(0, 1fr); }
  .footer-links { text-align: left; }
}

@media (max-width: 560px) {
  .themes, .related { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Additions for the Eleventy site ---------- */

.person-name a { color: inherit; text-decoration: none; }
.person-name a:hover { color: var(--blue); text-decoration: underline; }

.page-body { padding-block: clamp(2rem, 5vw, 3rem); }  /* content spans the full width unless a page has a sidebar */

.prose a { color: var(--blue); }
.prose ul:not(.papers):not(.talks):not(.people):not(.paper-authors) { padding-left: 1.2rem; }
.prose li + li { margin-top: 0.3rem; }
.prose h3 { margin: 1.8rem 0 0.6rem; font-size: 1.1rem; font-weight: 700; }

.draft-note { margin: 0 0 1.4rem; padding: 0.7rem 1rem; border-radius: 10px; background: rgb(31 111 235 / 0.08); border: 1px dashed rgb(31 111 235 / 0.45); color: var(--muted); font-size: 0.93rem; }

.video { position: relative; aspect-ratio: 16 / 9; margin: 1.6rem 0; border-radius: 10px; overflow: hidden; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.page-body .papers + h2, .page-body .talks + h2 { margin-top: 2.4rem; }

/* Publications page: a short summary, then one heading per year */
.page-body > .intro { max-width: none; margin: 0; }
.list-heading { margin: 2.4rem 0 1rem; padding-left: 2.3rem; text-indent: -2.3rem; font-size: 0.95rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); }  /* hanging indent: a wrapped line starts under the text, not under the dash (1.6rem + 0.7rem) */
.list-heading::before { content: ""; display: inline-block; width: 1.6rem; height: 4px; margin-right: 0.7rem; vertical-align: middle; background: var(--blue); border-radius: 4px; }
.intro + .list-heading { margin-top: 1.8rem; }
.page-body > .list-heading:first-child { margin-top: 0; }

/* Research page: earlier directions as small blocks */
.earlier { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.direction { position: relative; background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--blue); border-radius: 10px; padding: 0.95rem 1.15rem; }
.direction h3 { margin: 0 0 0.3rem; font-size: 1.04rem; font-weight: 700; line-height: 1.35; }
.direction h3 a { color: var(--text); text-decoration: none; }
.direction h3 a::after { content: ""; position: absolute; inset: 0; }
.direction:hover h3 a { color: var(--blue); }
.direction p { margin: 0; color: var(--muted); font-size: 0.94rem; line-height: 1.5; }
.direction .direction-meta { margin-top: 0.5rem; color: var(--blue); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.page-body > .section { padding-block: 2.2rem 0; }
@media (max-width: 760px) { .earlier { grid-template-columns: minmax(0, 1fr); } }

/* Talks: date and kind, links, featured cards and topic groups */
.talk-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6rem; margin: 0; }
.talk-head time { display: inline; color: var(--blue); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; }
.talk-topic .talk { padding-bottom: 0.85rem; }
.talk-kind { color: var(--muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
/* Conference talks: a gold pill with a star, and a gold star instead of the ring in the timeline */
.talk-kind.is-conference { color: var(--gold); background: var(--gold-tint); padding: 0.1rem 0.6rem; border-radius: 999px; }
.talk-kind.is-conference::before { content: "\2605"; margin-right: 0.35em; }
/* Review talks: the same star, on a solid gold pill */
.talk-kind.is-review { color: var(--surface); background: var(--gold); }
.talk.is-conference::before { content: "\2605"; display: grid; place-items: center; left: -1.57rem; top: 0.24rem; width: 1.1rem; height: 1.1rem; border: 0; border-radius: 50%; background: var(--paper); color: var(--gold); font-size: 1.05rem; line-height: 1; }
.talk-links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.45rem 0 0; font-size: 0.84rem; }
.chip.chip-play { background: var(--blue); color: var(--surface); }
.chip.chip-play::before { content: "\25B6"; margin-right: 0.4em; font-size: 0.75em; }
a.chip.chip-play:hover { background: var(--blue); filter: brightness(1.12); }
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.feature { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--blue); border-radius: 10px; padding: 0.95rem 1.15rem; }
/* The links sit at the foot of each card, so they line up across a row */
.feature .talk-links { margin-top: auto; padding-top: 0.45rem; }
.feature h3 { margin: 0.35rem 0 0.2rem; font-size: 1.04rem; font-weight: 700; line-height: 1.35; }
.feature .talk-where { margin: 0; }
.talk-topic { margin-top: 1.8rem; }
.talk-topic h3 { margin: 0 0 0.8rem; font-size: 1.06rem; font-weight: 700; line-height: 1.4; }
@media (max-width: 760px) { .features { grid-template-columns: minmax(0, 1fr); } }

/* A white panel behind lists of plain text (All talks, Teaching, CV), boxed like the text on the mySpires page.
   Not for lists of cards (papers, featured talks): those are boxes already. */
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 2.2rem); }
.panel > :first-child { margin-top: 0; }
.panel .talk::before { background: var(--surface); }  /* timeline dots and stars sit on the panel's white */
.panel .cv-list > li:last-child { padding-bottom: 0; }

/* CV page: a date column and the entry, one row per item */
.cv-more { margin: 2.5rem 0 0; text-align: center; }
.button-big { gap: 0.6rem; padding: 0.95rem 2.2rem; font-size: 1.1rem; }
.button-big svg { width: 1.3rem; height: 1.3rem; }
.button-note { padding: 0.05rem 0.5rem; border: 1px solid currentColor; border-radius: 999px; font-size: 0.75rem; letter-spacing: 0.06em; }  /* outlined: a tinted fill fell below 4.5:1 */
.button { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 1.1rem; border-radius: 999px; background: var(--blue); color: var(--surface); font-weight: 700; text-decoration: none; }
.button:hover { filter: brightness(1.12); }
.prose a.button { color: var(--surface); text-decoration: none; }  /* beat .prose a, which would make the text blue on blue */
.cv-list { margin: 0; padding: 0; list-style: none; }
.cv-list > li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.3rem 1.2rem; padding: 0.8rem 0; border-top: 1px solid var(--rule); }
.cv-list > li:first-child { border-top: 0; padding-top: 0.1rem; }
.cv-when { padding-top: 0.15rem; color: var(--blue); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.cv-title { margin: 0; font-weight: 700; line-height: 1.4; }
.cv-where { margin: 0.1rem 0 0; color: var(--muted); }
.cv-details { margin: 0.1rem 0 0; font-size: 0.95rem; }
.cv-where + .cv-details { margin-top: 0.35rem; }
.cv-text { margin: 0; }
@media (max-width: 560px) { .cv-list > li { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; } }

/* Paper titles and names keep their own colours inside article text */
.prose .paper-title a { color: var(--text); }
.prose .paper-title a:hover { color: var(--blue); }

/* ---------- About page and essays: photos, memoir, links ---------- */

.photo { float: right; clear: right; width: min(40%, 11rem); margin: 0.35rem 0 1rem 1.6rem; }  /* each photo stays beside its own paragraph */
.photo.left { float: left; clear: left; margin: 0.35rem 1.6rem 1rem 0; }
.photo img, .wide img { width: 100%; height: auto; border-radius: 10px; }
.photo figcaption, .wide figcaption { margin-top: 0.45rem; color: var(--muted); font-size: 0.86rem; line-height: 1.45; }
.wide { clear: both; margin: 1.8rem 0; }
.photo-credit { display: block; margin-top: 0.25rem; font-size: 0.75rem; }
.photo-credit a { color: inherit; }
.wide figcaption { text-align: center; }
.prose h2 { clear: both; }
.memoir { margin: 1.4rem 0; padding: 0.9rem 1.2rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); }
.memoir summary { cursor: pointer; font-weight: 700; }
.memoir[open] summary { margin-bottom: 1rem; }
.memoir-sign { font-style: italic; }
.memoir-note { color: var(--muted); font-size: 0.9rem; }
.back-link { clear: both; margin: 2rem 0 0 !important; }
.page-cta { margin: 2rem 0 0.5rem !important; text-align: center; }
@media (max-width: 760px) {  /* too narrow for text between two photos: stack them */
  .photo, .photo.left { float: none; width: 100%; max-width: 20rem; margin: 0 0 1.2rem; }
}

/* ---------- Text with a sidebar (About page: Stories) ---------- */

.with-aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 1100px) { .with-aside { grid-template-columns: minmax(0, 1fr) 16rem; } }
@media (max-width: 1099px) {
  .with-aside .aside { position: static; }
  .story-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .story-list { grid-template-columns: minmax(0, 1fr); } }
.story-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.story { display: block; overflow: hidden; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); color: inherit; text-decoration: none; transition: border-color 150ms ease; }
.story:hover, .story:focus-visible { border-color: var(--blue); }
.story img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.story-title { display: block; padding: 0.7rem 0.9rem 0.15rem; font-weight: 700; line-height: 1.3; }
.story:hover .story-title { color: var(--blue); }
.story-blurb { display: block; padding: 0 0.9rem 0.85rem; color: var(--muted); font-size: 0.88rem; line-height: 1.45; }

/* Publications: reviews and lecture notes in the sidebar, as compact cards */
.with-aside .intro { max-width: none; margin: 0; }
.aside .paper { padding: 0.8rem 0.9rem; }
.aside .list-heading { margin: 0 0 1rem; }  /* sidebars of cards (Publications, About): a heading and the cards, no box */
.aside .paper-title { font-size: 0.98rem; }
.aside .paper-authors { font-size: 0.88rem; }
.aside .paper-meta { font-size: 0.8rem; }

/* Single-authored research articles: gold edge and a gold star label, like conference talks */
.paper.is-single { border-left-color: var(--gold); }
.single-label { margin-left: auto; color: var(--gold); background: var(--gold-tint); padding: 0.1rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.single-label::before { content: "\2605"; margin-right: 0.35em; }
.single-star { color: var(--gold); }

/* Lay summary of a paper, below the date line, with a figure from the paper beside it (not on the home page).
   Figures keep a white background in both themes, as they were drawn for white paper. */
.paper-detail { margin-top: 0.7rem; display: flex; align-items: flex-start; gap: 1.1rem; }
.paper-summary { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 0.95rem; line-height: 1.6; }
.paper-figure { flex: 0 0 14rem; display: block; padding: 0.3rem; background: #fff; border: 1px solid var(--rule); border-radius: 8px; transition: border-color 150ms ease; }
.paper-figure:hover, .paper-figure:focus-visible { border-color: var(--blue); }
.paper-figure img { display: block; width: 100%; height: auto; border-radius: 4px; }
@media (max-width: 760px) {  /* too narrow for text beside a figure: the figure goes below */
  .paper-detail { flex-direction: column; gap: 0.8rem; }
  .paper-figure { flex: none; width: 100%; max-width: 21rem; }
}

/* On phones, a summary shows its first three lines, ending in a discreet "… more" that opens the rest
   and the figure (summaries.js). Wider screens, and browsers without JavaScript, always show everything. */
.summary-more { display: none; }
@media (max-width: 760px) {
  .js .summary-more { display: inline-block; align-self: flex-start; padding: 0; border: 0; background: none; color: var(--blue); font: inherit; font-size: 0.95rem; line-height: 1.6; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .js .summary-more-open, .js .paper.is-open .summary-more-closed { display: none; }
  .js .paper.is-open .summary-more-open { display: inline; }
  .js .paper:not(.is-open) .paper-detail { display: block; position: relative; }
  .js .paper:not(.is-open) .paper-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; cursor: pointer; }
  .js .paper:not(.is-open) .paper-figure { display: none; }
  .js .paper:not(.is-open) .summary-more { position: absolute; right: 0; bottom: 0; padding-left: 2.6em; background: linear-gradient(to right, transparent, var(--card) 2.2em); }
  .js .paper:not(.is-open) .summary-more::before { content: "\2026\00a0"; color: var(--text); }
  .js .paper.is-short .summary-more { display: none; }
  .js .paper.is-short .paper-summary { cursor: auto; }
}

/* Publications: pill links to INSPIRE, Google Scholar and ORCID, above the list */
.pill-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.pill-links a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 700; text-decoration: none; transition: border-color 150ms ease, color 150ms ease; }
.pill-links a:hover, .pill-links a:focus-visible { border-color: var(--blue); color: var(--blue); }
.pill-links svg { width: 1.1rem; height: 1.1rem; color: var(--blue); }
.pill-links + .list-heading { margin-top: 1.8rem; }