/* ═══════════════════════════════════════════════════════════════════════
   ZHURMA — zhurma.css · REDESIGN FOUNDATION (chunk 1) · 2026-08-10
   The single source of truth for the new design system: tokens, the
   "chameleon" channel-colour system, typography, and every foundation-level
   component class the later template chunks build on.

   LAWS (hard, non-negotiable):
     · zero border-radius everywhere — including inputs and buttons
     · flat surfaces — NO box-shadow anywhere except the fixed radio dock
     · 2px rules between sections, 1px rules between rows
     · flush-left everything (headings, copy, button labels)
     · light mode ONLY — no dark mode, no prefers-color-scheme branch
     · no emoji in UI chrome
     · nothing renders below the ~9px micro floor
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');

/* ═══ 1. TOKENS ══════════════════════════════════════════════════════════ */

:root {
  /* ── surface + ink ── */
  --color-bg: #f3f2f2;        /* the only page background */
  --color-surface: #eae9e9;
  --color-text: #201e1d;      /* ink */
  --color-accent: #ec3013;    /* ZHURMA red */
  --color-accent-2: #e15b47;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* ── neutral ramp 100 → 900 ── */
  --n-100: #f8f4f4;
  --n-200: #eae7e7;
  --n-300: #d7d3d3;
  --n-400: #bab6b6;
  --n-500: #9b9797;
  --n-600: #7d7979;
  --n-700: #605d5d;
  --n-800: #444141;
  --n-900: #2d2b2b;

  /* ── channel palette (the chameleon) ────────────────────────────────
     01 Politikë · 02 Ekonomi · 03 Kronikë e zezë · 04 Sport
     05 Viral & Showbiz · 06 Tech · 07 Jetesa · 08 Opinion · IX Muzeu   */
  --ch-politike: #ec3013;   /* red — canonical, = accent */
  --ch-ekonomi:  #c88a00;   /* gold  */
  --ch-kronike:  #201e1d;   /* ink   */
  --ch-sport:    #00875a;   /* green */
  --ch-viral:    #e23d7d;   /* rose  */
  --ch-tech:     #2e6be6;   /* blue  */
  --ch-jetesa:   #00907c;   /* teal  */
  --ch-opinion:  #9a4dd1;   /* violet */
  --ch-muzeu:    #201e1d;   /* ink + red accents (see --ch-accent) */

  /* THE channel variable. Every accent surface in the theme reads
     var(--ch, var(--color-accent)) — never a literal channel colour.
     Ballina (home) and Politikë keep canonical red by leaving it alone. */
  --ch: var(--color-accent);
  /* secondary accent inside a channel; only Muzeu overrides it (ink + red) */
  --ch-accent: var(--ch);
  /* ink used by the logo bars 2-4; channels flip it to --ch (monochrome) */
  --logo-ink: var(--color-text);

  /* ── type families ── */
  --font-sans: 'Archivo', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', Times, serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, 'Liberation Mono', Menlo, monospace;

  /* ── type scale (px; 9px is the absolute floor) ── */
  --fs-micro-xs: 9px;    /* the floor — rare, credit lines only */
  --fs-micro: 10px;      /* the standard micro-label */
  --fs-micro-lg: 11px;   /* micro-label, roomy */
  --fs-meta: 12px;
  --fs-ui: 14px;
  --fs-body: 16px;
  --fs-read: 17px;       /* long-read serif body */
  --fs-lead: 19px;
  --fs-h4: 21px;
  --fs-h3: 25px;
  --fs-h2: 31px;

  /* ── fluid display sizes ── */
  --fs-masthead: clamp(38px, 6vw, 62px);
  --fs-hero: clamp(30px, 4.6vw, 54px);
  --fs-article: clamp(28px, 4.4vw, 46px);
  --fs-giant: clamp(64px, 10vw, 150px);

  /* ── tracking ── */
  --track-display: -0.03em;   /* headlines */
  --track-micro: 0.12em;      /* micro-labels: .08–.16em band */
  --track-micro-wide: 0.16em;

  /* ── spacing (4pt grid) ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --gutter: 20px;
  --measure: 64ch;            /* long-read max-width */
  --vgutter: 28px;            /* left gutter reserved for .vlabel */

  /* ── rules ── */
  --rule-section: 2px;
  --rule-row: 1px;

  /* ── the ONE permitted shadow: the fixed radio dock ── */
  --radio-shadow: 0 -1px 0 var(--color-text), 0 -14px 28px color-mix(in srgb, #201e1d 14%, transparent);
}

/* ═══ 2. THE CHAMELEON — body classes set --ch ═══════════════════════════
   Ghost's {{body_class}} emits `tag-<slug>` on post and tag templates, so a
   channel page paints itself simply by carrying its tag. Home (Ballina) has
   no tag class → --ch stays red. Aliases cover the slugs already live in the
   taxonomy (teknologji, kronike, lifestyle, …) alongside the new ones.      */

.tag-politike { --ch: var(--ch-politike); }

.tag-ekonomi,
.tag-ekonomia { --ch: var(--ch-ekonomi); --logo-ink: var(--ch); }

.tag-kronike,
.tag-kronike-e-zeze,
.tag-drejtesi,
.tag-siguri { --ch: var(--ch-kronike); --logo-ink: var(--ch); }

.tag-sport { --ch: var(--ch-sport); --logo-ink: var(--ch); }

/* `argetim` is the slug that actually carries the 381 Viral & Showbiz posts —
   `viral-showbiz` exists but is empty (measured 2026-08-11), and the nav band
   links to /argetim/. Both are listed so the channel paints itself whichever
   entrance the reader came through; the empty one costs one selector. */
.tag-viral,
.tag-viral-showbiz,
.tag-argetim,
.tag-showbiz { --ch: var(--ch-viral); --logo-ink: var(--ch); }

.tag-tech,
.tag-teknologji { --ch: var(--ch-tech); --logo-ink: var(--ch); }

.tag-jetesa,
.tag-lifestyle { --ch: var(--ch-jetesa); --logo-ink: var(--ch); }

.tag-opinion { --ch: var(--ch-opinion); --logo-ink: var(--ch); }

/* Muzeu — ink furniture, red accents (the only channel with a split).
   `ekspozita` (chunk 4) and `kultura` join the wing: a channel page or an
   exhibit under any of these slugs must read as the evergreen register, not as
   a news channel. The five ARCHETYPE slugs are here too — exhibits are pages
   tagged personat/vendet/ngjarje/organizata/trashegimi, and a reader landing on
   /tag/personat/ is inside the museum by any honest reading of the page. */
.tag-muzeu,
.tag-histori,
.tag-kultura,
.tag-ekspozita,
.tag-trashegimia,
.tag-personat,
.tag-vendet,
.tag-ngjarje,
.tag-organizata,
.tag-trashegimi { --ch: var(--ch-muzeu); --ch-accent: var(--color-accent); --logo-ink: var(--ch); }

/* Escape hatch for surfaces that must carry a channel colour outside their
   own page (a Sport card on Ballina): <article class="ch-sport">.          */
.ch-politike { --ch: var(--ch-politike); }
.ch-ekonomi  { --ch: var(--ch-ekonomi); }
.ch-kronike  { --ch: var(--ch-kronike); }
.ch-sport    { --ch: var(--ch-sport); }
.ch-viral    { --ch: var(--ch-viral); }
.ch-tech     { --ch: var(--ch-tech); }
.ch-jetesa   { --ch: var(--ch-jetesa); }
.ch-opinion  { --ch: var(--ch-opinion); }
.ch-muzeu    { --ch: var(--ch-muzeu); --ch-accent: var(--color-accent); }

/* ═══ 3. RESET + BASE ════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0;   /* LAW: zero radius everywhere */
}

html {
  background: var(--color-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;                    /* LAW: flush left */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: var(--track-display);
  line-height: 1.05;
  text-align: left;
  text-wrap: balance;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover { color: var(--ch, var(--color-accent)); }

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

figure img { width: 100%; }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  border-radius: 0;
}

input:not([type='checkbox']):not([type='radio']),
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-bg);
  border: 1px solid var(--color-text);
  padding: 10px var(--sp-3);
}

input::placeholder,
textarea::placeholder { color: var(--n-500); }

hr {
  border: 0;
  border-top: var(--rule-row) solid var(--color-divider);
  margin: var(--sp-5) 0;
}

:focus-visible {
  outline: 2px solid var(--ch, var(--color-accent));
  outline-offset: 2px;
}

::selection {
  background: var(--ch, var(--color-accent));
  color: #fff;
}

/* ═══ 4. TYPOGRAPHY ══════════════════════════════════════════════════════ */

/* Sans is the live voice; serif is the evergreen voice. */
.serif {
  font-family: var(--font-serif);
  letter-spacing: 0;
}

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* ── display sizes ── */
.masthead-type {
  font-size: var(--fs-masthead);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: var(--track-display);
}

.hero-h1,
.h-hero {
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: var(--track-display);
}

.article-h1,
.h-article {
  font-size: var(--fs-article);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: var(--track-display);
}

.h2 { font-size: var(--fs-h2); line-height: 1.06; }
.h3 { font-size: var(--fs-h3); line-height: 1.12; }
.h4 { font-size: var(--fs-h4); line-height: 1.2; }

/* ── deks, leads, body ── */
.dek {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.45;
  color: var(--n-800);
  letter-spacing: 0;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
}

/* long-read body: serif, 17/1.85, 64ch measure */
.longread,
.prose {
  font-family: var(--font-serif);
  font-size: var(--fs-read);
  line-height: 1.85;
  max-width: var(--measure);
  letter-spacing: 0;
}

.longread > * + *,
.prose > * + * { margin-top: 1.1em; }

.longread a,
.prose a {
  color: var(--ch, var(--color-accent));
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* pull-quote — serif, channel rule on the left */
.pullquote {
  font-family: var(--font-serif);
  font-size: clamp(21px, 2.6vw, 31px);
  font-weight: 600;
  line-height: 1.3;
  border-left: var(--rule-section) solid var(--ch, var(--color-accent));
  padding-left: var(--sp-4);
  max-width: var(--measure);
}

.pullquote cite {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-style: normal;
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--n-700);
}

/* quote card — serif on a flat surface, no shadow */
.quote-card {
  background: var(--color-surface);
  border-top: var(--rule-section) solid var(--ch, var(--color-accent));
  padding: var(--sp-5);
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

/* ── micro layer ── */
.micro-label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.micro-label--sm { font-size: var(--fs-micro-xs); letter-spacing: var(--track-micro-wide); }
.micro-label--lg { font-size: var(--fs-micro-lg); letter-spacing: 0.08em; }
.micro-label--mono { font-family: var(--font-mono); font-weight: 700; }
.micro-label--mute { color: var(--n-600); }

/* kicker — the channel-coloured micro caps above a headline */
.kicker {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ch, var(--color-accent));
}

.kicker--ink { color: var(--color-text); }

/* meta row (dateline, byline, reading time) */
.meta {
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--n-700);
  letter-spacing: 0.01em;
}

/* giant numerals — banners, section numbers, "ghost" watermarks */
.ghost-num {
  font-family: var(--font-sans);
  font-size: var(--fs-giant);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: color-mix(in srgb, #fff 40%, transparent);
  pointer-events: none;
  user-select: none;
}

.ghost-num--ch { color: color-mix(in srgb, var(--ch, var(--color-accent)) 40%, transparent); }
.ghost-num--ink { color: color-mix(in srgb, var(--color-text) 12%, transparent); }

/* ═══ 5. RULES + DIVIDERS ════════════════════════════════════════════════ */

.section-rule {
  border-top: var(--rule-section) solid var(--color-divider);
  padding-top: var(--sp-3);
}

.section-rule--ch { border-top-color: var(--ch, var(--color-accent)); }

.row-rule {
  border-bottom: var(--rule-row) solid var(--color-divider);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.row-rule:last-child { border-bottom: 0; }

/* a section head: rule + micro label + optional channel tick */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  border-top: var(--rule-section) solid var(--color-divider);
  padding-top: var(--sp-2);
  margin-bottom: var(--sp-4);
}

/* ═══ 6. BUTTONS ═════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;   /* LAW: flush-left labels */
  gap: var(--sp-2);
  padding: 10px var(--sp-4);
  border: 1px solid transparent;
  background: none;
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.btn--primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); color: #fff; }

.btn--ink {
  background: var(--color-text);
  border-color: var(--color-text);
  color: #fff;
}
.btn--ink:hover { background: var(--n-800); border-color: var(--n-800); color: #fff; }

.btn--violet {
  background: var(--ch-opinion);
  border-color: var(--ch-opinion);
  color: #fff;
}
.btn--violet:hover { background: color-mix(in srgb, var(--ch-opinion) 82%, #fff); color: #fff; }

.btn--outline {
  background: none;
  border-color: var(--color-text);
  color: var(--color-text);
}
.btn--outline:hover { background: var(--color-text); color: var(--color-bg); }

/* ghost — channel-tinted, the default in-channel action */
.btn--ghost {
  background: none;
  border-color: var(--ch, var(--color-accent));
  color: var(--ch, var(--color-accent));
}
.btn--ghost:hover {
  background: var(--ch, var(--color-accent));
  color: #fff;
}

.btn--sm { padding: 6px var(--sp-3); font-size: var(--fs-meta); }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .45; cursor: not-allowed; }

/* ═══ 7. PILLS — .tag, .geo-pill ═════════════════════════════════════════ */

.tag {
  display: inline-block;
  padding: 3px 7px 2px;
  background: var(--ch, var(--color-accent));
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  white-space: nowrap;
}

.tag--ink { background: var(--color-text); color: #fff; }
.tag--accent { background: var(--ch-accent); color: #fff; }
.tag--outline {
  background: none;
  color: var(--ch, var(--color-accent));
  box-shadow: none;
  border: 1px solid var(--ch, var(--color-accent));
  padding: 2px 6px 1px;
}
a.tag:hover { color: #fff; opacity: .85; }

/* geo pills — KOS / SHQ / MKD / DIA / BOTA / RAJ */
.geo-pill {
  display: inline-block;
  padding: 2px 6px 1px;
  border: 1px solid var(--color-text);
  background: none;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  white-space: nowrap;
}

.geo-pill--fill { background: var(--color-text); color: var(--color-bg); }
.geo-pill--ch { border-color: var(--ch, var(--color-accent)); color: var(--ch, var(--color-accent)); }
a.geo-pill:hover { background: var(--color-text); color: var(--color-bg); }

/* a row of labels (tags + geo) */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

/* ═══ 8. .vlabel — rotated micro-label in the left gutter ════════════════ */

.vlabel {
  writing-mode: vertical-rl;
  transform: rotate(180deg);      /* reads bottom-to-top */
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--track-micro-wide);
  text-transform: uppercase;
  color: var(--ch, var(--color-accent));
  white-space: nowrap;
  align-self: start;
}

.vlabel--ink { color: var(--color-text); }
.vlabel--mute { color: var(--n-600); }

/* the layout that hosts it: a reserved left gutter + the content column */
.has-vlabel {
  display: grid;
  grid-template-columns: var(--vgutter) minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
}

@media (max-width: 640px) {
  .has-vlabel { grid-template-columns: minmax(0, 1fr); }
  .has-vlabel > .vlabel { writing-mode: horizontal-tb; transform: none; }
}

/* ═══ 9. ZHURMA-METRI — label row + 6px bar ══════════════════════════════ */

.zhurma-metri {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.zhurma-metri__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.zhurma-metri__value {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ch, var(--color-accent));
}

.zhurma-metri__track {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--n-200);
}

.zhurma-metri__fill {
  display: block;
  height: 6px;
  width: 0;
  background: var(--ch, var(--color-accent));
  transition: width .3s ease;
}

.zhurma-metri--ink .zhurma-metri__fill { background: var(--color-text); }
.zhurma-metri--accent .zhurma-metri__fill { background: var(--color-accent); }

/* ═══ 10. IMAGERY ════════════════════════════════════════════════════════ */

/* frame: the positioning context for overlay + ghost numerals */
.img-frame {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--n-200);
}

/* topic-tinted gradient scrim — channel at the top, ink (or channel) at the
   bottom, so white type stays legible over any photograph. */
.img-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ch, var(--color-accent)) 10%, transparent) 0%,
    color-mix(in srgb, var(--overlay-base, var(--color-text)) 35%, transparent) 100%
  );
}

/* fully channel-tinted variant (banners, section covers) */
.img-overlay--ch { --overlay-base: var(--ch, var(--color-accent)); }
.img-overlay--deep {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ch, var(--color-accent)) 10%, transparent) 0%,
    color-mix(in srgb, var(--color-text) 62%, transparent) 100%
  );
}

/* the no-photo state: diagonal neutral stripes + a mono label */
.img-placeholder {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 160px;
  padding: var(--sp-3);
  background: repeating-linear-gradient(
    45deg,
    var(--n-200) 0 12px,
    var(--n-100) 12px 24px
  );
}

.img-placeholder__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--n-600);
}

/* caption row — description left, CREDIT right */
.fig {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  border-top: var(--rule-row) solid var(--color-divider);
  padding-top: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: var(--fs-meta);
  line-height: 1.35;
  color: var(--n-700);
}

.fig__desc { font-family: var(--font-serif); }

.fig__credit {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--n-600);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .fig { flex-direction: column; gap: var(--sp-1); }
  .fig__credit { white-space: normal; }
}

/* topic-tinted 64×64 thumbnail (saturation .6 / contrast 1.2 + channel scrim) */
.thumb {
  position: relative;
  flex: none;
  width: 64px;
  height: 64px;
  overflow: hidden;
  background: var(--n-200);
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.6) contrast(1.2);
}

.thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ch, var(--color-accent)) 18%, transparent);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.thumb--lg { width: 96px; height: 96px; }
.thumb--flat::after { display: none; }

/* ═══ 11. SAVES — .btn-save ("+ Ruaj") ═══════════════════════════════════ */

.btn-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--sp-2) 3px;
  border: 1px solid var(--color-text);
  background: none;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn-save::before {
  content: '+';
  font-family: var(--font-mono);
  font-weight: 700;
  line-height: 1;
}

.btn-save:hover { background: var(--color-text); color: var(--color-bg); }

.btn-save.is-saved,
.btn-save[aria-pressed='true'] {
  background: var(--ch, var(--color-accent));
  border-color: var(--ch, var(--color-accent));
  color: #fff;
}

.btn-save.is-saved::before,
.btn-save[aria-pressed='true']::before { content: '\2713'; }   /* check, not emoji */

/* ═══ 12. GRID HELPERS ═══════════════════════════════════════════════════ */

.grid-2,
.grid-3,
.grid-5,
.cols-7-5 {
  display: grid;
  gap: var(--gutter);
  align-items: start;
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cols-7-5 { grid-template-columns: 7fr 5fr; }   /* the hero split */

/* column rules between grid children (flat, 1px) */
.grid-ruled > * + * {
  border-left: var(--rule-row) solid var(--color-divider);
  padding-left: var(--gutter);
}

@media (max-width: 1000px) {
  .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-7-5 { grid-template-columns: minmax(0, 1fr); }
  .grid-ruled > * + * { border-left: 0; padding-left: 0; }
}

@media (max-width: 720px) {
  .grid-2,
  .grid-3,
  .grid-5 { grid-template-columns: minmax(0, 1fr); }
}

/* page shell */
.wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.stack > * + * { margin-top: var(--sp-4); }

/* ═══ 13. LOGO — five noise bars + wordmark ══════════════════════════════
   Markup lives in partials/logo.hbs. The red bars (1 & 5) read
   var(--ch, var(--color-accent)); bars 2-4 read var(--logo-ink), which the
   channel body classes flip to var(--ch) so the whole mark goes monochrome
   in-channel. The ZHURMA wordmark is ALWAYS ink.                            */

.logo {
  display: inline-flex;
  align-items: flex-end;
  gap: var(--sp-3);
  color: var(--color-text);
  text-decoration: none;
}

.logo__bars {
  flex: none;
  display: block;
  height: 0.94em;          /* scales with the wordmark */
  width: auto;
  overflow: visible;
}

.logo__bar { fill: var(--logo-ink, var(--color-text)); }
.logo__bar--ch { fill: var(--ch, var(--color-accent)); }

.logo__type {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.logo__word {
  display: block;
  font-family: var(--font-sans);
  font-size: 1em;
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--color-text);   /* LAW: the wordmark never takes the channel */
}

.logo__micro {
  display: block;
  font-family: var(--font-sans);
  font-size: max(var(--fs-micro-xs), 0.19em);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--n-700);
  white-space: nowrap;
}

.logo__press { color: var(--ch, var(--color-accent)); }

/* sizes: the masthead uses the fluid clamp, the header bar a fixed em */
.logo--masthead { font-size: var(--fs-masthead); }
.logo--bar { font-size: 26px; }
.logo--sm { font-size: 18px; gap: var(--sp-2); }
.logo--sm .logo__micro { display: none; }

.logo:hover { color: var(--color-text); }

/* ═══ 14. THE ONE SHADOW — fixed radio dock ══════════════════════════════ */

.radio-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--color-text);
  color: var(--color-bg);
  border-top: var(--rule-section) solid var(--color-accent);
  box-shadow: var(--radio-shadow);   /* the ONLY permitted box-shadow */
}

/* ═══ 15. UTILITIES ══════════════════════════════════════════════════════ */

.u-ch { color: var(--ch, var(--color-accent)); }
.u-ink { color: var(--color-text); }
.u-mute { color: var(--n-600); }
.u-surface { background: var(--color-surface); }
.u-fill-ch { background: var(--ch, var(--color-accent)); color: #fff; }
.u-fill-ink { background: var(--color-text); color: var(--color-bg); }
.u-caps { text-transform: uppercase; letter-spacing: var(--track-micro); }
.u-left { text-align: left; }
.u-nowrap { white-space: nowrap; }
.u-measure { max-width: var(--measure); }

.u-clamp-2,
.u-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.u-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.u-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-text);
  color: var(--color-bg);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-ui);
  font-weight: 800;
}
.skip-link:focus { left: 0; color: var(--color-bg); }

/* ═══ 16. MOTION + PRINT ═════════════════════════════════════════════════ */

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

@media print {
  body { background: #fff; color: #000; }
  .radio-dock, .btn-save, .vlabel { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   §17. GLOBAL CHROME (chunk 2) — microbar · masthead · ticker · nav ·
   mobile bar + menu · footer · radio dock.
   Everything here composes the §1–16 primitives; nothing is redefined.
   The chameleon reaches this layer through var(--ch) only — no channel
   colour is ever written literally below.
   ═══════════════════════════════════════════════════════════════════════ */

/* the fixed radio dock overlaps the page bottom; reserve its height */
body { padding-bottom: 76px; }

/* ── shared motion primitives ── */
@keyframes zh-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes zh-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes zh-eq { 0%, 100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }

.pulse-sq {
  flex: none;
  display: inline-block;
  width: 9px;
  height: 9px;
  background: var(--color-accent);
  animation: zh-pulse 1.8s ease-in-out infinite;
}

.pulse-sq--dot { width: 8px; height: 8px; border-radius: 0; }

/* ═══ 17.1 MICROBAR ══════════════════════════════════════════════════════ */

.microbar {
  border-bottom: var(--rule-row) solid var(--color-divider);
  background: var(--color-bg);
}

.microbar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 34px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.microbar__brand { flex: none; color: var(--n-700); }

/* the dateline gives up its space first — it ellipsizes, the buttons never wrap */
.microbar__date {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--n-600);
  font-size: var(--fs-micro-lg);
  letter-spacing: 0.06em;
}

.microbar__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.microbar__link {
  color: var(--color-text);
  white-space: nowrap;
}

.microbar__link:hover { color: var(--ch, var(--color-accent)); }

.microbar__sep { color: var(--n-400); }

/* ═══ 17.2 MASTHEAD ══════════════════════════════════════════════════════ */

.masthead {
  border-bottom: var(--rule-section) solid var(--color-text);
  background: var(--color-bg);
}

.masthead__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-3);
}

.masthead__live {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  text-align: left;      /* LAW: flush left, even in a right-hand column */
  max-width: 46%;
}

.masthead__now {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.masthead__micro {
  color: var(--n-600);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* ═══ 17.3 TICKER BAND ═══════════════════════════════════════════════════ */

.ticker {
  background: var(--n-900);
  color: var(--n-100);
  border-bottom: var(--rule-row) solid var(--n-900);
  overflow: hidden;
}

.ticker__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  min-height: 30px;
}

.ticker__label {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 var(--sp-3);
  background: var(--ch, var(--color-accent));
  color: #fff;
}

/* Muzeu's --ch is ink on an ink band — fall back to the red accent there */
.tag-muzeu .ticker__label,
.tag-histori .ticker__label,
.tag-trashegimia .ticker__label,
.tag-kronike .ticker__label,
.tag-kronike-e-zeze .ticker__label { background: var(--color-accent); }

.ticker__viewport {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.ticker__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: zh-marquee 80s linear infinite;
}

.ticker__viewport:hover .ticker__track,
.ticker__track:focus-within { animation-play-state: paused; }

.ticker__item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  white-space: nowrap;
  color: var(--n-100);
  font-size: var(--fs-meta);
  line-height: 30px;
}

.ticker__item:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* the aria-hidden duplicate half of the marquee: a pass-through box so its
   items stay flex children of .ticker__track (the -50% keyframe depends on the
   two halves being ONE flat row). */
.ticker__dup { display: contents; }

.ticker__time {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-micro);
  color: var(--color-accent-2);
}

.ticker__edition {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 var(--sp-3);
  border-left: var(--rule-row) solid var(--n-700);
  color: var(--n-300);
}

/* ═══ 17.4 NAV BAND ══════════════════════════════════════════════════════ */

.navband {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-top: var(--rule-section) solid var(--color-text);
  border-bottom: var(--rule-section) solid var(--color-text);
}

.navband__inner {
  display: flex;
  flex-wrap: wrap;                 /* 2 rows, never a horizontal scroller */
  align-items: stretch;
  gap: 0 var(--sp-5);
}

.navtab {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 9px 0 6px;
  border-bottom: 3px solid transparent;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.navtab__num {
  font-family: var(--font-mono);
  font-size: var(--fs-micro-xs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  vertical-align: super;
  color: var(--ch, var(--color-accent));
}

.navtab:hover { color: var(--ch, var(--color-accent)); }
.navtab:hover .navtab__num { color: var(--ch, var(--color-accent)); }

.navtab.is-active,
.navtab[aria-current='page'] { border-bottom-color: var(--ch, var(--color-accent)); }

/* Active channel by body data-channel — one rule per slug + its live aliases,
   so the tab underlines itself with no per-tab Handlebars branch. */
body[data-channel='politike']        .navtab[data-ch='politike'],
body[data-channel='ekonomi']         .navtab[data-ch='ekonomi'],
body[data-channel='ekonomia']        .navtab[data-ch='ekonomi'],
body[data-channel='kronike-e-zeze']  .navtab[data-ch='kronike'],
body[data-channel='kronike']         .navtab[data-ch='kronike'],
body[data-channel='sport']           .navtab[data-ch='sport'],
body[data-channel='argetim']         .navtab[data-ch='viral'],
body[data-channel='viral']           .navtab[data-ch='viral'],
body[data-channel='showbiz']         .navtab[data-ch='viral'],
body[data-channel='teknologji']      .navtab[data-ch='tech'],
body[data-channel='tech']            .navtab[data-ch='tech'],
body[data-channel='lifestyle']       .navtab[data-ch='jetesa'],
body[data-channel='jetesa']          .navtab[data-ch='jetesa'],
body[data-channel='opinion']         .navtab[data-ch='opinion'],
body[data-channel='histori']         .navtab[data-ch='muzeu'],
body[data-channel='trashegimia']     .navtab[data-ch='muzeu'],
body[data-channel='muzeu']           .navtab[data-ch='muzeu'] {
  border-bottom-color: var(--ch, var(--color-accent));
}

/* ═══ 17.5 MOBILE COMPACT BAR ════════════════════════════════════════════ */

/* Owner constitution §10 (mobile: no extra chrome): the bar scrolls away with
   the page — it is deliberately NOT sticky. */
.mbar { display: none; }

.mbar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 52px;
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
}

.mbar__home {
  display: inline-flex;
  align-items: flex-end;
  gap: var(--sp-2);
  min-width: 0;
  color: var(--color-text);
}

.mbar__bars {
  flex: none;
  display: block;
  height: 20px;
  width: auto;
}

.mbar__word {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--color-text);
}

.mbar__spacer { flex: 1 1 auto; min-width: 0; }

.mbar__toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-text);
  background: none;
  color: var(--color-text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.mbar__toggle:hover { background: var(--color-text); color: var(--color-bg); }

/* ═══ 17.6 MOBILE MENU OVERLAY ═══════════════════════════════════════════ */

.mmenu {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--color-bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.mmenu[hidden] { display: none; }

.mmenu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 52px;
  border-bottom: var(--rule-section) solid var(--color-text);
}

.mmenu__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-text);
  background: none;
  color: var(--color-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.mmenu__close:hover { background: var(--color-text); color: var(--color-bg); }

.mmenu__body { padding-bottom: var(--sp-8); }

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

.mmenu__row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: 13px 0;
  border-bottom: var(--rule-row) solid var(--color-divider);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.mmenu__num {
  flex: none;
  min-width: 2.1em;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ch, var(--color-accent));
}

.mmenu__util {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-4);
  padding-top: var(--sp-5);
}

.mmenu__utillink { color: var(--color-text); }
.mmenu__utillink:hover { color: var(--ch, var(--color-accent)); }

.mmenu__cta { margin-top: var(--sp-5); }

/* ═══ 17.7 BREAKPOINT — the desktop chrome / mobile bar swap ═════════════ */

@media (max-width: 759px) {
  .microbar,
  .masthead,
  .ticker,
  .navband { display: none; }

  .mbar { display: block; border-bottom: var(--rule-section) solid var(--color-text); }
}

@media (min-width: 760px) {
  .mmenu { display: none; }
}

/* ═══ 17.8 FOOTER ════════════════════════════════════════════════════════ */

.site-footer {
  border-top: var(--rule-section) solid var(--color-text);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-7);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: var(--sp-6) var(--sp-5);
  align-items: start;
}

.footer__brand { display: flex; flex-direction: column; gap: var(--sp-3); }

.footer__ai {
  max-width: 46ch;
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--n-700);
}

.footer__ai p + p { margin-top: var(--sp-2); }

.footer__head {
  display: block;
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-3);
  border-bottom: var(--rule-row) solid var(--color-divider);
  color: var(--n-700);
}

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

.footer__links li + li { margin-top: 7px; }

.footer__links a {
  font-size: var(--fs-ui);
  color: var(--color-text);
}

.footer__links a:hover { color: var(--ch, var(--color-accent)); }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: var(--rule-row) solid var(--color-divider);
  font-size: var(--fs-meta);
  color: var(--n-700);
}

.footer__legal a:hover { color: var(--ch, var(--color-accent)); }

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ═══ 17.9 RADIO DOCK ════════════════════════════════════════════════════
   .radio-dock itself (position/colour/the one permitted shadow) is §14.
   --left pulls it off the right edge so it reads as a dock, not a bar.     */

.radio-dock--left {
  right: auto;
  max-width: min(620px, 100%);
  border-right: var(--rule-section) solid var(--color-accent);
}

.radio-dock__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  min-width: 0;
}

.radio-dock__brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  color: var(--color-bg);
}

.radio-dock__station {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--n-300);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.radio-dock__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--n-600);
  background: none;
  color: var(--color-bg);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.radio-dock__btn:hover { background: var(--color-bg); color: var(--color-text); }

.radio-dock__switch {
  flex: none;
  padding: 5px var(--sp-2) 4px;
  border: 1px solid var(--n-500);
  background: none;
  color: var(--color-bg);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.radio-dock__switch:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

.radio-dock__fm {
  flex: none;
  color: var(--n-400);
  white-space: nowrap;
}

.radio-dock__fm:hover { color: #fff; }

.radio-dock :focus-visible { outline-color: var(--color-bg); }

/* 4-bar equalizer — animates only while a stream is actually playing */
.eq {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 13px;
}

.eq__bar {
  width: 3px;
  height: 100%;
  background: var(--color-accent);
  transform: scaleY(.22);
  transform-origin: bottom;
}

.radio-dock.is-live .eq__bar { animation: zh-eq .9s ease-in-out infinite; }
.eq__bar:nth-child(2) { animation-delay: .18s; }
.eq__bar:nth-child(3) { animation-delay: .36s; }
.eq__bar:nth-child(4) { animation-delay: .54s; }

@media (max-width: 480px) {
  .radio-dock--left { border-right: 0; }
  .radio-dock__fm { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   §18. BALLINA (chunk 3) — the homepage's own layer.

   Composes §1–17 primitives; nothing above is redefined. Every accent below
   reads var(--ch) or var(--color-accent) — no channel colour is written
   literally, so a section's `ch-*` class is the only thing that paints it.

   The eight sections, in file order:
     18.0 shell + section furniture      18.5 edicioni
     18.1 hero                           18.6 koleksionet
     18.2 top 10 (board + fallback)      18.7 muzeu band
     18.3 opinion                        18.8 espresso band
     18.4 pulsi                          18.9 injected feed redress
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ 18.0 SHELL + SECTION FURNITURE ═════════════════════════════════════ */

/* gazeta.css caps <main> at --shell (1100px) and pads it — correct for the
   templates it still dresses, fatal for a front with full-bleed bands. Scoped
   to the home template ONLY, so every other surface keeps its shell until its
   own chunk lands. */
body.home-template .g-shell { max-width: none; padding: 0; }

.zh-wrap {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3.5vw, 32px);
}

.zh-sec {
  max-width: 1360px;
  margin: var(--sp-7) auto 0;
  padding: var(--sp-3) clamp(16px, 3.5vw, 32px) 0;
  border-top: var(--rule-section) solid var(--color-text);
}

.zh-sec:first-child { margin-top: var(--sp-5); }

.zh-sec__body { min-width: 0; }

.zh-sec__head { margin-bottom: var(--sp-5); }

.zh-sec__head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
}

.zh-sec__head .h2 { font-size: 30px; }

.zh-sec__sub {
  margin-top: var(--sp-2);
  max-width: 62ch;
  font-size: var(--fs-ui);
  line-height: 1.45;
  color: var(--n-600);
}

.zh-sec__sub--onink { color: var(--n-400); }

.zh-stale-note { color: var(--n-500); }
.is-stale .g-top10-list,
.is-stale.zh-top10-list { opacity: .82; }

.zh-more {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  white-space: nowrap;
}

/* the mono rank numeral used by every ranked list on the front */
.zh-rank {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--n-500);
}

/* the site-wide save script writes '+ Ruaj' / '✓ E ruajtur' as textContent, so
   §11's ::before glyph would double it. Only bound buttons drop the glyph. */
.btn-save[data-g-ruaj]::before { content: none; }

/* photo-less thumbnail: the §10 stripes at thumbnail scale */
.thumb--empty {
  background: repeating-linear-gradient(45deg, var(--n-200) 0 8px, var(--n-100) 8px 16px);
}
.thumb--empty::after { display: none; }

/* full-bleed bands */
.zh-band {
  margin-top: var(--sp-8);
  padding: var(--sp-7) 0;
}

.zh-band--ink { background: var(--n-900); color: var(--n-100); }
.zh-band--red { background: var(--color-accent); color: #fff; }

.vlabel--onink { color: var(--color-accent); }
.vlabel--onred { color: #fff; }

.zh-band--ink a:hover { color: var(--color-accent); }
.zh-band--red a:hover { color: var(--color-text); }

/* ═══ 18.1 HERO ══════════════════════════════════════════════════════════ */

.zh-hero { gap: var(--sp-6) var(--sp-6); }
.zh-hero__main { min-width: 0; }

.zh-hero__kick { margin-bottom: var(--sp-4); }

.zh-hero__kick .kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.zh-hero__time {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-micro);
  color: var(--n-600);
}

.zh-hero__title a { display: block; }
.zh-hero__title a:hover { color: var(--ch, var(--color-accent)); }

.zh-hero__dek { margin-top: var(--sp-4); max-width: 52ch; }

.zh-hero__metri { margin-top: var(--sp-5); max-width: 420px; }
.zh-hero__metri[hidden] { display: none; }

.zh-hero__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.zh-hero__media { align-self: stretch; min-height: 240px; }
.zh-hero__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1000px) {
  /* photo first on a narrow screen: the picture is the entry point when the
     headline can no longer sit beside it */
  .zh-hero__media { order: -1; min-height: 200px; }
}

/* ═══ 18.2 ZHURMA TOP 10 ═════════════════════════════════════════════════
   Two column families, one look. `.g-top10-*` is the board's own markup,
   emitted verbatim (rail-html-contract.md); `.zh-top10-*` is the fallback this
   theme builds. They are styled to the same grid so a reader cannot tell which
   one they are looking at. The board writes no images, so its 64px slot is the
   striped placeholder — an image there is a board-writer change. */

.zh-top10 .g-top10-list,
.zh-top10-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-6);
}

.zh-top10 .g-top10-list > li,
.zh-top10-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: var(--rule-row) solid var(--color-divider);
  min-width: 0;
}

/* board row: [striped 64px] title / rank · labels */
.zh-top10 .g-top10-list > li > a {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: 64px auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--sp-3);
  row-gap: var(--sp-1);
  align-items: start;
}

.zh-top10 .g-top10-list > li > a::before {
  content: '';
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 64px;
  height: 64px;
  background: repeating-linear-gradient(45deg, var(--n-200) 0 8px, var(--n-100) 8px 16px);
}

.zh-top10 .g-top10-copy { display: contents; }

.zh-top10 .g-top10-t {
  grid-column: 2 / -1;
  grid-row: 1;
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: var(--track-display);
}

.zh-top10 .g-top10-n {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--n-500);
}

.zh-top10 .g-top10-labs { grid-column: 3; grid-row: 2; display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.zh-top10 .g-top10-lab {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--n-700);
}

.zh-top10 .g-top10-lab::before { content: '· '; color: var(--n-400); }

/* fallback row: the same shape, with a real thumbnail and a full meta line */
.zh-top10-link {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.zh-top10-copy { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }

.zh-top10-t {
  font-size: var(--fs-h4);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: var(--track-display);
}

.zh-top10-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--n-600);
}

.zh-top10-item .btn-save { flex: none; margin-top: 2px; }

@media (max-width: 860px) {
  .zh-top10 .g-top10-list,
  .zh-top10-list { grid-template-columns: minmax(0, 1fr); }
}

/* ═══ 18.3 OPINION ═══════════════════════════════════════════════════════ */

.zh-op-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6) var(--gutter);
}

.zh-op {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  border-top: var(--rule-section) solid var(--color-text);
  padding-top: var(--sp-3);
}

.zh-op__kick {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.zh-op__time {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-micro);
  color: var(--n-500);
}

.zh-op__media {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--ch, var(--color-accent));
}

.zh-op__media img { width: 100%; height: 100%; object-fit: cover; }

/* the quote mark rides the scrim, centred, and is decoration only */
.zh-op__quote {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: clamp(56px, 8vw, 96px);
  font-weight: 600;
  line-height: 1;
  color: color-mix(in srgb, #fff 88%, transparent);
  pointer-events: none;
}

.zh-op__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0;
}

.zh-op__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-2);
  border-top: var(--rule-row) solid var(--color-divider);
}

/* the submission cell — the only violet-bordered box on the front */
.zh-op--call {
  border: var(--rule-section) solid var(--ch, var(--color-accent));
  padding: var(--sp-5);
  gap: var(--sp-3);
}

.zh-op__calllead { font-size: var(--fs-lead); font-weight: 800; letter-spacing: var(--track-display); }
.zh-op__callcopy { font-size: var(--fs-ui); line-height: 1.5; color: var(--n-700); }
.zh-op--call .btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 1000px) { .zh-op-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .zh-op-grid { grid-template-columns: minmax(0, 1fr); } }

/* ═══ 18.4 PULSI I DITËS ═════════════════════════════════════════════════ */

.zh-geobar { margin-bottom: var(--sp-5); }
.zh-geobar .geo-pill { cursor: pointer; }

.zh-river {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--sp-6);
}

.zh-row {
  min-width: 0;
  padding: var(--sp-3) 0;
  border-bottom: var(--rule-row) solid var(--color-divider);
}

.zh-row[hidden] { display: none; }

.zh-row__link { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }

.zh-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.zh-row__time {
  font-family: var(--font-mono);
  font-size: var(--fs-micro-lg);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.zh-row__title {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: var(--track-display);
}

.zh-pulsi-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

.zh-pulsi-foot [data-zh-more][hidden] { display: none; }

@media (max-width: 1000px) { .zh-river { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .zh-river { grid-template-columns: minmax(0, 1fr); } }

/* ═══ 18.5 EDICIONI ══════════════════════════════════════════════════════ */

.zh-ed {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--sp-6);
  align-items: start;
}

.zh-ed__lead { font-size: var(--fs-ui); line-height: 1.55; color: var(--n-700); max-width: 46ch; }
.zh-ed__pills { margin: var(--sp-4) 0 var(--sp-3); }

.zh-edpill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px var(--sp-3) 6px;
  border: 1px solid var(--color-text);
  background: none;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-micro-lg);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.zh-edpill__h { font-family: var(--font-mono); font-weight: 700; color: var(--n-600); }
.zh-edpill:hover { background: var(--color-text); color: var(--color-bg); }
.zh-edpill:hover .zh-edpill__h { color: var(--color-bg); }

.zh-edpill.is-active {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}
.zh-edpill.is-active .zh-edpill__h { color: var(--color-accent-2); }

.zh-ed__panel[hidden] { display: none; }

.zh-river--ed { grid-template-columns: minmax(0, 1fr); }

.zh-row--ed { display: flex; flex-direction: column; gap: var(--sp-1); }

.zh-reason {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--color-accent);
}

.zh-row--ed .zh-row__title { font-size: var(--fs-lead); }
.zh-row--ed .zh-row__meta { color: var(--n-600); }
.zh-row--ed .zh-row__meta time {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
}

@media (max-width: 900px) { .zh-ed { grid-template-columns: minmax(0, 1fr); } }

/* ═══ 18.6 KOLEKSIONET ═══════════════════════════════════════════════════ */

.zh-kolek {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6) var(--gutter);
}

.zh-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  border-top: var(--rule-section) solid var(--ch, var(--color-accent));
  padding-top: var(--sp-3);
}

.zh-col__head { display: flex; align-items: baseline; gap: var(--sp-2); }

.zh-col__n {
  font-family: var(--font-mono);
  font-size: var(--fs-micro-lg);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ch, var(--color-accent));
}

/* Muzeu's --ch is ink; its numeral takes the red split accent (§2) */
.zh-col--ix .zh-col__n { color: var(--ch-accent); }

.zh-col__name {
  font-size: var(--fs-micro-lg);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.zh-col__lead { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }

.zh-col__media { display: block; height: 132px; }
.zh-col__media img { width: 100%; height: 132px; object-fit: cover; }

.zh-col__title {
  font-size: var(--fs-body);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: var(--track-display);
}

.zh-col__title.serif { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0; }

.zh-col__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--n-600);
}

.zh-col__rows { list-style: none; margin: 0; padding: 0; }

.zh-col__rows li {
  padding: var(--sp-2) 0;
  border-top: var(--rule-row) solid var(--color-divider);
  font-size: var(--fs-meta);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.zh-col__more {
  margin-top: auto;
  padding-top: var(--sp-2);
  border-top: var(--rule-row) solid var(--color-divider);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ch, var(--color-accent));
}

@media (max-width: 1100px) { .zh-kolek { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .zh-kolek { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .zh-kolek { grid-template-columns: minmax(0, 1fr); } }

/* ═══ 18.7 MUZEU — E PËRJETSHMJA ═════════════════════════════════════════ */

.zh-muzeu__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
  margin-bottom: var(--sp-6);
}

.zh-muzeu__roman {
  font-family: var(--font-sans);
  font-size: clamp(56px, 8vw, 120px);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: var(--color-accent);
}

.zh-muzeu__head .h2 { font-size: 30px; text-transform: uppercase; }
.zh-muzeu__head .btn { margin-top: var(--sp-4); }

.zh-exh {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  counter-reset: zh-exh;   /* the roman numerals are a counter, not 8 literals */
}

.zh-exh__card { min-width: 0; border: 1px solid var(--n-700); }
.zh-exh__card > a { display: flex; flex-direction: column; gap: var(--sp-2); padding: 0 0 var(--sp-3); }

.zh-exh__media { display: block; height: 110px; background: var(--n-800); }
.zh-exh__media img { width: 100%; height: 110px; object-fit: cover; }
.zh-exh__ph { min-height: 110px; }

.zh-exh__n {
  counter-increment: zh-exh;
  margin: var(--sp-3) var(--sp-3) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-micro);
  color: var(--color-accent);
}
.zh-exh__n::before { content: counter(zh-exh, upper-roman); }

.zh-exh__type,
.zh-exh__title,
.zh-exh .zh-era { margin: 0 var(--sp-3); }

.zh-exh__type {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--n-400);
}

.zh-exh__title {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--n-100);
}

.zh-era {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--n-500);
}

@media (max-width: 1000px) { .zh-exh { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .zh-exh { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .zh-exh { grid-template-columns: minmax(0, 1fr); } }

/* mini timeline. `overflow: hidden` (not auto) once the marquee is armed, so the
   duplicated half can never produce a horizontal scrollbar; before JS arms it
   the row is a normal, swipeable overflow list. */
.zh-tl {
  margin-top: var(--sp-6);
  padding: var(--sp-3) 0;
  border-top: var(--rule-row) solid var(--n-700);
  border-bottom: var(--rule-row) solid var(--n-700);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.zh-tl.is-marquee { overflow: hidden; }

.zh-tl__track { display: flex; align-items: center; width: max-content; }
.zh-tl.is-marquee .zh-tl__track { animation: zh-marquee 90s linear infinite; }
.zh-tl.is-marquee:hover .zh-tl__track,
.zh-tl__track:focus-within { animation-play-state: paused; }

.zh-tl__stop {
  padding: 0 var(--sp-4);
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: var(--fs-micro-lg);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--n-300);
}

.zh-tl__stop + .zh-tl__stop { border-left: 1px solid var(--n-700); }

.zh-daily {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: var(--sp-6);
}

.zh-daily__cell { border-top: var(--rule-section) solid var(--color-accent); padding-top: var(--sp-3); }
.zh-daily__lab { display: block; margin-bottom: var(--sp-2); color: var(--color-accent); }
.zh-daily__link { font-size: var(--fs-ui); line-height: 1.45; color: var(--n-100); }
.zh-daily__link--quote { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-lead); }

@media (max-width: 640px) { .zh-daily { grid-template-columns: minmax(0, 1fr); } }

/* ═══ 18.8 ZHURMA ESPRESSO ═══════════════════════════════════════════════ */

.zh-espresso {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--sp-6);
  align-items: end;
}

.zh-espresso__kick { color: color-mix(in srgb, #fff 80%, transparent); }

.zh-espresso__display {
  margin-top: var(--sp-2);
  font-family: var(--font-sans);
  font-size: clamp(34px, 5.4vw, 66px);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: var(--track-display);
}

.zh-espresso__line { margin-top: var(--sp-3); font-size: var(--fs-lead); line-height: 1.4; }

.zh-espresso__form { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.zh-espresso__input {
  flex: 1 1 200px;
  min-width: 0;
  background: transparent;
  border: var(--rule-section) solid #fff;
  color: #fff;
  padding: 12px var(--sp-3);
}

.zh-espresso__input::placeholder { color: color-mix(in srgb, #fff 62%, transparent); }
.zh-espresso__input:focus-visible { outline-color: #fff; }

.zh-espresso__micro {
  flex: 1 1 100%;
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: color-mix(in srgb, #fff 82%, transparent);
}

.zh-espresso__micro.is-ok,
.zh-espresso__micro.is-err { font-weight: 800; color: #fff; }

.zh-band--red :focus-visible { outline-color: #fff; }

@media (max-width: 860px) { .zh-espresso { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* ═══ 18.9 INJECTED FEED — redress, scoped ═══════════════════════════════
   default.hbs's endless feed inserts `g-rail` sections as siblings BEFORE the
   sentinel, i.e. inside `.zh-feedwrap`. That wrapper is the whole reason these
   rules can exist: `.g-rail` is also gazeta.css's, and redressing it globally
   would repaint every template that has not been rebuilt yet. */

.zh-feedwrap { margin-top: var(--sp-7); }

.zh-feedwrap .g-rail {
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: var(--rule-section) solid var(--color-text);
}

.zh-feedwrap .g-rail-head { margin-bottom: var(--sp-4); }

.zh-feedwrap .g-rail-headline {
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: var(--track-display);
}

.zh-feedwrap .g-rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}

.zh-feedwrap .g-rail-item {
  min-width: 0;
  border-top: var(--rule-row) solid var(--color-divider);
  padding-top: var(--sp-2);
}

.zh-feedwrap .g-rail-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: var(--sp-2); }

.zh-feedwrap .g-rail-title {
  display: block;
  font-size: var(--fs-body);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: var(--track-display);
}

.zh-feedwrap .g-rail-time,
.zh-feedwrap .g-rail-count {
  display: block;
  margin-top: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--n-600);
}

.zh-feedwrap .g-rail-more,
.zh-feedwrap .g-more-btn {
  display: inline-block;
  margin-top: var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ch, var(--color-accent));
}

@media (max-width: 1000px) { .zh-feedwrap .g-rail-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .zh-feedwrap .g-rail-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .zh-feedwrap .g-rail-list { grid-template-columns: minmax(0, 1fr); } }

/* ═══ 18.10 NO HORIZONTAL SCROLL — the standing law ══════════════════════
   Every grid above uses minmax(0, 1fr) so a long word cannot push a track
   wider than its share. This is the backstop for anything injected. */
body.home-template { max-width: 100%; overflow-x: clip; }

/* ═══════════════════════════════════════════════════════════════════════
   §19. CHANNEL · ARTICLE · EXHIBIT (chunk 4) — the three reading surfaces.

   Composes §1–18 primitives; nothing above is redefined. As in §18, every
   accent below reads var(--ch) / var(--ch-accent) / var(--color-accent) and
   NO channel colour is ever written literally — the body's `tag-<slug>` class
   (§2) is the only thing that paints a channel page, and {{> zh-chclass}} is
   the only thing that paints an article.

     19.0 shell unlock            19.4 article head + byline + figure
     19.1 channel banner          19.5 article body + "Pse ka rëndësi" + Burimi
     19.2 channel body            19.6 article rail
     19.3 article shell           19.7 exhibit register (Muzeu)
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ 19.0 SHELL UNLOCK ══════════════════════════════════════════════════
   gazeta.css caps <main>.g-shell at 1100px and pads it. That is correct for
   the templates it still dresses and fatal for a full-bleed channel banner,
   so tag/post release the cap exactly the way §18.0 does for home. Scoped to
   these two templates ONLY — page.hbs and the ~30 page-*.hbs surfaces keep
   their shell until their own chunk lands. */
body.tag-template .g-shell,
body.post-template .g-shell { max-width: none; padding: 0; }

/* ═══ 19.1 CHANNEL BANNER ════════════════════════════════════════════════ */

.zh-banner {
  position: relative;
  overflow: hidden;
  background: var(--ch, var(--color-accent));
  color: #fff;
  padding: clamp(28px, 5vw, 56px) 0 0;
}

.zh-banner__inner { position: relative; z-index: 1; }

/* the giant channel numeral. §4's .ghost-num is already 40% white and rides
   --fs-giant; here it is pinned to the right edge and clipped by the banner. */
.zh-banner__ghost {
  position: absolute;
  z-index: 0;
  right: clamp(16px, 3.5vw, 32px);
  top: 50%;
  transform: translateY(-50%);
}

.zh-banner__name {
  font-family: var(--font-sans);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}

.zh-banner__desc {
  margin-top: var(--sp-3);
  max-width: 54ch;
  /* 19px/600 on the channel colour. Deliberate: at >=18.66px + bold WCAG asks
     3:1, which every channel in the palette clears against white — gold
     (--ch-ekonomi) does NOT clear the 4.5:1 that smaller copy would need, and
     the fix is the type size, not a per-channel colour override. */
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.4;
}

/* The meta strip sits on INK, not on the channel colour: it is 10-11px micro
   type, and white-on-gold at that size fails AA outright. Ink is channel-
   independent and 15:1 everywhere, so this cell can never be the one that
   silently regresses when a new channel colour is added. */
.zh-banner__meta {
  position: relative;
  z-index: 1;
  margin-top: clamp(20px, 3.5vw, 36px);
  background: var(--color-text);
  color: var(--color-bg);
}

.zh-banner__metarow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) 0;
}

.zh-banner__count { color: #fff; }
.zh-banner__how { color: var(--n-400); }

/* Muzeu: --ch is already ink (§2), so the banner needs no background change —
   only the numeral flips to the red split accent. */
.zh-banner--muzeu .ghost-num { color: color-mix(in srgb, var(--ch-accent) 40%, transparent); }
.zh-banner--muzeu .zh-banner__meta { background: var(--color-accent); }
.zh-banner--muzeu .zh-banner__how { color: color-mix(in srgb, #fff 78%, transparent); }
.zh-banner--muzeu .zh-banner__name { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0; }

@media (max-width: 760px) {
  /* the numeral stops competing with the name for the same horizontal band */
  .zh-banner__ghost { top: auto; bottom: -0.18em; transform: none; }
}

/* ═══ 19.2 CHANNEL BODY ══════════════════════════════════════════════════ */

.zh-chan { margin-top: var(--sp-6); }

.zh-chan__geobar { margin-bottom: var(--sp-6); }
.zh-chan__geobar .geo-pill { cursor: pointer; }

.zh-chan__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-7);
  align-items: start;
}

.zh-chan__main { min-width: 0; }

/* ── lead card ── */
.zh-lead {
  display: block;
  border-top: var(--rule-section) solid var(--color-text);
  padding-top: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.zh-lead__media { display: block; aspect-ratio: 16 / 9; }
.zh-lead__media img { width: 100%; height: 100%; object-fit: cover; }
.zh-lead__ph { aspect-ratio: 16 / 9; min-height: 0; }

.zh-lead__body { margin-top: var(--sp-4); }

.zh-lead__kick { margin-bottom: var(--sp-3); }

.zh-lead__metri { max-width: 380px; margin-bottom: var(--sp-4); }
.zh-lead__metri[hidden] { display: none; }

.zh-lead__title {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: var(--track-display);
}

.zh-lead__title a:hover { color: var(--ch, var(--color-accent)); }

.zh-lead__dek { margin-top: var(--sp-3); max-width: 56ch; }

/* ── the row list ── */
.zh-chan__list { list-style: none; margin: 0; padding: 0; }

/* one row = time · title · geo · minutes · zhurmë · save, on a 1px rule.
   Grid, not flex: the save button must stay hard right and the title must be
   the only cell that can grow, or a long headline pushes the meta off-row. */
.zh-chan__list .zh-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-1) var(--sp-3);
  align-items: baseline;
  padding: var(--sp-3) 0;
  border-bottom: var(--rule-row) solid var(--color-divider);
}

.zh-chan__list .zh-row__link { display: contents; }

.zh-chan__list .zh-row__time { grid-column: 1; grid-row: 1; }

.zh-chan__list .zh-row__title {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--fs-h4);
  line-height: 1.16;
}

.zh-chan__list .zh-row__link:hover .zh-row__title { color: var(--ch, var(--color-accent)); }

.zh-chan__list .zh-row__meta {
  grid-column: 2;
  grid-row: 2;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--n-600);
}

.zh-chan__list .zh-row .btn-save {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: start;
}

/* the mono facts the desk can actually prove; absent ⇒ the cell is not written */
.zh-fact { color: var(--n-600); }
.zh-fact--ch { color: var(--ch, var(--color-accent)); }

.zh-chan__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

.zh-chan__foot [hidden] { display: none; }

.zh-chan__empty {
  border-top: var(--rule-section) solid var(--color-text);
  padding-top: var(--sp-4);
  font-size: var(--fs-lead);
  color: var(--n-700);
}

/* ── right rail: the eternal register ── */
.zh-rail { min-width: 0; }

.zh-rail__panel + .zh-rail__panel { margin-top: var(--sp-6); }

.zh-rail__head {
  border-top: var(--rule-section) solid var(--color-text);
  padding-top: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.zh-rail__title {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-h4);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--track-display);
}

.zh-rail__sub { display: block; margin-top: var(--sp-1); color: var(--n-600); }

/* ink exhibit cards — the §18.7 register at rail width */
.zh-rail__exh { list-style: none; margin: 0; padding: 0; counter-reset: zh-rexh; }

.zh-rexh { background: var(--color-text); color: var(--n-100); }
.zh-rexh + .zh-rexh { margin-top: var(--sp-3); }
.zh-rexh > a { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); }
.zh-rexh > a:hover { color: var(--n-100); }
.zh-rexh > a:hover .zh-rexh__title { color: var(--color-accent); }

.zh-rexh__n {
  counter-increment: zh-rexh;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-micro);
  color: var(--color-accent);
}
.zh-rexh__n::before { content: counter(zh-rexh, upper-roman); }

.zh-rexh__title {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}

.zh-rexh .zh-era { color: var(--n-500); }

/* The rail's "Hyr në Muze" is a real .btn--ink and must stay one. It carries a
   layout-only class: §19.6's .zh-rail__more sets `color: var(--ch)`, and on the
   Kronikë channel --ch IS ink — an ink label on an ink button is an invisible
   control. Spacing here, colour never. */
.zh-rail__cta { margin-top: var(--sp-4); }

@media (max-width: 1000px) {
  .zh-chan__cols { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .zh-rail__exh { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
  .zh-rexh + .zh-rexh { margin-top: 0; }
}

@media (max-width: 620px) {
  .zh-rail__exh { grid-template-columns: minmax(0, 1fr); }
  .zh-chan__list .zh-row { grid-template-columns: minmax(0, 1fr) auto; }
  .zh-chan__list .zh-row__time { grid-column: 1; grid-row: 1; }
  .zh-chan__list .zh-row__title { grid-column: 1 / -1; grid-row: 2; }
  .zh-chan__list .zh-row__meta { grid-column: 1 / -1; grid-row: 3; }
  .zh-chan__list .zh-row .btn-save { grid-column: 2; grid-row: 1; }
}

/* ═══ 19.3 ARTICLE SHELL ═════════════════════════════════════════════════ */

.zh-art {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-7);
  align-items: start;
  margin-top: var(--sp-6);
}

.zh-art__main { min-width: 0; }

.zh-art__rail {
  position: sticky;
  top: var(--sp-4);
  min-width: 0;
}

@media (max-width: 1000px) {
  .zh-art { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .zh-art__rail { position: static; }
}

/* ═══ 19.4 ARTICLE HEAD · BYLINE · FIGURE ════════════════════════════════ */

.zh-crumb {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--n-600);
}

.zh-crumb a:hover { color: var(--ch, var(--color-accent)); }
.zh-crumb__sep { color: var(--n-400); }

.zh-art__labels { margin: var(--sp-4) 0; }

.zh-art__date {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--n-600);
}

.zh-art__dek { margin-top: var(--sp-4); max-width: 58ch; }

/* byline rule row — 2px above, 1px below, the standing article signature */
.zh-byrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-5);
  padding: var(--sp-3) 0;
  border-top: var(--rule-section) solid var(--color-text);
  border-bottom: var(--rule-row) solid var(--color-divider);
}

.zh-byrow__who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-micro-lg);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.zh-byrow__by { color: var(--ch, var(--color-accent)); }
.zh-byrow__sep { color: var(--n-400); font-weight: 400; }

.zh-byrow__t {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--n-600);
  text-transform: none;
}

.zh-byrow__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

.zh-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--sp-2) 3px;
  border: 1px solid var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.zh-share:hover { background: var(--color-text); color: var(--color-bg); }

.zh-art__fig { margin-top: var(--sp-5); }
.zh-art__fig .img-frame { display: block; }
.zh-art__fig img { width: 100%; }

/* ═══ 19.5 ARTICLE BODY · "PSE KA RËNDËSI" · BURIMI ══════════════════════
   The content wrapper keeps its `g-body` class as well as `zh-body`. That is
   load-bearing, not belt-and-braces habit: Ghost strips the writers'
   <aside class="kontekst"> on ingest, so `.g-body h4` + its adjacent sibling is
   the ONLY hook the "Pse ka rëndësi" well has, and verify-theme contract 7
   asserts that rule exists in gazeta.css — but NOT that a template still emits
   the class. Dropping `g-body` here would pass every gate and unstyle the box.
   The `.zh-body` rules below are equal-specificity and load later, so they win
   the redress while gazeta.css stays the floor. */

.zh-body {
  font-family: var(--font-serif);
  font-size: var(--fs-read);
  line-height: 1.85;
  max-width: var(--measure);
  letter-spacing: 0;
}

.zh-body > * + * { margin-top: 1.1em; }

.zh-body a {
  color: var(--ch, var(--color-accent));
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.zh-body h2,
.zh-body h3 {
  font-family: var(--font-sans);
  letter-spacing: var(--track-display);
  margin-top: 1.6em;
}

.zh-body h2 { font-size: var(--fs-h3); line-height: 1.12; }
.zh-body h3 { font-size: var(--fs-h4); line-height: 1.2; }

.zh-body blockquote {
  font-family: var(--font-serif);
  font-size: clamp(21px, 2.6vw, 27px);
  font-weight: 600;
  line-height: 1.3;
  border-left: var(--rule-section) solid var(--ch, var(--color-accent));
  padding-left: var(--sp-4);
}

.zh-body figcaption {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  line-height: 1.35;
  color: var(--n-700);
  border-top: var(--rule-row) solid var(--color-divider);
  padding-top: var(--sp-2);
  margin-top: var(--sp-2);
}

/* ── the "Pse ka rëndësi" well: 2px ink box, red roman numerals ── */
.zh-body h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-micro-lg);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: #fff;
  background: var(--color-text);
  border: var(--rule-section) solid var(--color-text);
  border-bottom: 0;
  margin: var(--sp-7) 0 0;
  padding: var(--sp-3) var(--sp-4);
  max-width: var(--measure);
}

.zh-body h4 + ul,
.zh-body h4 + ol,
.zh-body h4 + p {
  background: var(--color-bg);
  border: var(--rule-section) solid var(--color-text);
  border-top: 0;
  margin: 0 0 var(--sp-7);
  padding: var(--sp-4);
  max-width: var(--measure);
  list-style: none;
  counter-reset: zh-pse;
}

.zh-body h4 + ul > li,
.zh-body h4 + ol > li {
  counter-increment: zh-pse;
  position: relative;
  padding-left: 44px;
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  line-height: 1.5;
}

.zh-body h4 + ul > li::before,
.zh-body h4 + ol > li::before {
  content: counter(zh-pse, upper-roman);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro-lg);
  font-weight: 700;
  letter-spacing: var(--track-micro);
  color: var(--color-accent);
}

.zh-body h4 + ul > li + li,
.zh-body h4 + ol > li + li { margin-top: var(--sp-3); }

.zh-body h4 + p { font-family: var(--font-sans); font-size: var(--fs-ui); line-height: 1.5; }

/* ── Burimi block — the sourcing promise, on surface fill ── */
.zh-burimi {
  margin-top: var(--sp-6);
  max-width: var(--measure);
  background: var(--color-surface);
  border-left: var(--rule-section) solid var(--ch, var(--color-accent));
  padding: var(--sp-4);
}

.zh-burimi__lab { display: block; margin-bottom: var(--sp-2); color: var(--ch, var(--color-accent)); }

.zh-burimi__src { display: block; margin-bottom: var(--sp-2); }

.zh-burimi__src a {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: 800;
  letter-spacing: var(--track-display);
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--color-text);
}

.zh-burimi__src a:hover { color: var(--ch, var(--color-accent)); }

.zh-burimi__note {
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--n-700);
}

.zh-burimi__note b { font-weight: 800; color: var(--color-text); }

/* ═══ 19.6 ARTICLE RAIL ══════════════════════════════════════════════════ */

.zh-metri-panel {
  border-top: var(--rule-section) solid var(--color-text);
  padding-top: var(--sp-3);
}

.zh-metri-panel[hidden] { display: none; }

.zh-metri-panel__big {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 var(--sp-3);
}

.zh-metri-panel__n {
  font-family: var(--font-sans);
  font-size: clamp(44px, 6vw, 64px);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--ch, var(--color-accent));
  font-variant-numeric: tabular-nums;
}

.zh-metri-panel__of { font-family: var(--font-mono); font-size: var(--fs-micro-lg); font-weight: 700; color: var(--n-500); }

.zh-metri-panel__facts { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }

.zh-metri-panel__facts li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-top: var(--rule-row) solid var(--color-divider);
}

.zh-metri-panel__k {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--n-600);
}

.zh-metri-panel__v {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: right;
}

.zh-rail__rows { list-style: none; margin: 0; padding: 0; }

.zh-rail__rows li { border-top: var(--rule-row) solid var(--color-divider); padding: var(--sp-3) 0; }
.zh-rail__rows li:first-child { border-top: 0; padding-top: 0; }

.zh-rail__rowt {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: var(--track-display);
}

.zh-rail__rowm {
  display: block;
  margin-top: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--n-600);
}

.zh-rail__more {
  display: inline-block;
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: var(--rule-row) solid var(--color-divider);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ch, var(--color-accent));
}

/* the article's own furniture below the body keeps the reading measure */
.zh-art__after { max-width: var(--measure); margin-top: var(--sp-7); }

/* ═══ 19.7 EXHIBIT REGISTER (Muzeu) ══════════════════════════════════════
   AUDIBLY different from news: serif, ink, roman numerals, and NO clock and
   NO meter anywhere — an evergreen entry has no "matur HH:mm" to report, and
   borrowing the wire's instruments would be the loudest possible lie about
   what kind of page this is. */

/* the §15 colour utilities gained no --ch-accent member; the museum wing needs
   one because --ch there is ink and the red split accent is the only contrast. */
.u-ch-accent { color: var(--ch-accent); }

.zh-ex__tags { margin: var(--sp-4) 0; }

.zh-ex__title {
  font-family: var(--font-serif);
  font-size: var(--fs-article);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: 0;
}

.zh-ex__dek {
  margin-top: var(--sp-4);
  max-width: 58ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--n-800);
}

.zh-ex__byrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-5);
  padding: var(--sp-3) 0;
  border-top: var(--rule-section) solid var(--color-text);
  border-bottom: var(--rule-row) solid var(--color-divider);
}

.zh-ex__by {
  font-family: var(--font-sans);
  font-size: var(--fs-micro-lg);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.zh-ex__by em { font-style: normal; color: var(--ch-accent); }

/* ── Skeda: the facts table, 2px ink border ── */
.zh-skeda {
  margin-top: var(--sp-6);
  max-width: var(--measure);
  border: var(--rule-section) solid var(--color-text);
}

.zh-skeda__cap {
  display: block;
  padding: var(--sp-2) var(--sp-4);
  background: var(--color-text);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--fs-micro-lg);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.zh-skeda__grid { margin: 0; padding: 0; }

.zh-skeda__row {
  display: grid;
  grid-template-columns: 34% minmax(0, 1fr);
  border-top: var(--rule-row) solid var(--color-divider);
}

.zh-skeda__row:first-of-type { border-top: 0; }

.zh-skeda dt {
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--n-600);
}

.zh-skeda dd {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: var(--rule-row) solid var(--color-divider);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.4;
}

@media (max-width: 520px) {
  .zh-skeda__row { grid-template-columns: minmax(0, 1fr); }
  .zh-skeda dd { border-left: 0; padding-top: 0; }
  .zh-skeda dt { padding-bottom: var(--sp-1); }
}

/* ── serif long-read + the pull-quote between two 2px rules ── */
.zh-exbody blockquote {
  margin: var(--sp-7) 0;
  padding: var(--sp-5) 0;
  border-top: var(--rule-section) solid var(--color-text);
  border-bottom: var(--rule-section) solid var(--color-text);
  border-left: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(21px, 2.6vw, 29px);
  font-weight: 400;
  line-height: 1.32;
  text-align: left;
}

.zh-exbody h2,
.zh-exbody h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0;
}

.zh-ex__back {
  display: inline-block;
  margin-top: var(--sp-6);
  font-family: var(--font-sans);
  font-size: var(--fs-micro-lg);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ch-accent);
}

/* ── rail: the memory network ── */
.zh-net { list-style: none; margin: 0; padding: 0; counter-reset: zh-net; }

.zh-net li { border-top: var(--rule-row) solid var(--color-divider); padding: var(--sp-3) 0; }
.zh-net li:first-child { border-top: 0; padding-top: 0; }

.zh-net__n {
  counter-increment: zh-net;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-micro);
  color: var(--ch-accent);
}
.zh-net__n::before { content: counter(zh-net, upper-roman); }

.zh-net__t {
  display: block;
  margin-top: var(--sp-1);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
}

.zh-net a:hover .zh-net__t { color: var(--ch-accent); }

/* Espresso, rail-sized: the ONE red field, reused from §18.8's register */
.zh-espresso-card {
  margin-top: var(--sp-6);
  background: var(--color-accent);
  color: #fff;
  padding: var(--sp-4);
}

.zh-espresso-card__kick { color: color-mix(in srgb, #fff 82%, transparent); }

.zh-espresso-card__lead {
  margin-top: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: var(--track-display);
}

.zh-espresso-card__copy { margin-top: var(--sp-2); font-size: var(--fs-meta); line-height: 1.45; }

.zh-espresso-card .btn {
  margin-top: var(--sp-3);
  background: #fff;
  border-color: #fff;
  color: var(--color-accent);
}
.zh-espresso-card .btn:hover { background: var(--color-text); border-color: var(--color-text); color: #fff; }
.zh-espresso-card :focus-visible { outline-color: #fff; }

/* ═══ 19.8 NO HORIZONTAL SCROLL — the standing law ═══════════════════════
   Same backstop §18.10 puts on home: every grid above is minmax(0, 1fr), and
   this clips anything injected (an embed, an oversized table in {{content}}). */
body.tag-template,
body.post-template { max-width: 100%; overflow-x: clip; }

/* ═══════════════════════════════════════════════════════════════════════
   §20. MUZEU INDEX (chunk 5) — the register's front door.

   Same law as §19.7: the museum is AUDIBLY not the wire. Serif titles, ink
   furniture, roman numerals, and NO clock and NO Zhurmë-metri anywhere on the
   surface. The only numbers here are counts of things that exist (ekspozita,
   salla, ndalesa) and years — never a measurement of "now".

   The host carries `ch-muzeu`, so --ch is ink and --ch-accent is the red split.
   Every accent below reads var(--ch-accent) — never a literal red.
   ═══════════════════════════════════════════════════════════════════════ */

.zh-mz { padding-bottom: var(--sp-8); }

/* ═══ 20.1 INK HEADER BAND ═══════════════════════════════════════════════ */

.zh-mz__band {
  background: var(--color-text);
  color: var(--color-bg);
  padding: var(--sp-6) 0 var(--sp-5);
  margin-bottom: var(--sp-6);
}

.zh-mz__bandin {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4) var(--sp-5);
  align-items: start;
}

/* the ninth channel's numeral — red, mono, the one loud mark on the band */
.zh-mz__ix {
  font-family: var(--font-mono);
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 700;
  line-height: .82;
  letter-spacing: -0.02em;
  color: var(--ch-accent);
}

.zh-mz__word {
  font-family: var(--font-serif);
  font-size: clamp(34px, 5.4vw, 60px);
  font-weight: 600;
  line-height: .92;
  letter-spacing: 0;
  text-transform: uppercase;
}

.zh-mz__sub {
  margin-top: var(--sp-3);
  max-width: 56ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: color-mix(in srgb, var(--color-bg) 82%, transparent);
}

.zh-mz__count {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: var(--rule-row) solid color-mix(in srgb, var(--color-bg) 34%, transparent);
  font-family: var(--font-mono);
  font-size: var(--fs-micro-lg);
  font-weight: 700;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-bg) 74%, transparent);
}

.zh-mz__count b { color: var(--color-bg); font-weight: 700; }

@media (max-width: 560px) {
  .zh-mz__bandin { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
}

/* ═══ 20.2 SKEDA E DITËS — the date-rotated banner ═══════════════════════
   Seven candidates are served; zhurma.js reveals the one the day-of-year
   picks. With JS off the FIRST candidate stands — a real exhibit either way,
   which is why the rotation may live in script at all. */

.zh-mz__sec { margin-top: var(--sp-7); }

.zh-mz__sechead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  border-top: var(--rule-section) solid var(--color-text);
  padding-top: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.zh-mz__sectitle {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0;
}

.zh-mz__skeda { border: var(--rule-section) solid var(--color-text); }

/* candidates 2..7 are hidden by CSS, not by an attribute: a JS-off reader must
   never see seven banners stacked while waiting for a script that never runs. */
.zh-mz__skeda > .zh-mzbanner ~ .zh-mzbanner { display: none; }
.zh-mz__skeda > .zh-mzbanner[hidden] { display: none; }
.zh-mz__skeda > .zh-mzbanner.is-day { display: grid; }

.zh-mzbanner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: stretch;
  background: var(--color-surface);
}

.zh-mzbanner__fig {
  position: relative;
  display: block;
  min-height: 100%;
  background: var(--n-200);
}

.zh-mzbanner__fig img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  filter: saturate(.62) contrast(1.14);
}

.zh-mzbanner__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-left: var(--rule-section) solid var(--color-text);
}

.zh-mzbanner__roman {
  font-family: var(--font-mono);
  font-size: var(--fs-micro-lg);
  font-weight: 700;
  letter-spacing: var(--track-micro-wide);
  color: var(--ch-accent);
}

.zh-mzbanner__title {
  font-family: var(--font-serif);
  font-size: clamp(25px, 3.2vw, 40px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: 0;
}

.zh-mzbanner__dek {
  max-width: 52ch;
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--n-800);
}

.zh-mzbanner__go {
  margin-top: auto;
  font-family: var(--font-sans);
  font-size: var(--fs-micro-lg);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ch-accent);
}

.zh-mzbanner:hover .zh-mzbanner__title { color: var(--ch-accent); }

@media (max-width: 720px) {
  .zh-mzbanner { grid-template-columns: minmax(0, 1fr); }
  .zh-mzbanner__body { border-left: 0; border-top: var(--rule-section) solid var(--color-text); }
  .zh-mzbanner__fig img { min-height: 200px; }
}

/* ═══ 20.3 RRUGËTIME — the guided tours ═════════════════════════════════
   A tour is a CURATED FILTER over the exhibits on this page, not a stored
   playlist: Ghost holds no ordering field a tour could read, and a hand-kept
   slug list would rot the first time an exhibit is renamed. The NDALESA
   numbers are therefore positions in the filtered result, which is exactly
   what they claim to be. */

.zh-mz__rruget {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}

.zh-rruga {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-4);
  border: var(--rule-row) solid var(--color-divider);
  border-top: var(--rule-section) solid var(--color-text);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.zh-rruga:hover { background: var(--color-surface); }

.zh-rruga.is-active {
  background: var(--color-surface);
  border-color: var(--ch-accent);
  border-top-color: var(--ch-accent);
}

.zh-rruga__n {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-micro-wide);
  color: var(--ch-accent);
}

.zh-rruga__name {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: 0;
}

.zh-rruga__note {
  font-family: var(--font-serif);
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: var(--n-700);
}

@media (max-width: 860px) { .zh-mz__rruget { grid-template-columns: minmax(0, 1fr); } }

/* ═══ 20.4 FILTER BAR — taxonomy pills + the active chip ════════════════ */

.zh-mz__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding: var(--sp-3) 0;
  border-top: var(--rule-section) solid var(--color-text);
  border-bottom: var(--rule-row) solid var(--color-divider);
}

.zh-mzpill {
  padding: 4px var(--sp-3) 3px;
  border: 1px solid var(--color-text);
  background: none;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.zh-mzpill:hover { background: var(--color-text); color: var(--color-bg); }

.zh-mzpill.is-active {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}

/* a pill whose type carries nothing in the loaded set is removed by script,
   never left on the page as a filter that can only ever return zero. */
.zh-mzpill[hidden] { display: none; }

/* the active-filter chip lives at the end of the row and states what is on */
.zh-mz__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
  padding: 4px var(--sp-2) 3px;
  background: var(--ch-accent);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.zh-mz__chip[hidden] { display: none; }

.zh-mz__clear {
  border: 0;
  background: none;
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.zh-mz__clear:hover { color: var(--color-text); }

@media (max-width: 560px) { .zh-mz__chip { margin-left: 0; } }

/* ═══ 20.5 EXHIBIT GRID ═════════════════════════════════════════════════ */

.zh-mzgrid {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5) var(--gutter);
}

.zh-mzgrid > li[hidden] { display: none; }

.zh-mzcard {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  height: 100%;
}

.zh-mzcard__fig {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--n-200);
  border-bottom: var(--rule-section) solid var(--color-text);
}

.zh-mzcard__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.6) contrast(1.18);
}

/* roman ordinal, bottom-left over the ink scrim */
.zh-mzcard__roman {
  position: absolute;
  left: var(--sp-2);
  bottom: var(--sp-2);
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-micro-lg);
  font-weight: 700;
  letter-spacing: var(--track-micro);
  color: #fff;
}

/* NDALESA badge — only painted while a Rrugëtim is active */
.zh-mzcard__ndal {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  padding: 3px var(--sp-2) 2px;
  background: var(--ch-accent);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.zh-mzcard__ndal[hidden] { display: none; }

.zh-mzcard__type {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--n-600);
}

.zh-mzcard__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: 0;
}

.zh-mzcard__era,
.zh-mzcard .zh-era {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ch-accent);
}

.zh-mzcard__go {
  margin-top: auto;
  padding-top: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--n-700);
}

.zh-mzcard:hover .zh-mzcard__title { color: var(--ch-accent); }
.zh-mzcard:hover .zh-mzcard__go { color: var(--ch-accent); }

@media (max-width: 1000px) { .zh-mzgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .zh-mzgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .zh-mzgrid { grid-template-columns: minmax(0, 1fr); } }

/* the reveal button + the honest empty state a tour can land on */
.zh-mz__more {
  margin-top: var(--sp-5);
  border: var(--rule-section) solid var(--color-text);
  background: none;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 10px var(--sp-4);
  cursor: pointer;
}

.zh-mz__more:hover { background: var(--color-text); color: var(--color-bg); }
.zh-mz__more[hidden] { display: none; }

.zh-mz__empty {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border-left: var(--rule-section) solid var(--ch-accent);
  background: var(--color-surface);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.5;
}

.zh-mz__empty[hidden] { display: none; }

/* ═══ 20.6 KULTURA E GJALLË — the one live band in the register ══════════
   Serif rows, because they sit inside the museum; a time IS shown here and
   only here, since these are dated news pieces and hiding that would be the
   lie the rest of the register avoids. */

.zh-mzlive { list-style: none; margin: 0; padding: 0; }

.zh-mzlive li { border-top: var(--rule-row) solid var(--color-divider); }
.zh-mzlive li:first-child { border-top: 0; }

.zh-mzlive a {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-3) 0;
}

.zh-mzlive__d {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--n-600);
}

.zh-mzlive__t {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.32;
}

.zh-mzlive a:hover .zh-mzlive__t { color: var(--ch-accent); }

@media (max-width: 560px) {
  .zh-mzlive a { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
}

/* ═══ 20.7 VIJA E KOHËS — clickable years ═══════════════════════════════
   Ghost stores no year on an exhibit; it stores an ERA (`#epoka-*`). So a
   year square selects the era(s) whose span contains it, and the label says
   so out loud. Wraps to as many rows as it needs — never a side-scroller. */

.zh-mzvija {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.zh-mzyear {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--n-700);
}

.zh-mzyear::before {
  content: '';
  display: block;
  width: 100%;
  min-width: 34px;
  height: 10px;
  background: var(--ch-accent);
  opacity: .34;
  transition: opacity .15s ease;
}

.zh-mzyear:hover { color: var(--color-text); }
.zh-mzyear:hover::before { opacity: .72; }

.zh-mzyear.is-active { color: var(--color-text); }
.zh-mzyear.is-active::before { opacity: 1; }

.zh-mz__vijanote {
  margin-top: var(--sp-3);
  font-family: var(--font-serif);
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--n-700);
}

/* ═══════════════════════════════════════════════════════════════════════
   §21. TREGUESI (chunk 5) — the index, served as a full-screen overlay.

   It is a real page at /treguesi/ AND it reads as an overlay: fixed, above
   every band of chrome, scrolling inside itself. ESC leaves it (back, or the
   front page when there is no history to go back to); "/" focuses the field.
   ═══════════════════════════════════════════════════════════════════════ */

.zh-tg {
  position: fixed;
  inset: 0;
  z-index: 200;               /* above the radio dock's 60 */
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-bg);
  padding-bottom: var(--sp-8);
}

.zh-tg__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-text);
  color: var(--color-bg);
  padding: var(--sp-3) 0;
}

.zh-tg__barin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.zh-tg__brand {
  font-family: var(--font-sans);
  font-size: var(--fs-micro-lg);
  font-weight: 800;
  letter-spacing: var(--track-micro-wide);
  text-transform: uppercase;
}

.zh-tg__close {
  margin-left: auto;
  padding: 5px var(--sp-3) 4px;
  border: 1px solid var(--color-bg);
  background: none;
  color: var(--color-bg);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  cursor: pointer;
}

.zh-tg__close:hover { background: var(--color-bg); color: var(--color-text); }

.zh-tg__search {
  margin-top: var(--sp-5);
  border-top: var(--rule-section) solid var(--color-text);
  border-bottom: var(--rule-section) solid var(--color-text);
  padding: var(--sp-4) 0;
}

.zh-tg__field {
  width: 100%;
  border: 0;
  border-bottom: var(--rule-section) solid var(--color-text);
  background: none;
  padding: var(--sp-2) 0;
  font-family: var(--font-sans);
  font-size: clamp(21px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: var(--track-display);
}

.zh-tg__field::placeholder { color: var(--n-400); font-weight: 800; }
.zh-tg__field:focus { outline: 0; border-bottom-color: var(--color-accent); }

.zh-tg__hint {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--n-600);
}

/* ── results ── */
.zh-tg__results { margin-top: var(--sp-4); }
.zh-tg__results[hidden] { display: none; }

.zh-tglist { list-style: none; margin: 0; padding: 0; }

.zh-tglist li { border-top: var(--rule-row) solid var(--color-divider); }
.zh-tglist li:first-child { border-top: 0; }
.zh-tglist li[hidden] { display: none; }

.zh-tgrow {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-3) 0;
}

.zh-tgrow__chip {
  justify-self: start;
  padding: 2px 6px 1px;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--fs-micro-xs);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  white-space: nowrap;
}

.zh-tgrow__chip--muzeu { background: var(--color-text); }

.zh-tgrow__t {
  font-size: var(--fs-body);
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: var(--track-display);
}

/* museum results read in the register's voice even inside the index */
.zh-tgrow--muzeu .zh-tgrow__t {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0;
}

.zh-tgrow:hover .zh-tgrow__t { color: var(--color-accent); }

.zh-tg__none {
  padding: var(--sp-4) 0;
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.5;
}

.zh-tg__none[hidden] { display: none; }

/* ── the 4-column index ── */
.zh-tg__index {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6) var(--gutter);
  margin-top: var(--sp-6);
}

.zh-tg__index[hidden] { display: none; }

.zh-tgcol__head {
  display: block;
  border-top: var(--rule-section) solid var(--color-text);
  padding-top: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-micro-lg);
  font-weight: 800;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
}

.zh-tgcol__head--accent { border-top-color: var(--color-accent); color: var(--color-accent); }

.zh-tgcol ul { list-style: none; margin: 0; padding: 0; }

.zh-tgcol li { border-top: var(--rule-row) solid var(--color-divider); }
.zh-tgcol li:first-child { border-top: 0; }

.zh-tgcol a,
.zh-tgcol__row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 7px 0;
  font-size: var(--fs-ui);
  font-weight: 800;
  line-height: 1.3;
}

/* --ch, not the literal accent: the index's channel rows carry their own
   `ch-*` class, so 04 Sport reads green and 06 Tech reads blue with no
   per-row colour written here. Everywhere else on this page --ch is unset
   and resolves to the red accent, which is what it was before. */
.zh-tgcol__n {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-micro);
  color: var(--ch, var(--color-accent));
}

.zh-tgcol__sub {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-meta);
  font-weight: 400;
  line-height: 1.4;
  color: var(--n-700);
}

/* ── Të ruajturat, with a per-row remove ── */
.zh-tgsaved li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  border-top: var(--rule-row) solid var(--color-divider);
  padding: 7px 0;
}

.zh-tgsaved li:first-child { border-top: 0; }
.zh-tgsaved a { flex: 1; min-width: 0; padding: 0; }

.zh-tgsaved__x {
  flex: none;
  border: 1px solid var(--n-400);
  background: none;
  color: var(--n-600);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1.2;
  padding: 2px 6px 1px;
  cursor: pointer;
}

.zh-tgsaved__x:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

.zh-tg__emptysaved {
  font-family: var(--font-serif);
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--n-700);
}

.zh-tg__savedmore { margin-top: var(--sp-3); }
.zh-tg__savedmore a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1000px) { .zh-tg__index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .zh-tg__index { grid-template-columns: minmax(0, 1fr); } }

/* ═══════════════════════════════════════════════════════════════════════
   §22. ABONOHU (chunk 5) — the one red poster in the estate.
   ═══════════════════════════════════════════════════════════════════════ */

.zh-ab { padding-bottom: var(--sp-8); }

.zh-ab__poster {
  background: var(--color-accent);
  color: #fff;
  padding: var(--sp-7) 0 var(--sp-6);
}

.zh-ab__kick {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-micro-lg);
  font-weight: 800;
  letter-spacing: var(--track-micro-wide);
  text-transform: uppercase;
  color: color-mix(in srgb, #fff 82%, transparent);
}

.zh-ab__clock {
  margin-top: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-giant);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -0.05em;
}

.zh-ab__name {
  margin-top: var(--sp-3);
  font-size: clamp(28px, 4.4vw, 52px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}

.zh-ab__dek {
  margin-top: var(--sp-4);
  max-width: 46ch;
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: color-mix(in srgb, #fff 90%, transparent);
}

.zh-ab__poster :focus-visible { outline-color: #fff; }

/* ── the three manifesto cells ── */
.zh-ab__manifest {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: var(--sp-7);
}

.zh-abcell { border-top: var(--rule-section) solid var(--color-text); padding-top: var(--sp-3); }

.zh-abcell__h {
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: var(--track-display);
}

.zh-abcell__p {
  margin-top: var(--sp-2);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--n-800);
}

@media (max-width: 760px) { .zh-ab__manifest { grid-template-columns: minmax(0, 1fr); } }

/* ── the form ── */
.zh-ab__form {
  margin-top: var(--sp-7);
  border-top: var(--rule-section) solid var(--color-text);
  padding-top: var(--sp-4);
  max-width: 52ch;
}

.zh-ab__row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.zh-ab__input {
  flex: 1 1 16ch;
  min-width: 0;
  border: 1px solid var(--color-text);
  background: var(--color-bg);
  padding: 12px var(--sp-3);
  font-size: var(--fs-ui);
}

.zh-ab__msg {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--n-700);
}

.zh-ab__msg.is-ok { color: var(--ch-sport); }
.zh-ab__msg.is-err { color: var(--color-accent); }

.zh-ab__fine {
  margin-top: var(--sp-3);
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--n-700);
}

/* the member-confirmed state replaces the form entirely */
.zh-ab__done {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-top: var(--sp-7);
  border-top: var(--rule-section) solid var(--color-text);
  padding-top: var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 800;
  letter-spacing: var(--track-display);
}

.zh-ab__dot { color: var(--ch-sport); }

/* ── "Çfarë përmban një numër" ── */
.zh-ab__what { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }

.zh-ab__what li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: baseline;
  border-top: var(--rule-row) solid var(--color-divider);
  padding: var(--sp-3) 0;
}

.zh-ab__what li:first-child { border-top: 0; }

.zh-ab__num {
  font-family: var(--font-mono);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-accent);
}

.zh-ab__whatt {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: 1.4;
}

.zh-ab__whatsec { margin-top: var(--sp-7); }

/* ── the red field band ──────────────────────────────────────────────────
   The poster opens the page in red and this closes it in red, with the whole
   ask in between. Full-bleed, which is what §24 unlocks the shell for.
   Rendered ONLY to a non-member: a signed-in reader gets .zh-ab__done on the
   page background instead, where the ink rule and the green dot are legible.
   The ink rule and the ink button stay ink ON the red — the two darkest
   things in the estate against the loudest, which is the whole point. */
.zh-ab__band {
  margin-top: var(--sp-8);
  padding: var(--sp-7) 0;
  background: var(--color-accent);
  color: #fff;
}

.zh-ab__band .zh-ab__form { margin-top: 0; }

/* on red the neutral greys go invisible; everything inside the band is white */
.zh-ab__band .zh-ab__msg,
.zh-ab__band .zh-ab__fine { color: color-mix(in srgb, #fff 88%, transparent); }

/* .is-ok is green on the page background and would be unreadable here —
   inside the band the state reads as weight, not as hue. */
.zh-ab__band .zh-ab__msg.is-ok,
.zh-ab__band .zh-ab__msg.is-err { font-weight: 700; color: #fff; }

.zh-ab__band .zh-ab__fine a { text-decoration: underline; text-underline-offset: 3px; }
.zh-ab__band a:hover { color: #fff; }
.zh-ab__band :focus-visible { outline-color: #fff; }

/* ════════════════════════════════════════════════════════════════════════
   §23. KOMENTET (chunk 5) — the furniture around Ghost's comments widget.

   ═══ WHAT GHOST ACTUALLY EMITS — MEASURED, NOT ASSUMED ═══
   Fetched from the live site 2026-08-11 (Ghost 6.45, comments-ui @~1.5). The
   brief listed `.ghost-comments` / `.gh-comments` as candidates; NEITHER is
   emitted. `{{comments}}` renders exactly one element:

     <script defer src="https://cdn.jsdelivr.net/ghost/comments-ui@~1.5/…"
             data-ghost-comments="…" data-post-id="…" data-title="Komentet"
             data-count="true" data-color-scheme="auto"
             data-avatar-saturation="60" data-accent-color="#CC1B2B"…>

   comments-ui then appends `#ghost-comments-root` and renders its whole app
   inside an <iframe title="comments-frame">, styled by Tailwind compiled into
   its own bundle. Theme CSS reaches the iframe BOX and nothing inside it.

   So the brief's comment rows, the square ink initials avatar and the
   red-left-rule reply thread CANNOT be styled from this file. No rule below
   pretends otherwise: a `.comment-row` selector here would be dead code that
   reads in review like a shipped feature. What the theme owns and this block
   dresses is the section post.hbs renders around the widget — `.g-comments`,
   `.g-comments-head`, `.g-label` — plus the widget’s own box.

   ═══ THE TWO KNOBS THAT DO REACH THE INTERIOR (both OWED, neither is CSS) ═══
   1. `data-color-scheme="auto"` hands a dark-OS reader a DARK widget on a
      light-only page. The fix is one helper param in post.hbs:
          {{comments title="Komentet" count=true mode="light" saturation="0"}}
      `mode` pins colorScheme and `saturation="0"` renders the avatars
      greyscale — the closest the helper API gets to the ink square this
      register asks for. post.hbs is out of scope for chunk 5 part 2; this is
      the exact line for whoever rewrites it.
   2. `data-accent-color` comes from the SITE setting `accent_color`, which
      still reads #CC1B2B (the retired v9 red) and cannot be written by an
      Admin API integration token. Ghost → Settings → Branding → #ec3013 is
      the only way to align it. OWNER ACTION.
   Also owed: post.hbs passes `title="Komentet"`, so the widget prints its own
   heading INSIDE the iframe under the chip printed outside it. Dropping the
   `title` param (the chip is the head) removes the double.
   ═══════════════════════════════════════════════════════════════════════ */

/* `.g-comments` is what post.hbs emits today; `.zh-cm` is the name a later
   post.hbs rewrite will carry. Both are listed on every rule so this block is
   live NOW and survives that rewrite — neither name is a dead branch.
   zhurma.css loads after gazeta.css, so these win the §340 defaults. */
.g-comments,
.zh-cm {
  margin-top: var(--sp-8);
  max-width: var(--measure);
  border-top: var(--rule-section) solid var(--color-text);
  padding-top: var(--sp-4);
}

.g-comments-head,
.zh-cm__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* gazeta.css hangs a hairline off the head with ::after. The 2px chip is the
   whole head in this register — the hairline halves its weight. */
.g-comments-head::after { display: none; }

/* the 2px-bordered tag: KOMENTET · n */
.g-comments-head .g-label,
.zh-cm__tag {
  display: inline-block;
  border: var(--rule-section) solid var(--color-text);
  padding: 5px var(--sp-3) 4px;
  background: none;
  font-family: var(--font-sans);
  font-size: var(--fs-micro-lg);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--color-text);
}

/* the count, when a template puts one in the chip. The widget’s own count
   lives inside the iframe and this cannot reach it — see the header note. */
.zh-cm__n { color: var(--color-accent); }

.zh-cm__note {
  font-family: var(--font-serif);
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--n-700);
}

/* ── the widget’s box (the deepest CSS can go; see the header note) ── */
.g-comments #ghost-comments-root,
.zh-cm__widget #ghost-comments-root { margin: var(--sp-2) 0 0; }

.g-comments iframe[title='comments-frame'],
.zh-cm__widget iframe[title='comments-frame'] {
  display: block;
  width: 100%;
  max-width: 100%;   /* the standing no-horizontal-scroll law reaches the box */
  border: 0;
  color-scheme: light;
}

/* Roman ordinals via a CSS counter (same device as §19.7's .zh-net): a card
   hidden by the type filter or a Rrugëtim generates no box, so it does not
   increment — the visible register always reads I, II, III… with no gaps.
   Placed after §20 so it sits next to nothing it could shadow. */
.zh-mzgrid { counter-reset: zh-mz; }
.zh-mzcard__roman { counter-increment: zh-mz; }
.zh-mzcard__roman::before { content: counter(zh-mz, upper-roman); }

/* ═══ 24. SHELL UNLOCK — the three chunk-5 pages ═════════════════════════
   Same scoped release §18.0 and §19.0 make for home/tag/post: gazeta.css caps
   <main>.g-shell at 1100px and pads it, which is right for the ~30 page-*
   surfaces still on the old dress and fatal for the Muzeu ink band, the
   Treguesi overlay and the Abonohu poster — all three are full-bleed. Named
   one page-slug at a time so nothing else loses its shell early.
   (Verified against the live body_class on 2026-08-11: Ghost emits
   `page-template page-<slug>` on these three URLs.) */
body.page-enciklopedia .g-shell,
body.page-treguesi .g-shell,
body.page-abonohu .g-shell { max-width: none; padding: 0; }

/* The Treguesi is a fixed overlay; with the page behind it scrollable the
   reader gets two scrollbars and a body that drifts under the index. */
body.page-treguesi { overflow: hidden; }