/* Uncle Bob – Variante B "Papeterie"
   Centred stationery logic: title card, fanned prints, menu card, RSVP card.
   Uses base tokens + B tokens from DESIGN.md § 10. */

.vb {
  --b-band-bg: var(--ink);
  --b-band-fg: var(--paper);
  --b-band-muted: #C2B4A2;
  --b-accent-on-band: #F0875F;
  --b-rule: var(--line);
}
@media (prefers-color-scheme: dark) {
  .vb {
    --b-band-muted: #5C5046;
    --b-accent-on-band: #B3360F;
  }
}

.bcenter { text-align: center; margin-inline: auto; }
.bcenter-x { display: flex; justify-content: center; }
.bcol {
  display: grid;
  justify-items: center;
  gap: var(--s-5);
  max-width: 48rem;
  margin-inline: auto;
}
.bcol--wide { max-width: 52rem; justify-items: stretch; }
.bsub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  font-weight: 420;
  line-height: 1.4;
  color: var(--ink-2);
  max-width: 42ch;
  text-align: center;
}
.bfor, .bband__for {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lead);
  color: var(--ink-2);
  text-align: center;
}

/* Double rule (invitation card) */
.brule {
  width: min(12rem, 50%);
  height: 6px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  margin-bottom: var(--s-4);
}

/* ---------- Hero: title card ---------- */
.bhero { padding-block: var(--s-6) var(--s-8); overflow-x: clip; }
.bhero__card {
  --vf-l: clamp(24px, 5vw, 44px);
  --vf-w: 3px;
  display: grid;
  justify-items: center;
  gap: var(--s-5);
  max-width: 60rem;
  margin-inline: auto;
  padding: var(--s-7) 0 var(--s-6);
  text-align: center;
}
.bhero__title {
  max-width: 12ch;
  font-size: clamp(2.875rem, 1.5rem + 6vw, 7rem);
}
@media (min-width: 64rem) { .bhero__title { font-size: min(clamp(2.875rem, 1.5rem + 6vw, 7rem), 12vh); } }
.bhero__sub { max-width: 46ch; font-size: var(--fs-lead); line-height: 1.5; }
.bhero__switch { border: 0; padding: 0; min-inline-size: 0; margin-top: var(--s-2); max-width: 100%; }
.bhero__extra { max-width: 44ch; color: var(--ink-2); min-height: 3.2em; }
.bhero__cta { display: grid; gap: var(--s-3); justify-items: center; }

/* Fanned prints */
.fan {
  position: relative;
  container-type: inline-size;
  max-width: 64rem;
  margin: var(--s-6) auto 0;
  aspect-ratio: 2.6 / 1;
}
.fan__i {
  position: absolute;
  top: 6%;
  left: 50%;
  --w: 20%;
  --x: 0%;
  --cap: clamp(12px, 1.6cqi, 15px);
  --qr-fs: clamp(12px, 1.45cqi, 14px);
  transform: translateX(calc(-50% + var(--x))) translateY(var(--y, 0)) rotate(var(--r));
  transform-origin: 50% 120%;
}
.fan__i--1 { --x: -192%; --y: 16%; }
.fan__i--2 { --x: -98%; --y: 4%; }
.fan__i--3 { --x: 0%; --w: 19%; top: 0; z-index: 2; }
.fan__i--4 { --x: 98%; --y: 4%; }
.fan__i--5 { --x: 192%; --y: 16%; }

@media (max-width: 47.99rem) {
  .fan { aspect-ratio: 1 / .66; max-width: 26rem; margin-top: var(--s-4); }
  .fan__i { --w: 45%; --cap: 12px; --qr-fs: 12px; }
  .fan__i--1, .fan__i--5 { display: none; }
  .fan__i--2 { --x: -58%; --y: 10%; }
  .fan__i--3 { --x: 0%; --w: 40%; top: 0; }
  .fan__i--4 { --x: 58%; --y: 10%; }
  .fan .qrcard__sub { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .fan__i { animation: fan-in 760ms var(--ease-out) both; }
  .fan__i--3 { animation-delay: 80ms; }
  .fan__i--2, .fan__i--4 { animation-delay: 220ms; }
  .fan__i--1, .fan__i--5 { animation-delay: 360ms; }
}
@keyframes fan-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10%) rotate(0deg); }
}

@media (min-width: 64rem) {
  .bhero__card { padding: var(--s-7) var(--s-8) var(--s-7); }
  .fan { aspect-ratio: 3.2 / 1; }
}

/* ---------- Problem ---------- */
.bproblem h2 { max-width: 20ch; }

/* ---------- Steps: vertical sequence with big italic numerals ---------- */
.bsteps__list {
  display: grid;
  gap: 0;
  width: 100%;
  margin-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.bsteps__list li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--s-4);
  align-items: start;
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--line);
}
.bsteps__list li > div { display: grid; gap: var(--s-2); max-width: 46ch; }
.bsteps__n {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(3.5rem, 2.8rem + 2.4vw, 5rem);
  font-weight: 400;
  line-height: .85;
  color: var(--ink);
}
@media (min-width: 48rem) {
  .bsteps__list li { grid-template-columns: 7rem 1fr; gap: var(--s-6); }
}

/* ---------- Band for photographers (the one inverted area) ---------- */
.bband { background: var(--b-band-bg); color: var(--b-band-fg); }
.bband ::selection { background: var(--b-accent-on-band); color: var(--b-band-bg); }
.bband__for { color: var(--b-band-muted); }
.bband__title { font-size: clamp(2.5rem, 1.4rem + 5.2vw, 6.5rem); }
.bband__title .hl { display: block; }
.bband__muted { color: var(--b-band-muted); }
.bband__list {
  display: grid;
  gap: var(--s-6);
  max-width: 64rem;
  margin: var(--s-8) auto 0;
}
.bband__list li {
  position: relative;
  padding-top: var(--s-5);
  border-top: 1px solid color-mix(in srgb, var(--b-band-fg) 22%, transparent);
  max-width: 44ch;
}
.bband__list li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--b-accent-on-band);
}
@media (min-width: 48rem) {
  .bband__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); row-gap: var(--s-7); }
}
.bquote {
  display: grid;
  justify-items: center;
  gap: var(--s-5);
  max-width: 44rem;
  margin: var(--s-9) auto var(--s-7);
  text-align: center;
}
.bquote figcaption { display: grid; gap: var(--s-1); }
.bquote__name { font-weight: 600; }
.bband__btn { background: var(--b-accent-on-band); color: var(--b-band-bg); }
.bband__btn:hover { background: var(--b-band-fg); }
.bband :focus-visible { outline-color: var(--b-accent-on-band); }

/* ---------- Couples ---------- */
.bcouples h2 { max-width: 18ch; }
.bfacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: 40rem;
  margin-block: var(--s-4);
  border-top: 1px solid var(--line);
}
.bfacts > div {
  display: grid;
  gap: var(--s-1);
  justify-items: center;
  text-align: center;
  padding: var(--s-5) var(--s-3);
  border-bottom: 1px solid var(--line);
}
.bfacts > div:nth-child(odd) { border-right: 1px solid var(--line); }
.bfacts dt {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: 540;
  line-height: 1.05;
  font-variation-settings: "WONK" 1;
}
.bfacts dd { margin: 0; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.4; }
@media (min-width: 48rem) {
  .bfacts { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 52rem; }
  .bfacts > div { border-right: 1px solid var(--line); }
  .bfacts > div:last-child { border-right: 0; }
}

/* ---------- Prices: menu card ---------- */
.menu {
  display: grid;
  gap: var(--s-4);
  max-width: 46rem;
  margin-inline: auto;
  padding: var(--s-7) var(--s-5);
  background: var(--card);
  border: 1px solid var(--line-strong);
  outline: 1px solid var(--line-strong);
  outline-offset: 5px;
  border-radius: var(--r-print);
}
.menu > .bsub { margin-bottom: var(--s-4); }
.menu__row {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line);
}
.menu__row--hi {
  --vf-c: var(--accent);
  --vf-off: 0px;
  --vf-l: 18px;
  --vf-w: 2.5px;
  padding: var(--s-5) var(--s-4);
  margin-inline: calc(-1 * var(--s-4));
  border-top-color: transparent;
}
.menu__row--hi + .menu__row { border-top-color: transparent; }
.menu__top { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.menu__dots {
  flex: 1 1 2rem;
  min-width: 2rem;
  border-bottom: 2px dotted var(--line-strong);
  transform: translateY(-.35em);
}
.menu__price { display: flex; align-items: baseline; gap: var(--s-2); }
.menu__amount {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 2rem + 1vw, 3rem);
  font-weight: 560;
  line-height: 1;
  letter-spacing: -.02em;
}
.menu__per, .menu__alt { color: var(--ink-2); font-size: var(--fs-small); }
.menu__alt { text-align: right; margin-top: calc(-1 * var(--s-2)); }
.menu__deal { font-size: var(--fs-small); }
.menu__deal strong { color: var(--accent); font-weight: 650; }
.menu__inc { color: var(--ink-2); font-size: var(--fs-small); max-width: 50ch; }
.menu__foot { display: grid; gap: var(--s-2); padding-top: var(--s-5); border-top: 1px solid var(--line); text-align: center; justify-items: center; }
.menu__foot p { max-width: 52ch; }
@media (max-width: 29.99rem) {
  .menu__dots { display: none; }
  .menu__top { justify-content: space-between; }
  .menu__alt { text-align: left; margin-top: 0; }
}
@media (min-width: 48rem) {
  .menu { padding: var(--s-8) var(--s-8); }
  .menu__row--hi { padding-inline: var(--s-5); margin-inline: calc(-1 * var(--s-5)); }
}

/* ---------- Trust: one line with separators ---------- */
.btrust { padding-block: var(--s-7); border-block: 1px solid var(--line); }
.btrust__list {
  display: grid;
  gap: var(--s-4);
  justify-items: center;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  font-weight: 500;
  line-height: 1.35;
}
.btrust__list li { max-width: 32ch; }
.btrust__sub {
  display: block;
  margin-top: var(--s-1);
  font-family: var(--font-text);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-2);
}
@media (min-width: 64rem) {
  .btrust__list { display: flex; justify-content: center; align-items: stretch; gap: 0; }
  .btrust__list li { display: flex; flex-direction: column; justify-content: flex-start; padding-inline: var(--s-7); max-width: none; }
  .btrust__list li + li { border-left: 1px solid var(--line-strong); }
}

/* ---------- FAQ ---------- */
.bfaq .faq { margin-top: var(--s-5); }

/* ---------- RSVP card (waitlist) ---------- */
.rsvp {
  --vf-off: 12px;
  --vf-l: 26px;
  --vf-w: 2.5px;
  display: grid;
  gap: var(--s-6);
  max-width: 38rem;
  margin: 12px auto;
  padding: var(--s-7) var(--s-5);
  background: var(--paper);
}
.rsvp:focus-within { --vf-c: var(--accent); }
.rsvp__head { display: grid; gap: var(--s-3); justify-items: center; }
.rsvp .wl-form__submit { justify-items: center; text-align: center; }
.rsvp .wl-form__submit .btn { width: 100%; }
.rsvp .form-done { justify-items: center; text-align: center; }
@media (min-width: 48rem) {
  .rsvp { padding: var(--s-8) var(--s-8); }
}