/* ═══════════════════════════════════════════════════════════════════════
   ZHURMA SHQIP — the CHILD BRAND of the museum wing · 2026-08-11
   "Zhurma e të parëve" — the ancestral-memory register.

   WHAT THIS FILE IS
   The Muzeu/Enciklopedia lane rendered in the Zhurma Shqip brand instead of
   the main ZHURMA brand: blood red (#A31316) and deep (#600A0D) on archival
   cream (#F8F4E8), display type in 'Jersey 25', long read in 'Crimson Pro',
   the red vula (stamp) as signature, duotone-riso photographs. Source of the
   palette, the two faces and the voice: the Kit Zhurma Shqip design package
   (Karusel/Postime/Story/Facebook + the two avatars) — the same tokens the
   social surfaces already ship, so a reader who arrives from a carousel lands
   on a page that is visibly the same publication.

   WHY IT IS A SEPARATE FILE AND NOT AN EDIT TO zhurma.css
   The fork is ~2% of the site (the museum index + ~400 exhibit pages) and
   must not be able to reach the other 98%. Everything here is scoped under a
   single class, `.zh-shqip`, carried by exactly three templates
   (page-enciklopedia.hbs, custom-ekspozita.hbs, partials/g-exhibit.hbs).
   Delete this <link> from default.hbs and the museum returns, intact, to the
   ink register — nothing else on the site changes by one pixel. That is the
   whole design of the isolation.

   HOW IT WORKS — TOKENS FIRST, RULES SECOND
   zhurma.css §19.7/§20 already builds the museum out of tokens
   (--color-bg, --color-text, --ch, --ch-accent, --font-serif, --n-*), never
   out of literal colours. So most of the repaint is achieved by redeclaring
   those tokens on `.zh-shqip` (§2) and letting the existing cascade do the
   work. The rule blocks after §2 exist only where a literal was hard-coded
   upstream (`#fff` on the ink chips), where the brand asks for something the
   token system cannot express (Jersey 25 on display only, the duotone stack,
   the vula), or where a contrast pair changed enough to need re-measuring.

   THE LAWS OF THE HOUSE STILL BIND — every one of them:
     · zero border-radius (the vula's circle is a drawn SVG mark, not a radius)
     · no box-shadow anywhere
     · light only — no dark mode, no prefers-color-scheme branch
     · no emoji in chrome
     · nothing below the 12px floor (--fs-1); the vula's ring lettering is set
       in SVG USER UNITS (≥12 in a 200-unit viewBox) — it is a drawn seal, a
       logotype like the masthead, not UI copy, and it is aria-hidden
     · all UI copy Albanian; the brand furniture added here is GHEG, per the
       kit's voice note ("zâni: gegnisht, ton kronikan")
     · no horizontal scroll at 360px

   CONTRAST, MEASURED ON THE CREAM GROUND (not on #fff — the ground is
   #F8F4E8, which is the binding surface here exactly as --color-bg is in
   zhurma.css §1):
       #A31316 on #F8F4E8 ....... 7.21:1   (red as text AND as rule)
       #F8F4E8 on #A31316 ....... 7.21:1   (the cream flood on the red band)
       #600A0D on #F8F4E8 ....... 11.9:1
       #17090A on #F8F4E8 ....... 17.5:1
       --n-600 #6F5C46 on cream .. 5.80:1  (the 12px type/meta label colour)
       #fff on #A31316 .......... 7.93:1   (the stamped chips)
   Every one clears 4.5:1, so no size in this file needs the large-text
   exemption to pass — which is deliberate: the register's whole point is
   that a 60-year-old reads it easily (owner constitution §7).
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ 1. THE TWO FACES ════════════════════════════════════════════════════
   Loaded the same way zhurma.css loads Archivo + Source Serif 4 (an @import
   off fonts.googleapis.com) — one mechanism for webfonts on this theme, not
   two. `display=swap` so the museum's text is readable before either face
   lands; the fallbacks below are chosen so that a swap is a change of voice,
   never a change of layout:
     · Jersey 25 is a condensed poster face → falls back to a condensed sans,
       then the theme's own Archivo.
     · Crimson Pro is an old-style book serif → falls back to Georgia, which
       is what the whole site already reads as when Source Serif is missing.
   Jersey 25 ships one weight (400). Do not write font-weight: 700 against
   it — the browser would synthesise a smeared bold; the display sizes below
   carry their weight through SIZE, which is how the kit's poster titles work.
   ═══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Jersey+25&family=Crimson+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');

/* ═══ 2. THE BRAND TOKENS ════════════════════════════════════════════════
   One block. Everything downstream of `.zh-shqip` inherits it, so a component
   that already reads tokens (the Skeda, the cards, the pills, the rail, the
   buttons, the tags, the newsletter card) repaints itself with no rule here.

   `.zh-shqip .ch-muzeu` re-asserts the two channel variables because
   `ch-muzeu` sets `--ch: ink` on the museum index's own wrapper, which sits
   INSIDE the `.zh-shqip` wrapper there (on the exhibit lane the two classes
   share one element and the later file wins on its own). Without this line
   the index would keep ink accents while the exhibit went red — the two
   halves of one wing, forked apart by a wrapper.
   ═══════════════════════════════════════════════════════════════════════ */

.zh-shqip {
  /* ── the kit's four inks ── */
  --shqip-krem:   #F8F4E8;   /* the ground; "lights" of the duotone */
  --shqip-gjak:   #A31316;   /* gjak i kuq — the one accent; "shadows" */
  --shqip-thelle: #600A0D;   /* deep — rules, links, secondary marks */
  --shqip-ink:    #17090A;   /* the kit's near-black; a warmed red-black */

  /* ── the theme's surface tokens, forked ── */
  --color-bg: var(--shqip-krem);
  --color-surface: #F0E8D3;         /* cream, one step down — panels/wells */
  --color-text: var(--shqip-ink);
  --color-accent: var(--shqip-gjak);
  --color-accent-2: #E8A9A5;        /* only ever used ON a dark/red flood */
  --color-divider: color-mix(in srgb, var(--shqip-thelle) 34%, transparent);

  /* ── the channel pair. --ch is the deep, --ch-accent the blood red: the
        same ink/red SPLIT §19.7 designed the museum around, re-voiced. Every
        museum rule upstream reads one of these two and nothing else. ── */
  --ch: var(--shqip-thelle);
  --ch-accent: var(--shqip-gjak);
  --overlay-base: var(--shqip-thelle);

  /* ── a WARM neutral ramp. The stock ramp is a cool grey and reads as dirt
        on cream; these are the same ramp rotated onto the paper's own hue.
        --n-600 is the load-bearing one (12px meta labels) and is pinned at
        5.80:1 on the cream — do not lighten it. ── */
  --n-100: #FCFAF3;
  --n-200: #F0E8D3;
  --n-300: #E0D4B8;
  --n-400: #C4B393;
  --n-500: #9C8666;
  --n-600: #6F5C46;
  --n-700: #55432F;
  --n-800: #3A2A1C;
  --n-900: #241713;

  /* ── the two faces ──
        --font-serif is the READING face and is swapped wholesale: it is what
        .zh-body/.zh-exbody, the Skeda values, the deks, the card titles and
        the section titles all already read. --font-display is new and is
        applied by hand, in §3, to display sizes ONLY. */
  --font-serif: 'Crimson Pro', Georgia, 'Times New Roman', Times, serif;
  --font-display: 'Jersey 25', 'Archivo Narrow', 'Arial Narrow', var(--font-sans);

  /* Crimson Pro has a smaller x-height than Source Serif 4, so the same px
     value reads a size smaller. The long-read stays at the brief's 17px on
     desktop (.zh-body is already 17/1.85/64ch — see zhurma.css §18) and is
     lifted on phones in §9, where owner constitution §7 is explicit. */
  --fs-read: 17px;

  background: var(--shqip-krem);
  color: var(--color-text);
}

.zh-shqip .ch-muzeu {
  --ch: var(--shqip-thelle);
  --ch-accent: var(--shqip-gjak);
  --overlay-base: var(--shqip-thelle);
}

/* THE GROUND. The templates cannot set a body class — default.hbs writes
   `class="{{body_class}}"` and this build is allowed exactly one line in that
   file (the <link>) — so the page ground is claimed from the content instead,
   with :has(). If :has() is ever unavailable the wrapper's own background
   (above) still carries the cream under all museum content; only the strip
   beside/below the wrap would stay paper. Nothing breaks, one band differs.

   THE LITERAL IS DELIBERATE AND MUST STAY A LITERAL. `var(--shqip-krem)` is
   declared on `.zh-shqip`, and custom properties do not inherit UPWARD — on
   <body> that reference is invalid at computed-value time, which does not fall
   back to the previous declaration but resolves to `unset`. The rule then
   paints the body TRANSPARENT and the reader sees the paper canvas behind it:
   a museum in a grey frame, with every stylesheet reporting healthy. Measured
   in Chromium on 2026-08-11 — this line shipped as a var() first and that is
   exactly what it did. */
body:has(.zh-shqip) { background: #F8F4E8; }

/* ═══ 3. DISPLAY TYPE — JERSEY 25, AND ONLY WHERE IT BELONGS ═════════════
   The kit uses the condensed poster face for the things a poster shouts and
   nothing else: the wing's name, the numeral, the exhibit's own title, the
   banner title, the section titles, the tour ordinals. Reading text, card
   titles, deks, the Skeda and every body paragraph stay Crimson Pro — a
   pixel-cut poster face at 17px is a legibility tax the owner constitution
   does not permit us to charge (§7: a 60-year-old must read this EASILY).

   Jersey 25 is condensed, so it takes POSITIVE tracking in caps (the theme's
   one negative --track-display value is tuned for Archivo and closes this
   face up into a fence) and a taller line-height than a normal display face
   at the same size, because its caps run tall.
   ═══════════════════════════════════════════════════════════════════════ */

.zh-shqip .zh-mz__word,
.zh-shqip .zh-ex__title,
.zh-shqip .zh-mzbanner__title,
.zh-shqip .zh-mz__sectitle,
.zh-shqip .zh-rail__title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* the wing's name: poster scale, cream on the red flood */
.zh-shqip .zh-mz__word {
  font-size: clamp(46px, 8vw, 96px);
  line-height: 0.86;
}

/* the exhibit's own title. Bigger than the news register's --fs-article on
   purpose: this face runs ~20% narrower than Archivo at the same size, so a
   like-for-like number would have read SMALLER than the wire's headlines —
   the opposite of what the register is for. */
.zh-shqip .zh-ex__title {
  font-size: clamp(38px, 6.2vw, 74px);
  line-height: 0.94;
}

.zh-shqip .zh-mzbanner__title { font-size: clamp(28px, 3.8vw, 44px); line-height: 0.98; }
.zh-shqip .zh-mz__sectitle    { font-size: clamp(24px, 3vw, 34px); line-height: 1; }
.zh-shqip .zh-rail__title     { font-size: 26px; line-height: 1; }

/* the numeral. IX is the MUZEU channel's mark (the nav band's ninth tab) —
   in this brand it is set in the poster face rather than the theme's mono,
   and it is the one cream mark on the red band. */
.zh-shqip .zh-mz__ix {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(56px, 9vw, 108px);
  line-height: 0.8;
  letter-spacing: 0.02em;
  color: var(--shqip-krem);
}

/* tour ordinals + the network's roman counters */
.zh-shqip .zh-rruga__n,
.zh-shqip .zh-net__n,
.zh-shqip .zh-mzcard__roman {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.03em;
}

.zh-shqip .zh-rruga__n { font-size: 34px; color: var(--shqip-gjak); }
.zh-shqip .zh-net__n   { font-size: 22px; color: var(--shqip-gjak); }

/* ═══ 4. THE VULA — the red circle seal ═════════════════════════════════
   The brand's signature mark (partials/zh-shqip-vula.hbs). The kit's rule is
   absolute and is the reason two variants exist: cream ground → RED vula;
   red flood → CREAM vula. Never red-on-red, never cream-on-cream.
   Two sizes, from the kit: ~signature and ~protagonist.
   ═══════════════════════════════════════════════════════════════════════ */

.zh-shqip .zh-vula {
  display: block;
  flex: none;
  width: 108px;                 /* signature */
  height: 108px;
  color: var(--shqip-gjak);     /* the SVG paints from currentColor */
}

.zh-shqip .zh-vula--madh { width: 168px; height: 168px; }   /* protagonist */
.zh-shqip .zh-vula--krem { color: var(--shqip-krem); }      /* on a red flood */

.zh-shqip .zh-vula svg { display: block; width: 100%; height: 100%; }

/* every stroke and fill is currentColor, so a variant is one property */
.zh-shqip .zh-vula__ring-o { fill: none; stroke: currentColor; stroke-width: 5; }
.zh-shqip .zh-vula__ring-i { fill: none; stroke: currentColor; stroke-width: 1.5; }
.zh-shqip .zh-vula__bar    { stroke: currentColor; stroke-width: 2; }

/* SVG user units in a 200-unit viewBox — see the floor note in the header. */
.zh-shqip .zh-vula__legend {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.7px;
  fill: currentColor;
}

.zh-shqip .zh-vula__word {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 1px;
  fill: currentColor;
}

.zh-shqip .zh-vula__word--big { font-size: 42px; }

/* ── the colophon the vula signs ──────────────────────────────────────────
   Gheg, chronicler register, per the kit's voice note. This is the ONLY new
   visible copy the redesign introduces; every editorial string on these pages
   is left exactly as the museum wrote it. */
.zh-shqip .zh-kolofon {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
  padding: var(--sp-5) 0;
  border-top: var(--rule-section) solid var(--shqip-gjak);
  border-bottom: var(--rule-section) solid var(--shqip-gjak);
}

.zh-shqip .zh-kolofon__brand {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 0.96;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--shqip-gjak);
}

.zh-shqip .zh-kolofon__line {
  margin: var(--sp-2) 0 0;
  max-width: 52ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--n-800);
}

.zh-shqip .zh-kolofon__cta {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-micro-lg);
  font-weight: 800;
  letter-spacing: var(--track-micro-wide);
  text-transform: uppercase;
  color: var(--shqip-thelle);
}

/* the masthead strip that opens the index: cream ground, red vula, 2px red
   rules top and bottom — the "kapak" page of the carousel, as a web band. */
.zh-shqip .zh-kapak {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  border-top: 4px solid var(--shqip-gjak);
  border-bottom: var(--rule-section) solid var(--shqip-gjak);
}

.zh-shqip .zh-kapak__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: var(--shqip-thelle);
}

.zh-shqip .zh-kapak__word {
  display: block;
  margin-top: var(--sp-1);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 6.4vw, 78px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--shqip-gjak);
}

.zh-shqip .zh-kapak__sub {
  margin: var(--sp-2) 0 0;
  max-width: 54ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--n-800);
}

@media (max-width: 620px) {
  .zh-shqip .zh-kapak,
  .zh-shqip .zh-kolofon { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
}

/* ═══ 5. DUOTONE RISO — the archival photo treatment ═════════════════════
   The kit prints every photograph as a two-ink riso: shadows #A31316, lights
   #F8F4E8, plus a little grain. Reproduced here in CSS rather than baked into
   the files, because the museum's ~400 covers are ordinary photographs pulled
   by the image chain and nobody is going to re-render them.

   THE STACK (inside an isolated group, so the blend can never reach the page
   behind it):
     z0  the <img>, desaturated and slightly contrast-lifted
     z1  the existing .img-overlay scrim, untouched
     z2  #A31316 · mix-blend-mode: lighten   → every shadow becomes red
     z3  #F8F4E8 · mix-blend-mode: multiply  → every light becomes cream
     z4  the grain, and any label that must stay readable
   The two blend layers live behind @supports: a browser without mix-blend-mode
   would paint a flat red rectangle over the photograph, which is a broken page
   and not a degraded one. Without the guard the reader gets the grayscale
   plate, which is still archival and still legible.
   ═══════════════════════════════════════════════════════════════════════ */

.zh-shqip .zh-mzcard__fig,
.zh-shqip .zh-mzbanner__fig,
.zh-shqip .img-frame { background: var(--n-300); }

.zh-shqip .zh-mzcard__fig img,
.zh-shqip .zh-mzbanner__fig img,
.zh-shqip .img-frame img {
  position: relative;
  z-index: 0;
  filter: grayscale(1) contrast(1.1) brightness(1.03);
}

@supports (mix-blend-mode: lighten) {
  .zh-shqip .zh-mzcard__fig,
  .zh-shqip .zh-mzbanner__fig,
  .zh-shqip .img-frame { isolation: isolate; }

  .zh-shqip .zh-mzcard__fig::before,
  .zh-shqip .zh-mzbanner__fig::before,
  .zh-shqip .img-frame::before,
  .zh-shqip .zh-mzcard__fig::after,
  .zh-shqip .zh-mzbanner__fig::after,
  .zh-shqip .img-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .zh-shqip .zh-mzcard__fig::before,
  .zh-shqip .zh-mzbanner__fig::before,
  .zh-shqip .img-frame::before {
    z-index: 2;
    background: var(--shqip-gjak);
    mix-blend-mode: lighten;
  }

  .zh-shqip .zh-mzcard__fig::after,
  .zh-shqip .zh-mzbanner__fig::after,
  .zh-shqip .img-frame::after {
    z-index: 3;
    background: var(--shqip-krem);
    mix-blend-mode: multiply;
  }

  /* the placeholder has no photograph to duotone and would otherwise take the
     full red flood */
  .zh-shqip .img-placeholder::before,
  .zh-shqip .img-placeholder::after { content: none; }
}

/* GRAIN. The existing `.img-overlay--deep` scrim span is REUSED as the grain
   plate rather than a fourth layer being invented: a gradient is a
   background-image, so replacing it with the noise tile costs nothing and
   keeps the layer count at what the markup already carries. The scrim's own
   job — keeping white type legible over a photograph — was retired two rules
   below, where the roman ordinal became a stamped chip that carries its own
   ground and cannot be undone by a bright picture.
   The tile is 120px and repeats; feTurbulence is evaluated once per tile, not
   per element, which is the only reason a filter is affordable here at all. */
.zh-shqip .zh-mzcard__fig .img-overlay,
.zh-shqip .zh-mzbanner__fig .img-overlay,
.zh-shqip .img-frame .img-overlay {
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='zhgrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23zhgrain)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  background-repeat: repeat;
  opacity: 0.22;
  mix-blend-mode: multiply;
}

.zh-shqip .zh-art__fig .img-frame {
  border-bottom: var(--rule-section) solid var(--shqip-gjak);
}

/* labels that sit ON a duotone plate must clear the blend layers, or they get
   printed with the photograph. */
.zh-shqip .zh-mzcard__roman,
.zh-shqip .zh-mzcard__ndal,
.zh-shqip .zh-mzbanner__body { z-index: 4; }

/* the roman ordinal becomes a STAMPED chip instead of white type over a
   scrim: in a duotone the lights are cream, and white-on-cream is the one
   pair this treatment can produce that nothing can rescue. Cream on red is
   7.21:1 and cannot drift with the photograph. */
.zh-shqip .zh-mzcard__roman {
  left: 0;
  bottom: 0;
  padding: 2px 8px 1px;
  background: var(--shqip-gjak);
  color: var(--shqip-krem);
  font-size: 20px;
  line-height: 1.1;
}

.zh-shqip .zh-mzcard__ndal {
  background: var(--shqip-thelle);
  color: var(--shqip-krem);
}

/* ═══ 6. MUZEU INDEX ════════════════════════════════════════════════════ */

/* ── 6.1 the band. Ink flood → BLOOD FLOOD. This is the single loudest
      change on the page and the one that tells a returning reader, before a
      word is read, which of the two brands they are inside. ── */
.zh-shqip .zh-mz__band {
  background: var(--shqip-gjak);
  color: var(--shqip-krem);
  border-bottom: 6px solid var(--shqip-thelle);
}

.zh-shqip .zh-mz__sub {
  color: color-mix(in srgb, var(--shqip-krem) 86%, transparent);
}

.zh-shqip .zh-mz__count {
  border-top-color: color-mix(in srgb, var(--shqip-krem) 40%, transparent);
  color: color-mix(in srgb, var(--shqip-krem) 88%, transparent);   /* 5.83:1 */
}

.zh-shqip .zh-mz__count b { color: var(--shqip-krem); }

/* ── 6.2 section heads: the 2px rule goes red. The museum's rules are its
      furniture; in this brand the furniture is the one ink. ── */
.zh-shqip .zh-mz__sechead,
.zh-shqip .zh-ex__byrow { border-top-color: var(--shqip-gjak); }

.zh-shqip .zh-mz__skeda,
.zh-shqip .zh-skeda { border-color: var(--shqip-gjak); }

/* ── 6.3 Skeda e ditës ── */
.zh-shqip .zh-mzbanner__body {
  border-left-color: var(--shqip-gjak);
  background: var(--shqip-krem);
}

.zh-shqip .zh-mzbanner__roman,
.zh-shqip .zh-mzbanner__go { color: var(--shqip-gjak); }

@media (max-width: 720px) {
  .zh-shqip .zh-mzbanner__body { border-top-color: var(--shqip-gjak); }
}

/* ── 6.4 Rrugëtime: three tours, drawn as filing cards ── */
.zh-shqip .zh-rruga {
  border-color: var(--shqip-gjak);
  background: var(--shqip-krem);
}

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

.zh-shqip .zh-rruga.is-active {
  background: var(--shqip-gjak);
  border-color: var(--shqip-gjak);
  color: var(--shqip-krem);
}

.zh-shqip .zh-rruga.is-active .zh-rruga__n,
.zh-shqip .zh-rruga.is-active .zh-rruga__name,
.zh-shqip .zh-rruga.is-active .zh-rruga__note { color: var(--shqip-krem); }

.zh-shqip .zh-rruga__name { font-family: var(--font-serif); font-weight: 700; }

/* ── 6.5 the taxonomy pills + the active chip ── */
.zh-shqip .zh-mzpill {
  border-color: var(--shqip-gjak);
  color: var(--shqip-thelle);
  background: none;
}

.zh-shqip .zh-mzpill:hover,
.zh-shqip .zh-mzpill.is-active {
  background: var(--shqip-gjak);
  border-color: var(--shqip-gjak);
  color: var(--shqip-krem);
}

.zh-shqip .zh-mz__chip { color: var(--shqip-thelle); }
.zh-shqip .zh-mz__clear { color: var(--shqip-gjak); }
.zh-shqip .zh-mz__clear:hover { color: var(--shqip-thelle); }

/* ── 6.6 the register grid ── */
.zh-shqip .zh-mzcard__fig { border-bottom-color: var(--shqip-gjak); }
.zh-shqip .zh-mzcard__title { color: var(--color-text); }
.zh-shqip .zh-mzcard:hover .zh-mzcard__title,
.zh-shqip .zh-mzcard:hover .zh-mzcard__go { color: var(--shqip-gjak); }

.zh-shqip .zh-mz__more { border-color: var(--shqip-gjak); color: var(--shqip-gjak); }
.zh-shqip .zh-mz__more:hover { background: var(--shqip-gjak); color: var(--shqip-krem); }

.zh-shqip .zh-mz__empty {
  border-left-color: var(--shqip-gjak);
  background: var(--color-surface);
}

/* ── 6.7 Kultura e gjallë + the two exhibit-page bands share .zh-mzlive ── */
.zh-shqip .zh-mzlive li { border-top-color: var(--color-divider); }
.zh-shqip .zh-mzlive a:hover .zh-mzlive__t { color: var(--shqip-gjak); }

/* ── 6.8 Vija e kohës — NOTHING is overridden here, on purpose.
      A year is not a pill: §20.7 builds it as a 10px bar in --ch-accent at
      0.34 opacity with the label BELOW it, and the opacity IS the state (hover
      .72, active 1). §2 has already made that bar blood red and the label a
      warm neutral, so the strip is on-brand with no rule.
      A first pass here did override it — border, mono, and a filled red block
      on `.is-active` — and it painted one year as a solid chip beside four
      bars: a control that no longer looked like its own neighbours. The token
      layer had already done the work; the rules were undoing it. ── */

/* ═══ 7. EXHIBIT PAGES ══════════════════════════════════════════════════
   The core of the fork. An exhibit must not be mistakable for a wire brief at
   arm's length — same acceptance the ink register was built against ("serif,
   ink, roman numerals, no timestamps/meters"), now in cream and blood.
   ═══════════════════════════════════════════════════════════════════════ */

.zh-shqip .zh-crumb { color: var(--n-700); }
.zh-shqip .zh-crumb a { color: var(--shqip-thelle); }

/* the type pills: ink chip → deep chip, accent chip → blood chip */
.zh-shqip .tag--ink { background: var(--shqip-thelle); color: var(--shqip-krem); }
.zh-shqip .tag--accent { background: var(--shqip-gjak); color: var(--shqip-krem); }
.zh-shqip .tag--outline { border-color: var(--shqip-gjak); color: var(--shqip-gjak); }

.zh-shqip .zh-ex__dek {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--n-800);
  max-width: 54ch;
}

.zh-shqip .zh-ex__by { color: var(--shqip-thelle); }
.zh-shqip .zh-ex__by em { color: var(--shqip-gjak); }

/* the Skeda's caption bar: the seal's colours, not the wire's ink */
.zh-shqip .zh-skeda__cap {
  background: var(--shqip-gjak);
  color: var(--shqip-krem);
}

.zh-shqip .zh-skeda dt { color: var(--n-600); }
.zh-shqip .zh-skeda dd { font-family: var(--font-serif); }

/* ── 7.1 the long read. .zh-body already ships 17px / 1.85 / 64ch (zhurma.css
      §18) and reads --font-serif — which §2 has already swapped to Crimson
      Pro. So the register's reading voice changes with ZERO layout risk: the
      measure, the leading and the rhythm are the ones the whole site was
      typeset against. What is added here is what the face itself needs. ── */
.zh-shqip .zh-exbody {
  font-family: var(--font-serif);
  font-size: var(--fs-read);
  line-height: 1.85;
  max-width: 64ch;
}

/* Crimson Pro's 400 is lighter on screen than Source Serif's; on cream (a
   lower-contrast ground than paper white) it needs the extra optical weight
   or the column greys out. */
.zh-shqip .zh-exbody p { font-weight: 400; }
.zh-shqip .zh-exbody strong,
.zh-shqip .zh-exbody b { font-weight: 700; }

.zh-shqip .zh-exbody a { color: var(--shqip-thelle); }
.zh-shqip .zh-exbody a:hover { color: var(--shqip-gjak); }

/* headings inside the entry: the poster face, small, as chapter marks */
.zh-shqip .zh-exbody h2,
.zh-shqip .zh-exbody h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--shqip-thelle);
}

.zh-shqip .zh-exbody h2 { font-size: clamp(28px, 3.4vw, 38px); line-height: 1; }
.zh-shqip .zh-exbody h3 { font-size: clamp(23px, 2.6vw, 29px); line-height: 1.04; }

/* the pull-quote between two rules — the kit's «citat» page, as a web block.
   The rules go red; the quote itself stays in the reading face, because it is
   a QUOTATION and the poster face would put words in the source's mouth. */
.zh-shqip .zh-exbody blockquote {
  border-top-color: var(--shqip-gjak);
  border-bottom-color: var(--shqip-gjak);
  color: var(--shqip-thelle);
}

/* the sourcing apparatus (contract 7b keeps the rule alive in zhurma.css and
   this only re-inks it) */
.zh-shqip .zh-body .ex-sources { border-color: var(--shqip-gjak); }
.zh-shqip .zh-body .ex-sources a { color: var(--shqip-thelle); }

/* the kontekst well (verify-theme contract 7). Upstream it is an INK FLOOD
   with white type — so re-inking only the border, as a first pass did, put
   blood red on near-black at 1.9:1 and made the one box the museum uses to
   say "why this matters" the least readable thing on the page. The flood and
   the type move together or not at all: blood ground, cream type, 7.21:1. */
.zh-shqip .zh-body h4 {
  background: var(--shqip-gjak);
  border-color: var(--shqip-gjak);
  color: var(--shqip-krem);
}

.zh-shqip .zh-body h4 + ul,
.zh-shqip .zh-body h4 + ol,
.zh-shqip .zh-body h4 + p { border-color: var(--shqip-gjak); }

/* ── 7.2 the memory graph. .ex-graph and .ex-map are styled ONLY in
      gazeta.css (verify-theme contract 3), which paints the mount white with
      a grey hairline — a white rectangle in the middle of a cream page. Only
      the FRAME is re-inked here: the node fills come from exhibit-graph.js by
      node TYPE, and a CSS `fill` beats an SVG presentation attribute, which
      is exactly how the v10 cutover flattened the whole semantic layer once
      (gazeta.css §.ex-graph carries the scar). Nothing here touches fill. ── */
.zh-shqip .ex-graph {
  background: var(--shqip-krem);
  border: var(--rule-section) solid var(--shqip-gjak);
}

.zh-shqip .ex-graph__link { stroke: color-mix(in srgb, var(--shqip-gjak) 42%, transparent); }
.zh-shqip .ex-graph__legend { color: var(--n-700); }

/* ── 7.3 the rail ──
      `.zh-rail__panel` and `.zh-espresso-card` are NOT touched. The panel has
      no painted border upstream (giving it one would move the rail's metrics),
      and the espresso card is already `background: var(--color-accent)` with
      white type — which §2 has turned into a blood flood, the kit's exact
      "flood i kuq" surface, at 7.93:1. A first pass repainted the card cream
      and left the white type on it: a newsletter CTA that could only be read
      by selecting it. The lesson is the same one §6.8 records — a component
      built on tokens is already forked; overriding it is how it breaks. ── */
.zh-shqip .zh-rail__title { color: var(--shqip-thelle); }
.zh-shqip .zh-net li { border-top-color: var(--color-divider); }
.zh-shqip .zh-net a:hover .zh-net__t { color: var(--shqip-gjak); }

/* the ink CTA is the one button whose fill is a literal upstream */
.zh-shqip .btn--ink {
  background: var(--shqip-thelle);
  border-color: var(--shqip-thelle);
  color: var(--shqip-krem);
}

.zh-shqip .btn--ink:hover {
  background: var(--shqip-gjak);
  border-color: var(--shqip-gjak);
  color: var(--shqip-krem);
}

/* `.btn` itself is deliberately left alone: its base is transparent and the
   VARIANTS carry the fill, so a blanket background here would fill every
   ghost button on the wing — including the white-on-red CTA inside the
   espresso card, which would have become red on red. */

.zh-shqip .btn-save {
  border-color: var(--shqip-gjak);
  color: var(--shqip-gjak);
}

.zh-shqip .zh-ex__back:hover { color: var(--shqip-thelle); }

/* the caption line under a plate */
.zh-shqip .fig__desc { color: var(--n-700); }
.zh-shqip .fig__credit { color: var(--shqip-gjak); }

/* ═══ 8. FOCUS ═══════════════════════════════════════════════════════════
   NOTHING is redeclared here, deliberately. zhurma.css §3 makes the ring
   compliant GEOMETRICALLY — `outline: 2px solid var(--ch)` inside a 6px halo
   — and it already parameterises the halo as `var(--focus-halo, #fff)` for
   exactly this case. So the fork sets the ONE variable and inherits the
   construction, rather than re-cutting a second focus ring that would then
   have to be re-audited on its own. Measured on this brand: the ring is
   --ch (#600A0D) against a cream halo at 11.9:1, and the halo is cream
   against the page at 1:1 by definition — the ring edge carries it, which is
   the same way the mechanism works everywhere else on the site.
   Declared in §2's block conceptually; kept here so a reader looking for
   "where did focus go" finds the answer in the section named for it. */
.zh-shqip { --focus-halo: var(--shqip-krem); }

/* ═══ 9. PHONES ══════════════════════════════════════════════════════════
   Owner constitution §7 is explicit and it outranks the brief's desktop
   number: body 19–20px on phones, meta ≥13px, nothing under 12px. Crimson
   Pro's small x-height makes this binding rather than nominal — 17px of this
   face on a phone reads like ~15px of Source Serif.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .zh-shqip { --fs-read: 19px; }
  .zh-shqip .zh-exbody { font-size: 19px; }
  .zh-shqip .zh-vula { width: 84px; height: 84px; }
  .zh-shqip .zh-vula--madh { width: 118px; height: 118px; }
}

/* 360px: nothing may overflow. The two new flex bands stack (§4), and the
   poster face's clamps all bottom out below the viewport at that width —
   the longest single word the display type ever sets is "ENCIKLOPEDIA" on
   the kolofon, 12 characters of a condensed face at 26px ≈ 150px. */
@media (max-width: 380px) {
  .zh-shqip .zh-mz__word { font-size: 42px; }
  .zh-shqip .zh-ex__title { font-size: 34px; }
  .zh-shqip .zh-kapak__word { font-size: 36px; }
}

/* ═══ 10. MOTION + PRINT ═════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .zh-shqip *,
  .zh-shqip *::before,
  .zh-shqip *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* a museum entry is a document; printed, it should read as one. The duotone
   is a screen effect and a red flood costs a reader real ink. */
@media print {
  .zh-shqip { background: #fff; }
  .zh-shqip .zh-mz__band { background: #fff; color: #000; border-bottom: 2px solid #000; }
  .zh-shqip .zh-mz__word,
  .zh-shqip .zh-mz__ix { color: #000; }
  .zh-shqip .zh-mzcard__fig::before,
  .zh-shqip .zh-mzcard__fig::after,
  .zh-shqip .zh-mzbanner__fig::before,
  .zh-shqip .zh-mzbanner__fig::after,
  .zh-shqip .img-frame::before,
  .zh-shqip .img-frame::after { content: none; }
  .zh-shqip .zh-vula { color: #000; }
}