) */
.page-hero--media .prism-lite--gap { --lx: 59%; --ly: 30%; --ls: clamp(72px, 6.4vw, 108px); }
}
@media (max-width: 899px) {
.page-hero .prism-lite { --lx: calc(100% - 3.25rem - var(--gutter)); --ly: calc(var(--header-h) + 3.25rem); --ls: 64px; }
.page-hero--media .page-hero__media { width: 100%; margin-top: var(--space-s); }
}
/* Phones: the mark sits beside the breadcrumb, 24px+ below the Menu pill (never hanging from it)
and above the eyebrow line */
@media (max-width: 479px) {
.page-hero .prism-lite { --ly: calc(var(--header-h) + 2.65rem); --ls: 48px; }
}
/* Page-hero VISUAL slot — a page-specific, content-derived visual (case mosaic, contact
constellation, live demo, typographic index…) instead of an empty right half.
…
(glow only: the mark is not shown)
breadcrumb · eyebrow · h1 · lead · actions …
…
[
]
The visual is the LAST text-column sibling (a .hero-index may follow it).
≥900px: 12 columns, text 1–7 (top-aligned), visual 8–12. The visual is as tall as the text
block, and at least --visual-min-h (default 18rem): its content never spreads the text rows
(contain: size — the extra height goes to a last 1fr row), so size its content with % / grid /
flex, not with fixed heights. <900px: under the actions, height --visual-h (default: its content;
--mosaic: clamp(11rem, 50vw, 16rem)); --desktop hides it there. Decorative → aria-hidden="true";
an interactive demo keeps its semantics and its own pause control. Cheap: CSS/SVG/HTML, lazy
images, no WebGL. */
.page-hero__visual { position: relative; min-width: 0; }
.page-hero--visual .prism-lite__mark { display: none; } /* one prism per view: the visual takes the light */
.page-hero__visual--frame { /* bevelled navy instrument panel */
--cut: 22px;
display: grid; align-content: center; gap: var(--space-m); padding: clamp(1.25rem, .6rem + 2vw, 2.5rem);
overflow: hidden; isolation: isolate; clip-path: var(--bevel);
background: var(--navy-panel); background-color: var(--navy);
box-shadow: inset 0 0 0 1px rgb(200 210 255 / .14);
}
.page-hero__visual--frame::after { /* thread of light on the top edge */
content: ""; position: absolute; left: 0; top: 0; z-index: 3; width: 62%; height: 1px; pointer-events: none;
background: linear-gradient(90deg, transparent, rgb(228 156 242 / .7), rgb(166 140 255 / .85), rgb(138 212 255 / .6), transparent);
}
.page-hero__visual--mosaic { /* 3 tiles: one tall + two stacked */
display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr));
gap: clamp(.5rem, .3rem + .6vw, .9rem);
}
.page-hero__visual--mosaic > :first-child { grid-row: span 2; }
.page-hero__visual--mosaic > .media { height: 100%; min-height: 0; aspect-ratio: auto; }
@media (min-width: 900px) {
.page-hero--visual .page-hero__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(11, auto) 1fr; column-gap: var(--space-m); row-gap: 0; align-items: start; }
.page-hero--visual .page-hero__inner > * { grid-column: 1 / span 7; }
.page-hero--visual .page-hero__inner > * + * { margin-top: var(--space-m); }
.page-hero--visual .page-hero__visual {
grid-column: 8 / -1; grid-row: 1 / span 12; justify-self: stretch; align-self: stretch;
margin: 0 0 0 clamp(0rem, -1rem + 2vw, 1.5rem); min-height: var(--visual-min-h, 18rem); contain: size;
}
.page-hero--visual .hero-index { grid-column: 1 / -1; }
.page-hero--visual .page-hero__title { font-size: clamp(2.5rem, 1.4rem + 3.4vw, 5.25rem); max-width: 15ch; }
.page-hero--visual .prism-lite { --lx: 79%; --ly: 54%; --ls: clamp(110px, 11vw, 190px); }
}
@media (max-width: 899px) {
.page-hero__visual { justify-self: stretch; width: 100%; height: var(--visual-h, auto); margin-top: var(--space-2xs); }
.page-hero__visual--mosaic { height: var(--visual-h, clamp(11rem, 50vw, 16rem)); }
.page-hero__visual--desktop { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
.js .page-hero__visual { animation: hero-visual-in 1.3s var(--ease-out) .2s both; }
}
@keyframes hero-visual-in { from { opacity: 0; transform: translateY(1.25rem); } }
/* Hero index: a compact "On this page" chapter list closing a long page's hero.
Columns: --index-cols (≥1080px, default 4) → --index-cols-md (600–1079px, default 4) → 2. */
.hero-index { justify-self: stretch; width: 100%; margin-top: var(--space-m); border-top: 1px solid var(--line); }
.hero-index__list { display: grid; grid-template-columns: repeat(var(--index-cols, 4), minmax(0, 1fr)); }
.hero-index__list a {
position: relative; display: flex; align-items: baseline; gap: .55rem;
min-height: 2.75rem; padding: .85rem .75rem .5rem 0;
font-size: var(--step--1); line-height: 1.3; color: var(--fg-2); text-decoration: none;
transition: color var(--dur-1);
}
.hero-index__list a::before {
content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px;
background: var(--spectrum); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease-out);
}
.hero-index__list a:hover, .hero-index__list a:focus-visible { color: var(--fg); }
.hero-index__list a:hover::before, .hero-index__list a:focus-visible::before { transform: scaleX(.6); }
.hero-index__num { flex: none; min-width: 2ch; color: var(--fg-3); font-size: var(--step--2); }
@media (max-width: 1079px) { .hero-index__list { grid-template-columns: repeat(var(--index-cols-md, 4), minmax(0, 1fr)); } }
@media (max-width: 599px) {
.hero-index__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
.hero-index__list a { padding-top: .6rem; border-bottom: 1px solid var(--line); }
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4rem; font-size: var(--step--1); color: var(--fg-3); list-style: none; padding: 0; }
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb a, .breadcrumb [aria-current] { display: inline-block; padding-block: .2rem; line-height: 1.4; }
.breadcrumb a { color: var(--fg-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); }
.breadcrumb li + li::before { content: "/"; margin-right: .4rem; color: var(--fg-3); }
.breadcrumb [aria-current="page"] { color: var(--fg); }
/* Home WebGL light canvas (hero.js) + static fallback in the same tone */
.prism-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease-out); }
.is-webgl .prism-canvas { opacity: 1; }
.prism-fallback {
position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden;
background:
radial-gradient(22vmax 20vmax at var(--prism-x, 70%) var(--prism-y, 42%), rgb(166 140 255 / .24), transparent 70%),
radial-gradient(13vmax 13vmax at calc(var(--prism-x, 70%) - 5%) calc(var(--prism-y, 42%) + 7%), rgb(228 156 242 / .16), transparent 70%),
radial-gradient(15vmax 13vmax at calc(var(--prism-x, 70%) + 6%) calc(var(--prism-y, 42%) + 4%), rgb(138 212 255 / .15), transparent 70%),
radial-gradient(90% 70% at var(--prism-x, 70%) var(--prism-y, 42%), rgb(10 20 51 / .85), transparent 80%);
transition: opacity 1.2s;
}
.prism-fallback::after { /* the same three diffraction lines as the shader, same tone */
content: ""; position: absolute; left: var(--prism-x, 70%); top: var(--prism-y, 42%); width: 120vmax; aspect-ratio: 1; translate: -50% -50%;
background:
linear-gradient(90deg, transparent calc(50% - .5px), rgb(230 225 255 / .3) 50%, transparent calc(50% + .5px)),
linear-gradient(30deg, transparent calc(50% - .5px), rgb(200 190 255 / .22) 50%, transparent calc(50% + .5px)),
linear-gradient(150deg, transparent calc(50% - .5px), rgb(190 220 255 / .22) 50%, transparent calc(50% + .5px));
-webkit-mask-image: radial-gradient(closest-side, transparent 6%, #000 10%, rgb(0 0 0 / .25) 40%, transparent 80%);
mask-image: radial-gradient(closest-side, transparent 6%, #000 10%, rgb(0 0 0 / .25) 40%, transparent 80%);
}
.is-webgl .prism-fallback { opacity: 0; }
/* 10. Media & frames ------------------------------------------------------ */
/* .media: cinematic but legible grade (brightness ~.88, saturation ~.8) + bevel */
.media { position: relative; overflow: hidden; background: var(--surface-2); clip-path: var(--bevel); --cut: 18px; }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; filter: var(--grade); transition: transform 1.4s var(--ease-out), filter .8s; }
.media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--media-tint); mix-blend-mode: multiply; }
.media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(160deg, rgb(166 140 255 / .06), transparent 40%, rgb(138 212 255 / .05)); }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--3x4 { aspect-ratio: 3 / 4; }
.media--4x5 { aspect-ratio: 4 / 5; }
.media--square { aspect-ratio: 1; }
.media--wide { aspect-ratio: 21 / 9; }
.media--natural img { filter: none; }
.media--natural::before, .media--natural::after { display: none; }
.media__caption { margin-top: .7rem; font-size: var(--step--2); color: var(--fg-3); line-height: 1.5; }
a:hover .media img, .media--zoom:hover img { transform: scale(1.03); filter: var(--grade-hover); }
/* .frame: bevel media frame with a caption bar (illustrative notices, credits) */
.frame { position: relative; display: grid; margin: 0; }
.frame__media { --cut: 18px; }
.frame__label {
position: absolute; z-index: 2; top: .75rem; left: .75rem;
display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .6rem;
font-size: var(--step--2); font-weight: 540; color: #f0edf7; line-height: 1.3;
background: rgb(5 6 11 / .72); border: 1px solid rgb(240 237 247 / .18); border-radius: var(--radius-xs);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.frame__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--spectrum); box-shadow: 0 0 8px var(--iris); }
.frame__caption {
display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem;
padding: .65rem .1rem 0; margin-top: .6rem; border-top: 1px solid var(--line);
font-size: var(--step--2); color: var(--fg-3); line-height: 1.45;
}
.frame__caption > :first-child { color: var(--fg-2); }
.frame__tag { display: inline-flex; align-items: center; gap: .45rem; }
.frame__tag::before { content: ""; width: .7rem; height: .8rem; flex: none; background: var(--spectrum); clip-path: var(--hex); opacity: .9; }
/* Media badge: a bevelled glass note laid over a .frame photo (a date, a figure, a short claim).
The page places it (left / bottom inside a position: relative wrapper). Below 1200px, or with
.media-badge--row, it becomes a compact horizontal note (value | kicker + text). Always dark
glass (it sits on a photo), so its colours are constants. */
.media-badge {
--cut: 14px;
position: absolute; z-index: 2; left: .75rem; bottom: .75rem;
display: grid; gap: .35rem; justify-items: start;
width: min(18.5rem, 88%);
padding: 1.1rem 1.35rem 1.25rem;
background: linear-gradient(160deg, rgb(14 22 56 / .9), rgb(6 9 22 / .86));
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
clip-path: var(--bevel);
box-shadow: inset 0 0 0 1px rgb(240 237 247 / .14);
color: #b4b7c9;
}
.media-badge::before { /* a thread of light along the top edge */
content: ""; position: absolute; left: 0; top: 0; width: 64%; height: 1px;
background: linear-gradient(90deg, transparent, rgb(228 156 242 / .8), rgb(166 140 255 / .9), rgb(138 212 255 / .7), transparent);
}
.media-badge__kicker { font-size: var(--step--1); font-weight: 540; color: #8b90a7; line-height: 1.2; }
.media-badge__value { /* light numeral; one glint on arrival */
display: block; font-size: clamp(3.25rem, 2.4rem + 2.8vw, 5rem); font-weight: 250; font-stretch: 118%;
line-height: .86; letter-spacing: -.05em; padding-bottom: .04em;
color: transparent; -webkit-background-clip: text; background-clip: text;
background-image: linear-gradient(100deg, transparent 38%, rgb(255 255 255 / .95) 50%, transparent 62%), var(--spectrum);
background-size: 260% 100%, 100% 100%; background-position: 130% 0, 0 0; background-repeat: no-repeat;
}
.media-badge__text { display: flex; gap: .6rem; align-items: flex-start; margin-top: .45rem; font-size: var(--step--1); line-height: 1.4; color: #f0edf7; }
.media-badge__text .flag-fr { margin-top: .22em; }
@media (prefers-reduced-motion: no-preference) {
.media-badge { animation: badge-in 1.3s var(--ease-out) .45s both; }
.media-badge__value { animation: badge-glint 2.4s var(--ease-in-out) 1.1s both; }
}
@keyframes badge-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes badge-glint { from { background-position: 130% 0, 0 0; } to { background-position: -30% 0, 0 0; } }
@media (max-width: 1199px) {
.media-badge { width: auto; max-width: calc(100% - 1.5rem); grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; row-gap: .2rem; align-items: end; padding: .8rem 1.1rem .85rem; }
.media-badge__value { grid-column: 1; grid-row: 1 / span 2; align-self: center; font-size: clamp(2.6rem, 2rem + 3vw, 3.4rem); }
.media-badge__kicker, .media-badge__text { grid-column: 2; }
.media-badge__text { margin-top: 0; font-size: var(--step--2); }
}
.media-badge--row { width: auto; max-width: calc(100% - 1.5rem); grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; row-gap: .2rem; align-items: end; padding: .8rem 1.1rem .85rem; }
.media-badge--row .media-badge__value { grid-column: 1; grid-row: 1 / span 2; align-self: center; font-size: clamp(2.6rem, 2rem + 3vw, 3.4rem); }
.media-badge--row :is(.media-badge__kicker, .media-badge__text) { grid-column: 2; }
.media-badge--row .media-badge__text { margin-top: 0; font-size: var(--step--2); }
/* 11. Cards --------------------------------------------------------------- */
.card {
position: relative; isolation: isolate;
display: flex; flex-direction: column; gap: .85rem;
padding: clamp(1.25rem, 1rem + 1vw, 2rem);
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s);
color: var(--fg-2); text-decoration: none;
transition: border-color var(--dur-2), background-color var(--dur-2), transform var(--dur-2) var(--ease-out);
}
a.card:hover, .card--hover:hover, .card:has(.card__cover:hover) { border-color: var(--line-2); }
.card__eyebrow { font-size: var(--step--1); color: var(--fg-3); font-weight: 520; }
.card__title { font-size: var(--step-2); line-height: 1.14; letter-spacing: -.022em; color: var(--fg); font-weight: 560; }
.card__text { color: var(--fg-2); }
.card__foot { margin-top: auto; padding-top: .5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.card__link { display: inline-flex; align-items: center; gap: .45rem; color: var(--fg); font-weight: 540; font-size: .9375rem; }
.card__link svg { width: 1rem; height: 1rem; transition: transform var(--dur-2) var(--ease-out); }
.card:hover .card__link svg { transform: translate(2px, -2px); }
/* Stretched link: the whole card is clickable, one link in the tab order */
.card__cover { text-decoration: none; color: inherit; }
.card__cover::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.card__cover:focus-visible { outline: none; }
.card:has(.card__cover:focus-visible), .post-card:has(.post-card__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.card--flat { background: transparent; }
.card--raised { background: var(--bg-raised); box-shadow: var(--shadow-1); }
[data-spotlight] { --mx: 50%; --my: 50%; }
[data-spotlight]::before {
content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
background: radial-gradient(420px circle at var(--mx) var(--my), rgb(166 140 255 / .14), rgb(228 156 242 / .05) 35%, transparent 65%);
opacity: 0; transition: opacity var(--dur-2);
}
[data-spotlight]:hover::before { opacity: 1; }
/* Solution card: image-backed, text on a short scrim */
.card--media { padding: 0; overflow: hidden; }
.card--media .card__body { display: flex; flex-direction: column; gap: .7rem; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); flex: 1; }
.card--overlay, .solution-card { padding: 0; overflow: hidden; min-height: clamp(22rem, 17rem + 12vw, 30rem); justify-content: flex-end; }
.card--overlay .media, .solution-card .media { position: absolute; inset: 0; z-index: -2; border-radius: 0; clip-path: none; }
.card--overlay .media::after, .solution-card .media::after {
background: linear-gradient(180deg, rgb(5 6 11 / 0) 0%, rgb(5 6 11 / 0) 42%, rgb(5 6 11 / .62) 66%, rgb(5 6 11 / .92) 100%);
}
.card--overlay .card__body, .solution-card .card__body { position: relative; padding: clamp(1.25rem, 1rem + 1.2vw, 2.25rem); display: grid; gap: .55rem; justify-items: start; }
.card--overlay:hover .media img, .solution-card:hover .media img { transform: scale(1.04); filter: var(--grade-hover); }
.solution-card .card__eyebrow, .card--overlay .card__eyebrow { color: #c3c6d6; }
.solution-card .card__title, .card--overlay .card__title { color: #f0edf7; font-size: var(--step-3); letter-spacing: -.03em; line-height: 1.04; }
.solution-card .card__text, .card--overlay .card__text { color: #d0d2de; max-width: 36ch; }
.solution-card .card__link, .card--overlay .card__link { color: #f0edf7; margin-top: .35rem; }
/* Case / work card: image, eyebrow, title, summary, status, expandable overview */
.case-card {
position: relative; isolation: isolate; display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden;
transition: border-color var(--dur-2);
}
.case-card:hover, .case-card:focus-within { border-color: var(--line-2); }
.case-card__media { --cut: 0px; clip-path: none; aspect-ratio: 16 / 9; }
.case-card__body { display: flex; flex-direction: column; gap: .7rem; padding: clamp(1.1rem, .9rem + .8vw, 1.6rem); flex: 1; }
.case-card__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
/* stacked: badge first (in the markup), eyebrow under it — titles start at the same height across a row */
.case-card__top--stack { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .6rem; }
.case-card__eyebrow { font-size: var(--step--1); color: var(--fg-3); font-weight: 520; }
.case-card__title { font-size: var(--step-2); line-height: 1.14; letter-spacing: -.022em; }
.case-card__summary { color: var(--fg-2); }
.case-card__details { margin-top: auto; border-top: 1px solid var(--line); }
.case-card__toggle {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
min-height: 3rem; padding-top: .6rem; cursor: pointer; list-style: none;
font-weight: 540; font-size: .9375rem; color: var(--fg);
}
.case-card__toggle::-webkit-details-marker { display: none; }
.case-card__toggle::after {
content: ""; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--line-2);
background: linear-gradient(var(--fg), var(--fg)) center / 9px 1.5px no-repeat, linear-gradient(var(--fg), var(--fg)) center / 1.5px 9px no-repeat;
transition: transform var(--dur-2) var(--ease-out), background-size var(--dur-2);
}
.case-card__details[open] > .case-card__toggle::after { transform: rotate(180deg); background-size: 9px 1.5px, 1.5px 0; }
.case-card__toggle:focus-visible { outline-offset: 2px; }
.case-card__panel { padding: .35rem 0 .5rem; color: var(--fg-2); }
.case-card__panel > * + * { margin-top: .75em; }
.case-card__panel h4 { font-size: var(--step-0); font-weight: 580; letter-spacing: 0; }
/* Meta list (dl): consortium, period, focus … */
.meta-list { display: grid; border-top: 1px solid var(--line); margin: 0; }
.meta-list__row { display: grid; grid-template-columns: minmax(6.5rem, 30%) 1fr; align-content: start; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.meta-list dt { color: var(--fg-3); font-size: var(--step--1); padding-top: .1em; }
.meta-list dd { color: var(--fg); margin: 0; }
.meta-list--inline { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); column-gap: 1.5rem; border-top: 0; }
.meta-list--inline .meta-list__row { grid-template-columns: 1fr; gap: .2rem; border-top: 1px solid var(--line); border-bottom: 0; }
/* Project / research card */
.project-card {
position: relative; display: flex; flex-direction: column; gap: 1rem;
padding: clamp(1.25rem, 1rem + 1.4vw, 2.5rem);
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s);
}
.project-card { isolation: isolate; }
.project-card::after { content: ""; position: absolute; left: -1px; top: -1px; width: 3.5rem; height: 1px; background: var(--spectrum); pointer-events: none; } /* ::before is free for [data-spotlight] */
.project-card__eyebrow { font-size: var(--step--1); color: var(--fg-3); font-weight: 520; }
.project-card__title { font-size: var(--step-4); line-height: .98; letter-spacing: var(--track-h2); font-weight: 540; }
.project-card__lead { font-size: var(--step-1); color: var(--fg); line-height: 1.4; letter-spacing: -.01em; max-width: 34ch; }
.project-card__text { color: var(--fg-2); max-width: 56ch; }
.project-card .meta-list { margin-top: .5rem; }
.project-card__foot { margin-top: auto; padding-top: .5rem; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; }
/* Person card (photo with srcset, or a monogram when no portrait exists) */
.person { display: grid; gap: .8rem; align-content: start; }
.person__photo { aspect-ratio: 4 / 5; --cut: 16px; }
.person__photo img { object-position: 50% 22%; }
.person__name { font-size: var(--step-1); color: var(--fg); font-weight: 560; letter-spacing: -.012em; line-height: 1.2; }
.person__role { color: var(--fg-3); font-size: var(--step--1); margin-top: -.45rem; }
/* .person--lit: a soft spectral aura behind the portrait, a glint across it and a hairline above
the name that draws in the spectrum (hover devices only; no layout shift; ink and paper) */
.person--lit { position: relative; isolation: isolate; gap: 0; }
.person--lit::before {
content: ""; position: absolute; z-index: -1; left: -2%; right: -2%; top: -1.5%; aspect-ratio: 4 / 5; pointer-events: none;
background: linear-gradient(150deg, var(--orchid), var(--iris) 50%, var(--glacier));
filter: blur(26px); opacity: 0; transform: scale(.94);
transition: opacity .7s var(--ease-out), transform 1.1s var(--ease-out);
}
.person--lit .person__photo { margin-bottom: 1.05rem; }
.person--lit .media::after {
background: linear-gradient(105deg, transparent 34%, rgb(255 255 255 / .2) 47%, rgb(166 140 255 / .18) 53%, transparent 66%);
transform: translateX(-120%); transition: transform 1.2s var(--ease-out);
}
.person--lit .person__name { position: relative; padding-top: .95rem; }
.person--lit .person__name::before, .person--lit .person__name::after { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 100%; }
.person--lit .person__name::before { background: var(--line-2); }
.person--lit .person__name::after { background: var(--text-spectrum); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-4) var(--ease-out); }
.person--lit .person__role { margin-top: .4rem; }
@media (hover: hover) {
.person--lit:hover::before { opacity: .5; transform: none; }
.person--lit:hover .person__photo img { transform: scale(1.035); filter: var(--grade-hover); }
.person--lit:hover .media::after { transform: translateX(120%); }
.person--lit:hover .person__name::after { transform: scaleX(1); }
}
/* Monogram (no portrait yet): the prism's light, not a grey placeholder — a hexagon outline in
the prism's 305 × 345 proportion and three faint diffraction lines; on hover of the card the
hexagon turns one facet (60°) and the initials catch the light */
.monogram {
--cut: 16px;
position: relative; overflow: hidden; isolation: isolate;
display: grid; place-items: center; aspect-ratio: 4 / 5; clip-path: var(--bevel);
background:
radial-gradient(70% 55% at 50% 44%, rgb(166 140 255 / .26), transparent 70%),
radial-gradient(60% 45% at 82% 100%, rgb(138 212 255 / .18), transparent 70%),
linear-gradient(180deg, #0c1840, #07102b);
font-family: var(--font-serif); font-style: italic; font-weight: 300;
font-size: clamp(3.25rem, 2.5rem + 3vw, 5.25rem); letter-spacing: -.04em; color: #f0edf7;
padding-right: .06em; /* optical centre of the italic */
text-shadow: 0 0 .4em rgb(166 140 255 / .35);
transition: text-shadow var(--dur-3) var(--ease-out);
}
.monogram::before { /* hexagon outline */
content: ""; position: absolute; left: 50%; top: 50%; width: 68%; aspect-ratio: 305 / 345; translate: -50% -50%; z-index: -1;
background: linear-gradient(160deg, rgb(240 237 247 / .34), rgb(166 140 255 / .18) 50%, rgb(138 212 255 / .26));
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%, 0 25%, 1.2% 25.7%, 1.2% 74.3%, 50% 98.6%, 98.8% 74.3%, 98.8% 25.7%, 50% 1.4%, 1.2% 25.7%, 0 25%);
opacity: .8; transition: transform 1.4s var(--ease-out), opacity var(--dur-2), filter var(--dur-3);
}
.monogram::after { /* three diffraction lines through the vertices */
content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
background:
linear-gradient(90deg, transparent calc(50% - .5px), rgb(230 225 255 / .2) 50%, transparent calc(50% + .5px)),
linear-gradient(30deg, transparent calc(50% - .5px), rgb(200 190 255 / .14) 50%, transparent calc(50% + .5px)),
linear-gradient(150deg, transparent calc(50% - .5px), rgb(190 220 255 / .14) 50%, transparent calc(50% + .5px));
-webkit-mask-image: radial-gradient(closest-side, transparent 28%, #000 40%, transparent 85%);
mask-image: radial-gradient(closest-side, transparent 28%, #000 40%, transparent 85%);
opacity: .8; transition: opacity var(--dur-3);
}
@media (hover: hover) {
:is(.person:hover, a:hover) > .monogram, .monogram:hover { text-shadow: 0 0 .3em rgb(200 184 255 / .75), 0 0 1.1em rgb(228 156 242 / .4); }
:is(.person:hover, a:hover) > .monogram::before, .monogram:hover::before { transform: rotate(60deg) scale(1.06); opacity: 1; filter: brightness(1.5); }
:is(.person:hover, a:hover) > .monogram::after, .monogram:hover::after { opacity: 1; }
}
/* Post card (insights): mini-interface cover, FR badge, stretched link */
.post-card {
position: relative; isolation: isolate; display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden;
transition: border-color var(--dur-2);
}
.post-card:hover { border-color: var(--line-2); }
.post-card__body { display: flex; flex-direction: column; gap: .75rem; padding: clamp(1.1rem, .9rem + .8vw, 1.6rem); flex: 1; }
.post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; font-size: var(--step--2); color: var(--fg-3); }
.post-card__meta .badge { margin-right: .25rem; }
.post-card__title { font-size: var(--step-2); line-height: 1.16; letter-spacing: -.02em; }
.post-card__link { text-decoration: none; color: inherit; }
.post-card__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.post-card__link:focus-visible { outline: none; }
.post-card:hover .post-card__title { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.post-card__excerpt { color: var(--fg-2); font-size: var(--step--1); line-height: 1.6; }
.post-card__cta { margin-top: auto; padding-top: .4rem; display: inline-flex; align-items: center; gap: .45rem; color: var(--fg); font-weight: 540; font-size: .9375rem; }
.post-card__cta svg { width: 1rem; height: 1rem; transition: transform var(--dur-2) var(--ease-out); }
.post-card:hover .post-card__cta svg { transform: translateX(3px); }
/* Mini-interface covers (drawn in HTML so text stays crisp) */
.ui-cover {
position: relative; display: grid; align-content: center; gap: .6rem;
aspect-ratio: 16 / 9; padding: clamp(1rem, .8rem + 1vw, 1.5rem) clamp(1.1rem, .9rem + 1.4vw, 2rem);
background:
radial-gradient(90% 90% at 85% 0%, rgb(166 140 255 / .16), transparent 60%),
radial-gradient(70% 80% at 0% 100%, rgb(138 212 255 / .09), transparent 60%),
#0b0e1b;
border-bottom: 1px solid rgb(240 237 247 / .08);
color: #f0edf7; font-size: .8125rem; line-height: 1.3; overflow: hidden;
}
.ui-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 0 calc(100% - 1px), rgb(240 237 247 / .05) 0) 0 0 / 100% 22px; opacity: .6; }
.ui-field {
position: relative; z-index: 1; display: flex; align-items: center; gap: .55rem; height: 2.4rem; padding: 0 .8rem;
background: rgb(240 237 247 / .05); border: 1px solid rgb(240 237 247 / .2); border-radius: 4px; box-shadow: 0 0 0 3px rgb(166 140 255 / .12);
}
.ui-field svg { width: .95rem; height: .95rem; color: #a68cff; flex: none; }
/* four blinks (4.4 s), then the caret rests visible: WCAG 2.2.2, nothing blinks > 5 s without a pause control */
.ui-caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: var(--spectrum); animation: caret 1.1s steps(1) 4; }
.ui-list { position: relative; z-index: 1; display: grid; list-style: none; padding: .3rem; margin: 0; background: rgb(12 15 28 / .9); border: 1px solid rgb(240 237 247 / .12); border-radius: 4px; }
.ui-list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .32rem .55rem; color: #b4b7c9; border-radius: 3px; }
.ui-list li b { color: #f0edf7; font-weight: 600; }
.ui-list li.is-active { background: rgb(166 140 255 / .14); color: #f0edf7; box-shadow: inset 2px 0 0 #a68cff; }
.ui-list__meta { color: #8b90a7; font-size: .75rem; font-variant-numeric: tabular-nums; }
.ui-select { position: relative; z-index: 1; display: inline-flex; justify-self: start; align-items: center; gap: .45rem; height: 2.1rem; padding: 0 .75rem; border: 1px solid rgb(240 237 247 / .2); border-radius: 4px; background: rgb(240 237 247 / .05); color: #b4b7c9; }
.ui-select b { color: #f0edf7; font-weight: 600; }
.ui-select svg { width: .8rem; height: .8rem; color: #a68cff; }
.ui-rank { position: relative; z-index: 1; display: grid; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.ui-rank li { display: grid; grid-template-columns: 1.4rem 1fr 2.2rem; align-items: center; gap: .55rem; color: #8b90a7; font-variant-numeric: tabular-nums; font-size: .75rem; }
.ui-rank__bar { height: 6px; border-radius: 3px; background: rgb(240 237 247 / .14); position: relative; overflow: hidden; }
.ui-rank__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v, .5) * 100%); border-radius: inherit; background: rgb(240 237 247 / .42); }
.ui-rank li:first-child { color: #f0edf7; }
.ui-rank li:first-child .ui-rank__bar::after { background: var(--spectrum); box-shadow: 0 0 10px rgb(166 140 255 / .6); }
.ui-chips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .4rem; }
.ui-chip { display: inline-flex; align-items: center; gap: .35rem; height: 1.9rem; padding: 0 .7rem; border-radius: 999px; border: 1px solid rgb(240 237 247 / .2); color: #b4b7c9; }
.ui-chip.is-on { color: #05060b; background: #f0edf7; border-color: #f0edf7; font-weight: 600; }
.ui-range { position: relative; z-index: 1; display: grid; gap: .45rem; padding-top: .35rem; }
.ui-range__track { position: relative; height: 4px; border-radius: 2px; background: rgb(240 237 247 / .16); margin-inline: .5rem; }
.ui-range__fill { position: absolute; left: var(--from, 20%); right: calc(100% - var(--to, 70%)); top: 0; bottom: 0; border-radius: inherit; background: var(--spectrum); }
.ui-range__fill::before, .ui-range__fill::after { content: ""; position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #f0edf7; box-shadow: 0 0 0 3px rgb(166 140 255 / .35); }
.ui-range__fill::before { left: -7px; }
.ui-range__fill::after { right: -7px; }
.ui-range__labels { display: flex; justify-content: space-between; color: #b4b7c9; font-size: .75rem; font-variant-numeric: tabular-nums; }
@keyframes caret { 50% { opacity: 0; } }
/* 12. Data: stats, steps, numerals, spec lists --------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); border-top: 1px solid var(--line); list-style: none; padding: 0; }
.stat { padding: 1.5rem 1.5rem 1.5rem 0; display: grid; gap: .6rem; align-content: start; }
.stat + .stat { padding-left: 1.5rem; border-left: 1px solid var(--line); }
@media (max-width: 719px) { .stat + .stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); } }
.stat__value { font-size: clamp(3rem, 2rem + 4.2vw, 6rem); line-height: .9; letter-spacing: -.05em; font-weight: 460; color: var(--fg); font-stretch: 94%; }
/* A non-numeric value ("Europe", "France") in the serif italic, so it never reads as a broken number */
.stat__value--word { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-stretch: normal; letter-spacing: -.035em; padding-right: .06em; }
/* Mona Sans tabular figures use a slashed zero: only while a counter is running */
.is-counting { font-variant-numeric: tabular-nums; }
.stat__unit { font-family: var(--font-serif); font-style: italic; font-weight: 340; letter-spacing: -.02em; font-stretch: normal; line-height: 0; }
.stat__label { color: var(--fg); font-weight: 540; font-size: var(--step-1); letter-spacing: -.01em; line-height: 1.3; }
.stat__text { color: var(--fg-2); max-width: 32ch; }
.count__sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Steps — true sequences only. Horizontal by default, .steps--vertical = timeline */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); counter-reset: step; list-style: none; padding: 0; column-gap: 1.5rem; }
.step { position: relative; padding: 1.4rem 0 1.75rem; border-top: 1px solid var(--line); display: grid; gap: .6rem; align-content: start; }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); justify-self: start; font-size: var(--step--1); color: var(--fg-3); }
.step::after { content: ""; position: absolute; left: 0; top: -1px; width: 2.5rem; height: 1px; background: var(--spectrum); }
.step__title { font-size: var(--step-2); letter-spacing: -.022em; line-height: 1.12; }
.step__text { color: var(--fg-2); max-width: 36ch; }
.steps--numerals .step::before { font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4.25rem); font-weight: 250; font-stretch: 118%; line-height: .9; letter-spacing: -.05em; background: var(--text-spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
.steps--vertical { grid-template-columns: 1fr; column-gap: 0; position: relative; }
.steps--vertical .step { grid-template-columns: 3.5rem 1fr; column-gap: 1.25rem; padding: 0 0 2rem; border-top: 0; }
.steps--vertical .step::before { grid-row: span 3; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line-2); border-radius: 50%; background: var(--bg); color: var(--fg); position: relative; z-index: 1; }
.steps--vertical .step::after { left: calc(1.375rem - .5px); top: 2.75rem; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, var(--accent), var(--line) 40%); }
.steps--vertical .step:last-child::after { display: none; }
.steps--vertical .step > * { grid-column: 2; }
.steps--vertical .step__title { padding-top: .5rem; }
/* Index list — big light numerals (01/02/03) with title and text */
.index-list { list-style: none; padding: 0; border-top: 1px solid var(--line-2); }
.index-list__item { display: grid; grid-template-columns: clamp(4.25rem, 3rem + 5vw, 8.5rem) minmax(0, 1fr); gap: var(--space-m); padding-block: var(--space-l); border-bottom: 1px solid var(--line); }
.index-list__num { justify-self: start; align-self: start; width: fit-content; font-size: clamp(2.75rem, 1.8rem + 3.6vw, 5.5rem); font-weight: 250; font-stretch: 118%; line-height: .85; letter-spacing: -.05em; background: var(--text-spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
.index-list__title { font-size: var(--step-2); letter-spacing: -.022em; line-height: 1.14; margin-bottom: .5rem; }
.index-list__text { color: var(--fg-2); max-width: 58ch; }
/* Spec list — keyed rows (label + short key) */
.spec-list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.spec-list > li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); color: var(--fg); }
.spec-list__key { flex: none; font-size: var(--step--2); color: var(--fg-3); font-stretch: 88%; letter-spacing: .03em; white-space: nowrap; }
@media (min-width: 720px) { .spec-list--cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; border-top: 0; } .spec-list--cols > li:nth-child(-n+2) { border-top: 1px solid var(--line); } }
.spec-card { display: grid; align-content: start; gap: 1rem; padding: clamp(1.25rem, 1rem + 1.2vw, 2.25rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); }
.spec-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.spec-card__title { font-size: var(--step-2); letter-spacing: -.022em; }
.spec-card__key { font-size: var(--step--2); color: var(--fg-3); }
/* .slab on a card: the card's own surface (same specificity, declared later) must not win over the navy panel */
.slab:is(.card, .spec-card, .project-card, .case-card) { background: var(--navy-panel); background-color: var(--navy); border: 0; border-radius: 0; }
/* Hairline feature list */
.hairline-list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.hairline-list > li { padding: .85rem 0; border-bottom: 1px solid var(--line); color: var(--fg); display: flex; gap: .9rem; align-items: baseline; }
.hairline-list--cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); column-gap: 2rem; border-top: 0; }
.hairline-list--cols > li:nth-child(-n+2) { border-top: 1px solid var(--line); }
@media (max-width: 719px) { .hairline-list--cols > li:nth-child(2) { border-top: 0; } }
.hairline-list__mark { width: .8rem; height: .8rem; flex: none; color: var(--accent); transform: translateY(.08em); }
/* Feature strip: a band of short features right under a hero (glyph + title + one line),
hairline separators; 4 columns → 2 (strip < 1080px) → 1 (< 560px). Container queries: the
columns follow the strip's own width (full-bleed on pages = the viewport; narrower elsewhere).
__pre = a muted first line inside the title. --stacked: glyph (+ __num) on top, a longer text below. */
.feature-strip { --strip-pad: clamp(1rem, 2vw, 2rem); container: strip / inline-size; position: relative; padding-block: clamp(2.25rem, 1.8rem + 2vw, 3.5rem); border-bottom: 1px solid var(--line); background: var(--bg); }
.feature-strip__head { margin-bottom: var(--space-l); } /* optional visible heading (e.g. an .eyebrow h2) */
.feature-strip__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feature-strip__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem 1rem; align-items: start; align-content: start; padding: .25rem var(--strip-pad); }
.feature-strip__item + .feature-strip__item { border-left: 1px solid var(--line); }
.feature-strip__item:first-child { padding-left: 0; }
.feature-strip__glyph { grid-row: span 2; width: 2.75rem; height: 2.75rem; color: var(--fg-2); }
.feature-strip__title { font-size: var(--step-1); letter-spacing: -.02em; line-height: 1.2; }
.feature-strip__pre { display: block; margin-bottom: .2rem; font-size: var(--step--1); font-weight: 480; letter-spacing: 0; color: var(--fg-3); }
.feature-strip__text { color: var(--fg-3); font-size: var(--step--1); line-height: 1.45; }
.feature-strip--stacked .feature-strip__item { grid-template-columns: minmax(0, 1fr); gap: .85rem; padding-block: 0; }
.feature-strip--stacked .feature-strip__item:last-child { padding-right: 0; }
.feature-strip__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.feature-strip--stacked .feature-strip__glyph { grid-row: auto; }
.feature-strip__num { font-size: var(--step--2); color: var(--fg-3); }
.feature-strip--stacked .feature-strip__title { font-size: var(--step-2); line-height: 1.12; letter-spacing: -.024em; }
.feature-strip--stacked .feature-strip__text { color: var(--fg-2); font-size: inherit; line-height: inherit; max-width: 36ch; }
@container strip (max-width: 1079px) {
.feature-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.75rem; }
.feature-strip__item:nth-child(odd) { border-left: 0; padding-left: 0; }
.feature-strip--stacked .feature-strip__list { row-gap: 2.25rem; }
.feature-strip--stacked .feature-strip__item:nth-child(even) { padding-right: 0; }
}
@container strip (max-width: 559px) {
.feature-strip__list, .feature-strip--stacked .feature-strip__list { grid-template-columns: 1fr; row-gap: 0; }
.feature-strip__item, .feature-strip__item + .feature-strip__item { border-left: 0; padding: 1.1rem 0; }
.feature-strip__item + .feature-strip__item { border-top: 1px solid var(--line); }
.feature-strip--stacked .feature-strip__item, .feature-strip--stacked .feature-strip__item + .feature-strip__item { padding: 1.5rem 0; }
.feature-strip--stacked .feature-strip__item:first-child { padding-top: 0; }
}
/* 13. Logos, marquee, chips, badges, filters ----------------------------- */
.logo { width: auto; max-width: var(--logo-w, 100%); max-height: var(--logo-h, 2.75rem); object-fit: contain; filter: var(--logo-filter); opacity: var(--logo-opacity); transition: opacity var(--dur-2); }
li:hover > .logo, .logo:hover { opacity: 1; }
.logo--tall { --logo-h: 3.5rem; }
.logo--solid { opacity: calc(var(--logo-opacity) * .8); } /* filled marks (e.g. SNCF) read heavier */
.logo-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); list-style: none; padding: 0; }
.logo-wall > li { display: grid; place-items: center; min-height: 7.5rem; padding: 1.5rem 1.25rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.logo-wall .logo { --logo-w: 9.5rem; }
/* Partner row: institutional logos keep their original colours on a white chip */
.partner-row { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; padding: 0; }
.partner-row > li { display: grid; place-items: center; min-width: 9rem; padding: 1rem 1.4rem; background: #fff; border-radius: var(--radius-s); box-shadow: 0 0 0 1px var(--line); }
.partner-row img { height: var(--partner-h, 4.25rem); width: auto; max-width: 11rem; object-fit: contain; }
.partner-row__label { margin-top: .6rem; font-size: var(--step--2); color: var(--fg-3); }
/* Marquee (logos or ticker). JS adds the viewport, the loop clone and a visible pause button. */
.marquee { position: relative; --marquee-gap: clamp(2.5rem, 1.5rem + 4vw, 5rem); --marquee-duration: 40s; display: flex; align-items: center; gap: .75rem; }
.marquee__viewport { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.marquee--fade .marquee__viewport, .marquee--fade:not(.is-ready) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__inner { display: flex; width: max-content; }
.marquee__track { display: flex; align-items: center; gap: var(--marquee-gap); padding-right: var(--marquee-gap); list-style: none; padding-left: 0; margin: 0; flex-wrap: wrap; justify-content: center; row-gap: 1.5rem; }
.marquee:not(.is-ready) .marquee__track { padding-right: 0; }
.js .marquee.is-ready .marquee__track { flex-wrap: nowrap; }
.js .marquee.is-ready .marquee__inner { animation: marquee var(--marquee-duration) linear infinite; }
.marquee.is-paused .marquee__inner, .marquee__viewport:hover .marquee__inner, .marquee:focus-within .marquee__inner { animation-play-state: paused !important; }
.marquee--reverse .marquee__inner { animation-direction: reverse; }
.marquee__toggle {
flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
color: var(--fg); background: var(--surface-2); border: 1px solid var(--line-2);
transition: border-color var(--dur-1), background-color var(--dur-1);
}
.marquee__toggle:hover { border-color: var(--line-3); background: var(--surface-3); }
.marquee--bleed { padding-right: var(--gutter); }
.marquee__toggle svg { width: .85rem; height: .85rem; }
.marquee--logos .marquee__track > li { display: grid; place-items: center; width: clamp(8.5rem, 7rem + 3vw, 11rem); height: 5rem; flex: none; }
.marquee--logos { --marquee-gap: clamp(1rem, .5rem + 1.5vw, 2rem); }
.marquee--logos .logo { --logo-w: 100%; }
@keyframes marquee { to { transform: translateX(-50%); } }
.ticker-item { display: inline-flex; align-items: center; gap: var(--marquee-gap); white-space: nowrap; font-size: clamp(1.375rem, 1rem + 1.6vw, 2.5rem); letter-spacing: -.03em; color: var(--fg); font-weight: 460; }
.ticker-item::after { content: ""; width: .5em; height: .56em; background: var(--spectrum); clip-path: var(--hex); opacity: .85; }
/* Chips & pills */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; }
.chip {
--cut: 6px; position: relative; isolation: isolate;
display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem; min-height: 2.5rem;
font-size: var(--step--1); font-weight: 520; line-height: 1.2; color: var(--fg-2);
background: var(--line-2); clip-path: var(--bevel); text-decoration: none;
}
.chip::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--surface-2); clip-path: var(--bevel); transition: background-color var(--dur-2); }
button.chip:hover, a.chip:hover { color: var(--fg); }
button.chip:hover::before, a.chip:hover::before { background: var(--surface-3); }
.chip[aria-pressed="true"], .chip.is-active { color: var(--on-fg); background: var(--fg); }
.chip[aria-pressed="true"]::before, .chip.is-active::before { background: var(--fg); }
button.chip[aria-pressed="true"]:hover, a.chip.is-active:hover { color: var(--on-fg); }
button.chip[aria-pressed="true"]:hover::before, a.chip.is-active:hover::before { background: var(--fg); }
.chip:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; border-radius: 0; }
/* on a pressed (filled) chip the focus colour would be 1.5:1: draw the ring in the text colour */
.chip:is([aria-pressed="true"], .is-active):focus-visible { outline-color: var(--on-fg); }
.chip__count { color: var(--fg-3); }
.chip[aria-pressed="true"] .chip__count { color: inherit; opacity: .75; }
.chip--dot::after { content: ""; order: -1; width: 6px; height: 6px; border-radius: 50%; background: var(--spectrum); box-shadow: 0 0 8px var(--glow); }
.pill { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .8rem; border-radius: var(--radius-pill); border: 1px solid var(--line-2); font-size: var(--step--1); color: var(--fg-2); line-height: 1.3; }
.pill svg { width: .9rem; height: .9rem; }
.badge {
display: inline-flex; align-items: center; gap: .45rem; padding: .28rem .6rem; border-radius: var(--radius-xs);
font-size: var(--step--2); font-weight: 560; line-height: 1.25; color: var(--fg);
background: color-mix(in srgb, var(--fg) 6%, transparent); border: 1px solid var(--line-2); white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--pilot { color: var(--warn); }
.badge--live { color: var(--ok); }
.badge--concept { color: var(--info); }
.badge--neutral { color: var(--fg-2); }
.badge--lang { color: var(--fg); letter-spacing: .04em; font-weight: 640; }
.badge--lang::before, .badge--plain::before { display: none; }
/* Filter chips with live count */
.filter__bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filter__head { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; margin-bottom: var(--space-l); }
.filter__count { font-size: var(--step--1); color: var(--fg-2); }
.filter__empty { padding: 2rem 0; color: var(--fg-2); }
/* 14. Disclosure: accordion, tabs, dialog, toast, copy ------------------- */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__summary {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
min-height: 3.5rem; padding: 1rem 0; cursor: pointer; list-style: none;
color: var(--fg); font-size: var(--step-1); font-weight: 540; letter-spacing: -.01em; line-height: 1.3;
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary::after {
content: ""; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--line-2);
background: linear-gradient(var(--fg), var(--fg)) center / 10px 1.5px no-repeat, linear-gradient(var(--fg), var(--fg)) center / 1.5px 10px no-repeat;
transition: transform var(--dur-2) var(--ease-out), background-size var(--dur-2);
}
.accordion__item[open] > .accordion__summary::after { transform: rotate(180deg); background-size: 10px 1.5px, 1.5px 0; }
.accordion__summary:hover { color: var(--fg-hover); }
.accordion__summary:focus-visible { outline-offset: 4px; }
.accordion__panel { padding: 0 0 1.4rem; color: var(--fg-2); max-width: 70ch; }
.accordion__panel > * + * { margin-top: .8em; }
.tabs { display: grid; gap: var(--space-l); }
.tabs__list { display: flex; gap: .4rem; flex-wrap: wrap; }
.no-js .tabs__list { display: none; }
.tabs__tab {
--cut: 7px; flex: none; position: relative; isolation: isolate;
display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .6rem 1.05rem;
font-size: .9375rem; font-weight: 520; color: var(--fg-2); white-space: nowrap;
background: var(--line-2); clip-path: var(--bevel); transition: color var(--dur-2);
}
.tabs__tab::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--bg); clip-path: var(--bevel); transition: background-color var(--dur-2); }
.tabs__tab:hover { color: var(--fg); }
.tabs__tab:hover::before { background: var(--surface-2); }
.tabs__tab[aria-selected="true"] { color: var(--on-fg); background: var(--fg); }
.tabs__tab[aria-selected="true"]::before { background: var(--fg); }
.tabs__tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; border-radius: 0; }
/* roving tabindex: keyboard focus always lands on the selected (filled) tab — ring in the text colour */
.tabs__tab[aria-selected="true"]:focus-visible { outline-color: var(--on-fg); }
.tabs__num { color: var(--fg-2); font-size: .8125rem; }
.tabs__tab[aria-selected="true"] .tabs__num { color: inherit; opacity: .72; }
.tabs__panel:focus-visible { outline-offset: 8px; }
.js .tabs__panel:not(.is-active) { display: none; }
.no-js .tabs__panel + .tabs__panel { margin-top: var(--space-xl); }
/* Small screens: tabs stack as full-width rows, so every tab is visible */
@media (max-width: 639px) {
.js .tabs__list { flex-direction: column; flex-wrap: nowrap; gap: 0; border-top: 1px solid var(--line); }
.js .tabs__tab { --cut: 0px; width: 100%; justify-content: flex-start; white-space: normal; text-align: left; min-height: 3.25rem; background: transparent; border-bottom: 1px solid var(--line); clip-path: none; }
.js .tabs__tab::before { inset: 0; clip-path: none; background: transparent; }
.js .tabs__tab[aria-selected="true"] { background: transparent; color: var(--fg); }
.js .tabs__tab[aria-selected="true"]::before { background: color-mix(in srgb, var(--fg) 7%, transparent); box-shadow: inset 2px 0 0 var(--accent); }
.js .tabs__tab[aria-selected="true"] .tabs__num { color: var(--fg-2); opacity: 1; }
.js .tabs__tab[aria-selected="true"]:focus-visible { outline-color: var(--focus); } /* rows are not filled */
.js .tabs__tab::after { content: ""; margin-left: auto; width: .5rem; height: .5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); opacity: .6; }
}
/* Dialog (native