/* ==========================================================================
   VICTORIAN — exhibition room. Loaded on a/victorian.html.

   TIER 2. One jobbing broadside: a centred column, every line its own
   face-and-size decision, hairline rules and double rules between bands,
   fleurons as furniture, white stock, black ink plus one oxblood
   second ink (documented: black on white was the shop's usual work, with a
   red or blue ink in its own run; the off-white of surviving sheets is age). Dense on purpose — whitespace that could carry another line
   of copy is refused, so the leading is tight and the bands touch.

   Sizes are per-line steps (vc-s-1 … vc-s-8), NOT a modular ramp: the
   values are uneven by intention, the way inventory is uneven.
   ========================================================================== */

@font-face { font-family: "PlayfairX"; src: url("fonts/playfair.woff2") format("woff2-variations"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "PlayfairXI"; src: url("fonts/playfair-italic.woff2") format("woff2-variations"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "BodoniX"; src: url("fonts/bodoni-moda.woff2") format("woff2-variations"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "CaslonX"; src: url("fonts/caslon-display.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DMSerifX"; src: url("fonts/dm-serif.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "MarcellusX"; src: url("fonts/marcellus.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EczarX"; src: url("fonts/eczar.woff2") format("woff2-variations"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "AntonX"; src: url("fonts/anton.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "BigShouldersX"; src: url("fonts/big-shoulders.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "StaatlichesX"; src: url("fonts/staatliches.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "BungeeShadeX"; src: url("fonts/bungee-shade.woff2") format("woff2"); font-weight: 400; font-display: swap; }
/* The record's text face: sentences stay readable while the case does the display work. */
@font-face { font-family: "VollkornX"; src: url("fonts/vollkorn.woff2") format("woff2-variations"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "VollkornX"; src: url("fonts/vollkorn-italic.woff2") format("woff2-variations"); font-weight: 400 900; font-style: italic; font-display: swap; }

.vc-page {
  --vc-stock: #FFFFFF;   /* white stock, as printed (kcc:surface-2) */
  --vc-ink: #1C1712;     /* black letterpress ink, not pure black */
  --vc-red: #8C2A21;     /* oxblood second ink — OPEN in the brief, ours */
  --vc-hair: #4a41368a;
  --vc-dim: #5A4E40;     /* faded ink for secondary lines — 8.1:1 on stock */
  --vc-text: "VollkornX", Georgia, serif;
  background: var(--paper);
}
.vc-page main { background: var(--vc-stock); color: var(--vc-ink); }
.vc-wrap { padding: clamp(1rem, 3vw, 2.5rem) 1rem 0; }

.vc-bill {
  max-width: 46rem;
  margin-inline: auto;
  border: 3px double var(--vc-ink);
  outline: 1px solid var(--vc-ink);
  outline-offset: 3px;
  padding: clamp(1rem, 3vw, 2.2rem) clamp(0.9rem, 3vw, 2rem) 0.4rem;
  text-align: center;
  /* One sheet: the record below continues this frame, so its foot is open. */
  border-bottom: 0;
  clip-path: inset(-6px -6px 0 -6px);
}

/* Bands touch: density is the economics. */
.vc-band { padding-block: 0.4rem; }
.vc-band + .vc-band { border-block-start: 0; }

/* every line is one decision */
.vc-l { margin: 0.28rem 0; line-height: 1.08; text-wrap: balance; }
.vc-l b { font-weight: inherit; letter-spacing: 0.04em; }
.vc-red { color: var(--vc-red); }
.vc-measure { max-width: 38rem; margin-inline: auto; text-align: center; }

/* the case — faces, per line */
.vc-f-marcellus { font-family: "MarcellusX", Georgia, serif; text-transform: uppercase; letter-spacing: 0.22em; }
.vc-f-caslon { font-family: "CaslonX", Georgia, serif; line-height: 1.34; }
.vc-f-playfair-i { font-family: "PlayfairXI", Georgia, serif; font-style: italic; }
.vc-f-bodoni { font-family: "BodoniX", "Didot", serif; line-height: 1.3; }
.vc-f-dm { font-family: "DMSerifX", Georgia, serif; }
.vc-f-eczar { font-family: "EczarX", Georgia, serif; font-weight: 600; line-height: 1.35; }
.vc-f-anton { font-family: "AntonX", "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: 0.03em; }
.vc-f-big { font-family: "BigShouldersX", "Arial Narrow", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.vc-f-staat { font-family: "StaatlichesX", "Arial Narrow", sans-serif; letter-spacing: 0.08em; }
.vc-f-shade { font-family: "BungeeShadeX", "Arial Black", sans-serif; text-transform: uppercase; }

/* uneven size steps — inventory, not a ramp */
.vc-s-1 { font-size: 0.82rem; }
.vc-s-2 { font-size: 0.98rem; }
.vc-s-3 { font-size: 1.28rem; }
.vc-s-4 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.vc-s-5 { font-size: clamp(1.8rem, 4.6vw, 2.9rem); }
.vc-s-6 { font-size: clamp(2rem, 5.4vw, 3.4rem); }
.vc-s-8 { font-size: clamp(1.9rem, 9.6vw, 5.6rem); line-height: 1; }

/* rules and furniture */
.vc-rule { height: 1px; background: var(--vc-ink); margin: 0.55rem auto; width: 82%; }
.vc-rule--double { height: 4px; border-block: 1px solid var(--vc-ink); background: transparent; width: 100%; }
.vc-fleuron { margin: 0.45rem 0 0.15rem; color: var(--vc-red); font-size: 1rem; letter-spacing: 0.8em; padding-inline-start: 0.8em; }

/* ---- the pastiche lever ------------------------------------------------ */
.vc-pa-in { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vc-pa-lever { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; margin: 0.5rem 0 0.7rem; padding: 0.3rem 0.9rem; border: 1px solid var(--vc-ink); font-family: "EczarX", Georgia, serif; font-size: 0.9rem; }
.vc-pa-in:focus-visible + .vc-pa-lever { outline: 2px solid var(--vc-red); outline-offset: 2px; }
.vc-pa-lever__on { display: none; }
.vc-pa-in:checked ~ .vc-pa-lever .vc-pa-lever__off { display: none; }
.vc-pa-in:checked ~ .vc-pa-lever .vc-pa-lever__on { display: inline; }

.vc-pa-bill { border: 1px solid var(--vc-hair); padding: 0.9rem 0.8rem; max-width: 34rem; margin-inline: auto; }
/* inventory state: six lines, six faces */
.vc-pa-1 { font-family: "MarcellusX", serif; text-transform: uppercase; letter-spacing: 0.2em; }
.vc-pa-2 { font-family: "BungeeShadeX", sans-serif; text-transform: uppercase; line-height: 1.05; }
.vc-pa-3 { font-family: "PlayfairXI", serif; font-style: italic; }
.vc-pa-4 { font-family: "AntonX", sans-serif; text-transform: uppercase; }
.vc-pa-5 { font-family: "CaslonX", serif; }
.vc-pa-6 { font-family: "StaatlichesX", sans-serif; letter-spacing: 0.07em; }
/* coordinated-family state: one voice — the named failure */
.vc-pa-in:checked ~ .vc-pa-bill .vc-l {
  font-family: "PlayfairX", Georgia, serif !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--vc-ink);
}
.vc-pa-in:checked ~ .vc-pa-bill .vc-pa-2 { font-weight: 800; }
.vc-pa-in:checked ~ .vc-pa-bill .vc-pa-4 { font-weight: 600; }

.vc-pa-verdict { max-width: 34rem; margin-inline: auto; }
.vc-pa-verdict--fam { display: none; }
.vc-pa-in:checked ~ .vc-pa-verdict--inv { display: none; }
.vc-pa-in:checked ~ .vc-pa-verdict--fam { display: block; }
.vc-doc { max-width: 34rem; margin: 0.6rem auto 0.2rem; }

@media (max-width: 30rem) {
  .vc-bill { outline: none; }
}

/* ==========================================================================
   THE RECORD — the rest of the same bill.

   The frame runs on from the hero's sheet (its top is open, as the bill's
   foot is), bands are divided by the same hairline, double rule and
   fleurons, and each heading changes face and size per line. Labels are set
   in the case's display faces; every sentence is VollkornX at a reading
   size, centred on the bill's axis like every other line.
   Ink #1C1712 on stock 18.1:1 · oxblood #8C2A21 8.5:1 · faded ink #5A4E40 8.1:1.
   Motionless: nothing here animates or transitions.
   ========================================================================== */
/* The shell's scroll reveal must never leave the record at opacity 0.
   (Outranks site.css's .js-reveal rule.) */
.js-reveal .vc-page main > section.vc-rec, .vc-page main > section.vc-rec { opacity: 1; transform: none; transition: none; will-change: auto; }

.vc-rec { padding: 0 1rem clamp(1rem, 3vw, 2.5rem); color: var(--vc-ink); }
.vc-sheet {
  max-width: 46rem;
  margin-inline: auto;
  border: 3px double var(--vc-ink);
  border-top: 0;
  outline: 1px solid var(--vc-ink);
  outline-offset: 3px;
  clip-path: inset(0 -6px -6px -6px);
  padding: 0 clamp(0.9rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem);
  text-align: center;
  font: 400 1.1rem/1.58 var(--vc-text);
  display: flow-root; /* the first rule's margin stays inside the frame */
}
.vc-sheet b { font-weight: 700; }
.vc-sheet em { font-style: italic; }
.vc-rec a { color: var(--vc-ink); text-decoration-color: var(--vc-red); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.vc-rec a:hover { color: var(--vc-red); }
.vc-rec :focus-visible { outline: 2px solid var(--vc-red); outline-offset: 3px; }

/* bands: touching, as the hero's do — a rule is the only gap */
.vc-rb { padding-block: 0.7rem 1rem; }
.vc-rh { margin: 0 0 0.8rem; font: inherit; }
.vc-rh > .vc-l { display: block; margin: 0.12rem 0; }

/* sentences */
.vc-p {
  display: block;
  max-width: 36em;
  margin: 0.45rem auto;
  text-wrap: pretty;
}
.vc-pull {
  max-width: 24em;
  margin: 0.2rem auto 0.7rem;
  font: 400 clamp(1.35rem, 3vw, 1.75rem)/1.3 "DMSerifX", Georgia, serif;
  text-wrap: balance;
}
.vc-dx {
  max-width: 30em;
  margin: 0.8rem auto;
  padding: 0.55rem 0.4rem;
  border-block: 1px solid var(--vc-ink);
  font-style: italic;
  font-size: 1.16rem;
  text-wrap: balance;
}
.vc-nl { margin: 0.3rem auto; color: var(--vc-dim); font-style: italic; font-size: 1rem; }

/* labels: the case's display faces */
.vc-lab {
  margin: 0.9rem 0 0.1rem;
  font: 400 0.84rem/1.35 "MarcellusX", Georgia, serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.vc-note { margin-top: 0.4rem; }
.vc-note > .vc-p { margin-top: 0.1rem; }
.vc-k {
  display: block;
  font: italic 400 1rem/1.35 "PlayfairXI", Georgia, serif;
  color: var(--vc-red);
}
.vc-ev { display: block; font: 600 0.84rem/1.4 "EczarX", Georgia, serif; color: var(--vc-dim); }

/* the particulars: a tariff, label …… value */
.vc-ld { max-width: 34rem; margin: 0 auto; padding: 0; }
.vc-ld > div { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.22rem 0; }
.vc-ld dt {
  display: flex; flex: 1 1 auto; align-items: baseline; min-width: 7rem;
  font: 400 0.84rem/1.35 "MarcellusX", Georgia, serif; letter-spacing: 0.18em; text-transform: uppercase;
  text-align: left;
}
.vc-ld dt::after { content: ""; flex: 1 1 auto; margin-inline-start: 0.5rem; border-bottom: 2px dotted var(--vc-ink); transform: translateY(-0.25em); min-width: 1.5rem; }
.vc-ld dd { flex: 0 1 auto; max-width: 62%; margin: 0; text-align: right; }

/* what carries the look */
.vc-tw { overflow-x: auto; }
.vc-tw:focus-visible { outline: 2px solid var(--vc-red); outline-offset: 3px; }
.vc-ct, .vc-rt { width: 100%; border-collapse: collapse; margin: 0.4rem 0 0.6rem; border-block: 1px solid var(--vc-ink); }
.vc-ct th, .vc-ct td, .vc-rt th, .vc-rt td { padding: 0.45rem 0.5rem; border-bottom: 1px dotted var(--vc-hair); vertical-align: middle; }
.vc-ct th { width: 34%; text-align: left; font-weight: 400; }
.vc-ct td { text-align: left; }
.vc-ct td p { margin: 0.1rem 0; }
.vc-ct th a {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 400 1.05rem/1.2 "StaatlichesX", "Arial Narrow", sans-serif; letter-spacing: 0.1em; text-decoration: none;
}
.vc-ct small { display: block; font: italic 400 0.9rem/1.3 "PlayfairXI", Georgia, serif; color: var(--vc-red); }
.vc-tags { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.vc-tags a { display: inline-flex; align-items: center; min-height: 44px; }
.vc-face { white-space: nowrap; font-size: 1.05em; }
.vc-swatch { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem; }
.vc-sw__c {
  display: flex; align-items: flex-end; justify-content: center;
  width: 5rem; height: 3.6rem; padding-bottom: 0.3rem;
  border: 1px solid var(--vc-ink);
  font: 600 0.78rem/1 "EczarX", Georgia, serif; letter-spacing: 0.04em;
}
.vc-ct .vc-nl { margin: 0; }

/* rules, by area */
.vc-area { padding: 0.35rem 0 0.5rem; }
.vc-area + .vc-area { border-top: 1px solid var(--vc-hair); }
.vc-area > .vc-lab { margin-top: 0.5rem; font-size: 0.95rem; letter-spacing: 0.24em; }
.vc-area ul, .vc-conf, .vc-use { list-style: none; margin: 0; padding: 0; }
.vc-area li { padding: 0.35rem 0; }
.vc-area li + li { border-top: 1px dotted var(--vc-hair); }
.vc-area li .vc-p { margin: 0.15rem auto 0; }
.vc-area--ctx { border: 1px solid var(--vc-ink); padding-inline: 0.8rem; margin-top: 0.6rem; }

/* research ledger */
.vc-rt thead th { font: 400 0.8rem/1.3 "MarcellusX", Georgia, serif; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 1px solid var(--vc-ink); }
.vc-rt tbody th { text-align: left; font-weight: 400; }
.vc-rt td { text-align: center; }

/* neighbours */
.vc-conf li { padding: 0.6rem 0; }
.vc-conf li + li { border-top: 1px dotted var(--vc-hair); }
.vc-nb { display: block; font: 400 clamp(1.25rem, 2.6vw, 1.5rem)/1.2 "AntonX", "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: 0.04em; }
.vc-nb a { display: inline-flex; align-items: center; min-height: 44px; text-decoration-thickness: 2px; }
.vc-conf .vc-p { margin: 0.15rem auto 0; }

/* use it: the bill's closing notices, each behind a manicule */
.vc-use li { padding: 0.45rem 0; }
.vc-use a {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 600 1.15rem/1.2 "EczarX", Georgia, serif;
}
.vc-use li::before { content: "☞"; margin-inline-end: 0.45rem; color: var(--vc-red); font-size: 1.15rem; }
.vc-use .vc-p { margin: 0 auto; }
.vc-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.4rem; margin: 0.8rem 0 0; font-size: 1rem; }
.vc-foot a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 30rem) {
  .vc-sheet { outline: none; clip-path: none; font-size: 1.05rem; }
  .vc-ld > div { display: block; text-align: center; padding: 0.35rem 0; }
  .vc-ld dt { display: block; text-align: center; }
  .vc-ld dt::after { display: none; }
  .vc-ld dd { max-width: none; text-align: center; }
  .vc-ct th, .vc-ct td { display: block; width: auto; }
  .vc-ct th { border-bottom: 0; padding-bottom: 0; }
  .vc-rt { font-size: 0.95rem; }
  .vc-rt th, .vc-rt td { padding: 0.4rem 0.2rem; }
  .vc-rt thead th { font-size: 0.7rem; letter-spacing: 0.06em; }
}