/* ==========================================================================
   BMT Group — Bioinspired Robotics and Medical Technology
   Refined academic stylesheet
   Headings: Source Serif 4 · Body: Source Sans 3
   ========================================================================== */

:root {
  /* Palette taken from logo-2x.png (Multi-Scale Medical Robotics Center),
     which measures out to navy #1a3c55 (77% of its pixels), light blue #7fadb6
     and yellow #eab04a. The whole neutral ramp is mixed from the navy so no
     token drifts off-brand: the previous ink ramp sat at hue ~224 (a violet
     navy) while the logo navy is hue 205. */
  --bg: #ffffff;
  --bg-alt: #f2f6f8;        /* pale blue tint, was warm cream */
  --ink: #1a3c55;           /* the logo navy itself — 11.5:1 on white */
  --ink-soft: #3c596e;      /* logo navy + 15% white */
  --muted: #536d80;         /* logo navy + 25% white */
  --rule: #dce5ea;          /* light-blue tinted, was warm grey */
  --rule-strong: #b9ccd3;
  --accent: #1a3c55;        /* logo navy — the primary brand colour (same as ink) */
  --accent-dark: #102a3d;
  --link: #2a6f8f;          /* logo light blue, darkened for contrast on white */
  --award: #9c6b18;         /* logo yellow, darkened to keep text on white AA-legible */
  --logo-yellow: #eab04a;   /* logo yellow at full strength, for rules and fills rather than text */
  /* Join-page callout, following the LeCAR original: the logo yellow mixed into
     white at 92% for the fill and 75% for its hairline border, so the note is a
     pale tint rather than a solid block. */
  --callout-bg: #fdf9f0;
  --callout-border: #faebd2;
  --selection: rgba(26, 60, 85, 0.14);
  --shadow: rgba(26, 60, 85, 0.16);
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  /* One corner radius for every image and video on the site, so the media
     corners match wherever they appear. */
  --radius-media: 10px;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* Always reserve the vertical scrollbar's width. Without this, a page short
     enough not to scroll (e.g. Events) loses the scrollbar, so the viewport is
     ~15px wider and the centred .container appears to shift and change width
     when navigating between pages. */
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.04rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--selection);
}

img,
video {
  max-width: 100%;
  height: auto;
}

sup {
  font-size: 0.72em;
  line-height: 0;
}

/* --- Links ----------------------------------------------------------- */

a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover,
a:focus {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* --- Layout ----------------------------------------------------------- */

.container {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 22px;
}

main.container {
  padding-top: 36px;
  padding-bottom: 24px;
}

section + section {
  margin-top: 48px;
}

/* --- Header & navigation ---------------------------------------------- */

.site-header {
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 16px;
  padding-bottom: 16px;
  row-gap: 4px;
}

.brand {
  display: block;
  line-height: 0;
}

.brand img {
  height: 64px;
  width: auto;
  display: block;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}

.site-nav a {
  font-weight: 600;
  font-size: 1.04rem;
  color: var(--ink);
  letter-spacing: 0.01em;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a:focus {
  color: var(--accent);
  text-decoration: none;
}

.site-nav a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.nav-toggle {
  display: none;
}

.nav-toggle-label {
  display: none;
  font-size: 1.45rem;
  color: var(--ink);
  cursor: pointer;
  padding: 6px 4px;
}

/* --- Headings ----------------------------------------------------------- */

h1,
h2,
h3 {
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.25;
}

h1 {
  font-size: clamp(2.1rem, 5.5vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}

h2 {
  position: relative;
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0 0 22px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}

h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 56px;
  height: 2px;
  background: var(--accent);
}

h3 {
  font-size: 1.18rem;
  font-weight: 600;
  margin: 30px 0 10px;
}

.section-note {
  margin: -16px 0 22px;
  font-size: 0.94rem;
  color: var(--muted);
}

/* The alumni section carries its own note under each <h3> instead of one under
   the <h2>. The -16px above cancels the h2's 22px bottom margin; an h3 only has
   10px, so without this the note rides up into the heading. -4px keeps the same
   6px gap. */
h3 + .section-note {
  margin: -4px 0 14px;
}

/* --- Hero (homepage) ---------------------------------------------------- */

.hero {
  padding-top: 18px;
}

.hero::before {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  background: var(--accent);
  margin-bottom: 22px;
}

.hero-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.18rem;
  color: var(--muted);
  margin: 0 0 22px;
}

.hero-text {
  max-width: 62rem;
  margin: 0;
}

/* --- Homepage showcase grid ---------------------------------------------- */

.showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 16px;
  margin-top: 40px;
}

/* One chrome for every tile in the strip. Some entries link to the paper they
   illustrate and are wrapped in an <a>; the rest are a bare <img> with nothing
   to link to. Both take the same border, radius and backing, so the grid reads
   evenly and only the linked ones are clickable. */
.showcase a,
.showcase>img,
.showcase>video {
  display: block;
  line-height: 0;
  border-radius: var(--radius-media);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--bg-alt);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Only real links lift. A bare medium stays still, and so do the PI page's
   placeholder wrappers, which carry no href: lifting an inert tile would
   advertise a click that does nothing. */
.showcase a[href]:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px var(--shadow);
}

.showcase img,
.showcase video {
  width: 100%;
  display: block;
}

/* --- Research page -------------------------------------------------------- */

/* Page structure: intro -> overview map -> a 2 x 2 grid of numbered themes, one row per
pillar, each row headed by its pillar banner. */

/* Intro: one serif lead line with a logo-yellow bar, the two key phrases
marked with a low yellow highlight, and a small lineage caption. */
.research-intro {
  max-width: 52rem;
  margin: 0 0 26px;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--logo-yellow);
}

.research-intro .lead {
  font-family: var(--serif);
  font-size: 1.32rem;
  line-height: 1.45;
  margin: 0;
}

.research-intro em {
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(transparent 62%, rgba(234, 176, 74, 0.38) 62%);
}

.research-intro .lineage {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

/* --- Overview map --- */
.overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 0 0 12px;
}

.overview-card {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--bg-alt);
  padding: 16px 20px 14px;
}

.overview-card h3 {
  margin: 2px 0 10px;
  font-size: 1.2rem;
}

.overview-card h3 a {
  color: inherit;
  text-decoration: none;
}

.overview-card p {
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.overview-card ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.overview-card li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  font-weight: 600;
}

.eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Numbered badge on the theme headings --- */
.num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.55em;
  height: 1.55em;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-1px);
}

/* --- Pillar banner --- */
.pillar-block {
  margin-top: 48px;
  scroll-margin-top: 16px;
}

/* No side rule: the banner is just the tinted band. Its corners
are therefore symmetric, and the 22px padding reads the same
on both sides. */
.pillar-head {
  background: var(--bg-alt);
  border-radius: 8px;
  padding: 16px 22px;
}

.pillar-head h2 {
  margin: 2px 0 6px;
  padding: 0;
  border: none;
}

.pillar-head h2::after {
  content: none;
}

.pillar-head p {
  margin: 0;
  max-width: 60rem;
  color: var(--ink-soft);
}

/* --- Themes: 2 x 2, one row per pillar, one card per theme.
Each card spans 7 rows of the pillar's grid via subgrid, so the
image, heading, summary, labels and lists line up across the row. --- */
.theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  margin-top: 20px;
}

.theme {
  display: grid;
  grid-row: span 7;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 16px 18px 18px;
  scroll-margin-top: 16px;
}

.theme-media {
  margin: 0 0 14px;
}

.theme-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-media);
  border: 1px solid var(--rule);
}

.theme-media figcaption {
  font-size: 0.84rem;
  color: var(--muted);
  margin-top: 6px;
}

.theme h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  margin: 0 0 4px;
}

.theme h3 .num {
  font-size: 0.8rem;
  transform: none;
}

.theme-summary {
  color: var(--ink-soft);
  margin: 0;
}

.label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 4px;
}

.directions {
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.95rem;
}

.directions li {
  padding: 1px 0;
}

.directions li::marker {
  color: var(--accent);
}

/* Selected work: one line per paper, title on the left (full title in
the tooltip), venue right-aligned so the tags form a column. */
@media (max-width: 820px) {
  .overview,
  .theme-grid {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }

  .theme {
    grid-row: auto;
    grid-template-rows: none;
  }
}

/* --- People ----------------------------------------------------------- */

.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 32px 24px;
}

.person {
  text-align: center;
  min-width: 0;
}

.person img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-media);
  border: 1px solid var(--rule);
  display: block;
}

.person-name {
  font-family: var(--serif);
  font-size: 1.07rem;
  font-weight: 600;
  margin: 11px 0 1px;
}

.person-role {
  font-size: 0.91rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}

.person-links {
  margin-top: 6px;
}

.person-links a {
  color: var(--muted);
  font-size: 0.98rem;
  margin: 0 7px;
}

.person-links a:hover {
  color: var(--accent);
  text-decoration: none;
}

/* --- Alumni table ----------------------------------------------------- */

.alumni {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.97rem;
  /* Fixed layout + the shared <colgroup> widths below keep the three columns
     aligned across every alumni table, instead of each table sizing itself to
     its own content (which is what table-layout: auto would do). */
  table-layout: fixed;
}

/* Column widths sized to the longest entry each has to hold at the 936px
   content width, measured in Source Sans 3 at 0.97rem: col-pos needs 23.3% for
   "Research Assistant Professor (2024)" and col-where needs 41.2% for
   "Assistant Professor, Macau University of Science and Technology". These
   leave both on one line; the 29/39 split that preceded them wrapped the second
   of those, which cost one alumni row its single-line height. */
.alumni .col-name {
  width: 22%;
}

.alumni .col-pos {
  width: 26%;
}

.alumni .col-where {
  width: 42%;
}

.alumni td {
  padding: 8px 14px 8px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  overflow-wrap: break-word;
}

.alumni td:first-child {
  font-weight: 600;
}

/* Names whose rendered width slightly exceeds the 18% column would otherwise
   wrap with a single word on the second line. */
.alumni td:first-child a,
.alumni td:first-child {
  white-space: nowrap;
}

.alumni td:last-child {
  color: var(--ink-soft);
}

/* LeCAR-style three-column alumni table: name | position (year left) | current */
.alumni td:nth-child(2) {
  color: var(--ink-soft);
}

/* Keep positions such as "Research Assistant Professor (2024)" on one line
   wherever the column is wide enough to hold them. */
@media (min-width: 900px) {
  .alumni td:nth-child(2) {
    white-space: nowrap;
  }
}

.alumni td:nth-child(3) {
  color: var(--muted);
}

/* Marks data the previous website did not record, for a human to fill in. */
.alumni .tbd {
  opacity: 0.6;
}

/* --- Join page ----------------------------------------------------------- */

.callout {
  background: var(--callout-bg);
  border: 1px solid var(--callout-border);
  border-left: 4px solid var(--logo-yellow);
  border-radius: 0 8px 8px 0;
  padding: 13px 18px;
  margin: 26px 0;
  color: var(--logo-yellow);
  font-weight: 600;
}

/* --- Open positions (join page) ------------------------------------------- */

/* "Responsibilities" and "Requirements" above each list. The source job ads
   lettered these lists (a)(b)(c), and split the second heading between Job
   Requirements and Qualifications; the label keeps the role without the
   printed-ad letters, under one heading for every posting. */
.position-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 16px 0 6px;
}

/* One posting, set up as an entry in the events list: the same serif title with
   the same venue-style line under it, and the whole row acts as the disclosure.
   The title is plain text here rather than the link the events rows carry,
   since the only thing to open is the body below. */
.position {
  border-bottom: 1px solid var(--rule);
}

.position summary {
  position: relative;
  display: block;
  /* The 24px clears the marker; .position-body repeats it so the expanded text
     stays under the title rather than under the triangle. */
  padding: 13px 0 13px 24px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.position summary::-webkit-details-marker {
  display: none;
}

.position summary::before {
  content: "\25B8";
  position: absolute;
  left: 4px;
  top: 13px;
  /* Matches .scholar-title's line-height, so the marker centres on the title's
     first line instead of on the inherited 1.65 body leading. */
  line-height: 1.35;
  font-size: 0.85em;
  color: var(--muted);
  transition: transform 0.15s ease;
}

.position[open] summary::before {
  transform: rotate(90deg);
}

/* .scholar-title and .scholar-venue are inline elements on the events page, so
   their type settings are reused here but they stack inside the summary. */
.position summary .scholar-title,
.position summary .scholar-venue {
  display: block;
}

/* --accent and --ink are the same navy, so an accent-coloured hover would show
   nothing; the darker step is what makes it register. */
.position summary:hover .scholar-title {
  color: var(--accent-dark);
}

.position-body {
  padding: 0 0 10px 24px;
}

/* Eight postings' worth of lists on one page, so the browser's default 40px
   indent and 1em gaps read as slack. Scoped to the posting bodies rather than
   applied to every ul on the site, which would reach .scholar-list. */
.position-body ul {
  margin: 0 0 1.1em;
  padding-left: 1.35em;
}

.position-body li {
  margin-bottom: 5px;
}

.position-body li:last-child {
  margin-bottom: 0;
}

@media (max-width: 620px) {
  /* Tighter than 24px: at phone widths the indent costs a noticeable slice of
     the measure. 620px matches the breakpoint .scholar-list uses. */
  .position summary,
  .position-body {
    padding-left: 18px;
  }
}

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

.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: 64px;
  padding: 28px 0 34px;
}

/* Footer content is centred in the same 980px column as the page: the credit
   note first, the icon row beneath it. The markup already places the note
   before the icons, so the column direction alone stacks them. */
.footer-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.footer-note {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.social-icons a {
  font-size: 1.55rem;
  color: var(--muted);
}

.social-icons a:hover {
  color: var(--accent);
  text-decoration: none;
}

/* --- Mobile ----------------------------------------------------------- */

@media (max-width: 800px) {
  /* Hide the checkbox visually while keeping the menu keyboard-accessible. */
  .nav-toggle {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .nav-toggle:focus-visible + .nav-toggle-label {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
  }

  .nav-toggle-label {
    display: block;
    order: 3;
    /* right-align the menu button now that the theme toggle is gone */
    margin-left: auto;
  }

  .site-nav {
    order: 4;
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 0 4px;
    margin-left: 0;
  }

  .nav-toggle:checked ~ .site-nav {
    display: flex;
  }

  .site-nav a {
    padding: 11px 0;
    border-bottom: 1px solid var(--rule);
  }

  .site-nav a:last-child {
    border-bottom: none;
  }

  .site-nav a.active {
    border-bottom-color: var(--rule);
  }

  .brand img {
    height: 52px;
  }
}

@media (max-width: 560px) {
  .showcase {
    grid-template-columns: 1fr;
  }

  .people-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 16px;
  }

  .alumni,
  .alumni tbody,
  .alumni tr,
  .alumni td {
    display: block;
    width: 100%;
  }

  .alumni td {
    border-bottom: none;
    padding: 0 0 1px;
  }

  .alumni td:first-child {
    padding-top: 12px;
  }

  .alumni tr {
    border-bottom: 1px solid var(--rule);
    padding-bottom: 11px;
  }

  main.container {
    padding-top: 28px;
  }
}

/* --- Publication-style entry list ---------------------------------------- */
/* The flat newest-first list shared by the publications page and the events
   page: each entry is a row with its content on the left and the year
   right-aligned. */

.scholar-list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}

.scholar-list>li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
    gap: 2px 20px;
    padding: 15px 8px 16px;
    border-bottom: 1px solid var(--rule);
}

.scholar-title {
    font-family: var(--serif);
    font-size: 1.04rem;
    font-weight: 600;
    line-height: 1.35;
}

.scholar-authors {
    margin: 5px 0 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--muted);
}

.scholar-venue {
    margin: 3px 0 0;
    font-size: 0.92rem;
    color: var(--ink-soft);
}

.scholar-year {
    font-size: 0.95rem;
    color: var(--muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 620px) {
    .scholar-list>li {
        grid-template-columns: minmax(0, 1fr);
    }

    .scholar-year {
        text-align: left;
    }
}

/* --- PI page ------------------------------------------------------------ */
/* The page is plain flow — headings, paragraphs and media groups. The media
   reuse the homepage's .showcase grid as-is: three columns, 16px gap, the same
   tile chrome, collapsing to one column at 560px. Each group is its own
   <div class="showcase">, and a video tile wraps the player in .pi-frame so the
   iframe keeps its 16:9 ratio. Scoped to .pi-page. */

/* Hero: 2048x1133, so it spans the content column at its own ratio. (The
   previous 84vh box letterboxed it, leaving ~238px of empty bands at a 900px
   viewport.) */
.pi-hero {
  margin: 0 0 20px;
}

.pi-hero img {
  width: 100%;
  height: auto;
}

.pi-page img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* The PI showcase is a filmstrip, like the miniature portfolio it is modelled
   on: every tile in a row is exactly the same height, and each medium keeps its
   own aspect ratio, so the widths vary with the media. Nothing is cropped,
   letterboxed or stretched — the tile chrome simply hugs each medium, and each
   line is centred in the content column. No per-item ratio data is needed:
   fixing the height and leaving the width auto does it. */
.pi-page .showcase {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  /* Centres each line; justify-content applies per line, so a wrapped row is
     centred too rather than left-hugging. */
  justify-content: center;
  gap: 16px;
  /* One knob for the strip. 180px keeps the three-tile row (2 images + a 16:9
     player, ratios summing to 4.77) on a single line at the 936px content
     width; raising it wraps that row onto a second line. */
  --tile-h: 180px;
  /* Vertical rhythm around a row. The homepage's 40px top margin is tuned for
     the hero above its grid and it has no bottom margin at all, which left text
     sitting flush against the tiles here. A symmetric gap fixes both sides: the
     paragraphs around a row have 0 top margin and 1em bottom, so collapsing
     lands on this value above and below, and the References heading's 18px top
     margin also collapses into it. Tune the strip's breathing room here. */
  --row-gap: 28px;
  margin: var(--row-gap) 0;
}

.pi-page .showcase a {
  flex: 0 0 auto;   /* a tile keeps the width its media needs */
  width: auto;
}

.pi-page .showcase img,
.pi-page .showcase .pi-frame {
  height: var(--tile-h);
  width: auto;
}

@media (max-width: 800px) {
  .pi-page .showcase {
    --tile-h: 140px;
  }
}

@media (max-width: 560px) {
  .pi-page .showcase {
    --tile-h: 110px;
  }
}

/* Video: a 16:9 frame keeps the player's ratio at any column width. */
.pi-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.pi-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* 1em bottom-only, matching the collapsed 1em gap browser-default paragraph
   margins produce on the other pages. */
.pi-page p {
  margin: 0 0 1em;
}

/* References are a real numbered list, replacing the original page's
   hand-written [n] prefixes and the 40px padding that faked the indent. With
   list-style-position: outside the markers live in the padding, so the text
   starts at the same ~40px the original used while wrapped lines align under the
   first line (a hanging indent), and the markers sit flush with the prose.
   No font-size and no colour: the list inherits the page's body text exactly
   (1.04rem, var(--ink)), so a reference reads like any other prose here. */
.pi-refs {
  margin: 0;
  /* 2.4em of the body size ~= the original's 40px. */
  padding-left: 2.4em;
}

.pi-refs li {
  /* Multi-line citations: at body size the line leading is ~11px, so the gap
     between items has to clear that to read as a list. */
  margin-bottom: 0.9rem;
}

.pi-refs li:last-child {
  margin-bottom: 0;
}

/* Keep the page's [n] citation style, in the list's own colour so the markers
   match the citation text. Browsers without ::marker content support fall back
   to the default decimal marker. */
.pi-refs li::marker {
  content: "[" counter(list-item) "] ";
}

/* --- Event page (past workshops) ------------------------------------------ */
/* One page documents one past workshop: banner, description, call for
   contributions, programme and organizer cards. Each workshop gets its own
   directory (case-2023-workshop/index.html) so the URL keeps the old
   WordPress slug, with its photographs beside the page; events.html links to
   that directory instead of back into the old site. The page therefore
   reaches the shared sheet and the site chrome through ../ — the only page on
   the site that does. */

/* The title block replaces the plain <h2> that opens every other page, so the
   event reads as an event rather than as a section: a kicker, the workshop
   title, and its date and room. The title is the page's only h1; the other
   pages have no equivalent heading to give one to. */
.event-hero {
  margin: 0 0 30px;
}

.event-hero .eyebrow {
  margin: 0 0 8px;
}

.event-hero h1 {
  margin: 0 0 10px;
}

.event-meta {
  margin: 0;
  font-size: 1.02rem;
  color: var(--ink-soft);
}

/* Banner and equipment montage: both are wide, low images (1920x430 and
   1920x450) that span the content column at their own ratio. */
.event-media {
  margin: 0 0 26px;
}

.event-media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius-media);
}

/* The two dated deadlines, as a list rather than as loose prose so they line
   up. Same 1.2em indent and accent markers as .directions. */
.event-dates {
  margin: 0;
  padding-left: 1.2em;
}

.event-dates li {
  padding: 1px 0;
}

.event-dates li::marker {
  color: var(--accent);
}

/* The award's sponsor, credited under the Awards copy rather than inside it,
   so it reads as a footnote to the award. */
.event-sponsor {
  margin: 14px 0 0;
  font-size: 0.92rem;
  color: var(--muted);
}

/* Programme: time on the left as a row header, the talk and its speaker on the
   right. Row headers rather than cells so the time labels the row for assistive
   tech, and tabular figures keep the ranges aligned down the column. */
.programme {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
}

.programme thead th {
  padding: 0 14px 9px 0;
  border-bottom: 1px solid var(--rule-strong);
  text-align: left;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.programme th,
.programme td {
  vertical-align: top;
  text-align: left;
  padding: 12px 14px 13px 0;
  border-bottom: 1px solid var(--rule);
}

.programme tbody th {
  width: 11.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.programme-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
}

.programme-speaker {
  margin: 3px 0 0;
  font-size: 0.92rem;
  color: var(--muted);
}

/* "(invited)" and "(Online)" were parentheticals inside the original
   programme's talk lines; a pill keeps them clear of the talk and the speaker
   name while still marking the row. */
.programme-tag {
  display: inline-block;
  margin-left: 5px;
  padding: 0 7px 1px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg-alt);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: 1px;
  white-space: nowrap;
}

/* Below 620px the time and session columns no longer fit side by side, so each
   row becomes a block — the time above the talk, as in the stacked alumni table
   at 560px — and the header row, which labels those columns, is dropped. */
@media (max-width: 620px) {
  .programme thead {
    display: none;
  }

  .programme,
  .programme tbody,
  .programme tr,
  .programme th,
  .programme td {
    display: block;
    width: auto;
  }

  .programme tr {
    padding: 12px 0 13px;
    border-bottom: 1px solid var(--rule);
  }

  .programme th,
  .programme td {
    padding: 0;
    border-bottom: none;
  }

  .programme tbody th {
    font-size: 0.86rem;
    color: var(--muted);
  }

  .programme-title {
    margin-top: 3px;
  }
}

/* Organizer cards: the people grid's card at a 3:4 portrait ratio instead of
   1:1, because all seven photographs are portrait (their own ratios sit
   between 0.72 and 0.73, so the baked-in crop costs a few pixels). Four
   columns at the 936px content width, two on a phone. */
.organizer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 28px 24px;
}

.organizer {
  min-width: 0;
  text-align: center;
}

.organizer img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--rule);
  border-radius: var(--radius-media);
}

.organizer-name {
  margin: 11px 0 1px;
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
}

.organizer-role {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted);
}

/* The addresses run to 25 characters, more than a 190px card holds at 0.84rem,
   so they are allowed to wrap rather than overhang the card. */
.organizer-mail {
  margin: 6px 0 0;
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .organizer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 16px;
  }
}