/* VCP Design System — core components. See issue #1.
   Material rule: liquid glass = blur 18–26px, 10% white hairline, one
   specular highlight along the top edge. Silver metal fills are reserved
   for primary actions and featured accents. */

/* === Glass surface (shared material) === */
.vcp-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-highlight), var(--shadow-float);
}

/* === Nav === */
.vcp-nav {
  position: sticky;
  top: var(--space-3);
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-highlight), 0 20px 46px -22px rgba(0, 0, 0, 0.7);
}

.vcp-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.vcp-nav__wordmark {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.vcp-nav__divider {
  width: 1px;
  height: 18px;
  background: var(--line-strong);
}

.vcp-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.vcp-nav__links a {
  font-size: var(--fs-14);
  font-weight: 400;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease);
}

.vcp-nav__links a:hover,
.vcp-nav__links a[aria-current] {
  color: var(--text);
  font-weight: 500;
}

/* A silver CTA inside the nav keeps its dark-on-silver text */
.vcp-nav__links a.vcp-btn--silver,
.vcp-nav__links a.vcp-btn--silver:hover {
  color: var(--on-silver);
}

/* Menu toggle (issue #85) — desktop hides it; ≤900px it replaces the
   inline links. Appearance + X-morph live outside the media query so
   demo.html can render the states at any width. */
.vcp-nav__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--glass-bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}

.vcp-nav__toggle:hover { border-color: var(--line-hover); }

.vcp-nav__toggle-bar {
  width: 16px;
  height: 1.5px;
  background: var(--silver);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.vcp-nav__toggle[aria-expanded="true"] .vcp-nav__toggle-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.vcp-nav__toggle[aria-expanded="true"] .vcp-nav__toggle-bar:nth-child(2) { opacity: 0; }
.vcp-nav__toggle[aria-expanded="true"] .vcp-nav__toggle-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* === Nav, mobile (issue #85) — brand grows, links collapse into a
   tap-to-open glass menu box, and the pill slides away as you read
   down (js/nav.js drives .is-open / .vcp-nav--away) === */
@media (max-width: 900px) {
  .vcp-nav {
    transition: transform var(--dur-med) var(--ease);
  }

  /* Reading down: out of sight (clears the sticky offset + top shadow) */
  .vcp-nav--away { transform: translateY(calc(-100% - var(--space-5))); }

  /* The wordmark is the mobile brand — bigger, alone in the glass pill */
  .vcp-nav__wordmark { font-size: var(--fs-28); }
  .vcp-nav__divider,
  .vcp-nav__brand .label-caps { display: none; }

  .vcp-nav__toggle { display: inline-flex; }

  .vcp-nav__links {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    min-width: 230px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    background: var(--glass-bg-solid);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--glass-highlight), var(--shadow-float);
  }

  .vcp-nav.is-open .vcp-nav__links { display: flex; }

  /* Comfortable tap targets */
  .vcp-nav__links a {
    display: block;
    padding: 13px var(--space-3);
    border-radius: var(--radius);
    font-size: var(--fs-16);
  }

  .vcp-nav__links li + li a { border-top: 1px solid var(--line); }

  .vcp-nav__links a:hover,
  .vcp-nav__links a[aria-current] { background: rgba(255, 255, 255, 0.05); }
}

/* === Buttons === */
.vcp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 30px;
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
}

.vcp-btn:hover { transform: translateY(-2px); }

/* Primary: brushed silver, dark text */
.vcp-btn--silver {
  background: var(--silver-metal);
  color: var(--on-silver);
  box-shadow: var(--shadow-silver);
}

/* Ghost: liquid glass */
.vcp-btn--glass {
  background: var(--glass-bg);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-weight: 500;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--glass-highlight);
}

.vcp-btn--glass:hover { border-color: var(--line-hover); }

/* Quiet: text with hairline underline */
.vcp-btn--quiet {
  padding: 14px var(--space-2);
  border-radius: 0;
  background: none;
  color: rgba(232, 234, 237, 0.72);
  font-weight: 500;
  border-bottom: 1px solid rgba(232, 234, 237, 0.28);
}

.vcp-btn--quiet:hover { color: #fff; transform: none; }

/* Icon: glass circle */
.vcp-btn--icon {
  width: 46px;
  height: 46px;
  padding: 0;
  background: var(--glass-bg);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-20);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Small: nav-scale silver pill */
.vcp-btn--sm { padding: 9px 20px; font-size: var(--fs-12); }

/* === Tag / chip === */
.vcp-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 15px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(232, 234, 237, 0.8);
  font-size: var(--fs-12);
  font-weight: 500;
}

.vcp-tag--dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--silver-metal);
}

.vcp-tag--featured {
  background: var(--silver-metal);
  border-color: transparent;
  color: var(--on-silver);
  font-weight: 600;
}

.vcp-tag--caps {
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: 600;
  font-size: 10.5px;
  color: var(--text-soft);
}

/* Interactive filter chip — button variant of .vcp-tag for client-side
   filter rows (tag filters, category toggles, sort controls). Single
   canonical component: research.html, library.html, and projects.html
   all filter/sort UI reconciled onto this one class during integration
   (three independent parallel builds each proposed their own name). */
.vcp-tag--filter {
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.vcp-tag--filter:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.vcp-tag--filter[aria-pressed="true"] {
  background: var(--silver-metal);
  border-color: transparent;
  color: var(--on-silver);
  font-weight: 600;
}

/* === Card === */
.vcp-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-highlight), var(--shadow-float);
  transition: border-color var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}

/* Sheen border on hover — the signature detail from the spec */
.vcp-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--silver-sheen);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease);
  pointer-events: none;
}

.vcp-card:hover {
  border-color: transparent;
  transform: translateY(-2px);
}

.vcp-card:hover::before { opacity: 0.55; }

.vcp-card__body { padding: 26px 28px 28px; }

.vcp-card__media {
  height: 186px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* Striped media-placeholder treatment, shared with .vcp-media-banner */
.vcp-card__media,
.vcp-media-banner {
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 11px, rgba(255, 255, 255, 0.015) 11px 22px);
}

.vcp-card__badge {
  position: absolute;
  top: var(--space-3);
  left: 18px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: rgba(11, 12, 14, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 10.5px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-soft);
}

.vcp-card__title {
  margin-bottom: 0;
  font-size: 26px;
  line-height: 1.18;
  color: #F2F3F5;
}

.vcp-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

/* Eyebrow row: label · stretched hairline · mono meta */
.vcp-card__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.vcp-card__eyebrow::after {
  content: none;
}

.vcp-card__eyebrow .vcp-card__eyebrow-rule {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.vcp-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* Quiet inline link — "Read →", "View case study →" */
.vcp-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--text);
  border-bottom: 1px solid rgba(232, 234, 237, 0.25);
  padding-bottom: 3px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.vcp-link:hover { color: #fff; border-color: rgba(232, 234, 237, 0.6); }

/* Key-value rows (speaking card, spec sheets) */
.vcp-kv {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
}

.vcp-kv > div {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-14);
}

.vcp-kv > div + div {
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.vcp-kv dt { color: var(--text-muted); font-weight: 300; }
.vcp-kv dd { margin: 0; color: var(--text); }

/* Stat */
.vcp-stat__number {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1;
  font-weight: 400;
}

.vcp-stat__caption {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-14);
  color: var(--text-soft);
  font-weight: 300;
}

/* Press pull quote */
.vcp-quote {
  margin: var(--space-3) 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 21px;
  line-height: 1.35;
  color: #F2F3F5;
}

/* === Section heading === */
.vcp-section-heading {
  display: flex;
  /* long headings drop the hairline rule to its own row at phone widths
     instead of pushing it past the viewport */
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: 38px;
}

.vcp-section-heading__num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(232, 234, 237, 0.32);
  letter-spacing: 0.12em;
}

.vcp-section-heading h2 {
  margin: 0;
  font-size: 34px;
  letter-spacing: 0.01em;
  color: #EEF0F2;
}

.vcp-section-heading__rule {
  flex: 1;
  height: 1px;
  align-self: center;
  background: var(--line);
  border: none;
  margin: 0;
}

/* === Hero pattern === */
.vcp-hero {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: 70px 64px;
  background:
    radial-gradient(120% 130% at 82% 8%, rgba(206, 212, 220, 0.14), transparent 52%),
    var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 30px 70px -30px rgba(0, 0, 0, 0.75);
}

.vcp-hero::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle at 70% 30%, rgba(232, 235, 239, 0.16), transparent 60%);
  pointer-events: none;
}

.vcp-hero__content {
  position: relative;
  z-index: 1;
  max-width: 60ch;
}

.vcp-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* === Narrative pull quote (story band) === */
.vcp-pullquote {
  padding: 52px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.vcp-pullquote p {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1.18;
  color: #EEF0F2;
  font-weight: 400;
}

/* === Input === */
.vcp-input-group {
  display: flex;
  gap: var(--space-2);
}

.vcp-input {
  flex: 1;
  height: 50px;
  padding: 0 18px;
  border-radius: var(--radius);
  background: rgba(11, 12, 14, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: 300;
  transition: border-color var(--dur-fast) var(--ease);
}

.vcp-input::placeholder { color: var(--text-faint); }
.vcp-input:hover, .vcp-input:focus { border-color: rgba(255, 255, 255, 0.28); }

.vcp-input-group .vcp-btn { border-radius: var(--radius); padding: 0 26px; }

/* === Social icon === */
.vcp-social {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text-soft);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.vcp-social:hover { border-color: var(--line-strong); color: var(--text); }

/* === Section icon — decorative inline-SVG opener for a prose section === */
.vcp-section-icon {
  display: block;
  width: var(--space-7);
  height: var(--space-7);
  color: var(--silver);
  margin-bottom: var(--space-4);
}

/* === Section figure — decorative figure centered below a prose section,
   or floated beside it with the --right modifier === */
.vcp-section-figure {
  display: flex;
  justify-content: center;
  margin-top: var(--space-5);
}

.vcp-section-figure .vcp-section-icon {
  width: min(100%, 240px);
  height: auto;
  margin: 0;
  color: var(--silver-bright);
}

.vcp-section-figure--right {
  float: right;
  width: min(42%, 300px);
  margin: var(--space-1) 0 var(--space-3) var(--space-5);
}

@media (max-width: 640px) {
  .vcp-section-figure--right {
    float: none;
    width: 100%;
    margin: var(--space-4) 0 0;
  }
}

/* Status dot — "available for advisory" */
.vcp-status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(145deg, #EEF1F4, #9AA1AB);
  box-shadow: 0 0 12px rgba(232, 235, 239, 0.5);
}

/* === Paper row (Library list entry) === */
.vcp-paper {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
  transition: background var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
  scroll-margin-top: 110px;
  border-radius: var(--radius);
}

.vcp-paper:last-child { border-bottom: 1px solid var(--line); }

.vcp-paper__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-28);
}

.vcp-paper__abstract {
  max-width: 68ch;
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vcp-paper__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.vcp-paper__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Deep-link target highlight — fades out on its own */
.vcp-paper--highlight {
  background: rgba(205, 210, 217, 0.08);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* === Rich text prose (overview / business model bodies) === */
.vcp-prose p { margin: 0 0 var(--space-3); }
.vcp-prose p:last-child { margin-bottom: 0; }

.vcp-prose table {
  /* block + overflow-x: wide tables scroll inside themselves instead of
     escaping phone viewports (PR #36 audit, BLOCKER 1b) */
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font-size: var(--fs-14);
}

.vcp-prose caption {
  caption-side: top;
  text-align: left;
  margin-bottom: var(--space-2);
  font-size: var(--fs-12);
  color: var(--text-muted);
}

.vcp-prose th, .vcp-prose td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.vcp-prose th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

.vcp-prose td { color: var(--text-soft); font-weight: 300; }

/* === Article (project detail case study) — prose blocks interleaved with figures === */
.vcp-article h3 {
  margin: var(--space-6) 0 var(--space-3);
}

.vcp-article h3:first-child { margin-top: 0; }

/* === Article figure — product screenshot with caption === */
.vcp-figure {
  margin: var(--space-4) 0 var(--space-5);
}

.vcp-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.vcp-figure figcaption {
  margin-top: var(--space-2);
  font-size: var(--fs-12);
  color: var(--text-muted);
}

/* === Browser frame — screenshot in a monochrome Safari-like chrome === */
.vcp-browser {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.vcp-browser__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
}

.vcp-browser__dots { display: inline-flex; gap: 6px; }

.vcp-browser__dots i {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--silver-deep);
}

.vcp-browser__dots i:nth-child(2) { opacity: 0.6; }
.vcp-browser__dots i:nth-child(3) { opacity: 0.35; }

.vcp-browser__url {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
  max-width: 260px;
  margin: 0 auto;
}

.vcp-browser img {
  display: block;
  width: 100%;
  height: auto;
}

/* === Carousel — 3D click-through walkthrough of browser-framed screens === */
.vcp-carousel {
  margin: var(--space-5) 0 0;
  outline: none;
}

.vcp-carousel:focus-visible { box-shadow: 0 0 0 2px var(--line-strong); border-radius: var(--radius); }

.vcp-carousel__stage {
  position: relative;
  aspect-ratio: 1.85;
  perspective: 1400px;
  /* Side slides translate past the stage edge — clip so they never widen
     the page (360px horizontal-overflow guard). */
  overflow: hidden;
}

.vcp-carousel__slide {
  position: absolute;
  inset: 0 auto 0 50%;
  width: 82%;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
  transition: transform 450ms cubic-bezier(0.33, 1, 0.68, 1), opacity 450ms ease;
  cursor: pointer;
}

.vcp-carousel__slide .vcp-browser { width: 100%; }

.vcp-carousel__slide--active {
  transform: translateX(-50%) translateZ(0);
  opacity: 1;
  z-index: 3;
}

.vcp-carousel__slide--right {
  transform: translateX(-24%) translateZ(-220px) rotateY(-24deg) scale(0.92);
  opacity: 0.4;
  z-index: 2;
}

.vcp-carousel__slide--left {
  transform: translateX(-76%) translateZ(-220px) rotateY(24deg) scale(0.92);
  opacity: 0.4;
  z-index: 2;
}

.vcp-carousel__slide--hidden {
  transform: translateX(-50%) translateZ(-420px) scale(0.8);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

.vcp-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.vcp-carousel__arrow {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text-soft);
  width: 40px;
  height: 40px;
  font-size: var(--fs-16);
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
}

.vcp-carousel__arrow:hover { border-color: var(--line-strong); color: var(--silver-bright); }

.vcp-carousel__dots { display: flex; gap: var(--space-2); }

.vcp-carousel__dot {
  appearance: none;
  border: none;
  padding: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}

.vcp-carousel__dot[aria-current="true"] {
  background: var(--silver-bright);
  transform: scale(1.25);
}

.vcp-carousel__body { margin-top: var(--space-4); }

.vcp-carousel__body h3 { margin: 0 0 var(--space-3); }

.vcp-carousel__caption {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-12);
  color: var(--text-muted);
}

@media (max-width: 700px) {
  /* Slides run taller than the desktop stage ratio on narrow screens —
     give the stage room and push the controls clear (issue #127). */
  .vcp-carousel__stage { aspect-ratio: 1.4; }
  .vcp-carousel__controls { margin-top: var(--space-5); }
  .vcp-carousel__slide { width: 96%; }
  .vcp-carousel__slide--left, .vcp-carousel__slide--right { opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
  .vcp-carousel__slide { transition: none; }
}

/* === Distro card (vcp-distro.js) — "list once, sync everywhere" hub-and-spoke === */
.vcp-distro {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: 0 34px 90px -34px rgba(0, 0, 0, 0.72);
  overflow: hidden;
  margin: var(--space-4) 0;
}

.vcp-distro__copy {
  flex: 1 1 44%;
  min-width: 0;
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vcp-distro__title {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-40);
  font-weight: 500;
  line-height: 1.05;
  color: var(--silver-bright);
}

.vcp-distro__sub {
  margin: var(--space-3) 0 0;
  color: var(--text-soft);
  font-size: var(--fs-16);
  line-height: 1.5;
  max-width: 34ch;
}

.vcp-distro__rule { border-top: 1px dashed var(--line-strong); margin-top: var(--space-5); }

.vcp-distro__status {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.vcp-distro__live {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--silver-bright);
}

.vcp-distro__pulse {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--silver-bright);
  box-shadow: 0 0 0 0 rgba(232, 234, 237, 0.5);
  animation: vcp-distro-pulse 2.2s ease-out infinite;
}

@keyframes vcp-distro-pulse {
  0% { box-shadow: 0 0 0 0 rgba(232, 234, 237, 0.45); }
  70% { box-shadow: 0 0 0 7px rgba(232, 234, 237, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 234, 237, 0); }
}

.vcp-distro__note {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--text-muted);
}

.vcp-distro__diagram {
  flex: 1 1 56%;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: var(--space-3);
  border-left: 1px dashed var(--line-strong);
}

/* Fixed-ratio inner box (matches the 500×352 wire viewBox) — the whole
   hub-and-spoke downscales proportionally instead of stretching. */
.vcp-distro__scene {
  position: relative;
  width: 100%;
  aspect-ratio: 500 / 352;
}

.vcp-distro__wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

.vcp-distro__wire {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.4;
  stroke-dasharray: 5 6;
  animation: vcp-distro-flow 3.2s linear infinite;
}

@keyframes vcp-distro-flow { to { stroke-dashoffset: -22; } }

.vcp-distro__tile,
.vcp-distro__node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.vcp-distro__tile {
  width: 58px;
  height: 58px;
  background: var(--silver-bright);
  border-radius: var(--radius);
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.55);
  transition: transform 180ms ease;
}

.vcp-distro__tile:hover { transform: translate(-50%, -50%) scale(1.06); }

.vcp-distro__tile svg { width: 34px; height: 34px; display: block; }

.vcp-distro__more {
  font-weight: 700;
  font-size: var(--fs-16);
  color: var(--bg);
}

.vcp-distro__node {
  width: 88px;
  height: 88px;
  background: var(--silver-bright);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-lg);
  left: 50%;
  top: 50%;
  box-shadow: 0 0 0 6px rgba(232, 234, 237, 0.06), 0 0 42px -6px rgba(232, 234, 237, 0.4);
}

.vcp-distro__node img { width: 56px; height: 56px; display: block; object-fit: contain; }

/* Phones: the card stays horizontal — copy left, diagram right — it just
   compresses (issue #127 review feedback: never stack it vertically). */
@media (max-width: 780px) {
  .vcp-distro__copy { padding: var(--space-4) var(--space-3); flex-basis: 46%; }
  .vcp-distro__title { font-size: var(--fs-20); }
  .vcp-distro__sub { font-size: var(--fs-12); }
  .vcp-distro__status { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .vcp-distro__diagram { flex-basis: 54%; padding: var(--space-2); }
  .vcp-distro__tile { width: 30px; height: 30px; border-radius: var(--radius); }
  .vcp-distro__tile svg { width: 18px; height: 18px; }
  .vcp-distro__more { font-size: 10px; }
  .vcp-distro__node { width: 44px; height: 44px; border-radius: var(--radius); }
  .vcp-distro__node img { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .vcp-distro__wire { animation: none; }
  .vcp-distro__pulse { animation: none; box-shadow: 0 0 10px 1px rgba(232, 234, 237, 0.5); }
  .vcp-distro__tile { transition: none; }
}

/* === Rate calc (vcp-rate-calc.js) — illustrative dynamic-pricing widget === */
.vcp-calc {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0;
}

.vcp-calc__label { margin-bottom: var(--space-4); }

.vcp-calc__grid {
  display: flex;
  gap: var(--space-5);
  align-items: center;
}

.vcp-calc__controls {
  flex: 1 1 55%;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.vcp-calc__control {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--fs-14);
  color: var(--text-soft);
}

.vcp-calc__control strong { color: var(--silver-bright); font-weight: 500; }

.vcp-calc__control--row { flex-direction: row; align-items: center; gap: var(--space-2); cursor: pointer; }

.vcp-calc__control input[type="range"] { width: 100%; accent-color: var(--silver-bright); }
.vcp-calc__control input[type="checkbox"] { accent-color: var(--silver-bright); }

.vcp-calc__result {
  flex: 1 1 45%;
  text-align: center;
  border-left: 1px dashed var(--line-strong);
  padding-left: var(--space-5);
}

.vcp-calc__caption {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.vcp-calc__usd {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-56);
  font-weight: 500;
  line-height: 1;
  color: var(--silver-bright);
}

.vcp-calc__bs {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  color: var(--text-muted);
}

.vcp-calc__disclaimer {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-12);
  color: var(--text-muted);
}

@media (max-width: 700px) {
  .vcp-calc__grid { flex-direction: column; align-items: stretch; }
  .vcp-calc__result { border-left: none; border-top: 1px dashed var(--line-strong); padding: var(--space-4) 0 0; }
}

/* === Chart (vcp-chart.js) — aligned single-axis line panels + key on the right === */
.vcp-chart {
  margin: var(--space-5) 0 0;
}

.vcp-chart__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

.vcp-chart__note {
  font-size: var(--fs-12);
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
}

.vcp-chart__layout {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.vcp-chart__panels {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}

.vcp-chart__panel { display: block; width: 100%; height: auto; }

.vcp-chart__grid { stroke: var(--line); stroke-width: 1; }

.vcp-chart__tick {
  fill: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
}

.vcp-chart__label {
  fill: var(--text-soft);
  font-size: 11px;
}

.vcp-chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.vcp-chart__line--a { stroke: var(--silver-bright); }
.vcp-chart__line--b { stroke: var(--silver); stroke-dasharray: 7 5; }
.vcp-chart__line--c { stroke: var(--silver-deep); stroke-dasharray: 2 4; stroke-linecap: round; }
.vcp-chart__line--d { stroke: var(--silver-deep); }

.vcp-chart__cross { stroke: var(--line-strong); stroke-width: 1; opacity: 0; }

.vcp-chart__legend {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  max-width: 180px;
}

.vcp-chart__legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-12);
  color: var(--text-soft);
}

.vcp-chart__swatch { width: 22px; flex: 0 0 auto; }
.vcp-chart__swatch--a { border-top: 2px solid var(--silver-bright); }
.vcp-chart__swatch--b { border-top: 2px dashed var(--silver); }
.vcp-chart__swatch--c { border-top: 2px dotted var(--silver-deep); }
.vcp-chart__swatch--d { border-top: 2px solid var(--silver-deep); }

.vcp-chart__tip {
  position: absolute;
  display: none;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-12);
  color: var(--text-soft);
  max-width: 190px;
  z-index: 2;
}

.vcp-chart__tip strong { color: var(--silver-bright); font-weight: 500; }

.vcp-chart__table { margin-top: var(--space-2); }

.vcp-chart__table summary {
  font-size: var(--fs-12);
  color: var(--text-muted);
  cursor: pointer;
}

.vcp-chart__table { overflow: hidden; }
.vcp-chart__table .vcp-prose { max-height: 300px; overflow: auto; margin-top: var(--space-2); }

@media (max-width: 700px) {
  .vcp-chart__layout { flex-direction: column; gap: var(--space-2); }
  .vcp-chart__legend { flex-direction: row; flex-wrap: wrap; gap: var(--space-3); padding-top: 0; max-width: none; }
}

/* === Timeline (project detail) — vertical milestone list with silver hairline === */
.vcp-timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vcp-timeline::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 5px;
  width: 1px;
  background: linear-gradient(180deg, var(--line-strong), var(--line) 88%, transparent);
}

.vcp-timeline__item {
  position: relative;
  padding: 0 0 var(--space-5) 34px;
}

.vcp-timeline__item:last-child { padding-bottom: 0; }

.vcp-timeline__dot {
  position: absolute;
  top: 5px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: var(--radius-pill);
  background: var(--silver-metal);
  box-shadow: 0 0 0 3px var(--bg), 0 0 12px rgba(232, 235, 239, 0.35);
}

.vcp-timeline__date {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.vcp-timeline__title {
  margin: 4px 0 4px;
  font-family: var(--font-display);
  font-size: var(--fs-20);
  color: var(--silver-bright);
  font-weight: 500;
}

.vcp-timeline__note {
  margin: 0;
  font-size: var(--fs-14);
  color: var(--text-soft);
}

/* === Highlighted panel (Moat section) === */
.vcp-panel {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 30px 32px;
  background:
    radial-gradient(120% 140% at 8% 0%, rgba(206, 212, 220, 0.12), transparent 55%),
    var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-highlight), var(--shadow-float);
}

.vcp-panel__label {
  margin-bottom: var(--space-3);
}

/* === Detail page header (project/topic/paper breakouts) === */
.vcp-detail-header {
  padding: var(--space-6) 0 var(--space-5);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-6);
}

.vcp-detail-header__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.vcp-detail-header h1 {
  font-size: var(--fs-56);
  /* Long unbroken tokens (e.g. bracketed placeholders) must wrap, not
     force horizontal scroll at phone widths (PR #36 audit, BLOCKER 1a) */
  overflow-wrap: anywhere;
}

.vcp-detail-header__thesis {
  max-width: 60ch;
  font-family: var(--font-display);
  font-size: var(--fs-28);
  font-style: italic;
  color: var(--text-soft);
  margin-top: var(--space-3);
}

/* Phones: the thesis reads as a compact descriptive sentence, not display
   copy — smaller, tighter, quieter (issue #127 review feedback). */
@media (max-width: 700px) {
  .vcp-detail-header { padding-top: var(--space-5); margin-bottom: var(--space-5); }
  .vcp-detail-header__thesis {
    font-size: var(--fs-16);
    line-height: 1.45;
    margin-top: var(--space-2);
    color: var(--text-muted);
  }
}

/* === Footer === */
.vcp-footer {
  border-top: 1px solid var(--line);
  padding: 34px var(--space-4) var(--space-5);
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
  justify-content: space-between;
}

.vcp-footer__wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 44px;
  letter-spacing: 0.03em;
  line-height: 1;
}

.vcp-footer__tagline {
  margin-top: var(--space-2);
}

.vcp-footer__meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: rgba(232, 234, 237, 0.34);
  text-align: right;
  line-height: 1.9;
}

.vcp-footer__links {
  display: flex;
  /* five wing links must wrap at phone widths, not widen the page */
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.vcp-footer__links a {
  color: var(--text-muted);
  font-size: var(--fs-14);
  transition: color var(--dur-fast) var(--ease);
}

.vcp-footer__links a:hover { color: var(--silver-bright); }

/* === Voice feedback widget (issue #43) === */

/* Widget root — the single draggable anchor point. Both the trigger ball
   and the panel position themselves relative to THIS element's --widget-x/
   --widget-y (default: bottom-right corner, via the fallback values), not
   independently, so dragging either one moves the same shared spot and
   "bring it back to where it was originally" has one unambiguous target.
   js/voice-widget.js sets these two custom properties; everything else
   here is pure CSS layout off of them. */
#vcp-voice-widget {
  position: fixed;
  right: var(--widget-x, var(--space-5));
  bottom: var(--widget-y, var(--space-5));
  z-index: var(--z-widget);
}

/* Trigger — liquid-motion ball, fixed bottom-right on every page by
   default (drag to reposition — see #vcp-voice-widget above).
   Shape/position are NOT driven by a fixed @keyframes loop (a bare cycle
   always reads as a mechanically repeating pattern, no matter how slow) —
   js/voice-widget.js drives --liquid-radius/--liquid-bg-pos/--liquid-scale
   directly: randomized easing timings at idle, real Web Audio amplitude
   data while the assistant is speaking or the visitor is talking. The
   `transition` here is what makes each JS-set target arrive smoothly
   instead of jumping. */
.vcp-voice-trigger {
  position: relative;
  width: 60px;
  height: 60px;
  padding: 0;
  border: none;
  cursor: grab;
  background: var(--silver-panel);
  background-size: 220% 220%;
  box-shadow: var(--shadow-silver), 0 18px 40px -16px rgba(0, 0, 0, 0.7);
  border-radius: var(--liquid-radius, 50%);
  background-position: var(--liquid-bg-pos, 50% 50%);
  /* translate() composes with scale() so voice-driven drift (--liquid-x/
     --liquid-y, set only while listening — see startAudioReactive) and the
     existing size pulse apply together without fighting over `transform`. */
  transform: translate(var(--liquid-x, 0), var(--liquid-y, 0)) scale(var(--liquid-scale, 1));
  transition: border-radius var(--liquid-dur, 2600ms) ease-in-out,
              background-position var(--liquid-dur, 2600ms) ease-in-out,
              transform 120ms ease-out,
              box-shadow var(--dur-med) var(--ease);
}

.vcp-voice-trigger:active { cursor: grabbing; }

.vcp-voice-trigger:hover {
  box-shadow: var(--shadow-silver), 0 22px 48px -16px rgba(0, 0, 0, 0.78);
}

.vcp-voice-trigger:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Shrinks + dims when the panel is open, staying visible as the panel's
   own "live" indicator rather than disappearing (open/close affordance
   stays visually connected, per the spec). Not applied while minimized —
   a minimized ball stays full-size, since it's the only visible affordance
   at that point. */
.vcp-voice-trigger[data-open="true"]:not([data-minimized="true"]) {
  width: 40px;
  height: 40px;
}

@media (prefers-reduced-motion: reduce) {
  .vcp-voice-trigger {
    transition: box-shadow var(--dur-med) var(--ease);
    border-radius: var(--radius-pill) !important;
    transform: none !important;
  }
}

/* Reposition-reset control — a small "x" that appears above/beside the
   ball on hover, ONLY once it's been dragged somewhere other than the
   default corner (see js/voice-widget.js's hasCustomPosition tracking).
   Clicking it snaps the widget back to the original bottom-right spot —
   the one restore target for whatever state the ball/panel are in. */
.vcp-voice-reset {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

#vcp-voice-widget[data-repositioned="true"] .vcp-voice-trigger:hover ~ .vcp-voice-reset,
#vcp-voice-widget[data-repositioned="true"] .vcp-voice-reset:hover {
  display: flex;
}

.vcp-voice-reset:hover { color: var(--text); border-color: var(--line-strong); }

/* Panel — anchored just above the ball at whatever spot it's been dragged
   to (see #vcp-voice-widget above), not full-screen. */
.vcp-voice-panel {
  position: absolute;
  right: 0;
  bottom: 76px;
  z-index: var(--z-widget);
  width: min(360px, calc(100vw - var(--space-5) * 2));
  max-height: min(520px, calc(100vh - 140px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-highlight), var(--shadow-float);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}

.vcp-voice-panel[data-open="true"] {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Minimized: session keeps running (mic/recognition untouched — see
   VoiceWidget.prototype.setMinimized), only the panel visually collapses
   away, leaving just the ball as the visible, draggable affordance. */
.vcp-voice-panel[data-minimized="true"] {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
}

.vcp-voice-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  cursor: grab;
  user-select: none;
}

.vcp-voice-panel__header:active { cursor: grabbing; }

.vcp-voice-panel__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.vcp-voice-panel__minimize {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-16);
  line-height: 1;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.vcp-voice-panel__minimize:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }

.vcp-voice-panel__title {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  color: var(--silver-bright);
}

.vcp-voice-panel__close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-20);
  line-height: 1;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.vcp-voice-panel__close:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }

.vcp-voice-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Consent screen — the first thing shown, before the mic ever activates */
.vcp-voice-consent {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.vcp-voice-consent__notice {
  font-size: var(--fs-14);
  color: var(--text-soft);
  line-height: 1.6;
}

/* Transcript — alternating assistant/visitor lines within one session */
.vcp-voice-line {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: var(--fs-14);
  line-height: 1.5;
}

.vcp-voice-line--assistant {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--text);
}

.vcp-voice-line--visitor {
  align-self: flex-end;
  background: var(--silver-metal);
  color: var(--on-silver);
  font-weight: 500;
}

/* Status row — mic state + session controls, always visible once armed */
.vcp-voice-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--line);
}

.vcp-voice-status__state {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* === Media banner (issue #69) === */
/* Full-content-width horizontal image holder. Ships as a styled empty frame
   (striped placeholder shared with .vcp-card__media above); dropping a real
   image in is one child element: <img src="..." alt="...">. */
.vcp-media-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  width: 100%;
  /* wide-banner proportions; component-local like .vcp-card__media's height */
  height: clamp(180px, 22vw, 320px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.vcp-media-banner__label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
}

.vcp-media-banner > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Film variant (issue #83): static SVG grain over a slightly muted image so
   the photo reads like film. Grain is a tiled feTurbulence noise texture on
   ::after — no animation, so there is nothing for prefers-reduced-motion to
   suppress. */
.vcp-media-banner--film > img {
  filter: contrast(0.95) saturate(0.8) brightness(0.97);
}

.vcp-media-banner--film::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.32;
  mix-blend-mode: overlay;
}

/* === Editorial prose (issue #88) === */
/* Magazine-article prose: a full-width lede with a drop cap, then body
   paragraphs flowing two per row. Whole paragraphs never split across
   columns. Flow breakers (pull quotes, lists, links) span full width via
   .vcp-editorial__span. Collapses to one column below 900px. */
.vcp-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-6);
  row-gap: var(--space-4);
  align-items: start;
}

.vcp-editorial > p { margin: 0; }

.vcp-editorial__span {
  grid-column: 1 / -1;
}

/* Anchors as breakers keep their own row but shrink the hit target back to
   the text (audit #90 finding 1: a stretched grid-item link is clickable
   across the whole empty row) */
a.vcp-editorial__span {
  justify-self: start;
}

.vcp-editorial__lede {
  grid-column: 1 / -1;
  max-width: 62ch;
  font-family: var(--font-display);
  font-size: var(--fs-20);
  line-height: 1.55;
  color: var(--silver);
}

/* Drop cap on the lede — display serif, no sheen (the sheen stays reserved
   for wordmark/headings per DESIGN.md rule 3) */
.vcp-editorial__lede::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.1em;
  line-height: 0.8;
  padding: 0.05em 0.12em 0 0;
  color: var(--silver-bright);
}

@media (max-width: 900px) {
  .vcp-editorial { grid-template-columns: 1fr; }
}

/* === Page transition: title dip (issue #57) === */
/* The overlay renders as pseudo-elements on <html> so the inline pre-paint
   snippet in each page's <head> can show it before first paint — no DOM
   element required. States: .vcp-dip--in (origin page, dip to black),
   .vcp-dip--hold (destination, set pre-paint), .vcp-dip--out (slow
   cinematic fade-away). Driven by js/page-dip.js. */
html.vcp-dip::before,
html.vcp-dip::after {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-content: center;
  box-sizing: border-box;
  pointer-events: none;
}

html.vcp-dip::before {
  content: 'Entering';
  background: var(--bg);
  padding-bottom: 13rem;
  font-family: var(--font-body);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
}

html.vcp-dip::after {
  content: attr(data-dip-title);
  padding-top: 1rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 1.1;
  background: var(--silver-sheen);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

html.vcp-dip--in::before {
  animation: vcp-dip-fade-in var(--dur-dip-in) var(--ease) both;
}
html.vcp-dip--in::after {
  animation: vcp-dip-fade-in var(--dur-dip-in) var(--ease) both,
             vcp-dip-breathe 1800ms var(--ease) both;
}

/* Destination: negative delay continues the breathe where the origin page
   handed off (~340ms after click, see js/page-dip.js). */
html.vcp-dip--hold::after {
  animation: vcp-dip-breathe 1800ms var(--ease) -340ms both;
}

html.vcp-dip--out::before {
  animation: vcp-dip-fade-out var(--dur-dip-out) var(--ease) both;
}
html.vcp-dip--out::after {
  animation: vcp-dip-fade-out var(--dur-dip-out) var(--ease) both,
             vcp-dip-breathe 1800ms var(--ease) -1040ms both;
}

@keyframes vcp-dip-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes vcp-dip-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes vcp-dip-breathe {
  from { transform: scale(0.97); letter-spacing: 0.02em; }
  to   { transform: scale(1.03); letter-spacing: 0.06em; }
}

@media (prefers-reduced-motion: reduce) {
  html.vcp-dip::before,
  html.vcp-dip::after { display: none; }
}

/* ============ LOGO CHIP ============ */
/* Light plate behind partner/portfolio brand marks so dark logos stay
   legible on the dark theme. --lg variant for detail-page headers. */
.vcp-logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  height: 44px;
  min-width: 44px;
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  background: var(--silver-bright);
  border: 1px solid var(--line);
  flex: none;
  overflow: hidden;
}
.vcp-logo-chip img {
  height: 66%;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  display: block;
}
.vcp-logo-chip--lg {
  height: 64px;
  min-width: 64px;
  border-radius: var(--radius-lg);
}
.vcp-logo-chip--lg img {
  max-width: 170px;
}
/* Uniform variant (project cards): every holder is the same fixed square
   regardless of the logo's aspect ratio, so the grid lines up (issue #129). */
.vcp-logo-chip--uniform {
  width: 64px;
  height: 64px;
  min-width: 0;
  padding: 10px;
}
.vcp-logo-chip--uniform img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}


/* ── Page fade transition (issue #107) ──────────────────────────────
   Replaces the Penrose loader. Non-nav internal navigation (and nav
   repeat visits) cross-fade through a short scrim veil; first visits
   still play the title dip above (html.vcp-dip). js/page-dip.js drives
   these classes. Under prefers-reduced-motion navigation is native and
   immediate. */
/* The veil element. It defaults to transparent (opacity 0); the two
   sides drive it in opposite directions:
   - ORIGIN: js/page-dip.js adds .vcp-fade then .vcp-fade--out on the next
     frame → veil fades UP over the leaving page.
   - DESTINATION: the pre-paint snippet stamps .vcp-fade--in so the page
     starts fully veiled; .vcp-fade--reveal drops it back to 0 → veil
     fades AWAY on the arriving page. */
html.vcp-fade::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease);
}

/* Origin veil up; destination veil starts up and is lifted by --reveal. */
html.vcp-fade--out::before,
html.vcp-fade--in::before { opacity: 1; }
html.vcp-fade--reveal::before { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html.vcp-fade::before { display: none; }
}

/* === Placeholder note — inline marker for draft copy awaiting Jose's edit ===
   Promoted from identical page-scoped copies on intent.html and
   paper-caneycloud.html (issue #136); safe to remove those local copies. */
.placeholder-note {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--text-faint);
  letter-spacing: 0.1em;
}