/**
 * Kestrel views layer (template.kestrel.views): the core views Kestrel skins outside the preset. The
 * head partial enables it on every com_content view (the article, the category blog and list, the
 * featured home, categories, archive and the form, K47) and on com_users, com_finder, com_tags,
 * com_contact, com_newsfeeds and com_privacy (PAGES.md 3.5). It prints after the preset, so its
 * rules also follow the kit baseline in joomla.css. Error and offline documents never load it.
 * Sections: 1 article, 2 journal (M3a); 3 view heads and list filters, 4 account pages, 5 profile,
 * 6 multi-factor captive, 7 Smart Search, 8 tags and tag, 9 categories and category list, 10
 * archive, 11 contact and contact category, 12 the article edit form (M3b).
 *
 * @copyright Copyright (C) 2026 BulaSikku Technologies Private Limited. All rights reserved.
 * @license   GNU General Public License version 2 or later
 */

/* 1. Article (PAGES.md 3.2, Article board): the kit's ts-article* hooks, the byline and
   footer partials, the author box and the page navigation. The article column sits in main beside
   the sidebar (PD4); the body and the blocks under it keep the 680px measure. -------------------- */

.ts-article {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    min-inline-size: 0;
}

.ts-article > .ts-article__header {
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
    margin: 0;
}

.ts-article__eyebrow {
    margin: 0;
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-eyebrow);
    font-weight: 500;
    line-height: var(--ke-lh-label);
    letter-spacing: var(--ke-track-eyebrow);
    text-transform: uppercase;
}

.ts-article__eyebrow > a {
    color: var(--ts-link);
    font-weight: 600;
    text-decoration: none;
}

.ts-article__eyebrow > a:hover {
    color: var(--ts-link-hover);
    text-decoration: underline;
}

.ts-article__header > .ts-article__title {
    max-inline-size: 18ch;
    margin: 0;
    font-size: var(--ke-t-display);
    line-height: var(--ke-lh-display);
    letter-spacing: var(--ke-track-display);
}

.ts-article__header > .ts-article__pageheading {
    margin: 0;
    font-size: var(--ke-t-page);
}

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

.ke-standfirst {
    max-inline-size: 40ch;
    margin: 0;
    color: var(--ke-ink-2);
    font-size: var(--ke-t-standfirst);
    line-height: var(--ke-lh-help);
    text-wrap: pretty;
}

/* The byline bar: author and dates on the left, the tools at the right, hairlines above and below. */
.ke-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem 2.5rem;
    padding-block: 1.125rem;
    border-block: 1px solid var(--ke-hairline);
}

.ke-byline__who {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-inline-size: 0;
}

.ke-byline__name {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin: 0;
    color: var(--ke-ink);
    font-size: var(--ke-t-ui);
    line-height: 1.4;
}

.ke-byline__name > span > .ke-byname {
    color: var(--ke-ink);
    font-weight: 600;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.ke-byline__name > span > a.ke-byname:hover {
    color: var(--ts-link);
}

.ke-byline__name > span > span.ke-byname {
    text-decoration-line: none;
}

.ke-byline__role {
    color: var(--ke-ink-3);
    font-size: var(--ke-t-label);
}

.ke-byline__dates {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem calc(1.25rem + 1ch);
    margin: 0;
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-meta);
    line-height: 1.4;
    letter-spacing: var(--ke-track-meta);
    font-variant-numeric: tabular-nums;
    clip-path: inset(-0.5rem -0.375rem);
}

/* Middle dots between the parts of a meta line; decorative, so assistive technology skips them.
   Each dot hangs in the column gap before its part (0.625rem, the dot, 0.625rem), so a part that
   wraps takes its dot out past the line start, where the line's clip-path cuts it off: a wrapped
   line never starts with a dot. The clip keeps 6px round the line for focus rings. */
.ke-byline__date + .ke-byline__date,
.ke-author__role > span + span,
.ke-cardmeta > * + *,
.ke-cardby > :is(.ke-cardby__name, time) + :is(time, .ke-cardby__time) {
    position: relative;
}

.ke-byline__date + .ke-byline__date::before,
.ke-author__role > span + span::before,
.ke-cardmeta > * + *::before,
.ke-cardby > :is(.ke-cardby__name, time) + :is(time, .ke-cardby__time)::before {
    content: "\00B7" / "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: calc(100% + 0.625rem);
    color: var(--ke-ink-3);
}

.ke-byline__tools {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-inline-start: auto;
}

.ke-byline__tools:not(:has(> :not([hidden]))) {
    display: none;
}

/* Phones: the tools wrap under the dates and start the line, as Article-390 draws them. */
@media (width < 48rem) {
    .ke-byline__tools {
        margin-inline-start: 0;
    }
}

.ts-article__hero > .item-image {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
}

.ts-article__hero > .item-image img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--ke-r-img);
}

.ts-article__hero > .item-image > figcaption {
    margin: 0;
    color: var(--ke-ink-3);
    font-size: var(--ke-t-label);
    line-height: 1.5;
}

/* The text column and the blocks under it: 56px apart, none wider than the measure. */
.ts-article > .ts-article__layout {
    display: block;
}

.ts-article__layout > .ts-article__main {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    min-inline-size: 0;
}

.ts-article__main > :is(.ts-article__body, .ke-artfoot, .ts-article__pager, .ts-article__links, .ke-toc) {
    inline-size: 100%;
    max-inline-size: var(--ke-measure);
}

.ts-article__main > .ke-toc:has(+ .ts-article__body) {
    margin-block-end: 0;
}

.ts-article__body.ts-prose {
    color: var(--ke-ink);
    font-size: var(--ke-t-article);
    line-height: var(--ke-lh-article);
}

/* Editors: the byline carries Edit, so an aside holding only Joomla's edit icons goes (PAGES.md 3.2). */
.ts-article__layout:has(> .ts-article__aside > .ts-article__actions:only-child) > .ts-article__aside {
    display: none;
}

.ts-article__layout > .ts-article__aside {
    margin-block-start: 3.5rem;
}

/* The article footer: tags and share 24px apart, the author box 56px below them. */
.ke-artfoot {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 0;
}

.ke-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem 1rem;
}

.ke-tags__label {
    margin: 0;
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-eyebrow);
    font-weight: 600;
    line-height: var(--ke-lh-label);
    letter-spacing: var(--ke-track-eyebrow);
    text-transform: uppercase;
}

.ke-tags > .tags {
    margin: 0;
}

.ke-author {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.25rem 1.5rem;
    margin-block-start: 2rem;
    padding-block-start: 1.5rem;
    border-block-start: 2px solid var(--ke-rule);
}

.ke-author__text {
    display: flex;
    flex: 1 1 17.5rem;
    flex-direction: column;
    gap: 0.5rem;
    min-inline-size: 0;
}

.ke-author__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--ke-ink);
    font-family: var(--ke-display);
    font-size: var(--ke-t-h3);
    font-weight: var(--ke-w-h3);
    line-height: var(--ke-lh-h3);
    letter-spacing: var(--ke-track-h3);
}

.ke-author__name > a {
    color: inherit;
    text-decoration: none;
}

.ke-author__name > a:hover {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.ke-author__verified {
    flex: none;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    border-radius: 50%;
    background-color: var(--ke-accent);
    -webkit-mask: var(--ke-i-check) center / 0.75rem no-repeat, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: var(--ke-i-check) center / 0.75rem no-repeat exclude, linear-gradient(#000 0 0);
}

.ke-author__role {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem calc(1.25rem + 1ch);
    margin: 0;
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-meta);
    line-height: 1.4;
    letter-spacing: var(--ke-track-meta);
    clip-path: inset(-0.5rem -0.375rem);
}

.ke-author__bio {
    margin: 0.25rem 0 0;
    color: var(--ke-ink-2);
    font-size: var(--ke-t-ui);
    line-height: var(--ke-lh-body);
}

.ke-author__more {
    margin: 0;
}

/* Previous and next as two cards (Article board). */
.ke-pagenav {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(16.25rem, 100%), 1fr));
    gap: 1rem;
}

.ke-pagenav__link {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.25rem 1.375rem;
    border: 1px solid var(--ke-hairline);
    border-radius: var(--ke-r);
    color: var(--ke-ink);
    text-decoration: none;
    transition: border-color var(--ec-dur-1) var(--ec-ease);
}

.ke-pagenav__link:hover {
    border-color: var(--ke-ink);
    color: var(--ke-ink);
}

.ke-pagenav__link.ke-pagenav__link--next {
    grid-column: -2;
    align-items: flex-end;
    text-align: end;
}

.ke-pagenav__dir {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-eyebrow);
    font-weight: 500;
    line-height: var(--ke-lh-label);
    letter-spacing: var(--ke-track-eyebrow);
    text-transform: uppercase;
}

.ke-pagenav__icon {
    flex: none;
}

.ke-pagenav__title {
    font-family: var(--ke-display);
    font-size: var(--ke-t-intro);
    font-weight: var(--ke-w-h3);
    line-height: var(--ke-lh-list);
    letter-spacing: var(--ke-track-list);
    text-wrap: balance;
}

.ke-pagenav__link:hover > .ke-pagenav__title {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* 2. Journal: the featured view and the category blog (PAGES.md 3.1, 3.3; Main, MemberHome and
   Blog boards). The lead is a card in .ts-postgrid--lead, the intro cards a grid that reads
   the Studio grid density, the link rows a list of dates and titles. ------------------------------ */

.ts-journal {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    min-inline-size: 0;
}

.ts-journal > * {
    order: 2;
    margin: 0;
}

.ts-journal > .ts-journal__head {
    order: 0;
}

.ts-journal > .ts-journal__section.cat-children {
    order: 1;
    margin-block-start: -1.5rem;
}

.ts-journal__section.cat-children > .ts-journal__section-title {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The blog head: page title, count, description (the chips follow through the order above). */
.ts-journal > .ts-journal__head:not(.ke-head) {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ts-journal__head:not(.ke-head) > :is(.ts-journal__title, .ts-journal__pageheading) {
    margin: 0;
    font-size: var(--ke-t-page);
}

.ts-journal__head:not(.ke-head) > .ts-journal__count {
    margin: 0;
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-meta);
    letter-spacing: var(--ke-track-meta);
}

.ts-journal__head > .ts-journal__desc {
    margin: 0;
}

.ts-journal__desc > .ts-journal__desc-text.ts-prose {
    max-inline-size: 62ch;
    color: var(--ke-ink-2);
    font-size: var(--ke-t-intro);
    line-height: var(--ke-lh-intro);
}

.ts-journal__empty {
    color: var(--ke-ink-2);
}

/* The post card: media, then the body as a column in reading order (PAGES.md 3.2 card context). */
.ts-postgrid {
    min-inline-size: 0;
}

.ts-journal > .ts-postgrid:not(.ts-postgrid--lead) {
    display: grid;
    margin: 0;
    grid-template-columns: repeat(auto-fill, minmax(max(min(13.5rem, 100%), (100% - (var(--ec-grid, 3) - 1) * 2rem) / var(--ec-grid, 3)), 1fr));
    gap: 3rem 2rem;
}

.ts-postgrid > .ts-postcard {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    min-inline-size: 0;
    margin: 0;
}

/* The kit baseline rules intro items apart with a hairline and pads them (0,3,0); the grid gap
   spaces Kestrel cards, and the clearfix pseudo-element would be a flex item. */
.ts-journal .ts-postgrid > .ts-postcard.blog-item {
    padding: 0;
    border: 0;
}

.ts-postgrid .ts-postcard::after,
.ts-postgrid .ts-postcard > .ts-postcard__body::after {
    content: none;
}

.ts-postcard > .ts-postcard__media {
    position: relative;
    aspect-ratio: 3 / 2;
    margin: 0;
    overflow: hidden;
    border-radius: var(--ke-r-img);
}

.ts-postcard__media > :is(figure, a, img),
.ts-postcard__media > figure > :is(a, img),
.ts-postcard__media > figure > a > img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
}

.ts-postcard__media img {
    object-fit: cover;
}

/* With com_content's "Link Intro Image" on, core wraps the image in a link that fills this clipped
   box, so the link's own ring would be cut away: the box draws the ring for it (WCAG 2.4.7). */
.ts-postcard > .ts-postcard__media:has(a:focus-visible) {
    outline: var(--ts-focus-width, 2px) solid var(--ts-focus);
    outline-offset: var(--ke-focus-offset);
}

.ts-postgrid > .ts-postcard > .ts-postcard__body {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    min-inline-size: 0;
}

.ts-postcard__body > * {
    order: 1;
    margin: 0;
}

.ts-postcard__body > .ke-cardmeta {
    order: -1;
}

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

.ts-postcard__body > .ke-cardby {
    order: 2;
}

.ts-postcard__body > .readmore {
    order: 3;
}

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

.ts-postcard__body > .page-header > :is(h2, h3) {
    margin: 0;
    color: var(--ke-ink);
    font-family: var(--ke-display);
    font-size: var(--ke-t-h3);
    font-weight: var(--ke-w-h3);
    line-height: var(--ke-lh-h3);
    letter-spacing: var(--ke-track-h3);
    font-synthesis-weight: none;
    text-wrap: balance;
}

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

.ts-postcard__body > .page-header > :is(h2, h3) > a:hover {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Eyebrow line: category (accent), "Featured" and the reading time (ink 3), middle dots between. */
.ke-cardmeta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem calc(1.25rem + 1ch);
    margin: 0;
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-eyebrow);
    font-weight: 500;
    line-height: var(--ke-lh-label);
    letter-spacing: var(--ke-track-eyebrow);
    text-transform: uppercase;
    clip-path: inset(-0.5rem -0.375rem);
}

.ke-cardmeta > .ke-cardmeta__cat {
    color: var(--ts-link);
    font-weight: 600;
    text-decoration: none;
}

.ke-cardmeta > a.ke-cardmeta__cat:hover {
    color: var(--ts-link-hover);
    text-decoration: underline;
}

/* Meta line: "Name · date · N min" in mono; the lead turns it into the avatar byline. */
.ke-cardby {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem calc(1.25rem + 1ch);
    margin: 0;
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-meta);
    line-height: 1.4;
    letter-spacing: var(--ke-track-meta);
    clip-path: inset(-0.5rem -0.375rem);
}

.ke-cardby > .ke-cardby__name {
    color: var(--ke-ink-3);
}

.ke-cardby > .ke-cardby__name > .ke-byname {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
}

.ke-cardby > .ke-cardby__name > a.ke-byname:hover {
    color: var(--ke-ink);
    text-decoration: underline;
}

.ke-cardby > .ke-cardby__avatar,
.ke-cardby__name > .ke-cardby__by,
.ke-cardmeta > :is(.ke-cardmeta__flag, .ke-cardmeta__time) {
    display: none;
}

.ts-postcard__body > .ts-postcard__excerpt.ts-prose {
    color: var(--ke-ink-2);
    font-size: var(--ke-t-ui);
    line-height: var(--ke-lh-body);
}

/* Read more: a quiet text link with the arrow; Joomla's chevron goes. */
.ts-postcard__body > .readmore > a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: var(--ke-control-h-sm);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--ke-ink);
    font-size: var(--ke-t-ui);
    font-weight: 600;
    line-height: 1.25;
    text-align: start;
    text-decoration: none;
}

.ts-postcard__body > .readmore > a:is(:hover, :focus-visible, :active) {
    border: 0;
    background: none;
    color: var(--ke-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.ts-postcard__body > .readmore > a > [class^="icon-"] {
    display: none;
}

.ts-postcard__body > .readmore > a::after {
    content: "";
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;
    background-color: currentColor;
    -webkit-mask: var(--ke-i-arrow) center / contain no-repeat;
    mask: var(--ke-i-arrow) center / contain no-repeat;
}

/* The home: the lead first (PD6), then the rule head and the cards; the intro cards drop the flag
   and the read more (the title is the link). The h1 is the partial's visually hidden one. */
.ts-journal.ts-journal--featured {
    gap: 0;
}

.ts-journal--featured > .ts-postgrid--lead {
    order: -1;
}

.ts-journal--featured > .ts-postgrid--lead:not(:last-child) {
    margin-block-end: var(--ke-row-gap);
}

.ts-journal--featured > .ke-head {
    order: 0;
    margin-block-end: 2rem;
}

.ts-journal--featured > .ts-postgrid:not(.ts-postgrid--lead) .ts-postcard__body > .readmore {
    display: none;
}

/* The home lead (MemberHome, stacked, DV29): image 3:2, eyebrow line, lead title, dek, then the
   avatar byline and the ink button on one row (stacked on phones, Main-390). */
.ts-journal > .ts-postgrid.ts-postgrid--lead {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}

.ts-journal--featured .ts-postgrid--lead > .ts-postcard {
    gap: 1.375rem;
}

.ts-journal--featured .ts-postgrid--lead > .ts-postcard > .ts-postcard__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem 2rem;
}

.ts-journal--featured .ts-postgrid--lead .ts-postcard__body > * {
    grid-column: 1 / -1;
}

.ts-journal--featured .ts-postgrid--lead .ts-postcard__body > .ke-cardmeta {
    margin-block-end: -0.125rem;
}

.ts-journal--featured .ts-postgrid--lead .ts-postcard__body > .ke-cardby {
    grid-column: 1;
}

.ts-journal--featured .ts-postgrid--lead .ts-postcard__body > .readmore {
    grid-column: 2;
}

@media (width < 48rem) {
    .ts-journal--featured .ts-postgrid--lead .ts-postcard__body > .readmore {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

.ts-postgrid--lead .ke-cardmeta > :is(.ke-cardmeta__flag, .ke-cardmeta__time) {
    display: inline;
}

.ts-journal--featured .ts-postgrid--lead .ts-postcard__body > .page-header > :is(h2, h3) {
    max-inline-size: 18ch;
    font-size: var(--ke-t-lead);
    font-weight: var(--ke-w-display);
    line-height: var(--ke-lh-page);
    letter-spacing: var(--ke-track-page);
}

.ts-journal--featured .ts-postgrid--lead .ts-postcard__body > .ts-postcard__excerpt.ts-prose {
    max-inline-size: 44ch;
    font-size: var(--ke-t-intro);
    line-height: var(--ke-lh-intro);
    text-wrap: pretty;
}

.ts-journal--featured .ts-postgrid--lead .ke-cardby {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.125rem 0.75rem;
    clip-path: none;
}

.ts-journal--featured .ts-postgrid--lead .ke-cardby > .ke-cardby__avatar {
    display: inline-grid;
    grid-row: span 2;
}

.ts-journal--featured .ts-postgrid--lead .ke-cardby > .ke-cardby__name {
    color: var(--ke-ink);
    font-family: var(--ke-sans);
    font-size: var(--ke-t-ui);
    letter-spacing: 0;
}

.ts-journal--featured .ts-postgrid--lead .ke-cardby__name > .ke-cardby__by {
    display: inline;
}

.ts-journal--featured .ts-postgrid--lead .ke-cardby > .ke-cardby__name > .ke-byname {
    color: var(--ke-ink);
    font-weight: 600;
}

.ts-journal--featured .ts-postgrid--lead .ke-cardby > .ke-cardby__name > a.ke-byname {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.ts-journal--featured .ts-postgrid--lead .ke-cardby > :is(time, .ke-cardby__time)::before {
    content: none;
}

.ts-journal--featured .ts-postgrid--lead .ke-cardby > .ke-cardby__time {
    display: none;
}

.ts-journal--featured .ts-postgrid--lead .ts-postcard__body > .readmore > a {
    gap: 0.625rem;
    min-block-size: var(--ke-control-h);
    padding: 0 1.375rem;
    border: 1px solid var(--ke-ink);
    border-radius: var(--ke-r-control);
    background-color: var(--ke-ink);
    color: var(--ke-on-ink);
}

.ts-journal--featured .ts-postgrid--lead .ts-postcard__body > .readmore > a:is(:hover, :focus-visible, :active) {
    border: 1px solid var(--ke-ink-hover);
    background-color: var(--ke-ink-hover);
    color: var(--ke-on-ink);
    text-decoration: none;
}

.ts-journal--featured .ts-postgrid--lead .ts-postcard__body > .readmore > a::after {
    inline-size: 1.125rem;
    block-size: 1.125rem;
}

/* The blog lead (Blog board): 16:9 image beside the copy, the feature title, the meta line and
   the quiet read more; a 2px rule tops the card grid and the link rows (no section heads, PD12). */
.ts-journal:not(.ts-journal--featured) > .ts-postgrid--lead {
    margin: 0;
}

.ts-journal:not(.ts-journal--featured) .ts-postgrid--lead > .ts-postcard {
    flex-flow: row wrap;
    align-items: center;
    gap: 2rem 3rem;
}

.ts-journal:not(.ts-journal--featured) .ts-postgrid--lead > .ts-postcard > .ts-postcard__media {
    flex: 999 1 35rem;
    aspect-ratio: 16 / 9;
}

.ts-journal:not(.ts-journal--featured) .ts-postgrid--lead > .ts-postcard > .ts-postcard__body {
    flex: 1 1 22.5rem;
    gap: 1.125rem;
}

.ts-journal:not(.ts-journal--featured) .ts-postgrid--lead .ke-cardmeta > .ke-cardmeta__time {
    display: none;
}

.ts-journal:not(.ts-journal--featured) .ts-postgrid--lead .page-header > :is(h2, h3) {
    font-size: var(--ke-t-feature);
    font-weight: var(--ke-w-display);
    line-height: var(--ke-lh-feature);
    letter-spacing: var(--ke-track-page);
}

.ts-journal:not(.ts-journal--featured) .ts-postgrid--lead .ts-postcard__body > .ts-postcard__excerpt.ts-prose {
    font-size: var(--ke-t-body);
}

.ts-journal:not(.ts-journal--featured) > .ts-postgrid--lead + .ts-postgrid {
    margin-block-start: 1.5rem;
}

.ts-journal:not(.ts-journal--featured) > :is(.ts-postgrid:not(.ts-postgrid--lead), .items-more) {
    padding-block-start: 2rem;
    border-block-start: 2px solid var(--ke-rule);
}

.ts-journal:not(.ts-journal--featured) > .items-more {
    padding-block-start: 0.25rem;
}

/* Link rows (Blog board "More stories"): the date in a mono column, the title beside it; the kit's
   author, reading time and arrow stay out of the row (K46). */
.ts-postlinks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(26.25rem, 100%), 1fr));
    column-gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ts-postlinks > .ts-postlinks__item {
    margin: 0;
    border-block-end: 1px solid var(--ke-hairline);
}

.ts-postlinks__item > .ts-postlinks__link {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0.25rem 1rem;
    padding-block: 1.25rem;
    color: var(--ke-ink);
    text-decoration: none;
}

.ts-postlinks__link > .ts-postlinks__title {
    grid-area: 1 / 2;
    font-family: var(--ke-display);
    font-size: var(--ke-t-intro);
    font-weight: var(--ke-w-h3);
    line-height: 1.3;
    letter-spacing: var(--ke-track-list);
}

.ts-postlinks__link:hover > .ts-postlinks__title {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.ts-postlinks__link > .ts-postlinks__meta {
    grid-area: 1 / 1;
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-meta);
    line-height: 1.4;
    letter-spacing: var(--ke-track-meta);
}

.ts-postlinks__meta > :is(.ts-postlinks__author, .ts-postlinks__readtime),
.ts-postlinks__link > .ts-postlinks__arrow {
    display: none;
}

/* 3. View heads (PAGES.md 3.3 to 3.5): the page h1 of the list, search, tag, archive, contact and
   form views at the Page title size, the intro under it at 19px in ink 2. ------------------------ */

:is(h1, h2):is(.ts-finder__heading, .ts-tags__title, .ts-tags-tag__title, .ts-archive__title, .ts-catlist__title),
:is(.content-category, .categories-list, .com-contact, .contact-category, .com-content-categories) > h1,
:is(.categories-list, .com-content-categories) > .page-header > h1 {
    margin: 0;
    color: var(--ke-ink);
    font-family: var(--ke-display);
    font-size: var(--ke-t-page);
    font-weight: var(--ke-w-display);
    line-height: var(--ke-lh-page);
    letter-spacing: var(--ke-track-page);
    font-synthesis-weight: none;
    text-wrap: balance;
    overflow-wrap: break-word;
}

:is(.content-category, .contact-category, .categories-list, .com-content-categories) > :is(.category-desc, .base-desc),
:is(.ts-tags__intro, .ts-tags-tag__intro-text) {
    max-inline-size: 62ch;
    margin: 0;
    color: var(--ke-ink-2);
    font-size: var(--ke-t-intro);
    line-height: var(--ke-lh-intro);
    text-wrap: pretty;
}

:is(.content-category, .contact-category, .categories-list, .com-content-categories) > :is(.category-desc, .base-desc) > p,
:is(.ts-tags__intro, .ts-tags-tag__intro-text) > p {
    margin: 0;
}

/* Quiet list filters (category list, contacts, tags and tag): a search field, "Filter" as the
   outline button and "Clear" as a quiet link button, the number shown at the end (Tags, Tag,
   CategoryList and ContactCategory boards). Core prints Bootstrap button classes; these rules
   name the buttons by their type so the bridge keeps the box model. */
:is(.com-content__filter, .com-contact-category__filter, .ts-tags-filter__search) {
    display: flex;
    flex: 1 1 22.5rem;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    min-inline-size: 0;
    margin: 0;
}

:is(.com-content__filter, .com-contact-category__filter) > :is(input, .inputbox),
.ts-tags-filter__search > .ts-tags-filter__input {
    flex: 1 1 15rem;
    inline-size: auto;
    min-inline-size: 0;
    max-inline-size: 26rem;
}

:is(.com-content__filter, .com-contact-category__filter) > button[type="submit"],
.ts-tags-filter__search > .ts-tags-filter__btn:not(.ts-tags-filter__btn--ghost) {
    border-color: var(--ke-ink);
    background-color: transparent;
    color: var(--ke-ink);
}

:is(.com-content__filter, .com-contact-category__filter) > button[type="submit"]:is(:hover, :focus-visible),
.ts-tags-filter__search > .ts-tags-filter__btn:not(.ts-tags-filter__btn--ghost):is(:hover, :focus-visible) {
    border-color: var(--ke-ink);
    background-color: var(--ke-ink);
    color: var(--ke-on-ink);
}

:is(.com-content__filter, .com-contact-category__filter) > button[type="reset"],
.ts-tags-filter__search > .ts-tags-filter__btn--ghost {
    padding-inline: 0.5rem;
    border-color: transparent;
    background-color: transparent;
    color: var(--ke-ink);
}

:is(.com-content__filter, .com-contact-category__filter) > button[type="reset"]:is(:hover, :focus-visible),
.ts-tags-filter__search > .ts-tags-filter__btn--ghost:is(:hover, :focus-visible) {
    border-color: transparent;
    background-color: transparent;
    color: var(--ke-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ts-tags-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin: 0 0 2rem;
}

:is(.com-content-category__pagination, .com-contact-category__pagination).float-end {
    float: none;
}

:is(.com-content-category__articles, .com-contact-category__items > form) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}

:is(.com-content-category__articles, .com-contact-category__items > form) > :not(.com-content__filter, .com-contact-category__filter, .com-content-category__pagination, .com-contact-category__pagination) {
    flex: 1 1 100%;
    min-inline-size: 0;
}

/* 4. Account pages (PAGES.md 3.5; Login, Registration, Remind, Reset, ResetConfirm, ResetComplete,
   Logout and PrivacyRequest boards): the form column (540px) beside the paper aside, gap 48px
   80px, stacked when narrow; no card around the form; 48px fields with visible labels; link rows
   with arrows. ----------------------------------------------------------------------------------- */

.ts-auth-page {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 3rem 5rem;
    min-inline-size: 0;
}

.ts-auth-page > .ts-auth {
    display: flex;
    flex: 1 1 26.25rem;
    flex-direction: column;
    gap: 1.75rem;
    min-inline-size: 0;
    max-inline-size: 33.75rem;
    margin: 0;
    color: var(--ke-ink);
}

.ts-auth-page.ts-auth-page--profile-edit > .ts-auth {
    flex-basis: 100%;
    max-inline-size: 45rem;
}

.ts-auth-page > .ts-auth-page__aside {
    flex: 1 1 21.25rem;
    min-inline-size: 0;
    margin: 0;
}

.ts-auth-page > .ts-auth-page__aside:empty {
    display: none;
}

.ts-auth > .ts-auth__title {
    margin: 0;
    font-size: var(--ke-t-auth);
    line-height: var(--ke-lh-page);
    letter-spacing: var(--ke-track-page);
}

.ts-auth > .ts-auth__title:has(+ .ts-auth__desc) {
    margin-block-end: -0.875rem;
}

.ts-auth__desc {
    max-inline-size: 62ch;
    margin: 0;
    color: var(--ke-ink-2);
    font-size: var(--ke-t-lede);
    line-height: 1.6;
    text-wrap: pretty;
}

.ts-auth__desc > p {
    margin: 0;
}

.ts-auth__desc > .ts-auth__image {
    display: block;
    margin-block-start: 1rem;
    border-radius: var(--ke-r-img);
}

legend.ts-auth__desc:empty {
    display: none;
}

legend.ts-auth__desc {
    float: none;
    inline-size: auto;
    margin: 0 0 0.5rem;
    padding: 0;
}

.ts-auth__form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-inline-size: 0;
    margin: 0;
}

.ts-auth__form > .ts-auth__fieldset,
.ts-auth__form > fieldset {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ts-auth__form .control-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-inline-size: 0;
    margin: 0;
}

.ts-auth__form .control-group > :is(.control-label, .controls) {
    inline-size: auto;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    text-align: start;
}

/* The core "Required field" spacer reads as the board's "Fields marked * are required." note. */
.ts-auth__form .control-group.field-spacer {
    gap: 0;
}

.ts-auth__form .field-spacer :is(label, .text) {
    color: var(--ke-ink-3);
    font-size: var(--ke-t-help);
    font-weight: 400;
}

.ts-auth__form .field-spacer .red {
    color: var(--ke-danger);
    font-weight: 400;
}

/* Section legends inside the registration and profile forms: Bricolage 20 over a hairline. */
.ts-auth__fieldset > .ts-auth__legend {
    float: none;
    inline-size: 100%;
    margin: 0 0 0.25rem;
    padding: 0 0 0.75rem;
    border-block-end: 1px solid var(--ke-hairline);
    color: var(--ke-ink);
    font-family: var(--ke-display);
    font-size: 1.25rem;
    font-weight: var(--ke-w-h2);
    line-height: 1.2;
    letter-spacing: var(--ke-track-h3);
    font-synthesis-weight: none;
}

.ts-auth__fieldset + .ts-auth__fieldset {
    margin-block-start: 1.5rem;
}

.ts-auth__intro {
    margin: 0;
    color: var(--ke-ink-2);
    font-size: var(--ke-t-ui);
    line-height: var(--ke-lh-body);
}

/* The core password field: the reveal button sits inside the 48px field. */
:is(.ts-auth, .ts-profile, .ke-mfa) .input-group:has(> .input-password-toggle) {
    position: relative;
    display: block;
}

/* Bootstrap squares the end corners of an input group's field that is not last, at (0,6,0); the
   reveal button sits inside this field, so the selector mirrors Bootstrap's and adds one class. */
:is(.ts-auth, .ts-profile, .ke-mfa) .input-group:not(.has-validation):has(> .input-password-toggle) > .form-control:not(:last-child):not(.dropdown-toggle) {
    inline-size: 100%;
    padding-inline-end: 3.5rem;
    border-radius: var(--ke-r-control);
}

:is(.ts-auth, .ts-profile, .ke-mfa) .input-group > .input-password-toggle {
    position: absolute;
    z-index: 3;
    inset-block-start: 0.125rem;
    inset-inline-end: 0.125rem;
    display: inline-grid;
    place-items: center;
    inline-size: var(--ke-control-h-sm);
    min-inline-size: var(--ke-control-h-sm);
    block-size: var(--ke-control-h-sm);
    min-block-size: var(--ke-control-h-sm);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--ke-r-sm);
    background-color: transparent;
    color: var(--ke-ink-2);
    font-size: 1.125rem;
}

:is(.ts-auth, .ts-profile, .ke-mfa) .input-group > .input-password-toggle:hover {
    background-color: var(--ke-paper);
    color: var(--ke-ink);
}

.ts-auth__remember {
    margin: 0;
}

.ts-auth__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
}

:is(.ts-auth-page--login, .ts-auth-page--remind, .ts-auth-page--reset, .ts-auth-page--reset-confirm, .ts-auth-page--reset-complete, .ts-auth-page--privacy) .ts-auth__actions > .ts-auth__submit {
    flex: 1 1 100%;
}

/* "or" between the password form and the passkey buttons. */
.ts-auth__divider {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin: 0;
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-eyebrow);
    font-weight: 500;
    line-height: 1;
    letter-spacing: var(--ke-track-eyebrow);
    text-transform: uppercase;
}

.ts-auth__divider::before,
.ts-auth__divider::after {
    content: "";
    flex: 1 1 0;
    block-size: 1px;
    background-color: var(--ke-hairline);
}

.ts-auth__extras {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ts-auth__extras > .ts-auth__extra {
    inline-size: 100%;
}

/* Reset, remind and register as link rows between hairlines, each with the arrow (Login board). */
.ts-auth__options {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border-block-start: 1px solid var(--ke-hairline);
    list-style: none;
}

.ts-auth__options > li {
    margin: 0;
    padding: 0;
    border-block-end: 1px solid var(--ke-hairline);
}

.ts-auth__options > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-block-size: 3.25rem;
    color: var(--ke-ink);
    font-size: var(--ke-t-ui);
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}

.ts-auth__options > li > a::after {
    content: "";
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;
    background-color: currentColor;
    -webkit-mask: var(--ke-i-arrow) center / contain no-repeat;
    mask: var(--ke-i-arrow) center / contain no-repeat;
}

.ts-auth__options > li > a:hover {
    color: var(--ke-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Logout (Logout board): the narrow column, the ink button at its own width. */
.ts-auth-page--logout .ts-auth__submit {
    border-color: var(--ke-ink);
    background-color: var(--ke-ink);
    color: var(--ke-on-ink);
}

.ts-auth-page--logout .ts-auth__submit:is(:hover, :focus-visible) {
    border-color: var(--ke-ink-hover);
    background-color: var(--ke-ink-hover);
    color: var(--ke-on-ink);
}

/* Reset steps (PD14): a decorative 3-segment 6px bar over the form, 1, 2 or 3 segments in accent. */
:is(.ts-auth-page--reset, .ts-auth-page--reset-confirm, .ts-auth-page--reset-complete) > .ts-auth::before {
    content: "";
    order: -1;
    display: block;
    block-size: 0.375rem;
    margin-block-end: -0.25rem;
    border-radius: var(--ke-pill);
    background: linear-gradient(90deg, var(--ke-accent) 0 var(--ke-step, 33.333%), var(--ke-hairline) var(--ke-step, 33.333%) 100%);
    -webkit-mask: linear-gradient(90deg, #000 0 calc(33.333% - 0.1875rem), transparent 0 calc(33.333% + 0.1875rem), #000 0 calc(66.666% - 0.1875rem), transparent 0 calc(66.666% + 0.1875rem), #000 0);
    mask: linear-gradient(90deg, #000 0 calc(33.333% - 0.1875rem), transparent 0 calc(33.333% + 0.1875rem), #000 0 calc(66.666% - 0.1875rem), transparent 0 calc(66.666% + 0.1875rem), #000 0);
}

.ts-auth-page--reset-confirm > .ts-auth {
    --ke-step: 66.666%;
}

.ts-auth-page--reset-complete > .ts-auth {
    --ke-step: 100%;
}

/* The auth aside (auth-aside partial): the paper panel of the Login and Registration boards. */
.ke-auth-aside {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--ke-r);
    background-color: var(--ke-page);
    color: var(--ke-ink);
}

.ke-auth-aside__title {
    margin: 0;
    color: var(--ke-ink);
    font-family: var(--ke-display);
    font-size: var(--ke-t-panel);
    font-weight: var(--ke-w-h2);
    line-height: var(--ke-lh-panel);
    letter-spacing: var(--ke-track-h2);
    font-synthesis-weight: none;
    text-wrap: balance;
}

.ke-auth-aside__text {
    margin: 0;
    color: var(--ke-ink-2);
    font-size: var(--ke-t-ui);
    line-height: var(--ke-lh-body);
}

.ke-auth-aside__action {
    margin: 0.25rem 0 0;
}

.ke-auth-aside__action > .ke-btn {
    background-color: var(--ke-paper);
}

.ke-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ke-step;
}

.ke-steps > .ke-steps__item {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    column-gap: 1.125rem;
    margin: 0;
    padding: 1.25rem 0;
    border-block-end: 1px solid var(--ke-hairline);
    counter-increment: ke-step;
}

.ke-steps > .ke-steps__item:first-child {
    padding-block-start: 0.5rem;
}

.ke-steps > .ke-steps__item::before {
    content: counter(ke-step) / "";
    grid-row: 1 / span 2;
    color: var(--ts-link);
    font-family: var(--ke-display);
    font-size: 2.25rem;
    font-weight: var(--ke-w-display);
    line-height: 1;
    letter-spacing: var(--ke-track-page);
}

.ke-steps__title {
    margin: 0 0 0.375rem;
    color: var(--ke-ink);
    font-family: var(--ke-display);
    font-size: var(--ke-t-row);
    font-weight: var(--ke-w-h3);
    line-height: 1.25;
    letter-spacing: var(--ke-track-list);
    font-synthesis-weight: none;
}

.ke-steps__body {
    margin: 0;
    color: var(--ke-ink-2);
    font-size: var(--ke-t-help);
    line-height: 1.55;
}

.ke-auth-aside__more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin: 0.5rem 0 0;
    color: var(--ke-ink-2);
    font-size: var(--ke-t-ui);
}

.ke-auth-aside__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: var(--ke-control-h-sm);
    color: var(--ke-ink);
    font-weight: 600;
    text-decoration: none;
}

.ke-auth-aside__link:hover {
    color: var(--ke-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 5. Profile and profile edit (Profile, ProfileEdit boards): the identity row, each fieldset as a
   rule section with Bricolage 30 legends and hairline rows of mono labels and values. ----------- */

.ts-profile {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    min-inline-size: 0;
}

.ts-profile > .ts-profile__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    margin: 0;
}

.ke-identity {
    display: flex;
    align-items: center;
    gap: 1.25rem 1.5rem;
    min-inline-size: 0;
}

.ke-identity > .ke-identity__avatar {
    flex: none;
}

.ke-identity__text {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-inline-size: 0;
}

.ke-identity__text > .ts-profile__title,
.ts-profile__head > .ts-profile__title {
    margin: 0;
    font-size: var(--ke-t-auth);
    line-height: var(--ke-lh-page);
    letter-spacing: var(--ke-track-page);
}

.ke-profile__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem calc(1.25rem + 1ch);
    margin: 0;
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-meta);
    line-height: 1.4;
    letter-spacing: var(--ke-track-meta);
    clip-path: inset(-0.5rem -0.375rem);
}

.ke-profile__part + .ke-profile__part {
    position: relative;
}

.ke-profile__part + .ke-profile__part::before {
    content: "\00B7" / "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: calc(100% + 0.625rem);
    color: var(--ke-ink-3);
}

.ts-profile__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
}

.ts-profile__body {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    min-inline-size: 0;
}

.ts-profile__body > fieldset {
    min-inline-size: 0;
    margin: 0;
    padding: 0.875rem 0 0;
    border: 0;
    border-block-start: 2px solid var(--ke-rule);
}

.ts-profile__body > fieldset > legend {
    float: left;
    inline-size: 100%;
    margin: 0 0 1rem;
    padding: 0;
    color: var(--ke-ink);
    font-family: var(--ke-display);
    font-size: var(--ke-t-h2);
    font-weight: var(--ke-w-h2);
    line-height: var(--ke-lh-h2);
    letter-spacing: var(--ke-track-h2);
    font-synthesis-weight: none;
}

.ts-profile__body > fieldset > dl {
    clear: both;
    display: grid;
    column-gap: 0;
    grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr);
    margin: 0;
}

.ts-profile__body > fieldset > dl > :is(dt, dd) {
    margin: 0;
    padding: 1.125rem 1rem 1.125rem 0;
    border-block-end: 1px solid var(--ke-hairline);
    overflow-wrap: anywhere;
}

.ts-profile__body > fieldset > dl > dt {
    float: none;
    inline-size: auto;
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-meta);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: var(--ke-track-eyebrow);
    text-align: start;
    text-transform: uppercase;
}

.ts-profile__body > fieldset > dl > dd {
    color: var(--ke-ink);
    font-size: var(--ke-t-body);
    line-height: 1.5;
}

@media (width < 40rem) {
    .ts-profile__body > fieldset > dl {
        grid-template-columns: minmax(0, 1fr);
    }

    .ts-profile__body > fieldset > dl > dt {
        padding-block-end: 0.25rem;
        border-block-end: 0;
    }

    .ts-profile__body > fieldset > dl > dd {
        padding-block-start: 0;
    }
}

/* Profile edit: fields two up where there is room, as the ProfileEdit board pairs Password with
   Confirm password and Editor with Time zone; textareas, editors and spacers span the row. */
.ts-auth-page--profile-edit .ts-auth__fieldset {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
    gap: 1.25rem 1rem;
}

.ts-auth-page--profile-edit .ts-auth__fieldset > :is(.ts-auth__intro, .control-group:has(textarea, .field-spacer, joomla-editor-none, .js-editor-tinymce)),
.ts-auth-page--profile-edit .ts-auth__fieldset.ts-auth__mfa > * {
    grid-column: 1 / -1;
}

/* Core prints the password rules line before the field; under it, as the board's help line, the
   two password fields of the pair start on one line. */
.ts-auth-page--profile-edit .control-group > .controls:has(> .password-group) {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ts-auth-page--profile-edit .control-group > .controls > .password-group {
    order: -1;
}

.ts-auth-page--profile-edit .ts-auth__actions > :is(.ts-btn, .ts-auth__submit) {
    flex: 0 0 auto;
}

/* Multi-factor methods inside the profile form (core com-users-methods-list): hairline rows, the
   method image small beside its name; Bootstrap's card and utility fills made transparent through
   their own variables. */
.ts-auth__mfa #com-users-methods-list-container > .com-users-methods-list-method {
    --bs-card-border-width: 0;
    --bs-card-border-radius: 0;
    --bs-card-cap-bg: transparent;
    --bs-card-bg: transparent;
    --bs-card-cap-padding-x: 0;
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-spacer-x: 0;
    --bs-card-spacer-y: 0.5rem;
    border-block-end: 1px solid var(--ke-hairline);
}

.ts-auth__mfa .com-users-methods-list-method-image {
    --bs-bg-opacity: 0;
    padding: 0;
}

.ts-auth__mfa .com-users-methods-list-method-image > img {
    inline-size: auto;
    max-inline-size: 5rem;
    block-size: 2rem;
    object-fit: contain;
}

.ts-auth__mfa .com-users-methods-list-method-title > h2 {
    color: var(--ke-ink);
    font-family: var(--ke-display);
    font-size: var(--ke-t-row);
    font-weight: var(--ke-w-h3);
    line-height: 1.3;
}

.ts-auth__mfa .com-users-methods-list-method-info {
    color: var(--ke-ink-2);
    font-size: var(--ke-t-help);
}

/* 6. Multi-factor captive (Mfa board, K51 override): one centred 520px column. ---------------- */

.ke-mfa {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    inline-size: min(100%, 32.5rem);
    margin-inline: auto;
    color: var(--ke-ink);
}

.ke-mfa__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
    padding-block-end: 1.75rem;
    border-block-end: 2px solid var(--ke-rule);
}

.ke-mfa__icon {
    display: inline-grid;
    place-items: center;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    margin-block-end: 0.75rem;
    border: 1px solid var(--ke-accent-line);
    border-radius: var(--ke-r);
    background-color: var(--ke-accent-wash);
    color: var(--ts-link);
}

.ke-mfa__title {
    margin: 0;
    color: var(--ke-ink);
    font-family: var(--ke-display);
    font-size: var(--ke-t-auth);
    font-weight: var(--ke-w-display);
    line-height: var(--ke-lh-page);
    letter-spacing: var(--ke-track-page);
    font-synthesis-weight: none;
    text-wrap: balance;
}

.ke-mfa__lede {
    margin: 0;
    color: var(--ke-ink-2);
    font-size: var(--ke-t-lede);
    line-height: 1.6;
}

.ke-mfa__method {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
}

.ke-mfa__method-icon {
    display: inline-grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--ke-r);
    background-color: var(--ke-paper);
    color: var(--ke-ink-2);
}

.ke-mfa__method-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--ke-ink);
    font-family: var(--ke-display);
    font-size: 1.1875rem;
    font-weight: var(--ke-w-h3);
    line-height: 1.3;
    font-synthesis-weight: none;
}

.ke-mfa__pre,
.ke-mfa__post {
    margin-block-start: 0.375rem;
    color: var(--ke-ink-2);
    font-size: var(--ke-t-ui);
    line-height: var(--ke-lh-body);
}

.ke-mfa__pre > p,
.ke-mfa__post > p {
    margin: 0;
}

.ke-mfa__form,
.ke-mfa__fields,
.ke-mfa__field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
}

.ke-mfa__form {
    gap: 1.25rem;
}

.ke-mfa__field > .form-label {
    margin: 0;
    color: var(--ke-ink);
    font-size: var(--ke-t-label);
    font-weight: 600;
}

.ke-mfa__field > #users-mfa-code {
    min-block-size: 4rem;
    font-family: var(--ke-mono);
    font-size: 1.5rem;
    letter-spacing: 0.3em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.ke-mfa__actions {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ke-mfa__another,
.ke-mfa__leave {
    margin: 0;
}

.ke-mfa__leave {
    display: flex;
    justify-content: flex-end;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--ke-hairline);
}

.ke-mfa__methods {
    margin: 0;
    padding: 0;
    border-block-start: 1px solid var(--ke-hairline);
    list-style: none;
}

.ke-mfa__methods-item {
    margin: 0;
    border-block-end: 1px solid var(--ke-hairline);
}

.ke-mfa__choice {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: center;
    gap: 0.25rem 1rem;
    min-block-size: 4rem;
    padding: 0.75rem 0;
    color: var(--ke-ink);
    text-decoration: none;
}

.ke-mfa__choice-image {
    grid-row: span 2;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    object-fit: contain;
}

.ke-mfa__choice-title {
    font-weight: 600;
}

.ke-mfa__choice-name {
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-meta);
    letter-spacing: var(--ke-track-meta);
}

.ke-mfa__choice:hover > .ke-mfa__choice-title {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 7. Smart Search (PAGES.md 3.4, Search board): the form in a framed panel (K53), the toolbar on
   the 2px rule, results as hairline rows, the empty state with numbered tips. ----------------- */

.ts-finder {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    min-inline-size: 0;
}

.ts-finder > .ts-finder__heading {
    margin-block-end: -0.5rem;
}

.ts-finder__form {
    padding: 1.5rem;
    border: 1px solid var(--ke-hairline);
    border-radius: var(--ke-r);
}

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

.ts-finder__label {
    display: block;
    margin: 0 0 0.5rem;
    color: var(--ke-ink);
    font-size: var(--ke-t-label);
    font-weight: 600;
}

.ts-finder__inputrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.875rem 0.75rem;
}

.ts-finder__field {
    position: relative;
    min-inline-size: 0;
}

.ts-finder__field > .awesomplete {
    display: block;
    inline-size: 100%;
}

.ts-finder__field-icon {
    position: absolute;
    z-index: 2;
    inset-block-start: 0.875rem;
    inset-inline-start: 0.875rem;
    color: var(--ke-ink-3);
    pointer-events: none;
}

.ts-finder__field .ts-finder__input.ts-input {
    padding-inline-start: 2.75rem;
}

.ts-finder__inputrow > .ts-finder__advanced-toggle {
    grid-column: 1 / -1;
    justify-self: start;
    min-block-size: var(--ke-control-h-sm);
    padding-inline: 0;
    border-color: transparent;
    background-color: transparent;
    color: var(--ke-ink);
    font-size: var(--ke-t-label);
}

.ts-finder__inputrow > .ts-finder__advanced-toggle:is(:hover, :focus-visible) {
    border-color: transparent;
    background-color: transparent;
    color: var(--ke-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ts-finder__inputrow > .ts-finder__advanced-toggle::after {
    content: "";
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;
    background-color: currentColor;
    -webkit-mask: var(--ke-i-chevron) center / contain no-repeat;
    mask: var(--ke-i-chevron) center / contain no-repeat;
    transition: transform var(--ec-dur-2) var(--ec-ease);
}

.ts-finder__inputrow > .ts-finder__advanced-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

@media (width < 30rem) {
    .ts-finder__inputrow {
        grid-template-columns: minmax(0, 1fr);
    }

    .ts-finder__inputrow > .ts-finder__submit {
        inline-size: 100%;
    }
}

.ts-finder__advanced {
    min-inline-size: 0;
    margin: 0.875rem 0 0;
    padding: 1.5rem 0 0;
    border: 0;
    border-block-start: 1px solid var(--ke-hairline);
}

.ts-finder__tips {
    max-inline-size: 62ch;
    color: var(--ke-ink-2);
    font-size: var(--ke-t-ui);
    line-height: var(--ke-lh-body);
}

.ts-finder__tips > p {
    margin: 0 0 0.75rem;
}

.ts-finder__filter .filter-branch {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13.75rem, 100%), 1fr));
    gap: 1.25rem;
    margin-block-start: 1.25rem;
}

.ts-finder__filter .control-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-inline-size: 0;
    margin: 0;
}

.ts-finder__filter .control-group > :is(.control-label, .controls) {
    inline-size: auto;
    margin: 0;
}

.ts-finder__results {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-inline-size: 0;
}

.ts-finder__explained {
    order: 1;
    color: var(--ke-ink-2);
    font-size: var(--ke-t-ui);
    line-height: var(--ke-lh-body);
}

.ts-finder__explained > p {
    margin: 0;
}

.ts-finder__results > :not(.ts-finder__explained, .ts-finder__toolbar) {
    order: 2;
}

.ts-finder__toolbar {
    order: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding-block-start: 1rem;
    border-block-start: 2px solid var(--ke-rule);
}

.ts-finder__count {
    margin: 0;
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-meta);
    line-height: 1.5;
    letter-spacing: var(--ke-track-meta);
}

.ts-finder__count :is(.ts-finder__count-num, .ts-finder__count-term) {
    color: var(--ke-ink);
    font-weight: 600;
}

.ts-finder__count-range {
    display: block;
}

.ts-finder__sort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.ts-finder__sort-label {
    color: var(--ke-ink);
    font-size: var(--ke-t-label);
    font-weight: 600;
}

.ts-finder__sort-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ts-finder__sort-item {
    margin: 0;
}

.ts-finder__sort-link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--ke-control-h-sm);
    padding: 0 0.875rem;
    border: 1px solid var(--ke-hairline);
    border-radius: var(--ke-pill);
    color: var(--ke-ink);
    font-size: var(--ke-t-label);
    font-weight: 500;
    text-decoration: none;
}

.ts-finder__sort-link:hover {
    border-color: var(--ke-ink);
    color: var(--ke-ink);
}

.ts-finder__sort-link[aria-current] {
    border-color: var(--ke-ink);
    background-color: var(--ke-ink);
    color: var(--ke-on-ink);
    font-weight: 600;
}

.ts-finder__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ts-finder__list > .ts-finder__result {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem;
    margin: 0;
    padding-block: 1.5rem;
    border-block-end: 1px solid var(--ke-hairline);
}

.ts-finder__result-image {
    flex: 0 1 7.5rem;
    margin: 0;
    overflow: hidden;
    border-radius: var(--ke-r-img);
}

.ts-finder__result-image img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.ts-finder__result-body {
    display: flex;
    flex: 1 1 16rem;
    flex-direction: column;
    gap: 0.375rem;
    min-inline-size: 0;
}

.ts-finder__result-body > .ts-finder__result-meta {
    order: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0.375rem 0 0;
}

.ts-finder__result-body > .ts-finder__result-taxonomy {
    order: 4;
}

.ts-finder__result-meta > .ts-finder__result-type.ts-tag {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.5rem;
    padding: 0 0.4375rem;
    border: 1px solid var(--ke-hairline);
    border-radius: var(--ke-r-xs);
    background-color: var(--ke-paper);
    color: var(--ke-ink-2);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-micro);
    font-weight: 500;
    line-height: 1;
    letter-spacing: var(--ke-track-eyebrow);
    text-transform: uppercase;
}

/* (0,2,0) and after joomla.css, so the kit's ink 2 for .result__date at (0,2,0) gives way. */
.ts-finder .ts-finder__result-date {
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-meta);
    letter-spacing: var(--ke-track-meta);
}

.ts-finder__result-title {
    margin: 0;
    color: var(--ke-ink);
    font-family: var(--ke-display);
    font-size: var(--ke-t-teaser);
    font-weight: var(--ke-w-h3);
    line-height: 1.3;
    letter-spacing: var(--ke-track-list);
    font-synthesis-weight: none;
    text-wrap: balance;
}

.ts-finder__result-title > .ts-finder__result-link {
    color: var(--ke-ink);
    text-decoration: none;
}

.ts-finder__result-link > .result__title-text {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
}

.ts-finder__result-title > .ts-finder__result-link:hover {
    color: var(--ke-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.ts-finder__result-url {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-micro);
    line-height: 1.5;
}

.ts-finder__result-url > cite {
    font-style: normal;
}

.ts-finder__result-desc {
    max-inline-size: 72ch;
    margin: 0.125rem 0 0;
    overflow-wrap: anywhere;
    color: var(--ke-ink-2);
    font-size: var(--ke-t-ui);
    line-height: var(--ke-lh-body);
}

.ts-finder__result-taxonomy {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-meta);
    letter-spacing: var(--ke-track-meta);
}

.ts-finder__result-tax-label {
    font-weight: 600;
}

/* The empty state (search-empty partial): rule, search tile, title, sentence, numbered tips, browse
   links. The board's 56px paper tile is ::before (a flex item), its line glyph ::after (decorative). */
.ts-finder__empty {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-inline-size: 0;
    padding-block-start: 1.75rem;
    overflow-wrap: anywhere;
    border-block-start: 2px solid var(--ke-rule);
}

.ts-finder__empty::before {
    content: "";
    inline-size: 3.5rem;
    block-size: 3.5rem;
    border-radius: var(--ke-r);
    background-color: var(--ke-paper);
}

.ts-finder__empty::after {
    content: "";
    position: absolute;
    inset-block-start: 2.75rem;
    inset-inline-start: 1rem;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    background-color: var(--ke-ink-2);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ts-finder__empty-title {
    margin: 0;
    color: var(--ke-ink);
    font-family: var(--ke-display);
    font-size: var(--ke-t-h2);
    font-weight: var(--ke-w-h2);
    line-height: var(--ke-lh-h2);
    letter-spacing: var(--ke-track-h2);
    font-synthesis-weight: none;
}

.ts-finder__empty-body {
    max-inline-size: 56ch;
    margin: 0;
    color: var(--ke-ink-2);
    font-size: var(--ke-t-lede);
    line-height: 1.6;
}

.ke-tips {
    margin: 0;
    padding: 0;
    border-block-start: 1px solid var(--ke-hairline);
    list-style: none;
    counter-reset: ke-tip;
}

.ke-tips > .ke-tips__item {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.75rem;
    margin: 0;
    padding: 1rem 0;
    border-block-end: 1px solid var(--ke-hairline);
    color: var(--ke-ink);
    font-size: var(--ke-t-body);
    line-height: 1.5;
    counter-increment: ke-tip;
}

.ke-tips > .ke-tips__item::before {
    content: counter(ke-tip, decimal-leading-zero) / "";
    color: var(--ts-link);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-index);
    font-weight: 500;
    line-height: 1.5rem;
    letter-spacing: var(--ke-track-index);
}

.ke-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    margin: 0;
    padding-block-start: 0.5rem;
}

/* Sections beside the results (kestrel:sections in a side module): rows with mono counts. */
:is(.ts-card__body, .ts-panel__body) > .ke-sections {
    display: flex;
    flex-direction: column;
    gap: 0;
}

:is(.ts-card__body, .ts-panel__body) > .ke-sections > li {
    margin: 0;
    border-block-end: 1px solid var(--ke-hairline);
}

:is(.ts-card__body, .ts-panel__body) > .ke-sections > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-block-size: 2.75rem;
    padding: 0.375rem 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--ke-ink);
    font-size: var(--ke-t-ui);
    font-weight: 500;
}

:is(.ts-card__body, .ts-panel__body) > .ke-sections > li > a:hover {
    background: none;
    color: var(--ke-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

:is(.ts-card__body, .ts-panel__body) > .ke-sections .ke-sections__count {
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-meta);
}

/* 8. Tags and Tag (PAGES.md 3.4, Tags and Tag boards). ------------------------------------------ */

.ts-tags,
.ts-tags-tag {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    min-inline-size: 0;
}

:is(.ts-tags__head, .ts-tags-tag__head) {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0;
}

:is(.ts-tags__intro, .ts-tags-tag__intro) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem 3rem;
}

:is(.ts-tags__intro-image, .ts-tags-tag__intro-image) {
    flex: 0 1 21.25rem;
    order: 2;
    overflow: hidden;
    border-radius: var(--ke-r-img);
}

:is(.ts-tags__intro-image, .ts-tags-tag__intro-image) img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.ts-tags-tag__intro-text {
    flex: 1 1 22.5rem;
}

/* A page heading above the tag title (the Tags item's heading, inherited by every tag routed under
   it) reads as the eyebrow over the tag's name, as the Tag board draws "TAG" over "River". */
.ts-tags-tag__head > .ts-tags-tag__pageheading {
    margin: 0 0 -0.5rem;
    color: var(--ts-link);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-eyebrow);
    font-weight: 600;
    line-height: var(--ke-lh-label);
    letter-spacing: var(--ke-track-eyebrow);
    text-transform: uppercase;
}

.ts-tags__items,
.ts-tags-tag__items {
    min-inline-size: 0;
}

.ts-tags-cloud {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ts-tags-cloud__item {
    min-inline-size: 0;
    margin: 0;
}

.ts-tag-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    block-size: 100%;
    padding: 1.5rem 1.5rem 1.375rem;
    border: 1px solid var(--ke-hairline);
    border-radius: var(--ke-r);
    background-color: var(--ke-page);
    transition: border-color var(--ec-dur-1) var(--ec-ease);
}

.ts-tag-card:hover {
    border-color: var(--ke-ink);
}

.ts-tag-card__media {
    overflow: hidden;
    border-radius: var(--ke-r-img);
}

.ts-tag-card__media > img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.ts-tag-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.625rem;
    padding-block-end: 1.75rem;
}

.ts-tag-card__title {
    margin: 0;
    color: var(--ke-ink);
    font-family: var(--ke-display);
    font-size: var(--ke-t-panel);
    font-weight: var(--ke-w-h2);
    line-height: var(--ke-lh-panel);
    letter-spacing: var(--ke-track-h2);
    font-synthesis-weight: none;
    overflow-wrap: anywhere;
}

.ts-tag-card__link {
    color: var(--ke-ink);
    text-decoration: none;
}

/* The whole card takes the click; the focus ring stays on the title link. */
.ts-tag-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--ke-r);
}

.ts-tag-card__link:hover {
    color: var(--ke-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.ts-tag-card__desc {
    margin: 0;
    color: var(--ke-ink-2);
    font-size: var(--ke-t-label);
    line-height: 1.55;
}

.ts-tag-card__hits {
    margin: 0;
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-meta);
    letter-spacing: var(--ke-track-meta);
}

.ts-tag-card::after {
    content: "";
    position: absolute;
    inset-block-end: 1.375rem;
    inset-inline-end: 1.5rem;
    inline-size: 1rem;
    block-size: 1rem;
    background-color: var(--ke-ink);
    -webkit-mask: var(--ke-i-arrow) center / contain no-repeat;
    mask: var(--ke-i-arrow) center / contain no-repeat;
}

.ts-tags-empty {
    margin: 0;
    padding-block: 2rem;
    color: var(--ke-ink-2);
}

/* Tag items as rows on the 2px rule: image 3:2 at the start, title, excerpt. */
.ts-tags-grid {
    margin: 0;
    padding: 0;
    border-block-start: 2px solid var(--ke-rule);
    list-style: none;
}

.ts-tags-grid__item {
    min-inline-size: 0;
    margin: 0;
    border-block-end: 1px solid var(--ke-hairline);
}

.ts-tag-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1rem 1.5rem;
    padding-block: 1.5rem;
}

.ts-tag-item:has(> .ts-tag-item__media) {
    grid-template-columns: 10rem minmax(0, 1fr);
}

.ts-tag-item__media {
    overflow: hidden;
    border-radius: var(--ke-r-img);
}

.ts-tag-item__media > img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.ts-tag-item__body {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-inline-size: 0;
}

.ts-tag-item__title {
    margin: 0;
    color: var(--ke-ink);
    font-family: var(--ke-display);
    font-size: var(--ke-t-row);
    font-weight: var(--ke-w-h3);
    line-height: 1.3;
    letter-spacing: var(--ke-track-list);
    font-synthesis-weight: none;
    text-wrap: balance;
}

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

.ts-tag-item__title > a:hover {
    color: var(--ke-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.ts-tag-item__excerpt {
    max-inline-size: 72ch;
    margin: 0;
    color: var(--ke-ink-2);
    font-size: var(--ke-t-ui);
    line-height: var(--ke-lh-body);
}

.ts-tag-item__more {
    display: none;
}

.ts-tag-item__status {
    margin: 0;
}

@media (width < 30rem) {
    .ts-tag-item:has(> .ts-tag-item__media) {
        grid-template-columns: 6rem minmax(0, 1fr);
    }
}

/* 9. Categories and category list (PAGES.md 3.3; Categories and CategoryList boards). ---------- */

.ts-catlist {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-inline-size: 0;
}

.ts-catlist > .content-category {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-inline-size: 0;
}

.ts-catlist > .content-category > :is(.category-desc, form, .com-content-category__children, .cat-children) {
    margin: 0;
}

.ts-catlist > .content-category > :is(form, .cat-children, .com-content-category__children) {
    margin-block-start: 1rem;
}

/* Sections: each top category a rule section, its image to the end, its children in a paper panel. */
.ts-catlist > .ts-catgrid {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.ts-catlist > .ts-catgrid > .ts-catgrid__item {
    display: grid;
    grid-template-columns: max-content max-content minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    min-inline-size: 0;
    margin: 0;
    padding: 1.25rem 0 0;
    border: 0;
    border-block-start: 2px solid var(--ke-rule);
    border-radius: 0;
    background: none;
}

/* The Categories board's order: title, description, then the count and the toggle on one row, the
   image after them on phones and beside them from 48rem. The head hands its parts to the item grid
   and only the description and the image move, so the focus order (title link, then the toggle beside
   the panel it opens) stays the DOM's. */
.ts-catlist > .ts-catgrid > .ts-catgrid__item > .ts-catgrid__head {
    display: contents;
}

.ts-catlist > .ts-catgrid > .ts-catgrid__item > .ts-catgrid__head > .ts-catgrid__title {
    grid-column: 1 / 4;
    order: 1;
    margin: 0;
}

.ts-catlist > .ts-catgrid > .ts-catgrid__item > .ts-catgrid__desc {
    grid-column: 1 / 4;
    order: 2;
}

.ts-catlist > .ts-catgrid > .ts-catgrid__item > .ts-catgrid__head > .ts-catgrid__count {
    order: 3;
}

.ts-catlist > .ts-catgrid > .ts-catgrid__item > .ts-catgrid__head > .ts-catgrid__toggle {
    order: 4;
}

.ts-catlist > .ts-catgrid > .ts-catgrid__item > .ts-catgrid__media {
    order: 5;
}

.ts-catlist > .ts-catgrid > .ts-catgrid__item > .ts-catgrid__children {
    order: 6;
}

@media (width >= 48rem) {
    .ts-catlist > .ts-catgrid > .ts-catgrid__item:has(> .ts-catgrid__media) {
        grid-template-columns: max-content max-content minmax(0, 1fr) minmax(0, 23rem);
        grid-template-rows: auto auto auto 1fr; /* the flexible fourth row takes the image's extra height */
    }

    .ts-catlist > .ts-catgrid > .ts-catgrid__item > .ts-catgrid__media {
        grid-column: 4;
        grid-row: 1 / 5;
        align-self: start;
        margin-inline-start: 3rem;
    }
}

.ts-catgrid__item > :is(.ts-catgrid__children, .ts-catgrid__media) {
    grid-column: 1 / -1;
}

.ts-catgrid__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem 1rem;
}

.ts-catgrid__head > .ts-catgrid__title {
    flex: 1 1 100%;
    margin: 0 0 0.25rem;
    color: var(--ke-ink);
    font-family: var(--ke-display);
    font-size: var(--ke-t-h2);
    font-weight: var(--ke-w-h2);
    line-height: var(--ke-lh-h2);
    letter-spacing: var(--ke-track-h2);
    font-synthesis-weight: none;
}

.ts-catgrid__title > a {
    color: var(--ke-ink);
    font: inherit;
    letter-spacing: inherit;
    text-decoration: none;
}

.ts-catgrid__title > a:hover {
    color: var(--ke-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.ts-catgrid__count {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.5rem;
    padding: 0 0.5rem;
    border: 1px solid var(--ke-hairline);
    border-radius: var(--ke-r-xs);
    background-color: var(--ke-paper);
    color: var(--ke-ink-2);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-micro);
    font-weight: 500;
    letter-spacing: var(--ke-track-eyebrow);
    text-transform: uppercase;
}

.ts-catgrid__toggle {
    display: inline-grid;
    place-items: center;
    inline-size: var(--ke-control-h-sm);
    block-size: var(--ke-control-h-sm);
    padding: 0;
    border: 1px solid var(--ke-hairline);
    border-radius: var(--ke-r-control);
    background-color: transparent;
    color: var(--ke-ink);
    cursor: pointer;
}

.ts-catgrid__toggle:hover {
    border-color: var(--ke-ink);
}

.ts-catgrid__desc {
    max-inline-size: 62ch;
    margin: 0;
    color: var(--ke-ink-2);
    font-size: var(--ke-t-body);
    line-height: var(--ke-lh-body);
}

.ts-catgrid__desc > p {
    margin: 0;
}

.ts-catgrid__media {
    margin: 0;
    overflow: hidden;
    border-radius: var(--ke-r-img);
}

.ts-catgrid__media img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.ts-catgrid__children {
    margin: 0.5rem 0 0;
    padding: 1.5rem 1.75rem;
    border: 0; /* core's shared-categories-accordion draws a #dfe3e7 top line, bright in dark */
    border-radius: var(--ke-r);
    background-color: var(--ke-paper);
}

.ts-catgrid__children > .ts-catgrid {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ts-catgrid__children .ts-catgrid__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.375rem;
    margin: 0;
    padding: 1rem 0;
    border: 0;
    border-block-end: 1px solid var(--ke-hairline);
    border-radius: 0;
    background: none;
}

.ts-catgrid__children .ts-catgrid__item:last-child {
    border-block-end: 0;
}

.ts-catgrid__children .ts-catgrid__title {
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--ke-t-row);
    font-weight: var(--ke-w-h3);
    line-height: 1.3;
}

.ts-catgrid__children .ts-catgrid__desc {
    font-size: var(--ke-t-label);
}

/* The category list table (core default_articles): mono heads on the 2px rule, hairline rows. */
.com-content-category__table.category {
    inline-size: 100%;
    margin: 0;
    border-collapse: collapse;
    border-block-start: 2px solid var(--ke-rule);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: var(--ke-paper);
    --bs-table-border-color: var(--ke-hairline);
}

.com-content-category__table.category > thead > tr > th {
    padding: 0.875rem 1rem 0.875rem 0;
    border-width: 0 0 1px;
    border-color: var(--ke-hairline);
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-meta);
    font-weight: 500;
    letter-spacing: var(--ke-track-eyebrow);
    text-align: start;
    text-transform: uppercase;
    white-space: nowrap;
}

.com-content-category__table.category > thead > tr > th > a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-block-size: 2.75rem;
    color: var(--ke-ink);
    text-decoration: none;
}

.com-content-category__table.category > thead > tr > th > a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.com-content-category__table.category > tbody > tr > :is(th, td) {
    padding: 1.125rem 1rem 1.125rem 0;
    border-width: 0 0 1px;
    border-color: var(--ke-hairline);
    color: var(--ke-ink);
    font-size: var(--ke-t-ui);
    vertical-align: middle;
}

.com-content-category__table.category > tbody > tr > .list-title > a {
    color: var(--ke-ink);
    font-family: var(--ke-display);
    font-size: var(--ke-t-ui);
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.com-content-category__table.category > tbody > tr > .list-title > a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.com-content-category__table.category > tbody > tr > .list-date {
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-help);
    letter-spacing: var(--ke-track-meta);
    white-space: nowrap;
}

/* Subcategories under the list (core default_children): rows with mono counts. */
.content-category > :is(.cat-children, .com-content-category__children) > h3 {
    margin: 0 0 0.5rem;
    padding-block-start: 1rem;
    border-block-start: 2px solid var(--ke-rule);
    color: var(--ke-ink);
    font-family: var(--ke-display);
    font-size: var(--ke-t-h2);
    font-weight: var(--ke-w-h2);
    line-height: var(--ke-lh-h2);
    letter-spacing: var(--ke-track-h2);
}

.content-category > .cat-children > .com-content-category__children {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-block: 1.25rem;
    border-block-end: 1px solid var(--ke-hairline);
}

.com-content-category__children > h3.item-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0;
    font-family: var(--ke-display);
    font-size: var(--ke-t-list);
    font-weight: var(--ke-w-h3);
    line-height: var(--ke-lh-list);
    letter-spacing: var(--ke-track-list);
}

.com-content-category__children > h3.item-title > a {
    color: var(--ke-ink);
    font: inherit;
    text-decoration: none;
}

.com-content-category__children > h3.item-title > a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Joomla's article count badge as a mono count on paper (its Bootstrap fill made transparent). */
.com-content-category__children > h3.item-title > span {
    --bs-bg-opacity: 0;
    --bs-badge-color: var(--ke-ink-2);
    --bs-badge-font-size: var(--ke-t-micro);
    --bs-badge-font-weight: 500;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--ke-hairline);
    border-radius: var(--ke-r-xs);
    font-family: var(--ke-mono);
    letter-spacing: var(--ke-track-eyebrow);
}

.com-content-category__children > .category-desc {
    max-inline-size: 72ch;
    color: var(--ke-ink-2);
    font-size: var(--ke-t-ui);
    line-height: var(--ke-lh-body);
}

.com-content-category__children > .category-desc > p {
    margin: 0;
}

/* 10. Archive (PAGES.md 3.3, Archive board): the filter panel, items as hairline rows. ---------- */

.ts-archive {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    min-inline-size: 0;
}

.ts-archive > .ts-archive__title {
    margin: 0;
}

.ts-archive > .ts-archive__form {
    margin: 0;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--ke-hairline);
    border-radius: var(--ke-r);
}

.ts-archive__form > fieldset {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ts-archive__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.ts-archive__filters > :is(.form-control, .form-select, .inputbox) {
    flex: 0 1 10rem;
    inline-size: auto;
    min-inline-size: 0;
}

.ts-archive__filters > .form-control {
    flex: 1 1 15rem;
}

.ts-archive .com-content-archive__items {
    gap: 0;
    margin: 0;
    padding: 0;
    border-block-start: 2px solid var(--ke-rule);
}

.ts-archive .com-content-archive__items > div {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-inline-size: 0;
    margin: 0;
    padding-block: 1.75rem;
    border-block-end: 1px solid var(--ke-hairline);
}

.ts-archive .com-content-archive__items > div > .page-header {
    margin: 0;
}

.ts-archive .com-content-archive__items > div > .page-header > h2 {
    margin: 0;
    color: var(--ke-ink);
    font-family: var(--ke-display);
    font-size: var(--ke-t-teaser);
    font-weight: var(--ke-w-h3);
    line-height: 1.3;
    letter-spacing: var(--ke-track-list);
    font-synthesis-weight: none;
}

.ts-archive .com-content-archive__items > div > .page-header > h2 > a {
    color: var(--ke-ink);
    text-decoration: none;
}

.ts-archive .com-content-archive__items > div > .page-header > h2 > a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.ts-archive .com-content-archive__items > div > .intro {
    order: 1;
    max-inline-size: 72ch;
    color: var(--ke-ink-2);
    font-size: var(--ke-t-ui);
    line-height: var(--ke-lh-body);
}

.ts-archive .com-content-archive__items > div > .intro > :is(p, ul, ol) {
    margin: 0;
}

.ts-archive .com-content-archive__items > div > .article-info {
    order: 2;
    margin: 0.25rem 0 0;
}

/* 11. Contact and contact category (PAGES.md 3.4; Contact and ContactCategory boards). --------- */

.com-contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-inline-size: 0;
}

.com-contact > * {
    min-inline-size: 0;
    margin: 1rem 0 0;
}

.com-contact > .page-header {
    order: -1;
    margin: 0;
}

/* The contact's name as the eyebrow over the page heading (Contact board "News desk"). */
.com-contact:not(.ke-contact--listed) > .page-header:not(:first-child) > h2 {
    margin: 0;
    color: var(--ts-link);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-eyebrow);
    font-weight: 600;
    line-height: var(--ke-lh-label);
    letter-spacing: var(--ke-track-eyebrow);
    text-transform: uppercase;
}

.com-contact > .page-header:first-child > h2,
.com-contact.ke-contact--listed > .page-header > h2 {
    margin: 0;
    font-family: var(--ke-display);
    font-size: var(--ke-t-page);
    font-weight: var(--ke-w-display);
    line-height: var(--ke-lh-page);
    letter-spacing: var(--ke-track-page);
}

.com-contact > h1 {
    margin: 0.875rem 0 0;
}

/* A person opened from a contact list (Our team; ke-contact--listed from the com_contact override):
   core prints the list's page heading as the h1 and the person's name as the h2, so the heading is
   the eyebrow and the name the page title, in source order. */
.com-contact.ke-contact--listed > .page-header {
    order: 0;
}

.com-contact.ke-contact--listed > h1 {
    margin: 0;
    color: var(--ts-link);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-eyebrow);
    font-weight: 600;
    line-height: var(--ke-lh-label);
    letter-spacing: var(--ke-track-eyebrow);
    text-transform: uppercase;
}

.com-contact.ke-contact--listed > h1 + .page-header {
    margin-block-start: 0.875rem;
}

.com-contact > h3 {
    margin-block-start: 2.5rem;
}

.com-contact > h3 + * {
    margin-block-start: 1rem;
}

/* From 1000px the form and its heading take the second column beside the details; the row gap is 0
   and the form spans twelve rows, so the details stack at their own heights next to it (dense flow). */
@media (width >= 62.5rem) {
    .com-contact {
        grid-template-columns: minmax(0, 21.25rem) minmax(0, 1fr);
        grid-auto-flow: row dense;
        column-gap: 4.75rem;
    }

    .com-contact > * {
        grid-column: 1 / -1;
    }

    .com-contact > :is(h3, .com-contact__container, .com-contact__miscinfo, .com-contact__links, .com-contact__articles, .com-contact__profile, .contact-links, .contact-articles, .contact-profile) {
        grid-column: 1;
    }

    .com-contact > h3:has(+ .com-contact__form) {
        grid-column: 2;
    }

    .com-contact > .com-contact__container {
        grid-row: span 2;
    }

    .com-contact > .com-contact__form {
        grid-column: 2;
        grid-row: span 12;
    }
}

.com-contact > h3,
.com-contact__container > h3 {
    margin-inline: 0;
    margin-block-end: 0;
    padding-block-start: 1rem;
    border-block-start: 2px solid var(--ke-rule);
    color: var(--ke-ink);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-index);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--ke-track-eyebrow);
    text-transform: uppercase;
}

.com-contact > h3:has(+ .com-contact__form) {
    padding-block-start: 0;
    border: 0;
    font-family: var(--ke-display);
    font-size: var(--ke-t-h2);
    font-weight: var(--ke-w-h2);
    line-height: var(--ke-lh-h2);
    letter-spacing: var(--ke-track-h2);
    text-transform: none;
}

.com-contact__container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Core prints the details head over an empty list when a contact has no image, position, address,
   telephone, web page or vCard (the sample News desk, SAMPLE_DATA C13): no detail, no block. */
.com-contact > .com-contact__container:not(:has(dd, img, a)) {
    display: none;
}

.com-contact__thumbnail {
    margin: 0 0 1rem;
}

.com-contact__thumbnail > img {
    display: block;
    inline-size: 100%;
    border-radius: var(--ke-r-img);
    object-fit: cover;
}

/* The position as a detail row: the label in the meta ink, the value beside it, a hairline under. */
.com-contact__position {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    margin: 0;
    padding-block: 0.375rem 1rem;
    border-block-end: 1px solid var(--ke-hairline);
    color: var(--ke-ink);
    font-size: var(--ke-t-body);
    line-height: 1.5;
}

.com-contact__position > :is(dt, dd) {
    margin: 0;
}

.com-contact__position > dt {
    color: var(--ke-ink-3);
    font-weight: 400;
}

/* Detail rows: Joomla's icon in a 36px tile, the value beside it, hairlines between. */
.com-contact__address {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    column-gap: 1rem;
    margin: 0;
}

.com-contact__address > dt {
    grid-column: 1;
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    margin: 1rem 0 0;
    border-radius: var(--ke-r);
    background-color: var(--ke-accent-wash);
    color: var(--ts-link);
}

.com-contact__address > dd {
    grid-column: 2;
    margin: 0;
    padding: 0.375rem 0;
    color: var(--ke-ink);
    font-size: var(--ke-t-body);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.com-contact__address > dt + dd {
    padding-block-start: 1.375rem;
}

.com-contact__address > dd:has(+ dt),
.com-contact__address > dd:last-child {
    padding-block-end: 1rem;
    border-block-end: 1px solid var(--ke-hairline);
}

.com-contact__address a,
.com-contact__miscinfo a {
    color: var(--ts-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.com-contact__miscinfo .dl-horizontal {
    display: block;
    margin: 0;
}

.com-contact__miscinfo .dl-horizontal > dt {
    display: none;
}

.com-contact__miscinfo .dl-horizontal > dd {
    margin: 0.75rem 0 0;
    color: var(--ke-ink-2);
    font-size: var(--ke-t-ui);
    line-height: var(--ke-lh-body);
}

.com-contact__miscinfo .contact-misc > p {
    margin: 0;
}

/* The contact form: fields two up for name and email, the rest full width. */
.com-contact__form > form {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.com-contact__form > form > fieldset {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: 1.25rem 1.25rem;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.com-contact__form > form > fieldset > legend {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.com-contact__form > form > fieldset > .control-group:not(:has(#jform_contact_name, #jform_contact_email)) {
    grid-column: 1 / -1;
}

.com-contact__form .control-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-inline-size: 0;
    margin: 0;
}

.com-contact__form .control-group > .controls > :is(.form-control, .form-select) {
    inline-size: 100%;
    max-inline-size: none;
}

.com-contact__form .control-group > :is(.control-label, .controls) {
    inline-size: auto;
    margin: 0;
    padding: 0;
    text-align: start;
}

/* A lone check box (core "Send a copy to yourself") is a check row: the 20px box first, its 15px
   label beside it, 44px tall (DESIGN_SPEC 7.3, Contact board). A check with its own label (the
   privacy consent) keeps the stacked group. */
.com-contact__form .control-group:has(> .controls > .form-check > .form-check-input:only-child) {
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    min-block-size: 2.75rem;
}

.com-contact__form .control-group:has(> .controls > .form-check > .form-check-input:only-child) > .controls > .form-check {
    display: flex;
    min-block-size: 0;
    margin: 0;
    padding: 0;
}

.com-contact__form .control-group > .controls > .form-check > .form-check-input:only-child {
    float: none;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin: 0;
}

.com-contact__form .control-group:has(> .controls > .form-check > .form-check-input:only-child) > .control-label > label {
    margin: 0;
    color: var(--ke-ink);
    font-size: var(--ke-t-ui);
    font-weight: 400;
    cursor: pointer;
}

.com-contact__form .control-group.field-spacer :is(label, .text) {
    color: var(--ke-ink-3);
    font-size: var(--ke-t-help);
    font-weight: 400;
}

.com-contact__form > form > .control-group {
    margin: 1.5rem 0 0;
}

.com-contact__form > form > .control-group > .controls {
    margin: 0;
}

/* Our team: the core list table drawn as a card grid; each row stays a row for assistive technology. */
.contact-category {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-inline-size: 0;
}

.contact-category > .com-contact-category__items {
    margin: 1rem 0 0;
}

.com-contact-category__items #contactList {
    display: block;
    inline-size: 100%;
    margin: 1.5rem 0 0;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--ke-hairline);
}

.com-contact-category__items #contactList > thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.com-contact-category__items #contactList > tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(18.75rem, 100%), 1fr));
    gap: 1.5rem;
}

.com-contact-category__items #contactList > tbody > tr {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-inline-size: 0;
    padding: 1.5rem;
    border: 1px solid var(--ke-hairline);
    border-radius: var(--ke-r);
    background-color: var(--ke-page);
}

.com-contact-category__items #contactList > tbody > tr > :is(th, td) {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--ke-ink-2);
    font-size: var(--ke-t-ui);
    line-height: 1.5;
    text-align: start;
}

.com-contact-category__items #contactList > tbody > tr > .list-title > a {
    color: var(--ke-ink);
    font-family: var(--ke-display);
    font-size: var(--ke-t-list);
    font-weight: var(--ke-w-h3);
    line-height: 1.3;
    letter-spacing: var(--ke-track-list);
    text-decoration: none;
}

.com-contact-category__items #contactList > tbody > tr > .list-title > a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.com-contact-category__items #contactList > tbody > tr > td:empty {
    display: none;
}

.com-contact-category__counter:empty {
    display: none;
}

/* 12. Article edit form (PAGES.md 3.3, ArticleEdit board): the form under the page heading, core
   joomla-tab drawn as Kestrel tabs, 48px fields. ------------------------------------------------ */

.edit.item-page {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-inline-size: 0;
}

.edit.item-page > .page-header {
    margin: 0;
}

.edit.item-page > .page-header > h1 {
    margin: 0;
    color: var(--ke-ink);
    font-family: var(--ke-display);
    font-size: var(--ke-t-auth);
    font-weight: var(--ke-w-display);
    line-height: var(--ke-lh-page);
    letter-spacing: var(--ke-track-page);
    font-synthesis-weight: none;
}

.edit.item-page > form > fieldset {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.edit.item-page joomla-tab > [role="tablist"] {
    display: flex;
    gap: 1.75rem;
    margin: 0 0 1.75rem;
    padding: 0;
    overflow-x: auto;
    border: 0;
    border-block-end: 1px solid var(--ke-hairline);
    background: none;
    box-shadow: none;
    scrollbar-width: none;
}

.edit.item-page joomla-tab > [role="tablist"] > [role="tab"] {
    flex: none;
    min-block-size: var(--ke-control-h);
    margin: 0;
    padding: 0;
    border: 0;
    border-block-end: 2px solid transparent;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--ke-ink-2);
    font-family: var(--ke-sans);
    font-size: var(--ke-t-ui);
    font-weight: 500;
    line-height: 1.25;
}

.edit.item-page joomla-tab > [role="tablist"] > [role="tab"]:hover {
    background: none;
    color: var(--ke-ink);
}

.edit.item-page joomla-tab > [role="tablist"] > [role="tab"][aria-selected="true"] {
    border-block-end-color: var(--ke-accent);
    background: none;
    color: var(--ke-ink);
    font-weight: 600;
}

.edit.item-page joomla-tab > [role="tablist"] > [role="tab"][aria-selected="true"]::after {
    content: none;
}

.edit.item-page joomla-tab[view="tabs"] > joomla-tab-element {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.edit.item-page .control-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-inline-size: 0;
    max-inline-size: 48rem;
    margin: 0 0 1.5rem;
}

.edit.item-page .control-group > :is(.control-label, .controls) {
    inline-size: auto;
    margin: 0;
    padding: 0;
    text-align: start;
}

.edit.item-page .control-group:has(.js-editor-tinymce, joomla-editor-none, joomla-editor-codemirror) {
    max-inline-size: none;
}

/* Below 768px core shows the tabs as an accordion: each panel keeps room inside its frame. */
.edit.item-page joomla-tab[view="accordion"] > joomla-tab-element {
    padding: 1rem;
}

/* Joomla's horizontal form grid aligns its cells to the start; the stacked groups above stretch
   their label and control to the full row instead. */
:is(.ts-auth__form, .com-contact__form, .edit.item-page, .ts-finder__filter) .control-group {
    align-items: stretch;
}

/* Phones: the filter field takes its own row, its buttons and the number shown follow. */
@media (width < 30rem) {
    :is(.com-content__filter, .com-contact-category__filter) > :is(input, .inputbox),
    .ts-tags-filter__search > .ts-tags-filter__input {
        flex-basis: 100%;
        max-inline-size: none;
    }
}