/**
 * Forme · components (design spec §6) and the design of the core views (§9).
 *
 *  1. Buttons        2. Links          3. Fields and checks   4. Tags, badges, pills
 *  5. Cards, panels, meters, tabs, empty states               6. Page head and breadcrumbs
 *  7. Prose          8. Article        9. Blog, lists, categories, pagination
 * 10. Core modules 11. Messages, tables, core headings    12. component.php and print
 *
 * The views that are not on every page live in views.css (tags, Smart Search, sign-in,
 * profile, contact, archive, editing; enabled by the head partial on those views only) and
 * documents.css (error and offline documents, linked by the head partial there).
 *
 * joomla.css (kit) prints after this file and its §13 baseline weighs (0,0,2), so every rule
 * here carries at least one class outside :where(); rules on core classes that joomla.css also
 * styles (0,1,0) are scoped under a template class to out-rank it. Manrope is always set at
 * 100% width (--fm-disp-stretch); numerals use --fm-num-weight (800).
 *
 * @copyright   Copyright (C) 2026 BulaSikku Technologies Private Limited. All rights reserved.
 * @license     GNU General Public License version 2 or later
 */

/* ==========================================================================
   1. Buttons (§6.1). .ts-button (community blocks) and .ts-btn (kit overrides, the
      EasyCommerce contract) share one look: accent fill with ink text, or a 1.5px outline.
   ========================================================================== */

.ts-button,
.ts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-block-size: var(--ts-control-height, 2.75rem);
    margin: 0;
    padding: 0 1.25rem;
    border: 0;
    border-radius: var(--ec-btn-radius);
    background-color: var(--ts-btn-primary-bg);
    box-shadow: inset 0 0 0 1px var(--ts-btn-primary-border);
    color: var(--ts-btn-primary-fg);
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
    transition:
        background-color var(--ec-dur-1) var(--ec-ease),
        border-color var(--ec-dur-1) var(--ec-ease),
        box-shadow var(--ec-dur-1) var(--ec-ease),
        color var(--ec-dur-1) var(--ec-ease);
}

.ts-button svg,
.ts-btn svg {
    flex: none;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    stroke-width: 1.75;
}

.ts-button--primary:focus-visible,
.ts-btn:not(.ts-btn--outline, .fm-btn--ghost):focus-visible,
.fm-btn--ink:focus-visible {
    outline: 2px solid var(--fm-ink);
    outline-offset: -4px;
}

.ts-button--primary:active,
.ts-btn:not(.ts-btn--outline):active {
    background-color: var(--fm-accent-active);
}

/* Outline: transparent with a 1.5px fg-2 border; hover lifts to surface-2. */
.ts-button--secondary,
.ts-btn--outline {
    border: 1.5px solid var(--ts-btn-secondary-border);
    background-color: var(--ts-btn-secondary-bg);
    box-shadow: none;
    color: var(--ts-btn-secondary-fg);
    font-size: 1rem;
}

.ts-button--secondary:active,
.ts-btn--outline:active {
    background-color: var(--ec-border);
}

/* "You're going" and other pressed toggles: the lit room. */
.ts-button--secondary[aria-pressed="true"],
.ts-btn--outline[aria-pressed="true"] {
    border-color: var(--fm-signal);
    background-color: var(--fm-lit);
    color: var(--fm-lit-fg);
}

/* Size L 52 (hero, band). */
.fm-btn--l {
    min-block-size: 3.25rem;
    padding-inline: 1.5rem;
    font-size: 1.125rem;
}

/* Ink button on accent (the band). */
.fm-btn--ink {
    background-color: var(--fm-ink);
    box-shadow: none;
    color: var(--ec-accent);
}

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

/* Ghost and icon buttons (header icons, post actions). */
.fm-btn--ghost,
.fm-iconbtn {
    background-color: transparent;
    box-shadow: none;
    color: var(--ec-fg);
}

.fm-iconbtn {
    inline-size: 2.75rem;
    padding: 0;
}

.fm-btn--ghost:active,
.fm-iconbtn:active,
.fm-iconbtn[aria-pressed="true"] {
    background-color: var(--ec-surface-2);
}

@media (hover: hover) and (pointer: fine) {
    .ts-button--primary:hover,
    .ts-btn:not(.ts-btn--outline, .fm-btn--ink, .fm-btn--ghost, .fm-iconbtn):hover {
        background-color: var(--ts-btn-primary-hover-bg);
        color: var(--ts-btn-primary-hover-fg);
    }

    .ts-button--secondary:hover,
    .ts-btn--outline:hover {
        border-color: var(--ts-btn-secondary-hover-border);
        background-color: var(--ts-btn-secondary-hover-bg);
        color: var(--ts-btn-secondary-hover-fg);
    }

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

    .fm-btn--ghost:hover,
    .fm-iconbtn:hover {
        background-color: var(--ec-surface);
        color: var(--ec-fg);
    }

}

.ts-button[aria-disabled="true"],
.ts-button:disabled,
.ts-btn[aria-disabled="true"],
.ts-btn:disabled {
    border-color: var(--ec-border);
    background-color: var(--ec-surface-2);
    box-shadow: none;
    color: var(--ec-fg-2);
    cursor: not-allowed;
}

/* ==========================================================================
   2. Links (§6.2): the text CTA (accent, bold, 2px underline, trailing arrow that nudges)
      and the quiet link (footer, legal, meta).
   ========================================================================== */

.fm-link-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-block-size: 2.75rem;
    color: var(--fm-accent-ink);
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: underline 2px;
    text-underline-offset: 4px;
    transition: color var(--ec-dur-1) var(--ec-ease), text-underline-offset var(--ec-dur-2) var(--ec-ease);
}

.fm-link-cta--l {
    font-size: 1.125rem;
    text-underline-offset: 5px;
}

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

.fm-link-cta:focus-visible {
    border-radius: 4px;
}

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

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

    [dir="rtl"] .fm-link-cta:hover svg {
        transform: translateX(-3px);
    }
}

[dir="rtl"] .fm-link-cta svg {
    transform: scaleX(-1);
}

/* ==========================================================================
   3. Fields (§6.3). The bridge draws .form-control/.form-select from the K knobs; Forme
      sets 48px fields on its forms, the hover border and the label voice. .ts-input is the
      kit's text field (also drawn on Bootstrap-off pages by joomla.css §13.3).
   ========================================================================== */

:is(.ts-auth, .ts-profile, .ts-offline, .ts-error, .fm-form, .ts-finder__form, .ts-tags-filter, .contact-form, .com-users-profile__edit, .com-contact) {
    --ts-control-height: 3rem;
}

.ts-input,
:is(.ts-auth, .ts-profile, .ts-offline, .fm-form, .contact-form, .com-users-profile__edit) :is(.form-control, .form-select) {
    border-color: var(--fm-control);
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
}

.ts-input::placeholder,
:is(.ts-auth, .ts-profile, .ts-offline, .fm-form, .contact-form, .com-users-profile__edit) .form-control::placeholder {
    color: var(--ec-fg-2);
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
    .ts-input:hover:not(:focus, :disabled),
    :is(.ts-auth, .ts-profile, .ts-offline, .fm-form, .contact-form, .com-users-profile__edit) :is(.form-control, .form-select):hover:not(:focus, :disabled) {
        border-color: var(--ec-fg-2);
    }
}

.ts-input:focus,
:is(.ts-auth, .ts-profile, .ts-offline, .fm-form, .contact-form, .com-users-profile__edit) :is(.form-control, .form-select):focus {
    border-color: var(--fm-focus);
}

.ts-input[readonly],
:is(.ts-auth, .ts-profile, .fm-form, .contact-form, .com-users-profile__edit) .form-control[readonly] {
    background-color: var(--fm-sunken);
}

.ts-input[aria-invalid="true"],
:is(.ts-auth, .ts-profile, .ts-offline, .fm-form, .contact-form, .com-users-profile__edit) :is(.form-control, .form-select):is(.invalid, [aria-invalid="true"]) {
    border-color: var(--fm-danger);
}

/* Labels, help text, required marker (a quiet fg-2 star, never a red one). */
:is(.ts-auth, .ts-profile, .ts-offline, .fm-form, .contact-form, .com-users-profile__edit) :is(.control-label label, .form-label, label.ts-label) {
    display: inline-block;
    margin: 0 0 0.5rem;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

:is(.ts-auth, .ts-profile, .ts-offline, .fm-form, .contact-form, .com-users-profile__edit) :is(.star, .form-control-feedback) {
    color: var(--ec-fg-2);
    font-weight: 400;
}

:is(.ts-auth, .ts-profile, .fm-form, .contact-form, .com-users-profile__edit) :is(.form-text, .small.text-muted, [id$="-rules"], .form-control-feedback) {
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
    line-height: 1.35;
}

:is(.ts-auth, .ts-profile, .fm-form, .contact-form, .com-users-profile__edit) .control-group {
    margin: 0 0 1.25rem;
}

:is(.ts-auth, .ts-profile, .fm-form, .contact-form, .com-users-profile__edit) :is(.invalid-feedback, .form-control-feedback.invalid, label.invalid + .form-control-feedback) {
    color: var(--fm-danger);
    font-size: 0.9375rem;
}

:is(.ts-auth, .ts-profile, .fm-form, .contact-form, .com-users-profile__edit) textarea.form-control {
    min-block-size: 9rem;
    padding-block: 0.75rem;
    line-height: 1.55;
    resize: vertical;
}

/* Checks: 22px boxes with a 1.5px control border; checked = accent with an ink mark. */
.ts-check .form-check-input,
:is(.ts-auth, .ts-profile, .fm-form, .contact-form, .com-users-profile__edit) .form-check-input {
    border-width: 1.5px;
    border-color: var(--fm-control);
    background-color: var(--ec-surface);
}

.ts-check .form-check-input:checked,
:is(.ts-auth, .ts-profile, .fm-form, .contact-form, .com-users-profile__edit) .form-check-input:checked {
    border-color: var(--ec-accent);
    background-color: var(--ec-accent);
}

.ts-check .form-check-label,
:is(.ts-auth, .ts-profile, .fm-form, .contact-form, .com-users-profile__edit) .form-check-label {
    color: var(--ec-fg);
    font-size: 1.0625rem;
    line-height: 1.4;
}

/* ==========================================================================
   4. Tags and badges (§6.4): 24px, radius 6, A 14/700. Linked tags keep a 28px box
      (WCAG 2.5.8) and warm to the border colour on hover.
   ========================================================================== */

.fm-tag,
.ts-tag,
.ts-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-block-size: 1.5rem;
    margin: 0;
    padding: 0 0.5rem;
    border: 0;
    border-radius: var(--fm-r-tag);
    background-color: var(--ec-surface-2);
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: var(--fm-t-tag);
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
}

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

a.fm-tag,
a.ts-tag {
    min-block-size: 1.75rem;
    transition: background-color var(--ec-dur-1) var(--ec-ease), color var(--ec-dur-1) var(--ec-ease);
}

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

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

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

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

@media (hover: hover) and (pointer: fine) {
    a.fm-tag:hover,
    a.ts-tag:hover {
        background-color: var(--ec-border);
        color: var(--ec-fg);
    }
}

/* Avatars in content: the bubble shape (tight bottom-right corner). */
.ts-avatar--bubble,
.fm-avatar {
    border-radius: var(--fm-r-avatar);
}

[dir="rtl"] :is(.ts-avatar--bubble, .fm-avatar) {
    border-radius: 50% 50% 50% 22%;
}

/* ==========================================================================
   5. Cards, panels, meters, tabs, empty states (§6.6, §6.7, §6.8)
   ========================================================================== */

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

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

/* Tabs: a 48px bar, 3px signal underline on the selected tab (WAI-ARIA via template.js). */
.fm-tabs__list {
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
    margin: 0;
    padding: 0 1.25rem;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.fm-tabs__tab {
    display: inline-flex;
    align-items: center;
    flex: none;
    min-block-size: 3rem;
    margin: 0;
    padding: 3px 0 0;
    border: 0;
    border-block-end: 3px solid transparent;
    background: none;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--ec-dur-1) var(--ec-ease), border-color var(--ec-dur-1) var(--ec-ease);
}

.fm-tabs__tab[aria-selected="true"],
.fm-tabs__tab[aria-current] {
    border-block-end-color: var(--fm-signal);
    color: var(--ec-fg);
    font-weight: 700;
}

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

@media (hover: hover) and (pointer: fine) {
    .fm-tabs__tab:not([aria-selected="true"], [aria-current]):hover {
        border-block-end-color: var(--ec-border);
        color: var(--ec-fg);
    }
}

/* Empty state: "the room is dark". */
.fm-empty,
.ts-finder__empty,
.ts-journal__empty,
.ts-tags-empty {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 2rem;
    border: 1.5px dashed var(--ec-border);
    border-radius: var(--fm-r-bubble);
    background-color: var(--ec-surface);
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    line-height: 1.45;
    text-align: center;
}

.fm-empty::before,
.ts-finder__empty::before,
.ts-journal__empty::before,
.ts-tags-empty::before {
    content: "";
    inline-size: 3rem;
    block-size: 3rem;
    background:
        radial-gradient(circle at 50% 50%, var(--fm-signal) 0 2px, transparent 2.5px),
        var(--ec-fg-2);
    -webkit-mask: var(--fm-art-room) center / contain no-repeat;
    mask: var(--fm-art-room) center / contain no-repeat;
}

:is(.fm-empty, .ts-finder__empty, .ts-tags-empty) :is(h2, h3, .fm-empty__title, .ts-finder__empty-title) {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.25rem;
    font-stretch: var(--fm-disp-stretch);
    font-weight: 700;
    line-height: 1.2;
}

:is(.fm-empty, .ts-finder__empty, .ts-tags-empty) p {
    max-inline-size: 44ch;
    margin: 0;
}

/* Line-art masks (1.5px strokes): a lit window for empty rooms, a wheel for articles
   without an image. The one accent stroke is a second layer in --fm-signal. */
:root {
    --fm-art-room: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h32a2 2 0 0 1 2 2v34H6V8a2 2 0 0 1 2-2z'/%3E%3Cpath d='M24 6v36M6 24h36M2 42h44'/%3E%3C/svg%3E");
    --fm-art-wheel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='60' cy='60' r='46'/%3E%3Ccircle cx='60' cy='60' r='40'/%3E%3Ccircle cx='60' cy='60' r='6'/%3E%3Cpath d='M60 20v34M60 66v34M20 60h34M66 60h34M32 32l24 24M64 64l24 24M88 32 64 56M56 64 32 88'/%3E%3C/svg%3E");
    --fm-art-wheel-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M60 8a52 52 0 0 1 45 26'/%3E%3C/svg%3E");
    --fm-art-chain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 26h30v7H5zM9 26v3M13 26v4M17 26v3M21 26v4M25 26v3M29 26v4'/%3E%3C/svg%3E");
    --fm-art-chain-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 11h8a3.5 3.5 0 0 1 0 7H8a3.5 3.5 0 0 1 0-7zM20 11h8a3.5 3.5 0 0 1 0 7h-8a3.5 3.5 0 0 1 0-7z'/%3E%3C/svg%3E");
    --fm-art-lanes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 36L16 5M32 36L24 5'/%3E%3Cpath d='M21 36V5' stroke-dasharray='3 3'/%3E%3C/svg%3E");
    --fm-art-lanes-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 36L18.5 5'/%3E%3C/svg%3E");
    --fm-art-spanner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M27 6a7 7 0 0 0-6.6 9.3L8 27.7a3 3 0 0 0 4.3 4.3L24.7 19.6A7 7 0 0 0 34 13l-4.5 1.5-3-3L28 7z'/%3E%3C/svg%3E");
    --fm-art-spanner-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 36h28'/%3E%3C/svg%3E");
    --fm-art-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9h10a4 4 0 0 1 4 4v19a3 3 0 0 0-3-3H6zM34 9H24a4 4 0 0 0-4 4v19a3 3 0 0 1 3-3h11z'/%3E%3C/svg%3E");
    --fm-art-book-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 15h6'/%3E%3C/svg%3E");
}

/* The extensions' shared "no photo" avatar (Sociable's default-avatar.svg, also used by
   CjForum): a bubble in the first Forme avatar tone with a cream/ink silhouette (§1.2.4). */
#cjforum-root span:has(> img[src$="/default-avatar.svg"]),
.sociable-app span:has(> img[src$="/default-avatar.svg"]) {
    border-radius: var(--fm-r-avatar);
    background-color: var(--fm-avatar-1);
}

#cjforum-root img[src$="/default-avatar.svg"],
.sociable-app img[src$="/default-avatar.svg"] {
    border-radius: var(--fm-r-avatar);
    background-color: var(--fm-avatar-fg);
    object-position: 999px 0;
    -webkit-mask: var(--fm-art-person) center 70% / 64% no-repeat;
    mask: var(--fm-art-person) center 70% / 64% no-repeat;
}

:root {
    --fm-art-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.5'/%3E%3Cpath d='M3 23c0-5 4-8.5 9-8.5s9 3.5 9 8.5z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   6. Page head (§9): breadcrumbs, then the H1 (M 56/60, 36/40 on phones), then a lede.
   ========================================================================== */

.ts-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    line-height: 1.25;
}

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

.ts-breadcrumbs .ts-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.5rem;
    margin: 0;
    padding: 0;
    background: none;
    list-style: none;
}

.ts-breadcrumbs .ts-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    color: var(--ec-fg-2);
    font-size: 1rem;
}

.ts-breadcrumbs .ts-breadcrumbs__item + .ts-breadcrumbs__item::before {
    content: "";
    float: none;
    inline-size: 0.875rem;
    block-size: 0.875rem;
    padding: 0;
    background-color: currentColor;
    -webkit-mask: var(--fm-icon-chevron) center / contain no-repeat;
    mask: var(--fm-icon-chevron) center / contain no-repeat;
}

[dir="rtl"] .ts-breadcrumbs .ts-breadcrumbs__item + .ts-breadcrumbs__item::before {
    transform: scaleX(-1);
}

.ts-breadcrumbs .ts-breadcrumbs__item a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    color: var(--ec-fg-2);
    text-decoration: none;
}

.ts-breadcrumbs .ts-breadcrumbs__item--current {
    color: var(--ec-fg);
}

@media (hover: hover) and (pointer: fine) {
    .ts-breadcrumbs .ts-breadcrumbs__item a:hover {
        color: var(--ec-fg);
        text-decoration: underline 1.5px;
        text-underline-offset: 3px;
    }
}

/* Phones show only "‹ Parent". */
@media (width < 40rem) {
    .ts-breadcrumbs .ts-breadcrumbs__item:not(:nth-last-child(2)) {
        display: none;
    }

    .ts-breadcrumbs .ts-breadcrumbs__item:nth-last-child(2)::before {
        content: "";
        inline-size: 0.875rem;
        block-size: 0.875rem;
        background-color: currentColor;
        transform: scaleX(-1);
        -webkit-mask: var(--fm-icon-chevron) center / contain no-repeat;
        mask: var(--fm-icon-chevron) center / contain no-repeat;
    }

    [dir="rtl"] .ts-breadcrumbs .ts-breadcrumbs__item:nth-last-child(2)::before {
        transform: none;
    }
}

:root {
    --fm-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
    --fm-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* The page H1 of every core view, in one voice. */
.ts-article__title,
.ts-journal__pageheading,
.ts-journal__head > .ts-journal__title,
.ts-catlist > h1,
.ts-tags__title,
.ts-tags-tag__title,
.ts-profile__title,
.ts-finder__heading,
.fm-page-title {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: var(--fm-t-h1-page);
    font-stretch: var(--fm-disp-stretch);
    font-style: normal;
    font-weight: 700;
    line-height: 1.07;
    letter-spacing: -0.02em;
    text-transform: none;
    text-wrap: balance;
}

.fm-lede {
    max-inline-size: 42rem;
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1.25rem;
    line-height: 1.5;
    text-wrap: pretty;
}

/* ==========================================================================
   7. Prose (.ts-prose: article body and teaser, category and tag descriptions, error and
      offline copy). Child combinators through at most one wrapper (contract §2.4.2), so an
      app mounted inside an article is never reached; every property is explicit (A6.3).
   ========================================================================== */

.ts-prose {
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: 1.125rem;
    line-height: 1.56;
    overflow-wrap: break-word;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(p, ul, ol, dl, blockquote, figure, pre, table, address) {
    max-inline-size: 68ch;
    margin: 0 0 1.25rem;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(p, ul, ol, dl, address) {
    color: inherit;
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    line-height: inherit;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(h2, h3, h4, h5, h6) {
    max-inline-size: 40ch;
    margin: 2.5rem 0 0.75rem;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-style: normal;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    text-wrap: balance;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > h2 {
    font-family: var(--ec-font-display);
    font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2rem);
    font-stretch: var(--fm-disp-stretch);
    line-height: 1.19;
    letter-spacing: -0.01em;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > h3 {
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.4375rem);
    line-height: 1.3;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(h4, h5, h6) {
    margin-block-start: 2rem;
    font-size: 1.1875rem;
    line-height: 1.37;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :first-child {
    margin-block-start: 0;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :last-child {
    margin-block-end: 0;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(p, ul, ol, dl, blockquote, h2, h3, h4, h5, h6, table, figure) a {
    color: var(--fm-accent-ink);
    font-weight: inherit;
    text-decoration: underline 1.5px;
    text-underline-offset: 3px;
    transition: color var(--ec-dur-1) var(--ec-ease);
}

@media (hover: hover) and (pointer: fine) {
    :is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(p, ul, ol, dl, blockquote, h2, h3, h4, h5, h6, table, figure) a:hover {
        color: var(--fm-accent-ink-hover);
    }
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(p, ul, ol, blockquote) :is(strong, b) {
    font-weight: 700;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(ul, ol) {
    padding-inline-start: 1.5rem;
    list-style-position: outside;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > ul {
    list-style-type: disc;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > ol {
    list-style-type: decimal;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(ul, ol) > li {
    margin: 0 0 0.5rem;
    padding-inline-start: 0.5rem;
    line-height: inherit;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(ul, ol) > li::marker {
    color: var(--fm-accent-ink);
    font-family: var(--ec-font-display);
    font-stretch: var(--fm-disp-stretch);
    font-weight: 700;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(ul, ol) > li > :is(ul, ol) {
    margin: 0.5rem 0 0;
    padding-inline-start: 1.25rem;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > dl > dt {
    margin: 1rem 0 0.25rem;
    font-weight: 700;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > dl > dd {
    margin: 0 0 0.5rem;
    color: var(--ec-fg-2);
}

/* hr = the roofline: a 2px rule overhanging the text. */
:is(.ts-prose, .ts-prose > :is(div, section, article)) > hr {
    max-inline-size: calc(68ch + 2rem);
    block-size: 0;
    margin: 2.5rem -1rem;
    border: 0;
    border-block-start: 2px solid var(--ec-border);
    background: none;
    color: var(--ec-border);
    opacity: 1;
}

/* Blockquote = a speech-bubble card. */
:is(.ts-prose, .ts-prose > :is(div, section, article)) > blockquote {
    margin-block: 2rem;
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--ec-border);
    border-radius: var(--fm-r-bubble);
    background-color: var(--ec-surface);
    box-shadow: inset 0 1px 0 var(--fm-glow);
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    font-stretch: var(--fm-disp-stretch);
    font-style: normal;
    font-weight: 700;
    line-height: 1.33;
    letter-spacing: -0.01em;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > blockquote > :is(p, footer, cite) {
    margin: 0 0 0.75rem;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > blockquote > :last-child {
    margin-block-end: 0;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > blockquote :is(cite, footer) {
    display: block;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1rem;
    font-stretch: normal;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
}

/* Images and figures in a 2px mullion frame; captions in italic fg-2. */
:is(.ts-prose, .ts-prose > :is(div, section, article)) > figure {
    display: block;
    max-inline-size: 100%;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(figure, p) > img {
    display: inline-block;
    max-inline-size: 100%;
    block-size: auto;
    border-radius: var(--fm-r-bubble);
    vertical-align: middle;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > figure > img {
    display: block;
    padding: 2px;
    background-color: var(--ec-border);
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > figure > figcaption {
    margin: 0.5rem 0 0;
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
    font-style: italic;
    line-height: 1.33;
}

/* Code: inline on the sunken tone; blocks as a sunken well, radius 10. */
:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(p, ul, ol, table) :is(code, kbd) {
    padding: 0.1em 0.35em;
    border-radius: 4px;
    background-color: var(--fm-sunken);
    color: var(--ec-fg);
    font-family: var(--ts-font-mono);
    font-size: 0.875em;
}

/* Code wraps instead of scrolling: a scrolling box without focusable content is out of reach
   for keyboard users (and beside a floated image even short lines would scroll). flow-root
   keeps the box clear of floats. */
:is(.ts-prose, .ts-prose > :is(div, section, article)) > pre {
    display: flow-root;
    max-inline-size: 100%;
    padding: 1rem 1.25rem;
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-btn-radius);
    background-color: var(--fm-sunken);
    color: var(--ec-fg);
    font-family: var(--ts-font-mono);
    font-size: 0.9375rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Tables in a mullion frame: 2px gaps on the border colour, surface cells. */
:is(.ts-prose, .ts-prose > :is(div, section, article)) > table {
    display: block;
    clear: both;
    max-inline-size: 100%;
    inline-size: max-content;
    overflow-x: auto;
    padding: 2px;
    border: 0;
    border-collapse: separate;
    border-spacing: 2px;
    border-radius: var(--fm-r-bubble);
    background-color: var(--ec-border);
    font-size: 1rem;
    line-height: 1.4;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > table :is(th, td) {
    padding: 0.75rem 1rem;
    border: 0;
    background-color: var(--ec-surface);
    color: var(--ec-fg);
    text-align: start;
    vertical-align: top;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > table th {
    background-color: var(--ec-surface-2);
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
    font-weight: 700;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > table caption {
    padding: 0.5rem 0.75rem;
    color: var(--ec-fg-2);
    font-style: italic;
    caption-side: bottom;
    text-align: start;
}

@media (min-width: 48rem) {
    .ts-prose {
        font-size: 1.1875rem;
        line-height: 1.58;
    }
}

@media (width < 40rem) {
    :is(.ts-prose, .ts-prose > :is(div, section, article)) > hr {
        margin-inline: -0.5rem;
    }

    :is(.ts-prose, .ts-prose > :is(div, section, article)) > blockquote {
        padding: 1.25rem;
    }
}

/* Ledes: category and tag descriptions read as one quiet paragraph at 20/30. */
:is(.ts-journal__desc-text, .ts-tags-tag__intro-text, .ts-tags__intro).ts-prose > p {
    max-inline-size: 42rem;
    color: var(--ec-fg-2);
    font-size: 1.25rem;
    line-height: 1.5;
    text-wrap: pretty;
}

/* ==========================================================================
   8. Article (§9.1): category tag, H1, a framed hero, the text on a 68ch measure and a
      details card (author, dates, tags, actions) beside it from 64rem, below it before.
   ========================================================================== */

/* The article is centred: head, text, footer and prev/next share one 68ch measure (46rem); with
   a details aside the pair (8/12 + 4/12) is centred instead. */
.ts-article {
    --fm-measure: 46rem;
    display: block;
    max-inline-size: 70rem;
    margin-inline: auto;
    color: var(--ec-fg);
}

.ts-article:has(> .ts-article__layout--full) {
    max-inline-size: var(--fm-measure);
}

.ts-article__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    max-inline-size: var(--fm-measure);
    margin: 0 0 2.5rem;
}

/* The menu's page heading (h1 when shown) reads as the room name above the article. */
.ts-article__pageheading {
    order: -2;
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.33;
    letter-spacing: normal;
}

.ts-article__eyebrow {
    order: -1;
    margin: 0;
    font-size: var(--fm-t-tag);
    line-height: 1.2;
}

.ts-article__eyebrow > a {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.75rem;
    padding: 0 0.625rem;
    border-radius: var(--fm-r-tag);
    background-color: var(--ec-surface-2);
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: var(--fm-t-tag);
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--ec-dur-1) var(--ec-ease);
}

.ts-article__status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

.ts-article__hero {
    display: flow-root;
    margin: 0 0 2.5rem;
}

/* The full-text image is the hero frame whatever float the author set: (0,3,0) beats the kit's
   .item-image:is(.left, .float-start) float, which would narrow the article layout beside it. */
.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;
    padding: 2px;
    border-radius: var(--fm-r-bubble);
    background-color: var(--ec-border);
    object-fit: cover;
}

.ts-article__hero figcaption {
    margin: 0.5rem 0 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 0.9375rem;
    font-style: italic;
    line-height: 1.33;
}

.ts-article__layout {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}

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

.ts-article__layout--full .ts-article__main {
    max-inline-size: var(--fm-measure);
}

/* The article column is the measure: its text runs to the same edge as the byline and pager. */
.ts-article__layout--full .ts-article__body.ts-prose > * {
    max-inline-size: none;
}

/* The first paragraph of the body is the lead (A 22/32, fg-2). */
.ts-article__body.ts-prose > p:first-child {
    color: var(--ec-fg-2);
    font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem);
    line-height: 1.45;
}

/* Details card: the info block as rows, tags as chips, the edit/print icons as buttons. */
.ts-article__aside {
    display: grid;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--ec-border);
    border-radius: var(--fm-r-bubble);
    background-color: var(--ec-surface);
    box-shadow: inset 0 1px 0 var(--fm-glow);
    font-family: var(--ec-font-body);
}

.ts-article__aside .article-info {
    display: grid;
    gap: 0.625rem;
    margin: 0;
    color: var(--ec-fg-2);
    font-size: 1rem;
    line-height: 1.4;
}

.ts-article__aside .article-info > dd {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    margin: 0;
    color: var(--ec-fg-2);
}

.ts-article__aside .article-info > dd > [class*="icon-"] {
    flex: none;
    inline-size: 1.125rem;
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
    text-align: center;
}

.ts-article__aside .article-info > dd :is(span, a, time) {
    color: var(--ec-fg);
}

.ts-article__aside .article-info > dd.createdby > span:not([class*="icon-"]) {
    font-weight: 700;
}

.ts-article__aside .article-info a {
    color: var(--fm-accent-ink);
    font-weight: 700;
    text-decoration: none;
}

.ts-article__meta + .ts-article__tags,
.ts-article__tags + .ts-article__meta,
.ts-article__actions {
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--ec-border);
}

/* Tag chips (core ul.tags > li > a.btn.btn-info) wherever the kit prints them. */
:is(.ts-article__tags, .ts-postcard__body, .ts-journal__tags, .ts-tag-item__body, .ts-modarticles__tags) .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

:is(.ts-article__tags, .ts-postcard__body, .ts-journal__tags, .ts-tag-item__body, .ts-modarticles__tags) .tags > li {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

:is(.ts-article__tags, .ts-postcard__body, .ts-journal__tags, .ts-tag-item__body, .ts-modarticles__tags) .tags > li > a {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.75rem;
    margin: 0;
    padding: 0 0.625rem;
    border: 0;
    border-radius: var(--fm-r-tag);
    background-color: var(--ec-surface-2);
    box-shadow: none;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    font-size: var(--fm-t-tag);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color var(--ec-dur-1) var(--ec-ease);
}

.ts-article__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (hover: hover) and (pointer: fine) {
    .ts-article__eyebrow > a:hover,
    :is(.ts-article__tags, .ts-postcard__body, .ts-journal__tags, .ts-tag-item__body, .ts-modarticles__tags) .tags > li > a:hover {
        background-color: var(--ec-border);
        color: var(--ec-fg);
    }

    .ts-article__aside .article-info a:hover {
        color: var(--fm-accent-ink-hover);
        text-decoration: underline 1.5px;
        text-underline-offset: 3px;
    }
}

/* Byline (§9.1 head, §6.6 card): bubble avatar, name A 17/20 700, date · reading time, share. */
.fm-byline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
}

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

.fm-byline__text {
    display: grid;
    flex: 1 1 auto;
    gap: 0.125rem;
    min-inline-size: 0;
    margin: 0;
    font-size: 1rem;
    line-height: 1.25;
}

.fm-byline__name {
    color: var(--ec-fg);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.18;
}

.fm-byline {
    box-sizing: border-box;
    inline-size: 100%;
}

.fm-byline__share {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: var(--fm-r-bubble-s);
    background: transparent;
    color: var(--ec-fg-2);
    cursor: pointer;
}

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

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

/* Prev / next (§9.1): two bubbles on the article measure, a direction label over the title. */
.fm-pagenav {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin: 3rem 0 0;
    font-size: 1.125rem;
}

.fm-pagenav__link {
    display: grid;
    align-content: start;
    gap: 0.375rem;
    min-block-size: 5.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--ec-border);
    border-radius: var(--fm-r-bubble);
    background-color: var(--ec-surface);
    box-shadow: inset 0 1px 0 var(--fm-glow);
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    text-align: start;
    text-decoration: none;
}

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

.fm-pagenav__dir {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--ec-fg-2);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.29;
}

.fm-pagenav__title {
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.26;
    text-wrap: pretty;
}

.fm-pagenav__icon {
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;
}

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

    .fm-pagenav__link--next {
        grid-column: 2;
        text-align: end;
    }

    .fm-pagenav__link--next .fm-pagenav__dir {
        justify-self: end;
    }

    /* A lone neighbour spans the measure, so its title never wraps in a half cell. */
    .fm-pagenav__link:only-child {
        grid-column: 1 / -1;
    }
}

@media (hover: hover) and (pointer: fine) {
    .fm-pagenav__link:hover {
        border-color: var(--fm-control);
        box-shadow: inset 0 1px 0 var(--fm-glow-hover);
    }
}

/* Footer (§9.1): the tags row, then the author box (surface card, 64 bubble, name M 20/24). */
.fm-article-foot {
    display: grid;
    gap: 1.5rem;
    margin: 3rem 0 0;
}

.fm-article-foot__tags {
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--ec-border);
}

.fm-author {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem;
    border: 1px solid var(--ec-border);
    border-radius: var(--fm-r-bubble);
    background-color: var(--ec-surface);
    box-shadow: inset 0 1px 0 var(--fm-glow);
    font-family: var(--ec-font-body);
}

/* 0,2,0: community.css (later) sizes every .ts-avatar at 40px. */
.fm-author .fm-author__avatar {
    flex: none;
    inline-size: 4rem;
    block-size: 4rem;
    border-radius: var(--fm-r-avatar);
    font-size: 1.375rem;
    font-weight: 700;
}

.fm-author__text {
    display: grid;
    gap: 0.375rem;
    min-inline-size: 0;
}

.fm-author__eyebrow {
    margin: 0;
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.33;
}

.fm-author__name {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.25rem;
    font-stretch: var(--fm-disp-stretch);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
}

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

.fm-author__link {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 0.375rem;
    min-block-size: 2.75rem;
    color: var(--fm-accent-ink);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

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

/* URLs (links A/B/C) and custom fields. */
.ts-article__links {
    margin: 0 0 2rem;
}

.ts-article .fields-container {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--ec-border);
    border-radius: var(--fm-r-bubble);
    background-color: var(--ec-surface);
}

@media (min-width: 64rem) {
    .ts-article__layout:not(.ts-article__layout--full) {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
        gap: 3rem;
    }

    .ts-article__aside {
        position: sticky;
        inset-block-start: calc(var(--ts-sticky-offset, 0px) + 1.5rem);
    }
}

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

.ts-journal {
    display: block;
}

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

.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: var(--fm-t-h2);
    font-stretch: var(--fm-disp-stretch);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.ts-journal__sub {
    margin: 0;
    color: var(--ec-fg-2);
    font-size: 1.125rem;
    line-height: 1.33;
}

/* The article count: a numeral with its caption (A 15, fg-2). */
.ts-journal__count {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
    color: var(--ec-fg-2);
    font-family: var(--ec-font-body);
    font-size: 0.9375rem;
    line-height: 1.2;
}

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

.ts-journal__desc {
    margin: 0;
    color: var(--ec-fg-2);
}

.ts-journal__desc img {
    max-inline-size: 100%;
    margin-block-end: 1rem;
    border-radius: var(--fm-r-bubble);
}

.ts-journal__section {
    margin: 3rem 0 0;
}

.ts-journal__section-title {
    margin: 0 0 1rem;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.5rem;
    font-stretch: var(--fm-disp-stretch);
    font-weight: 700;
    line-height: 1.25;
}

.ts-journal__actions {
    margin: 2rem 0 0;
}

@media (min-width: 48rem) {
    .ts-journal__head:has(.ts-journal__count-num) {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 3rem;
    }

    .ts-journal__head:has(.ts-journal__count-num) > * {
        grid-column: 1;
    }

    .ts-journal__head > .ts-journal__count:has(.ts-journal__count-num) {
        grid-column: 2;
        grid-row: 1 / span 2;
        flex-direction: column;
        align-items: flex-end;
        align-self: end;
        gap: 0.25rem;
    }
}

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

@media (min-width: 40rem) {
    .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: 75rem) {
    .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));
    }
}

/* Post card: a bubble with a 16:9 window (image, or the line-art wheel on surface-2). */
.ts-postcard {
    position: relative;
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    overflow: clip;
    border: 1px solid var(--ec-border);
    border-radius: var(--fm-r-bubble);
    background-color: var(--ec-surface);
    box-shadow: inset 0 1px 0 var(--fm-glow);
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    transition: border-color var(--ec-dur-1) var(--ec-ease), box-shadow var(--ec-dur-1) var(--ec-ease);
}

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

.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-radius: 0;
    object-fit: cover;
}

.ts-postcard__media figcaption {
    display: none;
}

.ts-postcard__media--placeholder::before,
.ts-postcard__media--placeholder::after {
    content: "";
    position: absolute;
    inset: 18%;
    background-color: var(--ec-fg-2);
    -webkit-mask: var(--fm-card-art, var(--fm-art-wheel)) center / contain no-repeat;
    mask: var(--fm-card-art, var(--fm-art-wheel)) center / contain no-repeat;
}

.ts-postcard__media--placeholder::after {
    background-color: var(--fm-signal);
    -webkit-mask-image: var(--fm-card-art-lit, var(--fm-art-wheel-lit));
    mask-image: var(--fm-card-art-lit, var(--fm-art-wheel-lit));
}

/* The fallback drawing changes from card to card (the lead keeps the wheel; the grid runs chain,
   lanes, spanner, book, wheel), as the home's journal rows do, so a grid without images is not
   one picture repeated. */
.ts-postgrid:not(.ts-postgrid--lead) > .ts-postcard:nth-child(5n+1) { --fm-card-art: var(--fm-art-chain); --fm-card-art-lit: var(--fm-art-chain-lit); }
.ts-postgrid:not(.ts-postgrid--lead) > .ts-postcard:nth-child(5n+2) { --fm-card-art: var(--fm-art-lanes); --fm-card-art-lit: var(--fm-art-lanes-lit); }
.ts-postgrid:not(.ts-postgrid--lead) > .ts-postcard:nth-child(5n+3) { --fm-card-art: var(--fm-art-spanner); --fm-card-art-lit: var(--fm-art-spanner-lit); }
.ts-postgrid:not(.ts-postgrid--lead) > .ts-postcard:nth-child(5n+4) { --fm-card-art: var(--fm-art-book); --fm-card-art-lit: var(--fm-art-book-lit); }

/* Cards keep one padding rule (the kit's joomla.css spaces ".blog-items > .blog-item" at 0,3,0). */
.ts-postgrid.blog-items > .ts-postcard.blog-item {
    padding-block-end: 0;
}

.ts-postcard__monogram,
.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: 0.875rem;
    padding: 1.25rem 1.5rem 1.5rem;
}

.ts-postcard__body > .page-header {
    margin: 0;
}

.ts-postcard__body > .page-header > :is(h2, h3) {
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.375rem;
    font-stretch: var(--fm-disp-stretch);
    font-weight: 700;
    line-height: 1.27;
    letter-spacing: -0.01em;
    text-wrap: pretty;
}

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

.ts-postcard__body > .page-header > :is(h2, h3) > a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
}

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

/* Meta: the info block as one quiet line of items. */
.ts-postcard__body .article-info,
.ts-tag-item__body .article-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0;
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
    line-height: 1.35;
}

:is(.ts-postcard__body, .ts-tag-item__body) .article-info > dd {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    margin: 0;
    color: var(--ec-fg-2);
}

:is(.ts-postcard__body, .ts-tag-item__body) .article-info > dd > [class*="icon-"] {
    color: var(--ec-fg-2);
    font-size: 0.8125rem;
}

:is(.ts-postcard__body, .ts-tag-item__body) .article-info a {
    color: var(--ec-fg-2);
    text-decoration: underline 1px;
    text-underline-offset: 3px;
}

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

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

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

/* A short label ("Read more", the title for assistive tech only: layouts/joomla/content/
   readmore.php), so it never truncates; a 44px target. */
.readmore > a.fm-readmore {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-block-size: 2.75rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    box-shadow: none;
    color: var(--fm-accent-ink);
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}

.readmore > a.fm-readmore > span:first-child {
    text-decoration: underline 2px;
    text-underline-offset: 4px;
}

.readmore > a.fm-readmore > svg {
    flex: none;
}

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

@media (hover: hover) and (pointer: fine) {
    .ts-postcard:has(.page-header a:hover) {
        border-color: var(--fm-control);
        box-shadow: inset 0 1px 0 var(--fm-glow-hover);
    }

    .ts-postcard__body > .page-header > :is(h2, h3) > a:hover {
        color: var(--fm-accent-ink);
    }

    .readmore > a.fm-readmore:hover {
        background: none;
        color: var(--fm-accent-ink-hover);
    }

    .readmore > a.fm-readmore:hover > span:first-child {
        text-underline-offset: 2px;
    }
}

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

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

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

/* Lead item and 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, 2fr) minmax(0, 3fr);
    }

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

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

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

    .ts-postgrid--lead > .ts-postcard > .ts-postcard__body {
        justify-content: center;
        gap: 1.125rem;
        padding: 2.5rem;
    }

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

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

/* Link rows ("more articles"): 52px rows, title + meta, a nudging arrow. */
.ts-postlinks {
    margin: 0;
    padding: 0;
    border-block-end: 1px solid var(--ec-border);
    list-style: none;
}

.ts-postlinks__item {
    margin: 0;
    padding: 0;
    border-block-start: 1px solid var(--ec-border);
}

.ts-postlinks__link {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-block-size: 3.25rem;
    padding: 0.625rem 0.25rem;
    color: var(--ec-fg);
    font-family: var(--ec-font-body);
    text-decoration: none;
}

.ts-postlinks__title {
    flex: 1;
    min-inline-size: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    transition: color var(--ec-dur-1) var(--ec-ease);
}

.ts-postlinks__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.75rem;
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.2;
}

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

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

/* Phones (§6.6): meta on its own line under a full-width title. */
@media (max-width: 39.99rem) {
    .ts-postlinks__link {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.25rem 1rem;
    }

    .ts-postlinks__meta {
        grid-row: 2;
    }

    .ts-postlinks__arrow {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }
}

@media (hover: hover) and (pointer: fine) {
    .ts-postlinks__link:hover .ts-postlinks__title {
        color: var(--fm-accent-ink);
    }

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

    [dir="rtl"] .ts-postlinks__link:hover .ts-postlinks__arrow {
        transform: scaleX(-1) translateX(3px);
    }
}

/* Pagination (§6.8): 44px tiles, the current page accent, the counter below. */
.ts-pager,
.ts-tags-pagination,
.ts-finder__navigation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin: 3rem 0 0;
}

:is(.ts-pager, .ts-tags-pagination, .ts-finder__navigation) .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.375rem;
    margin: 0;
    font-family: var(--ec-font-body);
    font-weight: 700;
}

:is(.ts-pager__counter, .ts-tags-pagination__counter, .ts-finder__pagination .counter) {
    margin: 0;
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
    font-variant-numeric: lining-nums tabular-nums;
}

/* Categories: a facade of panes (a 2px mullion grid), counts as captions. */
.ts-catgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--fm-mullion);
    margin: 0;
    padding: var(--fm-mullion);
    overflow: clip;
    border-radius: var(--fm-r-bubble);
    background-color: var(--ec-border);
    list-style: none;
}

.ts-catgrid__item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-block-size: 10rem;
    margin: 0;
    padding: 1.5rem;
    background-color: var(--ec-surface);
    transition: background-color var(--ec-dur-1) var(--ec-ease);
}

.ts-catgrid__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
}

.ts-catgrid__title {
    flex: 1 1 12rem;
    margin: 0;
    color: var(--ec-fg);
    font-family: var(--ec-font-display);
    font-size: 1.375rem;
    font-stretch: var(--fm-disp-stretch);
    font-weight: 700;
    line-height: 1.27;
}

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

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

.ts-catgrid__item {
    position: relative;
}

.ts-catgrid__item:last-child {
    grid-column-end: -1;
}

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

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

.ts-catgrid__media img {
    border-radius: var(--fm-r-bubble-s);
}

.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: 1px solid var(--fm-control);
    border-radius: var(--ec-btn-radius);
    background-color: transparent;
    color: var(--ec-fg);
    cursor: pointer;
}

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

.ts-catgrid__children .ts-catgrid {
    background-color: var(--ec-border);
}

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

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

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

@media (hover: hover) and (pointer: fine) {
    .ts-catgrid__item:has(> .ts-catgrid__head a:hover) {
        background-color: var(--ec-surface-2);
    }

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

/* ==========================================================================
   10. Core modules in sidebars and bands: login, articles (default, titles, studio),
       languages.
   ========================================================================== */

.ts-modlogin,
.ts-modlogout {
    display: grid;
    gap: 1rem;
    font-family: var(--ec-font-body);
}

.ts-modlogin__field {
    display: grid;
    gap: 0.375rem;
}

.ts-modlogin__label {
    margin: 0;
    color: var(--ec-fg);
    font-size: 1rem;
    font-weight: 700;
}

.ts-modlogin__input.ts-input,
.ts-modlogin .form-control {
    min-block-size: 3rem;
    border-color: var(--fm-control);
}

.ts-modlogin__submit .ts-btn,
.ts-modlogin__btn,
.ts-modlogout__btn {
    inline-size: 100%;
    min-block-size: 3rem;
}

.ts-modlogin__options,
.ts-modlogout__options {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ts-modlogin__options li {
    margin: 0;
    padding: 0;
}

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

.ts-modlogin__register,
.ts-modlogin__options a.ts-modlogin__register {
    color: var(--fm-accent-ink);
    font-weight: 700;
}

.ts-modlogin__toggle {
    border-color: var(--fm-control);
    background-color: var(--ec-surface-2);
    color: var(--ec-fg);
}

.ts-modlogout__greeting {
    margin: 0;
    color: var(--ec-fg);
    font-size: 1.0625rem;
}

.ts-modlogout__name {
    font-weight: 700;
}

/* mod_articles: link rows by default, cards in the grid layout. */
.ts-modarticles {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--ec-font-body);
}

.ts-modarticles__item {
    margin: 0;
    padding: 0.75rem 0;
    border-block-start: 1px solid var(--ec-border);
}

.ts-modarticles__item:first-child {
    border-block-start: 0;
}

.ts-modarticles__title,
.ts-modarticles__titlelink {
    margin: 0;
    color: var(--ec-fg);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

.ts-modarticles__title > a,
a.ts-modarticles__titlelink,
.ts-modarticles__link {
    color: var(--ec-fg);
    text-decoration: none;
}

.ts-modarticles__meta,
.ts-modarticles__intro {
    margin: 0.25rem 0 0;
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
}

.ts-modarticles__media img {
    display: block;
    border-radius: var(--fm-r-bubble-s);
}

.ts-modarticles--grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: 1.5rem;
}

.ts-modarticles--grid > .ts-modarticles__item {
    padding: 1.25rem;
    border: 1px solid var(--ec-border);
    border-radius: var(--fm-r-bubble);
    background-color: var(--ec-surface);
}

.ts-modarticles__readmore a {
    color: var(--fm-accent-ink);
    font-weight: 700;
    text-decoration: underline 2px;
    text-underline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
    :is(.ts-modarticles__title > a, a.ts-modarticles__titlelink, .ts-modarticles__link):hover {
        color: var(--fm-accent-ink);
    }

    :is(.ts-modlogin__options, .ts-auth__options) a:hover {
        color: var(--ec-fg);
    }
}

/* ==========================================================================
   11. Messages, tables and core headings (the category list table, the views without kit
       overrides).
   ========================================================================== */

/* System messages: the bubble radius (tail top-left) and the status palette. */
#system-message-container joomla-alert,
.ts-offline__card joomla-alert {
    border-radius: var(--fm-r-bubble);
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
    line-height: 1.4;
}

/* Tables of the core list views (§6.8): no zebra, 52px rows, fg-2 heads over a 2px rule. */
:is(.ts-catlist, .com-contact-category, .com-newsfeeds-category, .com-content-archive) table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: var(--ec-surface);
    --bs-table-border-color: var(--ec-border);
    margin: 0 0 1.5rem;
    border: 0;
    font-family: var(--ec-font-body);
    font-size: 1.0625rem;
}

:is(.ts-catlist, .com-contact-category, .com-newsfeeds-category) table > :is(thead, tbody) > tr > :is(th, td) {
    padding: 0.875rem 1rem;
    border-width: 0;
    border-block-start: 1px solid var(--ec-border);
    vertical-align: middle;
}

:is(.ts-catlist, .com-contact-category, .com-newsfeeds-category) table > thead > tr > th {
    border-block-start: 0;
    border-block-end: 2px solid var(--ec-border);
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
    font-weight: 700;
}

:is(.ts-catlist, .com-contact-category, .com-newsfeeds-category) table > thead a {
    color: var(--ec-fg-2);
    text-decoration: none;
}

:is(.ts-catlist, .com-contact-category) table .list-title a {
    color: var(--ec-fg);
    font-weight: 700;
    text-decoration: none;
}

:is(.ts-catlist, .com-contact-category) table .list-title {
    font-weight: 700;
}

/* Hits as a numeral, not a badge. */
.ts-catlist table .list-hits {
    text-align: end;
}

.ts-catlist table .list-hits > span {
    padding: 0;
    background: none !important;
    color: var(--ec-fg) !important;
    font-family: var(--ec-font-display);
    font-size: 1.125rem;
    font-stretch: var(--fm-disp-stretch);
    font-weight: var(--fm-num-weight);
}

:is(.ts-catlist, .com-content-archive) .counter {
    color: var(--ec-fg-2);
    font-size: 0.9375rem;
}

@media (hover: hover) and (pointer: fine) {
    :is(.ts-catlist, .com-contact-category) table .list-title a:hover {
        color: var(--fm-accent-ink);
        text-decoration: underline 2px;
        text-underline-offset: 3px;
    }
}

/* Headings of core views: Manrope at 100% width, the page H1 at the design size. */
:is(.com-contact, .com-content-archive, .content-category, .com-contact-category, .com-newsfeeds-category, .com-users-profile__edit, .com-privacy, .edit) :is(.page-header h1, .page-header > h1, > h1) {
    font-size: var(--fm-t-h1-page);
    font-stretch: var(--fm-disp-stretch);
    line-height: 1.07;
    letter-spacing: -0.02em;
}

:is(.com-contact, .com-content-archive, .content-category, .com-contact-category, .com-newsfeeds-category, .com-users-profile__edit) :is(h2, h3, legend) {
    font-stretch: var(--fm-disp-stretch);
}

/* ==========================================================================
   12. component.php (modals, print, fullscreen apps) and print
   ========================================================================== */

.ts-component {
    padding: 1.5rem clamp(1rem, 3vw, 2rem);
}

.ts-print .ts-article__actions,
.ts-print .ts-article .pagenavigation {
    display: none;
}

@media print {
    .ts-topbar,
    .ts-header,
    .ts-footer,
    .ts-skip-link,
    .ts-article__actions,
    .ts-article .pagenavigation,
    .ts-breadcrumbs {
        display: none !important;
    }

    .ts-article__layout:not(.ts-article__layout--full) {
        grid-template-columns: minmax(0, 1fr);
    }

    .ts-article__aside {
        position: static;
        box-shadow: none;
    }
}

/* FORME's editorial hierarchy on the shared core Joomla view contract. */
:is(.ts-article__title,.ts-journal__pageheading,.ts-journal__head > .ts-journal__title,.ts-catlist > h1,.ts-tags__title,.ts-tags-tag__title,.ts-profile__title,.ts-finder__heading,.fm-page-title) { font-weight: var(--ec-disp-weight); letter-spacing: var(--ec-disp-tracking); line-height: 1.08; }
.ts-article__hero img { padding: 0; }
.ts-article:has(.fm-landing), .ts-article:has(.fm-page) { max-inline-size: none; margin: 0; }
.ts-article:has(.fm-landing) .ts-article__main, .ts-article:has(.fm-page) .ts-article__main { max-inline-size: none; }
.ts-article__body.ts-prose:has(.fm-landing), .ts-article__body.ts-prose:has(.fm-page) { max-inline-size: none; }
.ts-button--primary:focus-visible, .ts-btn:not(.ts-btn--outline,.fm-btn--ghost):focus-visible { outline: 2px solid var(--ts-focus); outline-offset: 3px; }
.ts-article__body .fm-landing > *, .ts-article__body .fm-page > * { max-inline-size: none; }

/* Supplied landing articles own their heading. An empty core title wrapper takes no space. */
.ts-article:has(.fm-landing) > .ts-article__header:not(:has(*)),
.ts-article:has(.fm-page) > .ts-article__header:not(:has(*)) { display: none; }