/* ─────────────────────────────────────────────────────────
   BOB · Capability Brief 2026 · Brochure page CSS
   Museum-grade obsidian materials + shared components
   ───────────────────────────────────────────────────────── */

:root {
  /* Obsidian palette (from the Manufacturing Brief handoff) */
  --o-void:       #03060C;
  --o-deep:       #060B16;
  --o-bg:         #0A1320;
  --o-elev-1:     #0E1825;

  --o-ink-bright: #FFFFFF;
  --o-ink:        #ECEFF4;
  --o-ink-mute:   #8294AC;
  --o-ink-faint:  #56657C;
  --o-ink-dim:    #2E3B4E;

  --o-rule:        rgba(130,148,172,.14);
  --o-rule-soft:   rgba(130,148,172,.06);
  --o-rule-strong: rgba(236,239,244,.18);

  --o-accent:      #00E5FF;
  --o-accent-soft: rgba(0,229,255,.14);
  --o-accent-glow: rgba(0,229,255,.45);

  --o-positive:  #7CFF00;
  --o-attention: #FFC400;
  --o-critical:  #FF2EC0;
  --o-violet:    #9D4EFF;

  /* Bone palette (intermission spreads) */
  --b-bg:         #F2EFE8;
  --b-paper:      #FAF8F2;
  --b-sunken:     #E8E4DA;
  --b-ink:        #0B0D10;
  --b-ink-mute:   #52575E;
  --b-ink-faint:  #6E7480;
  --b-rule:       rgba(11,13,16,.14);
  --b-accent:     #0090A8;

  /* Materials */
  --slab-bg: linear-gradient(180deg,
    rgba(255,255,255,.045) 0%,
    rgba(255,255,255,.012) 8%,
    rgba(0,0,0,.05) 55%,
    rgba(0,0,0,.18) 100%);

  --slab-bg-cyan: linear-gradient(180deg,
    rgba(0,229,255,.075) 0%,
    rgba(0,229,255,.018) 14%,
    rgba(0,0,0,.05) 55%,
    rgba(0,0,0,.18) 100%);

  --slab-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1.5px 0 rgba(0,0,0,.65),
    0 18px 48px -14px rgba(0,0,0,.62),
    0 4px 14px rgba(0,0,0,.34),
    0 0 0 0.5px rgba(0,229,255,.04);

  --slab-shadow-warm:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1.5px 0 rgba(0,0,0,.14),
    0 12px 32px -10px rgba(11,13,16,.16),
    0 4px 10px rgba(11,13,16,.08);
}

/* ─── SPREAD ─── */
.spread {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 20% -10%, rgba(0,229,255,.10), transparent 65%),
    radial-gradient(70% 50% at 80% 110%, rgba(157,78,255,.06), transparent 65%),
    linear-gradient(180deg, #03060C 0%, #060B16 35%, #0A1320 100%);
  color: var(--o-ink);
  font-family: 'Geist', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.spread.bone {
  background:
    radial-gradient(70% 55% at 20% 0%, rgba(0,144,168,.05), transparent 60%),
    radial-gradient(70% 55% at 80% 100%, rgba(11,13,16,.03), transparent 60%),
    linear-gradient(180deg, #F5F2EB 0%, #F2EFE8 100%);
  color: var(--b-ink);
}

/* Architectural hairline grid overlay */
.spread::before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(90deg, rgba(130,148,172,.04) 1px, transparent 1px);
  background-size: 120px 100%;
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}
.spread.bone::before {
  background-image: linear-gradient(90deg, rgba(11,13,16,.05) 1px, transparent 1px);
  opacity: .6;
}

/* ─── CHROME (per-spread page header) ─── */
.chrome-brief {
  position: absolute; top: 32px; left: 56px; right: 56px;
  z-index: 9999 !important;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 24px;
}
.chrome-brief .brand-mini { display: flex; align-items: center; gap: 12px; }
.chrome-brief .brand-mini .name {
  font: 500 13px/1 'Geist', sans-serif; letter-spacing: -.015em; color: var(--o-ink-bright);
}
.chrome-brief .brand-mini .sub {
  font: 500 9px/1 'Geist Mono', monospace; letter-spacing: .30em;
  text-transform: uppercase; color: var(--o-ink-mute); margin-top: 4px;
}
.chrome-brief .middle {
  text-align: center;
  font: 500 9.5px/1 'Geist Mono', monospace;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--o-ink-faint);
}
.chrome-brief .middle strong {
  color: var(--o-ink); font-weight: 500;
}
.chrome-brief .section-tag {
  text-align: right;
  font: 500 9.5px/1 'Geist Mono', monospace;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--o-ink-mute);
}

.spread.bone .chrome-brief .brand-mini .name { color: var(--b-ink); }
.spread.bone .chrome-brief .brand-mini .sub  { color: var(--b-ink-faint); }
.spread.bone .chrome-brief .middle,
.spread.bone .chrome-brief .middle strong,
.spread.bone .chrome-brief .section-tag { color: var(--b-ink-faint); }
.spread.bone .chrome-brief .middle strong { color: var(--b-ink); }

/* Chrome bottom rule */
.chrome-rule {
  position: absolute; top: 76px; left: 56px; right: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(130,148,172,.20) 15%, rgba(130,148,172,.20) 85%, transparent 100%);
  z-index: 20;
}
.spread.bone .chrome-rule {
  background: linear-gradient(90deg, transparent 0%, rgba(11,13,16,.14) 15%, rgba(11,13,16,.14) 85%, transparent 100%);
}

/* ─── FOOTER (persistent) ─── */
.footer-brief {
  position: absolute; bottom: 32px; left: 56px; right: 56px;
  z-index: 9999 !important;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: end; gap: 24px;
}
.footer-brief .imprint,
.footer-brief .confid,
.footer-brief .page-no {
  font: 500 9px/1.4 'Geist Mono', monospace;
  letter-spacing: .30em; text-transform: uppercase;
  color: var(--o-ink-dim);
}
.footer-brief .confid { text-align: center; }
.footer-brief .page-no {
  text-align: right; color: var(--o-ink-faint);
  font-variant-numeric: tabular-nums;
}
.footer-brief .page-no strong { color: var(--o-ink); font-weight: 500; }

.spread.bone .footer-brief .imprint,
.spread.bone .footer-brief .confid,
.spread.bone .footer-brief .page-no { color: rgba(11,13,16,.35); }
.spread.bone .footer-brief .page-no { color: var(--b-ink-faint); }
.spread.bone .footer-brief .page-no strong { color: var(--b-ink); }

.footer-rule {
  position: absolute; bottom: 76px; left: 56px; right: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(130,148,172,.14) 15%, rgba(130,148,172,.14) 85%, transparent 100%);
  z-index: 20;
}
.spread.bone .footer-rule {
  background: linear-gradient(90deg, transparent 0%, rgba(11,13,16,.10) 15%, rgba(11,13,16,.10) 85%, transparent 100%);
}

/* ─── STAGE (content area between chrome and footer) ─── */
.stage {
  position: absolute;
  top: 108px; bottom: 108px;
  left: 56px; right: 56px;
  z-index: 10;
}

/* ─── EYEBROW ─── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font: 500 10px/1 'Geist Mono', monospace;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--o-ink-mute);
}
.eyebrow::before {
  content: ''; width: 28px; height: 1px;
  background: linear-gradient(90deg, var(--o-accent), transparent);
}
.spread.bone .eyebrow { color: var(--b-ink-mute); }
.spread.bone .eyebrow::before {
  background: linear-gradient(90deg, var(--b-accent), transparent);
}

/* ─── ITALIC ACCENT ─── */
em.italic {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--o-ink);
}
.spread.bone em.italic { color: var(--b-ink); }

/* ─── SPHERE COMPONENT ─── */
.o-sphere {
  position: relative;
  border-radius: 50%;
  isolation: isolate;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.6  0 0 0 0 0.6  0 0 0 0 0.6  0 0 0 .32 0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='.4'/></svg>"),
    radial-gradient(circle at 32% 28%,
      #50545b 0%,
      #1b1d22 18%,
      #07080a 52%,
      #020203 78%,
      #000 100%);
  background-blend-mode: overlay, normal;
  box-shadow:
    0 44px 70px -22px rgba(0,0,0,.65),
    0 16px 26px -10px rgba(0,0,0,.5),
    inset 0 -10px 20px rgba(0,0,0,.65),
    inset 0 10px 16px rgba(255,255,255,.05);
}
.o-sphere::before {
  content: ''; position: absolute;
  top: 10%; left: 22%; width: 24%; height: 14%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #FFFFFF 0%, rgba(255,255,255,.45) 30%, rgba(255,255,255,0) 65%);
  filter: blur(.5px);
  pointer-events: none;
}
.o-sphere::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(120% 30% at 50% 105%, rgba(0,229,255,.16), transparent 60%),
    radial-gradient(60% 40% at 50% 95%, rgba(255,255,255,.06), transparent 70%);
  pointer-events: none;
}

/* meridian — vertical slit */
.o-meridian {
  position: absolute; left: 50%; top: 50%;
  width: 2.4px; height: 64%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: linear-gradient(180deg,
    rgba(0,229,255,0)     0%,
    rgba(0,229,255,0)     8%,
    rgba(127,233,255,1)   25%,
    rgba(255,255,255,1)   50%,
    rgba(127,233,255,1)   75%,
    rgba(0,229,255,0)    92%,
    rgba(0,229,255,0)   100%);
  filter:
    drop-shadow(0 0 4px  rgba(255,255,255,.85))
    drop-shadow(0 0 12px rgba(0,229,255,.8))
    drop-shadow(0 0 24px rgba(0,229,255,.5));
  z-index: 3;
  mix-blend-mode: screen;
  animation: o-breath 2400ms cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes o-breath {
  0%, 100% { opacity: .35; transform: translate(-50%, -50%) scaleY(.55); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scaleY(1); }
}

/* Plinth: sphere on museum plinth with reflection */
.o-plinth {
  position: relative;
  display: inline-grid;
  place-items: center;
  isolation: isolate;
}
.o-plinth .o-sphere { position: relative; z-index: 2; }
.o-plinth::before {
  /* reflection */
  content: '';
  position: absolute; left: 50%;
  top: calc(50% + 14%);
  width: var(--sphere-size, 220px);
  height: var(--sphere-size, 220px);
  transform: translateX(-50%) scaleY(-1);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%,
      #50545b 0%, #1b1d22 18%, #07080a 52%, #020203 78%, #000 100%);
  opacity: .22;
  -webkit-mask-image: linear-gradient(to top, transparent 35%, rgba(0,0,0,.55) 68%, #000 100%);
          mask-image: linear-gradient(to top, transparent 35%, rgba(0,0,0,.55) 68%, #000 100%);
  filter: blur(1px);
  z-index: 0;
  pointer-events: none;
}
.o-plinth::after {
  content: '';
  position: absolute; left: 50%; bottom: -8%;
  transform: translateX(-50%);
  width: 70%; height: 18px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.5), transparent 70%);
  filter: blur(6px);
  z-index: 1;
  pointer-events: none;
}

/* Orbital ring removed per direction — the sphere stands alone. */

/* ─── WORDMARK LOCKUP · B · ◐ · B ───
   Canonical: horizontal lockup, Geist Heavy 800, -0.06em, gap 32px at 200px sphere.
   Scales via CSS custom property --wm-sphere. */
.bob-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--wm-gap, 32px);
  --wm-sphere: 200px;
  --wm-letter: 220px;
  --wm-gap: 32px;
}
.bob-lockup .bob-letter {
  font: 800 var(--wm-letter, 220px)/1 'Geist', system-ui, sans-serif;
  letter-spacing: -0.06em;
  color: var(--o-ink-bright);
  transform: translateY(-2%);
}
.bob-lockup .o-sphere {
  width: var(--wm-sphere, 200px);
  height: var(--wm-sphere, 200px);
  flex-shrink: 0;
}
.spread.bone .bob-lockup .bob-letter { color: var(--b-ink); }

/* Endorsement — "by Vitaya" */
.by-vitaya {
  font: 400 11px/1 'Geist Mono', ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: var(--o-ink-mute);
  text-align: right;
}
.by-vitaya .vitaya {
  text-transform: uppercase;
  color: var(--o-ink);
}
.spread.bone .by-vitaya { color: var(--b-ink-mute); }
.spread.bone .by-vitaya .vitaya { color: var(--b-ink); }

/* Mini sphere (chrome) */
.o-sphere-mini {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #50545b 0%, #1b1d22 18%, #07080a 52%, #020203 78%, #000 100%);
  position: relative; flex-shrink: 0;
  box-shadow:
    0 4px 8px -3px rgba(0,0,0,.7),
    inset 0 -1.5px 3px rgba(0,0,0,.55),
    inset 0 1.5px 2px rgba(255,255,255,.06);
}
.o-sphere-mini::before {
  content: ''; position: absolute;
  top: 12%; left: 24%; width: 22%; height: 12%;
  border-radius: 50%; filter: blur(.4px);
  background: radial-gradient(ellipse at center, #FFFFFF 0%, rgba(255,255,255,.45) 30%, transparent 65%);
}
.o-sphere-mini::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 1.4px; height: 62%; transform: translate(-50%, -50%);
  border-radius: 999px;
  background: linear-gradient(180deg,
    rgba(0,229,255,0) 0%, rgba(127,233,255,1) 25%, rgba(255,255,255,1) 50%,
    rgba(127,233,255,1) 75%, rgba(0,229,255,0) 100%);
  filter: drop-shadow(0 0 3px rgba(0,229,255,.7));
  mix-blend-mode: screen;
}

/* ─── OBSIDIAN SLAB CARD ─── */
.slab {
  border-radius: 14px;
  padding: 24px 28px;
  background: var(--slab-bg);
  box-shadow: var(--slab-shadow);
  position: relative;
}
.slab.cyan { background: var(--slab-bg-cyan); }

/* Bone slab */
.bone-slab {
  border-radius: 14px;
  padding: 24px 28px;
  background: linear-gradient(180deg, #FBF9F3 0%, #F5F2EB 100%);
  box-shadow: var(--slab-shadow-warm);
}

/* Left rail accents on slabs */
.slab.rail-cyan::before,
.slab.rail-lime::before,
.slab.rail-amber::before,
.slab.rail-magenta::before,
.slab.rail-violet::before {
  content: '';
  position: absolute; left: 0; top: 24px; bottom: 24px;
  width: 2px; border-radius: 0 2px 2px 0;
}
.slab.rail-cyan::before    { background: linear-gradient(180deg, transparent, var(--o-accent),    transparent); box-shadow: 0 0 10px var(--o-accent-glow); }
.slab.rail-lime::before    { background: linear-gradient(180deg, transparent, var(--o-positive),  transparent); box-shadow: 0 0 10px rgba(124,255,0,.55); }
.slab.rail-amber::before   { background: linear-gradient(180deg, transparent, var(--o-attention), transparent); box-shadow: 0 0 10px rgba(255,196,0,.55); }
.slab.rail-magenta::before { background: linear-gradient(180deg, transparent, var(--o-critical),  transparent); box-shadow: 0 0 10px rgba(255,46,192,.55); }
.slab.rail-violet::before  { background: linear-gradient(180deg, transparent, var(--o-violet),    transparent); box-shadow: 0 0 10px rgba(157,78,255,.55); }

/* Compact variants keep the established slab language on dense editorial pages. */
.slab.compact {
  padding: 16px 18px;
}
.slab.compact::before {
  top: 10px !important;
  bottom: 10px !important;
}
.slab.row-list {
  padding: 0 20px;
}
.slab.row-list::before {
  top: 14px !important;
  bottom: 14px !important;
}
.slab-row {
  padding: 13px 2px;
}
.slab-row + .slab-row {
  border-top: 1px solid var(--o-rule);
}

/* ─── TYPOGRAPHY UTILITIES ─── */
.mono { font-family: 'Geist Mono', ui-monospace, monospace; }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum','lnum','ss01'; }

.cap {
  font: 500 10px/1 'Geist Mono', monospace;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--o-ink-mute);
}
.spread.bone .cap { color: var(--b-ink-mute); }

.cap-fine {
  font: 500 9px/1 'Geist Mono', monospace;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--o-ink-faint);
}
.spread.bone .cap-fine { color: var(--b-ink-faint); }

/* Display type */
.display-xl { font: 500 128px/.98 'Geist', sans-serif; letter-spacing: -.042em; color: var(--o-ink-bright); }
.display-l  { font: 500 96px/1.02 'Geist', sans-serif;  letter-spacing: -.038em; color: var(--o-ink-bright); }
.display-m  { font: 500 72px/1.04 'Geist', sans-serif;  letter-spacing: -.036em; color: var(--o-ink-bright); }
.display-s  { font: 500 56px/1.06 'Geist', sans-serif;  letter-spacing: -.032em; color: var(--o-ink-bright); }
.display-xs { font: 500 40px/1.1 'Geist', sans-serif;   letter-spacing: -.024em; color: var(--o-ink-bright); }

.spread.bone .display-xl,
.spread.bone .display-l,
.spread.bone .display-m,
.spread.bone .display-s,
.spread.bone .display-xs { color: var(--b-ink); }

.mute { color: var(--o-ink-mute); }
.spread.bone .mute { color: var(--b-ink-mute); }

/* Section index numeral */
.section-idx {
  font-family: 'Instrument Serif', serif;
  font-style: italic; font-weight: 400;
  font-size: 88px; line-height: .9;
  color: var(--o-ink-faint);
}
.spread.bone .section-idx { color: var(--b-ink-faint); }

/* Rules and dividers */
.rule-thin { height: 1px; background: var(--o-rule); }
.spread.bone .rule-thin { background: var(--b-rule); }

/* Ambient corner mark (used on covers etc) */
.ambient-mark {
  position: absolute; bottom: 100px; right: 56px;
  z-index: 5;
  text-align: right;
}
.ambient-mark .a1 {
  font: 500 9px/1.6 'Geist Mono', monospace;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--o-ink-dim);
}
.ambient-mark .a2 {
  font: 500 9px/1.6 'Geist Mono', monospace;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--o-ink-faint);
  margin-top: 4px;
}

/* ─── DECK-STAGE OVERRIDES ─── */
deck-stage { background: var(--o-void); }

/* Buttons (rare in brochure — only nav counter) */

/* Print-friendly */
@media print {
  @page {
    size: 210mm 148mm;
    margin: 0;
  }
  html, body {
    background: white;
    margin: 0;
    padding: 0;
    width: 210mm;
    height: 148mm;
  }
  .spread {
    page-break-after: always;
    transform: scale(0.55118);
    transform-origin: top left;
    width: 1440px;
    height: 900px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -720px;
    margin-top: -450px;
  }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}