/* ============================================================
   kolydart — template.css
   Loads after tokens.css and fonts.css. Every colour, size and
   distance comes from a --k-* token; there are no shadows, no
   radii and no motion beyond link underlines.
   ============================================================ */

/* ── Base ──────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html, body {
    margin: 0;
    background: var(--k-bg);
    color: var(--k-ink);
    font-family: var(--k-font-serif);
    font-size: var(--k-text-body);
    line-height: var(--k-lh-body);
    font-feature-settings: "kern", "liga", "onum", "pnum";
    text-rendering: optimizeLegibility;
}

body { min-height: 100vh; display: flex; flex-direction: column; }
.k-main { flex: 1 0 auto; }

.num { font-variant-numeric: oldstyle-nums proportional-nums; }

a { color: var(--k-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

::selection { background: var(--k-accent-bg); color: var(--k-on-accent); }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: var(--k-lh-tight); }
p { margin: 0 0 var(--k-space-3); }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
button { font: inherit; }
input, textarea, select { font: inherit; color: inherit; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.k-skip {
    position: absolute; left: -999px; top: 0; z-index: 100;
    background: var(--k-accent-bg); color: var(--k-on-accent);
    font-family: var(--k-font-mono); font-size: var(--k-text-meta); padding: 10px 14px;
}
.k-skip:focus { left: 0; text-decoration: none; }

/* ── Layout primitives ─────────────────────────────────────── */

.k-wrap {
    max-width: var(--k-container);
    margin: 0 auto;
    padding-left: var(--k-pad-x);
    padding-right: var(--k-pad-x);
}

/* Anything the template did not wrap itself gets the container. */
#k-main > :not(.k-bleed):not(.k-wrap) {
    max-width: var(--k-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--k-pad-x);
    padding-right: var(--k-pad-x);
}

.k-zone { background: var(--k-zone); color: var(--k-zone-ink); }
.k-zone a { color: var(--k-zone-ink); }
.k-zone a.k-accent, .k-zone .k-accent { color: var(--k-accent-on-dark); }

.k-measure { max-width: var(--k-measure); }

/* Page head (light pages: index, feed, about, contact) */
.k-page { padding-bottom: var(--k-space-7); }
.k-page__head {
    padding: 38px 0 var(--k-space-4);
    border-bottom: 1px solid var(--k-rule-strong);
    display: flex; align-items: flex-end; justify-content: space-between; gap: var(--k-space-4); flex-wrap: wrap;
}
.k-page__head h1 { margin-top: 12px; }
.k-page__count {
    font-family: var(--k-font-mono); font-size: var(--k-text-sm); letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--k-muted);
}

/* Eyebrow / labels — mono, tracked, uppercase */
.k-eyebrow {
    font-family: var(--k-font-mono);
    font-size: var(--k-text-sm);
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--k-muted);
    line-height: 1.6;
}
.k-eyebrow--xs { font-size: var(--k-text-xs); }
.k-eyebrow--accent { color: var(--k-accent); }
.k-zone .k-eyebrow { color: var(--k-zone-muted); }
.k-zone .k-eyebrow--accent { color: var(--k-accent-on-dark); }
.k-eyebrow a { color: inherit; }

/* Type scale */
.k-title-3xl { font-size: var(--k-text-3xl); line-height: 1.08; letter-spacing: -0.025em; text-wrap: pretty; }
.k-title-3xl a, .k-title-2xl a, .k-title-xl a, .k-title-lg a { color: inherit; }
.k-title-2xl { font-size: var(--k-text-2xl); line-height: var(--k-lh-tight); letter-spacing: -0.025em; text-wrap: pretty; }
.k-title-xl  { font-size: var(--k-text-xl); letter-spacing: -0.025em; }
.k-title-lg  { font-size: var(--k-text-lg); letter-spacing: -0.02em; }
.k-title-card { font-size: var(--k-text-card); line-height: 1.25; letter-spacing: -0.015em; }

/* Prose (article body) */
.k-prose { font-size: var(--k-text-body); line-height: var(--k-lh-body); }
.k-prose p { margin: 0 0 18px; }
.k-prose > :last-child { margin-bottom: 0; }
.k-prose h2 { font-size: var(--k-text-lg); margin: var(--k-space-5) 0 var(--k-space-3); }
.k-prose h3 { font-size: var(--k-text-card); margin: var(--k-space-4) 0 var(--k-space-2); }
.k-prose h4, .k-prose h5, .k-prose h6 { font-size: var(--k-text-body); margin: var(--k-space-4) 0 var(--k-space-2); }
.k-prose ul, .k-prose ol { padding-left: 1.4em; margin: 0 0 18px; }
.k-prose li { margin-bottom: 6px; }
.k-prose blockquote {
    margin: var(--k-space-4) 0; padding: 0 0 0 16px;
    border-left: 2px solid var(--k-rule-strong); color: var(--k-ink-soft);
}
.k-prose img { margin: var(--k-space-4) 0; }
.k-prose figure { margin: var(--k-space-4) 0; }
.k-prose figcaption, .k-caption {
    font-family: var(--k-font-mono); font-size: var(--k-text-sm); letter-spacing: 0.06em; color: var(--k-muted); margin-top: 8px;
}
.k-prose table { border-collapse: collapse; width: 100%; margin: var(--k-space-4) 0; font-size: var(--k-text-list); }
.k-prose th, .k-prose td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--k-rule); vertical-align: top; }
.k-prose th { font-family: var(--k-font-mono); font-size: var(--k-text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--k-muted); font-weight: 400; }
.k-prose code, .k-prose pre, .k-prose kbd {
    font-family: var(--k-font-mono); font-size: 0.85em; background: var(--k-surface); padding: 1px 5px;
}
.k-prose pre { padding: 14px 16px; overflow-x: auto; line-height: 1.5; }
.k-prose pre code { background: none; padding: 0; }
.k-prose hr { border: 0; border-top: 1px solid var(--k-rule); margin: var(--k-space-5) 0; }
.k-lead { font-size: var(--k-text-lead); line-height: var(--k-lh-list); color: var(--k-ink-soft); margin: 0 0 var(--k-space-4); }

/* Bootstrap-class remnants inside article text → one button system */
.k-prose .btn, .k-prose a.btn {
    display: inline-block; background: var(--k-accent-bg); color: var(--k-on-accent);
    font-family: var(--k-font-mono); font-size: var(--k-text-meta); letter-spacing: 0.06em;
    padding: 11px 15px; border: 0; border-radius: 0; text-decoration: none;
}

/* ── Buttons, chips, labels ────────────────────────────────── */

.k-btn {
    display: inline-block;
    font-family: var(--k-font-mono);
    font-size: var(--k-text-meta);
    letter-spacing: 0.06em;
    line-height: 1.2;
    padding: 11px 15px;
    border: 1px solid transparent;
    border-radius: var(--k-radius-0);
    background: transparent;
    color: var(--k-ink);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.k-btn:hover { text-decoration: none; }
.k-btn--primary { background: var(--k-accent-bg); border-color: var(--k-accent-bg); color: var(--k-on-accent); }
.k-btn--primary:hover { filter: none; text-decoration: underline; text-underline-offset: 3px; }
.k-btn--secondary { border-color: var(--k-rule-strong); color: var(--k-ink); }
.k-zone .k-btn--secondary { border-color: var(--k-zone-border-strong); color: var(--k-zone-ink); }
.k-btn--ghost { padding: 11px 0; border: 0; border-bottom: 2px solid var(--k-accent); color: var(--k-accent); }
.k-btn[disabled], .k-btn--disabled { border-color: var(--k-field-border); color: var(--k-disabled-ink); cursor: default; }
.k-actions { display: flex; gap: var(--k-space-2); flex-wrap: wrap; margin-top: 24px; }

/* Chips (tags / topics) */
.k-chips { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--k-font-mono); font-size: var(--k-text-sm); letter-spacing: 0.04em; margin: 0; padding: 0; list-style: none; }
.k-chip { display: inline-block; border: 1px solid var(--k-accent); color: var(--k-accent); padding: 3px 8px; text-decoration: none; }
.k-chip:hover { background: var(--k-accent-bg); color: var(--k-on-accent); text-decoration: none; }
.k-zone .k-chip { border-color: var(--k-zone-border); color: var(--k-accent-on-dark); }
.k-zone .k-chip:hover { background: var(--k-accent-on-dark); color: var(--k-zone); }

/* Kind / sub-type label */
.k-kind {
    font-family: var(--k-font-mono); font-size: var(--k-text-xs); letter-spacing: 0.12em;
    text-transform: uppercase; line-height: 1.6; color: var(--k-muted);
}
.k-kind--accent, .k-tone-accent { color: var(--k-accent); }
.k-kind--signal, .k-tone-signal { color: var(--k-signal); }
.k-tone-muted { color: var(--k-muted); }
.k-kind--filled {
    background: var(--k-accent-bg); color: var(--k-on-accent); padding: 4px 9px; letter-spacing: 0.14em; font-size: var(--k-text-sm);
}
.k-kind--outlined { border: 1px solid var(--k-rule-strong); color: var(--k-ink); padding: 4px 9px; letter-spacing: 0.14em; font-size: var(--k-text-sm); }
.k-date { font-family: var(--k-font-mono); font-size: var(--k-text-date); color: var(--k-muted); }
.k-metaline { font-family: var(--k-font-mono); font-size: var(--k-text-sm); color: var(--k-muted); }
.k-metaline a { color: var(--k-accent); }

/* ── Header ────────────────────────────────────────────────── */

.k-header__bar {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    padding-top: 18px; padding-bottom: 18px;
}
.k-brand { display: inline-flex; align-items: baseline; gap: 12px; color: var(--k-zone-ink); text-decoration: none; }
.k-brand:hover { text-decoration: none; }
.k-brand__name { font-family: var(--k-font-mono); font-size: var(--k-text-card); font-weight: 700; letter-spacing: -0.03em; }
.k-brand__sub { font-family: var(--k-font-mono); font-size: var(--k-text-sm); letter-spacing: 0.14em; color: var(--k-zone-muted); }

.k-theme { display: flex; gap: 0; margin-left: auto; }
.k-theme__btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0; cursor: pointer; border: 1px solid var(--k-zone-border); margin-left: -1px;
    background: transparent; color: var(--k-zone-ink); border-radius: 0;
}
.k-theme__btn:first-child { margin-left: 0; }
.k-theme__btn:hover { color: var(--k-accent-on-dark); }
.k-theme__btn:focus-visible { outline: 2px solid var(--k-accent-on-dark); outline-offset: 2px; position: relative; z-index: 1; }
.k-theme__btn[aria-pressed="true"] { background: var(--k-zone-ink); color: var(--k-zone); }
.k-theme__icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.k-theme__icon .k-theme__fill { fill: currentColor; stroke: none; }

.k-burger {
    display: none; background: transparent; border: 1px solid var(--k-zone-border); color: var(--k-zone-ink);
    font-family: var(--k-font-mono); font-size: var(--k-text-sm); letter-spacing: 0.1em; text-transform: uppercase;
    padding: 8px 12px; cursor: pointer; border-radius: 0; min-height: 44px;
}

.k-nav {
    flex-basis: 100%;
    display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap;
    font-family: var(--k-font-mono); font-size: var(--k-text-sm); letter-spacing: 0.1em; text-transform: uppercase;
}
/* wide: one row — wordmark · menu · language · theme at the edge */
@media (min-width: 1100px) {
    .k-header__bar { flex-wrap: nowrap; }
    .k-nav { flex: 0 1 auto; margin-left: auto; }
    .k-theme { order: 1; margin-left: 0; }
    .k-nav__lang { margin-left: 0; }
}
.k-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; white-space: nowrap; }
.k-nav__item { position: relative; }
.k-nav__link, .k-nav__text { color: var(--k-zone-ink); display: inline-block; padding: 4px 0; }
.k-nav__item.active > .k-nav__link,
.k-nav__item.active > .k-nav__parent > .k-nav__link,
.k-nav__item.current > .k-nav__link { color: var(--k-accent-on-dark); }
.k-nav__link:hover { text-decoration: none; color: var(--k-accent-on-dark); }
.k-nav__parent { display: inline-flex; align-items: baseline; gap: 4px; }
.k-nav__toggle {
    background: transparent; border: 0; color: var(--k-zone-muted); cursor: pointer; padding: 4px 2px; font-size: 10px; line-height: 1;
}
.k-nav__sub {
    list-style: none; margin: 0; padding: 10px 0;
    position: absolute; top: 100%; left: 0; min-width: 250px; z-index: 20;
    background: var(--k-zone); border: 1px solid var(--k-zone-border);
    display: none;
}
.k-nav__item--parent:hover > .k-nav__sub,
.k-nav__item--parent:focus-within > .k-nav__sub,
.k-nav__item--parent.k-open > .k-nav__sub { display: block; }
.k-nav__sub .k-nav__link, .k-nav__sub .k-nav__text {
    display: block; padding: 7px 14px; text-transform: none; letter-spacing: 0.06em; white-space: normal;
}
.k-nav__sub .k-nav__item.active > .k-nav__link { color: var(--k-accent-on-dark); }
.k-nav__sub--nested { position: static; border: 0; padding: 0 0 0 14px; display: block; }
.k-nav__lang { margin-left: auto; }

/* same segmented look as .k-theme: the current language is the filled cell */
.k-lang { display: inline-flex; white-space: nowrap; }
.k-lang__item {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--k-zone-border); margin-left: -1px;
    color: var(--k-zone-ink);
}
.k-lang__item:first-child { margin-left: 0; }
.k-lang__item--active { background: var(--k-zone-ink); color: var(--k-zone); }
.k-lang a:hover { color: var(--k-accent-on-dark); text-decoration: none; }
.k-lang a:focus-visible { outline: 2px solid var(--k-accent-on-dark); outline-offset: 2px; position: relative; z-index: 1; }

/* ── Hero zone (home, activity, project, course, supervision) ── */

.k-hero { border-top: 1px solid var(--k-zone-rule); }
.k-hero__grid { max-width: var(--k-container); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.k-hero__grid--single { grid-template-columns: minmax(0, 1fr); }
.k-hero__main { padding: 46px var(--k-pad-x) 50px; }
.k-hero--home .k-hero__main { padding-top: 52px; padding-bottom: 56px; }
.k-hero__main h1 { margin: 16px 0 16px; max-width: 760px; }
.k-hero--home .k-hero__main h1 { max-width: 700px; margin-bottom: 14px; }
.k-hero__intro { font-size: var(--k-text-body); line-height: var(--k-lh-body); max-width: 640px; color: var(--k-zone-soft); margin: 0; }
.k-hero__intro p { margin: 0 0 12px; }
.k-hero__intro p:last-child { margin-bottom: 0; }
.k-hero__cite {
    font-size: var(--k-text-sm-body); line-height: var(--k-lh-body); max-width: 720px; color: var(--k-zone-dim); margin: 0;
    border-left: 2px solid var(--k-zone-rule); padding-left: 16px;
}
.k-hero__aside {
    border-left: 1px solid var(--k-zone-rule);
    padding: 46px 26px;
    font-family: var(--k-font-mono); font-size: var(--k-text-sm); line-height: var(--k-lh-meta); letter-spacing: 0.08em;
    color: var(--k-zone-muted);
}
.k-hero--home .k-hero__aside { padding-top: 52px; padding-bottom: 52px; }
.k-hero__aside .k-eyebrow { font-size: var(--k-text-sm); letter-spacing: 0.08em; }
.k-meta { margin: 0; }
.k-meta > div { display: flex; gap: 8px; flex-wrap: wrap; }
.k-meta dt { text-transform: uppercase; }
.k-meta dd { margin: 0; color: var(--k-zone-ink); }
.k-meta dd a { color: var(--k-accent-on-dark); overflow-wrap: anywhere; }
.k-hero__rule { height: 1px; background: var(--k-zone-rule); margin: 18px 0; }
.k-hero__aside .k-chips { margin-top: 8px; }
.k-call {
    font-family: var(--k-font-serif); font-size: var(--k-text-sm-body); letter-spacing: 0; line-height: 1.5; color: var(--k-zone-ink);
    margin-top: 8px; border-left: 3px solid var(--k-signal-on-dark); padding-left: 12px;
}
.k-call + .k-call { margin-top: 12px; }
.k-call a { color: var(--k-zone-ink); }
.k-call__deadline { color: var(--k-zone-dim); }

/* ── Body grid: main + MEI margin column (right) ───────────── */
/* handoff.md §γ. The 300px strip lines up with the hero's right column
   (margin-right cancels the .k-wrap padding), so its rule continues the
   hero's vertical. --k-mei-pad-top is shared by the main cell and the
   column, so the first <layer> line sits on the first line of the body. */

.k-body {
    --k-mei-pad-top: 40px;
    display: grid; grid-template-columns: minmax(0, 1fr) var(--k-mei-col);
    margin-right: calc(-1 * var(--k-pad-x));
}
.k-body--home { --k-mei-pad-top: 34px; }
.k-body--post { --k-mei-pad-top: 36px; }
.k-body--blog { --k-mei-pad-top: 44px; }
.k-body__main { min-width: 0; padding: var(--k-mei-pad-top) var(--k-mei-gutter) 44px 0; }
.k-body--home .k-body__main { padding-bottom: 40px; }
.k-body__margin { position: relative; min-width: 0; border-left: 1px solid var(--k-rule); }

/* The column never makes the page taller: it is laid over the cell the main
   content sized. When the code does not fit it fades out over the last
   --k-mei-fade; template.js adds .is-fit when it does, so a complete <layer>
   keeps its closing lines. Below 150px of column only the links remain. */
.k-mei {
    position: absolute; inset: 0; container-type: size;
    display: flex; flex-direction: column;
    padding: var(--k-mei-pad-top) var(--k-mei-pad-end) var(--k-mei-pad-bottom) var(--k-mei-pad-x);
    font-family: var(--k-font-mono); font-size: var(--k-mei-size); line-height: var(--k-mei-lh);
}
.k-mei__code {
    flex: 0 1 auto; min-height: 0; overflow: hidden; white-space: pre; letter-spacing: var(--k-mei-tracking);
    user-select: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 max(var(--k-mei-fade-min), calc(100% - var(--k-mei-fade))), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0, #000 max(var(--k-mei-fade-min), calc(100% - var(--k-mei-fade))), transparent 100%);
}
.k-mei__code.is-fit { -webkit-mask-image: none; mask-image: none; }
@container (max-height: 150px) { .k-mei__code { visibility: hidden; } }

.k-mei__p    { color: var(--k-mei-punct); }
.k-mei__el   { color: var(--k-mei-el); }
.k-mei__attr { color: var(--k-mei-attr); }
.k-mei__msg  { color: var(--k-mei-msg); }
.k-mei__val  { color: var(--k-mei-val); }

.k-mei__links {
    flex: none; margin: 0; padding-top: var(--k-mei-links-gap);
    display: flex; flex-wrap: wrap; gap: 0 var(--k-mei-links-sep);
    letter-spacing: 0.02em; color: var(--k-mei-punct);
}
.k-mei__link { color: var(--k-mei-el); text-decoration: none; }
.k-mei__link:hover, .k-mei__link:focus-visible { color: var(--k-accent); text-decoration: underline; }

/* ── Section blocks ────────────────────────────────────────── */

.k-section { margin-top: var(--k-space-5); padding-top: var(--k-space-4); border-top: 1px solid var(--k-rule); }
.k-section--strong { border-top-color: var(--k-rule-strong); }
.k-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.k-section__head .k-eyebrow { margin-bottom: 0; }
.k-section__head h2 { margin: 0; }
.k-section__more { font-family: var(--k-font-mono); font-size: var(--k-text-sm); letter-spacing: 0.1em; text-transform: uppercase; }
/* the arrow is decoration, so it lives here and not inside the translation;
   the empty alt text keeps screen readers from announcing «rightwards arrow» */
.k-section__more::after { content: " \2192" / ""; }
.k-section__head--gap { margin-top: var(--k-space-5); }
.k-block-label { margin-bottom: 14px; }

/* ── Dense rows ────────────────────────────────────────────── */

/* announcement row: sub-type | title | date */
.k-rows { border-bottom: 1px solid var(--k-rule); }
.k-row {
    display: grid; grid-template-columns: 108px minmax(0, 1fr) 130px; gap: 14px;
    padding: 15px 0; border-top: 1px solid var(--k-rule);
    font-size: var(--k-text-body); line-height: var(--k-lh-snug);
}
.k-row--compact { padding: 13px 0; font-size: var(--k-text-list); }
.k-row__title { color: var(--k-ink); text-wrap: pretty; }
.k-row__title:hover { color: var(--k-accent); text-decoration: none; }
.k-row__date { font-size: var(--k-text-date); color: var(--k-muted); text-align: left; }

/* index row: year | kind+title+meta | links */
.k-idxrow {
    display: grid; grid-template-columns: 96px minmax(0, 1fr) 120px; gap: 0 22px;
    border-bottom: 1px solid var(--k-rule); align-items: start;
}
.k-idxrow > * { padding: 16px 0; }
.k-idxrow__year { font-family: var(--k-font-mono); font-size: var(--k-text-data); color: var(--k-muted); }
.k-idxrow__title { display: block; font-size: 18px; font-weight: 700; line-height: var(--k-lh-card); letter-spacing: -0.015em; color: var(--k-ink); margin-top: 5px; text-wrap: pretty; }
.k-idxrow__title:hover { color: var(--k-accent); text-decoration: none; }
.k-idxrow__meta { font-family: var(--k-font-mono); font-size: var(--k-text-sm); color: var(--k-muted); margin-top: 6px; }
.k-links { font-family: var(--k-font-mono); font-size: var(--k-text-sm); letter-spacing: 0.06em; line-height: 1.9; }
.k-links a { display: block; }

/* bibliographic row: year | reference | links */
.k-listrow {
    display: grid; grid-template-columns: 74px minmax(0, 1fr) 116px; gap: 0 22px;
    border-bottom: 1px solid var(--k-rule);
}
.k-listrow > * { padding: 14px 0; }
.k-listrow__year { font-family: var(--k-font-mono); font-size: var(--k-text-data); color: var(--k-muted); }
.k-listrow__ref { font-size: var(--k-text-list); line-height: var(--k-lh-list); text-wrap: pretty; }
.k-listrow__ref p { margin: 0; }
.k-listrow__ref a { color: var(--k-ink); }
.k-listrow__ref a:hover { color: var(--k-accent); }

/* feed row: text | date */
.k-feedrow {
    display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: var(--k-space-4);
    border-top: 1px solid var(--k-rule); padding: var(--k-space-4) 0;
}
.k-feedrow__title { display: block; font-size: var(--k-text-card); font-weight: 700; line-height: var(--k-lh-card); letter-spacing: -0.015em; color: var(--k-ink); margin-top: 6px; text-wrap: pretty; }
.k-feedrow__title:hover { color: var(--k-accent); text-decoration: none; }
.k-feedrow__lead { font-size: var(--k-text-list); line-height: var(--k-lh-list); color: var(--k-ink-soft); margin: 8px 0 0; max-width: var(--k-measure); }
.k-feed > .k-feedrow:first-child { border-top: 0; }
.k-feed > .k-feedrow:last-child { border-bottom: 1px solid var(--k-rule); }

/* numbered units (course) */
.k-units { max-width: var(--k-measure); font-size: var(--k-text-body); line-height: var(--k-lh-body); border-bottom: 1px solid var(--k-rule); }
.k-unit { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 16px; border-top: 1px solid var(--k-rule); padding: 12px 0; }
.k-unit__n { font-family: var(--k-font-mono); font-size: var(--k-text-data); color: var(--k-muted); }

/* ── Cards (pseudo-borders via 1px gap on rule) ────────────── */

.k-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px;
    background: var(--k-rule); border: 1px solid var(--k-rule);
}
.k-card { background: var(--k-bg); padding: var(--k-space-4); }
.k-card .k-kind { margin-bottom: 10px; }
.k-card__title { display: block; color: var(--k-ink); }
.k-card__title:hover { color: var(--k-accent); text-decoration: none; }
.k-card__meta { font-family: var(--k-font-mono); font-size: var(--k-text-sm); color: var(--k-muted); margin-top: 10px; }
.k-card__meta a { color: var(--k-accent); }

/* two-column bottom (Τελευταίο blog / Επιστημονική πείρα) */
.k-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }

/* ── Index (activities by kind) ────────────────────────────── */

.k-idx { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 0; }
.k-kinds { border-right: 1px solid var(--k-rule); padding: 26px 22px 26px 0; display: flex; flex-direction: column; gap: 6px; }
.k-kinds .k-eyebrow { margin-bottom: 6px; }
.k-kind-btn {
    display: block; width: 100%; text-align: left;
    font-family: var(--k-font-mono); font-size: var(--k-text-sm); letter-spacing: 0.06em;
    padding: 9px 12px; cursor: pointer; border: 1px solid var(--k-rule); background: transparent; color: var(--k-ink);
    text-decoration: none; border-radius: 0;
}
.k-kind-btn:hover { border-color: var(--k-rule-strong); text-decoration: none; }
.k-kind-btn[aria-pressed="true"], .k-kind-btn.active { border-color: var(--k-accent); background: var(--k-accent-bg); color: var(--k-on-accent); }
.k-idx__main { padding: 26px 0 0 28px; min-width: 0; }
/* Tag page: the index rows without the kinds column, flush with the header. */
.k-idx__main--solo { padding-left: 0; }

/* ── Scientific experience: sticky filters ─────────────────── */

.k-filters {
    position: sticky; top: 0; z-index: 5;
    background: var(--k-bg); border-bottom: 1px solid var(--k-rule-strong);
}
.k-filters__row { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; padding-top: 14px; padding-bottom: 14px; }
.k-filters__group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.k-filters__group .k-eyebrow { font-size: var(--k-text-xs); }
.k-filters__search { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.k-filter-btn {
    font-family: var(--k-font-mono); font-size: var(--k-text-sm); letter-spacing: 0.06em;
    padding: 5px 10px; cursor: pointer; border: 1px solid var(--k-field-border); background: transparent; color: var(--k-ink); border-radius: 0;
    min-height: 32px;
}
.k-filter-btn[aria-pressed="true"] { border-color: var(--k-accent); background: var(--k-accent-bg); color: var(--k-on-accent); }
.k-filters__input {
    background: transparent; border: 1px solid var(--k-field-border); color: var(--k-ink);
    font-family: var(--k-font-mono); font-size: var(--k-text-sm); padding: 6px 10px; width: 230px; border-radius: 0;
}
.k-filters__range { font-family: var(--k-font-mono); font-size: var(--k-text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--k-muted); }

.k-group { padding-top: var(--k-space-5); }
.k-group__head { display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--k-rule-strong); padding-bottom: 10px; }
.k-group__head h2 { font-size: 22px; letter-spacing: -0.02em; text-wrap: pretty; }
.k-group__count { font-family: var(--k-font-mono); font-size: var(--k-text-sm); letter-spacing: 0.1em; color: var(--k-muted); }
.k-group[hidden] { display: none; }

.k-empty { border-top: 1px solid var(--k-rule-strong); margin-top: var(--k-space-5); padding: var(--k-space-5) 0; max-width: 560px; }
.k-empty__title { font-size: var(--k-text-lead); font-weight: 700; letter-spacing: -0.015em; }
.k-empty p { font-size: var(--k-text-list); line-height: var(--k-lh-list); color: var(--k-muted); margin: 8px 0 0; }
.k-empty .k-btn { margin-top: 14px; }

/* pagination (client-side and Joomla) */
.k-pages { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: var(--k-space-5); }
.k-pages button, .k-pages a, .pagination .page-link, .pagination .page-item > span {
    font-family: var(--k-font-mono); font-size: var(--k-text-sm); letter-spacing: 0.06em; padding: 6px 11px; cursor: pointer;
    border: 1px solid var(--k-field-border); background: transparent; color: var(--k-ink); border-radius: 0; text-decoration: none; display: inline-block;
}
.k-pages [aria-current="page"], .k-pages [aria-pressed="true"], .pagination .page-item.active .page-link {
    border-color: var(--k-tab-active-bg); background: var(--k-tab-active-bg); color: var(--k-tab-active-ink);
}
.pagination { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; margin: var(--k-space-5) 0 0; padding: 0; }
/* kept in flow, so the buttons do not shift position from page to page */
.pagination .page-item.disabled { visibility: hidden; }
/* Joomla's icon font is not loaded: the arrow glyphs are typographic, and the
   explicit family keeps them so even if an icon font is added later */
.pagination .page-link [class^="icon-"] { display: inline; font-family: var(--k-font-mono); }
.pagination .icon-angle-left::before { content: "‹"; }
.pagination .icon-angle-right::before { content: "›"; }
.pagination .icon-angle-double-left::before { content: "«"; }
.pagination .icon-angle-double-right::before { content: "»"; }
.k-pagination { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: var(--k-space-5); padding-top: var(--k-space-4); border-top: 1px solid var(--k-rule); }
.k-pagination .counter, .k-pagination__counter { font-family: var(--k-font-mono); font-size: var(--k-text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--k-muted); margin: 0; }
.k-pagination .pagination { margin: 0; }

/* ── Post (announcement / blog) ────────────────────────────── */

.k-post { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; border-bottom: 1px solid var(--k-rule); }
.k-post--noimage { grid-template-columns: minmax(0, 1fr); }
.k-post__main { padding: 46px 36px 44px 0; min-width: 0; }
.k-post--noimage .k-post__main { padding-right: 0; }
.k-post__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-family: var(--k-font-mono); font-size: var(--k-text-sm); letter-spacing: 0.14em; text-transform: uppercase; }
.k-post__head .k-date { letter-spacing: 0.06em; font-size: var(--k-text-sm); }
.k-post__main h1 { margin: 18px 0 16px; }
.k-post__intro { font-size: var(--k-text-body); line-height: var(--k-lh-body); margin: 0 0 16px; max-width: 640px; }
.k-post__intro p { margin: 0 0 16px; }
.k-post__intro p:last-child { margin-bottom: 0; }
.k-post__image { background: var(--k-image); min-height: 420px; display: flex; align-items: flex-end; position: relative; }
.k-post__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k-post__image figcaption {
    position: relative; padding: 22px; font-family: var(--k-font-mono); font-size: var(--k-text-sm); letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--k-image-ink); background: var(--k-image); margin-top: auto; width: 100%;
}
.k-post__image:has(img) figcaption { background: color-mix(in srgb, var(--k-image) 85%, transparent); }
.k-post__body > .k-prose { max-width: var(--k-measure); }
.k-post .k-chips { margin-top: 22px; }
.k-blog__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-family: var(--k-font-mono); font-size: var(--k-text-sm); letter-spacing: 0.14em; text-transform: uppercase; }
.k-blog h1 { margin: 18px 0; max-width: 760px; }
.k-blog .k-chips { margin-top: 26px; }
.k-blog__image { margin: 0 0 var(--k-space-4); max-width: var(--k-measure); }

/* transition block → activity page */
.k-goto {
    border: 1px solid var(--k-rule-strong); padding: 18px 20px; max-width: 640px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: var(--k-space-3);
}
.k-goto__title { font-size: var(--k-text-body); font-weight: 700; line-height: 1.3; margin-top: 4px; }

/* related material (blog) */
.k-related__title { font-size: var(--k-text-body); font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; color: var(--k-ink); }

/* ── Light split (about, contact) ──────────────────────────── */

.k-split-light { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.k-split-light__main { padding: var(--k-space-5) 36px 40px 0; min-width: 0; }
.k-split-light__aside { border-left: 1px solid var(--k-rule); padding: var(--k-space-5) 0 var(--k-space-5) 26px; }
.k-split-light__aside .k-eyebrow { font-size: var(--k-text-xs); margin-bottom: 7px; }
.k-split-light__aside .k-rule { height: 1px; background: var(--k-rule); margin: var(--k-space-4) 0; }

/* CV (handoff template 13): portrait, identities and the MEI tablature in the
   side column. The MEI cell takes whatever height the biography leaves —
   at least 240px, the one place where the margin may lengthen the page
   (handoff §ε.6). */
.k-cv__interests { border-top: 1px solid var(--k-rule); margin-top: 32px; padding-top: 22px; }
.k-cv__aside { display: flex; flex-direction: column; }
.k-cv__portrait { margin: 0 0 26px; max-width: 320px; }
.k-cv__portrait img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; background: var(--k-image); }
.k-cv__portrait figcaption { margin-top: 8px; }
.k-cv__ids { font-family: var(--k-font-mono); font-size: var(--k-text-sm); line-height: 2.1; }
.k-cv__ids p, .k-cv__ids div { margin: 0; }
.k-cv__mei {
    --k-mei-pad-top: 16px; --k-mei-pad-x: 0; --k-mei-pad-end: 0;
    position: relative; flex: 1 1 auto; min-height: 240px;
    margin-top: 22px; border-top: 1px solid var(--k-rule);
}
.k-cv__portrait + .k-cv__mei { margin-top: 0; }
/* The tablature engraved by Verovio (js/mei.js): shown only once it holds an SVG. */
.k-cv__score { margin: 0 0 22px; }
.k-cv__score:not(:has(svg)) { display: none; }
.k-cv__zoom { display: block; cursor: zoom-in; }
.k-cv__zoom:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 3px; }

/* Image popup: Joomla's core <joomla-dialog> (popupType image, from
   joomla.dialog-autocreate) — the template has no Bootstrap/Cassiopeia
   dialog styles, so the lightbox is styled here. The close button is
   printed with an empty label; the × comes from ::before. */
joomla-dialog.k-lightbox dialog { padding: 0; border: 0; background: transparent; max-width: 94vw; max-height: 94vh; overflow: visible; }
joomla-dialog.k-lightbox dialog::backdrop { background: rgb(10 12 16 / 0.86); }
joomla-dialog.k-lightbox .joomla-dialog-header.empty,
joomla-dialog.k-lightbox .joomla-dialog-footer.empty { display: none; }
joomla-dialog.k-lightbox .joomla-dialog-body { position: relative; }
joomla-dialog.k-lightbox .joomla-dialog-body > img { display: block; max-width: 94vw; max-height: 94vh; width: auto; height: auto; background: var(--k-image); }
joomla-dialog.k-lightbox.loading .joomla-dialog-body { opacity: 0; }
joomla-dialog.k-lightbox.loaded .joomla-dialog-body { opacity: 1; transition: opacity .25s ease; }
joomla-dialog.k-lightbox .buttons-holder { position: absolute; top: 8px; right: 8px; }
joomla-dialog.k-lightbox .button-close {
    width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: rgb(10 12 16 / 0.6); color: #eceae5; font: 400 24px/36px var(--k-font-mono);
}
joomla-dialog.k-lightbox .button-close::before { content: "\00d7"; }
/* Video (popupType iframe): 16:9 at the width template.js sets (960px max);
   the × sits above the frame, clear of the player's own controls. */
joomla-dialog.k-lightbox[type="iframe"] dialog { width: 94vw; }
joomla-dialog.k-lightbox[type="iframe"] .joomla-dialog-header { padding: 0; border: 0; }
joomla-dialog.k-lightbox[type="iframe"] .buttons-holder { top: -44px; right: 0; }
joomla-dialog.k-lightbox iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; background: #000; }
joomla-dialog.k-lightbox .button-close:hover { background: rgb(10 12 16 / 0.85); }
joomla-dialog.k-lightbox .button-close:focus-visible { outline: 2px solid var(--k-accent-on-dark); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    joomla-dialog.k-lightbox.loaded .joomla-dialog-body { transition: none; }
}
/* Inline audio players in article text (the former Flash popups). */
.k-prose audio { vertical-align: middle; height: 32px; max-width: 100%; }

/* ── Key article «soggetto cavato» (handoff template 15) ───────
   The text lives in cli/data/mei-key.{el,en}.html; these are the classes it
   uses. Code inside the text is content to be read, so it takes the reading
   colours, not the faint --k-mei-* of the margin (handoff §ε.9). */

.k-langswitch { margin-left: auto; display: inline-flex; }
.k-langswitch__item {
    font-size: var(--k-text-xs); letter-spacing: 0.12em; padding: 4px 9px; margin-left: -1px;
    border: 1px solid var(--k-rule-strong); color: var(--k-ink); text-decoration: none;
}
.k-langswitch__item:hover { text-decoration: none; background: var(--k-surface); }
.k-langswitch__item.is-active { background: var(--k-tab-active-bg); color: var(--k-tab-active-ink); }

.k-key__section { border-top: 1px solid var(--k-rule); margin-top: 38px; padding-top: 28px; }
.k-key__num {
    font-family: var(--k-font-mono); font-size: var(--k-text-xs); letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--k-muted); margin-bottom: 8px;
}
.k-prose .k-key__section h2 { margin: 0 0 14px; }
.k-prose .k-key__after { margin-top: 22px; }
.k-prose .k-key__note { font-size: 15px; color: var(--k-ink-soft); margin-top: 16px; }
.k-prose .k-key__cite { font-family: var(--k-font-mono); font-size: var(--k-text-sm); font-style: normal; letter-spacing: 0.04em; color: var(--k-muted); margin: 8px 0 0; }
.k-prose .k-key__refs { font-size: 15px; line-height: 1.65; }
.k-try .k-label { margin-bottom: 7px; }
.k-prose .k-key__table { max-width: 560px; font-family: var(--k-font-mono); font-size: 13px; }
.k-prose .k-key__table td:last-child { color: var(--k-accent); }

/* Reading rows: label, then one cell per note; the last row in accent. */
.k-rows { overflow-x: auto; max-width: 100%; border-bottom: 1px solid var(--k-rule); font-family: var(--k-font-mono); font-size: var(--k-text-meta); }
.k-rows__row {
    display: grid; grid-template-columns: 64px repeat(var(--k-rows-n, 8), 56px); align-items: baseline;
    width: max-content; min-width: 100%; border-top: 1px solid var(--k-rule); padding: 8px 0;
}
.k-rows__row > span { text-align: center; }
.k-rows__row:last-child > span { color: var(--k-accent); }
.k-rows__row > .k-rows__label, .k-rows__row:last-child > .k-rows__label {
    text-align: left; font-size: var(--k-text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--k-muted);
}

/* A score engraved by Verovio. Its SVG says color="black" (lines use
   currentColor) and leaves glyphs and syllables at the initial black fill:
   CSS wins over the attribute, and fill inherits, so all follow the theme. */
.k-score { margin: var(--k-space-4) 0; }
.k-score__svg svg { display: block; width: 100%; height: auto; max-width: var(--k-measure); }
.k-cv__score .k-score__svg svg { max-width: 100%; }
.k-score__svg svg, .k-score__svg [color] { color: var(--k-ink); fill: currentColor; }
/* Syllables keep Verovio's own font: it spaces the notes by that font's
   metrics, and the wider Literata made neighbours touch. */
.k-score__svg:empty { display: none; }
.k-score .k-rows { margin-top: 6px; }

/* The <layer> as text in the key article: same markup as the margin. */
.k-layer {
    background: var(--k-surface); padding: 16px 18px; max-width: var(--k-measure); overflow-x: auto;
    font-family: var(--k-font-mono); font-size: var(--k-text-sm); line-height: 1.9; white-space: pre;
}
.k-layer .k-mei__p, .k-layer .k-mei__attr { color: var(--k-muted); }
.k-layer .k-mei__el, .k-layer .k-mei__val { color: var(--k-ink); }
.k-layer .k-mei__msg { color: var(--k-accent); }

/* «Try your own title»: hidden until js/mei.js runs — without JS it does nothing. */
.k-try [hidden] { display: none; }
.k-try .k-input { max-width: 560px; }
.k-try .k-input:focus { border-color: var(--k-ink); outline: none; }
.k-try .k-try__msg {
    border: 1px dashed var(--k-field-border); padding: 18px 20px; max-width: 560px; margin: 14px 0 0;
    font-family: var(--k-font-mono); font-size: var(--k-text-meta); line-height: 1.7; color: var(--k-muted);
}
.k-try .k-try__meta { margin: 18px 0 0; font-family: var(--k-font-mono); font-size: var(--k-text-meta); letter-spacing: 0.04em; color: var(--k-muted); }
.k-try__solm { color: var(--k-accent); }
.k-try .k-score__svg { margin-top: 14px; }
.k-try__rows { margin-top: 6px; }
.k-try .k-layer { margin-top: 16px; }
.k-idlist { font-family: var(--k-font-mono); font-size: var(--k-text-meta); line-height: 2.1; }
.k-idlist a { display: block; }
.k-numbers { font-family: var(--k-font-mono); font-size: var(--k-text-meta); line-height: 2.1; color: var(--k-muted); }

/* ── Forms (one style everywhere) ──────────────────────────── */

.k-form, .k-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.k-form { display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
/* legend ignores margin-bottom in Chromium; pad instead. No float: a floated
   legend is taken out of flow and the first field lands on top of its text */
.k-form legend { font-family: var(--k-font-mono); font-size: var(--k-text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--k-muted); padding: 0 0 14px; margin: 0; }
.k-field { display: flex; flex-direction: column; gap: 7px; }
.k-label, .k-form label, .control-label label, .form-label {
    display: block; font-family: var(--k-font-mono); font-size: var(--k-text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--k-muted);
}
.k-form .star, .control-label .star { color: var(--k-accent); }
.k-input, .k-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.k-form textarea, .k-form select, .form-control, .form-select, .inputbox {
    background: transparent; border: 1px solid var(--k-field-border); color: var(--k-ink);
    font-family: var(--k-font-serif); font-size: var(--k-text-list); padding: 11px 12px; width: 100%; border-radius: 0;
    box-shadow: none; outline-offset: 2px;
}
.k-form textarea { resize: vertical; min-height: 9em; }
.k-form input:focus, .k-form textarea:focus, .form-control:focus { border-color: var(--k-ink); outline: none; }
.k-form .control-group { display: flex; flex-direction: column; gap: 7px; }
.k-form .control-group.k-form__actions { flex-direction: row; }
.k-form .form-text, .k-form .form-control-feedback { font-family: var(--k-font-mono); font-size: var(--k-text-sm); color: var(--k-muted); }
.k-form .invalid, .k-form .form-control.invalid { border-color: var(--k-accent); }
.k-form .form-check { display: flex; gap: 8px; align-items: baseline; }
.k-form .form-check label, .k-form .form-check-label { font-family: var(--k-font-serif); font-size: var(--k-text-list); text-transform: none; letter-spacing: 0; color: var(--k-ink); }
.k-form .g-recaptcha, .k-form .cf-turnstile, .k-form .captcha { min-height: 44px; }
.k-form__note { font-family: var(--k-font-mono); font-size: var(--k-text-sm); letter-spacing: 0.1em; text-transform: uppercase; color: var(--k-muted); margin: 0 0 20px; }
.k-form .btn, .k-form button[type="submit"] {
    align-self: flex-start; background: var(--k-accent-bg); color: var(--k-on-accent); border: 0;
    font-family: var(--k-font-mono); font-size: var(--k-text-meta); letter-spacing: 0.06em; padding: 12px 16px; cursor: pointer; border-radius: 0;
}
.k-form .btn-secondary, .k-form button[type="reset"] { background: transparent; color: var(--k-ink); border: 1px solid var(--k-rule-strong); }

/* generic Bootstrap-classed forms rendered by core (login, profile…) */
.k-main .control-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.k-main .btn {
    display: inline-block; font-family: var(--k-font-mono); font-size: var(--k-text-meta); letter-spacing: 0.06em; padding: 11px 15px;
    border: 1px solid var(--k-rule-strong); background: transparent; color: var(--k-ink); border-radius: 0; box-shadow: none; text-decoration: none; cursor: pointer;
}
.k-main .btn-primary { background: var(--k-accent-bg); border-color: var(--k-accent-bg); color: var(--k-on-accent); }

/* ── Messages ──────────────────────────────────────────────── */

#system-message-container { max-width: var(--k-container); margin: 0 auto; padding: 0 var(--k-pad-x); }
#system-message-container:empty { display: none; }
.alert, joomla-alert {
    display: block; border: 1px solid var(--k-rule-strong); border-left-width: 3px; padding: 14px 18px; margin: var(--k-space-4) 0;
    font-size: var(--k-text-list); background: transparent; color: var(--k-ink); border-radius: 0; box-shadow: none;
}
.alert-danger, .alert-error, joomla-alert[type="danger"] { border-left-color: var(--k-accent); }
.alert-success, joomla-alert[type="success"] { border-left-color: var(--k-signal); }
.alert-heading, .alert h4 { font-family: var(--k-font-mono); font-size: var(--k-text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--k-muted); margin-bottom: 6px; font-weight: 400; }
.alert .btn-close, joomla-alert .joomla-alert--close { background: transparent; border: 0; color: var(--k-muted); font-family: var(--k-font-mono); cursor: pointer; float: right; }
.badge { font-family: var(--k-font-mono); font-size: var(--k-text-xs); letter-spacing: 0.12em; text-transform: uppercase; background: transparent; color: var(--k-accent); border: 1px solid var(--k-accent); padding: 2px 6px; border-radius: 0; font-weight: 400; }

/* ── Modules ───────────────────────────────────────────────── */

.k-module { margin-bottom: var(--k-space-5); }
.k-module__title { font-size: var(--k-text-xs); font-weight: 400; margin-bottom: 12px; letter-spacing: 0.14em; }
.k-modules--top { padding-top: var(--k-space-5); }
.k-modules--bottom, .k-home-a, .k-home-b { border-top: 1px solid var(--k-rule); padding-top: var(--k-space-5); padding-bottom: var(--k-space-2); }
.k-home-a { border-top-color: var(--k-rule-strong); }
.k-home-b { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; padding-bottom: var(--k-space-6); }
.k-home-b .k-module { margin-bottom: 0; }
/* Όσο το «Τελευταίο blog» μένει αδημοσίευτο (άδειο blog), το home-b έχει ένα
   μόνο παιδί και το auto-fit θα το άπλωνε σε όλο το πλάτος. */
.k-home-b .k-module:only-child { max-width: 560px; }
.k-home-a .k-module__title { font-family: var(--k-font-serif); font-size: var(--k-text-lg); font-weight: 700; letter-spacing: -0.02em; text-transform: none; color: var(--k-ink); margin-bottom: 18px; }

/* generic module lists (mod_articles default, mod_menu in footer, tags) */
.k-module ul:not([class]), .mod-articles, .mod-list { list-style: none; margin: 0; padding: 0; }
.mod-articles > li, .k-module ul:not([class]) > li { border-top: 1px solid var(--k-rule); padding: 12px 0; }
.mod-articles > li:last-child, .k-module ul:not([class]) > li:last-child { border-bottom: 1px solid var(--k-rule); }
.mod-articles-link, .mod-articles-title a, .mod-articles-title { color: var(--k-ink); font-weight: 700; font-size: var(--k-text-body); line-height: var(--k-lh-card); }
.mod-articles-link:hover { color: var(--k-accent); text-decoration: none; }
.mod-articles-date, .mod-articles-category, .mod-articles-author, .mod-articles-hits { font-family: var(--k-font-mono); font-size: var(--k-text-sm); color: var(--k-muted); display: inline-block; margin-top: 4px; }
.mod-articles-introtext { font-size: var(--k-text-list); line-height: var(--k-lh-list); color: var(--k-ink-soft); margin-top: 8px; }
.mod-articles-readmore { display: inline-block; margin-top: 6px; }
.mod-articles-image, .mod-articles-image img { display: none; }
.mod-articles-tags a, .tags a, .tag-body a { display: inline-block; border: 1px solid var(--k-accent); color: var(--k-accent); font-family: var(--k-font-mono); font-size: var(--k-text-sm); letter-spacing: 0.04em; padding: 3px 8px; margin: 2px 4px 2px 0; text-decoration: none; background: transparent; border-radius: 0; }
.tags, ul.tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tag-body { margin: var(--k-space-4) 0; }
.tagspopular ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }

/* mod_articles kolydart layouts */
.k-modrows .k-row:first-child { border-top: 1px solid var(--k-rule); }
.k-modcards .k-cards { margin-top: 0; }

/* sidebar layout */
.k-with-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.k-with-sidebar__main { min-width: 0; padding-right: 36px; }
.k-with-sidebar__aside { border-left: 1px solid var(--k-rule); padding: var(--k-space-5) 0 var(--k-space-5) 26px; }
.k-with-sidebar__main > * { max-width: none; padding-left: 0; padding-right: 0; }

/* ── Footer ────────────────────────────────────────────────── */

.k-footer { border-top: 1px solid var(--k-zone-rule); margin-top: auto; }
.k-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; padding-top: 40px; padding-bottom: 40px; }
.k-footer__brand .k-brand__name { font-size: 18px; }
/* Το `footer-a` αποδίδεται με chrome `none`, οπότε το περιεχόμενο του module
   βγαίνει ωμό: ο κανόνας πιάνει και <p> και <div>, ώστε μια επεξεργασία από το
   admin που αλλάζει το wrapper να μη σβήσει σιωπηλά τη μορφοποίηση. */
.k-footer__brand p, .k-footer__brand > div:not([class]) { font-size: var(--k-text-sm-body); line-height: var(--k-lh-list); color: var(--k-zone-dim); margin: 10px 0 0; max-width: 300px; }
.k-footer .k-module { margin-bottom: 0; font-family: var(--k-font-mono); font-size: var(--k-text-sm); letter-spacing: 0.1em; text-transform: uppercase; line-height: 2.2; }
/* Μια στήλη υποσέλιδου μπορεί να έχει δύο modules (η πλοήγηση έχει το αντίγραφο
   του κύριου μενού και το «Περισσότερα»)· χωρίς αυτό οι δύο λίστες κολλάνε. */
.k-footer__col .k-module + .k-module { margin-top: 22px; }
.k-footer .k-module__title { color: var(--k-zone-muted); margin-bottom: 0; line-height: 2.2; }
.k-footer .k-module ul, .k-footer .k-nav__list, .k-footer .mod-menu { list-style: none; margin: 0; padding: 0; display: block; }
.k-footer .k-module li { border: 0; padding: 0; }
.k-footer .k-module a { color: var(--k-zone-ink); }
.k-footer__ids .k-module a { color: var(--k-accent-on-dark); }
.k-footer .k-module a:hover { text-decoration: underline; }
.k-footer .k-module p { text-transform: none; letter-spacing: 0; font-family: var(--k-font-serif); font-size: var(--k-text-sm-body); line-height: var(--k-lh-list); color: var(--k-zone-dim); }
.k-footer__bottom { border-top: 1px solid var(--k-zone-rule); }
.k-footer__bottom-row {
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px;
    font-family: var(--k-font-mono); font-size: var(--k-text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--k-zone-muted);
}
.k-footer__copy { text-transform: none; }
.k-footer__links a, .k-footer__links .k-nav__link { color: var(--k-zone-muted); }
.k-footer__links ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; flex-wrap: wrap; }
.k-footer__end { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; }
.k-footer__key { color: var(--k-zone-muted); }
.k-footer__key:hover, .k-footer__key:focus-visible { color: var(--k-accent-on-dark); text-decoration: underline; }

/* newsletter (AcyMailing / any form) in footer: stacked fields, one primary */
.k-footer__newsletter form, .k-footer__newsletter .acym_module_form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.k-footer__newsletter .acym_form, .k-footer__newsletter .acym_module_form > div { display: contents; }
.k-footer__newsletter table, .k-footer__newsletter tbody, .k-footer__newsletter tr, .k-footer__newsletter td { display: block; width: 100%; padding: 0; border: 0; }
/* AcyMailing emits no placeholders, so the label is the only name a field has:
   same mono label-above-field pattern as the contact form */
.k-footer__newsletter .onefield { margin: 0; }
.k-footer__newsletter .onefield + .onefield { margin-top: 6px; }
/* the extra class outweighs AcyMailing's own `.acym_module_form label { display: inline-block }`,
   which has equal specificity and loads after this file */
.k-footer__newsletter label, .k-footer__newsletter .acym_module_form label { display: block; width: 100%; margin: 0; padding: 0; }
.k-footer__newsletter .acym__users__creation__fields__title {
    display: block; font-family: var(--k-font-mono); font-size: var(--k-text-xs); letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--k-zone-muted); line-height: 1.6; margin-bottom: 5px;
}
.k-footer__newsletter .acym__field__error__block:empty { display: none; }
.k-footer__newsletter input:not([type="submit"]):not([type="checkbox"]):not([type="hidden"]) {
    background: var(--k-zone-field); border: 1px solid var(--k-zone-border); color: var(--k-zone-ink);
    font-family: var(--k-font-serif); font-size: var(--k-text-date); line-height: 1.4; padding: 8px 10px; width: 100%; border-radius: 0; letter-spacing: 0; text-transform: none;
}
.k-footer__newsletter input::placeholder { color: var(--k-zone-muted); }
.k-footer__newsletter input[type="submit"], .k-footer__newsletter button, .k-footer__newsletter .btn {
    background: var(--k-accent-bg); color: var(--k-on-accent); border: 0; font-family: var(--k-font-mono); font-size: var(--k-text-meta);
    letter-spacing: 0.06em; text-transform: none; padding: 10px 12px; cursor: pointer; border-radius: 0; width: auto; align-self: flex-start;
}
.k-footer__newsletter .acym_introtext, .k-footer__newsletter .acym_posttext, .k-footer__newsletter .acym__module__description { text-transform: none; letter-spacing: 0; font-family: var(--k-font-serif); font-size: var(--k-text-sm-body); color: var(--k-zone-dim); }
.k-footer__newsletter .acym_checkbox, .k-footer__newsletter .acym__module__checkbox { text-transform: none; letter-spacing: 0; font-family: var(--k-font-serif); font-size: var(--k-text-date); color: var(--k-zone-dim); line-height: 1.5; }

/* ── Back to top ───────────────────────────────────────────── */

.k-backtop {
    position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    background: var(--k-tab-active-bg); color: var(--k-tab-active-ink); font-family: var(--k-font-mono); text-decoration: none;
}
.k-backtop:hover { text-decoration: none; }

/* ── Error / offline ───────────────────────────────────────── */

.k-error .k-page__head, .k-offline .k-page__head { display: block; }
.k-prose__debug { font-family: var(--k-font-mono); font-size: var(--k-text-meta); overflow-x: auto; }

/* ── Breadcrumbs ───────────────────────────────────────────── */

.k-crumbs-bar { border-bottom: 1px solid var(--k-rule); }
.k-crumbs-bar .k-wrap { padding-top: 12px; padding-bottom: 12px; }
.k-crumbs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; font-family: var(--k-font-mono); font-size: var(--k-text-sm); letter-spacing: 0.06em; color: var(--k-muted); }
.k-crumbs__link { color: var(--k-ink-soft); }
.k-crumbs__item--current { color: var(--k-accent); }
.k-crumbs__item + .k-crumbs__item::before { content: "/"; color: var(--k-rule-strong); margin-right: 10px; }

/* Όταν από κάτω ακολουθεί hero, η διαδρομή παίρνει τα χρώματα της ζώνης, ώστε
   μενού, διαδρομή και hero να διαβάζονται ως ένα σκούρο μπλοκ. Ως διαχωριστικά
   μένουν η γραμμή από πάνω και το border-top του ίδιου του hero. Χωρίς hero η
   διαδρομή μένει ανοιχτή, όπως το περιεχόμενο που ακολουθεί. */
.k-crumbs-bar:has(+ .k-main .k-hero) { background: var(--k-zone); border-top: 1px solid var(--k-zone-rule); border-bottom: 0; }
.k-crumbs-bar:has(+ .k-main .k-hero) .k-crumbs__list { color: var(--k-zone-muted); }
.k-crumbs-bar:has(+ .k-main .k-hero) .k-crumbs__link { color: var(--k-zone-soft); }
.k-crumbs-bar:has(+ .k-main .k-hero) .k-crumbs__item--current { color: var(--k-accent-on-dark); }
.k-crumbs-bar:has(+ .k-main .k-hero) .k-crumbs__item + .k-crumbs__item::before { color: var(--k-zone-border-strong); }

/* Το προεπιλεγμένο markup του mod_breadcrumbs, για την περίπτωση που το module
   αποδοθεί χωρίς το override (π.χ. σε σελίδα component.php). */
.mod-breadcrumbs, .breadcrumb { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; font-family: var(--k-font-mono); font-size: var(--k-text-sm); letter-spacing: 0.06em; color: var(--k-muted); }
.breadcrumb-item a { color: var(--k-ink-soft); }
.breadcrumb-item.active { color: var(--k-accent); }
.breadcrumb-item + .breadcrumb-item::before { content: "/"; color: var(--k-rule-strong); margin-right: 10px; }
.mod-breadcrumbs__divider { display: none; }

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 900px) {
    :root { --k-pad-x: var(--k-pad-x-mobile); }

    .k-hero__grid, .k-split-light, .k-post, .k-idx, .k-with-sidebar { grid-template-columns: minmax(0, 1fr); }
    .k-hero__aside { border-left: 0; border-top: 1px solid var(--k-zone-rule); padding: 30px var(--k-pad-x); }
    .k-hero__main { padding-left: var(--k-pad-x); padding-right: var(--k-pad-x); }
    .k-split-light__aside, .k-with-sidebar__aside { border-left: 0; border-top: 1px solid var(--k-rule); padding-left: 0; }
    .k-split-light__main, .k-post__main, .k-with-sidebar__main { padding-right: 0; }
    .k-idx__main { padding-left: 0; }
    .k-row, .k-idxrow, .k-listrow, .k-feedrow { grid-template-columns: minmax(0, 1fr); gap: 5px 0; }
    .k-idxrow > *, .k-listrow > * { padding: 6px 0; }
    .k-idxrow > :first-child, .k-listrow > :first-child { padding-top: 16px; }
    .k-idxrow > :last-child, .k-listrow > :last-child { padding-bottom: 16px; }
    .k-links a { display: inline-block; margin-right: 14px; }
    .k-kinds { border-right: 0; padding: 20px 0; flex-direction: row; flex-wrap: wrap; }
    .k-kind-btn { width: auto; }
    .k-post__image { min-height: 240px; order: -1; }
    .k-post__image img { position: static; height: auto; }
    .k-post__image figcaption { position: absolute; bottom: 0; left: 0; }
    .k-filters__search { margin-left: 0; width: 100%; }
    .k-filters__input { width: 100%; }
}

@media (max-width: 760px) {
    .k-burger { display: block; }
    .k-nav { display: none; flex-basis: 100%; padding-top: 10px; }
    .k-header.k-nav-open .k-nav { display: block; }
    .k-nav__list { display: block; white-space: normal; }
    .k-nav__item { border-bottom: 1px solid var(--k-zone-rule); }
    .k-nav__link, .k-nav__text, .k-nav__parent { display: block; padding: 12px 0; min-height: 44px; }
    .k-nav__parent { display: flex; justify-content: space-between; align-items: center; padding: 0; }
    .k-nav__parent .k-nav__link { flex: 1; }
    .k-nav__toggle { padding: 12px 14px; font-size: 12px; min-height: 44px; }
    .k-nav__sub { position: static; border: 0; padding: 0 0 8px 14px; min-width: 0; display: none; }
    .k-nav__item--parent:hover > .k-nav__sub, .k-nav__item--parent:focus-within > .k-nav__sub { display: none; }
    .k-nav__item--parent.k-open > .k-nav__sub { display: block; }
    .k-nav__sub .k-nav__item { border-bottom: 0; }
    .k-nav__sub .k-nav__link { padding: 8px 0; min-height: 40px; }
    .k-nav__lang { margin: 12px 0 0; }
    .k-burger { margin-left: auto; }
    .k-theme { order: 3; }
    .k-theme__btn { width: 44px; height: 44px; }
    .k-lang__item { min-width: 44px; height: 44px; }
    .k-btn, .k-filter-btn, .k-kind-btn { min-height: 44px; display: inline-flex; align-items: center; }
    .k-title-3xl, .k-title-2xl { letter-spacing: -0.02em; }
    .k-footer__grid { gap: 28px; }
}

/* The MEI column: hidden on small screens and on paper. The footer link to
   the key stays — it is the only way there from a phone. */
@media (max-width: 900px), print {
    .k-body { grid-template-columns: minmax(0, 1fr); margin-right: 0; }
    .k-body__main { padding-right: 0; }
    .k-body__margin, .k-cv__mei, .k-cv__score { display: none; }
}

/* ── Core edit button (joomla.content.icons) — rules from Cassiopeia ── */

.float-end { float: right !important; }

[role="tooltip"]:not(.show) {
    z-index: 1070;
    color: #000;
    text-align: start;
    background: #fff;
    border: 1px solid #6d757e;
    border-radius: .25rem;
    max-width: 100%;
    margin: .5em;
    padding: .5em;
    display: none;
    right: 5em;
    box-shadow: 0 0 .5rem #000c;
}

[role="tooltip"]:not(.show)[id^="editarticle-"] { margin-inline-start: -10em; right: auto; }

:focus + [role="tooltip"], :hover + [role="tooltip"] { display: block; position: absolute; }

/* ── Print ─────────────────────────────────────────────────── */

@media print {
    .k-theme, .k-burger, .k-nav, .k-backtop, .k-filters, .k-footer__newsletter { display: none !important; }
    .k-zone { color: var(--k-zone-ink); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    a { text-decoration: none; }
    .k-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .k-hero__aside { border-left: 0; border-top: 1px solid var(--k-zone-rule); }
}