/**
 * Page III: Curated Worlds at Scale
 * Combination: Rich infinite texture (Page 2) + Discrete curated placement (Page 1)
 * Design: Structural content with case studies, examples, and theory
 */


/* Ensure decorative layers never eat clicks */
.world::before,
.world::after,
.world__decor,
.card::before,
.card::after,
.card__grain,
.plaque::before,
.plaque::after {
  pointer-events: none;
}

/* ============================================================================
 * WORLD ENCLOSURE (from Page 1) - Creates the "room" feeling
 * ============================================================================ */

.world {
  position: relative;
  display: block;
  padding: var(--spacing-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-primary);
  background: var(--color-bg-surface);
  overflow: hidden;
}

/* Inner frame = outer - gap (Nested Radius Rule) */
.world::before {
  content: "";
  position: absolute;
  inset: var(--spacing-6);
  border-radius: calc(var(--radius-xl) - var(--spacing-6));
  border: 1px solid rgba(255,255,255,0.07);
}

/* Room lighting + warm vignette (blended with Page 2's texture concept) */
.world::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 560px at 30% 10%, rgba(245,158,11,0.15), transparent 60%),
    radial-gradient(860px 560px at 80% 45%, rgba(245,158,11,0.12), transparent 62%),
    radial-gradient(760px 540px at 20% 90%, rgba(245,158,11,0.10), transparent 65%),
    radial-gradient(1100px 700px at 50% 110%, rgba(0,0,0,0.65), transparent 55%);
  opacity: 0.85;
  mix-blend-mode: screen;
}

[data-theme="light"] .world {
  background: var(--color-bg-light-surface);
  border-color: var(--color-border-light-primary);
}

/* ============================================================================
 * INTENSIVE GAME-LIKE TEXTURE LAYERS - EXACT SAME AS PAGE 2
 * Multiple overlapping noise maps like 3D game world textures
 * ============================================================================ */

/* Layer 1: Base terrain grid - like Minecraft or voxel game structure */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: 
    /* Primary grid - game tile structure */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 20px,
      rgba(6, 158, 252, 0.08) 20px,
      rgba(6, 158, 252, 0.08) 21px,
      transparent 21px,
      transparent 40px,
      rgba(124, 58, 237, 0.07) 40px,
      rgba(124, 58, 237, 0.07) 41px,
      transparent 41px,
      transparent 60px,
      rgba(245, 158, 11, 0.07) 60px,
      rgba(245, 158, 11, 0.07) 61px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 20px,
      rgba(245, 158, 11, 0.08) 20px,
      rgba(245, 158, 11, 0.08) 21px,
      transparent 21px,
      transparent 40px,
      rgba(6, 158, 252, 0.07) 40px,
      rgba(6, 158, 252, 0.07) 41px,
      transparent 41px,
      transparent 60px,
      rgba(124, 58, 237, 0.07) 60px,
      rgba(124, 58, 237, 0.07) 61px
    ),
    /* Diagonal noise pattern 1 */
    repeating-linear-gradient(
      30deg,
      transparent,
      transparent 15px,
      rgba(6, 158, 252, 0.05) 15px,
      rgba(6, 158, 252, 0.05) 16px,
      transparent 16px,
      transparent 30px,
      rgba(124, 58, 237, 0.04) 30px,
      rgba(124, 58, 237, 0.04) 31px,
      transparent 31px,
      transparent 45px,
      rgba(245, 158, 11, 0.04) 45px,
      rgba(245, 158, 11, 0.04) 46px
    ),
    /* Diagonal noise pattern 2 */
    repeating-linear-gradient(
      -30deg,
      transparent,
      transparent 15px,
      rgba(245, 158, 11, 0.05) 15px,
      rgba(245, 158, 11, 0.05) 16px,
      transparent 16px,
      transparent 30px,
      rgba(6, 158, 252, 0.04) 30px,
      rgba(6, 158, 252, 0.04) 31px,
      transparent 31px,
      transparent 45px,
      rgba(124, 58, 237, 0.04) 45px,
      rgba(124, 58, 237, 0.04) 46px
    ),
    /* Cross-hatch for texture depth */
    repeating-linear-gradient(
      60deg,
      transparent,
      transparent 25px,
      rgba(6, 158, 252, 0.03) 25px,
      rgba(6, 158, 252, 0.03) 26px
    ),
    repeating-linear-gradient(
      -60deg,
      transparent,
      transparent 25px,
      rgba(124, 58, 237, 0.03) 25px,
      rgba(124, 58, 237, 0.03) 26px
    );
  pointer-events: none;
  z-index: -1;
}

/* Layer 2: Procedural noise dots - like game texture maps */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    /* Dense dot grid - primary noise */
    radial-gradient(circle at 0% 0%, rgba(6, 158, 252, 0.12) 0.5px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.10) 0.5px, transparent 1px),
    radial-gradient(circle at 0% 50%, rgba(245, 158, 11, 0.10) 0.5px, transparent 1px),
    /* Medium dots - secondary layer */
    radial-gradient(circle at 25% 25%, rgba(6, 158, 252, 0.08) 1px, transparent 2px),
    radial-gradient(circle at 75% 25%, rgba(124, 58, 237, 0.08) 1px, transparent 2px),
    radial-gradient(circle at 25% 75%, rgba(245, 158, 11, 0.08) 1px, transparent 2px),
    radial-gradient(circle at 75% 75%, rgba(6, 158, 252, 0.07) 1px, transparent 2px),
    /* Larger dots - tertiary detail */
    radial-gradient(circle at 33% 33%, rgba(124, 58, 237, 0.10) 1.5px, transparent 3px),
    radial-gradient(circle at 66% 33%, rgba(245, 158, 11, 0.09) 1.5px, transparent 3px),
    radial-gradient(circle at 33% 66%, rgba(6, 158, 252, 0.09) 1.5px, transparent 3px),
    radial-gradient(circle at 66% 66%, rgba(124, 58, 237, 0.08) 1.5px, transparent 3px),
    /* Extra large accent dots */
    radial-gradient(circle at 50% 50%, rgba(6, 158, 252, 0.06) 2px, transparent 4px),
    radial-gradient(circle at 10% 90%, rgba(245, 158, 11, 0.06) 2px, transparent 4px),
    radial-gradient(circle at 90% 10%, rgba(124, 58, 237, 0.06) 2px, transparent 4px);
  background-size: 
    12px 12px, 12px 12px, 12px 12px,
    24px 24px, 24px 24px, 24px 24px, 24px 24px,
    36px 36px, 36px 36px, 36px 36px, 36px 36px,
    60px 60px, 60px 60px, 60px 60px;
  background-position: 
    0 0, 6px 0, 0 6px,
    0 0, 12px 0, 0 12px, 12px 12px,
    0 0, 18px 0, 0 18px, 18px 18px,
    0 0, 30px 30px, 15px 45px;
  pointer-events: none;
  z-index: -1;
}

/* Layer 3: Atmospheric color gradients - game lighting/fog */
.site-main::before {
  content: '';
  position: absolute;
  inset: -48px;
  background: 
    /* Multiple overlapping light sources */
    radial-gradient(ellipse 900px 500px at 50% 0%, rgba(6, 158, 252, 0.12), transparent 65%),
    radial-gradient(ellipse 700px 500px at 15% 25%, rgba(124, 58, 237, 0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 85% 30%, rgba(245, 158, 11, 0.10), transparent 60%),
    radial-gradient(ellipse 800px 600px at 50% 100%, rgba(6, 158, 252, 0.08), transparent 55%),
    radial-gradient(circle 500px at 25% 50%, rgba(124, 58, 237, 0.07), transparent 65%),
    radial-gradient(circle 500px at 75% 60%, rgba(245, 158, 11, 0.07), transparent 65%),
    radial-gradient(circle 400px at 10% 80%, rgba(6, 158, 252, 0.06), transparent 70%),
    radial-gradient(circle 400px at 90% 75%, rgba(124, 58, 237, 0.06), transparent 70%),
    /* Small accent lights */
    radial-gradient(circle 250px at 40% 40%, rgba(245, 158, 11, 0.05), transparent 75%),
    radial-gradient(circle 250px at 60% 65%, rgba(6, 158, 252, 0.05), transparent 75%);
  pointer-events: none;
  z-index: -1;
  opacity: 1;
}

/* Layer 4: Micro-detail texture on sections - like material shaders */
.card {
  position: relative;
}

.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    /* Ultra-fine grid - pixel-level detail */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(6, 158, 252, 0.025) 2px,
      rgba(6, 158, 252, 0.025) 3px,
      transparent 3px,
      transparent 4px,
      rgba(124, 58, 237, 0.020) 4px,
      rgba(124, 58, 237, 0.020) 5px,
      transparent 5px,
      transparent 6px,
      rgba(245, 158, 11, 0.020) 6px,
      rgba(245, 158, 11, 0.020) 7px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(245, 158, 11, 0.025) 2px,
      rgba(245, 158, 11, 0.025) 3px,
      transparent 3px,
      transparent 4px,
      rgba(6, 158, 252, 0.020) 4px,
      rgba(6, 158, 252, 0.020) 5px,
      transparent 5px,
      transparent 6px,
      rgba(124, 58, 237, 0.020) 6px,
      rgba(124, 58, 237, 0.020) 7px
    ),
    /* Diagonal micro-patterns */
    repeating-linear-gradient(
      22.5deg,
      transparent,
      transparent 6px,
      rgba(6, 158, 252, 0.015) 6px,
      rgba(6, 158, 252, 0.015) 7px
    ),
    repeating-linear-gradient(
      -22.5deg,
      transparent,
      transparent 6px,
      rgba(124, 58, 237, 0.015) 6px,
      rgba(124, 58, 237, 0.015) 7px
    ),
    repeating-linear-gradient(
      67.5deg,
      transparent,
      transparent 6px,
      rgba(245, 158, 11, 0.015) 6px,
      rgba(245, 158, 11, 0.015) 7px
    ),
    repeating-linear-gradient(
      -67.5deg,
      transparent,
      transparent 6px,
      rgba(6, 158, 252, 0.012) 6px,
      rgba(6, 158, 252, 0.012) 7px
    );
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
}

/* Layer 5: Complex tileable pattern - like game terrain tiles */
.content-board {
  position: relative;
}

.content-board::before {
  content: '';
  position: absolute;
  inset: -48px;
  background-image:
    /* Hexagonal/honeycomb pattern - common in games */
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(6, 158, 252, 0.035) 0deg,
      rgba(6, 158, 252, 0.035) 15deg,
      transparent 15deg,
      transparent 30deg,
      rgba(124, 58, 237, 0.030) 30deg,
      rgba(124, 58, 237, 0.030) 45deg,
      transparent 45deg,
      transparent 60deg,
      rgba(245, 158, 11, 0.030) 60deg,
      rgba(245, 158, 11, 0.030) 75deg,
      transparent 75deg,
      transparent 90deg,
      rgba(6, 158, 252, 0.025) 90deg,
      rgba(6, 158, 252, 0.025) 105deg,
      transparent 105deg,
      transparent 120deg,
      rgba(124, 58, 237, 0.025) 120deg,
      rgba(124, 58, 237, 0.025) 135deg,
      transparent 135deg,
      transparent 150deg,
      rgba(245, 158, 11, 0.025) 150deg,
      rgba(245, 158, 11, 0.025) 165deg,
      transparent 165deg,
      transparent 180deg,
      rgba(6, 158, 252, 0.020) 180deg,
      rgba(6, 158, 252, 0.020) 195deg,
      transparent 195deg,
      transparent 210deg,
      rgba(124, 58, 237, 0.020) 210deg,
      rgba(124, 58, 237, 0.020) 225deg,
      transparent 225deg,
      transparent 240deg,
      rgba(245, 158, 11, 0.020) 240deg,
      rgba(245, 158, 11, 0.020) 255deg,
      transparent 255deg,
      transparent 270deg,
      rgba(6, 158, 252, 0.018) 270deg,
      rgba(6, 158, 252, 0.018) 285deg,
      transparent 285deg,
      transparent 300deg,
      rgba(124, 58, 237, 0.018) 300deg,
      rgba(124, 58, 237, 0.018) 315deg,
      transparent 315deg,
      transparent 330deg,
      rgba(245, 158, 11, 0.018) 330deg,
      rgba(245, 158, 11, 0.018) 345deg,
      transparent 345deg
    ),
    /* Concentric rings - terrain height map style */
    repeating-radial-gradient(
      circle at 50% 50%,
      rgba(6, 158, 252, 0.020) 0px,
      rgba(6, 158, 252, 0.020) 2px,
      transparent 2px,
      transparent 20px,
      rgba(124, 58, 237, 0.018) 20px,
      rgba(124, 58, 237, 0.018) 22px,
      transparent 22px,
      transparent 40px,
      rgba(245, 158, 11, 0.018) 40px,
      rgba(245, 158, 11, 0.018) 42px,
      transparent 42px,
      transparent 60px,
      rgba(6, 158, 252, 0.015) 60px,
      rgba(6, 158, 252, 0.015) 62px,
      transparent 62px,
      transparent 80px,
      rgba(124, 58, 237, 0.015) 80px,
      rgba(124, 58, 237, 0.015) 82px,
      transparent 82px,
      transparent 100px,
      rgba(245, 158, 11, 0.015) 100px,
      rgba(245, 158, 11, 0.015) 102px,
      transparent 102px,
      transparent 120px
    ),
    /* Square tile pattern - classic game grid */
    repeating-linear-gradient(
      0deg,
      rgba(6, 158, 252, 0.012) 0px,
      rgba(6, 158, 252, 0.012) 1px,
      transparent 1px,
      transparent 50px,
      rgba(124, 58, 237, 0.012) 50px,
      rgba(124, 58, 237, 0.012) 51px,
      transparent 51px,
      transparent 100px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(245, 158, 11, 0.012) 0px,
      rgba(245, 158, 11, 0.012) 1px,
      transparent 1px,
      transparent 50px,
      rgba(6, 158, 252, 0.012) 50px,
      rgba(6, 158, 252, 0.012) 51px,
      transparent 51px,
      transparent 100px
    );
  background-size: 120px 120px, 160px 160px, 100px 100px, 100px 100px;
  background-position: 0 0, 60px 60px, 0 0, 0 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.7;
}

/* ============================================================================
 * PLACED DECOR (from Page 1) - Subtle, curated elements
 * ============================================================================ */

.world__decor {
  position: absolute;
  inset: 0;
  opacity: 0.85;
}

/* Tiny "wall glyphs" grid */
.world__decor--glyphs {
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.06) 0 1px, transparent 2px),
    radial-gradient(circle at 22% 28%, rgba(255,255,255,0.05) 0 1px, transparent 2px),
    radial-gradient(circle at 85% 22%, rgba(255,255,255,0.05) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 68%, rgba(255,255,255,0.05) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 58%, rgba(255,255,255,0.04) 0 1px, transparent 2px);
  opacity: 0.55;
}

/* "Pins & stitches" */
.world__decor--pins {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.04), transparent 35%, transparent 65%, rgba(255,255,255,0.03)),
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 30%, transparent 70%, rgba(255,255,255,0.03));
  opacity: 0.30;
}

/* "Rug" soft bands */
.world__decor--rugs {
  background:
    radial-gradient(900px 340px at 55% 35%, rgba(245,158,11,0.04), transparent 70%),
    radial-gradient(700px 280px at 65% 70%, rgba(245,158,11,0.03), transparent 70%);
  opacity: 0.65;
}

/* ============================================================================
 * CONTENT BOARD (from Page 1) - Curated card placement
 * ============================================================================ */

.content-board {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  max-width: 1200px;
  margin: 0 auto;
}

/* ============================================================================
 * CARDS (from Page 1) - Layered, tactile, discrete placement
 * Nested Radius Rule: outer radius = inner radius + gap (padding)
 * ============================================================================ */

.card {
  position: relative;
  padding: var(--spacing-3);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(10px);
  box-shadow:
    0 14px 38px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
  transition: transform var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out), border-color var(--duration-slow) var(--ease-out);
}

.card:active {
  transform: scale(0.99);
}

/* Inner border layer (Nested Radius Rule: inner = outer - gap) */
.card::before {
  content: "";
  position: absolute;
  inset: var(--spacing-3);
  border-radius: calc(var(--radius-xl) - var(--spacing-3));
  border: 1px solid rgba(255,255,255,0.06);
}

/* Soft sheen */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(520px 260px at 20% 10%, rgba(255,255,255,0.05), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 40%);
  opacity: 0.9;
}

/* Theory cards - warm orange accent */
.card--theory {
  border-color: rgba(245,158,11,0.22);
  background: rgba(245,158,11,0.04);
}

.card--theory::before {
  border-color: rgba(245,158,11,0.10);
}

/* Case study cards - blue accent */
.card--case {
  border-color: rgba(6,158,252,0.22);
  background: rgba(6,158,252,0.04);
}

.card--case::before {
  border-color: rgba(6,158,252,0.10);
}

/* Example cards - green accent */
.card--example {
  border-color: rgba(16,185,129,0.22);
  background: rgba(16,185,129,0.04);
}

.card--example::before {
  border-color: rgba(16,185,129,0.10);
}

.card__grain {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(14px 14px at 100% 0%, rgba(0,0,0,0.45), transparent 70%),
    radial-gradient(14px 14px at 0% 0%, rgba(0,0,0,0.28), transparent 70%),
    radial-gradient(14px 14px at 100% 100%, rgba(0,0,0,0.28), transparent 70%),
    radial-gradient(14px 14px at 0% 100%, rgba(0,0,0,0.45), transparent 70%);
  opacity: 0.55;
}

.card:hover {
  transform: translateY(-1px);
  border-color: rgba(245,158,11,0.50);
  box-shadow:
    0 18px 48px rgba(0,0,0,0.32),
    0 0 0 1px rgba(245,158,11,0.30),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.card__hdr {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
}

.card__hdr-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.card__sigil {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  flex-shrink: 0;
}

.card__sigil svg {
  width: 16px;
  height: 16px;
  opacity: 0.90;
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  letter-spacing: -0.02em;
}

.card__badge {
  font-family: var(--font-mono);
  font-size: var(--font-size-11);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.70;
}

.card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

.card__body p {
  font-size: var(--font-size-14);
  line-height: 1.75;
  color: var(--color-text-secondary);
}

.card__emph {
  font-style: italic;
  color: var(--color-text-primary);
  padding-left: var(--spacing-4);
  border-left: 2px solid rgba(245,158,11,0.70);
}

/* ============================================================================
 * TRADEOFF BOX - Visual representation within card
 * ============================================================================ */

.tradeoff-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  background: rgba(0,0,0,0.15);
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: calc(var(--radius-xl) - var(--spacing-2));
  margin: var(--spacing-2) 0;
}

[data-theme="light"] .tradeoff-box {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.12);
}

.tradeoff-option {
  font-family: var(--font-display);
  font-size: var(--font-size-18) !important;
  color: var(--color-text-primary);
  margin: 0;
}

[data-theme="light"] .tradeoff-option {
  color: var(--color-text-light-primary);
}

.tradeoff-or {
  font-family: var(--font-display);
  font-size: var(--font-size-16);
  font-style: italic;
  color: var(--color-text-muted);
  margin: 0;
}

[data-theme="light"] .tradeoff-or {
  color: var(--color-text-light-muted);
}

/* ============================================================================
 * MARGIN NOTE (from Page 1) - Toggleable annotations
 * ============================================================================ */

.margin-note {
  position: relative;
  z-index: 1;
  margin-top: var(--spacing-4);
  padding: var(--spacing-4);
  border-radius: calc(var(--radius-xl) - var(--spacing-3));
  border: 1px dashed rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.10);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.margin-note__pin {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.margin-note__pin svg {
  width: 14px;
  height: 14px;
  opacity: 0.85;
}

.margin-note p {
  margin: 0;
}

.margin-note.is-hidden { display: none; }

/* ============================================================================
 * DISCOVERY (from Page 1) - Hover + tap reveal
 * ============================================================================ */

.discovery {
  position: relative;
  z-index: 1;
  margin-top: var(--spacing-4);
  padding: var(--spacing-4);
  border-radius: calc(var(--radius-xl) - var(--spacing-3));
  border: 1px solid rgba(16,185,129,0.20);
  background: rgba(16,185,129,0.05);
  opacity: 0.45;
  transition: opacity var(--duration-slow) var(--ease-out), border-color var(--duration-slow) var(--ease-out);
}

.discovery__dot {
  position: absolute;
  top: -7px;
  right: var(--spacing-4);
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(16,185,129,0.75);
  box-shadow: 0 0 0 4px rgba(16,185,129,0.15);
}

.discovery.is-revealed {
  opacity: 1;
  border-color: rgba(16,185,129,0.38);
}

.discovery__content p {
  font-size: var(--font-size-13);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.discovery__content em {
  color: rgba(16,185,129,0.90);
  font-style: italic;
}

/* ============================================================================
 * SEALED NOTE (from Page 1) - Toggle reveal
 * ============================================================================ */

.sealed {
  width: 100%;
  position: relative;
  z-index: 1;
  margin-top: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: calc(var(--radius-xl) - var(--spacing-3));
  border: 1px solid rgba(245,158,11,0.22);
  background: rgba(245,158,11,0.04);
  color: var(--color-text-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.sealed__left { display: inline-flex; align-items: center; gap: var(--spacing-3); }

.sealed__seal {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(245,158,11,0.78);
  box-shadow: 0 0 0 4px rgba(245,158,11,0.14);
}

.sealed__label {
  font-family: var(--font-mono);
  font-size: var(--font-size-11);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.sealed__content {
  position: relative;
  z-index: 1;
  display: none;
  margin-top: var(--spacing-3);
  padding: var(--spacing-4);
  border-radius: calc(var(--radius-xl) - var(--spacing-3));
  border: 1px solid rgba(245,158,11,0.16);
  background: rgba(0,0,0,0.14);
}

.sealed__content.is-open { display: block; }

/* ============================================================================
 * EXHIBIT (from Page 1) - Artifact label for case studies
 * ============================================================================ */

.exhibit {
  position: relative;
  z-index: 1;
  margin-top: var(--spacing-4);
  padding: var(--spacing-4);
  border-radius: calc(var(--radius-xl) - var(--spacing-3));
  border: 1px solid rgba(124,58,237,0.24);
  background: rgba(124,58,237,0.06);
}

.exhibit__top {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--font-size-10);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.9;
}

.exhibit__name {
  margin-top: var(--spacing-2);
  font-family: var(--font-display);
  font-size: var(--font-size-16);
  color: var(--color-text-primary);
}

.exhibit__desc {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-13);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* ============================================================================
 * DRAWER (from Page 1) - Toggle for design patterns
 * ============================================================================ */

.drawer {
  position: relative;
  z-index: 1;
  margin-top: var(--spacing-4);
  border-radius: calc(var(--radius-xl) - var(--spacing-3));
  border: 1px solid rgba(16,185,129,0.22);
  background: rgba(16,185,129,0.05);
  overflow: hidden;
}

.drawer__lid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-4);
  cursor: pointer;
  user-select: none;
}

.drawer__lid:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.drawer__title {
  font-family: var(--font-mono);
  font-size: var(--font-size-11);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.drawer__body {
  display: none;
  padding: var(--spacing-4);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-radius: 0 0 calc(var(--radius-xl) - var(--spacing-3)) calc(var(--radius-xl) - var(--spacing-3));
}

.drawer.is-open .drawer__body { display: block; }

/* ============================================================================
 * PLAQUE (from Page 1) - Closing statement
 * ============================================================================ */

.plaque {
  position: relative;
  padding: var(--spacing-4);
  border-radius: calc(var(--radius-md) + var(--spacing-4));
  border: 1px solid rgba(245,158,11,0.24);
  background: rgba(245,158,11,0.08);
  overflow: hidden;
  margin-top: var(--spacing-6);
}

.plaque::before {
  content: "";
  position: absolute;
  inset: var(--spacing-4);
  border-radius: var(--radius-md);
  border: 1px solid rgba(245,158,11,0.15);
}

.plaque__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  display: grid;
  gap: var(--spacing-3);
}

.plaque__inner p {
  font-family: var(--font-display);
  font-size: var(--font-size-16);
  color: var(--color-text-primary);
  line-height: 1.55;
  margin: 0;
  opacity: 0.92;
}

.plaque__final {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  padding-top: var(--spacing-3);
  border-top: 1px solid rgba(245,158,11,0.20);
}

/* ============================================================================
 * RESPONSIVE
 * ============================================================================ */

@media (max-width: 900px) {
  .content-board {
    padding: 0;
  }
}

/* ============================================================================
 * LIGHT THEME ADJUSTMENTS
 * ============================================================================ */

[data-theme="light"] .card {
  background: rgba(255,255,255,0.70);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

[data-theme="light"] .card--theory {
  background: rgba(245,158,11,0.08);
  border-color: rgba(245,158,11,0.25);
}

[data-theme="light"] .card--case {
  background: rgba(6,158,252,0.08);
  border-color: rgba(6,158,252,0.25);
}

[data-theme="light"] .card--example {
  background: rgba(16,185,129,0.08);
  border-color: rgba(16,185,129,0.25);
}

[data-theme="light"] .card__body p,
[data-theme="light"] .exhibit__desc,
[data-theme="light"] .discovery__content p,
[data-theme="light"] .margin-note {
  color: var(--color-text-light-secondary);
}

[data-theme="light"] .card__emph,
[data-theme="light"] .plaque__inner p,
[data-theme="light"] .exhibit__name {
  color: var(--color-text-light-primary);
}

[data-theme="light"] .plaque {
  background: rgba(245,158,11,0.12);
  border-color: rgba(245,158,11,0.30);
}

/* Light theme texture patterns */
[data-theme="light"] body::before {
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 20px,
      rgba(245, 158, 11, 0.12) 20px,
      rgba(245, 158, 11, 0.12) 21px,
      transparent 21px,
      transparent 40px,
      rgba(6, 158, 252, 0.10) 40px,
      rgba(6, 158, 252, 0.10) 41px,
      transparent 41px,
      transparent 60px,
      rgba(16, 185, 129, 0.10) 60px,
      rgba(16, 185, 129, 0.10) 61px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 20px,
      rgba(16, 185, 129, 0.12) 20px,
      rgba(16, 185, 129, 0.12) 21px,
      transparent 21px,
      transparent 40px,
      rgba(245, 158, 11, 0.10) 40px,
      rgba(245, 158, 11, 0.10) 41px,
      transparent 41px,
      transparent 60px,
      rgba(6, 158, 252, 0.10) 60px,
      rgba(6, 158, 252, 0.10) 61px
    ),
    repeating-linear-gradient(
      30deg,
      transparent,
      transparent 15px,
      rgba(245, 158, 11, 0.08) 15px,
      rgba(245, 158, 11, 0.08) 16px,
      transparent 16px,
      transparent 30px,
      rgba(6, 158, 252, 0.07) 30px,
      rgba(6, 158, 252, 0.07) 31px,
      transparent 31px,
      transparent 45px,
      rgba(16, 185, 129, 0.07) 45px,
      rgba(16, 185, 129, 0.07) 46px
    ),
    repeating-linear-gradient(
      -30deg,
      transparent,
      transparent 15px,
      rgba(6, 158, 252, 0.08) 15px,
      rgba(6, 158, 252, 0.08) 16px,
      transparent 16px,
      transparent 30px,
      rgba(16, 185, 129, 0.07) 30px,
      rgba(16, 185, 129, 0.07) 31px,
      transparent 31px,
      transparent 45px,
      rgba(245, 158, 11, 0.07) 45px,
      rgba(245, 158, 11, 0.07) 46px
    ),
    repeating-linear-gradient(
      60deg,
      transparent,
      transparent 25px,
      rgba(16, 185, 129, 0.05) 25px,
      rgba(16, 185, 129, 0.05) 26px
    ),
    repeating-linear-gradient(
      -60deg,
      transparent,
      transparent 25px,
      rgba(245, 158, 11, 0.05) 25px,
      rgba(245, 158, 11, 0.05) 26px
    );
}

[data-theme="light"] body::after {
  background-image:
    radial-gradient(circle at 0% 0%, rgba(245, 158, 11, 0.18) 0.5px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(6, 158, 252, 0.15) 0.5px, transparent 1px),
    radial-gradient(circle at 0% 50%, rgba(16, 185, 129, 0.15) 0.5px, transparent 1px),
    radial-gradient(circle at 25% 25%, rgba(245, 158, 11, 0.12) 1px, transparent 2px),
    radial-gradient(circle at 75% 25%, rgba(6, 158, 252, 0.12) 1px, transparent 2px),
    radial-gradient(circle at 25% 75%, rgba(16, 185, 129, 0.12) 1px, transparent 2px),
    radial-gradient(circle at 75% 75%, rgba(245, 158, 11, 0.10) 1px, transparent 2px),
    radial-gradient(circle at 33% 33%, rgba(6, 158, 252, 0.14) 1.5px, transparent 3px),
    radial-gradient(circle at 66% 33%, rgba(16, 185, 129, 0.13) 1.5px, transparent 3px),
    radial-gradient(circle at 33% 66%, rgba(245, 158, 11, 0.13) 1.5px, transparent 3px),
    radial-gradient(circle at 66% 66%, rgba(6, 158, 252, 0.12) 1.5px, transparent 3px),
    radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.10) 2px, transparent 4px),
    radial-gradient(circle at 10% 90%, rgba(245, 158, 11, 0.10) 2px, transparent 4px),
    radial-gradient(circle at 90% 10%, rgba(6, 158, 252, 0.10) 2px, transparent 4px);
  background-size: 
    12px 12px, 12px 12px, 12px 12px,
    24px 24px, 24px 24px, 24px 24px, 24px 24px,
    36px 36px, 36px 36px, 36px 36px, 36px 36px,
    60px 60px, 60px 60px, 60px 60px;
  background-position: 
    0 0, 6px 0, 0 6px,
    0 0, 12px 0, 0 12px, 12px 12px,
    0 0, 18px 0, 0 18px, 18px 18px,
    0 0, 30px 30px, 15px 45px;
}

[data-theme="light"] .site-main::before {
  background: 
    radial-gradient(ellipse 900px 500px at 50% 0%, rgba(245, 158, 11, 0.15), transparent 65%),
    radial-gradient(ellipse 700px 500px at 15% 25%, rgba(6, 158, 252, 0.13), transparent 60%),
    radial-gradient(ellipse 700px 500px at 85% 30%, rgba(16, 185, 129, 0.13), transparent 60%),
    radial-gradient(ellipse 800px 600px at 50% 100%, rgba(245, 158, 11, 0.11), transparent 55%),
    radial-gradient(circle 500px at 25% 50%, rgba(6, 158, 252, 0.10), transparent 65%),
    radial-gradient(circle 500px at 75% 60%, rgba(16, 185, 129, 0.10), transparent 65%),
    radial-gradient(circle 400px at 10% 80%, rgba(245, 158, 11, 0.09), transparent 70%),
    radial-gradient(circle 400px at 90% 75%, rgba(6, 158, 252, 0.09), transparent 70%),
    radial-gradient(circle 250px at 40% 40%, rgba(16, 185, 129, 0.08), transparent 75%),
    radial-gradient(circle 250px at 60% 65%, rgba(245, 158, 11, 0.08), transparent 75%);
}

[data-theme="light"] .card::after {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(245, 158, 11, 0.040) 2px,
      rgba(245, 158, 11, 0.040) 3px,
      transparent 3px,
      transparent 4px,
      rgba(6, 158, 252, 0.035) 4px,
      rgba(6, 158, 252, 0.035) 5px,
      transparent 5px,
      transparent 6px,
      rgba(16, 185, 129, 0.035) 6px,
      rgba(16, 185, 129, 0.035) 7px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(16, 185, 129, 0.040) 2px,
      rgba(16, 185, 129, 0.040) 3px,
      transparent 3px,
      transparent 4px,
      rgba(245, 158, 11, 0.035) 4px,
      rgba(245, 158, 11, 0.035) 5px,
      transparent 5px,
      transparent 6px,
      rgba(6, 158, 252, 0.035) 6px,
      rgba(6, 158, 252, 0.035) 7px
    ),
    repeating-linear-gradient(
      22.5deg,
      transparent,
      transparent 6px,
      rgba(245, 158, 11, 0.025) 6px,
      rgba(245, 158, 11, 0.025) 7px
    ),
    repeating-linear-gradient(
      -22.5deg,
      transparent,
      transparent 6px,
      rgba(6, 158, 252, 0.025) 6px,
      rgba(6, 158, 252, 0.025) 7px
    ),
    repeating-linear-gradient(
      67.5deg,
      transparent,
      transparent 6px,
      rgba(16, 185, 129, 0.025) 6px,
      rgba(16, 185, 129, 0.025) 7px
    ),
    repeating-linear-gradient(
      -67.5deg,
      transparent,
      transparent 6px,
      rgba(245, 158, 11, 0.022) 6px,
      rgba(245, 158, 11, 0.022) 7px
    );
}

[data-theme="light"] .content-board::before {
  background-image:
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(245, 158, 11, 0.050) 0deg,
      rgba(245, 158, 11, 0.050) 15deg,
      transparent 15deg,
      transparent 30deg,
      rgba(6, 158, 252, 0.045) 30deg,
      rgba(6, 158, 252, 0.045) 45deg,
      transparent 45deg,
      transparent 60deg,
      rgba(16, 185, 129, 0.045) 60deg,
      rgba(16, 185, 129, 0.045) 75deg,
      transparent 75deg,
      transparent 90deg,
      rgba(245, 158, 11, 0.040) 90deg,
      rgba(245, 158, 11, 0.040) 105deg,
      transparent 105deg,
      transparent 120deg,
      rgba(6, 158, 252, 0.040) 120deg,
      rgba(6, 158, 252, 0.040) 135deg,
      transparent 135deg,
      transparent 150deg,
      rgba(16, 185, 129, 0.040) 150deg,
      rgba(16, 185, 129, 0.040) 165deg,
      transparent 165deg,
      transparent 180deg,
      rgba(245, 158, 11, 0.035) 180deg,
      rgba(245, 158, 11, 0.035) 195deg,
      transparent 195deg,
      transparent 210deg,
      rgba(6, 158, 252, 0.035) 210deg,
      rgba(6, 158, 252, 0.035) 225deg,
      transparent 225deg,
      transparent 240deg,
      rgba(16, 185, 129, 0.035) 240deg,
      rgba(16, 185, 129, 0.035) 255deg,
      transparent 255deg,
      transparent 270deg,
      rgba(245, 158, 11, 0.030) 270deg,
      rgba(245, 158, 11, 0.030) 285deg,
      transparent 285deg,
      transparent 300deg,
      rgba(6, 158, 252, 0.030) 300deg,
      rgba(6, 158, 252, 0.030) 315deg,
      transparent 315deg,
      transparent 330deg,
      rgba(16, 185, 129, 0.030) 330deg,
      rgba(16, 185, 129, 0.030) 345deg,
      transparent 345deg
    ),
    repeating-radial-gradient(
      circle at 50% 50%,
      rgba(245, 158, 11, 0.035) 0px,
      rgba(245, 158, 11, 0.035) 2px,
      transparent 2px,
      transparent 20px,
      rgba(6, 158, 252, 0.032) 20px,
      rgba(6, 158, 252, 0.032) 22px,
      transparent 22px,
      transparent 40px,
      rgba(16, 185, 129, 0.032) 40px,
      rgba(16, 185, 129, 0.032) 42px,
      transparent 42px,
      transparent 60px,
      rgba(245, 158, 11, 0.028) 60px,
      rgba(245, 158, 11, 0.028) 62px,
      transparent 62px,
      transparent 80px,
      rgba(6, 158, 252, 0.028) 80px,
      rgba(6, 158, 252, 0.028) 82px,
      transparent 82px,
      transparent 100px,
      rgba(16, 185, 129, 0.028) 100px,
      rgba(16, 185, 129, 0.028) 102px,
      transparent 102px,
      transparent 120px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(245, 158, 11, 0.022) 0px,
      rgba(245, 158, 11, 0.022) 1px,
      transparent 1px,
      transparent 50px,
      rgba(6, 158, 252, 0.022) 50px,
      rgba(6, 158, 252, 0.022) 51px,
      transparent 51px,
      transparent 100px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(16, 185, 129, 0.022) 0px,
      rgba(16, 185, 129, 0.022) 1px,
      transparent 1px,
      transparent 50px,
      rgba(245, 158, 11, 0.022) 50px,
      rgba(245, 158, 11, 0.022) 51px,
      transparent 51px,
      transparent 100px
    );
  background-size: 120px 120px, 160px 160px, 100px 100px, 100px 100px;
  background-position: 0 0, 60px 60px, 0 0, 0 0;
}