/* =============================================================================
   biolbe design base — public View page (resource/ViewPage.dc.html)
   Sixteen layouts that replace the legacy template+theme system. Each is a styled
   shell around the profile header, the custom_bar fields, and the rendered bio
   body (.vp-body). Translated from the mockup's inline styles to classes.
   ========================================================================== */

.vp { min-height: 100vh; background: var(--bg); color: var(--fg); }
/* --- rendered bio body (rich text from BioText, any render mode) ----------- */
.vp-body { font-size: 15px; line-height: 1.75; color: var(--muted); }
.vp-body > :first-child { margin-top: 0; }
.vp-body > :last-child { margin-bottom: 0; }
.vp-body h1, .vp-body h2, .vp-body h3, .vp-body h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg);
  line-height: 1.15;
  margin: 1.6em 0 0.5em;
  scroll-margin-top: 20px;
}
.vp-body h1 { font-size: 30px; }
.vp-body h2 { font-size: 24px; }
.vp-body h3 { font-size: 19px; }
.vp-body p { margin: 0 0 1.1em; }
.vp-body ul, .vp-body ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.vp-body li { margin-bottom: 0.35em; }
.vp-body strong { color: var(--fg); font-weight: 700; }
.vp-body a { text-decoration: underline; text-underline-offset: 2px; }
.vp-body img { max-width: 100%; height: auto; border-radius: var(--r-box); }
.vp-body hr { border: none; border-top: 1px solid var(--border); margin: 1.8em 0; }
.vp-body blockquote {
  margin: 0 0 1.1em;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 12px 12px 0;
  padding: 14px 20px;
}
.vp-body code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
}
.vp-body pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-box);
  padding: 14px 16px;
  overflow: auto;
}
.vp-body pre code { background: none; border: none; padding: 0; }

/* --- small shared bits ---------------------------------------------------- */
.vp-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.vp-stat__num { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--fg); }
.vp-stat__label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--faint); }

/* ============================ 1 · CLASSIC ================================== */
.vp--classic .vp-banner {
  height: 150px;
  background: linear-gradient(120deg, var(--accent-soft), var(--surface));
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--border);
}
.vp--classic .vp-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  padding: 0 24px 44px;
  align-items: start;
}
.vp--classic .vp-aside { margin-top: -56px; }
.vp--classic .vp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
}
.vp--classic .vp-avatar {
  width: 88px; height: 88px;
  border-radius: 20px;
  border: 3px solid var(--surface);
  background: var(--surface-2) center/cover no-repeat;
  margin: -52px 0 12px;
}
.vp--classic .vp-name { font-family: var(--font-display); font-weight: 800; font-size: 23px; line-height: 1.1; }
.vp--classic .vp-handle { font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin-bottom: 14px; }
.vp--classic .vp-views {
  display: flex; align-items: baseline; justify-content: center; gap: 7px;
  padding: 14px 4px; margin-bottom: 16px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.vp--classic .vp-fields-label { margin-bottom: 10px; }
.vp--classic .vp-main { padding-top: 20px; min-width: 0; }

/* custom_bar fields (label / value rows) */
.vp-fields { display: flex; flex-direction: column; gap: 9px; }
.vp-fields__row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.vp-fields__k { color: var(--faint); }
.vp-fields__v { font-weight: 600; text-align: right; }

/* ============================ 2 · MAGAZINE ================================ */
.vp--magazine .vp-cover {
  position: relative; height: 320px; overflow: hidden;
  background: linear-gradient(135deg, var(--accent-soft), var(--surface));
  background-size: cover; background-position: center;
  border-bottom: 1px solid var(--border);
}
.vp--magazine .vp-cover__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 52px 34px;
  background: linear-gradient(to top, var(--bg) 12%, transparent);
}
.vp--magazine .vp-cover__eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}
.vp--magazine .vp-cover__name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 76px; line-height: 0.92; letter-spacing: -0.03em;
}
.vp--magazine .vp-grid {
  max-width: 980px; margin: 0 auto; padding: 46px 52px 56px;
  display: grid; grid-template-columns: 196px 1fr; gap: 52px; align-items: start;
}
.vp--magazine .vp-aside { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 26px; }
.vp--magazine .vp-dossier-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--faint);
  padding-bottom: 9px; border-bottom: 1px solid var(--fg); margin-bottom: 12px;
}
.vp--magazine .vp-dossier { display: flex; flex-direction: column; gap: 12px; }
.vp--magazine .vp-dossier__k { font-size: 11px; color: var(--faint); margin-bottom: 1px; }
.vp--magazine .vp-dossier__v { font-weight: 600; font-size: 14px; }
.vp--magazine .vp-stat-box { border-top: 1px solid var(--border); padding-top: 18px; }
.vp--magazine .vp-body { font-size: 18px; line-height: 1.8; color: var(--fg); }
.vp--magazine .vp-body > p:first-of-type::first-letter {
  float: left; font-family: var(--font-display); font-weight: 800;
  font-size: 68px; line-height: 0.72; padding: 8px 14px 0 0; color: var(--accent);
}

/* ============================ 3 · CONTENT ================================= */
.vp--content .vp-grid {
  max-width: 960px; margin: 0 auto; padding: 44px 28px 72px;
  display: grid; grid-template-columns: 196px 1fr; gap: 48px; align-items: start;
}
.vp--content .vp-toc-wrap { position: sticky; top: 24px; min-width: 0; }
.vp--content .vp-toc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.vp--content .vp-toc { display: flex; flex-direction: column; gap: 1px; border-left: 2px solid var(--border); margin-left: 1px; }
.vp--content .vp-toc a {
  padding: 7px 0 7px 14px; margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--muted); font-size: 13px; text-decoration: none;
}
.vp--content .vp-toc a.is-active { border-left-color: var(--accent); color: var(--accent); font-weight: 600; }
.vp--content .vp-toc:empty::after { content: 'Add headings to build a contents list.'; font-size: 12px; color: var(--faint); }
.vp--content .vp-head { margin-bottom: 36px; }
.vp--content .vp-title { font-family: var(--font-display); font-weight: 800; font-size: 38px; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 8px; }
.vp--content .vp-sub { font-family: var(--font-mono); font-size: 12.5px; color: var(--faint); margin: 0; }
.vp--content .vp-body { max-width: 68ch; font-size: 16px; line-height: 1.8; color: var(--fg); }

/* ============================ 4 · MINIMAL ================================= */
.vp--minimal .vp-wrap { max-width: 560px; margin: 0 auto; padding: 64px 28px 72px; text-align: center; }
.vp--minimal .vp-avatar {
  width: 96px; height: 96px; border-radius: 999px; margin: 0 auto 22px;
  background: var(--surface-2) center/cover no-repeat;
}
.vp--minimal .vp-name { font-family: var(--font-display); font-weight: 800; font-size: 36px; line-height: 1; }
.vp--minimal .vp-handle { font-family: var(--font-mono); font-size: 12.5px; color: var(--faint); margin: 8px 0 22px; }
.vp--minimal .vp-views { font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); }
.vp--minimal .vp-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 34px 0; }
.vp--minimal .vp-meta span { font-size: 12.5px; color: var(--muted); }
.vp--minimal .vp-meta i { color: var(--border); font-style: normal; }
.vp--minimal .vp-rule { width: 40px; height: 1px; background: var(--border); margin: 0 auto 34px; }
.vp--minimal .vp-body { text-align: center; color: var(--fg); }

/* ============================ 5 · DOSSIER ================================= */
/* always dark; its own palette regardless of the document theme */
.vp--dossier {
  --d-bg: oklch(0.17 0.025 264);
  --d-line: oklch(0.32 0.03 264);
  --d-dim: oklch(0.6 0.02 264);
  --d-text: oklch(0.84 0.02 264);
  --d-bright: oklch(0.96 0.01 264);
  background: var(--d-bg);
  color: var(--d-text);
  font-family: var(--font-mono);
  position: relative;
}
.vp--dossier::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(oklch(1 0 0 / 0.025) 0 1px, transparent 1px 4px);
}
.vp--dossier .vp-wrap { position: relative; max-width: 820px; margin: 0 auto; padding: 40px 32px 56px; }
.vp--dossier .vp-access { font-size: 11px; letter-spacing: 0.2em; color: var(--accent); }
.vp--dossier .vp-name-row { display: flex; align-items: baseline; gap: 14px; margin: 14px 0 4px; }
.vp--dossier .vp-block { color: var(--accent); font-size: 34px; }
.vp--dossier .vp-name { font-family: var(--font-display); font-weight: 800; font-size: 44px; color: var(--d-bright); letter-spacing: -0.01em; }
.vp--dossier .vp-handle { font-size: 12.5px; color: var(--d-dim); margin-bottom: 26px; }
.vp--dossier .vp-readout { border: 1px solid var(--d-line); border-radius: 8px; padding: 14px 20px; margin-bottom: 26px; font-size: 13px; line-height: 2; }
.vp--dossier .vp-readout__row { display: flex; justify-content: space-between; gap: 8px; }
.vp--dossier .vp-readout__k { color: var(--d-dim); }
.vp--dossier .vp-readout__dots { flex: 1; border-bottom: 1px dotted var(--d-line); transform: translateY(-4px); }
.vp--dossier .vp-readout__v { color: var(--d-bright); white-space: nowrap; }
.vp--dossier .vp-body { font-size: 13.5px; line-height: 1.8; color: var(--d-text); }
.vp--dossier .vp-body h1, .vp--dossier .vp-body h2, .vp--dossier .vp-body h3 {
  font-family: var(--font-mono); color: var(--accent); font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.vp--dossier .vp-body h2::before, .vp--dossier .vp-body h3::before { content: '▸ '; }
.vp--dossier .vp-body strong { color: var(--d-bright); }
.vp--dossier .vp-body a { color: var(--accent); }
.vp--dossier .vp-caret {
  display: inline-block; width: 8px; height: 14px; background: var(--accent);
  vertical-align: -2px; margin-left: 4px; animation: blbCaret 1.1s steps(1) infinite;
}

/* ============================ 6 · BLANK =================================== */
.vp--blank {
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 24px 24px;
}
.vp--blank .vp-wrap { max-width: none; margin: 0; padding: 56px 32px 72px; }
.vp--blank .vp-body { color: var(--fg); }
.vp--blank .vp-empty {
  max-width: 460px; margin: 24px auto; text-align: center;
  border: 2px dashed var(--border); border-radius: 22px; padding: 52px 40px;
}
.vp--blank .vp-empty__mark {
  width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 20px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.vp--blank .vp-empty__title { font-family: var(--font-display); font-weight: 800; font-size: 24px; margin-bottom: 10px; }

/* --- responsive: collapse the two-column layouts -------------------------- */
@media (max-width: 820px) {
  .vp--classic .vp-grid,
  .vp--magazine .vp-grid,
  .vp--content .vp-grid { grid-template-columns: 1fr; gap: 24px; }
  .vp--classic .vp-aside { margin-top: -40px; }
  .vp--magazine .vp-aside,
  .vp--content .vp-toc-wrap { position: static; }
  .vp--magazine .vp-cover__name { font-size: 52px; }
  .vp--magazine .vp-grid { padding: 32px 22px 48px; }
  .vp--magazine .vp-cover__caption { padding: 32px 22px 26px; }
}

/* ============================ 6 · SECTIONS ============================== */
.vp--sections .vp-wrap { max-width: 720px; margin: 0 auto; padding: 36px 24px 64px; }
.vp--sections .vp-head {
  display: flex; align-items: center; gap: 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 22px 24px; margin-bottom: 28px;
}
.vp--sections .vp-avatar {
  width: 64px; height: 64px; border-radius: 18px; flex: none;
  background: var(--surface-2) center/cover no-repeat;
}
.vp--sections .vp-id { min-width: 0; flex: 1; }
.vp--sections .vp-name { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1; }
.vp--sections .vp-handle { font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); margin-top: 6px; line-height: 1.5; }
.vp--sections .vp-stat { text-align: right; flex: none; }
.vp--sections .vp-stat__num { font-size: 19px; }
.vp--sections .vp-stat__label { display: block; }
/* view-page.js wraps each ## heading + the content beneath it (until the next
   ##) in a .vp-section card; style the card + its heading here. */
.vp--sections .vp-body { display: flex; flex-direction: column; gap: 18px; }
.vp--sections .vp-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-box); padding: 22px 24px;
}
.vp--sections .vp-section h2 { margin: 0 0 12px; font-size: 21px; }
.vp--sections .vp-section > :last-child { margin-bottom: 0; }
/* content before the first ## stays outside a card — give it side padding to line
   up with the cards */
.vp--sections .vp-body > :not(.vp-section) { margin-left: 4px; margin-right: 4px; }

/* ============================ 7 · SPLIT ================================== */
.vp--split .vp-split-grid {
  display: grid; grid-template-columns: 300px 1fr;
  min-height: 100%; align-items: stretch;
}
.vp--split .vp-panel {
  background: linear-gradient(170deg, var(--accent), oklch(from var(--accent) calc(l - 0.12) c h));
  color: var(--on-accent); padding: 44px 32px;
}
.vp--split .vp-panel__inner { position: sticky; top: 36px; display: flex; flex-direction: column; }
.vp--split .vp-avatar {
  width: 84px; height: 84px; border-radius: 24px;
  background: oklch(1 0 0 / 0.18) center/cover no-repeat;
  border: 1px solid oklch(1 0 0 / 0.3); margin-bottom: 20px;
}
.vp--split .vp-name { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1; }
.vp--split .vp-handle { font-family: var(--font-mono); font-size: 11.5px; opacity: 0.75; margin: 9px 0 26px; }
.vp--split .vp-fields {
  display: flex; flex-direction: column; gap: 9px;
  border-top: 1px solid oklch(1 0 0 / 0.25); padding-top: 20px; font-size: 13px;
}
.vp--split .vp-fields__row { display: flex; justify-content: space-between; gap: 12px; }
.vp--split .vp-fields__k { color: var(--on-accent); opacity: 0.7; }
.vp--split .vp-fields__v { font-weight: 600; text-align: right; white-space: nowrap; }
.vp--split .vp-stat { border-top: 1px solid oklch(1 0 0 / 0.25); margin-top: 20px; padding-top: 18px; }
.vp--split .vp-stat__num { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--on-accent); }
.vp--split .vp-stat__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--on-accent); opacity: 0.7; }
.vp--split .vp-body {
  min-width: 0; max-width: 660px; width: 100%; justify-self: start;
  padding: 48px 52px 64px; color: var(--fg);
}
@media (max-width: 820px) {
  .vp--split .vp-split-grid { grid-template-columns: 1fr; }
  .vp--split .vp-panel__inner { position: static; }
  .vp--split .vp-body { padding: 32px 22px 48px; }
}

/* ============================ 8 · JOURNAL ================================ */
.vp--journal {
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 26px 26px; padding: 52px 24px 72px;
}
.vp--journal .vp-paper {
  max-width: 620px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 24px 50px -28px oklch(0 0 0 / 0.45); padding: 52px 56px;
}
.vp--journal .vp-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--faint);
  border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 30px;
}
.vp--journal .vp-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 34px; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 6px;
}
.vp--journal .vp-handle { font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); margin-bottom: 34px; }
.vp--journal .vp-art {
  float: right; width: 168px; margin: 4px 0 14px 22px;
  background: var(--elev); border: 1px solid var(--border); padding: 8px;
  transform: rotate(2.5deg); box-shadow: 0 10px 22px -12px oklch(0 0 0 / 0.4);
}
.vp--journal .vp-avatar { aspect-ratio: 3 / 4; background: var(--surface-2) center/cover no-repeat; }
.vp--journal .vp-body {
  font-family: var(--font-display); font-style: italic;
  font-size: 16.5px; line-height: 1.9; color: var(--fg);
}
.vp--journal .vp-divider { clear: both; display: flex; align-items: center; gap: 14px; margin: 30px 0 22px; }
.vp--journal .vp-divider__line { height: 1px; flex: 1; background: var(--border); }
.vp--journal .vp-divider__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--faint); }
.vp--journal .vp-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; font-size: 13px; margin-bottom: 34px; }
.vp--journal .vp-notes__row { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--border); padding-bottom: 7px; }
.vp--journal .vp-notes__k { color: var(--faint); }
.vp--journal .vp-notes__v { font-weight: 600; }
.vp--journal .vp-sign { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 22px; color: var(--accent); }

/* ============================ 9 · COVER =================================== */
.vp--cover .vp-hero {
  position: relative; padding: 58px 24px 68px; text-align: center; overflow: hidden;
  color: var(--on-accent);
  /* longhands (not the `background` shorthand) so an inline background-image —
     the owner's cover photo — overrides only the gradient, keeping size/position */
  background-color: var(--accent);
  background-image: linear-gradient(160deg, var(--accent), oklch(from var(--accent) calc(l - 0.14) c h));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* with a cover photo the hero background IS the photo; lay an accent scrim over
   it so the white hero text/chips stay legible */
.vp--cover .vp-hero--cover::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, oklch(from var(--accent) l c h / 0.72), oklch(from var(--accent) calc(l - 0.16) c h / 0.85));
}
.vp--cover .vp-hero__inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.vp--cover .vp-avatar {
  width: 104px; height: 104px; border-radius: 30px; margin: 0 auto 20px;
  background: oklch(1 0 0 / 0.16) center/cover no-repeat; border: 1px solid oklch(1 0 0 / 0.32);
}
.vp--cover .vp-name { font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 1; letter-spacing: -0.02em; }
.vp--cover .vp-handle { font-family: var(--font-mono); font-size: 12.5px; opacity: 0.8; margin: 13px 0 22px; }
.vp--cover .vp-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.vp--cover .vp-chip { padding: 7px 14px; border-radius: 999px; background: oklch(1 0 0 / 0.16); font-size: 12.5px; font-weight: 600; }
.vp--cover .vp-views { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; opacity: 0.72; margin-top: 20px; }
.vp--cover .vp-col { max-width: 640px; margin: 0 auto; padding: 48px 28px 72px; }
.vp--cover .vp-col__eyebrow { letter-spacing: 0.14em; margin-bottom: 26px; }
.vp--cover .vp-col__eyebrow span { color: var(--accent); }
.vp--cover .vp-body { color: var(--fg); }

/* ============================ 10 · RAIL ================================== */
.vp--rail .vp-grid {
  max-width: 1000px; margin: 0 auto; padding: 46px 28px 64px;
  display: grid; grid-template-columns: 1fr 282px; gap: 46px; align-items: start;
}
.vp--rail .vp-article { min-width: 0; max-width: 64ch; }
.vp--rail .vp-head { margin-bottom: 32px; }
.vp--rail .vp-title { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 6px; }
.vp--rail .vp-sub { font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin: 0; }
.vp--rail .vp-body { font-size: 15.5px; line-height: 1.8; color: var(--fg); }
.vp--rail .vp-aside { position: sticky; top: 24px; }
.vp--rail .vp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 22px 22px 20px; }
.vp--rail .vp-avatar { width: 72px; height: 72px; border-radius: 20px; margin-bottom: 14px; background: var(--surface-2) center/cover no-repeat; }
.vp--rail .vp-name { font-family: var(--font-display); font-weight: 800; font-size: 21px; line-height: 1.1; }
.vp--rail .vp-handle { font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin-bottom: 16px; }
.vp--rail .vp-fields { display: flex; flex-direction: column; gap: 9px; border-top: 1px solid var(--border); padding-top: 16px; }
.vp--rail .vp-views { display: flex; align-items: baseline; gap: 7px; border-top: 1px solid var(--border); margin-top: 16px; padding-top: 14px; }
@media (max-width: 820px) {
  .vp--rail .vp-grid { grid-template-columns: 1fr; gap: 28px; }
  .vp--rail .vp-article { max-width: none; }
  .vp--rail .vp-aside { position: static; }
}

/* ============================ 11 · POSTER ================================= */
.vp--poster .vp-poster-wrap { max-width: 760px; margin: 0 auto; padding: 60px 28px 76px; }
.vp--poster .vp-poster-eyebrow { font-size: 11px; letter-spacing: 0.22em; color: var(--accent); margin-bottom: 16px; }
.vp--poster .vp-poster-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 92px; line-height: 0.88; letter-spacing: -0.035em; margin-bottom: 22px; overflow-wrap: anywhere;
}
.vp--poster .vp-poster-meta { display: flex; flex-wrap: wrap; border-top: 2px solid var(--fg); border-bottom: 1px solid var(--border); }
.vp--poster .vp-poster-cell { flex: 1; min-width: 110px; padding: 14px 16px; border-left: 1px solid var(--border); }
.vp--poster .vp-poster-cell:first-child { padding-left: 0; border-left: none; }
.vp--poster .vp-poster-cell__k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--faint); margin-bottom: 3px; }
.vp--poster .vp-poster-cell__v { font-weight: 600; font-size: 14px; }
.vp--poster .vp-body { max-width: 64ch; margin-top: 40px; font-size: 16px; line-height: 1.8; color: var(--fg); }

/* ============================ 12 · LETTER ================================ */
.vp--letter .vp-pad { padding: 44px 24px 76px; }
.vp--letter .vp-sheet {
  max-width: 680px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 54px -30px oklch(0 0 0 / 0.4); padding: 48px 56px 52px;
}
.vp--letter .vp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 2px solid var(--fg); }
.vp--letter .vp-ident { display: flex; align-items: center; gap: 14px; min-width: 0; }
.vp--letter .vp-avatar { width: 56px; height: 56px; border-radius: 15px; flex: none; background: var(--surface-2) center/cover no-repeat; }
.vp--letter .vp-ident__text { min-width: 0; }
.vp--letter .vp-name { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1; }
.vp--letter .vp-handle { font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin-top: 5px; }
.vp--letter .vp-meta { text-align: right; flex: none; font-size: 11.5px; line-height: 1.6; color: var(--muted); white-space: nowrap; }
.vp--letter .vp-meta__views { font-family: var(--font-mono); font-size: 9px; color: var(--faint); letter-spacing: 0.08em; margin-top: 4px; }
.vp--letter .vp-body { padding-top: 30px; font-size: 15px; line-height: 1.85; color: var(--fg); }
.vp--letter .vp-sign { display: flex; justify-content: flex-end; border-top: 1px solid var(--border); padding-top: 20px; margin-top: 30px; }
.vp--letter .vp-sign__name { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 22px; color: var(--accent); }

/* ============================ 13 · TICKET ================================ */
.vp--ticket .vp-wrap { max-width: 760px; margin: 0 auto; padding: 44px 28px 72px; }
.vp--ticket .vp-pass {
  display: flex; border-radius: 16px; overflow: hidden; border: 1px solid var(--border);
  box-shadow: 0 20px 46px -28px oklch(0 0 0 / 0.42); margin-bottom: 46px;
}
.vp--ticket .vp-stub {
  width: 196px; flex: none;
  background: linear-gradient(165deg, var(--accent), oklch(from var(--accent) calc(l - 0.13) c h));
  color: var(--on-accent); padding: 24px 22px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
}
.vp--ticket .vp-avatar {
  width: 60px; height: 60px; border-radius: 18px;
  background: oklch(1 0 0 / 0.18) center/cover no-repeat; border: 1px solid oklch(1 0 0 / 0.3);
}
.vp--ticket .vp-name { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1; }
.vp--ticket .vp-handle { font-family: var(--font-mono); font-size: 10.5px; opacity: 0.8; margin-top: 7px; word-break: break-all; }
.vp--ticket .vp-detail {
  flex: 1; min-width: 0; background: var(--surface); border-left: 2px dashed var(--border);
  padding: 24px 26px; display: flex; flex-direction: column; gap: 20px;
}
.vp--ticket .vp-detail__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.vp--ticket .vp-pass-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--faint); }
.vp--ticket .vp-pass-holder { font-weight: 700; font-size: 16px; margin-top: 4px; }
.vp--ticket .vp-pass-views { text-align: right; flex: none; }
.vp--ticket .vp-pass-views__num { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.vp--ticket .vp-pass-views__label { font-family: var(--font-mono); font-size: 8.5px; color: var(--faint); letter-spacing: 0.06em; }
.vp--ticket .vp-pass-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; }
.vp--ticket .vp-pass-cell__k { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.1em; color: var(--faint); margin-bottom: 2px; }
.vp--ticket .vp-pass-cell__v { font-weight: 600; font-size: 13px; }
.vp--ticket .vp-barcode {
  height: 30px; border-radius: 3px; opacity: 0.35;
  background:
    repeating-linear-gradient(90deg, var(--fg) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(90deg, var(--fg) 0 3px, transparent 3px 5px);
}
.vp--ticket .vp-body { max-width: 64ch; margin: 0 auto; color: var(--fg); }
@media (max-width: 560px) {
  .vp--ticket .vp-pass { flex-direction: column; }
  .vp--ticket .vp-stub { width: auto; flex-direction: row; align-items: center; gap: 16px; padding: 20px 22px; }
  .vp--ticket .vp-name { font-size: 24px; }
  .vp--ticket .vp-detail { border-left: none; border-top: 2px dashed var(--border); }
}

/* ============================ 14 · BANNER ================================ */
.vp--banner { display: flex; min-height: 100%; align-items: stretch; }
.vp--banner .vp-spine {
  width: 138px; flex: none;
  background: linear-gradient(180deg, var(--accent), oklch(from var(--accent) calc(l - 0.12) c h));
  color: var(--on-accent); padding: 30px 0;
}
.vp--banner .vp-spine__inner { position: sticky; top: 24px; display: flex; flex-direction: column; align-items: center; }
.vp--banner .vp-avatar {
  width: 58px; height: 58px; flex: none; border-radius: 16px;
  background: oklch(1 0 0 / 0.18) center/cover no-repeat; border: 1px solid oklch(1 0 0 / 0.3); margin-bottom: 24px;
}
.vp--banner .vp-spine__text { display: flex; align-items: flex-start; gap: 8px; }
.vp--banner .vp-name {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-display); font-weight: 800; font-size: 36px; letter-spacing: -0.01em; line-height: 1;
}
.vp--banner .vp-handle {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-mono); font-size: 10px; opacity: 0.8; line-height: 1.2;
}
.vp--banner .vp-col { flex: 1; min-width: 0; }
.vp--banner .vp-page { max-width: 660px; padding: 48px 48px 72px; }
.vp--banner .vp-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 32px; }
.vp--banner .vp-chip { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 12px; color: var(--muted); white-space: nowrap; }
.vp--banner .vp-chip--accent { border-color: transparent; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.vp--banner .vp-body { color: var(--fg); }
@media (max-width: 820px) {
  .vp--banner { flex-direction: column; }
  .vp--banner .vp-spine { width: 100%; height: auto; padding: 22px 24px; }
  .vp--banner .vp-spine__inner { position: static; flex-direction: row; align-items: center; gap: 16px; }
  .vp--banner .vp-avatar { margin-bottom: 0; }
  .vp--banner .vp-spine__text { flex-direction: column; gap: 2px; }
  .vp--banner .vp-name, .vp--banner .vp-handle { writing-mode: horizontal-tb; transform: none; }
  .vp--banner .vp-name { font-size: 26px; }
  .vp--banner .vp-page { padding: 32px 22px 56px; }
}

/* ============================ 15 · FRAME ================================= */
.vp--frame .vp-pad { padding: 40px 24px 64px; }
.vp--frame .vp-outer { max-width: 720px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 13px; }
.vp--frame .vp-inner { position: relative; border: 1px solid var(--border); border-radius: 2px; padding: 48px 56px 56px; }
.vp--frame .vp-mark { position: absolute; width: 14px; height: 14px; }
.vp--frame .vp-mark--tl { top: 10px; left: 10px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.vp--frame .vp-mark--tr { top: 10px; right: 10px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.vp--frame .vp-mark--bl { bottom: 10px; left: 10px; border-bottom: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.vp--frame .vp-mark--br { bottom: 10px; right: 10px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.vp--frame .vp-head { text-align: center; margin-bottom: 38px; }
.vp--frame .vp-avatar { width: 74px; height: 74px; border-radius: 999px; margin: 0 auto 16px; background: var(--surface-2) center/cover no-repeat; }
.vp--frame .vp-exhibit { font-size: 9.5px; letter-spacing: 0.22em; color: var(--accent); margin-bottom: 12px; }
.vp--frame .vp-name { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -0.02em; }
.vp--frame .vp-meta { font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin-top: 11px; }
.vp--frame .vp-rule { width: 46px; height: 2px; background: var(--accent); margin: 22px auto 0; }
.vp--frame .vp-body { max-width: 60ch; margin: 0 auto; color: var(--fg); }
@media (max-width: 820px) {
  .vp--frame .vp-pad { padding: 24px 14px 48px; }
  .vp--frame .vp-inner { padding: 40px 24px 44px; }
  .vp--frame .vp-name { font-size: 32px; }
}

/* --- mobile: clear the centered top chrome (.blb-chrome, fixed top-center at
   this width) on layouts whose header/content sits at the very top ---------- */
@media (max-width: 560px) {
  .vp--dossier .vp-wrap,
  .vp--content .vp-grid,
  .vp--sections .vp-wrap,
  .vp--rail .vp-grid,
  .vp--blank .vp-wrap { padding-top: 72px; }
  .vp--minimal .vp-wrap { padding-top: 84px; }
  .vp--cover .vp-hero { padding-top: 80px; }
  .vp--banner .vp-spine { padding-top: 62px; }
}