/* === CSS Custom Properties === */
:root {
  --parchment-cream: #FFF8F0;
  --chalk-blush: #FFE8E0;
  --sage-mist: #E8F0E0;
  --dusty-lavender: #D4B8E0;
  --butter-haze: #FFF0D4;
  --ledger-black: #2D2D2D;
  --ink-dark: #1A1A1A;
  --graphite-soft: #5C5C5C;
  --burnt-sienna-wash: #E8A87C;
  --elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* === Reset & Base === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background: var(--parchment-cream);
  color: var(--ink-dark);
  font-family: 'IBM Plex Sans', -apple-system, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.72;
  overflow-x: hidden;
}

/* === Typography === */
.frame-title {
  font-family: 'Space Grotesk', -apple-system, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink-dark);
  margin-bottom: 1.5rem;
}

h2.frame-title {
  font-size: clamp(2rem, 4.5vw, 3.8rem);
}

.cell-heading {
  font-family: 'Space Grotesk', -apple-system, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink-dark);
  margin-bottom: 1rem;
}

p {
  margin-bottom: 1rem;
}

p:last-child {
  margin-bottom: 0;
}

mark {
  background: rgba(232, 168, 124, 0.3);
  color: inherit;
  padding: 0.05em 0.2em;
}

/* === Monospace (Index Cells) === */
.index-content {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(0.85rem, 1.5vw, 0.95rem);
  line-height: 1.65;
}

.index-entry {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(45, 45, 45, 0.1);
}

.index-entry:last-child {
  border-bottom: none;
}

.index-num {
  display: inline-block;
  min-width: 2.5em;
  color: var(--graphite-soft);
  font-weight: 400;
}

/* === SVG Diagram Styles === */
.tx-diagram {
  width: 100%;
  height: auto;
  display: block;
}

.node-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  fill: var(--graphite-soft);
}

.bracket-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  fill: var(--graphite-soft);
}

/* SVG path drawing animation */
.flow-line {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 1200ms ease-out;
}

.threshold {
  opacity: 0;
  transition: opacity 800ms ease-out 400ms;
}

.cell.revealed .flow-line {
  stroke-dashoffset: 0;
}

.cell.revealed .threshold {
  opacity: 1;
}

/* === Bento Frames === */
.bento-frame {
  scroll-snap-align: start;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.bento-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  min-height: 100vh;
}

/* === Cell Base Styles === */
.cell {
  border: 4px solid var(--ledger-black);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  opacity: 0;
  transform: scale(0.92) translateY(12px);
  transition: opacity 400ms var(--elastic),
              transform 400ms var(--elastic);
}

.cell.revealed {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Cell hover */
.cell:hover {
  border-width: 6px;
  transition: border-width 200ms var(--elastic),
              opacity 400ms var(--elastic),
              transform 400ms var(--elastic);
}

/* Cell types */
.thesis-cell {
  background: var(--parchment-cream);
  position: relative;
}

/* Circuit trace pattern on thesis cells */
.thesis-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(45,45,45,0.03) 1px, transparent 1px),
    linear-gradient(rgba(45,45,45,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.diagram-cell {
  background: var(--chalk-blush);
  display: flex;
  align-items: center;
  justify-content: center;
}

.index-cell {
  background: var(--sage-mist);
}

.void-cell {
  min-height: 120px;
}

.void-lavender { background: var(--dusty-lavender); }
.void-butter { background: var(--butter-haze); }
.void-sage { background: var(--sage-mist); }
.void-blush { background: var(--chalk-blush); }

/* === Frame 1 Grid === */
.frame-1 {
  grid-template-areas:
    "thesis thesis thesis thesis thesis thesis thesis thesis diag diag diag diag"
    "thesis thesis thesis thesis thesis thesis thesis thesis diag diag diag diag"
    "index index index index index void void void diag diag diag diag";
  grid-template-rows: 1fr 1fr 0.6fr;
}

.frame-1 .thesis-cell { grid-area: thesis; }
.frame-1 .diagram-cell { grid-area: diag; }
.frame-1 .index-cell { grid-area: index; }
.frame-1 .void-cell { grid-area: void; }

/* === Frame 2 Grid === */
.frame-2 {
  grid-template-areas:
    "void void void diag diag diag diag diag thesis thesis thesis thesis"
    "void void void diag diag diag diag diag thesis thesis thesis thesis"
    "index index index index diag diag diag diag thesis thesis thesis thesis";
  grid-template-rows: 1fr 1fr 0.6fr;
}

.frame-2 .void-cell { grid-area: void; }
.frame-2 .diagram-cell { grid-area: diag; }
.frame-2 .thesis-cell { grid-area: thesis; }
.frame-2 .index-cell { grid-area: index; }

/* === Frame 3 Grid === */
.frame-3 {
  grid-template-areas:
    "thesis thesis thesis thesis thesis thesis thesis thesis void void void void"
    "thesis thesis thesis thesis thesis thesis thesis thesis diag diag diag diag"
    "index index index index index index void2 void2 diag diag diag diag";
  grid-template-rows: 0.4fr 1fr 0.6fr;
}

.frame-3 .thesis-cell { grid-area: thesis; }
.frame-3 .diagram-cell-wide { grid-area: diag; background: var(--chalk-blush); display: flex; align-items: center; justify-content: center; }
.frame-3 .void-cell { grid-area: void; }
.frame-3 .index-cell { grid-area: index; }

/* === Frame 4 Grid === */
.frame-4 {
  grid-template-areas:
    "index index index index thesis thesis thesis thesis thesis thesis thesis thesis"
    "index index index index thesis thesis thesis thesis thesis thesis thesis thesis"
    "void void void void diag diag diag diag diag diag diag diag";
  grid-template-rows: 1fr 1fr 0.7fr;
}

.frame-4 .index-cell { grid-area: index; }
.frame-4 .thesis-cell { grid-area: thesis; }
.frame-4 .diagram-cell { grid-area: diag; }
.frame-4 .void-cell { grid-area: void; }

/* === Frame 5 Grid === */
.frame-5 {
  grid-template-areas:
    "void void void thesis thesis thesis thesis thesis thesis diag diag diag"
    "void void void thesis thesis thesis thesis thesis thesis diag diag diag"
    "index index index index index void2 void2 void2 void2 diag diag diag";
  grid-template-rows: 1fr 1fr 0.5fr;
}

.frame-5 .void-cell:first-child { grid-area: void; }
.frame-5 .thesis-cell { grid-area: thesis; }
.frame-5 .diagram-cell { grid-area: diag; }
.frame-5 .index-cell { grid-area: index; }
.frame-5 .void-cell:last-child { grid-area: void2; background: var(--dusty-lavender); }

/* === Frame Divider === */
.frame-divider {
  height: 16px;
  background: var(--ledger-black);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hash-fragment {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--graphite-soft);
  letter-spacing: 0.05em;
}

/* === Frame Indicator === */
.frame-indicator {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-dark);
  background: var(--parchment-cream);
  border: 4px solid var(--ledger-black);
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
  line-height: 1;
  transition: transform 200ms var(--elastic);
}

.frame-indicator:hover {
  transform: scale(1.1);
}

/* === Binary Marginalia === */
.binary-margin {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 16px;
  overflow: hidden;
  z-index: 90;
  background: var(--ledger-black);
  pointer-events: none;
}

.binary-scroll {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  color: var(--graphite-soft);
  white-space: nowrap;
  letter-spacing: 0.1em;
  line-height: 16px;
  animation: scroll-binary 60s linear infinite;
}

@keyframes scroll-binary {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* === Responsive === */
@media (max-width: 768px) {
  .bento-grid {
    display: flex;
    flex-direction: column;
    min-height: auto;
  }

  .bento-frame {
    min-height: auto;
    scroll-snap-align: none;
  }

  html {
    scroll-snap-type: none;
  }

  .cell {
    min-height: auto;
    padding: clamp(1.2rem, 4vw, 2rem);
  }

  .void-cell {
    min-height: 60px;
  }

  .frame-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  h2.frame-title {
    font-size: clamp(1.6rem, 7vw, 2.4rem);
  }

  .diagram-cell svg {
    max-width: 100%;
  }
}