/* ============================================================================
   The Rhythm Gap — Capstone Stylesheet
   Editorial-constitutional treatment for the foundational statement paper.
   Loaded only on /research/the-rhythm-gap.html (body.paper--capstone).
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..900,0..100&family=Newsreader:opsz,ital,wght@6..72,0;1,200..800&family=JetBrains+Mono:wght@300..600&display=swap');

/* Hide scrollbar on the capstone — the page is long but the editorial
   atmosphere requires zero UI chrome. Vertical scroll still works (mouse
   wheel, touchpad, keyboard) — only the visible scrollbar is suppressed. */
html:has(body.paper--capstone),
body.paper--capstone {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* Legacy Edge / IE */
}
html:has(body.paper--capstone)::-webkit-scrollbar,
body.paper--capstone::-webkit-scrollbar {
  display: none;                  /* Safari + Chrome */
  width: 0;
  height: 0;
}

body.paper--capstone {
  --cs-ink-deep: #050813;
  --cs-ink-mid: #0c1230;
  --cs-ink-veil: rgba(8, 12, 32, 0.72);

  --cs-violet: #7c6cff;
  --cs-violet-soft: rgba(124, 108, 255, 0.28);
  --cs-cyan: #4dd0e1;
  --cs-cyan-soft: rgba(77, 208, 225, 0.18);

  --cs-gold: #d4a857;
  --cs-gold-soft: rgba(212, 168, 87, 0.42);
  --cs-gold-veil: rgba(212, 168, 87, 0.08);

  --cs-text-high: #f5f5f8;
  --cs-text-mid: #c5c8d0;
  --cs-text-low: #8a8e99;
  --cs-text-low-soft: rgba(138, 142, 153, 0.6);

  --cs-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --cs-body: 'Newsreader', 'Source Serif Pro', Georgia, serif;
  --cs-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  --cs-r1: 8px;
  --cs-r2: 16px;
  --cs-r3: 24px;
  --cs-r4: 40px;
  --cs-r5: 64px;
  --cs-r6: 104px;
  --cs-r7: 168px;
  --cs-r8: 248px;

  --cs-measure: 640px;
  --cs-measure-wide: 880px;

  background: var(--cs-ink-deep) !important;
  color: var(--cs-text-mid);
  font-family: var(--cs-body);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "onum" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Hide the inherited landing-background / global header chrome that the other
   research papers use — the capstone gets its own full-bleed treatment. */
body.paper--capstone .landing-background,
body.paper--capstone .landing-shell > header.landing-header {
  display: none !important;
}

body.paper--capstone .landing-shell {
  display: block;
  background: transparent;
  min-height: 100vh;
}

/* ----------------------------------------------------------------------------
   Atmosphere: aurora + grain
   ---------------------------------------------------------------------------- */

.cs-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 90% at 50% -10%, var(--cs-ink-mid) 0%, var(--cs-ink-deep) 55%, var(--cs-ink-deep) 100%);
}

.cs-aurora {
  position: absolute;
  inset: -10%;
  filter: blur(90px) saturate(1.1);
  mix-blend-mode: screen;
}

.cs-aurora--violet {
  background: radial-gradient(circle at 18% 22%, var(--cs-violet-soft) 0%, transparent 45%);
  opacity: 0.85;
  animation: cs-aurora-drift-a 38s ease-in-out infinite alternate;
}

.cs-aurora--cyan {
  background: radial-gradient(circle at 82% 68%, var(--cs-cyan-soft) 0%, transparent 50%);
  opacity: 0.7;
  animation: cs-aurora-drift-b 46s ease-in-out infinite alternate;
}

.cs-aurora--gold {
  background:
    radial-gradient(circle at 50% 108%, var(--cs-gold-soft) 0%, transparent 38%),
    radial-gradient(circle at 12% 92%, rgba(212, 168, 87, 0.18) 0%, transparent 28%);
  opacity: 0.55;
  animation: cs-aurora-drift-c 52s ease-in-out infinite alternate;
}

@keyframes cs-aurora-drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(4%, -2%, 0) scale(1.08); }
}
@keyframes cs-aurora-drift-b {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-3%, 3%, 0) scale(1.06); }
}
@keyframes cs-aurora-drift-c {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.5; }
  100% { transform: translate3d(2%, -1%, 0) scale(1.04); opacity: 0.65; }
}

.cs-grain {
  position: absolute;
  inset: 0;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Subtle gold hairlines top + bottom — constitutional frame */
.cs-frame {
  position: fixed;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--cs-gold-soft) 18%, var(--cs-gold) 50%, var(--cs-gold-soft) 82%, transparent 100%);
  opacity: 0.4;
  z-index: 5;
  pointer-events: none;
}
.cs-frame--top    { top: 0; }
.cs-frame--bottom { bottom: 0; }

/* ----------------------------------------------------------------------------
   Header strip (semi-transparent over hero)
   ---------------------------------------------------------------------------- */

.cs-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(20px, 4vw, 56px);
  font-family: var(--cs-body);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  background: linear-gradient(180deg, rgba(5, 8, 19, 0.7) 0%, rgba(5, 8, 19, 0.3) 100%);
  border-bottom: 1px solid rgba(245, 245, 248, 0.05);
}

.cs-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--cs-text-high);
  text-decoration: none;
  font-family: var(--cs-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.005em;
  font-variation-settings: "opsz" 36, "SOFT" 60;
}

.cs-header__brand .bia-orb {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.cs-header__back {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cs-text-low);
  text-decoration: none;
  transition: color 220ms ease;
  font-weight: 500;
}
.cs-header__back:hover { color: var(--cs-gold); }

/* ----------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------------- */

.cs-hero {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px clamp(20px, 6vw, 80px) 80px;
}

/* Hero orb wrapper IS the halo container — Safari-bulletproof because the
   wrapper has no overflow:hidden + border-radius interaction. The orb
   itself sits inside, sized to fill the wrapper exactly. Atmospheric halo
   is the same vibrant magenta/teal/purple as the canonical .bia-orb-halo,
   but scaled up dramatically for ceremonial presence. */
.cs-hero__orb {
  width: clamp(88px, 11vw, 150px);
  height: clamp(88px, 11vw, 150px);
  margin: 0 auto var(--cs-r4);
  position: relative;
  border-radius: 50%;
  opacity: 0;
  animation: cs-fade-up 1400ms cubic-bezier(0.22, 0.61, 0.36, 1) 200ms forwards;
  box-shadow:
    /* Tight close glow — bridges the immediate orb edge with no dark gap */
    0 0 8px rgba(255, 200, 245, 0.6),
    0 0 18px rgba(180, 120, 240, 0.6),
    /* Directional atmospheric halo — larger ceremonial scale */
    0 -18px 40px rgba(255, 80, 200, 0.72),
    0 18px 40px rgba(22, 226, 255, 0.72),
    -24px 0 44px rgba(140, 90, 240, 0.50),
    24px 0 44px rgba(140, 90, 240, 0.50),
    0 -40px 80px rgba(255, 107, 213, 0.42),
    0 40px 80px rgba(22, 200, 240, 0.42),
    0 0 140px rgba(180, 100, 255, 0.32),
    0 0 240px rgba(124, 108, 255, 0.14);
  /* NO dark ground-projection shadow — paints a gritty ring around the orb
     on dark backgrounds. Removed for clean atmosphere. */
}
.cs-hero__orb .bia-orb {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
/* Orb body stays still — no breathing animation. */
body.paper--capstone .cs-hero__orb .bia-orb {
  animation: none !important;
}

@keyframes cs-orb-breath {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50%      { transform: scale(1.22); opacity: 1; }
}

/* Header brand orb — also bumped for consistency */
.cs-header__brand .bia-orb {
  width: 42px !important;
  height: 42px !important;
}

/* ----------------------------------------------------------------------------
   Ceremonial orb internals — scale spark particles up to match the larger orb.
   The shared stylesheet locks nav-class orbs to 3px sparks at 6-8px orbit radius;
   at 332px the hero orb needs proportionally larger luminous bodies.
   ---------------------------------------------------------------------------- */

body.paper--capstone .cs-hero__orb .bia-orb .bia-orb-spark-back,
body.paper--capstone .cs-hero__orb .bia-orb .bia-orb-spark-front,
body.paper--capstone .cs-hero__orb .bia-orb .bia-orb-spark-ccw {
  margin-left: 0 !important;
  margin-top: 0 !important;
  border-radius: 50%;
  background-color: transparent !important;
  will-change: transform, opacity, filter;
}

/* Spark back — violet luminous body. Brand-color core (not white) with a
   true gaussian-like falloff over 8 stops, then a 1px blur smooths the
   outer pixels into the drop-shadow halo so there's no perceivable edge. */
body.paper--capstone .cs-hero__orb .bia-orb .bia-orb-spark-back {
  width: 18px !important;
  height: 18px !important;
  /* Bump z-index to 6 so spark-back paints ABOVE the inner orb layers
     (caustic z:3, surface z:3, rim z:4, refraction z:5). The default
     z-index of 1 was burying it under all the surface effects. */
  z-index: 6 !important;
  background: radial-gradient(
    circle,
    rgba(205, 192, 255, 1)        0%,
    rgba(180, 162, 255, 0.96)     6%,
    rgba(155, 138, 255, 0.86)    14%,
    rgba(140, 122, 255, 0.62)    24%,
    rgba(124, 108, 255, 0.42)    38%,
    rgba(124, 108, 255, 0.22)    55%,
    rgba(124, 108, 255, 0.08)    74%,
    rgba(124, 108, 255, 0)      100%
  ) !important;
  filter:
    blur(0.6px)
    drop-shadow(0 0 10px rgba(124, 108, 255, 0.9))
    drop-shadow(0 0 26px rgba(124, 108, 255, 0.55))
    drop-shadow(0 0 48px rgba(77, 208, 225, 0.35)) !important;
  animation:
    cs-hero-spark-back-orbit 22s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite,
    cs-hero-spark-flicker-violet 1.8s ease-in-out infinite !important;
}

/* Spark front — cyan luminous body. Brand-color core (not white). */
body.paper--capstone .cs-hero__orb .bia-orb .bia-orb-spark-front {
  width: 20px !important;
  height: 20px !important;
  background: radial-gradient(
    circle,
    rgba(180, 240, 250, 1)        0%,
    rgba(140, 225, 240, 0.97)     6%,
    rgba(110, 215, 232, 0.88)    14%,
    rgba(90, 212, 228, 0.65)     24%,
    rgba(77, 208, 225, 0.42)     38%,
    rgba(77, 208, 225, 0.22)     55%,
    rgba(77, 208, 225, 0.07)     74%,
    rgba(77, 208, 225, 0)       100%
  ) !important;
  filter:
    blur(0.7px)
    drop-shadow(0 0 12px rgba(77, 208, 225, 0.95))
    drop-shadow(0 0 30px rgba(77, 208, 225, 0.6))
    drop-shadow(0 0 56px rgba(124, 108, 255, 0.4)) !important;
  animation:
    cs-hero-spark-figure8 14s ease-in-out infinite,
    cs-hero-spark-flicker-cyan 1.3s ease-in-out infinite !important;
  animation-delay: 0s, -0.7s !important;
}

/* Spark ccw — gold luminous body. Brand-color core (not white). */
body.paper--capstone .cs-hero__orb .bia-orb .bia-orb-spark-ccw {
  width: 15px !important;
  height: 15px !important;
  background: radial-gradient(
    circle,
    rgba(255, 232, 180, 1)        0%,
    rgba(252, 218, 155, 0.96)     6%,
    rgba(245, 200, 128, 0.86)    14%,
    rgba(232, 185, 105, 0.62)    24%,
    rgba(220, 175, 95, 0.4)      38%,
    rgba(212, 168, 87, 0.22)     55%,
    rgba(212, 168, 87, 0.08)     74%,
    rgba(212, 168, 87, 0)       100%
  ) !important;
  filter:
    blur(0.55px)
    drop-shadow(0 0 10px rgba(212, 168, 87, 0.95))
    drop-shadow(0 0 26px rgba(212, 168, 87, 0.55))
    drop-shadow(0 0 44px rgba(212, 168, 87, 0.3)) !important;
  animation:
    cs-hero-spark-vortex 35s ease-in-out infinite,
    cs-hero-spark-flicker-gold 2.2s ease-in-out infinite !important;
  animation-delay: 0s, -1.1s !important;
}

/* Flares — the original .bia-orb-flares element is clipped inside the orb's
   clip-path: circle(50%) and very subtle (0.55 opacity, 0.10-0.12 alpha
   colors). Bump vibrancy on capstone orbs so the ether flares are clearly
   visible as atmospheric color washes within the orb body. */
body.paper--capstone .cs-hero__orb .bia-orb .bia-orb-flares,
body.paper--capstone .cs-header__brand .bia-orb .bia-orb-flares {
  inset: -10% !important;
  opacity: 0.85 !important;
  background:
    radial-gradient(circle at 30% 30%,
      rgba(77, 208, 225, 0.45) 0%,
      rgba(77, 208, 225, 0.25) 18%,
      rgba(77, 208, 225, 0.08) 38%,
      transparent 60%),
    radial-gradient(circle at 72% 72%,
      rgba(124, 108, 255, 0.42) 0%,
      rgba(124, 108, 255, 0.22) 18%,
      rgba(124, 108, 255, 0.06) 40%,
      transparent 65%),
    radial-gradient(circle at 50% 20%,
      rgba(255, 80, 200, 0.30) 0%,
      rgba(255, 80, 200, 0.15) 22%,
      transparent 50%) !important;
  filter: blur(7px) saturate(1.35) brightness(1.12) !important;
  mix-blend-mode: screen !important;
}

/* Orbital depth illusion — spark passes in front (bright, larger) and behind
   the orb (dim, smaller). The CW sparks peak around 90° (front pass) and dim
   at 270° (behind). CCW reversed. */

/* FIGURE-8 (lemniscate) — cyan spark traces a horizontal infinity loop around
   the orb. Brighter/larger at the orbital extremes (far left, far right),
   smaller/dimmer at the center crossover where the loops intersect. */
@keyframes cs-hero-spark-figure8 {
  0%   { transform: translate(0, 0)       scale(0.55); opacity: 0.30; }
  12%  { transform: translate(36px, -22px) scale(1.0);  opacity: 0.95; }
  25%  { transform: translate(58px, 0)    scale(1.25); opacity: 1; }
  38%  { transform: translate(36px, 22px) scale(1.0);  opacity: 0.85; }
  50%  { transform: translate(0, 0)       scale(0.55); opacity: 0.30; }
  62%  { transform: translate(-36px, -22px) scale(1.0); opacity: 0.95; }
  75%  { transform: translate(-58px, 0)   scale(1.25); opacity: 1; }
  88%  { transform: translate(-36px, 22px) scale(1.0); opacity: 0.85; }
  100% { transform: translate(0, 0)       scale(0.55); opacity: 0.30; }
}

/* VORTEX — gold spark traces a logarithmic spiral around the orb. Emerges
   from the core, spirals OUTWARD over 2 full rotations to reach the surface
   at peak brightness, then spirals BACK INWARD over 2 more rotations as it
   fades back into the core. Total of 4 rotations across the 35s cycle, so
   each rotation takes ~8.75s — slow enough that the eye reads it as drift
   rather than spinning. The continuous forward angular motion (always
   accelerating clockwise) is what makes it read as a vortex vs a zigzag. */
@keyframes cs-hero-spark-vortex {
  /* OUTWARD SPIRAL — emerging from the core */
  0%   { transform: rotate(0deg)    translateX(6px)  scale(0.3); opacity: 0;    }
  8%   { transform: rotate(58deg)   translateX(15px) scale(0.5); opacity: 0.25; }
  16%  { transform: rotate(155deg)  translateX(26px) scale(0.65); opacity: 0.5; }
  24%  { transform: rotate(290deg)  translateX(40px) scale(0.85); opacity: 0.75;}
  32%  { transform: rotate(460deg)  translateX(55px) scale(1.0);  opacity: 0.9; }
  40%  { transform: rotate(635deg)  translateX(68px) scale(1.15); opacity: 0.98;}
  50%  { transform: rotate(720deg)  translateX(76px) scale(1.2);  opacity: 1;   }
  /* INWARD SPIRAL — returning to the core (continues spinning forward) */
  60%  { transform: rotate(805deg)  translateX(68px) scale(1.15); opacity: 0.98;}
  68%  { transform: rotate(980deg)  translateX(55px) scale(1.0);  opacity: 0.9; }
  76%  { transform: rotate(1150deg) translateX(40px) scale(0.85); opacity: 0.75;}
  84%  { transform: rotate(1285deg) translateX(26px) scale(0.65); opacity: 0.5; }
  92%  { transform: rotate(1382deg) translateX(15px) scale(0.5);  opacity: 0.25;}
  100% { transform: rotate(1440deg) translateX(6px)  scale(0.3);  opacity: 0;   }
}

@keyframes cs-hero-spark-back-orbit {
  0%   { transform: rotate(0deg)    translateX(56px) scale(1);    opacity: 0.85; }
  20%  { transform: rotate(72deg)   translateX(56px) scale(1.35); opacity: 1; }
  35%  { transform: rotate(126deg)  translateX(56px) scale(1.15); opacity: 0.9; }
  50%  { transform: rotate(180deg)  translateX(56px) scale(0.9);  opacity: 0.55; }
  62%  { transform: rotate(223deg)  translateX(56px) scale(0.65); opacity: 0.18; }
  72%  { transform: rotate(259deg)  translateX(56px) scale(0.5);  opacity: 0.05; }
  82%  { transform: rotate(295deg)  translateX(56px) scale(0.7);  opacity: 0.22; }
  100% { transform: rotate(360deg)  translateX(56px) scale(1);    opacity: 0.85; }
}

@keyframes cs-hero-spark-front-orbit {
  0%   { transform: rotate(0deg)    translateX(41px)  scale(1);    opacity: 0.9; }
  20%  { transform: rotate(72deg)   translateX(41px)  scale(1.4);  opacity: 1; }
  35%  { transform: rotate(126deg)  translateX(41px)  scale(1.2);  opacity: 0.92; }
  50%  { transform: rotate(180deg)  translateX(41px)  scale(0.95); opacity: 0.62; }
  62%  { transform: rotate(223deg)  translateX(41px)  scale(0.7);  opacity: 0.22; }
  72%  { transform: rotate(259deg)  translateX(41px)  scale(0.55); opacity: 0.08; }
  82%  { transform: rotate(295deg)  translateX(41px)  scale(0.75); opacity: 0.28; }
  100% { transform: rotate(360deg)  translateX(41px)  scale(1);    opacity: 0.9; }
}

@keyframes cs-hero-spark-ccw-orbit {
  0%   { transform: rotate(0deg)    translateX(-63px) scale(1);    opacity: 0.85; }
  20%  { transform: rotate(-72deg)  translateX(-63px) scale(1.3);  opacity: 1; }
  35%  { transform: rotate(-126deg) translateX(-63px) scale(1.1);  opacity: 0.88; }
  50%  { transform: rotate(-180deg) translateX(-63px) scale(0.88); opacity: 0.52; }
  62%  { transform: rotate(-223deg) translateX(-63px) scale(0.62); opacity: 0.16; }
  72%  { transform: rotate(-259deg) translateX(-63px) scale(0.48); opacity: 0.04; }
  82%  { transform: rotate(-295deg) translateX(-63px) scale(0.68); opacity: 0.2; }
  100% { transform: rotate(-360deg) translateX(-63px) scale(1);    opacity: 0.85; }
}

/* Quick flicker layers — per-color, multiplied on top of the orbit. Luminous
   bodies pulsing as they catch and lose light. Each keeps the 0.55-0.7px blur
   so the "hard blurred edge" feel persists across the flicker. */

@keyframes cs-hero-spark-flicker-violet {
  0%, 100% { filter:
    blur(0.6px)
    drop-shadow(0 0 10px rgba(124, 108, 255, 0.9))
    drop-shadow(0 0 26px rgba(124, 108, 255, 0.55))
    drop-shadow(0 0 48px rgba(77, 208, 225, 0.35)); }
  43%      { filter:
    blur(0.4px)
    drop-shadow(0 0 16px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 38px rgba(124, 108, 255, 0.75))
    drop-shadow(0 0 64px rgba(77, 208, 225, 0.5)); }
  47%      { filter:
    blur(0.8px)
    drop-shadow(0 0 5px rgba(124, 108, 255, 0.4))
    drop-shadow(0 0 14px rgba(124, 108, 255, 0.2)); }
  52%      { filter:
    blur(0.5px)
    drop-shadow(0 0 14px rgba(255, 255, 255, 0.85))
    drop-shadow(0 0 32px rgba(124, 108, 255, 0.65))
    drop-shadow(0 0 54px rgba(77, 208, 225, 0.4)); }
}

@keyframes cs-hero-spark-flicker-cyan {
  0%, 100% { filter:
    blur(0.7px)
    drop-shadow(0 0 12px rgba(77, 208, 225, 0.95))
    drop-shadow(0 0 30px rgba(77, 208, 225, 0.6))
    drop-shadow(0 0 56px rgba(124, 108, 255, 0.4)); }
  43%      { filter:
    blur(0.5px)
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.98))
    drop-shadow(0 0 42px rgba(77, 208, 225, 0.8))
    drop-shadow(0 0 72px rgba(124, 108, 255, 0.5)); }
  47%      { filter:
    blur(0.9px)
    drop-shadow(0 0 6px rgba(77, 208, 225, 0.45))
    drop-shadow(0 0 16px rgba(77, 208, 225, 0.22)); }
  52%      { filter:
    blur(0.6px)
    drop-shadow(0 0 16px rgba(255, 255, 255, 0.88))
    drop-shadow(0 0 36px rgba(77, 208, 225, 0.7))
    drop-shadow(0 0 62px rgba(124, 108, 255, 0.45)); }
}

@keyframes cs-hero-spark-flicker-gold {
  0%, 100% { filter:
    blur(0.55px)
    drop-shadow(0 0 10px rgba(212, 168, 87, 0.95))
    drop-shadow(0 0 26px rgba(212, 168, 87, 0.55))
    drop-shadow(0 0 44px rgba(212, 168, 87, 0.3)); }
  43%      { filter:
    blur(0.35px)
    drop-shadow(0 0 16px rgba(255, 240, 200, 0.98))
    drop-shadow(0 0 38px rgba(212, 168, 87, 0.75))
    drop-shadow(0 0 60px rgba(212, 168, 87, 0.45)); }
  47%      { filter:
    blur(0.75px)
    drop-shadow(0 0 5px rgba(212, 168, 87, 0.4))
    drop-shadow(0 0 14px rgba(212, 168, 87, 0.2)); }
  52%      { filter:
    blur(0.45px)
    drop-shadow(0 0 14px rgba(255, 240, 200, 0.88))
    drop-shadow(0 0 32px rgba(212, 168, 87, 0.65))
    drop-shadow(0 0 52px rgba(212, 168, 87, 0.4)); }
}

/* ============================================================================
   Smooth inner surface layers — eliminate hard curved arcs.
   Default rim/caustic/surface/refraction use sharp 2-3 stop gradients that
   cut to transparent at 36-46% radius, painting visible circular boundaries
   inside the orb. Replaced with multi-stop gaussian-style fades extending to
   80-90% radius so each layer melts into the next with no detectable edge.
   Brand-aligned colors (cyan #4dd0e1, violet #7c6cff) where the originals
   used generic teal/pink. The rim's dark vignette is killed entirely.
   ============================================================================ */

/* Caustic — luminous refraction hot-spots, smooth 6-stop falloff */
body.paper--capstone .cs-hero__orb .bia-orb-caustic,
body.paper--capstone .cs-header__brand .bia-orb-caustic {
  background:
    radial-gradient(circle at 8% 40%,
      rgba(255, 255, 255, 0.42) 0%,
      rgba(255, 255, 255, 0.28) 10%,
      rgba(255, 255, 255, 0.14) 22%,
      rgba(255, 255, 255, 0.06) 38%,
      rgba(255, 255, 255, 0.02) 55%,
      transparent 75%),
    radial-gradient(circle at 88% 70%,
      rgba(77, 208, 225, 0.38) 0%,
      rgba(77, 208, 225, 0.24) 12%,
      rgba(77, 208, 225, 0.12) 28%,
      rgba(77, 208, 225, 0.04) 50%,
      transparent 75%) !important;
  filter: blur(2.5px) !important;
}

/* Rim — top-light highlight ONLY; dark vignette removed (was the source of
   the hard dark arc at the orb bottom). */
body.paper--capstone .cs-hero__orb .bia-orb-rim,
body.paper--capstone .cs-header__brand .bia-orb-rim {
  background:
    radial-gradient(circle at 35% 12%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.36) 8%,
      rgba(255, 255, 255, 0.20) 18%,
      rgba(255, 255, 255, 0.10) 32%,
      rgba(255, 255, 255, 0.04) 48%,
      transparent 70%) !important;
  filter: blur(2px) !important;
}

/* Surface — soft "mist" with brand-aligned tint, extended fade */
body.paper--capstone .cs-hero__orb .bia-orb-surface,
body.paper--capstone .cs-header__brand .bia-orb-surface {
  background:
    radial-gradient(circle at 35% 35%,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.08) 14%,
      rgba(255, 255, 255, 0.04) 30%,
      rgba(255, 255, 255, 0.01) 52%,
      transparent 80%),
    radial-gradient(circle at 65% 65%,
      rgba(77, 208, 225, 0.10) 0%,
      rgba(77, 208, 225, 0.06) 16%,
      rgba(77, 208, 225, 0.03) 34%,
      transparent 70%) !important;
  filter: blur(3px) !important;
}

/* Refraction — chromatic edge sparkle, brand-aligned, extended fade */
body.paper--capstone .cs-hero__orb .bia-orb-refraction,
body.paper--capstone .cs-header__brand .bia-orb-refraction {
  background:
    radial-gradient(circle at 50% 20%,
      rgba(77, 208, 225, 0.10) 0%,
      rgba(77, 208, 225, 0.06) 16%,
      rgba(77, 208, 225, 0.02) 34%,
      transparent 65%),
    radial-gradient(circle at 50% 80%,
      rgba(124, 108, 255, 0.08) 0%,
      rgba(124, 108, 255, 0.04) 20%,
      rgba(124, 108, 255, 0.01) 42%,
      transparent 70%) !important;
  filter: blur(2px) !important;
}

/* Re-activate the .bia-focus-dot (Bia's wandering attention point) on the
   capstone orbs. The global `.bia-focus-dot { display:none }` rule in
   bia-ai.css:1854 was added to prevent the dot from reading as a "mini
   orb" — at 12% it stays small enough to read as a luminous attention
   point rather than a second sphere. The biaFocusWander animation
   drives the 6.8s drift across the surface. */
body.paper--capstone .cs-hero__orb .bia-focus-dot,
body.paper--capstone .cs-header__brand .bia-focus-dot {
  display: block !important;
  position: absolute !important;
  width: 12% !important;
  height: 12% !important;
  border-radius: 999px !important;
  left: 40% !important;
  top: 45% !important;
  margin: 0 !important;
  inset: auto !important;
  z-index: 4 !important;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.95),
    rgba(77, 208, 225, 0.6) 40%,
    transparent 70%
  ) !important;
  filter: blur(0.2px) !important;
  mix-blend-mode: screen !important;
  pointer-events: none !important;
  animation: biaFocusWander 6.8s ease-in-out infinite alternate !important;
  opacity: 0.9 !important;
}

/* The orb body itself stays crisp — matches the header brand orb's vibranium
   look. The atmospheric softening lives entirely in the ::before / ::after
   pseudo-element halos (declared above). No inner-layer blur overrides,
   no mask on the orb container — preserve the orb's natural rendering. */

/* ----------------------------------------------------------------------------
   Rotating streak flares — soften the conic-gradient wedge edges (which would
   otherwise read as visible top/bottom angular boundaries) by dramatically
   increasing the blur. Restores full proportions; the goal is feathered
   luminous bands, not compressed silhouettes.
   ---------------------------------------------------------------------------- */

/* Comet sweep — two soft wide arcs of light (cyan + violet) that flow around
   the orb as it slowly rotates. Replaces the previous clumsy 4-wedge conic
   approach. Each arc spans ~80° with gentle 30° taper on each side, so the
   gradient transitions are wider than the eye can perceive. The 20px blur
   ensures even the gradient peaks read as soft sweeping light, not pie slices.
   Result: graceful flowing comet trails, no angular boundaries visible.

   `inset: 0` constrains the streaks element to the orb bounds exactly —
   the parent's clip-path was already clipping the previous `inset: -26%`
   overflow, so those extending bits were invisible paint area. inset:0
   makes the gradient stops relative to the actual visible orb size. */
body.paper--capstone .cs-hero__orb .bia-orb .bia-orb-streaks {
  inset: 0 !important;
  filter: blur(20px) saturate(1.25) brightness(1.08) !important;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(77, 208, 225, 0.04) 35deg,
    rgba(77, 208, 225, 0.18) 55deg,
    rgba(77, 208, 225, 0.42) 75deg,
    rgba(77, 208, 225, 0.55) 90deg,    /* cyan peak */
    rgba(77, 208, 225, 0.42) 105deg,
    rgba(77, 208, 225, 0.18) 125deg,
    rgba(77, 208, 225, 0.04) 145deg,
    transparent 175deg,
    transparent 215deg,
    rgba(124, 108, 255, 0.04) 235deg,
    rgba(124, 108, 255, 0.18) 255deg,
    rgba(124, 108, 255, 0.42) 270deg,
    rgba(124, 108, 255, 0.55) 285deg,  /* violet peak */
    rgba(124, 108, 255, 0.42) 300deg,
    rgba(124, 108, 255, 0.18) 320deg,
    rgba(124, 108, 255, 0.04) 340deg,
    transparent 360deg
  ) !important;
  /* Smooth radial mask — confines the comet sweeps to the orb body with
     a soft inner+outer fade so the comets don't touch the orb's center
     or its outer rim. Pure gaussian shape, no hard boundaries. */
  -webkit-mask-image: radial-gradient(
    circle at 50% 50%,
    transparent 0%,
    rgba(0, 0, 0, 0.18) 14%,
    rgba(0, 0, 0, 0.5) 28%,
    rgba(0, 0, 0, 0.85) 44%,
    #000 60%,
    rgba(0, 0, 0, 0.8) 76%,
    rgba(0, 0, 0, 0.45) 88%,
    rgba(0, 0, 0, 0.12) 96%,
    transparent 100%
  ) !important;
  mask-image: radial-gradient(
    circle at 50% 50%,
    transparent 0%,
    rgba(0, 0, 0, 0.18) 14%,
    rgba(0, 0, 0, 0.5) 28%,
    rgba(0, 0, 0, 0.85) 44%,
    #000 60%,
    rgba(0, 0, 0, 0.8) 76%,
    rgba(0, 0, 0, 0.45) 88%,
    rgba(0, 0, 0, 0.12) 96%,
    transparent 100%
  ) !important;
  animation: cs-comet-sweep 13s linear infinite !important;
  mix-blend-mode: screen !important;
  opacity: 0.85 !important;
}

@keyframes cs-comet-sweep {
  0%   { transform: rotate(0deg)   scale(1.02); }
  50%  { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1.02); }
}

/* Bia-idle state — slightly slower comet sweep (13s) for a calm, contemplative
   rotation. Same cs-comet-sweep keyframe (two wedge soft sweep), no clumsy
   conic chaos. */
body.paper--capstone .cs-hero__orb.bia-idle .bia-orb-streaks,
body.paper--capstone .cs-hero__orb .bia-orb.bia-idle .bia-orb-streaks {
  animation: cs-comet-sweep 15s linear infinite !important;
}

@keyframes cs-hero-streak-chaos {
  0%   { transform: rotate(0deg)   translate(0,0)     scale(1.02); opacity: 0.6; }
  50%  { transform: rotate(180deg) translate(2px,-1px) scale(1.05); opacity: 0.82; }
  100% { transform: rotate(360deg) translate(0,0)     scale(1.02); opacity: 0.6; }
}

/* (Removed conflicting flare override that set blur(18px) opacity 0.55 —
   the newer vibrant override earlier in this file with blur(7px), brand
   color tinting, and opacity 0.85 is now the canonical flares treatment.) */

.cs-hero__eyebrow {
  font-family: var(--cs-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cs-gold);
  margin-bottom: var(--cs-r4);
  display: inline-flex;
  align-items: center;
  gap: 18px;
  opacity: 0;
  animation: cs-fade-up 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) 500ms forwards;
}
.cs-hero__eyebrow::before,
.cs-hero__eyebrow::after {
  content: "";
  display: inline-block;
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cs-gold) 50%, transparent);
}

.cs-hero__title {
  font-family: var(--cs-display);
  margin: 0;
  opacity: 0;
  animation: cs-fade-up 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) 700ms forwards;
}

.cs-hero__title-lead {
  display: block;
  font-weight: 800;
  font-size: clamp(54px, 10.5vw, 148px);
  /* line-height bumped from 0.94 → 1.08 so Fraunces descenders (the "y" in
     "Rhythm" especially) don't get clipped by background-clip:text. The
     padding-bottom adds extra safety in Safari where the descender bounding
     box can extend further than the line-box. */
  line-height: 1.08;
  padding-bottom: 0.08em;
  letter-spacing: -0.035em;
  font-variation-settings: "opsz" 144, "SOFT" 38, "wght" 800;
  background: linear-gradient(180deg, var(--cs-text-high) 0%, #b9bcc8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--cs-r3);
  text-wrap: balance;
}

.cs-hero__title-sub {
  display: block;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 32px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--cs-text-mid);
  font-variation-settings: "opsz" 72, "SOFT" 100, "wght" 300;
  max-width: 28ch;
  margin: 0 auto;
  text-wrap: balance;
}

.cs-hero__meta {
  margin-top: var(--cs-r5);
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--cs-body);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cs-text-low);
  font-weight: 500;
  opacity: 0;
  animation: cs-fade-up 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) 900ms forwards;
}
.cs-hero__meta-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cs-gold);
  opacity: 0.7;
}

.cs-hero__cue {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--cs-body);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cs-text-low);
  opacity: 0;
  animation: cs-fade-up 1500ms cubic-bezier(0.22, 0.61, 0.36, 1) 1400ms forwards;
}
.cs-hero__cue-line {
  display: block;
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, var(--cs-gold) 0%, transparent 100%);
  animation: cs-cue-pulse 2.4s ease-in-out infinite;
}
@keyframes cs-cue-pulse {
  0%, 100% { transform: scaleY(1); opacity: 0.7; }
  50%      { transform: scaleY(0.6); opacity: 0.3; }
}

@keyframes cs-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------------------------------
   Epigraph — one statement, alone on the page
   ---------------------------------------------------------------------------- */

.cs-epigraph {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: var(--cs-r7) clamp(20px, 6vw, 80px);
  max-width: 900px;
  margin: 0 auto;
}
.cs-epigraph::before {
  content: "";
  display: block;
  width: 1px;
  height: 80px;
  background: linear-gradient(180deg, transparent, var(--cs-gold-soft) 50%, transparent);
  margin: 0 auto var(--cs-r4);
}
.cs-epigraph p {
  font-family: var(--cs-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 4.2vw, 52px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--cs-text-high);
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 300;
  margin: 0;
  text-wrap: balance;
}

/* ----------------------------------------------------------------------------
   Article body
   ---------------------------------------------------------------------------- */

.cs-article {
  position: relative;
  z-index: 2;
  max-width: var(--cs-measure);
  margin: 0 auto;
  padding: var(--cs-r6) clamp(20px, 6vw, 60px);
  font-family: var(--cs-body);
  font-size: 19px;
  line-height: 1.78;
  color: var(--cs-text-mid);
  font-variation-settings: "opsz" 22;
}

.cs-article p,
.cs-article ul {
  margin: 0 0 var(--cs-r3);
}

.cs-article p strong,
.cs-article li strong {
  color: var(--cs-text-high);
  font-weight: 600;
}

.cs-article p em,
.cs-article li em {
  color: var(--cs-text-high);
  font-style: italic;
  font-variation-settings: "opsz" 22, "wght" 500;
}

/* Abstract */

.cs-abstract {
  position: relative;
  margin: 0 0 var(--cs-r6);
  padding: var(--cs-r4) var(--cs-r4) var(--cs-r4) var(--cs-r5);
  border-left: 1px solid var(--cs-gold);
  background: linear-gradient(90deg, var(--cs-gold-veil) 0%, transparent 50%);
}

.cs-abstract__label {
  font-family: var(--cs-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cs-gold);
  margin: 0 0 var(--cs-r3);
}

.cs-abstract__body {
  font-style: italic;
  font-size: 17.5px;
  line-height: 1.75;
  font-variation-settings: "opsz" 18, "wght" 350;
  color: var(--cs-text-mid);
  margin: 0;
}

.cs-abstract__body em {
  font-style: normal;
  color: var(--cs-text-high);
  font-weight: 500;
  font-variation-settings: "opsz" 18, "wght" 500;
}

/* Section anchors — Roman numerals in left margin */

.cs-section {
  position: relative;
  margin: var(--cs-r6) 0;
}
.cs-section[data-numeral]::before {
  content: attr(data-numeral);
  position: absolute;
  left: -120px;
  top: 14px;
  font-family: var(--cs-display);
  font-weight: 500;
  font-style: italic;
  font-size: 17px;
  letter-spacing: 0.16em;
  color: var(--cs-gold);
  opacity: 0.65;
  font-variation-settings: "opsz" 24;
}

.cs-h2 {
  font-family: var(--cs-display);
  font-weight: 600;
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--cs-text-high);
  margin: 0 0 var(--cs-r4);
  font-variation-settings: "opsz" 60, "SOFT" 40, "wght" 600;
  text-wrap: balance;
}

/* Lead paragraph after H2 */

.cs-lead {
  font-size: 22px;
  line-height: 1.5;
  font-style: italic;
  font-weight: 400;
  color: var(--cs-text-high);
  font-variation-settings: "opsz" 30, "wght" 400;
  margin-bottom: var(--cs-r4) !important;
}

/* Declarations — short, punchy paragraphs that land */

.cs-decl {
  font-family: var(--cs-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--cs-text-high);
  font-variation-settings: "opsz" 36, "SOFT" 60, "wght" 500;
  margin: var(--cs-r4) 0 !important;
  text-wrap: balance;
}

/* Drop cap */

.cs-body--drop::first-letter,
.cs-dropcap {
  float: left;
  font-family: var(--cs-display);
  font-weight: 800;
  font-size: 5.4em;
  line-height: 0.86;
  margin: 0.06em 0.08em 0 0;
  color: var(--cs-gold);
  font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 800;
  text-shadow: 0 0 32px rgba(212, 168, 87, 0.35);
}

/* Litany list (Access to X. Access to X.) */

.cs-litany {
  list-style: none;
  padding: 0;
  margin: var(--cs-r4) 0 !important;
  font-family: var(--cs-display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.5;
  color: var(--cs-text-mid);
  font-variation-settings: "opsz" 24, "wght" 400;
}
.cs-litany li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(245, 245, 248, 0.04);
}
.cs-litany li:last-child { border-bottom: 0; }

/* Gap list — "knowing AND doing" two-column pairs */

.cs-gap-list {
  list-style: none;
  padding: 0;
  margin: var(--cs-r4) 0 !important;
  display: flex;
  flex-direction: column;
  gap: var(--cs-r2);
}
.cs-gap-list li {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--cs-r3);
  font-family: var(--cs-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--cs-text-low);
  font-variation-settings: "opsz" 28, "wght" 400;
  padding: 10px 0;
  border-top: 1px solid rgba(212, 168, 87, 0.12);
}
.cs-gap-list li:last-child { border-bottom: 1px solid rgba(212, 168, 87, 0.12); }
.cs-gap-list li span {
  color: var(--cs-text-high);
  font-style: italic;
  font-variation-settings: "opsz" 28, "SOFT" 80, "wght" 400;
}
.cs-gap-list li span:first-child { text-align: right; }
.cs-gap-list li span:last-child  { text-align: left; }
.cs-gap-list li > *:nth-child(2) {
  color: var(--cs-gold);
  font-family: var(--cs-body);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 600;
  font-style: normal;
}

/* Standard prose lists */

.cs-list {
  list-style: none;
  padding: 0;
  margin: var(--cs-r3) 0 !important;
}
.cs-list li {
  position: relative;
  padding: 4px 0 4px 28px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--cs-text-mid);
}
.cs-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 14px;
  height: 1px;
  background: var(--cs-gold);
  opacity: 0.6;
}

.cs-list--two-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--cs-r4);
}

/* Faculties list — Continuity Intelligence "seeks to understand" */

.cs-faculties {
  list-style: none;
  padding: 0;
  margin: var(--cs-r4) 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.cs-faculties li {
  font-family: var(--cs-body);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--cs-text-mid);
  padding: 8px 16px;
  border: 1px solid rgba(212, 168, 87, 0.28);
  border-radius: 999px;
  background: rgba(212, 168, 87, 0.04);
  transition: all 280ms ease;
}
.cs-faculties li:hover {
  color: var(--cs-text-high);
  border-color: var(--cs-gold);
  background: rgba(212, 168, 87, 0.1);
}

/* Triad — "Its purpose is not... Its purpose is..." */

.cs-triad {
  margin: var(--cs-r4) 0;
  padding: var(--cs-r4) 0;
  border-top: 1px solid rgba(212, 168, 87, 0.18);
  border-bottom: 1px solid rgba(212, 168, 87, 0.18);
  font-family: var(--cs-display);
}
.cs-triad p {
  margin: 0 !important;
  padding: 8px 0;
  font-size: 24px;
  line-height: 1.45;
  color: var(--cs-text-low);
  font-style: italic;
  font-variation-settings: "opsz" 30, "SOFT" 80, "wght" 400;
}
.cs-triad p span {
  display: inline-block;
  color: var(--cs-text-low-soft);
  font-style: normal;
  font-family: var(--cs-body);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  margin-right: 14px;
  transform: translateY(-3px);
}
.cs-triad__final {
  color: var(--cs-text-high) !important;
  font-weight: 500 !important;
  font-variation-settings: "opsz" 30, "SOFT" 30, "wght" 500 !important;
}
.cs-triad__final span {
  color: var(--cs-gold) !important;
}

/* Pull quote */

.cs-pullquote {
  margin: var(--cs-r6) auto !important;
  padding: 0;
  text-align: center;
  max-width: 760px;
}
.cs-pullquote::before {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: var(--cs-gold);
  margin: 0 auto var(--cs-r4);
  opacity: 0.7;
}
.cs-pullquote p {
  font-family: var(--cs-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--cs-text-high);
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 300;
  margin: 0 auto !important;
  max-width: 24ch;
  text-wrap: balance;
}

/* Section rules */

.cs-rule {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 168, 87, 0.35) 50%, transparent);
  margin: var(--cs-r6) 0;
}
/* Chapter-break fleuron — flanking gold gradient lines with a centered
   luminous diamond. Replaces the previous near-invisible single-dot ornament.
   Vertical margin reduced from 168px → 80px so the mark earns its space
   instead of leaving a void. */
.cs-rule--ornament {
  position: relative;
  background: transparent;
  border: 0;
  height: 28px;
  margin: 80px 0;
  overflow: visible;
}

/* The flanking lines — single gradient bar with a transparent gap at center
   where the diamond sits. */
.cs-rule--ornament::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 1px;
  transform: translate(-50%, -50%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 168, 87, 0.05) 8%,
    rgba(212, 168, 87, 0.5) 30%,
    rgba(212, 168, 87, 0.75) 42%,
    transparent 47%,
    transparent 53%,
    rgba(212, 168, 87, 0.75) 58%,
    rgba(212, 168, 87, 0.5) 70%,
    rgba(212, 168, 87, 0.05) 92%,
    transparent 100%
  );
}

/* The centered fleuron — diamond rotated 45° with a gold core, hairline
   outline, and luminous halo. */
.cs-rule--ornament::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  background: var(--cs-gold);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 230, 180, 0.9),
    0 0 0 1px rgba(212, 168, 87, 0.55),
    0 0 12px rgba(212, 168, 87, 0.6),
    0 0 28px rgba(212, 168, 87, 0.32),
    0 0 48px rgba(212, 168, 87, 0.14);
}

/* ----------------------------------------------------------------------------
   The Flywheel — custom SVG diagram
   ---------------------------------------------------------------------------- */

.cs-flywheel {
  margin: var(--cs-r5) 0 var(--cs-r5);
  text-align: center;
}

.cs-flywheel__svg {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 0 40px rgba(124, 108, 255, 0.18));
}

.cs-flywheel__ring {
  fill: none;
  stroke: rgba(212, 168, 87, 0.45);
  stroke-width: 0.6;
  stroke-dasharray: 2 4;
}

.cs-flywheel__cycle-bg {
  fill: none;
  stroke: rgba(212, 168, 87, 0.18);
  stroke-width: 1.2;
}

.cs-flywheel__pulse {
  fill: none;
  stroke: var(--cs-gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 80 920;
  animation: cs-pulse-orbit 14s linear infinite;
}

@keyframes cs-pulse-orbit {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

.cs-flywheel__node {
  fill: var(--cs-ink-mid);
  stroke: var(--cs-gold);
  stroke-width: 1.2;
  filter: drop-shadow(0 0 6px var(--cs-gold-soft));
}
.cs-flywheel__node--anchor {
  fill: var(--cs-gold);
  stroke: var(--cs-gold);
  r: 6;
  filter: drop-shadow(0 0 14px var(--cs-gold));
}

.cs-flywheel__label {
  font-family: var(--cs-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--cs-text-mid);
  /* Crisp SVG text rendering — geometric precision keeps tracked uppercase
     letterforms sharp at small sizes, paint-order keeps strokes/fills
     consistent across browsers. */
  text-rendering: geometricPrecision;
  paint-order: stroke fill;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "tnum" 1;
  -webkit-font-smoothing: antialiased;
}
.cs-flywheel__label--anchor {
  fill: var(--cs-gold);
  font-weight: 600;
}

.cs-flywheel__center {
  font-family: var(--cs-display);
  font-style: italic;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  fill: var(--cs-text-low);
  font-variation-settings: "opsz" 18;
}

.cs-flywheel__caption {
  margin-top: var(--cs-r4);
  font-family: var(--cs-mono);
  font-size: 13px;
  line-height: 1.8;
  color: var(--cs-text-low);
  letter-spacing: 0.02em;
  text-wrap: balance;
}
.cs-flywheel__caption .cs-arrow { color: var(--cs-gold); margin: 0 4px; }
.cs-flywheel__caption strong {
  color: var(--cs-gold);
  font-weight: 600;
}

/* ----------------------------------------------------------------------------
   Validation Domains grid
   ---------------------------------------------------------------------------- */

.cs-domains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: rgba(212, 168, 87, 0.18);
  border: 1px solid rgba(212, 168, 87, 0.18);
  margin: var(--cs-r4) 0;
}
.cs-domains__cell {
  background: var(--cs-ink-deep);
  padding: var(--cs-r3) var(--cs-r3);
  font-family: var(--cs-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--cs-text-mid);
  font-variation-settings: "opsz" 24, "SOFT" 40, "wght" 500;
  transition: all 280ms ease;
  cursor: default;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
}
.cs-domains__cell:hover {
  color: var(--cs-text-high);
  background: rgba(212, 168, 87, 0.06);
}

/* ----------------------------------------------------------------------------
   Final quote — the closing question
   ---------------------------------------------------------------------------- */

.cs-finalquote {
  margin: var(--cs-r6) auto !important;
  text-align: center;
  padding: var(--cs-r5) 0;
  position: relative;
}
.cs-finalquote::before,
.cs-finalquote::after {
  content: "";
  display: block;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cs-gold), transparent);
  margin: 0 auto;
}
.cs-finalquote::before { margin-bottom: var(--cs-r4); }
.cs-finalquote::after  { margin-top: var(--cs-r4); }

.cs-finalquote p {
  font-family: var(--cs-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(32px, 5vw, 60px);
  line-height: 1.18;
  letter-spacing: -0.022em;
  color: var(--cs-text-high);
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 300;
  margin: 0 !important;
  text-wrap: balance;
}

/* Coda */

.cs-coda {
  font-size: 21px !important;
  line-height: 1.55 !important;
  color: var(--cs-text-high) !important;
  font-style: italic;
  font-variation-settings: "opsz" 26, "wght" 400;
  text-align: center;
  max-width: 32ch;
  margin: var(--cs-r4) auto 0 !important;
  text-wrap: balance;
}

/* ----------------------------------------------------------------------------
   Signature block
   ---------------------------------------------------------------------------- */

.cs-signature {
  margin: var(--cs-r7) auto var(--cs-r5);
  text-align: center;
  padding: var(--cs-r5) 0;
  position: relative;
}

.cs-signature__seal {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--cs-r3);
  display: block;
  color: var(--cs-gold);
  filter: drop-shadow(0 0 14px var(--cs-gold-soft));
}

/* Continuity loop — the orbiting dot traverses the unbroken ring once every
   18s. Slow, contemplative; matches the editorial pacing of the paper. */
.cs-seal-orbit {
  transform-origin: 32px 32px;
  animation: cs-seal-orbit-spin 18s linear infinite;
}
@keyframes cs-seal-orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cs-seal-orbit { animation: none; }
}

.cs-signature__name {
  font-family: var(--cs-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--cs-text-high);
  margin: 0 0 6px;
  font-variation-settings: "opsz" 36, "SOFT" 60, "wght" 500;
}

.cs-signature__role {
  font-family: var(--cs-body);
  font-style: italic;
  font-size: 15px;
  color: var(--cs-text-mid);
  margin: 0 0 var(--cs-r2);
}

.cs-signature__date {
  font-family: var(--cs-body);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cs-text-low);
  font-weight: 500;
}

.cs-footer-note {
  text-align: center;
  font-family: var(--cs-body);
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cs-text-low);
  max-width: 520px;
  margin: var(--cs-r4) auto 0;
}

/* ----------------------------------------------------------------------------
   Related papers
   ---------------------------------------------------------------------------- */

.cs-related {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: 0 auto;
  padding: var(--cs-r7) clamp(20px, 6vw, 60px) var(--cs-r6);
  border-top: 1px solid rgba(212, 168, 87, 0.18);
}

.cs-related__label {
  font-family: var(--cs-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cs-gold);
  text-align: center;
  margin: 0 0 var(--cs-r5);
}

.cs-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: rgba(212, 168, 87, 0.18);
  border: 1px solid rgba(212, 168, 87, 0.18);
}

.cs-related__card {
  display: block;
  padding: var(--cs-r4) var(--cs-r4);
  background: var(--cs-ink-deep);
  text-decoration: none;
  transition: all 320ms ease;
}
.cs-related__card:hover {
  background: rgba(212, 168, 87, 0.06);
}

.cs-related__series {
  font-family: var(--cs-body);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cs-gold);
  font-weight: 600;
  margin-bottom: var(--cs-r2);
  display: block;
}

.cs-related__card h3 {
  font-family: var(--cs-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--cs-text-high);
  margin: 0 0 var(--cs-r2);
  line-height: 1.25;
  font-variation-settings: "opsz" 30, "SOFT" 40, "wght" 600;
}

.cs-related__card p {
  font-family: var(--cs-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--cs-text-mid);
  margin: 0;
}

/* ----------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------------- */

.cs-footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(245, 245, 248, 0.04);
  padding: var(--cs-r4) clamp(20px, 6vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--cs-body);
  font-size: 13px;
  color: var(--cs-text-low);
}
.cs-footer a {
  color: var(--cs-text-mid);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 220ms ease;
}
.cs-footer a:hover { color: var(--cs-gold); }

/* ----------------------------------------------------------------------------
   Scroll-triggered reveals (sections + flywheel)
   ---------------------------------------------------------------------------- */

.cs-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1000ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1000ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.cs-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .cs-reveal { opacity: 1; transform: none; transition: none; }
  .cs-hero__orb,
  .cs-hero__eyebrow,
  .cs-hero__title,
  .cs-hero__meta,
  .cs-hero__cue { opacity: 1; animation: none; }
  .cs-aurora--violet,
  .cs-aurora--cyan,
  .cs-aurora--gold,
  .cs-flywheel__pulse,
  .cs-cue-pulse { animation: none; }
}

/* ----------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .cs-section[data-numeral]::before {
    position: static;
    display: block;
    margin-bottom: var(--cs-r2);
    opacity: 0.75;
  }
}

@media (max-width: 720px) {
  .cs-header { padding: 16px 20px; }
  .cs-header__brand .bia-orb { width: 28px; height: 28px; }
  .cs-header__brand { font-size: 15px; }
  .cs-hero { padding-top: 120px; }
  .cs-hero__meta {
    flex-direction: column;
    gap: 10px;
    font-size: 11px;
  }
  .cs-hero__meta-sep { display: none; }
  .cs-article { font-size: 17px; line-height: 1.72; }
  .cs-lead { font-size: 19px; }
  .cs-decl { font-size: 21px; }
  .cs-triad p { font-size: 19px; }
  .cs-triad p span { display: block; margin: 0 0 4px; transform: none; }
  .cs-list--two-col { grid-template-columns: 1fr; gap: 0; }
  .cs-gap-list li {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 6px;
  }
  .cs-gap-list li span:first-child,
  .cs-gap-list li span:last-child { text-align: center; }
  .cs-flywheel__svg { max-width: 100%; }
}