/* ==========================================================================
   VC Equestrian — stylesheet

   A designed archive: high-contrast Didone display over a neo-grotesque, on a
   navy/gold/stone palette. The reference is a private bank's annual report
   rather than a sports site — precision, restraint, and a great deal of air.

   The rules that follow are the whole design. There is no build step and no
   framework: everything resolves from the token block in layer 2, so retuning
   the site is a matter of changing values there rather than hunting components.

   Layers, in cascade order:
     1. Reset       — the few element defaults worth setting.
     2. Tokens      — colour, type scale, spacing rhythm, motion. The design.
     3. Type        — the named type treatments, each stated once.
     4. Layout      — shell, grids, rules, section headers.
     5. Motion      — reveals, and the reduced-motion contract.
     6. Chrome      — header, menu, footer, skip link.
     7. Components  — buttons, links, cards, fields, dialogs.
     8. Views       — one block per page.
     9. Print.

   Two conventions worth knowing before editing:

   - Contrast values in comments are measured, not estimated. Where a colour
     looks arbitrary it is usually the darkest step that still clears 4.5:1 on
     the ground it sits on. Lightening one is a WCAG regression.
   - Rules are rationed. The design uses one weight of hairline almost
     everywhere and reserves the heavier rule for the top of a major section.
     Adding a border is nearly always the wrong fix for a spacing problem.
   ========================================================================== */

/* ── 1. Reset ────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* The header is sticky; without this an anchored jump lands with the target
     tucked underneath it. The bar is always condensed by the time anything is
     anchored to, since anchoring means the page has scrolled. */
  scroll-padding-top: calc(var(--header-h-set) + 28px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  font-size: var(--t-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Fractions and old-style figures are never wanted here; lining figures at a
     consistent width are, everywhere a number appears next to another. */
  font-variant-numeric: lining-nums;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
  font-weight: 400;
  font-optical-sizing: auto;
  margin: 0;
  /* Display type breaks badly when a single short word is left on the last
     line. `balance` costs nothing at these lengths and removes the whole class
     of awkward break the design would otherwise have to be tuned around. */
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 4px;
}

img {
  display: block;
  max-width: 100%;
}

figure {
  margin: 0;
}

/* The site's repeated collections are lists, and the markup now says so: the
   horse grids, the mentors, the chronicle tiles, the trajectory, the sponsor
   marks, a horse's traits, the three pillars. `/partner/brand/` had been a
   `<ul>` since it was written — the convention was here, it had just never been
   carried to the other seven.

   What it buys is a count. A screen reader announces «list, 6 items» before the
   first one, so a reader knows how much is in front of them and can step over
   the set instead of through it; without it, six photographs are six unrelated
   links that happen to be adjacent.

   A user agent then gives a <ul> a bullet, 40px of indent and a blank line above
   and below. All three were written for prose and none belongs on a photo grid.

   `list-style: none` is why every one of these carries `role="list"` in the
   template. WebKit drops the list role from a list styled this way — the
   reasoning being that a list which does not look like one should not sound
   like one — so on an iPhone, which is most of the traffic a link from an
   Instagram profile brings, taking the bullets off would silently undo the
   whole point of the change. The explicit role is redundant everywhere else and
   costs nothing there.

   `margin-block` rather than `margin`: several of these set their own
   `margin-top` further down the file, and a blanket `margin: 0` here would be
   the same mistake as compensating a padding with a negative margin — it does
   not subtract, it replaces. Zeroing only the block axis leaves those alone. */
.vc-autogrid,
.vc-timeline,
.vc-marks,
.vc-traits,
.vc-pillars {
  list-style: none;
  margin-block: 0;
  padding-inline-start: 0;
}

/* Three of those grids have a link or a button for an item, so there the <li>
   is a wrapper rather than the card itself. Grid, with one child: it hands its
   whole box to that child, which is exactly what the child had when it was the
   grid item. Deliberately not `display: contents`, which several screen readers
   have at some point dropped from the accessibility tree — the one thing this
   change exists to add. */
.vc-cell {
  display: grid;
}

button {
  font-family: inherit;
  cursor: pointer;
}

table {
  border-collapse: collapse;
}

::selection {
  background: var(--ink);
  color: #fff;
}

/* Pointer focus stays quiet; :focus-visible below draws the real ring. */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ── 2. Tokens ───────────────────────────────────────────────────────────── */

:root {
  /* ── Ground ──────────────────────────────────────────────────────────────
     Four grounds, light to dark. The page moves between them rather than
     drawing boxes on one of them: a change of ground is the primary way this
     design separates one section from the next. */
  --paper: #ffffff;
  --alabaster: #faf9f6; /* barely off-white — for bands that must recede */
  --stone: #f1efe9;
  --stone-deep: #e7e3da;
  --ink: #0a192f;
  --ink-raised: #10203a; /* a lifted ink surface, for panels on the ink ground */
  --ink-deep: #071224; /* below ink, for the vignette end of a gradient */

  /* A band whose ground deepens from top to bottom — the device that gives a
     section weight without drawing a box around it. It is a token rather than
     five copies of a gradient because the endpoints are a contrast guarantee,
     not a look: --gold is the site's label colour, it holds down to a ground of
     rgb(236,236,236), and both ends here are above that.

     It used to run --stone to --stone-deep, and --stone-deep is below the line:
     --gold measures 4.16:1 on it. Nothing looked wrong, because whether a label
     failed depended on how far down the band it happened to land. The six
     timeline periods on the profile walked the gradient in order — 4.48, 4.43,
     4.39, 4.35, 4.31, 4.24 — and the eyebrow below them, at 0.76 of the way
     down, read 4.24:1. The bands that passed passed by luck of layout: the
     kickers in .vc-partnership and .vc-active sit near the top, where the
     ground is still light. Twenty-one texts across eight pages were under AA. */
  --stone-graded: linear-gradient(180deg, var(--alabaster) 0%, var(--stone) 100%);

  /* ── Gold ────────────────────────────────────────────────────────────────
     One metal in four steps rather than one flat swatch. The dark end exists
     for contrast, not for looks: --gold is the darkest gold that clears 4.5:1
     at label sizes on the light grounds it is used on — 5.33:1 on paper,
     5.06:1 on alabaster, 4.63:1 on stone — and it is the only one permitted
     under small text there. It does not clear on --stone-deep (4.16:1), which
     is why no band that carries small type may reach that ground; see
     --stone-graded above. The bright end is for rules, gradients and type on
     ink, where it measures 7.51:1. */
  --gold: #866627;
  --gold-mid: #a8823a;
  --gold-lt: #c9a54a;
  --gold-hi: #e3c884;

  /* The metal itself. A flat gold reads as brown; the eye reads gold from the
     gradient across a surface, which is why every rule and every sweep on this
     site uses this rather than a single colour. */
  --metal: linear-gradient(
    90deg,
    var(--gold-mid) 0%,
    var(--gold-hi) 38%,
    var(--gold-lt) 62%,
    var(--gold-mid) 100%
  );

  /* ── Type on ground ──────────────────────────────────────────────────────
     Two legible steps of secondary ink, not the five the design started with.
     Ink needs α .59 on white and .605 on stone to reach 4.5:1, so anything
     lighter fails at the sizes these are used at. */
  --ink-body: rgba(10, 25, 47, 0.78);
  --ink-meta: rgba(10, 25, 47, 0.7); /* 6.57:1 on white, 6.19:1 on stone */
  --ink-label: rgba(10, 25, 47, 0.62); /* 4.98:1 on white, 4.76:1 on stone */
  --on-ink: rgba(255, 255, 255, 0.72);
  --on-ink-muted: rgba(255, 255, 255, 0.5); /* 5.19:1 on ink */

  /* ── Rules ───────────────────────────────────────────────────────────────
     One hairline, one emphasis, on each ground. The old sheet ran ten border
     values; these four replace them. */
  --hair: rgba(10, 25, 47, 0.1);
  --hair-strong: rgba(10, 25, 47, 0.2);
  --hair-ink: rgba(255, 255, 255, 0.14);
  --hair-ink-strong: rgba(255, 255, 255, 0.26);

  /* ── Type scale ──────────────────────────────────────────────────────────
     A modular scale, fluid between a phone and a large desktop. Every heading
     on the site takes one of these; none sets its own font-size. That is the
     whole reason the scale exists — the previous sheet had five near-identical
     section titles because each component chose its own clamp. */
  --t-display: clamp(52px, 9.6vw, 150px); /* the name, home hero only */
  --t-h1: clamp(38px, 6vw, 88px); /* page titles */
  --t-h2: clamp(29px, 3.7vw, 56px); /* section titles */
  --t-h3: clamp(22px, 2.1vw, 30px); /* card and entry names */
  --t-h4: clamp(19px, 1.5vw, 23px);
  --t-quote: clamp(25px, 3.4vw, 48px); /* the pull quotes */
  --t-lead: clamp(17px, 1.4vw, 21px); /* standfirsts and intros */
  --t-body: 16px;
  --t-small: 14.5px;
  --t-label: 11px; /* the uppercase labels. Was 9–10px, which was too small
                      to carry the tracking it was asked to carry. */
  --t-micro: 10px; /* the smallest step, for captions and metadata only */

  /* ── Tracking ────────────────────────────────────────────────────────────
     Optical, not uniform: tracking tightens as type grows and opens as it
     shrinks. Three label steps replace the seven the old sheet had drifted
     into, which differed by fractions of a pixel and read as identical. */
  --tr-display: -0.03em;
  --tr-h1: -0.025em;
  --tr-h2: -0.02em;
  --tr-h3: -0.014em;
  --tr-label: 0.18em; /* default for uppercase labels */
  --tr-wide: 0.26em; /* section kickers, footer, small caps that stand alone */
  --tr-widest: 0.34em; /* the wordmark and the two or three places that echo it */

  /* ── Spacing ─────────────────────────────────────────────────────────────
     One rhythm. `--band` is the vertical measure of a full section and is used
     by every one of them, so sections cannot drift apart by the few pixels
     that a per-component clamp produces. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 88px;
  --s10: 120px;

  --gutter: clamp(22px, 4.2vw, 68px);
  --band: clamp(72px, 9.5vw, 144px);
  --band-tight: clamp(48px, 6.4vw, 96px);
  --measure: 62ch; /* the widest a paragraph is ever allowed to run */
  --shell: 1560px;

  /* The header bar, at rest and once it has set. A token rather than a number
     because five other things have to agree with it: the three views whose
     content runs up underneath the bar owe it exactly this much clearance, and
     an anchored jump has to clear the condensed height. They drifted apart
     once already. */
  --header-h: 88px;
  --header-h-set: 68px;

  /* ── Motion ──────────────────────────────────────────────────────────────
     Two curves. `--ease` decelerates hard and is what almost everything uses;
     `--ease-soft` is gentler, for anything large enough that a hard stop would
     read as a jolt. Durations are short on purpose: the difference between
     expensive and cheap motion is mostly that expensive motion is over before
     you have finished noticing it. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 640ms;
  --dur-reveal: 900ms;

  /* ── Elevation ───────────────────────────────────────────────────────────
     Used only where something has literally lifted under the pointer. A
     resting shadow on a static card is the SaaS look this design is avoiding.
     Three stacked layers rather than one blur: a contact shadow, a mid, and a
     wide ambient, which is what makes it read as light rather than as grey. */
  --lift: 0 1px 2px rgba(10, 25, 47, 0.04), 0 10px 26px -14px rgba(10, 25, 47, 0.16),
    0 30px 64px -32px rgba(10, 25, 47, 0.2);
  --lift-sm: 0 1px 2px rgba(10, 25, 47, 0.04), 0 6px 18px -10px rgba(10, 25, 47, 0.14);

  /* Focus ring. Gold reads well on the light grounds (5.33:1 on white, 4.68:1
     on stone) but only manages 3.31:1 on ink — barely over the 3:1 floor WCAG
     1.4.11 sets for a focus indicator. Dark surfaces opt into the lighter gold
     below, which gets 7.51:1. */
  --focus-ring: var(--gold);
}

/* On a phone the bar is a fixed cost against 844px of screen, and the lockup
   inside it does not grow to fill 88px — it just sits in a lot of white. The
   whole system follows the token down. */
@media (max-width: 760px) {
  :root {
    --header-h: 66px;
    --header-h-set: 58px;
  }
}

/* Any section painted on the ink ground. Custom properties inherit, so this one
   class retunes the focus ring, the hairlines and the secondary type for
   everything inside it — components do not need on-ink variants for those. */
.vc-on-ink {
  --focus-ring: var(--gold-lt);
  --hair: var(--hair-ink);
  --hair-strong: var(--hair-ink-strong);
  --ink-label: var(--on-ink-muted);
  --ink-meta: var(--on-ink);
  --ink-body: var(--on-ink);
}

/* ── 3. Type ─────────────────────────────────────────────────────────────── */

/* Display — the name in the home hero, and nothing else. */
.vc-display {
  font-size: var(--t-display);
  line-height: 0.88;
  letter-spacing: var(--tr-display);
}

/* Page title — the h1 of every interior view. */
.vc-page-title {
  font-size: var(--t-h1);
  line-height: 0.96;
  letter-spacing: var(--tr-h1);
}

/* Section title — every h2 that opens a band. */
.vc-section-title {
  font-size: var(--t-h2);
  line-height: 1.04;
  letter-spacing: var(--tr-h2);
}

.vc-section-title--onink {
  color: #fff;
}

/* Entry title — card names, mentor names, clause headings. */
.vc-entry-title {
  font-size: var(--t-h3);
  line-height: 1.14;
  letter-spacing: var(--tr-h3);
}

/* The kicker above a heading. Gold, tracked wide, and always the first thing
   in its block — it is what tells the eye a new section has started. */
.vc-eyebrow {
  display: inline-block;
  font: 600 var(--t-label) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--gold);
}

/* The gold tick that precedes a kicker. Drawn rather than typed so it lines up
   with the cap height instead of a glyph's baseline. */
.vc-eyebrow::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 2px;
  margin-right: 12px;
  vertical-align: 0.28em;
  background: var(--metal);
}

.vc-eyebrow--lt {
  color: var(--gold-lt);
}

/* The smaller label: field names, data captions, column heads. No tick. */
.vc-micro {
  display: block;
  font: 600 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--ink-label);
  margin-bottom: var(--s3);
}

/* Uppercase inline link without a rule — social rows, footer, dialogs. */
.vc-caps {
  font: 600 var(--t-label) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

/* Body copy at reading size, held to a measure. */
.vc-body {
  font-size: var(--t-lead);
  line-height: 1.66;
  color: var(--ink-body);
  max-width: var(--measure);
}

/* ── 4. Layout ───────────────────────────────────────────────────────────── */

/* The page shell: centred column, fluid gutter, one band of vertical rhythm.
   Every full-width section on the site is one of these, which is what stops the
   bands drifting a few pixels apart from each other. */
.vc-shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--band) var(--gutter);
}

/* Fills its frame. Every photograph sits in an aspect-ratio box and is cropped
   to it, so this pairs with a wrapper that sets `aspect-ratio` and
   `overflow: hidden`. */
.vc-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The auto-fit grid behind nearly every multi-column block. */
.vc-autogrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 300px), 100%), 1fr));
  gap: var(--gap, clamp(24px, 3vw, 48px));
}

.vc-autogrid--end {
  align-items: end;
}

/* Section header — kicker and heading left, a link right, over a rule.

   The rule is the one place the design still uses weight: a 1px hairline the
   full width with a short length of metal laid over its left end. That reads as
   deliberate at a glance, where the 2px black slab it replaces read as a table
   border. */
.vc-ruled {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5) var(--s7);
  padding-bottom: var(--s6);
  margin-bottom: var(--rh-mb, 0);
  border-bottom: 1px solid var(--hair-strong);
}

.vc-ruled::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 84px;
  height: 2px;
  background: var(--metal);
}

/* The same device without the flex row, for blocks whose header is a single
   stacked group. */
.vc-block-header {
  position: relative;
  padding-bottom: var(--s6);
  margin-bottom: var(--mb, clamp(32px, 4vw, 56px));
  border-bottom: 1px solid var(--hair-strong);
}

.vc-block-header::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 84px;
  height: 2px;
  background: var(--metal);
}

.vc-ruled .vc-section-title,
.vc-block-header .vc-section-title {
  margin-top: var(--s4);
}

/* A band that sits on a ground other than the page's. The gradient is what
   keeps a large flat area from reading as dead: barely visible, but the eye
   registers that the surface has a top and a bottom. */
.vc-band-ink {
  position: relative;
  background: var(--ink);
  color: #fff;
  isolation: isolate;
}

.vc-band-ink::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(201, 165, 74, 0.09), transparent 58%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-deep) 100%);
}

/* ── 5. Motion ───────────────────────────────────────────────────────────── */

/* Scroll reveal.

   The hidden state is gated behind `scripting: enabled` and undone again in a
   <noscript> block in base.html, so text is never left invisible by a script
   that did not run. vc.js adds `.vc-seen` as each element crosses into view,
   and falls back to revealing everything at once where IntersectionObserver is
   missing.

   Only opacity and transform are animated: both are composited, so a page with
   thirty reveals on it still scrolls at frame rate on a phone. */
@media (scripting: enabled) {
  [data-vc-reveal] {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    will-change: opacity, transform;
  }

  [data-vc-reveal].vc-seen {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--dur-reveal) var(--ease) var(--vc-delay, 0ms),
      transform var(--dur-reveal) var(--ease) var(--vc-delay, 0ms);
    will-change: auto;
  }

  /* A photograph reveals by uncovering rather than by sliding: the frame stays
     put and the image is wiped in from the bottom. Costs one extra property and
     is the single most expensive-looking thing on the site. */
  [data-vc-reveal='image'] {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 100% 0);
  }

  [data-vc-reveal='image'].vc-seen {
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.15s var(--ease) var(--vc-delay, 0ms);
  }
}

@keyframes vcCue {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  45% {
    transform: scaleY(1);
    transform-origin: top;
  }
  55% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

@keyframes vcSheetIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes vcSheetLink {
  from {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes vcPanelIn {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* The hero photograph drifts over twenty seconds. Slow enough that it is not
   perceived as movement, only as the image being alive. */
@keyframes vcDrift {
  from {
    transform: scale(1.04) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.11) translate3d(0, -1.2%, 0);
  }
}

.vc-cue {
  animation: vcCue 2.8s ease-in-out infinite;
}

/* The reduced-motion contract.

   Everything above is decoration; none of it carries meaning. So this turns all
   of it off, reveals every element that was waiting to be revealed, and stops
   the smooth scrolling — which is the largest single movement on the site and
   the one the design's own reduced-motion block used to leave running. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-vc-reveal],
  [data-vc-reveal].vc-seen {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* ── 6. Chrome ───────────────────────────────────────────────────────────── */

/* The header.

   At rest it is transparent over whatever is beneath it, which lets the hero
   run to the top of the window. On scroll vc.js adds `.vc-header--set` and it
   becomes an opaque bar with a hairline and a shadow: the transition is what
   makes the navigation feel considered rather than merely fixed. */
.vc-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: transparent;
  transition:
    background var(--dur) var(--ease-soft),
    box-shadow var(--dur) var(--ease-soft),
    border-color var(--dur) var(--ease-soft);
  border-bottom: 1px solid transparent;
}

/* Interior pages, whose content starts below the bar rather than under it. The
   bar is opaque from the first paint and only gains its hairline and shadow
   once the page has actually moved. */
.vc-header--solid {
  background: var(--paper);
}

/* Scrolled. vc.js adds this on every page; on the three that open with a
   full-bleed image it is also what ends the transparent state.

   This was rgba(255, 255, 255, 0.82) with a saturate(1.6) blur(16px) frost, and
   a @supports block that fell back to an opaque bar "where the browser cannot
   frost … rather than becoming a translucent smear over the photograph beneath
   it". That sentence was right about the smear and wrong about who gets it: at
   0.82 the ground under the bar is whatever the reader has scrolled beneath it,
   in every browser. Measured on the set bar over the banner photograph, the
   current page's own nav link — gold, the one thing in the bar that says where
   you are — read 3.73:1 at 120px of scroll and 3.65:1 at 300px, against 5.33:1
   on paper. The language you are not in read 4.31:1. One turn of the wheel from
   the top of any page with a banner.

   Raising the alpha does not rescue it. --gold needs a ground of rgb(236) or
   lighter, which takes 0.93; .vc-lang-alt is ink at 62%, 5.01:1 on white, and
   needs 0.95 to reach 4.51:1 — a guarantee with a hundredth of margin, on a
   ground that still moves. At that point the frost is a declaration, not an
   effect. So the bar is opaque, which is what the @supports block already
   shipped and what a share of readers have always seen.

   The backdrop-filter goes with it: over an opaque background it paints
   nothing. It is safe to drop — nothing inside <header> is position: fixed, so
   no containing block goes with it. */
.vc-header--set {
  background: var(--paper);
  border-bottom-color: var(--hair);
  box-shadow: 0 1px 24px -12px rgba(10, 25, 47, 0.28);
}

/* Where the page under the header is dark — the two hero views — the bar's
   contents invert until it sets. `.vc-header--over` is put on by the template,
   not by script, so it is correct on the first paint. */
.vc-header--over:not(.vc-header--set) {
  --focus-ring: var(--gold-lt);
  color: #fff;
}

.vc-header--over:not(.vc-header--set) .vc-brand__logo {
  filter: brightness(0) invert(1);
}

.vc-header--over:not(.vc-header--set) .vc-nav-link,
.vc-header--over:not(.vc-header--set) .vc-lang__current,
.vc-header--over:not(.vc-header--set) .vc-burger {
  color: #fff;
}

.vc-header--over:not(.vc-header--set) .vc-lang-alt {
  color: rgba(255, 255, 255, 0.62);
}

.vc-header--over:not(.vc-header--set) .vc-lang__sep {
  color: rgba(255, 255, 255, 0.34);
}

.vc-header--over:not(.vc-header--set) .vc-burger {
  border-color: rgba(255, 255, 255, 0.32);
}

.vc-header--over:not(.vc-header--set) .vc-btn-ink {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

/* The ring's ground, while the bar is still transparent.

   In this state the bar has no surface: the controls sit directly on the hero
   photograph, and so does the ring three pixels outside them. --gold-lt was
   chosen against ink, and against ink it is fine — but this is not ink, it is
   a picture, and the picture is the editor's.

   Tabbed through the deployed page with a real Tab key, the ring measured
   against the pixels it covers: 2.75:1 on the language switch with 74 of its
   120 ring pixels under 3, 2.84:1 on «Diventa Partner» with 39 of 821, 2.88:1
   on «Contatti» with 2 of 385. The rest of the bar cleared 3.87 to 5.75 — on
   this photograph. That spread, from 2.75 to 5.75 across seven controls
   wearing one colour, is the tell: the number belongs to the picture, not to
   the design, and the next picture redraws all seven.

   So the ring gets a ground instead of a better colour. There is no better
   colour: white loses on the jump's white wing (1.69:1), gold loses on the
   grey (1.88:1), and a photograph has both. Seven pixels of ink-deep behind
   the ring make it 7.92:1 and keep it there.

   Only while the bar is transparent. Once .vc-header--set arrives the bar is
   its own near-white surface, --focus-ring falls back to --gold, and that is
   5.06:1 without any help. */
.vc-header--over:not(.vc-header--set) .vc-brand:focus-visible,
.vc-header--over:not(.vc-header--set) .vc-nav-link:focus-visible,
.vc-header--over:not(.vc-header--set) .vc-lang-alt:focus-visible,
.vc-header--over:not(.vc-header--set) .vc-burger:focus-visible {
  box-shadow: 0 0 0 7px var(--ink-deep);
}

/* The button is the one control here that already carries a shadow, so its
   ground has to be written on top of that hairline rather than instead of it.
   The specificity is deliberate: this must outrank the rule above it, which
   sets the hairline alone. */
.vc-header--over:not(.vc-header--set) .vc-btn-ink:focus-visible {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.34),
    0 0 0 7px var(--ink-deep);
}

.vc-header__bar {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  transition: height var(--dur) var(--ease-soft);
}

.vc-header--set .vc-header__bar {
  height: var(--header-h-set);
}

.vc-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.vc-brand__logo {
  height: 34px;
  width: auto;
  display: block;
  transition:
    height var(--dur) var(--ease-soft),
    filter var(--dur) var(--ease-soft);
}

.vc-header--set .vc-brand__logo {
  height: 28px;
}

.vc-brand__wordmark {
  font: 600 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  padding-left: 14px;
  border-left: 1px solid currentColor;
  /* The divider must not carry the full weight of the type it separates. */
  border-left-color: color-mix(in srgb, currentColor 26%, transparent);
}

.vc-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.9vw, 32px);
}

.vc-lang {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding-right: 2px;
}

.vc-lang__current {
  font: 600 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink);
}

.vc-lang__sep {
  font: 400 var(--t-micro) / 1 Archivo, sans-serif;
  color: var(--hair-strong);
}

.vc-burger {
  display: none;
  background: none;
  border: 1px solid var(--hair-strong);
  padding: 11px 15px;
  font: 600 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink);
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

/* Every hover state that *inverts* — swaps a ground for its opposite — is
   behind `hover: hover` throughout this sheet. A touch device applies :hover on
   tap and leaves it applied until something else is tapped, so an unguarded
   inversion means a white slab sitting on the dark menu after it has opened.
   The subtle hovers (a colour shift, a 5px step) are left alone: they read as
   press feedback on touch rather than as a stuck state. */
@media (hover: hover) {
  .vc-burger:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
  }
}

@media (max-width: 1120px) {
  .vc-nav {
    display: none !important;
  }
  .vc-burger {
    display: block !important;
  }
}

@media (max-width: 1300px) {
  .vc-brand__wordmark {
    display: none !important;
  }
}

/* The menu sheet. */
.vc-sheet {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--ink);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 4.6vw, 56px);
  animation: vcSheetIn var(--dur) var(--ease-soft) both;
  overflow-y: auto;
}

.vc-sheet::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 60% at 8% 4%, rgba(201, 165, 74, 0.13), transparent 60%),
    linear-gradient(180deg, transparent 40%, rgba(7, 18, 36, 0.9) 100%);
}

.vc-sheet > * {
  position: relative;
}

.vc-sheet[hidden] {
  display: none;
}

.vc-sheet__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--hair-ink);
}

.vc-sheet__logo,
.vc-footer__logo {
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.vc-sheet__logo {
  height: 54px;
}

.vc-sheet__close {
  background: none;
  border: 1px solid var(--hair-ink-strong);
  color: #fff;
  padding: 11px 15px;
  font: 600 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

/* Guarded: the burger and this button occupy the same corner, so on touch the
   sheet would open with its close control already inverted under the finger. */
@media (hover: hover) {
  .vc-sheet__close:hover {
    background: #fff;
    border-color: #fff;
    color: var(--ink);
  }
}

.vc-sheet__links {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  margin-bottom: auto;
  padding: var(--s7) 0;
}

/* Each link carries its own stagger. The custom property is set inline by the
   template from forloop.counter, so the sheet opens as a cascade rather than
   as a block. */
.vc-sheet__link {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2.4vw, 32px);
  font-family: 'Playfair Display', serif;
  font-size: clamp(30px, 6.4vw, 62px);
  line-height: 1.1;
  letter-spacing: var(--tr-h2);
  color: #fff;
  padding: clamp(6px, 0.9vw, 11px) 0;
  animation: vcSheetLink var(--dur-slow) var(--ease) both;
  animation-delay: calc(60ms + var(--i, 0) * 45ms);
  transition: color var(--dur-fast) var(--ease);
}

/* The index numeral. An archive numbers its contents; this is the cheapest
   possible way to say so, and it gives the eye a left edge to run down. */
.vc-sheet__link::before {
  content: counter(vc-sheet-item, decimal-leading-zero);
  counter-increment: vc-sheet-item;
  font-family: 'Archivo', sans-serif;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  color: var(--gold-lt);
  opacity: 0.7;
  transition: opacity var(--dur-fast) var(--ease);
}

.vc-sheet__links {
  counter-reset: vc-sheet-item;
}

.vc-sheet__link:hover {
  color: var(--gold-hi);
}

.vc-sheet__link:hover::before {
  opacity: 1;
}

/* The page you are already on. Marked in the sheet as well as in the desktop
   nav, because the sheet is the only navigation a phone has. */
.vc-sheet__link[aria-current='page'] {
  color: var(--gold-lt);
}

.vc-sheet__link[aria-current='page']::before {
  opacity: 1;
}

.vc-sheet__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--hair-ink);
  font: 600 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

.vc-sheet__foot a {
  color: #fff;
  transition: color var(--dur-fast) var(--ease);
}

.vc-sheet__foot a:hover {
  color: var(--gold-hi);
}

.vc-sheet__social {
  color: var(--on-ink-muted);
}

/* The footer. */
.vc-footer {
  position: relative;
  background: var(--ink);
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}

.vc-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(80% 120% at 88% 100%, rgba(201, 165, 74, 0.12), transparent 62%),
    linear-gradient(180deg, var(--ink-deep) 0%, var(--ink) 40%, var(--ink-deep) 100%);
}

.vc-footer__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 104px) var(--gutter) clamp(28px, 3vw, 40px);
}

.vc-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s7);
  border-bottom: 1px solid var(--hair-ink-strong);
  padding-bottom: var(--s7);
}

.vc-footer__logo {
  height: clamp(76px, 8.6vw, 116px);
}

.vc-footer__motto {
  font: 600 var(--t-label) / 1.5 Archivo, sans-serif;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-top: var(--s5);
}

.vc-footer__email {
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 2.3vw, 32px);
  /* Display type: the 1.6 body leading it used to inherit made a single line
     sit in far too much space. Not tighter than 1.2, though — at the 20px floor
     of that clamp, 1.15 gave a 23px line box and this is a link, one pixel
     under the 24px minimum target WCAG 2.5.8 asks for. 1.25 × 20 = 25px. */
  line-height: 1.25;
  color: #fff;
  align-self: flex-end;
  word-break: break-word;
}

.vc-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s5);
  padding-top: var(--s5);
  font: 600 var(--t-micro) / 1.7 Archivo, sans-serif;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--on-ink-muted);
}

.vc-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
}

.vc-footer__links a {
  color: rgba(255, 255, 255, 0.62);
  transition: color var(--dur-fast) var(--ease);
}

.vc-footer__links a:hover {
  color: var(--gold-hi);
}

/* For text that only assistive technology needs — the word behind a ✓ or a ✗,
   and the copy confirmations. Clipped rather than `display: none`, which would
   take it out of the accessibility tree along with everything else. */
.vc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link. */
.vc-skip {
  position: absolute;
  left: -9999px;
}

/* The chip's own ink ground carries the text, but not the ring: `outline-offset:
   3px` puts the ring three pixels outside the chip, on whatever the page has
   there — and at the top-left of the home page that is the hero photograph.

   Measured on the deployed page, tabbing with a real Tab key and diffing the
   ring against the pixels it covers: 1.20:1 at 1280 with 754 of 804 ring pixels
   under the 3:1 that SC 1.4.11 asks of a focus indicator, and 1.57:1 on a phone
   with 808 of 808 under. Not an edge catching a bright patch — the whole ring,
   at the very first stop of the keyboard order.

   Two things were wrong. The ring was --gold, because .vc-skip sits outside
   .vc-on-ink and so never opted into the lighter step; and it had no ground of
   its own. Widening the ink under it by seven pixels fixes the second and makes
   the first worth doing: --gold-lt on --ink is 7.44:1, and it is 7.44:1 whoever
   uploads whatever photograph, because the ring no longer touches the picture.

   The shadow costs no layout — it is painted, like the outline, outside the box
   the chip occupies. */
.vc-skip:focus {
  left: 16px;
  top: 12px;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  --focus-ring: var(--gold-lt);
  box-shadow: 0 0 0 7px var(--ink);
  padding: 13px 18px;
  font: 600 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

/* ── 7. Components ───────────────────────────────────────────────────────── */

/* Photographs.

   The old sheet drove every image to full greyscale and resolved it on hover.
   That is a fifteen-year-old device and it threw away the one thing these
   photographs have. This desaturates lightly instead — enough to hold the
   palette together, little enough that the image still reads as a photograph —
   and resolves on hover. */
.vc-img {
  filter: saturate(0.72) contrast(1.05);
  transition:
    filter var(--dur-slow) var(--ease-soft),
    transform 1.4s var(--ease);
}

.vc-fig:hover .vc-img,
.vc-fig:focus-within .vc-img {
  filter: saturate(1) contrast(1);
}

.vc-zoom:hover .vc-img,
.vc-zoom:focus-within .vc-img {
  transform: scale(1.045);
}

/* A frame. Every photograph on the site is inside one of these: it clips the
   zoom, holds the aspect ratio, and paints the stone ground that shows while
   the image is still arriving. */
.vc-hide-sb::-webkit-scrollbar {
  display: none;
}

.vc-hide-sb {
  scrollbar-width: none;
}

/* WCAG 2.5.8 wants a 24×24 minimum target. The small uppercase links render
   11–20px tall, so this paints a 24px-tall hit area over them. It is an
   absolutely-positioned overlay inside the link's own box: the target grows,
   the layout does not move a pixel.

   It claims ::after, so it must not go on anything that draws its own — the
   rule links, the legal links and the terms actions all own that pseudo-element
   and are padded past 24px by themselves instead. Also not on anything already
   positioned (the skip link) or on links wrapping an image. */
.vc-tap {
  position: relative;
}

.vc-tap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: max(100%, 24px);
  transform: translateY(-50%);
}

/* For targets that are also too narrow, such as the two-letter locale switch. */
.vc-tap--wide::after {
  left: -6px;
  right: -6px;
}

/* Touch targets. On a touch screen every important control on the site gets a
   40px hit area; on a mouse nothing below changes at all, which is what the
   `pointer: coarse` gate is for.

   24 is the WCAG 2.5.8 minimum — a floor, not a comfortable thumb; Apple asks
   44pt and Material 48dp. Before this, at 375px, sixteen controls on the home
   page were between 24 and 34, and the imprint's email address was 19, which is
   under the floor.

   40 rather than 44 because it is measured, not chosen. Where the footer
   stacks — at 320 and 375px wide — its links are 17px tall and 24px apart,
   which is 41px centre to centre. A 44px overlay would make each neighbouring
   pair overlap by 3px, and the lower link would quietly take the taps meant for
   the upper one: worse than a small target, because nothing about it looks
   wrong. Everywhere else there is far more room — 94px at 768, 192px between
   the menu sheet's secondary links, 327px in the desktop footer — so 41 is the
   binding number and 40 clears it.

   If the footer's vertical rhythm is ever tightened, this has to come down
   with it. */
@media (pointer: coarse) {
  .vc-tap::after {
    height: max(100%, 40px);
  }

  /* The locale switch is two letters, so height was never its problem: it
     measures 31px across. `--wide`'s 6px a side gets it to 43 only if the
     overlay is allowed to be wider than the text, hence the explicit width
     rather than another pair of offsets. */
  .vc-tap--wide::after {
    left: 50%;
    right: auto;
    width: max(calc(100% + 12px), 40px);
    transform: translate(-50%, -50%);
  }

  /* ── Controls whose ::after is free, so they can take the same overlay ──
     They do not carry `.vc-tap` in the templates because on a mouse none of
     them needs it: the burger is a bordered button you aim at, the footer
     address is 32px of Playfair, the rail links and the brand page's copy
     buttons are wide. Height is what fails on a phone, and only there.

     Measured at 375px, before: burger 34, footer address 27, rail links 27 and
     28, copy buttons 27, imprint address **19**. The overlay is invisible, so
     each keeps the size it was drawn at and merely forgives a near miss.

     The imprint address is the one that was not merely uncomfortable. 19px is
     under the 24px WCAG 2.5.8 asks for, on the page art. 3 al. 1 let. s LCSl
     requires to be easy to reach, in both editions. It predates all of this —
     nothing here shrank it — but it is the only real failure the sweep found
     and it is fixed by the same line.

     `.vc-inline-link` is the one to keep an eye on: it is `display: inline` and
     sits inside running prose, so a 40px overlay on a 19px link reaches about
     10px into the lines above and below. Harmless while the only thing up there
     is text — all twenty pages were probed and no target loses its own centre —
     but two inline links stacked on consecutive lines would start fighting over
     the space between them. */
  .vc-burger,
  .vc-footer__email,
  .vc-inline-link,
  .vc-rail__link,
  .vc-brand-copy {
    position: relative;
  }

  .vc-burger::after,
  .vc-footer__email::after,
  .vc-inline-link::after,
  .vc-rail__link::after,
  .vc-brand-copy::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: max(100%, 40px);
    transform: translateY(-50%);
  }

  /* ── Controls that draw their own underline, so the overlay goes in ::before ──
     The legal links, the terms actions and the contact address each draw a rule
     in ::after, and a patron is a link wrapped round an image. All four leave
     ::before free and are already positioned, so they take the same overlay
     from the other side.

     Not by padding with a compensating negative margin, which is what this
     first tried. `margin-block` does not subtract from the margin an element
     already has, it replaces it — so on the four pages where these live it
     silently deleted the spacing the design had set, and /termini/ lost 16px
     while its actions stayed 26px tall, because the block underneath had been
     pulled up over the padding and was taking the taps. An overlay cannot do
     that: it is out of flow and has no margin to clobber. */
  .vc-legal__link,
  .vc-terms__action,
  .vc-contact__email,
  .vc-patron {
    position: relative;
  }

  .vc-legal__link::before,
  .vc-terms__action::before,
  .vc-contact__email::before,
  .vc-patron::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: max(100%, 40px);
    transform: translateY(-50%);
  }

  /* ── The one control with both pseudo-elements taken ──
     `.vc-rulelink` draws its rule in ::before and its arrow in ::after, so it
     is the only target here that has to grow by padding. It can: the negative
     margin is safe precisely because these sit in flex containers that space
     them with `gap` and give them no margin of their own — checked, not
     assumed, and the twenty-page sweep confirms no page moves.

     26px is the number that matters. Those four rule links — «Leggi il profilo
     completo», «Tutti i cavalli», «Registro gare», «Apri l'archivio» — are how
     a reader gets from the home page into the site at all, and they were the
     smallest targets on it. 15px and not 13: the four measure 26 and 27, so 13
     left two of them a pixel short of the 40 this aims at. */
  .vc-rulelink {
    padding-top: 15px;
    margin-top: -15px;
  }

  /* The wordmark is a 34px logo in a 68px bar, so there is room for the target
     to grow without the bar changing height. */
  .vc-brand {
    min-height: 40px;
  }
}

/* ── Links ───────────────────────────────────────────────────────────────── */

/* Navigation item. The active state is CSS on aria-current, which keeps the
   accessible marker and the visual marker from being able to drift apart. */
.vc-nav-link {
  position: relative;
  font: 600 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  padding: 10px 0;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease);
}

/* The gold rule wipes in from the left rather than fading: a transform on a
   pseudo-element, so it composites and never touches layout. */
.vc-nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--metal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.vc-nav-link:hover::after,
.vc-nav-link:focus-visible::after {
  transform: scaleX(1);
}

.vc-nav-link[aria-current='page'] {
  color: var(--gold);
}

.vc-nav-link[aria-current='page']::after {
  transform: scaleX(1);
}

.vc-header--over:not(.vc-header--set) .vc-nav-link[aria-current='page'] {
  color: var(--gold-hi);
}

/* Language switch — the inactive locale. */
.vc-lang-alt {
  position: relative;
  font: 600 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-label);
  transition: color var(--dur-fast) var(--ease);
}

a.vc-lang-alt:hover {
  color: var(--gold);
}

/* The design's "read more": uppercase, tracked, with a metal rule under it and
   an arrow that steps forward on hover.

   `padding-bottom: 14px` on an 11px line is what carries the whole control past
   the 24px minimum target on its own, so this does not need `.vc-tap` — which
   would fight it for ::after and leave the arrow stranded at the left edge. */
.vc-rulelink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 600 var(--t-label) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  padding-bottom: 14px;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease);
}

.vc-rulelink::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--metal);
}

/* The arrow is drawn, not typed: a glyph would carry the font's own sidebearing
   and would not sit on the cap height. */
.vc-rulelink::after {
  content: '';
  width: 16px;
  height: 6px;
  flex: 0 0 auto;
  background: currentColor;
  /* A shaft with a chevron on its end. */
  clip-path: polygon(
    0 42%,
    72% 42%,
    72% 0,
    100% 50%,
    72% 100%,
    72% 58%,
    0 58%
  );
  transition: transform var(--dur) var(--ease);
}

.vc-rulelink:hover,
.vc-rulelink:focus-visible {
  color: var(--gold);
}

.vc-rulelink:hover::after,
.vc-rulelink:focus-visible::after {
  transform: translateX(5px);
}

.vc-rulelink--lt {
  color: #fff;
}

.vc-rulelink--lt:hover,
.vc-rulelink--lt:focus-visible {
  color: var(--gold-hi);
}

.vc-rulelink--start {
  align-self: flex-start;
}

/* An inline link inside running text. */
.vc-inline-link {
  position: relative;
  background-image: linear-gradient(var(--gold-mid), var(--gold-mid));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition:
    color var(--dur-fast) var(--ease),
    background-size var(--dur) var(--ease);
}

.vc-inline-link:hover {
  color: var(--gold);
  background-size: 100% 2px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

/* The solid call-to-action, used as both <a> and <button>.

   The light sweep is the one overtly luxurious gesture in the design: a narrow
   diagonal highlight that crosses the face once on hover. It is a transform on
   a pseudo-element, so it composites, and it is over in two thirds of a second. */
.vc-btn-ink {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  border: 0;
  font: 600 var(--t-label) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  padding: 19px 30px;
  isolation: isolate;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.vc-btn-ink::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    115deg,
    transparent 34%,
    rgba(255, 255, 255, 0.18) 48%,
    transparent 62%
  );
  transform: translateX(-110%);
  transition: transform 0.72s var(--ease);
}

.vc-btn-ink:hover,
.vc-btn-ink:focus-visible {
  background: var(--ink-raised);
  transform: translateY(-2px);
  box-shadow: var(--lift-sm);
}

.vc-btn-ink:hover::after,
.vc-btn-ink:focus-visible::after {
  transform: translateX(110%);
}

.vc-btn-ink:active {
  transform: translateY(0);
}

/* Tighter variant in the header bar. */
.vc-btn-ink--sm {
  padding: 14px 22px;
  font-size: var(--t-micro);
}

.vc-btn-ink--dialog {
  padding: 16px 26px;
}

/* ── Data ────────────────────────────────────────────────────────────────── */

/* The fact strip: a label over a figure, in a row of hairline-separated cells.
   Was a bordered grid with a 2px cap; it is now a rhythm of hairlines with the
   figures set in the serif and the labels tracked wide beneath them.

   It is a <dl>, hence `margin: 0` against the 1em a user agent puts above and
   below one — the same defensive line .vc-imprint__value carries further down.
   Labelled facts are a description list; the browser's defaults for one were
   written for prose. */
.vc-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  border-top: 1px solid var(--hair-strong);
  margin: 0;
}

.vc-fact {
  position: relative;
  padding: var(--s5) var(--s5) var(--s5) 0;
  border-bottom: 1px solid var(--hair);
}

/* A short length of metal on the top edge of the first cell, so the strip reads
   as one object rather than as three. */
.vc-facts .vc-fact:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 48px;
  height: 2px;
  background: var(--metal);
}

/* A <dd> carries a 40px margin-inline-start that would indent every value away
   from its label and out of its grid column. */
.vc-fact__value {
  font-family: 'Playfair Display', serif;
  font-size: var(--t-h4);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
  margin: 0;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */

/* The horse card, and the pattern every other card follows: a framed
   photograph, a hairline, and a meta row. The lift on hover is small — two
   pixels and a soft shadow — because the photograph is already doing the work
   and a card that jumps reads as a web app rather than as a page. */
.vc-card {
  display: block;
  position: relative;
  transition: transform var(--dur) var(--ease);
}

.vc-card:hover {
  transform: translateY(-3px);
}

.vc-card__frame {
  position: relative;
  overflow: hidden;
  background: var(--stone);
  aspect-ratio: var(--ar, 3 / 4);
}

.vc-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s4);
  border-top: 1px solid var(--hair-strong);
  padding-top: var(--s4);
  margin-top: var(--s4);
  position: relative;
}

/* The rule under a card meta row grows from the left on hover — the same
   gesture as the navigation, so the two read as one language. */
.vc-card__meta::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  right: 0;
  height: 2px;
  background: var(--metal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}

.vc-card:hover .vc-card__meta::before,
.vc-card:focus-within .vc-card__meta::before {
  transform: scaleX(1);
}

/* ── Fields ──────────────────────────────────────────────────────────────── */

.vc-field-label {
  display: block;
  font: 600 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--ink-label);
  margin-bottom: var(--s3);
}

/* A <span> in the markup, because it sits inside a <label> where a <div> would
   be invalid. It has to be a block for the field to fill it. */
.vc-field-wrap {
  position: relative;
  display: block;
}

.vc-field {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid var(--hair-strong);
  background: none;
  padding: 12px 0;
  font: 400 var(--t-body) Archivo, sans-serif;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease);
}

.vc-field::placeholder {
  color: var(--ink-label);
}

/* The gold rule under a focused field grows from the left. Drawn on the
   wrapper, because a border cannot be animated from one end. */
.vc-field-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--metal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.vc-field-wrap:focus-within::after {
  transform: scaleX(1);
}

textarea.vc-field {
  resize: vertical;
  min-height: 108px;
}

/* ── Dialogs ─────────────────────────────────────────────────────────────── */

.vc-scrim {
  position: fixed;
  inset: 0;
  background: rgba(7, 18, 36, 0.86);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  animation: vcSheetIn var(--dur) var(--ease-soft) both;
}

.vc-scrim[hidden] {
  display: none;
}

/* The full-bleed button that closes a dialog when the backdrop is clicked. */
.vc-dismiss {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: none;
  cursor: default;
}

/* ── 8. Views ────────────────────────────────────────────────────────────── */

/* ── Home: hero ──────────────────────────────────────────────────────────── */

.vc-hero {
  position: relative;
  min-height: min(94vh, 940px);
  display: flex;
  overflow: hidden;
  background: var(--ink);
  /* The header sits over the hero, so the hero owes it that much clearance. */
  padding-top: var(--header-h);
  margin-top: calc(var(--header-h) * -1);
}

.vc-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  filter: contrast(1.06) brightness(0.82) saturate(0.9);
  transform: scale(1.04);
  animation: vcDrift 24s var(--ease-soft) infinite alternate;
}

/* The scrim.

   Four stops rather than three, and a vignette over the top of them. The extra
   stop is at 62%: without it the gradient's midpoint landed exactly where the
   headline sits and the type had a visible band running through it. */
.vc-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(10, 25, 47, 0.5), transparent 62%),
    linear-gradient(
      180deg,
      rgba(7, 18, 36, 0.62) 0%,
      rgba(10, 25, 47, 0.16) 34%,
      rgba(10, 25, 47, 0.44) 62%,
      rgba(7, 18, 36, 0.92) 100%
    );
}

/* A four-column hairline grid over the photograph. It is very nearly invisible
   — 5% white — and it is the reason the hero reads as measured rather than as a
   stock image with type on it. Hidden on phones, where four columns of grid
   over a 375px image is just noise. */
.vc-hero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.vc-hero__grid span {
  border-left: 1px solid rgba(255, 255, 255, 0.055);
}

.vc-hero__grid span:first-child {
  border-left-color: transparent;
}

@media (max-width: 760px) {
  .vc-hero__grid {
    display: none;
  }
}

.vc-hero__inner {
  position: relative;
  /* The stacking context the kicker's veil resolves its `z-index: -1` in, so
     that the veil lands behind everything in here and still in front of the
     scrim. See the rule on .vc-hero__kicker::before; without this line the
     veil is painted over the name. */
  isolation: isolate;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(36px, 4.4vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* The crest sits above the kicker as a seal, deliberately smaller than the
   headline so it introduces the name rather than competing with it.

   Only the crest, not the whole logo file: that file is crest + wordmark, and
   the wordmark reads "Vittoria Camponovo" — the same words as the <h1> directly
   below it. Showing both would say the name twice in the same eyeful.

   The crop is measured, not guessed. The source is 677×369 with the crest
   occupying x 211–461, y 22–271 (a 251×250 square, separated from the wordmark
   by a transparent band at y 272–277). The percentages are that box expressed
   against the frame. */
.vc-crest {
  display: block;
  position: relative;
  width: clamp(40px, 5vw, 78px);
  aspect-ratio: 251 / 250;
  overflow: hidden;
  margin-bottom: clamp(18px, 2.2vw, 28px);
}

.vc-crest img {
  position: absolute;
  width: 269.721%; /* 677 / 251 */
  height: auto;
  left: -84.064%; /* -211 / 251 */
  top: -8.8%; /* -22 / 250, resolved against the frame height */
  max-width: none; /* the base layer caps images at 100%; this one must overflow */
  filter: brightness(0) invert(1);
  opacity: 0.94;
}

/* One line on anything wider than a phone; `/1` keeps it tight to the crest
   above it. No `max-width` here on purpose: `ch` measures the zero glyph and
   knows nothing about tracking, so 34ch resolved to 215px against a string that
   is 351px in Italian and 364px in English — the kicker wrapped at 1440px, and
   the English one broke to three lines, all set solid. Below 430px the viewport
   does force a break, and the rule at the end of this block handles it. */
.vc-hero__kicker {
  display: block;
  font: 600 var(--t-label) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--gold-hi);
  margin-bottom: var(--s5);
}

/* 430px is where the kicker stops fitting: the longer of the two translations
   runs 364px and the gutters take 44px off the viewport. Below that it has to
   break, and left alone it broke after the em dash — a line ending on a
   dangling connector with one word stranded underneath. Balanced it splits
   mid-phrase, and the leading has to come back for the second line. */
@media (max-width: 430px) {
  .vc-hero__kicker {
    line-height: 1.6;
    text-wrap: balance;
  }
}

/* The ground under the kicker, and under the name behind it.

   The kicker measured 1.54 to 1.69:1 at 1280 against the 4.5 that 11px asks
   for, with between 352 and 1528 of its ink pixels under threshold — not a
   corner of a letter catching a bright spot, but the line. The name failed
   with it, at 2.73 against the 3.0 large text needs.

   The two figures for each are the same page at two moments. .vc-hero__image
   drifts from scale(1.04) to scale(1.11) and up 1.2% over 24 seconds, so the
   photograph under this line is never the same for long, and the range is what
   a visitor actually gets. Worth knowing before measuring anything here: a
   headless browser reports `prefers-reduced-motion: reduce`, the block near
   the top of this file then pins every animation to 0.01ms, and the hero
   freezes on its first frame — which happens to be the kindest one. Measured
   that way the kicker reads 1.69 and the name 3.03, and the name looks like it
   passes. Both readings are of a frame most people never see.

   Two things put it there and they compound. The scrim's linear gradient dips
   to 0.16 at 34% and climbs back to 0.44 at 62%, so where the kicker sits —
   42.5% of the hero — it resolves to 0.25; that is measured off the rendered
   pixels and agrees with the interpolation. And the vignette above it is
   already transparent past 62% of its radius, which at that height is exactly
   where it has run out. The kicker landed in the hollow between the two, and
   under it the photograph is rgb(199,199,199): the white wing of the jump.

   No colour fixes this, which is worth writing down because it is the first
   thing you would try. Against a backdrop that light --gold-hi gives 1.69, the
   darker --gold-lt gives 1.39 — nearer the grey, not further from it — and
   even pure white reaches only 2.75. The ground has to come down. 0.65 total
   is what 4.5:1 needs against the 0.25 already there, so 0.6 added on top
   composites to 0.70 and measures 5.48:1 at 1280 and 5.79 on a phone, with no
   ink pixel under threshold at any point in the drift.

   5.48 at every one of the five phases sampled, to three figures, is the point
   of the exercise rather than a coincidence: past this density the ground under
   the line is the veil and not the picture, so it no longer matters which
   photograph an editor uploads or where it happens to be bright.

   Anchored to the kicker and not to a percentage of the hero, which is what
   this first tried. The content block is justified to the bottom, so a longer
   hero_kicker or hero_title pushes this line upward — a title wrapping to two
   would move it 123px, out of any fixed band and back onto the bare
   photograph, with nothing to show that it had happened. Anchored here it
   follows the line in either language and at any length an editor types.

   Full-bleed by way of the negative insets, which is safe only because
   .vc-hero is `overflow: hidden`: they cannot reach the page and cannot put a
   horizontal scrollbar on it.

   `position: relative` here is for the anchoring and nothing else: it makes
   this line the containing block the veil is measured against. The stacking
   context the veil's `z-index: -1` resolves in is deliberately NOT here but on
   .vc-hero__inner, and the difference is the whole of what this rule got wrong
   the first time.

   Isolating the kicker itself put the veil behind this line and in front of
   its siblings, because a `relative` flex item is painted with the positioned
   descendants, after the in-flow ones — and .vc-hero__title, .vc-crest and the
   rest are in-flow. So a 0.6 band went over the top of the name: the white
   glyphs, 255 in the render, came out at 107 and climbed back to 229 down the
   fade. Nothing in a contrast reading catches that, because the foreground it
   divides by is the computed `color`, which is still #fff, and not the pixel
   that was actually painted. It reported the name improved while the name was
   being greyed out.

   Isolating .vc-hero__inner instead puts the veil in that element's negative
   layer, which is painted before all of its content and after everything
   outside it: behind the crest, this line, the name, the rule and the tagline,
   and still in front of the scrim and the photograph. */
.vc-hero__kicker {
  position: relative;
}

.vc-hero__kicker::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -50vw;
  right: -50vw;
  top: 50%;
  height: 300px;
  transform: translateY(-50%);
  /* A short plateau and long feathers: 45px of full density either side of the
     line, then 105px to fade to nothing at each end. No edge to see. */
  background: linear-gradient(180deg,
    rgba(7, 18, 36, 0) 0%,
    rgba(7, 18, 36, 0.6) 35%,
    rgba(7, 18, 36, 0.6) 65%,
    rgba(7, 18, 36, 0) 100%);
  pointer-events: none;
}

.vc-hero__title {
  color: #fff;
  max-width: 15ch;
  /* The name is the only thing on the site set this large; the shadow is what
     keeps it legible over the lightest part of a photograph that can change. */
  text-shadow: 0 2px 40px rgba(7, 18, 36, 0.45);
}

/* The rule under the name, drawn in metal and wiped in on load. */
.vc-hero__rule {
  height: 2px;
  width: min(240px, 42%);
  margin: clamp(24px, 2.8vw, 38px) 0 var(--s5);
  background: var(--metal);
  transform-origin: left;
}

/* `balance` rather than a measure alone: at 36ch the tagline broke after «LA»,
   which is the kind of line ending the eye trips on. Balancing splits it at the
   full stop instead, and keeps doing so as the viewport changes. */
.vc-hero__tagline {
  font: 500 clamp(11px, 1.15vw, 13.5px) / 1.7 Archivo, sans-serif;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  max-width: 44ch;
  text-wrap: balance;
}

/* The primary call to action.

   `align-self` because .vc-hero__inner is a column flex container: left alone an
   inline-flex button stretches to the full width of the shell, which is the same
   thing .vc-lightbox__close solves the same way.

   Solid, deliberately, and not the glass treatment the header's button takes
   over this same photograph (see `.vc-header--over .vc-btn-ink`). That one is
   translucent because it is secondary to whatever page it floats above; this is
   the primary action, it is the only filled shape in a hero that is otherwise
   all type, and above 1120px both are on screen at once — solid against glass
   is what says which of the two is the offer.

   It sits low enough in the hero that the scrim behind it is already near
   opaque ink, so it does not depend on which photograph an editor uploads. */
.vc-hero__cta {
  align-self: flex-start;
  margin-top: clamp(28px, 3.4vw, 44px);
}

/* The ring's ground, for the last control on this page that was still standing
   on the photograph.

   This one passed — 3.63:1 at 1280 and 3.92 on a phone, both over the 3:1 that
   SC 1.4.11 asks — which is why it was left alone when the skip link and the
   bar were given theirs. Passing is not the same as being safe, and the reading
   said so plainly: the ring's pixels sat on three different backdrops,
   rgb(8,16,33) where the scrim has closed over the picture and rgb(66,75,89)
   where it has not, with the ratio running from 3.63 to 8.11 along one outline.
   A spread like that belongs to the photograph.

   What kept it above the floor is that .vc-hero__scrim reaches 0.9 opacity at
   the foot of the hero, and the button sits near the foot. That is a real
   protection and it is also a coincidence of layout: the content block is
   justified to the bottom, so a longer hero_title or a second line of kicker
   walks this button up the gradient into the thin part — the same drift that
   moved the kicker 123px and put it on the bare picture.

   Seven pixels of ink-deep, as under the bar, and the three backdrops become
   one. `--lift-sm` is restated because it is not this rule's to remove: the
   button's own :focus-visible sets it, and a box-shadow naming only the halo
   replaces the whole stack rather than adding to it. The specificity is
   deliberate for the same reason. */
.vc-hero .vc-btn-ink:focus-visible {
  box-shadow:
    var(--lift-sm),
    0 0 0 7px var(--ink-deep);
}

/* The scroll cue. Deliberately without the rule that used to run above it: a
   hairline the full width of the page with one small label under its left end
   read as an unfinished row rather than as a base line. */
.vc-hero__cue {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(32px, 4vw, 60px);
}

.vc-hero__cue-bar {
  display: block;
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, 0.72);
}

.vc-hero__cue-label {
  font: 600 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56);
}

/* ── Home: patrons ───────────────────────────────────────────────────────── */

.vc-patrons {
  background: var(--alabaster);
  border-bottom: 1px solid var(--hair);
}

.vc-patrons__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--s6) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
}

.vc-patrons__label {
  font: 600 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--ink-label);
}

.vc-patrons__logos {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4.6vw, 64px);
}

.vc-patron {
  display: block;
  position: relative;
  opacity: 0.4;
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.vc-patron img {
  height: 32px;
  width: auto;
  display: block;
  filter: grayscale(1);
  transition: filter var(--dur) var(--ease);
}

/* `opacity` composites the element and everything painted with it — its
   outline included. At 0.4 the ring's --gold came out of the renderer as
   rgb(204,190,163) on the alabaster band: 1.74:1, every one of its pixels
   under the 3:1 SC 1.4.11 requires, and not one pixel anywhere near the colour
   the sheet declares. That is why it read as no ring at all rather than as a
   faint one.

   Adding :focus-visible to the reveal is the whole fix, and it is the right
   one twice over. The ring returns to full --gold on --alabaster, 5.06:1; and
   a keyboard reaches the same logo a mouse reaches — lit and in colour —
   instead of a grey shape at 40% with an invisible ring around it. The reveal
   was never decoration here: it is what makes the indicator legible. */
.vc-patron:hover,
.vc-patron:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
}

.vc-patron:hover img,
.vc-patron:focus-visible img {
  filter: grayscale(0);
}

/* ── Home: intro ─────────────────────────────────────────────────────────── */

.vc-intro {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--band) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(36px, 5.4vw, 104px);
  align-items: start;
}

.vc-intro__title {
  margin-top: var(--s5);
  max-width: 16ch;
}

.vc-intro__body {
  display: flex;
  flex-direction: column;
  gap: var(--s7);
}

/* ── Home: quote ─────────────────────────────────────────────────────────── */

/* The pull quote, on stone with an oversized ghosted quotation mark behind it.
   The mark is decorative and aria-hidden in the template; it is what turns a
   paragraph of italic into a designed object. */
.vc-quote {
  position: relative;
  overflow: hidden;
  background: var(--stone-graded);
  border-top: 1px solid var(--hair-strong);
  border-bottom: 1px solid var(--hair-strong);
}

.vc-quote__inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--band) var(--gutter);
}

.vc-quote__mark {
  position: absolute;
  top: clamp(-20px, -1vw, 0px);
  left: calc(var(--gutter) - 0.06em);
  font-family: 'Playfair Display', serif;
  font-size: clamp(180px, 26vw, 380px);
  line-height: 1;
  color: var(--ink);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
}

.vc-quote__text {
  position: relative;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: var(--t-quote);
  line-height: 1.28;
  letter-spacing: -0.012em;
  max-width: 26ch;
}

.vc-quote__attribution {
  display: flex;
  align-items: center;
  gap: var(--s5);
  margin-top: clamp(32px, 4vw, 52px);
}

.vc-quote__rule {
  width: 64px;
  height: 2px;
  background: var(--metal);
}

.vc-quote__name {
  font: 600 var(--t-label) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}

/* ── Home: horse cards ───────────────────────────────────────────────────── */

.vc-horse-card__name {
  margin-top: var(--s2);
}

.vc-horse-card__breeding {
  font: 500 var(--t-micro) / 1.7 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-meta);
  margin-top: 10px;
}

.vc-horse-card__year {
  font: 600 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  color: var(--ink-label);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

/* The tier: the chapter label above the horse's name. A `.vc-micro` in gold —
   the same device the section kickers use, so the card reads as a small
   section rather than as a component with a badge on it. */
.vc-horse-card__tier {
  color: var(--gold);
  margin-bottom: 10px;
}

/* ── Home: teasers ───────────────────────────────────────────────────────── */

.vc-teaser__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  font: 600 var(--t-label) / 1.4 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  margin-top: var(--s4);
  border-top: 1px solid var(--hair-strong);
  padding-top: var(--s4);
  position: relative;
}

.vc-teaser__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  right: 0;
  height: 2px;
  background: var(--metal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}

/* The arrow at the right end of the caption row, which is what the
   space-between is holding a place for. */
.vc-teaser__title::after {
  content: '';
  width: 16px;
  height: 6px;
  flex: 0 0 auto;
  background: currentColor;
  clip-path: polygon(0 42%, 72% 42%, 72% 0, 100% 50%, 72% 100%, 72% 58%, 0 58%);
  transition:
    transform var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.vc-teaser:hover .vc-teaser__title::before {
  transform: scaleX(1);
}

.vc-teaser:hover .vc-teaser__title::after {
  transform: translateX(5px);
}

.vc-teaser:hover .vc-teaser__title {
  color: var(--gold);
}

/* ── Home: partnership ───────────────────────────────────────────────────── */

.vc-partnership {
  position: relative;
  overflow: hidden;
  background: var(--stone-graded);
  border-top: 1px solid var(--hair-strong);
}

.vc-partnership__inner {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--band-tight) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(32px, 4.6vw, 80px);
  align-items: center;
}

.vc-partnership__title {
  margin-top: var(--s5);
  max-width: 18ch;
}

.vc-partnership__cta {
  margin-top: var(--s7);
}

.vc-marks {
  border-top: 1px solid var(--hair-strong);
  position: relative;
}

.vc-marks::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 48px;
  height: 2px;
  background: var(--metal);
}

.vc-mark {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--hair);
}

.vc-mark__name {
  font: 600 clamp(13px, 1.15vw, 15px) / 1.3 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

.vc-mark__category {
  font: 500 var(--t-micro) / 1.3 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-label);
  text-align: right;
}

/* ── Timeline ────────────────────────────────────────────────────────────── */

/* Shown twice: on the ink band of the home page and on the stone band of the
   profile page. Only the palette differs.

   The spine is new. Each row hangs off a vertical hairline with a gold node at
   its period, which is what turns five stacked rows into a trajectory. */
.vc-timeline {
  position: relative;
}

.vc-tl {
  position: relative;
  display: grid;
  /* Fixed three-column template, not an auto-fit track list: the 820px media
     query collapses it to one column before the minimums could ever overflow. */
  grid-template-columns: minmax(140px, 1fr) minmax(170px, 1.2fr) minmax(230px, 2.4fr);
  gap: clamp(16px, 2.6vw, 48px);
  padding: clamp(26px, 3vw, 38px) 0 clamp(26px, 3vw, 38px) clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--hair);
  transition: background var(--dur) var(--ease);
}

/* The spine. */
.vc-tl::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--hair-strong);
}

/* The node. */
.vc-tl::after {
  content: '';
  position: absolute;
  left: -3px;
  top: clamp(30px, 3.2vw, 43px);
  width: 7px;
  height: 7px;
  background: var(--gold-mid);
  border-radius: 50%;
  transition:
    transform var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.vc-tl:hover::after {
  transform: scale(1.5);
  background: var(--gold-lt);
}

.vc-tl__period {
  font: 600 var(--t-label) / 1.4 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.vc-tl__level {
  font-size: var(--t-h3);
  line-height: 1.16;
  letter-spacing: var(--tr-h3);
}

.vc-tl__milestone {
  font-size: var(--t-small);
  line-height: 1.68;
  color: var(--ink-meta);
}

.vc-tl--dark .vc-tl__period {
  color: var(--gold-lt);
}

.vc-tl--dark .vc-tl__level {
  color: #fff;
}

.vc-tl--dark .vc-tl__milestone {
  color: rgba(255, 255, 255, 0.64);
}

.vc-tl--dark::after {
  background: var(--gold-lt);
}

@media (max-width: 820px) {
  .vc-tl {
    grid-template-columns: 1fr;
    gap: var(--s2);
  }
  .vc-tl__level {
    margin-top: var(--s1);
  }
  .vc-tl::after {
    top: clamp(28px, 3.2vw, 40px);
  }
}

/* ── Profile ─────────────────────────────────────────────────────────────── */

.vc-masthead {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 120px) var(--gutter) var(--band);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(36px, 5.4vw, 96px);
  align-items: center;
}

.vc-masthead__name {
  margin-top: var(--s5);
}

.vc-masthead__bio {
  margin-top: var(--s6);
  max-width: 52ch;
}

.vc-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin-top: var(--s9);
  border-top: 1px solid var(--hair-strong);
  padding-top: var(--s6);
  position: relative;
}

.vc-notes::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 48px;
  height: 2px;
  background: var(--metal);
}

/* h2 on the profile page, h3 inside the philosophy band: these are the first
   subsections under their page's h1, and the rank is what assistive technology
   navigates by. The look is the same either way because it comes from here. */
.vc-note__title {
  font: 700 var(--t-label) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  margin-bottom: var(--s4);
}

.vc-note__body {
  font-size: var(--t-small);
  line-height: 1.72;
  color: var(--ink-meta);
}

.vc-portrait {
  position: relative;
  margin: 0;
}

.vc-portrait__frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--stone);
  position: relative;
}

.vc-portrait__caption {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  border-top: 1px solid var(--hair-strong);
  padding-top: var(--s4);
  margin-top: var(--s4);
  font: 600 var(--t-micro) / 1.4 Archivo, sans-serif;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--ink-meta);
}

.vc-philosophy {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: #fff;
}

.vc-philosophy::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(100% 70% at 88% 0%, rgba(201, 165, 74, 0.11), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-deep) 100%);
}

.vc-philosophy__quote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: var(--t-quote);
  line-height: 1.26;
  letter-spacing: -0.012em;
  color: #fff;
  margin-top: var(--s6);
  max-width: 24ch;
}

.vc-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(28px, 3.6vw, 64px);
  margin-top: clamp(48px, 6vw, 88px);
  border-top: 1px solid var(--hair-ink-strong);
  padding-top: var(--s7);
  position: relative;
}

.vc-pillars::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 48px;
  height: 2px;
  background: var(--metal);
}

.vc-pillar__title {
  color: var(--gold-lt);
  margin-bottom: var(--s4);
}

.vc-pillar__body {
  font-size: var(--t-small);
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.66);
}

.vc-mentor__frame {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--stone);
  position: relative;
}

.vc-mentor__body {
  border-top: 1px solid var(--hair-strong);
  padding-top: var(--s5);
  margin-top: var(--s5);
  position: relative;
}

.vc-mentor__body::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  right: 0;
  height: 2px;
  background: var(--metal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}

.vc-mentor:hover .vc-mentor__body::before {
  transform: scaleX(1);
}

.vc-mentor__name {
  font-size: var(--t-h3);
  line-height: 1.14;
  letter-spacing: var(--tr-h3);
}

.vc-mentor__role {
  font: 600 var(--t-label) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--gold);
  margin-top: var(--s3);
}

.vc-mentor__focus {
  font: 500 var(--t-micro) / 1.6 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-label);
  margin-top: var(--s4);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--hair);
}

.vc-mentor__description {
  font-size: var(--t-small);
  line-height: 1.74;
  color: var(--ink-meta);
  margin-top: var(--s5);
  max-width: 52ch;
}

.vc-growth {
  background: var(--stone-graded);
  border-top: 1px solid var(--hair-strong);
}

.vc-objective {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s7);
  margin-top: clamp(48px, 5vw, 80px);
}

.vc-objective__title {
  font-family: 'Playfair Display', serif;
  font-size: var(--t-h2);
  line-height: 1.06;
  letter-spacing: var(--tr-h2);
  margin-top: var(--s4);
  max-width: 20ch;
}

.vc-objective__note {
  font: 500 var(--t-micro) / 1.7 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-meta);
  margin-top: var(--s4);
}

/* The verified-record card. The one place a bordered box survives, because it
   is genuinely a card — an external record, lifted out of the page. */
.vc-archive-card {
  position: relative;
  overflow: hidden;
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--hair-strong);
  padding: var(--s6) var(--s7) var(--s6) var(--s6);
  max-width: 380px;
  transition:
    border-color var(--dur) var(--ease),
    background var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.vc-archive-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--metal);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-slow) var(--ease);
}

/* Guarded: a lifted, shadowed card left stuck under a finger reads as selected. */
@media (hover: hover) {
  .vc-archive-card:hover {
    background: var(--paper);
    border-color: var(--hair);
    transform: translateY(-3px);
    box-shadow: var(--lift-sm);
  }
}

.vc-archive-card:hover::before {
  transform: scaleY(1);
}

.vc-archive-card__kicker {
  display: block;
  font: 600 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s4);
}

.vc-archive-card__title {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: var(--t-h4);
  line-height: 1.2;
}

.vc-archive-card__action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  margin-top: var(--s5);
}

.vc-archive-card__action::after {
  content: '';
  width: 15px;
  height: 6px;
  background: currentColor;
  clip-path: polygon(0 42%, 72% 42%, 72% 0, 100% 50%, 72% 100%, 72% 58%, 0 58%);
  transition: transform var(--dur) var(--ease);
}

.vc-archive-card:hover .vc-archive-card__action::after {
  transform: translateX(5px);
}

/* ── Stable ──────────────────────────────────────────────────────────────── */

/* The interior banner. Shorter than the home hero and without the crest: it
   names a section rather than introducing the site. */
.vc-banner {
  position: relative;
  min-height: min(62vh, 580px);
  display: flex;
  overflow: hidden;
  background: var(--ink);
  padding-top: var(--header-h);
  margin-top: calc(var(--header-h) * -1);
}

.vc-banner__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: contrast(1.06) brightness(0.76) saturate(0.9);
  transform: scale(1.03);
  animation: vcDrift 28s var(--ease-soft) infinite alternate;
}

/* The scrim.

   Four stops rather than three, for the reason the hero has four: the ramp from
   40% to the foot was long and straight, and the text block sits inside it. The
   kicker lands at 0.72 of the way down, where the scrim had only reached about
   0.6 — enough for the white title, not for the gold above it. Measured on the
   stable banner, `.vc-eyebrow--lt` read 4.15:1 in Italian and 3.49:1 in English:
   the same word, the same picture, different glyphs over a bright patch of it.

   The palette guarantees --gold-lt on ink, at 7.51:1. The ground here is not
   ink — it is a photograph, and the scrim's whole job is to make it ink again
   where type sits. Below about 0.7 it now does. This is not about one picture:
   every page with a banner brings its own, and the two that failed failed on
   the bright part of theirs. */
.vc-banner__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(10, 25, 47, 0.44), transparent 64%),
    linear-gradient(
      180deg,
      rgba(7, 18, 36, 0.58) 0%,
      rgba(10, 25, 47, 0.24) 40%,
      rgba(10, 25, 47, 0.7) 66%,
      rgba(7, 18, 36, 0.9) 100%
    );
}

.vc-banner__inner {
  position: relative;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(36px, 4vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.vc-banner__title {
  margin-top: var(--s5);
  color: #fff;
  text-shadow: 0 2px 40px rgba(7, 18, 36, 0.4);
}

.vc-standfirst {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 76px) var(--gutter) clamp(32px, 4vw, 56px);
}

.vc-standfirst p {
  font-size: var(--t-lead);
  line-height: 1.62;
  color: var(--ink-body);
  max-width: 54ch;
}

/* The horse spread. Alternating: every second one puts the photograph on the
   right, so a page of six does not read as six copies of one layout. */
.vc-spread {
  border-top: 1px solid var(--hair);
}

.vc-spread__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--band-tight) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(32px, 4.6vw, 88px);
  align-items: center;
}

@media (min-width: 900px) {
  .vc-spread:nth-child(even) .vc-spread__figure {
    order: 2;
  }
}

.vc-spread__figure {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--stone);
  position: relative;
}

.vc-spread__name {
  font-size: clamp(32px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: var(--tr-h1);
  margin-top: var(--s5);
}

.vc-spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--s5);
  border-top: 1px solid var(--hair-strong);
  margin-top: var(--s7);
  padding-top: var(--s5);
  position: relative;
}

.vc-spec::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 48px;
  height: 2px;
  background: var(--metal);
}

.vc-spec__value {
  font-size: var(--t-small);
  line-height: 1.55;
}

.vc-traits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s6);
}

/* A trait is a word, not a form control. The old chip put a box round each one;
   this gives them a tinted ground and a hairline instead, which lets six of
   them sit in a row without reading as a toolbar. */
.vc-trait {
  background: var(--stone);
  box-shadow: inset 0 0 0 1px var(--hair);
  padding: 10px 15px;
  font: 600 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-meta);
  transition:
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

/* Guarded: these chips are spans, not controls — a tap that inverts one would
   suggest it does something. */
@media (hover: hover) {
  .vc-trait:hover {
    background: var(--ink);
    color: #fff;
  }
}

.vc-passport {
  font: 500 var(--t-micro) / 1.7 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-label);
  margin-top: var(--s6);
  font-variant-numeric: tabular-nums;
}

.vc-inset {
  margin: var(--s7) 0 0;
  max-width: 360px;
}

.vc-inset__frame {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--stone);
  position: relative;
}

.vc-active {
  border-top: 1px solid var(--hair-strong);
  background: var(--stone-graded);
}

.vc-active__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--band-tight) var(--gutter);
}

.vc-active__frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper);
  position: relative;
}

.vc-active__body {
  border-top: 1px solid var(--hair-strong);
  padding-top: var(--s4);
  margin-top: var(--s4);
  position: relative;
}

.vc-active__body::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  right: 0;
  height: 2px;
  background: var(--metal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}

.vc-card:hover .vc-active__body::before {
  transform: scaleX(1);
}

.vc-active__name {
  font-size: var(--t-h4);
  line-height: 1.18;
  letter-spacing: var(--tr-h3);
}

.vc-active__breeding {
  font: 500 var(--t-micro) / 1.7 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-meta);
  margin-top: 10px;
}

.vc-active__role {
  font-size: var(--t-small);
  line-height: 1.62;
  color: var(--ink-label);
  margin-top: 10px;
}

/* ── Ledger ──────────────────────────────────────────────────────────────── */

.vc-ledger-page {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 120px) var(--gutter) var(--band);
}

.vc-ledger-masthead {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(28px, 4.4vw, 80px);
  align-items: end;
  margin-top: var(--s5);
}

.vc-ledger-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
  gap: var(--s5);
}

.vc-ledger-meta__value {
  font-family: 'Playfair Display', serif;
  font-size: var(--t-h3);
  line-height: 1.1;
  letter-spacing: var(--tr-h3);
  font-variant-numeric: tabular-nums lining-nums;
}

.vc-scroller {
  margin-top: clamp(40px, 5vw, 72px);
  overflow-x: auto;
}

.vc-ledger {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  text-align: left;
  font-variant-numeric: tabular-nums lining-nums;
}

.vc-ledger thead tr {
  border-bottom: 1px solid var(--hair-strong);
}

.vc-ledger th {
  font: 600 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--ink-label);
  padding: 0 var(--s5) var(--s4) 0;
}

.vc-ledger th:last-child {
  padding-right: 0;
}

.vc-ledger tbody tr {
  border-bottom: 1px solid var(--hair);
  transition: background var(--dur) var(--ease);
}

.vc-ledger td {
  padding: var(--s6) var(--s5) var(--s6) 0;
  vertical-align: top;
  position: relative;
}

.vc-ledger td:last-child {
  padding-right: 0;
}

/* A gold marker slides out of the left edge of the hovered row. It is drawn on
   the first cell so it cannot affect the table's column widths. */
.vc-ledger tbody tr td:first-child::before {
  content: '';
  position: absolute;
  left: -14px;
  top: var(--s6);
  bottom: var(--s6);
  width: 2px;
  background: var(--metal);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease);
}

/* Guarded: the row is not a control, and on touch the tap that scrolled past it
   would leave one row tinted and flagged as though it had been chosen. */
@media (hover: hover) {
  .vc-ledger tbody tr:hover {
    background: var(--alabaster);
  }

  .vc-ledger tbody tr:hover td:first-child::before {
    transform: scaleY(1);
  }
}

.vc-ledger__year {
  font: 600 var(--t-small) / 1.4 Archivo, sans-serif;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.vc-ledger__speed {
  font-size: var(--t-small);
}

.vc-ledger__event {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: var(--t-h3);
  line-height: 1.18;
  letter-spacing: var(--tr-h3);
}

.vc-ledger__category {
  display: block;
  font: 500 var(--t-micro) / 1.5 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-label);
  margin-top: 10px;
}

.vc-ledger__stat-label {
  display: block;
  font: 500 var(--t-micro) / 1.4 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-label);
  margin-bottom: var(--s2);
}

.vc-ledger__stat-value {
  font-size: var(--t-h4);
  font-weight: 500;
  font-family: 'Playfair Display', serif;
}

.vc-ledger__licence {
  display: inline-block;
  background: var(--stone);
  box-shadow: inset 0 0 0 1px var(--hair);
  padding: 8px 12px;
  font: 600 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-label);
}

.vc-ledger__status {
  display: block;
  font: 500 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--gold);
  margin-top: var(--s3);
}

/* Below 820px the table reflows into stacked cards: the rows become grids and
   the header row is hidden. That drops the table out of the accessibility tree
   along with every cell's link to its column, which is why each cell also
   carries a `.vc-cell-label` that only becomes reachable here. */
@media (max-width: 820px) {
  .vc-ledger {
    min-width: 0;
  }
  .vc-ledger thead {
    display: none;
  }
  .vc-ledger tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s1) var(--s5);
    padding: var(--s5) 0;
  }
  .vc-ledger td {
    display: block;
    padding: 0;
  }
  .vc-ledger td[data-span] {
    grid-column: 1 / -1;
    padding-bottom: var(--s3);
  }
  .vc-ledger tbody tr td:first-child::before {
    display: none;
  }
}

/* Column names for the reflowed ledger. Above the breakpoint the real <th>s do
   the job, so this is display:none there and stays out of the accessibility
   tree. */
.vc-cell-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 821px) {
  .vc-cell-label {
    display: none;
  }
}

.vc-ledger-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: clamp(28px, 3.6vw, 64px);
  margin-top: clamp(48px, 6vw, 96px);
  border-top: 1px solid var(--hair-strong);
  padding-top: var(--s7);
  position: relative;
}

.vc-ledger-notes::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 48px;
  height: 2px;
  background: var(--metal);
}

.vc-ledger-notes__title {
  font: 700 var(--t-label) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s4);
}

.vc-ledger-notes__body {
  font-size: var(--t-small);
  line-height: 1.72;
  color: var(--ink-meta);
}

.vc-ledger-notes__link {
  font-size: var(--t-small);
  line-height: 1.72;
}

/* ── Archive ─────────────────────────────────────────────────────────────── */

.vc-archive-masthead {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: #fff;
  padding-top: var(--header-h);
  margin-top: calc(var(--header-h) * -1);
}

.vc-archive-masthead::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 80% at 82% 8%, rgba(201, 165, 74, 0.13), transparent 60%),
    linear-gradient(180deg, var(--ink-deep) 0%, var(--ink) 55%, var(--ink-deep) 100%);
}

.vc-archive-masthead__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 112px) var(--gutter) var(--band-tight);
}

.vc-archive-masthead__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(28px, 4.4vw, 80px);
  align-items: end;
  margin-top: var(--s5);
}

.vc-archive-masthead__title {
  color: #fff;
}

.vc-archive-masthead__standfirst {
  font-size: var(--t-lead);
  line-height: 1.66;
  color: rgba(255, 255, 255, 0.68);
  max-width: 52ch;
}

.vc-archive-masthead__socials {
  display: flex;
  gap: var(--s6);
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: var(--s5);
  border-top: 1px solid var(--hair-ink-strong);
  position: relative;
}

.vc-archive-masthead__socials::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 48px;
  height: 2px;
  background: var(--metal);
}

.vc-archive-masthead__socials a {
  color: #fff;
  transition: color var(--dur-fast) var(--ease);
}

.vc-archive-masthead__socials a:hover {
  color: var(--gold-hi);
}

.vc-archive-grid {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--band-tight) var(--gutter);
}

.vc-tile {
  display: block;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  width: 100%;
  position: relative;
  transition: transform var(--dur) var(--ease);
}

.vc-tile:hover {
  transform: translateY(-3px);
}

.vc-tile__frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--stone);
  position: relative;
}

/* The typographic tile — a chronicle with no photograph. It used to be a stone
   box with a hairline round it; it is now an ink panel, so a run of tiles has
   a deliberate dark beat in it rather than a gap where an image failed. */
.vc-tile__typographic {
  aspect-ratio: 4 / 5;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(22px, 2.4vw, 36px);
  background: var(--ink);
}

.vc-tile__typographic::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 70% at 20% 8%, rgba(201, 165, 74, 0.16), transparent 62%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-deep) 100%);
  transition: transform var(--dur-slow) var(--ease);
}

.vc-tile:hover .vc-tile__typographic::before {
  transform: scale(1.06);
}

.vc-tile__note {
  font: 600 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--gold-lt);
}

.vc-tile__caption {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.34;
  margin-top: var(--s4);
  color: #fff;
}

.vc-tile__meta {
  border-top: 1px solid var(--hair-strong);
  padding-top: var(--s4);
  margin-top: var(--s4);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s4);
  position: relative;
}

.vc-tile__meta::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  right: 0;
  height: 2px;
  background: var(--metal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}

.vc-tile:hover .vc-tile__meta::before {
  transform: scaleX(1);
}

.vc-tile__title {
  font-family: 'Playfair Display', serif;
  font-size: var(--t-h4);
  line-height: 1.2;
  color: var(--ink);
}

.vc-tile__category {
  font: 600 var(--t-micro) / 1.4 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--gold);
  text-align: right;
  flex: 0 0 auto;
}

/* The lightbox. One per chronicle, hidden in the document rather than built by
   JavaScript on demand: the markup is then in the page for a crawler and for
   anyone reading with JavaScript off, and opening one costs no work. */
.vc-lightbox {
  z-index: 140;
  padding: clamp(12px, 3vw, 48px);
}

.vc-lightbox__panel {
  position: relative;
  background: var(--paper);
  max-width: 1180px;
  width: 100%;
  max-height: 92vh;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.7);
  animation: vcPanelIn var(--dur-slow) var(--ease) both;
}

.vc-lightbox__media {
  min-height: 260px;
  background: var(--stone);
}

.vc-lightbox__media img {
  width: 100%;
  height: 100%;
  max-height: 80vh;
  object-fit: cover;
  display: block;
}

.vc-lightbox__typographic {
  height: 100%;
  min-height: 340px;
  position: relative;
  isolation: isolate;
  background: var(--ink);
  display: flex;
  align-items: flex-end;
  padding: clamp(26px, 4vw, 56px);
}

.vc-lightbox__typographic::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 70% at 20% 8%, rgba(201, 165, 74, 0.16), transparent 62%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-deep) 100%);
}

.vc-lightbox__typographic span {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: #fff;
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.3;
}

.vc-lightbox__body {
  padding: clamp(26px, 4vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vc-lightbox__title {
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.1;
  letter-spacing: var(--tr-h2);
  margin-top: var(--s5);
}

.vc-lightbox__caption {
  font-size: var(--t-body);
  line-height: 1.74;
  color: var(--ink-meta);
  margin-top: var(--s6);
  border-top: 1px solid var(--hair);
  padding-top: var(--s6);
}

.vc-lightbox__close {
  align-self: flex-start;
  margin-top: var(--s7);
}

/* ── Partners ────────────────────────────────────────────────────────────── */

.vc-partners-masthead {
  background: var(--stone-graded);
  border-bottom: 1px solid var(--hair-strong);
}

.vc-partners-masthead__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 112px) var(--gutter) var(--band-tight);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(28px, 4.4vw, 80px);
  align-items: end;
}

.vc-partners-masthead__title {
  margin-top: var(--s5);
}

.vc-partners-masthead__standfirst {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.36;
  letter-spacing: -0.01em;
  max-width: 28ch;
}

.vc-partners-body {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--band-tight) var(--gutter);
}

/* The callout. Was a full-width strip between two 2px rules; it is now a panel
   with a metal edge, which reads as an invitation rather than as a divider. */
.vc-callout {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  background: var(--alabaster);
  box-shadow: inset 0 0 0 1px var(--hair);
  padding: clamp(28px, 3.4vw, 44px) clamp(28px, 3.4vw, 48px);
}

.vc-callout::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--metal);
}

.vc-callout__text {
  font-size: var(--t-lead);
  line-height: 1.6;
  max-width: 46ch;
}

.vc-partner-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(36px, 4.6vw, 88px);
  margin-top: clamp(48px, 6vw, 88px);
}

.vc-partner-column__title {
  font-size: var(--t-h3);
  line-height: 1.14;
  letter-spacing: var(--tr-h3);
}

.vc-partner-column__blurb {
  font-size: var(--t-small);
  line-height: 1.72;
  color: var(--ink-label);
  margin-top: var(--s4);
  max-width: 44ch;
}

.vc-partner-column__list {
  border-top: 1px solid var(--hair-strong);
  margin-top: var(--s6);
  position: relative;
}

.vc-partner-column__list::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 48px;
  height: 2px;
  background: var(--metal);
}

/* Sponsor rows on the partners page. The name steps to the right on hover —
   the same forward gesture the arrow links use. */
/* Wrapping, with a tight row gap: the pair sits on one line wherever it fits,
   and the category drops beneath the name where it does not. That is content
   driven rather than viewport driven, which is what a list an editor fills in
   needs — «Ingegneria della calzatura» was overflowing a 320px screen by 28px,
   and the next category typed could be longer still. */
.vc-sponsor-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px var(--s5);
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--hair);
  transition: color var(--dur-fast) var(--ease);
}

.vc-sponsor-row__name {
  font: 600 clamp(15px, 1.4vw, 19px) / 1.25 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  transition: transform var(--dur) var(--ease);
  transform-origin: left;
  display: inline-block;
}

.vc-sponsor-row:hover {
  color: var(--gold);
}

.vc-sponsor-row:hover .vc-sponsor-row__name {
  transform: translateX(8px);
}

.vc-sponsor-row__category {
  font: 500 var(--t-micro) / 1.4 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-label);
  text-align: right;
  flex: 0 1 auto;
  /* `margin-left: auto` rather than leaning on space-between: it keeps the
     category hard right on the line it wraps onto too, where it is the only
     item and space-between would leave it at the left. */
  margin-left: auto;
}

.vc-partner-footnote {
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--hair);
  font: 500 var(--t-micro) / 1.5 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-label);
}

/* The proposal dialog. */
.vc-modal {
  z-index: 150;
  padding: clamp(12px, 3vw, 40px);
}

.vc-modal__panel {
  position: relative;
  background: var(--paper);
  max-width: 720px;
  width: 100%;
  padding: clamp(26px, 4vw, 60px);
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.7);
  animation: vcPanelIn var(--dur-slow) var(--ease) both;
}

.vc-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s5);
  border-bottom: 1px solid var(--hair-strong);
  padding-bottom: var(--s5);
  position: relative;
}

.vc-modal__head::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 64px;
  height: 2px;
  background: var(--metal);
}

.vc-modal__title {
  font-size: clamp(25px, 2.8vw, 36px);
  line-height: 1.1;
  letter-spacing: var(--tr-h2);
  margin-top: var(--s4);
}

.vc-modal__close {
  background: none;
  border: 1px solid var(--hair-strong);
  padding: 11px 15px;
  font: 600 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink);
  flex: 0 0 auto;
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

/* Guarded: same corner problem as the sheet's close button. */
@media (hover: hover) {
  .vc-modal__close:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
  }
}

.vc-modal__sent {
  padding: var(--s9) 0;
}

.vc-modal__sent[hidden] {
  display: none;
}

.vc-modal__sent-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--t-h3);
  letter-spacing: var(--tr-h3);
}

.vc-modal__sent-note {
  font: 500 var(--t-micro) / 1.7 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-meta);
  margin-top: var(--s3);
}

.vc-form {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  margin-top: var(--s7);
}

.vc-form[hidden] {
  display: none;
}

.vc-field-label--type {
  margin-bottom: var(--s3);
}

.vc-type-row {
  display: flex;
  gap: var(--s2);
}

.vc-type-button {
  flex: 1;
  padding: 15px;
  border: 1px solid var(--hair-strong);
  font: 600 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  background: transparent;
  color: var(--ink-label);
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.vc-type-button:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.vc-type-button[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.vc-form__submit {
  align-self: flex-start;
}

.vc-form__disclaimer {
  font: 500 var(--t-micro) / 1.7 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-label);
}

/* The way through to the brand guidelines. Deliberately not a second copy of
   `.vc-callout`, which sits a few hundred pixels above it: two identical
   alabaster panels in one column would read as a repeat rather than as two
   different offers. This one is bounded by a hairline and led by the crest —
   an entry in a list of one, not a second invitation. */
.vc-brand-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(48px, 6vw, 88px);
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hair-strong);
  color: var(--ink);
  transition:
    box-shadow var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
}

.vc-brand-card__mark {
  display: block;
  width: clamp(44px, 6vw, 60px);
}

.vc-brand-card__mark img {
  display: block;
  width: 100%;
  height: auto;
}

.vc-brand-card__body {
  display: block;
}

.vc-brand-card__title {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: var(--t-h4);
  line-height: 1.2;
  letter-spacing: var(--tr-h4);
  margin-top: var(--s3);
}

.vc-brand-card__blurb {
  display: block;
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--ink-label);
  margin-top: var(--s3);
  max-width: 52ch;
}

/* Same drawn arrow as `.vc-rulelink`, at the same weight — the page already
   teaches the reader that this shape means forward. */
.vc-brand-card__arrow {
  width: 20px;
  height: 7px;
  flex: 0 0 auto;
  background: currentColor;
  clip-path: polygon(0 42%, 72% 42%, 72% 0, 100% 50%, 72% 100%, 72% 58%, 0 58%);
  transition: transform var(--dur-fast) var(--ease);
}

.vc-brand-card:focus-visible .vc-brand-card__arrow {
  transform: translateX(6px);
}

@media (hover: hover) {
  .vc-brand-card:hover {
    background: var(--alabaster);
    box-shadow: inset 0 0 0 1px var(--ink);
  }

  .vc-brand-card:hover .vc-brand-card__arrow {
    transform: translateX(6px);
  }
}

/* Below the fold of a phone the three columns become two rows: the crest keeps
   the eyebrow company, and the arrow moves under the text rather than being
   squeezed into a column of its own. */
@media (max-width: 560px) {
  .vc-brand-card {
    grid-template-columns: auto 1fr;
    gap: var(--s4) var(--s5);
  }

  .vc-brand-card__body {
    grid-column: 1 / -1;
  }

  .vc-brand-card__arrow {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
  }
}

/* ── Brand guidelines ────────────────────────────────────────────────────── */

/* The page alternates paper and stone bands, which is what gives eight sections
   a rhythm without eight rules across the page. */
.vc-brand-band {
  padding-block: var(--band-tight);
}

.vc-brand-band--tint {
  background: var(--alabaster);
  border-block: 1px solid var(--hair);
}

.vc-brand-band__blurb {
  max-width: var(--measure);
  color: var(--ink-body);
  margin-top: var(--s4);
}

/* Logo plates. */
.vc-brand-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  margin-top: var(--s7);
}

.vc-brand-logo {
  margin: 0;
}

.vc-brand-logo__plate {
  display: grid;
  place-items: center;
  /* Generous, and a multiple of the clear-space rule this page teaches: the
     specimen must not sit closer to its own frame than the guideline allows. */
  padding: clamp(28px, 4vw, 52px);
  background: var(--paper);
  border: 1px solid var(--hair);
  min-height: 190px;
}

.vc-brand-logo__plate--ink {
  background: var(--ink);
  border-color: transparent;
}

.vc-brand-logo__img {
  width: 100%;
  max-width: 210px;
  height: auto;
  display: block;
}

/* The reversed lockup is the same file inverted, not a second asset. The source
   is near-black on transparent, so a straight invert lands on near-white. */
.vc-brand-logo__img--reversed {
  filter: brightness(0) invert(1);
}

.vc-brand-logo__img--crest {
  max-width: 120px;
}

.vc-brand-logo figcaption {
  display: block;
  margin-top: var(--s4);
  color: var(--ink-label);
}

.vc-brand-download {
  margin-top: var(--s7);
}

/* Clear space and minimum size. The two plates are made the same height rather
   than each taking its content's: side by side at different heights their
   captions started at different baselines, and the pair read as one diagram and
   one afterthought. Equal plates also do the minimum-size panel a favour — a
   24px lockup alone in a tall frame is the point being made. */
.vc-brand-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(24px, 3.2vw, 48px);
  margin-top: var(--s7);
  align-items: stretch;
}

.vc-brand-spec {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.vc-brand-clear,
.vc-brand-min {
  flex: 1;
}

.vc-brand-spec__caption {
  margin-top: var(--s5);
  font-size: var(--t-small);
  color: var(--ink-meta);
  max-width: 46ch;
}

.vc-brand-clear {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--s7);
  background: var(--paper);
  border: 1px solid var(--hair);
}

/* The diagram is the rule, not a picture of it: the padding is 50% of the
   logo's own height, so the dashed frame cannot drift from what the text says.
   The lockup is 677×369, and the specimen below is 200px wide — 109px tall —
   which is where 54.5px comes from. */
.vc-brand-clear__frame {
  --specimen: 200px;
  --logo-h: calc(var(--specimen) * 369 / 677);
  position: relative;
  padding: calc(var(--logo-h) / 2);
  border: 1px dashed var(--gold-mid);
}

.vc-brand-clear__logo {
  display: block;
  width: 200px;
  height: auto;
}

/* The two «½ h» labels sit in the middle of the band they measure, which is why
   they are positioned against the frame and not against the plate. They were
   outside the dashes and at different insets from each other, so neither one
   pointed at the gap it was naming. `--logo-h / 4` is the centre of a band that
   is `--logo-h / 2` wide. */
.vc-brand-clear__mark {
  position: absolute;
  font: 600 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  color: var(--gold);
  white-space: nowrap;
}

.vc-brand-clear__mark--x {
  top: 50%;
  left: calc(var(--logo-h) / 4);
  transform: translate(-50%, -50%);
}

.vc-brand-clear__mark--y {
  left: 50%;
  top: calc(var(--logo-h) / 4);
  transform: translate(-50%, -50%);
}

/* The plate centres the ladder; the ladder bottom-aligns its rungs. Two jobs,
   two elements — with one, `flex-end` bottom-aligned the rungs to each other and
   sank the whole group to the foot of a plate stretched to match the diagram
   beside it, leaving a third of a metre of white above nothing. */
.vc-brand-min {
  display: grid;
  place-content: center;
  padding: var(--s7);
  background: var(--paper);
  border: 1px solid var(--hair);
  min-height: 190px;
}

/* All three labels are one line of the same micro type, so aligning the labels
   aligns the lockups standing on them. */
.vc-brand-min__ladder {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(22px, 3.4vw, 52px);
}

.vc-brand-min__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
}

/* Shown at exactly the sizes being specified, so the reader sees what 24px
   actually looks like rather than taking the number on trust. */
.vc-brand-min__logo {
  width: auto;
  display: block;
}

.vc-brand-min__step--lg .vc-brand-min__logo {
  height: 72px;
}

.vc-brand-min__step--md .vc-brand-min__logo {
  height: 40px;
}

.vc-brand-min__step--floor .vc-brand-min__logo {
  height: 24px;
}

.vc-brand-min__value {
  font: 600 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  color: var(--ink-label);
  font-variant-numeric: tabular-nums lining-nums;
}

/* The floor is marked, not just labelled. Absolutely positioned so drawing it
   cannot make this rung taller than the two beside it and break the baseline
   the whole diagram depends on. */
.vc-brand-min__step--floor {
  position: relative;
}

.vc-brand-min__step--floor .vc-brand-min__value {
  color: var(--gold);
}

.vc-brand-min__step--floor::after {
  content: '';
  position: absolute;
  left: -10px;
  right: -10px;
  bottom: -12px;
  height: 2px;
  background: var(--metal);
}

/* Swatches. Four across on a desktop, not as many as fit: the palette has
   eleven entries, and five columns left the eleventh alone on a row of its own
   with four empty cells beside it. Four gives 4 / 4 / 3, which reads as a grid
   that ran out of colours rather than as one that broke. */
.vc-brand-swatches {
  list-style: none;
  margin: var(--s7) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

@media (min-width: 1000px) {
  .vc-brand-swatches {
    grid-template-columns: repeat(4, 1fr);
  }
}

.vc-brand-swatch {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--hair);
  padding: 0 0 var(--s5);
}

.vc-brand-swatch__chip {
  display: block;
  /* Grows with the card: at four columns of a 1560px shell a fixed 88px band
     under a 380px card was a letterbox. */
  height: clamp(88px, 9vw, 128px);
  /* An inset hairline rather than a border: Paper is #fff on #fff, and without
     it that swatch would have no edge at all. */
  box-shadow: inset 0 0 0 1px var(--hair);
  margin-bottom: var(--s5);
}

/* On a phone the eleven cards stacked to some 2600px of scrolling on their own.
   As rows they are a list, which is what a reference table wants to be anyway:
   the chip shrinks to a marker and the three values sit beside it. */
@media (max-width: 560px) {
  /* The three rows are declared, not left implicit: `grid-row: 1 / -1` counts
     to the end of the *explicit* grid, so against implicit rows it collapses to
     a single row and the chip stops stretching. */
  .vc-brand-swatch {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    align-items: center;
    /* 16 rather than 24: at 390px the longest value, rgb(227 200 132), came up
       3.8px short of its column and broke onto a second line on four of the
       eleven rows. Two gaps of 8px recovered is more than enough. */
    column-gap: var(--s4);
    padding: var(--s4);
  }

  .vc-brand-swatch__chip {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: stretch;
    height: auto;
    min-height: 52px;
    margin-bottom: 0;
  }

  .vc-brand-swatch__name,
  .vc-brand-swatch__value,
  .vc-brand-swatch__rgb {
    grid-column: 2;
    padding-inline: 0;
  }

  .vc-brand-swatch .vc-brand-copy {
    grid-column: 3;
    grid-row: 1 / -1;
    margin: 0;
    align-self: center;
  }
}

.vc-brand-swatch__name {
  padding-inline: var(--s5);
  font: 600 var(--t-small) / 1.3 Archivo, sans-serif;
}

.vc-brand-swatch__value,
.vc-brand-swatch__rgb {
  padding-inline: var(--s5);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--ink-meta);
  font-variant-numeric: tabular-nums lining-nums;
}

.vc-brand-swatch__rgb {
  color: var(--ink-label);
  font-size: 11.5px;
}

.vc-brand-copy {
  align-self: flex-start;
  margin: var(--s4) var(--s5) 0;
  background: none;
  border: 1px solid var(--hair-strong);
  /* 11px of type in a 24px-tall control: past the WCAG 2.5.8 minimum on its
     own, so this does not need the .vc-tap overlay. */
  padding: 7px 12px;
  font: 600 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink);
  transition:
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

@media (hover: hover) {
  .vc-brand-copy:hover {
    border-color: var(--ink);
  }
}

/* Confirmed. Gold rather than a green: this palette has no green in it, and one
   introduced here would be the only colour on the site that is not a token. */
.vc-brand-copy--done {
  border-color: var(--gold);
  color: var(--gold);
}

/* Typography specimens. */
.vc-brand-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(24px, 3.2vw, 56px);
  margin-top: var(--s7);
}

.vc-brand-type {
  background: var(--paper);
  border: 1px solid var(--hair);
  padding: clamp(24px, 3vw, 40px);
}

.vc-brand-type__face {
  font-family: 'Playfair Display', serif;
  font-size: var(--t-h3);
  line-height: 1.1;
  letter-spacing: var(--tr-h3);
  margin: var(--s4) 0 0;
}

.vc-brand-type__face--body {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  letter-spacing: var(--tr-h3);
}

.vc-brand-type__sample {
  margin: var(--s5) 0 0;
  color: var(--ink-body);
  max-width: 40ch;
}

.vc-brand-type__sample--display {
  font-family: 'Playfair Display', serif;
  font-size: var(--t-h4);
  line-height: 1.25;
  color: var(--ink);
}

.vc-brand-type__meta {
  margin: var(--s5) 0 0;
  font: 500 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  color: var(--ink-label);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Do's and don'ts. Three across on a desktop rather than as many as fit: the
   grid holds six specimens, so three columns give two full rows instead of a
   row of five and an orphan — and a stretched or rotated lockup needs the width
   to read as wrong at a glance. */
.vc-brand-rules {
  list-style: none;
  margin: var(--s7) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(16px, 2vw, 28px);
}

@media (min-width: 900px) {
  .vc-brand-rules {
    grid-template-columns: repeat(3, 1fr);
  }
}

.vc-brand-rule__plate {
  display: grid;
  place-items: center;
  /* `hidden` matters: the rotated and stretched specimens below deliberately
     exceed their box, and without this they would collide with the neighbour. */
  overflow: hidden;
  height: clamp(150px, 15vw, 190px);
  padding: var(--s6);
  background: var(--paper);
  border: 1px solid var(--hair);
}

/* The low-contrast misuse needs a ground close to the mark's own value. Stone
   deep against near-black is the least contrast this palette can produce
   without inventing a colour. */
.vc-brand-rule__plate--murky {
  background: var(--stone-deep);
}

.vc-brand-rule__logo {
  width: 100%;
  /* Larger than the 150px it started at. A stretched or rotated lockup has to
     be big enough that the distortion reads without being looked for, and at
     three columns the plate has the room. */
  max-width: 190px;
  height: auto;
  display: block;
}

.vc-brand-rule__text {
  min-width: 0;
}

/* The five misuses. Every one is a transform over the real logo — a screenshot
   of a mangled mark would be one more file to keep in step with a logo that can
   change, and the only image on the site nobody could regenerate. */
.vc-brand-rule__logo--stretch {
  transform: scaleX(1.55) scaleY(0.72);
}

.vc-brand-rule__logo--rotate {
  transform: rotate(-13deg);
}

.vc-brand-rule__logo--recolour {
  filter: sepia(1) saturate(6) hue-rotate(300deg);
}

.vc-brand-rule__logo--contrast {
  filter: brightness(0) invert(1) opacity(0.55);
}

.vc-brand-rule__logo--shadow {
  filter: drop-shadow(4px 5px 0 var(--gold-lt));
}

/* The one correct specimen wears the metal rule the rest of the site uses to
   mark a beginning. Six plates that differ only by a small glyph is not a grid
   anyone can read at a glance — and at a glance is the whole job of this
   section. This palette has no red and no green, and inventing one for a state
   would put the only untokened colour on the page whose subject is the tokens,
   so the signal is the rule, not a colour. */
.vc-brand-rule--ok .vc-brand-rule__plate {
  position: relative;
  border-color: var(--gold-lt);
}

.vc-brand-rule--ok .vc-brand-rule__plate::before {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 3px;
  background: var(--metal);
}

.vc-brand-rule__caption {
  display: flex;
  gap: 9px;
  margin: var(--s5) 0 0;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-meta);
}

/* A fixed slot, so the captions start on the same left edge whether the glyph
   before them is a tick or a cross. */
.vc-brand-rule__mark {
  flex: 0 0 auto;
  width: 1em;
  font-weight: 700;
  font-size: 1.1em;
  line-height: 1.35;
  text-align: center;
}

.vc-brand-rule--ok .vc-brand-rule__mark {
  /* 5.33:1 on paper. */
  color: var(--gold);
}

.vc-brand-rule--no .vc-brand-rule__mark {
  color: var(--ink);
}

/* Partner badge. The pill gets the width it needs and no more: on an even split
   a 269px badge sat in the middle of a 700px column with the snippet cramped
   beside it. `auto 1fr` gives the code the room, which is the half a partner
   actually has to read. */
.vc-brand-badge-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(24px, 3.2vw, 56px);
  align-items: start;
  margin-top: var(--s7);
}

@media (max-width: 860px) {
  .vc-brand-badge-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.vc-brand-badge {
  display: block;
  max-width: 100%;
  height: auto;
}

.vc-brand-embed {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s4);
}

.vc-brand-embed__code {
  width: 100%;
  margin: 0;
  /* The snippet is long and must not widen the page; it scrolls in its own box
     rather than forcing the document sideways. */
  overflow-x: auto;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.86);
  padding: var(--s5);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  tab-size: 2;
}

.vc-brand-copy--wide {
  margin-inline: 0;
}

/* Legal note. */
.vc-brand-legal {
  padding-block: var(--band-tight);
  border-top: 1px solid var(--hair);
  position: relative;
}

.vc-brand-legal::before {
  content: '';
  position: absolute;
  left: var(--gutter);
  top: -1px;
  width: 48px;
  height: 2px;
  background: var(--metal);
}

.vc-brand-legal__title {
  font: 700 var(--t-label) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

.vc-brand-legal__body {
  margin: var(--s5) 0 var(--s6);
  max-width: var(--measure);
  color: var(--ink-meta);
  font-size: var(--t-small);
  line-height: 1.7;
}

.vc-brand-legal__body p {
  margin: 0 0 var(--s4);
}

/* ── Contact ─────────────────────────────────────────────────────────────── */

.vc-contact {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 120px) var(--gutter) var(--band);
}

.vc-contact__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(36px, 5.4vw, 96px);
  align-items: start;
}

.vc-contact__title {
  margin-top: var(--s5);
}

.vc-contact__intro {
  font-size: var(--t-lead);
  line-height: 1.64;
  color: var(--ink-body);
  margin-top: var(--s6);
  max-width: 48ch;
}

/* The email address, set as a display line with the rule beneath it drawn in
   metal and wiped in on hover. */
.vc-contact__email {
  position: relative;
  display: inline-block;
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin-top: var(--s7);
  padding-bottom: var(--s3);
  word-break: break-word;
  transition: color var(--dur) var(--ease);
}

.vc-contact__email::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--metal);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}

.vc-contact__email:hover {
  color: var(--gold);
}

.vc-rail {
  border-top: 1px solid var(--hair-strong);
  position: relative;
}

.vc-rail::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 48px;
  height: 2px;
  background: var(--metal);
}

.vc-rail__row {
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--hair);
}

.vc-rail__row--socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s6);
}

/* Leading of 1.35 rather than the 1.2 display type would otherwise want: at the
   19px floor of --t-h4 that gave a 23px line box, and these are links — a pixel
   under the 24px minimum target of WCAG 2.5.8. 1.35 × 19 = 25.7px. */
.vc-rail__link {
  font-family: 'Playfair Display', serif;
  font-size: var(--t-h4);
  line-height: 1.35;
  transition:
    color var(--dur-fast) var(--ease),
    transform var(--dur) var(--ease);
  display: inline-block;
}

.vc-rail__link:hover {
  color: var(--gold);
  transform: translateX(5px);
}

.vc-legal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: clamp(28px, 3.6vw, 64px);
  margin-top: clamp(56px, 7vw, 112px);
  border-top: 1px solid var(--hair-strong);
  padding-top: var(--s7);
  position: relative;
}

.vc-legal::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 48px;
  height: 2px;
  background: var(--metal);
}

/* Padded past the 24px minimum target on its own, because it draws its own
   ::after and cannot also wear `.vc-tap`. */
.vc-legal__link {
  position: relative;
  display: inline-block;
  font: 700 var(--t-label) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  padding-bottom: 14px;
  transition: color var(--dur-fast) var(--ease);
}

.vc-legal__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--metal);
}

.vc-legal__link:hover {
  color: var(--gold);
}

.vc-legal__text {
  font-size: var(--t-small);
  line-height: 1.72;
  color: var(--ink-label);
  margin-top: var(--s5);
}

/* ── Terms ───────────────────────────────────────────────────────────────── */

.vc-terms {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 120px) var(--gutter) var(--band);
}

.vc-terms__title {
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1;
  letter-spacing: var(--tr-h1);
  margin-top: var(--s5);
}

.vc-terms__list {
  margin-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--hair-strong);
  counter-reset: vc-clause;
  position: relative;
}

.vc-terms__list::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 48px;
  height: 2px;
  background: var(--metal);
}

/* Each clause is numbered by the stylesheet rather than by the editor: the
   numbering then cannot come apart from the order the clauses are actually in,
   and reordering them in the admin renumbers them. */
.vc-clause {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0 var(--s5);
  padding: clamp(28px, 3vw, 42px) 0;
  border-bottom: 1px solid var(--hair);
}

.vc-clause::before {
  content: counter(vc-clause, decimal-leading-zero);
  counter-increment: vc-clause;
  font: 600 var(--t-micro) / 1.9 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.vc-clause__title {
  font-size: var(--t-h4);
  line-height: 1.24;
  letter-spacing: var(--tr-h3);
}

/* Everything the clause contains sits in the second column; the numeral
   generated by ::before occupies the first. A rich-text field emits an unknown
   number of <p> and <ul> children, so the rule has to be stated for all of
   them rather than for a list of expected tags. */
.vc-clause > * {
  grid-column: 2;
}

/* The clause text comes out of a rich-text field, which emits its own <p> tags,
   so the type is set on the paragraphs rather than on a wrapper. A wrapper
   would carry the type styles one level above the text that needs them. */
.vc-clause p {
  font-size: var(--t-body);
  line-height: 1.76;
  color: var(--ink-meta);
  margin-top: var(--s4);
  max-width: 68ch;
}

.vc-clause p:first-of-type {
  margin-top: var(--s4);
}

@media (max-width: 620px) {
  .vc-clause {
    grid-template-columns: 1fr;
    gap: var(--s3) 0;
  }
  .vc-clause > * {
    grid-column: 1;
  }
  .vc-clause p {
    grid-column: 1;
  }
}

.vc-terms__updated {
  font: 600 var(--t-micro) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--ink-label);
  margin-top: var(--s7);
}

.vc-terms__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s6);
  margin-top: var(--s5);
}

/* Worn by an <a> and a <button> side by side in a flex row. The explicit
   `padding: 0 0 14px` does two jobs: it keeps the pair the same height — a
   button's UA padding is 1px taller than a link's, and the row stretches its
   items — and it carries an 11px line past the 24px minimum target, so neither
   control needs `.vc-tap` competing for the ::after that draws the rule. */
.vc-terms__action {
  position: relative;
  font: 600 var(--t-label) / 1 Archivo, sans-serif;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  border: 0;
  padding: 0 0 14px;
  background: none;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease);
}

.vc-terms__action::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--metal);
}

.vc-terms__action:hover {
  color: var(--gold);
}

/* ── Imprint ─────────────────────────────────────────────────────────────── */

/* Shares .vc-terms for the shell — same measure, same top padding, same title
   scale — because it is the same kind of page. Only the body differs: the terms
   are numbered prose, this is a table of facts. */

.vc-imprint__intro {
  font-size: var(--t-lead);
  line-height: 1.64;
  color: var(--ink-meta);
  margin-top: var(--s5);
  max-width: 62ch;
}

.vc-imprint {
  margin-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--hair-strong);
  position: relative;
}

.vc-imprint::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 48px;
  height: 2px;
  background: var(--metal);
}

.vc-imprint__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 0 var(--s5);
  align-items: baseline;
  padding: clamp(20px, 2.2vw, 30px) 0;
  border-bottom: 1px solid var(--hair);
}

.vc-imprint__label {
  font: 600 var(--t-micro) / 1.9 Archivo, sans-serif;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-label);
}

/* A <dd> carries a 40px UA margin-inline-start that would push every value out
   of its grid column. */
.vc-imprint__value {
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.72;
  color: var(--ink);
}

.vc-imprint__note {
  margin-top: var(--s6);
  max-width: 68ch;
}

.vc-imprint__note p {
  font-size: var(--t-small);
  line-height: 1.76;
  color: var(--ink-meta);
  margin-top: var(--s4);
}

/* Same 620px as .vc-clause: below it a fixed label column leaves the values
   too narrow to read, in either language. */
@media (max-width: 620px) {
  .vc-imprint__row {
    grid-template-columns: 1fr;
    gap: var(--s2) 0;
  }
}

/* ── Not found ───────────────────────────────────────────────────────────── */

.vc-404 {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(72px, 11vw, 180px) var(--gutter);
}

.vc-404__title {
  margin-top: var(--s5);
}

.vc-404__body {
  font-size: var(--t-lead);
  line-height: 1.64;
  color: var(--ink-body);
  margin-top: var(--s6);
  max-width: 44ch;
}

.vc-404__cta {
  margin-top: var(--s7);
}

/* ── 9. Print ────────────────────────────────────────────────────────────── */

@media print {
  .vc-header,
  .vc-sheet,
  .vc-lightbox,
  .vc-modal,
  .vc-hero__cue,
  .vc-skip,
  .vc-burger {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  [data-vc-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  /* Naming the dark sections one by one was the mistake here, and it cost most
     of the page.

     `color` on a container only reaches the text that inherits from it. Every
     descendant that declares a colour of its own — and on a dark ground nearly
     all of them do — kept the white it was given for the screen, on paper that
     is already white. Measured on the built page under `media: print`, reading
     the computed colour of each element rather than a screenshot, because a
     screenshot paints the CSS grounds a printer drops: 32 of the 81 text
     elements came out at 1:1. Vittoria's name at 123px. Her email address. All
     five rows of the trajectory. The whole footer. And .vc-hero was never on
     the list at all, so nothing in it was even attempted.

     Two layers replace the list. The tokens first, which is where this should
     have been done: anything that colours itself from a token is now ink on
     paper wherever it sits, including whatever gets added to these sections
     next year. Then a net for the literals, hung on `.vc-on-ink` — the class
     that already means «this surface is dark» — so it follows the marking
     rather than an inventory that has to be maintained. */
  :root,
  .vc-on-ink {
    --on-ink: rgba(0, 0, 0, 0.82);
    --on-ink-muted: rgba(0, 0, 0, 0.66);
    --ink-body: rgba(0, 0, 0, 0.82);
    --ink-meta: rgba(0, 0, 0, 0.82);
    --ink-label: rgba(0, 0, 0, 0.66);
    /* The metal keeps its two lighter steps for the screen and loses them here:
       --gold-lt reads 2.34:1 on paper and --gold-hi 1.63:1, while the dark step
       they both fall back to reads 5.33:1. */
    --gold-lt: var(--gold);
    --gold-hi: var(--gold);
  }

  /* Whitening a container does not whiten its ground, and on four of the five
     named here the line did nothing at all.

     The ink under the footer, the philosophy band, the trajectory and the
     archive masthead is not painted by those elements. It is painted by a
     `::before` at `inset: 0; z-index: -1`, which in a stacking context is drawn
     above the element's own background and below its content — so `background:
     #fff` on the element landed underneath the ink and was never seen. The net
     below then forced `color: #000` onto type that was still sitting on
     rgb(10,25,47): 1.19:1, the exact mirror of the defect the net was written
     to fix, and worse than the white type it replaced.

     It only surfaces when the reader ticks «Background graphics», which is why
     neither of the first two probes caught it: both composed colours on the
     paper, and a colour probe cannot see a gradient. Measured instead by
     composing each text colour on the stack of grounds beneath it — 20 elements
     below AA across 12 pages, among them Vittoria's name at 1.19:1, the hero
     tagline, and every ink CTA on the site.

     So the ground now answers to the same marking the ink does, and the layers
     that paint it are removed rather than covered. PrintSheetTests enumerates
     the sheet for `inset: 0; z-index: -1` grounds and fails if one is missing
     from the second list, because a list is what went stale the first time. */
  .vc-on-ink,
  .vc-band-ink,
  .vc-btn-ink {
    background: #fff !important;
  }

  .vc-band-ink::before,
  .vc-footer::before,
  .vc-philosophy::before,
  .vc-archive-masthead::before,
  .vc-tile__typographic::before,
  .vc-lightbox__typographic::before {
    display: none !important;
  }

  .vc-on-ink,
  .vc-on-ink *,
  .vc-band-ink,
  .vc-band-ink *,
  .vc-btn-ink {
    color: #000 !important;
  }

  /* The accent survives the net, as the one step of the metal that can be read
     on paper. Two classes deep, so it outranks the net above it. */
  .vc-on-ink .vc-eyebrow,
  .vc-on-ink .vc-hero__kicker,
  .vc-on-ink .vc-tl__period,
  .vc-on-ink .vc-footer__motto {
    color: var(--gold) !important;
  }

  /* Where type sits on a photograph, a printer resolves it badly in both
     directions: a scrim is a CSS ground and does not print, while the
     photograph itself is an <img> and does. Black type would land on a picture
     with nothing between — 12:1 where it is bright, 1.4:1 where it is not,
     decided by the image an editor uploaded.

     So the picture stays off the page and the words come through on white.
     Without the height it no longer holds, the first sheet would be three
     lines of type and a great deal of nothing.

     This said "the hero is the one place on the site where type sits on a
     photograph", and it was not: .vc-banner does the same on the stable page in
     both editions, and nothing took its picture off the page. The probes
     written for the print sheet could not see it — they compose CSS grounds,
     and an <img> is not a ground; on paper it is the opposite of one, because
     grounds are dropped and pictures are not. Measured both ways it failed
     both: with backgrounds dropped the title read 1.12:1 and the kicker 1:1 —
     gold on its own photograph, not a low number but no number at all — and
     with backgrounds printed, 1.14:1 and 2.53:1.

     The rest of the sheet was already right about the ink: --gold-lt folds to
     --gold above, and `.vc-on-ink .vc-eyebrow` keeps it. Only the ground was
     wrong. */
  .vc-hero__image,
  .vc-hero__scrim,
  .vc-hero__grid,
  .vc-hero__kicker::before,
  .vc-banner__image,
  .vc-banner__scrim {
    display: none !important;
  }

  .vc-hero,
  .vc-banner {
    min-height: 0 !important;
  }

  /* An address written out for paper has no break points of its own, and the
     footer links sit in a row that hides what overflows it. On A4 at the usual
     margins the Italian footer ran 41px past its box and printed the last
     address cut short — which reads as complete, and is the one failure mode
     worse than not printing the address at all. Measured at 660, 718, 760 and
     794px: 97, 41, 1, 0 over; with the address allowed to break, 0 at all
     four. */
  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 9px;
    color: #555;
    overflow-wrap: anywhere;
  }
}