/* DC Power Lab website styles. Design system: see DESIGN.md in the project (not uploaded). */
@import url("./tokens.css?v=20261155");
@import url("./base.css");
/* ---------------------------------------------------------------------------
Legacy guard: pages still on Bootstrap 3 set html to 10px; the scale is rem.
--------------------------------------------------------------------------- */
html { font-size: 100%; }
body { font-size: var(--text-md); }
/* ---------------------------------------------------------------------------
Layout
--------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-gap-s); }
.section--slate { background: var(--color-slate); }
.section--well { background: var(--color-green-wash); border-top: var(--rule-bar) solid var(--color-green-rule); }
.section--green { background: var(--color-green-wash-2); border-top: var(--rule-bar) solid var(--color-accent); }
.opens { border-top: var(--rule-bar) solid var(--color-rule-2); padding-top: var(--space-lg); }
.section__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); margin-bottom: var(--space-xl); }
.section__head h2 { font-size: var(--text-section); }
.section__aside { color: var(--color-ink-2); max-width: 40ch; }
@media (min-width: 60rem) {
.section__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
.section__aside { justify-self: end; }
}
.skip-link { position: absolute; left: var(--space-md); top: -100px; z-index: var(--z-tooltip); padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--color-paper); font-family: var(--font-display); }
.skip-link:focus-visible { top: var(--space-md); }
/* ---------------------------------------------------------------------------
Buttons and links
--------------------------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
min-height: 48px; padding: 0 var(--space-lg);
border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill);
background: transparent; color: var(--color-ink);
font: 500 var(--text-md)/1 var(--font-display); white-space: nowrap; text-decoration: none; cursor: pointer;
transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--color-paper-3); color: var(--color-ink); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; transition: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent-3); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-2); color: var(--color-accent-ink); }
.btn--primary:active { background: var(--color-accent-3); }
@media (pointer: coarse) { .btn { min-height: 52px; } }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.link { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; font-family: var(--font-display); font-weight: 500; }
.link:hover { color: var(--color-ink); text-decoration-color: var(--color-accent-strong); }
.link:focus-visible, a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* ---------------------------------------------------------------------------
Header and main menu
--------------------------------------------------------------------------- */
#header.site-header { position: sticky; top: 0; z-index: var(--z-sticky-nav); margin: 0; padding: 0; background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 72px; }
.site-header__logo { display: block; flex-shrink: 0; }
.site-header__logo img { width: auto; height: 40px; }
.site-nav { display: flex; align-items: center; gap: var(--space-lg); }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav__list { display: flex; align-items: center; gap: var(--space-2xs); }
.site-nav__item { position: relative; display: flex; align-items: center; }
.site-nav__link, .site-nav__sub a {
display: block; padding: var(--space-sm) var(--space-xs);
color: var(--color-ink); font: 500 var(--text-md)/1.3 var(--font-display); text-decoration: none;
}
.site-nav__link:hover, .site-nav__sub a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.site-nav a[aria-current="page"], .site-nav__item:has(.site-nav__sub a[aria-current="page"]) > .site-nav__link { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.site-nav__sub-toggle { display: grid; place-items: center; width: 28px; height: 44px; margin-left: calc(var(--space-2xs) * -1); padding: 0; border: 0; background: none; color: var(--color-muted); cursor: pointer; }
.site-nav__sub-toggle svg { transition: transform var(--dur-short) var(--ease-in-out); }
.site-nav__sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.site-nav__sub-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.site-nav__toggle { display: none; }
@media (min-width: 60.01rem) {
.js .site-nav__sub {
position: absolute; top: 100%; left: 0; z-index: var(--z-dropdown); min-width: 16rem;
padding: var(--space-xs) 0; background: var(--color-paper);
border: var(--rule-hair) solid var(--color-rule); border-top: var(--rule-bar) solid var(--color-ink);
opacity: 0; visibility: hidden; transform: translateY(-4px);
transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s linear var(--dur-short);
}
.js .site-nav__sub a { padding: var(--space-sm) var(--space-md); }
html:not(.js) .site-nav__sub, html:not(.js) .site-nav__sub-toggle { display: none; }
.js .site-nav__item:hover > .site-nav__sub,
.js .site-nav__item:focus-within > .site-nav__sub,
.js .site-nav__sub-toggle[aria-expanded="true"] + .site-nav__sub {
opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
}
@media (max-width: 60rem) {
.site-header__bar { min-height: 56px; }
.site-header__logo img { height: 32px; }
.js .site-nav__toggle {
display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-md);
border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-paper);
color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-display); cursor: pointer;
}
.site-nav__toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.js .site-nav { display: none; }
.menu-open .site-nav {
display: flex; flex-direction: column; align-items: stretch; gap: var(--space-xl);
position: fixed; top: 56px; left: 0; right: 0; height: calc(100dvh - 56px); overflow-y: auto; overscroll-behavior: contain;
padding: var(--space-md) var(--gutter) var(--space-xl); background: var(--color-paper); border-top: var(--rule-hair) solid var(--color-rule);
}
.menu-open body { overflow: hidden; }
.site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
.site-nav__item { display: block; border-bottom: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-xs); }
.site-nav__link { padding: var(--space-sm) 0; font-size: var(--text-xl); font-weight: 600; }
.site-nav__sub-toggle { display: none; }
.site-nav__sub { padding-bottom: var(--space-xs); }
.site-nav__sub a { padding: var(--space-sm) 0; min-height: 48px; color: var(--color-ink-2); font-size: var(--text-lg); font-family: var(--font-body); }
.site-nav__action { width: 100%; }
/* Without JavaScript the whole menu sits open under the logo */
html:not(.js) .site-header__bar { flex-wrap: wrap; }
html:not(.js) .site-nav { width: 100%; flex-direction: column; align-items: stretch; padding-bottom: var(--space-md); }
}
/* ---------------------------------------------------------------------------
Footer
--------------------------------------------------------------------------- */
#footer.site-footer { margin: 0; padding: var(--space-3xl) 0 var(--space-xl); background: var(--color-paper); background-image: none; border-top: var(--rule-bar) solid var(--color-accent); color: var(--color-ink-2); }
.site-footer__mast { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); padding-bottom: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.site-footer__logo img { width: auto; height: 64px; }
.site-footer__line { font-size: var(--text-lead); color: var(--color-ink); max-width: 36ch; }
.site-footer__index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); padding-block: var(--space-xl); }
.site-footer__head { margin: 0 0 var(--space-sm); max-width: none; font: 600 var(--text-md)/1.3 var(--font-display); letter-spacing: 0; color: var(--color-ink); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.site-footer a { color: var(--color-ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.site-footer address { font-style: normal; margin: 0; }
.site-footer address a { white-space: nowrap; }
.site-footer__staff { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }
@media (min-width: 60rem) {
.site-footer__mast { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.site-footer__line { justify-self: end; }
.site-footer__index { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* ---------------------------------------------------------------------------
Home: hero (Stage)
--------------------------------------------------------------------------- */
.hero { padding-block: var(--space-xl) var(--space-2xl); display: grid; align-content: center; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.hero h1 { font-size: var(--text-display); letter-spacing: -0.035em; line-height: 0.95; max-width: 12ch; }
.hero .lead { margin-top: var(--space-lg); color: var(--color-ink-2); }
.hero .actions { margin-top: var(--space-xl); }
.photo { margin: 0; }
.photo img { width: 100%; height: 100%; object-fit: cover; outline: var(--rule-hair) solid var(--color-rule-2); outline-offset: -1px; }
.photo figcaption { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }
.hero__photo { aspect-ratio: 4 / 3; }
@media (min-width: 60rem) {
.hero { min-height: calc(100svh - 72px); padding-block: var(--space-xl); }
.hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); }
.hero__photo { aspect-ratio: auto; height: min(720px, calc(100svh - 72px - 2 * var(--space-xl))); }
}
/* ---------------------------------------------------------------------------
Home: the standfirst as a statement, with the team photo
--------------------------------------------------------------------------- */
.statement { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.statement__text { font: 400 var(--text-display-s)/1.15 var(--font-body); color: var(--color-ink); max-width: 30ch; text-wrap: balance; }
.statement__levels { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; }
.statement__levels div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.statement__levels dt { font: 600 var(--text-lg)/1.3 var(--font-display); color: var(--color-ink); }
.statement__levels dd { margin: 0; color: var(--color-ink-2); }
.statement__photo { aspect-ratio: 1266 / 930; }
@media (min-width: 60rem) {
.statement { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--space-2xl); row-gap: var(--space-lg); align-items: start; }
.statement__text { grid-column: 1 / -1; max-width: 34ch; }
.statement__levels, .statement__more { grid-column: 1; }
.statement__photo { grid-column: 2; grid-row: 2 / span 2; }
}
/* ---------------------------------------------------------------------------
Rows: contents set as a reference book sets them (news, research areas)
--------------------------------------------------------------------------- */
.rows { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) solid var(--color-rule-2); }
.row-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs) var(--gap-columns); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.row-item__meta { color: var(--color-muted); font-size: var(--text-sm); font-family: var(--font-display); }
.row-item__title { font-size: var(--text-title); max-width: 32ch; }
.row-item__title a { color: var(--color-ink); text-decoration: none; }
.row-item__title a::after { content: ""; position: absolute; inset: 0; }
.row-item__text { color: var(--color-ink-2); max-width: 60ch; }
.row-item:has(a:hover) { background: var(--color-paper-2); }
.row-item:has(a:hover) .row-item__title a { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.row-item:has(a:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.row-item a:focus-visible { outline: none; }
@media (min-width: 60rem) {
.row-item { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(0, 5fr); align-items: baseline; padding-inline: var(--space-xs); }
}
@media (min-width: 60rem) { .rows--two .row-item { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.rows-foot { margin-top: var(--space-lg); }
.data-empty, .data-error { padding-block: var(--space-lg); color: var(--color-muted); border-bottom: var(--rule-hair) solid var(--color-rule); }
/* ---------------------------------------------------------------------------
Figures reversed out on the ink band
--------------------------------------------------------------------------- */
.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.figures div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: var(--space-lg) var(--space-md) var(--space-lg) 0; border-top: var(--rule-hair) solid var(--color-muted); }
.figures dd { margin: 0; font: 500 var(--text-display)/1 var(--font-outlier); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--color-accent-strong); }
.figures dt { margin-top: var(--space-xs); color: var(--color-ink-2); font-family: var(--font-display); }
@media (min-width: 60rem) {
.figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.figures div { padding-left: var(--space-md); border-top: 0; border-left: var(--rule-hair) solid var(--color-muted); }
.figures div:first-child { padding-left: 0; border-left: 0; }
}
/* ---------------------------------------------------------------------------
Split: a photograph beside a short text
--------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
.split h2 { font-size: var(--text-section); }
.split p { margin-top: var(--space-md); color: var(--color-ink-2); }
.split .actions { margin-top: var(--space-xl); }
.split__photo { aspect-ratio: 4 / 3; }
@media (min-width: 60rem) {
.split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-2xl); }
}
/* ---------------------------------------------------------------------------
Partners: a still logo grid
--------------------------------------------------------------------------- */
.logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--rule-bar) solid var(--color-rule-2); }
.logos li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.logos li:nth-child(odd) { border-right: var(--rule-hair) solid var(--color-rule); }
.logos a { display: grid; place-items: center; height: 112px; padding: var(--space-md); }
.logos a:hover { background: var(--color-paper-2); }
.logos img { max-height: 56px; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.8; transition: filter var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.logos a:hover img, .logos a:focus-visible img { filter: none; opacity: 1; }
@media (min-width: 40rem) {
.logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.logos li:nth-child(odd) { border-right: 0; }
.logos li:not(:nth-child(4n)) { border-right: var(--rule-hair) solid var(--color-rule); }
}
@media (min-width: 60rem) {
.logos { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.logos li:not(:nth-child(4n)) { border-right: 0; }
.logos li:not(:nth-child(7n)) { border-right: var(--rule-hair) solid var(--color-rule); }
}
/* ---------------------------------------------------------------------------
Inner pages: page hero, language switch, tag, facts table, steps, checklist
--------------------------------------------------------------------------- */
.page-hero { padding-block: var(--space-xl) var(--space-2xl); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.page-hero h1 { font-size: var(--text-display); letter-spacing: -0.035em; line-height: 0.95; max-width: 14ch; }
.page-hero .lead { margin-top: var(--space-lg); color: var(--color-ink-2); }
.page-hero .actions { margin-top: var(--space-xl); }
.page-hero__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-lg); }
@media (min-width: 60rem) {
.page-hero { min-height: calc(100svh - 72px); display: grid; padding-block: var(--space-lg) var(--space-xl); }
.page-hero > .wrap { display: grid; grid-template-rows: auto 1fr; }
.page-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; align-self: center; }
.page-hero .facts dd { font-size: var(--text-lg); }
.page-hero .facts div { padding-block: var(--space-lg); }
}
.lang-switch { font-family: var(--font-display); font-size: var(--text-sm); color: var(--color-muted); }
.lang-switch a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.tag { display: inline-block; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 500 var(--text-sm)/1.3 var(--font-display); }
/* A spec sheet: facts in a ruled table on the sheet */
.facts { margin: 0; border-top: var(--rule-bar) solid var(--color-ink); background: var(--color-sheet); }
.facts div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: var(--space-md); padding: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.facts dt { color: var(--color-muted); font: 500 var(--text-sm)/1.5 var(--font-display); }
.facts dd { margin: 0; color: var(--color-ink); }
/* Real sequences: numbered rows */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; border-top: var(--rule-bar) solid var(--color-rule-2); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.steps li::before { content: counter(step); font: 500 var(--text-2xl)/1 var(--font-outlier); color: var(--color-accent-strong); font-variant-numeric: tabular-nums; }
.steps h3 { font-size: var(--text-title); }
.steps p { margin-top: var(--space-2xs); color: var(--color-ink-2); }
@media (max-width: 59.99rem) { .steps li > :not(h3) { grid-column: 2; } }
@media (min-width: 60rem) { .steps li { grid-template-columns: 5rem minmax(0, 4fr) minmax(0, 7fr); align-items: baseline; } .steps p { margin-top: 0; } }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--gap-columns); }
.checklist li { position: relative; padding: var(--space-md) 0 var(--space-md) var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); }
.checklist li::before { content: ""; position: absolute; left: 0; top: calc(var(--space-md) + 0.35em); width: 14px; height: 8px; border-left: 2px solid var(--color-accent-strong); border-bottom: 2px solid var(--color-accent-strong); transform: rotate(-45deg); }
.checklist { max-width: 60rem; }
/* A picture the owner will supply: see .slot under "photo slots" at the end of this file */
/* MSH: the discipline picker. Without script every discipline is listed. */
.picker__buttons { display: none; }
.js .picker__buttons { display: flex; gap: var(--space-xs); overflow-x: auto; padding-bottom: var(--space-sm); margin-bottom: var(--space-lg); scrollbar-width: thin; }
.picker__buttons button {
flex-shrink: 0; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill);
background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-display); cursor: pointer;
transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.picker__buttons button:hover { background: var(--color-paper-3); }
.picker__buttons button[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.picker__buttons button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (pointer: coarse) { .picker__buttons button { min-height: 48px; } }
.picker__list { margin: 0; border-top: var(--rule-bar) solid var(--color-rule-2); }
.picker__list div { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs) var(--gap-columns); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.picker__list dt { font: 600 var(--text-lg)/1.3 var(--font-display); color: var(--color-ink); }
.picker__list dd { margin: 0; color: var(--color-ink-2); }
@media (min-width: 60rem) { .picker__list div { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.js .picker--active .picker__list div { display: none; }
.js .picker--active .picker__list div.is-shown { display: grid; padding-block: var(--space-xl); }
.questions { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); }
.js .picker--active .picker__list div.is-shown .questions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.js .picker--active .picker__list div.is-shown .questions li { padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); font: 400 var(--text-xl)/1.3 var(--font-body); color: var(--color-ink); }
.js .picker--active .picker__list div.is-shown .questions { max-width: 44rem; }
.photo--plain a { display: block; }
.photo--plain img { height: auto; }
.tag--small { padding: 0 var(--space-2xs); font-size: var(--text-xs); vertical-align: 0.1em; }
/* ---- research ---- */
/* Medal colours, mixed from the brand tokens: lime warmed with the error red reads as gold and bronze; the slate is silver */
:root {
--color-medal-gold: color-mix(in oklch, var(--color-accent) 72%, var(--color-error));
--color-medal-silver: color-mix(in oklch, var(--color-slate) 80%, var(--color-paper));
--color-medal-bronze: color-mix(in oklch, color-mix(in oklch, var(--color-accent) 45%, var(--color-error)) 82%, var(--color-ink));
--color-medal-edge: color-mix(in oklch, var(--color-ink) 35%, transparent);
}
.research-hero__photo { aspect-ratio: 4 / 3; }
@media (min-width: 60rem) {
.research-hero__photo { aspect-ratio: auto; height: min(680px, calc(100svh - 72px - 2 * var(--space-xl))); }
}
.research-why { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.research-why h2 { font-size: var(--text-section); overflow-wrap: break-word; min-width: 0; }
.research-why__text p { font: 400 var(--text-xl)/1.4 var(--font-body); color: var(--color-ink); max-width: 34ch; }
.research-why__text p + p { margin-top: var(--space-md); color: var(--color-ink-2); }
@media (min-width: 60rem) {
.research-why { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
}
/* Students and researchers: three levels set across the ink band */
.levels { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; }
.levels div { padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-muted); }
.levels dt { font: 700 var(--text-2xl)/1.1 var(--font-display); color: var(--color-accent-strong); }
.levels dd { margin: var(--space-xs) 0 0; color: var(--color-ink-2); max-width: 34ch; }
.levels__more { margin-top: var(--space-lg); }
@media (min-width: 60rem) {
.levels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.levels div { padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; }
.levels div + div { padding-left: var(--space-lg); border-left: var(--rule-hair) solid var(--color-muted); }
}
/* Prizes: rows with a medal for the place, beside the award photo */
.prizes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.prizes__photo img { aspect-ratio: 1600 / 1090; height: auto; }
@media (min-width: 60rem) { .prizes { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); } }
.prize-row { grid-template-columns: 3rem minmax(0, 1fr); align-items: center; }
.prize-row .row-item__title, .prize-row .row-item__text { grid-column: 2; }
.prize-row .medal { grid-row: 1 / span 2; }
.prize-row__year { margin-left: var(--space-sm); color: var(--color-muted); font-family: var(--font-outlier); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
@media (min-width: 60rem) {
.prize-rows .prize-row { grid-template-columns: 3.5rem minmax(0, 6fr) minmax(0, 4fr); align-items: center; }
.prize-row .medal { grid-row: auto; }
.prize-row .row-item__text { grid-column: 3; }
}
/* A medal: a struck disc on a short ribbon, coloured by place */
.medal { position: relative; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-top: var(--space-sm); border-radius: 50%; border: var(--rule-bar) solid var(--color-medal-edge); background: var(--color-medal-gold); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-outlier); }
.medal::before { content: ""; position: absolute; bottom: 100%; left: 50%; width: 1.25rem; height: 0.75rem; transform: translateX(-50%); background: var(--color-ink); clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%); }
.medal::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: var(--rule-hair) solid var(--color-medal-edge); }
.medal--silver { background: var(--color-medal-silver); }
.medal--bronze { background: var(--color-medal-bronze); color: var(--color-paper); }
.medal--none { visibility: hidden; }
/* An award that is not a podium place (Prizes: Place blank, XP): a neutral disc with a star, no number */
.medal--award { background: var(--color-green-wash); color: var(--color-ink); }
.medal--award svg { display: block; width: 1.125rem; height: 1.125rem; }
.medal--small.medal--award svg { width: 0.875rem; height: 0.875rem; }
/* ---- publications ---- */
/* The hero holds the record: the total and one line of publications per year */
@media (min-width: 60rem) {
.pub-hero { min-height: 0; padding-block: var(--space-2xl) var(--space-xl); }
.pub-hero .page-hero__grid { align-items: end; }
}
.pub-stats { display: grid; gap: var(--space-lg); min-width: 0; }
.pub-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-md); margin: 0; }
.pub-total__figure { font: 500 var(--text-display)/1 var(--font-outlier); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.pub-total__label { font: 500 var(--text-lg)/1.3 var(--font-display); color: var(--color-ink-2); }
.pub-chart { margin: 0; padding-top: var(--space-md); border-top: var(--rule-bar) solid var(--color-rule-2); }
.pub-chart figcaption { margin-bottom: var(--space-sm); color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); }
.pub-chart__box { width: 100%; min-width: 0; }
.pub-chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.pub-chart__grid { stroke: var(--color-rule); stroke-width: 1; }
.pub-chart__line { fill: none; stroke: var(--color-accent-strong); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pub-chart__mark { fill: var(--color-accent-strong); }
.pub-chart__axis, .pub-chart__value { font-family: var(--font-outlier); font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; }
.pub-chart__axis { fill: var(--color-muted); }
.pub-chart__value { fill: var(--color-ink); }
/* Filters: shown only with script; without it the whole list stands */
.pub-filter { display: none; }
.js .pub-filter { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-md); margin-bottom: var(--space-xl); }
.pub-filter__field { position: relative; display: grid; gap: var(--space-2xs); flex: 1 1 12rem; max-width: 20rem; }
.pub-filter__field label { color: var(--color-ink-2); font: 500 var(--text-sm)/1.3 var(--font-display); }
.pub-filter__field::after { content: ""; position: absolute; right: var(--space-md); bottom: 20px; width: 8px; height: 8px; border-right: var(--rule-bar) solid var(--color-ink); border-bottom: var(--rule-bar) solid var(--color-ink); transform: rotate(45deg); pointer-events: none; }
.pub-filter select {
width: 100%; min-height: 48px; padding: 0 var(--space-2xl) 0 var(--space-md); appearance: none;
border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); background: var(--color-paper);
color: var(--color-ink); font: 500 var(--text-md)/1.2 var(--font-display); cursor: pointer;
transition: border-color var(--dur-micro) var(--ease-out);
}
.pub-filter select:hover { border-color: var(--color-ink); }
.pub-filter select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; transition: none; }
.pub-filter__count { flex-basis: 100%; margin: 0; color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); }
@media (pointer: coarse) { .pub-filter select { min-height: 52px; } .pub-filter__field::after { bottom: 22px; } }
@media (min-width: 60rem) { .pub-filter__count { flex-basis: auto; margin-left: auto; align-self: center; } }
/* The list, set as a ledger: year, title and authors, venue and type */
.pub-head { display: none; }
.pub-list { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) solid var(--color-rule-2); }
.pub { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.pub[hidden] { display: none; }
.pub > * { margin: 0; }
.pub__year { color: var(--color-ink-2); font: 500 var(--text-sm)/1.5 var(--font-outlier); font-variant-numeric: tabular-nums; }
.pub__title { max-width: 52ch; font-size: var(--text-lg); line-height: 1.3; }
.pub__title a { padding-block: var(--space-sm); color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.pub__title a:hover { text-decoration-color: var(--color-accent-strong); text-decoration-thickness: 2px; }
.pub__authors { color: var(--color-ink-2); max-width: 64ch; }
.pub__venue { display: grid; gap: var(--space-3xs); color: var(--color-ink-2); font: 500 var(--text-sm)/1.4 var(--font-display); overflow-wrap: break-word; min-width: 0; }
.pub__type, .pub__none { color: var(--color-muted); }
.pub__abstract summary { display: list-item; width: fit-content; min-height: 44px; line-height: 44px; color: var(--color-ink); font: 500 var(--text-sm)/44px var(--font-display); cursor: pointer; }
.pub__abstract summary::marker { color: var(--color-accent-strong); }
.pub__abstract summary:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.pub__abstract summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.pub__abstract p { max-width: 64ch; padding-bottom: var(--space-sm); color: var(--color-ink-2); }
@media (min-width: 60rem) {
.pub-head, .pub { grid-template-columns: 5rem minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--gap-columns); padding-inline: var(--space-xs); }
.pub-head { display: grid; padding-block: var(--space-sm); color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); }
.pub { align-items: baseline; padding-block: var(--space-lg); }
.pub__year { grid-column: 1; grid-row: 1 / span 3; }
.pub__title, .pub__authors, .pub__abstract { grid-column: 2; }
.pub__venue { grid-column: 3; grid-row: 1 / span 3; align-self: start; }
}
/* ---- education (study and join) ---- */
.join-hero__photo { aspect-ratio: 1238 / 930; }
@media (min-width: 60rem) {
.join-hero__photo { aspect-ratio: auto; height: min(640px, calc(100svh - 72px - 2 * var(--space-xl))); }
}
.ways .row-item__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs); }
.ways .row-item__text p { margin: 0; }
.ways__links { list-style: none; margin: var(--space-xs) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); }
.ways__links .link, .intern-row__apply .link, .section__aside .link { display: inline-flex; align-items: center; min-height: 44px; }
/* A still photo rail: native scroll and snap, no autoplay */
.rail {
list-style: none; margin: 0; padding: 0 0 var(--space-sm); display: flex; gap: var(--space-md);
overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--color-rule-2) transparent;
}
.rail > li { flex: 0 0 min(82%, 26rem); scroll-snap-align: start; }
.rail img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; }
.rail figcaption { font-family: var(--font-display); }
.rail:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
@media (min-width: 60rem) { .rail > li { flex-basis: calc((100% - 2 * var(--space-md)) / 3.15); } }
.join-intern { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.join-intern h2 { font-size: var(--text-section); margin-bottom: var(--space-md); }
.join-intern p + p { margin-top: var(--space-sm); }
.join-intern p { color: var(--color-ink-2); max-width: 46ch; }
.join-intern__head { margin: var(--space-2xl) 0 var(--space-md); font-size: var(--text-title); }
@media (min-width: 60rem) { .join-intern { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; } }
.intern-row__facts { margin: var(--space-sm) 0 0; }
.intern-row__facts div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-2xs); }
.intern-row__facts dt { color: var(--color-muted); font: 500 var(--text-sm)/1.6 var(--font-display); }
.intern-row__facts dd { margin: 0; }
.intern-row__apply { margin-top: var(--space-xs); }
.ways .tag { margin-bottom: var(--space-2xs); }
/* ---- about ---- */
.about-hero__photo { aspect-ratio: 1266 / 930; }
/* Our story: the head on the left, the history set large on the right */
.about-story { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.about-story h2, .about-how h2 { font-size: var(--text-section); overflow-wrap: break-word; min-width: 0; }
.about-story__text p { max-width: 40ch; font: 400 var(--text-lg)/1.45 var(--font-body); color: var(--color-ink); }
@media (min-width: 60rem) { .about-story__text p { font-size: var(--text-xl); line-height: 1.4; } }
.about-story__text p + p { margin-top: var(--space-md); color: var(--color-ink-2); }
.about-story__text .about-story__more { margin-top: var(--space-lg); font-size: var(--text-md); }
.about-story__more .link { display: inline-flex; align-items: center; min-height: 44px; }
/* Learning by doing: the mix of programmes beside the three levels */
.about-how { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.about-how__lead { margin-top: var(--space-md); max-width: 34ch; font-size: var(--text-lead); color: var(--color-ink-2); }
.about-how .statement__levels { border-bottom: var(--rule-hair) solid var(--color-rule); }
.about-how__end { margin-top: var(--space-lg); max-width: 44ch; color: var(--color-ink-2); }
@media (min-width: 60rem) {
.about-story, .about-how { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
}
/* The annual group photos: wide frames, heads kept in view */
.about-rail > li { flex-basis: min(88%, 34rem); }
.about-rail img { aspect-ratio: 2 / 1; object-position: center top; }
@media (min-width: 60rem) { .about-rail > li { flex-basis: calc((100% - var(--space-md)) / 2.2); } }
/* Timeline: one block per academic year, the two newest open */
.tl { border-top: var(--rule-bar) solid var(--color-rule-2); }
.tl-year { border-bottom: var(--rule-hair) solid var(--color-rule); }
.tl-year summary {
display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-md);
min-height: 44px; padding-block: var(--space-md); cursor: pointer; list-style: none;
}
.tl-year summary::-webkit-details-marker { display: none; }
.tl-year summary::after {
content: ""; width: 8px; height: 8px; margin-left: auto; align-self: center;
border-right: var(--rule-bar) solid var(--color-ink); border-bottom: var(--rule-bar) solid var(--color-ink);
transform: rotate(45deg);
}
.tl-year[open] summary::after { transform: rotate(-135deg); }
.tl-year summary:hover .tl-year__label { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.tl-year summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tl-year__label { font: 500 var(--text-2xl)/1.1 var(--font-outlier); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.tl-year__count { color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); }
.tl-year__items { list-style: none; margin: 0; padding: 0 0 var(--space-lg); }
.tl-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs) var(--gap-columns); padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.tl-item > * { margin: 0; }
.tl-item__kind { color: var(--color-muted); font: 500 var(--text-sm)/1.5 var(--font-display); }
.tl-item__title { max-width: 56ch; font: 600 var(--text-lg)/1.3 var(--font-display); color: var(--color-ink); overflow-wrap: break-word; min-width: 0; }
.tl-item__title a { display: inline-block; padding-block: var(--space-sm); color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.tl-item__title a:hover { text-decoration-color: var(--color-accent-strong); text-decoration-thickness: 2px; }
.tl-item__text { max-width: 64ch; color: var(--color-ink-2); }
@media (min-width: 60rem) {
.tl-item { grid-template-columns: 11rem minmax(0, 1fr); align-items: baseline; padding-block: var(--space-md); }
.tl-item__kind { grid-row: 1 / span 2; }
.tl-item__title, .tl-item__text { grid-column: 2; }
}
/* ---- team ---- */
/* The hero is short: the people below are the picture. The live counts sit beside the head. */
@media (min-width: 60rem) {
.team-hero { min-height: 0; padding-block: var(--space-2xl) var(--space-xl); }
.team-hero .page-hero__grid { align-items: end; }
}
.team-facts[hidden] { display: none; }
.team-facts__figure { font-family: var(--font-outlier); font-weight: 500; font-variant-numeric: tabular-nums; }
/* Current members: a portrait beside the text on phones, a grid of portraits from 40rem */
.people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl) var(--gap-columns); }
.person { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-md); align-items: start; align-content: start; scroll-margin-top: 88px; }
.person:target { outline: var(--rule-bar) solid var(--color-accent-strong); outline-offset: var(--space-xs); }
.person:focus-visible { outline: 2px solid var(--color-focus); outline-offset: var(--space-xs); }
.person__photo { aspect-ratio: 4 / 5; background: var(--color-paper-3); outline: var(--rule-hair) solid var(--color-rule-2); outline-offset: -1px; display: grid; place-items: center; overflow: hidden; }
.person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.person__initials { font: 600 var(--text-2xl)/1 var(--font-display); color: var(--color-muted); }
.person__body > * + * { margin-top: var(--space-xs); }
.person__name { font-size: var(--text-title); overflow-wrap: break-word; min-width: 0; }
.person__role { color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); }
.person__facts { margin-block: var(--space-sm) 0; }
.person__facts div { padding-block: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule); }
.person__facts dt { color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); }
.person__facts dd { margin: 0; color: var(--color-ink-2); overflow-wrap: break-word; }
.person__dates { font-family: var(--font-outlier); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.person__story { color: var(--color-ink-2); }
.person__link .link, .alum__link .link { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 40rem) {
.people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.person { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 60rem) { .people { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Prizes per person: a small medal beside each prize */
.person__prizes { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; gap: var(--space-xs); }
.person__prizes li { display: flex; align-items: center; gap: var(--space-sm); color: var(--color-ink); font: 500 var(--text-sm)/1.35 var(--font-display); }
.medal--small { flex-shrink: 0; width: 1.75rem; height: 1.75rem; margin-top: var(--space-xs); font-size: var(--text-xs); }
.medal--small::before { width: 0.875rem; height: 0.5rem; }
.medal--small::after { inset: 2px; }
.person__prizes .medal--none { display: none; }
/* Alumni: an index by year that stays short at dozens of names */
.team-filter .btn { min-height: 48px; }
.alum-head { display: none; }
.alumni { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) solid var(--color-rule-2); }
.alum { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); scroll-margin-top: 88px; }
.alum[hidden] { display: none; }
.alum:target { background: var(--color-paper-3); }
.alum:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.alum p { margin: 0; }
.alum__year { color: var(--color-ink-2); font: 500 var(--text-sm)/1.5 var(--font-outlier); font-variant-numeric: tabular-nums; }
.alum__none { color: var(--color-muted); font-family: var(--font-display); }
.alum__name { font: 600 var(--text-lg)/1.3 var(--font-display); overflow-wrap: break-word; min-width: 0; }
.alum__project { color: var(--color-ink-2); max-width: 56ch; }
.alum__role { color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); }
.alum__story { margin-top: var(--space-2xs); color: var(--color-ink-2); max-width: 64ch; }
.alum__nowat { color: var(--color-ink); font: 500 var(--text-md)/1.4 var(--font-display); }
@media (min-width: 60rem) {
.alum-head, .alum { grid-template-columns: 9rem minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--gap-columns); padding-inline: var(--space-xs); }
.alum-head { display: grid; padding-block: var(--space-sm); color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); }
.alum { align-items: baseline; }
}
/* Join: a short closing band */
.team-join h2 { overflow-wrap: break-word; min-width: 0; }
.team-join p { max-width: 44ch; }
@media (min-width: 60rem) { .team-join .actions { justify-content: flex-end; } }
/* ---- projects and media ---- */
/* A short hero: the wall below is the picture */
.wall-hero h1 { overflow-wrap: break-word; min-width: 0; }
@media (min-width: 60rem) {
.wall-hero { min-height: 0; padding-block: var(--space-2xl); }
.wall-hero .page-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
.wall-hero .lead { margin-top: 0; }
}
.wall { padding-top: 0; }
/* The filter rides under the header while the wall scrolls; without script the whole wall stands */
html:not(.js) .wall-filter { display: none; }
.wall-filter {
position: sticky; top: 56px; z-index: var(--z-sticky); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-md);
margin-bottom: var(--space-xl); padding-block: var(--space-xs); background: var(--color-paper);
border-top: var(--rule-bar) solid var(--color-rule-2); border-bottom: var(--rule-hair) solid var(--color-rule);
}
.js .wall-filter .picker__buttons { flex: 1 1 auto; min-width: 0; margin: 0; padding: var(--space-2xs); }
.picker__buttons button[hidden] { display: none; }
.wall-filter__n { margin-left: var(--space-2xs); color: var(--color-muted); font: 500 var(--text-sm)/1 var(--font-outlier); font-variant-numeric: tabular-nums; }
.picker__buttons button[aria-pressed="true"] .wall-filter__n { color: var(--color-accent); }
.wall-filter__count { margin: 0; padding-inline: var(--space-2xs); color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); }
@media (min-width: 60.01rem) { .wall-filter { top: 72px; } }
/* Two groups on one set of tracks: projects, then videos, photos and posters */
.wall-group { scroll-margin-top: 140px; }
.wall-group[hidden] { display: none; }
.wall-group + .wall-group { margin-top: var(--space-3xl); }
.wall-group__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-lg); margin-bottom: var(--space-lg); }
.wall-group__head { font-size: var(--text-section); overflow-wrap: break-word; min-width: 0; }
.wall-group__top .link { display: inline-flex; align-items: center; min-height: 44px; }
.wall-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--space-xl) var(--space-md); }
.wall-grid > .data-empty, .wall-grid > .data-error { grid-column: 1 / -1; }
/* A tile: the picture, then a few lines under it. No box, no shadow. */
.tile { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.tile[hidden] { display: none; }
.tile__frame { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--color-paper-3); }
.tile__frame img { display: block; width: 100%; height: 100%; object-fit: cover; outline: var(--rule-hair) solid var(--color-rule-2); outline-offset: -1px; }
a.tile__frame { cursor: zoom-in; }
a.tile__frame:focus-visible, .tile__play:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tile:has(a.tile__frame:hover) .tile__title, .tile:has(.tile__play:hover) .tile__title { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.tile--wide { grid-column: span 2; }
.tile--wide .tile__frame { aspect-ratio: 16 / 9; }
.tile--tall { grid-row: span 2; }
.tile--tall .tile__frame { flex: 1 1 auto; aspect-ratio: 800 / 1141; min-height: 0; }
.tile--tall .tile__frame img { object-position: center top; }
.tile__body > * { margin: 0; }
.tile__body > * + * { margin-top: var(--space-3xs); }
.tile__kind { color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); }
.tile__title { font: 600 var(--text-lg)/1.25 var(--font-display); color: var(--color-ink); overflow-wrap: break-word; min-width: 0; }
.tile__members { color: var(--color-ink-2); }
.tile__text { color: var(--color-ink-2); font-size: var(--text-sm); max-width: 44ch; }
.tile__more .link { display: inline-flex; align-items: center; min-height: 44px; }
.tile__about summary { display: list-item; width: fit-content; min-height: 44px; color: var(--color-ink); font: 500 var(--text-sm)/44px var(--font-display); cursor: pointer; }
.tile__about summary::marker { color: var(--color-accent-strong); }
.tile__about summary:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.tile__about summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tile__about p { padding-bottom: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); max-width: 60ch; }
@media (min-width: 60rem) {
.wall-grid--media { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-lg); }
}
/* Videos: a still and a play label; the YouTube player loads only on the press */
.tile__play { position: absolute; inset: 0; display: block; background: var(--color-ink); }
.tile__play-label {
position: absolute; left: var(--space-md); bottom: var(--space-md); display: inline-flex; align-items: center; gap: var(--space-xs);
min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink);
font: 500 var(--text-md)/1 var(--font-display); transition: background-color var(--dur-micro) var(--ease-out);
}
.tile__play-label::before { content: ""; width: 10px; height: 12px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.tile__play:hover .tile__play-label { background: var(--color-accent-2); }
.tile__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tile__frame iframe:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* The picture viewer: a native dialog, the picture whole on paper */
.viewer {
width: min(calc(100% - 2 * var(--gutter)), 72rem); max-width: none; max-height: calc(100dvh - 2 * var(--space-md));
margin: auto; padding: 0; border: 0; border-top: var(--rule-bar) solid var(--color-ink); background: var(--color-paper); color: var(--color-ink); overflow-y: auto;
}
.viewer::backdrop { background: color-mix(in oklch, var(--color-ink) 88%, transparent); }
.viewer__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.viewer__count { margin: 0 auto 0 0; color: var(--color-muted); font: 500 var(--text-sm)/1 var(--font-outlier); font-variant-numeric: tabular-nums; }
.viewer__btn { min-height: 44px; padding: 0 var(--space-md); }
.viewer__btn[hidden] { display: none; }
.viewer__figure { margin: 0; padding: var(--space-md); display: grid; gap: var(--space-sm); }
.viewer__img { display: block; width: 100%; height: auto; max-height: calc(100dvh - 14rem); object-fit: contain; background: var(--color-paper-2); }
.viewer__caption > * { margin: 0; }
.viewer__title { font-size: var(--text-lg); }
.viewer__members { color: var(--color-ink-2); }
.viewer__more .link { display: inline-flex; align-items: center; min-height: 44px; }
.viewer__members[hidden], .viewer__more[hidden] { display: none; }
.viewer-open body { overflow: hidden; }
/* A short centred page: the 404 page (and media.html before it moved to archive/) */
.moved__inner { min-height: 50svh; display: grid; align-content: center; justify-items: start; gap: var(--space-lg); }
.moved h1 { font-size: var(--text-display-s); overflow-wrap: break-word; min-width: 0; }
.moved .lead { max-width: 40ch; color: var(--color-ink-2); }
/* ---- news ---- */
/* A short hero: the newest post below is the picture */
.news-hero h1 { overflow-wrap: break-word; min-width: 0; }
@media (min-width: 60rem) {
.news-hero { min-height: 0; padding-block: var(--space-2xl); }
.news-hero .page-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
.news-hero .lead { margin-top: 0; }
}
/* The feed: the newest post large with its picture, the rest as rows with a small picture */
.news-feed { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) solid var(--color-rule-2); }
.news-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md) var(--gap-columns); align-items: start; padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); scroll-margin-top: 88px; }
.news-item:target { background: var(--color-paper-3); }
.news-item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.news-item__photo { aspect-ratio: 4 / 3; background: var(--color-paper-3); }
.news-item__body { min-width: 0; }
.news-item__body > * + * { margin-top: var(--space-sm); }
.news-item__date { display: block; color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); }
.news-item__title { font-size: var(--text-title); max-width: 32ch; overflow-wrap: break-word; min-width: 0; }
.news-item__text { color: var(--color-ink-2); max-width: 62ch; }
.news-item__text p + p { margin-top: var(--space-sm); }
.news-item__more summary { display: list-item; width: fit-content; min-height: 44px; color: var(--color-ink); font: 500 var(--text-sm)/44px var(--font-display); cursor: pointer; }
.news-item__more summary::marker { color: var(--color-accent-strong); }
.news-item__more summary:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.news-item__more summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.news-item__more[open] summary { margin-bottom: var(--space-xs); }
.news-item__link .link { display: inline-flex; align-items: center; min-height: 44px; }
.news-item--lead { padding-top: var(--space-lg); }
.news-item--lead .news-item__title { font-size: var(--text-section); line-height: 1.05; max-width: 20ch; }
.news-item--lead .news-item__text { font-size: var(--text-lead); }
@media (min-width: 40rem) and (max-width: 59.99rem) {
.news-item:not(.news-item--lead) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}
@media (min-width: 60rem) {
.news-item { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); padding-inline: var(--space-xs); }
.news-item--lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding-block: var(--space-lg) var(--space-2xl); }
.news-item--lead .news-item__body { align-self: center; }
}
/* Events: date, what and where, then the calendar file */
.events { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) solid var(--color-rule-2); }
.event { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs) var(--gap-columns); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); scroll-margin-top: 88px; }
.event p { margin: 0; }
.event__when { color: var(--color-ink-2); font: 500 var(--text-sm)/1.5 var(--font-display); font-variant-numeric: tabular-nums; }
.event__title { font-size: var(--text-title); overflow-wrap: break-word; min-width: 0; }
.event__where { margin-top: var(--space-2xs); color: var(--color-muted); font-family: var(--font-display); }
.event__text { margin-top: var(--space-xs); color: var(--color-ink-2); max-width: 60ch; }
.event__actions { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); }
.event__actions .link { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 60rem) {
.event { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); align-items: baseline; padding-inline: var(--space-xs); }
.event__actions { justify-content: flex-end; }
}
/* Follow: the closing band */
.news-follow h2 { overflow-wrap: break-word; min-width: 0; }
.news-follow p { max-width: 44ch; }
@media (min-width: 60rem) { .news-follow .actions { justify-content: flex-end; } }
/* ---- contact ---- */
/* The hero: the lab at work beside the invitation */
.contact-hero h1 { overflow-wrap: break-word; min-width: 0; }
.contact-hero__photo { aspect-ratio: 4 / 3; min-width: 0; }
@media (min-width: 60rem) {
.contact-hero { min-height: 0; padding-block: var(--space-xl) var(--space-2xl); }
.contact-hero .page-hero__grid { align-items: center; }
}
/* Channels set large in type: the address book of the lab */
.channels { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) solid var(--color-rule-2); }
.channel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs) var(--gap-columns); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.channel__kind { color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); }
.channel__link {
justify-self: start; display: inline-flex; align-items: center; min-height: 48px; min-width: 0; max-width: 100%; overflow-wrap: anywhere;
color: var(--color-ink); font: 600 clamp(1.5rem, 5.2vw + 0.4rem, 4.5rem)/1.05 var(--font-display); letter-spacing: -0.03em;
text-decoration: underline; text-decoration-color: var(--color-rule-2); text-decoration-thickness: var(--rule-bar); text-underline-offset: 0.14em;
transition: text-decoration-color var(--dur-micro) var(--ease-out);
}
.channel__link:hover { color: var(--color-ink); text-decoration-color: var(--color-accent-strong); }
.channel__link:focus-visible, .socials a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; transition: none; }
.socials { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-xl); }
.socials a {
display: inline-flex; align-items: center; min-height: 48px;
color: var(--color-ink); font: 600 var(--text-section)/1.1 var(--font-display); letter-spacing: -0.02em;
text-decoration: underline; text-decoration-color: var(--color-rule-2); text-decoration-thickness: var(--rule-bar); text-underline-offset: 0.16em;
transition: text-decoration-color var(--dur-micro) var(--ease-out);
}
.socials a:hover { color: var(--color-ink); text-decoration-color: var(--color-accent-strong); }
@media (min-width: 60rem) {
.channel { grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); align-items: baseline; padding-inline: var(--space-xs); }
.socials a { font-size: var(--text-3xl); }
}
/* Visit: the address, and the map and calendar that load on request */
.visit { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.visit h2 { font-size: var(--text-section); overflow-wrap: break-word; min-width: 0; }
.visit__address { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-bar) solid var(--color-ink); font: 600 var(--text-2xl)/1.2 var(--font-display); font-style: normal; color: var(--color-ink); letter-spacing: -0.01em; }
.visit__country { margin-top: var(--space-xs); color: var(--color-muted); font-family: var(--font-display); }
.visit__links { display: flex; flex-direction: column; align-items: flex-start; margin-top: var(--space-lg); }
.visit__links .link { display: inline-flex; align-items: center; min-height: 44px; }
.visit__links .link:focus-visible, .staff__mail:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.visit__frames { display: grid; gap: var(--space-lg); min-width: 0; }
.embed { position: relative; aspect-ratio: 3 / 2; min-width: 0; background: var(--color-paper-3); outline: var(--rule-hair) solid var(--color-rule-2); outline-offset: -1px; scroll-margin-top: 88px; }
.embed[hidden] { display: none; }
.embed:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed__cover { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-md); padding: var(--space-lg); text-align: center; }
.embed__cover p { max-width: 30ch; color: var(--color-ink-2); }
.embed__load { display: none; }
.js .embed__load { display: inline-flex; }
.embed--calendar { aspect-ratio: auto; height: 32rem; }
@media (min-width: 60rem) {
.visit { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.visit__address { font-size: var(--text-3xl); }
}
/* People: the two staff researchers with their own address */
.staff { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: var(--rule-bar) solid var(--color-rule-2); }
.staff__person { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-md) var(--space-lg); align-items: start; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.staff__photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; outline: var(--rule-hair) solid var(--color-rule-2); outline-offset: -1px; }
.staff__name { font-size: var(--text-title); overflow-wrap: break-word; min-width: 0; }
.staff__role { margin-top: var(--space-2xs); color: var(--color-ink-2); max-width: 36ch; }
.staff__mail { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-xs); overflow-wrap: anywhere; }
@media (min-width: 40rem) { .staff__person { grid-template-columns: 144px minmax(0, 1fr); } }
@media (min-width: 60rem) {
.staff { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.staff__person { grid-template-columns: 176px minmax(0, 1fr); padding-inline: var(--space-xs); }
}
/* The message form: real labels, every state, an honest result */
.contact-message { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.contact-message h2 { font-size: var(--text-section); overflow-wrap: break-word; min-width: 0; }
.contact-message__head > p { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 40ch; }
.contact-message__head > .form-flag { display: none; padding: var(--space-md); border-left: var(--rule-bar) solid; background: var(--color-paper); color: var(--color-ink); scroll-margin-top: 88px; }
.contact-message__head > .form-flag:target { display: block; }
.form-flag:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.form-flag--ok { border-left-color: var(--color-success); }
.form-flag--fail { border-left-color: var(--color-error); }
.contact-form { display: grid; gap: var(--space-lg); min-width: 0; max-width: 44rem; }
.field { display: grid; gap: var(--space-xs); min-width: 0; }
.field label { color: var(--color-ink); font: 500 var(--text-md)/1.3 var(--font-display); }
.field__optional { color: var(--color-muted); }
.field input, .field textarea {
width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md);
border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); background: var(--color-paper);
color: var(--color-ink); font: 400 var(--text-md)/1.5 var(--font-body);
transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.field textarea { min-height: 11rem; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--color-ink); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-color: var(--color-ink); transition: none; }
.field input:active, .field textarea:active { border-color: var(--color-ink); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--color-error); box-shadow: inset 0 0 0 1px var(--color-error); }
.field input:disabled, .field textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.field__error { color: var(--color-error); font: 500 var(--text-sm)/1.4 var(--font-display); }
.field__error:empty { display: none; }
@media (pointer: coarse) { .field input { min-height: 52px; } }
.contact-form__send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }
.contact-form .btn[aria-busy="true"] { cursor: progress; }
/* The result: the plug from the logo connects when the server says the message went out */
.form-result { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; flex: 1 1 18rem; }
.form-result__text { margin: 0; max-width: 44ch; color: var(--color-ink); }
.form-result__text:empty { display: none; }
.plug { display: none; flex: none; overflow: hidden; }
.is-sending .plug, .is-sent .plug, .is-failed .plug { display: block; }
.plug__cable { fill: none; stroke: var(--color-ink); stroke-width: 2; stroke-linecap: round; }
.plug__head { fill: var(--color-ink); }
.plug__pins, .plug__holes { fill: none; stroke: var(--color-ink); stroke-width: 2.5; stroke-linecap: round; }
.plug__socket { fill: var(--color-paper); stroke: var(--color-ink); stroke-width: 1.5; transition: fill var(--dur-short) var(--ease-out) var(--dur-long); }
.plug__move { transform: translateX(0); transition: transform var(--dur-long) var(--ease-out); }
.is-sending .plug__move { transform: translateX(12px); }
.is-sent .plug__move { transform: translateX(32px); }
.is-sent .plug__socket { fill: var(--color-accent); }
.is-failed .form-result__text { padding-left: var(--space-sm); border-left: var(--rule-bar) solid var(--color-error); }
@media (prefers-reduced-motion: reduce) {
.plug__move, .plug__socket { transition: none; }
}
@media (min-width: 60rem) {
.contact-message { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); }
}
/* ---- photo slots ---- */
/* A place kept for a photo the owner still has to take. The frame names what belongs in it
and its size. Static slots hold an ![]()
(alt="", the figcaption describes it) that points at
a fixed file in images/slots/ and lies over the label: onerror removes it while the file is
missing, so the label shows; once the file exists the photo covers the label and onload adds
.slot--filled so the label also leaves the reading order. Sheet items (team, projects, news)
show the label without an ![]()
; their photo goes in the sheet. */
.slot { position: relative; margin: 0; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 2; min-width: 0; overflow: hidden; background-color: var(--color-paper-3); outline: var(--rule-hair) solid var(--color-rule-2); outline-offset: -1px; }
.slot--four-three { aspect-ratio: 4 / 3; }
.slot--portrait { aspect-ratio: 4 / 5; }
.slot--poster { aspect-ratio: 800 / 1132; }
/* Crop marks in the four corners: the frame reads as a place kept, not as a broken picture */
.slot::before { content: ""; position: absolute; inset: var(--space-sm); pointer-events: none;
--tick: var(--color-rule-2);
background:
linear-gradient(var(--tick), var(--tick)) left top / 14px 1px no-repeat,
linear-gradient(var(--tick), var(--tick)) left top / 1px 14px no-repeat,
linear-gradient(var(--tick), var(--tick)) right top / 14px 1px no-repeat,
linear-gradient(var(--tick), var(--tick)) right top / 1px 14px no-repeat,
linear-gradient(var(--tick), var(--tick)) left bottom / 14px 1px no-repeat,
linear-gradient(var(--tick), var(--tick)) left bottom / 1px 14px no-repeat,
linear-gradient(var(--tick), var(--tick)) right bottom / 14px 1px no-repeat,
linear-gradient(var(--tick), var(--tick)) right bottom / 1px 14px no-repeat; }
.slot > .slot__label { position: relative; margin: 0; text-align: start; padding: var(--space-lg) var(--space-xl); max-width: 32rem; color: var(--color-ink); font: 500 var(--text-sm)/1.4 var(--font-display); overflow-wrap: break-word; }
.slot .slot__size { display: block; margin-top: var(--space-3xs); color: var(--color-ink-2); font: 500 var(--text-xs)/1.4 var(--font-outlier); font-variant-numeric: tabular-nums; }
.slot__img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; color: transparent; outline: var(--rule-hair) solid var(--color-rule-2); outline-offset: -1px; }
.slot--filled::before, .slot--filled > .slot__label { visibility: hidden; }
/* On the ink band the frame steps back from the paper */
/* Team: the initials stay in the middle, the slot label sits at the foot of the portrait */
.person__photo.slot { display: grid; place-items: center; place-content: center; }
.person__photo.slot .slot__label { position: absolute; left: 0; right: 0; bottom: 0; max-width: none; }
/* Projects wall: a poster still to come */
.tile__frame.slot { display: flex; width: 100%; }
/* Figures that carry a slot: a caption below the frame, like .photo */
.slot-figure { margin: 0; min-width: 0; }
.slot-figure figcaption { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }
.slot-figure figcaption strong { display: block; color: var(--color-ink); font: 600 var(--text-md)/1.3 var(--font-display); }
/* Study and join: three graduation projects under the rail */
.graduates { margin-top: var(--space-2xl); }
.graduates__head { font-size: var(--text-title); margin-bottom: var(--space-md); }
.graduates__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg) var(--gap-columns); }
@media (min-width: 40rem) { .graduates__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Research: the DC appliances pair */
.appliances { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg) var(--gap-columns); }
.appliances__text { max-width: 52ch; }
.appliances__text > * + * { margin-top: var(--space-sm); }
.appliances__pics { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
@media (min-width: 40rem) { .appliances__pics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .appliances { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
/* Contact and about: one slot under the text */
.visit__slot, .about-story__slot { margin-top: var(--space-lg); max-width: 32rem; }
/* ---- counters ---- */
/* Thumbs-up and view counts from api/react.php (js/reactions.js). They appear only after the
endpoint answered; a quiet outlined control under each item, never a second primary. States:
default, hover, focus, active, disabled (store full), loading (aria-busy), error (.react--error,
with a note in words) and pressed (aria-pressed="true", set from the server's answer). */
.react { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin-top: var(--space-sm); }
.react__like { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 500 var(--text-sm)/1 var(--font-display); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.react__icon { flex-shrink: 0; }
.react__count { font-variant-numeric: tabular-nums; }
@media (hover: hover) { .react__like:hover { background: var(--color-paper-3); } }
.react__like:active { transform: translateY(1px); }
.react__like:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; transition: none; }
.react__like[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.react__like[aria-pressed="true"] .react__icon path { fill: var(--color-accent); stroke: var(--color-accent); }
@media (hover: hover) { .react__like[aria-pressed="true"]:hover { background: var(--color-ink-2); } }
.react__like:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.react__like[aria-busy="true"] { cursor: progress; }
.react__like[aria-busy="true"] .react__icon { opacity: 0.55; }
.react--error .react__like { border-color: var(--color-error); }
.react > .react__views, .react > .react__note { margin: 0; color: var(--color-ink-2); font: 500 var(--text-sm)/1.4 var(--font-display); font-variant-numeric: tabular-nums; }
.react > .react__note:empty { display: none; }
.react--error > .react__note { color: var(--color-error); }
@media (pointer: coarse) { .react__like { min-height: 48px; } }
@media (prefers-reduced-motion: reduce) { .react__like { transition: none; } }
.tile__body > .react { margin-top: var(--space-xs); }
@media (min-width: 60rem) { .pub > .react { grid-column: 2; } }
/* News: LinkedIn views copied into the sheet by hand */
.news-item__reach { color: var(--color-ink-2); font: 500 var(--text-sm)/1.4 var(--font-display); font-variant-numeric: tabular-nums; }
/* Homepage figures band: reach (LinkedIn views, site views, thumbs up), hidden while empty */
.reach { margin-top: var(--space-2xl); }
.reach[hidden] { display: none; }
.section--green .reach__title { margin-bottom: var(--space-md); font-size: var(--text-title); color: var(--color-ink); }
/* ---- profile ---- */
/* person.html?id=: one person drawn from the people sheet by data-loader.js (loadProfile).
A short hero with the name, the facts the sheet holds and the portrait (or its slot), then
the story, the projects as wall tiles and the prizes as medal rows. Links to a profile from
team.html and the projects wall are the names themselves. */
.profile-hero { min-height: 0; padding-block: var(--space-lg) var(--space-2xl); }
.profile-hero > .wrap { display: block; }
.profile-hero--message { padding-block: var(--space-2xl); }
.profile-hero--message .lead { max-width: 52ch; }
.profile__back { margin: 0 0 var(--space-lg); }
.profile__back .link { display: inline-flex; align-items: center; min-height: 44px; }
.profile__back .link::before { content: ""; width: 0.5rem; height: 0.5rem; margin-right: var(--space-xs); border-left: var(--rule-bar) solid currentColor; border-bottom: var(--rule-bar) solid currentColor; transform: rotate(45deg); }
.profile__grid { align-items: start; }
.profile__text h1 { max-width: 16ch; overflow-wrap: break-word; }
.profile__role { max-width: 40ch; }
.profile__facts { margin-top: var(--space-xl); }
.profile__facts dd { overflow-wrap: break-word; min-width: 0; }
.profile__facts .link { display: inline-flex; align-items: center; min-height: 44px; }
.profile__dates { font-family: var(--font-outlier); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.profile__photo { width: 100%; max-width: 26rem; }
@media (min-width: 60rem) {
.profile-hero { min-height: 0; display: block; padding-block: var(--space-lg) var(--space-2xl); }
.profile__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.profile__photo { justify-self: end; }
}
[data-variant="profile"][aria-busy="true"] > * { visibility: hidden; }
.profile-story__text { margin-top: var(--space-lg); max-width: 64ch; }
.profile-story__text p { font-size: var(--text-lead); color: var(--color-ink-2); }
.profile-story__text p + p { margin-top: var(--space-md); }
.profile-prizes .row-item__text p { margin: 0; }
.profile-prizes .row-item__text p + p { margin-top: var(--space-2xs); }
/* Names that open a profile: on the team grid, the alumni index and the project tiles */
.person__name .link, .alum__name .link { display: inline-flex; align-items: center; min-height: 44px; font-weight: inherit; color: var(--color-ink); }
.tile__members .link { font-family: inherit; font-weight: inherit; }
/* A poster slot in a narrow tile (phones): the label keeps room for its words */
.tile__frame.slot > .slot__label { padding: var(--space-md); }
.tile__frame.slot .slot__size { overflow-wrap: anywhere; }
/* ---- profile ask ---- */
.profile__ask { margin-top: var(--space-lg); }
.profile__ask-note { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); max-width: 40ch; }
/* ---- page frame: dark top and dark footer (owner's request, 2026-11-06) ----
The first band of every page and the footer swap the colour tokens to titan blue-gray,
so every rule inside them (text, rules, buttons, links, facts, chart) follows without per-rule overrides. */
.hero, .page-hero, #footer.site-footer {
--color-paper: var(--color-dark-paper); --color-paper-2: var(--color-dark-paper-2); --color-paper-3: var(--color-dark-paper-3);
--color-sheet: var(--color-dark-paper-2); --color-slate: var(--color-dark-paper-3);
--color-ink: var(--color-dark-ink); --color-ink-2: var(--color-dark-ink-2); --color-muted: var(--color-dark-muted);
--color-rule: var(--color-dark-rule); --color-rule-2: var(--color-dark-rule-2);
--color-accent-strong: var(--color-accent); --color-focus: var(--color-accent);
background: var(--color-paper); color: var(--color-ink);
}
.hero, .page-hero { padding-bottom: var(--space-2xl); border-bottom: var(--rule-bar) solid var(--color-accent); }
.site-footer__logo img { filter: brightness(0) invert(1); }
.hero .tag, .page-hero .tag { color: var(--color-accent-ink); }
/* ---- one family: contrast from size, weight, colour and italic ---- */
body { font-weight: 400; }
.lead { font-weight: 500; }
figcaption, .section__aside { font-style: italic; }
/* ---- power ranks ---- */
/* ranks.html, the Power Ranks band on person.html and the badge on team.html (js/ranks.js).
A badge is an octagonal plate with a drawing of the rank's component in currentColor; seven
tones climb from titan blue-gray through lime to gold (--color-rank-*, tokens.css). DC Grid
Master alone has a ring and three pips for its tier. Still: no motion, the state is drawn once. */
.rank-badge { display: block; flex-shrink: 0; width: 48px; height: 48px; color: var(--color-rank-ink); --badge-plate: var(--color-rank-1); --badge-edge: var(--color-rank-edge-1); }
.rank-badge__plate { fill: var(--badge-plate); stroke: var(--badge-edge); stroke-width: 2; }
.rank-badge__ring { fill: none; stroke: var(--badge-edge); stroke-width: 1.2; }
.rank-badge__glyph { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rank-badge__glyph .rank-badge__solid { fill: currentColor; stroke-width: 1.5; }
.rank-badge__pip { fill: currentColor; }
.rank-badge__pip--off { opacity: 0.25; }
.rank-badge--tone2 { --badge-plate: var(--color-rank-2); --badge-edge: var(--color-rank-edge-2); }
.rank-badge--tone3 { --badge-plate: var(--color-rank-3); --badge-edge: var(--color-rank-edge-3); color: var(--color-rank-ink-3); }
.rank-badge--tone4 { --badge-plate: var(--color-rank-4); --badge-edge: var(--color-rank-edge-4); }
.rank-badge--tone5 { --badge-plate: var(--color-rank-5); --badge-edge: var(--color-rank-edge-5); }
.rank-badge--tone6 { --badge-plate: var(--color-rank-6); --badge-edge: var(--color-rank-edge-6); }
.rank-badge--tone7 { --badge-plate: var(--color-rank-7); --badge-edge: var(--color-rank-edge-7); }
.rank-badge--small { width: 28px; height: 28px; }
.rank-badge--ladder { width: 44px; height: 44px; }
.rank-badge--large { width: 88px; height: 88px; }
.rank-badge--strip { width: 100%; height: auto; aspect-ratio: 1; }
/* Hero: short, the 23 badges as its picture */
@media (min-width: 60rem) {
.ranks-hero { min-height: 0; padding-block: var(--space-2xl) var(--space-xl); }
.ranks-hero .page-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
}
.ranks-hero h1 { overflow-wrap: break-word; min-width: 0; }
.ranks-hero .lead { max-width: 48ch; }
.rank-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-xs); max-width: 28rem; margin-bottom: var(--space-lg); }
.ranks-facts div[hidden] { display: none; }
.ranks-facts__figure { font-variant-numeric: tabular-nums; }
.ranks-facts .link { display: inline-flex; align-items: center; min-height: 44px; }
/* Text lines shared by the bands */
.ranks-empty { max-width: 56ch; padding-block: var(--space-lg); border-top: var(--rule-bar) solid var(--color-rule-2); color: var(--color-ink-2); font-size: var(--text-lead); }
.ranks-note { margin-top: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); font-style: italic; max-width: 60ch; }
.ranks-sub { margin: var(--space-2xl) 0 var(--space-md); font-size: var(--text-title); }
.ranks-fair { margin-top: var(--space-xl); max-width: 64ch; color: var(--color-ink-2); }
/* A board: place, badge, name and rank, count */
.board__caption { margin-bottom: var(--space-sm); color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); }
.board { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) solid var(--color-rule-2); max-width: 56rem; }
.board__row { display: grid; grid-template-columns: 2rem 28px minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.board__place { font: 600 var(--text-lg)/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--color-ink); }
.board__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-sm); min-width: 0; overflow-wrap: break-word; }
.board__who .link { display: inline-flex; align-items: center; min-height: 44px; }
.board__rank { color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); }
.board__count { color: var(--color-ink); font: 500 var(--text-md)/1.3 var(--font-display); font-variant-numeric: tabular-nums; text-align: end; }
/* Power Player of the month (the Wall of Fame frames are under "wall of fame") */
.winner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg); align-items: start; max-width: 48rem; padding-block: var(--space-lg); border-top: var(--rule-bar) solid var(--color-rule-2); }
.winner__text > * { margin: 0; }
.winner__text > * + * { margin-top: var(--space-2xs); }
.winner__when { color: var(--color-ink-2); font: 500 var(--text-md)/1.4 var(--font-display); }
.winner__name { font-size: var(--text-2xl); overflow-wrap: break-word; }
.winner__name .link { font-weight: inherit; }
.winner__rank { color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); }
.winner__note { color: var(--color-ink-2); max-width: 52ch; }
.winner__post .link { display: inline-flex; align-items: center; min-height: 44px; }
.ranks-month__so-far { margin-top: var(--space-md); }
/* The ladder: 23 ranks on hairlines, lowest first; two columns from 60rem */
.ladder { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) solid var(--color-rule-2); }
.ladder__rank { display: grid; grid-template-columns: 44px 1.75rem minmax(0, 1fr) auto; gap: 0 var(--space-md); align-items: center; padding-block: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); scroll-margin-top: 88px; break-inside: avoid; }
.ladder__rank > .rank-badge { grid-row: 1 / span 2; }
.ladder__name { margin: 0; font-size: var(--text-lg); line-height: 1.25; overflow-wrap: break-word; min-width: 0; }
.ladder__step { grid-row: 1; text-align: end; color: var(--color-muted); font: 500 var(--text-sm)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ladder__xp { margin: 0; color: var(--color-ink-2); font: 500 var(--text-sm)/1.4 var(--font-display); font-variant-numeric: tabular-nums; text-align: end; }
.ladder__figure { color: var(--color-ink); font-variant-numeric: tabular-nums; }
.ladder__rank--top .ladder__xp { grid-column: 3 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 0 var(--space-md); text-align: start; }
.ladder__who { grid-column: 3 / -1; margin: 0; color: var(--color-ink-2); }
.ladder__who[hidden] { display: none; }
.ladder__rank--top .ladder__who { grid-row: 3; }
.ladder__who .link { display: inline-flex; align-items: center; min-height: 44px; }
.ladder__tier { color: var(--color-muted); font: 500 var(--text-sm)/1 var(--font-display); }
@media (min-width: 60rem) {
.ladder { columns: 2; column-gap: var(--gap-columns); }
.ladder__rank { padding-inline: var(--space-xs); }
}
/* Wall of Fame: see "wall of fame" at the end */
/* How to earn XP */
.xp-wrap { max-width: 64rem; }
.xp-table { width: 100%; border-collapse: collapse; border-top: var(--rule-bar) solid var(--color-rule-2); }
.xp-table thead th { padding: var(--space-sm) var(--space-xs); color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); text-align: start; border-bottom: var(--rule-hair) solid var(--color-rule); }
.xp-table tbody th, .xp-table td { padding: var(--space-md) var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); text-align: start; vertical-align: baseline; }
.xp-table tbody th { font: 600 var(--text-md)/1.35 var(--font-display); color: var(--color-ink); }
.xp-table td { color: var(--color-ink-2); }
.xp-table .xp-table__xp, .xp-table thead th:last-child { text-align: end; white-space: nowrap; color: var(--color-ink); font-family: var(--font-display); font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 39.99rem) {
.xp-table thead { display: none; }
.xp-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-md); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.xp-table tbody th, .xp-table td { padding: 0; border: 0; }
.xp-table td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-size: var(--text-sm); }
.xp-table .xp-table__xp { grid-row: 1; grid-column: 2; }
}
/* Profile: rank, a battery of XP to the next tier, thumbs up, and the XP rows */
.profile-ranks__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl) var(--gap-columns); align-items: start; }
@media (min-width: 60rem) { .profile-ranks__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.rank-status { display: flex; align-items: center; gap: var(--space-lg); }
.rank-status__text > * { margin: 0; }
.rank-status__name { font: 600 var(--text-2xl)/1.1 var(--font-display); color: var(--color-ink); }
.rank-status__xp { margin-top: var(--space-2xs); color: var(--color-ink-2); font: 500 var(--text-lg)/1.3 var(--font-display); }
.rank-status__figure { font-variant-numeric: tabular-nums; color: var(--color-ink); }
.battery { position: relative; display: block; max-width: 24rem; height: 32px; margin: var(--space-lg) var(--space-sm) 0 0; padding: var(--space-2xs); border: var(--rule-bar) solid var(--color-ink); border-radius: var(--radius-pill); }
.battery::after { content: ""; position: absolute; top: 50%; right: -9px; width: 6px; height: 14px; transform: translateY(-50%); background: var(--color-ink); border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.battery__fill { display: block; height: 100%; background: var(--color-accent); transform-origin: left center; transform: scaleX(var(--fill, 0)); }
.battery::before { content: ""; position: absolute; inset: var(--space-2xs); z-index: 1; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--color-paper) calc(10% - 2px) 10%); }
.rank-status__next { margin-top: var(--space-sm); color: var(--color-ink-2); font: 500 var(--text-md)/1.4 var(--font-display); font-variant-numeric: tabular-nums; }
.rank-status__wins { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: var(--space-2xs); color: var(--color-ink); font: 500 var(--text-md)/1.4 var(--font-display); }
.rank-status__wins .link { display: inline-flex; align-items: center; min-height: 44px; }
.profile-ranks__likes[hidden] { display: none; }
.profile-ranks__likes { padding-top: var(--space-md); border-top: var(--rule-bar) solid var(--color-rule-2); }
.profile-ranks__count { margin: 0; color: var(--color-ink-2); font: 500 var(--text-md)/1.5 var(--font-display); }
.profile-ranks__figure { color: var(--color-ink); font-variant-numeric: tabular-nums; }
.profile-ranks__fair { margin-top: var(--space-sm); max-width: 44ch; color: var(--color-ink-2); font-size: var(--text-sm); }
.xp-rows .row-item { padding-block: var(--space-md); }
.xp-row__title { margin: 0; color: var(--color-ink); max-width: 60ch; overflow-wrap: break-word; min-width: 0; }
.xp-row__detail { color: var(--color-muted); font-size: var(--text-sm); }
.xp-row__xp { margin: 0; color: var(--color-ink); font: 500 var(--text-md)/1.4 var(--font-display); font-variant-numeric: tabular-nums; }
.xp-row--total .xp-row__xp { font-weight: 600; }
@media (min-width: 60rem) {
.xp-rows .row-item { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 2fr); }
.xp-row__xp { text-align: end; }
}
/* Team: the rank under a name */
.rank-chip { display: flex; align-items: center; gap: var(--space-xs); margin: 0; color: var(--color-ink-2); font: 500 var(--text-sm)/1.3 var(--font-display); }
.alum__main > .rank-chip { margin-block: var(--space-2xs); }
/* Profile: pitch, video and share */
.profile__pitch { margin-top: var(--space-md); max-width: 44ch; color: var(--color-ink); font: italic 400 var(--text-lead)/1.45 var(--font-body); }
.profile-video__frame { position: relative; max-width: 44rem; aspect-ratio: 16 / 9; background: var(--color-ink); }
.profile-video__frame .tile__play-label { left: var(--space-lg); bottom: var(--space-lg); }
.profile-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.profile-video__frame .tile__play:focus-visible, .profile-video__frame iframe:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.profile-video__note { margin-top: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-sm); }
.profile-share h2 { overflow-wrap: break-word; min-width: 0; }
.profile-share__status { margin-top: var(--space-sm); min-height: 1.5em; color: var(--color-ink-2); font: 500 var(--text-sm)/1.5 var(--font-display); overflow-wrap: anywhere; }
.profile-share__status.is-failed { padding-left: var(--space-sm); border-left: var(--rule-bar) solid var(--color-error); }
/* ---- wall of fame ---- */
/* ranks.html #fame (js/ranks.js fameHTML): photo frames on the green well. A frame is a titan
moulding, a white mat and the portrait (the Photo column, else the initials in a portrait slot).
This year: twelve month frames and a golden frame for the Power GOAT at the end. The current
month gets a lime moulding; empty past months keep a quiet moulding, months to come a hairline.
Earlier years: a gallery of golden frames, with their months smaller below. Still: no motion. */
.fame__year--now + .fame__archive { margin-top: var(--space-3xl); }
.fame__year--now, .fame__past-year { padding-top: var(--space-md); border-top: var(--rule-bar) solid var(--color-rule-2); }
.fame__head { margin: 0 0 var(--space-lg); font: 600 var(--text-2xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.fame__now { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.fame__now > .frame--goat { max-width: 26rem; }
@media (min-width: 60rem) {
.fame__now { grid-template-columns: minmax(0, 9fr) minmax(0, 4fr); }
.fame__now > .frame--goat { max-width: none; }
}
.fame__months { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-md); }
/* Three across from a phone's width on, so the year reads as one wall and not a long column */
@media (min-width: 22rem) { .fame__months { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg) var(--space-sm); } }
@media (max-width: 39.99rem) { .fame__months .frame__border { padding: var(--space-2xs); } .fame__months .frame__picture { outline-width: 6px; outline-offset: -6px; } .fame__months .frame__img { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); } .fame__months .frame__picture.slot::before { inset: 12px; } .frame__picture--empty { padding: var(--space-xs); } .fame__months .frame__empty { font-size: var(--text-xs); } }
@media (min-width: 60rem) { .fame__months { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); } }
@media (min-width: 80rem) { .fame__months { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* One frame: moulding, mat and picture, then the plaque under it */
.frame { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; margin: 0; }
.frame__border { padding: var(--space-xs); background: var(--color-ink); }
.frame__picture { position: relative; aspect-ratio: 4 / 5; margin: 0; overflow: hidden; background: var(--color-paper-3); outline: 10px solid var(--color-paper); outline-offset: -10px; }
.frame__img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: cover; outline: var(--rule-hair) solid var(--color-rule-2); outline-offset: -1px; }
.frame__picture.slot { display: grid; place-items: center; place-content: center; aspect-ratio: 4 / 5; }
.frame__picture.slot::before { inset: 22px; }
.frame__initials { position: relative; color: var(--color-ink-2); font: 600 clamp(1.5rem, 2.5vw + 0.5rem, 2.5rem)/1 var(--font-display); }
.frame__picture--empty { display: grid; place-items: center; padding: var(--space-md); background: var(--color-paper-2); outline-color: var(--color-paper); }
.frame__empty { position: relative; margin: 0; max-width: 12ch; color: var(--color-ink-2); font: 500 var(--text-sm)/1.35 var(--font-display); text-align: center; text-wrap: balance; }
.frame__plaque { display: grid; gap: var(--space-3xs); min-width: 0; }
.frame__plaque > * { margin: 0; }
.frame__when { color: var(--color-ink-2); font: 500 var(--text-sm)/1.4 var(--font-display); font-variant-numeric: tabular-nums; }
.frame__name { color: var(--color-ink); font: 600 var(--text-md)/1.3 var(--font-display); overflow-wrap: break-word; }
.frame__name .link, .frame__post { display: inline-flex; align-items: center; min-height: 44px; }
.frame__post { width: fit-content; font-size: var(--text-sm); }
.frame__wild { color: var(--color-ink-2); font: 400 var(--text-sm)/1.45 var(--font-body); overflow-wrap: break-word; }
.frame__wild-label { color: var(--color-ink); font-weight: 500; }
.frame__note { color: var(--color-ink-2); font-size: var(--text-sm); max-width: 44ch; }
/* Month states: empty past months a softer moulding, this month lime, months to come a hairline */
.frame--past:not(.frame--filled) .frame__border { background: var(--color-rule-2); }
.frame--now .frame__border { background: var(--color-accent); }
.frame--now .frame__when { color: var(--color-ink); font-weight: 600; }
.frame--future .frame__border { padding: calc(var(--space-xs) - var(--rule-hair)); background: var(--color-paper); border: var(--rule-hair) dashed var(--color-rule-2); }
.frame--future .frame__picture--empty { background: var(--color-paper); }
.frame--future .frame__empty, .frame--future .frame__when { color: var(--color-muted); }
/* The golden frame: a gold moulding with a deep gold edge and a gold plaque */
.frame--goat .frame__border { padding: var(--space-sm); background: var(--color-gold); border: var(--rule-bar) solid var(--color-gold-deep); }
.frame--goat .frame__picture { outline: 14px solid var(--color-paper); outline-offset: -14px; }
.frame--goat .frame__picture::after { content: ""; position: absolute; inset: 13px; border: var(--rule-hair) solid var(--color-gold-deep); pointer-events: none; z-index: 2; }
.frame--goat .frame__img { inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); }
.frame--goat .frame__picture--empty { background: var(--color-gold-wash); }
.frame--goat .frame__plaque { padding: var(--space-sm) var(--space-md); background: var(--color-gold-wash); border-top: var(--rule-bar) solid var(--color-gold-deep); }
.frame--goat .frame__when { color: var(--color-ink); font: 600 var(--text-lg)/1.3 var(--font-display); }
.frame--goat .frame__name { font-size: var(--text-title); }
.frame--goat .frame__empty { color: var(--color-ink); font-size: var(--text-md); }
/* Earlier years: golden frames side by side, their months smaller below */
.fame__archive { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl) var(--gap-columns); }
@media (min-width: 40rem) { .fame__archive { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .fame__archive { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fame__past-year { min-width: 0; }
.fame__past-year > .frame--goat { max-width: 22rem; }
.fame__months--small { margin-top: var(--space-lg); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md) var(--space-sm); }
.fame__months--small .frame__border { padding: var(--space-2xs); }
.fame__months--small .frame__picture { outline-width: 6px; outline-offset: -6px; }
.fame__months--small .frame__img { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
.fame__months--small .frame__picture.slot::before { inset: 12px; }
.fame__months--small .frame__initials { font-size: var(--text-lg); }
.fame__months--small .frame__name { font-size: var(--text-sm); }
.fame__months--small .frame__wild { font-size: var(--text-xs); }
/* ---- profile papers ---- */
/* person.html: the papers a person co-wrote (Lab people / lab_people), newest six, the rest
behind one disclosure */
.paper-rows .row-item { padding-block: var(--space-md); }
.paper-row > * { margin: 0; }
.paper-row__year { font-variant-numeric: tabular-nums; }
.paper-row__title { max-width: 60ch; font: 600 var(--text-md)/1.4 var(--font-display); overflow-wrap: break-word; min-width: 0; }
.paper-row__venue { color: var(--color-ink-2); font: 500 var(--text-sm)/1.4 var(--font-display); overflow-wrap: break-word; min-width: 0; }
@media (min-width: 40rem) { .paper-rows .paper-row { grid-template-columns: 5rem minmax(0, 7fr) minmax(0, 4fr); } }
.paper-more { margin-top: var(--space-md); }
.paper-more > summary { display: list-item; width: fit-content; min-height: 44px; line-height: 44px; color: var(--color-ink); font: 500 var(--text-md)/44px var(--font-display); cursor: pointer; }
.paper-more > summary::marker { color: var(--color-accent-strong); }
.paper-more > summary:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.paper-more > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.paper-more[open] > summary { margin-bottom: var(--space-sm); }
/* ---- profile events helped ---- */
/* person.html: the events a person helped at (Events tab: Helpers), newest first */
.helped-rows .row-item { padding-block: var(--space-md); }
.helped-row > * { margin: 0; }
.helped-row__date { font-variant-numeric: tabular-nums; }
.helped-row__title { max-width: 60ch; font: 600 var(--text-md)/1.4 var(--font-display); overflow-wrap: break-word; min-width: 0; }
@media (min-width: 40rem) { .helped-rows .helped-row { grid-template-columns: 11rem minmax(0, 1fr); } }
/* ---- photo stand-ins ---- */
/* Until the owner's photo is in, a frame shows an example photo from Wikimedia Commons
(images/standin/, credited in the footer's data-credits line) with the label "Photo needed:
" on a solid paper chip, so it reads over any photo. The stand-in is alt="" and the
label says "example photo shown"; nothing captions it as the lab's. The real photo
(.slot__img, images/slots/) lies above both and .slot--filled hides them. Portraits never
get a stand-in face: they keep their initials with the same chip. */
.slot__standin { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.slot__img { z-index: 2; }
.slot > .slot__label { z-index: 1; align-self: flex-start; margin: var(--space-sm); padding: var(--space-xs) var(--space-sm); max-width: calc(100% - 2 * var(--space-sm)); background: var(--color-paper); border-left: var(--rule-bar) solid var(--color-accent-strong); }
.slot--filled > .slot__standin { visibility: hidden; }
.person__photo.slot .slot__label { left: 0; right: 0; bottom: 0; }
.tile__frame.slot > .slot__label { padding: var(--space-xs) var(--space-sm); }
/* Phones: the wall's poster frame is narrow, so its chip keeps only "Photo needed: poster of " */
@media (max-width: 39.99rem) {
.tile__frame.slot > .slot__label { margin: var(--space-2xs); padding: var(--space-2xs) var(--space-xs); max-width: calc(100% - 2 * var(--space-2xs)); font-size: var(--text-xs); }
.tile__frame.slot .slot__size { display: none; }
}
/* The figure's caption says "example photo for now" until the real photo is in */
.slot-figure__note { color: var(--color-muted); }
.slot-figure:has(.slot--filled) .slot-figure__note { display: none; }
/* Wall of Fame: a short chip at the foot of the mat; the name is on the plaque below */
.frame__picture.slot > .frame__need { position: absolute; left: 14px; right: 14px; bottom: 14px; margin: 0; max-width: none; padding: var(--space-2xs) var(--space-xs); font-size: var(--text-xs); }
.fame__months--small .frame__need-what { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 39.99rem) {
.fame__months .frame__picture.slot > .frame__need { left: 8px; right: 8px; bottom: 8px; }
.fame__months .frame__need-what { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Prizes: a compact frame at the end of each row, the photo or an example with an "Example" chip */
.prize-row__frame { position: relative; grid-column: 2; width: 7rem; aspect-ratio: 4 / 3; margin: 0; overflow: hidden; background: var(--color-paper-3); outline: var(--rule-hair) solid var(--color-rule-2); outline-offset: -1px; }
.prize-row__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prize-row__chip { position: absolute; left: var(--space-2xs); bottom: var(--space-2xs); padding: 0 var(--space-2xs); background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-xs)/1.5 var(--font-display); }
.prize-row__need { margin-top: var(--space-2xs); color: var(--color-ink-2); font: 400 var(--text-xs)/1.4 var(--font-display); }
.row-item__text > p + p.prize-row__need { margin-top: var(--space-2xs); }
@media (min-width: 60rem) {
.prize-rows .prize-row { grid-template-columns: 3.5rem minmax(0, 6fr) minmax(0, 5fr) 6rem; }
.prize-row__frame { grid-column: 4; width: 100%; }
}
/* Footer: one small line crediting the example photographs */
.site-footer__credits { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); line-height: 1.5; }
/* ---- mentors ---- */
/* Staff, researchers and lecturers (People Role) guide Power Ranks and do not compete: a small
outlined "Mentor" badge on the team card and the profile, never a rank badge (data-loader.js). */
.mentor-chip { display: inline-flex; align-items: center; gap: var(--space-xs); margin: var(--space-2xs) 0 0; padding: var(--space-3xs) var(--space-sm) var(--space-3xs) var(--space-xs); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); color: var(--color-ink); font: 500 var(--text-sm)/1.5 var(--font-display); }
.mentor-chip__icon { flex-shrink: 0; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.alum__main > .mentor-chip { margin-block: var(--space-2xs); }
.profile__mentor { margin-top: var(--space-sm); }
.profile__mentor-note { margin: var(--space-xs) 0 0; color: var(--color-ink-2); font-size: var(--text-sm); max-width: 44ch; }
/* ---- dc power pack ---- */
/* The card game at the foot of ranks.html (js/pack.js). A sealed titan pack with a lime edge,
the plug from the logo and circuit lines; it tears open and deals five cards face down. The
cards are the one place on the site that is a card: a game piece, drawn in the site's tokens.
Motion is transform and opacity only; under reduced motion the four cards lie face up at once,
the mystery card turns without a spin and the holo sheen stands still. */
.pack-band .section__head { margin-bottom: var(--space-lg); }
.pack-stage { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--space-lg); align-items: center; max-width: 52rem; }
.pack-stage__lead { max-width: 44ch; margin-bottom: var(--space-md); color: var(--color-ink-2); }
.pack-stage__status { margin-top: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); }
.pack-stage__status[hidden] { display: none; }
@media (min-width: 40rem) { .pack-stage { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-xl); } }
/* The sealed pack: a crimped strip on top that tears off, the body below it */
.pack { position: relative; width: 100%; aspect-ratio: 200 / 290; cursor: pointer; color: var(--color-dark-ink); }
html:not(.js) .pack { cursor: default; }
.pack__strip, .pack__body { position: absolute; left: 0; width: 100%; overflow: visible; }
.pack__strip { top: 0; height: 13.8%; transform-origin: 85% 100%; }
.pack__body { top: 13.8%; height: 86.2%; }
.pack__foil { fill: var(--color-dark-paper); stroke: var(--color-accent); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pack__tear { fill: none; stroke: var(--color-accent); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.pack__lines { fill: none; stroke: var(--color-accent); stroke-width: 1.5; opacity: 0.55; vector-effect: non-scaling-stroke; }
.pack__dot { fill: var(--color-accent); opacity: 0.8; }
.pack__plug { position: absolute; left: 30%; top: 26%; width: 40%; height: auto; }
.lab-plug { overflow: visible; }
.lab-plug__body { fill: var(--color-accent); }
.lab-plug__cord, .lab-plug__pins { fill: none; stroke: var(--color-accent); stroke-width: 3.2; stroke-linecap: round; }
.pack__name { position: absolute; left: var(--space-xs); right: var(--space-xs); top: 61%; margin: 0; text-align: center; font: 700 var(--text-md)/1.15 var(--font-display); }
.pack__count { position: absolute; left: 0; right: 0; top: 76%; margin: 0; text-align: center; color: var(--color-dark-muted); font: 500 var(--text-xs)/1.3 var(--font-display); }
@media (min-width: 40rem) { .pack__name { font-size: var(--text-lg); } }
.pack.is-open .pack__strip { animation: pack-tear var(--dur-long) var(--ease-out) forwards; }
.pack.is-open .pack__body, .pack.is-open .pack__plug { animation: pack-settle var(--dur-long) var(--ease-out) both; }
@keyframes pack-tear { to { transform: translate(14%, -70%) rotate(9deg); opacity: 0; } }
@keyframes pack-settle { 0% { transform: translateY(0); } 40% { transform: translateY(4%); } 100% { transform: translateY(0); } }
/* The table: five cards in a row; on a phone the row scrolls sideways inside itself */
.pack-table { margin-top: var(--space-xl); }
.pack-table:empty { display: none; }
.pack-table__row { list-style: none; margin: 0; padding: var(--space-sm) var(--space-2xs) var(--space-lg); display: grid; grid-auto-flow: column; grid-auto-columns: min(15rem, 74vw); gap: var(--space-md); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-2xs); }
@media (min-width: 72rem) { .pack-table__row { grid-auto-columns: minmax(0, 1fr); overflow: visible; gap: var(--space-lg); } }
.card { position: relative; perspective: 1400px; scroll-snap-align: start; min-width: 0; }
.pack-table.is-dealing .card { animation: pack-deal var(--dur-long) var(--ease-out) both; animation-delay: calc(var(--deal) * 90ms); }
@keyframes pack-deal { from { opacity: 0; transform: translateY(-2.5rem) scale(0.92); } }
.card__inner { display: grid; height: 100%; transform-style: preserve-3d; transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform calc(var(--dur-long) * 1.5) var(--ease-in-out); }
.card.is-turned .card__inner { transform: rotateX(var(--tilt-x, 0deg)) rotateY(calc(180deg - var(--tilt-y, 0deg))); }
.card.is-tilting .card__inner { transition-duration: var(--dur-micro); }
.card__side { grid-area: 1 / 1; display: grid; position: relative; min-height: 0; aspect-ratio: 5 / 7.2; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card__side--face { transform: rotateY(180deg); outline: none; }
.card__side--face:focus-visible { outline: var(--rule-bar) solid var(--color-focus); outline-offset: 4px; }
/* The back: titan, lime circuit lines, the plug and the lab's name */
.card-back { position: relative; display: grid; place-items: center; align-content: center; gap: var(--space-sm); overflow: hidden; background: var(--color-dark-paper); border: var(--rule-bar) solid var(--color-accent); color: var(--color-dark-ink); }
.card-back__art { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--color-accent); stroke: var(--color-accent); stroke-width: 1.5; opacity: 0.6; }
.card-back__art path { fill: none; vector-effect: non-scaling-stroke; }
.card-back__plug { position: relative; width: 38%; height: auto; }
.card-back__name { position: relative; margin: 0; font: 700 var(--text-md)/1.2 var(--font-display); }
.card__flip { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: var(--color-accent); cursor: pointer; }
.card__flip:focus-visible { outline: var(--rule-bar) solid var(--color-focus); outline-offset: 4px; }
.card__ask { position: absolute; left: 50%; bottom: 9%; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-left: -1.375rem; border: var(--rule-bar) solid var(--color-accent); border-radius: 50%; background: var(--color-dark-paper-2); color: var(--color-accent); font: 700 var(--text-xl)/1 var(--font-display); }
.card.is-turned .card__flip { display: none; }
/* The mystery card waits with a soft lime glow and a small wobble until it is pressed */
.card--mystery:not(.is-turned) .card__side--back { animation: pack-wobble 3.2s var(--ease-in-out) infinite; }
.card--mystery .card__side--back::after { content: ""; position: absolute; inset: -6px; border: var(--rule-bar) solid var(--color-accent-strong); opacity: 0.7; pointer-events: none; animation: pack-glow 2.4s var(--ease-in-out) infinite; }
.card--mystery.is-turned .card__side--back::after { display: none; }
@keyframes pack-wobble { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-1.6deg); } 86% { transform: rotate(1.6deg); } 93% { transform: rotate(-0.8deg); } }
@keyframes pack-glow { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
/* The face */
.card__face { position: relative; display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; overflow: hidden; padding: var(--space-sm); background: var(--color-paper); border: var(--rule-bar) solid var(--color-ink); color: var(--color-ink); --type-bg: var(--color-accent); --type-ink: var(--color-accent-ink); }
.card__face--hardware { --type-bg: var(--color-ink); --type-ink: var(--color-paper); }
.card__face--software { --type-bg: var(--color-green-wash-2); --type-ink: var(--color-ink); }
.card__face--simulation { --type-bg: var(--color-slate); --type-ink: var(--color-ink); }
.card__face--part { --type-bg: var(--color-paper-3); --type-ink: var(--color-ink); }
.card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); margin: 0; font: 500 var(--text-xs)/1.3 var(--font-display); }
.card__type { padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--type-bg); color: var(--type-ink); }
.card__power { font-weight: 700; font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.card__power-label { font-weight: 500; font-size: var(--text-xs); color: var(--color-ink-2); }
.card__picture { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-paper-3); outline: var(--rule-hair) solid var(--color-rule-2); outline-offset: -1px; }
.card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__picture--initials { display: grid; place-items: center; }
.card__initials { color: var(--color-muted); font: 600 var(--text-2xl)/1 var(--font-display); }
.card__need { position: absolute; left: var(--space-2xs); bottom: var(--space-2xs); margin: 0; padding: 0 var(--space-2xs); background: var(--color-paper); border-left: var(--rule-bar) solid var(--color-accent-strong); font: 500 var(--text-xs)/1.5 var(--font-display); }
.card__picture--part { display: grid; place-items: center; background: var(--color-green-wash); }
.part-art { display: block; width: 52%; height: auto; color: var(--color-ink); }
.part-art .rank-badge__glyph { stroke-width: 2.2; }
.card__name { margin: 0; font: 600 var(--text-lg)/1.15 var(--font-display); overflow-wrap: anywhere; }
.card__rank { display: flex; align-items: center; gap: var(--space-xs); margin: 0; font: 500 var(--text-sm)/1.3 var(--font-display); }
.card__rank--mentor .mentor-chip__icon { flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card__attacks { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
.card__attack { padding-block: var(--space-2xs); border-bottom: var(--rule-hair) solid var(--color-rule); }
.card__attack-head { display: flex; justify-content: space-between; gap: var(--space-xs); margin: 0; font: 600 var(--text-sm)/1.3 var(--font-display); }
.card__attack-name { min-width: 0; overflow-wrap: anywhere; }
.card__damage { font-weight: 700; font-variant-numeric: tabular-nums; }
.card__attack-line { margin: 0; color: var(--color-ink-2); font-size: var(--text-xs); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__fact { margin: 0; padding-top: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-sm); line-height: 1.4; }
.card__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xs); margin: auto 0 0; padding-top: var(--space-xs); color: var(--color-muted); font: 500 var(--text-xs)/1.3 var(--font-display); }
.card__status { padding: 0 var(--space-2xs); color: var(--color-ink); }
/* Legend: an alumnus who takes part. Mentor: a double titan frame and a titan status.
Holo: the gold wash with a sheen that follows the pointer (transform only). */
.card__face--legend { border-color: var(--color-gold-deep); }
.card__face--legend .card__status, .card__face--holo .card__status { background: var(--color-gold); }
.card__face--mentor { outline: var(--rule-hair) solid var(--color-ink); outline-offset: -7px; }
.card__face--mentor .card__status { background: var(--color-ink); color: var(--color-paper); }
.card__face--holo { background: var(--color-gold-wash); border: 3px solid var(--color-gold-deep); }
.card__sheen { position: absolute; inset: -50%; z-index: 2; pointer-events: none; opacity: 0.55;
background: linear-gradient(115deg, transparent 38%, color-mix(in oklch, var(--color-accent-2) 55%, transparent) 45%, color-mix(in oklch, var(--color-paper) 85%, transparent) 50%, color-mix(in oklch, var(--color-gold) 60%, transparent) 55%, transparent 62%);
translate: var(--sheen-x, 0) var(--sheen-y, 0); animation: pack-sheen 5s var(--ease-in-out) infinite alternate; }
@keyframes pack-sheen { from { transform: translateX(-18%); } to { transform: translateX(18%); } }
/* The binder */
.binder { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-bar) solid var(--color-rule-2); }
.binder__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xs) var(--space-lg); margin-bottom: var(--space-md); }
.binder__title { font-size: var(--text-title); }
.binder__note { margin: 0; color: var(--color-ink-2); font-size: var(--text-sm); }
.binder__count { margin: var(--space-lg) 0 var(--space-sm); font: 600 var(--text-md)/1.4 var(--font-display); font-variant-numeric: tabular-nums; }
.binder__grid { list-style: none; margin: 0; padding: 0; display: grid; align-items: start; grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr)); gap: var(--space-sm); }
.binder__grid[hidden] { display: none; }
.binder__slot { display: grid; align-content: start; gap: var(--space-2xs); min-width: 0; padding: var(--space-2xs); background: var(--color-paper); outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; font: 500 var(--text-xs)/1.3 var(--font-display); }
.binder__pic, .binder__back { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; background: var(--color-paper-3); }
.binder__img { width: 100%; height: 100%; object-fit: cover; }
.binder__initials { color: var(--color-muted); font: 600 var(--text-lg)/1 var(--font-display); }
.binder__pic--part { background: var(--color-green-wash); }
.binder__pic--part .part-art { width: 62%; }
.binder__name { overflow-wrap: anywhere; }
.binder__rank { display: flex; align-items: center; min-height: 28px; }
.binder__tag { padding: 0 var(--space-2xs); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); }
.binder__slot--empty { background: transparent; outline-color: var(--color-rule-2); }
.binder__back { background: var(--color-dark-paper); border: var(--rule-hair) solid var(--color-accent); color: var(--color-accent); font: 700 var(--text-xl)/1 var(--font-display); }
.binder__reset { margin-top: var(--space-xl); }
.binder__reset [hidden] { display: none; }
.binder__confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.binder__confirm p { flex-basis: 100%; margin: 0; }
@media (prefers-reduced-motion: reduce) {
.pack.is-open .pack__strip { animation: none; opacity: 0; }
.pack.is-open .pack__body, .pack.is-open .pack__plug, .pack-table.is-dealing .card,
.card--mystery:not(.is-turned) .card__side--back, .card--mystery .card__side--back::after, .card__sheen { animation: none; }
.card__inner { transition: none; }
}
/* ---- dc power pack: daily pack, founder and top mentor ---- */
/* One free pack a day (js/pack.js): the countdown line under the button. The Founder card has a
frame of its own (a titan border with a lime inner rule, "Founder" in ink on its corner); the
top Mentor's limited edition is a holo mentor card with a small ink stamp on the picture. */
.pack-stage__next { margin-top: var(--space-sm); max-width: 44ch; color: var(--color-ink-2); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.pack-stage__next[hidden] { display: none; }
.pack-stage__open:disabled { cursor: default; background: var(--color-paper-2); color: var(--color-muted); border-color: var(--color-rule-2); }
.card__face--founder { background: var(--color-green-wash); border: 3px solid var(--color-ink); outline: var(--rule-hair) solid var(--color-accent-strong); outline-offset: -8px; }
.card__face--founder .card__status { background: var(--color-ink); color: var(--color-accent); }
.card__category { padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-accent); font-weight: 600; }
.card__specialty { margin: 0; font: 500 var(--text-xs)/1.3 var(--font-display); color: var(--color-ink-2); }
/* These two carry an extra line, so their attack lines keep to one line and the picture keeps its room */
.card__face--founder .card__attack-line, .card__face--top .card__attack-line { -webkit-line-clamp: 1; }
.card__face--founder .card__picture, .card__face--top .card__picture { min-height: 30%; }
.card__face--top { outline-offset: -9px; }
.card__face--top .card__status { background: var(--color-ink); color: var(--color-accent); }
.card__edition { position: relative; z-index: 3; align-self: flex-start; margin: calc(var(--space-lg) * -1) 0 0 var(--space-2xs); padding: 0 var(--space-xs); background: var(--color-ink); color: var(--color-accent); font: 600 var(--text-xs)/1.6 var(--font-display); }
/* ---- prize photo slots ---- */
/* A prize whose photo is a fixed file in images/slots/ (PRIZE_SLOTS in data-loader.js): the file
lies over the example photo and, once it loads, the row drops its "Photo needed" line. */
.prize-row__slot { z-index: 1; }
.prize-row--filled .prize-row__need, .prize-row--filled .prize-row__chip { display: none; }
/* ---- shared photo slot over an existing picture ---- */
/* The MSH TukTuk (education_msh*.html): the illustration stays until images/slots/tuktuk.webp is
uploaded, the same photo as Bart Slats' TukTuk on education.html, with its own caption. */
.photo-swap__photo, .photo-swap__caption { display: none; }
.photo-swap--filled > a { display: none; }
.photo-swap--filled .photo-swap__photo { display: block; width: 100%; height: auto; }
.photo-swap--filled .photo-swap__caption { display: block; }
/* ---- follow on linkedin ---- */
/* The "Follow on LinkedIn" button (tools/partials/follow.html) under the homepage news band */
.home-follow { margin-top: var(--space-lg); }
/* ---- layout stability ---- */
/* Live blocks that fill in above other content keep their room while the sheet loads, so the
page does not jump (CLS). Without script the reserved room is not needed and not taken. */
/* base.css hides [hidden] with !important, so the reserved room needs it too */
.js .team-facts[data-team-facts][hidden] { display: block !important; visibility: hidden; }
.js .data-loading { min-height: 100vh; }
/* ---- team group photo ---- */
.team-group { margin-bottom: var(--space-2xl); }
.team-group img { aspect-ratio: 1600 / 1066; }
/* ---- power ranks: year history ---- */
/* The Wall of Fame's year switcher (links to ?year=, see wireYears in js/ranks.js), the year's
XP board and the frames of that year. The links wrap, so a long run of years never scrolls
sideways. */
.year-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin-bottom: var(--space-xl); }
.year-pick__label { margin: 0; color: var(--color-ink-2); font: 500 var(--text-md)/1.3 var(--font-display); }
.year-pick__list { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.year-pick__link {
display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill);
background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-display); font-variant-numeric: tabular-nums; text-decoration: none;
transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.year-pick__link:hover { background: var(--color-paper-3); }
.year-pick__link[aria-current="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.year-pick__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (pointer: coarse) { .year-pick__link { min-height: 48px; } }
.year-view > .fame__year { padding-top: var(--space-md); border-top: var(--rule-bar) solid var(--color-rule-2); }
.year-view .fame__past-year { padding-top: 0; border-top: 0; }
.year-board { margin-bottom: var(--space-2xl); }
.year-board__head { margin-top: 0; }
.board--xp .board__row { align-items: start; }
.board--xp .board__place, .board--xp .board__count { padding-top: var(--space-sm); }
.board--xp .rank-badge { margin-top: var(--space-xs); }
.board__from { flex-basis: 100%; color: var(--color-ink-2); font-size: var(--text-sm); }
@media (min-width: 60rem) {
.year-view .fame__past-year { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.year-view .fame__past-year > .frame--goat { max-width: none; }
.year-view .fame__past-year .fame__months--small { margin-top: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .year-pick__link { transition: none; } }
/* ---- dc power pack: card photos, left to right, the card large ---- */
/* The picture takes the room the text leaves on the card; a person's photo (People "Card photo" or
Photo, js/pack.js) is cropped from the upper part, so the face shows. The card is a little
taller than before to give the photo room.
Cards turn from left to right: the waiting ones are dimmed and cannot be pressed, the next one
carries a lime edge. A face-up card (and a card in the binder) opens large in a native dialog. */
.card__side { aspect-ratio: 5 / 8.4; }
.card__face > .card__picture { flex: 1 1 0; aspect-ratio: auto; min-height: 6rem; }
/* On a person's card the type and power sit on the photo and each attack keeps to one line */
.card__face--person > .card__top { position: absolute; z-index: 1; top: calc(var(--space-sm) + var(--space-2xs)); left: calc(var(--space-sm) + var(--space-2xs)); right: calc(var(--space-sm) + var(--space-2xs)); }
.card__face--person { gap: calc(var(--space-2xs) + var(--space-3xs)); }
.card__face--person .card__power { padding: 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper); }
.card__face--person .card__attack-line { -webkit-line-clamp: 1; }
.card__picture--person .card__img, .binder__img { object-position: 50% 25%; }
.pack-table__hint { margin: 0 0 var(--space-xs); color: var(--color-ink-2); font: 500 var(--text-sm)/1.4 var(--font-display); }
.card.is-waiting .card__side--back { opacity: 0.55; }
.card.is-waiting .card__flip { cursor: not-allowed; }
.card.is-next:not(.card--mystery) .card__side--back::after { content: ""; position: absolute; inset: -6px; border: var(--rule-bar) solid var(--color-accent-strong); pointer-events: none; }
.card.is-turned .card__side--face { cursor: zoom-in; }
.card.is-turned .card__side--face:hover .card__face { border-color: var(--color-accent-strong); }
.binder__open { display: grid; align-content: start; gap: var(--space-2xs); width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: zoom-in; }
.binder__open:hover .binder__name { text-decoration: underline; text-underline-offset: 0.2em; }
.binder__open:focus-visible { outline: var(--rule-bar) solid var(--color-focus); outline-offset: 4px; }
.card-zoom { max-width: calc(100vw - 2 * var(--space-md)); max-height: calc(100dvh - 2 * var(--space-md)); margin: auto; padding: 0; border: 0; background: transparent; color: var(--color-ink); overflow: visible; }
.card-zoom::backdrop { background: color-mix(in oklch, var(--color-ink) 88%, transparent); }
.card-zoom__bar { display: flex; justify-content: flex-end; margin-bottom: var(--space-sm); }
.card-zoom__close { min-height: 44px; background: var(--color-paper); }
.card-zoom__stage { display: grid; place-items: center; perspective: 1400px; }
.card-zoom__card { width: 15rem; aspect-ratio: 5 / 8.4; display: grid; transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform calc(var(--dur-long) * 1.5) var(--ease-in-out); }
.card-zoom__stage.is-tilting .card-zoom__card { transition-duration: var(--dur-micro); }
.card-zoom__card .card__face { min-height: 0; }
.card-zoom-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .card-zoom__card { transition: none; } }
/* ---- carousel ---- */
/* One carousel for every hub and sub-page (js/site.js, the carousel block). A row of slides that
scrolls sideways with snap points: a swipe on phones, the Previous and Next buttons and the
arrow keys with script. It never moves on its own. Without script it is a plain scrolling row
and the buttons stay hidden. .carousel--big is the show-off at the top of a hub. */
.carousel { position: relative; min-width: 0; }
.carousel__track {
position: relative; display: flex; gap: var(--space-md); margin: 0; padding: 0 0 var(--space-sm); list-style: none;
overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
scrollbar-width: thin; scrollbar-color: var(--color-rule-2) transparent;
}
.carousel__track:focus-visible { outline: var(--rule-bar) solid var(--color-focus); outline-offset: 4px; }
.carousel__slide { flex: 0 0 min(82%, 22rem); min-width: 0; scroll-snap-align: start; }
@media (min-width: 40rem) { .carousel__slide { flex-basis: calc((100% - var(--space-md)) / 2.15); } }
@media (min-width: 60rem) { .carousel__slide { flex-basis: calc((100% - 2 * var(--space-md)) / 3.15); } }
.carousel--big .carousel__slide { flex-basis: 88%; }
@media (min-width: 60rem) { .carousel--big .carousel__slide { flex-basis: calc((100% - var(--space-md)) / 1.45); } }
.carousel__track > .data-empty, .carousel__track > .data-error { flex: 1 0 100%; margin: 0; }
.carousel__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-md); }
.carousel__controls { display: flex; gap: var(--space-xs); margin-left: auto; }
html:not(.js) .carousel__controls, .carousel--fits .carousel__controls { display: none; }
.carousel__btn {
display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); cursor: pointer;
transition: background-color var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
}
.carousel__btn:hover { background: var(--color-paper-3); }
.carousel__btn:focus-visible { outline: var(--rule-bar) solid var(--color-focus); outline-offset: 2px; }
.carousel__btn[aria-disabled="true"] { opacity: 0.4; cursor: default; background: var(--color-paper); }
@media (pointer: coarse) { .carousel__btn { width: 52px; height: 52px; } }
/* Slide contents: a photo with its caption, a block of text on a rule, a person, a logo, a badge */
.carousel__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.carousel--big .carousel__photo img { aspect-ratio: 3 / 2; }
.carousel .carousel__photo--wide img { aspect-ratio: 2 / 1; object-position: center top; }
.carousel__photo figcaption { font-family: var(--font-display); }
/* A drawing with words in it (the MSH pictures): whole, never cropped */
.carousel__photo--plain img { aspect-ratio: 3 / 2; object-fit: contain; background: var(--color-paper); }
.carousel__slide .slot-figure { margin: 0; }
.carousel__text { height: 100%; padding-top: var(--space-md); border-top: var(--rule-bar) solid var(--color-rule-2); }
.carousel__text h3 { font-size: var(--text-title); overflow-wrap: break-word; }
.carousel__text p { margin-top: var(--space-xs); color: var(--color-ink-2); max-width: 40ch; }
.carousel__text .carousel__meta { margin: 0 0 var(--space-xs); color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); font-variant-numeric: tabular-nums; }
.carousel__text a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; }
.carousel__text a:hover { text-decoration-color: var(--color-accent-strong); text-decoration-thickness: 2px; }
.carousel__figure { display: block; font: 500 var(--text-3xl)/1 var(--font-outlier); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.carousel__text .medal { margin: calc(var(--space-md) + 0.75rem) 0 var(--space-sm); }
.carousel__person .person__photo { width: 100%; }
.carousel__person .person__name { margin-top: var(--space-xs); font-size: var(--text-lg); overflow-wrap: break-word; }
.carousel__person .person__role { margin-top: var(--space-3xs); color: var(--color-muted); font-size: var(--text-sm); }
.carousel--people .carousel__slide { flex-basis: min(46%, 12rem); }
@media (min-width: 40rem) { .carousel--people .carousel__slide { flex-basis: calc((100% - 3 * var(--space-md)) / 4.2); } }
@media (min-width: 60rem) { .carousel--people .carousel__slide { flex-basis: calc((100% - 5 * var(--space-md)) / 6.2); } }
.carousel__logo { display: grid; place-items: center; height: 112px; padding: var(--space-md); border-top: var(--rule-bar) solid var(--color-rule-2); border-bottom: var(--rule-hair) solid var(--color-rule); }
.carousel__logo:hover { background: var(--color-paper-2); }
.carousel__logo img { max-height: 56px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: 0.8; }
.carousel__logo:hover img, .carousel__logo:focus-visible img { filter: none; opacity: 1; }
.carousel--logos .carousel__slide { flex-basis: min(46%, 12rem); }
@media (min-width: 60rem) { .carousel--logos .carousel__slide { flex-basis: calc((100% - 5 * var(--space-md)) / 6.2); } }
.carousel--badges .carousel__slide { flex-basis: min(40%, 10rem); }
@media (min-width: 60rem) { .carousel--badges .carousel__slide { flex-basis: calc((100% - 6 * var(--space-md)) / 7.2); } }
.carousel__badge { display: grid; justify-items: start; gap: var(--space-2xs); padding-top: var(--space-md); border-top: var(--rule-bar) solid var(--color-rule-2); }
.carousel__badge .rank-badge { width: 4rem; height: 4rem; }
.carousel__badge h3 { font-size: var(--text-lg); }
.carousel__badge p { margin: 0; color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
.carousel__track { scroll-behavior: auto; }
.carousel__btn { transition: none; }
}
/* ---- hubs and sub-pages ---- */
/* A hub (about, research, education) opens with its big carousel, then one band per sub-page:
the head, a smaller carousel and a "Go to" button. Sub-pages open with a short hero and a
link back to their hub. */
.hub-band .section__head { margin-bottom: var(--space-lg); }
.page-hero--short h1 { overflow-wrap: break-word; min-width: 0; }
@media (min-width: 60rem) {
.page-hero--short { min-height: 0; padding-block: var(--space-2xl); }
.page-hero--short .page-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
.page-hero--short .lead { margin-top: 0; }
}
.crumb { margin: 0 0 var(--space-sm); font: 500 var(--text-sm)/1.4 var(--font-display); }
.crumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
/* Prizes page: the award photo and the walk to the stage beside the list */
.prizes__photos { display: grid; gap: var(--space-xl); }
.prizes__photo--walk img { aspect-ratio: 1600 / 1066; height: auto; }
/* Research areas: the DC kitchen photo under the text of the DC appliances band */
.appliances__photo { margin-top: var(--space-lg); }
.appliances__photo img { aspect-ratio: 1240 / 933; height: auto; }
/* Footer: five columns from 75rem (the lab, research and projects, study and join, contact, follow) */
@media (min-width: 40rem) and (max-width: 74.99rem) { .site-footer__index { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .site-footer__index { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* ---- projects hub and project pages ---- */
/* projects.html: the featured carousel, then one card per project (big projects first) with
filters by type, year and research area (js/wall.js; without script the filter stays hidden
and every card shows). project.html?id=: one page per project (data-loader.js,
loadProject): hero, figures counted from the sheets, the story, who built what, then the
papers, prizes, news and media linked to it. */
.project-slide__photo img { object-position: center top; }
.project-slide__photo.slot { aspect-ratio: 3 / 2; }
.project-slide h3 a { text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.project-filter { display: grid; gap: var(--space-md); margin-bottom: var(--space-xl); padding-block: var(--space-md); border-top: var(--rule-bar) solid var(--color-rule-2); border-bottom: var(--rule-hair) solid var(--color-rule); }
.project-filter[hidden] { display: none; }
.project-filter__groups { display: grid; gap: var(--space-md); }
.project-filter__group { display: grid; gap: var(--space-xs); min-width: 0; }
.project-filter__label { margin: 0; color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); }
/* One sideways row per group on phones, wrapping from 40rem */
.js .project-filter .project-filter__buttons { margin: 0; padding: 0 0 var(--space-2xs); }
@media (min-width: 40rem) { .js .project-filter .project-filter__buttons { flex-wrap: wrap; overflow: visible; padding: 0; } }
.project-filter__count { margin: 0; color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); }
.project-filter__none[hidden] { display: none; }
.project-filter__reset { min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font-size: inherit; }
@media (min-width: 60rem) { .project-filter__group { grid-template-columns: 9rem minmax(0, 1fr); align-items: center; } }
.project-cards { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl) var(--space-lg); }
@media (min-width: 40rem) { .project-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .project-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.project-card { position: relative; }
.project-card__frame { overflow: hidden; }
.project-card__frame img { object-position: center top; }
.project-card__frame.slot { aspect-ratio: 4 / 3; }
@media (max-width: 39.99rem) { .project-card .project-card__frame { aspect-ratio: 2 / 1; } }
.project-card .tile__title { font-size: var(--text-title); }
.project-card__link { color: var(--color-ink); text-decoration: none; }
.project-card__link::after { content: ""; position: absolute; inset: 0; }
.project-card:has(.project-card__link:hover) .project-card__link { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.project-card:has(.project-card__link:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.project-card__link:focus-visible { outline: none; }
.project-card .react { position: relative; z-index: var(--z-base); }
.project-card__part { color: var(--color-ink-2); font: 500 var(--text-sm)/1.4 var(--font-display); }
.tile__body > .project-card__people { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); margin-top: var(--space-sm); }
.project-card__names { flex: 1 1 10rem; min-width: 0; margin: 0 0 0 var(--space-xs); color: var(--color-ink-2); font-size: var(--text-sm); }
.tile__body > .project-card__figures { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin-top: var(--space-sm); padding-top: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); font: 500 var(--text-sm)/1.4 var(--font-display); }
.project-card__figures strong { color: var(--color-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Small square faces: on the cards (40px) and under "Who built what" (4rem, 4:5) */
.avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; overflow: hidden; background: var(--color-paper-3); outline: var(--rule-hair) solid var(--color-rule-2); outline-offset: -1px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.avatar--initials { color: var(--color-muted); font: 600 var(--text-xs)/1 var(--font-display); }
.project-hero .page-hero__grid { align-items: center; }
.project-hero h1 { max-width: 18ch; overflow-wrap: break-word; min-width: 0; }
.project-hero__meta { margin: 0 0 var(--space-sm); color: var(--color-ink-2); font: 500 var(--text-sm)/1.4 var(--font-display); }
.project-hero .lead { margin-top: var(--space-md); max-width: 44ch; }
.project-hero__photo { margin: 0; min-width: 0; }
.project-hero__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center top; }
/* Drive posters may be transparent PNGs: they keep a light ground on the dark hero */
.project-hero__photo img, .profile__project-pic img { background: var(--color-dark-ink); }
.project-hero__photo figcaption { margin-top: var(--space-xs); font-size: var(--text-sm); }
.project-hero--message .lead { max-width: 52ch; }
.project-hero--message .actions { margin-top: var(--space-xl); }
@media (min-width: 60rem) {
.project-hero .page-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.project-hero .lead { margin-top: var(--space-md); }
}
.project-figures dd { font-size: var(--text-3xl); }
@media (min-width: 60rem) {
.project-figures { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); row-gap: var(--space-md); }
}
.project-react:empty { display: none; }
.project-react { margin-top: var(--space-lg); }
.project-story__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl) var(--space-2xl); align-items: start; }
.project-story__text { margin-top: var(--space-lg); max-width: 64ch; }
.project-story__text p { font-size: var(--text-lead); color: var(--color-ink-2); }
.project-story__text p + p { margin-top: var(--space-md); }
.project-story__text .data-empty { font-size: var(--text-md); }
.project-story__facts .link { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 60rem) { .project-story__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.builders { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--gap-columns); border-top: var(--rule-bar) solid var(--color-rule-2); }
@media (min-width: 40rem) { .builders { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .builders { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.builder { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-md); align-items: start; padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.builder .avatar { width: 4rem; height: auto; aspect-ratio: 4 / 5; font-size: var(--text-md); }
.builder__text > * { margin: 0; }
.builder__text > * + * { margin-top: var(--space-3xs); }
.builder__name { font: 600 var(--text-lg)/1.3 var(--font-display); overflow-wrap: break-word; }
.builder__name .link { display: inline-flex; align-items: center; min-height: 44px; font-weight: inherit; }
.builder__part { color: var(--color-ink-2); }
.builder__year { color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); font-variant-numeric: tabular-nums; }
.part + .part { margin-top: var(--space-2xl); }
.part__meta { margin: 0; color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); }
.part__title { margin: var(--space-3xs) 0 var(--space-md); font-size: var(--text-title); overflow-wrap: break-word; }
.part__title .link { font-weight: inherit; }
.project-partner { display: grid; place-items: center; height: 112px; padding: var(--space-md); font-family: var(--font-display); }
.project-more .wall-grid--media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* ---- profile: projects row and anecdote ---- */
/* person.html: right under the name a compact row of the person's projects (thumbnail and
title, each to its project page; a sideways row on phones, wrapping from 40rem), and the
People "Anecdote" as a quote with their name */
.profile__projects { list-style: none; display: flex; gap: var(--space-xs); margin: var(--space-md) 0 0; padding: 0 0 var(--space-xs); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--color-rule-2) transparent; }
.profile__projects li { flex: 0 0 auto; scroll-snap-align: start; }
@media (min-width: 40rem) { .profile__projects { flex-wrap: wrap; overflow: visible; } }
.profile__project { display: flex; align-items: center; gap: var(--space-sm); width: 15rem; min-height: 64px; padding: var(--space-2xs) var(--space-sm) var(--space-2xs) var(--space-2xs); border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-2); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out); }
.profile__project:hover { background: var(--color-paper-3); color: var(--color-ink); text-decoration: none; }
.profile__project:hover .profile__project-title { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.profile__project-pic { flex-shrink: 0; width: 56px; height: 56px; overflow: hidden; background: var(--color-paper-3); }
.profile__project-pic img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.profile__project-text { display: grid; gap: var(--space-3xs); min-width: 0; }
.profile__project-title { font: 600 var(--text-sm)/1.3 var(--font-display); overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.profile__project-meta { color: var(--color-muted); font: 500 var(--text-xs)/1.3 var(--font-display); font-variant-numeric: tabular-nums; }
/* Phones: the name, projects and facts come first; the portrait follows at a modest size */
@media (max-width: 59.99rem) { .profile-hero .profile__photo { max-width: 16rem; } }
.profile-anecdote h2 { font-size: var(--text-title); }
.quote { margin: var(--space-lg) 0 0; padding-top: var(--space-lg); border-top: var(--rule-bar) solid var(--color-rule-2); max-width: 48rem; }
.quote__text { margin: 0; }
.quote__text p { font: italic 500 var(--text-xl)/1.4 var(--font-body); color: var(--color-ink); }
.quote__text p + p { margin-top: var(--space-md); }
.quote__name { margin-top: var(--space-md); color: var(--color-ink-2); font: 600 var(--text-md)/1.4 var(--font-display); font-style: normal; }
@media (prefers-reduced-motion: reduce) { .profile__project { transition: none; } }
/* ---- dc power pack: tiers, energy cards, attacks on three lines ---- */
/* js/pack.js gives every member card a tier from what the student did: Bronze (Basic) glows,
Silver (Premium) has a cool sheen, Gold (Legendary) the gold holo, the mentors a full foil
(Hyper rare); the Founder keeps the frame above. The sheen moves with transform only and
stands still under reduced motion. Energy cards have a lime picture and their figure large.
Attack lines take up to three lines in smaller type and are never cut. */
.pack-table__row { padding-inline: var(--space-sm); scroll-padding-inline: var(--space-sm); }
.card__face--person .card__attack-head { font-size: var(--text-xs); line-height: 1.25; }
.card__face--person .card__attack-line { display: block; overflow: visible; -webkit-line-clamp: none; font-size: var(--text-2xs); line-height: 1.3; }
.card__face--person .card__attack { padding-block: var(--space-3xs); }
.card__foot { flex-wrap: wrap; row-gap: var(--space-3xs); }
.card__tier { color: var(--color-ink-2); font-weight: 600; }
.card__face--tier-bronze { background: var(--color-bronze-wash); border: 3px solid var(--color-bronze-deep);
box-shadow: 0 0 0 1px var(--color-bronze), 0 0 10px 1px color-mix(in oklch, var(--color-bronze) 70%, transparent); }
.card__face--tier-bronze .card__status { background: var(--color-paper); outline: var(--rule-hair) solid var(--color-bronze-deep); }
.card__face--tier-silver { background: linear-gradient(160deg, var(--color-silver-wash), var(--color-paper) 45%, var(--color-silver-wash)); border: 3px solid var(--color-silver-deep); outline: var(--rule-hair) solid var(--color-silver); outline-offset: -7px; }
.card__face--tier-silver .card__status { background: var(--color-silver); }
.card__face--tier-silver .card__sheen { opacity: 0.7;
background: linear-gradient(115deg, transparent 38%, color-mix(in oklch, var(--color-silver) 70%, transparent) 45%, color-mix(in oklch, var(--color-paper) 90%, transparent) 50%, color-mix(in oklch, var(--color-silver-deep) 35%, transparent) 55%, transparent 62%); }
.card__face--tier-gold { background: var(--color-gold-wash); border: 3px solid var(--color-gold-deep); outline: var(--rule-hair) solid var(--color-gold); outline-offset: -7px; }
.card__face--tier-gold .card__status { background: var(--color-gold); }
/* Full foil: the whole card is foil, the sheen runs over all of it */
.card__face--tier-mentor, .card__face--tier-top { border: 3px solid var(--color-ink); outline: var(--rule-hair) solid var(--color-gold-deep); outline-offset: -7px;
background: linear-gradient(135deg, var(--color-accent-2), var(--color-gold) 22%, var(--color-silver) 40%, var(--color-green-wash-2) 55%, var(--color-gold) 72%, var(--color-accent-2) 88%, var(--color-silver)); }
.card__face--tier-mentor .card__sheen, .card__face--tier-top .card__sheen { opacity: 0.85; }
.card__face--tier-mentor .card__status, .card__face--tier-top .card__status { background: var(--color-ink); color: var(--color-accent); }
.card__face--tier-mentor .card__attacks, .card__face--tier-top .card__attacks { border-top-color: var(--color-ink); }
.card__face--tier-mentor .card__attack, .card__face--tier-top .card__attack { border-bottom-color: color-mix(in oklch, var(--color-ink) 35%, transparent); }
.card__face--tier-mentor .card__attack-line, .card__face--tier-top .card__attack-line,
.card__face--tier-mentor .card__tier, .card__face--tier-top .card__tier, .card__face--tier-mentor .card__foot, .card__face--tier-top .card__foot { color: var(--color-ink); }
/* Energy cards: lime picture with the titan drawing, the figure large */
.card__face--energy { background: var(--color-green-wash); border-color: var(--color-accent-strong); --type-bg: var(--color-accent); --type-ink: var(--color-accent-ink); }
.card__face--energy .card__picture--part { background: var(--color-accent); outline-color: var(--color-accent-strong); }
.card__face--energy .card__name { font-size: var(--text-md); }
.card__spec { margin: 0; font: 700 var(--text-xl)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.card__face--part .card__fact { font-size: var(--text-xs); line-height: 1.35; }
.card__type { display: inline-flex; align-items: center; gap: var(--space-3xs); }
.card__bolt { fill: currentColor; flex-shrink: 0; }
.card__chem { position: absolute; right: var(--space-xs); bottom: var(--space-xs); padding: 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font: 700 var(--text-sm)/1.6 var(--font-display); }
/* The binder: every member shows the tier of their card */
.binder__rank { flex-wrap: wrap; gap: var(--space-2xs); }
.binder__tier { padding: 0 var(--space-2xs); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-paper); }
.binder__tier--bronze { background: var(--color-bronze-wash); border-color: var(--color-bronze-deep); }
.binder__tier--silver { background: var(--color-silver); border-color: var(--color-silver-deep); }
.binder__tier--gold { background: var(--color-gold); border-color: var(--color-gold-deep); }
.binder__tier--mentor, .binder__tier--top { background: linear-gradient(135deg, var(--color-accent-2), var(--color-gold) 40%, var(--color-silver) 70%, var(--color-accent-2)); }
.binder__tier--founder { background: var(--color-ink); color: var(--color-accent); }
.binder__slot--bronze { outline-color: var(--color-bronze); }
.binder__slot--silver { outline-color: var(--color-silver-deep); }
.binder__slot--gold, .binder__slot--founder { outline: var(--rule-bar) solid var(--color-gold-deep); outline-offset: -2px; }
.binder__slot--mentor, .binder__slot--top { outline: var(--rule-bar) solid var(--color-ink); outline-offset: -2px; }
.binder__slot--founder { outline-color: var(--color-ink); }
.binder__slot--energy .binder__pic--part { background: var(--color-accent); }
.binder__kind { color: var(--color-muted); }
/* On a shining card the text sits above the sheen, so it stays sharp; the sheen runs over the photo and the foil */
.card__face--person > .card__name, .card__face--person > .card__rank, .card__face--person > .card__specialty,
.card__face--person > .card__attacks, .card__face--person > .card__foot { position: relative; z-index: 3; }
.card__face--person > .card__top { z-index: 3; }
/* ---- on tour ---- */
/* tour.html: a world map with pins (js/tour.js), the list of every place under it, then one band per trip */
.tour-hero__photo img { aspect-ratio: 4 / 3; height: auto; }
.tour-map { position: relative; border-top: var(--rule-bar) solid var(--color-rule-2); background: var(--color-paper-2); }
.tour-map__world { width: 100%; height: auto; }
.tour-map__land { fill: var(--color-paper-3); stroke: var(--color-rule); stroke-width: 0.6; stroke-linejoin: round; }
.tour-map__country { fill: var(--color-green-rule); stroke: var(--color-accent-strong); stroke-width: 0.8; stroke-linejoin: round; }
.tour-map__country--home { fill: var(--color-ink); stroke: var(--color-ink); }
.tour-map__routes path { fill: none; stroke: var(--color-accent-strong); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.tour-map__pins { position: absolute; inset: 0; pointer-events: none; }
.tour-pin { position: absolute; left: var(--x); top: var(--y); z-index: var(--z-base); display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--color-ink); transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer; }
.tour-pin__dot { display: grid; place-items: center; min-width: 22px; height: 22px; padding-inline: var(--space-2xs); border: var(--rule-bar) solid var(--color-ink); border-radius: 11px; background: var(--color-accent); color: var(--color-accent-ink); font: 700 var(--text-xs)/1 var(--font-display); font-variant-numeric: tabular-nums; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.tour-pin:hover .tour-pin__dot { background: var(--color-accent-2); }
.tour-pin[aria-expanded="true"] { z-index: var(--z-raised); }
.tour-pin[aria-expanded="true"] .tour-pin__dot { background: var(--color-ink); color: var(--color-paper); }
.tour-pin:focus-visible { outline: none; }
.tour-pin:focus-visible .tour-pin__dot { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tour-pin--static, .tour-pin--home { pointer-events: none; cursor: default; }
.tour-pin--home { width: 12px; height: 12px; border: var(--rule-bar) solid var(--color-paper); border-radius: 6px; background: var(--color-accent-strong); }
/* The card beside its pin, inside the map (phones: under the map) */
.tour-card { position: absolute; left: min(calc(var(--x) + 28px), calc(100% - 22rem)); top: 0; z-index: var(--z-dropdown); width: min(22rem, 100%); padding: var(--space-md); border-top: var(--rule-bar) solid var(--color-ink); outline: var(--rule-hair) solid var(--color-rule-2); outline-offset: -1px; background: var(--color-paper); pointer-events: auto; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.tour-card--left { left: auto; right: max(0px, calc(100% - var(--x) + 28px)); }
.tour-card__head { font: 600 var(--text-lg)/1.3 var(--font-display); }
.tour-card__list { list-style: none; margin: var(--space-xs) 0 0; padding: 0; }
.tour-card__list li { display: grid; gap: var(--space-3xs); padding-block: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule); }
.tour-card__sub { margin-top: var(--space-sm); color: var(--color-ink-2); font: 600 var(--text-sm)/1.4 var(--font-display); }
.tour-card__list--papers a { font-weight: 400; }
.tour-card__meta { color: var(--color-muted); font: 500 var(--text-xs)/1.4 var(--font-display); }
.tour-card__close { min-height: 44px; margin-top: var(--space-xs); padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 500 var(--text-sm)/1 var(--font-display); cursor: pointer; }
.tour-card__close:hover { background: var(--color-paper-3); }
/* Phones: the card opens under the map, full width, so it never hides the pins */
@media (max-width: 39.99rem) {
.tour-card, .tour-card--left { top: calc(100% + var(--space-xs)); left: 0; right: 0; width: auto; max-height: min(28rem, 75vh); }
}
.tour-map__legend { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); margin-top: var(--space-sm); color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); }
.tour-map__legend-item { display: inline-flex; align-items: baseline; gap: var(--space-xs); }
.tour-map__key { flex: none; display: inline-block; width: 14px; height: 14px; border: var(--rule-bar) solid var(--color-ink); border-radius: 7px; background: var(--color-accent); transform: translateY(2px); }
.tour-map__key--home { width: 12px; height: 12px; border-color: var(--color-paper-3); border-radius: 6px; background: var(--color-accent-strong); }
.tour-atlas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
.tour-list__head { font-size: var(--text-xl); }
.tour-list__country { margin: var(--space-lg) 0 var(--space-xs); font: 600 var(--text-lg)/1.3 var(--font-display); }
.tour-list__title { font: 600 var(--text-lg)/1.3 var(--font-display); max-width: 40ch; }
.tour-list__title a { color: var(--color-ink); text-decoration: none; }
.tour-list__title a::after { content: ""; position: absolute; inset: 0; }
.row-item:has(a:hover) .tour-list__title a { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.tour-trip__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.tour-trip__text > p + p { margin-top: var(--space-md); }
.tour-trip__text > p { color: var(--color-ink-2); }
.tour-trip__facts { margin-top: var(--space-xl); }
.tour-trip__photo img { aspect-ratio: 16 / 9; height: auto; }
.tour-trip__subhead { margin: var(--space-2xl) 0 var(--space-md); font-size: var(--text-xl); }
.tour-visit__title { margin: 0; font: 600 var(--text-title)/1.2 var(--font-display); max-width: 32ch; }
.tour-photos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); margin-top: var(--space-xl); }
.tour-photos__item img { aspect-ratio: 4 / 3; height: auto; }
.tour-steps h4 { margin: 0; font: 600 var(--text-title)/1.2 var(--font-display); }
.tour-steps li { row-gap: var(--space-2xs); }
@media (min-width: 40rem) { .tour-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) {
.tour-trip__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: start; }
/* The map beside the list of every place */
.tour-atlas { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-xl); align-items: start; }
.tour-atlas__map { position: sticky; top: calc(72px + var(--space-lg)); }
.tour-atlas__index .row-item { grid-template-columns: minmax(0, 1fr); padding-inline: 0; padding-block: var(--space-md); gap: var(--space-2xs); }
.tour-list__country:first-child { margin-top: var(--space-md); }
}
/* ---- partners and sponsors ---- */
/* Tiers, highest first: Platinum (lime, the brand), Silver, then the partners and universities
as grey logos. The sponsor carousel shows Platinum slides large and Silver slides smaller; while
there is no current sponsor the open spots show instead, and ended sponsors move to the former
partners band. Drawn by loadPartners (data-loader.js). */
.tier-badge { display: inline-block; margin: 0; padding: var(--space-3xs) var(--space-xs); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); color: var(--color-ink); font: 600 var(--text-sm)/1.3 var(--font-display); }
.tier-badge--platinum { background: var(--color-accent); color: var(--color-accent-ink); }
.tier-badge--silver { background: var(--color-silver-wash); border-color: var(--color-silver-deep); }
[id^="partner-"] { scroll-margin-top: 96px; }
.logos li:target, .sponsor-slide:target .sponsor__text { background: var(--color-green-wash-2); }
/* A partner without a logo: its name on the tile */
.logos__name { display: block; max-width: 14rem; color: var(--color-ink-2); font: 600 var(--text-sm)/1.25 var(--font-display); text-align: center; overflow-wrap: break-word; }
.logos a, .carousel__logo, .sponsor__logo { text-decoration: none; }
.logos__plain { display: grid; place-items: center; height: 112px; padding: var(--space-md); }
.logos a:hover .logos__name, .carousel__logo:hover .logos__name { color: var(--color-ink); }
/* The sponsor carousel: Platinum large, Silver smaller */
.carousel--sponsors { margin-bottom: var(--space-xl); }
.carousel--sponsors[hidden] { display: none; }
.carousel--sponsors .sponsor-slide--platinum { flex-basis: 92%; }
.carousel--sponsors .sponsor-slide--silver { flex-basis: min(82%, 22rem); }
@media (min-width: 60rem) {
.carousel--sponsors .sponsor-slide--platinum { flex-basis: calc((100% - var(--space-md)) / 1.3); }
.carousel--sponsors .sponsor-slide--silver { flex-basis: calc((100% - 2 * var(--space-md)) / 3.15); }
}
.sponsor { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; height: 100%; border-top: var(--rule-bar) solid var(--color-rule-2); }
.sponsor--platinum { border-top-color: var(--color-accent); }
.sponsor--silver { border-top-color: var(--color-silver-deep); }
.sponsor__logo { display: grid; place-items: center; aspect-ratio: 2 / 1; padding: var(--space-lg); background: var(--color-paper); outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; }
.sponsor__logo img { width: auto; height: auto; max-width: 80%; max-height: 5rem; object-fit: contain; }
.sponsor__logo .logos__name { max-width: 20rem; font-size: var(--text-xl); }
.sponsor__text { display: grid; align-content: start; justify-items: start; gap: var(--space-xs); padding: var(--space-md) var(--space-md) var(--space-lg); background: var(--color-paper-2); }
.sponsor--platinum .sponsor__text { background: var(--color-green-wash); }
.sponsor__name { margin-top: var(--space-2xs); font-size: var(--text-title); overflow-wrap: break-word; min-width: 0; }
.sponsor--platinum .sponsor__name { font-size: var(--text-xl); }
.sponsor__name a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.sponsor__name a:hover { text-decoration-color: var(--color-accent-strong); }
.sponsor__thanks { margin: 0; color: var(--color-ink); font-style: italic; max-width: 48ch; }
.sponsor--platinum .sponsor__thanks { font-size: var(--text-lead); }
.sponsor__years { margin: 0; color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); font-variant-numeric: tabular-nums; }
@media (min-width: 48rem) {
.sponsor--platinum { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: auto; }
.sponsor--platinum .sponsor__logo { aspect-ratio: auto; min-height: 18rem; }
.sponsor--platinum .sponsor__logo img { max-height: 9rem; }
.sponsor--platinum .sponsor__text { align-content: center; padding: var(--space-xl); }
}
/* On tour: a visit at a partner links to it */
.tour-visit__title a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.tour-visit__title a:hover { text-decoration-color: var(--color-accent-strong); }
/* ---- become a partner (sponsor.html) ---- */
.sponsor-hero__photo img { aspect-ratio: 4 / 3; height: auto; }
.tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.tier { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); min-width: 0; padding-top: var(--space-lg); border-top: var(--rule-bar) solid var(--color-rule-2); }
.tier--platinum { padding: var(--space-lg); border-top: 0; background: var(--color-paper); box-shadow: inset 0 0 0 var(--rule-bar) var(--color-accent); }
.tier--silver { border-top-color: var(--color-silver-deep); }
.tier__flag { margin: 0; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font: 600 var(--text-sm)/1.3 var(--font-display); }
.tier__name { font-size: var(--text-xl); }
.tier__name .tier-badge { font-size: var(--text-lg); padding: var(--space-2xs) var(--space-sm); }
.tier__lead { margin: 0; color: var(--color-ink); max-width: 40ch; }
.tier__list { align-self: stretch; margin-top: var(--space-xs); }
.tier__pick { margin-top: auto; }
.tier-amounts { margin-top: var(--space-2xl); max-width: 40rem; }
.tier-note { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 60ch; }
.sponsor-donate { margin-top: var(--space-lg); }
.sponsor-donate[hidden] { display: none; }
.sponsor-donate p { margin-bottom: var(--space-sm); color: var(--color-ink-2); max-width: 40ch; }
.field select {
width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md);
border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); background: var(--color-paper);
color: var(--color-ink); font: 400 var(--text-md)/1.5 var(--font-body);
}
.field select:hover { border-color: var(--color-ink); }
.field select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-color: var(--color-ink); }
@media (pointer: coarse) { .field select { min-height: 52px; } }
#sponsor-form textarea { min-height: 8rem; }
@media (min-width: 60rem) {
.tiers { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-lg); align-items: stretch; }
.tier__pick { margin-top: auto; }
}
.sponsor-hero .lead { margin-top: var(--space-md); }
/* ---- open spots and former partners ---- */
/* No current Platinum or Silver partner: dashed, clearly empty logo frames (one large Platinum,
four smaller Silver) with the line and the email button. Hidden by loadPartners once a
current sponsor row exists. */
.open-spots { margin-bottom: var(--space-xl); }
.open-spots__frames { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.open-spot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs); min-width: 0; min-height: 7rem; padding: var(--space-md) var(--space-sm); border: var(--rule-bar) dashed var(--color-silver-deep); background: var(--color-paper); text-align: center; }
.open-spot--platinum { grid-column: 1 / -1; min-height: 12rem; border-color: var(--color-accent-strong); background: var(--color-green-wash); }
.open-spot__text { color: var(--color-muted); font: 500 var(--text-sm)/1.3 var(--font-display); overflow-wrap: break-word; }
.open-spot--platinum .open-spot__text { color: var(--color-ink-2); font-size: var(--text-title); }
.open-spot--platinum .tier-badge { font-size: var(--text-md); padding: var(--space-2xs) var(--space-sm); }
.open-spots__foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); margin-top: var(--space-lg); }
.open-spots__line { margin: 0; color: var(--color-ink); font: 600 var(--text-lead)/1.35 var(--font-display); overflow-wrap: break-word; }
.open-spots__foot .actions { margin-top: 0; }
.open-spots--compact .open-spot--platinum { min-height: 9rem; }
.open-spots--compact .open-spot { min-height: 5.5rem; }
@media (min-width: 48rem) {
.open-spots__frames { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
.open-spot--platinum { grid-column: 1; grid-row: 1 / span 2; min-height: 16rem; }
.open-spots--compact .open-spot--platinum { min-height: 12rem; }
.open-spots__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-xl); }
}
/* With thanks to our former partners: a calm band of grey logos with the name and the years */
.former-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
.former { display: grid; align-content: start; gap: var(--space-2xs); min-width: 0; }
.former__logo { display: grid; place-items: center; height: 112px; padding: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); text-decoration: none; }
.former__logo img { width: auto; height: auto; max-width: 100%; max-height: 64px; object-fit: contain; filter: grayscale(1); opacity: 0.75; }
.former__name { margin: 0; color: var(--color-ink); font: 600 var(--text-md)/1.3 var(--font-display); overflow-wrap: break-word; }
.former__name a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; }
.former__name a:hover { text-decoration-color: var(--color-accent-strong); }
.former__years { margin: 0; color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); font-variant-numeric: tabular-nums; }
.former:target .former__logo { background: var(--color-green-wash-2); }
@media (min-width: 40rem) { .former-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .former-list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* ---- team: alumni strip ---- */
/* A row of small alumni portraits above the alumni index (data-loader.js, wireAlumStrip). On its
own it is a plain scrolling row. With script and motion allowed, .alum-strip--moving slides a
doubled track one copy to the left (transform only) and loops; hover, focus inside and the
Pause button stop it. .alum-strip--held is the stopped state: a scrolling row again. */
.alum-strip { min-width: 0; margin-bottom: var(--space-xl); }
.alum-strip[hidden] { display: none; }
.alum-strip__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); }
.alum-strip__note { margin: 0; color: var(--color-muted); font: 500 var(--text-sm)/1.4 var(--font-display); font-variant-numeric: tabular-nums; }
.alum-strip__toggle[hidden] { display: none; }
.alum-strip__toggle { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.alum-strip__icon { display: inline-block; width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.alum-strip__toggle.is-paused .alum-strip__icon { border-inline-end: 0; border-block: 6px solid transparent; border-inline-start: 10px solid currentColor; }
.alum-strip__view {
overflow-x: auto; overscroll-behavior-x: contain; padding-block: var(--space-2xs) var(--space-sm);
scrollbar-width: thin; scrollbar-color: var(--color-rule-2) transparent;
}
.alum-strip__track { display: flex; width: max-content; }
.alum-strip__list { display: flex; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.alum-strip__item { flex: 0 0 6.5rem; min-width: 0; }
@media (min-width: 40rem) { .alum-strip__item { flex-basis: 7.5rem; } }
.alum-strip__link { display: block; color: var(--color-ink); text-decoration: none; }
.alum-strip__link:focus-visible { outline: var(--rule-bar) solid var(--color-focus); outline-offset: 2px; }
.alum-strip__photo { display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-paper-3); outline: var(--rule-hair) solid var(--color-rule-2); outline-offset: -1px; }
.alum-strip__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.alum-strip__photo .person__initials { font-size: var(--text-xl); }
.alum-strip__name { display: block; margin-top: var(--space-xs); font: 600 var(--text-sm)/1.3 var(--font-display); overflow-wrap: break-word; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; }
.alum-strip__link:hover .alum-strip__name { text-decoration-color: var(--color-accent-strong); text-decoration-thickness: 2px; }
/* Two lines kept for the tier and rank, so the row does not grow when they arrive */
.alum-strip__rank { display: block; min-height: 2.6em; margin-top: var(--space-3xs); color: var(--color-muted); font: 500 var(--text-xs)/1.3 var(--font-display); }
/* Moving: one gap after each copy, so the second copy starts where the first one did */
.alum-strip--moving .alum-strip__view { scrollbar-width: none; }
.alum-strip--moving .alum-strip__view::-webkit-scrollbar { display: none; }
.alum-strip--moving .alum-strip__list { padding-inline-end: var(--space-md); }
.alum-strip--moving .alum-strip__track { animation: alum-strip-slide var(--alum-strip-time, 120s) linear infinite; will-change: transform; }
.alum-strip--moving .alum-strip__view:hover .alum-strip__track { animation-play-state: paused; }
.alum-strip--held .alum-strip__track { animation: none; transform: none; }
@keyframes alum-strip-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
.alum-strip__track { animation: none !important; transform: none !important; }
}
/* ---- power ranks: jump buttons, scoreboards, Power Player, all-time ranking ---- */
/* ranks.html (js/ranks.js). The hero's row of jump buttons wraps on phones. The week and month
boards are rows of small portraits (the alumni strip's .alum-strip__photo) with a big figure
under the name; the Winner of the week sits beside them in the golden frame (.frame--goat).
The all-time ranking is a ruled list with a small portrait, and the 23 ranks fold under it. */
.ranks-jump { margin-top: var(--space-xl); }
.ranks-jump__list { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.ranks-jump .btn { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); white-space: normal; text-align: center; }
@media (min-width: 40rem) { .ranks-jump .btn { padding: 0 var(--space-lg); font-size: var(--text-md); } }
#week, #player, #standing, #ranking, #fame, #xp, #pack { scroll-margin-top: 72px; }
/* This week: the board, and on wide screens the Winner of the week on the right */
.week-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.week-grid__side { max-width: 22rem; }
@media (min-width: 60rem) {
.week-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.week-grid__side { max-width: none; }
}
.frame--week .frame__name { font-size: var(--text-title); }
.frame--week .frame__when { font-size: var(--text-md); }
/* A scoreboard of small portraits, most first */
.score { list-style: none; margin: 0; padding: var(--space-md) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--space-lg) var(--space-md); border-top: var(--rule-bar) solid var(--color-rule-2); }
@media (min-width: 40rem) { .score { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); } }
.score__item { position: relative; display: flex; flex-direction: column; min-width: 0; }
.score__item > p { margin: 0; }
.score__link { display: block; color: var(--color-ink); text-decoration: none; }
.score__link:focus-visible { outline: var(--rule-bar) solid var(--color-focus); outline-offset: 2px; }
.score__link .alum-strip__photo img { object-position: center 25%; }
.score__name { display: block; margin-top: var(--space-xs); font: 600 var(--text-sm)/1.3 var(--font-display); overflow-wrap: break-word; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.score__link:hover .score__name { text-decoration-color: var(--color-accent-strong); }
.score__place { position: absolute; top: var(--space-2xs); left: var(--space-2xs); min-width: 1.75rem; padding: var(--space-3xs) var(--space-2xs); background: var(--color-ink); color: var(--color-paper); font: 600 var(--text-xs)/1.3 var(--font-display); font-variant-numeric: tabular-nums; text-align: center; pointer-events: none; }
.score__item:first-child .score__place { background: var(--color-gold); color: var(--color-ink); }
.score__figure { margin-top: var(--space-2xs); color: var(--color-ink-2); font: 500 var(--text-sm)/1.2 var(--font-display); }
.score__number { color: var(--color-ink); font: 600 var(--text-2xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.score__from { margin-top: var(--space-2xs); color: var(--color-muted); font: 500 var(--text-xs)/1.35 var(--font-display); overflow-wrap: break-word; }
/* Power Player of the month: the latest one large in a frame, the text beside it */
.player { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg) var(--gap-columns); align-items: end; padding-top: var(--space-md); border-top: var(--rule-bar) solid var(--color-rule-2); }
.player > .frame { max-width: 18rem; }
@media (min-width: 40rem) { .player { grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr); } }
.player__text > * { margin: 0; }
.player__text > * + * { margin-top: var(--space-xs); }
.player__when { color: var(--color-ink-2); font: 600 var(--text-lg)/1.3 var(--font-display); }
.player__name { font-size: var(--text-section); line-height: 1.05; overflow-wrap: break-word; }
.player__name .link { font-weight: inherit; }
.player__rank { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-ink-2); font: 500 var(--text-md)/1.3 var(--font-display); }
.player__note { color: var(--color-ink-2); max-width: 52ch; }
.player__post .link { display: inline-flex; align-items: center; min-height: 44px; }
.player__now { padding-top: var(--space-sm); max-width: 52ch; border-top: var(--rule-hair) solid var(--color-rule-2); color: var(--color-ink-2); font-style: italic; }
.player__now .link { font-style: normal; }
/* The all-time ranking: place, small portrait, name and rank, total XP */
.alltime { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) solid var(--color-rule-2); max-width: 56rem; }
.alltime--rest { border-top: 0; }
.alltime__row { display: grid; grid-template-columns: 2rem 2.75rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); padding-block: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); }
@media (min-width: 40rem) { .alltime__row { grid-template-columns: 2.5rem 3.25rem minmax(0, 1fr) auto; gap: var(--space-md); } }
.alltime__face { display: block; }
.alltime__face .alum-strip__photo img { object-position: center 25%; }
.alltime__face .person__initials { font-size: var(--text-sm); }
.alltime__who { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-md); min-width: 0; }
.alltime__name { min-width: 0; overflow-wrap: break-word; }
.alltime__name .link { display: inline-flex; align-items: center; min-height: 44px; }
.alltime__alum { display: inline-block; margin-left: var(--space-2xs); padding: 0 var(--space-2xs); border: var(--rule-hair) solid var(--color-rule-2); color: var(--color-ink-2); font: 500 var(--text-xs)/1.5 var(--font-display); vertical-align: 0.1em; }
.alltime__rank { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-muted); font: 500 var(--text-sm)/1.3 var(--font-display); }
.alltime__row .board__count { white-space: nowrap; }
/* Folded lists: the rest of the ranking and the 23 ranks */
.ranks-more { margin-top: var(--space-md); }
.ranks-legend { margin-top: var(--space-2xl); }
.ranks-more > summary { display: list-item; width: fit-content; min-height: 44px; color: var(--color-ink); font: 500 var(--text-md)/44px var(--font-display); cursor: pointer; }
.ranks-legend > summary { padding-block: var(--space-xs); font: 600 var(--text-title)/1.3 var(--font-display); }
.ranks-more > summary::marker { color: var(--color-accent-strong); }
.ranks-more > summary:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.ranks-more > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ranks-legend[open] > .ranks-note { margin-bottom: var(--space-md); }