/**
 * Mimeo · layout: the page frame and the chrome (design spec §4.2, §5; contract §2.2, §2.10,
 * §2.11). The masthead is printed on the band: the issue strip (library top bar), the brand row
 * and the ruled, numbered navigation bar share one --ec-accent flood that the cover row
 * continues on the home page. Everything keys on the library's markup: .ts-topbar,
 * .ts-header (--centered), #ts-nav, .ts-header__actions / __modules (position header-actions),
 * .ts-header__offcanvas (position offcanvas), .ts-footer and the Studio rows ([data-ts-row]).
 *
 *   1. Container, shell, skip link
 *   2. Rows: 12-column grid, Mimeo split rows, dead tracks, rhythm
 *   3. Full-bleed bands (notice, cover, cover stats, newsletter)
 *   4. Home and app mode
 *   5. Issue strip (library top bar)
 *   6. Masthead: brand row, search field, account actions
 *   7. Navigation: numbered bar from 56.25rem, drawer below
 *   8. Footer: brand column and tools, numbered link columns, bottom bar
 *   9. Megamenu skin
 *
 * Stacking (tokens.css L2): Leaflet 400-1000 < drawer scrim --ts-z-scrim 1005 < sticky header
 * --ts-z-header 1010 (the drawer, the search sheet and the account menu live inside it) <
 * --ts-z-dropdown 1020 < --ts-z-toast 1100 < the EasyCommerce cart and app dialogs. The header
 * is sticky only with layout.header.sticky and never in app mode; on wide screens only its
 * navigation bar stays in view (the brand row scrolls away: --mm-sticky-hidden).
 *
 * @copyright   Copyright (C) 2026 BulaSikku Technologies Private Limited. All rights reserved.
 * @license     GNU General Public License version 2 or later
 */

/* ==========================================================================
   1. Container, shell, skip link
   ========================================================================== */

/* --ec-cw is the content width (1280 at the board's 1440); the gutters sit outside it. */
.ts-container {
    inline-size: 100%;
    max-inline-size: calc(var(--page-max) + 2 * var(--page-gutter));
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

.ts-shell {
    display: flow-root;
    padding-block-end: clamp(3rem, 2.06rem + 3.81vw, 5.5rem);
}

/* A yellow highlighter block with ink text, top left, only on focus (design spec §6.15). */
.ts-skip-link {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    z-index: calc(var(--ts-z-toast) + 1);
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    padding: 0 1.25rem;
    background-color: var(--mm-yellow);
    color: var(--mm-yellow-ink);
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-200%);
}

.ts-skip-link:focus,
.ts-skip-link:focus-visible {
    outline: 3px solid var(--mm-yellow-ink);
    outline-offset: 2px;
    transform: none;
}

/* ==========================================================================
   2. Rows
   ========================================================================== */

.ts-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--ec-grid-gap);
    row-gap: var(--mm-s-10);
    align-items: start;
    padding-block-start: var(--ec-sect-y);
}

.ts-col {
    grid-column: 1 / -1;
    min-inline-size: 0;
}

@media (min-width: 48rem) {
    .ts-span-1 { grid-column: span 1; }
    .ts-span-2 { grid-column: span 2; }
    .ts-span-3 { grid-column: span 3; }
    .ts-span-4 { grid-column: span 4; }
    .ts-span-5 { grid-column: span 5; }
    .ts-span-6 { grid-column: span 6; }
    .ts-span-7 { grid-column: span 7; }
    .ts-span-8 { grid-column: span 8; }
    .ts-span-9 { grid-column: span 9; }
    .ts-span-10 { grid-column: span 10; }
    .ts-span-11 { grid-column: span 11; }
    .ts-span-12 { grid-column: span 12; }
}

/* The board's split rows are not twelfths (design spec §4.2): a main column and a fixed
   aside. From 60rem the aside is 320px, from 75rem it takes the board width. The Studio spans
   stay 8/4, which is what an admin sees; the columns just ignore them here. */
@media (min-width: 60rem) {
    .ts-row[data-ts-row="forum"],
    .ts-row[data-ts-row="noticeboard"],
    .ts-row[data-ts-row="club"],
    .ts-row[data-ts-row="route"] {
        grid-template-columns: minmax(0, 1fr) 20rem;
    }

    .ts-row[data-ts-row="forum"] > .ts-col,
    .ts-row[data-ts-row="noticeboard"] > .ts-col,
    .ts-row[data-ts-row="club"] > .ts-col,
    .ts-row[data-ts-row="route"] > .ts-col {
        grid-column: auto;
    }
}

@media (min-width: 75rem) {
    .ts-row[data-ts-row="forum"] {
        grid-template-columns: minmax(0, 1fr) 24rem;
        column-gap: var(--mm-s-14);
    }

    .ts-row[data-ts-row="noticeboard"] {
        grid-template-columns: minmax(0, 1fr) 22rem;
        column-gap: var(--mm-s-12);
    }

    .ts-row[data-ts-row="club"],
    .ts-row[data-ts-row="route"] {
        grid-template-columns: minmax(0, 1fr) 28rem;
        column-gap: var(--mm-s-14);
    }
}

/* A module that prints nothing still counts for the library, so its column exists but is
   empty: hide it, let a lone column span the row, and drop a row with nothing to show
   (contract §2.11; a missing extension never leaves a dead track). */
.ts-row > .ts-col:empty {
    display: none;
}

.ts-row:not(:has(> .ts-col:not(:empty) ~ .ts-col:not(:empty))) > .ts-col:not(:empty) {
    grid-column: 1 / -1;
}

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

/* Inner pages: the breadcrumbs open the page head right under the masthead. */
.ts-row[data-ts-row="breadcrumbs"],
.ts-row:has(> .ts-pos-breadcrumbs) {
    padding-block-start: var(--mm-s-6);
}

.ts-row[data-ts-row="breadcrumbs"] + .ts-row[data-ts-row="content"] {
    padding-block-start: var(--mm-s-6);
}

/* The breadcrumbs module's own title repeats its landmark name: keep it for assistive tech only. */
.ts-pos-breadcrumbs .ts-module__title {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ==========================================================================
   3. Full-bleed bands (contract §2.4.7). The row paints its tone past the container with a
      filled border image outset 100vmax sideways: ink overflow only (no scrollbar, never
      100vw), painted in one pass so a band on a fractional pixel shows no seam. The columns
      repeat the tone as a real background (inside the painted band, so invisible) for
      contrast checkers and assistive tools, which read background-color.
   ========================================================================== */

.ts-row[data-ts-row="notice"],
.ts-row[data-ts-row="cover"],
.ts-row[data-ts-row="cover-stats"],
.ts-row[data-ts-row="newsletter"],
.ts-row:has(> .ts-pos-below-top),
.ts-row:has(> .ts-pos-hero),
.ts-row:has(> .ts-pos-newsletter) {
    border-image: linear-gradient(var(--mm-band-tone), var(--mm-band-tone)) fill 0 / 0 / 0 100vmax;
}

.ts-row[data-ts-row="notice"] > .ts-col,
.ts-row[data-ts-row="cover"] > .ts-col,
.ts-row[data-ts-row="cover-stats"] > .ts-col,
.ts-row[data-ts-row="newsletter"] > .ts-col,
.ts-row:has(> .ts-pos-below-top) > .ts-col,
.ts-row:has(> .ts-pos-hero) > .ts-col,
.ts-row:has(> .ts-pos-newsletter) > .ts-col {
    background-color: var(--mm-band-tone);
}

/* Member notice bar: the yellow highlighter, straight under the masthead. */
.ts-row[data-ts-row="notice"],
.ts-row:has(> .ts-pos-below-top) {
    --mm-band-tone: var(--mm-yellow);
    --ts-focus: var(--mm-yellow-ink);
    padding-block: 0;
    color: var(--mm-yellow-ink);
}

/* The cover: the masthead's magenta flood continues, flush under the navigation bar. */
.ts-row[data-ts-row="cover"],
.ts-row[data-ts-row="cover-stats"],
.ts-row:has(> .ts-pos-hero) {
    --mm-band-tone: var(--ec-accent);
    --ts-focus: var(--mm-focus-band);
    color: var(--mm-on-band);
}

.ts-row[data-ts-row="cover"],
.ts-row:has(> .ts-pos-hero) {
    padding-block: clamp(1.5rem, 0.72rem + 3.2vw, 3.25rem) 0;
}

.ts-row[data-ts-row="cover-stats"] {
    padding-block: 0;
}

/* The band rows sit edge to edge: no section rhythm between them or above the cover. */
.ts-row[data-ts-row="cover"] + .ts-row[data-ts-row="cover-stats"],
.ts-row[data-ts-row="notice"] + .ts-row[data-ts-row="cover"] {
    margin-block-start: 0;
}

/* The newsletter: a paper band under a full-bleed 2px ink rule (the first 2px of the painted
   image), glued to the footer (design spec §5.4: the footer continues the same paper). */
.ts-row[data-ts-row="newsletter"],
.ts-row:has(> .ts-pos-newsletter) {
    --mm-band-tone: var(--ec-surface);
    margin-block-start: var(--ec-sect-y);
    padding-block: clamp(1.75rem, 0.94rem + 3.33vw, 4rem) clamp(1.25rem, 0.53rem + 2.96vw, 2.5rem);
    border-image: linear-gradient(var(--mm-rule-strong) 0 2px, var(--mm-band-tone) 2px) fill 0 / 0 / 0 100vmax;
}

.ts-shell:has(> .ts-row[data-ts-row="newsletter"]:last-child),
.ts-shell:has(> .ts-row:last-child > .ts-pos-newsletter) {
    padding-block-end: 0;
}

/* ==========================================================================
   4. Home and app mode
   ========================================================================== */

/* The cover opens the home page, flush under the masthead. */
.ts-home .ts-row[data-ts-row="breadcrumbs"],
.ts-home .ts-row:has(> .ts-pos-breadcrumbs) {
    display: none;
}

/* The home's featured view prints the Longreads; with no featured article the content row
   holds only the live system-message container: it takes no room until a message arrives, but
   stays in the page so the skip link keeps its target. */
.ts-home .ts-row[data-ts-row="content"]:not(:has(.ts-main > :not(#system-message-container))):not(:has(#system-message-container > *)):not(:has(> .ts-pos-sidebar-left:not(:empty), > .ts-pos-sidebar-right:not(:empty))) {
    padding-block: 0;
}

/* App mode (contract §2.2): the extension owns the page. Static header, full-width content,
   sidebars below the app, no sticky offset. */
.ts-app {
    --ts-sticky-offset: 0px;
}

.ts-app .ts-header.is-sticky {
    position: relative;
    inset-block-start: auto;
    z-index: auto;
}

.ts-app .ts-row[data-ts-row="content"] > .ts-col {
    grid-column: 1 / -1;
}

.ts-app .ts-row[data-ts-row="content"] > .ts-pos-main {
    order: -1;
}

.ts-app .ts-main {
    max-inline-size: none;
}

/* The open drawer freezes the page where it was (template.js stores the offset). */
.ts-nav-open {
    position: fixed;
    inset-inline: 0;
    inset-block-start: var(--ts-scroll-lock, 0);
    overflow: hidden;
}

/* ==========================================================================
   5. Issue strip: the library top bar on the band (design spec §5.1). Start: the strip block
      (Week NN · updated N min ago) or the Studio announcement; end: the tools (language,
      scheme). A 1px hairline runs under it across the content width.
   ========================================================================== */

.ts-topbar {
    --ts-focus: var(--mm-focus-band);
    background-color: var(--ec-accent);
    color: var(--mm-on-band);
}

.ts-topbar__inner {
    display: flex;
    align-items: center;
    gap: var(--mm-s-3);
    min-block-size: 3rem;
    background: linear-gradient(var(--mm-band-rule), var(--mm-band-rule)) left bottom / 100% 1px no-repeat;
    background-origin: content-box;
    background-clip: content-box;
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1;
}

.ts-topbar__side--start:empty,
.ts-topbar__inner > span:empty {
    display: none;
}

.ts-topbar__text {
    margin: 0;
}

.ts-topbar__side--end,
.ts-topbar__modules {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--mm-s-2);
    min-inline-size: 0;
}

.ts-topbar__modules > .mm-tools,
.ts-topbar__modules > .ts-bare:has(.mm-tools) {
    margin-inline-start: auto;
}

.ts-topbar svg {
    stroke-width: 1.75;
}

/* Strip block: Week 40 · [yellow square] updated 4 min ago. */
.mm-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--mm-s-3);
    row-gap: var(--mm-s-1);
    margin: 0;
    min-inline-size: 0;
}

.mm-strip__updated {
    display: inline-flex;
    align-items: center;
    gap: var(--mm-s-2);
}

.mm-strip__live {
    flex: none;
    inline-size: 8px;
    block-size: 8px;
    background-color: var(--mm-yellow);
}

/* Tools at the end of the strip: 32px text buttons (the 48px row is the target). */
.mm-tools--strip {
    display: flex;
    align-items: center;
    gap: var(--mm-s-2);
    font-family: var(--ec-font-body);
}

/* A top bar whose modules printed nothing takes no room. */
.ts-topbar:not(:has(.ts-strip, .ts-topbar__text, .mm-tools, .ts-tools, .ts-social-links, .ts-lang-switch)) {
    display: none;
}

/* Phones and tablets: 36px, the start side only; language and scheme are in the drawer. */
@media (width < 56.25rem) {
    .ts-topbar__inner {
        min-block-size: 2.25rem;
        gap: var(--mm-s-3);
    }

    .ts-topbar .mm-tools--strip,
    .ts-topbar .ts-tools,
    .ts-topbar .ts-social-links,
    .ts-topbar .ts-lang-switch {
        display: none;
    }

    .ts-topbar:not(:has(.ts-strip, .ts-topbar__text)) {
        display: none;
    }

    .mm-strip {
        column-gap: 0.625rem;
    }
}

/* ==========================================================================
   6. Masthead (design spec §5.2, §5.3). Wide screens: a 96px brand row (search field at the
      start, the centred off-register wordmark, the account actions at the end) over the 56px
      numbered navigation bar. Below 56.25rem: a 64px bar (wordmark, then search, bell,
      avatar and menu as 44px icon buttons) and the drawer.
   ========================================================================== */

.ts-header {
    --ts-focus: var(--mm-focus-band);
    --mm-search-w: 12.5rem;
    background-color: var(--ec-accent);
    color: var(--mm-on-band);
}

.ts-header.is-sticky {
    position: sticky;
    inset-block-start: calc(-1 * var(--mm-sticky-hidden, 0px));
    z-index: var(--ts-z-header);
}

.ts-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--mm-s-2);
    min-block-size: 4rem;
    padding-inline-end: max(0.5rem, calc(var(--page-gutter) - 0.5rem));
}

.ts-header svg {
    stroke-width: 1.75;
}

/* ---- Wordmark: Zilla Slab 700 italic, paper, the riso-blue layer 0.05em / 0.04em off. ---- */
.ts-brand {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    min-inline-size: 0;
    color: inherit;
    text-decoration: none;
}

.ts-brand__text {
    overflow: hidden;
    padding-block: 0.08em 0.12em;
    padding-inline-end: 0.08em;
    font-family: var(--ec-font-display);
    font-size: clamp(2.125rem, 1.36rem + 3.14vw, 3.75rem);
    font-style: italic;
    font-weight: 700;
    font-synthesis: none;
    line-height: 1;
    letter-spacing: var(--ec-disp-tracking);
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0.05em 0.04em 0 var(--mm-misreg-band);
}

.ts-brand:hover .ts-brand__text {
    text-decoration: underline 2px var(--mm-yellow);
    text-underline-offset: 0.12em;
}

.ts-brand__logo {
    display: block;
    inline-size: auto;
    max-block-size: 4rem;
}

.ts-brand__logo--dark {
    display: none;
}

[data-color-scheme="dark"] .ts-brand--responsive-logo .ts-brand__logo--light {
    display: none;
}

[data-color-scheme="dark"] .ts-brand--responsive-logo .ts-brand__logo--dark {
    display: block;
}

/* ---- Actions: position header-actions (search, account) then the menu toggle. ---- */
.ts-header__actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.125rem;
    margin-inline-start: auto;
}

.ts-header__modules {
    display: contents;
}

/* 44 x 44 icon buttons on the band: library actions, the search toggle, the bell, the menu. */
.ts-action,
.mm-iconbtn {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--mm-btn-r);
    background: transparent;
    color: inherit;
    font-family: var(--ec-font-body);
    font-size: 1rem;
    line-height: 1.5;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--ec-dur-1) var(--ec-ease);
}

.ts-action svg,
.mm-iconbtn svg {
    inline-size: 1.5rem;
    block-size: 1.5rem;
}

@media (hover: hover) {
    .ts-header .ts-action:hover,
    .ts-header .mm-iconbtn:hover {
        background-color: rgb(252 252 250 / 0.12);
    }
}

.ts-action__badge {
    position: absolute;
    inset-block-start: 0.25rem;
    inset-inline-end: 0.125rem;
    min-inline-size: 1.25rem;
    padding: 0.125rem 0.25rem;
    background-color: var(--mm-yellow);
    color: var(--mm-yellow-ink);
    font-family: var(--ts-font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

/* ---- Search: a field with a 2px paper underline on wide screens; below 56.25rem an icon
        that opens a paper sheet under the bar (template.js [data-ts-search-band]). ---- */
.ts-search--header .ts-search__form {
    display: flex;
    align-items: center;
    gap: var(--mm-s-3);
    margin: 0;
}

.ts-search--header .ts-search__field {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.625rem;
    min-inline-size: 0;
}

.ts-search--header .ts-search__icon {
    display: inline-flex;
    flex: none;
}

.ts-search--header .ts-search__field > .awesomplete {
    flex: 1 1 auto;
    min-inline-size: 0;
}

.ts-search--header .ts-search__input {
    inline-size: 100%;
    min-inline-size: 0;
    font-family: var(--ec-font-body);
}

.ts-search--header .ts-search__input::-webkit-search-cancel-button {
    display: none;
}

@media (min-width: 56.25rem) {
    .ts-search--header {
        position: absolute;
        inset-block-start: 1.625rem;
        inset-inline-start: var(--page-gutter);
        inline-size: var(--mm-search-w);
    }

    .ts-search--header .ts-search__toggle,
    .ts-search--header .ts-search__close {
        display: none;
    }

    .ts-search--header .ts-search__form {
        block-size: calc(2.75rem + 3px);
        border-block-end: 2px solid var(--mm-on-band);
    }

    .ts-search--header .ts-search__form:focus-within {
        border-block-end-width: 3px;
        outline: 2px solid var(--mm-focus-band);
        outline-offset: 4px;
    }

    .ts-search--header .ts-search__icon svg {
        inline-size: 1.25rem;
        block-size: 1.25rem;
    }

    .ts-search--header .ts-search__input,
    .ts-search--header .ts-search__input:focus {
        block-size: 2.75rem;
        min-block-size: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: var(--mm-on-band);
        font-size: 1.0625rem;
    }

    .ts-search--header .ts-search__input:focus-visible {
        outline: none;
    }

    .ts-search--header .ts-search__input::placeholder {
        color: var(--mm-on-band);
        opacity: 0.85;
    }

    /* Enter submits; the button stays for assistive tech and keyboard users who tab to it. */
    .ts-search--header .ts-search__submit {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .ts-header .ts-search--header .ts-btn.ts-search__submit:focus-visible {
        position: static;
        inline-size: auto;
        block-size: 2.25rem;
        padding-inline: 0.75rem;
        border: 0;
        background-color: var(--mm-paper);
        box-shadow: none;
        color: var(--mm-paper-ink);
        clip-path: none;
        transform: none;
    }
}

@media (width < 56.25rem) {
    .ts-search--header {
        display: contents;
    }

    .ts-search--header .ts-search__panel {
        --ts-focus: var(--mm-focus);
        position: absolute;
        inset-inline: 0;
        inset-block-start: 100%;
        z-index: 2;
        padding: var(--mm-s-3) var(--page-gutter);
        border-block-end: 2px solid var(--ec-fg);
        background-color: var(--ec-surface);
        color: var(--ec-fg);
        box-shadow: 0 4px 0 0 var(--mm-offset);
    }

    .ts-search--header .ts-search__input,
    .ts-search--header .ts-search__input:focus {
        block-size: 3.25rem;
        min-block-size: 3.25rem;
        padding-inline: var(--mm-s-4);
        border: 2px solid var(--ec-fg);
        border-radius: var(--mm-btn-r);
        background-color: var(--ec-surface);
        box-shadow: none;
        color: var(--ec-fg);
        font-size: 1.0625rem;
    }

    .ts-search--header .ts-search__input::placeholder {
        color: var(--ec-fg-2);
        opacity: 1;
    }

    .ts-search--header .ts-search__icon {
        display: none;
    }

    .ts-search--header .ts-search__submit {
        flex: none;
        min-block-size: 3.25rem;
    }

    .ts-search--header .ts-search__close {
        flex: none;
        color: var(--ec-fg);
    }

    .ts-search--header[data-open] .ts-search__toggle {
        background-color: rgb(252 252 250 / 0.12);
    }
}

/* The search submit is the riso-blue action (design spec §6.3), never the misprint primary. */
.ts-search .ts-btn.ts-search__submit {
    background-color: var(--mm-action);
    box-shadow: none;
    color: var(--mm-action-fg);
}

.ts-search .ts-btn.ts-search__submit:hover {
    background-color: var(--mm-action-hover);
    box-shadow: none;
    color: var(--mm-action-fg);
    transform: none;
}

.ts-search .ts-btn.ts-search__submit:active {
    box-shadow: none;
    transform: translateY(1px);
}

/* ---- Account (community "account" block, Mimeo layout). ---- */
.mm-account {
    display: flex;
    align-items: center;
    gap: var(--mm-s-7);
}

.mm-account__login {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    color: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: underline 2px;
    text-underline-offset: 5px;
    white-space: nowrap;
}

.mm-account__login:hover {
    text-decoration-thickness: 3px;
}

.mm-account--member,
.ts-account--member.mm-account {
    gap: var(--mm-s-3);
}

.ts-account__bell--unread .mm-dot {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
}

/* The avatar disclosure: a 44px summary around a paper disc with accent initials. */
.mm-account__menu {
    position: relative;
}

.mm-account__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 50%;
    cursor: pointer;
    list-style: none;
}

.mm-account__toggle::-webkit-details-marker {
    display: none;
}

.mm-account__avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    overflow: hidden;
    border-radius: 50%;
    background-color: var(--mm-paper);
    color: var(--ec-accent);
    font-family: var(--ec-font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

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

.mm-account__menu > .mm-menu {
    position: absolute;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline-end: 0;
    z-index: var(--ts-z-dropdown);
    inline-size: max-content;
    min-inline-size: 15rem;
    max-inline-size: 20rem;
}

.mm-account__who {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: var(--mm-s-3) var(--mm-s-4);
    border-block-end: 1px dashed var(--mm-rule);
}

.mm-account__who .ts-account__name {
    font-weight: 700;
}

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

.mm-account .ts-account__links,
.mm-account-drawer .ts-account__links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mm-account .ts-account__logout {
    margin: 0;
    border-block-start: 1px dashed var(--mm-rule);
}

/* Wide screens: guest Sign in + Join, member bell + avatar (40) + Start a thread. */
@media (min-width: 56.25rem) {
    .ts-header {
        --mm-sticky-hidden: 6rem;
    }

    .ts-app .ts-header {
        --mm-sticky-hidden: 0px;
    }

    .ts-header__inner {
        display: grid;
        grid-template-columns: minmax(var(--mm-search-w), 1fr) minmax(0, auto) minmax(var(--mm-search-w), 1fr);
        grid-template-rows: 6rem auto;
        gap: 0 var(--mm-s-6);
        padding-inline-end: var(--page-gutter);
    }

    .ts-header__inner > .ts-brand {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        max-inline-size: 100%;
    }

    .ts-header__actions {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        gap: var(--mm-s-3);
        margin: 0;
    }

    .ts-header .mm-account__avatar {
        inline-size: 2.5rem;
        block-size: 2.5rem;
        font-size: 1rem;
    }
}

@media (min-width: 75rem) {
    .ts-header {
        --mm-search-w: 18rem;
    }
}

/* The anchors for scrolling (base.css) know how much of the sticky masthead stays in view. */
@media (min-width: 56.25rem) {
    :root:has(.ts-header.is-sticky):not(:has(> body.ts-app)) {
        --mm-sticky-hidden: 6rem;
    }
}

/* Phones and tablets: icons only; Join and Start a thread live in the drawer and the cover.
   The wordmark is 34px at the board's 390 and gives a little on the smallest phones. */
@media (width < 56.25rem) {
    .ts-header .ts-brand__text {
        font-size: clamp(1.75rem, 1rem + 4.5vw, 2.125rem);
    }

    .ts-header__actions .ts-account__join,
    .ts-header__actions .ts-account__primary {
        display: none;
    }

    .ts-header__actions .mm-account {
        gap: 0.125rem;
    }

    .mm-account__login {
        padding-inline: var(--mm-s-2);
    }
}

/* Very narrow screens with a member's bell and avatar (320px, 400% zoom): the search icon
   gives way so the wordmark stays whole; the drawer carries the same search field. */
@media (max-width: 22.49rem) {
    .ts-member .ts-header .ts-search--header {
        display: none;
    }
}

/* ==========================================================================
   7. Navigation. From 56.25rem (900px, the library's megamenu breakpoint) #ts-nav is the
      ruled bar: Courier 01, 02 ... before Zilla 500 labels, a 4px yellow bar under the
      current page. Below it is the off-canvas drawer (template.js: focus trap, Escape, inert
      background, scroll lock).
   ========================================================================== */

.ts-header__nav .mod-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: mm-nav;
}

.ts-header__nav .mod-menu > li {
    position: relative;
    margin: 0;
    counter-increment: mm-nav;
}

.ts-header__nav .mod-menu a,
.ts-header__nav .mod-menu .nav-header,
.ts-header__nav .mod-menu .mod-menu__separator {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
}

/* The index is generated (any mod_menu works) and has empty alternative text, so assistive
   tech reads the label only (design spec §5.2: the numbers are aria-hidden). */
.ts-header__nav .mod-menu > li > a::before,
.ts-header__nav .mod-menu > li > .nav-header::before,
.ts-header__nav .mod-menu > li > .mod-menu__separator::before {
    content: counter(mm-nav, decimal-leading-zero);
    content: counter(mm-nav, decimal-leading-zero) / "";
    position: absolute;
    inset-inline-start: 0;
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3125rem;
}

.ts-nav-close,
.mm-drawer__head {
    display: none;
}

/* ---- Numbered bar (56.25rem and up) ---- */
@media (min-width: 56.25rem) {
    .ts-nav-toggle,
    .ts-header__offcanvas {
        display: none;
    }

    .ts-header__nav {
        grid-column: 1 / -1;
        grid-row: 2;
        border-block: 2px solid var(--mm-on-band);
    }

    .ts-header__nav .mod-menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: var(--mm-s-7);
    }

    .ts-header__nav .mod-menu > li > a,
    .ts-header__nav .mod-menu > li > .nav-header,
    .ts-header__nav .mod-menu > li > .mod-menu__separator {
        display: flex;
        align-items: center;
        block-size: 3.25rem;
        padding-inline-start: calc(2ch + var(--mm-s-2));
        font-family: var(--ec-font-display);
        font-size: 1.3125rem;
        font-weight: 500;
        font-synthesis: none;
        line-height: 1.3125rem;
        white-space: nowrap;
    }

    /* Courier and Zilla share the baseline: the index box sits 4px lower in the same line. */
    .ts-header__nav .mod-menu > li > a::before,
    .ts-header__nav .mod-menu > li > .nav-header::before,
    .ts-header__nav .mod-menu > li > .mod-menu__separator::before {
        inset-block-start: calc(50% - 0.65625rem + 0.25rem);
    }

    .ts-header__nav .mod-menu > li > a:hover {
        text-decoration: underline 2px var(--mm-yellow);
        text-underline-offset: 6px;
    }

    .ts-header__nav .mod-menu > li > a:focus-visible {
        outline-offset: -3px;
    }

    .ts-header__nav .mod-menu > li > a[aria-current="page"],
    .ts-header__nav .mod-menu > li.active > a {
        box-shadow: inset 0 -4px 0 var(--mm-yellow);
        font-weight: 700;
    }

    /* Children: a paper panel with an ink border and the misprint shadow; Courier 1.1, 1.2 ... */
    .ts-header__nav .mod-menu > li > .mod-menu__sub {
        position: absolute;
        inset-block-start: 100%;
        inset-inline-start: 0;
        z-index: var(--ts-z-dropdown);
        display: none;
        min-inline-size: 14rem;
        margin: 0;
        padding: var(--mm-s-2) 0;
        border: 2px solid var(--ec-fg);
        border-radius: var(--mm-r);
        background-color: var(--ec-surface);
        box-shadow: var(--ts-overlay-shadow);
        color: var(--ec-fg);
        list-style: none;
        counter-reset: mm-nav-sub;
    }

    .ts-header__nav .mod-menu > li:hover > .mod-menu__sub,
    .ts-header__nav .mod-menu > li:focus-within > .mod-menu__sub {
        display: block;
    }

    .ts-header__nav .mod-menu__sub > li {
        --ts-focus: var(--mm-focus);
        counter-increment: mm-nav-sub;
    }

    .ts-header__nav .mod-menu__sub > li + li {
        border-block-start: 1px dashed var(--mm-rule);
    }

    .ts-header__nav .mod-menu__sub a {
        display: flex;
        align-items: center;
        gap: var(--mm-s-3);
        min-block-size: 2.75rem;
        padding: 0 var(--mm-s-4);
        font-size: 1rem;
    }

    .ts-header__nav .mod-menu__sub a::before {
        content: counter(mm-nav) "." counter(mm-nav-sub);
        content: counter(mm-nav) "." counter(mm-nav-sub) / "";
        color: var(--mm-accent-ink);
        font-family: var(--ts-font-mono);
        font-size: 0.9375rem;
        font-weight: 700;
    }

    .ts-header__nav .mod-menu__sub a:hover {
        background-color: var(--ec-surface-2);
    }

    .ts-header__nav .mod-menu__sub a:focus-visible {
        outline-offset: -3px;
    }
}

@media (min-width: 75rem) {
    .ts-header__nav .mod-menu {
        column-gap: 2.75rem;
    }
}

/* ---- Drawer (below 56.25rem): paper, from the right, a 2px ink edge over the scrim. ---- */
@media (width < 56.25rem) {
    .ts-header .ts-header__nav {
        --ts-focus: var(--mm-focus);
        position: fixed;
        inset-block: 0;
        inset-inline-end: 0;
        z-index: calc(var(--ts-z-scrim) + 1);
        display: flex;
        flex-direction: column;
        gap: var(--mm-s-6);
        inline-size: min(22.5rem, 88vw);
        padding: 0 var(--mm-s-4) var(--mm-s-8);
        overflow-y: auto;
        overscroll-behavior: contain;
        border-inline-start: 2px solid var(--ec-fg);
        background-color: var(--ec-surface);
        color: var(--ec-fg);
        visibility: hidden;
        transform: translateX(100%);
        transition:
            transform var(--ec-dur-3) var(--ec-ease),
            visibility 0s linear var(--ec-dur-3);
    }

    [dir="rtl"] .ts-header .ts-header__nav {
        transform: translateX(-100%);
    }

    .ts-nav-open .ts-header .ts-header__nav {
        visibility: visible;
        transform: none;
        transition: transform var(--ec-dur-3) var(--ec-ease), visibility 0s linear 0s;
    }

    /* Top row: 64px with the close button at the end and the 2px ink rule under it. */
    .ts-nav-close {
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-content: center;
        align-self: flex-end;
        inline-size: 2.75rem;
        block-size: 2.75rem;
        margin-block: 0.625rem 0;
        margin-inline-end: -0.5rem;
        padding: 0;
        border: 0;
        border-radius: var(--mm-btn-r);
        background: transparent;
        color: var(--ec-fg);
        font-family: var(--ec-font-body);
        font-size: 1rem;
        line-height: 1.5;
        cursor: pointer;
    }

    /* Drawer head: the ink wordmark (magenta misregistration) and the close button, 64px. */
    .mm-drawer__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--mm-s-3);
        min-block-size: 4rem;
    }

    .mm-drawer__head .ts-nav-close {
        align-self: center;
        margin-block: 0;
    }

    .mm-drawer__brand {
        color: var(--ec-fg);
    }

    .mm-drawer__brand .ts-brand__text {
        font-size: 2.125rem;
        text-shadow: 0.05em 0.04em 0 var(--mm-misreg);
    }

    .ts-nav-close svg {
        inline-size: 1.5rem;
        block-size: 1.5rem;
    }

    @media (hover: hover) {
        .ts-nav-close:hover {
            background-color: var(--ec-surface-2);
        }
    }

    .ts-header__nav .mod-menu {
        display: flex;
        flex-direction: column;
        margin-block-start: calc(-1 * var(--mm-s-6) + 0.625rem);
        border-block-start: 2px solid var(--ec-fg);
    }

    .ts-header__nav .mod-menu > li {
        border-block-end: 1px dashed var(--mm-rule);
    }

    .ts-header__nav .mod-menu > li > a,
    .ts-header__nav .mod-menu > li > .nav-header,
    .ts-header__nav .mod-menu > li > .mod-menu__separator {
        display: flex;
        align-items: center;
        min-block-size: 3.5rem;
        padding-block: 0.5rem;
        padding-inline-start: calc(2ch + var(--mm-s-4));
        font-family: var(--ec-font-display);
        font-size: 1.5rem;
        font-weight: 700;
        font-synthesis: none;
        line-height: 1.2;
    }

    .ts-header__nav .mod-menu > li > a::before,
    .ts-header__nav .mod-menu > li > .nav-header::before,
    .ts-header__nav .mod-menu > li > .mod-menu__separator::before {
        inset-block-start: calc(50% - 0.5rem);
        color: var(--mm-accent-ink);
    }

    /* Current page: an 8px yellow square before the index. */
    .ts-header__nav .mod-menu > li > a[aria-current="page"],
    .ts-header__nav .mod-menu > li.active > a {
        padding-inline-start: calc(2ch + var(--mm-s-4) + 1rem);
    }

    .ts-header__nav .mod-menu > li > a[aria-current="page"]::before,
    .ts-header__nav .mod-menu > li.active > a::before {
        padding-inline-start: 1rem;
        background: linear-gradient(var(--mm-yellow), var(--mm-yellow)) left center / 8px 8px no-repeat;
    }

    .ts-header__nav .mod-menu > li > a:hover {
        text-decoration: underline 2px var(--mm-accent-ink);
        text-underline-offset: 4px;
    }

    .ts-header__nav .mod-menu a:focus-visible {
        outline-offset: -3px;
    }

    .ts-header__nav .mod-menu__sub {
        margin: 0 0 var(--mm-s-2);
        padding: 0 0 0 calc(2ch + var(--mm-s-4));
        list-style: none;
    }

    .ts-header__nav .mod-menu__sub a {
        display: flex;
        align-items: center;
        min-block-size: 2.75rem;
        color: var(--ec-fg);
        font-size: 1.0625rem;
    }

    /* Scrim: the header's own layer, under the drawer in both header modes. */
    .ts-header__inner::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: var(--ts-z-scrim);
        background-color: var(--ts-scrim);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--ec-dur-2) var(--ec-ease);
    }

    .ts-nav-open .ts-header__inner::after {
        opacity: 1;
        pointer-events: auto;
    }

    /* Drawer extras (offcanvas position): search, account, languages and scheme. */
    .ts-header__offcanvas {
        display: flex;
        flex-direction: column;
        gap: var(--mm-s-6);
    }

    .ts-search--drawer .ts-search__row {
        display: flex;
        gap: var(--mm-s-2);
    }

    .ts-search--drawer .ts-search__field {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        min-inline-size: 0;
    }

    .ts-search--drawer .ts-search__icon {
        display: none;
    }

    .ts-search--drawer .ts-search__field > .awesomplete {
        flex: 1 1 auto;
        min-inline-size: 0;
    }

    .ts-search--drawer .ts-search__input {
        inline-size: 100%;
        min-block-size: 3.25rem;
        border: 2px solid var(--ec-fg);
        font-size: 1.0625rem;
    }

    .ts-search--drawer .ts-search__submit {
        flex: none;
        min-block-size: 3.25rem;
    }

    .mm-account-drawer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--mm-s-3);
    }

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

    .mm-account-drawer .mm-account__avatar {
        background-color: var(--ec-accent);
        color: var(--ec-accent-fg);
    }

    .mm-account-drawer .ts-account__identity {
        display: flex;
        flex-direction: column;
        margin: 0;
    }

    .mm-account-drawer .ts-account__name {
        font-weight: 700;
    }

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

    .mm-account-drawer .ts-account__nav,
    .mm-account-drawer .ts-account__logout {
        align-self: stretch;
        margin: 0;
    }

    .mm-account-drawer .ts-account__links {
        border-block-start: 1px dashed var(--mm-rule);
    }

    .mm-account-drawer .ts-account__item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--mm-s-2);
        inline-size: 100%;
        min-block-size: 2.75rem;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--ec-fg);
        font: inherit;
        font-size: 1rem;
        text-align: start;
        text-decoration: none;
        cursor: pointer;
    }

    .mm-account-drawer .ts-account__signout {
        justify-content: flex-start;
    }

    .mm-account-drawer .ts-account__item:hover {
        text-decoration: underline 2px var(--mm-accent-ink);
        text-underline-offset: 4px;
    }

    .mm-account-drawer .ts-account__item:focus-visible {
        outline-offset: -3px;
    }

    .mm-account-drawer .ts-account__links > li,
    .mm-account-drawer .ts-account__logout {
        border-block-end: 1px dashed var(--mm-rule);
    }

    .mm-tools--drawer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--mm-s-4);
        padding-block-start: var(--mm-s-4);
        border-block-start: 2px solid var(--ec-fg);
    }

    /* Languages as a Courier line of codes: EN · DE ... */
    .mm-tools__codes {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin: 0;
        padding: 0;
        list-style: none;
        font-family: var(--ts-font-mono);
        font-size: 0.9375rem;
        font-weight: 700;
    }

    .mm-tools__codes > li + li::before {
        content: "·";
        content: "·" / "";
        padding-inline: var(--mm-s-1);
        color: var(--ec-fg-2);
    }

    .mm-tools__code {
        display: inline-flex;
        align-items: center;
        min-block-size: 2.75rem;
        padding-inline: var(--mm-s-1);
        color: var(--ec-fg);
        text-decoration: none;
    }

    .mm-tools__code[aria-current="true"] {
        text-decoration: underline 2px var(--mm-accent-ink);
        text-underline-offset: 5px;
    }

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

/* ==========================================================================
   8. Footer (design spec §5.4, §5.5): paper band under a 2px ink rule. Wide: brand column
      (off-register wordmark, blurb, the tools as ghost buttons) beside the link columns,
      numbered 01, 02 ... continuously across columns; a dashed bottom bar with the Courier
      copyright and the legal links. Phones: the columns become a 2-up index; the scheme
      toggle is the 44px square at the end of the bottom bar.
   ========================================================================== */

.ts-footer {
    --ts-focus: var(--mm-focus);
    padding-block-start: clamp(1.75rem, 0.94rem + 3.33vw, 4rem);
    border-block-start: 2px solid var(--mm-rule-strong);
    background-color: var(--ec-surface);
    color: var(--ec-fg);
    counter-reset: mm-fnav;
}

/* Glued to the newsletter band: that band draws the full-bleed rule; the footer draws the
   content-width rule between the newsletter and the columns (below). */
.ts-shell:has(> .ts-row[data-ts-row="newsletter"]:last-child) + .ts-footer,
.ts-shell:has(> .ts-row:last-child > .ts-pos-newsletter) + .ts-footer {
    padding-block-start: 0;
    border-block-start: 0;
}

.ts-shell:has(> .ts-row[data-ts-row="newsletter"]:last-child) + .ts-footer > .ts-container::before,
.ts-shell:has(> .ts-row:last-child > .ts-pos-newsletter) + .ts-footer > .ts-container::before {
    content: "";
    grid-column: 1 / -1;
    grid-row: 1;
    block-size: 2px;
    margin-block-end: var(--mm-s-8);
    background-color: var(--mm-rule-strong);
}

.ts-footer > .ts-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto;
    column-gap: 0;
}

.ts-footer svg {
    stroke-width: 1.75;
}

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

.ts-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mm-s-4);
    grid-column: 1 / -1;
    margin-block-end: var(--mm-s-5);
}

.ts-footer .ts-brand {
    min-block-size: 0;
    color: var(--ec-fg);
}

.ts-footer .ts-brand__text {
    overflow: visible;
    padding: 0;
    font-size: clamp(2.125rem, 1.8rem + 1.34vw, 2.75rem);
    white-space: normal;
    text-shadow: 0.05em 0.04em 0 var(--mm-misreg);
}

.ts-footer .ts-brand:hover .ts-brand__text {
    text-decoration-color: var(--mm-accent-ink);
}

.ts-footer .ts-brand__logo {
    max-block-size: 3rem;
}

.ts-footer__blurb {
    max-inline-size: 36ch;
    margin: 0;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.5;
    text-wrap: pretty;
}

/* Link columns (Studio footer.columns and footer-1..4 modules). */
.ts-footer__col:not(.ts-footer__brand) {
    min-inline-size: 0;
}

.ts-footer__col:not(.ts-footer__brand) > :is(h2, h3, h4, h5, h6) {
    margin: 0 0 var(--mm-s-2);
    font-family: var(--ec-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    font-synthesis: none;
    line-height: 1.2;
}

.ts-footer__col:not(.ts-footer__brand) > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ts-footer__col:not(.ts-footer__brand) > ul > li {
    counter-increment: mm-fnav;
}

.ts-footer__col:not(.ts-footer__brand) > ul > li > a {
    position: relative;
    display: flex;
    align-items: baseline;
    min-block-size: 2.75rem;
    padding-block-start: 0.625rem;
    padding-inline-start: calc(1.625rem + var(--mm-s-3));
    color: var(--ec-fg);
    font-size: 1.0625rem;
    line-height: 1.5rem;
    text-decoration: none;
}

.ts-footer__col:not(.ts-footer__brand) > ul > li > a::before {
    content: counter(mm-fnav, decimal-leading-zero);
    content: counter(mm-fnav, decimal-leading-zero) / "";
    position: absolute;
    inset-block-start: 0.625rem;
    inset-inline-start: 0;
    color: var(--mm-accent-ink);
    font-family: var(--ec-font-display);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5rem;
}

.ts-footer__col:not(.ts-footer__brand) > ul > li > a:hover {
    text-decoration: underline 2px var(--mm-accent-ink);
    text-underline-offset: 4px;
}

/* Tools (community "tools" block, Mimeo footer layout) and other footer-position modules. */
.ts-footer__main {
    display: flex;
    grid-column: 2;
    grid-row: 3;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mm-s-3);
    min-inline-size: 0;
    padding-inline-start: var(--mm-s-4);
    border-block-start: 1px dashed var(--mm-rule);
}

.ts-footer__main > .ts-module {
    margin: 0;
}

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

/* Bottom bar: © in Courier, then the legal links (underlined, 44px targets). */
.ts-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1;
    grid-row: 3;
    align-items: center;
    column-gap: var(--mm-s-4);
    min-block-size: 3.3125rem;
    padding-block: var(--mm-s-2);
    border-block-start: 1px dashed var(--mm-rule);
}

.ts-footer__main:empty {
    display: none;
}

.ts-footer > .ts-container:not(:has(> .ts-footer__main)) > .ts-footer__bottom {
    grid-column: 1 / -1;
}

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

[dir="rtl"] .ts-footer__copy {
    margin: 0 0 0 auto;
}

.ts-footer__legal,
.ts-footer__pay {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--mm-s-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ts-footer__legal a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    color: var(--ec-fg);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: underline 1px;
    text-underline-offset: 3px;
}

.ts-footer__legal a:hover {
    text-decoration: underline 2px var(--mm-accent-ink);
}

.ts-footer__pay li {
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.875rem;
    font-weight: 700;
}

.ts-social-links {
    display: flex;
    gap: var(--mm-s-1);
}

.ts-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    color: inherit;
}

/* Phones: the link columns are a 2-up index (their headings name the landmarks for assistive
   tech only), the tools shrink to the icon square and the language menu stays in the drawer. */
@media (width < 48rem) {
    .ts-footer__col:not(.ts-footer__brand) > :is(h2, h3, h4, h5, h6) {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* One index in two balanced columns, read down then across (01-05 | 06-10): the lists
       flow through a two-column box, so the numbering stays continuous and both columns end
       level whatever the column count (design spec §5.5). */
    .ts-footer__cols {
        display: block;
        columns: 2;
        column-gap: var(--mm-s-4);
        margin-block-end: var(--mm-s-5);
    }

    .ts-footer__brand {
        column-span: all;
    }

    .ts-footer__col:not(.ts-footer__brand) > ul > li {
        break-inside: avoid;
    }

    .mm-tools--footer .mm-lang {
        display: none;
    }

    .mm-tools--footer .mm-scheme {
        inline-size: 2.75rem;
        padding: 0;
        justify-content: center;
    }

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

/* Tablets: the brand spans the row; the link columns share the next one (three tracks, four
   or five when the site adds footer-1..4 module columns). */
@media (min-width: 48rem) {
    .ts-footer > .ts-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: var(--mm-s-10);
        row-gap: 0;
    }

    .ts-footer > .ts-container:has(> .ts-footer__cols > :nth-child(5)) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ts-footer > .ts-container:has(> .ts-footer__cols > :nth-child(6)) {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .ts-footer__cols {
        display: contents;
    }

    .ts-footer__brand {
        grid-column: 1 / -1;
        grid-row: 2;
        margin: 0;
    }

    .ts-footer__main {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-content: flex-start;
        margin-block: var(--mm-s-4) var(--mm-s-8);
        padding: 0;
        border: 0;
    }

    .ts-footer__col:not(.ts-footer__brand) {
        grid-row: 4;
        display: flex;
        flex-direction: column;
        gap: 0.875rem;
    }

    .ts-footer__col:not(.ts-footer__brand) > :is(h2, h3, h4, h5, h6) {
        margin: 0;
    }

    .ts-footer__col:not(.ts-footer__brand) > ul > li > a {
        min-block-size: 2.75rem;
        padding-block-start: 0.625rem;
    }

    .ts-footer__col:not(.ts-footer__brand) > ul > li > a::before {
        inset-block-start: 0.625rem;
        font-size: 1.25rem;
    }

    .ts-footer__bottom {
        grid-column: 1 / -1;
        grid-row: 5;
        min-block-size: 4rem;
        margin-block-start: var(--mm-s-10);
        column-gap: var(--mm-s-7);
    }
}

/* Wide: brand column (wordmark, blurb, tools) beside the link columns (design spec §5.4). */
@media (min-width: 64rem) {
    /* Rows: the content-width rule (with a newsletter), brand, tools, bottom bar. The link
       columns span brand and tools; the flexible tools row absorbs their extra height so the
       tools sit right under the blurb. */
    .ts-footer > .ts-container {
        grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
        grid-template-rows: auto auto 1fr auto;
        column-gap: var(--mm-s-14);
    }

    .ts-footer > .ts-container:has(> .ts-footer__cols > :nth-child(5)) {
        grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr));
    }

    .ts-footer > .ts-container:has(> .ts-footer__cols > :nth-child(6)) {
        grid-template-columns: minmax(0, 1.3fr) repeat(5, minmax(0, 1fr));
        column-gap: var(--mm-s-10);
    }

    .ts-footer__brand {
        grid-column: 1;
        grid-row: 2;
    }

    .ts-footer__main {
        grid-column: 1;
        grid-row: 3;
        align-self: start;
        margin-block: var(--mm-s-4) 0;
    }

    .ts-footer__col:not(.ts-footer__brand) {
        grid-row: 2 / span 2;
    }

    .ts-footer__bottom {
        grid-row: 4;
    }
}

/* ==========================================================================
   9. Megamenu skin (library megamenu.css owns the mechanics; single-class selectors so the
      skin wins by source order): a paper sheet under the ruled bar, ink border, misprint
      shadow, Zilla group titles, Courier counts, dashed separators.
   ========================================================================== */

.ts-mega {
    --ts-focus: var(--mm-focus);
    border-block: 2px solid var(--ec-fg);
    background: var(--ec-surface);
    box-shadow: 0 4px 0 0 var(--mm-offset);
    color: var(--ec-fg);
}

.ts-mega__title {
    font-family: var(--ec-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ec-fg);
}

.ts-mega__links {
    font-size: 1rem;
}

.ts-mega__cat-count,
.ts-mega__prod-price,
.ts-mega__banner-eyebrow {
    font-family: var(--ts-font-mono);
    font-weight: 700;
    color: var(--ec-fg-2);
}

.ts-mega__badge {
    border-radius: 0;
    background: var(--mm-yellow);
    color: var(--mm-yellow-ink);
}

.ts-mega-toggle {
    border-radius: var(--mm-btn-r);
}

.ts-mega-toggle:hover {
    background: rgb(252 252 250 / 0.12);
}

/* Short viewports (landscape phones, 200-400% zoom): the masthead scrolls away with the page
   instead of holding a third of the reading area (WCAG 1.4.10). Anchors and sticky asides then
   need no offset for it. */
@media (max-height: 30rem) {
    .ts-header.is-sticky {
        position: relative;
    }

    :root {
        --ts-sticky-offset: 0px !important;
        --mm-sticky-hidden: 0px !important;
    }
}