/* Pipo Ventures — components. CANONICAL, with /tokens.css (design system Decisions 9); DESIGN.md
   says how to change either. Every colour, size, tracking, leading, spacing and width below is a
   token from tokens.css. Deliberate exceptions: the print block pins the light theme's ink and
   rule values so a page printed from the dark theme still prints dark-on-paper; the vw term in
   each fluid clamp; the 1px visually-hidden utility; the external marker's baseline nudge. The
   .pv-stage class serves the design-system artifact's previews only. Classes are prefixed pv-.
   No radius, no shadow, no animation, no breakpoints. */

:root { scroll-padding-top: var(--header-offset); }

.pv-stage { background: var(--ground); color: var(--ink); font-family: var(--font-sans); padding: var(--space-5); display: grid; gap: var(--space-5); }

.pv-root { background: var(--ground); color: var(--ink); font-family: var(--font-sans); -webkit-text-size-adjust: 100%; }
:where(.pv-root, .pv-stage) *, :where(.pv-root, .pv-stage) *::before, :where(.pv-root, .pv-stage) *::after { box-sizing: border-box; min-width: 0; }
:where(.pv-root, .pv-stage) img, :where(.pv-root, .pv-stage) svg { max-width: 100%; height: auto; }
.pv-shell { max-width: var(--shell); margin-inline: auto; }
.pv-section { padding: clamp(var(--space-7), 6vw, var(--space-8)) var(--gutter); border-bottom: var(--stroke-hairline) solid var(--rule); }
.pv-section__inner { max-width: var(--shell); margin-inline: auto; display: grid; gap: var(--space-5); }

:where(.pv-root, .pv-stage) :focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: var(--stroke-focus); }

.pv-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pv-nowrap { white-space: nowrap; }

/* ── Label ─────────────────────────────────────────────── */
.pv-label { margin: 0; font-family: var(--font-mono); font-weight: 400; font-size: var(--text-label); line-height: var(--lead-tight); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-faint); }
.pv-label--accent { color: var(--gold-ink); }
.pv-label--ink { color: var(--ink); }

/* ── SiteHeader ────────────────────────────────────────── */
.pv-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--ground); border-bottom: var(--stroke-hairline) solid var(--rule); padding: var(--space-3) var(--gutter); }
.pv-header__inner { max-width: var(--shell); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.pv-header__brand { display: flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; }
.pv-header__mark { display: block; width: var(--mark-header); height: var(--mark-header); flex: none; }
.pv-header__wordmark { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-body); line-height: var(--lead-heading); letter-spacing: var(--track-text); }
.pv-header__register { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; }

/* ── Hero ──────────────────────────────────────────────── */
.pv-hero { padding: clamp(var(--space-7), 8vw, var(--space-9)) var(--gutter) clamp(var(--space-6), 5vw, var(--space-8)); border-bottom: var(--stroke-hairline) solid var(--rule); }
.pv-hero__inner { max-width: var(--shell); margin-inline: auto; display: grid; gap: clamp(var(--space-6), 5vw, var(--space-8)); }
.pv-hero__head { display: grid; gap: var(--space-5); }
.pv-hero__title { margin: 0; font-weight: 600; font-size: var(--text-display); line-height: var(--lead-display); letter-spacing: var(--track-display); max-width: var(--measure-display); text-wrap: balance; color: var(--ink); }
.pv-caret { color: var(--brand-gold); margin-left: var(--caret-gap); }

/* ── FactGrid ──────────────────────────────────────────── */
.pv-facts-wrap { display: grid; gap: var(--space-2); }
/* Each cell draws its own right and bottom rule over the container's top and left
   rule, so an odd number of cells leaves open ground, not a rule-coloured block. */
.pv-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--col-min-fact), 100%), 1fr)); border-top: var(--stroke-hairline) solid var(--rule); border-left: var(--stroke-hairline) solid var(--rule); }
.pv-fact { background: var(--ground); padding: var(--space-4); display: grid; gap: var(--space-2); align-content: start; margin: 0; border-right: var(--stroke-hairline) solid var(--rule); border-bottom: var(--stroke-hairline) solid var(--rule); }
.pv-fact dt, .pv-fact dd { margin: 0; }
.pv-fact__value { font-size: var(--text-fact); line-height: var(--lead-tight); letter-spacing: var(--track-text); color: var(--ink); }
.pv-fact__value--mono { font-family: var(--font-mono); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.pv-source { margin: 0; }

/* ── TextLink ──────────────────────────────────────────── */
.pv-link { color: var(--gold-ink); text-decoration: underline; text-decoration-color: var(--brand-gold); text-decoration-thickness: var(--stroke-hairline); text-underline-offset: var(--space-1); transition: color var(--duration-fast) var(--ease-standard); }
.pv-link:hover { color: var(--ink); text-decoration-color: currentColor; }
.pv-link--label { font-family: var(--font-mono); font-size: var(--text-label); line-height: var(--lead-tight); letter-spacing: var(--track-label); text-transform: uppercase; }
.pv-link--standalone { display: inline-flex; align-items: center; min-height: var(--tap-min); justify-self: start; }
.pv-link__ext { display: inline-block; flex: none; width: var(--space-3); height: var(--space-3); margin-left: var(--space-1); vertical-align: -0.1em; }
.pv-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }

/* ── Band ──────────────────────────────────────────────── */
/* The band remaps the page tokens, so any component placed inside stays legible. */
.pv-band { --ink: var(--band-ink); --ink-muted: var(--band-ink-muted); --ink-faint: var(--band-ink-muted); --gold-ink: var(--band-link); --focus: var(--band-link); --rule: var(--band-rule); --ground: var(--band);
  background: var(--band); color: var(--ink); border-top: var(--stroke-accent) solid var(--brand-gold); border-bottom: var(--stroke-hairline) solid var(--rule); }
.pv-band__inner { max-width: var(--shell); margin-inline: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--col-min), 100%), 1fr)); }
.pv-band__col { padding: clamp(var(--space-6), 5vw, var(--space-8)) var(--gutter); display: grid; gap: var(--space-5); align-content: start; }
.pv-band__col + .pv-band__col { border-left: var(--stroke-hairline) solid var(--rule); }
.pv-band__statement { margin: 0; font-size: var(--text-lede); line-height: var(--lead-text); letter-spacing: var(--track-text); max-width: var(--measure-narrow); text-wrap: pretty; color: var(--ink); }

/* ── Section head ──────────────────────────────────────── */
.pv-head { display: grid; gap: var(--space-3); }
.pv-title { margin: 0; font-weight: 600; font-size: var(--text-title); line-height: var(--lead-title); letter-spacing: var(--track-title); color: var(--ink); max-width: var(--measure-title); text-wrap: balance; }
.pv-intro { margin: 0; font-size: var(--text-body); line-height: var(--lead-body); color: var(--ink-muted); max-width: var(--measure); text-wrap: pretty; }
.pv-body { margin: 0; font-size: var(--text-body); line-height: var(--lead-body); color: var(--ink-muted); max-width: var(--measure-narrow); text-wrap: pretty; }

/* ── Register (ruled entries) ──────────────────────────── */
.pv-register { margin: 0; padding: 0; list-style: none; border-top: var(--stroke-hairline) solid var(--rule); }
.pv-entry { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--col-min), 100%), 1fr)); gap: var(--space-3) var(--space-5); padding: var(--space-6) 0; border-bottom: var(--stroke-hairline) solid var(--rule); }
/* The section's own rule closes the list, so the last entry draws none. */
.pv-entry:last-child { border-bottom: 0; }
.pv-entry--keyed { display: flex; flex-wrap: wrap; }
.pv-entry__key { display: grid; gap: var(--space-2); align-content: start; }
.pv-entry--keyed .pv-entry__key { flex: 0 0 var(--col-entry-key); }
.pv-entry__main { display: grid; gap: var(--space-4); align-content: start; }
.pv-entry--keyed .pv-entry__main { flex: 1 1 var(--col-min); }
.pv-entry__name { margin: 0; font-weight: 600; font-size: var(--text-heading); line-height: var(--lead-heading); letter-spacing: var(--track-heading); color: var(--ink); }
.pv-entry__tagline { margin: 0; font-size: var(--text-lede); line-height: var(--lead-text); letter-spacing: var(--track-text); color: var(--ink); max-width: var(--measure-narrow); }
.pv-entry__status { margin: 0; font-size: var(--text-body); line-height: var(--lead-body); color: var(--ink-muted); max-width: var(--measure-narrow); padding-top: var(--space-3); border-top: var(--stroke-hairline) solid var(--rule); }
.pv-entry--empty .pv-entry__name { color: var(--ink-faint); }
.pv-hatch { height: var(--space-9); max-width: var(--measure-narrow); border: var(--stroke-hairline) dashed var(--rule-strong); background-color: var(--ground-sunk); background-image: repeating-linear-gradient(135deg, var(--rule-strong) 0 var(--stroke-hairline), transparent var(--stroke-hairline) var(--space-3)); }

/* ── Button ────────────────────────────────────────────── */
.pv-button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-min); padding: 0 var(--space-4); margin: 0; background: transparent; color: var(--ink-muted); border: var(--stroke-hairline) solid var(--rule-strong); border-radius: var(--radius-none); font-family: var(--font-mono); font-size: var(--text-label); line-height: var(--lead-tight); letter-spacing: var(--track-label); text-transform: uppercase; cursor: pointer; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.pv-button:hover { color: var(--gold-ink); border-color: var(--gold-ink); }
.pv-button[data-state="copied"] { color: var(--ink); border-color: var(--ink); }
.pv-button[data-state="failed"] { color: var(--ink); border-style: dashed; border-color: var(--ink); }
.pv-button[hidden] { display: none; }

/* ── Operator ──────────────────────────────────────────── */
.pv-operator { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--col-min), 100%), 1fr)); gap: var(--space-5) var(--space-7); max-width: var(--shell); margin-inline: auto; }
.pv-operator__who { display: grid; gap: var(--space-3); align-content: start; }
.pv-operator__name { margin: 0; font-weight: 600; font-size: var(--text-title); line-height: var(--lead-title); letter-spacing: var(--track-title); color: var(--ink); }
.pv-operator__role { margin: 0; font-family: var(--font-mono); font-size: var(--text-label); line-height: var(--lead-tight); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold-ink); }
.pv-operator__detail { display: grid; gap: var(--space-2); align-content: start; }
.pv-operator__bio { margin: 0; font-size: var(--text-lede); line-height: var(--lead-text); letter-spacing: var(--track-text); color: var(--ink-muted); max-width: var(--measure-narrow); text-wrap: pretty; }

/* ── Contact ───────────────────────────────────────────── */
.pv-contact { display: grid; gap: var(--space-5); }
.pv-contact__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.pv-contact__address { font-family: var(--font-mono); font-size: var(--text-contact); line-height: var(--lead-heading); letter-spacing: var(--track-text); color: var(--ink); text-decoration: underline; text-decoration-color: var(--brand-gold); text-decoration-thickness: var(--stroke-hairline); text-underline-offset: var(--space-2); overflow-wrap: anywhere; }
.pv-contact__address:hover { text-decoration-color: currentColor; }

/* ── SiteFooter ────────────────────────────────────────── */
.pv-footer { padding: var(--space-5) var(--gutter) var(--space-7); }
.pv-footer__inner { max-width: var(--shell); margin-inline: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-3) var(--space-6); }
.pv-small { margin: 0; font-size: var(--text-small); line-height: var(--lead-text); color: var(--ink-faint); max-width: var(--measure); }

/* ── Mark ──────────────────────────────────────────────── */
.pv-marks { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-6); }
.pv-marks figure { margin: 0; display: grid; gap: var(--space-2); justify-items: start; }
.pv-marks img { display: block; }

@media (prefers-reduced-motion: reduce) {
  .pv-link, .pv-button { transition: none; }
}

@media (forced-colors: active) {
  .pv-hatch { background-image: none; }
  .pv-band { border-top-color: CanvasText; }
  .pv-link, .pv-contact__address { text-decoration-color: currentColor; }
}

@media print {
  @page { margin: 16mm; }
  :where(.pv-root, .pv-stage), :where(.pv-root, .pv-stage) * { background-color: transparent !important; color: #1c1c1e !important; border-color: #85837e !important; text-decoration-color: currentColor !important; }
  .pv-band { border-top: 2px solid #1c1c1e !important; }
  .pv-hatch { print-color-adjust: exact; -webkit-print-color-adjust: exact; background-image: repeating-linear-gradient(135deg, #85837e 0 1px, transparent 1px 12px) !important; }
  .pv-header { position: static; }
  .pv-button { display: none !important; }
  .pv-entry, .pv-fact { break-inside: avoid; }
}