/* ============================================================
   THE ACTIVITY REGISTER AND THE ACTIVITY DOSSIER

   Two layouts that appear nowhere else on this site.

   The article (single.php) stacks: image, title over it, contents
   rail left, prose right. The dossier inverts every one of those
   decisions — the hero is a plate with the register entry set as a
   specimen card beside the title, a ledger strip carries the four
   decisive facts across the full width, and the rail docks right so
   the entry reads before the contents do.

   Tokens only. One container. No !important outside reduced motion.
   ============================================================ */

/* ============================================================
   1. DOSSIER HERO — the plate
   ============================================================ */

/* ---- Light-surface gold, wired in ----------------------------------------
   main.css flipped --cz-gold-emph to the dark gold (#856527) at :root and
   restores the bright #c7a36b on an enumerated list of dark sections. This
   stylesheet was never added to either half of that mechanism, so every gold
   label it printed on white resolved to the bright gold. Measured on
   /activity-guides/general-trading/ at 1425px, all on #ffffff, all needing
   4.5:1 as 12–12.5px text:

     .cz-stage__n          7 instances   2.36:1
     .cz-actcard__go       3 instances   2.36:1
     .cz-actnav__link small 2 instances  2.36:1
     .cz-duty::before      6 instances   2.36:1
     .cz-refs__title                     2.16:1 on --cz-paper-2

   Fixed the way main.css says to fix it: light-ground TEXT reads
   --cz-gold-emph, which inherits; the dark sections below re-declare it, so
   nothing enters a specificity contest and no !important is added (R11).
   Pure decoration — rules, dots, borders, the spine — keeps --cz-gold, which
   is not held to a text ratio. */
.cz-dossier__hero,
.cz-ledger,
.cz-spec,
.cz-registerhub__hero,
.cz-instrument,
.cz-actcard__media,
.cz-actpage__instrument {
  --cz-gold-emph: var(--cz-gold);
}

.cz-dossier__hero {
  position: relative;
  padding-top: calc(var(--header-h, 84px) + clamp(44px, 5vw, 88px));
  padding-bottom: clamp(44px, 5vw, 84px);
  background: var(--cz-ink);
  overflow: hidden;
  isolation: isolate;
}

.cz-dossier__hero-media {
  position: absolute;
  inset: -8% 0 0;
  z-index: -2;
}
.cz-dossier__hero-media img {
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: center 42%;
  will-change: transform;
}

/*
 * Three scrims, not one. Vertical for legibility of the title,
 * horizontal so the specimen card on the right has something to sit
 * against, and a hard foot so the ledger strip below reads as joined
 * to the hero rather than dropped under it.
 */
.cz-dossier__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(5,6,7,.88) 0%, rgba(5,6,7,.46) 38%, rgba(5,6,7,.92) 100%),
    linear-gradient(90deg, rgba(5,6,7,.92) 0%, rgba(5,6,7,.36) 54%, rgba(5,6,7,.80) 100%);
}

.cz-dossier__hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: end;
  gap: clamp(32px, 4vw, 76px);
}

.cz-dossier__hero-lead { min-width: 0; }

/* ---- The code, set as a register reference ---- */
.cz-dossier__code {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 18px;
  padding: 8px 14px;
  border: 1px solid rgba(199, 163, 107, .42);
  border-radius: 2px;
}
.cz-dossier__code span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cz-gold);
}
.cz-dossier__code strong {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.cz-dossier__title {
  margin: 0 0 20px;
  max-width: 15ch;
  font-size: clamp(34px, 3.4vw + 18px, 64px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.038em;
  color: #fff;
  text-wrap: balance;
}

.cz-dossier__standfirst {
  margin: 0 0 28px;
  max-width: 54ch;
  font-size: clamp(16px, .7vw + 14px, 20px);
  line-height: 1.58;
  color: rgba(255, 255, 255, .8);
  text-wrap: pretty;
}

.cz-dossier__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  max-width: 54ch;
  font-size: 13px;
  color: rgba(255, 255, 255, .52);
}
.cz-dossier__stamp {
  padding: 4px 11px;
  border: 1px solid rgba(199, 163, 107, .42);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cz-gold);
}

/* ============================================================
   2. THE SPECIMEN CARD — the register entry, over the image
   ============================================================ */

.cz-spec {
  align-self: end;
  padding: clamp(20px, 1.9vw, 28px);
  background: rgba(5, 6, 7, .58);
  border: 1px solid rgba(255, 255, 255, .14);
  border-top: 2px solid var(--cz-gold);
  backdrop-filter: blur(14px);
}

.cz-spec__label {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cz-gold);
}

.cz-spec__list { margin: 0 0 20px; }

.cz-spec__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.cz-spec__row:last-child { border-bottom: 0; }

.cz-spec__row dt {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .52);
}
.cz-spec__row dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  text-align: right;
  color: #fff;
}
.cz-spec__row.is-code dd {
  font-size: 15px;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--cz-gold);
}
.cz-spec__row.is-flag dd { color: var(--cz-gold-soft); }

.cz-spec__cta { width: 100%; justify-content: center; }

/* ============================================================
   3. THE LEDGER STRIP — four facts, full width
   ============================================================ */

.cz-ledger {
  background: var(--cz-ink-2);
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid var(--cz-line);
}
.cz-ledger__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cz-ledger__cell {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: clamp(18px, 1.7vw, 26px) clamp(16px, 1.6vw, 30px);
  border-left: 1px solid rgba(255, 255, 255, .08);
}
.cz-ledger__cell:first-child { border-left: 0; padding-left: 0; }

.cz-ledger__k {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .46);
}
.cz-ledger__v {
  font-size: clamp(14px, .4vw + 13px, 17px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.012em;
  color: #fff;
  text-wrap: balance;
}
.cz-ledger__v.is-flag { color: var(--cz-gold); }

/* ============================================================
   4. DOSSIER LAYOUT — body left, rail right
   ============================================================ */

.cz-dossier__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(32px, 4vw, 84px);
  align-items: start;
  padding-block: clamp(48px, 5vw, 88px);
}
/*
 * THE PLACEMENTS, RESTATED — and without these two lines the guide is unreadable at desktop.
 *
 * `.cz-dossier__body` also carries `.cz-reading__body`, and reading.css sets that to
 * `grid-column: 2` because the SHARED reading layout puts its rail in column 1. This grid reverses
 * that — rail on the right, per the note below — but never restated the placements. So the body
 * inherited column 2 and the rail auto-placed into column 1: measured at 1920, tracks
 * `1343px 300px` with the body 300px wide at x=1512 holding 12,026px of content, and the 542px rail
 * spread across the 1343px reading track. His words: *"And wtf is this?"*
 *
 * **A grid that changes its tracks must restate every placement it inherits** — the same defect as
 * the /insights/ feature, where a min-width block edited the tracks and left the children behind.
 * Tracks and placements are one decision, and `gridTemplateColumns` reads back perfectly correct
 * in both cases, which is why neither is visible without measuring the children.
 */
.cz-dossier__body { min-width: 0; grid-column: 1; }
.cz-dossier__rail { grid-column: 2; }

/* The rail keeps the shared sticky behaviour and gains a spine on its
   inner edge, because it now sits to the right of the reading column. */
.cz-dossier__rail {
  padding-left: clamp(20px, 2vw, 34px);
  border-left: 1px solid var(--cz-line);
}

.cz-rail__back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-top: 18px;
  border-top: 1px solid var(--cz-line);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cz-mid);
  transition: color .25s var(--cz-ease);
}
.cz-rail__back svg { width: 15px; height: 15px; }
.cz-rail__back:hover { color: var(--cz-gold); }

/* ============================================================
   5. DOSSIER SECTIONS
   ============================================================ */

.cz-dossier__h2 {
  margin: 0 0 16px;
  padding-top: 18px;
  position: relative;
  max-width: 24ch;
  font-size: clamp(24px, 1.4vw + 18px, 34px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.028em;
  color: var(--cz-text);
  text-wrap: balance;
  scroll-margin-top: calc(var(--header-h-compact, 66px) + 28px);
}
.cz-dossier__h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 2px;
  background: var(--cz-gold);
}

.cz-dossier__intro {
  margin: 0 0 30px;
  max-width: 66ch;
  font-size: clamp(15px, .4vw + 14px, 16.5px);
  line-height: 1.7;
  color: var(--cz-mid);
  text-wrap: pretty;
}

/* ---- The position ---- */
.cz-dossier__position { scroll-margin-top: calc(var(--header-h-compact, 66px) + 28px); }

.cz-dossier__verdict {
  margin: 0 0 26px;
  padding: clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 30px);
  background: var(--cz-paper-2);
  border-left: 3px solid var(--cz-gold);
  max-width: 68ch;
  font-size: clamp(16.5px, .6vw + 15px, 20px);
  font-weight: 500;
  line-height: 1.54;
  letter-spacing: -.012em;
  color: var(--cz-text);
  text-wrap: pretty;
}

.cz-dossier__reading { max-width: 72ch; }
.cz-dossier__reading p {
  margin: 0 0 1.15em;
  font-size: clamp(15.5px, .4vw + 14.6px, 17px);
  line-height: 1.76;
  color: var(--cz-mid);
  text-wrap: pretty;
}
.cz-dossier__reading p:last-child { margin-bottom: 0; }
.cz-dossier__reading strong {
  color: var(--cz-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   6. OBLIGATIONS — a ledger of duties, each with its instrument
   ============================================================ */

.cz-duties {
  margin-top: clamp(48px, 4.6vw, 76px);
  scroll-margin-top: calc(var(--header-h-compact, 66px) + 28px);
}

.cz-duties__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: czduty;
  border-top: 1px solid var(--cz-line);
}

.cz-duty {
  counter-increment: czduty;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: clamp(14px, 1.4vw, 26px);
  padding: clamp(20px, 2vw, 28px) 0;
  border-bottom: 1px solid var(--cz-line);
}
.cz-duty::before {
  content: counter(czduty, decimal-leading-zero);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--cz-gold);
  padding-top: 3px;
}

.cz-duty__title {
  margin: 0 0 9px;
  font-size: clamp(16.5px, .5vw + 15px, 19px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.018em;
  color: var(--cz-text);
}
.cz-duty__body {
  margin: 0 0 12px;
  max-width: 68ch;
  font-size: clamp(15px, .35vw + 14.2px, 16.5px);
  line-height: 1.72;
  color: var(--cz-mid);
  text-wrap: pretty;
}
.cz-duty__source {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--cz-mid);
}
.cz-duty__source a {
  color: var(--cz-text);
  text-decoration: underline;
  text-decoration-color: var(--cz-gold);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color .25s var(--cz-ease);
}
.cz-duty__source a:hover { color: var(--cz-gold); }

/* ============================================================
   7. THE PATHWAY — a numbered spine
   ============================================================ */

.cz-pathway {
  margin-top: clamp(48px, 4.6vw, 76px);
  scroll-margin-top: calc(var(--header-h-compact, 66px) + 28px);
}

.cz-pathway__spine {
  position: relative;
  margin: 0;
  padding: 0 0 0 clamp(30px, 3vw, 48px);
  list-style: none;
}
/* The spine itself — one hairline the stages hang off. */
.cz-pathway__spine::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--cz-line);
}

.cz-stage {
  position: relative;
  padding-bottom: clamp(24px, 2.4vw, 36px);
}
.cz-stage:last-child { padding-bottom: 0; }

.cz-stage__n {
  position: absolute;
  left: calc(-1 * clamp(30px, 3vw, 48px));
  top: 0;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid var(--cz-line);
  border-radius: 50%;
  background: var(--cz-paper);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--cz-gold);
}

.cz-stage__title {
  margin: 3px 0 8px;
  font-size: clamp(16.5px, .5vw + 15px, 19px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.018em;
  color: var(--cz-text);
}
.cz-stage__text p {
  margin: 0;
  max-width: 68ch;
  font-size: clamp(15px, .35vw + 14.2px, 16.5px);
  line-height: 1.72;
  color: var(--cz-mid);
  text-wrap: pretty;
}

/* ============================================================
   8. REFERENCES — two lists, deliberately separate
   ============================================================ */

.cz-refs {
  margin-top: clamp(48px, 4.6vw, 76px);
  padding: clamp(24px, 2.4vw, 36px) clamp(24px, 2.4vw, 36px) clamp(20px, 2vw, 30px);
  background: var(--cz-paper-2);
  border-top: 2px solid var(--cz-gold);
  scroll-margin-top: calc(var(--header-h-compact, 66px) + 28px);
}
.cz-refs__title {
  margin: 0 0 22px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cz-gold);
}
.cz-refs__group + .cz-refs__group { margin-top: 24px; }
.cz-refs__label {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--cz-text);
}
.cz-refs__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.cz-refs__list li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--cz-mid);
}
.cz-refs__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 8px;
  height: 1px;
  background: var(--cz-gold);
}
.cz-refs__list a {
  color: var(--cz-text);
  text-decoration: underline;
  text-decoration-color: rgba(199, 163, 107, .55);
  text-underline-offset: 3px;
  transition: color .25s var(--cz-ease);
}
.cz-refs__list a:hover { color: var(--cz-gold); }
.cz-refs__caveat {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--cz-line);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--cz-mid);
}

/* ============================================================
   9. MOVING THROUGH THE REGISTER
   ============================================================ */

.cz-actnav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(40px, 4vw, 64px);
  background: var(--cz-line);
  border: 1px solid var(--cz-line);
}
.cz-actnav__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(18px, 1.8vw, 24px);
  background: var(--cz-paper);
  transition: background .3s var(--cz-ease);
}
.cz-actnav__link:hover { background: var(--cz-paper-2); }
.cz-actnav__link small {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cz-gold);
}
.cz-actnav__link strong {
  font-size: clamp(15px, .4vw + 14px, 17px);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.016em;
  color: var(--cz-text);
}
.cz-actnav__link em {
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--cz-mid);
}
.cz-actnav__link--next { text-align: right; align-items: flex-end; }
/* A single neighbour keeps its own side rather than stretching. */
.cz-actnav__link--next:only-child { grid-column: 2; }

/* ============================================================
   10. NEIGHBOURING ACTIVITIES
   ============================================================ */

.cz-neighbours {
  background: var(--cz-paper-2);
  padding-block: var(--cz-y);
}
.cz-neighbours__head {
  max-width: 62ch;
  margin-bottom: clamp(28px, 3vw, 46px);
}
.cz-neighbours__head .cz-h2 { margin-bottom: 16px; }

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

.cz-actcard {
  display: flex;
  flex-direction: column;
  background: var(--cz-paper);
  border: 1px solid var(--cz-line);
  overflow: hidden;
  transition: border-color .4s var(--cz-ease), box-shadow .4s var(--cz-ease), transform .4s var(--cz-ease);
}
.cz-actcard:hover {
  transform: translateY(-4px);
  border-color: rgba(199, 163, 107, .5);
  box-shadow: 0 20px 48px rgba(5, 6, 7, .1);
}

/* A strip, not a picture block — the register entry is the subject. */
.cz-actcard__media {
  position: relative;
  display: block;
  height: 116px;
  overflow: hidden;
  background: var(--cz-ink);
}
.cz-actcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .52;
  transform: scale(1.02);
  transition: transform 1s var(--cz-ease-out), opacity .5s var(--cz-ease);
}
.cz-actcard:hover .cz-actcard__media img { transform: scale(1.07); opacity: .66; }
.cz-actcard__code {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 7px 13px;
  background: var(--cz-ink);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--cz-gold);
}

.cz-actcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(18px, 1.8vw, 24px);
}
.cz-actcard__title {
  font-size: clamp(16px, .5vw + 14px, 18.5px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.018em;
  color: var(--cz-text);
  text-wrap: balance;
}
.cz-actcard__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.cz-actcard__facts span {
  padding: 4px 10px;
  border: 1px solid var(--cz-line);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--cz-mid);
}
.cz-actcard__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cz-gold);
}
.cz-actcard__go svg { width: 15px; height: 15px; transition: transform .25s var(--cz-ease); }
.cz-actcard:hover .cz-actcard__go svg { transform: translateX(4px); }

.cz-neighbours__all { margin-top: clamp(24px, 2.4vw, 34px); }

/* ============================================================
   11. THE REGISTER HUB
   ============================================================ */

.cz-registerhub__hero {
  position: relative;
  padding-top: calc(var(--header-h, 84px) + clamp(44px, 5vw, 84px));
  padding-bottom: clamp(0px, 1vw, 12px);
  background: var(--cz-ink);
  overflow: hidden;
  isolation: isolate;
}
.cz-registerhub__hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.cz-registerhub__hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
.cz-registerhub__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(5,6,7,.86) 0%, rgba(5,6,7,.62) 46%, rgba(5,6,7,.96) 100%),
    linear-gradient(90deg, rgba(5,6,7,.90) 0%, rgba(5,6,7,.44) 70%, rgba(5,6,7,.66) 100%);
}
.cz-registerhub__hero-inner { position: relative; z-index: 1; }

/*
 * The hub is not a reading view, so article.css — which is where .cz-crumbs
 * normally lives — is deliberately not loaded here. Without this the trail
 * would inherit body colour and render as near-black text on the hero scrim.
 */
.cz-registerhub .cz-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .5);
}
.cz-registerhub .cz-crumbs a { transition: color .25s var(--cz-ease); }
.cz-registerhub .cz-crumbs a:hover { color: var(--cz-gold); }

.cz-registerhub__title {
  margin: 0 0 22px;
  max-width: 20ch;
  font-size: clamp(32px, 3.2vw + 18px, 60px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.038em;
  color: #fff;
  text-wrap: balance;
}
.cz-registerhub__standfirst {
  margin: 0 0 clamp(30px, 3.2vw, 48px);
  max-width: 62ch;
  font-size: clamp(15.5px, .6vw + 14px, 19px);
  line-height: 1.66;
  color: rgba(255, 255, 255, .78);
  text-wrap: pretty;
}

/* ---- Readout: what the register holds ---- */
.cz-readout {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .12);
}
.cz-readout__cell {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  padding: clamp(16px, 1.6vw, 24px);
  background: rgba(5, 6, 7, .62);
}
.cz-readout__cell dt {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.cz-readout__cell dd {
  margin: 0;
  font-size: clamp(28px, 1.9vw + 18px, 44px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--cz-gold);
}

.cz-registerhub__body {
  background: var(--cz-paper-2);
  padding-block: clamp(40px, 4vw, 72px);
}

.cz-registerhub__caveat {
  margin-top: clamp(28px, 3vw, 44px);
  max-width: 82ch;
}
.cz-registerhub__caveat-label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cz-gold);
}
.cz-registerhub__caveat p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--cz-mid);
  text-wrap: pretty;
}
.cz-registerhub__caveat p.cz-registerhub__caveat-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 14px;
}
.cz-registerhub__caveat-links a {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cz-text);
  text-decoration: underline;
  text-decoration-color: rgba(199, 163, 107, .55);
  text-underline-offset: 3px;
  transition: color .25s var(--cz-ease);
}
.cz-registerhub__caveat-links a:hover { color: var(--cz-gold); }

/* ============================================================
   12. THE INSTRUMENT — three filter axes over one table
   ============================================================ */

.cz-instrument {
  background: var(--cz-ink);
  border: 1px solid var(--cz-line-dk);
  scroll-margin-top: calc(var(--header-h-compact, 66px) + 20px);
}

.cz-instrument__controls {
  display: grid;
  gap: clamp(16px, 1.7vw, 24px);
  padding: clamp(18px, 1.9vw, 28px);
  border-bottom: 1px solid var(--cz-line-dk);
}

.cz-instrument__axis-label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--cz-gold);
}

.cz-instrument__axis--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.7vw, 30px);
}

/* The secondary axes read as secondary: outlined, never filled gold. */
.cz-chips--quiet .cz-chip {
  font-size: 12.5px;
  padding: 9px 14px;
}
.cz-chips--quiet .cz-chip.is-active {
  background: transparent;
  border-color: var(--cz-gold);
  color: var(--cz-gold);
}

.cz-chip__count {
  margin-left: 7px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: .6;
}

.cz-instrument__search { max-width: none; }

.cz-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid rgba(199, 163, 107, .45);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--cz-gold);
  vertical-align: 1px;
}

.cz-table--register tbody tr { cursor: pointer; }
.cz-table__wrap--tall { max-height: min(74svh, 820px); overflow-y: auto; }
.cz-table--register thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--cz-ink-2);
}
.cz-table__seed {
  padding: 32px 16px;
  font-size: 14px;
  color: var(--cz-faint);
}

.cz-instrument__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 1.7vw, 24px);
  border-top: 1px solid var(--cz-line-dk);
}
.cz-instrument__readout {
  margin: 0;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--cz-faint);
}
.cz-instrument__readout strong {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--cz-gold);
}

/* ============================================================
   13. THE EMBEDDED REGISTER PAGE
   ============================================================ */

.cz-actpage__instrument {
  background: var(--cz-ink-2);
  padding-block: var(--cz-y);
}
.cz-actpage__instrument-head {
  max-width: 62ch;
  margin-bottom: clamp(26px, 3vw, 44px);
}
.cz-actpage__instrument-head .cz-h2 { color: #fff; margin-bottom: 16px; }
.cz-actpage__instrument-head .cz-lead { color: var(--cz-lt); }

/* ---- Prose inside a dossier ---- */
.cz-prose--dossier {
  margin-top: clamp(40px, 4vw, 64px);
  max-width: 72ch;
}
.cz-prose--dossier h2 {
  position: relative;
  padding-top: 18px;
}
.cz-prose--dossier h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 2px;
  background: var(--cz-gold);
}

/* ============================================================
   14. RESPONSIVE
   ============================================================ */

@media (max-width: 1180px) {
  .cz-dossier__hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
  .cz-readout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .cz-dossier__hero-inner { grid-template-columns: 1fr; align-items: start; }
  .cz-dossier__title { max-width: none; }
  .cz-spec { align-self: stretch; }

  .cz-dossier__layout { grid-template-columns: 1fr; gap: 30px; }
  .cz-dossier__body { grid-column: 1; }
  .cz-dossier__rail {
    /* Back to column 1 with the track. A one-column grid holding an item placed at
       `grid-column: 2` creates an IMPLICIT second column, so releasing the track without
       releasing the placement puts the rail back beside the prose at half width. */
    grid-column: 1;
    padding-left: 0;
    border-left: 0;
    order: -1;
  }
  .cz-rail__back { display: none; }

  .cz-ledger__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cz-ledger__cell:nth-child(odd) { border-left: 0; padding-left: 0; }
  .cz-ledger__cell:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .08); }

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

@media (max-width: 760px) {
  .cz-readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cz-actnav { grid-template-columns: 1fr; }
  .cz-actnav__link--next { text-align: left; align-items: flex-start; }
  .cz-actnav__link--next:only-child { grid-column: 1; }

  .cz-duty { grid-template-columns: 1fr; gap: 8px; }
  .cz-duty::before { padding-top: 0; }

  .cz-refs { padding-inline: clamp(18px, 5vw, 24px); }
}

@media (max-width: 560px) {
  .cz-readout { grid-template-columns: 1fr; }
  .cz-ledger__inner { grid-template-columns: 1fr; }
  .cz-ledger__cell { border-left: 0; padding-left: 0; }
  .cz-ledger__cell + .cz-ledger__cell { border-top: 1px solid rgba(255, 255, 255, .08); }

  .cz-spec__row { grid-template-columns: 1fr; gap: 4px; }
  .cz-spec__row dd { text-align: left; }

  .cz-dossier__reading,
  .cz-duty__body,
  .cz-stage__text p { max-width: none; }

  .cz-neighbours__grid { grid-template-columns: 1fr; }
  /*
   * THE REGISTER KEEPS ITS SCROLL CAP ON A PHONE — 5 October 2026, his report.
   *
   * This line read `max-height: none`, which looks harmless and was the single
   * largest thing on the site. Measured on test.consultzone.ae at 375x812:
   * the page was 18,875px — 23.2 phone screens — of which this one table was
   * 13,971px, or 74%. Without it the page is 4,904px. He reported it as
   * "business-activities page is broken. How am I able to scroll past footer?"
   * and he was reading the symptom exactly right: after seventeen screens of
   * table the footer arrives somewhere that feels like the wrong place, and the
   * browser's overscroll at the end of it paints the dark ground below.
   *
   * NOTHING WAS EVER BELOW THE FOOTER. Measured: footer bottom 18,876 against a
   * document height of 18,875, and 0 elements painting past it. The length was
   * the whole defect, which is worth recording because my first reading of his
   * report went looking for a stray element and `querySelector('footer')`
   * returned a nested `<footer>` inside the register — a wrong answer that
   * agreed with the complaint. Select the page footer as `body > footer`.
   *
   * WHY THE CAP WAS OFF: below 900px every row becomes a stacked card at 69px
   * instead of a 44px table row, so the same 200 rows run 3x longer and the
   * sticky `<thead>` is `display: none`. Removing the cap avoided a nested
   * touch-scroller; it cost 14,000px of page to do it.
   *
   * THE EXPRESSION IS THE DESKTOP ONE, DELIBERATELY. `min(74svh, 820px)` is
   * already in this file at the base rule, so the cap is not a new tuned
   * constant to drift from its own comment (R82.6) — at 812px it computes to
   * 601px, about nine cards, with the search and category chips in view above
   * them, which is how a filterable 200-row register is meant to be read.
   * `overscroll-behavior: contain` is the part that makes a nested scroller
   * acceptable on touch: reaching the end of the list no longer chains into
   * scrolling the page.
   */
  .cz-table__wrap--tall {
    max-height: min(74svh, 820px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---- Touch: nothing depends on hover ---- */
@media (hover: none) {
  .cz-actcard:hover { transform: none; box-shadow: none; }
  .cz-actcard:hover .cz-actcard__media img { transform: scale(1.02); opacity: .52; }
  .cz-actcard__go svg { transform: none; }
  .cz-actnav__link:hover { background: var(--cz-paper); }
}

@media (prefers-reduced-motion: reduce) {
  .cz-dossier__hero-media img { transform: none !important; }
  .cz-actcard,
  .cz-actcard__media img,
  .cz-actcard__go svg { transition: none !important; }
}

/* Business activities hero — restored 30 September 2026. */
.cz-activityhero {
  position: relative;
  min-height: min(820px, 88vh);
  overflow: hidden;
  color: #fff;
  background: var(--cz-ink);
}

.cz-activityhero__media,
.cz-activityhero__veil {
  position: absolute;
  inset: 0;
}

.cz-activityhero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.88) contrast(1.04);
}

.cz-activityhero__veil {
  background:
    linear-gradient(90deg, rgba(5, 7, 10, .96) 0%, rgba(5, 7, 10, .77) 46%, rgba(5, 7, 10, .18) 76%, rgba(5, 7, 10, .36) 100%),
    linear-gradient(0deg, rgba(5, 7, 10, .9) 0%, transparent 48%);
}

.cz-activityhero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, .48fr);
  align-content: center;
  gap: clamp(56px, 8vw, 128px);
  min-height: min(820px, 88vh);
  padding-block: clamp(126px, 15vh, 180px) 72px;
}

.cz-activityhero__crumbs {
  position: absolute;
  top: 42px;
  left: 0;
  color: rgba(255, 255, 255, .66);
}

.cz-activityhero__copy {
  max-width: 790px;
}

.cz-activityhero__kicker {
  margin: 0 0 14px;
  color: var(--cz-gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.cz-activityhero h1 {
  max-width: 770px;
  margin: 0;
  color: #fff;
  font-size: clamp(44px, 5.7vw, 88px);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .98;
  text-wrap: balance;
}

.cz-activityhero__lead {
  max-width: 690px;
  margin: 28px 0 34px;
  color: rgba(255, 255, 255, .74);
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.65;
}

.cz-activityhero__facts {
  align-self: end;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.cz-activityhero__facts div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.cz-activityhero__facts dt {
  color: rgba(255, 255, 255, .55);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.cz-activityhero__facts dd {
  margin: 0;
  color: #fff;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: -.025em;
}

@media (max-width: 900px) {
  .cz-activityhero {
    min-height: auto;
  }

  .cz-activityhero__veil {
    background:
      linear-gradient(90deg, rgba(5, 7, 10, .95), rgba(5, 7, 10, .52)),
      linear-gradient(0deg, rgba(5, 7, 10, .94), transparent 48%);
  }

  .cz-activityhero__inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-block: 122px 64px;
  }

  .cz-activityhero__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cz-activityhero__facts div:nth-child(odd) {
    padding-right: 20px;
    border-right: 1px solid rgba(255, 255, 255, .16);
  }

  .cz-activityhero__facts div:nth-child(even) {
    padding-left: 20px;
  }
}

@media (max-width: 680px) {
  .cz-activityhero__inner {
    padding-top: 105px;
  }

  .cz-activityhero__crumbs {
    top: 28px;
  }

  .cz-activityhero h1 {
    font-size: clamp(39px, 11.8vw, 58px);
  }

  .cz-activityhero__lead {
    font-size: 16px;
  }

  .cz-activityhero__facts div {
    display: block;
    min-height: 86px;
  }

  .cz-activityhero__facts dd {
    margin-top: 7px;
  }
}

/* =========================================================================
   THE REGISTER, AS A TABLE — 30 September 2026

   His words: "table also is very badly structured looking right now in our
   site", then "And wtf is this table?".

   Measured at 1440 before this was written: a <ul> with no thead, every
   cell's ::before computing to `content: none` — because the rule that
   prints the data-label sits in `@media (max-width: 900px)`, so the column
   names existed only on a phone — and three of the five cells at the same
   14.5px in the same rgb(20,24,28). 276 rows of that.

   WHY THESE RULES LIVE HERE AND NOT IN main.css. `.cz-register__row` shares
   its whole block with `.cz-zonelist__row`, which is the free zone
   comparison listing on a page he has said he is satisfied with. Editing
   that block would move both. activity.css loads only on activity views and
   declares cz-main as a dependency, so it comes after and wins at equal
   specificity; every rule here is additionally scoped to the --table
   variant, so nothing can reach the zone listing even by accident.

   The old grid rules still target these elements, so each one is answered
   explicitly rather than left to chance: a <tr> inheriting `display: grid`
   is not a table row.
   ========================================================================= */
.cz-register--table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.cz-register--table .cz-register__head { display: table-row; }
.cz-register--table .cz-register__row {
  display: table-row;
  border-top: 1px solid rgba(255, 255, 255, .10);
  cursor: pointer;
  transition: background-color .25s var(--cz-ease, ease);
}
.cz-register--table .cz-register__row:hover { background: rgba(255, 255, 255, .045); }
.cz-register--table .cz-register__row:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: -2px; }

/* THE HEADINGS — the whole point of this change, and they stay in view.
   276 rows in a 666px scroll window means a reader is almost always looking
   at rows with the head off screen, so the head sticks to the top of the
   scroller. It is opaque, because a translucent head over moving rows is
   unreadable. */
.cz-register--table .cz-register__th {
  position: sticky;
  top: 0;
  z-index: 2;
  /* The section ground, so rows scroll UNDER the sticky head rather than through it.
     It was var(--cz-paper) — white — which is why the head was the one legible band. */
  background: var(--cz-ink);
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .26);
  padding: 0 18px 10px 0;
  text-align: left;
  vertical-align: bottom;
  /* 12px is the floor, not 11.5 — the heading row was the only thing in the table under it. */
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
  white-space: nowrap;
}
/* FOUR columns, not six — his sheet has Code, Activity Name and Category and nothing else.
   The activity name gets the room the two removed columns were wasting on dashes. */
.cz-register--table .cz-register__th--code   { width: 11%; }
.cz-register--table .cz-register__th--name   { width: 55%; }
.cz-register--table .cz-register__th--sector { width: 26%; }
.cz-register--table .cz-register__th--open   { width: 8%; padding-right: 0; }

/* THE CELLS — hierarchy, which is the other half of "badly structured".
   Before, five columns at one size and two colours. The activity name is
   what a reader is scanning for, so it is the only thing at full ink and
   weight; the code is a reference and sits back; the three classifying
   columns are readable but subordinate. Nothing here is a box or a tint
   (R51) — the separation is the hairline and the alignment. */
.cz-register--table .cz-register__cell {
  display: table-cell;
  padding: 12px 18px 12px 0;
  vertical-align: top;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .72);
}
.cz-register--table .cz-register__code {
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .56);
  white-space: nowrap;
}
.cz-register--table .cz-register__name {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-align: left;
}
.cz-register--table .cz-register__sector,
.cz-register--table .cz-register__lic { color: rgba(255, 255, 255, .72); }
.cz-register--table .cz-register__auth { font-size: 13.5px; color: rgba(255, 255, 255, .58); }
.cz-register--table .cz-register__go { padding-right: 0; text-align: right; }
.cz-register--table .cz-register__open {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-height: 44px;
  /* 44px WIDE as well as tall. The visible mark is a single arrow and the label
     beside it is screen-reader-only, so the box measured 12.1x44 at 1440 — the one
     clickable thing in the Guide column of a 200-row table, at a quarter of the
     target size WCAG 2.5.8 asks for. `justify-content: flex-end` keeps the arrow
     where it was, so the hit area grows leftwards and nothing moves on screen.
     The narrow-width rule further down already carried a 24px floor; this is the
     desktop half of the same thought. */
  min-width: 44px;
  color: var(--cz-blue);
  font-weight: 600;
  font-size: 14px;
}
.cz-register--table .cz-register__row--seed { cursor: default; }
.cz-register--table .cz-register__row--seed .cz-register__cell { color: rgba(255, 255, 255, .72); }

/* A row the filter hides. `hidden` and `.is-hidden` must both beat
   `display: table-row` — a bare attribute rule cannot at equal specificity,
   which is the same trap the list version documented. */
.cz-register--table .cz-register__row[hidden],
.cz-register--table .cz-register__row.is-hidden { display: none; }

/* PHONE — the table stacks into a card per row and the headings are carried
   by each cell's own data-label, which is what main.css's max-width: 900px
   block already prints. The head is display:none rather than aria-hidden:
   the labels replace it, and a clipped-but-laid-out thead is what invented
   two phantom overflows on this project already (B289, then B297) — its
   cells measure at their natural width because clip-path clips painting,
   not layout. display:none takes the subtree out of layout entirely. */
@media (max-width: 900px) {
  .cz-register--table { table-layout: auto; }
  .cz-register--table thead { display: none; }
  .cz-register--table .cz-register__row { display: block; padding: 15px 4px; }
  .cz-register--table .cz-register__cell { display: block; padding: 0; }
  .cz-register--table .cz-register__name { font-size: 15.5px; padding-bottom: 2px; }
  .cz-register--table .cz-register__go { text-align: left; }
  .cz-register--table .cz-register__open { justify-content: flex-start; }
}

/* =========================================================================
   THE REGISTER, IN MEYDAN'S SHAPE — 30 September 2026

   His brief: "by design, structuring, should be of meydan in our color
   scheme" and "Look at how well structured, well designed and well build
   the table is in meydan".

   MEASURED OFF THEIR LIVE PAGE AND HIS FULL-WIDTH SCREENSHOT. My first
   attempt got five things wrong and they are corrected here:

     their active tab      a FILLED PILL, not an underline
     their column search   a MAGNIFIER only; the field appears when used
     their columns         separated by VERTICAL HAIRLINES
     their rows            ALTERNATING stripes, not just a top border
     their row height      roughly 50px, not tight

   Structure is theirs. Palette is ours: the instrument ground is --cz-ink
   (#050607), so every value below is white at an alpha measured for at
   least 4.5:1 against it, and gold carries the active state because gold is
   emphasis in this theme and blue is action.

   THE SEARCH FIELD EXPANDS ON :focus-within — pure CSS, no script. A
   click-to-reveal built in JavaScript is a control that disappears when one
   line throws; this one is always in the markup, always reachable by
   keyboard, and merely narrow until used.
   ========================================================================= */

/* ---------- the category tab strip ---------- */
.cz-instrument__axis--tabs { grid-column: 1 / -1; }
.cz-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  /* Sideways scroll like theirs, without a scrollbar stealing 15px on a phone. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px;
}
.cz-tabs::-webkit-scrollbar { height: 0; }

.cz-tabs .cz-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  /* The filled pill is the shape he pointed at. */
  border-radius: 999px;
  background: none;
  color: rgba(255, 255, 255, .64);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s var(--cz-ease, ease), color .2s var(--cz-ease, ease);
}
.cz-tabs .cz-chip:hover { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .9); }
.cz-tabs .cz-chip:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
.cz-tabs .cz-chip.is-active {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}
.cz-tabs .cz-chip__count {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .42);
}
.cz-tabs .cz-chip.is-active .cz-chip__count { color: var(--cz-gold); }

/* ---------- the header: label, then a magnifier that opens a field ---------- */
.cz-register--table .cz-register__th {
  padding: 14px 16px;
  /* Vertical dividers, as theirs has. */
  border-right: 1px solid rgba(255, 255, 255, .1);
  white-space: nowrap;
}
.cz-register--table .cz-register__th:last-child { border-right: 0; }
.cz-register__thlabel { display: inline-block; vertical-align: middle; }

.cz-colsearch {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 10px;
  /* Collapsed to the icon until it is used. */
  max-width: 26px;
  border-radius: 3px;
  background: transparent;
  overflow: hidden;
  transition: max-width .24s var(--cz-ease, ease), background-color .24s var(--cz-ease, ease);
}
.cz-colsearch:focus-within,
.cz-colsearch:hover {
  max-width: 200px;
  background: rgba(255, 255, 255, .07);
}
.cz-colsearch svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 0 6px;
  color: rgba(255, 255, 255, .58);
}
.cz-colsearch__input {
  min-width: 0;
  width: 100%;
  height: 28px;
  padding-right: 8px;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}
.cz-colsearch__input::placeholder { color: rgba(255, 255, 255, .4); font-weight: 500; }
.cz-colsearch__input:focus { outline: 0; }
.cz-colsearch__input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); cursor: pointer; }
.cz-register--table .cz-register__th--open .cz-colsearch { display: none; }

/* ---------- the rows: stripes, dividers, their height ---------- */
.cz-register--table .cz-register__cell {
  /* ~50px of row, as theirs. 16px of side padding on every cell, so the
     dividers sit clear of the type. */
  padding: 15px 16px;
  border-right: 1px solid rgba(255, 255, 255, .06);
  vertical-align: middle;
}
.cz-register--table .cz-register__cell:last-child { border-right: 0; }
.cz-register--table .cz-register__row { border-top: 0; }
/* Alternating stripes. `:nth-child` counts ROWS in the tbody, and a hidden
   row still counts — which is right: the stripe belongs to the row, and a
   filter that repaints the whole table would otherwise flicker. */
.cz-register--table tbody .cz-register__row:nth-child(even) { background: rgba(255, 255, 255, .025); }
.cz-register--table .cz-register__row:hover { background: rgba(255, 255, 255, .07); }

/* PHONE — the table stacks into a card per row, so a per-column filter has
   no column to sit in and the dividers would draw across a stack. The single
   search above the table does the work there. */
@media (max-width: 900px) {
  .cz-colsearch { display: none; }
  .cz-register--table .cz-register__cell,
  .cz-register--table .cz-register__th { border-right: 0; }
  .cz-register--table .cz-register__cell { padding: 0; }
  .cz-register--table .cz-register__row { padding: 15px 4px; }
  .cz-register--table tbody .cz-register__row:nth-child(even) { background: none; }
  .cz-register--table .cz-register__row + .cz-register__row { border-top: 1px solid rgba(255, 255, 255, .1); }
  .cz-tabs .cz-chip { font-size: 13px; padding: 0 14px; }
}

/* -------------------------------------------------------------------------
   THE TAB STRIP COULD NOT SCROLL, AND IT PUSHED THE PAGE 595px SIDEWAYS

   Measured at a 375px viewport: `.cz-instrument__axis--tabs` was **935px
   wide inside a 326px parent**, and `html.scrollWidth` read 970 against a
   375 viewport. The search label did the same.

   `.cz-instrument__controls` is `display: grid` with no
   `grid-template-columns`, so it has one implicit column — and a grid
   item's AUTOMATIC MINIMUM SIZE is its content, so the column grew to the
   tab strip's intrinsic 935px. `.cz-tabs` already had `overflow-x: auto`
   and it was useless: a scroll container with more room than its content
   has nothing to scroll.

   The canonical pair fixes it. `minmax(0, 1fr)` lets the TRACK shrink, and
   `min-width: 0` lets the ITEM shrink — neither alone is enough, because
   the track and the item each carry their own automatic minimum. Only then
   does the strip become narrower than its tabs and the overflow it was
   given turn into a swipe.
   ------------------------------------------------------------------------- */
.cz-instrument__controls { grid-template-columns: minmax(0, 1fr); }
.cz-instrument__axis,
.cz-instrument__axis--tabs,
.cz-instrument__search { min-width: 0; }

/* =========================================================================
   THE REGISTER PANEL AND ITS PHONE LAYOUT — 1 October 2026

   His two instructions: *"add blue gradient to whole table like we have in
   footer"* and *"have a look meydan's table even fits in phone version too
   ... they fit everything in mobile plus they got breating space outside
   too"*.

   AND HIS FAIR COMPLAINT THAT PRODUCED THIS BLOCK: *"why do I have to
   research, tell you stuff and help you?"* — I had built two phone layouts
   off his screenshots instead of opening their page. Every number below is
   read from Meydan's own stylesheet and computed styles.

   WHAT THEIR MARKUP SETTLES: they do NOT fit the table on a phone. They
   ship two components and hide one.

       .bal-desktop-view        padding: 20px · border-radius: 20px
         .bal-table-wrapper     overflow: auto · border-radius: 10px
           table.table_component
             tr.table_row       background: rgb(243,243,243) on alternates
               td.table_cell    padding: 12px 16px · font-size: 12px

       .bal-mobile              display: none                     (base)
       @media (max-width: 991px)
         .bal-mobile            display: block; padding-top: 20px
         .bal-item              display: flex; gap: 12px;
                                justify-content: space-between;
                                align-items: stretch; padding: 8px;
                                border-bottom: 1px solid rgba(0,0,0,.1)
         .bal-item-name         flex: 1 1 0%
         .bal-group-number      font-size: 14px  (12px at 479px)

   Measured widths in their own phone view: item 354 · group 31 · name 198
   · code 51 · save 23. So their three zones are exactly what I guessed,
   but the BREAKPOINT IS 991px and I had used 900, the row is a flex with
   `space-between` rather than a grid, and the inset is 20px rather than the
   4px I had invented.

   ONE DELIBERATE DIFFERENCE. Their name neither clamps nor truncates in
   CSS (`-webkit-line-clamp: none`, `overflow: visible`) — they shorten the
   STRING before it reaches the page, which is why theirs reads
   "Manufacture of wearing apparel, except fur…". We cannot: `activities.js`
   filters on `row.textContent`, so a name shortened in PHP would make CZ 72
   unsearchable on the words that were cut. The full string stays in the DOM
   and a two-line clamp does the shortening visually — same result on screen,
   and the filter still finds "polishing" inside a 307-character name.
   ========================================================================= */

/* ---------- the gradient ----------
   From `.cz-approvals` (main.css ~3592), which took it from `.cz-consult`,
   so the three read as one treatment. B327 is why the radial is retuned
   rather than pasted: the same declaration is not the same picture at a
   different size. Their band is wide and shallow, so a 38rem circle at
   82%/34% reads as a corner glow; this panel is as wide but far taller, and
   that circle would sit behind the rows. Same hue and alpha, out to 58rem
   and up to 12%, so the light falls on the frame and fades through the data. */
.cz-instrument {
  background:
    radial-gradient(circle at 82% 12%, rgba(23, 105, 255, .18), transparent 58rem),
    linear-gradient(135deg, #0a0e15 0%, #080a0e 58%, #0b111b 100%);
  /* Their panel's own shape. */
  border-radius: 20px;
  overflow: hidden;
}
/* The sticky header stays OPAQUE: rows scroll under it, and a translucent
   head over moving rows is unreadable. It takes the linear gradient's first
   stop, so the join cannot be seen. */
.cz-register--table .cz-register__th { background: #0a0e15; }
/* Their cell padding, which is roomier than mine was. */
.cz-register--table .cz-register__cell { padding: 12px 16px; }
.cz-register--table .cz-register__th   { padding: 14px 16px; }

/* ---------- the phone layout, at THEIR breakpoint ---------- */
@media (max-width: 991px) {
  /* The breathing space he asked for: their 20px inset, not the screen edge. */
  .cz-instrument { margin-inline: 12px; }
  .cz-table__wrap { padding: 4px 8px 8px; }

  .cz-register--table,
  .cz-register--table tbody { display: block; }
  /* The header goes because the layout is no longer columnar — a heading row
     cannot describe three zones on one line. */
  .cz-register--table thead { display: none; }

  .cz-register--table .cz-register__row {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: stretch;
    padding: 12px 8px;
    border-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
  .cz-register--table .cz-register__cell {
    display: block;
    padding: 0;
    border-right: 0;
    /* Never break a word. A column too narrow for its longest word is a
       column problem, and `anywhere` turned "Manufacturing" into
       "Manufacturin / g" on his screen. */
    overflow-wrap: normal;
  }

  /* Their zone order and their type sizes, with 12px as our floor. */
  .cz-register--table .cz-register__code {
    order: 1;
    flex: 0 0 auto;
    font-size: 12px;
    white-space: nowrap;
    color: rgba(255, 255, 255, .56);
  }
  .cz-register--table .cz-register__name {
    order: 2;
    /* Their `.bal-item-name { flex: 1 1 0% }` — the name takes what is left. */
    flex: 1 1 0%;
    min-width: 0;
    font-size: 13.5px;
    line-height: 1.35;
  }
  .cz-register--table .cz-register__sector {
    order: 3;
    flex: 0 0 auto;
    font-size: 12px;
    white-space: nowrap;
    text-align: right;
    color: rgba(255, 255, 255, .56);
  }
  .cz-register--table .cz-register__go {
    order: 4;
    flex: 0 0 auto;
    padding: 0;
    text-align: right;
  }
  .cz-register--table .cz-register__open {
    /* 44px, not the 0 I first wrote — that made all 200 guide links 23px
       targets. The rows are 47px tall anyway, so the floor costs no height.

       AND 44 WIDE, not the 24 that stood here until 1 October: measured at 375 the
       box was 24x44 on all 200 rows, because the visible mark is one arrow and the
       label beside it is screen-reader-only. 24 is WCAG 2.5.8's floor, not a
       comfortable phone target, and the cell has the room. */
    min-height: 44px;
    min-width: 44px;
    font-size: 15px;
  }

  /* The clamp sits on the inner span: `-webkit-box` on the cell would
     destroy its flex placement. */
  .cz-register__nametext {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* No stripes with three zones on a line — the hairline is the separator. */
  .cz-register--table tbody .cz-register__row:nth-child(even) { background: none; }
  /* The stacked layout's label prefixes would now read "Code:" beside a
     bare code with no column heading to duplicate. */
  .cz-register--table .cz-register__cell[data-label]::before,
  .cz-register--table .cz-register__name[data-label]::before { content: none; }

  .cz-colsearch { display: none; }
  .cz-tabs .cz-chip { font-size: 13px; padding: 0 14px; }
}
/* Their own second step: the meta type drops again on a small phone. */
@media (max-width: 479px) {
  .cz-register--table .cz-register__code,
  .cz-register--table .cz-register__sector { font-size: 12px; }
  .cz-register--table .cz-register__name { font-size: 13px; }
  .cz-instrument { margin-inline: 8px; }
}

/* ============================================================================
   THE ACTIVITY GUIDE — 1 October 2026
   ============================================================================

   HIS BRIEF, verbatim: "Just have a look at how well organized, designed,
   structured, arranged the content, side forms are in meydan dude." And the
   qualification he gave with it: "font will be ours", and our colours.

   SO THE MEASUREMENTS ARE THEIRS AND THE PAINT IS OURS. Read from Meydan's own
   page on 1 October 2026 by walking document.styleSheets, not from a
   screenshot of it:

     .mfz-article-body          flex · column-gap 2rem · max-width 1276 · 20px
     .mfz-article-main-content  width 67%
     .mfz-article-sidebar       width 33%
     .mfz-article-form          sticky · top 80px · radius 20 · pad 1.2/2rem
     .mfz-article-toc-layout    card · radius 20 · pad 16/24 · 40px below
     .mfz-article-summary       card · radius 20 · pad 1.5rem · 40px below
     .mfz-article-the-content   card · radius 20 · pad 1.5rem
     stacks at 991px            the breakpoint the register table already uses

   WHAT IS DELIBERATELY NOT COPIED:

     - their 4/3.5 featured ratio. All 400 of his activity frames are exactly
       1600x900 (measured, 400 of 400 at r1.7778) and his complaint was "I
       gave you 16:9 images, why did you stretch images?". 16/9 here, so
       object-fit: cover has nothing to cut. The treatment is copied; the
       ratio is his.
     - their white card on grey with a 25px drop shadow. A hairline and a much
       softer shadow, because a dossier is not a brochure (17-ART-DIRECTION).
     - their typeface. Overpass, inherited.

   R87.9 — NO BOXES INSIDE BOXES. .cz-form carries its own 1px border, its own
   --cz-ink-2 ground and up to 40px of padding on all 228 addresses. The side
   card supplies all three, so the form inside it is stripped of them: ONE box,
   which is what Meydan's sidebar is and what /contact/ was not until he caught
   it.

   THE TWO min-width: 0 DECLARATIONS ARE LOAD-BEARING. A flex item's automatic
   minimum size is its content, so a long word or a wide table in the main
   column can push the track and starve the other one. The page he photographed
   on 1 October printed the article one word per line inside a ~100px track —
   that is this failure, and width: 67% alone does not prevent it.
   ========================================================================== */

.cz-guide { background: var(--cz-paper-2); }

/* ---- the hero ------------------------------------------------------------
   REBUILT 1 OCTOBER 2026, SECOND PASS. His report on the first one: "This
   doesn't looks like the hero style we have in /business-activities/ page",
   then "on top we need a proper hero section instead of that, like we have in
   /business-activities/ page. A full hero."

   HE WAS RIGHT, AND THE FIRST PASS MISSED IT BY EVERY MEASURE THAT MATTERS.
   It was a flat gradient band about 300px deep with his cover inset at 420px
   on the right: no full-bleed photograph, no veil, no facts panel, and a 44px
   headline against the archive banner's 88px. That is a page header. He asked
   for the hero he already has.

   SO THE GUIDE NOW WEARS .cz-activityhero ITSELF — the archive banner's own
   class — and this block adds only the three things a guide needs and an
   archive does not. Copying those 170 declarations under a new name was the
   obvious move and it is the wrong one: two copies of one treatment drift the
   first time either page is touched, and "like /business-activities/" then
   becomes a claim somebody has to keep re-verifying. Sharing the class makes
   it true by construction, and it is the same lesson as the two hand-written
   copies of one signed-cover test that let a pin map and its gate disagree.

   NOTHING IN archive-cz_activity.php OR IN ITS CSS IS TOUCHED. He forbade
   edits to that hero by name ("dont touch hero, gpt is fixing"). Adding a
   second element that wears the same class is not an edit to it — and if GPT
   tunes that hero again, the guide follows, which is what he asked for.

   THE MEASURE — AND I GOT THIS WRONG ONCE, THE SAME DAY. The first version of
   this block narrowed the hero's inner wrapper to the guide's own 1276px so
   the headline would share a left edge with the contents card below it. It
   does share one; it also sits 222px further into the page than the archive's,
   and his verdict was immediate: "the text is too big and in centre. Should be
   on left like activities page."

   MEASURED AT 1900px, WHICH IS WHAT HE IS LOOKING AT. Archive hero copy starts
   at x=82; the guide's started at x=304. He read a 222px indent as "centre",
   and he is right that it reads that way — a 1276px block centred in a 1900px
   window has 312px of nothing to its left.

   So the hero takes --container, exactly as the archive does. THE ARTICLE DOES
   NOT FOLLOW IT, and that is his ruling, not an oversight.

   I moved the article's left edge out to meet the hero's so the two would
   share one edge (R5). He rejected it inside ten minutes, with the before and
   after side by side: "why did you mess up the allignment of content and form?
   Look at the right and left space. And the second screenshot shows how good
   it was before." He is right about what it looked like — a 1276px block
   pinned to the left of a 1720px container puts every pixel of the 444px of
   slack on one side, so the article reads as shoved left with a hole beside
   the form. Centred, that slack is split and the page is balanced.

   So: THE HERO IS FULL-WIDTH AND LEFT-ALIGNED, THE ARTICLE IS CENTRED. Two
   different measures on one page, deliberately, because he has now ruled on
   each of them separately while looking at it. R5's one-left-edge is a default
   of ours; a surface he has called good outranks it (R82.4). Do not "fix" this
   alignment again — it has been changed twice and reverted once. */

/* Meydan's 1276px measure, centred. NOT applied to --container on the article,
   because the homepage form section sits inside it and he has ruled twice that
   the foot of every page reads the same. */
.cz-guide__body { width: min(1276px, calc(100% - 40px)); margin-inline: auto; }

/* THE HEADLINE — his second complaint in the same sentence: "the text is too
   big". The archive draws its h1 at 88px measured, and it earns it: that page
   has one headline, written to be a statement, and nothing else competes with
   it. A guide headline is a how-to sentence, it is different on all 200 pages,
   and at 88px a three-line title was 259px of type before the reader reached a
   word of the standfirst.

   52px at the top end, on a curve that still gives a phone 31px. This
   deliberately out-ranks the archive's own 680px rule, which is later in the
   cascade than it looks — same specificity, this block sits further down the
   file — because a guide title needs a lower ceiling at EVERY width, not just
   at desktop. */
.cz-guidehero h1 { font-size: clamp(31px, 2.2vw + 19px, 52px); }

/* The byline. The archive banner has no equivalent, so it is the one piece of
   copy this block styles rather than inherits. Read time and review date are
   not here — they are numbers, and numbers belong in the facts panel. */
.cz-guidehero__by {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin: 26px 0 0;
  font-size: 13px; color: rgba(255, 255, 255, .58);
}
.cz-guidehero__by strong { color: #fff; font-weight: 600; }
.cz-guidehero__by time::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 3px; height: 3px; border-radius: 99px;
  background: rgba(255, 255, 255, .3);
  margin-right: 16px;
}

/* The facts panel carries four short rows rather than the archive's numerals,
   so the 28px ceiling would set "Agriculture" larger than the lead. Capped at
   21px — the rows still read as data, and a long category name stays on one
   line down to the 900px stack. */
.cz-guidehero .cz-activityhero__facts dd { font-size: clamp(16px, 1.25vw, 21px); }

/* R7 puts a 12px floor under every piece of type, and the shared label rule is
   11px. Scoped to .cz-guidehero deliberately: the ARCHIVE hero is GPT's work and
   he approved that surface by name, so it keeps the value it has. These 200 pages
   are new, so they meet the floor. */
.cz-guidehero .cz-activityhero__facts dt { font-size: 12px; }

/* ---- the two columns ---------------------------------------------------- */

.cz-guide__body {
  display: flex;
  column-gap: 2rem;
  padding-block: clamp(26px, 3vw, 44px) clamp(30px, 3.4vw, 52px);
}

.cz-guide__main { width: 67%; min-width: 0; }

/* THE SIDE COLUMN MUST BE AS TALL AS THE ARTICLE OR THE FORM CANNOT TRAVEL —
   1 October 2026, his report: "This side form should scroll along with
   content, like stick there."

   It was already `position: sticky` and it already had a `top`. The defect was
   one declaration on the PARENT: `align-items: flex-start` on this flex row
   sized the side column to its own contents, so the sticky card filled its
   containing block completely and had nowhere to stick TO. A sticky element
   never leaves its container; give the container no slack and sticky is inert.
   Nothing about the card looks wrong, nothing logs, and `position: sticky`
   reads back correctly in the computed styles — which is why this looked like
   a sticky that does not work rather than a parent that is too short.

   `align-items` is now left at its initial `stretch`, so the column takes the
   flex line's height, which is the article's. The main column stretching too
   is harmless: it is the tallest item, so stretch is a no-op on it.

   `align-self: stretch` is stated here as well as removed there, deliberately.
   The removal is what makes it work today; the declaration is what survives
   somebody re-adding `flex-start` to the row for an unrelated reason. */
.cz-guide__side {
  width: 33%;
  min-width: 0;
  align-self: stretch;
}

/* ---- the cards ---------------------------------------------------------- */

.cz-guide__card {
  background: #fff;
  border: 1px solid var(--cz-line);
  border-radius: 20px;
  padding: clamp(18px, 2.1vw, 30px);
  margin-bottom: 28px;
  box-shadow: 0 10px 34px rgba(8, 10, 13, .045);
}

.cz-guide__cardh {
  margin: 0 0 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cz-gold-ink);
}

.cz-guide__h2 {
  margin: 0 0 16px;
  font-size: clamp(20px, 1.7vw, 26px); line-height: 1.22; letter-spacing: -.01em;
  font-weight: 800; color: var(--cz-text);
}

/* Contents. The number is emitted by the template, so no CSS counter can
   number a heading that is not in the list — the fault that showed 15 against
   14 on the legal pages. */
.cz-guide__toclist { margin: 0; padding: 0; list-style: none; }
.cz-guide__toclist li + li { border-top: 1px solid var(--cz-line); }
.cz-guide__toclist a {
  display: grid; grid-template-columns: 30px minmax(0, 1fr);
  align-items: center; gap: 12px;
  min-height: 44px; padding: 8px 0;
  transition: color .22s var(--cz-ease);
}
.cz-guide__tocn { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--cz-gold-ink); }
.cz-guide__toct { font-size: 14.5px; line-height: 1.45; color: var(--cz-text); }
.cz-guide__toclist a:hover .cz-guide__toct { color: var(--cz-blue); }

/* Topic summary — the one part of their page worth copying wholesale: a reader
   who wants the answer and not the article gets it before the prose starts. */
.cz-guide__summaryin > * { margin: 0; }
.cz-guide__summaryin h3 {
  margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--cz-line);
  font-size: clamp(15.5px, 1.15vw, 17.5px); line-height: 1.3; font-weight: 700;
  color: var(--cz-text);
}
.cz-guide__summaryin h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cz-guide__summaryin p {
  margin-top: 7px;
  font-size: 14.5px; line-height: 1.66; color: var(--cz-mid);
}
.cz-guide__summaryin strong { color: var(--cz-text); font-weight: 700; }

/* The prose card. article.css already governs the type inside it. */
.cz-guide__content { padding: clamp(20px, 2.4vw, 34px); }
.cz-prose--guide > :first-child { margin-top: 0; }
.cz-prose--guide > :last-child { margin-bottom: 0; }

/* ---- the side form -----------------------------------------------------
   One box. .cz-form's own border, ground and padding are removed here because
   this card supplies all three — R87.9, and the /contact/ lesson: measure what
   a component already draws before giving it a surface. */

.cz-guide__form {
  position: sticky;
  top: calc(var(--header-h) + 14px);
  /* A sticky card taller than the space above the fold pins its top and puts
     its own submit button permanently off screen — the reader can never reach
     it, at any scroll position, and the page gives no sign of it. This card
     measures around 620px, so it clears a 1080px display and does not clear a
     1366x768 laptop. The cap makes the last field reachable at every viewport
     height, and the inner scrollbar appears only where it is the only way to
     see the button. Scroll chaining is left at its default so that once the
     card is exhausted the page carries on — which is what a reader who has
     just read the form expects to happen. */
  max-height: calc(100vh - var(--header-h) - 28px);
  overflow-y: auto;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .13);
  padding: clamp(18px, 1.7vw, 26px);
  color: #fff;
  background:
    radial-gradient(circle at 86% 8%, rgba(23, 105, 255, .30), transparent 30rem),
    linear-gradient(135deg, #0b1220 0%, #080a0e 60%, #0c1524 100%);
  box-shadow: 0 22px 56px rgba(8, 10, 13, .16);
}

.cz-guide__form-kicker {
  margin: 0 0 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cz-gold);
}
.cz-guide__form-h {
  margin: 0;
  font-size: clamp(18px, 1.35vw, 21px); line-height: 1.22; font-weight: 800; color: #fff;
}
.cz-guide__form-lead {
  margin: 10px 0 18px;
  font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .68);
}

.cz-guide__form .cz-form { border: 0; background: none; padding: 0; }
.cz-guide__form .cz-form__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.cz-guide__form .cz-field--full { grid-column: auto; }
.cz-guide__form .cz-form__foot { margin-top: 18px; padding-top: 18px; }
.cz-guide__form .cz-btn { width: 100%; justify-content: center; }

.cz-guide__form-foot {
  margin: 16px 0 0; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px;
}
.cz-guide__form-foot a { color: rgba(255, 255, 255, .72); transition: color .25s var(--cz-ease); }
.cz-guide__form-foot a:hover { color: var(--cz-gold); }

/* ---- previous / next ---------------------------------------------------- */

.cz-guidenav {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px;
}
.cz-guidenav__link {
  display: flex; flex-direction: column; gap: 5px;
  min-height: 44px; padding: 18px 20px;
  background: #fff; border: 1px solid var(--cz-line); border-radius: 16px;
  transition: border-color .25s var(--cz-ease), transform .25s var(--cz-ease);
}
.cz-guidenav__link:hover { border-color: rgba(23, 105, 255, .4); transform: translateY(-2px); }
.cz-guidenav__link small {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cz-gold-ink);
}
.cz-guidenav__link strong { font-size: 14.5px; line-height: 1.4; font-weight: 700; color: var(--cz-text); }
.cz-guidenav__link--next { text-align: right; align-items: flex-end; }

/* ---- related ------------------------------------------------------------ */

.cz-guiderel { padding-block: clamp(34px, 3.6vw, 58px); border-top: 1px solid var(--cz-line); }
.cz-guiderel__head { max-width: 62ch; margin-bottom: clamp(20px, 2.2vw, 32px); }
/* A CARD KEEPS ITS SIZE WHATEVER THE COUNT.
   `minmax(260px, 1fr)` with auto-fit collapses the empty tracks and hands the whole row to
   whatever is left, so a category with only one neighbour — Agriculture has two activities in
   total — rendered a single card at 1375 x 892 against the usual 445 x 390: a photograph nearly
   a thousand pixels tall, measured at 1440 on 1 October. 445px is exactly what three cards and
   two 20px gaps compute to in this container, so the three-card case is unchanged to the pixel
   and the one- and two-card cases now match it. */
.cz-guiderel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 445px));
  justify-content: start;
  gap: 20px;
}
.cz-guidecard {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--cz-line); border-radius: 18px; overflow: hidden;
  transition: border-color .25s var(--cz-ease), transform .25s var(--cz-ease);
}
.cz-guidecard:hover { border-color: rgba(23, 105, 255, .4); transform: translateY(-3px); }
.cz-guidecard__media { display: block; overflow: hidden; }
.cz-guidecard__media img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; }
.cz-guidecard__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.cz-guidecard__code {
  font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--cz-gold-ink);
}
.cz-guidecard__title { font-size: 15.5px; line-height: 1.38; font-weight: 700; color: var(--cz-text); }
.cz-guidecard__go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  font-size: 13px; font-weight: 700; color: var(--cz-blue);
}
.cz-guiderel__all { margin-top: clamp(20px, 2.2vw, 30px); }

/* ---- 991px: one column, which is Meydan's own breakpoint ---------------- */

@media (max-width: 991px) {
  .cz-guide__body { flex-direction: column; }
  .cz-guide__main,
  .cz-guide__side { width: 100%; }

  /* The hero's own phone treatment is the archive's, inherited: it collapses
     to one column at 900px and the photograph stays the ground rather than
     becoming a tile that has to be re-ordered. The three rules that used to
     sit here — the 420px picture column and its order swap — went with the
     masthead they belonged to.

     Static, not sticky: a sticky card in a single-column flow pins itself to
     the top of the viewport for the whole page. The max-height cap and the
     inner scroller go with it, or a phone gets a 600px box with its own
     scrollbar inside a page that already scrolls. */
  .cz-guide__form {
    position: static;
    top: auto;
    max-height: none;
    overflow-y: visible;
  }
}

@media (max-width: 620px) {
  .cz-guide__body { width: min(1276px, calc(100% - 32px)); }
  .cz-guide__card { border-radius: 16px; padding: 18px 16px; }
  .cz-guide__content { padding: 18px 16px; }
  .cz-guidehero__by { gap: 6px 14px; font-size: 12px; }
  .cz-guidehero__by time::before { margin-right: 14px; }
  .cz-guidenav__link--next { text-align: left; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .cz-guidenav__link,
  .cz-guidecard,
  .cz-guide__toclist a { transition: none; }
  .cz-guidenav__link:hover,
  .cz-guidecard:hover { transform: none; }
}

/* His in-content photograph. 16/9 — his own ratio, nothing cropped. Full width of
   the prose card, so it reads as a break in the document rather than a float.

   NO BORDER, and that is R87.9 rather than taste: this figure sits inside
   .cz-guide__card.cz-guide__content, which already draws a hairline on all four
   sides, and a bordered box inside a bordered box is the thing he reported on
   /contact/ — "borders inside borders, boxes in boxes". The rounded corner is the
   photograph's own edge and carries the shape on its own. Measured: 11 bordered
   boxes on a guide, 0 of them nested. */
.cz-guide__fig {
  margin: clamp(22px, 2.4vw, 34px) 0;
  border-radius: 14px;
  overflow: hidden;
}
.cz-guide__fig img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; }


/* ==========================================================================================
   THE SPOKEN SUMMARY — 18 OCTOBER 2026
   ==========================================================================================
   His instruction: *"on top of each activity guide page is a audio which user can play … a 30
   seconds or less summary … No big audios."*

   THE SERVER PRINTS A NATIVE `<audio controls>` AND THAT IS WHAT A READER GETS WITH NO
   JAVASCRIPT. Every rule that hides it and reveals the house control is behind `html.cz-audio`,
   which `assets/js/audio.js` adds only after every card has been wired. R82.3, and the same
   gate pattern as `html.cz-reveal` (B287) and `html.cz-fold` (§7aj).
   ========================================================================================== */

.cz-guide__audio {
  /* The card's own padding and border come from .cz-guide__card. Nothing is restated here. */
}

.cz-audio__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}

/* The duration, in the label's own metrics so the two read as one line. */
.cz-audio__len {
  margin: 0 0 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cz-mid);
  font-variant-numeric: tabular-nums;
}

.cz-audio__lead {
  margin: 0 0 16px;
  font-size: 14.5px; line-height: 1.6; color: var(--cz-mid);
}

/* ---- the native bar, which is the whole player until the script runs ---------------------- */

.cz-audio__el { width: 100%; display: block; }

/* ---- and the house control, which replaces it -------------------------------------------- */

/* (0,2,0), and after the [hidden] attribute in source order, so it wins on both counts. */
html.cz-audio .cz-guide__audio .cz-audio__el { display: none; }
html.cz-audio .cz-guide__audio .cz-audio__ui { display: flex; }

/* A file that would not load puts the native bar back (audio.js adds this), so the reader is
   never left with a control that cannot do anything. A degrade, not a deletion (R82.2). */
html.cz-audio .cz-guide__audio.is-fallback .cz-audio__el { display: block; }
html.cz-audio .cz-guide__audio.is-fallback .cz-audio__ui { display: none; }

.cz-audio__ui {
  display: none;
  align-items: center;
  gap: 14px;
}

.cz-audio__play {
  flex: 0 0 auto;
  width: 48px; height: 48px;          /* R7's floor is 44px; 48 is the step the site uses */
  border: 0; border-radius: 50%;
  background: var(--cz-blue);
  cursor: pointer;
  display: grid; place-items: center;
  transition: transform .18s var(--cz-ease), filter .18s var(--cz-ease);
}

.cz-audio__play:hover { transform: translateY(-1px); filter: brightness(1.06); }
.cz-audio__play:active { transform: translateY(0); }

.cz-audio__play:focus-visible {
  outline: 2px solid var(--cz-gold);
  outline-offset: 3px;
}

/* The glyph is drawn in CSS rather than fetched: one element, two states, no icon file and no
   second request for 13 pixels of triangle. */
.cz-audio__ico {
  display: block;
  width: 0; height: 0;
  margin-left: 3px;                   /* an optical centre, because a triangle is not a circle */
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;
  transition: none;
}

.cz-guide__audio.is-playing .cz-audio__ico {
  width: 13px; height: 15px;
  margin-left: 0;
  border-width: 0;
  border-left: 4px solid #fff;
  border-right: 4px solid #fff;
  background: transparent;
  box-sizing: border-box;
}

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

.cz-audio__track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--cz-line);
  cursor: pointer;
}

/* R7's 44px FLOOR, ON A BAR THAT HAS TO STAY 6px TO READ AS A PROGRESS BAR.
   `audio.js` gives this element `role="slider"`, `tabindex="0"` and a click handler, so it is a
   control and WCAG 2.5.8's inline-text exemption does not reach it — the exemption this project
   leans on for breadcrumbs and prose links (§7s §4). A 6px-tall slider is the same defect as the
   12px-wide Guide-column link measured on 1 October, and it was mine, written tonight.

   The hit area is a stretched pseudo-element — the recipe the collapsible section heads already
   use (§7aj) — and 19 + 6 + 19 = 44. It is why `overflow: hidden` came off the rule above: a
   descendant extending past the box would have been CLIPPED by it, so the declaration that looks
   like belt-and-braces was the thing that made the obvious fix inert. `.cz-audio__fill` carries
   its own `border-radius: 3px` and can never exceed 100% of the track, so nothing was relying on
   that clip.

   It reaches no other control: `inset: -19px 0` confines it to the track's own width, and the
   play button is a flex sibling 14px to its left. Up and down it covers the lead's bottom margin
   and the time row, neither of which is interactive. */
.cz-audio__track::after {
  content: '';
  position: absolute;
  inset: -19px 0;
}

.cz-audio__track:focus-visible {
  outline: 2px solid var(--cz-gold);
  outline-offset: 3px;
}

.cz-audio__fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0;
  border-radius: 3px;
  background: var(--cz-gold);
}

.cz-audio__time {
  margin: 8px 0 0;
  font-size: 12px; color: var(--cz-mid);
  font-variant-numeric: tabular-nums;   /* so the row does not jiggle as the seconds change */
  display: flex; gap: 6px;
}

.cz-audio__sep { opacity: .55; }

/* A reader who has asked for less motion still gets every function; only the easing goes. */
@media (prefers-reduced-motion: reduce) {
  .cz-audio__play { transition: none; }
  .cz-audio__play:hover { transform: none; }
}

/* On a phone the card is narrower than the control's comfortable width, so the time moves under
   the track rather than the control stacking. Measured against the 343px card at 375px. */
@media (max-width: 600px) {
  .cz-audio__ui { gap: 12px; }
  .cz-audio__lead { font-size: 14px; }
}