/* ============================================================
   FREE ZONE HUB & PROFILES
   Layouts here appear nowhere else on the site.

   Loaded after main.css, reading.css and article.css, so every
   correction below wins on source order at equal specificity.
   No !important is used anywhere in this file.

   Two things this file exists to protect:

   1. THE HONEST PAIRING (§11). Strengths and limitations are two
      columns of EQUAL width. The limitations column is inverted to
      ink so it carries MORE weight, not less. Both columns get the
      same gold rule, the same count chip, the same numbered list and
      the same type size. Nothing here may quietly soften that.

   2. LEGIBILITY ON A LIGHT GROUND. main.css styles .cz-table and
      .cz-chip for the ink panel on the homepage — white text, white
      hairlines. The hub renders both on paper. Every one of those
      colours is restated here for white. Do not delete a rule in §4
      or §3 because it "looks redundant"; it is the only thing
      keeping that text visible.
   ============================================================ */


/* ============================================================
   0. GOLD ON A LIGHT GROUND — read this before touching a gold
      colour anywhere below.

   --cz-gold is #c7a36b. It was picked against ink and it is right
   there: 8.57:1 on --cz-ink. On the light grounds this template
   actually uses it measures 2.365:1 on --cz-paper (#ffffff) and
   2.164:1 on --cz-paper-2 (#f3f5f7). WCAG 1.4.3 asks 4.5:1. Every
   one of the eighteen sites changed below is 12–14.5px — nowhere
   near the 18.66px bold that would let it count as large text — so
   all eighteen were failing at roughly half the required ratio.

   The replacement is --cz-gold with its hue held (36.5deg -> 36.9deg)
   and its saturation held (45.1% -> 45.4%), lightness taken from 60%
   down to 35.9%. It is the same gold darkened until it clears, not a
   second gold. Measured 5.378:1 on #ffffff and 4.921:1 on #f3f5f7,
   so it passes on the tighter of the two grounds with 0.42 in hand
   rather than sitting on the line.

   WRITTEN AS A var() WITH A LITERAL FALLBACK, DELIBERATELY, AND THE
   FALLBACK IS THE VALUE THAT SHIPS ON THESE TWO ROUTES. The token
   --cz-gold-on-light is declared once in the theme, at listing.css:60
   on :root, at #8a6730. listing.css is NOT enqueued on either route
   this file serves: inc/enqueue.php:103–108 gates it on
   is_home() || is_search() || is_404() || an archive that is NOT one
   of the two custom post type archives, and cz_freezone is one of the
   two excluded. So on /free-zones/ and /free-zones/<zone>/ the token
   is undefined and the fallback is what renders. #856532 is not a
   third value chosen here — it is the exact fallback reading.css:153
   already uses for the same failure, and reading.css IS loaded on both
   these routes (it is a declared dependency of cz-zones), so the rail
   label and the body labels beside it resolve to one identical colour.
   When main.css finally declares this token at its single :root, every
   file converges on that value with no edit here.

   NOTHING IS DECLARED AT :root FROM THIS FILE. zones.css is enqueued
   last of the four, so a :root declaration here would silently rewrite
   listing.css's token for the whole site. That is the collision this
   project has already paid for four times.

   NOTHING IS OUT-SPECIFIED. All eighteen edits change a `color` value
   inside a rule that already existed and already declared `color`. No
   selector was added, no selector was widened, no specificity moved.
   The four that share a name with a rule in another sheet were checked
   one by one:
     · .cz-zonehub__matrix .cz-table thead th (0,2,2) still beats
       main.css:3063 .cz-table thead th (0,1,2).
     · .cz-zonehub__matrix .cz-table__go a (0,2,1) sets the anchor;
       main.css:3078 .cz-table__go (0,1,0) sets the cell it sits in and
       is only inherited, so the anchor rule still decides.
     · main.css:4111 .cz-alt__short and main.css:4116
       .cz-practical__list dt declare font-size and letter-spacing only.
       Neither declares a colour, at any width.
     · .cz-zonehub__chips .cz-chip:hover (0,3,0) still beats
       main.css:3048 .cz-chip:hover (0,2,0).

   SIX OF THE EIGHTEEN ARE HOVER STATES, and they are the worst of the
   set rather than the least of it. .cz-chip:hover, the matrix row's
   th[scope="row"] strong, .cz-method__sources a:hover,
   .cz-zone__authority > a:hover, .cz-practical__link:hover and
   .cz-zone__refs-list li a:hover all sat at --cz-text or #21262d at
   rest — 15.22:1 to 17.84:1 — and dropped to 2.365:1 the moment the
   pointer arrived. 1.4.3 has no hover exemption, and a link that
   becomes unreadable when you point at it is a defect in its own
   right. The hover still reads as a hover: #14181c to #856532 is a
   hue shift and a 12-point jump in lightness.

   DELIBERATELY NOT TOUCHED, so nobody "finishes the job" and undoes a
   measured decision:
     · gold on ink, where it is already 8.57:1 and darkening it would
       CUT the contrast — the hero ledger (§2), .cz-zone__short (§7),
       .cz-verdict__short and .cz-verdict__go (§5), and both
       --cz-gold-soft sites in the inverted limitations column (§11);
     · non-text gold — every rule, border, underline colour and rgba
       hairline: .cz-method__cadence, .cz-zone__positioning,
       .cz-balance__col-head (§11 protects that rule), .cz-alt__limit,
       .cz-fit__list li::before, the .cz-chip:hover border, and the
       .cz-toc__item current-item border at §8. WCAG 1.4.3 is a text
       rule; these are decoration and the reading rail's owner audited
       that border in the same pass and left it;
     · .cz-zonehub__matrix .cz-table__empty at §4. It looks like the
       next one to fix. It is not: that rule is (0,2,0) and is already
       out-specified by .cz-zonehub__matrix .cz-table td (0,2,1) four
       lines above it, printed earlier but higher, so the filter's
       empty-state message renders #21262d at 15.22:1, not --cz-mid and
       not gold. Making that rule win would LOWER its contrast to
       5.93:1. Left inert on purpose.
   ============================================================ */


/* ============================================================
   1. HUB — the section that carries the matrix
   ============================================================ */

/* The hero above this section already pays for the fixed header.
   Adding --header-h here too put 84px of dead air under the hero. */
.cz-zonehub {
  background: var(--cz-paper);
  padding-block: var(--cz-y);
}

.cz-zonehub__head {
  max-width: 68ch;
  margin-bottom: clamp(28px, 3vw, 44px);
}
.cz-zonehub__head .cz-h2 { margin: 0 0 16px; }
.cz-zonehub__head .cz-lead { margin: 0; }


/* ============================================================
   2. HUB & PROFILE — the hero ledger
   One component, two hosts. The "limitations published" cell is
   the honest hook, so it is the loudest thing in the row.
   ============================================================ */

.cz-zonehub__ledger,
.cz-zone__ledger {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 2vw, 28px) 0;
  margin: clamp(26px, 3vw, 40px) 0 0;
  padding-top: clamp(22px, 2.4vw, 32px);
  border-top: 1px solid var(--cz-line-dk);
}

.cz-zonehub__ledger-cell,
.cz-zone__ledger-cell {
  min-width: 0;
  padding-inline: clamp(18px, 2.2vw, 34px);
  border-left: 1px solid var(--cz-line-dk);
}
.cz-zonehub__ledger-cell:first-child,
.cz-zone__ledger-cell:first-child {
  padding-left: 0;
  border-left: 0;
}

.cz-zonehub__ledger dt,
.cz-zone__ledger dt {
  margin: 0 0 7px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.cz-zonehub__ledger dd,
.cz-zone__ledger dd {
  margin: 0;
  font-size: clamp(15px, .4vw + 13.8px, 18px);
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}

/* The hook. A gold figure, the label under it, one tap target. */
.cz-zonehub__ledger-cell--limits dt,
.cz-zone__ledger-cell--limits dt { color: var(--cz-gold); }

.cz-zonehub__ledger-cell--limits a,
.cz-zone__ledger-cell--limits a {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-height: 44px;
  color: var(--cz-gold);
  transition: color .25s var(--cz-ease);
}
.cz-zonehub__ledger-cell--limits a strong,
.cz-zone__ledger-cell--limits a strong {
  font-size: clamp(26px, 1.6vw + 18px, 38px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.cz-zonehub__ledger-cell--limits a span,
.cz-zone__ledger-cell--limits a span {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: underline;
  text-decoration-color: rgba(199, 163, 107, .5);
  text-underline-offset: 4px;
}
.cz-zonehub__ledger-cell--limits a:hover,
.cz-zone__ledger-cell--limits a:hover { color: var(--cz-gold-soft); }

/* Stated as fact, not sold. */
.cz-zone__ledger-cell--partner dd { font-weight: 600; }


/* ============================================================
   3. HUB — the emirate filter
   main.css dresses .cz-chip for the ink panel: white text on a
   white hairline. On paper that is an invisible control.
   ============================================================ */

.cz-zonehub__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-bottom: clamp(18px, 2vw, 26px);
}
.cz-zonehub__filters-label {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--cz-gold-on-light, #856532);
}
.cz-zonehub__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cz-zonehub__chips .cz-chip {
  min-height: 40px;
  background: var(--cz-paper);
  border-color: var(--cz-line);
  color: #21262d;
}
.cz-zonehub__chips .cz-chip:hover {
  border-color: var(--cz-gold);
  color: var(--cz-gold-on-light, #856532);
}
/* Ink, not gold. Gold stays the label colour on this section, and a
   gold fill would read as a button. */
.cz-zonehub__chips .cz-chip.is-active {
  background: var(--cz-ink);
  border-color: var(--cz-ink);
  color: #fff;
}
.cz-zonehub__count {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: .03em;
  color: var(--cz-mid);
}
.cz-zonehub__count:empty { display: none; }


/* ============================================================
   4. HUB — the comparison matrix
   Scrolls inside .cz-table__wrap above 900px; becomes one card per
   zone below it, so nobody drags a 947px table through a 342px
   window. Every colour main.css set for ink is restated for paper.
   ============================================================ */

.cz-zonehub__matrix {
  border: 1px solid var(--cz-line);
  background: var(--cz-paper);
}

/* The body cells below were corrected for paper long ago and this header row
   was left on gold — 2.164:1, the tightest measurement in the file, because it
   is the one gold that sits on --cz-paper-2 rather than on white. See §0. */
.cz-zonehub__matrix .cz-table thead th {
  color: var(--cz-gold-on-light, #856532);
  background: var(--cz-paper-2);
  border-bottom: 1px solid var(--cz-line);
}
.cz-zonehub__matrix .cz-table tbody tr {
  border-bottom: 1px solid var(--cz-line);
}
.cz-zonehub__matrix .cz-table tbody tr:last-child { border-bottom: 0; }
.cz-zonehub__matrix .cz-table tbody tr:hover { background: var(--cz-paper-2); }

/* Beats .cz-table td:nth-child(2) { color:#fff }, which rendered the
   Emirate column white on white. Equal specificity, printed later. */
.cz-zonehub__matrix .cz-table td {
  color: #21262d;
  font-weight: 500;
  vertical-align: top;
}
.cz-zonehub__matrix .cz-table__empty { color: var(--cz-mid); }

.cz-table--zones th[scope="row"] { padding: 14px 16px; text-align: left; }
.cz-table--zones th[scope="row"] a {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cz-table--zones th[scope="row"] strong {
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -.012em;
  color: var(--cz-text);
}
.cz-table--zones th[scope="row"] span {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--cz-mid);
}
.cz-table--zones tbody tr:hover th[scope="row"] strong { color: var(--cz-gold-on-light, #856532); }

.cz-zonehub__matrix .cz-table__go a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--cz-gold-on-light, #856532);
}
.cz-zonehub__matrix .cz-table__go svg { width: 15px; height: 15px; }

.cz-zonehub__caveat {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.62;
  color: var(--cz-mid);
  max-width: 78ch;
}


/* ============================================================
   5. HUB — the verdict wall
   ============================================================ */

.cz-verdicts {
  background: var(--cz-ink);
  color: var(--cz-lt);
  padding-block: var(--cz-y);
}
.cz-verdicts__head {
  max-width: 70ch;
  margin-bottom: clamp(28px, 3vw, 44px);
}
.cz-verdicts__head .cz-h2 { color: #fff; margin: 0 0 16px; }
.cz-verdicts__head .cz-lead { color: var(--cz-lt); margin: 0; }

.cz-verdicts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1px;
  background: var(--cz-line-dk);
  border: 1px solid var(--cz-line-dk);
}
/*
 * B313 — FILL WHATEVER IS LEFT OF THE LAST ROW.
 *
 * The hairlines on this grid are not borders: the container is painted `--cz-line-dk` and the 1px
 * `gap` lets it show between cells whose own background is `--cz-ink`. That is why an unfilled cell
 * in the last row reads as a LIT EMPTY BOX rather than as nothing — there is no card over it, so the
 * container's own light ground is what a reader sees. Eleven profiles into a track that fits four or
 * five leaves one such cell, and he reported it: *"1 box empty, looks weird."*
 *
 * `grid-column: auto / -1` WAS TRIED AND DOES NOT DO THIS. An auto start with a definite end line
 * resolves to a span of one ending at the last line, so the pseudo-element lands in the LAST COLUMN
 * — often on a new row — and the gap it was meant to cover stays lit. He reported it a second time
 * with the same screenshot, which is what a fix verified by reading the CSS rather than by looking
 * at the page earns.
 *
 * The column count is `repeat(auto-fit, …)`, so neither PHP nor this stylesheet knows it. What both
 * can rely on is that it never exceeds five at any width this grid is used at. So the template emits
 * FOUR filler cells after the real ones: auto-placement puts them in whatever cells remain, and any
 * that are left over form a row of their own which, carrying no content and no padding, is zero
 * pixels high and the colour of the cards anyway.
 *
 * Deliberately not a card: no padding, no hover, no border, nothing focusable, and `aria-hidden`, so
 * it is the field the cards sit on rather than an empty card.
 */
.cz-verdict-fill {
  background: var(--cz-ink);
}
.cz-verdict {
  background: var(--cz-ink);
  padding: clamp(20px, 2.1vw, 30px);
  display: flex;
  flex-direction: column;
  transition: background .35s var(--cz-ease);
}
.cz-verdict:hover { background: var(--cz-ink-3); }

.cz-verdict__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.cz-verdict__index {
  flex: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* Was rgba(255,255,255,.38) — 3.45:1 on --cz-ink at 12px/800, against the
     4.5:1 1.4.3 asks, on all eleven verdict cards. .5 measures 5.31:1 here and
     5.29:1 on --cz-ink-3, the lighter ground .cz-verdict:hover swaps in four
     rules above, so it clears on both states and not only at rest. Not a new
     value: .5 is what .cz-verdict__more already carries in this same card, and
     every other white-alpha text in this file sits at .5 or higher — .38 was
     the single outlier, not the house floor. The span is aria-hidden, which
     does not exempt it: 1.4.3 covers text that is displayed, and this numeral
     is how a sighted reader keeps their place in the wall. */
  color: rgba(255, 255, 255, .5);
}
.cz-verdict__short {
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cz-gold);
}
.cz-verdict h3 {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.018em;
  color: #fff;
  text-wrap: balance;
}
.cz-verdict__limit {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .84);
  padding-left: 14px;
  border-left: 2px solid rgba(199, 163, 107, .5);
  text-wrap: pretty;
}
.cz-verdict__more {
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .5);
}
.cz-verdict__go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cz-gold);
}
.cz-verdict__go svg { width: 15px; height: 15px; transition: transform .25s var(--cz-ease); }
.cz-verdict:hover .cz-verdict__go svg { transform: translateX(4px); }


/* ============================================================
   6. HUB — how the comparison is compiled
   ============================================================ */

.cz-method {
  background: var(--cz-paper-2);
  padding-block: var(--cz-y);
}
.cz-method__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 3.6vw, 68px);
  align-items: start;
}
.cz-method__intro .cz-h2 { margin: 0 0 16px; }
.cz-method__intro .cz-lead { margin: 0; max-width: 60ch; }
.cz-method__cadence {
  margin: 20px 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--cz-gold);
  font-size: 13.5px;
  line-height: 1.6;
  color: #21262d;
  max-width: 56ch;
}

.cz-method__sources {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: czsrc;
  background: var(--cz-paper);
  border: 1px solid var(--cz-line);
}
.cz-method__sources li {
  counter-increment: czsrc;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 4px 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--cz-line);
}
.cz-method__sources li:last-child { border-bottom: 0; }
.cz-method__sources li::before {
  content: counter(czsrc, decimal-leading-zero);
  grid-row: span 2;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: var(--cz-gold-on-light, #856532);
}
.cz-method__sources a,
.cz-method__sources strong {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--cz-text);
}
.cz-method__sources a {
  justify-self: start;
  text-decoration: underline;
  text-decoration-color: rgba(199, 163, 107, .5);
  text-underline-offset: 4px;
  transition: color .25s var(--cz-ease);
}
.cz-method__sources a:hover { color: var(--cz-gold-on-light, #856532); }
.cz-method__sources span {
  font-size: 13px;
  line-height: 1.6;
  color: var(--cz-mid);
  text-wrap: pretty;
}


/* ============================================================
   7. PROFILE — hero — DELETED, 18 Sep 2026
   .cz-zone__hero, .cz-zone__short, .cz-zone__title and
   `.cz-zone__hero .cz-article__standfirst`: the zone profile's
   half of the old full-bleed article hero. This section said its
   geometry and ground "belong to .cz-article__hero in
   article.css", and that block went in the same edit — the two
   were one deletion across two files (article.css, "HERO
   VARIANTS — REMOVED").

   Verified dead first: zero emitters for all three classes in the
   theme's PHP and JS, zero in the corpus and the database, and
   the served /ifza/ carries none of them — single-cz_freezone.php
   opens on template-parts/content/masthead.php, so the profile
   head is .cz-masthead__kicker / __title / __standfirst.
   main.css still lists .cz-zone__short in its 12px mobile floor
   list; one selector in a list that matches nothing, harmless.
   ============================================================ */


/* ============================================================
   8. PROFILE — contents rail
   reading.css builds the whole rail. It also carries
   `.cz-zone .cz-toc__item a { color: var(--cz-lt) }` for zones,
   written when this rail sat on ink. It now sits on paper, so
   every contents link rendered white on white — nine invisible
   links on every profile. This block is the correction, at the
   same specificity, printed later.
   ============================================================ */

.cz-zone .cz-toc__item a { color: #21262d; }
.cz-zone .cz-toc__item a:hover,
.cz-zone .cz-toc__item a.is-current {
  color: var(--cz-text);
  border-left-color: var(--cz-gold);
}

/* Primary source, in the rail. Deliberately not the filled panel the
   rail CTA uses directly above it — two filled panels stacked read
   as one block. */
.cz-zone__authority {
  padding-top: 18px;
  border-top: 1px solid var(--cz-line);
}
.cz-zone__authority-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--cz-gold-on-light, #856532);
}
.cz-zone__authority > a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--cz-text);
  text-decoration: underline;
  text-decoration-color: rgba(199, 163, 107, .55);
  text-underline-offset: 4px;
  transition: color .25s var(--cz-ease);
}
.cz-zone__authority > a:hover { color: var(--cz-gold-on-light, #856532); }
/* 13px, not 12.5px: this is a sentence, not a label, so R7's body-copy floor
   applies rather than the 12px label floor. main.css raises the note family to
   13px inside `@media (max-width: 900px)`, but zones.css is enqueued last, so
   an unconditional 12.5px here beat that mobile rule at equal specificity and
   shipped 12.5px on the phone. Declared at the floor here instead of adding a
   fourth competing rule — see 08-DESIGN-SYSTEM §23.1. */
.cz-zone__authority-note {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--cz-mid);
}


/* ============================================================
   9. PROFILE — section rhythm
   One rule under a heading, not three. --cz-y is 72–96px; a
   section boundary lands just under that once the hairline is
   counted.
   ============================================================ */

.cz-zone__body > section + section {
  margin-top: clamp(34px, 3.2vw, 50px);
  padding-top: clamp(30px, 3vw, 46px);
  border-top: 1px solid var(--cz-line);
}
.cz-zone__body > section > .cz-h2 { margin: 0 0 clamp(15px, 1.5vw, 20px); }
.cz-zone__body > section > .cz-lead {
  margin: 0 0 clamp(18px, 1.9vw, 26px);
  max-width: 74ch;
}


/* ============================================================
   10. PROFILE — the short version
   ============================================================ */

.cz-zone__positioning {
  margin: 0 0 18px;
  font-size: clamp(17px, .9vw + 14px, 21px);
  line-height: 1.55;
  color: #21262d;
  font-weight: 500;
  padding-left: 20px;
  border-left: 3px solid var(--cz-gold);
  max-width: 68ch;
  text-wrap: pretty;
}
.cz-zone__known {
  margin: 0 0 4px;
  font-size: 14.5px;
  line-height: 1.62;
  color: #21262d;
  max-width: 74ch;
}
.cz-zone__known span {
  display: inline-block;
  margin-right: 9px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cz-gold-on-light, #856532);
}


/* ============================================================
   11. PROFILE — THE HONEST PAIRING
   Two columns of EQUAL width. The limitations column is inverted
   so it carries more weight, not less. Both sides get the same
   gold rule, the same count chip, the same numbered list, the
   same type size. Change one side and you must change the other.
   ============================================================ */

.cz-balance__head { margin-bottom: clamp(22px, 2.4vw, 34px); }
.cz-balance__head .cz-h2 { margin: 0 0 16px; }
.cz-balance__head .cz-lead { margin: 0; max-width: 74ch; }

.cz-balance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--cz-line);
  border: 1px solid var(--cz-line);
}
.cz-balance__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(22px, 2.4vw, 34px);
  background: var(--cz-paper);
}
.cz-balance__col--bad {
  background: var(--cz-ink);
  border-color: var(--cz-ink);
}

/* Identical head structure on both sides — same rule, same weight. */
.cz-balance__col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: clamp(17px, 1.8vw, 23px);
  padding-bottom: 13px;
  border-bottom: 2px solid var(--cz-gold);
}
.cz-balance__col-head h3 {
  margin: 0;
  font-size: clamp(15px, .35vw + 14px, 17.5px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.cz-balance__col--good .cz-balance__col-head h3 { color: var(--cz-text); }
.cz-balance__col--bad .cz-balance__col-head h3 { color: #fff; }

.cz-balance__count {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 26px;
  padding: 0 9px;
  border-radius: 100px;
  border: 1px solid;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* §11 says change one side and you must change the other. This does not break
   that: the two sides have never carried the same gold, because they have never
   sat on the same ground — the good side is --cz-gold on paper, the bad side is
   --cz-gold-soft on ink. What §11 protects is that both get a count chip of the
   same size, the same border, the same weight, and the same numbered list. All
   of that is untouched. Only the good side's ink moves, and only because 2.365:1
   on white is half of what it owes. The bad side is already 12.40:1 on ink and
   is correct as it stands. The chip's border stays at the gold rgba: it is
   decoration, and matching it to the darker text would make the good side's chip
   read heavier than the bad side's, which IS the softening §11 forbids. */
.cz-balance__col--good .cz-balance__count {
  color: var(--cz-gold-on-light, #856532);
  border-color: rgba(199, 163, 107, .55);
}
.cz-balance__col--bad .cz-balance__count {
  color: var(--cz-gold-soft);
  border-color: rgba(224, 199, 159, .5);
}

/* The template renders both lists as <ol>. The old rules here reset
   `ul` only, so every item drew a UA decimal marker AND an absolutely
   positioned dot on top of it. The counter below is the marker. */
.cz-balance__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: czbal;
  display: grid;
  gap: clamp(13px, 1.1vw, 16px);
}
.cz-balance__list li {
  counter-increment: czbal;
  position: relative;
  padding-left: 30px;
  font-size: 14.5px;
  line-height: 1.62;
  text-wrap: pretty;
}
.cz-balance__list li::before {
  content: counter(czbal, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.cz-balance__col--good .cz-balance__list li { color: #21262d; }
.cz-balance__col--good .cz-balance__list li::before { color: var(--cz-gold-on-light, #856532); }

/* Brighter than --cz-lt on purpose. This is the half of the picture
   the authority has no reason to publish; it reads first. */
.cz-balance__col--bad .cz-balance__list li { color: rgba(255, 255, 255, .86); }
.cz-balance__col--bad .cz-balance__list li::before { color: var(--cz-gold-soft); }

/* The closing sentence of the inverted limitations column — the honesty wedge
   stated in the firm's own voice. It was the smallest type on the page. It is
   body copy, so it takes the 13px floor (R7), not the 12px label floor. */
.cz-balance__note {
  margin: auto 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 13px;
  line-height: 1.62;
  color: rgba(255, 255, 255, .58);
  font-style: italic;
}


/* ============================================================
   12. PROFILE — who it suits
   Open columns divided by a hairline. Deliberately not the panelled
   pairing above it: two panelled grids in a row would read as the
   same idea stated twice.
   ============================================================ */

.cz-fit__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 2.6vw, 44px);
  margin-top: clamp(20px, 2.1vw, 28px);
}
.cz-fit__track { min-width: 0; }
.cz-fit__track h3 {
  margin: 0 0 14px;
  padding-bottom: 10px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--cz-line);
}
.cz-fit__track--yes h3 {
  color: var(--cz-text);
  border-bottom-color: rgba(199, 163, 107, .55);
}
.cz-fit__track--no h3 { color: var(--cz-text); }

.cz-fit__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}
/* Both lists carry full-weight body ink. The "look elsewhere"
   column is information, not a footnote. */
.cz-fit__list li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #21262d;
  text-wrap: pretty;
}
.cz-fit__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 13px;
  height: 1.5px;
  background: var(--cz-gold);
}
.cz-fit__track--no .cz-fit__list li::before { background: rgba(8, 10, 13, .32); }

.cz-fit__note {
  margin: clamp(20px, 2vw, 28px) 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--cz-mid);
  max-width: 74ch;
}


/* ============================================================
   13. PROFILE — premises, visas and framework
   ============================================================ */

.cz-practical__list {
  margin: clamp(20px, 2.1vw, 28px) 0 0;
  border-top: 1px solid var(--cz-line);
}
.cz-practical__list > div {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--cz-line);
}
.cz-practical__list dt {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  /* R19 floor: uppercase labels carry .14em or more. Was .13em, which
     rendered 1.56px of tracking at 12px against a required 1.68px.
     main.css:4023 lists this same selector at .12em inside
     @media (max-width: 900px); zones.css is enqueued after main.css
     (inc/enqueue.php:190, deps cz-main/cz-reading/cz-article) and the
     two selectors are both (0,1,1), so source order decides and this
     value wins at every viewport. Measured: 1.68px at 1600 and at 375. */
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cz-gold-on-light, #856532);
}
.cz-practical__list dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #21262d;
  text-wrap: pretty;
}
.cz-practical__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--cz-text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(199, 163, 107, .55);
  text-underline-offset: 4px;
  transition: color .25s var(--cz-ease);
}
.cz-practical__link svg { width: 15px; height: 15px; }
.cz-practical__link:hover { color: var(--cz-gold-on-light, #856532); }

/* 194 characters of prose — the longest of the three notes. Body copy floor. */
.cz-practical__caveat {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--cz-mid);
  max-width: 78ch;
}


/* ============================================================
   14. PROFILE — the near neighbours
   ============================================================ */

.cz-alternatives__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(16px, 1.8vw, 26px);
  margin-top: clamp(20px, 2.1vw, 28px);
}
.cz-alt {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.1vw, 28px);
  background: var(--cz-paper);
  border: 1px solid var(--cz-line);
  transition: transform .4s var(--cz-ease), border-color .4s var(--cz-ease), box-shadow .4s var(--cz-ease);
}
.cz-alt:hover {
  transform: translateY(-4px);
  border-color: rgba(199, 163, 107, .5);
  box-shadow: 0 18px 44px rgba(5, 6, 7, .1);
}
.cz-alt__short {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cz-gold-on-light, #856532);
  margin-bottom: 8px;
}
.cz-alt h3 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.28;
  color: var(--cz-text);
  letter-spacing: -.018em;
  text-wrap: balance;
}
.cz-alt__known {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #21262d;
}
/* Its headline limitation, printed before you click. Same promise the
   pairing makes, made on a card. */
.cz-alt__limit {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: var(--cz-paper-2);
  border-left: 2px solid var(--cz-gold);
  font-size: 13px;
  line-height: 1.6;
  color: #21262d;
  text-wrap: pretty;
}
.cz-alt__limit span {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 800;
  /* R19 floor: .14em or more on uppercase. Was .13em (1.56px at 12px).
     This is the smallest label in the honest pairing's alternatives card
     and it sits on --cz-mid, the lowest-contrast text in the component,
     so it is the one that most needs the tracking. */
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cz-mid);
}
.cz-alt__go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cz-gold-on-light, #856532);
}
.cz-alt__go svg { width: 15px; height: 15px; transition: transform .25s var(--cz-ease); }
.cz-alt:hover .cz-alt__go svg { transform: translateX(4px); }

.cz-alternatives__all { margin: clamp(20px, 2vw, 28px) 0 0; }


/* ============================================================
   15. PROFILE — activities and references
   ============================================================ */

.cz-zone__activities-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: clamp(20px, 2vw, 28px);
}

.cz-zone__refs-list {
  margin: clamp(20px, 2vw, 28px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--cz-line);
}
.cz-zone__refs-list li {
  display: grid;
  gap: 5px;
  padding: 15px 0;
  border-bottom: 1px solid var(--cz-line);
}
.cz-zone__refs-list li a {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--cz-text);
  text-decoration: underline;
  text-decoration-color: rgba(199, 163, 107, .5);
  text-underline-offset: 4px;
  transition: color .25s var(--cz-ease);
}
.cz-zone__refs-list li a:hover { color: var(--cz-gold-on-light, #856532); }
.cz-zone__refs-list li span {
  font-size: 13px;
  line-height: 1.6;
  color: var(--cz-mid);
  text-wrap: pretty;
}


/* ============================================================
   15B. PROFILE — THE FOUR ARCHITECTURES  (R1)
   ------------------------------------------------------------
   Measured over live HTTP on 2 September 2026, all nineteen
   published profiles rendered one of exactly TWO section
   sequences, and the only thing separating them was whether the
   strengths/limitations meta happened to exist. That is R1's own
   failure mode: one template with different words in it.

   single-cz_freezone.php now classifies each profile from the
   record it already holds — cz_zone_character() — and four
   things follow from the answer: the running order of the parts,
   the opening instrument, the composition of the record, and the
   kicker. This block is the visual half of that.

   The four must be distinguishable WITH THE TEXT BLURRED:

     charter   stacked ink bands, vertical, one per station
     corridor  a light horizontal spine with connectors between
     cluster   an outlined card whose first value is set large
     counter   a tiled grey ladder, three unequal columns

   The honest pairing is deliberately NOT differentiated. Two
   equal columns with the limitations inverted to ink is a rule
   (R20.1) and the site's commercial position; it moves in the
   running order only.
   ============================================================ */

/* ---- 15B.1  The dead margin column ----------------------------
   Measured at 1440 before this rule: the 348px third column was
   empty for 87–88% of the article's height — 12,261px of blank
   column on /free-zones/jafza/, 14,576px on /free-zones/dubai-
   media-city/. The article system fills that column with
   marginalia; a zone profile's record, pairing, fit grid and
   neighbour cards are not prose and had nothing to put there.

   Only prose obeys the measure (R19). So everything that is not
   prose takes the full width, using exactly the arithmetic
   .cz-bleed uses in reading.css — the margin column plus the gap
   — and it is bound to the same band, because below 1401px the
   grid has already folded to two columns and there is no third
   column to reclaim.                                            */

@media (min-width: 1401px) {
  .cz-zone__body > .cz-zone__section--wide {
    margin-right: calc(-1 * (var(--cz-margin-col) + var(--cz-read-gap)));
  }
}

/* ---- 15B.2  One heading system ------------------------------
   Measured before: the template's section headings rendered at
   46px in rgb(7,21,34) — the legacy --ink — while the narrative's
   own H2s three inches below rendered at 36px in rgb(5,6,7). Two
   heading systems inside one document is exactly what T48 called
   out ("the font and typography you did doesn't match"). These
   values are article.css's H2, so the record and the narrative
   now share one scale and one ink.                              */

.cz-zone__body > section > .cz-zone__h2 {
  font-size: clamp(25px, 1.5vw + 18px, 36px);
  line-height: 1.14;
  letter-spacing: -.032em;
  font-weight: 800;
  color: var(--cz-ink);
  max-width: 34ch;
  text-wrap: balance;
}

.cz-zone__note {
  margin: 0 0 clamp(20px, 2.1vw, 30px);
  font-size: 15px;
  line-height: 1.65;
  color: var(--cz-mid);
  max-width: 76ch;
  text-wrap: pretty;
}

/* ---- 15B.3  The opening instrument, shared skeleton ----------
   Three stations at most, built from held values only. A station
   with nothing behind it is not printed and below two stations
   the whole instrument is dropped, so no variant may assume a
   fixed count — every layout below is written for 2 or 3.       */

.cz-openrec__stations {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cz-openrec__station { min-width: 0; }
.cz-openrec__index {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
}
.cz-openrec__label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.5;
}
.cz-openrec__value {
  display: block;
  text-wrap: pretty;
}

/* ---- 15B.4  charter — the framework is the product -----------
   DIFC, ADGM. A common-law jurisdiction is read the way an
   instrument is read: one clause under another, each numbered,
   nothing competing for the eye sideways. Set on ink because
   this is the one panel on the page that outranks the record. */

/* THE BLUE GRADIENT GROUND — his instruction, 20 September 2026, looking at
   /difc/: *"Give black sttrip like these, a blue gradient effect like we have in
   some footer parts."*

   Built from the house blue (--cz-blue) over a navy-shifted ink rather than from
   a new colour: a soft radial wash entering top-right, and a 135deg base that
   runs #0a1020 → #070a11 → #0b1424, which is the same construction the footer's
   own dark ground uses (135deg, three stops, near-black with a blue cast).

   Contrast is unchanged where it matters: the ground is DARKER than the gold and
   white set on it at every stop, so --cz-gold-soft on the index and label, and
   rgba(255,255,255,.9) on the value, all read as they did on flat ink. The gold
   3px rule stays — it is what separates the instrument from the prose above it. */
.cz-openrec--charter .cz-openrec__stations {
  display: block;
  background:
    radial-gradient(118% 140% at 88% 0%,
      color-mix(in oklab, var(--cz-blue) 30%, transparent) 0%,
      color-mix(in oklab, var(--cz-blue) 10%, transparent) 42%,
      transparent 72%),
    linear-gradient(135deg, #0a1020 0%, #070a11 58%, #0b1424 100%);
  border-top: 3px solid var(--cz-gold);
}

/* No color-mix: the two flat stops still carry the blue cast. */
@supports not (background: color-mix(in oklab, #000 10%, transparent)) {
  .cz-openrec--charter .cz-openrec__stations {
    background:
      linear-gradient(118deg, rgba(23, 105, 255, .26) 0%, rgba(23, 105, 255, .06) 46%, rgba(23, 105, 255, 0) 74%),
      linear-gradient(135deg, #0a1020 0%, #070a11 58%, #0b1424 100%);
  }
}
.cz-openrec--charter .cz-openrec__station {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 26px);
  padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.4vw, 34px);
  border-top: 1px solid var(--cz-line-dk);
}
.cz-openrec--charter .cz-openrec__station:first-child { border-top: 0; }
.cz-openrec--charter .cz-openrec__index {
  grid-row: 1 / span 2;
  align-self: start;
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1;
  letter-spacing: 0;
  color: var(--cz-gold-soft);
}
.cz-openrec--charter .cz-openrec__label { color: var(--cz-gold-soft); }
.cz-openrec--charter .cz-openrec__value {
  margin-top: 8px;
  font-size: clamp(17px, .8vw + 14px, 21px);
  line-height: 1.5;
  color: rgba(255, 255, 255, .9);
}
.cz-openrec--charter .cz-openrec__value .cz-practical__link { color: #fff; }
.cz-openrec--charter .cz-openrec__value .cz-practical__link:hover { color: var(--cz-gold-soft); }
.cz-openrec--charter .cz-zone__positioning {
  margin-top: clamp(22px, 2.2vw, 30px);
  margin-bottom: 0;
}

/* ---- 15B.5  corridor — a site, read left to right ------------
   JAFZA, KEZAD, SAIF, Dubai South, DAFZA, RAKEZ, Ajman. What you
   are buying is a physical route: what you may occupy, what
   customs standing the address carries, how many people you may
   place. Laid out as a spine so it reads as a sequence of
   stations rather than as a list of attributes.                 */

.cz-openrec--corridor .cz-openrec__stations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 0;
  border-top: 2px solid var(--cz-ink);
}
.cz-openrec--corridor .cz-openrec__station {
  position: relative;
  padding: clamp(20px, 2.1vw, 28px) clamp(18px, 2vw, 28px) clamp(20px, 2.1vw, 28px) 0;
}
.cz-openrec--corridor .cz-openrec__station + .cz-openrec__station {
  padding-left: clamp(18px, 2vw, 28px);
  border-left: 1px solid var(--cz-line);
}
/* The connector: a gold node sitting on the spine above each station. */
.cz-openrec--corridor .cz-openrec__station::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cz-gold);
}
.cz-openrec--corridor .cz-openrec__station + .cz-openrec__station::before {
  left: clamp(18px, 2vw, 28px);
  transform: translateX(-6px);
}
.cz-openrec--corridor .cz-openrec__index {
  margin-bottom: 10px;
  color: var(--cz-gold-on-light, #856532);
}
.cz-openrec--corridor .cz-openrec__label { color: var(--cz-text); }
.cz-openrec--corridor .cz-openrec__value {
  margin-top: 9px;
  font-size: 15px;
  line-height: 1.62;
  color: #21262d;
}

/* ---- 15B.6  cluster — admission before anything else ---------
   DMC, DIC, d3, DHCC, SHAMS, DSO. A cluster zone is chosen by the
   list it keeps, so the first station — who is on the list — is
   set large and the two behind it are footnotes to it. An
   outlined card, because an admission test is a thing with an
   edge.                                                          */

.cz-openrec--cluster .cz-openrec__stations {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--cz-line);
  border-left: 3px solid var(--cz-gold);
  background: var(--cz-paper);
}
.cz-openrec--cluster .cz-openrec__station {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 30px);
}
.cz-openrec--cluster .cz-openrec__station + .cz-openrec__station {
  border-top: 1px solid var(--cz-line);
}
.cz-openrec--cluster .cz-openrec__index {
  grid-row: 1 / span 2;
  align-self: start;
  font-size: 14px;
  line-height: 1.35;
  color: var(--cz-gold-on-light, #856532);
}
.cz-openrec--cluster .cz-openrec__label { color: var(--cz-text); }
.cz-openrec--cluster .cz-openrec__value {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.62;
  color: #21262d;
}
/* The admission test itself, set at the size of the decision. */
.cz-openrec--cluster .cz-openrec__station:first-child .cz-openrec__value {
  font-size: clamp(18px, .9vw + 15px, 24px);
  line-height: 1.44;
  color: var(--cz-ink);
  font-weight: 500;
}

/* ---- 15B.7  counter — the terms, tiled -----------------------
   IFZA, Meydan, DMCC, DUQE. A licensing desk competes on terms,
   and terms are compared side by side. Three tiles on the cool
   grey, first one wide, because premises is the line that decides
   and the other two qualify it.                                  */

.cz-openrec--counter .cz-openrec__stations {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 1px;
  background: var(--cz-line);
  border: 1px solid var(--cz-line);
}
.cz-openrec--counter .cz-openrec__station {
  padding: clamp(18px, 2vw, 26px);
  background: var(--cz-paper-2);
}
.cz-openrec--counter .cz-openrec__index {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--cz-gold);
  width: 26px;
  color: var(--cz-gold-on-light, #856532);
}
.cz-openrec--counter .cz-openrec__label { color: var(--cz-text); }
.cz-openrec--counter .cz-openrec__value {
  margin-top: 9px;
  font-size: 15px;
  line-height: 1.62;
  color: #21262d;
}

/* ---- 15B.8  The record, composed four ways -------------------
   Whatever the opening instrument printed is removed from the
   record by the template, so these are four different remainders
   as well as four different compositions. A charter register
   wants a wide label column; an operating site and a licensing
   desk want cells that scan.                                     */

.cz-zone--charter .cz-practical__list { border-top: 2px solid var(--cz-ink); }
.cz-zone--charter .cz-practical__list > div { grid-template-columns: 250px minmax(0, 1fr); }

.cz-zone--cluster .cz-practical__list { border-top: 2px solid var(--cz-gold); }

.cz-zone--corridor .cz-practical__list,
.cz-zone--counter .cz-practical__list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--cz-line);
  border-left: 1px solid var(--cz-line);
}
.cz-zone--corridor .cz-practical__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cz-zone--counter .cz-practical__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.cz-zone--corridor .cz-practical__list > div,
.cz-zone--counter .cz-practical__list > div {
  display: block;
  padding: 15px 18px;
  border-right: 1px solid var(--cz-line);
}
.cz-zone--corridor .cz-practical__list dt,
.cz-zone--counter .cz-practical__list dt { margin-bottom: 8px; }

/* ---- 15B.9  The neighbour cards name the kind ----------------
   A neighbour card that says only "DMCC" makes the reader open it
   to find out what kind of thing it is. The kind is computed from
   the same classifier, so the label on the card and the shape of
   the page it opens cannot disagree.                             */

.cz-alt__kind {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--cz-gold-on-light, #856532);
  background: var(--cz-paper-2);
  border: 1px solid var(--cz-line);
}


/* ============================================================
   16. MOTION
   Only figures, panels and cards reveal. Headings, paragraphs and
   lists carry data-reveal in the templates, which made subheadings
   fade in as the reader scrolled and left the page looking empty.
   Higher specificity than [data-reveal], so no !important.
   ============================================================ */

.cz-zonehub__head [data-reveal],
.cz-verdicts__head [data-reveal],
.cz-method__intro [data-reveal],
.cz-balance__head [data-reveal],
.cz-consult__head [data-reveal],
.cz-zone__body > section > [data-reveal]:is(p, h2, h3, ol, ul, dl),
.cz-zonehub [data-reveal]:is(p, h2, h3, dl),
.cz-method [data-reveal]:is(p, h2, h3, ol, ul) {
  opacity: 1;
  transform: none;
}

/* Hover affordances have no meaning on touch. */
@media (hover: none) {
  .cz-alt:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--cz-line);
  }
  .cz-alt:hover .cz-alt__go svg,
  .cz-verdict:hover .cz-verdict__go svg { transform: none; }
  .cz-verdict:hover { background: var(--cz-ink); }
  .cz-zonehub__matrix .cz-table tbody tr:hover { background: var(--cz-paper); }
  .cz-table--zones tbody tr:hover th[scope="row"] strong { color: var(--cz-text); }
}


/* ============================================================
   17. RESPONSIVE
   Ranges are closed at both ends where a wider rule would
   otherwise reach down and win at 375px.
   ============================================================ */

@media (max-width: 1100px) {
  .cz-method__inner { grid-template-columns: 1fr; }
  .cz-method__intro .cz-lead,
  .cz-method__cadence { max-width: 72ch; }
}

/* ---- The matrix becomes one card per zone ---- */
@media (max-width: 900px) {

  /* The panel keeps the paper ground. Chrome will not paint a
     background on a <tr> that has been re-flowed to display:block —
     an inline background-color on one computes back to transparent —
     so the card fill has to come from an element it will paint. The
     declaration on the row below stays as the correct statement of
     intent for engines that do honour it. */
  .cz-zonehub__matrix {
    border: 0;
    background: var(--cz-paper);
  }
  /* Nothing left to scroll sideways once it is cards — and main.css
     prints a "Scroll for more" hint on any .cz-table__wrap at this
     width, which would now be both untrue and white on white. */
  .cz-zonehub__matrix .cz-table__wrap { overflow-x: visible; }
  .cz-zonehub__matrix .cz-table__wrap::after { content: none; }

  .cz-table--zones,
  .cz-table--zones tbody,
  .cz-table--zones tr,
  .cz-table--zones th,
  .cz-table--zones td { display: block; }

  /* The rule above out-specifies the UA's [hidden] { display: none },
     which put the filter's empty-state message on screen underneath
     every card. zones.js toggles this attribute; it has to keep
     working. */
  .cz-table--zones tr[hidden] { display: none; }

  /* Hidden from the eye, kept for the accessibility tree — the same
     technique .cz-sr uses. No white-space:nowrap: inside a 1px box it
     generates 98px of phantom scroll width on the wrapper. */
  .cz-table--zones thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }

  .cz-zonehub__matrix .cz-table--zones tbody tr {
    margin-bottom: 12px;
    padding: 16px 18px 14px;
    background: var(--cz-paper);
    border: 1px solid var(--cz-line);
  }
  .cz-zonehub__matrix .cz-table--zones tbody tr:last-child { border-bottom: 1px solid var(--cz-line); }

  /* main.css keeps this cell on one line so the wide table stays
     readable while it scrolls. Inside a 343px card the longest zone
     name then overflowed by 63px. */
  .cz-table--zones th[scope="row"] {
    padding: 0 0 13px;
    border-bottom: 1px solid var(--cz-line);
    white-space: normal;
  }
  .cz-table--zones th[scope="row"] a { min-height: 44px; justify-content: center; }
  .cz-table--zones th[scope="row"] strong {
    font-size: 15.5px;
    line-height: 1.3;
    overflow-wrap: break-word;
  }
  .cz-table--zones th[scope="row"] span { overflow-wrap: break-word; }

  .cz-zonehub__matrix .cz-table--zones td {
    display: grid;
    /* Label track was 96px. Measured at 375px, the widest label
       ("FRAMEWORK") at the R19 tracking below renders 92.1px in Overpass
       and 95.5px in "Segoe UI" — but 102.9px in Arial, the third face in
       the stack and the one every non-Windows phone falls back to if the
       Google-hosted Overpass fails to arrive (R38 records that CSP or a
       host header pass can stop it). A single word has no break
       opportunity, so at 96px it would not wrap, it would spill across
       the value column. 104px clears the widest measured face. */
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
    padding: 10px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
  }
  .cz-zonehub__matrix .cz-table--zones td::before {
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
    /* R19 floor: .14em or more on uppercase. Was .12em — the tightest
       uppercase in this file, on the one label that only ever renders on
       a phone, where tracking matters most. Measured at 375px: 1.44px of
       tracking before, 1.68px after. See the track note above for why the
       label column widened with it. */
    letter-spacing: .14em;
    text-transform: uppercase;
    /* The four labels are single words with no break opportunity, and the
       last rule in this block lets a template supply its own via
       attr(data-label). Without this, a label wider than the track spills
       over the value column instead of wrapping — R5 requires zero text
       intersections. Same guard the two rules above this grid already use. */
    overflow-wrap: anywhere;
    /* Gold-on-light, §0. These four labels only ever render on a phone, on
       --cz-paper: 2.365:1 at 375px before, 5.378:1 after. Same value as the
       thead they replace below 900px, so the card and the table agree. */
    color: var(--cz-gold-on-light, #856532);
  }
  /* Column order is fixed by archive-cz_freezone.php. If the template
     ever gains data-label attributes echoed from the same translated
     header strings, the rule below takes over automatically. */
  .cz-table--zones tbody td:nth-of-type(1)::before { content: "Emirate"; }
  .cz-table--zones tbody td:nth-of-type(2)::before { content: "Known for"; }
  .cz-table--zones tbody td:nth-of-type(3)::before { content: "Framework"; }
  .cz-table--zones tbody td:nth-of-type(4)::before { content: "Premises"; }
  .cz-table--zones tbody td[data-label]::before { content: attr(data-label); }

  /* A cell with no data still prints an em dash in the table, because a blank
     box in a grid reads as a rendering fault. As a card it is dead scroll: a
     gold label and a dash, 44px of it, telling the reader nothing. Three zones
     carried four each, so a card was ~275px of nothing and the section paid
     824px of scroll for it. Hidden here only — the table above 900px keeps the
     dash, and the row is still reachable by the emirate filter. Specificity
     (0,4,1) against the display:grid rule above at (0,3,1). */
  .cz-zonehub__matrix .cz-table--zones td[data-empty] { display: none; }

  .cz-zonehub__matrix .cz-table--zones td.cz-table__go {
    display: block;
    padding-top: 12px;
    text-align: left;
  }
  .cz-zonehub__matrix .cz-table--zones td.cz-table__go::before { content: none; }
  .cz-zonehub__matrix .cz-table__go a { min-height: 44px; }

  .cz-zonehub__matrix .cz-table--zones tr.cz-table__empty-row {
    padding: 0;
    background: transparent;
    border: 0;
  }
  /* It is td:first-child here, so main.css hands it nowrap and gold. */
  .cz-zonehub__matrix .cz-table--zones td.cz-table__empty {
    display: block;
    padding: 28px 16px;
    text-align: center;
    white-space: normal;
    background: var(--cz-paper);
    border: 1px solid var(--cz-line);
  }
  .cz-zonehub__matrix .cz-table--zones td.cz-table__empty::before { content: none; }

  /* Touch-size the standalone controls. The chip rule is not optional:
     the base min-height above out-specifies main.css's own 44px
     mobile chip rule, so this is what puts it back. */
  .cz-practical__link,
  .cz-zone__authority > a,
  .cz-zone__refs-list li a,
  .cz-method__sources a,
  .cz-zonehub__chips .cz-chip,
  .cz-verdict__go,
  .cz-alt__go { min-height: 44px; }

  .cz-fit__grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  /* Equal width still — one above the other, ink still second so the
     eye finishes on it. */
  .cz-balance { grid-template-columns: 1fr; }
  .cz-practical__list > div { grid-template-columns: 1fr; gap: 5px; }

  .cz-zonehub__ledger,
  .cz-zone__ledger {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .cz-zonehub__ledger-cell,
  .cz-zone__ledger-cell {
    padding: 14px 0;
    border-left: 0;
    border-top: 1px solid var(--cz-line-dk);
  }
  .cz-zonehub__ledger-cell:first-child,
  .cz-zone__ledger-cell:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .cz-zonehub__filters { gap: 10px 16px; }
  .cz-method__sources li { grid-template-columns: 28px minmax(0, 1fr); padding: 15px 16px; }
}

/* ---- The four architectures, narrowed --------------------------
   Each variant is written for 2–3 stations at desktop; below 900px
   there is no honest way to keep three abreast at 13px+, so every
   one of them becomes a single column and keeps its own identity
   through its rules and grounds rather than through its axis.
   Bound at both ends where a wider rule would otherwise reach down
   and win at 375px (R7, §23 media-query trap).                    */

@media (max-width: 900px) {
  .cz-zone--corridor .cz-practical__list,
  .cz-zone--counter .cz-practical__list { grid-template-columns: minmax(0, 1fr); }

  .cz-openrec--corridor .cz-openrec__stations { grid-template-columns: minmax(0, 1fr); }
  .cz-openrec--corridor .cz-openrec__station {
    padding-right: 0;
    padding-left: 20px;
  }
  .cz-openrec--corridor .cz-openrec__station + .cz-openrec__station {
    padding-left: 20px;
    border-left: 0;
    border-top: 1px solid var(--cz-line);
  }
  /* The spine turns vertical: the node sits on the left rule. */
  .cz-openrec--corridor .cz-openrec__station::before {
    top: 22px;
    left: 0;
    transform: translateX(-6px);
  }
  .cz-openrec--corridor .cz-openrec__station + .cz-openrec__station::before {
    left: 0;
    transform: translateX(-6px);
  }
  .cz-openrec--corridor .cz-openrec__stations {
    border-top: 0;
    border-left: 2px solid var(--cz-ink);
  }

  .cz-openrec--counter .cz-openrec__stations { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .cz-openrec--charter .cz-openrec__station,
  .cz-openrec--cluster .cz-openrec__station { grid-template-columns: minmax(0, 1fr); }
  .cz-openrec--charter .cz-openrec__index,
  .cz-openrec--cluster .cz-openrec__index {
    grid-row: auto;
    margin-bottom: 10px;
  }
  .cz-zone__body > section > .cz-zone__h2 { max-width: none; }
}