/* ZAYNA — the design system for the marketing site.
   ---------------------------------------------------------------------------
   WHY THIS FILE EXISTS. Before it, deploy/index.html carried 394 inline style
   attributes and zero design tokens: 49 distinct font sizes, 20 colours (eight
   of them near-identical greys), six corner radii. Not a taste problem — the
   absence of a single source of truth. Meanwhile Deal Review had tokens, a real
   stylesheet and focus states. The site had two design languages, and the
   marketing half was the one without a system.

   So this is not a new system. It is dr.css's system, lifted out and shared,
   with the numbers closed into a set.

   HOW IT IS BEING ADOPTED. Section by section, not in one pass. Inline styles
   beat classes on specificity, so a section is converted only when its inline
   attributes are removed in the same edit. Anything not yet converted keeps its
   inline styles and ignores everything below — which is what makes this safe to
   land before the work is finished.

   RULES
   1. No colour, size or spacing outside the tokens below.
   2. Bindings ({{ item.dim }}) stay inline. The runtime needs them there;
      everything static around them moves here.
   3. One radius. If something needs another, it is the wrong shape.
   ------------------------------------------------------------------------ */

:root {
  /* Ink and ground ------------------------------------------------------- */
  --ink:          #FFFFFF;
  --navy:         #0A1628;   /* the page */
  --navy-raised:  #0F2235;   /* a surface lifted off it */
  --copper:       #C27045;   /* the accent: fills, borders, large type */
  --copper-deep:  #A85D3A;   /* the pressed state, and copper on a light ground */

  /* Small copper text on navy needs its own value, and this is not a new
     colour -- it was already in the site's palette, used without a name.
     MEASURED: #C27045 on pure navy is 4.92 against a 4.5 requirement. That is
     0.42 of headroom, so the accent fails AA the moment any photograph shows
     through behind it. The hero eyebrow measured 3.20 on a phone. #D98A5F is
     6.69 on the same ground and survives a scrim that is doing real work.
     Use --copper for anything 24px and over; use this below that. */
  --copper-text:  #D98A5F;

  /* And the same problem mirrored on the light ground. #C27045 on bone is
     3.30 -- the eyebrows on the BUILD/GROW panels have been failing AA in
     production this whole time. --copper-deep is 4.38, still short. This is
     5.05 and is the small-copper-on-bone value.
        --copper       fills, borders, anything 24px and over
        --copper-text  small copper on navy
        --copper-bone  small copper on bone                                */
  --copper-bone:  #9C5433;

  /* Text on the bone surface. Both were already in use without names. */
  --ink-bone:     #0A1628;
  --muted-bone:   #4A5563;
  --editorial-bone: #6A5346;   /* the Newsreader lead, warm against the serif */

  /* Its counterpart on navy, also already in the markup without a name. */
  --editorial-navy: #D8B9A2;
  --bone:         #F5F2EE;   /* the one light surface */

  /* Three greys, replacing eight ----------------------------------------- */
  --muted:        #A8B8C8;   /* body copy on navy */
  /* MEASURED: the site's own #66788C is 4.00 on navy at 13px, against 4.5.
     Fine print was the one thing on the page you could not read, which is the
     wrong way round. #7A8CA3 is 5.27 and reads as the same grey. */
  --dim:          #7A8CA3;   /* captions, fine print */
  --line:         rgba(255, 255, 255, 0.10);

  /* Type ----------------------------------------------------------------- */
  --font:         'Jost', 'Century Gothic', 'Futura', 'Trebuchet MS', Arial, sans-serif;
  --font-editorial: 'Newsreader', Georgia, 'Times New Roman', serif;

  /* Seven steps. Every size on the site comes from this list.
     --display is architectural and appears two or three times in total. */
  --display:      clamp(44px, 8vw, 132px);
  --h1:           clamp(34px, 5vw, 68px);
  --h2:           clamp(26px, 3.2vw, 42px);
  --h3:           clamp(19px, 1.8vw, 24px);
  --lead:         clamp(18px, 1.6vw, 23px);
  --body:         17px;
  --eyebrow:      12px;

  /* Space: one scale, six steps ------------------------------------------ */
  --s1: 8px;  --s2: 16px;  --s3: 32px;
  --s4: 64px; --s5: 120px; --s6: 200px;

  /* Everything else ------------------------------------------------------ */
  --radius:       10px;      /* the only one */
  --measure:      66ch;      /* several passages currently run to 84ch */
  --work:         1440px;
  --gutter:       5vw;
}

/* --- Things that were missing entirely ----------------------------------- */

/* There were ZERO focus styles in index.html. Keyboard navigation across the
   whole marketing site was invisible. This is global on purpose: it should
   apply to sections that have not been converted yet. */
:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
  border-radius: 2px;
}

/* prefers-reduced-motion was honoured only in dr.css, for one spinner, while
   the marketing site ran seven route-level fades. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Type primitives ----------------------------------------------------- */
.zv-display { font: 300 var(--display)/0.92 var(--font); letter-spacing: -0.038em; color: var(--ink); }
.zv-h1      { font: 300 var(--h1)/1.02      var(--font); letter-spacing: -0.03em;  color: var(--ink); }
.zv-h2      { font: 300 var(--h2)/1.08      var(--font); letter-spacing: -0.02em;  color: var(--ink); }
.zv-h3      { font: 400 var(--h3)/1.3       var(--font); color: var(--ink); }
.zv-lead    { font: 300 var(--lead)/1.62    var(--font-editorial); color: var(--muted); max-width: var(--measure); }
.zv-body    { font: 300 var(--body)/1.75    var(--font); color: var(--muted); max-width: var(--measure); }
.zv-eyebrow { font: 500 var(--eyebrow)/1    var(--font); letter-spacing: 0.2em;
              text-transform: uppercase; color: var(--copper-text); }

/* --- The header ---------------------------------------------------------- */
.zv-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 22, 40, 0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.zv-header-in {
  max-width: var(--work); margin: 0 auto;
  padding: var(--s2) var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
}
.zv-mark { display: flex; flex-direction: column; align-items: center; gap: 5px;
           flex: 0 0 auto; padding: 2px 0; text-decoration: none; }
.zv-mark-name { font: 400 26px/1 var(--font); letter-spacing: 0.1em; color: var(--ink); padding-left: 0.1em; }
.zv-mark-sub  { font: 300 9px/1  var(--font); letter-spacing: 0.12em; color: var(--copper); padding-left: 0.12em; }

.zv-nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); flex-wrap: wrap; }

/* The two dynamic properties stay inline, because the runtime writes them:
   opacity carries the active state and the border colour carries the underline.
   Everything static lives here. */
.zv-nav-link {
  font: 400 13px/1 var(--font);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: opacity 150ms ease, border-color 150ms ease;
}
.zv-nav-link:hover { opacity: 1 !important; }

.zv-nav-cta {
  font: 400 13px/1 var(--font);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  border: 1px solid rgba(194, 112, 69, 0.55);
  padding: 10px 20px;
  border-radius: var(--radius);
  transition: border-color 150ms ease, background-color 150ms ease;
}
.zv-nav-cta:hover { border-color: var(--copper); background: rgba(194, 112, 69, 0.10); }

/* Tap targets: fifteen fall short of 44px on a phone. Start with the ones
   converted here; the rest arrive with their sections. */
@media (max-width: 767px) {
  .zv-nav-link { padding: 12px 0; }
  .zv-nav-cta  { padding: 13px 20px; }
}

/* --- The hero ------------------------------------------------------------
   WHAT THIS REPLACES. A 50/50 split with the proposition centred inside a
   600px column at clamp(27px, 3.15vw, 43px) -- 32px on a laptop, 27px on a
   phone. The single most consequential sentence ZAYNA owns, set smaller than a
   magazine standfirst, and set entirely in copper.

   THREE CHANGES.

   1. Scale. --display tops out at 132px. The brief asks for statements that
      become architectural; nothing on the site was above 43px.
   2. Colour. The headline goes white and copper returns to being the accent.
      An entire sentence in the accent colour is not emphasis, it is monotony
      at volume -- and it costs the eyebrow its job.
   3. The supporting sentence, which the hero did not have at all. The brief
      supplies it; the page never carried it.

   The photograph is full bleed with the type over it, which is the structure
   the approved comp used. The image currently in the slot is a placeholder:
   §6 rules out skyline photography and the file is called hero-office.jpg.
   Swapping it is one line once the aerial crossing is licensed. */

.zv-hero {
  position: relative;
  min-height: clamp(560px, 82vh, 860px);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--navy);
}
.zv-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 58% 50%;
  filter: saturate(0.82) contrast(1.02);
}
/* Navy from the left so the type has ground, rather than a scrim over the
   whole frame which flattens the photograph everywhere including where
   nothing sits. */
.zv-hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,22,40,0.97) 0%, rgba(10,22,40,0.93) 38%,
                           rgba(10,22,40,0.60) 56%, rgba(10,22,40,0.24) 72%,
                           rgba(10,22,40,0.40) 100%),
    linear-gradient(180deg, rgba(10,22,40,0.45) 0%, rgba(10,22,40,0) 24%,
                            rgba(10,22,40,0) 68%, rgba(10,22,40,0.55) 100%);
}
.zv-hero-type {
  position: relative;
  width: 100%; max-width: var(--work);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
/* inline-block, not block: the eyebrow is ~190px of text and a full-width box
   means any bright pixel a metre to its right counts as its background. It
   also makes the contrast check measure what a reader actually sees. */
.zv-hero-eyebrow { display: inline-block; margin-bottom: var(--s3); }
.zv-hero-h1      { margin: 0; max-width: 13ch; }
.zv-hero-lead    { margin: var(--s3) 0 0; max-width: 52ch; }
.zv-hero-acts    { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); }

/* --- Actions ------------------------------------------------------------- */
/* NAVY ON COPPER, not white on copper.
   White on #C27045 measures 3.69 against a 4.5 requirement -- it has been
   failing on the most prominent control on the site, and the tool that should
   have said so was reading the photograph behind the button rather than the
   button. Navy on the same copper measures 4.92, which is what the copper
   block further down the homepage has been doing correctly all along. The
   copper keeps its full value; only the letterforms change. */
.zv-btn {
  font: 500 13px/1 var(--font);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
  background: var(--copper);
  padding: 17px 32px;
  border: 1px solid var(--copper);
  border-radius: var(--radius);
  transition: background-color 150ms ease, border-color 150ms ease;
}
.zv-btn:hover { background: var(--copper-deep); border-color: var(--copper-deep); }
/* The same button as an element that submits a form. A <button> arrives with
   a user-agent font, a grey background and a default border; these three
   declarations are what make the two render identically. */
button.zv-btn { cursor: pointer; -webkit-appearance: none; appearance: none; }
/* The ghost has no copper behind it, so it takes the light colour back. */
.zv-btn-ghost { background: transparent; border-color: rgba(194,112,69,0.6); color: var(--ink); }
.zv-btn-ghost:hover { background: rgba(194,112,69,0.14); border-color: var(--copper); }

/* --- The hero on a phone -------------------------------------------------
   Art-directed rather than stacked. The proposition is proportionally LARGER
   against the viewport than on desktop, because on a phone the first screen is
   the only screen -- and the scrim turns 90 degrees, because a left-to-right
   fade means nothing in a portrait frame. */
@media (max-width: 767px) {
  .zv-hero { min-height: 88vh; align-items: flex-end; padding-bottom: 14vh; }
  .zv-hero-img { object-position: 62% 50%; }
  /* Measured, not guessed. Copper on PURE navy is 4.92 against a 4.5
     requirement -- almost no headroom -- so the eyebrow needs near-solid
     ground, not a tasteful wash.

     RETUNED for the aerial crossing. The old stops opened at 0.28 until
     halfway down, which was safe over a dark corridor and is not safe over a
     photograph with white bars in it: the eyebrow sits at about 36% of the
     hero and landed on one, measuring 1.82. The ramp now closes above the
     type block rather than through it. */
  .zv-hero-scrim {
    background: linear-gradient(180deg, rgba(10,22,40,0.55) 0%, rgba(10,22,40,0.40) 16%,
                                        rgba(10,22,40,0.94) 31%, rgba(10,22,40,0.97) 46%,
                                        var(--navy) 70%);
  }
  .zv-hero-h1   { font-size: clamp(40px, 11.5vw, 62px); max-width: 11ch; }
  .zv-hero-lead { font-size: 16px; margin-top: var(--s2); }
  .zv-hero-acts { flex-direction: column; align-items: stretch; gap: 12px; margin-top: var(--s3); }
  .zv-btn       { text-align: center; padding: 17px 24px; }
}


/* --- The bone surface ----------------------------------------------------
   The one light section on the homepage, and the contrast beat right after a
   dark hero. BUILD and GROW stay as tracked capitals: at one word each they
   are labels rather than sentences, which is the one place uppercase earns
   its keep. What changes is that they now come off the scale instead of
   carrying their own size, and the eyebrows stop failing AA. */

.zv-bone { background: var(--bone); color: var(--ink-bone); }
.zv-bone-in {
  max-width: var(--work); margin: 0 auto;
  padding: clamp(72px, 9vw, 130px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(40px, 5vw, 90px);
}
.zv-panel { display: flex; flex-direction: column; gap: 20px; }
.zv-panel-eyebrow {
  font: 500 var(--eyebrow)/1 var(--font);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--copper-bone);
}
/* A single word in capitals, tracked. Deliberate, and the one register where
   uppercase is doing a job rather than shouting a sentence. */
.zv-panel-label {
  font: 400 var(--h2)/1 var(--font);
  letter-spacing: 0.06em; margin: 0; color: var(--ink-bone);
}
.zv-panel-lead {
  font: 400 var(--lead)/1.35 var(--font-editorial);
  color: var(--editorial-bone); margin: 0;
}
.zv-panel-body {
  font: 300 var(--body)/1.7 var(--font);
  color: var(--muted-bone); margin: 0; max-width: 46ch;
}
.zv-panel-more {
  font: 500 14px/1 var(--font);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-bone); text-decoration: none;
  border-bottom: 1px solid var(--copper);
  padding-bottom: 5px; align-self: flex-start; margin-top: var(--s1);
  transition: color 150ms ease, border-color 150ms ease;
}
.zv-panel-more:hover { color: var(--copper-deep); border-color: var(--copper-deep); }
@media (max-width: 767px) { .zv-panel-more { padding-bottom: 12px; } }

/* --- City Life & Commerce ------------------------------------------------ */
.zv-band     { max-width: var(--work); margin: 0 auto; padding: clamp(72px, 9vw, 120px) var(--gutter); }
.zv-two      { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: clamp(40px, 5vw, 90px); }
.zv-col      { display: flex; flex-direction: column; gap: 20px; }
.zv-col-h    { font: 300 var(--h2)/1.06 var(--font); letter-spacing: -0.02em; margin: 0; max-width: 20ch; color: var(--ink); }
.zv-col-lead { font: 300 var(--lead)/1.32 var(--font-editorial); color: var(--editorial-navy); margin: 0; max-width: 18ch; }
.zv-col-body { font: 300 var(--body)/1.7 var(--font); color: var(--muted); margin: 0; max-width: 46ch; }

/* --- The Venture Engine --------------------------------------------------
   WHAT THIS REPLACES. Seven boxes, each #0F2235 with a hairline ring and a
   180px minimum height, laid out 3-3-3-3 then 4-4-4 on a twelve-column grid.
   §10 names that outcome exactly: "Do not turn this into seven little SaaS
   feature cards." It also closed with a single tracked line inside a rounded
   bordered box -- a card built to hold one sentence.

   WHAT IT IS NOW. A numbered sequence. The number in copper, the stage in
   tracked capitals, the outcome in muted text, a hairline between each. The
   engine IS an order of operations, so the form that explains it is a list
   that reads downward, not a grid that reads as seven equivalent tiles.
   And the closing line is at display scale, unboxed, because that is the
   sentence the section exists to arrive at. */

.zv-engine { position: relative; }
.zv-engine-h    { font: 300 var(--h1)/1.03 var(--font); letter-spacing: -0.03em; margin: 20px 0 0; max-width: 24ch; color: var(--ink); }
.zv-engine-body { font: 300 var(--body)/1.7 var(--font); color: var(--muted); margin: 26px 0 0; max-width: 64ch; }
.zv-engine-more {
  display: inline-block; font: 500 14px/1 var(--font);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid var(--copper);
  padding-bottom: 5px; margin-top: 28px;
  transition: color 150ms ease, border-color 150ms ease;
}
.zv-engine-more:hover { color: var(--copper-text); border-color: var(--copper-text); }

.zv-seq { margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.zv-step {
  display: grid;
  grid-template-columns: 4.5rem minmax(9rem, 14rem) 1fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: baseline;
  padding: clamp(20px, 2.2vw, 30px) 0;
  border-bottom: 1px solid var(--line);
}
.zv-step-num   { font: 400 13px/1 var(--font); letter-spacing: 0.18em; color: var(--copper-text); }
.zv-step-stage { font: 500 var(--h3)/1.2 var(--font); letter-spacing: 0.1em;
                 text-transform: uppercase; color: var(--ink); margin: 0; }
.zv-step-yield { font: 300 var(--body)/1.7 var(--font); color: var(--muted); margin: 0; max-width: 54ch; }

/* The line the whole section is walking toward. No box around it. */
.zv-engine-close {
  font: 300 clamp(30px, 4.6vw, 74px)/1.0 var(--font);
  letter-spacing: -0.03em; color: var(--ink);
  margin: clamp(48px, 6vw, 88px) 0 0; max-width: 16ch;
}
.zv-engine-close em { font-style: normal; color: var(--copper-text); }
.zv-engine-note { font: 300 13px/1.7 var(--font); color: var(--dim); margin: var(--s3) 0 0; max-width: 72ch; }

@media (max-width: 700px) {
  .zv-step { grid-template-columns: 3.2rem 1fr; row-gap: 8px; }
  .zv-step-yield { grid-column: 2 / -1; }
}

/* --- The Venture Game, on the homepage -----------------------------------
   WAS three bone tiles each ringed with a 1px shadow: blog cards, which §15
   rules out. A publication runs a list with rules between the entries, so the
   eye reads titles down a column instead of scanning three equal rectangles. */
.zv-vg-head  { display: flex; justify-content: space-between; align-items: flex-end;
               gap: var(--s3); flex-wrap: wrap; }
.zv-vg-kicker{ font: 500 13px/1 var(--font); letter-spacing: 0.2em; text-transform: uppercase;
               color: var(--editorial-bone); margin: 10px 0 0; }
.zv-vg-h     { font: 300 clamp(30px, 4.2vw, 56px)/1.08 var(--font-editorial);
               letter-spacing: -0.02em; margin: 20px 0 0; color: var(--ink-bone); max-width: 22ch; }
.zv-vg-list  { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid rgba(10,22,40,0.14); }
.zv-vg-item  {
  display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr auto;
  gap: clamp(14px, 3vw, 40px); align-items: baseline;
  padding: clamp(22px, 2.4vw, 32px) 0;
  border-bottom: 1px solid rgba(10,22,40,0.14);
  text-decoration: none; color: var(--ink-bone);
  transition: background-color 160ms ease;
}
.zv-vg-item:hover { background: rgba(10,22,40,0.035); }
.zv-vg-cat   { font: 500 11px/1 var(--font); letter-spacing: 0.2em; text-transform: uppercase; color: var(--copper-bone); }
.zv-vg-title { font: 400 clamp(20px, 2.1vw, 27px)/1.25 var(--font-editorial); margin: 0; color: var(--ink-bone); }
.zv-vg-meta  { font: 300 13px/1 var(--font); color: var(--muted-bone); white-space: nowrap; }
@media (max-width: 700px) {
  .zv-vg-item { grid-template-columns: 1fr; row-gap: 8px; }
  .zv-vg-meta { white-space: normal; }
}

/* The bone wrapper is a two-column grid for BUILD/GROW. The Venture Game uses
   the same padding and measure but lays out its own contents. */
.zv-bone-block { display: block; }

/* --- The copper block ----------------------------------------------------
   Three boxes ringed in white-at-30%, on copper. The boxes go; three routes
   in is a genuine choice, and a choice reads as columns rather than tiles.
   Rules between them, nothing around them. */
/* NAVY ON COPPER, not white. White on #C27045 measures 3.69 against a 4.5
   requirement -- the loudest block on the page has been failing AA in
   production. Navy is 4.92 on the same surface, and unlike copper over a
   photograph this is a FLAT ground, so 4.92 is the value everywhere rather
   than a best case. It also stops the section looking like every SaaS site
   that ever set white on orange: two brand colours against each other reads
   as a decision. */
.zv-pick     { background: var(--copper); color: var(--navy); }
.zv-pick-h   { font: 300 var(--h1)/1.04 var(--font); letter-spacing: -0.03em; margin: 0; max-width: 18ch; color: var(--navy); }
.zv-pick-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
               gap: clamp(28px, 4vw, 56px); margin-top: clamp(40px, 5vw, 64px); }
.zv-pick-item{ display: flex; flex-direction: column; gap: 12px; color: var(--navy);
               text-decoration: none; padding-left: clamp(20px, 2.4vw, 34px);
               border-left: 1px solid rgba(10,22,40,0.3); }
.zv-pick-item:first-child { padding-left: 0; border-left: 0; }
.zv-pick-num { font: 500 var(--eyebrow)/1 var(--font); letter-spacing: 0.2em;
               text-transform: uppercase; color: var(--navy); }
.zv-pick-t   { font: 400 var(--h3)/1.2 var(--font); margin: 0; color: var(--navy); }
.zv-pick-cta { font: 500 14px/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase;
               color: var(--navy); margin-top: var(--s1);
               border-bottom: 1px solid rgba(10,22,40,0.45); padding-bottom: 5px;
               align-self: flex-start; transition: border-color 150ms ease; }
.zv-pick-item:hover .zv-pick-cta { border-bottom-color: var(--navy); }
@media (max-width: 620px) {
  .zv-pick-item { padding-left: 0; border-left: 0; border-top: 1px solid rgba(10,22,40,0.3); padding-top: 24px; }
  .zv-pick-item:first-child { border-top: 0; padding-top: 0; }
}

/* --- The footer ---------------------------------------------------------- */
.zv-foot      { background: var(--navy); border-top: 1px solid var(--line); }
.zv-foot-in   { max-width: var(--work); margin: 0 auto; padding: clamp(48px, 6vw, 80px) var(--gutter);
                display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; }
.zv-foot-col  { display: flex; flex-direction: column; gap: 14px; }
.zv-foot-brand{ display: flex; flex-direction: column; gap: 20px; }
.zv-foot-mark { display: flex; flex-direction: column; align-items: center; gap: 7px; align-self: flex-start; }
.zv-foot-name { font: 400 34px/1 var(--font); letter-spacing: 0.1em; color: var(--ink); padding-left: 0.1em; }
.zv-foot-sub  { font: 300 11px/1 var(--font); letter-spacing: 0.12em; color: var(--copper-text); padding-left: 0.12em; }
.zv-foot-terr { font: 400 13px/1.6 var(--font); letter-spacing: 0.16em; text-transform: uppercase;
                color: var(--muted); margin: 0; }
.zv-foot-head { font: 500 var(--eyebrow)/1 var(--font); letter-spacing: 0.2em;
                text-transform: uppercase; color: var(--dim); }
.zv-foot-link { font: 300 15px/1.4 var(--font); color: var(--muted); text-decoration: none;
                transition: color 150ms ease; }
.zv-foot-link:hover { color: var(--copper-text); }
.zv-foot-note { font: 300 13px/1.6 var(--font); color: var(--dim); }
.zv-foot-addr { display: flex; flex-direction: column; gap: 16px; margin-top: 6px; }
.zv-foot-office { display: flex; flex-direction: column; gap: 5px;
                  border-left: 1px solid rgba(194,112,69,0.5); padding-left: 14px; }
.zv-foot-office.alt { border-left-color: rgba(255,255,255,0.22); }
.zv-foot-office-h   { font: 500 11px/1 var(--font); letter-spacing: 0.2em;
                      text-transform: uppercase; color: var(--copper-text); }
.zv-foot-office.alt .zv-foot-office-h { color: var(--dim); }
.zv-foot-office p   { font: 300 15px/1.6 var(--font); color: var(--muted); margin: 0; }
.zv-foot-legal { max-width: var(--work); margin: 0 auto; padding: 0 var(--gutter) 40px; }
.zv-foot-legal-in { border-top: 1px solid var(--line); padding-top: 24px;
                    display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.zv-foot-legal span { font: 300 13px/1.6 var(--font); color: var(--dim); }
@media (max-width: 767px) { .zv-foot-link { padding: 6px 0; } }

/* --- The portfolio -------------------------------------------------------
   WAS five bordered, rounded, #0F2235 cards, each holding a logo, a name, a
   sector, a paragraph, a pill and a link. §9: "Do not force all ventures into
   identical little cards. Each company should retain its own identity."

   Identity comes from the typeface, not the container. The portfolio data has
   carried a `font` per company since it was written -- JOYIZM's is Michroma --
   and nothing was using it except a span inside a box. Set the name in the
   company's own face at scale, separate the rows with a rule, and the page
   stops being five rectangles and starts being a roster.

   The logos stay small. They are 256px raster with no SVG anywhere, so any
   attempt to set a mark large would go soft. */

.zv-pf-list { border-top: 1px solid var(--line); }
.zv-pf-row {
  display: grid;
  grid-template-columns: 88px minmax(12rem, 20rem) 1fr;
  gap: clamp(20px, 3.4vw, 56px);
  align-items: start;
  padding: clamp(28px, 3.4vw, 52px) 0;
  border-bottom: 1px solid var(--line);
}
/* CONTAIN, NOT COVER. A logo is a word, and cover crops words. Every mark
   here happens to be square today, so the two look identical -- but the next
   one that is not square would lose its edges silently, which is the failure
   that already happened once by a different route. */
.zv-pf-mark   { width: 72px; height: 72px; border-radius: var(--radius); overflow: hidden; flex: none; }
.zv-pf-mark img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: var(--radius); }
.zv-pf-initial{ width: 72px; height: 72px; border-radius: var(--radius);
                border: 1px solid rgba(255,255,255,0.2); display: flex;
                align-items: center; justify-content: center;
                font: 400 30px/1 var(--font); color: var(--copper-text); }
.zv-pf-name   { font: 400 clamp(26px, 3vw, 40px)/1.02 var(--font);
                letter-spacing: 0.04em; margin: 0; color: var(--ink); }
.zv-pf-sector { font: 500 var(--eyebrow)/1.4 var(--font); letter-spacing: 0.2em;
                text-transform: uppercase; color: var(--copper-text);
                display: block; margin-top: 12px; }
.zv-pf-body   { font: 300 var(--body)/1.7 var(--font); color: var(--muted); margin: 0; max-width: 52ch; }
.zv-pf-meta   { display: flex; gap: clamp(16px, 2vw, 28px); align-items: baseline;
                flex-wrap: wrap; margin-top: var(--s2); }
/* A pill is a container around one word. The word is enough. */
.zv-pf-stage  { font: 500 var(--eyebrow)/1 var(--font); letter-spacing: 0.2em;
                text-transform: uppercase; color: var(--muted); }
.zv-pf-site   { font: 300 15px/1 var(--font); letter-spacing: 0.04em; color: var(--ink);
                text-decoration: none; border-bottom: 1px solid var(--copper);
                padding-bottom: 4px; transition: color 150ms ease, border-color 150ms ease; }
.zv-pf-site:hover { color: var(--copper-text); border-color: var(--copper-text); }
.zv-pf-next   { padding: clamp(28px, 3.4vw, 52px) 0; display: flex; flex-direction: column; gap: 12px; }
.zv-pf-next h2{ font: 300 var(--h3)/1.1 var(--font); margin: 0; color: var(--muted); }
.zv-pf-next p { font: 300 16px/1.7 var(--font); color: var(--dim); margin: 0; max-width: 56ch; }

@media (max-width: 860px) {
  .zv-pf-row { grid-template-columns: 72px 1fr; row-gap: 14px; }
  .zv-pf-row > :last-child { grid-column: 1 / -1; }
}

/* --- The roster, on the homepage -----------------------------------------
   The claim is "We create companies." The visitor's next thought is "show me",
   and until now the answer lived on another route. This is the compact form --
   name, sector, status, no paragraph -- because the homepage owes proof, and
   /portfolio owes detail. One array, two presentations. */

.zv-roster      { border-top: 1px solid var(--line); margin-top: clamp(36px, 4vw, 56px); }
.zv-roster-row  {
  display: grid; grid-template-columns: minmax(10rem, 22rem) 1fr auto;
  gap: clamp(16px, 3vw, 40px); align-items: baseline;
  padding: clamp(20px, 2.4vw, 32px) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
  transition: background-color 160ms ease;
}
.zv-roster-row:hover { background: rgba(255,255,255,0.028); }
.zv-roster-name { font: 400 clamp(21px, 2.4vw, 32px)/1 var(--font); letter-spacing: 0.04em; margin: 0; color: var(--ink); }
.zv-roster-sec  { font: 300 15px/1.5 var(--font); color: var(--muted); }
.zv-roster-stage{ font: 500 var(--eyebrow)/1 var(--font); letter-spacing: 0.2em;
                  text-transform: uppercase; color: var(--copper-text); white-space: nowrap; }
/* Proof, as type. No boxes, no icons, no invented numbers: this is the
   portfolio array counted. */
.zv-proof { font: 500 var(--eyebrow)/1.8 var(--font); letter-spacing: 0.24em;
            text-transform: uppercase; color: var(--muted);
            margin: clamp(32px, 4vw, 52px) 0 0; }
.zv-proof b { font-weight: 500; color: var(--copper-text); }
@media (max-width: 700px) {
  .zv-roster-row { grid-template-columns: 1fr auto; row-gap: 6px; }
  .zv-roster-sec { grid-column: 1 / -1; }
}

/* =========================================================================
   /BUILD
   -------------------------------------------------------------------------
   WHAT THIS REPLACES. The route was 69 inline style attributes and three
   separate card racks:

     - the seven-stage model as six 190px boxes, each #0F2235 with a hairline
       ring -- the same object §10 names word for word on the homepage, built
       a second time on a second page;
     - ten capabilities as pill chips at border-radius:999px, which is a
       filter UI borrowed into a page that is not filtering anything;
     - three ways in as bordered white cards on the bone ground, radius 14px.

   The stages reuse .zv-seq / .zv-step. It is the same seven stages as the
   Venture Engine -- the same names, in the same order -- so they get the same
   rendering rather than a second invention of it.
   ========================================================================= */

/* The rule-and-label that opens every secondary route. The 34px copper rule
   was a spare <span> in the markup on four pages; it is a pseudo-element now. */
.zv-tag {
  display: flex; align-items: center; gap: 14px;
  font: 500 var(--eyebrow)/1 var(--font);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--copper-text);
}
.zv-tag::before { content: ""; width: 34px; height: 1px; background: var(--copper); flex: none; }
.zv-tag-bone { color: var(--copper-bone); }

.zv-page      { max-width: var(--work); margin: 0 auto;
                padding: clamp(72px, 9vw, 130px) var(--gutter) clamp(48px, 6vw, 80px); }
.zv-page-lead { font: 300 clamp(22px, 2.6vw, 34px)/1.35 var(--font-editorial);
                color: var(--copper-text); margin: 30px 0 22px; max-width: 42ch; }
.zv-page-h    { font: 300 clamp(36px, 5.4vw, 82px)/1.02 var(--font);
                letter-spacing: -0.032em; margin: 0; max-width: 16ch; color: var(--ink); }
.zv-page-body { max-width: var(--work); margin: 0 auto; padding: 0 var(--gutter) clamp(56px, 7vw, 90px); }

/* What is in place on day one. Ten capabilities, set as a list that reads,
   with the rule doing the separating instead of ten rounded outlines. */
/* Two columns, held to a measure. Spread across the full 1440px the eye has
   to travel half a metre to reach the second column and the list stops being
   a list. */
.zv-brings   { margin-top: var(--s3); border-top: 1px solid var(--line);
               max-width: 900px; columns: 2; column-gap: clamp(32px, 5vw, 72px); }
.zv-bring    { display: block; break-inside: avoid;
               font: 300 clamp(16px, 1.5vw, 19px)/1.4 var(--font);
               color: var(--ink); padding: 15px 0;
               border-bottom: 1px solid var(--line); }
@media (max-width: 640px) { .zv-brings { columns: 1; } }

/* Three ways in. Rows on the bone ground, the number carrying the eye down
   the left edge, the link at the end of the sentence rather than pinned to
   the bottom of a box. */
/* .zv-panel-label is the BUILD / GROW wordmark scale. A section heading on
   the bone ground needs the section scale, and 24ch so "Where a company
   begins." sits on one line where it fits. */
.zv-bone-h { font: 300 clamp(30px, 4vw, 54px)/1.04 var(--font); letter-spacing: -0.03em;
             margin: 20px 0 0; max-width: 24ch; color: var(--ink-bone); }

.zv-paths  { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid rgba(10,22,40,0.14); }
.zv-path   {
  display: grid; grid-template-columns: 4.5rem minmax(10rem, 21rem) 1fr;
  gap: clamp(16px, 3vw, 40px); align-items: baseline;
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-bottom: 1px solid rgba(10,22,40,0.14);
}
.zv-path-num  { font: 400 13px/1 var(--font); letter-spacing: 0.18em; color: var(--copper-bone); }
.zv-path-t    { font: 500 var(--h3)/1.2 var(--font); letter-spacing: 0.1em;
                text-transform: uppercase; color: var(--ink-bone); margin: 0; }
.zv-path-body { font: 300 var(--body)/1.7 var(--font); color: var(--muted-bone);
                margin: 0 0 14px; max-width: 54ch; }
.zv-path-cta  { font: 500 14px/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase;
                color: var(--ink-bone); text-decoration: none;
                border-bottom: 1px solid var(--copper); padding-bottom: 5px;
                display: inline-block; transition: color 150ms ease, border-color 150ms ease; }
.zv-path-cta:hover { color: var(--copper-deep); border-color: var(--copper-deep); }
@media (max-width: 700px) {
  .zv-path { grid-template-columns: 3.2rem 1fr; row-gap: 10px; }
  .zv-path > div { grid-column: 2 / -1; }
}

/* Founder in Residence. */
.zv-fir      { max-width: var(--work); margin: 0 auto;
               padding: clamp(72px, 9vw, 120px) var(--gutter) clamp(48px, 6vw, 80px); }
.zv-fir-h    { font: 300 clamp(32px, 4.8vw, 72px)/1.02 var(--font);
               letter-spacing: -0.032em; margin: 30px 0 0; max-width: 16ch;
               color: var(--ink); text-wrap: balance; }
.zv-fir-lead { font: 300 italic clamp(20px, 2.2vw, 30px)/1.4 var(--font-editorial);
               color: var(--copper-text); margin: 30px 0 0; max-width: 30ch; }
.zv-fir-terms{ font: 400 clamp(15px, 1.6vw, 20px)/1.4 var(--font);
               letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); margin: 26px 0 0; }
.zv-fir-two  { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
               gap: clamp(32px, 4vw, 64px); margin-top: clamp(40px, 5vw, 64px); }
.zv-fir-col  { display: flex; flex-direction: column; gap: 14px; }
.zv-fir-sub  { font: 500 15px/1.2 var(--font); letter-spacing: 0.14em;
               text-transform: uppercase; margin: 0; color: var(--ink); }
.zv-fir-body { font: 300 var(--body)/1.7 var(--font); color: var(--muted); margin: 0; max-width: 50ch; }

/* The application. */
.zv-apply     { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter) clamp(72px, 9vw, 120px); }
.zv-apply-h   { font: 300 var(--h2)/1.04 var(--font); letter-spacing: -0.03em;
                margin: 20px 0 12px; color: var(--ink); }
.zv-apply-sub { font: 300 var(--body)/1.7 var(--font); color: var(--muted);
                margin: 0 0 40px; max-width: 52ch; }
.zv-form  { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.zv-field { display: flex; flex-direction: column; gap: 9px; }
.zv-field-wide { grid-column: 1 / -1; }
.zv-field-label { font: 400 var(--eyebrow)/1 var(--font); letter-spacing: 0.16em;
                  text-transform: uppercase; color: var(--dim); }
.zv-input {
  background: var(--navy-raised); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius); padding: 15px 16px;
  color: var(--ink); font: 300 16px/1.6 var(--font); outline: none;
  transition: border-color 150ms ease;
}
.zv-input:focus { border-color: var(--copper); }
select.zv-input   { appearance: none; }
textarea.zv-input { resize: vertical; }
.zv-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.zv-note    { font: 300 14px/1.6 var(--font); color: var(--dim); max-width: 44ch; }
.zv-legal   { font: 300 13px/1.7 var(--font); color: var(--dim); margin: 34px 0 0; max-width: 72ch; }
.zv-hp      { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.zv-done    { border: 1px solid rgba(194,112,69,0.5); border-radius: 14px;
              padding: 40px; background: var(--navy-raised); }
.zv-done h3 { font: 400 28px/1.2 var(--font); margin: 0 0 12px; color: var(--ink); }
.zv-done p  { font: 300 var(--body)/1.7 var(--font); color: var(--muted); margin: 0; }

/* =========================================================================
   /GROW and /LOGIN
   -------------------------------------------------------------------------
   /grow was 27 inline style attributes: six service boxes (the third rack of
   them on the site), three engagement columns that were already correct, and
   a bone call to action.

   /login was 37, mostly two cards at radius 16px over a 2% white fill, each
   holding a bulleted list built out of absolutely positioned middots.
   ========================================================================= */

.zv-page-body-lead { font: 300 19px/1.65 var(--font); color: var(--muted);
                     margin: 34px 0 0; max-width: 60ch; }

.zv-engage      { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                  gap: clamp(24px, 3vw, 44px); }
.zv-engage-item { display: flex; flex-direction: column; gap: 12px;
                  padding-top: 22px; border-top: 1px solid rgba(194,112,69,0.4); }
.zv-engage-h    { font: 400 23px/1.25 var(--font-editorial); margin: 0; color: var(--ink); }
.zv-engage-body { font: 300 15px/1.7 var(--font); color: var(--muted); margin: 0; }

.zv-bone-body { font: 300 var(--body)/1.7 var(--font); color: var(--muted-bone);
                margin: 26px 0 0; max-width: 58ch; }
.zv-bone-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 34px; }

/* ZAYNA Access. Two doors, divided by the same hairline the rest of the site
   divides things with, rather than two floating cards. */
.zv-access      { max-width: 1080px; margin: 0 auto;
                  padding: clamp(64px, 9vw, 120px) var(--gutter) clamp(72px, 9vw, 120px); }
.zv-access-head { display: flex; flex-direction: column; align-items: center;
                  text-align: center; gap: 16px; margin-bottom: clamp(40px, 5vw, 64px); }
.zv-access-h    { font: 300 clamp(34px, 4.6vw, 58px)/1.04 var(--font);
                  letter-spacing: -0.028em; margin: 0; color: var(--ink); }
.zv-access-sub  { font: 300 var(--body)/1.7 var(--font); color: var(--muted); margin: 0; max-width: 46ch; }
.zv-doors  { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
             gap: clamp(30px, 4vw, 64px); border-top: 1px solid var(--line); }
.zv-door   { display: flex; flex-direction: column; gap: 18px;
             padding: clamp(30px, 3.4vw, 48px) 0 0; }
.zv-door + .zv-door { border-left: 1px solid var(--line); padding-left: clamp(30px, 4vw, 64px); }
@media (max-width: 659px) { .zv-door + .zv-door { border-left: 0; padding-left: 0;
                                                  border-top: 1px solid var(--line); } }
.zv-door-h    { font: 300 clamp(24px, 2.5vw, 32px)/1.1 var(--font);
                letter-spacing: -0.01em; margin: 0; color: var(--ink); }
.zv-door-body { font: 300 15px/1.7 var(--font); color: var(--muted); margin: 0; }
.zv-door-list { margin: 2px 0 0; padding: 0; list-style: none;
                display: flex; flex-direction: column; gap: 0; }
.zv-door-list li { font: 300 14px/1.75 var(--font); color: var(--muted);
                   padding: 9px 0; border-bottom: 1px solid var(--line); }
.zv-door .zv-btn { text-align: center; margin-top: 10px; align-self: flex-start; }
.zv-access-foot { margin-top: clamp(40px, 5vw, 60px); padding-top: 26px;
                  border-top: 1px solid var(--line); text-align: center; }
.zv-access-foot p { font: 300 13px/1.8 var(--font); color: var(--dim); margin: 0; }
.zv-access-foot p + p { margin-top: 4px; }
.zv-access-foot a { color: var(--copper-text); border-bottom: 1px solid rgba(194,112,69,0.4);
                    text-decoration: none; }
.zv-access-foot a:hover { border-bottom-color: var(--copper-text); }

/* =========================================================================
   /THE-VENTURE-GAME
   -------------------------------------------------------------------------
   46 inline style attributes. The essays were a grid of tiles, each with a
   hairline ring and a 250px floor -- the fourth rack on the site -- and the
   series opener sat in a rounded bordered panel of its own. The homepage
   already set this material as an editorial list; this is the same list with
   the cover images kept, because on a page about essays the picture is part
   of the essay rather than decoration.

   Three colours were below AA here and are gone: #66788C (4.00) on the card
   dates, the archive note and the book's format line, and #7E8FA2 (4.42) on
   the lead meta and the book blurb.
   ========================================================================= */

.zv-vg-lead-in { font: 300 18px/1.7 var(--font); color: var(--muted-bone);
                 margin: 0; max-width: 54ch; }
.zv-vg-rule    { margin-top: clamp(36px, 4vw, 56px); padding-top: clamp(28px, 3vw, 44px);
                 border-top: 1px solid rgba(10,22,40,0.14); }

/* The lead essay: one picture, at size, and the title beside it. */
.zv-feat      { max-width: var(--work); margin: 0 auto;
                padding: clamp(56px, 7vw, 100px) var(--gutter) clamp(40px, 5vw, 64px); }
.zv-feat-a    { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
                gap: clamp(32px, 4vw, 64px); align-items: center;
                color: var(--ink); text-decoration: none; }
.zv-feat-img  { width: 100%; aspect-ratio: 16/9; border-radius: var(--radius);
                overflow: hidden; background: var(--navy-raised); }
.zv-feat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zv-feat-col  { display: flex; flex-direction: column; gap: 18px; }
.zv-feat-cat  { font: 500 11px/1 var(--font); letter-spacing: 0.2em;
                text-transform: uppercase; color: var(--copper-text); }
.zv-feat-h    { font: 400 clamp(28px, 3.4vw, 46px)/1.15 var(--font-editorial);
                letter-spacing: -0.015em; margin: 0; color: var(--ink); }
.zv-feat-meta { font: 300 14px/1.5 var(--font); color: var(--dim); }
.zv-feat-more { font: 500 14px/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase;
                color: var(--ink); border-bottom: 1px solid var(--copper);
                padding-bottom: 5px; align-self: flex-start; margin-top: 6px; }
.zv-feat-a:hover .zv-feat-more { color: var(--copper-text); border-color: var(--copper-text); }

/* The rest of the essays, as a list. */
.zv-ess-list { max-width: var(--work); margin: 0 auto;
               padding: 0 var(--gutter) clamp(56px, 7vw, 90px); }
.zv-ess-in   { border-top: 1px solid var(--line); }
.zv-ess-row  {
  display: grid; grid-template-columns: 200px 1fr auto;
  gap: clamp(20px, 3vw, 44px); align-items: center;
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
  transition: background-color 150ms ease;
}
.zv-ess-row:hover { background: rgba(255,255,255,0.028); }
.zv-ess-img  { width: 100%; aspect-ratio: 16/9; border-radius: 6px;
               overflow: hidden; background: var(--navy-raised); }
.zv-ess-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zv-ess-cat  { font: 500 11px/1 var(--font); letter-spacing: 0.2em;
               text-transform: uppercase; color: var(--copper-text);
               display: block; margin-bottom: 9px; }
.zv-ess-h    { font: 400 clamp(20px, 2.1vw, 27px)/1.25 var(--font-editorial);
               margin: 0; color: var(--ink); }
.zv-ess-meta { font: 300 13px/1 var(--font); color: var(--muted); white-space: nowrap; }
@media (max-width: 860px) {
  .zv-ess-row  { grid-template-columns: 110px 1fr; row-gap: 8px; }
  .zv-ess-meta { grid-column: 2 / -1; white-space: normal; }
}

/* The book. */
.zv-book     { max-width: var(--work); margin: 0 auto;
               padding: 0 var(--gutter) clamp(48px, 6vw, 76px); }
.zv-book-in  { border-top: 1px solid rgba(194,112,69,0.35);
               padding-top: clamp(36px, 4.4vw, 60px);
               display: flex; flex-wrap: wrap; gap: clamp(26px, 4vw, 56px); align-items: center; }
.zv-book-img { width: min(212px, 44vw); aspect-ratio: 2/3; object-fit: cover;
               border-radius: 6px; display: block; flex: 0 0 auto;
               box-shadow: 0 20px 44px rgba(0,0,0,0.5); }
.zv-book-col { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.zv-book-h   { font: 400 clamp(28px, 3.4vw, 44px)/1.12 var(--font-editorial);
               letter-spacing: -0.015em; margin: 0; color: var(--ink); }
.zv-book-sub { font: 300 italic clamp(17px, 1.8vw, 23px)/1.35 var(--font-editorial);
               color: var(--muted); margin: 0; }
.zv-book-body{ font: 300 16px/1.7 var(--font); color: var(--muted); margin: 6px 0 0; max-width: 56ch; }
.zv-book-acts{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 12px; }
.zv-book-buy { font: 500 14px/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase;
               color: var(--ink); text-decoration: none;
               border-bottom: 1px solid var(--copper); padding-bottom: 5px; }
.zv-book-buy:hover { color: var(--copper-text); border-color: var(--copper-text); }
.zv-book-alt { font: 500 14px/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase;
               color: var(--muted); text-decoration: none;
               border-bottom: 1px solid rgba(194,112,69,0.45); padding-bottom: 5px; }
.zv-book-alt:hover { color: var(--ink); }
.zv-book-where { font: 300 var(--eyebrow)/1.4 var(--font); letter-spacing: 0.14em;
                 text-transform: uppercase; color: var(--dim); margin: 14px 0 0; }

/* Where the series begins. A row, not a panel. */
.zv-start     { max-width: var(--work); margin: 0 auto;
                padding: 0 var(--gutter) clamp(72px, 9vw, 120px); }
.zv-start-a   { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: clamp(24px, 3vw, 56px); align-items: center;
                border-top: 1px solid rgba(194,112,69,0.4);
                border-bottom: 1px solid rgba(194,112,69,0.4);
                padding: clamp(28px, 3.4vw, 48px) 0;
                color: var(--ink); text-decoration: none;
                transition: border-color 150ms ease; }
.zv-start-a:hover { border-color: rgba(194,112,69,0.85); }
.zv-start-col { display: flex; flex-direction: column; gap: 14px; }
.zv-start-h   { font: 400 clamp(26px, 3vw, 40px)/1.18 var(--font-editorial); margin: 0; color: var(--ink); }
.zv-start-lab { font: 400 13px/1.4 var(--font); letter-spacing: 0.18em;
                text-transform: uppercase; color: var(--muted); margin: 0; }
.zv-start-meta{ font: 300 14px/1.5 var(--font); color: var(--dim); }
.zv-archive   { font: 300 14px/1.7 var(--font); color: var(--dim); margin: 26px 0 0; max-width: 74ch; }

/* =========================================================================
   /ARTICLE
   -------------------------------------------------------------------------
   30 inline style attributes. The essay body itself was close to right --
   one column at 820px, Newsreader at 20/1.72 -- and mostly needed naming.
   What came out: the three related essays as a fifth rack of ringed tiles,
   a Share control shaped as a 999px pill, and #66788C on the related dates.

   The body measure is the one place on the site where a longer line is
   correct: an essay is read, not scanned, so it keeps its 820px column
   rather than the 66ch measure the marketing copy uses.
   ========================================================================= */

.zv-art       { max-width: 820px; margin: 0 auto; }
.zv-art-head  { padding: clamp(48px, 6vw, 88px) var(--gutter) clamp(28px, 3vw, 44px); }
.zv-art-back  { font: 500 11px/1 var(--font); letter-spacing: 0.22em; text-transform: uppercase;
                color: var(--copper-text); text-decoration: none; }
.zv-art-back:hover { color: var(--copper); }
.zv-art-cat   { font: 400 11px/1 var(--font); letter-spacing: 0.2em; text-transform: uppercase;
                color: var(--muted); margin: 26px 0 0; }
.zv-art-h     { font: 400 clamp(32px, 4.6vw, 60px)/1.12 var(--font-editorial);
                letter-spacing: -0.02em; margin: 16px 0 0; color: var(--ink); text-wrap: balance; }
.zv-art-meta  { font: 300 14px/1.5 var(--font); color: var(--muted); margin: 24px 0 0; }
.zv-art-cover { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter) clamp(32px, 4vw, 56px); }
.zv-art-cover-in { width: 100%; aspect-ratio: 16/9; border-radius: var(--radius);
                   overflow: hidden; background: var(--navy-raised); }
.zv-art-body  { padding: clamp(8px, 2vw, 24px) var(--gutter) clamp(48px, 6vw, 80px); }
.zv-art-p     { font: 300 20px/1.72 var(--font-editorial); color: #D6DEE7; margin: 0 0 26px; }
.zv-art-h2    { font: 400 clamp(24px, 2.6vw, 32px)/1.2 var(--font); letter-spacing: -0.01em;
                color: var(--ink); margin: 48px 0 18px; }
.zv-art-h3    { font: 500 19px/1.3 var(--font); letter-spacing: 0.06em; text-transform: uppercase;
                color: var(--copper-text); margin: 38px 0 14px; }
.zv-art-quote { font: 300 italic clamp(22px, 2.4vw, 30px)/1.42 var(--font-editorial);
                color: var(--copper-text); margin: 44px 0; padding-left: 26px;
                border-left: 2px solid rgba(194,112,69,0.5); }

.zv-art-foot  { padding: 0 var(--gutter) clamp(48px, 6vw, 80px); }
.zv-art-foot-in { border-top: 1px solid var(--line); padding-top: 30px;
                  display: flex; justify-content: space-between; gap: 24px;
                  flex-wrap: wrap; align-items: flex-start; }
.zv-art-by    { display: flex; flex-direction: column; gap: 6px; }
.zv-art-by h3 { font: 500 19px/1.3 var(--font); margin: 0; color: var(--ink); }
.zv-art-by p  { font: 300 15px/1.6 var(--font); color: var(--muted); margin: 0; max-width: 44ch; }
/* The share control was a 999px pill. It is the same underlined link every
   other secondary action on the site uses. */
.zv-art-share { font: 500 12px/1 var(--font); letter-spacing: 0.16em; text-transform: uppercase;
                color: var(--muted); text-decoration: none;
                border-bottom: 1px solid rgba(255,255,255,0.22); padding-bottom: 6px;
                transition: color 150ms ease, border-color 150ms ease; }
.zv-art-share:hover { color: var(--ink); border-color: var(--copper); }

.zv-rel       { max-width: var(--work); margin: 0 auto;
                padding: 0 var(--gutter) clamp(56px, 7vw, 90px); }
.zv-rel-list  { margin-top: 26px; border-top: 1px solid var(--line); }
.zv-rel-row   {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 40px); align-items: baseline;
  padding: clamp(18px, 2.2vw, 26px) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
  transition: background-color 150ms ease;
}
.zv-rel-row:hover { background: rgba(255,255,255,0.028); }
.zv-rel-cat   { font: 500 11px/1 var(--font); letter-spacing: 0.2em; text-transform: uppercase;
                color: var(--copper-text); display: block; margin-bottom: 9px; }
.zv-rel-h     { font: 400 21px/1.25 var(--font-editorial); margin: 0; color: var(--ink); }
.zv-rel-meta  { font: 300 13px/1 var(--font); color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) {
  .zv-rel-row  { grid-template-columns: 1fr; row-gap: 8px; }
  .zv-rel-meta { white-space: normal; }
}

.zv-art-cta   { max-width: var(--work); margin: 0 auto;
                padding: clamp(48px, 6vw, 84px) var(--gutter);
                display: flex; justify-content: space-between; align-items: center;
                gap: 28px; flex-wrap: wrap; }
.zv-art-cta-h { font: 300 clamp(24px, 3vw, 40px)/1.08 var(--font); letter-spacing: -0.02em;
                margin: 0; max-width: 24ch; color: var(--ink-bone); }

/* --- The contact section -------------------------------------------------
   Reuses the /build form vocabulary wholesale. The two forms on this site had
   two independent copies of the same field, label, input and button styles --
   28 inline attributes here, 20 there, describing identical objects. */
.zv-contact    { background: var(--navy); border-top: 1px solid var(--line); }
.zv-contact-in { max-width: 1100px; margin: 0 auto; padding: clamp(64px, 8vw, 110px) var(--gutter); }
.zv-contact-h  { font: 300 clamp(28px, 3.6vw, 48px)/1.05 var(--font);
                 letter-spacing: -0.03em; margin: 20px 0 12px; color: var(--ink); }
.zv-contact-sub{ font: 300 var(--body)/1.7 var(--font); color: var(--muted);
                 margin: 0 0 40px; max-width: 52ch; }
.zv-again { font: 500 13px/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase;
            color: var(--ink); text-decoration: none;
            border-bottom: 1px solid var(--copper); padding-bottom: 4px; display: inline-block; }
.zv-again:hover { color: var(--copper-text); border-color: var(--copper-text); }
.zv-done p + .zv-again { margin-top: 22px; }

/* Four spacing attributes that were riding inline on converted markup. */
.zv-engage { margin-top: 26px; }
.zv-band-tight { padding-bottom: clamp(48px, 6vw, 80px); }
.zv-vg-kicker-page { margin: 26px 0 20px; }
.zv-vg-h-page { max-width: 20ch; text-wrap: balance; }

/* --- The City Life band --------------------------------------------------
   One photograph between the proposition and the engine, full bleed, at the
   source's own 2.455 panorama. Street level deliberately: the hero is the
   same crossing from above, and the pair says the same thing at two
   distances -- the pattern, then the people in it.

   aspect-ratio holds the box before the file arrives, so nothing below it
   moves when the image loads. */
.zv-strip {
  width: 100%; aspect-ratio: 2000 / 815; max-height: 460px;
  overflow: hidden; background: var(--navy-raised);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.zv-strip img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%;
  display: block; filter: saturate(0.86) contrast(1.03);
}
@media (max-width: 767px) { .zv-strip { aspect-ratio: 3 / 2; max-height: 300px; } }