/* PATIO BRAND BIBLE — page-specific styles. Token-driven; reuses site tokens. */

/* Hero: .page-hero (components.css) forces a bone background, which would render
   the bone text invisible. Win on specificity with a compound selector and give
   the hero the espresso dark-band look. .band--espresso supplies the reverse text. */
.bg-hero.page-hero {
  background: var(--color-bg-dark);
  padding-block: var(--section-y-lg);
}

/* Page layout: single column on mobile, sticky TOC rail + content at >=1024px */
.bg-layout {
  display: block;
}

@media (min-width: 1024px) {
  .bg-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--space-16);
    align-items: start;
  }
  .bg-toc {
    position: sticky;
    top: 96px;
  }
}

/* On mobile the TOC stacks above the content with a little breathing room */
.bg-toc {
  margin-bottom: var(--space-8);
}

.bg-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bg-toc a {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  text-decoration: none;
  display: block;
  padding: var(--space-1) 0;
  transition: color 0.15s ease;
}

.bg-toc a:hover,
.bg-toc a[aria-current="true"] {
  color: var(--color-accent-text);
}

/* Anchored sections clear the fixed header and carry a quiet divider */
.bg-section {
  scroll-margin-top: 96px;
  padding-block: var(--section-y);
  border-top: 1px solid var(--color-border);
}

.bg-section:first-of-type {
  border-top: 0;
}

/* ============================================================
   VOICE: do / don't block + use / avoid word bank (section 05)
   Token-driven. "do" tinted olive, "avoid" tinted deep clay.
   ============================================================ */
.bg-dodont {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .bg-dodont { grid-template-columns: 1fr 1fr; }
}

.bg-dodont__col {
  border-radius: var(--radius);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
}

.bg-dodont__col--do {
  background: color-mix(in srgb, var(--olive) 12%, transparent);
  border-color: color-mix(in srgb, var(--olive) 45%, transparent);
}

.bg-dodont__col--avoid {
  background: color-mix(in srgb, var(--deep-clay) 9%, transparent);
  border-color: color-mix(in srgb, var(--deep-clay) 38%, transparent);
}

.bg-dodont__head {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.bg-dodont__col--do .bg-dodont__head { color: var(--olive); }
.bg-dodont__col--avoid .bg-dodont__head { color: var(--color-accent-text); }

.bg-dodont ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bg-dodont li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  color: var(--color-ink-soft);
}

.bg-dodont li::before {
  font-family: var(--font-mono);
  flex: none;
  line-height: 1.5;
}

.bg-dodont__col--do li::before { content: "+"; color: var(--olive); }
.bg-dodont__col--avoid li::before { content: "\00d7"; color: var(--color-accent-text); }

/* Use / avoid word bank: two columns of chips */
.bg-wordbank {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .bg-wordbank { grid-template-columns: 1fr 1fr; }
}

.bg-wordbank__col { border-radius: var(--radius); padding: var(--space-6); }
.bg-wordbank__col--use { background: color-mix(in srgb, var(--olive) 12%, transparent); }
.bg-wordbank__col--avoid { background: color-mix(in srgb, var(--deep-clay) 9%, transparent); }

.bg-wordbank__head {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.bg-wordbank__col--use .bg-wordbank__head { color: var(--olive); }
.bg-wordbank__col--avoid .bg-wordbank__head { color: var(--color-accent-text); }

.bg-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.bg-chip {
  font-size: var(--fs-small);
  line-height: 1.3;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-ink);
}

.bg-wordbank__col--avoid .bg-chip {
  color: var(--color-ink-soft);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--deep-clay) 60%, transparent);
}

/* Before / after rewrite pairs (section 05) */
.bg-rewrite {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 768px) {
  .bg-rewrite { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}

.bg-rewrite__cell {
  border-radius: var(--radius);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
}

.bg-rewrite__cell--before { background: color-mix(in srgb, var(--deep-clay) 7%, transparent); }
.bg-rewrite__cell--after { background: color-mix(in srgb, var(--olive) 10%, transparent); }

.bg-rewrite__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-3);
}

.bg-rewrite__cell--before .bg-rewrite__label { color: var(--color-accent-text); }
.bg-rewrite__cell--after .bg-rewrite__label { color: var(--olive); }

/* Voice position sliders (section 05) */
.bg-sliders { display: flex; flex-direction: column; gap: var(--space-6); }

.bg-slider__labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-2);
}

.bg-slider__track {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: var(--color-border);
}

.bg-slider__dot {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--color-accent);
  border: 3px solid var(--color-bg);
  transform: translate(-50%, -50%);
}

.bg-slider__note { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--color-ink-soft); }

/* Boilerplate blocks (section 06): mono label + copyable body */
.bg-boiler { display: flex; flex-direction: column; gap: var(--space-6); }

.bg-boiler__block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-6);
  background: var(--color-bg-alt);
}

.bg-boiler__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-accent-text);
  display: block;
  margin-bottom: var(--space-3);
}

.bg-boiler__block p { margin: 0; }

/* ============================================================
   LOGO (section 07): lockup x colorway matrix, clear space, misuse
   Tiles switch background per colorway so each lockup reads correctly:
   fullcolor + mono-espresso on light (bone/sand); reverse + mono-white on espresso.
   ============================================================ */
.bg-logo-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr 1fr;
}

@media (min-width: 768px) {
  .bg-logo-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
}

.bg-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 160px;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

/* Light tiles carry fullcolor / mono-espresso */
.bg-tile--bone { background: var(--color-bg); }
.bg-tile--sand { background: var(--color-bg-alt); }

/* Dark tiles carry reverse / mono-white */
.bg-tile--espresso {
  background: var(--color-bg-dark);
  border-color: color-mix(in srgb, var(--bone) 18%, transparent);
}

.bg-tile img {
  display: block;
  width: 100%;
  max-width: 132px;
  height: auto;
}

/* Icon lockups are square and read better a touch smaller */
.bg-tile--icon img { max-width: 64px; }

.bg-tile__cap {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  text-align: center;
}

.bg-tile--espresso .bg-tile__cap { color: var(--color-ink-reverse-soft); }

.bg-logo-rowhead {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin: var(--space-8) 0 var(--space-4);
}

/* Clear space + min size specs */
.bg-clearspace {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 768px) {
  .bg-clearspace { grid-template-columns: minmax(0, 320px) 1fr; gap: var(--space-12); }
}

.bg-clearspace__fig {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  background: var(--color-bg-alt);
  border-radius: var(--radius);
}

/* The dashed safe-area box around the lockup = the doorway-opening height */
.bg-clearspace__box {
  position: relative;
  padding: clamp(20px, 7vw, 36px);
  outline: 1px dashed var(--color-border-strong);
  outline-offset: 0;
}

.bg-clearspace__box img { display: block; width: 100%; max-width: 180px; height: auto; }

.bg-clearspace__tick {
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  color: var(--color-accent-text);
  background: var(--color-bg-alt);
  padding: 0 6px;
}

.bg-clearspace__tick--top { top: -9px; left: 50%; transform: translateX(-50%); }
.bg-clearspace__tick--left { left: -10px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: center; }

.bg-minsize {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.bg-minsize li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.bg-minsize li:first-child { border-top: 1px solid var(--color-border); }

.bg-minsize__name { color: var(--color-ink); }

.bg-minsize__val {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--track-label);
  color: var(--color-accent-text);
}

/* Misuse panel: each "Don't" gets a clay marker */
.bg-misuse {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-top: var(--space-6);
}

@media (min-width: 640px) { .bg-misuse { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .bg-misuse { grid-template-columns: repeat(3, 1fr); } }

.bg-misuse__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--deep-clay) 32%, transparent);
  background: color-mix(in srgb, var(--deep-clay) 7%, transparent);
}

.bg-misuse__item::before {
  content: "\00d7";
  flex: none;
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--color-ink-reverse);
  background: var(--color-btn-primary);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  margin-top: 1px;
}

.bg-misuse__item p { margin: 0; color: var(--color-ink-soft); }
.bg-misuse__item strong { color: var(--color-ink); font-weight: var(--fw-semibold); }

/* ============================================================
   COLOR (section 08): swatches, pairings. Literal hex lives in markup.
   ============================================================ */
.bg-swatches {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) { .bg-swatches { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .bg-swatches { grid-template-columns: repeat(3, 1fr); } }

.bg-swatch {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}

.bg-swatch__chip {
  position: relative;
  height: 132px;
  display: block;
  cursor: pointer;
  border: 0;
}

.bg-swatch__chip:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: -3px;
}

.bg-swatch__hexline {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.bg-swatch__copied {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-ink);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}

/* Hex label color tracks the chip: dark-on-light chips (Sand/Bone) take espresso
   ink over the light chip; dark chips take reverse/bone. Token-driven, no inline hex.
   The Copied badge keeps its own bone pill + espresso ink (base rule below). */
.bg-swatch__hexline.is-on-dark { color: var(--color-ink); }
.bg-swatch__hexline.is-on-light { color: var(--color-ink-reverse); }

.bg-swatch.is-copied .bg-swatch__copied,
.bg-swatch__chip.is-copied .bg-swatch__copied { opacity: 1; transform: translateY(0); }

.bg-swatch__meta { padding: var(--space-4) var(--space-6) var(--space-6); }
.bg-swatch__name { margin: 0 0 var(--space-2); }

.bg-swatch__data {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-3);
}

.bg-swatch__data span { display: block; }
.bg-swatch__role { margin: 0; color: var(--color-ink-soft); font-size: var(--fs-small); }

/* Approved pairings */
.bg-pairings {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-top: var(--space-6);
}

@media (min-width: 640px) { .bg-pairings { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bg-pairings { grid-template-columns: repeat(4, 1fr); } }

.bg-pair {
  border-radius: var(--radius);
  padding: var(--space-6);
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
}

.bg-pair__sample { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; }

.bg-pair__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.bg-pair--ink-bone { background: var(--color-bg); color: var(--color-ink); }
.bg-pair--ink-sand { background: var(--color-bg-alt); color: var(--color-ink); }
.bg-pair--bone-espresso { background: var(--color-bg-dark); color: var(--color-ink-reverse); border-color: color-mix(in srgb, var(--bone) 18%, transparent); }
.bg-pair--bone-terra { background: var(--color-accent); color: var(--color-ink-reverse); border-color: color-mix(in srgb, var(--espresso) 18%, transparent); }

/* ============================================================
   TYPOGRAPHY (section 09): live specimens + scale ladder
   ============================================================ */
.bg-specimen {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-8);
  background: var(--color-bg);
}

.bg-specimen + .bg-specimen { margin-top: var(--space-6); }

.bg-specimen__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.bg-specimen__name {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.bg-specimen__role { font-size: var(--fs-small); color: var(--color-ink-soft); }

.bg-specimen__display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw + 1rem, 3.75rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  margin: 0 0 var(--space-4);
  color: var(--color-ink);
}

.bg-specimen__alpha {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw + 0.6rem, 1.5rem);
  line-height: var(--lh-snug);
  color: var(--color-ink-soft);
  margin: 0;
  word-spacing: 0.1em;
}

/* Body specimen: weights stacked, set in the real face */
.bg-specimen__body { font-family: var(--font-body); }
.bg-specimen__weights { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.bg-specimen__weight {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--fs-subhead);
  color: var(--color-ink);
}
.bg-specimen__weight .bg-weight-tag {
  flex: none;
  width: 7.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.bg-specimen__weight--400 { font-weight: 400; }
.bg-specimen__weight--500 { font-weight: 500; }
.bg-specimen__weight--600 { font-weight: 600; }

.bg-specimen__mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  color: var(--color-ink);
  margin: 0;
}
.bg-specimen__mono span { display: block; margin-bottom: var(--space-2); }
.bg-specimen__mono .bg-mono-500 { font-weight: 500; }
.bg-specimen__mono .bg-mono-tracked {
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}

/* Type scale ladder: each step at true size with token + px range */
.bg-typescale { margin-top: var(--space-6); border-top: 1px solid var(--color-border); }

.bg-typescale__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  align-items: baseline;
}

@media (min-width: 768px) {
  .bg-typescale__row { grid-template-columns: minmax(0, 1fr) 220px; gap: var(--space-8); }
}

.bg-typescale__sample {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-head);
  color: var(--color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Body/label steps render in their working face, not the display serif */
.bg-typescale__sample--body { font-family: var(--font-body); }
.bg-typescale__sample--mono { font-family: var(--font-mono); text-transform: uppercase; }

.bg-typescale__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bg-typescale__meta .bg-typescale__px { color: var(--color-accent-text); }

/* ============================================================
   10 — The arch: live demos of the one decorative motif
   ============================================================ */
.bg-arch-demos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 640px) {
  .bg-arch-demos { grid-template-columns: repeat(2, 1fr); }
}

.bg-arch-demo { margin: 0; }

.bg-arch-demo__stage {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  padding: var(--space-6);
}
.bg-arch-demo__stage--sand { background: var(--sand); align-items: center; place-items: center stretch; }
.bg-arch-demo__stage--bone { background: var(--color-bg); border: 1px solid var(--color-border); }
.bg-arch-demo__stage--espresso { position: relative; background: var(--color-bg-dark); }
.bg-arch-demo__stage--divider { aspect-ratio: auto; padding-block: var(--space-12); }

.bg-arch-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); align-self: center; }
.bg-arch-bullets li { display: flex; gap: var(--space-3); align-items: flex-start; }
.bg-arch-bullets .arch-ico { flex: none; width: 16px; height: 18px; margin-top: 3px; color: var(--color-accent); }

.bg-arch-watermark-demo {
  position: absolute;
  right: -8%;
  bottom: -28%;
  width: 60%;
  height: 150%;
  color: var(--sand);
  opacity: .14;
}
.bg-arch-demo__overlabel {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-reverse-soft);
}

.bg-arch-demo .divider-arch { color: var(--color-border); }

.bg-arch-demo__cap {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}

/* ============================================================
   11 — Photography: direction flag + interim slot
   ============================================================ */
.bg-direction-flag {
  display: inline-block;
  margin-top: var(--space-3);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-reverse);
  background: var(--color-bg-dark);
  border-radius: 999px;
}

.bg-photo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 768px) {
  .bg-photo-grid { grid-template-columns: 1fr 1fr; }
}
.bg-photo-slot { margin: 0; }

/* ============================================================
   12 — Applications: social, print mockups, signature
   ============================================================ */
.bg-social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 768px) {
  .bg-social { grid-template-columns: auto auto 1fr; align-items: start; }
}
.bg-social figure { margin: 0; }
.bg-social__avatar img {
  width: 120px;
  height: 120px;
  border-radius: var(--radius);
  display: block;
}
.bg-social__og img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
  border: 1px solid var(--color-border);
}
.bg-social figcaption {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

/* Print mockups */
.bg-mockups {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
/* 2-up at every width above mobile so the card front and back read as a pair. */
@media (min-width: 640px) { .bg-mockups { grid-template-columns: repeat(2, 1fr); } }
.bg-mockup { margin: 0; }
.bg-mockup__cap {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}
.bg-mockup__flag {
  display: inline-block;
  margin-right: var(--space-2);
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-reverse);
  background: var(--color-ink);
  border-radius: 999px;
}

/* Business card mockup */
.bg-card-front {
  position: relative;
  aspect-ratio: 1.75 / 1;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.bg-card-front__arch {
  position: absolute;
  right: -10%;
  bottom: -28%; /* keeps the ring's curved feet on-card (watermark rule: bleed the side, not the feet) */
  width: 46%;
  height: 150%;
  color: var(--terracotta);
  opacity: .12;
}
.bg-card-front__body { position: relative; z-index: 1; }
.bg-card-front__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  color: var(--color-ink);
  margin: 0;
}
.bg-card-front__title {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin: var(--space-1) 0 0;
}
.bg-card-front__foot {
  position: relative;
  z-index: 1;
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}

/* Business card back: espresso flood, reverse lockup, nothing else */
.bg-card-back {
  aspect-ratio: 1.75 / 1;
  background: var(--color-bg-dark);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  overflow: hidden;
}
.bg-card-back__logo { width: 30%; height: auto; display: block; }
.bg-card-back__url {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  color: color-mix(in srgb, var(--bone) 72%, transparent);
  margin: 0;
}

/* Letterhead mockup */
.bg-letter {
  aspect-ratio: 1 / 1.3;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
}
.bg-letter__logo { width: 140px; height: auto; display: block; }
.bg-letter__lines { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.bg-letter__lines span { height: 6px; border-radius: 999px; background: var(--color-border); }
.bg-letter__lines span:nth-child(1) { width: 90%; }
.bg-letter__lines span:nth-child(2) { width: 96%; }
.bg-letter__lines span:nth-child(3) { width: 80%; }
.bg-letter__lines span:nth-child(4) { width: 88%; }
.bg-letter__lines span:nth-child(5) { width: 60%; }
.bg-letter__foot {
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  color: var(--color-ink-soft);
}

/* Yard sign mockup: 24x18 sign face — hairline print frame, strong read-from-the-street hierarchy */
.bg-sign {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-accent);
  border-radius: var(--radius-sm);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
  overflow: hidden;
}
.bg-sign::after {
  /* inset hairline frame, a classic sign-print detail */
  content: "";
  position: absolute;
  inset: 4.5%;
  border: 1.5px solid color-mix(in srgb, var(--bone) 55%, transparent);
  border-radius: 3px;
  pointer-events: none;
}
.bg-sign__arch {
  position: absolute;
  right: -9%;
  bottom: 6%; /* bleed the side only; the curved feet stay in view (watermark rule) */
  width: 40%;
  height: auto;
  aspect-ratio: 480 / 530;
  color: var(--bone);
  opacity: .1;
}
.bg-sign__logo { position: relative; z-index: 1; width: 42%; height: auto; display: block; margin-bottom: var(--space-2); }
.bg-sign__head {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--color-ink-reverse);
  margin: 0;
}
.bg-sign__rule {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 1.5px;
  background: color-mix(in srgb, var(--bone) 55%, transparent);
  margin-block: var(--space-1);
}
.bg-sign__phone {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h3);
  color: var(--color-ink-reverse);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.bg-sign__web {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  color: color-mix(in srgb, var(--bone) 80%, transparent);
  margin: 0;
}

/* Email signature: a real, copyable block */
.bg-signature {
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  max-width: 360px;
}
.bg-signature p { margin: 0; }
.bg-signature__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  color: var(--color-ink);
}
.bg-signature__title {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-top: var(--space-1) !important;
}
.bg-signature__line { margin-top: var(--space-3) !important; }
.bg-signature__co { font-weight: 600; color: var(--color-ink); }
.bg-signature__meta { margin-top: var(--space-2) !important; font-size: var(--fs-small); color: var(--color-ink-soft); }
.bg-signature .bg-mono-tracked {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-right: var(--space-2);
}

/* ============================================================
   13 — Governance: kit tree, naming, colorway key
   ============================================================ */
.bg-kit-tree, .bg-colorway-key { list-style: none; margin: 0; padding: 0; }
.bg-kit-tree li, .bg-colorway-key li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 560px) {
  .bg-kit-tree li, .bg-colorway-key li { grid-template-columns: 160px 1fr; gap: var(--space-6); align-items: baseline; }
}
.bg-kit-tree li span:last-child, .bg-colorway-key li span:last-child { color: var(--color-ink-soft); }
.bg-kit-tree__name, .bg-colorway-key__name {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--track-label);
  color: var(--color-accent-text);
}
.bg-naming {
  font-family: var(--font-mono);
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-6);
  display: inline-block;
  color: var(--color-ink);
  /* The filename pattern is one unbreakable token; let it wrap on narrow screens. */
  max-width: 100%;
  overflow-wrap: anywhere;
}
.bg-naming code { background: none; }