/**
 * Mimeo · community: the avatar disc used by the chrome and every block, and the designed home,
 * "this week's issue" of the club zine (design spec §1.2, §6, §7, §8).
 *
 *  1. Avatar                    8. Club notes: activity, groups
 *  2. Home primitives           9. Route of the week: map proof, elevation
 *  3. Home rows and heads      10. Top helpers, stamps to collect, your standing
 *  4. Cover, stats, notice     11. Longreads (the featured view) and Learn
 *  5. Forum: threads, tabs     12. Newsletter
 *  6. Boards index, CTA card   13. Night edition (dark)
 *  7. Noticeboard: posters,    14. Phones and tablets, member curation
 *     poll
 *
 * Every surface declares its own type, spacing and list styles (addendum A6.3), so extension
 * resets on the same page never reach it. Numerals in Zilla stay old-style (design spec §0.10).
 * The misregistration is a precomputed text-shadow (§0.4), only on display type of 20px and up.
 * Avatar initials: the module gives tone = user id % 6, Mimeo prints tone % 3 (A accent with
 * white, B action blue with white, C yellow with ink; all at least 6.06:1).
 *
 * @copyright   Copyright (C) 2026 BulaSikku Technologies Private Limited. All rights reserved.
 * @license     GNU General Public License version 2 or later
 */

/* ==========================================================================
   1. Avatar
   ========================================================================== */

.ts-avatar {
    --mm-avatar-size: 2.5rem;
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: var(--mm-avatar-size);
    block-size: var(--mm-avatar-size);
    overflow: hidden;
    border-radius: 50%;
    background-color: var(--mm-avatar-a);
    color: var(--mm-avatar-a-fg);
    font-family: var(--ec-font-display);
    font-size: calc(var(--mm-avatar-size) * 0.375);
    font-weight: 700;
    font-synthesis: none;
    line-height: 1;
    text-transform: uppercase;
}

.ts-avatar--tone-1,
.ts-avatar--tone-4 {
    background-color: var(--mm-avatar-b);
    color: var(--mm-avatar-b-fg);
}

.ts-avatar--tone-2,
.ts-avatar--tone-5 {
    background-color: var(--mm-avatar-c);
    color: var(--mm-avatar-c-fg);
}

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

/* ==========================================================================
   2. Home primitives (tags, chips, more-links, cards, bars, stamps, badges)
   ========================================================================== */

.mm-tag {
    display: inline-flex;
    flex: none;
    align-items: center;
    min-block-size: 2rem;
    margin: 0;
    padding: 0 0.625rem;
    border-radius: min(var(--mm-r), 2px);
    background-color: var(--mm-tag-bg);
    color: var(--mm-tag-fg);
    font-family: var(--ec-font-body);
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
}

a.mm-tag {
    position: relative;
    z-index: 1;
}

.mm-chip {
    display: inline-flex;
    flex: none;
    align-items: center;
    block-size: 1.625rem;
    padding: 0 0.5rem;
    border: 1px solid transparent;
    border-radius: min(var(--mm-r), 2px);
    background-color: var(--mm-tag-bg);
    color: var(--mm-tag-fg);
    font-family: var(--ec-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.mm-chip--outline {
    border-color: var(--ec-border);
    background-color: transparent;
    color: var(--ec-fg-2);
}

.mm-more {
    display: inline-flex;
    align-items: center;
    gap: var(--mm-s-2);
    min-block-size: 2.75rem;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: underline;
    text-decoration-color: var(--mm-accent-ink);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    white-space: nowrap;
}

.mm-more__short {
    display: none;
}

.mm-more__icon {
    flex: none;
    transition: transform var(--ec-dur-1) var(--ec-ease);
}

.mm-link--band {
    display: inline-flex;
    align-items: center;
    gap: var(--mm-s-2);
    min-block-size: 2.75rem;
    color: var(--mm-on-band);
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: underline;
    text-decoration-color: var(--mm-yellow);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

.mm-link--band svg {
    flex: none;
}

.mm-card,
.mm-cta,
.mm-poll,
.mm-quiz,
.mm-leaders,
.mm-standing,
.mm-course,
.mm-event,
.mm-threads__panel {
    border: 1px solid var(--ec-border);
    border-radius: min(var(--mm-r), 2px);
    background-color: var(--ec-surface);
    color: var(--ec-fg);
}

.mm-bar {
    position: relative;
    display: block;
    block-size: 1.25rem;
    overflow: hidden;
    background-color: var(--mm-track);
}

.mm-bar__fill {
    display: block;
    block-size: 100%;
    max-inline-size: 100%;
    background-color: var(--mm-action);
}

.mm-stamp,
.mm-badge {
    display: block;
    flex: none;
    overflow: visible;
    transform: rotate(var(--mm-rot, 0deg));
}

.mm-stamp {
    color: var(--mm-accent-ink);
}

.mm-stamp--solved {
    color: var(--mm-success);
}

.mm-stamp__label {
    fill: var(--mm-on-band);
    font-family: var(--ec-font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
}

.mm-stamp--solved .mm-stamp__label {
    fill: var(--mm-success-fg);
}

.mm-badge {
    color: var(--mm-accent-ink);
    mix-blend-mode: multiply;
}

.mm-badge--action {
    color: var(--mm-action-ink);
}

.mm-badge--gold {
    color: var(--mm-yellow-ink);
}

.mm-badge__disc {
    fill: var(--mm-yellow);
}

.mm-badge__ring {
    font-family: var(--ec-font-display);
    font-size: 14px;
    font-weight: 700;
}

.mm-sec__meta,
.mm-index__column,
.mm-stamps__count {
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    white-space: nowrap;
}

.mm-sec__actions {
    display: flex;
    align-items: center;
    gap: var(--mm-s-6);
    margin: 0;
}

@media (hover: hover) {
    .mm-more:hover,
    .mm-link--band:hover {
        text-decoration-thickness: 3px;
    }

    .mm-more:hover {
        color: var(--mm-accent-hover);
    }

    .mm-more:hover .mm-more__icon {
        transform: translateX(3px);
    }

    a.mm-tag:hover {
        text-decoration: underline 2px;
        text-underline-offset: 3px;
    }
}

/* ==========================================================================
   3. Home rows and section heads (design spec §6.14): a 2px ink rule, 18px, then a 60px title
      row with the misregistered Zilla title at the start and the Courier meta and more-link at
      the end. Blocks print their actions first in the body; they are lifted into the head.
   ========================================================================== */

.ts-home .ts-sec {
    position: relative;
    margin: 0;
    padding: 0;
}

.ts-home .ts-sec + .ts-sec,
.ts-home .ts-bare + .ts-sec {
    margin-block-start: var(--mm-s-10);
}

.ts-home .ts-sec > .ts-sec__head,
.ts-home .mm-reads__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    min-block-size: 5rem;
    margin: 0 0 var(--mm-s-7);
    padding: 1.125rem 0 0;
    border-block-start: 2px solid var(--mm-rule-strong);
}

.ts-home .ts-sec__title,
.ts-home .mm-reads__title {
    position: relative;
    margin: 0;
    padding: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: clamp(2.25rem, 1.2rem + 2.55vw, 3.5rem);
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.015em;
    text-transform: none;
    text-shadow: 0.04em 0.03em 0 var(--mm-misreg);
    overflow-wrap: anywhere;
}

.ts-home .ts-sec__sub {
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
}

.ts-home .ts-sec > .ts-sec__body {
    margin: 0;
    padding: 0;
}

/* The block's actions go to the end of its head's title row. */
.ts-home .ts-sec > .ts-sec__body > * > .mm-sec__actions,
.ts-home .mm-reads__head > .mm-sec__actions {
    position: absolute;
    inset-block-start: calc(2px + 1.125rem + 1rem);
    inset-inline-end: 0;
    block-size: 2.75rem;
    align-items: center;
}

.ts-home .mm-reads__head {
    position: relative;
}

.ts-home .mm-reads__head > .mm-sec__actions {
    position: static;
    block-size: auto;
}

/* Rows whose head spans both columns (forum, noticeboard, club): the first column's section
   head and every block's actions move to the top of the row; both columns start below it. */
@media (min-width: 60rem) {
    .ts-home .ts-row:is([data-ts-row="forum"], [data-ts-row="noticeboard"], [data-ts-row="club"]):has(> .ts-col:first-child > .ts-sec:first-child > .ts-sec__head) {
        position: relative;
        padding-block-start: calc(var(--ec-sect-y) + var(--mm-head-h, 5rem) + var(--mm-s-7));
    }

    .ts-home .ts-row:is([data-ts-row="forum"], [data-ts-row="noticeboard"], [data-ts-row="club"]):has(> .ts-col:first-child > .ts-sec:first-child > .ts-sec__head) :is(.ts-sec, .mm-index) {
        position: static;
    }

    .ts-home .ts-row:is([data-ts-row="forum"], [data-ts-row="noticeboard"], [data-ts-row="club"]) > .ts-col:first-child > .ts-sec:first-child > .ts-sec__head {
        position: absolute;
        inset-block-start: var(--ec-sect-y);
        inset-inline: 0;
        margin: 0;
        padding-inline-end: var(--mm-head-actions, 0px);
    }

    .ts-home .ts-row:is([data-ts-row="forum"], [data-ts-row="noticeboard"], [data-ts-row="club"]):has(> .ts-col:first-child > .ts-sec:first-child > .ts-sec__head) .mm-sec__actions {
        position: absolute;
        inset-block-start: calc(var(--ec-sect-y) + 2px + 1.125rem + 1rem);
        inset-inline-end: 0;
        block-size: 2.75rem;
        align-items: center;
    }

    /* The content row: Longreads and a 448px Learn column (design spec §4.2). */
    .ts-home .ts-row[data-ts-row="content"]:has(> .ts-pos-sidebar-right:not(:empty)):not(:has(> .ts-pos-sidebar-left:not(:empty))) {
        grid-template-columns: minmax(0, 1fr) 20rem;
    }

    .ts-home .ts-row[data-ts-row="content"]:has(> .ts-pos-sidebar-right:not(:empty)):not(:has(> .ts-pos-sidebar-left:not(:empty))) > .ts-col {
        grid-column: auto;
    }
}

@media (min-width: 75rem) {
    .ts-home .ts-row[data-ts-row="content"]:has(> .ts-pos-sidebar-right:not(:empty)):not(:has(> .ts-pos-sidebar-left:not(:empty))) {
        grid-template-columns: minmax(0, 1fr) 28rem;
        column-gap: var(--mm-s-14);
    }
}

/* The Longreads close the page: 88px to the newsletter band (design spec §4.2). */
.ts-home .ts-row[data-ts-row="content"] {
    padding-block-end: var(--mm-s-4);
}

.ts-home .ts-pos-sidebar-right > :is(.ts-sec, .ts-bare) + :is(.ts-sec, .ts-bare) {
    margin-block-start: var(--mm-s-5);
}

/* ==========================================================================
   4. Cover, cover stats and the member notice bar (on the magenta band, design spec §1.2.1)
   ========================================================================== */

.mm-cover {
    position: relative;
    display: flex;
    flex-direction: column;
    min-block-size: 31.25rem;
    padding-block-end: var(--mm-s-8);
    color: var(--mm-on-band);
}

.mm-cover__copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-8);
    max-inline-size: 58rem;
}

.mm-cover__eyebrow {
    margin: 0;
    color: var(--mm-on-band);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
}

.mm-cover__title {
    margin: 0;
    padding: 0;
    color: var(--mm-on-band);
    font-family: var(--ec-font-display);
    font-size: clamp(4rem, 0.5rem + 10.8vw, 10rem);
    font-style: normal;
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.015em;
    text-shadow: 0.04em 0.03em 0 var(--mm-misreg-band);
    text-transform: none;
}

/* The line breaks only between phrases: two lines on the wide cover, three on a phone. */
.mm-cover__phrase {
    display: inline-block;
    white-space: nowrap;
}

.mm-cover__lede {
    max-inline-size: 37.5rem;
    color: var(--mm-on-band);
    font-family: var(--ec-font-body);
    font-size: 1.25rem;
    line-height: 1.5;
}

.mm-cover__lede > * {
    margin: 0;
}

.mm-cover__lede > * + * {
    margin-block-start: var(--mm-s-3);
}

.mm-cover__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mm-s-4) var(--mm-s-8);
    margin: 0;
}

.mm-cover--guest .mm-cover__cta {
    min-block-size: 3.25rem;
    padding-inline: 1.75rem;
    font-size: 1.125rem;
}

.mm-coverstamp {
    position: absolute;
    z-index: 1;
    inset-block-start: -0.75rem;
    inset-inline-start: min(58.125rem, calc(100% - 11rem));
    color: var(--mm-yellow);
    transform: rotate(-6deg);
}

.mm-coverstamp__ring {
    font-family: var(--ec-font-display);
    font-size: 15px;
    font-weight: 700;
}

.mm-coverstamp__week {
    font-family: var(--ec-font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
}

.mm-coverstamp__num {
    font-family: var(--ec-font-display);
    font-size: 44px;
    font-weight: 700;
}

.mm-cover__art {
    position: absolute;
    z-index: 0;
    display: block;
    pointer-events: none;
}

.mm-cover__art--wide {
    inset-block-end: 0;
    inset-inline-end: calc(-1 * var(--page-gutter, 0px));
    inline-size: 35rem;
    block-size: auto;
}

.mm-cover__art--narrow {
    display: none;
}

.mm-cover__band {
    fill: var(--ec-accent);
}

.mm-art-multiply {
    mix-blend-mode: multiply;
}

/* On the band the blue under-print is precomputed (multiply of offset and band), because the
   art sits in its own stacking context where a blend has nothing to multiply with. */
.mm-cover__art .mm-art-multiply {
    stroke: var(--mm-misreg-band);
    mix-blend-mode: normal;
}

/* Cover stats: 116px, 2px paper rules, big Zilla figures over Courier labels. */
.mm-stats {
    display: grid;
    grid-template-columns: repeat(var(--mm-stats, 4), minmax(0, 1fr));
    min-block-size: 7.25rem;
    margin: 0;
    padding: 0;
    border-block-start: 2px solid var(--mm-on-band);
    color: var(--mm-on-band);
}

.mm-stat {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: var(--mm-s-2);
    min-inline-size: 0;
    margin: 0;
    padding: var(--mm-s-5) var(--mm-s-6) var(--mm-s-4);
    border-inline-start: 2px solid var(--mm-on-band);
}

.mm-stat:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
}

.mm-stat__label {
    margin: 0;
    color: var(--mm-on-band);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
}

.mm-stat__value {
    display: flex;
    align-items: center;
    gap: var(--mm-s-4);
    margin: 0;
}

.mm-stat__figure {
    color: var(--mm-on-band);
    font-family: var(--ec-font-display);
    font-size: clamp(2.25rem, 1.85rem + 1.2vw, 3.25rem);
    font-weight: 700;
    line-height: 1;
}

.mm-facepile {
    display: inline-flex;
    align-items: center;
    padding-inline-start: 4px;
}

.mm-facepile__face.ts-avatar {
    --mm-avatar-size: 2rem;
    margin-inline-start: -4px;
    border: 2px solid var(--ec-accent);
    font-size: 0.8125rem;
}

.mm-facepile__face.ts-avatar--tone-0,
.mm-facepile__face.ts-avatar--tone-3 {
    background-color: var(--mm-paper);
    color: var(--mm-paper-ink);
}

.mm-facepile__more {
    margin-inline-start: var(--mm-s-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
}

/* The notice bar: one link on the yellow highlighter. */
.mm-notice {
    margin: 0;
}

.mm-notice__link {
    display: flex;
    align-items: center;
    gap: var(--mm-s-3);
    min-block-size: 3.5rem;
    color: var(--mm-yellow-ink);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    line-height: 1.3;
    text-decoration: none;
}

.mm-notice__link:focus-visible {
    outline: 3px solid var(--mm-yellow-ink);
    outline-offset: -3px;
}

.mm-notice__icon,
.mm-notice__chevron {
    flex: none;
}

.mm-notice__text {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mm-notice__text strong {
    font-weight: 700;
}

@media (hover: hover) {
    .mm-notice__link:hover .mm-notice__text {
        text-decoration: underline 2px;
        text-underline-offset: 4px;
    }
}

/* ==========================================================================
   5. Forum: thread rows and folder tabs (design spec §6.7, §6.12)
   ========================================================================== */

.mm-threads {
    display: flex;
    flex-direction: column;
}

.mm-tabs__list {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: var(--mm-s-1);
    block-size: 3rem;
    margin: 0;
    padding: 0;
}

.mm-tabs__tab {
    block-size: 2.75rem;
    margin: 0;
    padding: 0 1.25rem;
    border: 1px solid var(--ec-border);
    border-block-end: 0;
    border-radius: min(var(--mm-r), 2px) min(var(--mm-r), 2px) 0 0;
    background-color: var(--ec-surface-2);
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    appearance: none;
}

.mm-tabs__tab[aria-selected="true"] {
    block-size: 3rem;
    padding-inline: 1.375rem;
    background-color: var(--ec-surface);
    color: var(--ec-fg);
    transform: translateY(1px);
}

.mm-tabs__tab:focus-visible {
    outline-offset: -3px;
}

@media (hover: hover) {
    .mm-tabs__tab[aria-selected="false"]:hover {
        background-color: var(--ec-surface);
        color: var(--ec-fg);
    }
}

.mm-tabs [data-ts-tabs-inactive] {
    display: none;
}

.mm-tabs .mm-threads__panel {
    border-radius: 0 min(var(--mm-r), 2px) min(var(--mm-r), 2px);
}

.mm-threads__panel:focus-visible {
    outline-offset: -3px;
}

.mm-threads__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mm-thread {
    position: relative;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) 6rem 5.25rem;
    column-gap: var(--mm-s-5);
    align-items: center;
    min-block-size: 6.75rem;
    margin: 0;
    padding: var(--mm-s-2) var(--mm-s-7);
    border-block-end: 1px dashed var(--mm-rule);
}

.mm-thread:last-child {
    border-block-end: 0;
}

.mm-thread__avatar.ts-avatar {
    --mm-avatar-size: 3rem;
}

.mm-thread__body {
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-2);
    min-inline-size: 0;
}

.mm-thread__title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.mm-thread__title a {
    color: inherit;
    text-decoration: none;
}

.mm-thread__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.mm-thread__title a:focus-visible {
    outline: 0;
}

.mm-thread__title a:focus-visible::after {
    outline: 3px solid var(--ts-focus);
    outline-offset: -3px;
}

/* Unread threads carry a visible "New" in yellow highlighter (state as text, not a coloured mark). */
.mm-thread__unread {
    display: inline-block;
    margin-inline-end: var(--mm-s-1);
    padding: 0.0625rem 0.3125rem;
    vertical-align: 0.15em;
    background-color: var(--mm-yellow);
    color: var(--mm-yellow-ink);
    font-family: var(--ts-font-mono);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-shadow: none;
}

.mm-thread__meta {
    display: flex;
    align-items: center;
    gap: var(--mm-s-3);
    min-inline-size: 0;
    margin: 0;
}

/* Byline items (author, replies, age) are split by middle dots that lead each item and hang in
   the gap; the byline clips them at its edges, so a wrapped line never starts or ends with a dot. */
.mm-thread__byline {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5em;
    min-inline-size: 0;
    margin-inline: -0.25rem;
    padding-inline: 0.25rem;
    overflow-x: clip;
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
}

.mm-thread__bit {
    margin-inline-start: -1.5em;
    white-space: nowrap;
}

.mm-thread__bit::before {
    content: "·" / "";
    display: inline-block;
    inline-size: 1.5em;
    text-align: center;
}

.mm-thread__inline-replies {
    display: none;
}

.mm-thread__count {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--mm-s-1);
    margin: 0;
    grid-column: 3;
}

.mm-thread__count-value {
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.mm-thread__count-label {
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
}

.mm-thread__stamp {
    display: flex;
    justify-content: center;
    grid-column: 4;
}

.mm-threads__empty {
    margin: 0;
    padding: var(--mm-s-8) var(--mm-s-7);
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    line-height: 1.5;
}

.mm-threads__start {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mm-s-3) var(--mm-s-6);
    margin: var(--mm-s-6) 0 0;
}

.mm-threads__prompt {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

@media (hover: hover) {
    .mm-thread:hover {
        background-color: var(--ec-surface-2);
    }

    .mm-thread:hover .mm-thread__title a {
        text-decoration: underline 2px var(--mm-accent-ink);
        text-underline-offset: 4px;
    }
}

/* ==========================================================================
   6. Boards index (and every printed index) and the guest CTA card
   ========================================================================== */

.mm-index {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
}

.mm-index__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--mm-s-4);
    min-block-size: 3rem;
    margin: 0;
    padding: 0 0 0.625rem;
    border-block-end: 2px solid var(--mm-rule-strong);
}

.mm-index__title {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

.mm-index > .mm-sec__actions {
    position: absolute;
    inset-block-start: calc(-3.75rem - var(--mm-s-2));
    inset-inline-end: 0;
}

.mm-index__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mm-index__item {
    margin: 0;
    padding: 0;
}

.mm-index__row {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 0.875rem;
    min-block-size: 3rem;
    padding-block-start: 0.5625rem;
    color: var(--ec-fg);
    text-decoration: none;
}

.mm-index--groups .mm-index__row {
    min-block-size: 3.5rem;
    padding-block-start: 0.8125rem;
}

.mm-index__num {
    flex: none;
    inline-size: 2.25rem;
    color: var(--mm-accent-ink);
    font-family: var(--ec-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.mm-index__label {
    min-inline-size: 0;
    overflow: hidden;
    font-family: var(--ec-font-body);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mm-index__leader {
    position: relative;
    inset-block-start: -2px;
    flex: 1;
    min-inline-size: 1rem;
    border-block-end: 2px dotted var(--mm-leader);
}

.mm-index__count {
    flex: none;
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
}

@media (hover: hover) {
    .mm-index__row:hover .mm-index__label {
        text-decoration: underline 2px var(--mm-accent-ink);
        text-underline-offset: 4px;
    }
}

.ts-home .ts-pos-top-c > .ts-bare + .ts-bare {
    margin-block-start: var(--mm-s-8);
}

.mm-cta {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.625rem 1.75rem;
}

.mm-cta__copy {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.mm-cta__copy > * {
    margin: 0;
}

.mm-cta__copy :is(h2, h3, h4) {
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.mm-cta__copy p {
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    line-height: 1.55;
}

.mm-cta__action {
    margin: 0;
}

/* Without a forum the guest card is the row: copy at the start, the button at the end. */
@media (min-width: 48rem) {
    .ts-home .ts-row[data-ts-row="forum"]:not(:has(> .ts-pos-top-b:not(:empty))) .mm-cta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--mm-s-8);
    }

    .ts-home .ts-row[data-ts-row="forum"]:not(:has(> .ts-pos-top-b:not(:empty))) .mm-cta__copy {
        gap: var(--mm-s-2);
    }
}

/* ==========================================================================
   7. Noticeboard: event poster cards (design spec §6.6, §6.9) and the quick poll (§6.10)
   ========================================================================== */

.mm-events__scroller {
    margin: 0;
}

.mm-events__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mm-s-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mm-event {
    position: relative;
    display: flex;
    flex-direction: column;
    min-block-size: 27rem;
    margin: 0;
    overflow: hidden;
}

.mm-poster {
    --mm-poster-flood: var(--mm-fluoro);
    --mm-poster-ink: var(--mm-navy);
    --mm-poster-accent: var(--mm-offset);
    --mm-poster-second: var(--mm-offset);
    position: relative;
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-start;
    min-block-size: 13.875rem;
    padding-block: 1.125rem 0.5rem;
    overflow: hidden;
    background-color: var(--mm-poster-flood);
    color: var(--mm-poster-ink);
}

.mm-poster--f1 {
    --mm-poster-flood: var(--mm-offset);
    --mm-poster-ink: #FCFCFA;
    --mm-poster-accent: var(--mm-fluoro);
    --mm-poster-second: var(--mm-navy);
}

.mm-poster--f2 {
    --mm-poster-flood: var(--mm-navy);
    --mm-poster-ink: #FCFCFA;
    --mm-poster-accent: var(--mm-fluoro);
    --mm-poster-second: var(--mm-offset);
}

/* Teal prints its riso offset in fluoro pink, so the blue flood would repeat the first one and
   paper type on it would fall to 3:1: the second poster floods with the preset's teal instead. */
[data-ec-preset="teal"] .mm-poster--f0 {
    --mm-poster-accent: var(--ec-accent);
}

[data-ec-preset="teal"] .mm-poster--f1 {
    --mm-poster-flood: var(--ec-accent);
}

.mm-poster__art {
    position: absolute;
    inset: 0;
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

.mm-poster__pi { fill: var(--mm-poster-ink); }
.mm-poster__pa { fill: var(--mm-poster-accent); }
.mm-poster__p2 { fill: var(--mm-poster-second); }
.mm-poster__pb { fill: var(--mm-poster-flood); }
.mm-poster__spi { stroke: var(--mm-poster-ink); }
.mm-poster__spw { stroke: #FCFCFA; }

/* The day and the numeral sit in the poster's flow (not pinned boxes), so larger line or letter
   spacing (WCAG 1.4.12) grows the poster instead of cutting the numeral. */
.mm-poster__weekday,
.mm-poster__date {
    position: relative;
    margin-inline-start: 1rem;
    color: var(--mm-poster-ink);
    font-family: var(--ec-font-display);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.mm-poster__weekday {
    font-size: 1.875rem;
    letter-spacing: 1px;
}

.mm-poster__date {
    margin-block-start: 0.5rem;
    margin-inline-start: 0.5rem;
    font-size: 7.75rem;
    letter-spacing: -4px;
}

.mm-poster--f0 .mm-poster__date {
    margin-block-start: auto;
}

.mm-event__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--mm-s-4);
    padding: var(--mm-s-5);
}

.mm-event__top {
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-2);
}

.mm-event__when {
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
}

.mm-event__title {
    display: -webkit-box;
    min-block-size: 2.4em;
    margin: 0;
    overflow: hidden;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

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

.mm-event__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.mm-event__link:focus-visible {
    outline: 0;
}

.mm-event__link:focus-visible::after {
    outline: 3px solid var(--ts-focus);
    outline-offset: -3px;
}

.mm-event__place {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    min-inline-size: 0;
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    line-height: 1.3;
}

.mm-event__place svg {
    flex: none;
    margin-block-start: 0.05em;
}

.mm-event__place span {
    min-inline-size: 0;
    overflow-wrap: break-word;
}

.mm-event__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mm-s-3);
}

.mm-event__going {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
}

.mm-event__rsvp {
    position: relative;
    z-index: 1;
    min-block-size: 2.75rem;
    padding-inline: 1.125rem;
}

.mm-btn--on {
    border-color: var(--mm-action);
    background-color: var(--mm-action);
    color: var(--mm-action-fg);
}

@media (hover: hover) {
    .mm-event:hover {
        border-color: var(--ec-fg);
    }

    .mm-event:hover .mm-event__link {
        text-decoration: underline 2px var(--mm-accent-ink);
        text-underline-offset: 4px;
    }
}

/* The quick poll card. */
.mm-poll {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--mm-s-6);
    min-block-size: 27rem;
    padding: var(--mm-s-6);
}

.mm-poll__head {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.mm-poll__kicker,
.mm-quiz__kicker,
.mm-course__kicker {
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
}

.mm-poll__title {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.15;
}

.mm-poll__panel {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--mm-s-6);
    margin: 0;
}

.mm-poll__results:focus-visible {
    outline: 3px solid var(--ts-focus);
    outline-offset: 4px;
}


.mm-poll__options,
.mm-poll__choices,
.mm-poll__plain {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mm-poll__choices {
    gap: var(--mm-s-2);
}

.mm-poll__option {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0;
}

.mm-poll__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--mm-s-3);
    margin: 0;
}

.mm-poll__label {
    display: inline-flex;
    align-items: center;
    gap: var(--mm-s-2);
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
}

.mm-poll__yours {
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
}

.mm-poll__pct {
    color: var(--ec-fg);
    font-family: var(--ts-font-mono);
    font-size: 1.125rem;
    font-weight: 700;
}

.mm-poll__fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.mm-poll__choice {
    display: flex;
    align-items: center;
    gap: var(--mm-s-3);
    min-block-size: 3.25rem;
    padding: 0 var(--mm-s-4);
    border: 2px solid var(--ec-border);
    border-radius: min(var(--mm-r), 2px);
    cursor: pointer;
}

.mm-poll__choice:has(:checked) {
    border-color: var(--ec-fg);
}

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

.mm-poll__plain li {
    font-family: var(--ec-font-body);
    font-size: 1.125rem;
    font-weight: 600;
}

.mm-poll__error {
    margin: 0;
    color: var(--mm-error);
    font-family: var(--ec-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
}

.mm-poll__foot {
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-3);
    margin: 0;
}

.mm-poll__action {
    inline-size: 100%;
    min-block-size: 2.75rem;
}

/* The survey results card (the quick poll's fallback) asks its question under the title. */
.mm-poll__question {
    margin: 0 0 var(--mm-s-4);
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    line-height: 1.5;
}

/* ==========================================================================
   8. Club notes: activity rows and the groups index
   ========================================================================== */

.mm-activity__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mm-activity__item {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    column-gap: var(--mm-s-4);
    align-items: center;
    min-block-size: 3.5rem;
    margin: 0;
    padding: var(--mm-s-1) 0;
    border-block-end: 1px dashed var(--mm-rule);
}

.mm-activity__item:last-child {
    border-block-end: 0;
}

.mm-activity__avatar.ts-avatar {
    --mm-avatar-size: 2.25rem;
}

/* A row that carries links is never clipped: it wraps (the excerpt is already cut short in the
   layout), so the actor, the linked group and a focused link stay whole at 320px (WCAG 1.4.10). */
.mm-activity__text {
    position: relative;
    min-inline-size: 0;
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1.125rem;
    line-height: 1.35;
    overflow-wrap: break-word;
    white-space: normal;
}

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

/* A member's own post title keeps its own capitals: a dot sets it apart from the name. */
.mm-activity__said::before {
    content: "· " / "";
    color: var(--ec-fg-2);
}


.mm-activity__object {
    color: var(--ec-fg);
    font-weight: 700;
    text-decoration: underline 2px var(--mm-accent-ink);
    text-underline-offset: 4px;
}

.mm-activity__quote {
    quotes: "\201C" "\201D";
}

.mm-activity__end {
    display: flex;
    align-items: center;
    gap: var(--mm-s-3);
}

.mm-activity__thumbs {
    display: flex;
    align-items: center;
    gap: var(--mm-s-1);
}

.mm-activity__thumb {
    display: block;
    inline-size: 2.5rem;
    block-size: 2rem;
    object-fit: cover;
}

.mm-activity__extra {
    margin-inline-start: var(--mm-s-1);
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
}

@media (hover: hover) {
    a.mm-activity__actor:hover {
        text-decoration: underline 2px var(--mm-accent-ink);
        text-underline-offset: 4px;
    }

    a.mm-activity__object:hover {
        color: var(--mm-accent-hover);
        text-decoration-thickness: 3px;
    }
}

/* ==========================================================================
   9. Route of the week: the map proof with crop marks (design spec §6.11) and the elevation
   ========================================================================== */

.mm-route {
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-4);
}

.mm-map {
    position: relative;
    margin: 0;
    padding: var(--mm-s-6);
}

.mm-map__marks {
    position: absolute;
    inset: 0;
    display: block;
    inline-size: 100%;
    block-size: 100%;
    fill: none;
    stroke: var(--ec-fg);
    stroke-width: 1.5;
}

.mm-map__target {
    position: absolute;
    inset-inline-start: 50%;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin-inline-start: -0.625rem;
    background:
        linear-gradient(var(--ec-fg), var(--ec-fg)) center / 1.25px 100% no-repeat,
        linear-gradient(var(--ec-fg), var(--ec-fg)) center / 100% 1.25px no-repeat,
        radial-gradient(circle, transparent 4.4px, var(--ec-fg) 4.6px, var(--ec-fg) 5.6px, transparent 5.9px);
}

.mm-map__target--top {
    inset-block-start: 0.125rem;
}

.mm-map__target--bottom {
    inset-block-end: 0.125rem;
}

.mm-map__plate {
    position: relative;
    aspect-ratio: 11 / 5;
    overflow: hidden;
    background-color: var(--mm-map-ground);
}

.mm-map__svg {
    position: absolute;
    inset: 0;
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

.mm-map__ground {
    fill: var(--mm-map-ground);
}

.mm-map__grid {
    fill: none;
    stroke: var(--mm-map-casing);
    stroke-width: 1;
}

.mm-map__casing,
.mm-map__line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mm-map__casing {
    stroke: var(--mm-map-route-casing);
    stroke-width: 10;
}

.mm-map__line {
    stroke: var(--mm-action);
    stroke-width: 5;
}

.mm-map__km,
.mm-map__start {
    position: absolute;
    inset-block-start: var(--mm-y);
    inset-inline-start: var(--mm-x);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
}

[dir="rtl"] .mm-map__km,
[dir="rtl"] .mm-map__start {
    inset-inline-start: auto;
    left: var(--mm-x);
}

.mm-map__km {
    min-inline-size: 1.375rem;
    block-size: 1.375rem;
    padding: 0 0.25rem;
    border: 1.5px solid var(--mm-action);
    background-color: var(--ec-surface);
    color: var(--mm-action-ink);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1;
}

.mm-map__start {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border: 3px solid var(--mm-map-route-casing);
    border-radius: 50%;
    background-color: var(--mm-action);
    color: var(--mm-action-fg);
}

.mm-route__info {
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-2);
}

.mm-route__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mm-s-6);
    min-block-size: 3rem;
}

.mm-route__name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--mm-s-1) var(--mm-s-4);
    min-inline-size: 0;
}

.mm-route__title {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.mm-route__stats {
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
}

.mm-route__open {
    flex: none;
    min-block-size: 2.75rem;
    padding-inline: 1.25rem;
}

.mm-elev {
    margin: 0;
}

.mm-elev__svg {
    display: block;
    inline-size: 100%;
    block-size: 4rem;
    overflow: visible;
}

.mm-elev__hatch {
    fill: var(--mm-offset);
}

.mm-elev__grid {
    fill: none;
    stroke: var(--mm-rule);
    stroke-width: 1;
    stroke-dasharray: 3 4;
}

.mm-elev__offset,
.mm-elev__line {
    fill: none;
    stroke-width: 2.5;
    stroke-linejoin: round;
}

.mm-elev__offset {
    stroke: var(--mm-accent-ink);
    transform: translate(2px, 2px);
}

.mm-elev__line {
    stroke: var(--mm-offset);
    mix-blend-mode: multiply;
}

.mm-elev__base {
    fill: none;
    stroke: var(--ec-fg);
    stroke-width: 1;
}

.mm-elev__scale {
    position: relative;
    block-size: 1.5rem;
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.5rem;
}

.mm-elev__tick {
    position: absolute;
    inset-block-start: 0;
    left: var(--mm-x);
    transform: translateX(-50%);
    white-space: nowrap;
}

.mm-elev__tick:first-child {
    transform: none;
}

.mm-elev__tick--end {
    transform: translateX(-100%);
}

/* ==========================================================================
   10. Top helpers, stamps to collect and your standing
   ========================================================================== */

.mm-leaders {
    margin: 0;
    padding: 0 var(--mm-s-5);
    list-style: none;
}

.mm-leader {
    display: grid;
    grid-template-columns: 2.5rem 2.5rem minmax(0, 1fr) auto;
    column-gap: var(--mm-s-3);
    align-items: center;
    min-block-size: 3.5rem;
    margin: 0;
    border-block-end: 1px dashed var(--mm-rule);
}

.mm-leader:last-child {
    border-block-end: 0;
}

.mm-leader__rank {
    position: relative;
    display: block;
    color: var(--mm-accent-ink);
    font-family: var(--ec-font-display);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.mm-leader__rank[data-rank]::after,
.mm-standing__num[data-rank]::after {
    content: attr(data-rank) / ""; /* the outline copy is drawn, never read */
    position: absolute;
    inset-block-start: -0.04em;
    inset-inline-start: -0.05em;
    color: transparent;
    -webkit-text-stroke: 1.25px var(--ec-fg);
    pointer-events: none;
}

.mm-leader__avatar.ts-avatar {
    --mm-avatar-size: 2.5rem;
}

.mm-leader__who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.625rem;
    min-inline-size: 0;
}

/* Names are shown whole at every width and in every column: they wrap (and the dotted leader
   shrinks to nothing first) rather than end in an ellipsis (WCAG 1.4.10). */
.mm-leader__name {
    flex: 0 1 auto;
    min-inline-size: 0;
    /* a 44px hit area around the 22px line, without moving it */
    margin-block: -0.6875rem;
    padding-block: 0.6875rem;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    overflow-wrap: break-word;
    white-space: normal;
}

.mm-leader__you {
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
}

.mm-leader__points {
    color: var(--ec-fg);
    font-family: var(--ts-font-mono);
    font-size: 1.125rem;
    font-weight: 700;
    white-space: nowrap;
}

.mm-leader__unit {
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
}

.mm-leader--you {
    /* The yellow row takes the ink ring in both schemes (the Night ring is yellow). */
    --ts-focus: var(--mm-yellow-ink);
    background-color: var(--mm-yellow);
    color: var(--mm-yellow-ink);
}

.mm-leader--you :is(.mm-leader__rank, .mm-leader__name, .mm-leader__points, .mm-leader__unit, .mm-leader__you) {
    color: var(--mm-yellow-ink);
}

@media (hover: hover) {
    a.mm-leader__name:hover {
        text-decoration: underline 2px var(--mm-accent-ink);
        text-underline-offset: 4px;
    }
}

.mm-stamps {
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-3);
    margin-block-start: var(--mm-s-7);
}

.mm-stamps__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--mm-s-4);
}

.mm-stamps__title {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
}

.mm-stamps__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--mm-s-1);
    align-items: center;
    justify-items: center;
    min-block-size: 8.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mm-stamps__item {
    margin: 0;
}

.mm-stamps__item .mm-badge {
    inline-size: min(6.75rem, 100%);
    block-size: auto;
}

/* Your standing. */
.mm-standing {
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-5);
    padding: var(--mm-s-5);
}

.mm-standing__top {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr) 5.5rem;
    column-gap: var(--mm-s-3);
    align-items: center;
    min-block-size: 5.5rem;
}

.mm-standing__rank {
    display: flex;
    align-items: baseline;
    margin: 0;
    color: var(--mm-accent-ink);
    font-family: var(--ec-font-display);
    font-weight: 700;
    line-height: 1;
}

.mm-standing__num {
    position: relative;
    font-size: 5rem;
}

.mm-standing__num[data-rank]::after {
    -webkit-text-stroke-width: 1.5px;
}

.mm-standing__ord {
    color: var(--ec-fg);
    font-size: 1.75rem;
}

.mm-standing__points {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ts-font-mono);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.mm-standing__unit {
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
}

.mm-standing__gap {
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-2);
}

.mm-standing__figures {
    display: flex;
    justify-content: space-between;
    gap: var(--mm-s-3);
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 600;
}

.mm-standing__fig {
    margin-inline-start: var(--mm-s-2);
    font-family: var(--ts-font-mono);
    font-weight: 700;
}

.mm-standing__bar {
    block-size: 1rem;
}

.mm-standing__note {
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    line-height: 1.5;
}

.mm-standing__board {
    margin: 0;
    padding: var(--mm-s-2) 0 0;
    border-block-start: 2px solid var(--mm-rule-strong);
    list-style: none;
}

.mm-leader--compact {
    grid-template-columns: 1.5rem 2rem minmax(0, 1fr) auto;
    column-gap: 0.625rem;
    min-block-size: 3rem;
    padding: 0 var(--mm-s-2);
    border-block-end: 0;
}

.mm-leader--compact .mm-leader__rank {
    font-size: 1.375rem;
}

.mm-leader--compact .mm-leader__avatar.ts-avatar {
    --mm-avatar-size: 2rem;
}

.mm-leader--compact .mm-leader__name {
    flex: 0 1 auto;
    font-size: 1rem;
}

.mm-leader__leader {
    position: relative;
    inset-block-start: -3px;
    flex: 1 1 0;
    align-self: flex-end;
    min-inline-size: 0;
    margin-block-end: 0.625rem;
    border-block-end: 2px dotted currentColor;
    opacity: 1;
    color: var(--mm-leader);
}

.mm-leader--you .mm-chip {
    border-color: var(--mm-yellow-ink);
    background-color: transparent;
    color: var(--mm-yellow-ink);
}

.mm-leader--you .mm-leader__leader {
    color: var(--mm-yellow-ink);
}

.mm-leader--compact .mm-leader__points {
    font-size: 1rem;
}


.mm-standing__more {
    margin: 0;
}

/* ==========================================================================
   11. Longreads (the kit's featured view on the home) and Learn
   ========================================================================== */

.ts-home .ts-journal--featured {
    display: grid;
    grid-template-columns: minmax(0, 28.75rem) minmax(0, 1fr);
    gap: 0 var(--mm-s-6);
    counter-reset: mm-read;
}

.ts-home .ts-journal--featured > .mm-reads__head {
    grid-column: 1 / -1;
}

.ts-home .ts-journal--featured > .items-leading {
    display: block;
    grid-column: 1;
    margin: 0;
}

.ts-home .ts-journal--featured > .items-more {
    grid-column: 2;
    margin: 0;
}

.ts-home .ts-journal--featured > :only-of-type.items-leading {
    grid-column: 1 / -1;
}

.ts-home .ts-journal--featured .ts-postcard {
    display: flex;
    flex-direction: column;
    min-block-size: 28.5rem;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--ec-border);
    border-radius: min(var(--mm-r), 2px);
    background-color: var(--ec-surface);
    box-shadow: 3px 3px 0 0 var(--mm-offset);
    counter-increment: mm-read;
}

.ts-home .ts-journal--featured .ts-postcard__media {
    position: relative;
    flex: none;
    block-size: 18.75rem;
    margin: 0;
    overflow: hidden;
}

.ts-home .ts-journal--featured .ts-postcard__media img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* Without an intro image the card prints template riso art: a bicycle in riso blue over a
   fluoro hatch on the paper ground (decorative; the monogram is hidden). The blog cards
   (.ts-journal) share it, so an article carries the same art on the home and in the blog. */
:is(.ts-home .ts-journal--featured, .ts-journal) .ts-postcard__media--placeholder {
    background:
        repeating-linear-gradient(45deg, var(--mm-offset) 0 1.8px, transparent 1.8px 5px) bottom / 100% 2.75rem no-repeat,
        var(--mm-surface-3, var(--ec-surface-2));
}

:is(.ts-home .ts-journal--featured, .ts-journal) .ts-postcard__media--placeholder::before,
:is(.ts-home .ts-journal--featured, .ts-journal) .ts-postcard__media--placeholder::after {
    content: "";
    position: absolute;
    inset: 6% 12% 12%;
    -webkit-mask: var(--mm-bike-mask) center / contain no-repeat;
    mask: var(--mm-bike-mask) center / contain no-repeat;
}

:is(.ts-home .ts-journal--featured, .ts-journal) .ts-postcard__media--placeholder::before {
    --mm-bike-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 240'%3E%3Ccircle cx='96' cy='160' r='70' fill='%23000'/%3E%3Ccircle cx='304' cy='160' r='70' fill='%23000'/%3E%3C/svg%3E");
    background: repeating-linear-gradient(45deg, var(--mm-fluoro) 0 1.8px, transparent 1.8px 5px);
    transform: translate(3px, 3px);
}

:is(.ts-home .ts-journal--featured, .ts-journal) .ts-postcard__media--placeholder::after {
    --mm-bike-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 240' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='96' cy='160' r='70' stroke-width='10'/%3E%3Ccircle cx='304' cy='160' r='70' stroke-width='10'/%3E%3Cpath d='M96 160L170 164L250 94M170 164L152 76L96 160M152 76L244 74L250 94L304 160' stroke-width='12'/%3E%3Cpath d='M152 76L146 52M126 50H170M244 74L250 50M240 48C262 40 282 46 286 62M170 164L186 192M178 194H198' stroke-width='10'/%3E%3C/svg%3E");
    background-color: var(--mm-offset);
    mix-blend-mode: multiply;
}

:is(.ts-home .ts-journal--featured, .ts-journal) .ts-postcard__monogram {
    display: none;
}

.ts-home .ts-journal--featured .ts-postcard__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.625rem;
    padding: var(--mm-s-6);
}

.ts-home .ts-journal--featured .ts-postcard__body > .page-header {
    order: 2;
    margin: 0;
    padding: 0;
    border: 0;
}

.ts-home .ts-journal--featured .ts-postcard__body :is(h2, h3) {
    order: 2;
    margin: 0;
    font-family: var(--ec-font-display);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.15;
}

.ts-home .ts-journal--featured .ts-postcard__body :is(h2, h3) a {
    color: var(--ec-fg);
    text-decoration: none;
}

.ts-home .ts-journal--featured .ts-postcard__body :is(h2, h3) a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.ts-home .ts-journal--featured .ts-postcard {
    position: relative;
}

.ts-home .ts-journal--featured .ts-postcard__body :is(h2, h3) a:focus-visible {
    outline: 0;
}

.ts-home .ts-journal--featured .ts-postcard__body :is(h2, h3) a:focus-visible::after {
    outline: 3px solid var(--ts-focus);
    outline-offset: -3px;
}

/* The info block prints as one Courier line: "Author · date", without labels or icons. */
.ts-home .ts-journal--featured .ts-postcard__body :is(.article-info, dl) {
    order: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5em;
    margin: 0;
    padding: 0;
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
}

.ts-home .ts-journal--featured .ts-postcard__body :is(.article-info, dl) :is(dt, .article-info-term) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.ts-home .ts-journal--featured .ts-postcard__body :is(.article-info, dl) dd {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
}

/* "Written by:" is a bare text node in core's author layout: only the name prints. */
.ts-home .ts-journal--featured .ts-postcard__body :is(.article-info, dl) dd.createdby {
    font-size: 0;
}

.ts-home .ts-journal--featured .ts-postcard__body :is(.article-info, dl) dd.createdby > :is(span, a) {
    font-size: 0.9375rem;
}

.ts-home .ts-journal--featured .ts-postcard__body :is(.article-info, dl) dd + dd::before {
    content: "·";
    content: "·" / "";
    margin-inline-end: 0.5em;
}

.ts-home .ts-journal--featured .ts-postcard__body :is(.article-info, dl) :is(svg, .icon-user, .icon-calendar, [class^="icon-"], [class*=" icon-"]) {
    display: none;
}

.ts-home .ts-journal--featured .ts-postcard__excerpt,
.ts-home .ts-journal--featured .ts-postcard__body :is(.readmore, .tags, ul.tags, .ts-tags) {
    display: none;
}

/* The linked items: the numbered longread index (02, 03 …). */
.ts-home .ts-journal--featured .ts-postlinks {
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-10);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ts-home .ts-journal--featured .ts-postlinks__item {
    margin: 0;
    padding: 0;
    counter-increment: mm-read;
}

.ts-home .ts-journal--featured .ts-postlinks__link {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-3);
    padding-block-start: var(--mm-s-3);
    border-block-start: 2px solid var(--mm-rule-strong);
    color: var(--ec-fg);
    text-decoration: none;
}

.ts-home .ts-journal--featured .ts-postlinks__link::before {
    content: counter(mm-read, decimal-leading-zero);
    color: var(--mm-accent-ink);
    font-family: var(--ec-font-display);
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
}

.ts-home .ts-journal--featured .ts-postlinks__title {
    font-family: var(--ec-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.ts-home .ts-journal--featured .ts-postlinks__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5em;
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
}

.ts-home .ts-journal--featured .ts-postlinks__meta > * + *::before {
    content: "·";
    content: "·" / "";
    margin-inline-end: 0.5em;
}

/* Board: the index items read "Author · N min read"; the date is the lead card's business. */
.ts-home .ts-journal--featured .ts-postlinks__meta:has(> .ts-postlinks__readtime) > .ts-postlinks__date {
    display: none;
}

.ts-home .ts-journal--featured .ts-postlinks__arrow {
    display: none;
}

@media (hover: hover) {
    .ts-home .ts-journal--featured .ts-postlinks__link:hover .ts-postlinks__title,
    .ts-home .ts-journal--featured .ts-postcard:hover :is(h2, h3) a {
        text-decoration: underline 2px var(--mm-accent-ink);
        text-underline-offset: 4px;
    }
}

/* Learn: course rows and the pop quiz. */
.mm-courses__list {
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mm-course {
    position: relative;
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    column-gap: var(--mm-s-4);
    align-items: center;
    min-block-size: 7rem;
    margin: 0;
    padding: var(--mm-s-3);
}

.mm-course__thumb {
    display: block;
    inline-size: 5.5rem;
    block-size: 5.5rem;
    object-fit: cover;
}

.mm-course__flood { fill: var(--mm-navy); }
.mm-course__thumb--b .mm-course__flood { fill: var(--mm-fluoro); }
.mm-course__ink { stroke: var(--mm-fluoro); }
.mm-course__thumb--b .mm-course__ink { stroke: var(--mm-offset); }
.mm-course__paper { stroke: #FCFCFA; }

.mm-course__body {
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-1);
    min-inline-size: 0;
}

.mm-course__title {
    margin: 0;
    font-family: var(--ec-font-display);
    font-size: clamp(1.25rem, 1.18rem + 0.3vw, 1.375rem);
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: break-word;
    text-wrap: balance;
}

.mm-course__link {
    color: var(--ec-fg);
    text-decoration: none;
}

.mm-course__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.mm-course__link:focus-visible {
    outline: 0;
}

.mm-course__link:focus-visible::after {
    outline: 3px solid var(--ts-focus);
    outline-offset: -3px;
}

.mm-course__by {
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    line-height: 1.3;
}

.mm-course__bar {
    block-size: 0.5rem;
    margin-block-start: var(--mm-s-1);
}

@media (hover: hover) {
    .mm-course:hover {
        border-color: var(--ec-fg);
    }

    .mm-course:hover .mm-course__link {
        text-decoration: underline 2px var(--mm-accent-ink);
        text-underline-offset: 4px;
    }
}

.mm-quiz {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--mm-s-6);
    min-block-size: 12.25rem;
    padding: var(--mm-s-5) var(--mm-s-6);
}

.mm-quiz__top {
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-2);
}

.mm-quiz__title {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
}

.mm-quiz__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mm-s-3);
}

.mm-quiz__foot .mm-btn,
.mm-cta__action .mm-btn {
    min-block-size: 2.75rem;
    padding-inline: 1.25rem;
}

.mm-quiz__pass {
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
}

/* ==========================================================================
   12. Newsletter (the ride-sheet band glued to the footer)
   ========================================================================== */

.mm-newsletter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 35rem);
    gap: var(--mm-s-6) var(--mm-s-14);
    align-items: end;
}

.mm-newsletter__title {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: clamp(2rem, 1.72rem + 1.143vw, 2.75rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.015em;
    text-shadow: 0.04em 0.03em 0 var(--mm-misreg);
    max-inline-size: 13em;
    text-wrap: balance;
}

.mm-newsletter__side {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--mm-s-4) var(--mm-s-6);
}

.mm-newsletter__copy {
    flex: 1 1 16rem;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    line-height: 1.55;
}

.mm-newsletter__copy > * {
    margin: 0;
}

.mm-newsletter__action {
    margin: 0;
}

.mm-newsletter__button {
    min-block-size: 3.25rem;
    padding-inline: 1.5rem;
}

/* ==========================================================================
   13. Night edition (dark): stamps print their label on carbon, multiply turns off.
   ========================================================================== */

[data-color-scheme="dark"] .mm-stamp:not(.mm-stamp--solved) .mm-stamp__label {
    fill: var(--ec-bg);
}

[data-color-scheme="dark"] :is(.mm-badge, .mm-art-multiply, .mm-elev__line) {
    mix-blend-mode: normal;
}

[data-color-scheme="dark"] .mm-elev__line {
    stroke: var(--mm-action);
}

[data-color-scheme="dark"] :is(.ts-home .ts-journal--featured, .ts-journal) .ts-postcard__media--placeholder::after {
    background-color: var(--mm-action);
    mix-blend-mode: normal;
}

/* ==========================================================================
   14. Phones and tablets; member curation (design spec §7.3, §8)
   ========================================================================== */

@media (max-width: 74.99rem) {
    .mm-events__list {
        gap: var(--mm-s-4);
    }

    .mm-thread {
        grid-template-columns: 3rem minmax(0, 1fr) 4.5rem 4.5rem;
        column-gap: var(--mm-s-4);
        padding-inline: var(--mm-s-5);
    }

    .mm-thread__stamp .mm-stamp {
        inline-size: 4.5rem;
        block-size: 4.5rem;
    }

    .mm-coverstamp {
        inset-inline-start: auto;
        inset-inline-end: 0;
    }
}

@media (min-width: 60rem) and (max-width: 74.99rem) {
    /* The poll drops under the three posters; the Longreads split in halves. */
    .ts-home .ts-row[data-ts-row="noticeboard"] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ts-home .ts-row[data-ts-row="noticeboard"] .mm-poll {
        min-block-size: 0;
    }

    .ts-home .ts-journal--featured {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .mm-leader:not(.mm-leader--compact) .mm-chip {
        display: none;
    }
}

@media (max-width: 59.99rem) {
    /* Tablets and phones: the home's split rows stack (the Studio 8/4 spans are for wide screens). */
    .ts-home .ts-row:is([data-ts-row="forum"], [data-ts-row="noticeboard"], [data-ts-row="club"], [data-ts-row="route"], [data-ts-row="content"]) > .ts-col {
        grid-column: 1 / -1;
    }

    .ts-home .ts-row:is([data-ts-row="forum"], [data-ts-row="noticeboard"], [data-ts-row="club"], [data-ts-row="route"], [data-ts-row="content"]) {
        row-gap: var(--mm-s-10);
    }

    .mm-cover__art--wide,
    .mm-coverstamp {
        display: none;
    }

    .mm-cover .mm-cover__art--narrow {
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: calc(-1 * var(--page-gutter, 0px));
        display: block;
    }

    .mm-cover--member .mm-cover__art--narrow {
        inset-block-start: 2.5rem;
    }

    .mm-cover__copy {
        padding-inline-end: 7rem;
    }

    .mm-newsletter {
        grid-template-columns: minmax(0, 1fr);
    }

    .mm-index > .mm-sec__actions {
        position: static;
        justify-content: flex-end;
        block-size: auto;
        margin: 0 0 var(--mm-s-2);
    }

    .ts-home .ts-journal--featured {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--mm-s-8);
    }

    .ts-home .ts-journal--featured > .items-more {
        grid-column: 1;
    }

    .mm-poll {
        min-block-size: 0;
    }

    .mm-event {
        min-block-size: 0;
    }
}

@media (max-width: 47.99rem) {
    /* Section heads: 60px, a 14px gap, the more-link beside the title. */
    .ts-home .ts-sec > .ts-sec__head,
    .ts-home .mm-reads__head {
        min-block-size: 3.75rem;
        margin-block-end: var(--mm-s-5);
        padding-block-start: 0.875rem;
    }

    /* On a phone the more-link stays at the end of the title row (the title keeps room for it
       and wraps if it must); the groups index prints its link above its own head. */
    .ts-home .ts-sec > .ts-sec__body > * > .mm-sec__actions {
        inset-block-start: calc(2px + 0.875rem);
        block-size: 2.75rem;
    }

    .ts-home .ts-sec:has(> .ts-sec__body > * > .mm-sec__actions:not(.mm-hide-phone)) > .ts-sec__head > .ts-sec__title {
        padding-inline-end: 7rem;
    }

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

    .mm-more__short {
        display: inline;
    }



    .ts-home .ts-sec__title,
    .ts-home .mm-reads__title {
        font-size: 2.25rem;
    }

    .mm-hide-phone,
    .mm-threads .mm-sec__meta {
        display: none;
    }

    /* Cover: eyebrow, three-line title, the cropped wheel top right, no stamp or lede. */
    .mm-cover {
        min-block-size: 0;
        padding-block-end: var(--mm-s-10);
    }

    .mm-cover__copy {
        gap: var(--mm-s-6);
    }

    .mm-cover__eyebrow {
        margin-block-end: calc(-1 * var(--mm-s-3));
    }

    .mm-cover__title {
        font-size: clamp(3rem, 22.86vw - 1.5625rem, 4rem);
        max-inline-size: min(18rem, calc(100% - 4.5rem));
    }

    .mm-cover--guest .mm-cover__title {
        max-inline-size: none;
    }

    .mm-cover__lede {
        font-size: 1.125rem;
    }

    .mm-cover__copy {
        padding-inline-end: 0;
    }

    .mm-cover--guest .mm-cover__title,
    .mm-cover--guest .mm-cover__lede {
        max-inline-size: calc(100% - 5rem);
    }

    .mm-cover__actions {
        gap: var(--mm-s-4) var(--mm-s-6);
    }

    .mm-cover__cta,
    .mm-cover--guest .mm-cover__cta {
        min-block-size: 3rem;
        padding-inline: 1.25rem;
        font-size: 1rem;
    }

    /* Stats: two figures, 88px. */
    .mm-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-block-size: 5.5rem;
    }

    .mm-stat--wide {
        display: none;
    }

    .mm-stat {
        gap: 0.375rem;
        padding: 0.875rem 0 0.625rem var(--mm-s-4);
    }

    .mm-stat:first-child {
        padding-inline-end: var(--mm-s-3);
    }

    .mm-stat__figure {
        font-size: 2.25rem;
    }

    .mm-facepile {
        display: none;
    }

    /* Threads: the compact index, three rows, no avatars or tabs. */
    .mm-tabs__list {
        display: none;
    }

    .mm-tabs .mm-tabs__panel {
        display: none;
    }

    .mm-tabs .mm-tabs__list + .mm-tabs__panel {
        display: block;
        border-radius: min(var(--mm-r), 2px);
    }

    .mm-thread {
        grid-template-columns: minmax(0, 1fr);
        min-block-size: 9.125rem;
        padding: var(--mm-s-4);
    }

    .mm-thread--stamped {
        grid-template-columns: minmax(0, 1fr) 4.5rem;
        column-gap: var(--mm-s-3);
    }

    .mm-thread:nth-child(n + 4) {
        display: none;
    }

    .mm-thread__avatar,
    .mm-thread__count {
        display: none;
    }

    .mm-thread__stamp {
        grid-column: 2;
        grid-row: 1;
    }

    .mm-thread__body {
        gap: var(--mm-s-2);
    }

    .mm-thread__meta {
        display: contents;
    }

    .mm-thread__meta .mm-tag {
        order: -1;
        align-self: flex-start;
    }

    .mm-thread__title {
        font-size: 1.125rem;
        line-height: 1.3;
        -webkit-line-clamp: 3;
    }

    .mm-thread__inline-replies {
        display: inline;
    }


    .mm-thread__stamp .mm-stamp {
        inline-size: 4.5rem;
        block-size: 4.5rem;
    }

    .mm-threads__start {
        flex-wrap: nowrap;
    }

    /* Events: a sideways scroller of 248px cards that bleeds right. */
    .mm-events__scroller {
        margin-inline-end: calc(-1 * var(--page-gutter, 1rem));
        padding-block-end: var(--mm-s-1);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline-start: 0;
        scrollbar-width: none;
    }

    .mm-events__scroller::-webkit-scrollbar {
        display: none;
    }

    .mm-events__scroller:focus-visible {
        outline-offset: 2px;
    }

    .mm-events__list {
        display: flex;
        gap: var(--mm-s-3);
        inline-size: max-content;
        padding-inline-end: var(--page-gutter, 1rem);
    }

    .mm-event {
        flex: none;
        inline-size: 15.5rem;
        min-block-size: 21.5rem;
        scroll-snap-align: start;
    }

    .mm-poster {
        min-block-size: 9.25rem;
        padding-block: 0.75rem 0.25rem;
    }

    .mm-poster__weekday {
        margin-inline-start: 0.875rem;
        font-size: 1.625rem;
    }

    .mm-poster__date {
        margin-block-start: 0.25rem;
        font-size: 6rem;
        letter-spacing: -3px;
    }

    .mm-poster--f0 .mm-poster__date {
        margin-block-start: auto;
    }

    .mm-event__body {
        padding: var(--mm-s-4);
    }

    .mm-event__title {
        min-block-size: 0;
        font-size: 1.25rem;
    }

    /* Route: 200px proof, 9px crop ticks, title and action on one row, no profile. */
    .mm-map {
        padding: 0.875rem;
    }

    .mm-map__target {
        inline-size: 1rem;
        block-size: 1rem;
        margin-inline-start: -0.5rem;
    }

    .mm-map__target--top {
        inset-block-start: -0.125rem;
    }

    .mm-map__target--bottom {
        inset-block-end: -0.125rem;
    }

    .mm-map__line {
        stroke-width: 8;
    }

    .mm-map__casing {
        stroke-width: 16;
    }

    .mm-route__name {
        display: contents;
    }

    .mm-route__info {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--mm-s-2) var(--mm-s-3);
    }

    .mm-route__row {
        display: contents;
    }

    .mm-route__title {
        font-size: 1.375rem;
    }

    .mm-route__stats {
        grid-column: 1 / -1;
        grid-row: 2;
        white-space: normal;
    }

    .mm-elev {
        display: none;
    }

    /* Standing: the compact card, and the board's 48px after it. */
    .ts-home .ts-row[data-ts-row="route"]:has(.mm-standing) {
        padding-block-end: var(--mm-s-12);
    }

    .mm-standing__top {
        grid-template-columns: auto minmax(0, 1fr) 4.75rem;
    }

    .mm-standing__stamp .mm-stamp {
        inline-size: 4.75rem;
        block-size: 4.75rem;
    }

    .mm-leaders {
        padding-inline: var(--mm-s-3);
    }

    .mm-leader {
        grid-template-columns: 2rem 2.5rem minmax(0, 1fr) auto;
    }

    .mm-leader:not(.mm-leader--compact) .mm-chip {
        display: none;
    }

    .mm-stamps__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: var(--mm-s-4);
    }

    .mm-activity__thumbs {
        display: none;
    }

    /* Members on phones get the board's curated issue (design spec §7.3): the sections the
       mobile member board leaves out (poll, club notes, stamps, Longreads, Learn, newsletter)
       wait for a wider screen. The skip link lands on the cover (main holds every row). */
    .ts-home.ts-member .ts-row[data-ts-row="content"],
    .ts-home.ts-member .mm-member-desk,
    .ts-home.ts-member .ts-row:has(> .ts-col > .mm-member-desk):not(:has(> .ts-col > :not(.mm-member-desk))) {
        display: none;
    }

    .ts-home.ts-member .ts-col:has(> .mm-member-desk):not(:has(> :not(.mm-member-desk))) {
        display: none;
    }

    .ts-home.ts-member .mm-member-desk + :is(.ts-sec, .ts-bare) {
        margin-block-start: 0;
    }
}

@media (max-width: 23.75rem) {
    .mm-threads__start {
        flex-wrap: wrap;
    }

    .mm-cover__actions {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Reflow (WCAG 1.4.10): at 320-480 CSS px (phones, 400% zoom) the member notice, thread and event
   titles wrap in full instead of being cut with an ellipsis. */
@media (max-width: 30rem) {
    .mm-notice__text {
        overflow: visible;
        white-space: normal;
    }

    .ts-home :is(.mm-thread__title, .mm-event__title) {
        display: block;
        overflow: visible;
        -webkit-line-clamp: unset;
    }
}