/**
 * Forme · the community home: module chromes, the facade and every community block
 * (design spec §6.5–§6.7, §7, §8; boards ref/forme-desktop and ref/forme-mobile).
 *
 *  1. Avatars, stacks, the count bubble
 *  2. Shared pieces: tags, CTA links, large / ink buttons, meters, card links, blocks
 *  3. Module chromes: tsSection (section head row), tsPanel, tsCard, tsBare
 *  4. Home rows: spanning heads, stacking, column rhythm
 *  5. Welcome back strip
 *  6. Hero: copy, calls to action, the sign row and the facade
 *  7. Talking now: thread bubbles
 *  8. Around the club and Groups panels
 *  9. On this week: week strip and event cards
 * 10. Route map
 * 11. The board, badges, your standing
 * 12. Your turn: quiz and poll cards
 * 13. Learn something and From the editors
 * 14. The accent band and the ride-sheet link
 * 15. Phones (< 40rem)
 * 16. Hover (fine pointers only)
 *
 * Every rule sits under a template class and declares its own type, spacing and list styles,
 * so Tailwind Preflight or a Bootstrap-off page changes nothing (addendum A6.3). Colours are
 * tokens only, so the three presets and both schemes follow; the band is scheme-invariant.
 *
 * @copyright   Copyright (C) 2026 BulaSikku Technologies Private Limited. All rights reserved.
 * @license     GNU General Public License version 2 or later
 */

/* ==========================================================================
   1. Avatars, stacks, the count bubble
   ========================================================================== */

/* The module picks a tone from user_id % 6; Forme has five avatar grounds, so tone 5 reuses
   the slate ground of tone 1. */
.ts-avatar {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    overflow: hidden;
    border-radius: 50%;
    background-color: var(--fm-avatar-1);
    box-shadow: inset 0 0 0 1px var(--fm-hairline);
    color: var(--fm-avatar-fg);
    font-family: var(--ec-font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
}

.ts-avatar--tone-0 { background-color: var(--fm-avatar-1); }
.ts-avatar--tone-1 { background-color: var(--fm-avatar-2); }
.ts-avatar--tone-2 { background-color: var(--fm-avatar-3); }
.ts-avatar--tone-3 { background-color: var(--fm-avatar-4); }
.ts-avatar--tone-4 { background-color: var(--fm-avatar-5); }
.ts-avatar--tone-5 { background-color: var(--fm-avatar-2); }

.ts-avatar__img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.ts-avatar__initials {
    letter-spacing: 0.02em;
}

.ts-avatar .fm-art {
    inline-size: 100%;
    block-size: 100%;
    color: var(--ec-fg-2);
}

/* Presence: a ground-coloured gap, then a 2px signal ring (focus uses the same geometry). */
.ts-avatar--online {
    overflow: visible;
    box-shadow: 0 0 0 2px var(--fm-ring-gap, var(--ec-bg)), 0 0 0 4px var(--fm-signal);
}

.ts-avatar--online .ts-avatar__img {
    border-radius: inherit;
}

/* Stacked avatars: the hero's "inside right now" (28px, ringed) and the event attendees (22px). */
.fm-stack {
    display: inline-flex;
    flex: none;
    align-items: center;
    padding: 0.25rem;
}

.fm-stack__item {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    font-size: 0.625rem;
}

.fm-stack__item .ts-avatar__initials {
    letter-spacing: 0;
}

.fm-stack__item + .fm-stack__item {
    margin-inline-start: -0.5rem;
}

.fm-stack__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--ec-surface-2);
    box-shadow: 0 0 0 2px var(--fm-ring-gap, var(--ec-bg)), 0 0 0 4px var(--fm-signal);
    color: var(--ec-fg);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.fm-stack--s {
    padding: 0;
}

/* Event attendees (§6.5): 24px discs, initials at 40% (10px), a 2px ground ring, a 4px overlap. */
.fm-stack--s {
    padding-inline-start: 2px;
}

.fm-stack--s .fm-stack__item {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    box-shadow: 0 0 0 2px var(--fm-ring-gap, var(--ec-surface));
    font-size: 0.625rem;
}

.fm-stack--s .fm-stack__item + .fm-stack__item {
    margin-inline-start: -0.25rem;
}

/* Count bubble: accent with ink in the dark; a lit chip with a brass edge in the light,
   where ink on brass would fall short of 4.5:1. */
.fm-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.125rem;
    block-size: 1.125rem;
    padding: 0 0.3125rem;
    border-radius: 0.5625rem;
    background-color: var(--ec-accent);
    color: var(--ec-accent-fg);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
}

[data-color-scheme="light"] .fm-count {
    background-color: var(--fm-lit);
    box-shadow: inset 0 0 0 1px var(--fm-signal);
    color: var(--fm-accent-ink);
}

/* ==========================================================================
   2. Shared pieces
   ========================================================================== */

/* Line art: 1.5px strokes in the text-2 colour, one stroke in the signal colour. */
.fm-art {
    display: block;
    color: var(--ec-fg-2);
}

.fm-art .fm-art__hot {
    stroke: var(--fm-signal);
}

/* Tags and badges: 24px, bold 14px single-line labels (lead decision A4.1). */
.fm-tag {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.25rem;
    block-size: 1.5rem;
    margin: 0;
    padding: 0 0.5rem;
    border-radius: var(--fm-r-tag);
    background-color: var(--ec-surface-2);
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: var(--fm-t-tag);
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.fm-tag svg {
    flex: none;
    inline-size: 0.875rem;
    block-size: 0.875rem;
    stroke-width: 2;
}

.fm-tag--success {
    background-color: var(--fm-success-bg);
    color: var(--fm-success);
}

.fm-tag--success svg {
    stroke-width: 2.25;
}

.fm-tag--lit {
    background-color: var(--fm-lit);
    color: var(--fm-accent-ink);
}

.fm-tag--danger {
    background-color: var(--fm-danger-bg);
    color: var(--fm-danger);
}

.fm-tag--outline {
    box-shadow: inset 0 0 0 1px var(--ec-border);
    background-color: var(--ec-surface);
    color: var(--ec-fg-2);
}

/* CTA link: accent ink, bold, 2px underline, trailing arrow (signature detail 12). */
.fm-link-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.75rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--fm-accent-ink);
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    cursor: pointer;
}

.fm-link-cta svg {
    flex: none;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    stroke-width: 1.75;
    transition: transform var(--ec-dur-2) var(--ec-ease);
}

.fm-link-cta--l {
    min-block-size: 3.25rem;
    padding: 0 0.25rem;
    font-size: 1.125rem;
    text-underline-offset: 5px;
}

/* Large buttons (hero and band) and the ink button on accent. */
.fm-btn--l {
    min-block-size: 3.25rem;
    padding: 0 1.5rem;
    font-size: 1.125rem;
}

.fm-btn--ink {
    background-color: var(--fm-ink);
    box-shadow: none;
    color: var(--ec-accent);
}

.fm-btn--ink:focus-visible {
    outline: 2px solid var(--fm-ink);
    outline-offset: 3px;
}

.fm-btn--ink:active {
    background-color: #000;
}

/* Meter: 10px, lit track, signal fill (poll options, standing, course progress). */
.fm-meter {
    display: block;
    block-size: 0.625rem;
    overflow: hidden;
    border-radius: var(--fm-r-bar);
    background-color: var(--fm-lit);
}

.fm-meter__fill {
    display: block;
    block-size: 100%;
    background-color: var(--fm-signal);
}

/* A block's main part, its "more" link and meta line (the section chrome moves them into its
   head row, 3). Outside a section they simply stack. */
.fm-block {
    display: flex;
    flex-direction: column;
    gap: var(--fm-s-4);
    margin: 0;
}

.fm-block__main {
    min-inline-size: 0;
}

.ts-sec__meta {
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: var(--fm-t-label);
    font-weight: 400;
    line-height: 1.5rem;
}

.ts-sec__more {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.2;
}

/* ==========================================================================
   3. Module chromes
   ========================================================================== */

/* tsSection: one head row (H2, subtitle or the block's meta line, the block's "All …" link on
   the right), 32px above the content. The head and body boxes dissolve into the section grid. */
.ts-sec {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--fm-s-4);
    row-gap: var(--fm-s-8);
    margin: 0;
    padding: 0;
}

.ts-sec > .ts-sec__head,
.ts-sec > .ts-sec__body,
.ts-sec > .ts-sec__body > .fm-block {
    display: contents;
}

.ts-sec > .ts-sec__body > *,
.ts-sec > .ts-sec__body > .fm-block > * {
    grid-column: 1 / -1;
}

.ts-sec .ts-sec__title {
    grid-row: 1;
    grid-column: 1;
    align-self: baseline;
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: var(--fm-t-h2);
    font-stretch: var(--fm-disp-stretch);
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-transform: none;
    text-wrap: balance;
}

.ts-sec .ts-sec__sub,
.ts-sec > .ts-sec__body > .fm-block > .ts-sec__meta {
    grid-row: 1;
    grid-column: 2;
    align-self: baseline;
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: var(--fm-t-label);
    font-weight: 400;
    line-height: 1.5rem;
}

.ts-sec:has(.ts-sec__sub) .ts-sec__meta,
.ts-sec--untitled .ts-sec__meta {
    display: none;
}

.ts-sec > .ts-sec__body > .fm-block > .ts-sec__more {
    grid-row: 1;
    grid-column: 3;
    justify-self: end;
}

.ts-sec--untitled,
.ts-sec--untitled > .ts-sec__body > .fm-block {
    display: block;
}

/* tsPanel: a bubble card with an H3 in Manrope and a head link at the top right. */
.ts-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--fm-s-4);
    margin: 0;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--ec-border);
    border-radius: var(--fm-r-bubble);
    background-color: var(--ec-surface);
    box-shadow: inset 0 1px 0 var(--fm-glow);
    --fm-ring-gap: var(--ec-surface);
}

.ts-panel .ts-panel__title {
    min-block-size: 1.5rem;
    margin: 0;
    padding-inline-end: 6rem;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.25rem;
    font-stretch: var(--fm-disp-stretch);
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.5rem;
    text-transform: none;
}

.fm-panel__more {
    position: absolute;
    inset-block-start: 1.25rem;
    inset-inline-end: 1.5rem;
    margin: 0;
    font-size: 1rem;
    line-height: 1.5rem;
}

.fm-panel__more a {
    display: inline-block;
    margin-block: -0.625rem;
    padding-block: 0.625rem;
    color: var(--fm-accent-ink);
    font-weight: 700;
    text-decoration: none;
}

/* tsCard: a plain bubble card (the poll). On the surface band it is raised to surface-2. */
.ts-card {
    display: flex;
    flex-direction: column;
    gap: var(--fm-s-4);
    margin: 0;
    padding: 1.375rem 1.5rem;
    border: 1px solid var(--ec-border);
    border-radius: var(--fm-r-bubble);
    background-color: var(--ec-surface);
    box-shadow: inset 0 1px 0 var(--fm-glow);
}

.ts-card .ts-card__title {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: var(--fm-t-title-l);
    font-style: normal;
    font-weight: 700;
    line-height: 1.625rem;
    text-transform: none;
}

.ts-bare {
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   4. Home rows
   ========================================================================== */

/* Several modules in one column: panels 16px apart, the board and its badges 20px. */
.ts-pos-top-b,
.ts-pos-bottom-a,
.ts-pos-bottom-b {
    display: flex;
    flex-direction: column;
    gap: var(--fm-s-4);
}

.ts-pos-bottom-a {
    gap: var(--fm-s-5);
}

.ts-row[data-ts-row="band"] .ts-card,
.ts-row[data-ts-row="band"] .fm-quiz {
    background-color: var(--ec-surface-2);
    --fm-ring-gap: var(--ec-surface-2);
}

/* Paired sections stack until there is room for two columns side by side (design §4.2). */
@media (width < 60rem) {
    .ts-row:is([data-ts-row="top-1"], [data-ts-row="top-2"], [data-ts-row="band"], [data-ts-row="bottom-2"]) > .ts-col {
        grid-column: 1 / -1;
    }
}

@media (min-width: 60rem) {
    /* "Talking now" and "On this week" head the whole row: their "All …" link sits at the row's
       right edge and the second column starts level with the first list. */
    .ts-row:is([data-ts-row="top-1"], [data-ts-row="top-2"]) {
        position: relative;
    }

    .ts-row[data-ts-row="top-1"] > .ts-pos-top-a .ts-sec > .ts-sec__body > .fm-block > .ts-sec__more,
    .ts-row[data-ts-row="top-2"] > .ts-pos-top-c .ts-sec > .ts-sec__body > .fm-block > .ts-sec__more {
        position: absolute;
        inset-block-start: 0.125rem;
        inset-inline-end: 0;
    }

    .ts-row[data-ts-row="top-1"]:has(> .ts-pos-top-a .ts-sec__title) > .ts-pos-top-b,
    .ts-row[data-ts-row="top-2"]:has(> .ts-pos-top-c .ts-sec__title) > .ts-pos-top-d {
        padding-block-start: 5rem;
    }

    /* The board and Your turn: 680 / 552 at 1440 (design §4.2), not the 7 / 5 grid split. */
    .ts-row[data-ts-row="band"]:has(> .ts-pos-bottom-a:not(:empty)):has(> .ts-pos-bottom-b:not(:empty)) {
        grid-template-columns: minmax(0, 680fr) minmax(0, 552fr);
    }

    .ts-row[data-ts-row="band"]:has(> .ts-pos-bottom-a:not(:empty)):has(> .ts-pos-bottom-b:not(:empty)) > .ts-col {
        grid-column: auto;
    }
}

/* ==========================================================================
   5. Welcome back strip (members, below-top)
   ========================================================================== */

.fm-welcome {
    display: flex;
    align-items: center;
    gap: var(--fm-s-3);
    min-block-size: 4.25rem;
    margin-inline-end: -0.5rem;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
}

.fm-welcome__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--fm-r-bubble-s);
    background-color: var(--fm-lit);
    box-shadow: inset 0 3px 0 var(--fm-signal);
    color: var(--fm-lit-fg);
}

.fm-welcome__icon svg {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    stroke-width: 1.75;
}

.fm-welcome__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-inline-size: 0;
}

.fm-welcome__title {
    margin: 0;
    color: var(--ec-fg);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.375rem;
}

.fm-welcome__note {
    margin: 0;
    overflow: hidden;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fm-welcome__lead {
    color: var(--ec-fg);
    font-weight: 700;
}

.fm-welcome__link {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.125rem;
    min-block-size: 2.75rem;
    padding: 0 0.5rem;
    color: var(--fm-accent-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.fm-welcome__link svg {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    stroke-width: 1.75;
}

/* ==========================================================================
   6. Hero: copy, calls to action, the sign row and the facade
   ========================================================================== */

/* The hero position holds up to four modules (visitor or member copy, the actions, the rooms).
   Their boxes dissolve so the copy, actions, presence line and facade share one layout. */
.ts-pos-hero {
    display: flex;
    flex-direction: column;
}

.ts-pos-hero > .ts-bare:has(> .fm-hero, > .fm-herocta, > .fm-rooms),
.ts-pos-hero .fm-hero,
.ts-pos-hero .fm-rooms {
    display: contents;
}

.ts-pos-hero > :is(.ts-bare, .ts-module, .moduletable) { order: 9; }
.fm-hero > :is(h1, h2) { order: 1; }
.fm-hero > p,
.fm-rooms__sentence { order: 2; }
.fm-herocta { order: 3; }
.fm-rooms__sign { order: 4; }
.fm-facade { order: 5; }

.fm-hero > :is(h1, h2) {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: var(--fm-t-display-xl);
    font-stretch: var(--fm-disp-stretch);
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    text-transform: none;
    text-wrap: balance;
}

.fm-hero > p,
.fm-rooms__sentence {
    max-inline-size: 37.5rem;
    margin: 0;
    padding-block-start: 0.75rem;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: var(--fm-t-lede);
    font-weight: 400;
    line-height: 1.42;
    text-wrap: pretty;
}

.fm-hero > p a {
    color: var(--fm-accent-ink);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

/* The presence sentence is the members' lede; visitors read the club blurb and the sign row. */
.ts-guest .fm-rooms__sentence {
    display: none;
}

.fm-herocta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fm-s-3) var(--fm-s-6);
    margin: 0;
    padding-block-start: 1.25rem;
}

/* Sign row: who is inside, and how to read the rooms. */
.fm-rooms__sign {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--fm-s-3) var(--fm-s-6);
    min-block-size: 2.75rem;
    margin: var(--fm-s-12) 0 0;
    font-family: var(--ec-font-body);
}

.fm-rooms__presence {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.625rem;
    margin: 0;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.5rem;
}

.fm-rooms__presence .fm-stack {
    margin-inline-end: 0.25rem;
}

.fm-rooms__inside {
    color: var(--ec-fg);
    font-size: var(--fm-t-label);
    font-weight: 700;
}

.fm-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem var(--fm-s-6);
    margin: 0;
    padding: 0;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.25rem;
    list-style: none;
}

.fm-legend__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    white-space: nowrap;
}

.fm-legend__item::before {
    content: "";
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;
    border-radius: var(--fm-r-bar);
}

.fm-legend__item--busiest::before {
    background-color: var(--ec-accent);
}

.fm-legend__item--lit::before {
    background-color: var(--fm-lit);
    box-shadow: inset 0 3px 0 var(--fm-signal);
}

.fm-legend__item--quiet::before {
    background-color: var(--ec-surface);
    box-shadow: inset 0 0 0 1px var(--fm-control);
}

/* The facade: roofline, then the mullion grid (signature detail 1). */
.fm-facade {
    display: flex;
    flex-direction: column;
    gap: var(--fm-s-3);
    margin: var(--fm-s-3) 0 0;
}

.fm-facade__roof {
    display: block;
    block-size: var(--fm-mullion);
    margin-inline: -1rem;
    background-color: var(--ec-border);
}

.fm-facade__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: 12.5rem 12.5rem;
    grid-template-areas:
        "busy busy r1 r2 r3 r3"
        "busy busy r4 r5 r6 r6";
    gap: var(--fm-mullion);
    margin: 0;
    padding: var(--fm-mullion);
    overflow: hidden;
    border-radius: var(--fm-r-bubble);
    background-color: var(--ec-border);
    list-style: none;
}

.fm-facade--n6 .fm-facade__grid { grid-template-areas: "busy busy r1 r2 r3 r3" "busy busy r4 r5 r5 r5"; }
.fm-facade--n5 .fm-facade__grid { grid-template-areas: "busy busy r1 r1 r2 r2" "busy busy r3 r3 r4 r4"; }
.fm-facade--n4 .fm-facade__grid { grid-template-areas: "busy busy r1 r1 r2 r2" "busy busy r3 r3 r3 r3"; }
.fm-facade--n3 .fm-facade__grid { grid-template-areas: "busy busy r1 r1 r2 r2" "busy busy r1 r1 r2 r2"; }
.fm-facade--n2 .fm-facade__grid { grid-template-rows: 15rem; grid-template-areas: "busy busy busy r1 r1 r1"; }

.fm-facade__cell {
    display: flex;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
}

.fm-facade__cell--busy { grid-area: busy; }
.fm-facade__cell--r1 { grid-area: r1; }
.fm-facade__cell--r2 { grid-area: r2; }
.fm-facade__cell--r3 { grid-area: r3; }
.fm-facade__cell--r4 { grid-area: r4; }
.fm-facade__cell--r5 { grid-area: r5; }
.fm-facade__cell--r6 { grid-area: r6; }

.fm-pane {
    display: flex;
    flex: 1;
    gap: var(--fm-s-4);
    min-inline-size: 0;
    padding: 1.25rem 1.375rem;
    background-color: var(--ec-surface);
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    text-decoration: none;
    transition: background-color var(--ec-dur-1) var(--ec-ease);
}

.fm-pane:focus-visible {
    outline: 2px solid var(--ts-focus);
    outline-offset: -4px;
}

.fm-pane__main {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--fm-s-3);
    min-inline-size: 0;
}

.fm-pane__head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-block-size: 1.5rem;
}

.fm-pane__label {
    display: contents;
}

.fm-pane__label > span {
    order: 0;
    font-size: var(--fm-t-label);
    font-weight: 700;
    line-height: 1.5rem;
}

.fm-pane__label > svg {
    flex: none;
    order: 1;
    inline-size: 1.375rem;
    block-size: 1.375rem;
    margin-inline-start: auto;
    stroke-width: 1.75;
}

.fm-pane__head--icon-first .fm-pane__label > svg,
.fm-pane--busiest .fm-pane__label > svg {
    order: -1;
    margin-inline-start: 0;
}

.fm-pane__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-inline-size: 0;
}

.fm-pane__figure {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fm-pane__value {
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: var(--fm-t-numeral-l);
    font-stretch: var(--fm-disp-stretch);
    font-weight: var(--fm-num-weight);
    line-height: 1;
}

.fm-pane__unit {
    font-size: var(--fm-t-body);
    font-weight: 500;
    line-height: 1.375rem;
}

.fm-pane__lines {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-inline-size: 0;
}

.fm-pane__line {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-inline-size: 0;
    font-size: 1rem;
    line-height: 1.25rem;
}

.fm-pane__text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.fm-pane:not(.fm-pane--wide):not(.fm-pane--busiest) .fm-pane__line + .fm-pane__line {
    display: none;
}

.fm-pane--wide .fm-pane__text {
    -webkit-line-clamp: 2;
}

.fm-pane__art {
    flex: none;
    align-self: center;
    inline-size: 9.375rem;
    block-size: 7.5rem;
}

/* Lit: a room with company in the last hour (amber-brown fill, 3px lintel). */
.fm-pane--lit {
    background-color: var(--fm-lit);
    box-shadow: inset 0 3px 0 var(--fm-signal);
    color: var(--ec-fg);
}

.fm-pane--lit .fm-pane__value,
.fm-pane--lit .fm-pane__label > svg {
    color: var(--fm-lit-fg);
}

.fm-pane--lit .fm-pane__line {
    color: var(--ec-fg-2);
}

/* Busiest: the one solid accent window, ink text, ink focus ring. */
.fm-pane--busiest {
    padding: 1.75rem 2rem;
    background-color: var(--ec-accent);
    color: var(--fm-ink);
    --ts-focus: var(--fm-ink);
}

.fm-pane--busiest .fm-pane__head {
    min-block-size: 1.75rem;
}

.fm-pane--busiest .fm-pane__label > span {
    font-size: 1.375rem;
    line-height: 1.75rem;
}

.fm-pane--busiest .fm-pane__label > svg {
    inline-size: 1.5rem;
    block-size: 1.5rem;
}

.fm-pane__badge {
    display: inline-flex;
    flex: none;
    order: 2;
    align-items: center;
    block-size: 1.625rem;
    margin-inline-start: auto;
    padding: 0 0.625rem;
    border: 1.5px solid var(--fm-ink);
    border-radius: var(--fm-r-tag);
    font-size: var(--fm-t-tag);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.fm-pane--busiest .fm-pane__body {
    gap: var(--fm-s-4);
}

.fm-pane--busiest .fm-pane__value {
    color: var(--fm-ink);
    font-size: var(--fm-t-numeral-hero);
    letter-spacing: -0.02em;
    line-height: 0.9;
}

.fm-pane--busiest .fm-pane__unit {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.75rem;
}

.fm-pane--busiest .fm-pane__lines {
    gap: 0.5rem;
    padding-block-start: var(--fm-s-4);
    border-block-start: 2px solid rgb(11 21 23 / 0.2);
}

.fm-pane--busiest .fm-pane__line {
    font-size: var(--fm-t-body);
    line-height: 1.5rem;
}

.fm-pane--busiest .fm-pane__text {
    -webkit-line-clamp: 2;
}

.fm-pane__disc {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: 50%;
    background-color: var(--fm-ink);
    color: var(--ec-accent);
}

.fm-pane__disc svg {
    inline-size: 0.75rem;
    block-size: 0.75rem;
    stroke-width: 2;
}

/* ==========================================================================
   7. Talking now: thread bubbles
   ========================================================================== */

.fm-threads__list {
    display: flex;
    flex-direction: column;
    gap: var(--fm-s-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-thread {
    display: flex;
    align-items: flex-start;
    gap: var(--fm-s-3);
    margin: 0;
}

.fm-thread__avatar {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--fm-r-avatar);
    font-size: 1rem;
}

.fm-thread__bubble {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    min-inline-size: 0;
    min-block-size: 5.75rem;
    padding: 1rem calc(1.5rem + 4rem + 1.5rem) 1rem 1.25rem;
    border: 1px solid var(--ec-border);
    border-radius: var(--fm-r-bubble);
    background-color: var(--ec-surface);
    box-shadow: inset 0 1px 0 var(--fm-glow);
    transition: border-color var(--ec-dur-1) var(--ec-ease), box-shadow var(--ec-dur-1) var(--ec-ease);
}

.fm-thread--mine .fm-thread__bubble {
    border-color: var(--fm-highlight);
}

.fm-thread__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    min-inline-size: 0;
}

.fm-thread__title {
    margin: 0;
    overflow: hidden;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.625rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fm-thread__link {
    color: inherit;
    text-decoration: none;
}

.fm-thread__link:focus-visible {
    outline: none;
}

.fm-thread__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--fm-r-bubble);
}

/* Card links: the whole bubble is the target, so the focus ring draws round the bubble. */
:is(.fm-thread__link, .fm-event__link, .fm-feature__link, .fm-course__link):focus-visible::after {
    outline: 2px solid var(--ts-focus);
    outline-offset: 2px;
}

/* Event, course and feature cards clip their media (overflow: hidden), which would clip a ring drawn
   outside the stretched link: the card itself carries the ring, or the ring moves inside the edge. */
:is(.fm-event, .fm-course, .fm-feature):has(:is(.fm-event__link, .fm-course__link, .fm-feature__link):focus-visible) {
    outline: 2px solid var(--ts-focus);
    outline-offset: 2px;
}

@supports not selector(:has(*)) {
    :is(.fm-event__link, .fm-feature__link, .fm-course__link):focus-visible::after {
        outline-offset: -3px;
    }
}

.fm-thread__meta {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-block-size: 1.5rem;
    margin: 0;
    overflow: hidden;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.5rem;
    white-space: nowrap;
}

.fm-thread__count {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    inline-size: 4rem;
    transform: translateY(-50%);
}

.fm-thread__count-value {
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: var(--fm-t-numeral-s);
    font-stretch: var(--fm-disp-stretch);
    font-weight: var(--fm-num-weight);
    line-height: 1;
}

.fm-thread--hot .fm-thread__count-value {
    color: var(--fm-accent-ink);
}

.fm-thread__count-label {
    color: var(--ec-fg-2);
    font-size: var(--fm-t-tag);
    line-height: 1.125rem;
}

/* Unread: the title keeps its weight, read ones soften (design §6.6). */
.ts-member .fm-thread:not(.fm-thread--unread) .fm-thread__title {
    font-weight: 700;
}

/* ==========================================================================
   8. Around the club and Groups
   ========================================================================== */

.fm-activity,
.fm-groups {
    display: flex;
    flex-direction: column;
    gap: var(--fm-s-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-activity__item {
    display: flex;
    align-items: flex-start;
    gap: var(--fm-s-3);
    margin: 0;
}

.fm-activity__avatar {
    border-radius: var(--fm-r-avatar);
    font-size: 0.9375rem;
}

.fm-activity__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    min-inline-size: 0;
}

.fm-activity__text {
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: var(--fm-t-body);
    line-height: 1.375rem;
}

.fm-activity__actor {
    color: var(--ec-fg);
    font-weight: 700;
    text-decoration: none;
}

.fm-activity__group {
    color: var(--ec-fg);
}

.fm-activity__media {
    display: flex;
    gap: 0.375rem;
    margin: 0;
}

.fm-activity__thumb,
.fm-activity__more {
    display: block;
    flex: none;
    inline-size: 3.5rem;
    block-size: 2.5rem;
    border-radius: var(--fm-r-bubble-xs);
    background-color: var(--ec-surface-2);
    object-fit: cover;
}

.fm-activity__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
    font-weight: 700;
}

.fm-groups {
    gap: 0.375rem;
}

.fm-groups > li {
    margin: 0;
}

.fm-group {
    display: flex;
    align-items: center;
    gap: var(--fm-s-3);
    min-block-size: 2.25rem;
    margin-block: -0.25rem;
    padding-block: 0.25rem;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    text-decoration: none;
}

.fm-group__tile {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    overflow: hidden;
    border-radius: var(--fm-r-bubble-s);
    color: var(--fm-avatar-fg);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
}

.fm-group__tile img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.fm-group__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-inline-size: 0;
}

.fm-group__name {
    overflow: hidden;
    font-size: var(--fm-t-body);
    font-weight: 700;
    line-height: 1.25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fm-group__count {
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
    line-height: 1.125rem;
}

.fm-group__chevron {
    flex: none;
    color: var(--ec-fg-2);
    transition: transform var(--ec-dur-2) var(--ec-ease);
}

/* ==========================================================================
   9. On this week: week strip and event cards
   ========================================================================== */

.fm-events > .fm-block__main {
    display: flex;
    flex-direction: column;
    gap: var(--fm-s-4);
}

.fm-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--fm-mullion);
    min-block-size: 4.5rem;
    margin: 0;
    padding: var(--fm-mullion);
    overflow: hidden;
    border-radius: var(--fm-r-bubble);
    background-color: var(--ec-border);
    list-style: none;
}

.fm-week__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    margin: 0;
    background-color: var(--ec-surface);
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
}

.fm-week__name {
    font-size: var(--fm-t-tag);
    font-weight: 700;
    line-height: 1.125rem;
}

.fm-week__num {
    font-family: var(--ec-font-display);
    font-size: 1.375rem;
    font-stretch: var(--fm-disp-stretch);
    font-weight: var(--fm-num-weight);
    line-height: 1.625rem;
}

.fm-week__day--today {
    background-color: var(--ec-surface-2);
    color: var(--ec-fg);
}

.fm-week__day--lit {
    background-color: var(--fm-lit);
    box-shadow: inset 0 3px 0 var(--fm-signal);
    color: var(--ec-fg);
}

.fm-week__day--lit .fm-week__num {
    color: var(--fm-lit-fg);
}

.fm-events__list {
    display: flex;
    flex-direction: column;
    gap: var(--fm-s-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-events__item {
    margin: 0;
}

.fm-event {
    position: relative;
    display: flex;
    min-block-size: 7.25rem;
    overflow: hidden;
    border: 1px solid var(--ec-border);
    border-radius: var(--fm-r-bubble);
    background-color: var(--ec-surface);
    box-shadow: inset 0 1px 0 var(--fm-glow);
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    transition: border-color var(--ec-dur-1) var(--ec-ease), box-shadow var(--ec-dur-1) var(--ec-ease);
    --fm-ring-gap: var(--ec-surface);
}

.fm-event--going {
    border-color: var(--fm-highlight);
}

.fm-datechip {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    inline-size: 6rem;
    margin: 0;
    border-inline-end: 2px solid var(--ec-border);
    color: var(--ec-fg-2);
}

.fm-datechip__weekday,
.fm-datechip__month {
    font-size: var(--fm-t-tag);
    font-weight: 700;
    line-height: 1.125rem;
}

.fm-datechip__day {
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: var(--fm-t-numeral-m);
    font-stretch: var(--fm-disp-stretch);
    font-weight: var(--fm-num-weight);
    line-height: 1;
}

.fm-event--past .fm-datechip__day,
.fm-event--past .fm-event__title {
    color: var(--ec-fg-2);
}

.fm-event__body {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--fm-s-4);
    min-inline-size: 0;
    padding: 1.125rem 1.25rem;
}

.fm-event__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.25rem;
    min-inline-size: 0;
}

.fm-event__title {
    margin: 0;
    overflow: hidden;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.5rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fm-event__link {
    color: inherit;
    text-decoration: none;
}

.fm-event__link:focus-visible {
    outline: none;
}

.fm-event__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--fm-r-bubble);
}

.fm-event__meta {
    margin: 0;
    overflow: hidden;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.375rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fm-event__meta-sm {
    display: none;
}

.fm-event__people {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-block-size: 1.5rem;
    margin: 0;
}

.fm-event__going {
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
    line-height: 1.25rem;
}

.fm-event__rsvp {
    position: relative;
    z-index: 1;
    flex: none;
    min-block-size: 2.75rem;
    padding: 0 1rem;
    font-size: 1rem;
}

.fm-event__rsvp--on {
    border-color: var(--fm-signal);
    background-color: var(--fm-lit);
    color: var(--fm-lit-fg);
}

.fm-event__rsvp svg {
    inline-size: 1rem;
    block-size: 1rem;
}

.fm-event__chevron {
    display: none;
    flex: none;
    color: var(--ec-fg-2);
}

.fm-event__chevron svg {
    display: block;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    stroke-width: 1.75;
}

/* ==========================================================================
   10. Route map
   ========================================================================== */

.fm-map {
    display: grid;
    grid-template-rows: 3rem minmax(12rem, 17.875rem) auto;
    gap: var(--fm-mullion);
    padding: var(--fm-mullion);
    overflow: hidden;
    border-radius: var(--fm-r-bubble);
    background-color: var(--ec-border);
    font-family: var(--ec-font-body);
}

.fm-map__bar {
    display: flex;
    align-items: stretch;
    gap: var(--fm-s-6);
    min-inline-size: 0;
    padding: 0 1.25rem;
    background-color: var(--ec-surface);
}

.fm-map__tracks {
    display: flex;
    gap: var(--fm-s-6);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

.fm-map__tracks > li {
    display: flex;
    min-inline-size: 0;
    margin: 0;
}

.fm-map__track {
    display: block;
    overflow: hidden;
    padding-block-start: 3px;
    text-overflow: ellipsis;
    border-block-end: 3px solid transparent;
    color: var(--ec-fg-2);
    font-size: var(--fm-t-body);
    font-weight: 500;
    line-height: 2.625rem;
    text-decoration: none;
    white-space: nowrap;
}

.fm-map__track--current {
    border-block-end-color: var(--fm-signal);
    color: var(--ec-fg);
    font-weight: 700;
}

.fm-map__track:focus-visible {
    outline-offset: -2px;
}

.fm-map__open {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.375rem;
    margin-inline-start: auto;
    color: var(--fm-accent-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.fm-map__open svg {
    inline-size: 1rem;
    block-size: 1rem;
    stroke-width: 1.75;
}

.fm-map__ground {
    position: relative;
    min-block-size: 0;
    background-color: var(--fm-map-ground);
    background-image:
        linear-gradient(var(--fm-map-street) 2px, transparent 2px),
        linear-gradient(90deg, var(--fm-map-street) 2px, transparent 2px);
    background-position: 14px 30px;
    background-size: 5.75rem 4.5rem;
}

.fm-map__sketch {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    padding: 1rem;
    overflow: visible;
}

.fm-map__casing,
.fm-map__line,
.fm-map__pin,
.fm-map__pin-ring {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fm-map__casing {
    stroke: var(--fm-map-casing);
    stroke-width: 8;
}

.fm-map__line {
    stroke: var(--fm-map-route);
    stroke-width: var(--fm-map-route-width, 3);
}

.fm-map__pin-ring {
    stroke: var(--fm-ink);
    stroke-width: 18;
}

.fm-map__pin {
    stroke: var(--fm-live);
    stroke-width: 14;
}

.fm-map__key {
    position: absolute;
    inset-block-end: 0.75rem;
    inset-inline-start: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--ec-fg);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.25rem;
}

.fm-map__key-pin {
    inline-size: 0.875rem;
    block-size: 0.875rem;
    border-radius: 50%;
    background-color: var(--fm-live);
    box-shadow: 0 0 0 2px var(--fm-ink);
}

.fm-map__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--fm-mullion);
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-stat {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.375rem;
    min-inline-size: 0;
    margin: 0;
    padding: 1.125rem 1.25rem;
    background-color: var(--ec-surface);
}

.fm-stat__value {
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: var(--fm-t-numeral-m);
    font-stretch: var(--fm-disp-stretch);
    font-weight: var(--fm-num-weight);
    line-height: 1;
}

.fm-stat__label {
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.375rem;
}

.fm-stat__profile {
    display: block;
    inline-size: 100%;
    block-size: 3rem;
}

.fm-stat__profile-fill {
    fill: var(--fm-lit);
}

.fm-stat__profile-line {
    fill: none;
    stroke: var(--fm-signal);
    stroke-width: 2;
    stroke-linejoin: round;
}

/* ==========================================================================
   11. The board, badges, your standing
   ========================================================================== */

.fm-board {
    display: grid;
    grid-auto-rows: minmax(5rem, auto);
    gap: var(--fm-mullion);
    margin: 0;
    padding: var(--fm-mullion);
    overflow: hidden;
    border-radius: var(--fm-r-bubble);
    background-color: var(--ec-border);
    list-style: none;
}

.fm-leader {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--fm-s-5);
    min-inline-size: 0;
    margin: 0;
    padding: 0.75rem 1.75rem 0.75rem 1.5rem;
    background-color: var(--ec-surface-2);
    font-family: var(--ec-font-body);
    --fm-ring-gap: var(--ec-surface-2);
}

.fm-leader--you {
    background-color: var(--fm-lit);
    --fm-ring-gap: var(--fm-lit);
}

.fm-leader__rank {
    flex: none;
    inline-size: 3.5rem;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: var(--fm-t-numeral-l);
    font-stretch: var(--fm-disp-stretch);
    font-weight: var(--fm-num-weight);
    line-height: 1;
}

.fm-leader--first .fm-leader__rank {
    color: var(--fm-accent-ink);
}

.fm-leader__avatar {
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: var(--fm-r-avatar);
    font-size: 1.0625rem;
}

.fm-leader__who {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-inline-size: 0;
}

.fm-leader__name {
    max-inline-size: 100%;
    overflow: hidden;
    color: var(--ec-fg);
    font-size: var(--fm-t-title-l);
    font-weight: 700;
    line-height: 1.5rem;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The row is the name's target (44px+), ringed like the card links. */
.fm-leader__name::after {
    content: "";
    position: absolute;
    inset: 0;
}

.fm-leader__name:focus-visible {
    outline: none;
}

.fm-leader__name:focus-visible::after {
    outline: 2px solid var(--ts-focus);
    outline-offset: -2px;
}

.fm-leader__points {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
}

.fm-leader__value {
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: var(--fm-t-numeral-xs);
    font-stretch: var(--fm-disp-stretch);
    font-weight: var(--fm-num-weight);
    line-height: 2rem;
}

.fm-leader__unit {
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
    line-height: 1.125rem;
}

.fm-board__gap {
    margin: 0;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.5rem;
    text-align: center;
}

.fm-board--you {
    margin-block-start: 0.25rem;
}

.fm-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem var(--fm-s-5);
    min-block-size: 3rem;
    font-family: var(--ec-font-body);
}

.fm-badges__label {
    margin: 0;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.25rem;
}

.fm-badges__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem var(--fm-s-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-badges__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--ec-fg);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25rem;
    white-space: nowrap;
}

.fm-badges__tag {
    flex: none;
    inline-size: 1.5rem;
    block-size: 2.5rem;
}

.fm-badges__item--open .fm-badges__name {
    color: var(--ec-fg-2);
}

.fm-standing {
    display: flex;
    flex-direction: column;
    gap: var(--fm-s-5);
    padding: 1.25rem;
    border: 1px solid var(--ec-border);
    border-radius: var(--fm-r-bubble);
    background-color: var(--ec-surface);
    box-shadow: inset 0 1px 0 var(--fm-glow);
    font-family: var(--ec-font-body);
}

.ts-row[data-ts-row="band"] .fm-standing {
    background-color: var(--ec-surface-2);
    --fm-ring-gap: var(--ec-surface-2);
}

.ts-row[data-ts-row="band"] .fm-standing .fm-tag,
.ts-row[data-ts-row="band"] .fm-neighbour--you {
    background-color: var(--ec-surface);
}

.fm-standing__top {
    display: flex;
    align-items: center;
    gap: var(--fm-s-4);
    min-block-size: 4rem;
}

.fm-standing__place {
    display: flex;
    align-items: baseline;
    margin: 0;
    color: var(--fm-accent-ink);
    font-family: var(--ec-font-display);
    font-stretch: var(--fm-disp-stretch);
}

.fm-standing__rank {
    font-size: 4.5rem;
    font-weight: var(--fm-num-weight);
    letter-spacing: -0.02em;
    line-height: 4rem;
}

.fm-standing__ordinal {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.75rem;
}

.fm-standing__rule {
    flex: none;
    inline-size: 2px;
    block-size: 3rem;
    background-color: var(--ec-border);
}

.fm-standing__score {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    min-inline-size: 0;
}

.fm-standing__points,
.fm-standing__level {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem 0.5rem;
    margin: 0;
}

.fm-standing__level {
    align-items: center;
}

.fm-standing__value {
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.625rem;
    font-stretch: var(--fm-disp-stretch);
    font-weight: var(--fm-num-weight);
    line-height: 1.75rem;
}

.fm-standing__unit {
    color: var(--ec-fg);
    font-size: var(--fm-t-body);
    font-weight: 700;
    line-height: 1.375rem;
}

.fm-standing__period,
.fm-standing__of {
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
    line-height: 1.25rem;
}

.fm-standing__gap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fm-standing__gap-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin: 0;
}

.fm-standing__behind {
    margin: 0;
    color: var(--ec-fg);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.375rem;
}

.fm-standing__neighbours {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-neighbour {
    display: flex;
    align-items: center;
    gap: var(--fm-s-3);
    min-block-size: 3.25rem;
    margin: 0;
    padding: 0 0.5rem;
    border-block-start: 1px solid var(--ec-border);
}

.fm-neighbour--you {
    border-radius: var(--fm-r-bubble-s);
    background-color: var(--ec-surface-2);
}

.fm-neighbour__rank {
    flex: none;
    inline-size: 1.25rem;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-display);
    font-size: 1.375rem;
    font-stretch: var(--fm-disp-stretch);
    font-weight: var(--fm-num-weight);
    line-height: 1.5rem;
}

.fm-neighbour--you .fm-neighbour__rank {
    color: var(--ec-fg);
}

.fm-neighbour__avatar {
    inline-size: 2rem;
    block-size: 2rem;
    font-size: 0.75rem;
}

.fm-neighbour__who {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-inline-size: 0;
}

.fm-neighbour__name {
    overflow: hidden;
    color: var(--ec-fg);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fm-neighbour__level {
    color: var(--ec-fg-2);
    font-size: var(--fm-t-tag);
    line-height: 1.125rem;
}

.fm-neighbour__value {
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.125rem;
    font-stretch: var(--fm-disp-stretch);
    font-weight: var(--fm-num-weight);
    line-height: 1.5rem;
}

/* On wide screens the board itself follows, so the card keeps to the numbers. */
@media (min-width: 60rem) {
    .ts-pos-bottom-a:has(.fm-leaders) .fm-standing__neighbours,
    .ts-pos-bottom-a:has(.fm-leaders) .fm-standing-block > .ts-sec__more {
        display: none;
    }
}

/* ==========================================================================
   12. Your turn: quiz and poll cards
   ========================================================================== */

.fm-quiz {
    display: grid;
    grid-template-columns: 10.5rem minmax(0, 1fr);
    min-block-size: 12.25rem;
    overflow: hidden;
    border: 1px solid var(--ec-border);
    border-radius: var(--fm-r-bubble);
    background-color: var(--ec-surface);
    box-shadow: inset 0 1px 0 var(--fm-glow);
    font-family: var(--ec-font-body);
}

.fm-quiz__media {
    display: flex;
    align-items: center;
    justify-content: center;
    border-inline-end: 2px solid var(--ec-border);
    background-color: var(--ec-surface);
}

.fm-quiz__media .fm-art {
    inline-size: 100%;
    max-inline-size: 10.375rem;
    block-size: 100%;
    max-block-size: 12.125rem;
}

.fm-quiz__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--fm-s-4);
    min-inline-size: 0;
    padding: 1.375rem 1.5rem;
}

.fm-quiz__text {
    display: flex;
    flex-direction: column;
    gap: var(--fm-s-3);
}

.fm-quiz__title,
.fm-poll__title {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: var(--fm-t-title-l);
    font-style: normal;
    font-weight: 700;
    line-height: 1.625rem;
    text-transform: none;
}

.fm-quiz__meta {
    margin: 0;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.375rem;
}

.fm-quiz__action {
    display: flex;
    margin: 0;
}

.fm-quiz__action .ts-button {
    padding: 0 1.125rem;
}

.fm-poll {
    display: flex;
    flex-direction: column;
    gap: var(--fm-s-4);
    font-family: var(--ec-font-body);
}

.fm-poll__question {
    margin: 0;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.375rem;
}

.fm-poll__results,
.fm-poll__form {
    display: flex;
    flex-direction: column;
    gap: var(--fm-s-4);
    margin: 0;
}

.fm-poll__results[hidden],
.fm-poll__form[hidden] {
    display: none;
}

.fm-poll__results:focus-visible {
    border-radius: var(--fm-r-bubble-xs);
    outline: 2px solid var(--ts-focus);
    outline-offset: 4px;
}

.fm-poll__options,
.fm-poll__choices,
.fm-poll__plain {
    display: flex;
    flex-direction: column;
    gap: var(--fm-s-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-poll__option {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
}

.fm-poll__row {
    display: flex;
    justify-content: space-between;
    gap: var(--fm-s-4);
    font-size: var(--fm-t-body);
    line-height: 1.375rem;
}

.fm-poll__label {
    color: var(--ec-fg);
    font-weight: 500;
}

.fm-poll__pct {
    color: var(--ec-fg);
    font-weight: 700;
}

.fm-poll__option--lead .fm-poll__label {
    font-weight: 700;
}

.fm-poll__option--lead .fm-poll__pct {
    color: var(--fm-accent-ink);
}

.fm-poll__choices > li,
.fm-poll__plain > li {
    margin: 0;
    color: var(--ec-fg);
    font-size: var(--fm-t-body);
    line-height: 1.5rem;
}

.fm-poll__choice {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-block-size: 2.75rem;
    cursor: pointer;
}

.fm-poll__input {
    flex: none;
    inline-size: 1.375rem;
    block-size: 1.375rem;
    margin: 0;
    accent-color: var(--ec-accent);
}

.fm-poll__error {
    margin: 0;
    color: var(--fm-danger);
    font-size: 0.9375rem;
    line-height: 1.25rem;
}

.fm-poll__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem var(--fm-s-4);
    min-block-size: 1.5rem;
    margin: 0;
}

.fm-poll__total,
.fm-poll__state {
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.25rem;
}

.fm-poll__action {
    min-block-size: 2.75rem;
    font-size: 1rem;
}

/* ==========================================================================
   13. Learn something and From the editors
   ========================================================================== */

.fm-courses__list,
.fm-editors > .fm-block__main {
    display: flex;
    flex-direction: column;
    gap: var(--fm-s-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-courses__item {
    margin: 0;
}

.fm-course {
    position: relative;
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    min-block-size: 13rem;
    overflow: hidden;
    border: 1px solid var(--ec-border);
    border-radius: var(--fm-r-bubble);
    background-color: var(--ec-surface);
    box-shadow: inset 0 1px 0 var(--fm-glow);
    font-family: var(--ec-font-body);
}

.fm-course__media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 0;
    border-inline-end: 2px solid var(--ec-border);
    background-color: var(--ec-surface-2);
}

.fm-course__image {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.fm-course__media .fm-art {
    inline-size: 100%;
    block-size: 100%;
}

.fm-course__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--fm-s-4);
    min-inline-size: 0;
    padding: 1.375rem 1.5rem;
}

.fm-course__head {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-inline-size: 0;
}

.fm-course__title {
    margin: 0;
    overflow: hidden;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.375rem;
    font-stretch: var(--fm-disp-stretch);
    font-style: normal;
    font-weight: 700;
    line-height: 1.75rem;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.fm-course__count {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    margin: 0;
}

.fm-course__value {
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: var(--fm-t-numeral-l);
    font-stretch: var(--fm-disp-stretch);
    font-weight: var(--fm-num-weight);
    line-height: 1;
}

.fm-course__unit {
    color: var(--ec-fg-2);
    font-size: var(--fm-t-label);
    line-height: 1.5rem;
}

.fm-course__progress {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    color: var(--ec-fg);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.375rem;
}

.fm-course__foot {
    display: flex;
    align-items: center;
    gap: var(--fm-s-3);
    min-block-size: 2.5rem;
}

.fm-course__avatar,
.fm-feature__avatar {
    border-radius: var(--fm-r-avatar);
    font-size: 0.9375rem;
}

.fm-course__who {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-inline-size: 0;
    margin: 0;
}

.fm-course__name {
    color: var(--ec-fg);
    font-size: var(--fm-t-body);
    font-weight: 700;
    line-height: 1.25rem;
}

.fm-course__role {
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
    line-height: 1.25rem;
}

.fm-course__link {
    flex: none;
    margin-inline-start: auto;
    color: var(--fm-accent-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.fm-course__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--fm-r-bubble);
}

.fm-course__link:focus-visible {
    outline: none;
}

.fm-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ec-border);
    border-radius: var(--fm-r-bubble);
    background-color: var(--ec-surface);
    box-shadow: inset 0 1px 0 var(--fm-glow);
    font-family: var(--ec-font-body);
}

.fm-feature__media {
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 9.375rem;
    overflow: hidden;
    border-block-end: 2px solid var(--ec-border);
    background-color: var(--ec-surface-2);
}

.fm-feature__media .fm-art {
    inline-size: 100%;
    max-inline-size: 38.375rem;
    block-size: 100%;
}

.fm-feature__image {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.fm-feature__body {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.25rem 1.5rem;
}

.fm-feature__title {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.5rem;
    font-stretch: var(--fm-disp-stretch);
    font-style: normal;
    font-weight: 700;
    line-height: 1.875rem;
    text-transform: none;
    text-wrap: pretty;
}

.fm-feature__link {
    color: inherit;
    text-decoration: none;
}

.fm-feature__link:focus-visible {
    outline: none;
}

.fm-feature__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--fm-r-bubble);
}

.fm-feature__byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem var(--fm-s-3);
    min-block-size: 2.5rem;
    margin: 0;
}

.fm-feature__author {
    color: var(--ec-fg);
    font-size: var(--fm-t-body);
    font-weight: 700;
    line-height: 1.25rem;
}

.fm-feature__time {
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.25rem;
}

.fm-feature__badge {
    margin-inline-start: auto;
}

.fm-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-rows > li {
    margin: 0;
    border-block-start: 1px solid var(--ec-border);
}

.fm-row {
    display: flex;
    align-items: center;
    gap: var(--fm-s-4);
    min-block-size: 3.1875rem;
    padding: 0 0.25rem;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    text-decoration: none;
}

.fm-row__thumb {
    display: flex;
    flex: none;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    overflow: hidden;
    border-radius: var(--fm-r-bubble-s);
    background-color: var(--ec-surface-2);
}

.fm-row__thumb .fm-art,
.fm-row__thumb img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.fm-row__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-inline-size: 0;
}

.fm-row__title {
    overflow: hidden;
    font-size: var(--fm-t-body);
    font-weight: 700;
    line-height: 1.375rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--ec-dur-1) var(--ec-ease);
}

.fm-row__meta {
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
    line-height: 1.125rem;
}

.fm-row__arrow {
    flex: none;
    color: var(--ec-fg-2);
    transition: transform var(--ec-dur-2) var(--ec-ease);
}

/* ==========================================================================
   14. The accent band and the ride-sheet link (footer-top)
   ========================================================================== */

.ts-pos-footer-top {
    display: flex;
    flex-direction: column;
    gap: var(--fm-s-5);
    color: var(--fm-band-fg);
}

.ts-pos-footer-top > .ts-bare:has(> .fm-band, > .fm-bandcta, > .fm-news),
.ts-pos-footer-top .fm-band {
    display: contents;
}

.fm-band__stool {
    display: none;
    inline-size: 8.5rem;
    block-size: 13.5rem;
    color: var(--fm-ink);
}

.fm-band__copy {
    display: flex;
    flex-direction: column;
    gap: var(--fm-s-3);
    font-family: var(--ec-font-body);
}

.fm-band__copy > :is(h2, h3) {
    margin: 0;
    color: var(--fm-ink);
    font-family: var(--ec-font-display);
    font-size: var(--fm-t-display-l);
    font-stretch: var(--fm-disp-stretch);
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-transform: none;
    text-wrap: balance;
}

.fm-band__copy > p {
    max-inline-size: 37.5rem;
    margin: 0;
    color: var(--fm-ink);
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    line-height: 1.45;
    text-wrap: balance;
}

.fm-bandcta {
    display: flex;
    margin: 0;
    padding-block-start: 0.5rem;
}

.fm-news {
    display: flex;
    flex-direction: column;
    gap: var(--fm-s-3);
    margin-block-start: var(--fm-s-3);
    font-family: var(--ec-font-body);
}

.fm-news > :is(h2, h3, h4) {
    margin: 0;
    color: var(--fm-ink);
    font-family: var(--ec-font-body);
    font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
    font-style: normal;
    font-weight: 700;
    line-height: 1.375;
    text-transform: none;
}

.fm-news > p {
    margin: 0;
    color: var(--fm-ink);
    font-size: 1.0625rem;
    line-height: 1.5rem;
}

.fm-news > p:last-child {
    display: flex;
}

.fm-news > p:last-child > a:last-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 3.25rem;
    padding: 0 1.25rem;
    border: 2px solid var(--fm-ink);
    border-radius: var(--ec-btn-radius);
    color: var(--fm-ink);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color var(--ec-dur-1) var(--ec-ease);
}

.fm-news > p:last-child > a:last-child:active {
    background-color: rgb(11 21 23 / 0.16);
}

@media (min-width: 60rem) {
    .ts-pos-footer-top {
        display: grid;
        grid-template-columns: 8.5rem minmax(0, 1fr) minmax(16rem, 27.5rem);
        align-items: end;
        column-gap: var(--fm-s-12);
        row-gap: 0;
    }

    .ts-pos-footer-top > :is(.ts-bare, .ts-module, .moduletable) {
        grid-column: 1 / -1;
    }

    .fm-band__stool {
        display: block;
        grid-row: 1 / span 2;
        grid-column: 1;
    }

    .fm-band__copy {
        grid-row: 1;
        grid-column: 2;
        gap: var(--fm-s-4);
    }

    .fm-band__copy > :is(h2, h3) {
        line-height: 1.0625;
    }

    .fm-bandcta {
        grid-row: 2;
        grid-column: 2;
        padding-block-start: var(--fm-s-7);
    }

    /* The sign-up is one composed row in an ink well (the board's email well + button): the
       sentence and the button share the well, so no button floats alone in the band. */
    .fm-news {
        grid-row: 1 / span 2;
        grid-column: 3;
        flex-flow: row wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--fm-s-3) var(--fm-s-4);
        margin: 0;
        padding: var(--fm-s-4) var(--fm-s-4) var(--fm-s-4) var(--fm-s-5);
        border-radius: var(--fm-r-bubble);
        background-color: rgb(11 21 23 / 0.1);
    }

    .fm-news > :is(h2, h3, h4) {
        flex: 1 1 12rem;
    }

    /* Without the stool column's company (no copy module), the actions keep to the left. */
    .ts-pos-footer-top:not(:has(.fm-band)) {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 27.5rem);
    }

    .ts-pos-footer-top:not(:has(.fm-band)) .fm-bandcta { grid-column: 1; }
    .ts-pos-footer-top:not(:has(.fm-band)) .fm-news { grid-column: 2; }
}

/* ==========================================================================
   Hero and facade from 40rem (tablet) and 60rem (desktop)
   ========================================================================== */

@media (min-width: 60rem) {
    .ts-pos-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        column-gap: var(--fm-s-12);
    }

    .ts-pos-hero > :is(.ts-bare, .ts-module, .moduletable) {
        grid-column: 1 / -1;
    }

    .fm-hero > :is(h1, h2) {
        grid-row: 1;
        grid-column: 1 / -1;
        margin-block-end: var(--fm-s-7);
        white-space: nowrap;
    }

    .fm-hero > p,
    .fm-rooms__sentence {
        grid-row: 2;
        grid-column: 1;
        align-self: end;
        padding: 0;
    }

    .fm-herocta {
        grid-row: 2;
        grid-column: 2;
        align-self: end;
        justify-content: flex-end;
        padding: 0;
    }

    .fm-rooms__sign {
        grid-row: 3;
        grid-column: 1 / -1;
    }

    .fm-facade {
        grid-row: 4;
        grid-column: 1 / -1;
    }

    /* Members read the presence sentence as their lede; the sign row keeps the legend. */
    .ts-member .fm-rooms__presence {
        display: none;
    }

    .ts-member .fm-rooms__sign {
        justify-content: flex-end;
    }
}

@media (width < 75rem) {
    /* Rows grow for two-line captions. */
    .fm-facade__grid,
    .fm-facade--n7 .fm-facade__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: minmax(12.5rem, auto) minmax(12.5rem, auto) minmax(10.625rem, auto);
        grid-template-areas: "busy busy r1 r2" "busy busy r3 r3" "r4 r5 r6 r6";
    }

    .fm-facade--n6 .fm-facade__grid { grid-template-areas: "busy busy r1 r2" "busy busy r3 r3" "r4 r4 r5 r5"; }
    .fm-facade--n5 .fm-facade__grid { grid-template-rows: 12.5rem 12.5rem; grid-template-areas: "busy busy r1 r2" "busy busy r3 r4"; }
    .fm-facade--n4 .fm-facade__grid { grid-template-rows: 12.5rem 12.5rem; grid-template-areas: "busy busy r1 r2" "busy busy r3 r3"; }
    .fm-facade--n3 .fm-facade__grid { grid-template-rows: 12.5rem 12.5rem; grid-template-areas: "busy busy r1 r2" "busy busy r1 r2"; }
    .fm-facade--n2 .fm-facade__grid { grid-template-rows: 15rem; grid-template-areas: "busy busy r1 r1"; }

    .fm-pane__art {
        display: none;
    }
}

/* ==========================================================================
   15. Phones (< 40rem): the member board (design §8.1)
   ========================================================================== */

@media (width < 40rem) {
    /* Columns and rows whose every module is curated away on phones (ts-hide-sm) vanish too,
       so no empty band keeps its padding. */
    .ts-row > .ts-col:not(:has(> :not(.ts-hide-sm))) {
        display: none;
    }

    .ts-row:not(:has(> .ts-col > :not(.ts-hide-sm))) {
        display: none;
    }

    /* Section heads: 44px, 28/36 titles, the "All …" link underlined without its arrow. */
    .ts-sec {
        row-gap: 0.5rem;
    }

    .ts-sec .ts-sec__title {
        line-height: 2.25rem;
    }

    .ts-sec .ts-sec__sub,
    .ts-sec > .ts-sec__body > .fm-block > .ts-sec__meta {
        display: none;
    }

    .ts-sec > .ts-sec__body > .fm-block > .ts-sec__more {
        grid-column: 2 / -1;
    }

    .ts-sec__more .fm-link-cta {
        font-size: 1rem;
    }

    .ts-sec__more .fm-link-cta svg {
        display: none;
    }

    /* Hero */
    .fm-hero > p,
    .fm-rooms__sentence {
        line-height: 1.625rem;
    }

    .fm-rooms__sign {
        display: none;
    }

    .ts-pos-hero .fm-facade {
        margin-block-start: var(--fm-s-7);
    }

    .fm-herocta {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .fm-herocta .ts-button {
        min-block-size: 3rem;
        font-size: 1.0625rem;
    }

    .fm-herocta .fm-link-cta {
        align-self: center;
        min-block-size: 2.75rem;
        margin-block-start: 0.5rem;
        font-size: 1.0625rem;
    }

    .fm-herocta--member .fm-link-cta {
        display: none;
    }

    .fm-facade {
        gap: 0.625rem;
    }

    .fm-facade__roof {
        margin-inline: -0.5rem;
    }

    .fm-facade__grid,
    .fm-facade--n7 .fm-facade__grid,
    .fm-facade--n6 .fm-facade__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: minmax(9.375rem, auto) repeat(3, minmax(8.5rem, auto));
        grid-template-areas: "busy busy" "r1 r2" "r3 r4" "r5 r6";
    }

    .fm-facade--n6 .fm-facade__grid { grid-template-areas: "busy busy" "r1 r2" "r3 r4" "r5 r5"; }
    .fm-facade--n5 .fm-facade__grid { grid-template-rows: minmax(9.375rem, auto) repeat(2, minmax(8.5rem, auto)); grid-template-areas: "busy busy" "r1 r2" "r3 r4"; }
    .fm-facade--n4 .fm-facade__grid { grid-template-rows: minmax(9.375rem, auto) repeat(2, minmax(8.5rem, auto)); grid-template-areas: "busy busy" "r1 r2" "r3 r3"; }
    .fm-facade--n3 .fm-facade__grid { grid-template-rows: minmax(9.375rem, auto) minmax(8.5rem, auto); grid-template-areas: "busy busy" "r1 r2"; }
    .fm-facade--n2 .fm-facade__grid { grid-template-rows: minmax(9.375rem, auto) minmax(8.5rem, auto); grid-template-areas: "busy busy" "r1 r1"; }

    .fm-pane {
        padding: 0.875rem 1rem;
    }

    .fm-pane__main {
        gap: 0.5rem;
    }

    .fm-pane__head {
        min-block-size: 1.25rem;
    }

    .fm-pane__label > span {
        font-size: 1rem;
        line-height: 1.25rem;
    }

    .fm-pane__label > svg {
        inline-size: 1.125rem;
        block-size: 1.125rem;
    }

    .fm-pane__body,
    .fm-pane__figure {
        gap: 0.125rem;
    }

    .fm-pane__unit,
    .fm-pane__line {
        overflow: hidden;
        font-size: 0.9375rem;
        line-height: 1.125rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Captions wrap to two lines in the half-width panes instead of breaking mid-word. */
    .fm-pane__line {
        white-space: normal;
    }

    .fm-pane__text,
    .fm-pane--wide .fm-pane__text {
        display: -webkit-box;
        overflow: hidden;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .fm-pane .fm-pane__line + .fm-pane__line {
        display: none;
    }

    .fm-pane--busiest {
        padding: 1rem 1.25rem;
    }

    .fm-pane--busiest .fm-pane__head {
        min-block-size: 1.5rem;
    }

    .fm-pane--busiest .fm-pane__label > span {
        font-size: var(--fm-t-label);
        line-height: 1.5rem;
    }

    .fm-pane--busiest .fm-pane__label > svg {
        inline-size: 1.25rem;
        block-size: 1.25rem;
    }

    .fm-pane__badge {
        block-size: 1.5rem;
        padding: 0 0.5rem;
    }

    .fm-pane--busiest .fm-pane__body {
        gap: 0.375rem;
    }

    .fm-pane--busiest .fm-pane__figure {
        flex-direction: row;
        align-items: baseline;
        gap: 0.75rem;
    }

    .fm-pane--busiest .fm-pane__value {
        line-height: 0.89;
    }

    .fm-pane--busiest .fm-pane__unit {
        font-size: var(--fm-t-label);
        line-height: 1.375rem;
    }

    .fm-pane--busiest .fm-pane__lines {
        padding: 0;
        border: 0;
    }

    .fm-pane--busiest .fm-pane__line {
        font-size: 1rem;
        line-height: 1.25rem;
    }

    .fm-pane--busiest .fm-pane__line:not(:last-child) {
        display: none;
    }

    .fm-pane--busiest .fm-pane__line:last-child {
        display: flex;
    }

    .fm-pane__disc {
        display: none;
    }

    /* Threads: four bubbles, two-line titles, the count folded into the meta row, the author
       carried by the avatar (still read out), the member's own thread highlighted. */
    .fm-threads__list > li:nth-child(n + 5) {
        display: none;
    }

    .fm-thread {
        gap: 0.625rem;
    }

    .fm-thread__avatar {
        inline-size: 2.5rem;
        block-size: 2.5rem;
        font-size: 0.9375rem;
    }

    .fm-thread__bubble {
        align-items: stretch;
        min-block-size: 6.625rem;
        padding: 0.875rem 1rem;
    }

    .fm-thread__body {
        justify-content: space-between;
    }

    .fm-thread__title {
        display: -webkit-box;
        font-size: var(--fm-t-body);
        line-height: 1.375rem;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .fm-thread__meta {
        flex-wrap: wrap;
        gap: 0 0.5rem;
        font-size: 0.9375rem;
        line-height: 1.25rem;
    }

    .fm-thread__author {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .fm-thread__dot {
        display: none;
    }

    :is(.fm-thread--solved, .fm-thread--pinned, .fm-thread--locked) .fm-thread__time {
        display: none;
    }

    .fm-thread__count {
        position: static;
        flex-direction: row;
        align-items: baseline;
        gap: 0.25rem;
        flex: none;
        inline-size: auto;
        margin-inline-start: auto;
        transform: none;
    }

    .fm-thread__count-value {
        font-size: 1.375rem;
        line-height: 1.5rem;
    }

    /* Events: no week strip, no buttons; the card links, "N going" joins the meta line. */
    .fm-week {
        display: none;
    }

    .fm-events__list {
        gap: 0.625rem;
    }

    .fm-event {
        min-block-size: 6.25rem;
    }

    .fm-datechip {
        inline-size: 4rem;
    }

    .fm-datechip__weekday,
    .fm-datechip__month {
        line-height: 1rem;
    }

    .fm-datechip__day {
        font-size: 2.25rem;
        line-height: 2.375rem;
    }

    .fm-event__body {
        gap: 0.5rem;
        padding: 0.875rem 0.75rem 0.875rem 1rem;
    }

    .fm-event__text {
        gap: 0.375rem;
    }

    .fm-event__title {
        display: -webkit-box;
        font-size: var(--fm-t-body);
        line-height: 1.3125rem;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .fm-event__meta {
        font-size: 0.9375rem;
        line-height: 1.25rem;
    }

    .fm-event__meta-lg,
    .fm-event__people,
    .fm-event__rsvp {
        display: none;
    }

    .fm-event__chevron {
        display: inline;
    }

    /* The place gives way first; the going count is never cut. */
    .fm-event__meta-sm {
        display: flex;
        min-inline-size: 0;
    }

    .fm-event__meta-place {
        overflow: hidden;
        min-inline-size: 0;
        text-overflow: ellipsis;
    }

    .fm-event__meta-count {
        flex: none;
        white-space: pre;
    }

    /* Standing: members see their card; the board's rows move to its full page. */
    .ts-member .ts-pos-bottom-a:has(.fm-standing) > .ts-sec:has(.fm-leaders) {
        display: none;
    }

    .fm-leader {
        gap: var(--fm-s-3);
        padding: 0.5rem 0.75rem;
    }

    .fm-leader__rank {
        inline-size: 2rem;
        font-size: 2rem;
    }

    .fm-leader__avatar {
        inline-size: 2.25rem;
        block-size: 2.25rem;
        font-size: 0.8125rem;
    }

    .fm-leader__name {
        font-size: 1rem;
        line-height: 1.25rem;
    }

    .fm-leader__value {
        font-size: 1.125rem;
        line-height: 1.5rem;
    }

    .fm-badges__list {
        flex-wrap: nowrap;
        max-inline-size: 100%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .fm-badges__item {
        scroll-snap-align: start;
    }

    /* Cards */
    .fm-quiz,
    .fm-course {
        grid-template-columns: 6rem minmax(0, 1fr);
        min-block-size: 8.25rem;
    }

    .fm-course__value {
        font-size: 2.5rem;
    }

    /* Band */
    .fm-bandcta .ts-button,
    .fm-news > p:last-child > a:last-child {
        flex: 1;
        min-block-size: 3rem;
        font-size: 1.0625rem;
    }

    .fm-news {
        margin-block-start: var(--fm-s-3);
    }
}

/* ==========================================================================
   16. Hover (fine pointers only; touch gets :active feedback)
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
    .fm-pane--quiet:hover {
        background-color: var(--ec-surface-2);
    }

    .fm-pane--lit:hover {
        background-color: color-mix(in srgb, var(--fm-lit) 85%, var(--ec-accent));
    }

    .fm-pane--busiest:hover {
        background-color: var(--fm-accent-hover);
    }

    .fm-thread__bubble:hover,
    .fm-event:hover,
    .fm-course:hover,
    .fm-feature:hover {
        border-color: var(--fm-control);
        box-shadow: inset 0 1px 0 var(--fm-glow-hover);
    }

    .fm-link-cta:hover {
        color: var(--fm-accent-ink-hover);
        text-underline-offset: 2px;
    }

    .fm-link-cta:hover svg,
    .fm-row:hover .fm-row__arrow {
        transform: translateX(3px);
    }

    .fm-group:hover .fm-group__name,
    .fm-row:hover .fm-row__title {
        color: var(--fm-accent-ink);
    }

    .fm-group:hover .fm-group__chevron {
        transform: translateX(2px);
    }

    .fm-panel__more a:hover,
    .fm-map__open:hover,
    .fm-welcome__link:hover,
    .fm-activity__actor:hover,
    .fm-leader__name:hover {
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
    }

    .fm-map__track:not(.fm-map__track--current):hover {
        border-block-end-color: var(--ec-border);
        color: var(--ec-fg);
    }

    .fm-btn--ink:hover {
        background-color: #1b2a2e;
        color: var(--ec-accent);
    }

    .fm-news > p:last-child > a:last-child:hover {
        background-color: rgb(11 21 23 / 0.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fm-link-cta svg,
    .fm-row__arrow,
    .fm-group__chevron {
        transition: none;
    }
}

/* FORME editorial sections. Authored Joomla articles and Custom modules share these classes.
   Native component apps retain their own DOM, behavior and scoped styles. */
.fm-page, .fm-landing { color: var(--ec-fg); font: 400 1.0625rem/1.65 var(--ec-font-body); }
.fm-page :where(h1,h2,h3,h4,p,figure,blockquote) { margin: 0; }
.fm-page :where(img), .fm-landing :where(img) { display: block; inline-size: 100%; }
.fm-page a:not(.fm-button), .fm-landing a:not(.fm-button) { color: inherit; text-underline-offset: .22em; }
.fm-page a:not(.fm-button):hover, .fm-landing a:not(.fm-button):hover { color: var(--ts-link-hover); }
.fm-section { margin: 0; padding-block: var(--ec-sect-y); }
/* Bare editorial rows need one shared gap. Padded heroes/sections and section
   headings already own their spacing, so they do not receive a second gap. */
:is(.fm-page, .fm-landing) > :is(.fm-grid, .fm-split, .fm-faq, .fm-callout):not(.fm-section, .fm-hero) + :is(.fm-grid, .fm-split, .fm-faq, .fm-callout):not(.fm-section, .fm-hero) {
    margin-block-start: var(--ec-sect-y);
}
.fm-section--muted { background: var(--ec-surface-2); border-image: linear-gradient(var(--ec-surface-2),var(--ec-surface-2)) fill 0 / 0 / 0 100vmax; }
.fm-section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; margin-block-end: 2.5rem; }
.fm-section-head > div { max-inline-size: 42rem; }
.fm-section-head p { margin-block-start: 1rem; color: var(--ec-fg-2); max-inline-size: 42rem; }
.fm-eyebrow { display: block; margin: 0 0 1.5rem; color: var(--ec-fg-2); font: 600 .75rem/1.5 var(--ec-font-body); letter-spacing: .16em; text-transform: uppercase; }
.fm-page .fm-display, .fm-landing .fm-display { margin: 0; max-inline-size: 12ch; color: var(--ec-fg); font: var(--ec-disp-weight) var(--fm-t-display-xl)/1.04 var(--ec-font-display); letter-spacing: -.065em; text-wrap: balance; }
.fm-display em, .fm-title em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.055em; }
.fm-page .fm-title, .fm-landing .fm-title { margin: 0; max-inline-size: 24ch; color: var(--ec-fg); font: var(--ec-disp-weight) var(--fm-t-display-l)/1.13 var(--ec-font-display); letter-spacing: -.045em; text-wrap: balance; }
.fm-page .fm-lead, .fm-landing .fm-lead { max-inline-size: 40rem; margin-block: 1.75rem 0; color: var(--ec-fg-2); font: 400 var(--fm-t-lede)/1.65 var(--ec-font-body); }
.fm-hero { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); align-items: center; gap: clamp(2rem,6vw,5rem); padding-block: clamp(3.5rem,6vw,5rem); }
.fm-hero-copy { min-inline-size: 0; padding-block: 1rem; }
.fm-hero-copy > :first-child { margin-block-start: 0; }
.fm-hero-media { position: relative; margin: 0; min-inline-size: 0; }
.fm-hero-media img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--ec-img-radius); }
.fm-hero-media figcaption { margin-block-start: .75rem; color: var(--ec-fg-2); font: 400 .8125rem/1.5 var(--ec-font-body); }
.fm-hero--center { display: block; text-align: center; padding-block: var(--ec-sect-y) 3rem; }
.fm-hero--center :is(.fm-display,.fm-title,.fm-lead) { margin-inline: auto; }
.fm-hero--center .fm-display { max-inline-size: 16ch; }
.fm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .875rem; margin: 2rem 0 0; }
.fm-page .fm-button, .fm-landing .fm-button, a.fm-button, button.fm-button {
    display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
    min-block-size: 3rem; padding: .8rem 1.35rem; border: 1px solid var(--ec-accent);
    border-radius: var(--ec-btn-radius); background: var(--ec-accent); color: var(--ec-accent-fg);
    font: 500 .9375rem/1.4 var(--ec-font-body); text-decoration: none; text-align: center;
    transition: background-color var(--ec-dur-1) var(--ec-ease), transform var(--ec-dur-1) var(--ec-ease); cursor: pointer;
}
.fm-page .fm-button:hover, .fm-landing .fm-button:hover { background: var(--fm-accent-hover); color: var(--ec-accent-fg); transform: translateY(-1px); }
.fm-page .fm-button--outline, .fm-landing .fm-button--outline { background: transparent; border-color: var(--ts-control); color: var(--ec-fg); }
.fm-page .fm-button--outline:hover, .fm-landing .fm-button--outline:hover { background: var(--ec-surface-2); color: var(--ec-fg); }
.fm-page .fm-button--soft, .fm-landing .fm-button--soft { background: var(--ec-surface-2); border-color: var(--ec-surface-2); color: var(--ec-fg); }
.fm-page .fm-button--soft:hover, .fm-landing .fm-button--soft:hover { background: var(--ec-border); color: var(--ec-fg); }
.fm-button:focus-visible { outline: 2px solid var(--ts-focus); outline-offset: 4px; }
.fm-grid { display: grid; grid-template-columns: repeat(var(--ec-grid,3),minmax(0,1fr)); gap: var(--ec-grid-gap); margin: 0; padding: 0; list-style: none; }
.fm-grid--2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.fm-grid--3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.fm-grid--4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.fm-grid > * { min-inline-size: 0; }
.fm-card { position: relative; display: flex; flex-direction: column; overflow: hidden; min-inline-size: 0; background: var(--ec-surface); border: 1px solid var(--ec-border); border-radius: var(--ec-radius); box-shadow: var(--ec-shadow); }
.fm-card-media { display: block; margin: 0; overflow: hidden; background: var(--ec-surface-2); }
.fm-card-media img { inline-size: 100%; block-size: auto; aspect-ratio: 4/3; object-fit: cover; transition: transform var(--ec-dur-3) var(--ec-ease); }
.fm-card-media:hover img { transform: scale(1.025); }
.fm-card-body { display: flex; flex: 1; flex-direction: column; align-items: start; gap: 1rem; padding: clamp(1.25rem,2.4vw,2rem); }
.fm-card-body > p { margin: 0; color: var(--ec-fg-2); }
.fm-card-body .fm-actions { margin-block-start: auto; padding-block-start: .5rem; }
.fm-page .fm-card-title, .fm-landing .fm-card-title { margin: 0; color: var(--ec-fg); font: 500 var(--fm-t-h3)/1.3 var(--ec-font-display); letter-spacing: -.025em; }
.fm-card-title a { text-decoration: none; }
.fm-card-title a:hover { text-decoration: underline; }
.fm-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; margin: 0; color: var(--ec-fg-2); font-size: .8125rem; }
.fm-card--featured { border-color: var(--ts-control); }
.fm-page .fm-tag, .fm-landing .fm-tag { display: inline-flex; inline-size: fit-content; align-items: center; padding: .375rem .75rem; border: 1px solid var(--ec-border); border-radius: 999px; color: var(--ec-fg-2); background: var(--ec-surface-2); font: 500 .75rem/1.35 var(--ec-font-body); }
.fm-card-price { margin: 0; color: var(--ec-fg); font: 500 clamp(2rem,4vw,3.5rem)/1.15 var(--ec-font-display); letter-spacing: -.04em; }
.fm-card-price small { font: 400 .875rem/1.5 var(--ec-font-body); letter-spacing: 0; color: var(--ec-fg-2); }
.fm-stat { border-block-start: 1px solid var(--ec-border); padding-block: 1.5rem; }
.fm-stat strong { display: block; margin-block-end: .5rem; font: 500 clamp(2rem,4vw,3.5rem)/1.2 var(--ec-font-display); letter-spacing: -.04em; }
.fm-stat span { color: var(--ec-fg-2); font-size: .9375rem; }
.fm-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: clamp(2rem,7vw,6rem); }
.fm-split img { border-radius: var(--ec-img-radius); aspect-ratio: 5/4; object-fit: cover; }
.fm-split p { margin-block-start: 1.25rem; color: var(--ec-fg-2); }
.fm-quote { padding: 2rem 0; margin: 0; }
.fm-quote p { max-inline-size: 32ch; color: var(--ec-fg); font: 400 clamp(1.75rem,3vw,2.75rem)/1.4 Georgia,serif; letter-spacing: -.025em; }
.fm-quote cite { display: block; margin-block-start: 1.5rem; color: var(--ec-fg-2); font: 400 .875rem/1.5 var(--ec-font-body); }
.fm-callout { padding: clamp(2rem,5vw,4rem); border: 1px solid var(--ec-border); border-radius: var(--ec-radius); background: var(--ec-surface-2); }
.fm-callout p { margin-block-start: 1.25rem; max-inline-size: 46rem; color: var(--ec-fg-2); }
.fm-checklist { display: grid; gap: 1rem; margin: .5rem 0; padding: 0; list-style: none; }
.fm-checklist li { position: relative; padding-inline-start: 1.6rem; }
.fm-checklist li::before { content: '✓'; position: absolute; inset-inline-start: 0; color: var(--ts-success); font-weight: 700; }
.fm-rule { border: 0; border-block-start: 1px solid var(--ec-border); margin-block: 2rem; }
.fm-note { color: var(--ec-fg-2); font: 400 .875rem/1.6 var(--ec-font-body); }
.fm-faq { border-block-start: 1px solid var(--ec-border); }
.fm-faq details { border-block-end: 1px solid var(--ec-border); }
.fm-faq summary { padding-block: 1.5rem; min-block-size: 3rem; cursor: pointer; font-weight: 500; }
.fm-faq details > p { padding-block-end: 1.5rem; color: var(--ec-fg-2); max-inline-size: 50rem; }
.fm-page .fm-eyebrow, .fm-landing .fm-eyebrow { margin-block: 0 1.5rem; }
@media (max-width: 64rem) { .fm-grid--4 { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 47.999rem) {
    .fm-hero, .fm-split { grid-template-columns: minmax(0,1fr); gap: 2rem; }
    .fm-hero { padding-block: 2.75rem 3.5rem; }
    .fm-hero-media img { aspect-ratio: 4/3; max-block-size: 35rem; }
    .fm-page .fm-display, .fm-landing .fm-display { max-inline-size: 14ch; }
    .fm-grid, .fm-grid--2, .fm-grid--3 { grid-template-columns: minmax(0,1fr); }
    .fm-section-head { margin-block-end: 1.75rem; }
    .fm-actions { gap: .75rem; }
}
@media (max-width: 25rem) { .fm-grid--4 { grid-template-columns: minmax(0,1fr); } }
@media (prefers-reduced-motion: reduce) { .fm-card-media:hover img, .fm-page .fm-button:hover, .fm-landing .fm-button:hover { transform: none; } }

/* The supplied editorial section heading is a vertical group; its optional actions follow it. */
.fm-section-head { display: block; }
.fm-section-head > .fm-eyebrow { margin-block: 0 1rem; }
.fm-section-head > a { display: inline-flex; min-block-size: 2.75rem; align-items: center; margin-block-start: 1rem; }
img.fm-card-media { inline-size: 100%; block-size: auto; aspect-ratio: 4/3; object-fit: cover; }
.fm-page :is(p,.fm-lead) + .fm-button, .fm-landing :is(p,.fm-lead) + .fm-button { margin-block-start: 1.5rem; }
.fm-page .fm-link, .fm-landing .fm-link { display: inline-flex; align-items: center; min-block-size: 2.75rem; margin-block-start: auto; font-size: .9375rem; text-decoration: underline; }
.fm-hero-copy > .fm-card-meta { margin-block-start: 1.75rem; color: var(--ec-fg-2); }
.fm-landing > .fm-callout:last-child { margin-block-end: var(--ec-sect-y); }

/* Button modifiers work in Custom modules as well as article sections. */
a.fm-button--outline, button.fm-button--outline { background: transparent; border-color: var(--ts-control); color: var(--ec-fg); }
a.fm-button--outline:hover, button.fm-button--outline:hover { background: var(--ec-surface-2); color: var(--ec-fg); }
a.fm-button--soft, button.fm-button--soft { background: var(--ec-surface-2); border-color: var(--ec-surface-2); color: var(--ec-fg); }
@media (max-width: 39.999rem) { .ts-header__modules .fm-button { display: none; } }