/**
 * Mimeo · the core views that are not on every page (design spec §9), enabled by the head
 * partial on com_content (not the home page), com_users, com_finder, com_tags, com_contact,
 * com_newsfeeds, com_privacy and com_config only, so the preset stays within the A6.2 budget.
 *
 *  1. Inner page frame          5. Sign-in, registration, remind, reset: the membership card
 *  2. Article                   6. Profile and profile edit
 *  3. Blog, featured, list      7. Smart Search
 *  4. Categories                8. Tags
 *                               9. Contact, archive, front-end editing, privacy, config
 *
 * Every rule carries a class outside :where() (joomla.css §13 weighs (0,0,2) and prints before
 * this file anyway). Page H1s, prose, tags, fields and pagination are in components.css.
 *
 * @copyright   Copyright (C) 2026 BulaSikku Technologies Private Limited. All rights reserved.
 * @license     GNU General Public License version 2 or later
 */

/* ==========================================================================
   1. Inner page frame: under the breadcrumbs, the content row carries the page head
   ========================================================================== */

.mm-rule-head,
.ts-article__header,
.ts-journal__head,
.ts-catlist > h1:first-child,
.ts-tags__head,
.ts-tags-tag__head,
.ts-finder__head,
.ts-profile__head {
    border-block-start: 2px solid var(--mm-rule-strong);
    padding-block-start: 1.125rem;
}

/* ==========================================================================
   2. Article (§9.1): category tag, misregistered H1, Courier meta, then the text on a 68ch
      measure. From 75rem an aside of 320px (sticky) holds the meta, the tags and "In this
      issue" (the H2 index, media/js/mimeo.js); below it the meta and tags follow the head.
   ========================================================================== */

.ts-article {
    display: flex;
    flex-direction: column;
    color: var(--ec-fg);
}

.ts-article__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mm-s-4);
    margin: 0 0 var(--mm-s-8);
}

.ts-article__header > .ts-article__title {
    max-inline-size: 55rem;
}

/* The menu's page heading (h1 when shown) reads as the Courier kicker above the article. */
.ts-article__pageheading {
    order: -2;
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-shadow: none;
}

.ts-article__eyebrow {
    order: -1;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.2;
}

.ts-article__eyebrow > a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2rem;
    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-weight: 600;
    text-decoration: none;
}

.ts-article__status {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mm-s-2);
    margin: 0;
}

.ts-article__hero {
    display: flow-root;
    margin: 0 0 var(--mm-s-10);
}

.ts-article .ts-article__hero :is(figure, .item-image) {
    float: none;
    max-inline-size: none;
    margin: 0;
}

.ts-article__hero img {
    display: block;
    inline-size: 100%;
    max-block-size: 40rem;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--ec-border);
    border-radius: 0;
    object-fit: cover;
}

.ts-article__hero figcaption {
    margin: var(--mm-s-2) 0 0;
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.35;
}

.ts-article__layout {
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-8);
}

.ts-article__main {
    min-inline-size: 0;
}

/* The first paragraph of the body is the lede (20/1.5). */
.ts-article__body.ts-prose > p:first-child {
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
    line-height: 1.5;
}

/* Details: the meta line, the tags, the edit icons; before the text on narrow screens. */
.ts-article__aside {
    order: -1;
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-4);
    margin: 0;
    padding: 0;
    font-family: var(--ec-font-body);
}

.ts-article__aside .mm-meta.article-info {
    margin-block: 0;
}

.ts-article__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mm-s-2);
}

/* "In this issue": numbered H2 index with dotted leaders (inserted by mimeo.js from 75rem). */
.mm-toc {
    display: none;
}

@media (min-width: 75rem) {
    .ts-article__layout:not(.ts-article__layout--full) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 20rem;
        column-gap: var(--mm-s-14);
        align-items: start;
    }

    .ts-article__layout:not(.ts-article__layout--full) > .ts-article__main {
        grid-area: 1 / 1;
    }

    .ts-article__aside {
        order: 0;
        grid-area: 1 / 2;
        position: sticky;
        inset-block-start: calc(var(--ts-sticky-offset, 0px) - var(--mm-sticky-hidden, 0px) + 1.5rem);
        gap: var(--mm-s-5);
        padding: var(--mm-s-5);
        border: 1px solid var(--ec-border);
        border-radius: var(--mm-r);
        background-color: var(--ec-surface);
    }

    .ts-article__aside .mm-meta.article-info {
        flex-direction: column;
        gap: var(--mm-s-2);
    }

    .mm-toc {
        display: block;
        margin: 0;
        padding: var(--mm-s-4) 0 0;
        border-block-start: 2px solid var(--mm-rule-strong);
    }
}

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

.mm-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: mm-toc;
}

.mm-toc__item {
    margin: 0;
    padding: 0;
    counter-increment: mm-toc;
    list-style: none;
}

.mm-toc__link {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    min-block-size: 2.75rem;
    padding-block: 0.5rem;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.mm-toc__link::before {
    content: counter(mm-toc, decimal-leading-zero);
    flex: none;
    min-inline-size: 1.75rem;
    color: var(--mm-accent-ink);
    font-family: var(--ec-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

/* Article footer (design 9.1): the tags row, the author card (48px disc, Courier "Written by",
   Zilla 22 name, 16px bio) and "More longreads" as index rows under a 2px ink rule. */
.mm-article-foot {
    display: grid;
    gap: var(--mm-s-8);
    margin-block: var(--mm-s-10) var(--mm-s-8);
}

.mm-author {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    column-gap: var(--mm-s-4);
    padding: var(--mm-s-5);
    border: 1px solid var(--ec-border);
    border-radius: var(--mm-r);
    background-color: var(--ec-surface);
}

/* Without a bio the card is a name plate: it sizes to its content. */
.mm-author--short {
    justify-self: start;
    align-items: center;
}

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

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

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

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

.mm-author__link {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    color: var(--ec-fg);
    font-weight: 600;
    text-decoration: underline 2px var(--mm-accent-ink);
    text-underline-offset: 5px;
}

.mm-more-longreads__title {
    margin: 0 0 var(--mm-s-2);
    padding-block-start: 1.125rem;
    border-block-start: 2px solid var(--mm-rule-strong);
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}

@media (hover: hover) {
    .mm-author__link:hover {
        color: var(--mm-accent-hover);
        text-decoration-thickness: 3px;
    }
}

/* The author's own section numbers (mimeo.js): the numeral follows the heading, blank if none. */
.mm-toc__link[data-mm-num]::before {
    content: attr(data-mm-num);
}

/* The scroll-spy's current row: the yellow highlighter sits behind the words themselves (ink
   on yellow in both schemes), never a bar under the row with ink on the card. */
.mm-toc__text {
    padding: 0.0625rem 0.125rem;
    margin-inline: -0.125rem;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.mm-toc__link[aria-current="true"] > .mm-toc__text {
    background-color: var(--mm-yellow);
    color: var(--mm-yellow-ink);
}

/* Forced colours drop the highlighter: the current section keeps a system-colour outline. */
@media (forced-colors: active) {
    .mm-toc__link[aria-current="true"] > .mm-toc__text {
        outline: 2px solid Highlight;
        outline-offset: 1px;
    }
}

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

    .ts-article__eyebrow > a:hover {
        text-decoration: underline 2px;
        text-underline-offset: 3px;
    }
}

/* Prev / next: two paper cards (html/plg_content_pagenavigation/default.php). */
.mm-pagenav {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mm-s-4);
    max-inline-size: none;
    margin: var(--mm-s-12) 0 0;
    padding: var(--mm-s-6) 0 0;
    border-block-start: 2px solid var(--mm-rule-strong);
}

.mm-pagenav__link {
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-2);
    min-block-size: 5.5rem;
    padding: var(--mm-s-4) var(--mm-s-5);
    border: 1px solid var(--ec-border);
    border-radius: var(--mm-r);
    background-color: var(--ec-surface);
    color: var(--ec-fg);
    text-decoration: none;
    transition: border-color var(--ec-dur-1) var(--ec-ease);
}

.mm-pagenav__link.previous {
    align-items: flex-start;
    text-align: start;
}

.mm-pagenav__link.next {
    align-items: flex-end;
    text-align: end;
}

/* The kit's generic ".pagenavigation .next" pushes a lone link to the end with an auto margin;
   here both links are grid cells of equal width. */
.pagenavigation .mm-pagenav__link:is(.next, .previous) {
    margin-inline: 0;
}

.mm-pagenav__label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
}

.mm-pagenav__icon {
    flex: none;
    inline-size: 1.125rem;
    block-size: 1.125rem;
}

.mm-pagenav__title {
    font-family: var(--ec-font-display);
    font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem);
    font-weight: 700;
    line-height: 1.2;
    text-wrap: balance;
}

@media (min-width: 40rem) {
    .mm-pagenav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mm-pagenav__link.next {
        grid-column: 2;
    }
}

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

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

/* URLs (links A/B/C), custom fields and the pagebreak index. */
.ts-article__links,
.ts-article .fields-container {
    margin: 0 0 var(--mm-s-8);
    padding: var(--mm-s-5) var(--mm-s-6);
    border: 1px solid var(--ec-border);
    border-radius: var(--mm-r);
    background-color: var(--ec-surface);
}

.ts-article__pager {
    margin: 0 0 var(--mm-s-6);
}

/* ==========================================================================
   3. Blog, featured and category list (§9.2)
   ========================================================================== */

.ts-journal {
    display: block;
}

.ts-journal__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mm-s-3);
    margin: 0 0 var(--mm-s-10);
}

.ts-journal__pageheading + .ts-journal__title,
.ts-journal__head--section > .ts-journal__title {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    text-wrap: balance;
}

.ts-journal__sub,
.ts-journal__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;
}

.ts-journal__count-num {
    color: var(--ec-fg);
}

.ts-journal__desc {
    margin: 0;
}

.ts-journal__desc img {
    max-inline-size: 100%;
    margin-block-end: var(--mm-s-4);
    border: 1px solid var(--ec-border);
}

.ts-journal__section {
    margin: var(--mm-s-12) 0 0;
}

.ts-journal__section-title {
    margin: 0 0 var(--mm-s-4);
    padding: 0.875rem 0 0;
    border-block-start: 2px solid var(--mm-rule-strong);
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}

.ts-journal__actions {
    margin: var(--mm-s-8) 0 0;
}

/* Post grid: the admin's column count, 3 across at most (2 from 48rem). */
.ts-postgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mm-s-6);
    margin: 0 0 var(--mm-s-6);
}

@media (min-width: 48rem) {
    .ts-postgrid:is(.ts-postgrid--cols-2, .ts-postgrid--cols-3, .ts-postgrid--cols-4, .ts-postgrid--cols-5, .ts-postgrid--cols-6) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .ts-postgrid:is(.ts-postgrid--cols-3, .ts-postgrid--cols-4, .ts-postgrid--cols-5, .ts-postgrid--cols-6) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Article card: paper, 1px border, a 16:10 window (the image, or template riso art). */
.ts-postcard {
    position: relative;
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    overflow: clip;
    border: 1px solid var(--ec-border);
    border-radius: var(--mm-r);
    background-color: var(--ec-surface);
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    transition: border-color var(--ec-dur-1) var(--ec-ease);
}

/* Kit joomla.css spaces plain blog items with a bottom padding and rule; cards need neither. */
.ts-postgrid > .ts-postcard.blog-item {
    padding-block-end: 0;
    border-block-end: 1px solid var(--ec-border);
}

.ts-postcard__media {
    position: relative;
    flex: none;
    aspect-ratio: 16 / 10;
    overflow: clip;
    border-block-end: 1px solid var(--ec-border);
    background-color: var(--mm-surface-3);
}

.ts-postcard__media :is(figure, .item-image) {
    float: none;
    block-size: 100%;
    max-inline-size: none;
    margin: 0;
}

.ts-postcard__media img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    border-radius: 0;
    object-fit: cover;
}

.ts-postcard__media figcaption {
    display: none;
}

/* No image: riso art, a fluoro hatch under a big misregistered Zilla initial. The flood
   rotates fluoro, riso blue, navy along the list like the event posters. */
.ts-postcard__media--placeholder {
    --mm-art-ink: var(--mm-fluoro);
    --mm-art-fg: var(--mm-navy);
    background:
        repeating-linear-gradient(45deg, var(--mm-art-ink) 0 1.8px, transparent 1.8px 5px) right top / 45% 100% no-repeat,
        var(--mm-surface-3);
}

.ts-postcard:nth-child(3n + 2) .ts-postcard__media--placeholder {
    --mm-art-ink: var(--mm-offset);
}

.ts-postcard:nth-child(3n + 3) .ts-postcard__media--placeholder {
    --mm-art-ink: var(--mm-navy);
}

.ts-postcard__monogram {
    position: absolute;
    inset-block-end: -0.12em;
    inset-inline-start: 0.12em;
    color: var(--mm-art-fg);
    font-family: var(--ec-font-display);
    font-size: clamp(6rem, 5rem + 4vw, 9rem);
    font-weight: 700;
    line-height: 1;
    text-shadow: 0.04em 0.03em 0 var(--mm-fluoro);
}

.ts-postcard:nth-child(3n + 2) .ts-postcard__monogram,
.ts-postcard:nth-child(3n + 3) .ts-postcard__monogram {
    text-shadow: 0.04em 0.03em 0 var(--mm-offset);
}

[data-color-scheme="dark"] .ts-postcard__media--placeholder {
    --mm-art-fg: var(--ec-fg);
}

.ts-postcard.blog-item::after,
.ts-postcard__body.item-content::after {
    display: none;
}

.ts-postcard__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mm-s-3);
    padding: var(--mm-s-5);
}

.ts-postcard__body > .page-header {
    order: -1;
    margin: 0;
    padding: 0;
    border: 0;
}

.ts-postcard__body > .page-header > :is(h2, h3) {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    text-wrap: pretty;
}

.ts-postcard__body > .page-header > :is(h2, h3) > a {
    color: inherit;
    text-decoration: none;
}

/* The title link covers the card; tags, the author and read more sit above it. */
.ts-postcard__body > .page-header > :is(h2, h3) > a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ts-postcard__body :is(.tags, .readmore, .icons, .article-info a) {
    position: relative;
    z-index: 1;
}

.ts-postcard__body > .article-info {
    order: -2;
}

/* Side by side, the meta keeps a two-line block, so titles in a row start on one line whether
   a card's meta wraps or not. */
@media (min-width: 48rem) {
    .ts-postcard__body > .article-info {
        min-block-size: calc(2lh + 1.75rem); /* two meta rows with their gap and padding */
    }
}

.ts-postcard__excerpt.ts-prose {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.ts-postcard__excerpt.ts-prose > * {
    margin: 0 0 0.5rem;
    font-size: inherit;
    line-height: inherit;
}

/* Blog cards without an image: the fallback art varies by article (data-ts-art, the article id
   modulo 5; design 7.2 motifs): 0 the bicycle (community.css), 1 speech bubbles, 2 a book, 3 a
   map pin on a dashed route, 4 a cog; the misregistered hatch follows the motif's outline. */
.ts-journal .ts-postcard__media--placeholder[data-ts-art="1"]::before,
.ts-journal .ts-postcard__media--placeholder[data-ts-art="1"]::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-width='11' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M64 34h160a22 22 0 0 1 22 22v64a22 22 0 0 1-22 22H128l-40 34v-34H64a22 22 0 0 1-22-22V56a22 22 0 0 1 22-22z'/%3E%3Cpath d='M270 96h66a22 22 0 0 1 22 22v50a22 22 0 0 1-22 22h-8v30l-34-30h-24a22 22 0 0 1-22-22'/%3E%3Cpath d='M92 76h108M92 104h70'/%3E%3C/svg%3E");
}

.ts-journal .ts-postcard__media--placeholder[data-ts-art="2"]::before,
.ts-journal .ts-postcard__media--placeholder[data-ts-art="2"]::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-width='11' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M200 66c-40-24-100-26-150-14v144c50-12 110-10 150 14 40-24 100-26 150-14V52c-50-12-110-10-150 14zM200 66v144'/%3E%3Cpath d='M84 94c28-6 56-4 84 6M84 130c28-6 56-4 84 6M232 100c28-10 56-12 84-6M232 136c28-10 56-12 84-6'/%3E%3C/svg%3E");
}

.ts-journal .ts-postcard__media--placeholder[data-ts-art="3"]::before,
.ts-journal .ts-postcard__media--placeholder[data-ts-art="3"]::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-width='11' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M200 26c-38 0-66 28-66 64 0 48 66 106 66 106s66-58 66-106c0-36-28-64-66-64z'/%3E%3Ccircle cx='200' cy='90' r='22'/%3E%3Cpath d='M36 214c50-34 92 10 140-10M232 206c44-18 80 12 132-18' stroke-dasharray='2 22'/%3E%3C/svg%3E");
}

.ts-journal .ts-postcard__media--placeholder[data-ts-art="4"]::before,
.ts-journal .ts-postcard__media--placeholder[data-ts-art="4"]::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-width='11' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M263 109 L285 110 L285 130 L263 131 L252 157 L268 173 L253 188 L237 172 L211 183 L210 205 L190 205 L189 183 L163 172 L147 188 L132 173 L148 157 L137 131 L115 130 L115 110 L137 109 L148 83 L132 67 L147 52 L163 68 L189 57 L190 35 L210 35 L211 57 L237 68 L253 52 L268 67 L252 83Z'/%3E%3Ccircle cx='200' cy='120' r='28'/%3E%3C/svg%3E");
}

/* ... and the hatch band rotates through the inks. */
.ts-journal .ts-postcard__media--placeholder:is([data-ts-art="1"], [data-ts-art="3"]) {
    background:
        repeating-linear-gradient(45deg, var(--mm-accent-ink) 0 1.8px, transparent 1.8px 5px) bottom / 100% 2.75rem no-repeat,
        var(--mm-surface-3, var(--ec-surface-2));
}

.ts-journal .ts-postcard__media--placeholder:is([data-ts-art="1"], [data-ts-art="3"])::before {
    background: repeating-linear-gradient(45deg, var(--mm-offset) 0 1.8px, transparent 1.8px 5px);
}


/* Read more: the more-link voice, one line with an ellipsis. */
:is(.ts-postcard__body, .ts-tag-item__body) .readmore {
    max-inline-size: 100%;
    margin: auto 0 0;
}

:is(.ts-postcard__body, .ts-tag-item__body) .readmore > a {
    display: block;
    max-inline-size: 100%;
    min-block-size: 0;
    overflow: hidden;
    margin: 0;
    padding: 0.625rem 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: start;
    text-decoration: underline 2px var(--mm-accent-ink);
    text-overflow: ellipsis;
    text-underline-offset: 5px;
    white-space: nowrap;
}

:is(.ts-postcard__body, .ts-tag-item__body) .readmore > a > [class*="icon-"] {
    display: none;
}

@media (hover: hover) {
    .ts-postcard:has(.page-header a:hover) {
        border-color: var(--ec-fg);
    }

    .ts-postcard__body > .page-header > :is(h2, h3) > a:hover {
        text-decoration: underline 2px var(--mm-accent-ink);
        text-underline-offset: 4px;
    }

    :is(.ts-postcard__body, .ts-tag-item__body) .readmore > a:hover {
        background: none;
        color: var(--mm-accent-hover);
        text-decoration-thickness: 3px;
    }
}

.ts-postcard:has(.page-header a:focus-visible) {
    outline: 3px solid var(--ts-focus);
    outline-offset: 2px;
}

.ts-postcard__body > .page-header a:focus-visible {
    outline: 0;
}

.ts-postcard.system-unpublished {
    border-style: dashed;
}

/* One-column lists: the window beside the text. */
@media (min-width: 48rem) {
    .ts-postgrid--cols-1 > .ts-postcard {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .ts-postgrid--cols-1 > .ts-postcard > .ts-postcard__media {
        aspect-ratio: auto;
        min-block-size: 12rem;
        border-block-end: 0;
        border-inline-end: 1px solid var(--ec-border);
    }
}

/* The lead: the feature card with the misprint shadow, image 7/12 beside the text. */
.ts-postgrid--lead > .ts-postcard {
    box-shadow: 3px 3px 0 0 var(--mm-offset);
}

@media (min-width: 60rem) {
    .ts-postgrid--lead > .ts-postcard {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    .ts-postgrid--lead > .ts-postcard > .ts-postcard__media {
        aspect-ratio: auto;
        min-block-size: 22rem;
        border-block-end: 0;
        border-inline-end: 1px solid var(--ec-border);
    }

    .ts-postgrid--lead > .ts-postcard > .ts-postcard__body {
        justify-content: center;
        gap: var(--mm-s-4);
        padding: var(--mm-s-10) var(--mm-s-8);
    }

    .ts-postgrid--lead .ts-postcard__body > .page-header > :is(h2, h3) {
        font-size: 2.25rem;
        line-height: 1.1;
    }

    .ts-postgrid--lead .ts-postcard__excerpt.ts-prose {
        font-size: 1.0625rem;
        -webkit-line-clamp: 4;
    }
}

/* Link rows ("More articles"): the numbered index. Zilla accent numerals, title 20/600,
   dotted leader, Courier date; dashed separators. */
.ts-postlinks {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: mm-links;
}

.ts-postlinks__item {
    margin: 0;
    padding: 0;
    border-block-end: 1px dashed var(--mm-rule);
    counter-increment: mm-links;
    list-style: none;
}

.ts-postlinks__link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--mm-s-1) 0.875rem;
    min-block-size: 3.5rem;
    padding: 0.875rem 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    text-decoration: none;
}

.ts-postlinks__link::before {
    content: counter(mm-links, decimal-leading-zero);
    flex: none;
    inline-size: 2.5rem;
    color: var(--mm-accent-ink);
    font-family: var(--ec-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.ts-postlinks__title {
    flex: 1 1 14rem;
    min-inline-size: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
}

.ts-postlinks__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--mm-s-3);
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
}

.ts-postlinks__meta > * + *::before {
    content: "· " / "";
}

.ts-postlinks__arrow {
    flex: none;
    align-self: center;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    color: var(--ec-fg);
    stroke-width: 1.75;
    transition: transform var(--ec-dur-1) var(--ec-ease);
}

[dir="rtl"] .ts-postlinks__arrow {
    transform: scaleX(-1);
}

@media (min-width: 48rem) {
    .ts-postlinks__link {
        flex-wrap: nowrap;
    }

    .ts-postlinks__title {
        display: flex;
        align-items: baseline;
        gap: 0.875rem;
    }

    /* The dotted leader between the title and the date. */
    .ts-postlinks__title::after {
        content: "";
        flex: 1;
        min-inline-size: 1rem;
        border-block-end: 2px dotted var(--mm-leader);
        transform: translateY(-2px);
    }
}

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

    .ts-postlinks__link:hover .ts-postlinks__arrow {
        transform: translateX(3px);
    }
}

/* Category list (core table): the index. Zilla numerals in the title cell, Courier dates. */
.ts-catlist .category-desc {
    margin: var(--mm-s-3) 0 var(--mm-s-8);
}

.ts-catlist > h1:first-child {
    margin-block-end: var(--mm-s-6);
}

.ts-catlist table.category {
    counter-reset: mm-rows;
}

.ts-catlist table.category > tbody > tr {
    counter-increment: mm-rows;
}

.ts-catlist table.category .list-title::before {
    content: counter(mm-rows, decimal-leading-zero);
    display: inline-block;
    min-inline-size: 3rem;
    color: var(--mm-accent-ink);
    font-family: var(--ec-font-display);
    font-size: 1.75rem;
    font-variant-numeric: oldstyle-nums proportional-nums;
    font-weight: 700;
    line-height: 1;
}

.ts-catlist table.category .list-title a {
    color: var(--ec-fg);
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
}

.ts-catlist table.category :is(.list-date, .list-author, .list-hits) {
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
}

.ts-catlist table.category .list-hits > span {
    padding: 0;
    background: none !important;
    color: var(--ec-fg-2) !important;
    font: inherit;
}

@media (hover: hover) {
    .ts-catlist table.category .list-title a:hover {
        text-decoration: underline 2px var(--mm-accent-ink);
        text-underline-offset: 4px;
    }
}

/* Filters above the list and the archive: a joined field and action button. */
:is(.ts-catlist, .com-content-archive, .ts-tags-tag) :is(.com-content-category__filter, .filters, .com-tags-tags__filter) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--mm-s-3);
    margin: 0 0 var(--mm-s-6);
}

/* ==========================================================================
   4. Categories: an index of paper cards with Zilla accent numerals and Courier counts
   ========================================================================== */

.ts-catgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: var(--mm-s-6);
    margin: var(--mm-s-8) 0 0;
    padding: 0;
    list-style: none;
    counter-reset: mm-cats;
}

.ts-catgrid__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-3);
    margin: 0;
    padding: var(--mm-s-5) var(--mm-s-6) var(--mm-s-6);
    border: 1px solid var(--ec-border);
    border-radius: var(--mm-r);
    background-color: var(--ec-surface);
    counter-increment: mm-cats;
    list-style: none;
    transition: border-color var(--ec-dur-1) var(--ec-ease);
}

.ts-catgrid__item::before {
    content: counter(mm-cats, 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-catgrid__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--mm-s-2) var(--mm-s-4);
}

.ts-catgrid__title {
    flex: 1 1 10rem;
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.ts-catgrid__title > a {
    color: inherit;
    text-decoration: none;
}

.ts-catgrid__title > a::after {
    content: "";
    position: absolute;
    inset: 0;
}

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

.ts-catgrid__desc.ts-prose {
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.5;
}

.ts-catgrid__media img {
    border: 1px solid var(--ec-border);
}

.ts-catgrid__toggle {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0;
    border: 2px solid var(--ec-fg);
    border-radius: var(--mm-btn-r);
    background-color: transparent;
    color: var(--ec-fg);
    cursor: pointer;
}

.ts-catgrid__children {
    position: relative;
    z-index: 1;
}

.ts-catgrid__children .ts-catgrid {
    margin: 0;
}

.ts-catgrid__children .ts-catgrid__item {
    background-color: var(--ec-surface-2);
}

.ts-catgrid__item:has(.ts-catgrid__title > a:focus-visible) {
    outline: 3px solid var(--ts-focus);
    outline-offset: 2px;
}

.ts-catgrid__title > a:focus-visible {
    outline: 0;
}

@media (hover: hover) {
    .ts-catgrid__item:has(> .ts-catgrid__head a:hover) {
        border-color: var(--ec-fg);
    }

    .ts-catgrid__item:has(> .ts-catgrid__head a:hover) .ts-catgrid__title {
        text-decoration: underline 2px var(--mm-accent-ink);
        text-underline-offset: 4px;
    }

    .ts-catgrid__toggle:hover {
        background-color: var(--ec-surface-2);
    }
}

/* ==========================================================================
   5. Sign-in, registration, remind, reset (§9.3): the "membership card". From 60rem a
      magenta band panel (html/layouts/mimeo/partials/auth-aside.php) beside a paper card;
      on phones the band is a 160px strip above the card.
   ========================================================================== */

.ts-auth-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-inline-size: 70rem;
    margin: 0 auto;
}

.ts-auth {
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-5);
    inline-size: 100%;
    max-inline-size: 40rem;
    margin: 0 auto;
    padding: var(--mm-s-6) var(--mm-s-5);
    border: 1px solid var(--ec-border);
    border-radius: var(--mm-r);
    background-color: var(--ec-surface);
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    line-height: 1.5;
}

.ts-auth--wide {
    max-inline-size: 48rem;
}

.ts-auth--narrow {
    max-inline-size: 32rem;
}

.ts-auth-page--aside > .ts-auth {
    max-inline-size: none;
    border-radius: 0 0 var(--mm-r) var(--mm-r);
}

.ts-auth__title {
    font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem);
}

.ts-auth .ts-auth__desc {
    float: none;
    inline-size: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.55;
}

.ts-auth__form,
.ts-auth__fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-5);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ts-auth__fieldset .control-group {
    margin: 0;
}

.ts-auth__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mm-s-3);
    margin: var(--mm-s-2) 0 0;
}

.ts-auth__submit.ts-btn {
    inline-size: 100%;
    min-block-size: 3.25rem;
    font-size: 1.125rem;
}

.ts-auth__options {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: var(--mm-s-3) 0 0;
    border-block-start: 1px dashed var(--mm-rule);
    list-style: none;
}

.ts-auth__options > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ts-auth__options a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    color: var(--ec-fg);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: underline 2px var(--mm-accent-ink);
    text-underline-offset: 5px;
}

.ts-auth__divider {
    display: flex;
    align-items: center;
    gap: var(--mm-s-3);
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
}

.ts-auth__divider::before,
.ts-auth__divider::after {
    content: "";
    flex: 1;
    border-block-start: 1px dashed var(--mm-rule);
}

/* Social and passkey logins: ghost L buttons, full width. */
.ts-auth__extras button {
    inline-size: 100%;
    min-block-size: 3.25rem;
    border: 2px solid var(--ec-fg);
    border-radius: var(--mm-btn-r);
    background-color: transparent;
    color: var(--ec-fg);
    font-weight: 600;
}

/* Registration: fieldsets as numbered steps, "01 Your details" over a 2px rule. */
.com-users-registration .ts-auth__form {
    counter-reset: mm-step;
}

.com-users-registration .ts-auth__fieldset {
    counter-increment: mm-step;
}

.ts-auth__legend,
.com-users-registration .ts-auth__fieldset > legend {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    inline-size: 100%;
    margin: 0 0 var(--mm-s-2);
    padding: 0 0 0.625rem;
    border-block-end: 2px solid var(--mm-rule-strong);
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    float: none;
}

.com-users-registration .ts-auth__fieldset > legend::before {
    content: counter(mm-step, decimal-leading-zero);
    color: var(--mm-accent-ink);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
}

/* The membership card band. */
.mm-membercard {
    --ts-focus: var(--mm-focus-band);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--mm-s-3);
    block-size: 100%;
    min-block-size: 10rem;
    padding: var(--mm-s-5);
    overflow: clip;
    border-radius: var(--mm-r) var(--mm-r) 0 0;
    background-color: var(--ec-accent);
    color: var(--mm-on-band);
}

.mm-membercard__stamp {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
    --mm-rubber-size: 6rem !important;
    color: var(--mm-yellow);
}

.mm-membercard__line {
    max-inline-size: 12ch;
    margin: 0;
    color: var(--mm-on-band);
    font-family: var(--ec-font-display);
    font-size: clamp(2rem, 1.6rem + 1.6vw, 3.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.015em;
    text-shadow: 0.04em 0.03em 0 var(--mm-misreg-band);
    text-wrap: balance;
}

.mm-membercard__text {
    display: none;
    max-inline-size: 30rem;
    margin: 0;
    color: var(--mm-on-band);
    font-size: 1.0625rem;
    line-height: 1.55;
}

@media (min-width: 60rem) {
    /* The membership card is two panels across the container (design 9.3), on the same edge as
       the breadcrumbs, the header and the footer. */
    .ts-auth-page--aside {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: stretch;
        max-inline-size: none;
    }

    .ts-auth-page--aside > .ts-auth {
        grid-column: 2;
        grid-row: 1;
        padding: var(--mm-s-10);
        border-inline-start: 0;
        border-radius: 0 var(--mm-r) var(--mm-r) 0;
    }

    .ts-auth-page--aside > .ts-auth-page__aside {
        grid-column: 1;
        grid-row: 1;
    }

    .mm-membercard {
        justify-content: flex-end;
        gap: var(--mm-s-5);
        min-block-size: 30rem;
        padding: var(--mm-s-10);
        border-radius: var(--mm-r) 0 0 var(--mm-r);
    }

    .mm-membercard__stamp {
        inset-block-start: var(--mm-s-10);
        inset-inline-start: var(--mm-s-10);
        inset-inline-end: auto;
        --mm-rubber-size: 7.5rem !important;
    }

    .mm-membercard__text {
        display: block;
    }
}

@media (width < 60rem) {
    .ts-auth-page:not(.ts-auth-page--aside) > .ts-auth,
    .ts-auth-page--aside > .ts-auth {
        padding: var(--mm-s-6) var(--mm-s-5);
    }

    .ts-auth-page--aside > .ts-auth-page__aside {
        order: -1;
    }
}

@media (min-width: 40rem) {
    .ts-auth-page:not(.ts-auth-page--aside) > .ts-auth {
        padding: var(--mm-s-10);
    }
}

@media (hover: hover) {
    .ts-auth__options a:hover {
        color: var(--mm-accent-hover);
        text-decoration-thickness: 3px;
    }

    .ts-auth__extras button:hover {
        background-color: var(--ec-surface-2);
    }
}

/* ==========================================================================
   6. Profile (§9.6, com_users): page head, the details as an index of label, leader, value,
      a ghost "Edit". Profile edit is the form sheet.
   ========================================================================== */

.ts-profile {
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-8);
    max-inline-size: 55rem;
    font-family: var(--ec-font-body);
}

.ts-profile__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--mm-s-4);
    margin: 0;
}

.ts-profile__actions {
    margin: 0;
}

.ts-profile__body {
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-8);
}

.ts-profile__body fieldset {
    min-inline-size: 0;
    margin: 0;
    padding: var(--mm-s-5) var(--mm-s-6) var(--mm-s-3);
    border: 1px solid var(--ec-border);
    border-radius: var(--mm-r);
    background-color: var(--ec-surface);
}

.ts-profile__body fieldset > legend {
    float: inline-start;
    inline-size: 100%;
    margin: 0 0 var(--mm-s-2);
    padding: 0 0 0.625rem;
    border-block-end: 2px solid var(--mm-rule-strong);
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
}

.ts-profile__body dl {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
}

.ts-profile__body dl > dt {
    display: flex;
    align-items: baseline;
    gap: 0.875rem;
    margin: 0;
    padding: 0.75rem 0 0;
    color: var(--ec-fg);
    font-size: 1rem;
    font-weight: 600;
}

.ts-profile__body dl > dd {
    margin: 0;
    padding: 0.25rem 0 0.75rem;
    border-block-end: 1px dashed var(--mm-rule);
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.ts-profile__body dl > dd:last-child {
    border-block-end: 0;
}

@media (min-width: 40rem) {
    /* Index rows: label, a dotted leader that runs on to the value, the value set flush right,
       so every panel shares one value edge whatever its longest label. The label's leader fills
       its column; the value's own leader carries it on up to the value. */
    .ts-profile__body dl {
        grid-template-columns: minmax(0, 1fr) minmax(0, max-content);
        column-gap: 0;
    }

    .ts-profile__body dl > :is(dt, dd) {
        line-height: 1.5rem;
    }

    .ts-profile__body dl > dt {
        padding: 0.75rem 0;
    }

    /* The row rule is one dashed run across label and value: each cell draws its half as a
       1px strip whose dashes share one viewport-anchored phase, like the leader. */
    .ts-profile__body dl > :is(dt, dd) {
        position: relative;
        border-block-end: 0;
    }

    .ts-profile__body dl > dt::before,
    .ts-profile__body dl > dd::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        block-size: 1px;
        background: repeating-linear-gradient(90deg, var(--mm-rule) 0 4px, transparent 4px 7px) fixed;
    }

    /* The leader is drawn in two cells (label, value) but reads as one run: both halves sit at
       the same height and share one dot phase (the dots are anchored to the viewport). */
    .ts-profile__body dl > dt::after,
    .ts-profile__body dl > dd::before {
        content: "";
        flex: 1 1 0;
        align-self: flex-end;
        block-size: 2px;
        margin-block-end: 0.3125rem;
        background: repeating-linear-gradient(90deg, var(--mm-leader) 0 2px, transparent 2px 4px) fixed;
    }

    .ts-profile__body dl > dt::after {
        min-inline-size: 2rem;
    }

    .ts-profile__body dl > dd {
        display: flex;
        align-items: baseline;
        padding: 0.75rem 0;
        text-align: end;
    }

    .ts-profile__body dl > dd::before {
        min-inline-size: 0;
        margin-inline-end: 0.875rem;
    }

    .ts-profile__body dl > dt:nth-last-child(2)::before,
    .ts-profile__body dl > dd:last-child::after {
        content: none;
    }
}

/* A floated legend sits inside its paper card instead of breaking the border (as Bootstrap
   does); whatever follows it clears the float. */
:is(.ts-profile__body, .com-users-profile__edit, .contact-form) legend + * {
    clear: both;
}

/* Profile edit, contact and the front-end editor: the form sheet (§9.7). */
.com-users-profile__edit,
.contact-form,
.edit.item-page {
    font-family: var(--ec-font-body);
}

.com-users-profile__edit fieldset,
.contact-form fieldset {
    min-inline-size: 0;
    margin: 0 0 var(--mm-s-8);
    padding: var(--mm-s-5) var(--mm-s-6) var(--mm-s-2);
    border: 1px solid var(--ec-border);
    border-radius: var(--mm-r);
    background-color: var(--ec-surface);
}

.com-users-profile__edit fieldset > legend,
.contact-form fieldset > legend {
    float: inline-start;
    inline-size: 100%;
    margin: 0 0 var(--mm-s-5);
    padding: 0 0 0.625rem;
    border-block-end: 2px solid var(--mm-rule-strong);
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
}

:is(.com-users-profile__edit, .contact-form) .com-users-profile__edit-submit {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mm-s-3);
}

/* ==========================================================================
   7. Smart Search (§9.4): a visible misregistered "Search" H1, a 52px field joined to the
      action button, a Courier count, result rows with a Courier type label, a Zilla title,
      a fg-2 snippet with highlighter marks, Courier URL and taxonomy; dashed rows.
   ========================================================================== */

.ts-finder {
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-6);
    font-family: var(--ec-font-body);
}

/* The head and its rule span the container like every page head; the form and results keep the
   reading measure. */
.ts-finder > :not(.ts-finder__heading) {
    inline-size: 100%;
    max-inline-size: 55rem;
}

.ts-finder > h1.ts-sr-only,
.ts-tags > h1.ts-sr-only,
.ts-finder > .ts-finder__heading {
    position: static !important;
    inline-size: auto !important;
    block-size: auto !important;
    margin: 0 !important;
    padding: 1.125rem 0 0 !important;
    overflow: visible !important;
    clip-path: none !important;
    border-block-start: 2px solid var(--mm-rule-strong) !important;
    white-space: normal !important;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: clamp(2.25rem, 1.4rem + 2.8vw, 4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.015em;
    text-shadow: 0.04em 0.03em 0 var(--mm-misreg);
}

.ts-finder__search {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ts-finder__label {
    display: block;
    margin: 0 0 var(--mm-s-2);
    color: var(--ec-fg);
    font-size: 1rem;
    font-weight: 600;
}

.ts-finder__inputrow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mm-s-3);
}

.ts-finder__field {
    position: relative;
    flex: 1 1 16rem;
    min-inline-size: 0;
}

.ts-finder__field-icon {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 1rem;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    color: var(--ec-fg-2);
    stroke-width: 1.75;
    transform: translateY(-50%);
    pointer-events: none;
}

.ts-finder .ts-finder__input.ts-input {
    inline-size: 100%;
    min-block-size: 3.25rem;
    padding-inline: 3rem 1rem;
    border: 1px solid var(--ec-border);
    border-radius: var(--mm-r);
    background-color: var(--ec-surface);
    font-size: 1.0625rem;
}

.ts-finder .ts-finder__submit.ts-btn {
    min-block-size: 3.25rem;
    padding-inline: 1.75rem;
    background-color: var(--mm-action);
    box-shadow: none;
    color: var(--mm-action-fg);
    font-size: 1.125rem;
}

.ts-finder .ts-finder__advanced-toggle.ts-btn {
    min-block-size: 3.25rem;
}

.ts-finder__advanced {
    min-inline-size: 0;
    margin: var(--mm-s-4) 0 0;
    padding: var(--mm-s-5) var(--mm-s-6);
    border: 1px solid var(--ec-border);
    border-radius: var(--mm-r);
    background-color: var(--ec-surface);
}

.ts-finder__tips > p {
    margin: 0 0 var(--mm-s-2);
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.5;
}

.ts-finder__filter .filter-branch {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: var(--mm-s-4);
}

.ts-finder__filter .control-group {
    margin: 0;
}

.ts-finder__filter label {
    display: block;
    margin: 0 0 var(--mm-s-2);
    font-size: 1rem;
    font-weight: 600;
}

.ts-finder__explained > p,
.ts-finder__count {
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.4;
}

.ts-finder__explained a {
    color: var(--ec-fg-2);
    text-decoration: underline 2px var(--mm-accent-ink);
    text-underline-offset: 4px;
}

.ts-finder__explained .term {
    color: var(--ec-fg);
}

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

.ts-finder__sort-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mm-s-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ts-finder__sort-link {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    color: var(--ec-fg);
    font-weight: 600;
    text-decoration: underline 2px var(--mm-accent-ink);
    text-underline-offset: 5px;
}

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

.ts-finder__result {
    margin: 0;
    padding: var(--mm-s-6) 0;
    border-block-end: 1px dashed var(--mm-rule);
    list-style: none;
}

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

.ts-finder__result-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--mm-s-2);
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
}

.ts-finder .ts-finder__result-type.ts-tag {
    min-block-size: 0;
    padding: 0;
    background: none;
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-weight: 700;
    text-transform: uppercase;
}

.ts-finder__result-type + .ts-finder__result-date::before {
    content: "· ";
}

.ts-finder__result-title {
    margin: 0;
    font-family: var(--ec-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
}

.ts-finder__result-link {
    color: var(--ec-fg);
    text-decoration: none;
}

.ts-finder__result-desc {
    margin: 0;
    max-inline-size: 68ch;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.5;
}

/* The highlighter bleeds past the letters with a shadow, never with padding: a hit inside a
   word ("chain" in "chainrings") must not split it. */
.ts-finder__result-desc mark,
.ts-finder__result-title mark {
    padding: 0;
    box-shadow: 0.08em 0 0 var(--mm-yellow), -0.08em 0 0 var(--mm-yellow);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-color: var(--mm-yellow);
    color: var(--mm-yellow-ink);
}

.ts-finder__result-url {
    margin: 0;
    overflow-wrap: anywhere;
}

.ts-finder__result-url > cite,
.ts-finder__result-taxonomy {
    color: var(--ec-fg-2);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 700;
}

/* One Courier line like the info block: the "Author:" / "Category:" labels stay for screen
   readers, the items are split by middle dots that lead each item and hang in the gap (clipped
   at the list's edges, so no wrapped line starts or ends with a dot). */
.ts-finder__result-taxonomy {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5em;
    margin: 0 -0.25rem;
    padding: 0 0.25rem;
    overflow-x: clip;
    list-style: none;
}

.ts-finder__result-taxonomy > li {
    display: inline-flex;
    align-items: baseline;
    margin: 0 0 0 -1.5em;
    padding: 0;
    list-style: none;
}

.ts-finder__result-taxonomy > li::before {
    content: "·" / "";
    flex: none;
    inline-size: 1.5em;
    text-align: center;
}

.ts-finder__result-tax-label {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* Empty search (§9.4): the worded "No matches" rubber stamp (partials/search-empty.php) takes
   the decorative stamp's place, then the suggestions as index rows. */
.ts-finder__empty:has(> .mm-empty__stamp)::before {
    content: none;
}

.ts-finder__empty > .mm-empty__stamp {
    grid-row: 1;
    justify-self: start;
    color: var(--mm-accent-ink);
}

.mm-suggest {
    justify-self: stretch;
    margin: var(--mm-s-3) 0 0;
    padding: var(--mm-s-3) 0 0;
    border-block-start: 2px solid var(--mm-rule-strong);
}

.mm-suggest__title {
    margin: 0 0 var(--mm-s-2);
    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;
}

.mm-suggest__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: mm-suggest;
}

.mm-suggest__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem var(--mm-s-3);
    margin: 0;
    padding: 0.625rem 0;
    border-block-end: 1px dashed var(--mm-rule);
    list-style: none;
    counter-increment: mm-suggest;
}

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

.mm-suggest__row::before {
    content: counter(mm-suggest, decimal-leading-zero);
    flex: none;
    min-inline-size: 2ch;
    color: var(--mm-accent-ink);
    font-family: var(--ec-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.mm-suggest__link {
    flex: 1 1 14rem;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: underline 2px var(--mm-accent-ink);
    text-underline-offset: 4px;
}

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

@media (min-width: 40rem) {
    .ts-finder__empty:has(> .mm-empty__stamp) {
        grid-template-columns: 6.5rem minmax(0, 1fr);
    }

    .ts-finder__empty > .mm-empty__stamp {
        grid-row: 1 / span 2;
        grid-column: 1;
        --mm-rubber-size: 6.5rem !important;
    }

    .ts-finder__empty:has(> .mm-empty__stamp) > :not(.mm-empty__stamp) {
        grid-column: 2;
    }
}

@media (hover: hover) {
    .ts-finder__result-link:hover,
    .ts-finder__sort-link:hover {
        text-decoration: underline 2px var(--mm-accent-ink);
        text-underline-offset: 4px;
        text-decoration-thickness: 3px;
    }

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

/* ==========================================================================
   8. Tags: the directory as an index of tags with Courier counts; a tag's items as article
      cards or index rows.
   ========================================================================== */

.ts-tags,
.ts-tags-tag {
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-6);
    font-family: var(--ec-font-body);
}

.ts-tags__head,
.ts-tags-tag__head {
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-3);
    margin: 0;
}

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

.ts-tags__intro-image img,
.ts-tags-tag__intro-image img {
    border: 1px solid var(--ec-border);
}

.ts-tags-filter,
.ts-tags-filter__search {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--mm-s-3);
    margin: 0;
}

.ts-tags-filter__search {
    flex: 1 1 16rem;
    min-inline-size: 0;
}

.ts-tags-filter .ts-input {
    flex: 1 1 12rem;
    inline-size: auto;
    min-inline-size: 0;
    min-block-size: 2.75rem;
    border: 1px solid var(--ec-border);
    border-radius: var(--mm-r);
}

.ts-tags-filter .ts-tags-filter__btn.ts-btn {
    min-block-size: 2.75rem;
    background-color: var(--mm-action);
    box-shadow: none;
    color: var(--mm-action-fg);
}

.ts-tags-filter .ts-tags-filter__btn--ghost.ts-btn {
    border: 2px solid var(--ec-fg);
    background-color: transparent;
    color: var(--ec-fg);
}

.ts-tags__items {
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-6);
}

.ts-tags-cloud {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: 0 var(--mm-s-8);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: mm-tags;
}

.ts-tags-cloud__item {
    margin: 0;
    padding: 0;
    border-block-end: 1px dashed var(--mm-rule);
    counter-increment: mm-tags;
    list-style: none;
}

.ts-tag-card__link {
    display: flex;
    align-items: baseline;
    gap: 0.875rem;
    min-block-size: 3.5rem;
    padding: 0.75rem 0;
    color: var(--ec-fg);
    text-decoration: none;
}

.ts-tag-card__link::before {
    content: counter(mm-tags, decimal-leading-zero);
    flex: none;
    min-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;
}

.ts-tag-card__body {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--mm-s-1) 0.875rem;
    min-inline-size: 0;
}

.ts-tag-card__title {
    display: flex;
    flex: 1;
    align-items: baseline;
    gap: 0.875rem;
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
}

.ts-tag-card__title::after {
    content: "";
    flex: 1;
    min-inline-size: 1rem;
    border-block-end: 2px dotted var(--mm-leader);
    transform: translateY(-2px);
}

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

.ts-tag-card__desc {
    flex-basis: 100%;
    margin: 0;
    color: var(--ec-fg-2);
    font-size: 1rem;
}

.ts-tag-card__media img {
    border: 1px solid var(--ec-border);
}

/* A tag's items: article cards (the blog card voice). */
.ts-tags-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: var(--mm-s-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ts-tags-grid__item {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: clip;
    border: 1px solid var(--ec-border);
    border-radius: var(--mm-r);
    background-color: var(--ec-surface);
    list-style: none;
}

.ts-tag-item__media img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    border-block-end: 1px solid var(--ec-border);
    object-fit: cover;
}

.ts-tag-item__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--mm-s-3);
    padding: var(--mm-s-5);
}

.ts-tag-item__title {
    margin: 0;
    font-family: var(--ec-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.ts-tag-item__title > a {
    color: var(--ec-fg);
    text-decoration: none;
}

.ts-tag-item__title > a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.ts-tag-item__excerpt {
    margin: 0;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.5;
}

.ts-tag-item__more {
    margin: auto 0 0;
    color: var(--ec-fg);
    font-weight: 600;
    text-decoration: underline 2px var(--mm-accent-ink);
    text-underline-offset: 5px;
}

.ts-tags-table__title a {
    color: var(--ec-fg);
    font-weight: 600;
    text-decoration: none;
}

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

@media (hover: hover) {
    .ts-tag-card__link:hover .ts-tag-card__title,
    .ts-tags-grid__item:has(.ts-tag-item__title a:hover) .ts-tag-item__title,
    .ts-tags-table__title a:hover {
        text-decoration: underline 2px var(--mm-accent-ink);
        text-underline-offset: 4px;
    }

    .ts-tags-grid__item:has(.ts-tag-item__title a:hover) {
        border-color: var(--ec-fg);
    }
}

.ts-tags-grid__item:has(.ts-tag-item__title a:focus-visible) {
    outline: 3px solid var(--ts-focus);
    outline-offset: 2px;
}

.ts-tag-item__title a:focus-visible {
    outline: 0;
}

/* ==========================================================================
   9. Contact, archive, front-end editing, privacy and config (core layouts)
   ========================================================================== */

:is(.com-contact, .com-content-archive, .com-privacy, .com-config, .com-contact-category, .com-newsfeeds-category, .com-users-profile__edit) > :is(h1, .page-header) {
    margin: 0 0 var(--mm-s-6);
    padding: 1.125rem 0 0;
    border-block-start: 2px solid var(--mm-rule-strong);
}

:is(.com-contact, .com-content-archive, .com-privacy, .com-config, .com-contact-category, .com-newsfeeds-category, .com-users-profile__edit) > .page-header > h1 {
    margin: 0;
}

:is(.com-contact, .com-contact-category, .com-content-archive, .com-newsfeeds-category, .com-privacy) :is(h2, h3) {
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-weight: 700;
    line-height: 1.15;
}

/* Contact: the details as paper cards, the form as the sheet. */
.com-contact {
    font-family: var(--ec-font-body);
}

.com-contact :is(.com-contact__container, .com-contact__address, .com-contact__miscinfo, .contact-address) {
    margin: 0 0 var(--mm-s-6);
}

.com-contact .contact-address,
.com-contact .com-contact__address {
    padding: var(--mm-s-5) var(--mm-s-6);
    border: 1px solid var(--ec-border);
    border-radius: var(--mm-r);
    background-color: var(--ec-surface);
    font-style: normal;
}

.com-contact .contact-form {
    max-inline-size: 45rem;
}

.com-contact .contact-form button[type="submit"] {
    min-block-size: 3.25rem;
    padding-inline: 1.5rem;
    border: 0;
    border-radius: var(--mm-btn-r);
    background-color: var(--mm-btn-primary);
    box-shadow: 3px 3px 0 0 var(--mm-offset);
    color: var(--mm-btn-primary-fg);
    font-weight: 600;
}

/* Archive: the list as index rows with Courier dates. */
.com-content-archive .archive-items,
.com-content-archive #archive-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.com-content-archive :is(.archive-items, #archive-items) > li {
    margin: 0;
    padding: var(--mm-s-5) 0;
    border-block-end: 1px dashed var(--mm-rule);
}

.com-content-archive :is(.archive-items, #archive-items) .page-header :is(h2, h3) {
    margin: 0 0 var(--mm-s-2);
    font-size: 1.375rem;
}

.com-content-archive :is(.archive-items, #archive-items) .page-header a {
    color: var(--ec-fg);
    text-decoration: none;
}

/* Front-end editing: the joomla-tab panel on paper, the toolbar under a 2px rule. */
.edit.item-page {
    max-inline-size: 60rem;
}

.edit.item-page joomla-tab > [role="tablist"] {
    gap: 0.25rem;
}

.edit.item-page joomla-tab-element {
    padding: var(--mm-s-6);
    border: 1px solid var(--ec-border);
    border-radius: 0 2px 2px 2px;
    background-color: var(--ec-surface);
}

.edit.item-page :is(.tox-tinymce, .editor) {
    border: 1px solid var(--ec-border) !important;
    border-radius: var(--mm-r) !important;
}

@media (hover: hover) {
    .com-content-archive :is(.archive-items, #archive-items) .page-header a:hover {
        text-decoration: underline 2px var(--mm-accent-ink);
        text-underline-offset: 4px;
    }
}

/* Kit joomla.css colours core's result title with the link colour: ink here, with the
   accent underline on hover and focus. */
.ts-finder .ts-finder__result-link .result__title-text {
    color: var(--ec-fg);
}

.ts-finder .ts-finder__field-icon {
    z-index: 1;
}

/* The eyebrow above the title already names the category: the meta line does not repeat it
   (design spec §9.1: tag, title, then "Author · date · N min read"). */
.ts-article:has(.ts-article__eyebrow) .mm-meta.article-info > dd.category-name {
    display: none;
}