/* ==========================================================================
   frontier.css — the Frontier Series' own look, on top of the CoDesign
   site's design system (base, layout, components, initiatives, people,
   display: copied unchanged by tools/sync_codesign.py).
   "Nordic bold" (chosen by Mehul, 12 October 2026): near-black ink, one
   vivid lingonberry red, a larger title and schedule dates; the wave and
   footer in ink. Change the look here, in the tokens.

   Contents
     1. Tokens (light; dark appearance below)
     2. Page head (series label, title, the Join tag)
     3. About (always open; the keyword boxes, as on Frontier 2026) and Focus
     4. Panel and Schedule (the schedule list); the lectures
     5. Panel: countries, portraits
     6. Contact: the coordinators
   ========================================================================== */


/* 1. Tokens ---------------------------------------------------------------- */

:root {
  --paper: #f7f6f2;
  --ink: #121417;
  --ink-soft: #444a52;
  --tray-bg: #ecebe6;
  --bar-bg: #efeee9;                   /* the menu bar a shade below the page, a fine line under it (Mehul, 13 Oct 2026) */
  /* --accent: each edition's own colour — assets/css/edition.css, made by build.py from its series.toml [theme]
     (2026: lingonberry #c2362b) */
  --icon: var(--accent);
  --logo: var(--accent);
  --bar-current: var(--accent);
  --progress: var(--accent);
  --wave: var(--ink);
  --timeline-year: var(--accent);
  --timeline-dot: var(--accent);
  --portrait-tint: var(--ink);
  --portrait-tint-strength: .2;
  --footer-bg: #363b42;                /* a lighter slate than the ink (Mehul, 12 October 2026: less heavy) */
  --footer-button-ink: #363b42;
  --fs-display: clamp(2.4rem, 11vw, 8.5rem);   /* (smaller on the narrowest phones: long topic words fit) */
}

@media screen {
  :root[data-theme="dark"] {
    /* --accent: the edition's lighter shade (edition.css; 2026: #ef8a7c), readable on the dark page */
    --accent-ink: #1a0f0d;
    --wave: var(--ink);
    --footer-bg: #0b0d10;
    --footer-button-ink: #0b0d10;
    --bar-bg: #1b211d;                 /* (a shade above the dark page) */
  }
}


/* 2. Page head --------------------------------------------------------------- */

/* the main title as on the Frontier 2026 page (Mehul, 13 October 2026): the series and year first, in the accent,
   with a soft "/"; the topic beneath in ink; the themes below in the accent, between fine bars */
.page-title {
  font-size: clamp(2.3rem, 5.6vw, 4.6rem);   /* (the topic on its lines, as in 2026) */
  line-height: 1.14;                   /* room between the lines, as on Frontier 2026 (Mehul, 13 October 2026) */
  letter-spacing: -.025em;
  hyphens: auto;                       /* a long word ("Neurocognitive") breaks on a narrow phone */
  overflow-wrap: break-word;
}

.title-series { display: block; margin-bottom: .22em; color: var(--accent); }
.title-slash { font-weight: 400; color: var(--ink-soft); }

.title-themes {
  margin-top: 1.6rem;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 600;
  color: var(--accent);
}

.title-bar { margin: 0 .35rem; font-weight: 400; color: var(--ink-soft); }
.title-bar:first-child { margin-left: 0; }

.head-links { margin: 1.5rem 0 0; }

/* the "Join" button under the themes: as the Join card's register button (Mehul, 12 October 2026: not shy) */
.head-join.join-button {
  display: inline-flex;
  gap: .45rem;
  margin: 0;
  padding: 0 1.75rem;
  font-size: 1.05rem;
}

/* the series' own line under the page head (not CoDesign's wave): a straight ink rule, its start in the accent */
.page-head-inner::after {
  height: 3px;
  margin-top: 2rem;
  background: linear-gradient(90deg, var(--accent) 0 5.5rem, var(--ink) 5.5rem);
  -webkit-mask: none;
  mask: none;
}


/* 3. About (always open) and Focus ------------------------------------------- */

:root {
  --fs-section: clamp(1.75rem, 3.4vw, 2.6rem);   /* the main sections' headings: a step above the lectures' titles */
  --section-space: clamp(2.75rem, 6vw, 4.25rem); /* above and below each main section */
  --ink-read: #2f343a;                           /* running text: a shade darker than --ink-soft (easier reading) */
}

/* the page's main sections — About, Contact, Speaker Panel - Schedule, Lectures, Join, Students — all alike, always
   open (only the lectures fold), one rhythm: the same space around each, the same fine line between two
   (Mehul, 12 October 2026) */
.frontier-section { padding: var(--section-space) 0; }
.frontier-section + .frontier-section { border-top: 1px solid var(--line); }
.frontier-section:last-child { padding-bottom: calc(var(--section-space) * 1.25); }

.frontier .section-title {
  margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
  font-size: var(--fs-section);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

/* a section title with its icon (the Speaker Panel's bullhorn: Mehul, 13 October 2026), in lingonberry, apart */
.frontier .section-title:has(> .icon) { display: flex; align-items: center; gap: .55em; }
.frontier .section-title > .icon { flex: none; width: .85em; height: .85em; color: var(--accent); }

.about-lists { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.about-text p { margin: 0; color: var(--ink-read); }

/* the keywords, as on the Frontier 2026 page: rows of equal-width boxes across the full width, each row's key word
   filled in the accent; the rows with a key word, then (after a gap) the others (Mehul, 12 October 2026) */
.keywords { margin-top: clamp(2rem, 5vw, 3rem); }
.kw-group + .kw-group { margin-top: 1.5rem; }

.kw-row {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kw-row + .kw-row { margin-top: .5rem; }

/* an edition's [keywords] layout = "columns" (2027, Mehul, 15 October 2026): the key words side by side, each
   heading a column of its words; on phones the columns one below the other */
.kw-cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: .5rem; }
.kw-col { display: grid; gap: .5rem; align-content: start; margin: 0; padding: 0; list-style: none; }
@media (max-width: 640px) {
  .kw-cols { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .kw-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }     /* (the words two by two under their key word) */
  .kw-col .is-key { grid-column: 1 / -1; }
}

.kw-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: .5rem .75rem;
  font-size: var(--fs-label);
  font-weight: 600;                      /* calmer than bold (Mehul, 12 October 2026) */
  line-height: 1.25;
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent);   /* a finer outline */
  border-radius: 10px;
}

.kw-box.is-key {
  color: var(--accent-ink);              /* white on the lingonberry; dark on the lighter one in dark mode */
  background: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 640px) {
  .kw-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.list-intro { font-weight: 600; color: var(--ink); }

.frontier-list {
  margin: .25rem 0 0;
  padding-left: 1.2rem;
}

.frontier-list li { color: var(--ink-read); }
.frontier-list li + li { margin-top: .8rem; }
.frontier-list li::marker { color: var(--accent); }
.frontier-list strong { display: block; color: var(--ink); }


/* 4. Panel and Schedule (as on Frontier 2026): the schedule list; the lectures --------- */

.schedule-title {   /* the bullhorn as its anchor; a little bigger than a label (Mehul, 13 October 2026) */
  display: flex;
  align-items: center;
  gap: .75rem;                         /* (the calendar apart from the label) */
  margin: 3rem 0 1.1rem;              /* (a little more room under the bigger label: Mehul, 13 October 2026) */
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

.schedule-title .icon { flex: none; width: 1.15em; height: 1.15em; }

.schedule-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}

/* one row per talk, three aligned columns: when | speaker | talk (Mehul, 12 October 2026: every date, speaker and
   title starts on the same vertical line) */
.slot { border-bottom: 1px solid var(--line); }

.slot-link {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 1.35fr);
  gap: .5rem clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  padding: 1.1rem .75rem;
  color: var(--ink);
  text-decoration: none;
  border-radius: 10px;
  transition: background-color .15s ease;
}

.slot-link:hover,
.slot-link:focus-visible { background: var(--tray-bg); }

.slot-when,
.slot-who { display: flex; flex-direction: column; }

/* the dates right-aligned in their column, towards the speaker (Mehul, 12 October 2026) */
.slot-when { align-items: flex-end; text-align: right; }

.slot-day {
  margin-bottom: .2rem;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent);
}

.slot.is-tba .slot-day { color: var(--ink-soft); }

/* a talk at another time than the usual one: its time as a small tag in the accent, in the schedule and its lecture
   (Mehul, 19 October 2026) */
.odd-time {
  display: inline-block;
  padding: .08rem .45rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}
.slot-small.odd-time { margin-top: .3rem; color: var(--accent-ink); }

.slot-small {
  margin-top: .15rem;
  font-size: var(--fs-label);
  line-height: 1.35;
  color: var(--ink-soft);
}

.slot-who strong {
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--ink);
}

.slot-talk {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.4;
}

.slot-link:hover .slot-talk { color: var(--accent); }

@media (max-width: 760px) {
  .slot-link { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .slot-talk { grid-column: 2; }
}

@media (max-width: 480px) {
  .slot-link { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .slot-when { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 .6rem; text-align: left; }
  .slot-talk { grid-column: auto; }
}

/* lectures: the talk's title, the speaker under it (closed); opened: when, who, abstract | portrait, biography */
/* closed (Mehul, 12 October 2026: A + B + C): a quiet number at the left (no bullhorn); the speaker as a small
   overline in lingonberry capitals; the title in a calmer medium weight, its lines balanced */
.lecture .item-title > span {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: baseline;
}

.lecture-no {
  font-size: var(--fs-label);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  color: var(--accent);
}

.lecture.is-tba .lecture-no { color: var(--ink-soft); }

.lecture-heading { display: flex; flex-direction: column; }

.lecture-by {
  display: block;
  margin-bottom: .45rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--accent);
}

.lecture-title {
  font-size: clamp(1.25rem, 2.1vw, 1.55rem);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -.005em;
  text-wrap: balance;
}

/* opened, the speaker's header below gives the name (in full): not repeated under the title */
.lecture[open] .lecture-by { display: none; }

/* opened: the speaker's header — name, affiliation, when, website — with the portrait at its top right;
   then the abstract and the biography at reading width, apart by a fine line */
.lecture-body { max-width: 56rem; }

.lecture-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: start;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.lecture-who > * { margin: 0; }
.lecture-name { font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.lecture-aff { margin-top: .3rem !important; color: var(--ink-soft); }
.lecture-when { margin-top: .6rem !important; font-weight: 600; color: var(--accent); }
.lecture-web {                         /* the website: an icon beside the name, set apart */
  display: inline-flex;
  margin-left: .75rem;
  font-size: .8em;
  color: var(--accent);
  vertical-align: .05em;
}

.lecture-web:hover { color: var(--ink); }

/* the outside-link mark beside a linked name in the coordination cards (Mehul, 14 October 2026) */
.link-out { margin-left: .35rem; color: var(--accent); }
.link-out .icon { width: .72em; height: .72em; vertical-align: .05em; }

.lecture-photo.person-frame { width: 8.5rem; margin: 0; }

.lecture-text { max-width: var(--measure); padding-top: 1.5rem; }
.lecture-text + .lecture-text { margin-top: 1.5rem; border-top: 1px solid var(--line); }
.lecture-text p { margin: 0; font-size: 1.07rem; line-height: 1.65; color: var(--ink-read); }
.lecture-text p + p { margin-top: 1rem; }

.lecture-label {
  margin: 0 0 .6rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 520px) {
  .lecture-photo.person-frame { width: 5.5rem; }
}

/* the header: "CoDesign Lab EU / Frontier Series 2027" — the series a step below the lab's name, in the same ink
   (Mehul, 13 October 2026: not dull, not standing out) */
.site-header .brand-name { font-size: 1.12rem; }   /* a touch smaller than CoDesign's 1.2rem (Mehul, 13 Oct 2026) */

.site-header .brand-tagline {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.005em;
  opacity: 1;
}

.site-header .brand-tagline::before {   /* "/" between the two names (Mehul, 13 October 2026: not a vertical bar) */
  content: "/";
  margin-right: .7rem;
  font-weight: 400;
  color: var(--ink-soft);
}

/* the menu bar set off from the page, so text scrolling under it no longer runs into it (Mehul, 13 October 2026) */
.site-header { box-shadow: 0 1px 0 var(--line); }

@media (max-width: 600px) {
  .site-header .brand-tagline { font-size: .95rem; }
  .site-header .brand-tagline::before { content: none; }
}

/* the footer's CoDesign name: the outside-link arrow (it opens codesign-lab.org in a new tab) */
.footer-out { margin-left: .35rem; font-size: .7em; vertical-align: .1em; opacity: .8; }

/* one line between parts (Mehul, 13 October 2026): no line under the last schedule row and the last lecture — the
   next section's line closes them */
.schedule-list .slot:last-child,
#lectures > .item:last-of-type { border-bottom: 0; }

/* Students and About's note at reading width, as the contact note and the lectures (Mehul, 13 October 2026) */
.students p,
#about .item-note { max-width: var(--measure); }

/* About's closing note (where to find the speakers, how to take part): a quiet container like the countries' tray —
   a soft background, a thin accent line at its left — in small type, as it only points elsewhere on the page
   (Mehul, 14 October 2026) */
#about .item-note {
  margin-top: 2.25rem;
  padding: .85rem 1.25rem;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--tray-bg);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
}

/* a note set off by a thin lingonberry line at its left (as the countries' tray): the Students note, not all in
   bold; Join's "Instructions to digitally participate …" the same way (Mehul, 13 October 2026) */
.note-line {
  padding-left: 1rem;
  color: var(--ink);
  border-left: 3px solid var(--accent);
}

/* a lecture's calendar button, beside back-to-top (as it), leading to its row in the schedule; the row, once
   reached, briefly lit (Mehul, 13 October 2026) */
.item-summary.has-links { grid-template-columns: minmax(0, 1fr) auto auto 24px; }
.item-summary.has-links .to-top { margin-left: -.5rem; }   /* (the two round buttons as a pair) */

.to-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 50%;
  text-decoration: none;
}

.to-slot:hover {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

.slot:target .slot-link { animation: slot-lit 2.4s ease-out; }
@keyframes slot-lit { from, 40% { background: color-mix(in srgb, var(--accent) 14%, transparent); } }

@media print { .to-slot { display: none; } }

/* on phones the two round buttons one above the other, so the title keeps its width */
@media (max-width: 560px) {
  .item-summary.has-links { grid-template-columns: minmax(0, 1fr) auto 24px; row-gap: .5rem; }
  .item-summary.has-links .item-title,
  .item-summary.has-links .item-toggle { grid-row: span 2; }
  .item-summary.has-links .to-slot { grid-column: 2; grid-row: 1; align-self: end; }
  .item-summary.has-links .to-top { grid-column: 2; grid-row: 2; align-self: start; margin-left: 0; }
}

/* the edition switcher above the title (with two editions or more): the years as quiet links, this one in the
   edition's colour (Mehul, 13 October 2026) */
.editions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .9rem;
  margin: 0 0 1.75rem;
  font-size: var(--fs-label);
}

.editions-label {
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.edition {
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.edition:hover { color: var(--ink); border-bottom-color: var(--line); }
.edition[aria-current] { color: var(--accent); border-bottom-color: var(--accent); }

/* the themes: each bar kept with its word */
.nowrap { white-space: nowrap; }

/* Expand All / Collapse All: only the one that would do something is shown (Mehul, 13 October 2026) */
.fold-button:disabled { display: none; }

/* the footer's CoDesign block, last line: the lab's address in full, not underlined (Mehul, 13 October 2026) */
.footer-url {
  display: block;
  margin-top: .3rem;
  font-size: var(--fs-small);
}

/* the footer: the CoDesign block and Get in touch, side by side (no Subscribe) */
.footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

@media (max-width: 600px) {
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .slot { grid-template-columns: minmax(0, 1fr); }
  .slot-when { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 .75rem; }
  .slot-day { font-size: 1.5rem; }
}


/* 5. Panel: countries, portraits ------------------------------------------- */

/* the countries and institutions: one flowing line, as on the Frontier 2026 page — in a soft container with a
   lingonberry line down its left (Mehul, 12 October 2026) */
.frontier-panel {
  margin: 0 0 2.5rem;
  padding: 1.1rem 1.5rem;
  line-height: 1.75;
  color: var(--ink-soft);
  background: var(--tray-bg);
  border-left: 4px solid var(--accent);
  border-radius: 0 12px 12px 0;
}

.panel-country { white-space: normal; }

/* the panel not yet announced (an edition's panel_note): the same tray, quieter — small type, soft ink */
.frontier-panel.is-note { font-size: var(--fs-small); line-height: 1.6; color: var(--ink-soft); }
.panel-country strong { color: var(--ink); }
.panel-sep { margin: 0 .5rem; font-weight: 700; color: var(--accent); }

/* a speaker in the panel: one link (the name), stretched over the portrait too — so the whole card leads to the
   lecture, and screen readers and touch screens meet one named link, not two (PageSpeed, 13 October 2026); the
   tint layer cut to the circle firmly (the rounded corners alone can let it show as a grey square while the browser
   repaints on hover) */
.person { position: relative; }
.person-frame { clip-path: circle(50%); }

.person-name a { color: inherit; text-decoration: none; }
.person-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.person:hover .person-name a,
.person-name a:focus-visible { color: var(--ink); }       /* (no underline: Mehul, 14 October 2026) */


/* Join (Mehul, 12 October 2026): two balanced columns — the welcome as lead, what follows registering beneath it |
   one calm registration card on white with a hairline border, a full-width ink button */
.join-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* (the card wider: its button on one line) */
  gap: 2rem clamp(2rem, 4vw, 3rem);
  align-items: start;
}

.join-text > p { margin: 0; }

.join-lead {
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink);
}

.join-after { margin-top: 1.5rem !important; }

.join-card {
  padding: clamp(1.4rem, 3vw, 2rem);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.join-card p { margin: 0; color: var(--ink-soft); }

.join-label {
  margin: 0 0 .75rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink);
}

.join-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  margin: 1.5rem 0 .75rem;
  padding: .5rem 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  color: var(--accent-ink);
  background: var(--accent);             /* lingonberry, not black (Mehul, 12 October 2026) */
  border-radius: 10px;
  transition: background-color .15s ease;
}

.join-button:hover,
.join-button:focus-visible { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 85%, #000); }

.join-button { text-wrap: balance; }   /* (when it must wrap: two even lines) */

.join-note { font-size: var(--fs-label); text-align: center; }

@media screen {
  :root[data-theme="dark"] .join-card { background: var(--tray-bg); }
}

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


/* 6. Contact: the coordinators as two light cards (as the Join card), the note below ------------------ */

.coordinators {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* one coordinator: the card as wide as one of two, not the whole width (2027, Mehul, 14 October 2026) */
.coordinators:has(> .coordinator:only-child) { grid-template-columns: minmax(0, min(100%, 34rem)); }

.coordinator {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.25rem 1.5rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.coordinator a { font-size: 1.15rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.coordinator a:hover { color: var(--accent); }
.coordinator span { color: var(--ink-soft); }

/* the lab's name (affiliations, About): linked to codesign-lab.org (new tab), in semibold ink — never underlined
   (Mehul, 14 October 2026) */
.lab-link {
  font-size: inherit;
  font-weight: 600;
  color: var(--ink);
}

.lab-link:hover,
.lab-link:focus-visible { color: var(--accent); }

.contact-note { max-width: var(--measure); margin: 1.5rem 0 0; color: var(--ink-read); }

@media screen {
  :root[data-theme="dark"] .coordinator { background: var(--tray-bg); }
  :root[data-theme="dark"] { --ink-read: var(--ink); }
}

/* 2. the panel's portraits: four to a row (Mehul, 13 October 2026: less crammed — each name on one line on wide
   screens); each speaker's portrait, name and country on rows shared across the row (subgrid), so the countries line
   up even where a name wraps (narrower screens) */
.frontier .people-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.25rem 2rem;
  margin: 0 0 2.75rem;
}

.frontier .people-grid .person {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
}

.frontier .people-grid .person-frame { width: min(100%, 10rem); margin-bottom: .85rem; }
.frontier .people-grid .person-name { align-self: start; font-size: 1.1rem; }
.frontier .people-grid .person-topics { align-self: start; font-size: var(--fs-label); }

@media (max-width: 560px) { .frontier .people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem .75rem; } }
@media (max-width: 560px) { .frontier .people-grid .person-name { font-size: 1rem; } }


/* a phrase set off in an About text (**…** in the data): a touch stronger than the text around it, not bold
   (Mehul, 14 October 2026) */
.about-em { font-weight: 600; color: var(--ink); }

/* the previous edition, quietly, at the foot of the page (Mehul, 14 October 2026; as on the poster) */
.edition-before {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding-top: 1.25rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}

.edition-before a { font-weight: 600; color: var(--ink); }
.edition-before a:hover,
.edition-before a:focus-visible { color: var(--accent); }

/* the university's logo beside the coordinator(s): the card(s) in the left column, the logo in the right, aligned to
   the content's right edge and centred on the card; in its own colours — on a light ground in the dark appearance
   (its lettering is black). Phones: below the card. (2027, Mehul, 15 October 2026) */
.coord-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 2rem; align-items: center; }
.coord-row .coordinators { grid-template-columns: minmax(0, 1fr); }
.coord-logo { justify-self: end; display: block; line-height: 0; }
.coord-logo img { display: block; width: auto; height: 4.25rem; }
@media screen { :root[data-theme="dark"] .coord-logo img { padding: .6rem .9rem; background: #f7f6f2; border-radius: 10px; } }
@media (max-width: 640px) {
  .coord-row { grid-template-columns: minmax(0, 1fr); }
  .coord-logo { justify-self: start; }
  .coord-logo img { height: 3.25rem; }
}

/* No underlined links anywhere on the page, also when pointed at (Mehul, 14 October 2026: "never"); a link shows
   itself by its weight or colour, and turns to the accent colour when pointed at */
a,
a:hover,
a:focus-visible,
.site-footer a:hover,
.site-footer a:focus-visible { text-decoration: none; }