/* ── 05 · RESEARCH SECTION ──
   The section frame, its tab bar and the card grid. The Overview tab's zoom
   is a module of its own — see 21-reality-zoom.css.

   Part of the numbered set in css/ — the sheets are one stylesheet cut into
   pieces and index.html links them in this order. Order is the cascade: a
   rule here loses to the same-specificity rule in any later file. */

/* ── Research section ──
   Unlike the other card sections this one is full-bleed: the Overview tab is a
   sticky, black, edge-to-edge stage (see "Reality zoom" further down), so the
   inline gutter lives on the header and on the card tab rather than on the
   section. overflow-x + isolation are what let the stage bleed back out to the
   screen edge under the wide-screen sidebar. */
.research-full {
    /* The section's blue, and the darker ink it needs to be legible as text on
       cream — see the note over .research-tabs-nav. */
    --res-accent: var(--section-research, #5599ff);
    --res-ink: #2f5fa8;
    padding: 5rem 0 0;
    background: #f5f4ef;
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
    isolation: isolate;
}

/* No gap. The shell's only two children are the head and the panel host, so a
   grid gap here is a band of cream between the tab line and whatever the tab
   shows — and for Overview that means the zoom's black starting 25px below the
   line it should be hanging from. Information does the same thing: its panels
   begin exactly at its own tab line, and each panel pays for its own breathing
   room (see .research-tab-panel--cards, which keeps a small top pad). */
.research-shell {
    width: 100%;
    display: grid;
    gap: 0;
}

.research-head {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--content-inline-gutter);
    display: grid;
    gap: 1.2rem;
}

.research-full__title {
    display: block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: none;
    color: rgba(17, 17, 17, 0.18);
    margin: 0;
}

/* ── The section's own colour ──
   Blue, which is what Research has on the hero's arc, on the brain and in the
   nav (--section-research in css/01-base.css). The tab bar was a slate green
   that appeared nowhere else, so the one part of the section a reader meets
   first was the one part that did not match it.

   Two tokens, not one, and for the same reason Publications and News have two:
   #5599ff is a light blue meant to be seen against black, and as tab-label text
   on cream it is barely there. --res-ink is that hue taken down until it can be
   read; --res-accent stays the true section colour for rules and edges. Every
   value below is mixed off one of the two. The tokens are declared on
   .research-full at the top of this file. */
.research-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--res-accent) 26%, transparent);
}

.research-tab-btn {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.55em 1.35em;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    color: color-mix(in srgb, var(--res-ink) 55%, transparent);
    cursor: pointer;
    transition:
        color 0.15s ease,
        border-color 0.15s ease;
}

.research-tab-btn:hover {
    color: color-mix(in srgb, var(--res-ink) 85%, transparent);
}

.research-tab-btn--active {
    color: var(--res-ink);
    border-bottom-color: var(--res-accent);
}

.research-panels {
    width: 100%;
}

/* 2rem of top padding, which is the 1.6rem the shell used to add plus the
   0.4rem this already had. The space was always this tab's — text under a rule
   needs it — and it only lived on the shell, where it also pushed the zoom's
   black away from the line it should hang from. */
.research-tab-panel--cards {
    display: grid;
    gap: 1.5rem;
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 2rem var(--content-inline-gutter) 5rem;
}

/* The zoom takes the section's whole width; its own stage handles the rest. */
.research-tab-panel--zoom {
    display: block;
    width: 100%;
}

/* swapTabPanels puts a panel away with the `hidden` attribute, and the two
   display rules above outrank the UA rule that acts on it — without this both
   tabs paint at once. Same trap as .join-stage and .pub-card. */
.research-tab-panel[hidden] {
    display: none;
}

/* ── The margin arrows, and the one tab that must not have them ──
   Every other tab group turns its side margins into prev/next zones. Here the
   zones would span the whole section, and with Overview showing that is a
   ~800vh sticky stage — invisible click targets down the full height of the
   dive, where a stray click swaps the tab out from under the reader. research.js
   writes `data-active-tab`, so the zones exist only over Creations: the way
   back is the direction the section was missing, and the way *out* of Overview
   already has the standing FAB and the rail's own labelled exit. */
.research-full[data-active-tab="overview"] > .tab-margin-nav {
    display: none;
}

/* ── Creations tab (research/creations.js) ──
   The `rc-` block. It lives here rather than in a file of its own because it
   is a component of this section and needs to beat nothing that comes later —
   the zoom's separate sheet exists only because it has to outrank 20-wide.css.

   Two plates, one per row, both on the section's own cream. They were dark
   with paintings behind them, on the argument that the tab next door is a black
   stage and a page of white cards on the other side of the tab bar reads as a
   different site. That was right about the tab bar and wrong about the tab:
   what actually reads as two different pages is a black band sitting on a cream
   one, which is what the tab became once Tools went light on its own account.
   The `--art` tone is still here and is one line of content away (see "The two
   tones" below); nothing uses it.

   Each row carries its own `--rc-accent`, written inline from the content
   module, and every tint below is `color-mix`ed off it — so a row's colour is
   one hex in creations-content.js. The two hues are site tokens
   (--section-research blue, --section-news teal); the green of the surrounding
   tab bar deliberately does not appear inside either row, which is what keeps
   them legible against it.

   No header above the first plate: the tab bar has already named the tab, and
   each plate names itself. */
.rc {
    display: grid;
    gap: 1.6rem;
    align-content: start;
}

/* `isolation: isolate` is what makes the negative layers below legal: the art
   and its scrim sit above the plate's own background and beneath every child,
   without a z-index anywhere on the content. Same arrangement as the People
   section's video backdrop, and for the same reason — a blanket child selector
   to lift the content instead would carry its argument's specificity into a
   fight with something else. */
.rc-plate {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 1.4rem;
    background: #0a0c11;
    box-shadow: 0 22px 54px rgba(17, 17, 17, 0.16);
}

/* An <img>, not a background-image: the path comes from the content module and
   is written from the site root, where a `url()` in css/ would resolve against
   this folder — and a background cannot be lazy. */
.rc-plate__art {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.85;
}

/* ── The two tones ──
   A row with a painting is a dark plate; a row without one is light, and
   `group.image` in creations-content.js is the whole switch. **Both rows are
   light now** — Tools because its cards are eleven pictures already and a
   painting behind them is a twelfth competing with the set it is supposed to be
   holding, Inventions because a dark band above a cream one made the tab read
   as two pages rather than two rows of one. The dark path is kept because it is
   one line of content away, not because anything uses it.

   The light plate is not a plate at all: no background, no shadow, nothing but
   the section's own cream. A tinted box was tried first and it read as a tray
   under the row — one more edge to explain, when the cards already have edges
   of their own and their shadows are what lift them off the page. It keeps the
   padding, so the two rows' heads line up.

   Everything below the head had to be re-dressed for it, because the base rules
   are the dark ones: the light plate had only ever held cards, which bring
   their own white face, and the moment it held the list every line of it was
   white on cream. Anything added to a plate needs both tones or it is
   invisible in one of them. */
.rc-plate--light {
    background: none;
    box-shadow: none;
}

.rc-plate--light .rc-plate__label {
    color: #23272e;
    text-shadow: none;
}

.rc-plate--light .rc-plate__lede {
    color: rgba(20, 24, 30, 0.6);
    text-shadow: none;
}

/* The list, on cream. Each value is its dark counterpart turned over rather
   than re-invented, so the row keeps its weights: the hairline and the hover
   are the same fractions of the ink instead of of white, and every text-shadow
   goes — it exists to hold a line of text against a bright passage of a
   painting, and there is no painting. */
.rc-plate--light .rc-item {
    border-top-color: rgba(20, 24, 30, 0.14);
}

.rc-plate--light a.rc-item__row:hover {
    background: rgba(20, 24, 30, 0.05);
}

.rc-plate--light a.rc-item__row:focus-visible {
    outline-color: rgba(20, 24, 30, 0.55);
}

/* Gold had to come down, not just lose its shadow: #e8b73f is a warm mark
   against a night painting and a smudge on cream. Darkened, it is still the one
   thing on the row that is not the plate's blue — which is the whole job of it,
   marking an idea as the lab's own. */
.rc-plate--light .rc-item__star {
    color: #a8761a;
    text-shadow: none;
}

.rc-plate--light .rc-item__body {
    color: rgba(20, 24, 30, 0.72);
    text-shadow: none;
}

.rc-plate--light .rc-item__name {
    color: #23272e;
}

.rc-plate--light .rc-item__dash {
    color: rgba(20, 24, 30, 0.3);
}

/* Mixed toward the ink rather than toward white, which is the same move
   --res-ink makes for this section's blue: #5599ff is a light blue meant to be
   seen against black and is barely there as small text on cream. */
.rc-plate--light .rc-item__link {
    color: color-mix(in srgb, var(--rc-accent, #559664) 62%, #10151d);
    border-bottom-color: color-mix(in srgb, var(--rc-accent, #559664) 55%, transparent);
    text-shadow: none;
}

.rc-plate--light .rc-item__row:hover .rc-item__link,
.rc-plate--light .rc-item__row:focus-visible .rc-item__link {
    border-bottom-color: color-mix(in srgb, var(--rc-accent, #559664) 85%, #10151d);
}

/* The painting is held back rather than hidden: enough scrim that white text
   sits on it comfortably, and no more — the first pass was dark enough that
   neither picture could be made out at all. The diagonal keeps one band
   lighter still; a flat wash leaves a picture nobody can tell is a picture. */
.rc-plate--art::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(102deg, rgba(8, 9, 13, 0.74) 0%, rgba(8, 9, 13, 0.42) 46%, rgba(8, 9, 13, 0.68) 100%),
        radial-gradient(130% 100% at 50% 0%, rgba(8, 9, 13, 0.05), rgba(8, 9, 13, 0.45));
}

/* No accent bar along the top edge and no rule under the head. Both were drawn
   in the row's own colour, and against a painting a coloured line reads as a
   fault in the picture rather than as a division of the plate — the plate's own
   edge is already the division. The accent survives where it is a property of
   something rather than a stripe across it: a tool's kind on the face, the
   reference at the end of an invention. */
.rc-plate__body {
    position: relative;
    display: grid;
    gap: 1.5rem;
    align-content: start;
    padding: 2.2rem clamp(1.25rem, 3vw, 2.6rem) 2.3rem;
}

.rc-plate__head {
    display: grid;
    gap: 0.4rem;
}

/* Plain bold white, and no mark in front of it: the row's colour is already on
   the plate's top edge and under the head, so a coloured bullet as well made
   three statements of the same thing — and a dot in front of one word reads as
   a list item that lost its list. */
.rc-plate__label {
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #fff;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}

.rc-plate__lede {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.62);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* ── Inventions: one line each ──
   Star, the idea, the reference — three columns on one baseline, ruled between
   entries. The name and the description are one paragraph rather than two
   columns: the names run from two words to four and a name column wide enough
   for the longest one leaves a trench in front of every other entry. The
   reference does get a column, so the way out of a line is always in the same
   place.

   The star is a text character rather than a drawing. This used to be nine
   hand-authored line-art glyphs, one per item, and at bullet size a drawing is
   a smudge that has to be squinted at — with nothing to be worked out from any
   of them anyway. */
.rc-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rc-item {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.rc-item:first-child {
    border-top: 0;
}

/* The row itself is the anchor (see creations.js) — hence the padding and the
   hover living here rather than on the item, so the tint fills the whole row
   and not just the text in it. The negative inline margin is what lets that
   tint reach past the text on both sides without indenting the list. */
.rc-item__row {
    display: grid;
    grid-template-columns: 1.1rem minmax(0, 1fr) auto;
    gap: 0 1.1rem;
    align-items: baseline;
    padding: 0.8rem 0.7rem;
    margin: 0 -0.7rem;
    border-radius: 0.6rem;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.18s ease;
}

a.rc-item__row:hover {
    background: rgba(255, 255, 255, 0.07);
}

a.rc-item__row:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: -2px;
}

/* Gold, not the row's blue: the star is the lab's own mark on an idea rather
   than another statement of the plate's colour, and against a night painting a
   warm mark is the one that reads. */
.rc-item__star {
    font-size: 0.82rem;
    line-height: 1;
    text-align: center;
    color: #e8b73f;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

/* One sentence: the name, a dash, the idea. Nothing here is a block, so a long
   idea wraps under itself and the name stays where the star put it. */
/* The shadow, on everything over the plate: the painting is no longer scrimmed
   down to a flat dark, so a line of text can cross a bright passage of it. */
.rc-item__body {
    margin: 0;
    min-width: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.99rem;
    line-height: 1.62;
    color: rgba(255, 255, 255, 0.72);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

.rc-item__name {
    color: #fff;
}

.rc-item__dash {
    color: rgba(255, 255, 255, 0.3);
}

/* Its own column, right at the end of the line, so the references stack into a
   rail down the right of the plate. Not a link itself — the row is (see
   creations.js) — but it is the part that says where the row goes, so it keeps
   a link's dress. */
.rc-item__link {
    white-space: nowrap;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-decoration: none;
    color: color-mix(in srgb, var(--rc-accent, #559664) 50%, #fff);
    border-bottom: 1px solid color-mix(in srgb, var(--rc-accent, #559664) 52%, transparent);
    padding-bottom: 0.15em;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
    transition: border-color 0.18s ease;
}

.rc-item__link::after {
    content: " ↗";
    opacity: 0.7;
}

.rc-item__row:hover .rc-item__link,
.rc-item__row:focus-visible .rc-item__link {
    border-bottom-color: color-mix(in srgb, var(--rc-accent, #559664) 90%, #fff);
}

/* The third column is the first thing to go: a reference and an idea sharing a
   line stop fitting long before the plate itself does. It drops under its own
   entry rather than wrapping inside it. */
@media (max-width: 720px) {
    .rc-item__row {
        grid-template-columns: 1.1rem minmax(0, 1fr);
        gap: 0.45rem 1.1rem;
    }

    .rc-item__link {
        grid-column: 2;
        justify-self: start;
    }
}

/* ── Tools: the masonry of cards ──
   This row was a honeycomb of small hexagons (shared/honeycomb.js, the same
   placement the Services tab still uses). A hexagon is one size for every card
   and clips whatever is on it to the same six sides, which turned a wordmark, a
   square mark and a screenshot into the same shape at the same weight — and at
   ~210px across, a screenshot into a smudge. A card takes its height from its
   own picture instead, so the row reads as a shelf of different things.

   Nothing places these: `columns` does the masonry, which is why creations.js
   lost the measure-and-re-place machinery the comb needed. That is only safe
   because **a card's height never changes** — see `.rc-card__detail` below.
   Column balancing is a function of the cards' heights, so a card that grew on
   hover could push a later one into another column, three columns away from the
   pointer.

   The cap and the column width are one pair: 46rem over three columns is 233px
   a card, which is about the size the logos were drawn for. Narrowing the plate
   drops that to two columns and then one, with no breakpoint to keep in step. */
.rc-cards {
    /* The accent, taken down until it can be read against the card's white —
       #33cccc itself is a light teal meant to be seen against black. It is not
       the name's colour: the name is grey, and this is left for the focus ring
       and for the kind label over the hover scrim. Same two-token arrangement,
       and the same reason for it, as --res-accent / --res-ink. */
    --rc-card-ink: color-mix(in srgb, var(--rc-accent, #33cccc) 52%, #10222b);
    columns: 13.5rem;
    column-gap: 1.15rem;
    width: 100%;
    max-width: 46rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

/* A fourth column past the site's own wide breakpoint — the same 1800px the nav
   becomes a sidebar at, because inventing a second wide threshold means keeping
   two in step. It is a taste call rather than a fit: the plate is already at the
   1200px content cap by ~1264px and has the room either way, so what changes is
   that the row uses 976px of it instead of 736px. The cards stay the size they
   were (976 over four is 230px against 736 over three at 233px), which is why
   the column width below does not move — only the cap does. */
@media (min-width: 1800px) {
    .rc-cards {
        max-width: 61rem;
    }
}

/* One column at the full width of the plate is eleven full-page pictures, so
   the cap comes down with it — below this the columns fall to one on their own
   (13.5rem + the gap no longer fits twice) and the cards would otherwise be as
   wide as the phone. */
@media (max-width: 460px) {
    .rc-cards {
        max-width: 20rem;
    }
}

.rc-cards__item {
    /* A card is one picture and its name; a column break through the middle of
       one would leave the name under a different picture. */
    break-inside: avoid;
    margin: 0 0 1.15rem;
}

/* White, on the plate's cream: the picture is the point of the card and every
   logo here was drawn for white paper. It is also what the Publications cards
   and the News rows sit on, so the two tabs of this section end on the same
   field even though one of them is a black stage.

   The shadow is a light-plate shadow — soft and short. The one this carried
   over a dark plate was `rgba(0, 0, 0, 0.42)`, which on cream is a bruise
   under every card. */
.rc-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 0.85rem;
    background: #fff;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 14px rgba(17, 20, 26, 0.11);
    transition:
        transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1),
        box-shadow 0.22s ease;
}

a.rc-card:hover,
a.rc-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(17, 20, 26, 0.19);
}

a.rc-card:focus-visible {
    outline: 2px solid var(--rc-card-ink);
    outline-offset: 2px;
}

/* The minimum is what keeps a wordmark from being a stripe: at 233px across,
   Pyllusion's 560×210 is 87px tall, and a card that short has nowhere to put
   the reveal (which rises into this box — see below). Taller pictures are left
   at their own ratio, which is the whole point of the row; the maximum is only
   there so a portrait screenshot cannot make one column twice the height of
   the other two. */
.rc-card__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8.5rem;
    max-height: 19rem;
    overflow: hidden;
    background: #fff;
}

/* ── The hover scrim ──
   One dark layer over the whole picture, and the reveal's text sits on it —
   which is why the reveal itself carries no background. Two layers would double
   up where they overlap and draw a hard edge across the picture at exactly the
   height the text starts.

   It replaced fading the logo out against the card's white, which washed a mark
   out rather than putting anything behind the words. At 0.78 a white logo
   composites to ~66 of 255, so white text on it holds ~9:1 whatever the picture
   underneath is, and the picture still shows through as a shape. */
.rc-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(16, 19, 24, 0.78);
    opacity: 0;
    transition: opacity 0.24s ease;
}

a.rc-card:hover .rc-card__media::after,
a.rc-card:focus-visible .rc-card__media::after {
    opacity: 1;
}

.rc-card__logo {
    flex: none;
    display: block;
    width: 100%;
    height: auto;
    max-height: 19rem;
    /* Only binds against the maximum above, where the picture is cropped from
       the foot rather than letterboxed — a screenshot's subject is its top. */
    object-fit: cover;
    object-position: center top;
}

/* The name bar. `position: relative` because the reveal is positioned against
   it, and the white is its own rather than inherited from the card: the reveal
   is a continuation of this box and has to paint the same colour over the
   picture. */
.rc-card__body {
    position: relative;
    display: block;
    padding: 0.7rem 0.85rem 0.8rem;
    background: #fff;
}

.rc-card__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    /* A package name is one unbroken token — "SequentialSamplingModels" has
       nowhere the browser is allowed to break it, so without this it runs out
       of a 233px card. Breaking it badly is the lesser of the two. */
    overflow-wrap: anywhere;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.97rem;
    font-weight: 700;
    line-height: 1.28;
    /* Grey, not the accent. Eleven cards each carrying a picture of its own is
       already a lot of colour, and a teal name on top of it made the name a
       twelfth thing to look at rather than the label of the card it sits on. */
    color: #33383f;
}

/* ── The reveal ──
   **It grows upward, over the picture, and that is the load-bearing part.**
   Anchored at `bottom: 100%` of the name bar with the card's own
   `overflow: hidden` above it, the box gets taller while the card does not —
   so nothing else in the masonry moves when one card is hovered. A reveal that
   pushed the name down instead would change the card's height, which is the
   one thing `columns` balances on.

   `grid-template-rows: 0fr → 1fr` rather than a height, for the reason the
   Alumni band writes pixels and this cannot: the height is whatever the
   description wraps to, and this panel is `display: none` until its tab is
   opened, where a measurement comes out as zero.

   **It has no background of its own.** What the text sits on is the scrim over
   the picture (`.rc-card__media::after`), which covers the whole of it; a
   second dark layer here would double up over the first and draw a hard edge
   across the picture at exactly the height the text starts.

   The padding is inline only, and the top space is a margin on the first child
   instead: vertical padding on the collapsed box would still paint whatever
   background it had above the name. A margin cannot, because the inner box
   clips its own content and establishes a block formatting context, so nothing
   escapes. */
.rc-card__detail {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
    transition:
        grid-template-rows 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 0.22s ease;
}

/* The inner box is not decoration: a `0fr` row only collapses if its item can
   be smaller than its content, which needs `min-height: 0` and its own clip. */
.rc-card__detail-inner {
    display: grid;
    gap: 0.26rem;
    min-height: 0;
    overflow: hidden;
    padding: 0 0.85rem;
}

.rc-card__detail-inner > *:first-child {
    margin-top: 0.7rem;
}

a.rc-card:hover .rc-card__detail,
a.rc-card:focus-visible .rc-card__detail {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* The one place the row's accent lands on a card, and it can be the raw hue
   lifted rather than the darkened ink because it is only ever seen over the
   scrim. The name below stays grey, so the two do not read as one wrapped
   line. */
.rc-card__type {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    line-height: 1.3;
    color: color-mix(in srgb, var(--rc-accent, #33cccc) 52%, #fff);
}

/* Four lines is what the longest description in the row needs at three cards
   across. It is clamped rather than left to run because the reveal rises into
   the picture's box, and past its height the card's own clip would cut the
   first line off at the top edge. */
.rc-card__line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.83rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
}

/* ── No pointer, no reveal ──
   A phone has no hover to give and the first tap is the link, so where there is
   no pointer the description is simply part of the card: the reveal comes out
   of the corner it was hanging in and lays out under the name, which is what
   the DOM order was written for. The card is taller — there is no masonry
   balance to protect here, because nothing changes after layout.

   **Both text colours have to come back with it.** They are written for the
   scrim over the picture, and the scrim is a hover state: laid out in the name
   bar they would be white on white. */
@media (hover: none) {
    .rc-card__detail {
        position: static;
        grid-template-rows: 1fr;
        opacity: 1;
    }

    .rc-card__detail-inner {
        padding: 0;
    }

    .rc-card__detail-inner > *:first-child {
        margin-top: 0.45rem;
    }

    .rc-card__type {
        color: var(--rc-card-ink);
    }

    .rc-card__line {
        color: rgba(20, 24, 30, 0.74);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rc-card,
    .rc-card__media::after,
    .rc-card__detail,
    .rc-item__link {
        transition: none;
    }

    a.rc-card:hover,
    a.rc-card:focus-visible {
        transform: none;
    }
}