/* Variant-specific styles */

/* === LEDGER === editorial, serif-forward */
[data-variant="ledger"] .hero-title {
  font-family: var(--font-display);
  font-size: var(--step-6);
  line-height: 0.96;
  letter-spacing: -0.035em;
  font-weight: 400;
}
[data-variant="ledger"] .hero-title em { font-style: italic; color: var(--muted); font-weight: 300; }

/* === OPERATOR === tighter, grid-driven, mono metadata */
[data-variant="operator"] .hero-title {
  font-family: var(--font-sans);
  font-size: var(--step-5);
  line-height: 1.02;
  letter-spacing: -0.028em;
  font-weight: 500;
}
[data-variant="operator"] .hero-title em { font-family: var(--font-display); font-style: italic; font-weight: 300; color: var(--muted); }
[data-variant="operator"] .page-head h1 {
  font-family: var(--font-sans); font-weight: 500;
}
[data-variant="operator"] .page-head { background:
  linear-gradient(to right, var(--line) 1px, transparent 1px) 0 0 / 80px 80px,
  linear-gradient(to bottom, var(--line) 1px, transparent 1px) 0 0 / 80px 80px,
  var(--bg);
  background-blend-mode: normal;
  background-size: 80px 80px, 80px 80px, auto;
}

[data-variant="operator"] .site-brand { font-family: var(--font-sans); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
[data-variant="operator"] h2, [data-variant="operator"] h3 { font-family: var(--font-sans); font-weight: 500; }
[data-variant="operator"] .card { background: var(--paper); box-shadow: 0 0 0 1px var(--line); border-right: none; }
[data-variant="operator"] .num-list h3 { font-family: var(--font-sans); font-weight: 500; }

/* Imagery modes */
[data-imagery="none"] .media-slot { display: none !important; }
[data-imagery="blocks"] .media-slot .schematic { display: none !important; }
[data-imagery="blocks"] .media-slot .block-img { display: flex !important; }
[data-imagery="schematic"] .media-slot .block-img { display: none !important; }
[data-imagery="schematic"] .media-slot .schematic { display: block !important; }

.media-slot { position: relative; border: 1px solid var(--line); background: var(--bg-2); aspect-ratio: 4/3; overflow: hidden; }
.media-slot .block-img { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; background-image:
  repeating-linear-gradient(135deg, var(--bg-2) 0px, var(--bg-2) 8px, var(--bg-3) 8px, var(--bg-3) 9px);
}