/* ============================================================
   ARTICLE — the cinematic reading experience
   A layout used nowhere else on the site.
   ============================================================ */

/* ---------- Reading progress ---------- */
.cz-progress {
  position: fixed;
  top: var(--header-h-compact);
  left: 0;
  right: 0;
  height: 2px;
  z-index: 95;
  background: transparent;
  pointer-events: none;
}
.cz-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cz-gold), var(--cz-gold-soft));
  transition: width .12s linear;
}

/* ---------- Article hero — DELETED, 18 Sep 2026 ----------
   The full-bleed dark hero (.cz-article__hero, __hero-media, __hero-inner,
   its ::after scrim) and the four things that only ever sat inside it —
   .cz-article__title, .cz-article__standfirst, .cz-article__scrollcue with
   its czCue keyframes — plus their three media-query lines. .cz-masthead
   replaced the hero on every template (B36, R31) and the zone templates
   were the last to move (archive-cz_freezone.php writes its own
   .cz-masthead; single-cz_freezone.php includes
   template-parts/content/masthead.php).

   Verified dead before deleting, 18 Sep: zero emitters for any of the six
   class names in the theme's PHP and JS (the only hits are comments —
   article.js:6-14, inc/enqueue.php:168, inc/archetype.php:331);
   zero in the corpus (content/ and data/content/); zero in post_content,
   postmeta and options across the database; zero in the served HTML of
   seven routes (/, /contact/, /ifza/, a 404, /insights/, an insight,
   /vat-corporate-tax/), the reading views among them printing
   .cz-masthead__title instead. The parallax that queried the hero went
   from article.js on 1 Sep.

   Deleted in the same edit as zones.css section 7, which styled the zone
   profile's copy of the same hero and said its geometry "belongs to
   .cz-article__hero in article.css" — the two-files-at-once condition the
   tombstone further down this file set for this deletion. */

.cz-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  /* 13px — the ladder's chrome rung. Was 12.5, which existed only here and at
     three other sites that have all moved. */
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
}
.cz-crumbs a { transition: color .25s var(--cz-ease); }
.cz-crumbs a:hover { color: var(--cz-gold); }

/* ---------- Rail extras ---------- */
.cz-reading__cta-kicker {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* MEASURED 1 Sep, and the measurement changed the finding.
     `font-size` and `color` on this rule DO NOT PAINT. The kicker is emitted
     as `<p class="cz-reading__cta-kicker">` (page.php:67,
     single-cz_activity.php:316, template-activities.php:137) inside
     .cz-reading__cta, and reading.css:247 declares `.cz-reading__cta p {
     font-size: 13.5px; font-weight: 600; color: var(--cz-text) }` at (0,1,1)
     against this rule's (0,1,0). A descendant rule in another file beats a
     component rule in this one — the trap this project has been bitten by six
     times, and it is live here.
     Confirmed in the browser at 375px: computed 13.5px, weight 600,
     rgb(20,24,28), 16.32:1. So there was never a 2.16:1 defect at this site
     to fix, and there is no gold here to read.
     What DOES survive is `text-transform` and `letter-spacing`, neither of
     which reading.css declares — the kicker renders as uppercase 13.5px/600
     with .16em tracking. So the element is half this rule and half that one.
     The values below are left correct rather than deleted, because the fix is
     one line in reading.css (scope its `p` rule, or lower it) and this rule is
     what has to be right when that lands. Reported to that file's owner. Do
     not raise the specificity here to win — that is out-specifying across an
     ownership boundary, and it would leave two files disagreeing about one
     element instead of one file being wrong. */
  color: var(--cz-gold-on-light, #856532);
}

.cz-reading__share {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--cz-line);
}
.cz-reading__share > span {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cz-mid);
  margin-right: 4px;
}
.cz-reading__share a,
.cz-copy {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--cz-line);
  border-radius: 50%;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--cz-mid);
  cursor: pointer;
  transition: all .25s var(--cz-ease);
}
/* Gold-on-light on both. These are controls, so the glyph owes 4.5:1 under
   1.4.3 and the ring owes 3:1 under 1.4.11 — #c7a36b gave them 2.36:1 on the
   rail's white, and the hover state was therefore LESS legible than the
   --cz-mid resting state it replaced. #856532 is 5.38:1. */
.cz-reading__share a:hover,
.cz-copy:hover {
  border-color: var(--cz-gold-on-light, #856532);
  color: var(--cz-gold-on-light, #856532);
}
.cz-copy.is-copied {
  border-color: var(--cz-gold-on-light, #856532);
  color: var(--cz-gold-on-light, #856532);
}

/* ---------- Numbered contents ---------- */
.cz-toc__list { counter-reset: cztoc; }
.cz-toc__item--h2 { counter-increment: cztoc; }
.cz-toc__item--h2 > a::before {
  content: counter(cztoc, decimal-leading-zero);
  display: inline-block;
  width: 26px;
  margin-left: -2px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  /* The worst-contrast text in this file before today, and it was invisible to
     the audit for the same reason .cz-chapter__no was: getComputedStyle reads
     `color` and cannot see the opacity composited over it. #c7a36b at .55 over
     the rail's white renders #e3d3b8 — 1.51:1 at 12px. These numerals are the
     section numbers; a reader using them to find section 07 could not read
     them.
     The recession now comes from hue rather than from transparency, which is
     the same correction already made twice in this file, and it is why opacity
     is written as 1 rather than deleted: the declaration stays where the next
     hand will look for it. 5.38:1. */
  color: var(--cz-gold-on-light, #856532);
  opacity: 1;
}
/* The current entry gets stronger, not merely more opaque. The link beside it
   already goes to --cz-text with a gold border-left (reading.css:223-227), so
   the numeral joining it in ink is the same signal said twice rather than a
   second, weaker one — and both states now clear 4.5:1, which an opacity ramp
   at this size cannot do (#856532 at .78 over white is 3.43:1). */
.cz-toc__item--h2 > a.is-current::before { color: var(--cz-ink); }

/* ---------- Article prose ----------
   The opening paragraph is set once, in the ARTICLE TYPOGRAPHY block below.
   A second `> p:first-of-type` rule lived here and was silently beaten by it,
   and `.cz-prose--article h2` was declared here as well as there. The gold rule
   above a section heading is drawn from the pseudo-element; the box it hangs on
   is set with the rest of the H2 in the typography block. */
.cz-prose--article h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 2px;
  background: var(--cz-gold);
}

/* Legacy content ships images bare — give them shape. */
.cz-prose--article img {
  width: 100%;
  height: auto;
  border: 1px solid var(--cz-line);
}
.cz-prose--article p > img:only-child { margin-block: .6em; }

/* ---------- Related ---------- */
.cz-related {
  background: var(--cz-paper-2);
  padding-block: var(--cz-y);
}
.cz-related__head { margin-bottom: clamp(26px, 3vw, 44px); }
.cz-related__head .cz-h2 { margin-top: 6px; }

.cz-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(18px, 2vw, 30px);
}

.cz-relcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--cz-line);
  overflow: hidden;
  transition: transform .4s var(--cz-ease), box-shadow .4s var(--cz-ease), border-color .4s var(--cz-ease);
}
.cz-relcard:hover {
  transform: translateY(-5px);
  border-color: rgba(199, 163, 107, .5);
  box-shadow: 0 20px 48px rgba(5, 6, 7, .1);
}
.cz-relcard__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--cz-paper);
}
.cz-relcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1s var(--cz-ease-out);
}
.cz-relcard:hover .cz-relcard__media img { transform: scale(1.07); }

.cz-relcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(18px, 1.9vw, 26px);
}
/* ============================================================
   GOLD-ON-LIGHT — the article chrome's five sites
   ============================================================
   Measured 1 Sep across the 8 routes that render this chrome, at
   1600x1000 and 375x812.

   --cz-gold is #c7a36b. It was chosen against ink and it is right
   there; on the light grounds this chrome actually uses it measures
   2.365:1 on #ffffff. WCAG 1.4.3 asks 4.5:1 of the four labels —
   .cz-relcard__meta (12px), .cz-relcard__go (12.5px),
   .cz-masthead__kicker (12px) and .cz-masthead__checked (12px) are
   nowhere near the 18.66px bold that would let them count as large
   text — and 3:1 of .cz-chapter__no, which IS large (35.2px at
   1600px, 24px at 375px) and still missed it. All five failed, at
   roughly half the ratio they owe.

   The replacement is --cz-gold with hue and saturation held exactly
   (36.5deg, 45%) and lightness taken from 60% down to 36%: the same
   gold darkened until it clears, not a second gold. It measures
   5.38:1 on #ffffff. It is the value reading.css already ships at
   its own three sites, so the rail and the chrome stay one colour
   rather than drifting into two.

   Written as var() with a literal fallback ON PURPOSE, and on the
   routes this file styles the fallback is still what ships.

   CORRECTED 1 Sep — this paragraph used to say the token "is not
   declared at :root anywhere yet". It is now: listing.css:60 sets
   --cz-gold-on-light to #8a6730, which measures 5.168:1 on #ffffff
   and clears both 3:1 and 4.5:1, so either value is safe. It cannot
   reach the sites below, because inc/enqueue.php enqueues cz-listing
   only on is_home / is_search / is_404 / generic archives, and every
   route that loads this file is a singular reading view. #856532 at
   5.378:1 is therefore the rendered value here today. Left as a
   fallback rather than hard-coded: the token still belongs in
   main.css, which this file does not own, and when main.css declares
   it the two grounds converge with no further edit here. Do not
   re-assert that the token is undeclared — zones.css:47 records the
   same correction.

   Nothing is out-specified. Every edit changes a value inside a rule
   that already exists and already declares that property — no
   selector added, no specificity moved. Checked against everything
   else in play, because the trap on this project is the (0,1,1) that
   quietly beats a single class — reading.css:265 `.cz-prose p` over
   .cz-stat__text was exactly that. Every rule in any stylesheet that
   names .cz-relcard, .cz-masthead or .cz-chapter is in this file;
   placement.css:117 and :418 and reading.css:552 and :566 are the
   only outside mentions and they set geometry, never colour. The one
   element-typed descendant anywhere near these five is
   .cz-masthead__meta strong further down, (0,1,1) and colour-setting,
   and it cannot reach them: the checked badge is a <span> containing
   no <strong>. reading.css:265 cannot reach the kicker either — that
   is a masthead <p>, outside .cz-prose entirely. Inherited colour is
   not a threat at any specificity, since all five declare their own.

   Dark grounds checked and deliberately left alone: the bare
   .cz-chapter__no at the CHAPTER block below, and the --split
   variant, sit on a photograph under a scrim where #c7a36b is
   correct and reads 8:1. Only the two light-ground variants of that
   element are changed.

   CORRECTED 1 Sep, second pass — "sit on a photograph under a
   scrim" is no longer true of anything. .cz-chapter has ONE
   emitter, inc/content-enrich.php:472, and it writes into
   the_content, so every marker on the site is inside
   .cz-prose--article — where the SECTION MARKERS block at the foot
   of this file sets `.cz-prose--article .cz-chapter__media {
   display: none }` and `background: none`. There is no photograph
   behind any chapter numeral on any route. The two rules are left
   at raw gold anyway because they are UNREACHABLE, not because they
   are on ink: .cz-chapter__no is (0,1,0) and
   .cz-chapter--split .cz-chapter__no is (0,2,0), and
   .cz-prose--article .cz-chapter__no is (0,2,0) printed later, so
   it wins both. Do not "fix" the colour on either — fix the ground
   claim, which is this paragraph.

   The 1 Sep sweep also stopped at the four elements the audit
   named. Grepping this file for var(--cz-gold) on a light ground
   found more that carry TEXT or a control state and were all at
   2.16-2.36:1: the share/copy hover and is-copied pair, the TOC
   numerals (worst of the file at 1.51:1 composited, because .55
   opacity is invisible to a getComputedStyle sweep), the FAQ
   question hover / open / focus ring / plus glyph,
   .cz-aside__label (deleted with .cz-aside, 18 Sep 2026),
   .cz-article--costs strong, the ordered list markers,
   .cz-masthead__meta svg and .cz-crumbs--light a:hover.
   All are moved here, and all re-measured in the browser after the
   move: 5.38:1 on #fff, 4.92-5.03:1 on --cz-paper-2, every one of
   them clearing 4.5:1.
   .cz-reading__cta-kicker was on that list and came OFF it: it is
   out-specified by reading.css:247 and renders --cz-text, so it
   never had this defect. See the note on that rule. Measuring
   rather than grepping is what caught it.
   What is deliberately NOT moved is
   DECORATION — the 44px rules over an H2, the 2px chapter rule, the
   pull quote's left border, the plate's corner, the process spine
   dot, the progress bar, the table's top rule and the relcard hover
   border. None of them carries information or state, so 1.4.3 and
   1.4.11 do not reach them and #c7a36b stays the site's accent.
   ============================================================ */
.cz-relcard__meta {
  font-size: 13px;
  font-weight: 800;
  /* .16em, not .15. There were seven different tracking values doing one job
     across twelve uppercase components in the reading path — the same
     arbitrariness as the font-size inventory, one property down. Two values
     now, tied to size: .16em on the 13px chrome rung, .14em above it. */
  letter-spacing: .16em;
  text-transform: uppercase;
  /* 2.365:1 on the card's own #fff. Full reasoning in the block above. */
  color: var(--cz-gold-on-light, #856532);
  margin-bottom: 10px;
}
.cz-relcard__title {
  font-size: clamp(16px, .5vw + 14px, 18.5px);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.016em;
  color: var(--cz-text);
  text-wrap: balance;
}
.cz-relcard__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  /* 14.8px — the smallest reading rung, not the chrome rung. This is the
     card's read affordance sitting beside a 15px arrow; at 12.5 it was smaller
     than its own icon. */
  font-size: 14.8px;
  font-weight: 700;
  /* Gold-on-light — full reasoning at .cz-relcard__meta above. The arrow beside
     it is drawn from currentColor, so the Read affordance and its glyph clear
     together and the svg needs no rule of its own. Left gold rather than moved
     to blue: the whole card is the link, this span is emphasis inside it, and
     R17 keeps blue for the thing you actually click. */
  color: var(--cz-gold-on-light, #856532);
}
.cz-relcard__go svg { width: 15px; height: 15px; transition: transform .25s var(--cz-ease); }
.cz-relcard:hover .cz-relcard__go svg { transform: translateX(4px); }

/* ---------- Responsive ----------
   The hero, title, scroll-cue and hero-image lines that stood in these three
   queries went with the article hero, 18 Sep 2026 (tombstone at the top of
   this file). What remains here is live. */
@media (max-width: 1000px) {
  .cz-reading__share { padding-top: 16px; }
}

@media (max-width: 620px) {
  .cz-related__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cz-progress span { transition: none; }
}

/* ============================================================
   CHAPTER OPENERS
   A long guide is read in stages. Every third section opens on
   its own small hero carrying the section number and title, so
   the imagery belongs to a chapter instead of interrupting a
   paragraph. This replaces .cz-break, which dropped a photo
   between paragraphs and captioned it with its own alt text.
   ============================================================ */
.cz-chapter {
  position: relative;
  display: block;
  margin: clamp(48px, 5vw, 88px) 0 clamp(26px, 2.6vw, 40px);
  /* Deliberately no `width`. The opener is widened by the negative margin-right
     in reading.css, which extends it across the margin column; an explicit
     `width: 100%` resolves against the containing block and cancels that,
     leaving the opener exactly as narrow as the prose. */
  min-height: clamp(190px, 21vw, 280px);
  overflow: hidden;
  background: var(--cz-ink);
  isolation: isolate;
}

.cz-chapter__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}
.cz-chapter__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  transform: scale(1.03);
  transition: transform 1.2s var(--cz-ease-out);
}
.cz-chapter:hover .cz-chapter__media img { transform: scale(1.07); }

/* Two gradients: one for legibility top-to-bottom, one for depth left-to-right
   so the number and title always sit on the darkest part of the frame. */
/* The scrim protects the type; it is not supposed to hide the photograph.
   Two stacked gradients at .88 and .72 left every chapter image as a dark
   smudge — four murky bands down the page rather than four pictures. This
   darkens only the lower-left corner, where the number and title actually sit,
   and lets the rest of the frame be seen. */
.cz-chapter::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(5,6,7,0) 34%, rgba(5,6,7,.58) 100%),
    linear-gradient(105deg, rgba(5,6,7,.72) 0%, rgba(5,6,7,.22) 46%, rgba(5,6,7,0) 72%);
}

.cz-chapter__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: inherit;
  padding: clamp(24px, 2.6vw, 40px);
  gap: 12px;
}

.cz-chapter__no {
  display: block;
  font-size: clamp(13px, .5vw + 11px, 15px);
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--cz-gold);
}
.cz-chapter__no::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin-top: 10px;
  background: var(--cz-gold);
}

.cz-chapter__title {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(22px, 1.5vw + 15px, 34px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.03em;
  color: #fff;
  text-wrap: balance;
}
/* The gold rule the prose adds above every H2 would double up here — suppressed
   once, in the SECTION MARKERS block at the foot of this file, which is also
   where the marker's own type is set. Declaring it twice is how this file kept
   growing competing rules. */

/* ---------- Margin column contents — .cz-aside DELETED, 18 Sep 2026 ----------
   .cz-aside, __label and `p` — a boxed card for the margin column that no
   template, filter or script ever printed. Re-verified before deleting: zero
   hits for the class in the theme's PHP and JS (inc/content-enrich.php:592
   only quotes the reading.css comment about it), in the corpus, in the
   database and in the served HTML of seven routes. The margin exhibit the
   theme does build is cz_open_marginalia()'s `.cz-marginalia` figure
   (inc/content-enrich.php), a different element with its own rules in
   editorial.css:227 — and a figure, so R67 withholds it outside the
   homepage and /visa-services/. */

@media (max-width: 620px) {
  .cz-chapter { min-height: 168px; }
  .cz-chapter__title { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cz-chapter__media img { transform: none !important; transition: none; }
}

/* ---------- Touch targets ----------
   Every control in the reading view needs 44px of height on a phone. The share
   and copy controls are 34px circles on the desktop rail, which is fine with a
   pointer and not fine with a thumb. */
@media (max-width: 1000px) {
  .cz-reading__share a,
  .cz-copy {
    width: 44px;
    height: 44px;
  }
  .cz-reading__cta .cz-btn { min-height: 48px; }
  .cz-toc__item a { padding-block: 12px; }
  /* min-width as well as min-height: the crumb label is often one short word
     ("Home" measured 33.2 x 44), so the height floor alone left a target that
     passes on one axis and fails on the other. justify-content centres the
     label in the wider box so the separators stay evenly spaced. */
  .cz-crumbs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }
}

/* ---------- The contents rail has to fit the viewport ----------
   A 37-entry list in a sticky container is taller than the screen, so the
   bottom of it — and the CTA and share controls beneath — were simply
   unreachable: the rail stuck, the page scrolled past, and the entries you
   wanted were off the bottom edge. The rail now owns its own scroll. */
@media (min-width: 1001px) {
  .cz-reading__rail {
    max-height: calc(100vh - 130px);
    overflow: hidden;
    grid-template-rows: minmax(0, 1fr) auto auto;
  }

  .cz-toc {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .cz-toc__list {
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;
    /* Room for the scrollbar so it never sits on top of the text. */
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--cz-line) transparent;
  }
  .cz-toc__list::-webkit-scrollbar { width: 4px; }
  .cz-toc__list::-webkit-scrollbar-track { background: transparent; }
  .cz-toc__list::-webkit-scrollbar-thumb { background: var(--cz-line); }
  .cz-toc__list:hover::-webkit-scrollbar-thumb { background: var(--cz-gold); }

  /* A long list needs to say that it continues. */
  .cz-toc::after {
    content: "";
    position: absolute;
    left: 0;
    right: 8px;
    bottom: 0;
    height: 28px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, var(--cz-paper));
  }
}

/* ---------- FAQs ----------
   Legacy FAQs were a heading followed by a run of question headings and answer
   paragraphs — an undifferentiated wall you could not scan and Google could not
   read as a FAQ. They are <details> now: keyboard operable, announced properly,
   and they stay open when find-in-page lands inside them, all without script. */
.cz-faqlist {
  display: grid;
  gap: 0;
  margin-top: 1.4em;
  border-top: 1px solid var(--cz-line);
}

.cz-faqitem {
  border-bottom: 1px solid var(--cz-line);
}

.cz-faqitem__q {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(15px, 1.5vw, 20px) 44px clamp(15px, 1.5vw, 20px) 0;
  position: relative;
  list-style: none;
  cursor: pointer;
  /* 18.5px at the top, not 17.5 — the ladder's body rung. The question is the
     control the reader scans; setting it a pixel under body copy made a list
     of questions read as a list of captions. */
  font-size: clamp(16.5px, .45vw + 14.8px, 18.5px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.015em;
  color: var(--cz-text);
  transition: color .25s var(--cz-ease);
}
/* Safari draws its own triangle unless this is suppressed. */
.cz-faqitem__q::-webkit-details-marker { display: none; }
/* Gold-on-light. A summary at 18.5px bold is NOT large text — 1.4.3 puts that
   boundary at 18.66px bold — so the hover and open states owe 4.5:1 and were
   shipping 2.36:1 on white. The open state is the one that matters: it is not
   a transient hover, it is how an expanded question stays marked while the
   reader is in the answer. */
.cz-faqitem__q:hover { color: var(--cz-gold-on-light, #856532); }
.cz-faqitem__q:focus-visible {
  /* 1.4.11 asks 3:1 of a focus indicator against what it sits on. #c7a36b on
     white is 2.36:1, so the keyboard ring on the only keyboard-operable
     control in the reading column was itself below the bar. */
  outline: 2px solid var(--cz-gold-on-light, #856532);
  outline-offset: 3px;
}

/* The open/closed indicator: a plus that becomes a minus.
   Gold-on-light, unlike the decorative gold elsewhere in this file: this glyph
   IS the affordance — it is the only thing on the row that says the question
   opens, and it is the only thing that says whether it is open now. That makes
   it a UI component under 1.4.11, which asks 3:1. A 1.6px stroke at 2.36:1 was
   the least visible control on the page. */
.cz-faqitem__q::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -6px;
  background:
    linear-gradient(var(--cz-gold-on-light, #856532), var(--cz-gold-on-light, #856532)) center/13px 1.6px no-repeat,
    linear-gradient(var(--cz-gold-on-light, #856532), var(--cz-gold-on-light, #856532)) center/1.6px 13px no-repeat;
  transition: transform .32s var(--cz-ease), background-size .32s var(--cz-ease);
}
.cz-faqitem[open] .cz-faqitem__q::after {
  transform: rotate(90deg);
  background:
    linear-gradient(var(--cz-gold-on-light, #856532), var(--cz-gold-on-light, #856532)) center/13px 1.6px no-repeat;
}
.cz-faqitem[open] .cz-faqitem__q { color: var(--cz-gold-on-light, #856532); }

.cz-faqitem__a {
  padding: 0 44px clamp(18px, 1.8vw, 24px) 0;
  font-size: clamp(15px, .35vw + 14px, 16.5px);
  line-height: 1.72;
  color: var(--cz-mid);
}
.cz-faqitem__a > *:first-child { margin-top: 0; }
.cz-faqitem__a > * + * { margin-top: 1em; }

@media (max-width: 620px) {
  /* 44px minimum target on a phone. */
  .cz-faqitem__q { min-height: 44px; padding-right: 38px; }
  .cz-faqitem__a { padding-right: 0; }
}

/* ============================================================
   CHAPTER OPENER VARIANTS
   Which one an article uses is decided by what kind of article
   it is — see inc/archetype.php. A step-by-step guide, a
   jurisdiction comparison and a costs breakdown are not the
   same thing and should not open their chapters the same way.
   ============================================================

   THAT IS THE INTENT. IT IS NOT WHAT SHIPS — read this before
   changing any number below, 1 Sep.

   inc/content-enrich.php:472 is the only emitter of .cz-chapter
   and it writes into the_content, so every marker on the site
   renders inside .cz-prose--article. The SECTION MARKERS block
   at the foot of this file then re-declares the marker at
   (0,2,0) and (0,3,0) and prints last, so it beats every
   variant rule here on specificity, source order, or both:

     .cz-chapter--split  .cz-chapter__no    (0,2,0)  loses to
     .cz-prose--article  .cz-chapter__no    (0,2,0), printed later
     .cz-chapter--rule   .cz-chapter__title (0,2,0)  loses to
     .cz-prose--article .cz-chapter .cz-chapter__title (0,3,0)

   and the same block sets `display: block`, `background: none`,
   `.cz-chapter__media { display: none }` and `::after { display:
   none }`, so the photograph, the scrim and the split grid are
   all suppressed as well. Net result: band, split, rule and
   parallax render IDENTICALLY — a gold rule, a numeral and a
   title. --parallax has no emitter at all besides.

   So every font-size, colour and opacity below is inert. They
   are left at their old values ON PURPOSE rather than dragged
   onto the type ladder: normalising numbers that cannot paint
   is churn, and worse, it would make the file look as though
   the variants had been considered. They have not. The live
   values are in the SECTION MARKERS block.

   This is reported to the orchestrator as a design defect —
   four archetype variants that differentiate nothing — not
   fixed here, because reviving them is a design decision and
   because half the suppression lives in a rule this file shares
   with the reading templates.
   ============================================================ */

/* ---- split: image one side, number and title the other ----
   Used by process and listicle pieces, where the reader is moving through an
   ordered sequence and wants the number to lead. */
.cz-chapter--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: stretch;
  min-height: clamp(150px, 15vw, 210px);
  background: var(--cz-ink);
}
.cz-chapter--split .cz-chapter__media {
  position: relative;
  inset: auto;
  z-index: 0;
  height: 100%;
}
.cz-chapter--split .cz-chapter__media img { object-position: center 45%; }
/* The full-bleed scrim would darken the whole grid; this variant only needs a
   soft edge where the photograph meets the type. */
.cz-chapter--split::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: none;
}
.cz-chapter--split .cz-chapter__inner {
  z-index: 2;
  justify-content: center;
  padding: clamp(20px, 2.2vw, 34px);
}
.cz-chapter--split .cz-chapter__no {
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1;
  letter-spacing: -.03em;
  opacity: .95;
}
.cz-chapter--split .cz-chapter__no::after { width: 34px; margin-top: 12px; }
.cz-chapter--split .cz-chapter__title {
  font-size: clamp(19px, 1.1vw + 14px, 27px);
  max-width: 24ch;
}

/* ---- rule: no photograph at all ----
   Used by comparison and questions pieces. The type is the design; a picture
   between two tables is decoration in the way of evidence. */
.cz-chapter--rule {
  display: block;
  min-height: 0;
  background: transparent;
  border-top: 2px solid var(--cz-gold);
  padding: clamp(18px, 1.8vw, 26px) 0 0;
  margin-bottom: clamp(18px, 1.8vw, 26px);
  overflow: visible;
}
.cz-chapter--rule::after { display: none; }
.cz-chapter--rule .cz-chapter__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0 clamp(14px, 1.4vw, 22px);
  min-height: 0;
  padding: 0;
}
.cz-chapter--rule .cz-chapter__no {
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: .9;
  letter-spacing: -.03em;
  /* Gold-on-light — full reasoning at .cz-relcard__meta above. This variant has
     no photograph and its own title is --cz-text, so the ground under the
     numeral is paper, same as the prose variant at the foot of this file.

     The opacity goes with it, and that is the more important half. The audit
     read this element at 2.365:1 from its computed `color`; the number actually
     rendered was #ede2d0, 1.28:1 — a getComputedStyle colour cannot see the
     opacity composited over it. A pass bought by leaving .32 in place would be
     a pass the measurement can see and the reader cannot, which is the exact
     shape of the defect being fixed. So the recession now comes from the hue
     falling well short of the title's ink, not from transparency, and the
     measured value is the rendered value.

     Written as 1 rather than deleted so the declaration stays where the next
     hand will look for it. The load-bearing version of that argument is at
     .cz-prose--article .cz-chapter__no in the SECTION MARKERS block, where
     deleting it really would change which rule wins. */
  color: var(--cz-gold-on-light, #856532);
  opacity: 1;
}
.cz-chapter--rule .cz-chapter__no::after { display: none; }
.cz-chapter--rule .cz-chapter__title {
  color: var(--cz-text);
  font-size: clamp(21px, 1.3vw + 15px, 31px);
  max-width: 30ch;
}
/* Rule openers sit inside the reading measure — they are type, not imagery, so
   they must not bleed into the margin column. */
.cz-reading__body .cz-chapter--rule { margin-right: 0; }

/* ---- Archetype accents on the article as a whole ---- */
/* `.cz-article--comparison .cz-prose--article table { font-size: 14.5px }` —
   REMOVED, 1 Sep. It set comparison tables 0.5px smaller than every other
   table on the site, at (0,2,1) so it silently beat the base rule. Two sizes,
   one component, no reason: a comparison table is not a different kind of
   table. Both are 14.8px now, from the one declaration further down. */
.cz-article--comparison .cz-tablewrap { border-top: 2px solid var(--cz-gold); }

/* Gold-on-light. On a costs piece EVERY bold run in the body copy turns gold,
   which at #c7a36b was 2.36:1 — the largest single body of failing text in the
   file, and it lands on the numbers the page exists to state. 18.5px at weight
   800 is under the 18.66px bold boundary for large text, so it owes the full
   4.5:1; at 375px it is 16.7px and not close. #856532 is 5.38:1 and still
   reads as gold against the surrounding #21262d. */
.cz-article--costs .cz-prose--article strong { color: var(--cz-gold-on-light, #856532); }

.cz-article--questions .cz-prose--article > h3 {
  padding-left: 18px;
  border-left: 2px solid var(--cz-gold);
}

/* A step-by-step piece gets a spine down the prose so the sequence is visible
   at a glance rather than only in the contents. */
.cz-article--process .cz-reading__body { position: relative; }
.cz-article--process .cz-prose--article > h2,
.cz-article--process .cz-prose--article > h3 {
  position: relative;
  padding-left: 30px;
}
.cz-article--process .cz-prose--article > h2::after,
.cz-article--process .cz-prose--article > h3::after {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cz-paper);
  border: 2px solid var(--cz-gold);
}
/* The gold rule above H2 is redundant once the spine marks the step. */
.cz-article--process .cz-prose--article h2::before { display: none; }
.cz-article--process .cz-prose--article h2 { padding-top: 0; }

@media (max-width: 760px) {
  .cz-chapter--split { grid-template-columns: 1fr; }
  .cz-chapter--split .cz-chapter__media { height: clamp(140px, 34vw, 190px); }
  .cz-chapter--split .cz-chapter__no { font-size: clamp(26px, 8vw, 38px); }
  .cz-article--process .cz-prose--article > h2,
  .cz-article--process .cz-prose--article > h3 { padding-left: 22px; }
}

/* ============================================================
   HERO VARIANTS — REMOVED
   ============================================================
   .cz-article__hero--split and .cz-article__hero--plate were
   selected by cz_hero_style() in inc/archetype.php. Around a
   hundred lines of CSS for two classes that are never emitted.
   Deleted rather than left to be maintained. The function that
   chose between them was deleted on 1 Sep; the tombstone that
   replaces it is at inc/archetype.php:326 (was :313 when this
   was written; re-read 18 Sep 2026).

   CORRECTION, 1 Sep — the sentence that used to stand here said
   "the only markup left carrying .cz-article__hero is the free
   zone hub and the zone profile". THAT IS FALSE, and it was
   false when written. Both of those templates open on
   .cz-masthead: archive-cz_freezone.php:105 and
   single-cz_freezone.php:286, which includes the masthead
   partial. Re-measured today:

     grep -rn "cz-article__hero" --include=*.php theme/  → 1 hit,
       and it is a COMMENT in inc/enqueue.php:129
     served HTML, 6 routes incl. /free-zones/ and
       /free-zones/dmcc/                                → 0 hits

   So .cz-article__hero has zero emitters, and the base hero
   block that sat at lines 26–62 plus its media-query lines was
   inert. It was left in place ONLY because zones.css carried a
   comment declaring a dependency on it ("Geometry and ground
   belong to .cz-article__hero in article.css") in a file that
   belonged to another agent — one deletion that had to be made
   in both files at once or not at all.

   DONE, 18 Sep 2026: both files, one edit. The base hero, its
   title, standfirst and scroll cue went from the top of this
   file, and zones.css section 7 (the zone profile's hero) went
   with it. Re-grepped first, as the line above asks. */

/* ---- parallax: the one big cinematic moment ----
   Taller than a chapter band and only ever used once per article, so it stays
   an event rather than another band. */
.cz-chapter--parallax {
  min-height: clamp(280px, 34vw, 460px);
}
.cz-chapter--parallax .cz-chapter__media img {
  height: 118%;
  object-position: center 38%;
}
.cz-chapter--parallax::after {
  background:
    linear-gradient(180deg, rgba(5,6,7,0) 42%, rgba(5,6,7,.62) 100%),
    linear-gradient(105deg, rgba(5,6,7,.62) 0%, rgba(5,6,7,.12) 52%, rgba(5,6,7,0) 76%);
}
.cz-chapter--parallax .cz-chapter__title {
  font-size: clamp(26px, 1.9vw + 16px, 42px);
  max-width: 20ch;
}
.cz-chapter--parallax .cz-chapter__no { font-size: clamp(14px, .6vw + 11px, 17px); }

/* ---- pull quote break ----
   No image at all. A page where every break is a photograph stops reading as
   cinematic and starts reading as a slideshow. */
.cz-pull {
  margin: clamp(40px, 4.4vw, 76px) 0 clamp(26px, 2.6vw, 40px);
  padding-left: clamp(20px, 2vw, 34px);
  border-left: 3px solid var(--cz-gold);
}
.cz-pull__text {
  margin: 0;
  max-width: 26ch;
  /* 28.9px, not 34. At 34 it sat between the chapter title (33) and the H2
     (36) — three components inside 3px, which is why a pull quote read as an
     H2 that had gone wrong rather than as a different kind of thing. One rung
     down is a rank the reader can see. */
  font-size: clamp(22px, 1.5vw + 15px, 28.9px);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -.028em;
  color: var(--cz-text);
  text-wrap: balance;
}
/* A pull quote is type — it stays inside the reading measure. */
.cz-reading__body .cz-pull { margin-right: 0; }

/* ---- .cz-pullquote — the promoted first blockquote ----
   16 September 2026. cz_promote_pull_quote() (content-enrich.php) rewrites the first
   <blockquote> of every article body to carry this class, and NO stylesheet defined it: the
   markup shipped to readers as a bare browser blockquote inside a design system that styles
   everything else (08 §14.11, measured 23 August, open until now).
   It is the same component as .cz-pull above — type, a hairline rule, no box (R51) — but it is
   a quotation inside the prose rather than a break between sections, so it sits one rung
   quieter and keeps the reading measure. */
.cz-pullquote {
  margin: clamp(26px, 2.4vw, 40px) 0;
  padding-left: clamp(18px, 1.8vw, 28px);
  border-left: 2px solid var(--cz-gold);
  max-width: 54ch;
  font-size: clamp(18px, .5vw + 16px, 21px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.012em;
  color: var(--cz-text);
}
.cz-pullquote > :first-child { margin-top: 0; }
.cz-pullquote > :last-child { margin-bottom: 0; }
.cz-pullquote cite {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cz-mid);
}

/* ---- margin figure ----
   .cz-sidefig is gone. It was the first attempt at a figure in the margin
   column and it carried the exact bug R3 names: a width computed from the
   margin column against a negative right margin of the same size, so the float
   reserved a margin box about two pixels wide and paragraphs ran underneath the
   photograph. Nothing emits it any more — the treatment that shipped is
   .cz-fig--margin at the foot of this file, which floats inside the measure
   with a real gutter and is verified not to overlap. */

@media (max-width: 620px) {
  .cz-pull__text { max-width: none; }
  .cz-chapter--parallax { min-height: 220px; }
}

/* ============================================================
   ARTICLE TYPOGRAPHY
   The reading column was set in --cz-mid (#5b6570) — a muted
   grey meant for captions and meta, used here for every
   paragraph of a 4,000-word page. Against white it reads as
   washed out and tentative, which is what made the articles
   look generic however they were laid out. Body copy on this
   site is now near-black, and grey is returned to the job it
   was chosen for.
   ============================================================

   THE TYPE SCALE — one ladder, and the reason each rung exists.

   Audited 1 Sep: 28 distinct font sizes resolved in the reading
   path at a 1600px viewport, with six different step ratios and
   three clusters of sizes nothing can tell apart. The damaging
   one was 31 / 32 / 33 / 34 / 35.2 / 36 — four of those six
   landing on a single article (.cz-chapter__title 33,
   .cz-pull__text 34, .cz-chapter__no 35.2, h2 36), so four
   components read as "the same size, slightly wrong". That is
   the visual signature the client called cheap.

   The ladder is a 1.25 major third anchored on the 18.5px body:

     13      chrome and labels — breadcrumbs, eyebrows, kickers,
             table headers, TOC numerals, share label. NOT 12:
             R7 sets 12px as the FLOOR, and a floor is not a
             target. 13 keeps a pixel of headroom so a future
             rounding cannot drop the smallest type on the site
             under the rule.
     14.8    smallest reading matter — table cells, the masthead
             meta row, the card's read affordance. (Aside copy sat
             here too until .cz-aside was deleted, 18 Sep 2026.)
     16.5    secondary body — the FAQ answer. A half step
             (0.89x body), deliberately, because a Q/A pair
             wants a smaller gap than a full rung.
     18.5    BODY. The anchor. Everything else is derived.
     23      h3, the FAQ question, the masthead deck, the
             chapter numeral.
     28.9    chapter title, pull quote. Stepped here ON PURPOSE
             so they read as a different rank rather than as a
             mis-set H2 — see the cluster above.
     36      h2. The largest thing in the reading column.
     56.5    .cz-masthead__title.

   Reading at 1600px after this pass: 13 / 14.8 / 16.5 / 18.5 /
   23 / 28.9 / 36 / 56.5 — eight sizes, each with one job.

   Two conventions this ladder assumes, so the next hand does
   not re-scatter it:

   1. A clamp's MINIMUM is a ramp endpoint, not a rung. The
      ladder is the desktop maximum. Phone sizes are allowed off
      the ladder where the hierarchy needs it (h2 25 / h3 19),
      and every minimum in this file is >= 13px, so R7 holds by
      construction rather than by measurement.
   2. Sizes that no markup can reach are not on the ladder and
      are not counted. Two groups are inert and are left at
      their old values with a note where they sit, rather than
      churned: the chapter opener VARIANTS (every one of their
      type declarations is out-specified by the SECTION MARKERS
      block at the foot of this file), and .cz-fig__label /
      .cz-fig__text (zero emitters, and figures.css:43 hides
      them besides). There were three; the .cz-article__hero
      block was the third and was deleted on 18 Sep 2026 (see
      the tombstone at the top of this file).
   ============================================================ */
.cz-prose--article {
  font-size: clamp(16.5px, .35vw + 15.4px, 18.5px);
  line-height: 1.7;
  letter-spacing: -.003em;
  color: #21262d;
}
.cz-prose--article p,
.cz-prose--article li {
  color: #21262d;
}

/* Vertical rhythm, set per element rather than with `> * + *`.
   Two attempts at an adjacent-sibling rule both went wrong: bare, it was printed
   after the break elements and collapsed every chapter opener to 21px of
   clearance; guarded with :not(), the four classes inside the negation pushed
   its specificity above the heading rules and collapsed H2 spacing from 94px to
   41px. Declaring the margin on the element that owns it has neither problem
   and is legible besides.

   EVERY vertical margin in the reading column is declared ONCE, here or in the
   spacing block at the foot of the file, and nowhere else. Three separate
   passes had each added their own `> h2 { margin-top }` — 2.6em, then 1.9em,
   then 1.15em — and only the last one did anything. The measured result was
   right and the file was lying about why. */
.cz-prose--article > * { margin-top: 1.15em; }
.cz-prose--article > *:first-child { margin-top: 0; }
.cz-prose--article > p + p { margin-top: 1.05em; }

.cz-prose--article h2 {
  /* One blank line of air above a heading, not three. Measured: 41px from the
     paragraph above at 1600px, which is the R5 target.

     The `max()` is the floor, and it is the half that was missing. In `em` the
     clearance shrinks with the heading, so at 375px — where the h2 is 25px —
     1.15em is 28.75px, and the four adjacency rules at the foot of this file
     then cut it further against whatever bottom margin the element above
     happened to carry. Measured on /product-setup/ at 375px: space above the
     19 headings ranged 15px to 47px, space below 12px to 19px, and three
     headings came out at a ratio of 1.15 or less. A heading that sits as close
     to the section it ends as to the section it opens is not punctuation.
     34px is the floor at every width; above ~1150px the 1.15em term is larger
     and takes over, so desktop is unchanged. */
  margin-top: max(1.15em, 34px);
  margin-bottom: .4em;
  /* The 44px gold rule hangs off the top of this padding — see
     `.cz-prose--article h2::before` in the article prose block above. */
  position: relative;
  padding-top: 18px;
  font-size: clamp(25px, 1.5vw + 18px, 36px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.032em;
  color: var(--cz-ink);
  text-wrap: balance;
}
.cz-prose--article h3 {
  /* Floor, for the reason given on the h2 above. 1em on a 19px phone h3 is
     19px, and the H3 that measured exactly 19px above / 19px below on
     /product-setup/ — unattached to its own section — was this rule meeting a
     .cz-tablewrap's 1.1em on the other side. 28px clears every block margin in
     the column, so the gap above an H3 is now the same number at every
     adjacency and at every width. */
  margin-top: max(1em, 28px);
  /* Raised from .32em only because the block below it now stands down: the
     space under an H3 used to be set by the following paragraph's .8em
     (14.8px), not by this declaration at all. .38em is 8.7px at 1600px and
     7.2px at 375px — measurably tighter than what shipped, and now the number
     that actually reaches the page. */
  margin-bottom: .38em;
  /* 23px, not 25 — the ladder's rung above body. See the scale block above. */
  font-size: clamp(19px, .85vw + 16px, 23px);
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -.022em;
  color: var(--cz-ink);
  text-wrap: balance;
}
/* `.cz-prose--article h2 + h3 { margin-top: .5em }` — REMOVED, 1 Sep.
   It was one of five rules cancelling a heading's clearance from the outside,
   and it was the one that inverted the invariant outright: at 375px it put
   9.5px above an H3 against 13.4px below, so the subhead belonged visually to
   the body underneath rather than to the H2 it sits under. With the floor
   above, an H3 after an H2 takes the same 28px every other H3 takes, and the
   H2's own margin-bottom collapses inside it. */

/* The opening paragraph carries the reader in — and it does that with ink and
   nothing else now.
   REMOVED 1 Sep: font-size clamp(18px, .55vw + 16.4px, 21px), line-height 1.6
   and letter-spacing -.008em. Three reasons, and the first is the one that
   settles it.
     1. The masthead already carries a deck. .cz-masthead__standfirst renders
        at 20px on the same page, so the reader met two decks — and 20 against
        21 is not two ranks, it is one rank set twice, which is the exact
        cluster defect the scale block above exists to remove. The deck keeps
        the job and steps to 23; the prose lead gives it up.
     2. `:first-of-type` does not mean "the opening paragraph". Measured in the
        served HTML of /business-setup-in-uae/, the first `> p` sits after an
        H2 AND a figure, so the 21px treatment landed on a mid-section
        paragraph. Every other section's first paragraph is 18.5px. That is a
        size difference the page cannot explain.
     3. 21/18.5 is a 1.135 step. The ladder's smallest real step is 1.11 and
        that one is deliberate; this one just read as a paragraph set wrong.
   The lift that remains is --cz-ink against the body's #21262d, which is a
   difference the reader can attribute. */
.cz-prose--article > p:first-of-type {
  color: var(--cz-ink);
}

/* Lists were the same grey as body copy with a gold dot. Give the marker
   presence and the item room to breathe. */
.cz-prose--article ul li { padding-left: 27px; }
.cz-prose--article ul li::before {
  top: .58em;
  width: 7px;
  height: 7px;
}
.cz-prose--article li + li { margin-top: .62em; }
.cz-prose--article ol { padding-left: 25px; }
.cz-prose--article ol li::marker {
  font-weight: 800;
  /* Gold-on-light. A ::marker on an ordered list is not decoration — it is the
     step number, and on a process piece it is what the prose refers back to.
     2.36:1 at body size. Unlike the ul bullet two rules up, which is a dot and
     carries nothing, so it keeps the accent. */
  color: var(--cz-gold-on-light, #856532);
}

/* Tables are the most useful thing on a comparison page and were set at
   14.5px in grey. */
.cz-prose--article table {
  font-size: 14.8px;
  /* Tabular data does not want prose leading. The cells inherited the column's
     1.7 from .cz-prose--article, which at 14.8px is 25.2px of line box for one
     line of text — on a 12-row table that is about 53px of dead vertical air
     inside a box the client has already called out for its empty space, and it
     is the one component of this design he has praised. 1.45 is 21.5px. */
  line-height: 1.45;
}
.cz-prose--article td { color: #21262d; }
.cz-prose--article th {
  /* 13px, the chrome rung. 12.5 existed only to be half a pixel away from the
     12px labels everywhere else. */
  font-size: 13px;
  font-weight: 800;
  /* R19's floor for uppercase labels is .14em or more, and this was .08em —
     simultaneously the smallest type in the reading column and the most
     tightly tracked, which is backwards: uppercase at small sizes needs MORE
     letter-spacing, not less, because the caps have no ascenders or
     descenders to separate them. Measured at 1600px on /product-setup/
     before the change: 12.5px / 1px tracking. .14em is 1.75px.

     The tables are the one component the client has ever praised (T76), so
     this is deliberately the only thing touched here — size, weight, colour,
     ground and zebra are all unchanged. Tracking is not structure.

     UPDATED 1 Sep: .16em, because the header moved to the 13px chrome rung
     with every other uppercase label in the file and the tracking follows the
     size, not the component. The two-value rule is .16em at 13px, .14em above
     it. R19's .14em floor is still cleared with room. Weight, colour, ground
     and zebra remain untouched; the size moved half a pixel. */
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cz-ink);
  background: var(--cz-paper-2);
}
.cz-prose--article tbody tr:nth-child(even) { background: rgba(8, 10, 13, .022); }

/* Emphasis should actually read as emphasis. */
.cz-prose--article strong {
  font-weight: 800;
  color: var(--cz-ink);
}

@media (max-width: 620px) {
  /* Heading margins are in em, so they already tighten with the type. The two
     `margin-top` overrides that used to sit here were beaten at every width by
     the child-selector rules further down and never once applied. */
  .cz-prose--article { line-height: 1.66; }
}

/* ============================================================
   MASTHEAD — replaces the full-bleed hero
   ============================================================
   A dark full-bleed hero on every one of two hundred documents
   was the laziest thing on the site: it made a stock photograph
   the loudest element on a page whose value is its argument, it
   pushed the first paragraph below the fold, and it looked the
   same every time.

   Meydan's blog was the reference point — breadcrumb, a small
   contained thumbnail, an oversized title, a clean meta row, no
   hero at all. This takes that discipline and goes further: the
   title block and the image are an asymmetric pair rather than
   stacked, the meta row carries what a reader of a 25-minute
   regulatory guide actually wants to know (how long, how many
   sections, when it was last checked), and a gold rule ties it
   to the rest of the site.
   ============================================================ */

.cz-masthead {
  position: relative;
  background: var(--cz-paper);
  padding-top: calc(var(--header-h) + clamp(26px, 3vw, 52px));
  padding-bottom: clamp(28px, 3vw, 48px);
  border-bottom: 1px solid var(--cz-line);
}

.cz-masthead__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  align-items: start;
  gap: clamp(28px, 4vw, 72px);
}

/* ---- The type block ---- */
.cz-masthead__kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  /* .16em, down from .2em. Two tracking values in this file now, tied to size
     — see .cz-relcard__meta. .2em was the loosest of seven and existed only
     here. */
  letter-spacing: .16em;
  text-transform: uppercase;
  /* Gold-on-light — full reasoning at .cz-relcard__meta above. .cz-masthead is
     --cz-paper, so this was 2.365:1 at 12px on every one of the eight routes.
     The 26px dash before it takes currentColor and clears with the word. */
  color: var(--cz-gold-on-light, #856532);
}
.cz-masthead__kicker::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  flex: none;
}

.cz-masthead__title {
  margin: 0;
  max-width: 19ch;
  /* 56.5px, the ladder's top rung. 60 was 6% off it and off nothing else. */
  font-size: clamp(31px, 2.6vw + 17px, 56.5px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.036em;
  color: var(--cz-ink);
  text-wrap: balance;
}

.cz-masthead__standfirst {
  margin: clamp(16px, 1.6vw, 24px) 0 0;
  max-width: 58ch;
  /* 23px. This is the page's deck, and it is now the ONLY deck: the prose lead
     that used to render at 21px on the same page gave up its size lift, so the
     20-against-21 pair is gone and this is a rung above body rather than a
     near-miss of another element the reader had just passed. */
  font-size: clamp(16.5px, .6vw + 15px, 23px);
  line-height: 1.58;
  color: #4a525c;
  text-wrap: pretty;
}

/* ---- The meta row ---- */
.cz-masthead__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: clamp(20px, 2vw, 30px);
  padding-top: clamp(16px, 1.6vw, 22px);
  border-top: 1px solid var(--cz-line);
  /* 14.8px — reading matter, not chrome. This row carries how long the guide
     is, how many sections it has and when it was last checked, which on a
     regulatory page is the most consulted line in the masthead; it was set
     smaller than the body copy and smaller again on a phone. */
  font-size: 14.8px;
  color: var(--cz-mid);
}
.cz-masthead__meta > * {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.cz-masthead__meta svg {
  width: 15px;
  height: 15px;
  flex: none;
  /* Gold-on-light, and this one is not about a WCAG threshold — these icons
     each sit beside their own text label, so they are decorative and 1.4.11
     does not reach them. It is about there being TWO golds in one row: the
     "Checked" pill four rules down is #856532 and these were #c7a36b, ten
     centimetres apart on the same line. One gold per ground. */
  color: var(--cz-gold-on-light, #856532);
}
.cz-masthead__meta strong {
  font-weight: 700;
  color: var(--cz-text);
}
/* The reviewed badge earns its emphasis — on a regulatory guide, when it was
   last checked is the single most useful thing in the row. */
.cz-masthead__checked {
  padding: 5px 12px;
  border: 1px solid rgba(199, 163, 107, .45);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  /* Gold-on-light — full reasoning at .cz-relcard__meta above. The pill has no
     fill of its own, so this 12px label sat on the masthead's own --cz-paper at
     2.365:1. Its tick is `color: inherit` on the line below and follows.

     The border is left at rgba(199,163,107,.45) on purpose. It is decoration
     around a static badge, not a control and not a state — nothing about
     "Checked 12 August" is carried by the ring, so 1.4.11 does not reach it,
     and darkening it to match would frame the date like a certificate, which
     the plate comment below says this design deliberately avoids. */
  color: var(--cz-gold-on-light, #856532);
}
.cz-masthead__checked svg { color: inherit; }

/* ---- The plate ----
   Contained and squarish, not a bleed. It sits beside the title rather than
   behind it, so the photograph is context and the words are the subject. */
.cz-masthead__plate {
  position: relative;
  margin: 0;
  /* Deliberately NOT align-self: stretch. Stretching made the figure fill the
     whole grid row and dragged the image to a 1:5 sliver 1,582px tall. The
     plate sizes from its own aspect ratio and nothing else. */
  align-self: start;
}
.cz-masthead__plate img {
  display: block;
  width: 100%;
  /* Explicit, because the width/height attributes act as a presentational
     hint and were overriding aspect-ratio, dragging the plate to 1,536px. */
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  background: var(--cz-paper-3);
}
/* A thin gold corner rather than a border on all four sides — enough to make
   the plate deliberate without framing it like a certificate. */
.cz-masthead__plate::after {
  content: "";
  position: absolute;
  left: -1px;
  bottom: -1px;
  width: 38%;
  height: 3px;
  background: var(--cz-gold);
}
/* `.cz-masthead__caption` — REMOVED, 1 Sep.
   Five declarations that never painted a pixel: figures.css loads after this
   file and set the same-specificity `display: none` on the element, so the
   plate's <figcaption> was styled here and hidden there. The markup is now
   gone from both emitters — template-parts/content/masthead.php and
   archive-cz_freezone.php — and the hiding rule went with it (R3.9, "No
   captions. Ever."). Nothing renders this class; do not re-add either half
   without the other. */

/* ---- Reading progress sits under the header, unchanged ---- */

@media (max-width: 1000px) {
  .cz-masthead__inner {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vw, 30px);
  }
  /* Picture first on a phone: it orients the reader before the title, which is
     the order Meydan uses and the order that reads naturally on a narrow
     screen. */
  .cz-masthead__plate { order: -1; }
  .cz-masthead__plate img { aspect-ratio: 16 / 9; }
  .cz-masthead__title { max-width: none; }
}

@media (max-width: 620px) {
  .cz-masthead { padding-top: calc(var(--header-h) + 22px); }
  /* `font-size: 12.5px` removed 1 Sep. It shrank the meta row on the one
     viewport where it is hardest to read, to buy space a `flex-wrap: wrap`
     row does not need — it wraps. The gap tightening is what actually fits it;
     that stays. */
  .cz-masthead__meta { gap: 8px 16px; }
}

/* Breadcrumbs on the white masthead. The base rule is white-on-dark, written
   for the hero that no longer exists. */
.cz-crumbs--light {
  margin-bottom: 20px;
  color: var(--cz-mid);
}
.cz-crumbs--light a { color: var(--cz-mid); }
/* Gold-on-light: this is the light-ground twin of .cz-crumbs a:hover at the
   top of the file, which is correct where it is because that hero is dark.
   Here the hover took a 13px link from --cz-mid at 5.93:1 down to 2.36:1 —
   pointing at a link made it harder to read than not pointing at it. */
.cz-crumbs--light a:hover { color: var(--cz-gold-on-light, #856532); }
/* The separator is the same defect as the hover above, one line down and
   never measured: at .3 alpha a 13px "/" on the white masthead measured
   2.04:1, so the crumb trail read as three run-on words with a grey smudge
   between them. .56 measures 4.56:1 — over the 4.5 floor, and still well
   under the links themselves at --cz-mid 5.93:1, so the separator stays
   subordinate to the things it separates. */
.cz-crumbs--light span { color: rgba(8, 10, 13, .56); }

/* ---------- References — REMOVED, 1 Sep ----------
   13 rules for `.cz-sources`, `__toggle`, `__list`, `__note` and a 44px
   touch-target media query, styling a disclosure that nothing emits.

   `template-parts/content/sources.php` is a deliberate `return;` — R11 says
   references and citations are never printed, the client asked three times,
   and the six templates that include the partial therefore render nothing.
   Verified before deleting: `grep -rn "cz-sources" --include=*.php
   --include=*.js theme/consultzone/` returns no hits at all, and the string
   appears zero times in the served HTML of /, /free-zones/,
   /free-zones/dmcc/, /business-setup-in-uae/, /mainland-company/ and
   /business-activities/.

   The matching block in reading.css went in the SAME edit. That is the point:
   the two disagreed with each other — reading.css carried a comment saying
   its `ol` selector had to out-specify `.cz-sources__list` here — and they
   disagreed because they were changed at different times. Deleting one alone
   is how that happens. If R11 is ever reversed, the styling comes back from
   git alongside the `return;` in sources.php, not from half a stylesheet. */

/* ============================================================
   SECTION MARKERS — final, and last in the cascade on purpose
   ============================================================
   The typography block sets `.cz-prose--article h2 { color: ... }`.
   That is `class element` and out-specifies `.cz-chapter__title`,
   which is a single class — so the marker title rendered in ink
   over a photograph, unreadable and half-cut. Third time this
   project has been bitten by a later rule quietly winning.

   These selectors are scoped to the same depth and printed last,
   so they win on both counts and there is nothing left to
   override them.
   ============================================================ */
.cz-prose--article .cz-chapter,
.cz-prose--article .cz-chapter--rule {
  display: block;
  min-height: 0;
  /* The marker's own clearance, declared here and only here. A second
     `.cz-prose--article .cz-chapter { margin-top / margin-bottom }` used to sit
     eighty lines below and quietly replace these, so the 44px/20px written here
     never reached the page. */
  margin: clamp(30px, 2.8vw, 46px) 0 clamp(14px, 1.4vw, 20px);
  padding: clamp(16px, 1.6vw, 24px) 0 0;
  background: none;
  border-top: 2px solid var(--cz-gold);
  overflow: visible;
  isolation: auto;
}
/* No photograph, no scrim, in any variant. */
.cz-prose--article .cz-chapter::after,
.cz-prose--article .cz-chapter__media { display: none; }

.cz-prose--article .cz-chapter__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0 clamp(14px, 1.4vw, 22px);
  min-height: 0;
  padding: 0;
}

.cz-prose--article .cz-chapter__no {
  /* 23px, down from 35.2px at 1600. This was one of the four elements the type
     audit named: .cz-chapter__title 33, .cz-pull__text 34, this at 35.2 and h2
     at 36 — four components inside 3px of each other, on one page. A two-digit
     numeral set the same size as the H2 it introduces is not a label, it is a
     collision. At 23 the marker reads as three ranks — numeral 23, title 28.9,
     section H2 36 — which is what the numbering was for. */
  font-size: clamp(18.5px, 2.2vw, 23px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.03em;
  /* Gold-on-light — full reasoning at .cz-relcard__meta near the top of this
     file. This is the site the audit actually caught: 35.2px at 1600px and 24px
     at 375px, so large text either way, owing 3:1 and reading 2.365:1 from its
     computed colour. The marker lost its photograph in the block above, and the
     gold that was correct over a scrim was never re-checked against the paper
     that replaced it. Fourth time a value has outlived the surface it was
     chosen for.

     The opacity is the worse half and it goes too. Composited, .34 over
     --cz-paper rendered #ece0cd — 1.30:1, effectively a watermark. That was
     invisible to the audit, which can only read `color`, so leaving .34 in
     place would have bought a green measurement and changed nothing a reader
     can see. The numeral is still the quiet half of the marker: 5.38:1 against
     the title's ~20:1 ink is a wide gap, and it is now a gap made of hue rather
     than of transparency, which means it is a gap that can be measured.

     Set to 1 rather than deleted, and this is the site where that matters.
     .cz-chapter--split .cz-chapter__no declares opacity .95 earlier in this
     file at the same (0,2,0). They tie on specificity, so the winner is
     whichever prints last, and that is this rule — which is why .34 reached
     the page in the first place. Delete the declaration and a split marker
     nested in the prose silently falls back to .95 instead, and this rule
     stops being the one place the prose numeral's opacity is decided. Explicit
     1 keeps the same winner and only changes the number. */
  color: var(--cz-gold-on-light, #856532);
  opacity: 1;
}
.cz-prose--article .cz-chapter__no::after { display: none; }

.cz-prose--article .cz-chapter__title,
.cz-prose--article .cz-chapter .cz-chapter__title {
  margin: 0;
  padding-top: 0;
  max-width: 30ch;
  /* 28.9px, down from 33. Same cluster as the numeral above. This element is
     an <h2> in the markup, so at 33 against the plain H2's 36 the page carried
     two H2 sizes three pixels apart and no reader could tell which was
     deliberate. One rung down is a rank; three pixels is a mistake. */
  font-size: clamp(22px, 1.4vw + 15px, 28.9px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.03em;
  /* Ink, not white — there is no photograph behind it any more. */
  color: var(--cz-ink);
  text-wrap: balance;
}
.cz-prose--article .cz-chapter__title::before { display: none; }

/* A marker is type, so it stays inside the reading measure and never bleeds. */
.cz-reading__body .cz-prose--article .cz-chapter { margin-right: 0; }

@media (max-width: 620px) {
  .cz-prose--article .cz-chapter { margin-top: 34px; }
  .cz-prose--article .cz-chapter__inner { grid-template-columns: 1fr; gap: 8px; }
  .cz-prose--article .cz-chapter__title { max-width: none; }
}

/* ---- Block spacing ----
   The client has flagged "big empty spaces between paragraphs" repeatedly, and
   the numbers agreed: 68px between a paragraph and the next heading, 92px
   before a section marker. Those values were set when a heading had to clear a
   full-width photograph. With the photographs gone they are just holes.

   Measured against how Meydan's guides read, a heading wants roughly one blank
   line of air above it, not three. Heading margins live in the typography
   block; what is left here is the blocks — paragraphs, lists, tables, markers,
   pull quotes — and the adjacency exceptions. Each is declared once.

   Measured at 1600px: P→H2 41px, P→H3 25px, P→P 19px.
   CORRECTED 1 Sep — P→H3 is 28px now, because the H3 carries a floor rather
   than a bare em (see .cz-prose--article h3). P→H2 41.4px and P→P 19.4px are
   unchanged. The numbers that moved are on the other side of the heading:
   below an H2 14.4px (was 14.8, set by the paragraph rather than by the
   heading), below an H3 8.7px (was 14.8). */
.cz-prose--article > p  { margin-top: .8em; }
.cz-prose--article > ul,
.cz-prose--article > ol { margin-top: .8em; }
.cz-prose--article > .cz-tablewrap { margin-top: 1.1em; }
/* The FAQ list is the section's content, not a break in it. It sat 48px under
   its own heading — three blank lines — because the value was inherited from
   the era of full-width photographs. */
.cz-prose--article > .cz-faqlist { margin-top: clamp(16px, 1.4vw, 22px); }
.cz-prose--article .cz-pull {
  margin-top: clamp(28px, 2.6vw, 42px);
  margin-bottom: clamp(24px, 2.2vw, 36px);
}

/* `> .cz-chapter + h2`, `> .cz-chapter + h3`, `> .cz-tablewrap + h2` and
   `> .cz-pull + h2 { margin-top: .55em }` — REMOVED, 1 Sep.
   The premise ("the element above already provided the air") is not how
   adjacent margins work: they COLLAPSE to the larger of the two, so cutting
   the heading to .55em never removed anything — it only handed the gap over to
   whatever the block above happened to declare. .cz-tablewrap declares no
   bottom margin at all, so an H2 after a table got 19.8px where an H2 after a
   paragraph got 41.4px; .cz-pull declares 35.2px, .cz-chapter 20px. One
   heading, four different clearances, none of them stated anywhere. With the
   floor on the heading itself the collapse resolves to 34-41.4px in every one
   of those four cases and the number is declared once. */

/* A figure that opens a section belongs to the heading beneath it. Left at the
   figure's own block margin the two floated apart — 51px of white between a
   photograph and the title it introduces, with the same 54px above it, so the
   picture read as unattached to anything. Air goes above the figure, where the
   previous section ends; the heading follows close.

   Kept, unlike the four above, because placement.css now declares the figure
   block margins at (0,2,0) on the same model — "space above a figure exceeds
   space below it, so the figure binds DOWN to the text it introduces"
   (placement.css:378-382) — and a bare floor here would fight it, adding ~15px
   under every figure that opens a section.
   Expressed as a floor rather than a bare .35em for the collapse reason above:
   .35em is 12.6px, so the gap was really being set by each variant's bottom
   margin, which placement.css:386-404 sets to five different values (24, 26,
   30, 40, and 16 at the small end). max() makes it 26px whichever variant the
   rotation hands over. */
.cz-prose--article > .cz-fig + h2,
.cz-prose--article > .cz-fig + h3 { margin-top: max(.35em, 26px); }

/* Space BELOW a heading is the heading's own margin-bottom and nothing else.
   Margins collapse to the larger of the two, so every block that declares its
   own margin-top was quietly setting the gap under the heading above it — which
   is why an H3 declaring .32em (7.4px) shipped 14.8px of space beneath it, and
   why an H3 followed by a table measured 19px above and 19px below. Standing
   those blocks down makes the declared value the value that ships, and it is
   the half of the fix that the floors on h2/h3 cannot do alone: raising the
   space above without lowering the space below just moves the whole heading
   down the page.

   Specificity is (0,2,1). The class inside the second :is() lifts the whole
   selector — :is() takes the specificity of its most specific argument and
   applies it to every branch — above the (0,2,0) block rules at .cz-tablewrap,
   .cz-faqlist and .cz-pull a few lines up, and above the (0,1,2) `> p + p`
   near the top of the file. Printed last in the spacing block so nothing here
   can beat it on source order either.

   .cz-fig, .cz-dev and .cz-stat are deliberately NOT named. Their block
   margins are declared in placement.css, devices.css and figures.css, and
   naming them here would out-specify three files this one does not own. Every
   element that IS named has its block margin declared in this file, so this
   rule can only ever contradict itself. The heading-after-a-figure case is
   handled on the heading's own margin-top above; the figure-after-a-heading
   case is reported to the orchestrator, not fixed here. */
.cz-prose--article > :is(h2, h3) + :is(p, ul, ol, dl, blockquote, table, .cz-tablewrap, .cz-faqlist, .cz-pull) {
  margin-top: 0;
}

/* ============================================================
   FIGURES — four compositions, rotated
   ============================================================
   Removing the imagery was the wrong correction. The brief has
   always been MANY pictures, done properly. What made the old
   ones lazy was that there was one treatment, repeated, with the
   alt text echoed underneath as a caption.

   So: four compositions that rotate, each with its own aspect
   ratio and its own relationship to the reading column, and a
   numbered caption in the house style. No two figures in an
   article are built the same way.
   ============================================================ */

.cz-fig {
  margin: 0;
  --cz-fig-ease: cubic-bezier(.16, 1, .3, 1);
}

.cz-fig__media,
.cz-fig__pair {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--cz-paper-3);
}
.cz-fig__media img,
.cz-fig__pair img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* `.cz-prose--article img` puts a hairline on every bare image in the
     reading column. A figure's frame is the wrapper's job — the inset
     treatment draws its own — so the picture inside carries none. */
  border: 0;
  transform: scale(1.02);
  transition: transform 1.4s var(--cz-fig-ease);
}
.cz-fig:hover .cz-fig__media img,
.cz-fig:hover .cz-fig__pair img { transform: scale(1.055); }

/* The 2% above is the rest state of a hover that a phone cannot enter, and it
   is not free: the picture is permanently 2% larger than its frame, so
   object-fit discards 2% off all four sides of a photograph that was already
   cropped once. Measured at 375px on /product-setup/ before this block: the
   figure box is 343px and the image inside it renders 349.9px, while both
   matchMedia('(hover: none)') and '(pointer: coarse)' report true.

   Neutralised the same way main.css:3969 already neutralises .cz-table__go,
   .cz-route, .cz-alt, .cz-quote and .cz-vertical, and the same way the
   reduced-motion block at the foot of this file neutralises this exact pair of
   rules. Both selectors are repeated at their original specificity and printed
   later, so this wins on source order and needs no !important (R11).

   Effect is a crop, not a motion: a touch device gets the full frame back. */
@media (hover: none) {
  .cz-fig__media img,
  .cz-fig__pair img { transform: none; }
  .cz-fig:hover .cz-fig__media img,
  .cz-fig:hover .cz-fig__pair img { transform: none; }
}

/* ---- Caption: numbered, labelled, never the alt text twice ---- */
.cz-fig__caption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  margin-top: 12px;
  padding-left: 13px;
  border-left: 2px solid var(--cz-gold);
}
/* Both of these are INERT and have been since figures.css:43 was written:
   `grep -rn "cz-fig__label\|cz-fig__text" --include=*.php` returns nothing, so
   no template emits the caption at all, and figures.css hides the whole group
   besides (R3.9, "No captions. Ever."). Put on the ladder and on the
   accessible gold so the file carries one set of values rather than two, and
   noted here so nobody measures them and wonders why the page disagrees. */
.cz-fig__label {
  /* 13px. The old comment said "12px is the floor for this site" — a floor is
     not a target; see the scale block above. */
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cz-gold-on-light, #856532);
  white-space: nowrap;
}
.cz-fig__text {
  font-size: 14.8px;
  line-height: 1.55;
  color: var(--cz-mid);
  text-wrap: pretty;
}

/* Asymmetric block margins on all three of the full-width treatments: the air
   goes above, separating the figure from the section that just ended, and the
   space beneath is one blank line so the picture reads as belonging to the
   heading it introduces. `margin-block` set both ends equally and left a
   ~51px hole under every figure. */

/* ---- 1. strip — cinematic, spans prose + margin column ----
   Used sparingly by the rotation, so it still reads as a moment.

   "The widest thing on the page and the only one that bleeds" — CORRECTED,
   1 Sep. Both halves were false, and this file contradicted them thirty lines
   below at .cz-fig--margin: "the strip and pair treatments are full-width
   blocks ... which is why they can bleed and this cannot". The pair carries a
   byte-identical bleed at .cz-reading__body .cz-fig--pair, and the 1400px
   block unbleeds the two together in a single rule. Measured at 1600px, both
   compute margin-right: -387.2px and both render 1211.8px wide. The tie is
   the design, not a regression.

   That one sentence cost an audit. It was read as the documented "two
   treatments measure the same" tripwire, and sent a sweep hunting an
   aspect-ratio regression that does not exist — all four media boxes compute
   aspect-ratio: auto with a direct height from figures.css, as intended. The
   invariant is THREE distinct widths and FOUR distinct geometries (08
   §1210, 10-BUGS §1906 and §2100), and the reference row that states it lists
   strip and pair at the same 1212. What must never collide is the FRAME:
   strip 1211.8x460.0, pair 1211.8x275.6, inset 824.6x300, margin 340x400 —
   four distinct, invariant holding. Do not split these two bleeds to
   manufacture a fourth width: that trades documented geometry for a rule
   nothing states. */
.cz-fig--strip {
  margin-top: clamp(34px, 3.4vw, 56px);
  margin-bottom: clamp(18px, 1.7vw, 26px);
}
/* REMOVED 31 Aug — two declarations on this element, both wrong, both here:
     aspect-ratio: 21 / 9            was inert (figures.css:43 sets `auto`) but
                                     it was the one value in the figure system
                                     contradicting "nothing wider than 16:9",
                                     and a grep for 21/9 kept finding it.
     object-position: center 42%     was NOT inert. At (0,2,1) it out-specified
                                     figures.css:30 `.cz-fig__media img` (0,1,1),
                                     so the strip — the widest frame in the
                                     system and the direct descendant of the
                                     21:9 band that produced the knee — was the
                                     one treatment excluded from the 34% crop
                                     rule written to fix it. Later load order
                                     cannot win a specificity contest.
   Deleting both lets figures.css govern all four treatments. Do not re-add a
   strip-specific object-position here; change figures.css:30 instead. */
.cz-reading__body .cz-fig--strip {
  margin-right: calc(-1 * (var(--cz-margin-col) + var(--cz-read-gap)));
}
.cz-fig--strip .cz-fig__caption { max-width: 68ch; }

/* ---- 2. margin — portrait, text wrapping beside it ----
   A float reserves space equal to its MARGIN BOX. The previous rule set a
   410px width against a -444px right margin, so the margin box computed to
   about two pixels: the float reserved nothing, and the paragraphs ran
   underneath the photograph with words disappearing behind it.

   A float cannot sit in the margin column and still have text wrap around it,
   because the wrap is computed inside the prose column. So this one stays
   inside the measure at a deliberate width, with a real gutter. The strip and
   pair treatments are full-width blocks with nothing wrapping, which is why
   they can bleed and this cannot. */
.cz-fig--margin {
  float: right;
  width: min(42%, 340px);
  margin: .35em 0 clamp(18px, 2vw, 28px) clamp(24px, 2.4vw, 38px);
  shape-outside: margin-box;
}
.cz-fig--margin .cz-fig__media { aspect-ratio: 4 / 5; }
.cz-fig--margin .cz-fig__caption { grid-template-columns: 1fr; gap: 4px; }

/* ---- 3. pair — two related images, one caption ---- */
.cz-fig--pair {
  margin-top: clamp(32px, 3.2vw, 52px);
  margin-bottom: clamp(18px, 1.7vw, 26px);
}
/* No `overflow: visible` here. It was written to stop the offset second frame
   below being clipped, and it does not do that: the offset is a `margin-top`
   on a grid item, so the row grows to contain the margin box and the frame was
   never outside the grid in the first place. What the exemption actually let
   out was the 2% rest-state scale on the images — and this is the only
   treatment whose images are direct children of the grid, with no
   `.cz-fig__media` wrapper to clip them, so it was the only one that broke its
   own edge.

   Measured on /product-setup/ before removing it, applying `overflow: hidden`
   to this element in the live DOM and re-reading every rect:

     1600px   figure 275.6px tall before AND after; both image rects identical
              to the tenth of a pixel. Nothing is clipped. With `visible` the
              first image painted from x 331.2 against a grid edge of 337.2,
              and the second to x 1555 against 1549 — 6px outside on both
              sides, the only elements on the page outside the reading
              column's single left edge (R5).
      375px   figure 330px tall before AND after, image rects identical;
              images spanned x 12.6-362.4 against a container of 16-359.

   So the base `overflow: hidden` at .cz-fig__media/.cz-fig__pair above is
   correct for this treatment and the override was pure cost. Deleted rather
   than out-specified (§23.1) — the clip stays on the element that needs it
   (§23.9). placement.css sets its own `visible` on --offsetpair and
   --triptych; those wrap each image in .cz-fig__media and are untouched. */
.cz-fig--pair .cz-fig__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 16px);
  background: none;
}
.cz-fig--pair .cz-fig__pair img {
  aspect-ratio: 4 / 3;
  height: auto;
}
/* Offset the second frame so the pair reads as composed rather than tiled. */
.cz-fig--pair .cz-fig__pair img:last-child {
  margin-top: clamp(14px, 1.6vw, 26px);
}
.cz-reading__body .cz-fig--pair {
  margin-right: calc(-1 * (var(--cz-margin-col) + var(--cz-read-gap)));
}

/* ---- 4. inset — contained, generous, inside the measure ---- */
.cz-fig--inset {
  margin-top: clamp(30px, 3vw, 48px);
  margin-bottom: clamp(16px, 1.6vw, 24px);
}
.cz-fig--inset .cz-fig__media {
  aspect-ratio: 16 / 9;
  /* A hairline and a soft lift, so a contained image still feels placed
     rather than pasted. */
  border: 1px solid var(--cz-line);
  box-shadow: 0 18px 44px rgba(5, 6, 7, .07);
}

/* ---- Responsive ----
   Below 1400px the treatments all become full-width blocks, so the only thing
   keeping them distinct is the frame each one cuts. They must not converge:
   the margin figure was given 16/9 here, which is exactly the inset's ratio,
   so two of the four treatments rendered identically from 1400px all the way
   down to 375px. It keeps its portrait character instead, squared off enough
   not to run to 470px tall on a phone. */
@media (max-width: 1400px) {
  /* No margin column to bleed into or float beside. */
  .cz-reading__body .cz-fig--strip,
  .cz-reading__body .cz-fig--pair { margin-right: 0; }
  .cz-fig--margin {
    float: none;
    width: 100%;
    margin-inline: 0;
  }
  .cz-fig--margin .cz-fig__media { aspect-ratio: 5 / 4; }
  .cz-fig--margin .cz-fig__caption { grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
}

@media (max-width: 620px) {
  .cz-fig--strip .cz-fig__media { aspect-ratio: 16 / 10; }
  .cz-fig--pair .cz-fig__pair { grid-template-columns: 1fr; }
  .cz-fig--pair .cz-fig__pair img:last-child { margin-top: 0; }
  /* Both selectors, because `.cz-fig--margin .cz-fig__caption` in the 1400px
     block above out-specifies a bare `.cz-fig__caption` and kept its 12px
     gutter while the other three captions tightened to 9px. */
  .cz-fig__caption,
  .cz-fig--margin .cz-fig__caption { gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .cz-fig__media img,
  .cz-fig__pair img { transform: none !important; transition: none; }
}