/* ==========================================================================
   islamobaidat site stylesheet  (direction A: "Offset")
   Everything you might want to change lives in the DESIGN TOKENS block.
   Layout, components, states, and print follow, in that order.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted, subset WOFF2, SIL OFL; see assets/fonts/)
   -------------------------------------------------------------------------- */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/source-serif-4-400.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/source-serif-4-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/source-serif-4-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2"); }

/* --------------------------------------------------------------------------
   2. DESIGN TOKENS  (change colours and fonts here and nowhere else)
   -------------------------------------------------------------------------- */
:root {
  /* type */
  --font-text: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-size: clamp(1rem, 0.92rem + 0.35vw, 1.1875rem);   /* 16px to 19px */
  --leading: 1.55;
  --measure: 44rem;                                          /* max line length for prose */

  /* light scheme */
  --bg: #f7f3ec;          /* paper */
  --bg-raised: #efe9de;   /* code blocks, cards */
  --ink: #1c1b18;         /* body text */
  --muted: #5a554b;       /* secondary text (6.5:1 on paper) */
  --accent: #9c3a1c;      /* links and marks (5.4:1 on paper) */
  --accent-ink: #ffffff;  /* text on accent */
  --rule: #d6cec0;        /* decorative rules */
  --line: #7f786b;        /* borders on controls (3.3:1 on paper) */
  --dots: #b9b0a0;        /* dotted section separators */
  --focus: #1f5fbf;       /* focus ring */
  --mark-bg: #f3e2b8;     /* highlighted term */
  --selection: #efd7c4;

  /* spacing and shape */
  --gutter-w: 6.5rem;     /* width of the offset column on wide screens */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;
  --radius: 2px;
  --header-h: 3.25rem;
  --tap: 44px;            /* minimum touch target */
}

/* dark scheme: follows the OS unless the toggle forces a theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15140f; --bg-raised: #1f1d16; --ink: #ece6d8; --muted: #aaa392;
    --accent: #f0a36a; --accent-ink: #15140f; --rule: #3a362d; --line: #8a8375; --dots: #5a554a;
    --focus: #8ab4f8; --mark-bg: #4a3a1a; --selection: #4a3524;
  }
}
:root[data-theme="dark"] {
  --bg: #15140f; --bg-raised: #1f1d16; --ink: #ece6d8; --muted: #aaa392;
  --accent: #f0a36a; --accent-ink: #15140f; --rule: #3a362d; --line: #8a8375; --dots: #5a554a;
  --focus: #8ab4f8; --mark-bg: #4a3a1a; --selection: #4a3524;
}

/* placeholder images are light SVGs; invert them in the dark scheme */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .placeholder-img { filter: invert(0.92) hue-rotate(180deg); } }
:root[data-theme="dark"] .placeholder-img { filter: invert(0.92) hue-rotate(180deg); }

/* high contrast preference: drop the soft greys */
@media (prefers-contrast: more) {
  :root { --muted: var(--ink); --rule: var(--line); --dots: var(--line); }
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: var(--text-size); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-text); line-height: var(--leading);
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
  min-height: 100dvh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
::selection { background: var(--selection); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:where(:not([class])) { overflow-wrap: anywhere; }
@media (hover: hover) { a:hover { text-decoration-thickness: 2px; } }
strong, b { font-weight: 600; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.15; letter-spacing: -0.005em; margin: 0 0 0.5em; overflow-wrap: anywhere; }
h1 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3.1rem); letter-spacing: -0.015em; line-height: 1.05; }
h2 { font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); }
h3 { font-size: 1.12rem; }
h4 { font-size: 1rem; }
p { margin: 0 0 1em; max-width: var(--measure); }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: 0.25em; }
code, pre, kbd, .mono { font-family: var(--font-mono); font-size: 0.86em; }
pre { background: var(--bg-raised); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--space-3) var(--space-4); overflow-x: auto; margin: 0 0 var(--space-3); line-height: 1.45; }
img, svg { max-width: 100%; height: auto; }
button, input, select { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px dotted var(--dots); margin: var(--space-6) 0; }
mark { background: var(--mark-bg); color: inherit; padding: 0 0.15em; }
dl { margin: 0; }
dt { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); letter-spacing: 0.02em; }
dd { margin: 0 0 var(--space-3); }

/* focus: visible in both schemes, never removed */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius); }
:focus:not(:focus-visible) { outline: none; }
main:focus { outline: none; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-4); top: -100%; background: var(--ink); color: var(--bg); padding: var(--space-2) var(--space-4); z-index: 100; font-family: var(--font-mono); font-size: 0.85rem; text-decoration: none; }
.skip-link:focus { top: var(--space-2); }

.wrap { width: 100%; max-width: 74rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 3rem); }

/* --------------------------------------------------------------------------
   4. Header, navigation, theme toggle
   -------------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px dotted var(--dots); padding-top: env(safe-area-inset-top); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); min-height: var(--header-h); }
.brand { font-family: var(--font-mono); font-size: 0.86rem; letter-spacing: 0.02em; text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; min-height: var(--tap); white-space: nowrap; }
.brand-name { font-weight: 600; }
.brand-sep, .brand-host { color: var(--muted); }
.brand-sep { margin: 0 0.4em; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-3); }
.site-nav li { margin: 0; }
.site-nav a { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-1); border-bottom: 2px solid transparent; }
.site-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
@media (hover: hover) { .site-nav a:hover { color: var(--accent); } }
.menu-button, .theme-toggle { display: none; font-family: var(--font-mono); font-size: 0.78rem; background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 var(--space-3); min-height: var(--tap); min-width: var(--tap); cursor: pointer; align-items: center; gap: 0.35em; }
.theme-toggle { margin-left: auto; }
.js .theme-toggle { display: inline-flex; }
@media (hover: hover) { .menu-button:hover, .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } }

/* wide (78 rem and up): brand, nav, and toggle on one row. Below that (with JS) the nav
   is collapsed behind the Menu button; without JS it is always visible and wraps. */
@media (min-width: 78rem) {
  .site-nav { margin-left: auto; }
  .theme-toggle { margin-left: 0; }
}
@media (min-width: 78rem) and (max-width: 84rem) {
  .header-inner { gap: var(--space-2) var(--space-4); }
}
@media (max-width: 40rem) {
  .header-inner { gap: var(--space-2) var(--space-3); }
}
@media (max-width: 77.99rem) {
  .js .menu-button { display: inline-flex; order: 3; }
  .js .theme-toggle { order: 2; margin-left: auto; }
  .js .site-nav { display: none; order: 4; flex-basis: 100%; }
  .js .site-nav.is-open { display: block; max-height: calc(100dvh - var(--header-h) - 1rem); overflow: auto; padding-bottom: var(--space-3); }
  .js .site-nav ul { flex-direction: column; gap: 0; }
  .js .site-nav a { width: 100%; padding: 0 var(--space-2); border-bottom: 1px dotted var(--dots); }
  .js .site-nav a[aria-current="page"] { border-bottom: 1px dotted var(--dots); box-shadow: inset 3px 0 0 var(--accent); padding-left: var(--space-3); }
}
/* phones: the brand, the theme toggle, and the Menu button no longer share one row,
   so the toggle moves into the open menu panel (below the page list) */
@media (max-width: 25.99rem) {
  .js .theme-toggle { display: none; order: 5; flex-basis: 100%; margin: 0 0 var(--space-3); justify-content: center; }
  .js .site-nav.is-open ~ .theme-toggle { display: inline-flex; }
  .js .site-nav.is-open { padding-bottom: var(--space-2); max-height: calc(100dvh - var(--header-h) - 4.5rem); }
}

/* --------------------------------------------------------------------------
   5. Sections with the offset gutter (the signature motif)
   -------------------------------------------------------------------------- */
.section { display: grid; grid-template-columns: 1fr; gap: var(--space-1) var(--space-6); padding: var(--space-6) 0; border-bottom: 1px dotted var(--dots); }
.section:last-child { border-bottom: 0; }
.gutter { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); letter-spacing: 0.06em; padding-top: 0.5rem; }
.section-title { margin-bottom: var(--space-4); }
@media (min-width: 52rem) {
  .section { grid-template-columns: var(--gutter-w) minmax(0, 1fr); }
  .gutter { padding-top: 0.55rem; }
}
.section-body > :last-child { margin-bottom: 0; }
.lede { font-size: 1.08rem; }
.small { font-size: 0.9rem; }
.muted { color: var(--muted); }
.meta { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); letter-spacing: 0.01em; }
.meta a { color: inherit; display: inline-block; padding: 0.35em 0; }
.two-col { display: grid; grid-template-columns: 1fr; gap: var(--space-5) var(--space-6); }
@media (min-width: 52rem) { .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* page intro (h1 + summary) */
.page-head { padding: var(--space-6) 0 var(--space-4); border-bottom: 1px dotted var(--dots); }
.page-head h1 { margin-bottom: 0.35em; }
.page-head .lede { margin-bottom: 0.5em; }
.page-head .meta { margin: 0; }

/* --------------------------------------------------------------------------
   6. Home: identity block
   -------------------------------------------------------------------------- */
.identity { display: grid; grid-template-columns: 1fr; gap: var(--space-5) var(--space-7); padding: var(--space-6) 0; border-bottom: 1px dotted var(--dots); }
@media (min-width: 52rem) { .identity { grid-template-columns: minmax(0, 1fr) 12.5rem; align-items: start; } }
.identity h1 { margin-bottom: 0.3em; }
.role { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); margin: 0 0 var(--space-5); }
.role .sep { color: var(--accent); margin: 0 0.35em; }
.cta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); font-family: var(--font-mono); font-size: 0.8rem; margin: 0; padding: 0; list-style: none; }
.cta li { margin: 0; }
.cta a { display: inline-flex; align-items: center; min-height: var(--tap); }
.portrait { border: 1px dashed var(--dots); display: block; width: 100%; max-width: 20rem; }
@media (max-width: 51.99rem) { .identity:not(.has-placeholder) > div:last-child { order: -1; } .portrait { max-width: 8.5rem; } .portrait-note { max-width: 24rem; } }
.portrait img { display: block; width: 100%; height: auto; }
.portrait-note { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); margin: var(--space-2) 0 0; max-width: 20rem; }

/* --------------------------------------------------------------------------
   7. Lists and cards used across pages
   -------------------------------------------------------------------------- */
.areas { display: grid; grid-template-columns: 1fr; gap: var(--space-4) var(--space-6); margin: 0 0 var(--space-4); padding: 0; list-style: none; counter-reset: area; }
@media (min-width: 40rem) { .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.areas li { border-top: 1px solid var(--rule); padding-top: var(--space-3); margin: 0; }
.areas h3 { font-size: 1.05rem; margin: 0 0 0.3em; }
.areas h3::before { counter-increment: area; content: counter(area, decimal-leading-zero); font-family: var(--font-mono); font-weight: 400; color: var(--accent); font-size: 0.72rem; letter-spacing: 0.06em; margin-right: 0.5em; vertical-align: 0.15em; }
.areas h3 a { color: inherit; text-decoration: none; }
@media (hover: hover) { .areas h3 a:hover { color: var(--accent); } }
.areas p { margin: 0; color: var(--muted); font-size: 0.95rem; }

.keywords { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.keywords li { margin: 0; font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.15em 0.5em; }

.paper-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.paper-list li { display: grid; grid-template-columns: 1fr; gap: 0 var(--space-4); padding: var(--space-2) 0; border-top: 1px solid var(--rule); margin: 0; }
.paper-list li:last-child { border-bottom: 1px solid var(--rule); }
.paper-list .when { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); padding-top: 0.2rem; overflow-wrap: anywhere; }
.paper-list .what a { color: var(--ink); }
.paper-list .who { display: block; color: var(--muted); font-size: 0.9rem; }
@media (min-width: 40rem) { .paper-list li { grid-template-columns: 8.5rem minmax(0, 1fr); } }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.facts li { margin: 0; border-top: 1px solid var(--rule); padding-top: var(--space-2); }
.facts b { display: block; font-size: 1.7rem; font-weight: 600; line-height: 1.1; }
.facts span { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }

.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li { display: grid; grid-template-columns: 1fr; gap: 0 var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--rule); margin: 0; }
.news-list li:last-child { border-bottom: 1px solid var(--rule); }
.news-list time, .news-list .when { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); padding-top: 0.25rem; }
.news-list h3 { font-size: 1.02rem; margin: 0 0 0.2em; }
.news-list p { margin: 0; font-size: 0.95rem; }
.news-list.compact li { padding: var(--space-2) 0; }
.news-list.compact h3 { font-weight: 400; font-size: 1rem; }
@media (min-width: 40rem) { .news-list li { grid-template-columns: 8.5rem minmax(0, 1fr); } }

.callout { border-left: 3px solid var(--accent); padding: var(--space-1) 0 var(--space-1) var(--space-4); margin: 0 0 var(--space-4); }
.callout .kicker { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 0.3em; }
.callout p { margin: 0.35em 0; }

.badge { display: inline-block; font-family: var(--font-mono); font-size: 0.76rem; line-height: 1.6; padding: 0 0.45em; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); vertical-align: 0.1em; white-space: nowrap; }
.badge-open { border-color: var(--accent); color: var(--accent); }
.badge-under-review, .badge-closed { border-style: dashed; }
.badge-current { border-color: var(--accent); color: var(--accent); }
.countdown { display: none; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); letter-spacing: 0.01em; min-height: 1.5em; margin: 0.1em 0 0.35em; }
.js .countdown { display: block; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-4); list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.card { border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--space-4); margin: 0; background: var(--bg); }
.card h3 { margin: 0 0 0.3em; font-size: 1.05rem; }
.card .kind { font-family: var(--font-mono); font-size: 0.76rem; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 0.4em; }
.card p { font-size: 0.95rem; margin: 0 0 0.6em; }
.card .meta { margin: 0; }

/* people */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--space-5) var(--space-4); list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.person { margin: 0; }
.person .photo { display: block; width: 100%; max-width: 7.5rem; aspect-ratio: 1; border: 1px dashed var(--dots); margin-bottom: var(--space-2); }
.person .photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.person .name { font-weight: 600; margin: 0; }
.person .since, .person .topic { display: block; font-size: 0.9rem; color: var(--muted); margin: 0; }
.person .since { font-family: var(--font-mono); font-size: 0.78rem; }
.alumni-list { list-style: none; margin: 0; padding: 0; }
.alumni-list li { display: grid; grid-template-columns: 1fr; gap: 0 var(--space-4); padding: var(--space-2) 0; border-top: 1px solid var(--rule); margin: 0; }
.alumni-list li:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 40rem) { .alumni-list li { grid-template-columns: 8.5rem minmax(0, 1fr); } }

/* tables that become cards on narrow screens */
.table-wrap { overflow-x: auto; }
table.courses { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-4); font-size: 0.95rem; }
.courses th, .courses td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-top: 1px solid var(--rule); }
.courses tr:last-child td { border-bottom: 1px solid var(--rule); }
.courses th { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); font-weight: 400; letter-spacing: 0.04em; }
.courses .code { font-family: var(--font-mono); font-size: 0.8rem; white-space: nowrap; }
.terms { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25em 0.5em; }
.terms li { margin: 0; font-family: var(--font-mono); font-size: 0.8rem; }
.terms .current { color: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius); padding: 0 0.35em; }
@media (max-width: 39.99rem) {
  .courses thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .courses tr { display: block; border-top: 1px solid var(--rule); padding: var(--space-2) 0; }
  .courses td { display: block; border: 0; padding: 0.1rem 0; }
  .courses tr:last-child td { border: 0; }
  .courses td::before { content: attr(data-label); font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); display: block; letter-spacing: 0.04em; }
  .courses td.code::before { display: none; }
}

/* --------------------------------------------------------------------------
   8. Publications page
   -------------------------------------------------------------------------- */
.filters { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin: 0 0 var(--space-4); }
.filters label { display: grid; gap: 0.2rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }
.filters input, .filters select { min-height: var(--tap); min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); padding: 0 var(--space-3); font-family: var(--font-text); font-size: 1rem; width: 100%; }
.filters select { appearance: auto; }
.filters .filter-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: end; }
@media (min-width: 22rem) { .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .filters .search, .filters .filter-actions { grid-column: 1 / -1; } }
@media (min-width: 72rem) { .filters { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); align-items: end; } .filters .search { grid-column: auto; } .filters .filter-actions { grid-column: 1 / -1; } }
.filter-status { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); margin: 0; }
html:not(.js) .needs-js { display: none !important; }
.glance-sub { margin-top: var(--space-5); font-size: 1rem; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; min-height: var(--tap); padding: 0 var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--ink); font-family: var(--font-mono); font-size: 0.78rem; text-decoration: none; cursor: pointer; }
.button-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (hover: hover) { .button:hover { border-color: var(--accent); color: var(--accent); } .button-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } }
.button[aria-pressed="true"], .button.is-done { border-color: var(--accent); color: var(--accent); }
.button-small { min-height: var(--tap); padding: 0 var(--space-3); font-size: 0.72rem; }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); }

.year-group { scroll-margin-top: calc(var(--header-h) + 1rem); }
@media (max-width: 51.99rem) { .year-group .gutter { display: none; } }
.pub-list { list-style: none; margin: 0; padding: 0; container-type: inline-size; }
.pub { padding: var(--space-3) 0; border-top: 1px solid var(--rule); margin: 0; scroll-margin-top: calc(var(--header-h) + 1rem); }
.pub:last-child { border-bottom: 1px solid var(--rule); }
.pub:target { box-shadow: -0.75rem 0 0 var(--bg), -0.95rem 0 0 var(--accent); }
.pub-title { font-weight: 600; margin: 0 0 0.15em; }
.pub-title a { color: var(--ink); text-decoration: none; }
.pub-title a:focus-visible, .pub-title a:hover { text-decoration: underline; }
.pub[data-status="under-review"] .pub-title { font-weight: 400; }
.pub-authors { font-size: 0.95rem; margin: 0 0 0.15em; max-width: none; }
.pub-authors .me { font-weight: 600; }
.pub-authors .student { text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.pub-venue { font-size: 0.92rem; color: var(--muted); margin: 0 0 0.35em; max-width: none; }
.pub-venue .venue-name { font-style: italic; }
.pub-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); font-family: var(--font-mono); font-size: 0.8rem; }
.pub-actions a, .pub-actions button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); }
.pub-actions button { background: transparent; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-family: inherit; font-size: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.pub-actions .permalink { color: var(--muted); text-decoration: none; margin-left: auto; padding: 0 var(--space-2); }
.pub-bib { margin: 0; }
.pub-bib summary { cursor: pointer; color: var(--accent); font-family: var(--font-mono); font-size: 0.8rem; list-style: none; display: inline-flex; align-items: center; min-height: var(--tap); }
.pub-bib summary::-webkit-details-marker { display: none; }
.pub-bib summary::before { content: "+ "; }
.pub-bib[open] summary::before { content: "\2212  "; }
.pub-bib pre { margin: var(--space-2) 0; font-size: 0.78rem; }
.cite-text { font-size: 0.9rem; max-width: none; margin: 0 0 var(--space-2); }
.bib-block { margin-top: var(--space-2); }
@container (max-width: 30rem) { .pub-actions { gap: 0 var(--space-2); } }

.legend { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); margin: 0 0 var(--space-4); }
.legend .student { text-decoration: underline dotted; text-underline-offset: 0.2em; }

/* --------------------------------------------------------------------------
   9. Opportunities, explorer, timeline, misc
   -------------------------------------------------------------------------- */
.call-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-4); }
.call-closed { border: 1px dashed var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-5); }
.call-closed p { margin: 0 0 0.35em; }
.checklist li { margin-bottom: 0.4em; }

.path { border-top: 1px solid var(--rule); padding-top: var(--space-4); margin-bottom: var(--space-5); }
.path .question { font-style: italic; margin: 0 0 0.5em; }
.path ol { counter-reset: step; list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.path ol li { counter-increment: step; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0 var(--space-3); padding: var(--space-3) 0; border-top: 1px dotted var(--dots); margin: 0; }
.path ol li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent); padding-top: 0.2rem; }
.path .why { margin: 0.2em 0 0; color: var(--muted); font-size: 0.95rem; }

.timeline { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.timeline li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0 var(--space-3); align-items: start; padding: var(--space-2) 0; border-top: 1px dotted var(--dots); margin: 0; }
.timeline .yr { font-family: var(--font-mono); font-size: 0.8rem; padding-top: 0.2rem; }
.timeline .bar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.timeline .bar i { display: inline-block; width: 0.55rem; height: 0.9rem; background: var(--accent); border-radius: 1px; }
.timeline .bar i.wip { background: transparent; border: 1px dashed var(--accent); }
.timeline .bar i.pre { background: transparent; border: 1px solid var(--accent); }
.timeline .count { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }
.timeline .empty .yr { color: var(--muted); }
.timeline .milestone { display: block; font-size: 0.92rem; margin-top: 0.15em; }

.tba { border: 1px dashed var(--line); border-radius: var(--radius); padding: var(--space-4); max-width: var(--measure); }
.tba .kicker { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 0.3em; }
.pagination { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.pagination li { margin: 0; }
.pagination a, .pagination span { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-mono); font-size: 0.78rem; text-decoration: none; }
.pagination [aria-current] { border-color: var(--accent); color: var(--accent); }

.site-footer { border-top: 1px dotted var(--dots); margin-top: var(--space-7); padding: var(--space-5) 0 calc(var(--space-7) + env(safe-area-inset-bottom)); font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }
.footer-inner { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.footer-inner a { color: inherit; display: inline-flex; align-items: center; min-height: var(--tap); }
.footer-inner span { display: inline-flex; align-items: center; min-height: var(--tap); }

/* --------------------------------------------------------------------------
   10. Motion and print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .button, .site-nav a, a { transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

@media print {
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) { --bg: #fff; --bg-raised: #fff; --ink: #000; --muted: #333; --accent: #000; --rule: #999; --dots: #999; --line: #666; }
  html { font-size: 10.5pt; }
  .placeholder-img { filter: none; }
  body { display: block; }
  .site-header, .site-footer, .skip-link, .filters, .button, .pub-actions button, .pub-actions .permalink, .theme-toggle, .menu-button, .needs-js, .portrait-note, .countdown { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .section { grid-template-columns: 5rem 1fr; padding: 0.6rem 0; break-inside: auto; }
  .pub { break-inside: avoid; page-break-inside: avoid; }
  .pub-bib { display: none; }
  a { color: #000; text-decoration: none; }
  .pub-actions a[href^="https://doi.org/"]::after { content: " " attr(href); font-family: var(--font-mono); font-size: 0.8em; }
  .pub-actions a:not([href^="https://doi.org/"]) { display: none; }
  .year-group[hidden] { display: none; }
  .identity { grid-template-columns: 1fr; }
  .portrait { display: none; }
  @page { margin: 1.6cm; }
}