, see
*) rather than per
, so a single-affiliation card and a
* two-affiliation card share the same vertical slot — the second
* affiliation simply fills the already-reserved space.
* Token discipline:
* Every value below resolves to an existing type-scale or
* line-height token from — no magic numbers, no new
* tokens. Only `min-block-size` is set; the existing margin / font
* rules in stay authoritative.
* ------------------------------------------------------------------------- */
.person__name {
min-block-size: calc(var(--fs-h3) * var(--lh-display) * 2);
}
.person__role {
min-block-size: calc(var(--fs-small) * var(--lh-body));
}
.person__affiliations {
min-block-size: calc(var(--fs-base) * var(--lh-body) * 2);
}
/* ---------------------------------------------------------------------------
* 14.3 People-grid bio expansion isolation
* By default, CSS Grid stretches every cell in the same row to the
* tallest cell's height (`align-items: stretch`). The original section
* 9 rules rely on that stretch — combined with `.people-grid > li`
* being `display: flex; height: 100%` — to produce equal-height card
* rows when every speaker bio is closed.
* That contract breaks the moment one card's `` is opened: the open biography pushes its own
* card taller, and stretch propagates that height to every same-row
* sibling, leaving cards next to it with a tall expanse of empty space
* below their closed-bio toggle. forbid that propagation:
* an open biography MUST stretch only its own card, not its
* neighbours.
* Two changes, in two layers, deliver that:
* 1. The shared baseline cluster from already pins the
* photo + name + role + affiliations slot to a fixed vertical
* reservation derived from the type scale, so the *closed-state*
* top of every card lines up row-wise without depending on grid
* stretch at all.
* 2. This sub-section overrides the section-9 stretch defaults with
* a more-specific rule (the section-14 selectors are listed
* after in source order, so they win on equal
* specificity by cascade order). Cards now align to the start of
* their grid row and size to their own content, so the only card
* that grows when its bio opens is the one whose the
* user clicked.
* Trade-off accepted by: cards in the same row are no
* longer guaranteed to share the same *visual* height once any bio is
* open. They share the same *baseline cluster* height (from 14.2), so
* the top portion (photo + headings + closed-bio toggle) still aligns
* row-wise — only the open biography below the toggle is allowed to
* extend a single card's height. This is exactly the contract Req
* 5.1/5.2 require.
* Token discipline:
* No colour or spacing tokens involved — purely a layout-axis
* override. Existing `gap`, `grid-template-columns`, `padding`, and
* `border` rules in remain authoritative.
* ------------------------------------------------------------------------- */
.people-grid {
align-items: stretch;
}
.people-grid > li {
align-self: stretch;
height: 100%;
}
.people-grid .person {
height: 100%;
}
/* ---------------------------------------------------------------------------
* 15. Hero refinement — key-facts row
* Adds the hero "key-facts" line that sits below `.hero__tagline` and
* communicates the four-corner facts at a glance: venue, date, format
* (markup canon committed in / index.html). The row is
* deliberately quiet — small uppercase text in `--c-mute`, hairline
* separator dots in `--c-rule` — so it reinforces editorial hierarchy
* without competing with the title (which remains the largest text on
* the page at every viewport, per).
* Layout strategy:
* `display: flex` + `flex-wrap: wrap` lets the row sit on a single
* line at desktop and reflow gracefully on narrower
* viewports; `gap: var(--space-2)` keeps the spacing on the 8 px
* scale and survives the wrap.
* Mobile separator suppression (<= 480 px):
* The aria-hidden middle-dot spans (`.hero__keyfacts-sep`) are hidden
* when the row wraps to multi-line on small viewports, so a stray
* leading or trailing dot never lands at the start of a wrapped line.
* The flex `gap` keeps the items visually separated even with the
* dots gone — this is exactly the "dots vanish, gap survives"
* contract called out in. Items remain semantically
* separated for screen readers because each item is its own span and
* the separator dots were aria-hidden to begin with.
* Token discipline:
* Every value here resolves to an existing token from or
* — no new colour literals, no off-scale spacing, no new
* font face. The `--c-mute` and `--c-rule` colour declarations are
* the load-bearing palette references for this component, validated
* by tests/unit/palette-tokens.test.ts.
* ------------------------------------------------------------------------- */
.hero__keyfacts {
margin: var(--space-2) 0 0;
font-family: var(--ff-text);
font-size: var(--fs-small);
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--c-mute);
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.hero__keyfacts-sep {
/* Hairline-coloured separator dot — sits between key-facts items at
* desktop / Tablet, hidden under 481 px (rule below). */
color: var(--c-rule);
}
@media (max-width: 480px) {
.hero__keyfacts-sep {
/* Dots vanish, the flex gap survives — see component note above. */
display: none;
}
}
/* ---------------------------------------------------------------------------
* 16.1 Programme committee table refinement — desktop subtle stripe
* Two visual deltas on the existing .pc-table component declared in
* :
* (a) Subtle desktop striping using --c-paper-2 (this sub-section).
* Odd-numbered body rows get a 4 % ink-mix surface tint
* enough to anchor the reader's eye row-wise on a long list,
* not enough to read as a "zebra stripe" or compete with the
* hairline divider. The 4 % luminance differential is within
* the cap and survives force-dark inversion gracefully
* because --c-paper-2 is itself derived from the palette via
* color-mix(in oklab, ...).
* (b) Mobile stacking at <= 768 px: rows reflow from tabular layout
* to per-row stacked blocks ( — responsive-stack rules
* appended after this stripe rule).
* Cascade-fallback pattern:
* The first declaration restates --c-paper as a fallback for
* browsers that don't support color-mix; the second declaration
* is the intended --c-paper-2 surface. Browsers that don't honour
* the second declaration simply render odd rows identical to the
* page surface — no striping, no broken layout.
* Token discipline:
* The only colour referenced is --c-paper-2 (with --c-paper as the
* pre-color-mix fallback). No new colour literals.
* ------------------------------------------------------------------------- */
.pc-table tbody tr:nth-child(odd) > td {
background-color: var(--c-paper);
background-color: var(--c-paper-2);
}
/* ---------------------------------------------------------------------------
* 16.2 PC table refinement — responsive stack
* Adds the mobile (<= 768 px) responsive stack for the
* Programme Committee table defined in . On narrow
* viewports each `` reflows from a horizontal row into a stacked
* block: the name renders in the display serif (Cormorant Garamond)
* and the affiliation in the body text serif (Source Serif Pro) at the
* small size, in `--c-mute`, with a 1 px hairline divider between
* rows. This satisfies's "stacked block on mobile,
* name on its own line, affiliation beneath in --c-mute, --space-2
* spacing between rows, no horizontal scrollbar" contract.
* Strategy notes
* --------------
* `display: block` on `.pc-table`, `tbody`, `tr`, and `td` collapses
* the table layout for visual reflow. The existing horizontal
* `td { border-bottom }` rule from is overridden by the
* `td { border: 0 }` here, with the divider promoted up to the `
`
* itself so each stacked block reads as one editorial row rather than
* two stacked cells with internal hairlines.
* The `padding-block: var(--space-2)` on the row keeps the row gap on
* the 8 px scale (the spec's "--space-2 of spacing between rows" — Req
* 7.3) without introducing a magic value.
* Typography pairing:
* - first-child cell (Name) : --ff-display, weight 600, --c-ink
* - last-child cell (Affiliation) : --ff-text, --fs-small, --c-mute
* This also subsumes the lone `td:first-child { white-space: normal; }`
* override that previously lived at the bottom of : the
* cell becomes a block here, so wrapping behaviour is the default and
* `white-space` no longer has to be touched.
* `thead` is hidden visually only — the column headers ("Name",
* "Affiliation") are redundant once the cells are stacked and labelled
* by their typography pairing. Screen-reader behaviour is acceptable
* because each row's two cells appear in source order (name first,
* affiliation second) which already matches the way the editorial pair
* reads aloud.
* Token discipline:
* --c-rule, --c-ink, --c-mute are all base palette tokens. No new
* colour literals; verified by tests/unit/palette-tokens.test.ts.
* Surface integrity:
* This section does NOT introduce stripe colouring; row striping
* for the PC table lives in its own task and uses --c-paper-2 over
* `tbody tr:nth-child(odd) > td` ( +).
* ------------------------------------------------------------------------- */
@media (max-width: 768px) {
.pc-table,
.pc-table tbody,
.pc-table tr,
.pc-table td {
display: block;
}
.pc-table thead {
/* Visually only — the column headings are redundant once cells
* are stacked and labelled by their typography pairing. */
display: none;
}
.pc-table tr {
padding-block: var(--space-2);
border-bottom: 1px solid var(--c-rule);
}
.pc-table td {
padding: 0;
border: 0;
}
.pc-table td:first-child {
font-family: var(--ff-display);
font-weight: 600;
color: var(--c-ink);
}
.pc-table td:last-child {
font-family: var(--ff-text);
font-size: var(--fs-small);
color: var(--c-mute);
}
}
/* ---------------------------------------------------------------------------
* 17. In-page nav refinement — desktop pill row
* Lifts the existing in-page nav from a default flex-row list (section
* 10) into a centred, typeset pill row at desktop
* (>= 1024 px), per. The mobile / tablet behaviour
* inherited from (full-width 44 px tap rows) is preserved
* untouched — every refinement here is gated behind a >= 1024 px media
* query.
* Visual contract:
* - the row is centred horizontally within the existing 72 rem
* container; column gap is --space-3 to give the dots breathing
* room without breaking the 8 px rhythm
* - each item except the first is preceded by a hairline middle-dot
* ("·") rendered in --c-rule, generated via `li + li::before` so
* no extra DOM nodes are required (the previous, decorative dot
* spans in markup are not used here — the editorial separator is
* a CSS concern only)
* - link text is uppercase with 0.05em tracking at --fs-small in the
* muted ink (--c-mute), so the row reads as a quiet eyebrow band
* rather than competing with the section headings beneath it
* - hover, keyboard focus, and the scroll-spy `aria-current="true"`
* state all share the same active-state cue: --c-accent text,
* bold weight (700), and a hairline underline at 0.08em thickness
* with a 0.25em offset so the underline never touches the cap
* line. This keeps the active indicator legible after a force-dark
* extension inversion.
* Token discipline:
* --c-mute, --c-rule, --c-accent, --space-3, --fs-small are all
* existing tokens from . No new colour or size literals.
* Accent allow-list:
* The three selectors that emit `var(--c-accent)` here
* `.inpage-nav a:hover`, `.inpage-nav a:focus-visible`, and
* `.inpage-nav a[aria-current="true"]` — all live under context (b)
* "active in-page nav indicator", validated by
* tests/unit/accent-usage.test.ts.
* Reduced-motion / forced-colors:
* No transitions or animations are introduced; the active-state
* change is instantaneous. The underline is the load-bearing
* non-colour cue so the active link survives a greyscale
* render and `forced-colors: active` cleanly.
* ------------------------------------------------------------------------- */
@media (min-width: 1024px) {
.inpage-nav ul {
justify-content: center; /* centre the row */
column-gap: var(--space-3);
}
.inpage-nav li + li::before {
content: "·";
color: var(--c-rule);
margin-inline-end: var(--space-3);
align-self: center;
}
.inpage-nav a {
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: var(--fs-small);
color: var(--c-mute);
}
.inpage-nav a:hover,
.inpage-nav a:focus-visible,
.inpage-nav a[aria-current="true"] {
color: var(--c-accent);
font-weight: 700;
text-decoration: underline;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.25em;
}
}
/* ---------------------------------------------------------------------------
* 18. Sponsors block (single + multi)
* Refines the sponsor logo presentation introduced in and
* future-proofs the markup for a multi-sponsor row, per the design notes
* § 3.6. The current page renders one logo today; the new
* `
* 
*
* …
*