/* ==========================================================================
   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;
}

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 */

  /* ── 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 both light grounds (5.33:1 on white, 4.68:1 on stone),
     and it is the only one permitted under small text there. 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 a frosted bar with a hairline: 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. */
.vc-header--set {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  border-bottom-color: var(--hair);
  box-shadow: 0 1px 24px -12px rgba(10, 25, 47, 0.28);
}

/* Where the browser cannot frost, the bar stays opaque rather than becoming a
   translucent smear over the photograph beneath it. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vc-header--set {
    background: var(--paper);
  }
}

/* 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);
}

.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;
}

.vc-skip:focus {
  left: 16px;
  top: 12px;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  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;
}

/* ── 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. */
.vc-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  border-top: 1px solid var(--hair-strong);
}

.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);
}

.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;
}

/* ── 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;
  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;
  }
}

.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 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);
}

.vc-patron:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.vc-patron:hover 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: linear-gradient(180deg, var(--stone) 0%, var(--stone-deep) 100%);
  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: linear-gradient(180deg, var(--stone) 0%, var(--stone-deep) 100%);
  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: linear-gradient(180deg, var(--stone) 0%, var(--stone-deep) 100%);
  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;
}

.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(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: linear-gradient(180deg, var(--stone) 0%, var(--stone-deep) 100%);
}

.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: linear-gradient(180deg, var(--stone) 0%, var(--stone-deep) 100%);
  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;
  }

  .vc-band-ink,
  .vc-philosophy,
  .vc-footer,
  .vc-trajectory,
  .vc-archive-masthead {
    background: #fff !important;
    color: #000 !important;
  }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 9px;
    color: #555;
  }
}