/* ---- css/base.css ---- */
/* =====================================================================
   Hydari theme — base (P27)
   The site's ground: body, links, focus, pictures, buttons, inputs, the
   helpers every part uses. Colours and fonts come only from the palette
   tokens the Appearance module compiles (P23), so night mode and every
   palette work without editing this file; directions mirror by
   themselves (logical properties, --hy-flip for arrows).
   ===================================================================== */

:root {
    --hy-max: 1200px; --hy-flip: 1; --hy-ease: cubic-bezier(.2, .7, .2, 1); --hy-dur: .2s;
    --hy-radius: var(--radius-card, 14px); --hy-radius-sm: var(--radius-md, 10px);
    --hy-text: var(--text-main); --hy-muted: var(--text-secondary); --hy-line: var(--border-light);
}
[dir="rtl"] { --hy-flip: -1; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-block-start: calc(var(--hy-header-h, 64px) + 16px); }
body.hy-body { margin: 0; min-block-size: 100vh; display: flex; flex-direction: column; background: var(--bg-app); color: var(--hy-text);
    font-family: var(--font-body, system-ui, sans-serif); font-size: var(--font-size-base, 1rem); line-height: var(--line-height, 1.7);
    overflow-wrap: break-word; text-rendering: optimizeLegibility; }
.hy-main { flex: 1 0 auto; display: block; outline: none; }
img, picture, video, svg { max-inline-size: 100%; }
img { block-size: auto; }
/* Links carry no underline: interface links are buttons, chips or coloured words; links inside a text get a soft highlight (below). */
a { color: var(--text-link, var(--color-primary)); text-decoration: none; transition: color var(--hy-dur) var(--hy-ease), background-color var(--hy-dur) var(--hy-ease); }
a:hover { color: var(--text-link-hover, var(--color-primary-hover)); }
:where(.hy-item__text, .hy-comment__text, .hb-flow) a:where(:not([class])) { padding: 0 .2em; margin: 0 -.05em; border-radius: 4px; background: color-mix(in srgb, var(--color-primary) 9%, transparent);
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--color-primary) 35%, transparent); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:where(.hy-item__text, .hy-comment__text, .hb-flow) a:where(:not([class])):hover { background: color-mix(in srgb, var(--color-primary) 16%, transparent); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--color-primary-light, var(--color-primary)); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading, inherit); font-weight: var(--heading-weight, 700); line-height: var(--heading-line-height, 1.3); color: var(--text-heading, inherit); }
::selection { background: var(--bg-selection, var(--color-primary-soft)); color: var(--text-selection, inherit); }

/* Short interface labels take the direction of their own text: a string still in English (not translated yet) reads in order on a
   right-to-left page, and a Persian one on a left-to-right page. */
.hy-btn > span, .hy-chip > span, .hy-card__stats span, .hy-card__meta time, .hy-item__meta > span, .hy-pg__of, .hy-alert__title, .hy-alert__text,
.hy-list-head__meta > *, .hy-a11y__opt > span, .hy-item__label > span, .hy-adjacent__label { unicode-bidi: plaintext; }

/* Nastaliq (Urdu) is set in one weight: headings, buttons and labels stay regular, so one font file (not three of ~160 KB) loads.
   Real emphasis (strong, b) keeps its bold. */
:where(:lang(ur)) :where(*:not(strong):not(b)), :where(html:lang(ur)) { font-weight: 400 !important; }

.hy-sr { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hy-icon { inline-size: 1.15em; block-size: 1.15em; flex: none; vertical-align: -.2em; }
.hy-flip { transform: scaleX(var(--hy-flip)); }
.hy-wrap { inline-size: 100%; max-inline-size: var(--hy-max); margin-inline: auto; padding-inline: 1rem; }
.hy-section-title { margin: 0 0 1rem; font-size: 1.3rem; }
.hy-nojs .hy-needs-js { display: none !important; }

/* ---- buttons ----------------------------------------------------------- */
.hy-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-block-size: 42px; padding: .5rem 1.05rem; border: 1px solid transparent;
    border-radius: var(--radius-lg, 12px); font: inherit; font-family: var(--font-button, inherit); font-weight: var(--font-weight-button, 600); line-height: 1.2; text-decoration: none; cursor: pointer;
    background: transparent; color: inherit; transition: background-color var(--hy-dur) var(--hy-ease), color var(--hy-dur) var(--hy-ease), border-color var(--hy-dur) var(--hy-ease), box-shadow var(--hy-dur) var(--hy-ease); }
.hy-btn:active { transform: translateY(1px); }
.hy-btn--solid { background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-colored, none); }
.hy-btn--solid:hover { background: var(--color-primary-hover, var(--color-primary)); color: var(--color-on-primary); }
.hy-btn--outline { border-color: var(--color-primary); color: var(--color-primary-text, var(--color-primary)); background: transparent; }
.hy-btn--outline:hover { background: var(--color-primary-soft); color: var(--color-primary-text, var(--color-primary)); }
.hy-btn--ghost { background: var(--bg-sunken, var(--bg-hover)); color: var(--hy-text); border-color: var(--hy-line); }
.hy-btn--ghost:hover { background: var(--bg-hover); color: var(--hy-text); }
.hy-btn--text { padding-inline: .35rem; color: var(--color-primary-text, var(--color-primary)); }
.hy-btn--text:hover { background: var(--color-primary-soft); color: var(--color-primary-text, var(--color-primary)); }
.hy-btn--dark { background: var(--color-dark); color: var(--color-on-dark, var(--text-inverse)); }
.hy-btn--sm { min-block-size: 34px; padding: .3rem .7rem; font-size: .88rem; }
.hy-btn--tool { min-block-size: 38px; padding: .35rem .75rem; border-color: var(--hy-line); background: var(--bg-card); color: var(--hy-text); font-size: .88rem; font-weight: 500; }
.hy-btn--tool:hover, .hy-btn--tool[aria-pressed="true"], .hy-btn--tool[aria-expanded="true"] { background: var(--color-primary-soft); border-color: var(--color-primary-light, var(--color-primary)); color: var(--color-primary-text, var(--color-primary)); }

/* ---- inputs ------------------------------------------------------------ */
.hy-input { inline-size: 100%; min-block-size: 42px; padding: .45rem .8rem; border: 1px solid var(--border-base, var(--hy-line)); border-radius: var(--radius-md, 10px);
    background: var(--bg-input, var(--bg-card)); color: var(--hy-text); font: inherit; }
.hy-input:focus { border-color: var(--color-primary); outline: 3px solid var(--color-primary-soft); outline-offset: 0; }
.hy-input--sm { min-block-size: 34px; padding: .25rem .5rem; inline-size: auto; }
.hy-field { display: grid; align-content: start; gap: .3rem; font-size: .88rem; color: var(--hy-muted); }

/* ---- avatars ------------------------------------------------------------ */
.hy-avatar { display: inline-flex; align-items: center; justify-content: center; inline-size: 24px; block-size: 24px; flex: none; border-radius: 50%; object-fit: cover; }
.hy-avatar--md { inline-size: 36px; block-size: 36px; }
.hy-avatar--lg { inline-size: 64px; block-size: 64px; font-size: 1.4rem; }
.hy-avatar--initial { background: var(--color-primary-soft); color: var(--color-primary-text, var(--color-primary)); font-weight: 700; font-size: .8em; }

/* ---- the "only available in" note and preview bar ----------------------------------- */
.hy-notice { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.25rem; padding: .75rem 1rem; border-radius: var(--hy-radius-sm);
    background: var(--color-info-light, var(--color-primary-soft)); color: var(--color-info-text, var(--hy-text)); border-inline-start: 4px solid var(--color-info, var(--color-primary)); }
.hy-preview-bar { position: sticky; inset-block-start: 0; z-index: 1000; padding: .55rem 1rem; text-align: center; font-size: .9rem; background: var(--color-warning-light); color: var(--color-warning-text, var(--hy-text)); }
.hy-nocopy .hy-item__text { -webkit-user-select: none; user-select: none; }

/* ---- licence: lock level 2 bar (P41, spec 4.29 §6) ------------------------------------ */
.hy-licence-bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 2000; padding: .35rem 1rem; text-align: center; font-size: .8125rem; line-height: 1.4;
    background: var(--color-dark); color: var(--color-on-dark, var(--text-inverse)); }
body.hy-body:has(.hy-licence-bar) { padding-block-end: 2.2rem; }

/* ---- css/layout.css ---- */
/* =====================================================================
   Hydari theme — the content area and its sidebars (spec 4.24 "layout
   and sidebars"). Desktop (≥ 1200 px): start · content · end. Laptop and
   tablet in landscape (992–1199): the sidebars share one column at the
   end. Phones and tablets (< 992): one column; the sidebars go below,
   above, into a drawer, or away. Grid areas mirror in right-to-left.
   ===================================================================== */

.hy-cols { --hy-sbw: 300px; --hy-col-gap: 2rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hy-col-gap);
    inline-size: 100%; max-inline-size: var(--hy-max); margin-inline: auto; padding: var(--hy-space-top, 32px) 1rem var(--hy-space-bottom, 48px); }
.hy-w--narrow { --hy-max: 800px; }
.hy-w--wide { --hy-max: 1440px; }
.hy-w--full { --hy-max: none; padding-inline: clamp(1rem, 3vw, 2.5rem); }
.hy-cols--bg { background: var(--hy-content-bg); }
.hy-sbw--narrow { --hy-sbw: 240px; }
.hy-sbw--wide { --hy-sbw: 360px; }
.hy-cols__main { min-inline-size: 0; grid-area: main; }
.hy-cols__side { display: contents; }
.hy-sidebar { min-inline-size: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.hy-sidebar--start { grid-area: start; }
.hy-sidebar--end { grid-area: end; }
.hy-cols--none { grid-template-areas: "main"; }
/* Below the content: the widgets of both sidebars as one row of blocks under the column, on every screen. */
.hy-cols--below { grid-template-areas: "main" "end"; }
.hy-cols--below .hy-sidebar--end, .hy-sidebar--below { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); align-items: start; gap: clamp(.75rem, 1.6vw, 1.1rem); }
.hy-sidebar--below { display: flex; flex-wrap: wrap; align-items: stretch; margin-block-start: clamp(.75rem, 1.6vw, 1.1rem); }
.hy-sidebar--below > * { flex: 1 1 17rem; min-inline-size: 0; }
.hy-sidebar--below > :not(.hd-widget) { flex-grow: 0; max-inline-size: 20rem; }
/* Below the content the post lists are compact: small square pictures, one-line titles. */
:is(.hy-sidebar--below, .hy-cols--below .hy-sidebar) .hb-postlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .45rem; }
:is(.hy-sidebar--below, .hy-cols--below .hy-sidebar) .hb-postlist__item { gap: .6rem; padding: .4rem; border-radius: 12px; }
:is(.hy-sidebar--below, .hy-cols--below .hy-sidebar) .hb-postlist__image { flex-basis: 2.9rem; inline-size: 2.9rem; border-radius: 9px; }
:is(.hy-sidebar--below, .hy-cols--below .hy-sidebar) .hb-postlist__title { font-size: .8rem; -webkit-line-clamp: 1; line-clamp: 1; }
:is(.hy-sidebar--below, .hy-cols--below .hy-sidebar) .hb-postlist__meta { font-size: .68rem; }
.hy-sidebar--below > .hd-widget:has(.hb-postlist) { flex: 3 1 34rem; }
@media (max-width: 575.98px) { .hy-sidebar--below > :not(.hd-widget) { max-inline-size: none; } }

@media (min-width: 1200px) {
    .hy-cols--start { grid-template-columns: var(--hy-sbw) minmax(0, 1fr); grid-template-areas: "start main"; }
    .hy-cols--end { grid-template-columns: minmax(0, 1fr) var(--hy-sbw); grid-template-areas: "main end"; }
    .hy-cols--both { grid-template-columns: var(--hy-sbw) minmax(0, 1fr) var(--hy-sbw); grid-template-areas: "start main end"; }
    .hy-cols--both.hy-sbw--wide { --hy-sbw: 320px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hy-cols--start { grid-template-columns: var(--hy-sbw) minmax(0, 1fr); grid-template-areas: "start main"; }
    .hy-cols--end { grid-template-columns: minmax(0, 1fr) var(--hy-sbw); grid-template-areas: "main end"; }
    .hy-cols--both { grid-template-columns: minmax(0, 1fr) var(--hy-sbw); grid-template-areas: "main start" "main end"; grid-template-rows: auto 1fr; }
}
@media (min-width: 992px) {
    /* No scroll bar of its own: kit.js sets --hy-sb-top so a sidebar taller than the window sticks by its end (it scrolls with the page first). */
    .hy-sb-sticky .hy-sidebar { position: sticky; inset-block-start: var(--hy-sb-top, calc(var(--hy-header-sticky, 0px) + 1rem)); align-self: start; }
    .hy-cols--below.hy-sb-sticky .hy-sidebar { position: static; }
    .hy-sb-open, .hy-sb-close { display: none !important; }
}

/* phones and tablets */
@media (max-width: 991.98px) {
    .hy-cols { --hy-col-gap: 1.5rem; display: flex; flex-direction: column; }
    .hy-cols__main { order: 0; }
    .hy-sidebar { order: 1; }
    .hy-sbm--above .hy-sidebar { order: -1; }
    .hy-sbm--hidden .hy-cols__side { display: none; }
    .hy-sbm--drawer .hy-cols__side { position: fixed; z-index: 1200; inset-block: 0; inset-inline-end: 0; display: flex; flex-direction: column; gap: 1.25rem;
        inline-size: min(88vw, 380px); padding: 3.5rem 1rem 1.5rem; overflow-y: auto; background: var(--bg-card); box-shadow: var(--shadow-modal, 0 0 40px rgba(0, 0, 0, .3));
        transform: translateX(calc(105% * var(--hy-flip))); visibility: hidden; transition: transform .28s var(--hy-ease), visibility .28s; }
    .hy-sbm--drawer .hy-cols__side.is-open { transform: none; visibility: visible; }
    .hy-sb-open { justify-self: start; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border: 1px solid var(--hy-line); border-radius: 999px;
        background: var(--bg-card); color: var(--hy-text); font: inherit; font-size: .9rem; cursor: pointer; }
    .hy-sb-close { position: absolute; inset-block-start: .6rem; inset-inline-end: .6rem; inline-size: 40px; block-size: 40px; border: 0; border-radius: 12px; background: var(--bg-sunken, var(--bg-hover)); color: inherit; cursor: pointer; }
    .hy-sb-open { order: -1; }
}
.hy-sheet-backdrop { position: fixed; inset: 0; z-index: 1150; background: var(--bg-overlay, rgba(0, 0, 0, .45)); }

/* sidebar widgets (P25 / P21 blocks): each a block like the post's — the name as a soft pill, a quiet icon tile at the other end
   (Shell::sidebar adds both), the content raised on a soft ground. */
.hy-sidebar { --hy-w-soft: color-mix(in srgb, var(--bg-card) 55%, var(--bg-app)); --hy-w-raised: var(--bg-raised, var(--bg-card)); --hy-w-lift: 0 1px 2px color-mix(in srgb, var(--hy-text) 6%, transparent); gap: clamp(.75rem, 1.6vw, 1.1rem); }
.hy-sidebar .hd-widget { position: relative; min-inline-size: 0; padding: 1rem; border: 1px solid color-mix(in srgb, var(--hy-line) 70%, transparent); border-radius: 20px; background: var(--hy-w-soft); }
.hy-sidebar .hd-widget > :first-child { margin-block-start: 0; }
.hy-sidebar .hd-widget > :last-child { margin-block-end: 0; }
.hy-sidebar .hd-widget h2, .hy-sidebar .hd-widget h3, .hy-sidebar .hd-widget .hb-widget-title { font-size: 1rem; margin: 0 0 .75rem; }
.hy-sidebar .hd-widget .hb-widget__title { display: inline-flex; align-items: center; min-block-size: 38px; margin: 0 0 .85rem; padding: .25rem .9rem; border-radius: 12px; background: var(--hy-w-raised); box-shadow: var(--hy-w-lift);
    color: var(--color-accent, var(--color-primary)); font-size: .95rem; font-weight: 800; line-height: 1.3; }
.hd-widget__mark { position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 12px;
    background: var(--hy-w-raised, var(--bg-card)); box-shadow: var(--hy-w-lift, none); color: color-mix(in srgb, var(--hy-muted) 65%, transparent); }
.hd-widget__mark .hy-icon { inline-size: 18px; block-size: 18px; }
/* The search widget: one raised field with the button inside. */
.hy-sidebar .hd-widget[data-widget="display.search"] { padding: .5rem; }
.hy-sidebar .hb-search__row { border-color: transparent; border-radius: 14px; background: var(--hy-w-raised); box-shadow: var(--hy-w-lift); }
.hy-sidebar .hb-search__input { min-block-size: 44px; background: transparent; }
.hy-sidebar .hb-search__button { inline-size: 36px; min-inline-size: 36px; min-block-size: 36px; margin: 4px; padding: 0; border: 0; border-radius: 11px; background: var(--color-primary); color: var(--color-on-primary); opacity: 1; }
.hy-sidebar .hb-search__button:hover { background: var(--color-primary-hover, var(--color-primary)); }
/* Post lists (latest, related): rows raised on the block, a thumbnail at the start, the title in two lines, the date under it. */
.hy-sidebar .hb-postlist { gap: .5rem; }
.hy-sidebar .hb-postlist--list .hb-postlist__item + .hb-postlist__item { padding: .55rem; border: 0; }
.hy-sidebar .hb-postlist__item { position: relative; align-items: center; gap: .75rem; padding: .55rem; border-radius: 14px; background: var(--hy-w-raised); box-shadow: var(--hy-w-lift);
    transition: transform .2s var(--hy-ease), box-shadow .2s var(--hy-ease); }
.hy-sidebar .hb-postlist__item:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -16px color-mix(in srgb, var(--color-primary) 70%, transparent); }
.hy-sidebar .hb-postlist__image { flex: 0 0 4.25rem; inline-size: 4.25rem; aspect-ratio: 1 / 1; border-radius: 11px; }
.hy-sidebar .hb-postlist__item:not(.has-image)::before { content: ""; flex: none; inline-size: 6px; align-self: stretch; border-radius: 99px; background: color-mix(in srgb, var(--color-accent, var(--color-primary)) 55%, transparent); }
.hy-sidebar .hb-postlist__body { gap: .2rem; }
.hy-sidebar .hb-postlist__title { font-size: .9rem; font-weight: 700; line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.hy-sidebar .hb-postlist__title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hy-sidebar .hb-postlist__title:hover { color: var(--color-primary-text, var(--color-primary)); }
.hy-sidebar .hb-postlist__meta { font-size: .75rem; color: var(--hy-muted); }
/* Keywords: small coloured buttons, each with its number of posts in a bubble; five soft tones in turn. */
:is(.hy-sidebar, .hb-tag-cloud--chips) .hb-chips, .hy-sidebar .hb-tag-cloud__list { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
:is(.hy-sidebar, .hb-tag-cloud--chips) :is(.hb-chip, .hb-tag-cloud__tag) { --hy-w-raised: var(--bg-raised, var(--bg-card)); --hy-w-lift: 0 1px 2px color-mix(in srgb, var(--hy-text) 6%, transparent); --tone: var(--color-primary); --tone-soft: var(--color-primary-soft); display: inline-flex; align-items: center; gap: .4rem; min-block-size: 32px;
    padding: .2rem .3rem .2rem .7rem; border: 0; border-radius: 999px; background: var(--hy-w-raised); box-shadow: var(--hy-w-lift); color: var(--hy-text); font-size: .8rem !important; font-weight: 600; line-height: 1.3;
    text-decoration: none; transition: background-color .2s var(--hy-ease), color .2s var(--hy-ease), transform .2s var(--hy-ease); }
[dir="rtl"] :is(.hy-sidebar, .hb-tag-cloud--chips) :is(.hb-chip, .hb-tag-cloud__tag) { padding: .2rem .7rem .2rem .3rem; }
:is(.hy-sidebar, .hb-tag-cloud--chips) :is(.hb-chip, .hb-tag-cloud__tag)::before { content: ""; flex: none; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--tone); }
:is(.hy-sidebar, .hb-tag-cloud--chips) li:nth-child(5n + 2) > :is(.hb-chip, .hb-tag-cloud__tag) { --tone: var(--color-accent, var(--color-primary)); --tone-soft: var(--color-accent-light, var(--color-primary-soft)); }
:is(.hy-sidebar, .hb-tag-cloud--chips) li:nth-child(5n + 3) > :is(.hb-chip, .hb-tag-cloud__tag) { --tone: var(--color-info, var(--color-primary)); --tone-soft: var(--color-info-light, var(--color-primary-soft)); }
:is(.hy-sidebar, .hb-tag-cloud--chips) li:nth-child(5n + 4) > :is(.hb-chip, .hb-tag-cloud__tag) { --tone: var(--color-warning, var(--color-primary)); --tone-soft: var(--color-warning-light, var(--color-primary-soft)); }
:is(.hy-sidebar, .hb-tag-cloud--chips) li:nth-child(5n + 5) > :is(.hb-chip, .hb-tag-cloud__tag) { --tone: var(--color-danger, var(--color-primary)); --tone-soft: var(--color-danger-light, var(--color-primary-soft)); }
:is(.hy-sidebar, .hb-tag-cloud--chips) :is(.hb-chip, .hb-tag-cloud__tag):hover { background: var(--tone-soft); color: var(--hy-text); transform: translateY(-1px); }
:is(.hy-sidebar, .hb-tag-cloud--chips) :is(.hb-chip, .hb-tag-cloud__tag) .hb-count { display: inline-grid; place-items: center; min-inline-size: 24px; block-size: 24px; padding-inline: .35rem; border-radius: 999px;
    background: var(--tone-soft); color: var(--hy-text); font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Other lists (collections, archives, contents): quiet rows. */
.hy-sidebar .hd-widget :is(.hb-terms, .hb-archives) a { color: var(--hy-text); }
.hy-sidebar .hd-widget :is(.hb-terms, .hb-archives) a:hover { color: var(--color-primary-text, var(--color-primary)); }

/* ---- the head of a list page: a block of its own under the breadcrumb, an icon tile at its end ------------------------------- */
.hy-list-head { position: relative; margin-block-end: 1.5rem; }
/* A slim band (2026-10-29): a coloured tile at the start, the title with one line under it, the count and feed as chips at the end,
   a gold glow and a faint field of dots towards the end; the tile tilts a little when the band is hovered. */
.hy-list-head:not(.hy-list-head--cover):not(.hy-list-head--quiet) { --hy-head-glow: 100% 0%; --hy-head-fade: to left; display: flex; align-items: center; gap: clamp(.7rem, 1.4vw, 1rem);
    isolation: isolate; overflow: hidden; padding: clamp(.65rem, 1.3vw, .85rem) clamp(.75rem, 1.6vw, 1.1rem);
    border: 1px solid color-mix(in srgb, var(--hy-line) 70%, transparent); border-radius: 18px; box-shadow: var(--shadow-sm, none);
    background: radial-gradient(90% 200% at var(--hy-head-glow), color-mix(in srgb, var(--color-accent, var(--color-primary)) 14%, transparent), transparent 60%), var(--bg-card); }
[dir="rtl"] .hy-list-head:not(.hy-list-head--cover):not(.hy-list-head--quiet) { --hy-head-glow: 0% 0%; --hy-head-fade: to right; }
.hy-list-head:not(.hy-list-head--cover):not(.hy-list-head--quiet)::after { content: ""; position: absolute; z-index: -1; inset-block: 0; inset-inline-end: 0; inline-size: min(240px, 35%); pointer-events: none;
    background-image: radial-gradient(color-mix(in srgb, var(--color-accent, var(--color-primary)) 40%, transparent) 1.1px, transparent 1.3px); background-size: 12px 12px;
    -webkit-mask-image: linear-gradient(var(--hy-head-fade), #000, transparent); mask-image: linear-gradient(var(--hy-head-fade), #000, transparent); opacity: .5; }
.hy-list-head__mark { position: relative; flex: none; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 14px;
    background: linear-gradient(145deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 62%, var(--color-dark, #000)));
    box-shadow: 0 10px 22px -12px var(--color-primary), inset 0 0 0 1px color-mix(in srgb, var(--color-accent, #fff) 25%, transparent);
    color: color-mix(in srgb, var(--color-accent, #fff) 70%, #fff); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.hy-list-head:hover .hy-list-head__mark { transform: rotate(-7deg) scale(1.05); }
.hy-list-head__mark .hy-icon { inline-size: 20px; block-size: 20px; }
.hy-list-head:not(.hy-list-head--cover):not(.hy-list-head--quiet) .hy-list-head__text { flex: 1 1 auto; min-inline-size: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; }
.hy-list-head:not(.hy-list-head--cover):not(.hy-list-head--quiet) .hy-list-head__text > * { grid-column: 1; }
.hy-list-head:not(.hy-list-head--cover) .hy-list-head__title { font-size: clamp(1.08rem, .95rem + .55vw, 1.35rem); font-weight: 800; line-height: 1.35; letter-spacing: -.01em; color: var(--text-heading, var(--hy-text)); }
.hy-list-head:not(.hy-list-head--cover) .hy-list-head__desc { max-inline-size: 80ch; margin-block-start: .1rem; font-size: .84rem; line-height: 1.6;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.hy-list-head:not(.hy-list-head--cover) .hy-list-head__eyebrow { margin-block-end: .05rem; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--color-accent, var(--color-primary)); }
.hy-list-head:not(.hy-list-head--cover):not(.hy-list-head--quiet) .hy-list-head__meta { grid-column: 2; grid-row: 1 / span 5; margin: 0; gap: .3rem; justify-content: flex-end; }
.hy-list-head:not(.hy-list-head--cover) .hy-list-head__meta > * { padding: .2rem .7rem; border: 1px solid color-mix(in srgb, var(--hy-line) 60%, transparent); border-radius: 999px; background: var(--bg-raised, var(--bg-card)); font-size: .76rem; font-weight: 600; }
.hy-list-head:not(.hy-list-head--cover) .hy-list-head__avatar { inline-size: 44px; block-size: 44px; margin: 0; }
@media (max-width: 575.98px) {
    .hy-list-head:not(.hy-list-head--cover):not(.hy-list-head--quiet) .hy-list-head__text { grid-template-columns: minmax(0, 1fr); }
    .hy-list-head:not(.hy-list-head--cover):not(.hy-list-head--quiet) .hy-list-head__meta { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-block-start: .4rem; }
    .hy-list-head__mark { inline-size: 40px; block-size: 40px; border-radius: 12px; }
}
.hy-list-head--quiet { margin: 0; }
.hy-list-crumbs .hy-crumbbar { margin-block-end: clamp(.75rem, 1.6vw, 1.1rem); }
.hy-list-head--cover { overflow: hidden; border-radius: var(--hy-radius); background: var(--color-dark); color: var(--color-on-dark, var(--text-inverse)); min-block-size: 240px; display: grid; align-items: end; }
.hy-list-head__cover { position: absolute; inset: 0; }
.hy-list-head__cover img, .hy-list-head__cover picture { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.hy-list-head--cover .hy-list-head__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .15) 70%); }
.hy-list-head--cover .hy-list-head__text { position: relative; padding: 1.5rem; }
.hy-list-head--cover a, .hy-list-head--cover .hy-list-head__title, .hy-list-head--cover .hy-crumbs, .hy-list-head--cover .hy-list-head__desc { color: inherit; }
.hy-list-head__eyebrow { margin: 0 0 .25rem; font-size: .85rem; font-weight: 600; letter-spacing: .02em; color: var(--color-primary-text, var(--color-primary)); }
.hy-list-head__title { margin: 0; font-size: var(--font-size-h1, clamp(1.6rem, 4vw, 2.3rem)); }
.hy-list-head__subtitle { margin: .35rem 0 0; font-size: 1.1rem; color: var(--hy-muted); }
.hy-list-head__desc { margin-block-start: .6rem; max-inline-size: 70ch; color: var(--hy-muted); }
.hy-list-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; margin: .8rem 0 0; font-size: .9rem; color: var(--hy-muted); }
.hy-list-head__meta > * { display: inline-flex; align-items: center; gap: .35rem; }
.hy-list-head__avatar { display: block; inline-size: 88px; block-size: 88px; margin-block-end: .75rem; border-radius: 50%; object-fit: cover; }
.hy-list-head__rss { color: inherit; text-decoration: none; }
.hy-list-head__rss:hover { color: var(--color-primary); }

/* ---- breadcrumb: one slim block with a pin tile, the same on every page ------------------------------------------------------ */
.hy-crumbbar { display: flex; align-items: center; gap: .6rem; min-inline-size: 0; margin-block-end: clamp(.75rem, 1.6vw, 1.1rem); padding: .5rem; padding-inline-end: 1.1rem;
    border: 1px solid color-mix(in srgb, var(--hy-line) 70%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--bg-card) 55%, var(--bg-app)); }
.hy-crumbbar__mark { display: grid; place-items: center; flex: none; inline-size: 36px; block-size: 36px; border-radius: 11px; background: var(--bg-raised, var(--bg-card));
    box-shadow: 0 1px 2px color-mix(in srgb, var(--hy-text) 6%, transparent); color: color-mix(in srgb, var(--hy-muted) 70%, transparent); }
.hy-crumbbar__mark .hy-icon { inline-size: 15px; block-size: 15px; }
.hy-crumbbar .hy-crumbs { min-inline-size: 0; margin: 0; }
.hy-crumbbar .hy-crumbs li { min-inline-size: 0; }
.hy-crumbbar [aria-current] { display: inline-block; max-inline-size: 48ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; font-weight: 600; }
@media (max-width: 575.98px) { .hy-crumbbar [aria-current] { max-inline-size: 22ch; } }
.hy-crumbs { margin-block-end: .6rem; font-size: .9rem; color: var(--hy-muted); }
.hy-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .15rem; margin: 0; padding: 0; list-style: none; }
.hy-crumbs li { display: inline-flex; align-items: center; }
.hy-crumbs a, .hy-crumbs [aria-current] { padding: .25rem .6rem; border-radius: 10px; }
.hy-crumbs li:not(:last-child)::after { content: "›"; display: inline-block; margin-inline: .1rem; opacity: .6; transform: scaleX(var(--hy-flip)); }
.hy-crumbs a { color: inherit; text-decoration: none; }
.hy-crumbs a:hover { color: var(--color-primary); text-decoration: none; }
.hy-crumbs [aria-current] { color: var(--hy-text); }

/* ---- page parts after the content ------------------------------------------------- */
.hy-related, .hy-suggest, .hy-after { margin-block-start: 2.5rem; }
.hy-after--folded > summary { list-style: none; cursor: pointer; }
.hy-after--folded > summary::-webkit-details-marker { display: none; }
/* Comments behind one wide button: nothing of them shows until it is pressed. */
.hy-after__open { display: flex; inline-size: 100%; min-block-size: 56px; gap: .6rem; border: 1px dashed var(--border-base, var(--hy-line)); border-radius: var(--hy-radius); background: var(--bg-card); color: var(--color-primary-text, var(--color-primary)); font-size: 1rem; }
.hy-after__open:hover { border-style: solid; border-color: var(--color-primary); background: var(--color-primary-soft); }
.hy-after__chevron { transition: transform .25s var(--hy-ease); }
.hy-after--folded[open] > .hy-after__open { display: none; }
.hy-after--folded[open] > :not(summary) { animation: hy-after-in .3s var(--hy-ease); }
@keyframes hy-after-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hy-after--folded[open] > :not(summary) { animation: none; } }
.hy-sections { display: block; }
.hy-kind-page .hy-cols--none { max-inline-size: none; padding: 0; gap: 0; }
.hy-kind-page .hy-notice { max-inline-size: var(--hy-max); margin: 1rem auto; }

/* ---- page builder blocks on the theme's pages (after P44): the same blocks look as the posts --------------------------------------- */
/* Section tiles without a picture: each a soft gradient of the palette in turn, a large faint letter mark, a lift on hover. */
.hy-main .hl-collections--tiles .hl-collection { --tile: var(--color-primary); min-block-size: 120px; border-radius: 18px; background: linear-gradient(140deg, var(--tile), color-mix(in srgb, var(--tile) 55%, #000));
    transition: transform .35s cubic-bezier(.3, 1.25, .5, 1), box-shadow .3s var(--hy-ease); }
.hy-main .hl-collections--tiles .hl-collection:nth-child(4n + 2) { --tile: var(--color-accent, var(--color-primary)); }
.hy-main .hl-collections--tiles .hl-collection:nth-child(4n + 3) { --tile: var(--color-info, var(--color-primary)); }
.hy-main .hl-collections--tiles .hl-collection:nth-child(4n + 4) { --tile: var(--color-warning, var(--color-primary)); }
.hy-main .hl-collections--tiles .hl-collection:hover { transform: translateY(-4px); box-shadow: 0 18px 32px -20px var(--tile); }
.hy-main .hl-collections--tiles .hl-collection__body { background: none; padding-block-start: 14px; }
.hy-main .hl-collections--tiles .hl-collection__name { font-size: 1rem; }
.hy-main .hl-collections--tiles .hl-collection__count { font-size: .76rem; }
/* Cards over a picture keep white words. */
.hy-main .hl-card-item--overlay .hl-card-item__title, .hy-main .hl-card-item--overlay .hl-card-item__title a { color: rgb(255 255 255); }
/* (2026-10-29) A book in the lists stands as the library's book: a warm paper stage with a faint lozenge, the cover turned as a book in
   three dimensions (spine fold, page edges, a shadow on the floor) that faces the reader on hover; its author and facts as chips. */
.hy-main .hl-card-item--k-book { --bk-maroon: color-mix(in srgb, var(--color-danger, #a8443c) 58%, #2a0a12); --bk-gold: var(--color-accent, #a98b4f);
    --bk-paper: color-mix(in srgb, var(--bg-card) 86%, #e9d9b4); --bk-line: color-mix(in srgb, var(--bk-gold) 26%, transparent); }
.hy-main :is(.hl-card-item--cards, .hl-card-item--masonry).hl-card-item--k-book { overflow: hidden; border-radius: 20px; }
.hy-main :is(.hl-card-item--cards, .hl-card-item--masonry).hl-card-item--k-book .hl-card-item__image { position: relative; isolation: isolate; display: grid; place-items: center;
    aspect-ratio: auto; margin: 0; padding: 1.4rem 1rem calc(1rem + 7px); border-radius: 0; perspective: 1000px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='none' stroke='%23b89a5e' stroke-opacity='.22' stroke-width='.7'%3E%3Cpath d='M18 2l16 16-16 16L2 18z'/%3E%3Ccircle cx='18' cy='18' r='2.2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 30px 30px,
        radial-gradient(70% 90% at 50% 100%, color-mix(in srgb, var(--bk-gold) 24%, transparent), transparent 70%), var(--bk-paper); }
/* a maroon ribbon with a gold thread hangs from the top; it drops a little when the card is pointed at */
.hy-main :is(.hl-card-item--cards, .hl-card-item--masonry).hl-card-item--k-book .hl-card-item__image::before { content: ""; position: absolute; z-index: 2; inset-block-start: 0; inset-inline-end: 14%; inline-size: 12px; block-size: 30px;
    background: linear-gradient(90deg, var(--bk-maroon) 0 42%, var(--bk-gold) 42% 58%, var(--bk-maroon) 58%); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
    box-shadow: 0 2px 4px rgb(0 0 0 / .3); transform: translateY(-8px); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
/* the shelf the book stands on: a maroon board with a gold edge and its own shadow */
.hy-main :is(.hl-card-item--cards, .hl-card-item--masonry).hl-card-item--k-book .hl-card-item__image::after { content: ""; position: absolute; z-index: 1; inset-inline: 10%; inset-block-end: 1rem; block-size: 7px; border-radius: 2px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bk-gold) 75%, rgb(255 255 255)) 0 1px, var(--bk-maroon) 1px, color-mix(in srgb, var(--bk-maroon) 70%, rgb(0 0 0)));
    box-shadow: 0 9px 12px -6px rgb(0 0 0 / .45); }
.hy-main .hl-card-item--k-book:is(:hover, :focus-within) .hl-card-item__image::before { transform: none; }
.hy-main :is(.hl-card-item--cards, .hl-card-item--masonry).hl-card-item--k-book .hl-card-item__image > :is(picture, img) { position: relative; inline-size: 50%; block-size: auto; aspect-ratio: 2 / 3;
    overflow: hidden; border-radius: 3px 8px 8px 3px; background: var(--bk-maroon);
    box-shadow: 3px 0 0 -1px #f3ecdc, 5px 1px 0 -1px #ddd0b4, 7px 2px 0 -1px #efe6d1, 9px 3px 0 -1px #cfc1a2, 0 14px 20px -12px rgb(0 0 0 / .55);
    transform: rotateY(-18deg) rotateX(4deg); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
[dir="rtl"] .hy-main :is(.hl-card-item--cards, .hl-card-item--masonry).hl-card-item--k-book .hl-card-item__image > :is(picture, img) { border-radius: 8px 3px 3px 8px; transform: rotateY(18deg) rotateX(4deg);
    box-shadow: -3px 0 0 -1px #f3ecdc, -5px 1px 0 -1px #ddd0b4, -7px 2px 0 -1px #efe6d1, -9px 3px 0 -1px #cfc1a2, 0 14px 20px -12px rgb(0 0 0 / .55); }
.hy-main .hl-card-item--k-book .hl-card-item__image picture img { inline-size: 100%; block-size: 100%; object-fit: cover; transform: none !important; }
/* the spine's fold and shine over the cover */
.hy-main :is(.hl-card-item--cards, .hl-card-item--masonry).hl-card-item--k-book .hl-card-item__image > picture::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgb(0 0 0 / .35) 0, rgb(255 255 255 / .15) 3%, rgb(0 0 0 / .12) 6%, transparent 11%); }
[dir="rtl"] .hy-main .hl-card-item--k-book .hl-card-item__image > picture::after { background: linear-gradient(-90deg, rgb(0 0 0 / .35) 0, rgb(255 255 255 / .15) 3%, rgb(0 0 0 / .12) 6%, transparent 11%); }
.hy-main .hl-card-item--k-book:is(:hover, :focus-within) .hl-card-item__image > :is(picture, img) { transform: rotateY(0) translateY(-6px) !important; }
.hy-main .hl-grid--k-book .hl-card-item--k-book { border: 1px solid var(--bk-line); }
.hy-main .hl-grid--k-book .hl-card-item--k-book:hover { border-color: color-mix(in srgb, var(--bk-gold) 55%, transparent); box-shadow: 0 22px 36px -26px color-mix(in srgb, var(--bk-maroon) 70%, transparent); }
.hy-main .hl-card-item--k-book .hl-card-item__body { flex: 1 1 auto; gap: .3rem; border-block-start: 1px solid var(--bk-line); }
.hy-main .hl-card-item--k-book .hl-card-item__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-weight: 800; }
.hy-main .hl-card-item--k-book .hl-card-item__facts { margin-block-start: auto; }
.hy-main .hl-card-item--k-book .hl-card-item__byline { margin-block-end: .35rem; }
/* The books' band: warm paper with a faint lozenge, a maroon glow in a corner, a gold rule; the head's mark in maroon leather. */
.hy-main .hl-grid--head.hl-grid--k-book { --bk-maroon: color-mix(in srgb, var(--color-danger, #a8443c) 58%, #2a0a12); --bk-gold: var(--color-accent, #a98b4f); position: relative; isolation: isolate; overflow: hidden;
    border-color: color-mix(in srgb, var(--bk-gold) 28%, transparent);
    background: radial-gradient(45% 70% at 100% 0%, color-mix(in srgb, var(--bk-maroon) 12%, transparent), transparent 70%),
        radial-gradient(40% 60% at 0% 100%, color-mix(in srgb, var(--bk-gold) 16%, transparent), transparent 70%), color-mix(in srgb, var(--bg-card) 70%, var(--bg-app)); }
.hy-main .hl-grid--head.hl-grid--k-book::before { content: ""; position: absolute; z-index: -1; inset-inline: 0; inset-block-start: 0; block-size: 3px;
    background: linear-gradient(90deg, transparent, var(--bk-maroon) 20%, var(--bk-gold) 50%, var(--bk-maroon) 80%, transparent); }
.hy-main .hl-grid--k-book .hl-head__mark { background: linear-gradient(145deg, var(--bk-maroon), color-mix(in srgb, var(--bk-maroon) 70%, rgb(0 0 0))); color: var(--bk-gold);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bk-gold) 45%, transparent), 0 10px 22px -12px var(--bk-maroon); }
.hy-main .hl-card-item--k-book .hl-card-item__title a:hover { color: var(--bk-maroon); }
.hy-main .hl-card-item__byline { margin: 0; color: var(--bk-maroon, var(--text-muted)); font-size: .84rem; font-weight: 700; }
.hy-main .hl-card-item__facts { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .55rem; margin: .25rem 0 0; padding: .4rem 0 0; list-style: none;
    border-block-start: 1px dashed color-mix(in srgb, var(--bk-gold, var(--color-accent)) 35%, transparent); }
.hy-main .hl-card-item__facts li { display: inline-flex; align-items: center; gap: .25rem; color: var(--text-secondary); font-size: .72rem; font-weight: 700; white-space: nowrap; }
.hy-main .hl-card-item__facts svg { flex: none; inline-size: 12px; block-size: 12px; color: var(--bk-gold, var(--color-accent)); }
.hy-main .hl-card-item--k-book .hl-card-item__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .hy-main .hl-card-item--k-book .hl-card-item__image > :is(picture, img) { transition: none; } }
/* The quote of the day, the newsletter and the keyword cloud as soft blocks. */
.hy-kind-page :is(.hl-newsletter, .hb-tag-cloud--chips, .hb-quote-today:not(.hb-quote-today--slider)) { padding: clamp(.9rem, 2vw, 1.3rem);
    border: 1px solid color-mix(in srgb, var(--hy-line) 70%, transparent); border-radius: 22px; background: color-mix(in srgb, var(--bg-card) 55%, var(--bg-app)); }
.hy-kind-page .hl-newsletter { background: radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--color-accent, var(--color-primary)) 16%, transparent), transparent 60%), var(--bg-card); }
.hy-kind-page .hl-newsletter input { border-radius: 14px; }
.hy-kind-page .hl-newsletter button { border-radius: 14px; }
/* Head titles in narrow cells stay on one line. */
.hy-main .hy-main .hl-grid--head { container-type: inline-size; }
@container (max-width: 640px) { .hl-head__more span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); } .hl-head__more, [dir="rtl"] .hl-head__more { padding: .45rem; } .hl-head__title { font-size: 1.05rem; } }
/* The news ticker in the menu's look: one capsule, a red label with a breathing dot, each headline a small pill that lights up under
   the pointer (the line stops), a dot between headlines, the ends fading. */
.hy-main .hl-hot__ticker { gap: 10px; padding: 4px; border-radius: 999px; border-color: color-mix(in srgb, var(--hy-line) 80%, transparent); background: color-mix(in srgb, var(--bg-card) 55%, var(--bg-app)); }
.hy-main .hl-hot__label { position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .9rem; box-shadow: 0 8px 18px -10px rgb(0 0 0 / .32); }
.hy-main .hl-hot__label::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; animation: hy-breathe 1.6s ease-in-out infinite; }
@keyframes hy-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.hy-main .hl-hot__line { gap: 4px; align-items: center; }
.hy-main .hl-hot__line > li { display: inline-flex; align-items: center; gap: 4px; }
.hy-main .hl-hot__line > li::after { content: ""; inline-size: 4px; block-size: 4px; margin-inline: 10px; border-radius: 50%; background: color-mix(in srgb, var(--color-accent, var(--color-primary)) 70%, transparent); }
.hy-main .hl-hot__line a { display: inline-block; padding: .3rem .8rem; border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--text-secondary, inherit);
    transition: background-color .25s var(--hy-ease), color .2s var(--hy-ease), box-shadow .25s var(--hy-ease), transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.hy-main .hl-hot__line a:hover, .hy-main .hl-hot__line a:focus-visible { text-decoration: none; background: var(--bg-card); color: var(--hy-text); box-shadow: 0 2px 10px -4px rgba(0, 0, 0, .2); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .hl-hot__label::before { animation: none; } }
/* Simple builder pages (one narrow section: About, Contact …): one card; its first heading becomes the card's tinted head with the
   short two-colour rule, like a post's title. */
.hy-kind-page .hl-section--narrow > .hl-section__inner { --pad: clamp(1.15rem, 3.4vw, 2.5rem); padding: var(--pad); overflow: hidden; border: 1px solid color-mix(in srgb, var(--hy-line) 70%, transparent);
    border-radius: 22px; background: var(--bg-card); box-shadow: var(--shadow-sm, none); }
.hy-kind-page .hl-section--narrow > .hl-section__inner :is(h1, .hb-heading:first-child h1) { position: relative; margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--pad); padding: var(--pad) var(--pad) clamp(1rem, 2.4vw, 1.5rem);
    border-block-end: 1px solid color-mix(in srgb, var(--color-accent, var(--color-primary)) 18%, var(--hy-line));
    background: radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--color-accent, var(--color-primary)) 15%, transparent), transparent 58%), color-mix(in srgb, var(--color-accent, var(--color-primary)) 4%, var(--bg-card));
    font-size: clamp(1.3rem, 1rem + 1.15vw, 1.85rem); font-weight: 800; line-height: 1.5; }
[dir="rtl"] .hy-kind-page .hl-section--narrow > .hl-section__inner h1 { background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--color-accent, var(--color-primary)) 15%, transparent), transparent 58%), color-mix(in srgb, var(--color-accent, var(--color-primary)) 4%, var(--bg-card)); }
.hy-kind-page .hl-section--narrow > .hl-section__inner h1::after { content: ""; display: block; inline-size: 56px; block-size: 4px; margin-block-start: .7rem; border-radius: 99px; background: linear-gradient(90deg, var(--color-accent, var(--color-primary)), var(--color-primary)); }
.hy-kind-page .hl-section--narrow form { margin-block-start: .5rem; }

/* Builder pages, grander (2026-10-29). A plain centred hero (no picture) on a soft band becomes a stage: deep green with a maroon and a
   gold glow, a faint lozenge pattern, ivory words rising in, a gold-and-maroon rule. Soft bands get a field of dots; a picture beside text
   sits in a gold offset frame; features become cards with numbered medallions. */
.hy-main .hl-section.hl-tone-soft { isolation: isolate; background: radial-gradient(60% 100% at 100% 0%, color-mix(in srgb, var(--color-accent, #a98b4f) 12%, transparent), transparent 60%), var(--color-primary-soft, var(--bg-sunken)); }
.hy-main .hl-section.hl-tone-soft::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: .45;
    background-image: radial-gradient(color-mix(in srgb, var(--color-primary) 30%, transparent) 1px, transparent 1.3px); background-size: 16px 16px;
    -webkit-mask-image: linear-gradient(110deg, #000, transparent 45%, transparent 60%, #000); mask-image: linear-gradient(110deg, #000, transparent 45%, transparent 60%, #000); }
.hy-main .hl-section.hl-tone-soft:has(.hl-hero--centered):not(:has(.hl-hero__media)) { overflow: hidden; color: rgb(255 255 255);
    background: radial-gradient(55% 120% at 0% 100%, color-mix(in srgb, color-mix(in srgb, var(--color-danger, #a8443c) 58%, #2a0a12) 80%, transparent), transparent 65%),
        radial-gradient(50% 100% at 100% 0%, color-mix(in srgb, var(--color-accent, #a98b4f) 32%, transparent), transparent 62%),
        linear-gradient(160deg, color-mix(in srgb, var(--color-dark, #2b4732) 80%, #000), color-mix(in srgb, var(--color-dark, #2b4732) 55%, #000)); }
.hy-main .hl-section.hl-tone-soft:has(.hl-hero--centered):not(:has(.hl-hero__media))::before { opacity: .12; -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 25%, #000 75%); mask-image: radial-gradient(circle at 50% 50%, transparent 25%, #000 75%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23d9bf86' stroke-width='.8'%3E%3Cpath d='M22 3l19 19-19 19L3 22z'/%3E%3Cpath d='M22 13l9 9-9 9-9-9z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 44px 44px; }
.hy-main .hl-hero--centered:not(:has(.hl-hero__media)) .hl-hero__title { color: rgb(255 255 255); font-size: clamp(2.1rem, 1.3rem + 3vw, 3.6rem); letter-spacing: -.015em; animation: hy-hl-rise .9s cubic-bezier(.2, .8, .2, 1) both; }
.hy-main .hl-hero--centered:not(:has(.hl-hero__media)) .hl-hero__title::after { content: ""; display: block; inline-size: 84px; block-size: 3px; margin: 1rem auto 0; border-radius: 3px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-danger, #a8443c) 58%, #2a0a12), var(--color-accent, #a98b4f), color-mix(in srgb, var(--color-danger, #a8443c) 58%, #2a0a12)); }
.hy-main .hl-hero--centered:not(:has(.hl-hero__media)) .hl-hero__lead { color: rgb(255 255 255 / .78); font-size: 1.12rem; animation: hy-hl-rise .9s cubic-bezier(.2, .8, .2, 1) .15s both; }
.hy-main .hl-hero--centered:not(:has(.hl-hero__media)) .hl-hero__eyebrow { border-color: color-mix(in srgb, var(--color-accent, #a98b4f) 50%, transparent); color: var(--color-accent, #a98b4f); }
@keyframes hy-hl-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hy-main .hl-block-title::after { content: ""; display: block; inline-size: 56px; block-size: 3px; margin-block-start: .65rem; border-radius: 3px; background: linear-gradient(90deg, var(--color-accent, #a98b4f), var(--color-primary)); }
.hy-main .hl-block-title--center::after { margin-inline: auto; }
/* Text beside a picture: the heading with its rule, the picture rounded in a gold offset frame that slides on hover. */
.hy-main .hl-row[data-pattern="2-columns"] > .hl-cell > .hb-heading:first-child::after { content: ""; display: block; inline-size: 48px; block-size: 3px; margin-block-start: .6rem; border-radius: 3px; background: linear-gradient(90deg, var(--color-accent, #a98b4f), var(--color-primary)); }
.hy-main .hl-row[data-pattern="2-columns"] .hb-img__frame { position: relative; isolation: isolate; overflow: visible; border-radius: 24px; }
.hy-main .hl-row[data-pattern="2-columns"] .hb-img__frame :is(img, picture) { display: block; border-radius: 24px; box-shadow: 0 26px 46px -30px rgb(0 0 0 / .55); transition: transform .6s var(--hy-ease); }
.hy-main .hl-row[data-pattern="2-columns"] .hb-img__frame::before { content: ""; position: absolute; z-index: -1; inset: 14px -14px -14px 14px; border: 2px solid color-mix(in srgb, var(--color-accent, #a98b4f) 60%, transparent); border-radius: 26px; transition: inset .5s var(--hy-ease); }
[dir="rtl"] .hy-main .hl-row[data-pattern="2-columns"] .hb-img__frame::before { inset: 14px 14px -14px -14px; }
.hy-main .hl-row[data-pattern="2-columns"] .hb-img:hover .hb-img__frame::before { inset: 6px -6px -6px 6px; }
.hy-main .hl-row[data-pattern="2-columns"] .hb-img__caption { margin-block-start: 1.4rem; }
/* Features: cards with a numbered medallion and a gold-to-maroon line on top; they lift on hover. */
.hy-main .hl-features__list { counter-reset: hy-feature; gap: clamp(1rem, 2vw, 1.5rem); }
.hy-main .hl-feature { position: relative; counter-increment: hy-feature; overflow: hidden; padding: 1.6rem 1.4rem 1.4rem; border: 1px solid color-mix(in srgb, var(--hy-line) 70%, transparent); border-radius: 22px;
    background: var(--bg-card); box-shadow: 0 1px 2px color-mix(in srgb, var(--hy-text) 6%, transparent); transition: transform .35s var(--hy-ease), box-shadow .35s var(--hy-ease); }
.hy-main .hl-feature::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px; background: linear-gradient(90deg, var(--color-accent, #a98b4f), color-mix(in srgb, var(--color-danger, #a8443c) 58%, #2a0a12)); }
.hy-main .hl-feature:not(:has(.hl-feature__icon, .hl-feature__pic))::after { content: counter(hy-feature, decimal-leading-zero); order: -1; display: grid; place-items: center; inline-size: 50px; block-size: 50px; border-radius: 50%;
    background: color-mix(in srgb, var(--color-danger, #a8443c) 58%, #2a0a12); color: var(--color-accent, #a98b4f); font-size: 1rem; font-weight: 900; box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent, #a98b4f) 18%, transparent); }
.hy-main .hl-feature:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -28px rgb(0 0 0 / .32); }
.hy-main .hl-feature__title { font-weight: 800; }
.hy-main .hl-feature__icon { background: color-mix(in srgb, var(--color-danger, #a8443c) 58%, #2a0a12); color: var(--color-accent, #a98b4f); }
@media (prefers-reduced-motion: reduce) { .hy-main .hl-hero__title, .hy-main .hl-hero__lead { animation: none !important; } }

/* Questions and answers (2026-10-29): each group a block with its icon in a maroon tile; the questions raised rows on it. */
.hy-main .hy-faq__group { margin-block: 0 1rem; padding: clamp(.9rem, 2vw, 1.25rem); border: 1px solid color-mix(in srgb, var(--hy-line) 70%, transparent); border-radius: 22px; background: var(--bg-card); box-shadow: var(--shadow-sm, none); }
.hy-main .hy-faq__group-title { display: flex; align-items: center; gap: .6rem; margin: 0 0 .8rem; font-size: 1.05rem; font-weight: 800; }
.hy-main .hy-faq__group-title > svg { inline-size: 36px; block-size: 36px; padding: 8px; border-radius: 11px; background: color-mix(in srgb, var(--color-danger, #a8443c) 58%, #2a0a12); color: var(--color-accent, #a98b4f); }
.hy-main .hy-faq__group-title a { color: inherit; }
.hy-main .hy-faq__nav .hy-chips { flex-wrap: wrap; }
.hy-main .hy-faq__nav .hy-chip { min-block-size: 34px; border: 0; background: var(--bg-card); box-shadow: 0 1px 2px color-mix(in srgb, var(--hy-text) 7%, transparent); font-weight: 600; }
.hy-main .hy-faq__nav .hy-chip[aria-current="page"] { background: var(--color-primary); color: var(--color-on-primary); }
.hy-main .hy-faq__count { padding: 0 .45rem; border-radius: 999px; background: color-mix(in srgb, var(--color-accent, #a98b4f) 18%, transparent); font-size: .72rem; }
/* The search: a large raised field with its icon and the button inside. */
.hy-main .hy-faq .hb-faq-search { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-block: .2rem 1.2rem; padding: .5rem; border: 1px solid color-mix(in srgb, var(--hy-line) 70%, transparent); border-radius: 20px;
    background: radial-gradient(80% 140% at 100% 0%, color-mix(in srgb, var(--color-accent, #a98b4f) 12%, transparent), transparent 60%), var(--bg-card); box-shadow: var(--shadow-sm, none); }
.hy-main .hy-faq .hb-faq-search__box { flex: 1 1 18rem; display: flex; align-items: center; gap: .5rem; padding-inline: .9rem; border-radius: 14px; background: var(--bg-sunken, var(--bg-app)); }
.hy-main .hy-faq .hb-faq-search__box .hy-input { min-block-size: 48px; border: 0; background: transparent; box-shadow: none; font-size: 1rem; }
.hy-main .hy-faq .hb-faq-search__box .hy-input:focus { outline: none; box-shadow: none; }
.hy-main .hy-faq .hb-faq-search > .hy-btn { min-block-size: 48px; padding-inline: 1.4rem; border-radius: 14px; }
.hy-main .hy-faq .hb-faq-search__count:empty { display: none; }
.hy-main .hy-faq .hb-faq-search__count { flex-basis: 100%; margin: 0; padding-inline: .4rem; color: var(--hy-muted); font-size: .86rem; }
/* The questions: raised rows with a number in a medallion; the sign turns; an open one shows its answer on a gold edge. */
.hy-main .hy-faq .hb-faq { counter-reset: hy-faq; gap: .5rem; }
.hy-main .hy-faq .hb-faq__item { counter-increment: hy-faq; border: 1px solid transparent; border-radius: 16px; background: var(--bg-sunken, var(--bg-app)); transition: background-color .25s var(--hy-ease), border-color .25s var(--hy-ease), box-shadow .25s var(--hy-ease); }
.hy-main .hy-faq .hb-faq__item:hover { background: color-mix(in srgb, var(--color-accent, #a98b4f) 8%, var(--bg-sunken, var(--bg-app))); }
.hy-main .hy-faq .hb-faq__item[open] { border-color: color-mix(in srgb, var(--color-accent, #a98b4f) 35%, transparent); background: var(--bg-card); box-shadow: 0 16px 30px -26px rgb(0 0 0 / .45); }
.hy-main .hy-faq .hb-faq__q { gap: .8rem; padding: .7rem .8rem; font-size: 1rem; font-weight: 700; }
.hy-main .hy-faq .hb-faq__q::before { content: counter(hy-faq); flex: none; display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%; background: var(--bg-card);
    color: var(--color-primary-text, var(--color-primary)); font-size: .8rem; font-weight: 900; box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.hy-main .hy-faq .hb-faq__item[open] > .hb-faq__q::before { background: color-mix(in srgb, var(--color-danger, #a8443c) 58%, #2a0a12); color: var(--color-accent, rgb(255 255 255)); }
.hy-main .hy-faq .hb-faq__q-text { flex: 1; }
.hy-main .hy-faq .hb-faq__sign { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 11px; background: var(--bg-card); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background-color .25s var(--hy-ease); }
.hy-main .hy-faq .hb-faq__sign::before, .hy-main .hy-faq .hb-faq__sign::after { inset-inline-start: 9px; inline-size: 14px; }
.hy-main .hy-faq .hb-faq__item[open] .hb-faq__sign { transform: rotate(180deg); background: var(--color-accent, var(--color-primary)); color: var(--color-dark, rgb(255 255 255)); }
.hy-main .hy-faq .hb-faq__a { margin: 0 .8rem .8rem calc(.8rem + 32px + .8rem); padding: .2rem 0 .2rem 1rem; border-inline-start: 3px solid var(--color-accent, var(--color-primary)); font-size: .96rem; line-height: 1.85; }
[dir="rtl"] .hy-main .hy-faq .hb-faq__a { margin: 0 calc(.8rem + 32px + .8rem) .8rem .8rem; padding: .2rem 1rem .2rem 0; }
.hy-main .hy-faq .hb-faq__item[open] .hb-faq__a { animation: hy-hl-rise .35s var(--hy-ease) both; }
.hy-main .hy-faq .hb-faq__vote-btn { border: 0; background: var(--bg-sunken, var(--bg-app)); font-weight: 600; }
@media (max-width: 575.98px) { .hy-main .hy-faq .hb-faq__a, [dir="rtl"] .hy-main .hy-faq .hb-faq__a { margin-inline: .8rem; } }
@media (max-width: 575.98px) { .hy-main .hl-slider { --hl-slider-h: 340px; } .hy-main .hl-slider__title { font-size: 1.3rem; } }

/* =====================================================================
   Section heads, refined (2026-10-29, round 8): the titles of the home
   page's sections were 32px (the general block title won) and broke on
   two lines in narrow cells. Now one quiet line: an icon tile, a modest
   title, a hairline with a short gold-and-maroon stroke under the whole
   head, "See all" at the end.
   ===================================================================== */
.hy-main .hl-head { position: relative; gap: .7rem; margin-block-end: 1.1rem; padding-block-end: .85rem; border-block-end: 1px solid color-mix(in srgb, var(--hy-line) 75%, transparent); }
.hy-main .hl-head::after { content: ""; position: absolute; inset-block-end: -1px; inset-inline-start: 0; inline-size: 64px; block-size: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--color-accent, #a98b4f), color-mix(in srgb, var(--color-danger, #a8443c) 58%, #2a0a12)); }
[dir="rtl"] .hy-main .hl-head::after { background: linear-gradient(-90deg, var(--color-accent, #a98b4f), color-mix(in srgb, var(--color-danger, #a8443c) 58%, #2a0a12)); }
.hy-main .hl-head__mark { inline-size: 36px; block-size: 36px; border-radius: 11px; background: linear-gradient(145deg, var(--color-accent, #a98b4f), color-mix(in srgb, var(--color-accent, #a98b4f) 72%, #000));
    box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--color-accent, #a98b4f) 90%, #000); }
.hy-main .hl-head__mark .hl-ic { inline-size: 18px; block-size: 18px; }
.hy-main .hl-head .hl-head__title.hl-block-title { overflow: hidden; font-size: clamp(1.02rem, .92rem + .32vw, 1.2rem); font-weight: 800; line-height: 1.3; letter-spacing: .003em; text-overflow: ellipsis; white-space: nowrap; }
.hy-main .hl-head .hl-head__title.hl-block-title::after { display: none; }
.hy-main .hl-head__more { padding-block: .35rem; font-size: .78rem; border: 1px solid color-mix(in srgb, var(--hy-line) 80%, transparent); box-shadow: none; }
/* Text-only lists in a section (blog, latest news): numbered rows — a gold number at the start, the title, the date as a small chip, one
   line of summary; the whole row is the link and an arrow slides in on hover. */
.hy-main .hl-grid--head .hl-grid__items:has(> .hl-card-item--list:not(:has(.hl-card-item__image))) { counter-reset: hl-row; gap: .55rem; }
.hy-main .hl-grid--head .hl-card-item--list:not(:has(.hl-card-item__image)) { counter-increment: hl-row; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .9rem;
    padding: .85rem 2.6rem .85rem .9rem; border: 1px solid color-mix(in srgb, var(--hy-line) 60%, transparent); }
[dir="rtl"] .hy-main .hl-grid--head .hl-card-item--list:not(:has(.hl-card-item__image)) { padding: .85rem .9rem .85rem 2.6rem; }
.hy-main .hl-grid--head .hl-card-item--list:not(:has(.hl-card-item__image))::before { content: counter(hl-row, decimal-leading-zero); display: grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 12px;
    background: color-mix(in srgb, var(--color-accent, #a98b4f) 13%, transparent); color: color-mix(in srgb, var(--color-accent, #a98b4f) 80%, #000); font-size: .85rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.hy-main .hl-grid--head .hl-card-item--list:not(:has(.hl-card-item__image))::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: 1rem; inline-size: 9px; block-size: 9px; border: solid currentColor; border-width: 2px 2px 0 0;
    color: var(--color-primary); opacity: 0; transform: translate(-6px, -50%) rotate(45deg); transition: opacity .25s ease, transform .3s cubic-bezier(.3, 1.4, .5, 1); }
[dir="rtl"] .hy-main .hl-grid--head .hl-card-item--list:not(:has(.hl-card-item__image))::after { transform: translate(6px, -50%) rotate(-135deg); }
.hy-main .hl-grid--head .hl-card-item--list:not(:has(.hl-card-item__image)):hover::after { opacity: 1; transform: translate(0, -50%) rotate(45deg); }
[dir="rtl"] .hy-main .hl-grid--head .hl-card-item--list:not(:has(.hl-card-item__image)):hover::after { transform: translate(0, -50%) rotate(-135deg); }
.hy-main .hl-grid--head .hl-card-item--list:not(:has(.hl-card-item__image)):hover::before { background: var(--color-accent, #a98b4f); color: var(--bg-card); }
.hy-main .hl-grid--head .hl-card-item--list:not(:has(.hl-card-item__image)) .hl-card-item__body { display: grid; gap: .2rem; padding: 0; }
.hy-main .hl-grid--head .hl-card-item--list:not(:has(.hl-card-item__image)) .hl-card-item__title { margin: 0; font-size: .96rem; font-weight: 700; line-height: 1.45; }
.hy-main .hl-grid--head .hl-card-item--list:not(:has(.hl-card-item__image)) .hl-card-item__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hy-main .hl-grid--head .hl-card-item--list:not(:has(.hl-card-item__image)) .hl-card-item__meta { margin: 0; color: var(--hy-muted); font-size: .74rem; font-weight: 600; }
.hy-main .hl-grid--head .hl-card-item--list:not(:has(.hl-card-item__image)) .hl-card-item__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; margin: .1rem 0 0; color: var(--text-secondary, var(--hy-muted)); font-size: .84rem; }
/* A list with pictures (events, listening): the picture a little larger and rounded, the date as a small chip. */
.hy-main .hl-grid--head .hl-card-item--list:has(.hl-card-item__image) { border: 1px solid color-mix(in srgb, var(--hy-line) 60%, transparent); }
.hy-main .hl-grid--head .hl-card-item--list .hl-card-item__title { font-size: .96rem; font-weight: 700; }
/* (2026-10-29, round 9) Events in a section as a timeline, like the events page but smaller: a gold rail with a ringed dot for each
   event, a maroon date tile (month in gold, the day large), the day in words as a small pill, the title, and the time, place and
   repetition as soft chips. The picture steps aside here. A past event is quieter; a cancelled one struck through. */
.hy-main .hl-grid--k-event .hl-grid__items { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) !important; gap: .75rem; padding-inline-start: 1.7rem; }
.hy-main .hl-grid--k-event .hl-grid__items::before { content: ""; position: absolute; inset-block: .6rem; inset-inline-start: .5rem; inline-size: 2px; border-radius: 2px;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent, #a98b4f) 70%, transparent), color-mix(in srgb, var(--color-accent, #a98b4f) 15%, transparent)); }
.hy-main .hl-card-item--k-event.has-tile { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .85rem; padding: .7rem .9rem; overflow: visible;
    border: 1px solid color-mix(in srgb, var(--hy-line) 60%, transparent); border-radius: 16px; background: var(--bg-raised, var(--bg-card)); }
.hy-main .hl-card-item--k-event.has-tile::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: calc(-1.7rem + .5rem - 6px); inline-size: 14px; block-size: 14px; margin-block-start: -7px; border-radius: 50%;
    background: var(--color-accent, #a98b4f); box-shadow: 0 0 0 4px var(--bg-app, #f5f2e9), 0 0 0 5px color-mix(in srgb, var(--color-accent, #a98b4f) 40%, transparent); }
.hy-main .hl-card-item--k-event.has-tile .hl-card-item__image { display: none; }
.hy-main .hl-card-item__tile { display: grid; place-items: center; align-content: center; inline-size: 3.25rem; block-size: 3.25rem; border-radius: 13px; color: rgb(255 255 255); line-height: 1;
    background: linear-gradient(150deg, color-mix(in srgb, var(--color-danger, #a8443c) 62%, #2a0a12), color-mix(in srgb, var(--color-danger, #a8443c) 45%, #120406)); box-shadow: 0 8px 16px -10px rgb(0 0 0 / .4); }
.hy-main .hl-card-item__tile small { color: var(--color-accent, #a98b4f); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hy-main .hl-card-item__tile b { margin-block-start: .15rem; font-size: 1.32rem; font-weight: 800; }
.hy-main .hl-card-item--k-event.has-tile .hl-card-item__body { display: grid; gap: .3rem; padding: 0; min-inline-size: 0; }
.hy-main .hl-card-item__day { justify-self: start; margin: 0; padding: .1rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--color-accent, #a98b4f) 13%, transparent);
    color: color-mix(in srgb, var(--color-accent, #a98b4f) 80%, #000); font-size: .7rem; font-weight: 700; }
.hy-main .hl-card-item--k-event.has-tile .hl-card-item__title { margin: 0; font-size: .98rem; font-weight: 800; line-height: 1.4; }
.hy-main .hl-card-item--k-event.has-tile .hl-card-item__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hy-main .hl-card-item--k-event.has-tile .hl-card-item__meta { display: none; }
.hy-main .hl-card-item--k-event .hl-card-item__facts { gap: .3rem; margin: 0; padding: 0; border: 0; }
.hy-main .hl-card-item--k-event .hl-card-item__facts li { padding: .14rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--hy-text) 6%, transparent); color: var(--hy-muted); font-size: .72rem; font-weight: 600; }
.hy-main .hl-card-item--k-event .hl-card-item__facts svg { color: color-mix(in srgb, var(--color-accent, #a98b4f) 85%, #000); }
.hy-main .hl-card-item--k-event.is-past { opacity: .72; }
.hy-main .hl-card-item--k-event.is-past::before { background: color-mix(in srgb, var(--hy-muted) 60%, transparent); }
.hy-main .hl-card-item--k-event.is-cancelled .hl-card-item__title { text-decoration: line-through; text-decoration-color: var(--color-danger, #a8443c); }
.hy-main .hl-card-item--k-event.has-tile:hover { border-color: color-mix(in srgb, var(--color-accent, #a98b4f) 45%, transparent); transform: translateY(-2px); }
/* (2026-10-29, round 9) Photo albums in a section: each album a small stack of prints — two paper edges peeking out behind the picture
   that fan out on hover — with its title and number of photos on a dark fade over the picture. */
.hy-main .hl-card-item--cards.hl-card-item--k-album { position: relative; isolation: isolate; overflow: visible; padding: 0; border: 0; background: none; box-shadow: none; }
.hy-main .hl-card-item--cards.hl-card-item--k-album::before, .hy-main .hl-card-item--cards.hl-card-item--k-album::after { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; aspect-ratio: 4 / 3; border-radius: 16px;
    background: var(--bg-card); box-shadow: 0 1px 3px rgb(0 0 0 / .14), 0 0 0 1px color-mix(in srgb, var(--hy-line) 70%, transparent); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.hy-main .hl-card-item--cards.hl-card-item--k-album::before { transform: rotate(-3.5deg) translate(-3px, 3px); }
.hy-main .hl-card-item--cards.hl-card-item--k-album::after { transform: rotate(3deg) translate(4px, 2px); background: color-mix(in srgb, var(--color-accent, #a98b4f) 16%, var(--bg-card)); }
.hy-main .hl-card-item--cards.hl-card-item--k-album:hover::before { transform: rotate(-7deg) translate(-10px, 5px); }
.hy-main .hl-card-item--cards.hl-card-item--k-album:hover::after { transform: rotate(6deg) translate(10px, 3px); }
.hy-main .hl-card-item--cards.hl-card-item--k-album .hl-card-item__image { position: relative; aspect-ratio: 4 / 3; margin: 0; overflow: hidden; border-radius: 16px; box-shadow: 0 18px 30px -22px rgb(0 0 0 / .55); }
.hy-main .hl-card-item--cards.hl-card-item--k-album .hl-card-item__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgb(0 0 0 / .72)); pointer-events: none; }
.hy-main .hl-card-item--cards.hl-card-item--k-album .hl-card-item__image img { transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.hy-main .hl-card-item--cards.hl-card-item--k-album:hover .hl-card-item__image img { transform: scale(1.07); }
.hy-main .hl-card-item--cards.hl-card-item--k-album .hl-card-item__badge { inset-block-start: .6rem; inset-block-end: auto; inset-inline-start: auto; inset-inline-end: .6rem; z-index: 2; }
.hy-main .hl-card-item--cards.hl-card-item--k-album .hl-card-item__body { position: absolute; z-index: 2; inset-inline: 0; inset-block-start: 0; aspect-ratio: 4 / 3; display: flex; flex-direction: column; justify-content: flex-end;
    gap: .25rem; padding: .85rem 1rem; pointer-events: none; }
.hy-main .hl-card-item--cards.hl-card-item--k-album .hl-card-item__title { margin: 0; color: rgb(255 255 255); font-size: 1rem; font-weight: 800; text-shadow: 0 1px 8px rgb(0 0 0 / .4); }
.hy-main .hl-card-item--cards.hl-card-item--k-album .hl-card-item__title a { color: inherit; pointer-events: auto; }
.hy-main .hl-card-item--cards.hl-card-item--k-album .hl-card-item__title a::after { content: ""; position: absolute; inset: 0; }
.hy-main .hl-card-item--cards.hl-card-item--k-album :is(.hl-card-item__meta, .hl-card-item__excerpt) { margin: 0; color: rgb(255 255 255 / .78); font-size: .74rem; }
.hy-main .hl-card-item--cards.hl-card-item--k-album .hl-card-item__facts { order: -1; margin: 0; padding: 0; border: 0; }
.hy-main .hl-card-item--cards.hl-card-item--k-album .hl-card-item__facts li { padding: .15rem .55rem; border-radius: 999px; background: rgb(0 0 0 / .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: rgb(255 255 255); font-size: .7rem; }
.hy-main .hl-card-item--cards.hl-card-item--k-album .hl-card-item__facts svg { color: var(--color-accent, #a98b4f); }
@media (prefers-reduced-motion: reduce) { .hy-main .hl-card-item--k-album, .hy-main .hl-card-item--k-album *, .hy-main .hl-card-item--k-album::before, .hy-main .hl-card-item--k-album::after { transition: none !important; } }
/* (2026-10-29, round 9) The section tiles: palette tones only (deep green, matte gold, maroon, the dark green), a faint lozenge pattern,
   a large ghost number in the corner, the count as a glass pill and an arrow that slides in on hover. */
.hy-main .hl-collections--tiles .hl-collections__list { counter-reset: hl-tile; }
.hy-main .hl-collections--tiles .hl-collection { counter-increment: hl-tile; position: relative; isolation: isolate; overflow: hidden; min-block-size: 132px; border-radius: 20px;
    background: radial-gradient(90% 90% at 100% 0%, rgb(255 255 255 / .16), transparent 55%), linear-gradient(150deg, var(--tile), color-mix(in srgb, var(--tile) 52%, #000)); }
.hy-main .hl-collections--tiles .hl-collection:nth-child(4n + 2) { --tile: color-mix(in srgb, var(--color-accent, #a98b4f) 92%, #000); }
.hy-main .hl-collections--tiles .hl-collection:nth-child(4n + 3) { --tile: color-mix(in srgb, var(--color-danger, #a8443c) 62%, #2a0a12); }
.hy-main .hl-collections--tiles .hl-collection:nth-child(4n + 4) { --tile: color-mix(in srgb, var(--color-dark, #2b4732) 85%, #000); }
.hy-main .hl-collections--tiles .hl-collection::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .14; background-size: 30px 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='.8'%3E%3Cpath d='M20 2l18 18-18 18L2 20z'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%); mask-image: linear-gradient(200deg, #000, transparent 70%); }
.hy-main .hl-collections--tiles .hl-collection::after { content: counter(hl-tile, decimal-leading-zero); position: absolute; z-index: -1; inset-block-start: .3rem; inset-inline-end: .7rem; color: rgb(255 255 255 / .16);
    font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; transition: transform .45s cubic-bezier(.2, .8, .2, 1), color .3s ease; }
.hy-main .hl-collections--tiles .hl-collection:hover::after { color: rgb(255 255 255 / .3); transform: translateY(-3px) scale(1.06); }
.hy-main .hl-collections--tiles .hl-collection__body { gap: .4rem; padding: 1rem 1rem .9rem; }
.hy-main .hl-collections--tiles .hl-collection__name { color: rgb(255 255 255); font-size: 1.02rem; font-weight: 800; text-decoration: none; background: none; }
.hy-main .hl-collections--tiles .hl-collection__name::before { content: ""; position: absolute; inset-block-start: .85rem; inset-inline-start: .9rem; inline-size: 30px; block-size: 30px; border-radius: 50%;
    background: rgb(255 255 255 / .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 15px no-repeat;
    opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .35s cubic-bezier(.3, 1.4, .5, 1); }
[dir="rtl"] .hy-main .hl-collections--tiles .hl-collection__name::before { transform: translateX(6px) scaleX(-1); }
.hy-main .hl-collections--tiles .hl-collection:hover .hl-collection__name::before { opacity: 1; transform: none; }
[dir="rtl"] .hy-main .hl-collections--tiles .hl-collection:hover .hl-collection__name::before { transform: scaleX(-1); }
.hy-main .hl-collections--tiles .hl-collection__count { align-self: flex-start; padding: .1rem .55rem; border-radius: 999px; background: rgb(0 0 0 / .2); color: rgb(255 255 255 / .9); font-size: .7rem; font-weight: 700; }
/* News cards in a section: the picture rounded with a slow zoom, the title on two lines, the date as a small chip, a soft lift. */
.hy-main .hl-grid--head .hl-card-item--cards.hl-card-item--k-post { overflow: hidden; border: 1px solid color-mix(in srgb, var(--hy-line) 55%, transparent); }
.hy-main .hl-grid--head .hl-card-item--cards.hl-card-item--k-post .hl-card-item__image { margin: 8px 8px 0; overflow: hidden; border-radius: 12px; }
.hy-main .hl-grid--head .hl-card-item--cards.hl-card-item--k-post .hl-card-item__image img { transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.hy-main .hl-grid--head .hl-card-item--cards.hl-card-item--k-post:hover .hl-card-item__image img { transform: scale(1.06); }
.hy-main .hl-grid--head .hl-card-item--cards.hl-card-item--k-post .hl-card-item__body { gap: .35rem; padding: .75rem .9rem .9rem; }
.hy-main .hl-grid--head .hl-card-item--cards.hl-card-item--k-post .hl-card-item__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: 0; font-size: .96rem; font-weight: 800; line-height: 1.4; }
.hy-main .hl-grid--head .hl-card-item--cards.hl-card-item--k-post .hl-card-item__title a::after { content: ""; position: absolute; inset: 0; }
.hy-main .hl-grid--head .hl-card-item--cards.hl-card-item--k-post .hl-card-item__meta { justify-self: start; inline-size: fit-content; margin: 0; padding: .1rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--color-accent, #a98b4f) 12%, transparent);
    color: color-mix(in srgb, var(--color-accent, #a98b4f) 80%, #000); font-size: .7rem; font-weight: 700; }
.hy-main .hl-grid--head .hl-card-item--cards.hl-card-item--k-post .hl-card-item__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: 0; color: var(--hy-muted); font-size: .84rem; }
.hy-main .hl-grid--head .hl-card-item--cards.hl-card-item--k-post:not(.has-image)::before { content: ""; display: block; aspect-ratio: 16 / 9; margin: 8px 8px 0; border-radius: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a98b4f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/%3E%3Cpath d='M18 14h-8M15 18h-5M10 6h8v4h-8z'/%3E%3C/svg%3E") center / 3rem no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23a98b4f' stroke-opacity='.22' stroke-width='.8'%3E%3Cpath d='M20 2l18 18-18 18L2 20z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 28px 28px,
        radial-gradient(80% 90% at 30% 20%, color-mix(in srgb, var(--color-accent, #a98b4f) 16%, var(--bg-card)), color-mix(in srgb, var(--color-accent, #a98b4f) 8%, var(--bg-app))); }

/* ---- css/kit.css ---- */
/* =====================================================================
   Hydari theme — the light UI kit of the site (spec 4.22 "the kit is used
   on the front too"): chips, messages in four states and two styles,
   toasts, the dialog (a bottom sheet on phones), tooltips, popovers,
   tabs and accordions, the picture viewer, carousels and the 11 paging
   styles. Same look as the panel kit, drawn from the same tokens.
   ===================================================================== */

/* ---- chips ------------------------------------------------------------- */
.hy-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.hy-chip { display: inline-flex; align-items: center; gap: .3rem; max-inline-size: 100%; padding: .2rem .7rem; border: 1px solid var(--hy-line); border-radius: 999px;
    background: var(--bg-card); color: var(--hy-text); font-size: .82rem; font-weight: 500; line-height: 1.6; text-decoration: none; white-space: nowrap; }
.hy-chip span { overflow: hidden; text-overflow: ellipsis; }
a.hy-chip:hover, .hy-chip.is-current { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-text, var(--color-primary)); }
.hy-chip--primary { border-color: transparent; background: var(--color-primary-soft); color: var(--color-primary-text, var(--color-primary)); }
.hy-chip--accent { border-color: transparent; background: var(--color-accent-light, var(--bg-tag)); color: var(--hy-text); }
.hy-chip--success { border-color: transparent; background: var(--color-success-light); color: var(--color-success-text, var(--hy-text)); }
.hy-chip--neutral { background: var(--bg-tag, var(--bg-card)); color: var(--text-tag, var(--hy-text)); }
.hy-chip .hy-icon { inline-size: .95em; block-size: .95em; }
.hy-chip__count { display: inline-block; min-inline-size: 1.4em; padding: 0 .35em; border-radius: 999px; background: var(--bg-sunken, var(--bg-hover)); color: var(--hy-muted); font-size: .76rem; text-align: center; }

/* ---- messages (four states, two styles) -------------------------------------------- */
.hy-alert { --hy-a: var(--color-info); --hy-a-bg: var(--color-info-light); --hy-a-text: var(--color-info-text, var(--hy-text));
    display: flex; align-items: flex-start; gap: .85rem; margin: 0 0 1.25rem; padding: .95rem 1rem; border: 1px solid color-mix(in srgb, var(--hy-a) 35%, transparent);
    border-radius: var(--hy-radius); background: var(--hy-a-bg); color: var(--hy-a-text); }
.hy-alert--success { --hy-a: var(--color-success); --hy-a-bg: var(--color-success-light); --hy-a-text: var(--color-success-text, var(--hy-text)); }
.hy-alert--warning { --hy-a: var(--color-warning); --hy-a-bg: var(--color-warning-light); --hy-a-text: var(--color-warning-text, var(--hy-text)); }
.hy-alert--error { --hy-a: var(--color-danger); --hy-a-bg: var(--color-danger-light); --hy-a-text: var(--color-danger-text, var(--hy-text)); }
.hy-alert--side { border: 0; border-inline-start: 4px solid var(--hy-a); background: var(--bg-card); color: var(--hy-text); box-shadow: var(--shadow-sm, none); }
.hy-alert__icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 2rem; block-size: 2rem; flex: none; border-radius: 50%; background: var(--hy-a); color: var(--bg-card); }
.hy-alert__body { flex: 1 1 auto; min-inline-size: 0; }
.hy-alert__title { display: block; font-weight: 700; }
.hy-alert__text { margin: .15rem 0 0; }
.hy-alert__action { margin-block-start: .5rem; }
.hy-alert__close { flex: none; inline-size: 34px; block-size: 34px; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; }
.hy-alert__close:hover { background: color-mix(in srgb, var(--hy-a) 15%, transparent); }

/* ---- toasts ---------------------------------------------------------------- */
.hy-toasts { position: fixed; z-index: 1400; inset-block-end: calc(1rem + var(--hy-bottom-bar, 0px)); inset-inline-end: 1rem; display: grid; gap: .6rem; inline-size: min(92vw, 380px); pointer-events: none; }
.hy-toast { pointer-events: auto; margin: 0; box-shadow: var(--shadow-popover, 0 12px 32px -12px rgba(0, 0, 0, .35)); animation: hy-toast-in .25s var(--hy-ease); }
.hy-toast__count { margin-inline-start: .35rem; font-size: .8rem; opacity: .8; }
@keyframes hy-toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---- dialog (a bottom sheet on phones) ------------------------------------------- */
.hy-modal { inline-size: min(92vw, 560px); max-block-size: min(86vh, 760px); padding: 0; border: 0; border-radius: var(--radius-modal, 20px); background: var(--bg-card); color: var(--hy-text);
    box-shadow: var(--shadow-modal, 0 30px 80px -20px rgba(0, 0, 0, .45)); overflow: hidden; }
.hy-modal[open] { display: flex; flex-direction: column; }
.hy-modal--sm { inline-size: min(92vw, 400px); }
.hy-modal--lg { inline-size: min(94vw, 860px); }
.hy-modal::backdrop { background: var(--bg-overlay, rgba(0, 0, 0, .45)); backdrop-filter: blur(2px); }
.hy-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem .6rem; }
.hy-modal__title { margin: 0; font-size: 1.1rem; }
.hy-modal__close { inline-size: 38px; block-size: 38px; border: 0; border-radius: 12px; background: var(--bg-sunken, var(--bg-hover)); color: inherit; cursor: pointer; }
.hy-modal__body { flex: 1 1 auto; padding: .4rem 1.25rem 1.25rem; overflow-y: auto; }
.hy-modal__foot { display: flex; justify-content: flex-end; gap: .5rem; padding: .85rem 1.25rem; border-block-start: 1px solid var(--hy-line); }
@media (max-width: 767.98px) {
    .hy-modal { inline-size: 100vw; max-inline-size: 100vw; max-block-size: 88vh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
    .hy-modal[open] { animation: hy-sheet-in .25s var(--hy-ease); }
    .hy-modal__head::before { content: ""; position: absolute; inset-block-start: 6px; inset-inline-start: 50%; inline-size: 40px; block-size: 4px; margin-inline-start: -20px; border-radius: 4px; background: var(--border-strong, var(--hy-line)); }
}
@keyframes hy-sheet-in { from { transform: translateY(40%); opacity: .4; } }

/* ---- tooltip and popover -------------------------------------------------------- */
.hy-tip { position: fixed; z-index: 1500; max-inline-size: 260px; padding: .35rem .6rem; border-radius: 8px; background: var(--bg-tooltip, var(--color-dark)); color: var(--text-on-tooltip, var(--text-inverse));
    font-size: .8rem; line-height: 1.4; pointer-events: none; opacity: 0; transition: opacity .12s; }
.hy-tip.is-on { opacity: 1; }
.hy-pop-wrap { position: relative; display: inline-flex; }
.hy-pop { position: absolute; z-index: 60; inset-block-start: calc(100% + .4rem); inset-inline-start: 0; min-inline-size: max-content; padding: .6rem; border: 1px solid var(--hy-line); border-radius: var(--hy-radius-sm);
    background: var(--bg-card); box-shadow: var(--shadow-popover, 0 12px 32px -12px rgba(0, 0, 0, .35)); }
.hy-pop .hb-share { margin: 0; }

/* ---- tabs and accordion (site kit; blocks keep their own) ------------------------------------- */
.hy-tabs__list { display: flex; gap: .25rem; border-block-end: 1px solid var(--hy-line); overflow-x: auto; }
.hy-tabs__tab { padding: .55rem .9rem; border: 0; border-block-end: 2px solid transparent; background: none; color: var(--hy-muted); font: inherit; font-weight: 600; cursor: pointer; }
.hy-tabs__tab[aria-selected="true"] { color: var(--color-primary-text, var(--color-primary)); border-color: var(--color-primary); }
.hy-tabs__panel { padding-block: 1rem; }
.hy-accordion > details { border-block-end: 1px solid var(--hy-line); }
.hy-accordion summary { padding: .8rem 0; font-weight: 600; cursor: pointer; }

/* ---- picture viewer ------------------------------------------------------------- */
.hy-lightbox { inline-size: 100vw; max-inline-size: 100vw; block-size: 100vh; max-block-size: 100vh; margin: 0; padding: 0; border: 0;
    background: color-mix(in srgb, var(--color-dark) 94%, transparent); color: var(--color-on-dark, var(--text-inverse)); }
.hy-lightbox[open] { display: grid; place-items: center; }
.hy-lightbox img { max-inline-size: 92vw; max-block-size: 82vh; object-fit: contain; border-radius: 6px; }
.hy-lightbox__btn { position: absolute; inline-size: 46px; block-size: 46px; border: 0; border-radius: 50%; background: color-mix(in srgb, currentColor 16%, transparent); color: inherit; cursor: pointer; }
.hy-lightbox__btn--close { inset-block-start: 1rem; inset-inline-end: 1rem; }
.hy-lightbox__btn--prev { inset-inline-start: 1rem; }
.hy-lightbox__btn--next { inset-inline-end: 1rem; }
.hy-lightbox__count { position: absolute; inset-block-end: 1rem; font-size: .9rem; opacity: .85; }

/* ---- carousel ------------------------------------------------------------------- */
.hy-carousel, .hy-featured-list--slider, .hy-related--carousel { position: relative; }
.hy-carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--hy-cols-d, 3) - 1) * 1rem) / var(--hy-cols-d, 3)); gap: 1rem;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-block: .25rem; overscroll-behavior-x: contain; }
.hy-carousel__track::-webkit-scrollbar { display: none; }
.hy-carousel__track > * { scroll-snap-align: start; }
@media (max-width: 991.98px) { .hy-carousel__track { grid-auto-columns: calc((100% - 1rem) / var(--hy-cols-t, 2)); } }
@media (max-width: 767.98px) { .hy-carousel__track { grid-auto-columns: 85%; } }
.hy-carousel__btn { position: absolute; z-index: 2; inset-block-start: 40%; inline-size: 42px; block-size: 42px; border: 1px solid var(--hy-line); border-radius: 50%;
    background: var(--bg-card); color: var(--hy-text); box-shadow: var(--shadow-soft, none); cursor: pointer; }
.hy-carousel__btn--prev { inset-inline-start: -.75rem; }
.hy-carousel__btn--next { inset-inline-end: -.75rem; }
.hy-carousel__btn:disabled { opacity: 0; pointer-events: none; }
.hy-nojs .hy-carousel__btn { display: none; }

/* ---- paging: 11 presets (Demo "pagination designs") ------------------------------------------- */
.hy-paging { display: grid; justify-items: center; gap: 1rem; margin-block-start: 2rem; }
.hy-js .hy-paging--button .hy-pg, .hy-js .hy-paging--infinite .hy-pg { display: none; }
.hy-js .hy-paging--infinite .hy-more-btn { visibility: hidden; }
.hy-more-btn.is-loading { pointer-events: none; opacity: .7; }
.hy-pg { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; font-variant-numeric: tabular-nums; }
.hy-pg__btn, .hy-pg__num { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-inline-size: 38px; block-size: 38px; padding-inline: 8px;
    border: 1px solid transparent; border-radius: var(--radius-md, 10px); background: transparent; color: var(--hy-muted); font-weight: 600; font-size: .92rem; text-decoration: none;
    transition: background-color var(--hy-dur) var(--hy-ease), color var(--hy-dur) var(--hy-ease), border-color var(--hy-dur) var(--hy-ease); }
a.hy-pg__btn:hover, a.hy-pg__num:hover { background: var(--bg-hover); color: var(--hy-text); }
.hy-pg__btn.is-disabled { opacity: .45; }
.hy-pg__num.is-current { background: var(--color-primary); color: var(--color-on-primary); }
.hy-pg__gap { color: var(--text-muted); padding-inline: 2px; }
.hy-pg__of { color: var(--text-muted); font-size: .88rem; }
.hy-pg__jump { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: 8px; font-size: .88rem; color: var(--hy-muted); }
.hy-pg__jump label { font-weight: 600; white-space: nowrap; }
.hy-pg__jump input[type="number"] { inline-size: 80px; }
.hy-pg .hy-icon { inline-size: 16px; block-size: 16px; }
.hy-pg--classic .hy-pg__num { border-color: var(--border-strong); background: var(--bg-card); }
.hy-pg--classic .hy-pg__num.is-current { border-color: var(--color-primary); background: var(--color-primary); }
.hy-pg--classic .hy-pg__btn { background: var(--bg-sunken); }
.hy-pg--classic a.hy-pg__next, .hy-pg--classic a.hy-pg__last { background: var(--color-primary); color: var(--color-on-primary); }
.hy-pg--jump .hy-pg__num { border-color: var(--border-strong); background: var(--bg-card); }
.hy-pg--jump .hy-pg__num.is-current { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-primary); }
.hy-pg--jump a.hy-pg__next { background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-colored); }
.hy-pg--jump .hy-pg__btn { background: var(--bg-sunken); }
.hy-pg--circle .hy-pg__track, .hy-pg--circle_go .hy-pg__track { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg-sunken); }
.hy-pg--circle .hy-pg__num, .hy-pg--circle_go .hy-pg__num { border-radius: 50%; min-inline-size: 34px; block-size: 34px; padding: 0; }
.hy-pg--circle .hy-pg__btn { border-radius: 50%; inline-size: 40px; block-size: 40px; background: var(--bg-sunken); }
.hy-pg--circle a.hy-pg__next { background: var(--color-primary); color: var(--color-on-primary); }
.hy-pg--underline .hy-pg__track { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: var(--radius-lg, 12px); background: var(--bg-sunken); }
.hy-pg--underline .hy-pg__num.is-current { background: none; color: var(--hy-text); box-shadow: inset 0 -2px 0 var(--color-primary); border-radius: 0; }
.hy-pg--underline .hy-pg__btn { background: var(--bg-card); box-shadow: var(--shadow-sm); }
.hy-pg--underline a.hy-pg__next { background: var(--color-primary); color: var(--color-on-primary); }
.hy-pg--prevnext .hy-pg__text { padding-inline: 14px; }
.hy-pg--prevnext .hy-pg__num.is-current { background: var(--color-primary-soft); color: var(--color-primary-text); border-color: var(--color-primary); }
.hy-pg--prevnext a.hy-pg__next { background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-colored); }
.hy-pg--prevnext .hy-pg__prev.is-disabled { background: var(--bg-sunken); }
.hy-pg--diamond .hy-pg__num.is-current { transform: rotate(45deg); border-radius: 8px; min-inline-size: 32px; block-size: 32px; margin-inline: 6px; }
.hy-pg--diamond .hy-pg__num.is-current > span { transform: rotate(-45deg); }
.hy-pg--diamond .hy-pg__prev { border-color: var(--border-strong); margin-inline-start: 10px; }
.hy-pg--diamond a.hy-pg__next { background: var(--color-primary); color: var(--color-on-primary); }
.hy-pg--bordered .hy-pg__num, .hy-pg--bordered .hy-pg__btn { border-color: var(--border-base); background: var(--bg-card); }
.hy-pg--bordered .hy-pg__num.is-current { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.hy-pg--counter .hy-pg__num { border-color: var(--border-strong); background: var(--bg-card); }
.hy-pg--counter .hy-pg__num.is-current { background: var(--color-dark); border-color: var(--color-dark); color: var(--text-inverse); }
.hy-pg--counter .hy-pg__btn { background: var(--bg-sunken); }
.hy-pg--combined .hy-pg__text { background: var(--bg-sunken); padding-inline: 14px; }
.hy-pg--combined .hy-pg__num { border-color: var(--border-strong); background: var(--bg-card); }
.hy-pg--combined .hy-pg__num.is-current { background: var(--color-dark); border-color: var(--color-dark); color: var(--text-inverse); }
.hy-pg--goto .hy-pg__num.is-current { background: none; color: var(--hy-text); border-color: var(--border-strong); }
.hy-pg--goto .hy-pg__btn { background: var(--bg-sunken); }
.hy-pg--circle_go .hy-pg__num.is-current { background: transparent; color: var(--hy-text); border-color: var(--hy-muted); }
.hy-pg--circle_go .hy-pg__btn { inline-size: 38px; block-size: 38px; border-radius: 50%; background: var(--color-dark); color: var(--text-inverse); }
.hy-pg--circle_go .hy-pg__btn.is-disabled { background: var(--bg-sunken); color: var(--text-muted); }
.hy-pg__go { border-radius: 50% !important; inline-size: 40px; padding: 0 !important; }
@media (max-width: 575.98px) {
    .hy-pg__num:not(.is-current), .hy-pg__gap { display: none; }
    .hy-pg__jump { margin-inline-start: 0; }
}

/* ---- skeleton and spinner ------------------------------------------------------------- */
.hy-skeleton { border-radius: var(--hy-radius-sm); background: linear-gradient(90deg, var(--bg-sunken) 25%, var(--bg-hover) 50%, var(--bg-sunken) 75%); background-size: 300% 100%; animation: hy-sk 1.4s infinite; }
@keyframes hy-sk { to { background-position: -150% 0; } }
.hy-spinner { inline-size: 22px; block-size: 22px; border: 3px solid var(--color-primary-soft); border-block-start-color: var(--color-primary); border-radius: 50%; animation: hy-spin .8s linear infinite; }
@keyframes hy-spin { to { transform: rotate(1turn); } }

/* ---- glide (kit.js): one soft pill slides with a little spring under the item of a group the pointer or the keyboard is on ---------
   The group says the colour through --glide-bg; the items' own hover background steps aside (the current one keeps its own). */
.has-glide { position: relative; isolation: isolate; }
.hy-glide { position: absolute; z-index: 0; inline-size: 0; block-size: 0; border-radius: var(--glide-r, 999px); background: var(--glide-bg, var(--bg-card)); box-shadow: var(--glide-ring, 0 2px 10px -4px rgba(0, 0, 0, .18));
    opacity: 0; pointer-events: none; list-style: none;
    transition: left .38s cubic-bezier(.3, 1.25, .5, 1), top .38s cubic-bezier(.3, 1.25, .5, 1), width .38s cubic-bezier(.3, 1.25, .5, 1), height .38s cubic-bezier(.3, 1.25, .5, 1), opacity .2s var(--hy-ease); }
.hy-glide.is-on { opacity: 1; }
.has-glide [data-glide-item] { position: relative; z-index: 1; }
.has-glide [data-glide-item]:not(.is-current):not([aria-current]):not([aria-pressed="true"]):not([aria-selected="true"]):hover { background-color: transparent; box-shadow: none; transform: none; }
.hy-tools--top.has-glide, .hy-view-switch.has-glide { --glide-r: 50%; }
.hy-sp__sorts.has-glide, .hy-blog-nav ul.has-glide { --glide-bg: var(--bg-sunken, var(--bg-app)); --glide-ring: none; }
.hy-crumbs ol.has-glide { --glide-bg: var(--bg-raised, var(--bg-card)); --glide-r: 8px; }
.hy-crumbs ol.has-glide a { padding: .25rem .6rem; border-radius: 10px; }
.hy-tabs__list.has-glide { --glide-bg: var(--color-primary-soft); --glide-ring: none; --glide-r: 10px; }
.hy-glide--soft { --glide-bg: color-mix(in srgb, currentColor 9%, transparent); --glide-ring: none; --glide-r: 8px; }
.has-glide > .hy-glide--soft ~ li > a { display: inline-block; padding: .1rem .45rem; margin-inline: -.45rem; }
@media (prefers-reduced-motion: reduce) { .hy-glide { transition: opacity .2s; } }

/* (2026-10-29) The site's own tick-box captcha: one raised row — a square box that turns into a turning ring while the browser works and
   into a green tick when done, the words, and a quiet "no tracking" mark at the end. */
.hy-check { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; inline-size: min(100%, 22rem); padding: .75rem .9rem; border: 1px solid color-mix(in srgb, var(--hy-line) 85%, transparent); border-radius: 14px;
    background: var(--bg-raised, var(--bg-card)); box-shadow: 0 1px 2px color-mix(in srgb, var(--hy-text) 6%, transparent); }
.hy-check__box { position: relative; display: inline-flex; align-items: center; gap: .7rem; margin: 0; font-size: .92rem; font-weight: 600; cursor: pointer; user-select: none; }
.hy-check__tick { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.hy-check__mark { position: relative; display: grid; place-items: center; flex: none; inline-size: 26px; block-size: 26px; border: 2px solid color-mix(in srgb, var(--hy-text) 35%, transparent); border-radius: 7px;
    background: var(--bg-card); transition: border-color .2s ease, background-color .2s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.hy-check__box:hover .hy-check__mark { border-color: var(--color-primary); }
.hy-check__tick:focus-visible + .hy-check__mark { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hy-check.is-working .hy-check__tick:checked + .hy-check__mark { border-color: color-mix(in srgb, var(--color-primary) 25%, transparent); border-block-start-color: var(--color-primary); border-radius: 50%; animation: hy-check-spin .7s linear infinite; }
.hy-check.is-done .hy-check__mark { border-color: var(--color-success, #2f7d4f); background: var(--color-success, #2f7d4f); transform: scale(1.05); }
.hy-check.is-done .hy-check__mark::after { content: ""; inline-size: 7px; block-size: 13px; margin-block-start: -3px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); animation: hy-check-pop .3s ease both; }
.hy-check.is-failed .hy-check__mark { border-color: var(--color-danger, #b3261e); }
.hy-check__state { flex: 1 1 auto; min-inline-size: 0; color: var(--hy-muted); font-size: .78rem; }
.hy-check.is-done .hy-check__state { color: var(--color-success, #2f7d4f); font-weight: 700; }
.hy-check.is-failed .hy-check__state { color: var(--color-danger, #b3261e); }
.hy-check__brand { margin-inline-start: auto; padding: .15rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--color-primary) 9%, transparent); color: var(--color-primary-text, var(--color-primary)); font-size: .66rem; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.hy-check__noscript { inline-size: 100%; color: var(--color-danger, #b3261e); font-size: .8rem; }
@keyframes hy-check-spin { to { transform: rotate(360deg); } }
@keyframes hy-check-pop { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: reduce) { .hy-check.is-working .hy-check__tick:checked + .hy-check__mark { animation-duration: 2s; } }

/* ---- css/cards.css ---- */
/* =====================================================================
   Hydari theme — content cards and the list views (spec 4.24 "card
   anatomy" and "type of view"; Demo "list of posts": a soft card, the
   picture inset with a margin or full width, title, summary, statistics
   and a "read more" button). Columns per screen come from the profile:
   --hy-cols-d (≥ 1200), -l (992–1199), -t (768–991), -m (< 768).
   ===================================================================== */

/* ---- the card ---------------------------------------------------------- */
.hy-card { --hy-pad: 1rem; position: relative; display: flex; flex-direction: column; min-inline-size: 0; overflow: hidden; border: 1px solid var(--hy-line);
    border-radius: var(--hy-radius); background: var(--bg-card); box-shadow: var(--shadow-sm, none);
    transition: transform .25s var(--hy-ease), box-shadow .25s var(--hy-ease), border-color .25s var(--hy-ease); }
.hy-card--inset .hy-card__media { margin: .55rem .55rem 0; border-radius: calc(var(--hy-radius) - 6px); }
.hy-card__media { position: relative; display: block; overflow: hidden; text-decoration: none; aspect-ratio: var(--hy-ratio, auto); background: var(--bg-sunken, var(--bg-hover)); }
.hy-card--natural .hy-card__media { aspect-ratio: auto; }
.hy-card__media picture, .hy-card__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .45s var(--hy-ease), filter .3s; }
.hy-card--natural .hy-card__media img { block-size: auto; }
.hy-card__ph { display: grid; place-items: center; inline-size: 100%; block-size: 100%; min-block-size: 120px; background: linear-gradient(135deg, var(--hy-ph), color-mix(in srgb, var(--hy-ph) 70%, var(--bg-card))); }
.hy-card__ph span { font-family: var(--font-heading, inherit); font-size: 2.6rem; font-weight: 800; color: color-mix(in srgb, var(--hy-ph) 40%, #000); opacity: .55; }
.hy-card__badges { position: absolute; inset-block-start: .6rem; inset-inline-start: .6rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.hy-card__badges .hy-chip { box-shadow: var(--shadow-sm, none); }
.hy-card__badges--inline { position: static; margin-block-end: .2rem; }
.hy-card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: .45rem; padding: var(--hy-pad); }
.hy-card__eyebrow { display: flex; }
.hy-card__eyebrow .hy-chip, .hy-card__tags, .hy-card__meta a, .hy-card__more { position: relative; z-index: 2; }
.hy-card__title { margin: 0; font-size: 1.12rem; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--hy-lines, 2); line-clamp: var(--hy-lines, 2); overflow: hidden; }
.hy-card__link { color: var(--text-heading, var(--hy-text)); text-decoration: none; }
.hy-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.hy-card__link:focus-visible { outline: none; }
.hy-card:has(.hy-card__link:focus-visible) { outline: 3px solid var(--color-primary-light, var(--color-primary)); outline-offset: 2px; }
.hy-card__excerpt { margin: 0; color: var(--hy-muted); font-size: .94rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--hy-lines, 2); line-clamp: var(--hy-lines, 2); overflow: hidden; }
.hy-card__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.hy-card__tags .hy-chip { font-size: .76rem; padding-block: .05rem; }
.hy-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; margin: 0; font-size: .84rem; color: var(--hy-muted); }
.hy-card__author { display: inline-flex; align-items: center; gap: .4rem; }
.hy-card__author a { color: inherit; text-decoration: none; }
.hy-card__author a:hover { color: var(--color-primary); }
.hy-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-block-start: auto; padding-block-start: .4rem; }
.hy-card__stats { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: 0; padding: 0; list-style: none; font-size: .82rem; color: var(--hy-muted); }
.hy-card__stats li { display: inline-flex; align-items: center; gap: .3rem; }
.hy-card__more { margin-inline-start: auto; }
.hy-card__more.hy-btn--solid, .hy-card__more.hy-btn--outline { border-radius: 999px; }

/* hover effects */
@media (hover: hover) {
    .hy-card--hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover, var(--shadow-soft)); border-color: var(--border-base); }
    .hy-card--hover-zoom:hover .hy-card__media img { transform: scale(1.05); }
    .hy-card--hover-shadow:hover { box-shadow: var(--shadow-hover, var(--shadow-soft)); }
    .hy-card--hover-tint:hover { background: var(--color-primary-soft); }
}

/* ---- the grid of cards ----------------------------------------------------------- */
.hy-list { --hy-gap: 1.25rem; display: grid; gap: var(--hy-gap); grid-template-columns: repeat(var(--hy-cols-d, 3), minmax(0, 1fr)); }
.hy-gap--tight { --hy-gap: .75rem; }
.hy-gap--loose { --hy-gap: 2rem; }
@media (max-width: 1199.98px) { .hy-list { grid-template-columns: repeat(var(--hy-cols-l, 3), minmax(0, 1fr)); } }
@media (max-width: 991.98px) { .hy-list { grid-template-columns: repeat(var(--hy-cols-t, 2), minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .hy-list { grid-template-columns: repeat(var(--hy-cols-m, 1), minmax(0, 1fr)); } }
/* A content column made narrow by sidebars (not by the screen) gets as many columns as fit, never cards squeezed below ~13rem. */
.hy-cols__main { container: hy-main / inline-size; }
@media (min-width: 768px) {
    @container hy-main (max-width: 760px) {
        .hy-cols__main .hy-list:not(.hy-list--list):not(.hy-list--horizontal):not(.hy-list--compact):not(.hy-list--masonry) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
        .hy-main .hy-cols__main .hy-card.hy-card--big { grid-template-columns: minmax(0, 1fr); }
        .hy-main .hy-cols__main .hy-card--big .hy-card__media { min-block-size: 0; aspect-ratio: 16 / 9; }
    }
}

/* list: one column, picture beside the text */
.hy-list--list, .hy-list--horizontal, .hy-list--compact { grid-template-columns: minmax(0, 1fr) !important; }
.hy-card--list, .hy-card--horizontal { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); }
.hy-card--list.hy-card--nomedia, .hy-card--horizontal.hy-card--nomedia { grid-template-columns: minmax(0, 1fr); }
/* Beside the text the picture fills its column (a wide ratio at the card's full height would grow wider than the column, P32). */
.hy-card--list .hy-card__media, .hy-card--horizontal .hy-card__media { block-size: 100%; aspect-ratio: auto; min-block-size: 8rem; }
.hy-card--list.hy-card--inset .hy-card__media, .hy-card--horizontal.hy-card--inset .hy-card__media { margin: .55rem; margin-inline-end: 0; }
.hy-card--horizontal { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); }
@media (max-width: 575.98px) {
    .hy-card--list { grid-template-columns: minmax(0, 1fr); }
    .hy-card--list .hy-card__media { block-size: auto; aspect-ratio: var(--hy-ratio, 16 / 9); min-block-size: 0; }
    .hy-card--list.hy-card--inset .hy-card__media { margin: .55rem .55rem 0; }
    .hy-card--horizontal { grid-template-columns: 112px minmax(0, 1fr); }
    .hy-card--horizontal .hy-card__excerpt, .hy-card--horizontal .hy-card__foot { display: none; }
}
/* the visitor's choice between list and grid (set before the first paint) */
html[data-hy-view="list"] .hy-list[data-hy-switchable] { grid-template-columns: minmax(0, 1fr) !important; }
html[data-hy-view="list"] .hy-list[data-hy-switchable] > .hy-card { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); }
html[data-hy-view="grid"] .hy-list--list[data-hy-switchable] { grid-template-columns: repeat(var(--hy-cols-d, 3), minmax(0, 1fr)) !important; }
html[data-hy-view="grid"] .hy-list--list[data-hy-switchable] > .hy-card { display: flex; }
@media (max-width: 767.98px) {
    html[data-hy-view] .hy-list[data-hy-switchable] { grid-template-columns: repeat(var(--hy-cols-m, 1), minmax(0, 1fr)) !important; }
    html[data-hy-view] .hy-list[data-hy-switchable] > .hy-card { display: flex; }
}

/* compact: titles and dates only */
.hy-list--compact { --hy-gap: 0; border: 1px solid var(--hy-line); border-radius: var(--hy-radius); background: var(--bg-card); overflow: hidden; }
.hy-card--compact { border: 0; border-block-end: 1px solid var(--hy-line); border-radius: 0; box-shadow: none; transform: none !important; }
.hy-card--compact:last-child { border-block-end: 0; }
.hy-card--compact .hy-card__body { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; padding: .75rem 1rem; }
.hy-card--compact .hy-card__title { font-size: 1rem; -webkit-line-clamp: 1; line-clamp: 1; flex: 1 1 18rem; }

/* masonry */
.hy-list--masonry { display: block; columns: var(--hy-cols-d, 3) 240px; column-gap: var(--hy-gap); }
.hy-list--masonry > .hy-card { break-inside: avoid; margin-block-end: var(--hy-gap); }
.hy-card--masonry .hy-card__media { aspect-ratio: auto; }
.hy-card--masonry .hy-card__media img { block-size: auto; }
@media (max-width: 991.98px) { .hy-list--masonry { columns: var(--hy-cols-t, 2) 200px; } }
@media (max-width: 767.98px) { .hy-list--masonry { columns: var(--hy-cols-m, 1); } }

/* timeline */
.hy-timeline { position: relative; display: grid; gap: 1.25rem; margin: 0; padding: 0 0 0 0; padding-inline-start: 1.6rem; list-style: none; }
.hy-timeline::before { content: ""; position: absolute; inset-block: .4rem; inset-inline-start: .45rem; inline-size: 2px; background: var(--hy-line); }
.hy-timeline__item { position: relative; }
.hy-timeline__item::before { content: ""; position: absolute; inset-block-start: .35rem; inset-inline-start: -1.6rem; inline-size: 14px; block-size: 14px; margin-inline-start: .05rem;
    border: 3px solid var(--color-primary); border-radius: 50%; background: var(--bg-card); }
.hy-timeline__date { display: block; margin-block-end: .4rem; font-size: .85rem; font-weight: 600; color: var(--color-primary-text, var(--color-primary)); }
.hy-card--timeline { display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr); }
.hy-card--timeline.hy-card--nomedia { grid-template-columns: minmax(0, 1fr); }
.hy-card--timeline .hy-card__meta time { display: none; }
@media (max-width: 575.98px) { .hy-card--timeline { grid-template-columns: minmax(0, 1fr); } }

/* table */
.hy-table-wrap { overflow-x: auto; border: 1px solid var(--hy-line); border-radius: var(--hy-radius); background: var(--bg-card); }
.hy-table { inline-size: 100%; border-collapse: collapse; font-size: .93rem; }
.hy-table th, .hy-table td { padding: .7rem .9rem; border-block-end: 1px solid var(--hy-line); text-align: start; vertical-align: top; }
.hy-table thead th { background: var(--bg-sunken, var(--bg-hover)); font-size: .82rem; color: var(--hy-muted); white-space: nowrap; }
.hy-table tbody tr:last-child > * { border-block-end: 0; }
.hy-table tbody th { font-weight: 600; }
.hy-table tbody th a { color: var(--hy-text); text-decoration: none; }
.hy-table tbody th a:hover { color: var(--color-primary); text-decoration: none; }
.hy-table td a { color: inherit; }
@media (max-width: 575.98px) { .hy-table__opt { display: none; } }

/* big card (featured) */
.hy-card--big { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.hy-card--big .hy-card__media { aspect-ratio: auto; min-block-size: 280px; }
.hy-card--big .hy-card__title { font-size: clamp(1.25rem, 2.4vw, 1.7rem); }
.hy-card--big .hy-card__body { padding: 1.5rem; justify-content: center; }
@media (max-width: 767.98px) { .hy-card--big { grid-template-columns: minmax(0, 1fr); } .hy-card--big .hy-card__media { min-block-size: 0; aspect-ratio: 16 / 9; } }

/* featured items above a list */
.hy-featured-list { margin-block-end: 1.75rem; }
.hy-featured-list--three { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 1.25rem; }
.hy-featured-list--three > .hy-card--big { grid-row: span 2; grid-template-columns: minmax(0, 1fr); }
.hy-featured-list--three > .hy-card--big:only-child { grid-column: 1 / -1; grid-row: auto; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.hy-featured-list--three > .hy-card--big .hy-card__media { min-block-size: 0; aspect-ratio: 16 / 9; }
@media (max-width: 991.98px) { .hy-featured-list--three { grid-template-columns: minmax(0, 1fr); } .hy-featured-list--three > .hy-card--big { grid-row: auto; } }
.hy-featured-list__track { grid-auto-columns: 100%; }

/* list tools: filters and the view switch */
.hy-list-tools { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-block-end: 1.25rem; }
.hy-view-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--hy-line); border-radius: 12px; background: var(--bg-card); margin-inline-start: auto; }
.hy-view-switch__btn { inline-size: 38px; block-size: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--hy-muted); cursor: pointer; }
.hy-view-switch__btn[aria-pressed="true"] { background: var(--color-primary-soft); color: var(--color-primary-text, var(--color-primary)); }
.hy-nojs .hy-view-switch { display: none; }
.hy-filters { display: grid; gap: .75rem; flex: 1 1 auto; min-inline-size: 0; }
.hy-filters__children ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.hy-filters__more > summary { list-style: none; cursor: pointer; }
.hy-filters__more > summary::-webkit-details-marker { display: none; }
.hy-filters__form { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); align-items: end; gap: .75rem; margin-block-start: .75rem; padding: 1rem;
    border: 1px solid var(--hy-line); border-radius: var(--hy-radius); background: var(--bg-card); }
.hy-filters__actions { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ---- css/list.css ---- */
/* =====================================================================
   Hydari theme — the tag index (alphabetical with a letters bar, or a
   cloud), the date archive and the system pages (404 / 403).
   ===================================================================== */

.hy-tags-search, .hy-error__search { display: flex; gap: .5rem; max-inline-size: 520px; margin-block-end: 1.5rem; }
.hy-letters { position: sticky; inset-block-start: calc(var(--hy-header-sticky, 0px) + .5rem); z-index: 5; margin-block-end: 1.5rem; padding: .4rem; border: 1px solid var(--hy-line);
    border-radius: 14px; background: color-mix(in srgb, var(--bg-card) 92%, transparent); backdrop-filter: blur(6px); }
.hy-letters ul { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hy-letters a { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 34px; block-size: 34px; padding-inline: 6px; border-radius: 9px; color: var(--hy-text); font-weight: 700; text-decoration: none; }
.hy-letters a:hover, .hy-letters a:focus-visible { background: var(--color-primary-soft); color: var(--color-primary-text, var(--color-primary)); }
.hy-tag-index { display: grid; gap: 1.75rem; }
.hy-tag-index__group { scroll-margin-block-start: 6rem; }
.hy-tag-index__letter { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 2.4rem; block-size: 2.4rem; margin: 0 0 .75rem; padding-inline: .5rem;
    border-radius: 12px; background: var(--color-primary); color: var(--color-on-primary); font-size: 1.1rem; }
.hy-tag-cloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.1rem; margin: 0; padding: 1.25rem; border: 1px solid var(--hy-line); border-radius: var(--hy-radius); background: var(--bg-card); list-style: none; }
.hy-tag-cloud a { font-size: calc(1rem * var(--hy-tag-size, 1)); font-weight: 600; color: var(--hy-text); text-decoration: none; line-height: 1.3; }
.hy-tag-cloud a:hover { color: var(--color-primary); text-decoration: none; }
.hy-tag-cloud .hy-chip__count { margin-inline-start: .3rem; font-size: .7rem; vertical-align: super; }
[data-hy-tag-list] [hidden] { display: none !important; }

.hy-archive { display: grid; gap: 1.5rem; }
.hy-archive__title { display: flex; align-items: center; gap: .6rem; margin: 0 0 .75rem; font-size: 1.25rem; }
.hy-archive__title a { color: inherit; text-decoration: none; }
.hy-archive__title a:hover { color: var(--color-primary); }

/* (2026-10-29) The tag index, finer: a slim search pill, the letters in a glass bar, every letter a card (three columns, masonry)
   with its letter in a maroon medallion and its tags as small chips with a coloured dot and their count. */
.hy-tags-search { align-items: center; gap: 2px; max-inline-size: 30rem; padding: 4px; border: 1px solid color-mix(in srgb, var(--hy-line) 70%, transparent); border-radius: 999px; background: var(--bg-card); }
.hy-tags-search:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-soft); }
.hy-tags-search .hy-input { flex: 1; min-inline-size: 0; border: 0; background: transparent; box-shadow: none; padding-inline: 1rem; }
.hy-tags-search .hy-input:focus { outline: none; box-shadow: none; }
.hy-tags-search .hy-btn { min-block-size: 40px; inline-size: 44px; padding: 0; border-radius: 50%; }
.hy-letters { border-color: color-mix(in srgb, var(--hy-line) 70%, transparent); border-radius: 999px; padding: 4px 6px; }
.hy-letters a { border-radius: 999px; font-size: .86rem; }
.hy-tag-index { display: block; columns: 3 16rem; column-gap: 1rem; }
.hy-tag-index__group { break-inside: avoid; margin-block-end: 1rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--hy-line) 70%, transparent); border-radius: 20px; background: var(--bg-card);
    box-shadow: var(--shadow-sm, none); transition: box-shadow .3s var(--hy-ease); }
.hy-tag-index__group:target { box-shadow: 0 0 0 2px var(--color-accent, var(--color-primary)); }
.hy-tag-index__letter { min-inline-size: 2.6rem; block-size: 2.6rem; margin-block-end: .8rem; border-radius: 50%;
    background: color-mix(in srgb, var(--color-danger, #a8443c) 58%, #2a0a12); color: var(--color-accent, rgb(255 255 255)); font-size: 1.15rem; font-weight: 900;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent, #a98b4f) 20%, transparent); }
.hy-tag-index .hy-chips { gap: .35rem; }
.hy-tag-index .hy-chip { --tone: var(--color-primary); gap: .4rem; min-block-size: 32px; padding: .2rem .4rem .2rem .7rem; border: 0; border-radius: 999px; background: var(--bg-sunken, var(--bg-app)); color: var(--hy-text);
    font-size: .84rem; font-weight: 600; transition: background-color .2s var(--hy-ease), transform .2s var(--hy-ease); }
[dir="rtl"] .hy-tag-index .hy-chip { padding: .2rem .7rem .2rem .4rem; }
.hy-tag-index .hy-chip::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--tone); }
.hy-tag-index li:nth-child(4n + 2) .hy-chip { --tone: var(--color-accent, var(--color-primary)); }
.hy-tag-index li:nth-child(4n + 3) .hy-chip { --tone: var(--color-info, var(--color-primary)); }
.hy-tag-index li:nth-child(4n + 4) .hy-chip { --tone: var(--color-danger, var(--color-primary)); }
.hy-tag-index .hy-chip:hover { background: var(--color-primary-soft); transform: translateY(-1px); }
.hy-tag-index .hy-chip .hy-chip__count { min-inline-size: 22px; padding: 0 .4rem; border-radius: 999px; background: var(--bg-card); font-size: .7rem; text-align: center; }

/* The archive as a timeline: each year a gold medallion on a rail, its months as cards with a bar of how much was written. */
.hy-archive--timeline { position: relative; gap: 1.75rem; padding-inline-start: 2.6rem; }
.hy-archive--timeline::before { content: ""; position: absolute; inset-block: 1.4rem 0; inset-inline-start: 1.15rem; inline-size: 2px; background: linear-gradient(180deg, var(--color-accent, #a98b4f), transparent); }
.hy-archive--timeline .hy-archive__title { position: relative; gap: .8rem; margin-block-end: .9rem; }
.hy-archive__medal { position: relative; display: inline-grid; place-items: center; min-inline-size: 4.6rem; block-size: 2.6rem; margin-inline-start: -3.6rem; padding-inline: .8rem; border-radius: 999px;
    background: var(--color-accent, var(--color-primary)); color: var(--color-dark, var(--hy-text)); font-size: 1.15rem; font-weight: 900; box-shadow: 0 0 0 5px var(--bg-app); }
.hy-archive--timeline .hy-archive__title a.hy-archive__medal:hover { color: var(--color-dark, var(--hy-text)); filter: brightness(1.06); }
.hy-archive__total { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .65rem; border-radius: 999px; background: var(--bg-card); color: var(--hy-muted); font-size: .8rem; font-weight: 700; }
.hy-archive__total .hy-icon { inline-size: 14px; block-size: 14px; }
.hy-archive__months { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.hy-archive__months > li { animation: hy-arc-in .45s var(--hy-ease) both; animation-delay: calc(min(var(--i, 0), 12) * 40ms); }
@keyframes hy-arc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hy-archive__month { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .2rem .6rem; overflow: hidden; padding: .75rem .85rem 1rem; border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--hy-line) 70%, transparent); background: var(--bg-card); color: var(--hy-text); text-decoration: none; transition: transform .25s var(--hy-ease), border-color .25s var(--hy-ease); }
.hy-archive__month:hover { transform: translateY(-2px); border-color: var(--color-accent, var(--color-primary)); color: var(--hy-text); }
.hy-archive__name { font-size: .88rem; font-weight: 700; }
.hy-archive__count { font-size: 1.25rem; font-weight: 900; color: var(--color-primary-text, var(--color-primary)); font-variant-numeric: tabular-nums; }
.hy-archive__bar { position: absolute; inset-inline-start: 0; inset-block-end: 0; block-size: 4px; inline-size: calc(var(--share, 0) * 100%); background: linear-gradient(90deg, var(--color-accent, #a98b4f), var(--color-primary)); border-radius: 0 4px 4px 0; }
@media (prefers-reduced-motion: reduce) { .hy-archive__months > li { animation: none; } }

/* 404 / 403 */
.hy-error { max-inline-size: 680px; margin: 1rem auto 2rem; padding: 2rem clamp(1rem, 4vw, 2.5rem); border: 1px solid var(--hy-line); border-radius: var(--hy-radius); background: var(--bg-card); text-align: center; }
.hy-error__code { margin: 0; font-size: clamp(3rem, 10vw, 5rem); font-weight: 800; line-height: 1; color: var(--color-primary); letter-spacing: .04em; }
.hy-error__title { margin: .5rem 0; font-size: 1.6rem; }
.hy-error__text { margin: 0 0 1.25rem; color: var(--hy-muted); white-space: pre-line; }
.hy-error__search { margin-inline: auto; }

/* ---- css/item.css ---- */
/* =====================================================================
   Hydari theme — the page of a post (spec 4.21, 4.24 "the item page"):
   five templates (classic, cover, magazine, text only, picture beside the
   text), the head, the featured picture, the tools in four places, the
   contents, the reading progress bar, keywords, the author box, previous
   and next, related content and the three text sizes.

   A post (.hy-post) is a column of blocks: every part is a card of its
   own with a soft pill for its name and a quiet icon tile at the other
   end. The title and the text sit on the card colour; the parts after
   the text sit on a softer one, their buttons raised on it.
   ===================================================================== */

/* Line height follows the language's own (P09/P23: Urdu Nastaliq needs more); the profile's choice scales it. */
.hy-item { --hy-item-size: 1.0625rem; --hy-lh: var(--lang-line-height, 1.8); --hy-item-line: var(--hy-lh); min-inline-size: 0; }
.hy-fs--small { --hy-item-size: .97rem; }
.hy-fs--large { --hy-item-size: 1.18rem; }
.hy-fs--xlarge { --hy-item-size: 1.3rem; }
.hy-lh--compact { --hy-item-line: calc(var(--hy-lh) * .88); }
.hy-lh--relaxed { --hy-item-line: calc(var(--hy-lh) * 1.12); }
.hy-lh--loose { --hy-item-line: calc(var(--hy-lh) * 1.25); }
.hy-item__head { margin-block-end: 1.5rem; }
.hy-item__eyebrow { margin: 0 0 .5rem; }
.hy-item__title { margin: .55rem 0 .5rem; font-size: var(--font-size-h1, clamp(1.65rem, 4.2vw, 2.45rem)); line-height: 1.3; }
/* The lead: one quiet line, marked by a thin bar. */
.hy-item__lead { margin: 0; padding-inline-start: .8rem; border-inline-start: 3px solid var(--color-primary-soft, var(--hy-line)); font-size: 1rem; line-height: 1.6; color: var(--hy-muted); }
/* Author, date, reading time: small chips. */
.hy-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0; font-size: .76rem; color: var(--hy-muted); }
.hy-item__meta > span { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--hy-text) 6%, transparent); line-height: 1.5; }
.hy-item__meta > span .hy-icon { inline-size: 13px; block-size: 13px; opacity: .8; }
.hy-item__meta > .hy-item__author { padding-inline-start: .2rem; background: var(--color-primary-soft); color: var(--color-primary-text, var(--color-primary)); }
.hy-item__meta .hy-avatar { inline-size: 20px; block-size: 20px; font-size: .62rem; }
.hy-item__author a { font-weight: 600; color: inherit; text-decoration: none; }
.hy-item__author a:hover { color: var(--color-primary); }
/* (0,2,0): above the block base (.hb-flow, inline after this file) so the profile's size and the visitor's text size win */
.hy-item .hy-item__text { font-size: calc(var(--hy-item-size) * var(--lang-font-scale, 1)); line-height: var(--hy-item-line); }
.hy-item .hy-item__text > * { margin-block: 0 var(--hb-gap, 1.1em); }
.hy-item .hy-item__text > :last-child { margin-block-end: 0; }

/* featured picture */
.hy-featured { margin: 0 0 1.5rem; }
.hy-featured picture, .hy-featured img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--hy-radius); }
.hy-featured--ratio img { aspect-ratio: var(--hy-ratio); object-fit: cover; block-size: auto; }
.hy-featured figcaption { margin-block-start: .45rem; font-size: .85rem; color: var(--hy-muted); }
.hy-item__main--beside { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2rem; align-items: start; }
.hy-item__aside-fig { position: sticky; inset-block-start: calc(var(--hy-header-sticky, 0px) + 1rem); }
.hy-item__aside-fig .hy-featured { margin: 0; }
@media (max-width: 767.98px) { .hy-item__main--beside { grid-template-columns: minmax(0, 1fr); } .hy-item__aside-fig { position: static; } }

/* =====================================================================
   The blocks of a post
   ===================================================================== */
.hy-post, .hy-post ~ .hy-blk { --hy-blk-r: 22px; --hy-blk-pad: clamp(1rem, 2.6vw, 2rem); --hy-blk-gap: clamp(.75rem, 1.6vw, 1.1rem);
    --hy-blk-soft: color-mix(in srgb, var(--bg-card) 55%, var(--bg-app)); --hy-blk-raised: var(--bg-raised, var(--bg-card)); --hy-blk-ink: color-mix(in srgb, var(--color-accent, var(--color-primary)) 22%, #14110a); }
.hy-post { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hy-blk-gap); }
.hy-blk { position: relative; min-inline-size: 0; padding: var(--hy-blk-pad); border: 1px solid color-mix(in srgb, var(--hy-line) 70%, transparent); border-radius: var(--hy-blk-r);
    background: var(--bg-card); box-shadow: var(--shadow-sm, none); }
.hy-blk--tags, .hy-blk--actions, .hy-blk--related, .hy-blk--after, .hy-blk--adjacent, .hy-post .hy-author-box { background: var(--hy-blk-soft); box-shadow: none; }
.hy-post ~ .hy-blk { margin-block-start: var(--hy-blk-gap); }
/* The parts after the text are lighter than the text's card: slimmer, smaller and on the soft ground. */
.hy-post .hy-item__foot .hy-blk, .hy-post ~ .hy-blk { --hy-blk-r: 18px; --hy-blk-pad: clamp(.7rem, 1.6vw, 1rem); }
.hy-post .hy-item__foot, .hy-post ~ .hy-blk { font-size: .94rem; }

/* The head of a block: the name as a soft pill at the start, an icon tile (or the block's own buttons) at the end. */
.hy-blk__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-block-end: .85rem; }
.hy-blk__title { display: inline-flex; align-items: center; min-block-size: 38px; margin: 0; padding: .25rem .9rem; border-radius: 12px; background: var(--hy-blk-raised);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--hy-text) 6%, transparent); color: var(--color-accent, var(--color-primary)); font-size: .95rem; font-weight: 800; line-height: 1.3; }
.hy-blk__mark { display: inline-grid; place-items: center; flex: none; inline-size: 38px; block-size: 38px; border-radius: 12px; background: var(--hy-blk-raised);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--hy-text) 6%, transparent); color: color-mix(in srgb, var(--hy-muted) 65%, transparent); }
.hy-blk__mark .hy-icon { inline-size: 18px; block-size: 18px; }
.hy-blk__mark--sm { inline-size: 34px; block-size: 34px; border-radius: 11px; }
.hy-blk__mark--sm .hy-icon { inline-size: 16px; block-size: 16px; }
.hy-blk__nav { display: flex; gap: .4rem; }

/* The strip above the breadcrumb: small chips at the start, the tools as tiny icons at the end. */
.hy-post__strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding-inline: .2rem; }
.hy-post__strip > .hy-item__meta { flex: 1 1 18rem; }
.hy-post .hy-item__meta > .hy-item__eyebrow { margin: 0; padding: 0; background: none; }
.hy-post .hy-item__eyebrow .hy-chip { padding: .18rem .65rem; font-size: .76rem; font-weight: 600; }
.hy-post .hy-item__meta > span:not(.hy-item__eyebrow) { background: var(--hy-blk-soft); border: 1px solid color-mix(in srgb, var(--hy-line) 60%, transparent); }
.hy-post .hy-item__meta > .hy-item__author { background: var(--color-primary-soft); border-color: transparent; }
.hy-post__strip > .hy-tools--top { margin-inline-start: auto; }

.hy-post__crumbs .hy-crumbbar { margin: 0; }
.hy-post .hy-item__meta > .hy-item__date { background: var(--color-accent-light, var(--hy-blk-soft)); border-color: transparent; color: var(--hy-text); font-weight: 600; }

/* The text's card: the title opens it in a tinted head (or as a band over the picture), the text follows in the same card. */
.hy-blk--main { --hy-main-pad: clamp(1.15rem, 3.4vw, 2.75rem); padding: 0; overflow: hidden; }
.hy-blk--main > .hy-item__main { padding: var(--hy-main-pad); }
.hy-post__head { position: relative; isolation: isolate; overflow: hidden; margin: 0; padding: clamp(1.1rem, 3vw, 2.1rem) var(--hy-main-pad) clamp(1rem, 2.4vw, 1.5rem); border-block-end: 1px solid color-mix(in srgb, var(--color-accent, var(--color-primary)) 18%, var(--hy-line));
    --hy-head-glow: 100% 0%; --hy-head-fade: to left;
    background: radial-gradient(120% 160% at var(--hy-head-glow), color-mix(in srgb, var(--color-accent, var(--color-primary)) 15%, transparent), transparent 58%),
        linear-gradient(180deg, color-mix(in srgb, var(--color-accent, var(--color-primary)) 5%, var(--bg-card)), var(--bg-card)); }
[dir="rtl"] .hy-post__head { --hy-head-glow: 0% 0%; --hy-head-fade: to right; }
/* A quiet field of dots at the end of the head, fading towards the title. */
.hy-post__head::after { content: ""; position: absolute; z-index: -1; inset-block: 0; inset-inline-end: 0; inline-size: min(260px, 40%); pointer-events: none;
    background-image: radial-gradient(color-mix(in srgb, var(--color-accent, var(--color-primary)) 38%, transparent) 1.2px, transparent 1.4px); background-size: 14px 14px;
    -webkit-mask-image: linear-gradient(var(--hy-head-fade), #000, transparent); mask-image: linear-gradient(var(--hy-head-fade), #000, transparent); opacity: .55; }
.hy-post .hy-item__title { margin: 0; font-size: clamp(1.3rem, 1rem + 1.15vw, 1.85rem); font-weight: 800; line-height: 1.5; letter-spacing: -.01em; color: var(--text-heading, var(--hy-text)); text-wrap: balance; }
/* A short two-colour rule under the title. */
.hy-post__head .hy-item__title::after { content: ""; display: block; inline-size: 56px; block-size: 4px; margin-block-start: .7rem; border-radius: 99px;
    background: linear-gradient(90deg, var(--color-accent, var(--color-primary)), var(--color-primary)); }
[dir="rtl"] .hy-post__head .hy-item__title::after { background: linear-gradient(-90deg, var(--color-accent, var(--color-primary)), var(--color-primary)); }
.hy-post__head .hy-item__lead { max-inline-size: 75ch; margin-block-start: .75rem; padding: 0; border: 0; font-size: .98rem; line-height: 1.85; color: var(--hy-muted); }

/* The title over the picture: a coloured band near the picture's bottom edge, at the top of the text's card. */
.hy-post__hero { position: relative; margin: 0; }
.hy-post__hero .hy-featured { margin: 0; }
.hy-post__hero .hy-featured picture, .hy-post__hero .hy-featured img { border-radius: 0; }
.hy-post__hero .hy-featured:not(.hy-featured--ratio) img { aspect-ratio: 16 / 7; object-fit: cover; min-block-size: 260px; max-block-size: 620px; }
.hy-post__hero .hy-featured figcaption { position: absolute; z-index: 1; inset-block-start: 1rem; inset-inline-start: 1rem; max-inline-size: calc(100% - 2rem); margin: 0; padding: .25rem .75rem;
    border-radius: 999px; background: rgba(0, 0, 0, .45); backdrop-filter: blur(6px); color: rgb(255 255 255); font-size: .76rem; }
.hy-hero__band { position: absolute; z-index: 1; inset-inline: clamp(.75rem, 2.5vw, 2rem); inset-block-end: clamp(1rem, 2.6vw, 2rem); padding: 1rem clamp(1rem, 2vw, 1.6rem);
    border-radius: 18px; background: var(--color-accent, var(--color-primary)); box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .55); color: var(--hy-blk-ink); }
.hy-post .hy-hero__band .hy-item__title { font-size: clamp(1.2rem, .95rem + 1.25vw, 1.95rem); line-height: 1.5; color: inherit; }
.hy-post__hero--cover .hy-featured img, .hy-post__hero--cover .hy-featured:not(.hy-featured--ratio) img { aspect-ratio: auto; block-size: min(72vh, 640px); max-block-size: none; object-fit: cover; }
@media (max-width: 639.98px) {
    .hy-post__hero .hy-featured:not(.hy-featured--ratio) img { aspect-ratio: 4 / 3; min-block-size: 0; }
    .hy-post__hero--cover .hy-featured img { block-size: 52vh; }
    .hy-hero__band { position: relative; inset: auto; margin: -2.25rem .6rem 0; }
}

/* The picture "below" the title, inside the same card. */
.hy-post__fig { padding: var(--hy-main-pad) var(--hy-main-pad) 0; }
.hy-post__fig .hy-featured { margin: 0; }
.hy-post__fig .hy-featured img { border-radius: 16px; }
.hy-post__fig .hy-featured figcaption { margin: .55rem .3rem 0; }

/* The lead under a picture band opens the text. */
.hy-item__lead--top { margin: 0 0 1.6rem; padding: 0 0 1.4rem; border: 0; border-block-end: 2px solid var(--hy-line); font-size: 1.05rem; line-height: 1.9; color: var(--hy-muted); }

/* Templates. Classic and sticky: the blocks as they are. Magazine: a centred title and a drop cap. Text: one narrow column. */
.hy-item--classic:not(.hy-post), .hy-item--sticky:not(.hy-post) { padding: clamp(1rem, 3vw, 2.25rem); border: 1px solid var(--hy-line); border-radius: var(--hy-radius); background: var(--bg-card); box-shadow: var(--shadow-sm, none); }
.hy-item--magazine .hy-post__head, .hy-quote-page .hy-post__head { text-align: center; }
.hy-item--magazine .hy-post__head .hy-item__title::after, .hy-quote-page .hy-post__head .hy-item__title::after { margin-inline: auto; }
.hy-item--magazine .hy-item__title { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.9rem); }
.hy-item--magazine .hy-post__head .hy-item__lead { max-inline-size: 60ch; margin-inline: auto; padding: 0; }
.hy-item--magazine .hy-item__text > p:first-of-type::first-letter { float: inline-start; margin-inline-end: .35rem; font-size: 3.4em; line-height: .9; font-weight: 700; color: var(--color-accent, var(--color-primary)); }
.hy-item--text { max-inline-size: calc(var(--hb-measure, 70ch) + 6rem); margin-inline: auto; }
.hy-item--text .hy-featured { display: none; }
.hy-item--sticky .hy-item__main { display: grid; grid-template-columns: minmax(0, 1fr); }

/* =====================================================================
   Tools
   ===================================================================== */
.hy-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-block: 0 1.5rem; }
.hy-tools--top { flex-wrap: nowrap; gap: 2px; margin: 0; padding: 3px; border: 1px solid var(--hy-line); border-radius: 999px; background: var(--bg-sunken, var(--bg-app)); }
.hy-tools--top .hy-btn--tool { inline-size: 32px; min-block-size: 32px; block-size: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--hy-muted); }
.hy-tools--top .hy-btn--tool:hover, .hy-tools--top .hy-btn--tool[aria-expanded="true"] { background: var(--bg-card); color: var(--color-primary-text, var(--color-primary)); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.hy-tools--top .hy-btn--tool .hy-icon { inline-size: 16px; block-size: 16px; }
.hy-tools--top .hy-fontsize { block-size: 32px; padding: 0 2px; border: 0; border-radius: 999px; background: transparent; }
.hy-tools--top .hy-fontsize__btn { inline-size: 26px; block-size: 26px; border-radius: 50%; color: var(--hy-muted); }
.hy-tools--top .hy-tools__item + .hy-tools__item--font_size, .hy-tools--top .hy-tools__item--font_size + .hy-tools__item { border-inline-start: 1px solid var(--hy-line); padding-inline-start: 2px; }
.hy-tools--top .hy-pop { inset-inline-start: auto; inset-inline-end: 0; }
/* On a post the strip's tools are tiny: they are a shortcut, the wide buttons live in the link-and-print block. */
.hy-post__strip .hy-tools--top { padding: 2px; background: var(--hy-blk-soft); }
.hy-post__strip .hy-tools--top .hy-btn--tool { inline-size: 28px; min-block-size: 28px; block-size: 28px; }
.hy-post__strip .hy-tools--top .hy-btn--tool .hy-icon { inline-size: 14px; block-size: 14px; }
.hy-post__strip .hy-tools--top .hy-fontsize { block-size: 28px; }
.hy-post__strip .hy-tools--top .hy-fontsize__btn { inline-size: 24px; block-size: 24px; }
.hy-post__strip .hy-tools--top .hy-fontsize__btn--s { font-size: .68rem; }
.hy-post__strip .hy-tools--top .hy-fontsize__btn--m { font-size: .84rem; }
.hy-post__strip .hy-tools--top .hy-fontsize__btn--l { font-size: 1rem; }
.hy-tools--bottom { margin-block: 1.5rem 0; }
.hy-tools__item { display: inline-flex; }
/* Icons only: a row of round-cornered squares; the name is the tip (Kit::button) and stays for screen readers. */
.hy-tools .hy-btn--tool { inline-size: 40px; min-block-size: 40px; block-size: 40px; padding: 0; border-radius: 12px; }
.hy-tools .hy-btn--tool .hy-icon { inline-size: 19px; block-size: 19px; }
.hy-tools .hy-btn--tool > span:not(.hy-sr):not(.hy-like__count) { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hy-tools .hy-btn--tool:has(.hy-like__count) { inline-size: auto; padding-inline: .6rem; }
.hy-fontsize { display: inline-flex; align-items: center; gap: 2px; block-size: 40px; padding: 3px; border: 1px solid var(--hy-line); border-radius: 12px; background: var(--bg-card); }
.hy-fontsize__btn { inline-size: 32px; block-size: 32px; border: 0; border-radius: 9px; background: transparent; color: var(--hy-text); font-weight: 700; cursor: pointer; line-height: 1; }
.hy-fontsize__btn--s { font-size: .8rem; }
.hy-fontsize__btn--m { font-size: 1rem; }
.hy-fontsize__btn--l { font-size: 1.22rem; }
.hy-fontsize__btn[aria-pressed="true"] { background: var(--color-primary-soft); color: var(--color-primary-text, var(--color-primary)); }
.hy-tools--floating { position: fixed; z-index: 40; inset-block-start: 40%; inset-inline-start: max(.5rem, calc((100vw - var(--hy-max)) / 2 - 64px)); flex-direction: column;
    padding: .4rem; border: 1px solid var(--hy-line); border-radius: 18px; background: var(--bg-card); box-shadow: var(--shadow-soft, none); margin: 0; }
.hy-tools--floating .hy-btn--tool span:not(.hy-sr) { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hy-tools--floating .hy-pop { inset-block-start: 0; inset-inline-start: calc(100% + .5rem); }
@media (max-width: 1299.98px) { .hy-tools--floating { display: none; } }
.hy-tools--mobile { display: none; }
@media (max-width: 767.98px) {
    .hy-tools--mobile { position: fixed; z-index: 45; inset-inline: .5rem; inset-block-end: calc(.5rem + var(--hy-bottom-bar, 0px)); display: flex; flex-wrap: nowrap; justify-content: space-around; margin: 0; padding: .35rem;
        border: 1px solid var(--hy-line); border-radius: 18px; background: var(--bg-card); box-shadow: var(--shadow-modal, 0 10px 30px rgba(0, 0, 0, .2)); overflow-x: auto; }
    .hy-tools--mobile .hy-btn--tool { border: 0; background: transparent; }
    .hy-tools--mobile .hy-btn--tool span:not(.hy-sr) { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .hy-tools--mobile .hy-pop { inset-block-start: auto; inset-block-end: calc(100% + .5rem); }
    body:has(.hy-tools--mobile) .hy-main { padding-block-end: 4rem; }
}
.hy-qr-box { display: grid; justify-items: center; gap: .75rem; }
.hy-qr-box svg { inline-size: 220px; block-size: 220px; padding: 8px; border-radius: 12px; background: #fff; }
.hy-qr-box__url { margin: 0; font-size: .85rem; color: var(--hy-muted); word-break: break-all; text-align: center; }

/* reading progress */
.hy-progress { position: fixed; z-index: 1300; inset-block-start: 0; inset-inline: 0; block-size: 4px; background: transparent; pointer-events: none; }
.hy-progress span { display: block; block-size: 100%; inline-size: 100%; background: var(--color-primary); transform-origin: var(--hy-progress-origin, left); transform: scaleX(var(--hy-progress, 0)); }
[dir="rtl"] .hy-progress span { --hy-progress-origin: right; }

/* contents */
.hy-toc { margin-block: 0 1.5rem; padding: .9rem 1.1rem; border: 1px solid var(--hy-line); border-radius: var(--hy-radius); background: var(--bg-sunken, var(--bg-card)); font-size: .93rem; }
.hy-toc__title { display: flex; align-items: center; gap: .45rem; margin: 0; font-weight: 700; cursor: pointer; }
.hy-toc--sidebar .hy-toc__title { cursor: default; margin-block-end: .5rem; }
.hy-toc__list { margin: .6rem 0 0; padding: 0; list-style: none; counter-reset: hy-toc; }
.hy-toc__item a { display: block; padding: .25rem .5rem; border-inline-start: 2px solid transparent; color: var(--hy-muted); text-decoration: none; }
.hy-toc__item a:hover, .hy-toc__item a.is-current { border-color: var(--color-primary); color: var(--color-primary-text, var(--color-primary)); background: var(--color-primary-soft); }
.hy-toc__item--l2 a { padding-inline-start: 1.25rem; font-size: .9em; }
.hy-toc__item--l3 a { padding-inline-start: 2rem; font-size: .86em; }
.hy-toc--floating { margin: 0; padding: 0; border: 0; background: none; }
.hy-toc__fab { position: fixed; z-index: 44; inset-block-end: calc(5.5rem + var(--hy-bottom-bar, 0px)); inset-inline-end: 1rem; inline-size: 48px; block-size: 48px; border: 0; border-radius: 50%;
    background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-colored, var(--shadow-soft)); cursor: pointer; }
.hy-post .hy-toc--top { border-radius: 16px; }

/* =====================================================================
   After the text
   ===================================================================== */
/* The media page keeps one quiet foot line; a post's foot is a column of blocks. */
.hy-item__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-block-start: 2rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--hy-line); }
.hy-item__foot > .hy-item__tags, .hy-item__foot > .hy-adjacent { flex: 1 1 100%; }
.hy-item__label { display: flex; align-items: center; gap: .4rem; margin: 0 0 .6rem; font-weight: 700; font-size: .95rem; }
.hy-post .hy-item__foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hy-blk-gap); margin: 0; padding: 0; border: 0; }

/* Keywords: one line — a small label, then the keywords as small raised buttons, each starting with a coloured "#" (five tones in turn). */
.hy-blk--tags { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.hy-blk__label { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-size: .82rem; font-weight: 800; color: var(--color-accent, var(--color-primary)); white-space: nowrap; }
.hy-blk__label-icon { display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 10px; background: var(--hy-blk-raised); box-shadow: 0 1px 2px color-mix(in srgb, var(--hy-text) 6%, transparent); }
.hy-blk__label-icon .hy-icon { inline-size: 15px; block-size: 15px; }
.hy-blk--tags .hy-chips { flex: 1 1 14rem; gap: .35rem; }
.hy-blk--tags .hy-chip { --tone: var(--color-primary); --tone-soft: var(--color-primary-soft); gap: .1rem; min-block-size: 30px; padding: .15rem .75rem; border: 0; border-radius: 999px; background: var(--hy-blk-raised);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--hy-text) 6%, transparent); color: var(--hy-text); font-size: .8rem; font-weight: 600; transition: background-color .2s var(--hy-ease), transform .2s var(--hy-ease); }
.hy-blk--tags .hy-chip::before { content: "#"; color: var(--tone); font-weight: 800; }
.hy-blk--tags li:nth-child(5n + 2) .hy-chip { --tone: var(--color-accent, var(--color-primary)); --tone-soft: var(--color-accent-light, var(--color-primary-soft)); }
.hy-blk--tags li:nth-child(5n + 3) .hy-chip { --tone: var(--color-info, var(--color-primary)); --tone-soft: var(--color-info-light, var(--color-primary-soft)); }
.hy-blk--tags li:nth-child(5n + 4) .hy-chip { --tone: var(--color-warning, var(--color-primary)); --tone-soft: var(--color-warning-light, var(--color-primary-soft)); }
.hy-blk--tags li:nth-child(5n + 5) .hy-chip { --tone: var(--color-danger, var(--color-primary)); --tone-soft: var(--color-danger-light, var(--color-primary-soft)); }
.hy-blk--tags a.hy-chip:hover { background: var(--tone-soft); color: var(--hy-text); transform: translateY(-1px); }

/* Under the text only when the top bar does not already hold them: the tool bar placed "bottom" and the share buttons. */
.hy-blk--actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; }
.hy-blk--actions .hy-tools--bottom { margin: 0; }
.hy-blk--actions > .hy-item__share { margin-inline-start: auto; }
.hy-item__share .hb-share { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: 4px 4px 4px .8rem; border: 1px solid var(--hy-line); border-radius: 999px; background: var(--bg-sunken, var(--bg-app)); }
[dir="rtl"] .hy-item__share .hb-share { padding: 4px .8rem 4px 4px; }
.hy-item__share .hb-share__label { margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .03em; color: var(--hy-muted); }
.hy-item .hy-item__share .hb-social { gap: 2px; --hb-social-size: 28px; }
.hy-item .hy-item__share .hb-social__link { border: 0; border-radius: 50%; background: transparent; color: var(--hy-muted); transition: background-color .2s var(--hy-ease), color .2s var(--hy-ease), transform .2s var(--hy-ease); }
.hy-item .hy-item__share .hb-social__link:hover { background: var(--hb-brand, var(--color-primary)); color: var(--text-inverse, var(--color-on-primary)); filter: none; }
.hy-item .hy-item__share .hb-social__icon svg { inline-size: 14px; block-size: 14px; }
.hy-blk--actions .hy-item__share .hb-share { min-block-size: 42px; padding: 4px 4px 4px .9rem; border: 0; border-radius: 14px; background: var(--hy-blk-raised); box-shadow: 0 1px 2px color-mix(in srgb, var(--hy-text) 6%, transparent); }
[dir="rtl"] .hy-blk--actions .hy-item__share .hb-share { padding: 4px .9rem 4px 4px; }
.hy-post .hy-blk--actions .hy-item__share .hb-social { --hb-social-size: 32px; }
.hy-post .hy-blk--actions .hy-item__share .hb-social__icon svg { inline-size: 15px; block-size: 15px; }
@media (max-width: 575.98px) {
    .hy-blk--actions > .hy-item__share { margin-inline-start: 0; inline-size: 100%; }
    .hy-blk--actions .hy-item__share .hb-share { inline-size: 100%; justify-content: space-between; }
}

/* The author: picture, name and a two-line note, a tile to all their posts. */
.hy-author-box { display: flex; align-items: center; gap: .65rem; min-inline-size: 0; }
.hy-author-box .hy-avatar--lg { inline-size: 40px; block-size: 40px; font-size: .95rem; }
.hy-author-box > div { min-inline-size: 0; }
.hy-author-box__name { margin: 0; font-weight: 600; font-size: .95rem; line-height: 1.35; }
.hy-author-box__name a { color: inherit; text-decoration: none; }
.hy-author-box__name a:hover { color: var(--color-primary-text, var(--color-primary)); }
.hy-author-box__bio { margin: .1rem 0 0; color: var(--hy-muted); font-size: .85rem; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.hy-post .hy-author-box { gap: 1rem; padding-block: clamp(.85rem, 2vw, 1.2rem); }
.hy-post .hy-author-box .hy-avatar--lg { inline-size: 56px; block-size: 56px; font-size: 1.25rem; box-shadow: 0 0 0 4px var(--hy-blk-raised); }
.hy-post .hy-author-box__text { flex: 1 1 auto; }
.hy-post .hy-author-box__name { font-size: 1.02rem; font-weight: 700; }
.hy-author-box__go { color: var(--hy-muted); text-decoration: none; }
.hy-author-box__go:hover { background: var(--color-primary); color: var(--color-on-primary); }

/* Previous / next. */
.hy-adjacent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.hy-adjacent__link { display: grid; gap: .3rem; padding: .9rem 1rem; border: 1px solid var(--hy-line); border-radius: var(--hy-radius); color: inherit; text-decoration: none; }
.hy-adjacent__link--next { text-align: end; }
.hy-adjacent__link:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.hy-adjacent__label { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--hy-muted); }
.hy-adjacent__link--next .hy-adjacent__label { justify-content: flex-end; flex-direction: row-reverse; }
.hy-adjacent__title { font-weight: 600; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
@media (max-width: 575.98px) { .hy-adjacent { grid-template-columns: minmax(0, 1fr); } .hy-adjacent__link--next { text-align: start; } .hy-adjacent__link--next .hy-adjacent__label { justify-content: flex-start; flex-direction: row; } }
.hy-post .hy-blk--adjacent { gap: .75rem; padding: clamp(.6rem, 1.5vw, .85rem); }
.hy-post .hy-adjacent__link { display: flex; align-items: center; gap: .7rem; padding: .55rem; border: 0; border-radius: 16px; background: var(--hy-blk-raised);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--hy-text) 6%, transparent); transition: box-shadow .2s var(--hy-ease), transform .2s var(--hy-ease); }
.hy-post .hy-adjacent__link--next { flex-direction: row-reverse; }
.hy-post .hy-adjacent__link:hover { background: var(--hy-blk-raised); box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--color-primary) 70%, transparent); transform: translateY(-1px); }
.hy-adjacent__icon { display: inline-grid; place-items: center; flex: none; inline-size: 36px; block-size: 36px; border-radius: 11px; background: var(--bg-sunken, var(--bg-app)); color: var(--hy-muted); transition: background-color .2s var(--hy-ease), color .2s var(--hy-ease); }
.hy-adjacent__icon .hy-icon { inline-size: 18px; block-size: 18px; }
.hy-post .hy-adjacent__link:hover .hy-adjacent__icon { background: var(--color-primary); color: var(--color-on-primary); }
.hy-adjacent__text { display: grid; gap: .15rem; min-inline-size: 0; }
.hy-post .hy-adjacent__label { font-size: .76rem; }
.hy-post .hy-adjacent__link--next .hy-adjacent__label { justify-content: flex-end; flex-direction: row; }
.hy-post .hy-adjacent__title { font-size: .88rem; line-height: 1.55; }
@media (max-width: 575.98px) { .hy-post .hy-adjacent__link--next { flex-direction: row; text-align: start; } .hy-post .hy-adjacent__link--next .hy-adjacent__label { justify-content: flex-start; } .hy-adjacent__none { display: none; } }

/* Related content: the cards stand raised on the block. */
.hy-blk--related .hy-list, .hy-blk--related .hy-carousel__track { margin: 0; }
.hy-blk--related .hy-card { background: var(--hy-blk-raised); }
/* Compact: four small cards a row, a short picture, the title in two lines, no badges or foot line. */
.hy-blk--related .hy-list--grid { --hy-cols-d: 4 !important; --hy-cols-l: 4 !important; --hy-gap: .6rem; }
.hy-blk--related .hy-card { border-radius: 14px; }
.hy-blk--related .hy-card__media { aspect-ratio: 16 / 9; }
.hy-blk--related .hy-card__media img { aspect-ratio: 16 / 9; }
.hy-blk--related :is(.hy-card__badges, .hy-card__foot, .hy-card__eyebrow) { display: none; }
.hy-blk--related .hy-card__body { gap: .25rem; padding: .55rem .7rem .7rem; }
.hy-blk--related .hy-card__title { font-size: .86rem; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.hy-blk--related .hy-card__meta { font-size: .72rem; }
.hy-blk--related .hy-blk__nav .hy-carousel__btn { position: static; inline-size: 44px; block-size: 44px; border: 0; border-radius: 14px; background: var(--hy-blk-raised);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--hy-text) 6%, transparent); color: var(--hy-muted); }
.hy-blk--related .hy-blk__nav .hy-carousel__btn:hover { background: var(--color-primary); color: var(--color-on-primary); }
.hy-blk--related .hy-blk__nav .hy-carousel__btn:disabled { opacity: .4; pointer-events: none; }
/* Phones: the related cards scroll sideways in one row instead of standing in a long column. */
@media (max-width: 767.98px) {
    .hy-blk--related .hy-list.hy-list--grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78%, 17rem); margin-inline: calc(-1 * var(--hy-blk-pad)); padding: .2rem var(--hy-blk-pad) .6rem;
        overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--hy-blk-pad); scrollbar-width: none; }
    .hy-blk--related .hy-list.hy-list--grid::-webkit-scrollbar { display: none; }
    .hy-blk--related .hy-list.hy-list--grid > * { scroll-snap-align: start; }
}

/* Comments: the section loses its own frame inside the block; the heading is the block's pill, the form a raised panel. */
.hy-blk--after > summary.hy-after__open { min-block-size: 50px; border: 0; border-radius: 16px; background: var(--hy-blk-raised); box-shadow: 0 1px 2px color-mix(in srgb, var(--hy-text) 6%, transparent); font-weight: 700; }
.hy-blk--after > summary.hy-after__open:hover { background: var(--color-primary-soft); }
.hy-blk--after .hy-comments { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.hy-blk--after .hy-comments__title { justify-self: start; min-block-size: 44px; padding: .3rem 1rem .3rem .3rem; border-radius: 14px; background: var(--hy-blk-raised);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--hy-text) 6%, transparent); color: var(--color-accent, var(--color-primary)); font-size: 1.05rem; font-weight: 800; }
[dir="rtl"] .hy-blk--after .hy-comments__title { padding: .3rem .3rem .3rem 1rem; }
.hy-blk--after .hy-comments__title > .hy-icon { padding: 7px; border-radius: 11px; background: var(--bg-sunken, var(--bg-app)); color: var(--hy-muted); }
.hy-blk--after .hy-comments__empty { border: 0; background: var(--hy-blk-raised); }
.hy-blk--after .hy-comments .hy-comment-form { border-radius: 18px; background: var(--hy-blk-raised); box-shadow: 0 1px 2px color-mix(in srgb, var(--hy-text) 6%, transparent); }
.hy-blk--after .hy-comment-form .hy-input { border-color: transparent; border-radius: 14px; background: var(--bg-sunken, var(--bg-app)); }
.hy-blk--after .hy-comment-form .hy-input:focus { border-color: var(--color-primary); background: var(--bg-card); }
.hy-blk--after .hy-comment-form > .hy-btn--solid { min-block-size: 48px; border-radius: 16px; background: var(--color-accent, var(--color-primary)); border-color: transparent; color: var(--bg-card); font-weight: 700; }
.hy-blk--after .hy-comment-form > .hy-btn--solid:hover { background: var(--color-primary); color: var(--color-on-primary); }
.hy-blk--after .hy-comment__text { background: var(--hy-blk-raised); }
.hy-blk--after .hy-comment--official .hy-comment__text { background: var(--color-primary-soft); }

/* Phones: slimmer blocks. */
@media (max-width: 575.98px) {
    .hy-post, .hy-post ~ .hy-blk { --hy-blk-r: 18px; }
    .hy-post .hy-item__title { font-size: 1.35rem; }
    .hy-post .hy-hero__band .hy-item__title { font-size: 1.2rem; }
    .hy-blk--actions .hy-item__share .hb-share { flex-wrap: nowrap; padding: 4px; }
    .hy-blk--actions .hy-item__share .hb-share__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .hy-post .hy-blk--actions .hy-item__share .hb-social { --hb-social-size: 32px; flex-wrap: nowrap; justify-content: space-between; inline-size: 100%; }
    .hy-blk__title { min-block-size: 40px; font-size: 1rem; }
    .hy-blk__mark { inline-size: 40px; block-size: 40px; }
    .hy-post__strip { gap: .45rem; }
    .hy-post__strip > .hy-tools--top { margin-inline-start: 0; max-inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
}

/* reading mode: only the title and the text */
html.hy-reading .hy-header, html.hy-reading .hy-footer, html.hy-reading .hy-cols__side, html.hy-reading .hy-related, html.hy-reading .hy-bottomnav,
html.hy-reading .hy-a11y, html.hy-reading .hy-tools--floating, html.hy-reading .hy-item__foot, html.hy-reading .hy-after, html.hy-reading .hy-post__strip, html.hy-reading .hy-post__crumbs { display: none !important; }
html.hy-reading .hy-cols { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "main" !important; max-inline-size: 760px; }
html.hy-reading .hy-item, html.hy-reading .hy-post .hy-blk { border: 0; box-shadow: none; background: transparent; }
.hy-reading-exit { position: fixed; z-index: 1300; inset-block-start: 1rem; inset-inline-end: 1rem; }

/* print from the post page itself (the print version has its own sheet) */
@media print {
    .hy-header, .hy-footer, .hy-cols__side, .hy-tools, .hy-related, .hy-after, .hy-a11y, .hy-toasts, .hy-progress, .hy-bottomnav, .hy-item__share, .hy-adjacent, .hy-toc--floating, .hy-sb-open,
    .hy-post__strip, .hy-crumbbar, .hy-blk--actions, .hy-post .hy-author-box { display: none !important; }
    .hy-cols { display: block; padding: 0; }
    .hy-item { border: 0; box-shadow: none; padding: 0; }
    .hy-post .hy-blk { border: 0; box-shadow: none; background: none; padding-inline: 0; }
    .hy-hero__band { position: static; background: none; box-shadow: none; color: inherit; padding: 1rem 0; }
    body.hy-noprint .hy-main { display: none; }
}

/* =====================================================================
   Reading type (2026-10-29, round 8): the text of posts, blog, media,
   events and book chapters was small and ran ~150 characters a line,
   while its headings were large and heavy. Now a measured scale: a
   larger body, a line of about 70-85 characters, headings a modest
   step above the text (the text's own family in a book).
   ===================================================================== */
.hy-item { --hy-item-size: 1.3125rem; }
.hy-fs--small { --hy-item-size: 1.1875rem; }
.hy-fs--large { --hy-item-size: 1.4375rem; }
.hy-fs--xlarge { --hy-item-size: 1.5625rem; }
/* (round 8, the user's correction) The text uses the card's full width, justified; no narrowed column. */
.hy-item .hy-item__text :is(p, li, dd) { text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }
/* Arabic reads larger; Urdu Nastaliq needs more room between lines. */
.hy-item .hy-item__text:lang(ar), .hy-item:lang(ar) .hy-item__text { font-size: calc(var(--hy-item-size) * var(--lang-font-scale, 1) * 1.12); }
.hy-item .hy-item__text:lang(ur), .hy-item:lang(ur) .hy-item__text { line-height: max(var(--hy-item-line), 2.7); }
.hy-item__main--beside .hy-item__text { max-inline-size: none; }
.hy-item .hy-item__title { font-size: clamp(1.6rem, 1.05rem + 1.5vw, 2.35rem); line-height: 1.3; letter-spacing: -.005em; }
.hy-item .hy-item__lead { font-size: 1.08rem; line-height: 1.75; }
.hy-item .hy-item__text :is(h1, h2, h3, h4, h5, h6) { margin-block: 1.7em .55em; line-height: 1.4; letter-spacing: -.003em; }
.hy-item .hy-item__text > :first-child:is(h1, h2, h3, h4, h5, h6) { margin-block-start: 0; }
.hy-item .hy-item__text h1 { font-size: 1.6em; }
.hy-item .hy-item__text h2 { font-size: 1.38em; }
.hy-item .hy-item__text h3 { font-size: 1.2em; }
.hy-item .hy-item__text h4 { font-size: 1.08em; }
.hy-item .hy-item__text :is(h5, h6) { font-size: 1em; }
.hy-item .hy-item__text :is(figcaption, .hb-caption) { font-size: .82em; }
.hy-item .hy-item__text :is(blockquote, .hb-quote) { font-size: 1.04em; }
/* A book chapter reads as a printed page: a narrower column, headings in the text's own family. */
.hy-reader-page .hy-item { --hy-item-size: 1.375rem; }
.hy-reader-page .hy-item .hy-item__text :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-text, inherit); font-weight: 600; }
.hy-reader-page .hy-item .hy-item__text h2 { font-size: 1.32em; }
.hy-reader-page .hy-item .hy-item__title { font-family: var(--font-text, inherit); font-weight: 600; font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.5rem); }
@media (max-width: 575.98px) {
    .hy-item { --hy-item-size: 1.1875rem; }
    .hy-reader-page .hy-item { --hy-item-size: 1.25rem; }
}
/* (2026-10-29) The figures under the text: words, reading time, views, visitors and the time read in all — small tiles, each with an icon in
   a tinted square, the number large, its name quiet under it. */
.hy-blk--stats { background: var(--hy-blk-soft); box-shadow: none; }
.hy-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .6rem; margin: 0; }
.hy-stats__item { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon value" "icon label"; align-items: center; column-gap: .7rem; padding: .7rem .85rem; border-radius: 14px;
    background: var(--hy-blk-raised); box-shadow: 0 1px 2px color-mix(in srgb, var(--hy-text) 6%, transparent); }
.hy-stats__icon { grid-area: icon; display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 12px; background: color-mix(in srgb, var(--color-accent, var(--color-primary)) 14%, transparent); color: color-mix(in srgb, var(--color-accent, var(--color-primary)) 80%, #000); }
.hy-stats__item:nth-child(2) .hy-stats__icon { background: color-mix(in srgb, var(--color-primary) 13%, transparent); color: var(--color-primary); }
.hy-stats__item:nth-child(3) .hy-stats__icon { background: color-mix(in srgb, var(--color-info, #3b6ea5) 13%, transparent); color: var(--color-info, #3b6ea5); }
.hy-stats__item:nth-child(4) .hy-stats__icon { background: color-mix(in srgb, var(--color-danger, #a8443c) 12%, transparent); color: color-mix(in srgb, var(--color-danger, #a8443c) 70%, #2a0a12); }
.hy-stats__icon .hy-icon { inline-size: 18px; block-size: 18px; }
.hy-stats dd { grid-area: value; margin: 0; color: var(--hy-text); font-size: 1.12rem; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; }
.hy-stats dt { grid-area: label; color: var(--hy-muted); font-size: .76rem; font-weight: 600; line-height: 1.35; }
@media print { .hy-blk--stats { display: none; } }

/* ---- css/a11y.css ---- */
/* =====================================================================
   Hydari theme — the accessibility bar (spec 4.21 "upgrade") and what
   each of its choices does to the whole site: higher contrast, larger
   text, more space between lines, links underlined and outlined, every
   animation stopped. The classes are put on <html> before the first paint.
   ===================================================================== */

.hy-a11y { position: fixed; z-index: 1250; inset-block-end: calc(1rem + var(--hy-bottom-bar, 0px)); inset-inline-start: 1rem; }
.hy-a11y__fab { display: inline-flex; align-items: center; justify-content: center; inline-size: 48px; block-size: 48px; border: 0; border-radius: 50%;
    background: var(--color-dark); color: var(--color-on-dark, var(--text-inverse)); box-shadow: var(--shadow-soft, 0 6px 18px rgba(0, 0, 0, .25)); cursor: pointer; }
.hy-a11y__fab .hy-icon { inline-size: 26px; block-size: 26px; }
.hy-a11y__panel { position: absolute; inset-block-end: calc(100% + .6rem); inset-inline-start: 0; inline-size: min(88vw, 290px); padding: .9rem; border: 1px solid var(--hy-line);
    border-radius: 18px; background: var(--bg-card); color: var(--hy-text); box-shadow: var(--shadow-modal, 0 20px 50px rgba(0, 0, 0, .3)); }
.hy-a11y__title { margin: 0 0 .6rem; font-weight: 700; }
.hy-a11y__list { display: grid; gap: .35rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
.hy-a11y__opt { display: flex; align-items: center; gap: .6rem; inline-size: 100%; padding: .55rem .7rem; border: 1px solid var(--hy-line); border-radius: 12px; background: transparent;
    color: inherit; font: inherit; font-size: .92rem; text-align: start; cursor: pointer; }
.hy-a11y__opt[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-text, var(--color-primary)); font-weight: 600; }
.hy-a11y__opt[aria-pressed="true"]::after { content: "✓"; margin-inline-start: auto; }
@media (max-width: 991.98px) { :root { --hy-bottom-bar: 0px; } body:has(.hy-bottomnav) { --hy-bottom-bar: var(--hy-bar-h, 64px); } }
@media print { .hy-a11y { display: none; } }

/* the choices */
html.hy-a11y-contrast { --text-secondary: var(--text-main); --text-muted: var(--text-main); --hy-muted: var(--text-main); --border-light: var(--text-main); --hy-line: var(--text-main); }
html.hy-a11y-contrast body { background: var(--bg-card); }
html.hy-a11y-contrast img, html.hy-a11y-contrast picture { filter: contrast(1.15); }
html.hy-a11y-text { font-size: 118%; }
html.hy-a11y-text .hy-item__text { --hy-item-size: 1.22rem; }
html.hy-a11y-spacing body, html.hy-a11y-spacing .hy-item__text { line-height: 2.1 !important; letter-spacing: .02em; word-spacing: .12em; }
html.hy-a11y-spacing p, html.hy-a11y-spacing li { margin-block-end: 1.1em; }
html.hy-a11y-links a:not(.hy-btn):not(.hy-chip) { text-decoration: underline !important; text-decoration-thickness: 2px !important; }
html.hy-a11y-links a:not(.hy-btn) { outline: 2px dashed currentColor; outline-offset: 2px; }
html.hy-a11y-links .hy-card__link::after { outline: none; }
html.hy-a11y-still *, html.hy-a11y-still *::before, html.hy-a11y-still *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* entrance animation of a part of the site (display setting common.animation) */
.hy-js .hy-anim [data-hy-anim-item] { opacity: 0; transition: opacity .5s var(--hy-ease), transform .5s var(--hy-ease); }
.hy-js .hy-anim--rise [data-hy-anim-item] { transform: translateY(18px); }
.hy-js .hy-anim--zoom [data-hy-anim-item] { transform: scale(.96); }
.hy-js .hy-anim [data-hy-anim-item].is-in { opacity: 1; transform: none; }
html.hy-a11y-still .hy-anim [data-hy-anim-item] { opacity: 1 !important; transform: none !important; }