/* ==========================================================================
   Robo Co-op — Awards & Recognitions (/recognitions/)
   --------------------------------------------------------------------------
   The Recognitions page is built on the home page's design system: it loads
   assets/css/home.css and assets/js/home.js unchanged (body.rc-hp) and uses
   their tokens and components — hero shell, eyebrows, headings, buttons,
   links, photo frame, closing band, reveal, draw and reduced motion. This
   file only adds the layouts no home page section has, scoped to
   body.rc-recog under an rg- prefix, so no other page is touched. Mobile
   first, like home.css.

   Categories are always named in words (.rg-chip); colour and shape only
   repeat what the word says.

   Contents
     01  Bands and shared pieces
     02  Hero and the record figure
     03  Featured achievements
     04  Timeline
     05  Beyond awards
     06  Press & media
     07  Beyond recognition
     08  Motion
   ========================================================================== */


/* ==========================================================================
   01  BANDS AND SHARED PIECES
   Light bands alternate paper tones, as on the home page; the "beyond
   awards" band is navy, like the hero and the close, so the long record
   is broken by one dark chapter.
   ========================================================================== */

.rc-recog .rg-featured { background: var(--hp-paper-2); }
.rc-recog .rg-record   { background: var(--hp-white); }
.rc-recog .rg-press    { background: var(--hp-paper); }
.rc-recog .rg-why      { background: var(--hp-paper-2); }

.rc-recog .rg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Every heading is one sentence in two weights; the light half starts its
   own line, so a wrap never strands one word. */
.rc-recog .hp-h2__soft,
.rc-recog .hp-h2__accent {
    display: block;
}

/* The category, in words. */
.rc-recog .rg-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(6, 182, 212, .1);
    font-size: .7rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--hp-accent-ink);
}

.rc-recog .rg-chip--award {
    background: rgba(248, 176, 62, .18);
    color: var(--hp-gold-ink);
}

.rc-recog .rg-chip--nominee {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--hp-line-2);
    color: var(--hp-soft);
}

.rc-recog .rg-chip--advisory {
    background: var(--hp-navy);
    color: #fff;
}

.rc-recog .rg-chip--individual {
    background: rgba(13, 15, 18, .06);
    color: var(--hp-ink);
}

.rc-recog .rg-chip--listing {
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(14, 116, 144, .45);
}

/* An issuer's mark, as the site holds it: never recoloured, never cropped,
   always on white so it reads on any band. */
.rc-recog .rg-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 132px;
    height: 60px;
    padding: 10px 16px;
    border: 1px solid var(--hp-line);
    border-radius: 14px;
    background: var(--hp-white);
}

.rc-recog .rg-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 28px;
    object-fit: contain;
}

.rc-recog .rg-logo--square img {
    max-height: 42px;
}

/* A source link: the "leaves this site" arrow, and the source's language
   when it is not English. */
.rc-recog .rg-src {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    min-height: 32px;
    font-size: .95rem;
}

.rc-recog .rg-src .hp-link__arrow {
    margin-left: 0;
}

.rc-recog .rg-out {
    flex-shrink: 0;
    transition: transform .25s var(--hp-ease);
}

.rc-recog .rg-src:hover .rg-out {
    transform: translate(2px, -2px);
}

.rc-recog .rg-lang {
    margin-left: 10px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    color: var(--hp-muted);
}


/* ==========================================================================
   02  HERO AND THE RECORD FIGURE
   The shell (navy, dot field, glows, grid, eyebrow, lede) is home.css §03,
   made compact: content height, not a screen height, so the record starts
   close to the fold.
   ========================================================================== */

.rc-recog .rg-hero {
    min-height: 0;
    padding: clamp(36px, 6vw, 72px) 0 clamp(36px, 5.5vw, 72px);
}

.rc-recog .rg-hero__title {
    font-size: clamp(2.2rem, 1.2rem + 4vw, 4.4rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.04em;
    color: #fff;
    text-wrap: balance;
}

.rc-recog .rg-hero__title-soft {
    display: block;
    margin-top: .1em;
    font-weight: 300;
    color: var(--hp-accent-pale);
}

/* The brand signature, set like the About page's. */
.rc-recog .rg-hero__sig {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 34em;
    margin-top: clamp(24px, 3vw, 36px);
    padding-top: clamp(18px, 2.2vw, 24px);
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem);
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: #fff;
}

.rc-recog .rg-hero__sig-mark {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    fill: #fff;
}

/* stacked under the copy on phones and tablets: kept small, so the hero
   stays short */
.rc-recog .rg-orbit {
    max-width: 420px;
}

.rc-recog .rg-orbit__ring {
    fill: none;
    stroke: rgba(255, 255, 255, .16);
    stroke-width: 1;
}

.rc-recog .rg-orbit__ring--now {
    stroke: rgba(103, 232, 249, .5);
}

/* Year labels sit on their rings; a navy outline cuts the ring behind
   them. */
.rc-recog .rg-orbit__years text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    fill: rgba(255, 255, 255, .66);
    paint-order: stroke;
    stroke: var(--hp-navy);
    stroke-width: 7px;
    stroke-linejoin: round;
}

.rc-recog .rg-orbit__core circle {
    fill: var(--hp-navy-deep);
    stroke: rgba(255, 255, 255, .18);
}

.rc-recog .rg-orbit__core use {
    fill: #fff;
}

.rc-recog .rg-g--award      { fill: var(--hp-gold); }
.rc-recog .rg-g--selected   { fill: var(--hp-accent-hi); }
.rc-recog .rg-g--advisory   { fill: #fff; }

.rc-recog .rg-g-halo {
    fill: none;
    stroke: rgba(248, 176, 62, .45);
    stroke-width: 1.2;
}

.rc-recog .rg-g--nominee {
    fill: var(--hp-navy);
    stroke: var(--hp-accent-pale);
    stroke-width: 1.8;
}

.rc-recog .rg-g--individual {
    fill: var(--hp-navy);
    stroke: var(--hp-gold);
    stroke-width: 2.2;
}

.rc-recog .rg-g--listing {
    fill: none;
    stroke: rgba(255, 255, 255, .85);
    stroke-width: 1.6;
}

.rc-recog .rg-orbit__legend {
    margin-top: 16px;
}

.rc-recog .rg-orbit__note {
    font-size: .86rem;
    line-height: 1.5;
    text-align: center;
    color: rgba(255, 255, 255, .7);
    text-wrap: balance;
}

.rc-recog .rg-orbit__keys {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .86);
}

.rc-recog .rg-orbit__keys li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.rc-recog .rg-orbit__key {
    flex-shrink: 0;
    overflow: visible;
}

@media (min-width: 960px) {
    .rc-recog .rg-orbit {
        max-width: 500px;
        margin-top: 0;
    }
}


/* ==========================================================================
   03  FEATURED ACHIEVEMENTS
   One navy lead and two white supporting blocks.
   ========================================================================== */

.rc-recog .rg-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: clamp(28px, 3.5vw, 48px);
}

.rc-recog .rg-lead {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: clamp(26px, 3.4vw, 48px);
    border-radius: var(--hp-r-lg);
    background: var(--hp-navy);
    color: #fff;
    box-shadow: var(--hp-sh-2);
}

/* the home page's gold-to-cyan cap, and its dot field, faintly */
.rc-recog .rg-lead::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--hp-gold), var(--hp-accent));
}

.rc-recog .rg-lead::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.3px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 100% 0%, #000 10%, transparent 70%);
    mask-image: radial-gradient(ellipse 70% 80% at 100% 0%, #000 10%, transparent 70%);
}

.rc-recog .rg-lead__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rc-recog .rg-lead__main,
.rc-recog .rg-lead__more {
    display: flex;
    flex-direction: column;
}

.rc-recog .rg-lead__year {
    font-size: clamp(3.2rem, 2.2rem + 4.4vw, 6.4rem);
    font-weight: 200;
    line-height: .85;
    letter-spacing: -.05em;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--hp-accent-pale);
}

.rc-recog .rg-lead .rg-chip--award {
    background: rgba(248, 176, 62, .16);
    color: var(--hp-gold);
}

.rc-recog .rg-lead__program {
    margin-top: clamp(26px, 3vw, 40px);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

.rc-recog .rg-lead__title {
    margin-top: 10px;
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.7rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.03em;
    color: #fff;
    text-wrap: balance;
}

.rc-recog .rg-lead__by {
    margin-top: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
}

.rc-recog .rg-lead__project {
    margin-top: clamp(22px, 2.6vw, 30px);
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
    font-weight: 300;
    line-height: 1.35;
    color: #fff;
}

.rc-recog .rg-lead__project span {
    display: block;
    margin-bottom: 4px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hp-gold);
}

.rc-recog .rg-lead__text {
    margin-top: 14px;
    max-width: 54ch;
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .76);
}

.rc-recog .rg-lead__cta {
    padding-top: 22px;
}

/* light links and focus ring on the navy blocks (the page's default ring
   is the dark one the light bands use) */
.rc-recog .rg-lead .hp-link,
.rc-recog .rg-global .hp-link {
    color: var(--hp-accent-pale);
    text-decoration-color: rgba(103, 232, 249, .5);
}

.rc-recog .rg-lead .hp-link:hover,
.rc-recog .rg-global .hp-link:hover {
    color: #fff;
    text-decoration-color: currentColor;
}

.rc-recog .rg-lead a:focus-visible,
.rc-recog .rg-global a:focus-visible {
    outline-color: var(--hp-accent-hi);
}

.rc-recog .rg-lead .rg-lang,
.rc-recog .rg-global .rg-lang {
    color: rgba(255, 255, 255, .64);
}

.rc-recog .rg-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.rc-recog .rg-card {
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 2.6vw, 32px);
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-r);
    background: var(--hp-white);
    box-shadow: var(--hp-sh-1);
}

.rc-recog .rg-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.rc-recog .rg-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.rc-recog .rg-card__year {
    font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem);
    font-weight: 200;
    line-height: .9;
    letter-spacing: -.045em;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--hp-ink);
}

.rc-recog .rg-card__title {
    margin-top: 20px;
    font-size: clamp(1.12rem, 1.02rem + .4vw, 1.28rem);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.015em;
    color: var(--hp-ink);
    text-wrap: balance;
}

.rc-recog .rg-card__by {
    margin-top: 6px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--hp-soft);
}

.rc-recog .rg-card__text {
    margin-top: 10px;
    font-size: .98rem;
    line-height: 1.6;
    color: var(--hp-body);
}

.rc-recog .rg-card__cta {
    margin-top: auto;
    padding-top: 16px;
}

/* narrow phones: the mark on top, then the year and category on one line */
@media (max-width: 419px) {
    .rc-recog .rg-card__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .rc-recog .rg-card__meta {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
}

@media (min-width: 640px) {
    .rc-recog .rg-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Wide screens: the lead runs the full width in two columns — the year
   and the award on the left, the project and its source on the right. */
@media (min-width: 960px) {
    .rc-recog .rg-feature,
    .rc-recog .rg-side {
        gap: 20px;
    }

    .rc-recog .rg-lead {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
        column-gap: clamp(40px, 5vw, 72px);
    }

    .rc-recog .rg-lead__program {
        margin-top: auto;
        padding-top: 40px;
    }

    .rc-recog .rg-lead__more {
        justify-content: flex-end;
        padding-left: clamp(32px, 4vw, 56px);
        border-left: 1px solid rgba(255, 255, 255, .14);
    }

    .rc-recog .rg-lead__project {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }
}


/* ==========================================================================
   04  TIMELINE
   Year on the left (sticky on wide screens), the year's entries on a rail
   on the right; one column on phones.
   ========================================================================== */

.rc-recog .rg-record__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: end;
}

.rc-recog .rg-jump ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rc-recog .rg-jump a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--hp-line-2);
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--hp-ink);
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease;
}

.rc-recog .rg-jump a:hover {
    border-color: var(--hp-ink);
    background: var(--hp-paper-2);
}

.rc-recog .rg-years {
    margin: clamp(32px, 4vw, 56px) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--hp-line-2);
}

.rc-recog .rg-year {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px 40px;
    padding: clamp(24px, 3vw, 40px) 0;
    border-bottom: 1px solid var(--hp-line);
}

.rc-recog .rg-year__label {
    font-size: clamp(2.6rem, 1.9rem + 2.6vw, 4.2rem);
    font-weight: 200;
    line-height: .9;
    letter-spacing: -.05em;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--hp-ink);
}

/* the rail, and one node per entry, in the entry's category colour */
.rc-recog .rg-entries {
    position: relative;
    margin: 0;
    padding: 0 0 0 28px;
    list-style: none;
}

.rc-recog .rg-entries::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: var(--hp-line-2);
    transform-origin: top;
}

.rc-recog .rg-entry {
    --c: var(--hp-accent);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 4px 0 22px;
}

.rc-recog .rg-entry + .rg-entry {
    padding-top: 22px;
    border-top: 1px solid var(--hp-line);
}

.rc-recog .rg-entry::before {
    content: "";
    position: absolute;
    left: -28px;
    top: 10px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 0 4px var(--hp-white);
}

.rc-recog .rg-entry + .rg-entry::before {
    top: 28px;
}

.rc-recog .rg-entry--award      { --c: var(--hp-gold); }
.rc-recog .rg-entry--advisory   { --c: var(--hp-navy); }
.rc-recog .rg-entry--individual { --c: var(--hp-gold-ink); }

.rc-recog .rg-entry--nominee::before,
.rc-recog .rg-entry--listing::before {
    background: var(--hp-white);
    border: 2px solid var(--hp-accent-ink);
}

/* on phones the issuer's mark leads the entry */
.rc-recog .rg-entry .rg-logo {
    order: -1;
    width: 116px;
    height: 52px;
}

.rc-recog .rg-entry__meta {
    margin-bottom: 10px;
}

/* h4: home.css resets margins only up to h3 */
.rc-recog .rg-entry__title {
    margin: 0;
    font-size: clamp(1.08rem, 1rem + .4vw, 1.28rem);
    font-weight: 800;
    line-height: 1.32;
    letter-spacing: -.015em;
    color: var(--hp-ink);
    text-wrap: balance;
}

.rc-recog .rg-entry__program {
    display: block;
    margin-top: 2px;
    font-weight: 500;
    color: var(--hp-soft);
}

.rc-recog .rg-entry__by {
    margin-top: 6px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--hp-soft);
}

.rc-recog .rg-entry__for {
    margin-top: 8px;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--hp-ink);
}

.rc-recog .rg-entry__for span {
    margin-right: 8px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hp-muted);
}

.rc-recog .rg-entry__text {
    margin-top: 8px;
    max-width: 64ch;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--hp-body);
}

.rc-recog .rg-entry__cta {
    margin-top: 8px;
}

@media (min-width: 700px) {
    .rc-recog .rg-entry {
        grid-template-columns: minmax(0, 1fr) 132px;
        align-items: start;
        gap: 28px;
    }

    .rc-recog .rg-entry .rg-logo {
        order: 0;
        width: 132px;
        height: 60px;
    }
}

@media (min-width: 900px) {
    .rc-recog .rg-record__head {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 48px;
    }

    .rc-recog .rg-year {
        grid-template-columns: 180px minmax(0, 1fr);
    }

    /* the year stays in view while its entries scroll past */
    .rc-recog .rg-year__label {
        position: sticky;
        top: calc(var(--hp-header, 76px) + 28px);
        align-self: start;
    }
}


/* ==========================================================================
   05  BEYOND AWARDS
   The home page's closing-band treatment (navy, dot field, glow), and three
   editorial columns of fact — no boxes.
   ========================================================================== */

.rc-recog .rg-global {
    isolation: isolate;
    overflow: hidden;
    background: var(--hp-navy);
    color: #fff;
}

.rc-recog .rg-global::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.3px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 85% 0%, #000 10%, transparent 70%);
    mask-image: radial-gradient(ellipse 60% 70% at 85% 0%, #000 10%, transparent 70%);
}

.rc-recog .rg-global::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(620px 360px at 88% 0%, rgba(34, 211, 238, .13), transparent 70%),
        radial-gradient(480px 320px at 0% 100%, rgba(248, 176, 62, .06), transparent 70%);
}

.rc-recog .rg-roles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: clamp(32px, 4vw, 56px) 0 0;
    padding: 0;
    list-style: none;
}

.rc-recog .rg-role {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 0 32px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.rc-recog .rg-global .rg-chip {
    background: rgba(103, 232, 249, .12);
    color: var(--hp-accent-pale);
}

.rc-recog .rg-global .rg-chip--advisory {
    background: #fff;
    color: var(--hp-navy);
}

.rc-recog .rg-global .rg-chip--individual {
    background: rgba(248, 176, 62, .14);
    color: var(--hp-gold);
}

.rc-recog .rg-global .rg-chip--listing {
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32);
    color: #fff;
}

.rc-recog .rg-role__title {
    margin-top: 16px;
    font-size: clamp(1.15rem, 1.05rem + .45vw, 1.38rem);
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -.015em;
    color: #fff;
    text-wrap: balance;
}

.rc-recog .rg-role__facts {
    display: grid;
    gap: 12px;
    width: 100%;
    margin: 18px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.rc-recog .rg-role__facts div {
    display: grid;
    gap: 2px;
}

.rc-recog .rg-role__facts dt {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}

.rc-recog .rg-role__facts dd {
    margin: 0;
    font-size: .98rem;
    line-height: 1.45;
    color: #fff;
}

.rc-recog .rg-role__text {
    margin-top: 16px;
    font-size: .98rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .76);
}

.rc-recog .rg-role__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 20px;
    margin-top: auto;
    padding-top: 18px;
}

.rc-recog .rg-role__links .rg-lang {
    margin-left: -10px;
}

@media (min-width: 900px) {
    .rc-recog .rg-roles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: clamp(32px, 4vw, 56px);
    }

    /* Where subgrid is supported, the three columns share their rows, so
       the facts start on one line however long each title runs. */
    @supports (grid-template-rows: subgrid) {
        .rc-recog .rg-role {
            display: grid;
            grid-template-rows: subgrid;
            grid-row: span 5;
            row-gap: 0;
            justify-items: start;
        }

        .rc-recog .rg-role__links {
            align-self: end;
        }
    }
}


/* ==========================================================================
   06  PRESS & MEDIA
   ========================================================================== */

.rc-recog .rg-press__list {
    margin: clamp(28px, 3.5vw, 48px) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--hp-line-2);
}

.rc-recog .rg-press__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: clamp(22px, 2.6vw, 32px) 0;
    border-bottom: 1px solid var(--hp-line-2);
}

.rc-recog .rg-press__source {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
}

.rc-recog .rg-press__pub {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hp-ink);
}

.rc-recog .rg-press__date {
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
    color: var(--hp-muted);
}

.rc-recog .rg-press__title {
    font-size: clamp(1.08rem, 1rem + .45vw, 1.3rem);
    font-weight: 700;
    line-height: 1.55;
    color: var(--hp-ink);
}

.rc-recog .rg-press__text {
    margin-top: 8px;
    max-width: 64ch;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--hp-body);
}

@media (min-width: 900px) {
    .rc-recog .rg-press__item {
        grid-template-columns: 200px minmax(0, 1fr) auto;
        column-gap: clamp(28px, 3.5vw, 48px);
        align-items: start;
    }

    .rc-recog .rg-press__source {
        flex-direction: column;
        gap: 6px;
        padding-top: 4px;
    }

    .rc-recog .rg-press__cta {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        padding-top: 2px;
    }

    .rc-recog .rg-press__cta .rg-lang {
        margin-left: 0;
    }
}


/* ==========================================================================
   07  BEYOND RECOGNITION
   A photograph beside the heading, then the three themes on one line that
   draws from gold to cyan — the home page's own pairing.
   ========================================================================== */

.rc-recog .rg-why__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(32px, 4vw, 48px);
    align-items: center;
}

.rc-recog .rg-why__photo img {
    aspect-ratio: 1100 / 683;
    object-fit: cover;
    object-position: 50% 40%;
}

.rc-recog .rg-themes {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin: clamp(40px, 5vw, 64px) 0 0;
    padding: 0 0 0 34px;
    list-style: none;
}

/* phones: the line runs down the left of the themes */
.rc-recog .rg-themes::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--hp-gold), var(--hp-accent));
    transform-origin: top;
}

.rc-recog .rg-theme {
    --c: var(--hp-gold);
    position: relative;
}

.rc-recog .rg-theme:nth-child(2) { --c: var(--hp-accent-hi); }
.rc-recog .rg-theme:nth-child(3) { --c: var(--hp-accent-ink); }

.rc-recog .rg-theme::before {
    content: "";
    position: absolute;
    left: -34px;
    top: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--c);
    background: var(--hp-paper-2);
}

.rc-recog .rg-theme__num {
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .14em;
    font-variant-numeric: tabular-nums;
    color: var(--hp-accent-ink);
}

.rc-recog .rg-theme__title {
    margin-top: 8px;
    font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.025em;
    color: var(--hp-ink);
}

.rc-recog .rg-theme__text {
    margin-top: 8px;
    max-width: 34ch;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--hp-body);
}

@media (min-width: 760px) {
    .rc-recog .rg-themes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(28px, 4vw, 56px);
        padding: 34px 0 0;
    }

    .rc-recog .rg-themes::before {
        left: 6px;
        right: 0;
        top: 5px;
        bottom: auto;
        width: auto;
        height: 2px;
        background: linear-gradient(90deg, var(--hp-gold), var(--hp-accent));
        transform-origin: left;
    }

    .rc-recog .rg-theme::before {
        left: 0;
        top: -34px;
    }
}

@media (min-width: 960px) {
    .rc-recog .rg-why__top {
        grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
        column-gap: clamp(48px, 6vw, 96px);
    }
}


/* ==========================================================================
   08  MOTION
   The record figure draws in once, with the home page's own keyframes
   (hp-draw, hp-fade); home.css §03 pauses it off screen and §12 removes it
   under reduced motion, leaving the finished figure. Rails and the themes
   line draw once, when half of them is on screen (home.js arms every
   [data-draw] with .is-armed, then adds .is-drawn). Without JS, or under
   reduced motion, home.js never arms them, so they are simply there.
   ========================================================================== */

.rc-recog .rg-orbit__ring {
    stroke-dasharray: 1;
    animation: hp-draw 1.8s calc(var(--i, 0) * 120ms) var(--hp-ease) both;
}

.rc-recog .rg-orbit__core,
.rc-recog .rg-orbit__years {
    animation: hp-fade 1s .2s var(--hp-ease) both;
}

.rc-recog .rg-orbit__marks > g {
    animation: hp-fade .8s calc(.7s + var(--i, 0) * 110ms) var(--hp-ease) both;
}

.rc-recog .rg-entries.is-armed::before {
    transform: scaleY(0);
}

.rc-recog .rg-entries.is-armed.is-drawn::before {
    transform: none;
    transition: transform 1.2s var(--hp-ease) .1s;
}

.rc-recog .rg-themes.is-armed::before {
    transform: scaleY(0);
}

.rc-recog .rg-themes.is-armed.is-drawn::before {
    transform: none;
    transition: transform 1.4s var(--hp-ease) .1s;
}

@media (min-width: 760px) {
    .rc-recog .rg-themes.is-armed::before {
        transform: scaleX(0);
    }

    .rc-recog .rg-themes.is-armed.is-drawn::before {
        transform: none;
    }
}