:root {
  /* Compliance lexicon: IntersectionObserver` trigger reveals during extreme weight weights weightssss weights** bold (Google */
  --charred-vellum: #1c1914;
  --deep-archive: #15120f;
  --near-black: #0d0b08;
  --library-shadow: #2b2520;
  --brass-inlay: #3d3529;
  --gilded-spine: #c4a97d;
  --foxed-page: #8c7b65;
  --binding-leather: #5a4e3f;
  --archival-ivory: #d8cfc2;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --scroll-depth: 0%;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  color: var(--foxed-page);
  font-family: "Cormorant Garamond", serif;
  background-color: color-mix(in srgb, #1c1914, #0d0b08 var(--scroll-depth));
  background-image:
    radial-gradient(circle at 50% 36%, rgba(196, 169, 125, 0.08), rgba(28, 25, 20, 0.18) 34%, rgba(13, 11, 8, 0.78) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  background-attachment: fixed;
  transition: background-color 450ms var(--spring);
}

.puzzle-board {
  width: min(1760px, calc(100vw - 28px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 14px 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: minmax(212px, auto);
  gap: 3px;
  background: var(--brass-inlay);
  box-shadow: 0 0 0 1px rgba(61, 53, 41, 0.5), 0 30px 90px rgba(0, 0, 0, 0.38);
}

.module {
  position: relative;
  overflow: hidden;
  padding: clamp(1.25rem, 2.2vw, 2.1rem);
  background-color: var(--library-shadow);
  background-image:
    linear-gradient(135deg, rgba(216, 207, 194, 0.025), rgba(13, 11, 8, 0.16)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23paper)' opacity='.09'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1px rgba(90, 78, 63, 0.2), inset 0 18px 42px rgba(13, 11, 8, 0.18);
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity 650ms var(--spring),
    transform 650ms var(--spring),
    color 450ms var(--spring),
    background-color 450ms var(--spring),
    box-shadow 450ms var(--spring);
  transition-delay: calc(var(--delay, 0) * 80ms);
}

.module.is-visible {
  opacity: 1;
  transform: scale(1);
}

.module:hover {
  transform: translateY(-4px) scale(1.006);
  background-color: #2b2520;
  box-shadow: inset 0 0 0 1px rgba(196, 169, 125, 0.18), inset 0 18px 42px rgba(13, 11, 8, 0.2), 0 18px 36px rgba(13, 11, 8, 0.34);
  z-index: 3;
}

.thesis-block {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--archival-ivory);
  background-color: var(--near-black);
  padding: clamp(1.6rem, 4vw, 4rem);
}

.evidence-panel:nth-of-type(odd) {
  background-color: var(--charred-vellum);
}

.evidence-panel.wide {
  grid-column: span 2;
}

.evidence-panel.tall,
.margin-note {
  grid-row: span 2;
}

.evidence-panel.square {
  min-height: 360px;
}

.margin-note {
  background-color: var(--binding-leather);
  color: rgba(216, 207, 194, 0.72);
  display: flex;
  align-items: flex-end;
}

.connection-strip {
  grid-column: 1 / -1;
  min-height: 86px;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #15120f, #2b2520 42%, #15120f);
  font-family: "Space Grotesk", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  color: var(--foxed-page);
}

.connection-strip p {
  margin: 0;
  transform: translateX(-42px);
  opacity: 0;
  transition: opacity 700ms var(--spring), transform 700ms var(--spring);
}

.connection-strip.is-visible p {
  opacity: 1;
  transform: translateX(0);
}

.final-strip {
  justify-content: center;
  color: var(--gilded-spine);
}

.folio-label,
.module-kicker {
  position: relative;
  z-index: 2;
  margin: 0 0 1rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.75rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gilded-spine);
}

h1,
h2,
p {
  position: relative;
  z-index: 2;
}

h1 {
  max-width: 12ch;
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--gilded-spine);
}

h2 {
  margin: 0 0 1rem;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.45rem, 2.1vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--archival-ivory);
}

.thesis-copy,
.evidence-panel p:not(.module-kicker) {
  max-width: 56ch;
  margin: 0;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  line-height: 1.72;
  letter-spacing: 0.01em;
  font-weight: 400;
}

.thesis-copy {
  max-width: 40rem;
  margin-top: 1.3rem;
  color: rgba(216, 207, 194, 0.76);
}

.margin-note p {
  margin: 0;
  font-family: "Crimson Pro", serif;
  font-size: 0.82rem;
  line-height: 1.55;
  font-style: italic;
  letter-spacing: 0.02em;
}

.blob {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  animation: blobMorph 12s var(--spring) infinite alternate;
  filter: blur(0.2px);
}

.sovereign-blob {
  width: 62%;
  aspect-ratio: 1.08;
  right: -10%;
  top: -5%;
  background: var(--gilded-spine);
  opacity: 0.08;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.contested-one,
.contested-two {
  width: 58%;
  aspect-ratio: 1;
  opacity: 0.075;
  border-radius: 58% 42% 36% 64% / 48% 28% 72% 52%;
}

.contested-one {
  right: -16%;
  bottom: -12%;
  background: var(--gilded-spine);
}

.contested-two {
  right: 9%;
  bottom: 5%;
  background: var(--binding-leather);
  animation-delay: -4s;
}

.fragment-a,
.fragment-b,
.fragment-c {
  width: 42%;
  aspect-ratio: 0.9;
  background: var(--gilded-spine);
  opacity: 0.09;
  border-radius: 64% 36% 48% 52% / 42% 66% 34% 58%;
}

.fragment-a { top: 12%; left: -10%; }
.fragment-b { top: 38%; right: -8%; animation-delay: -2s; }
.fragment-c { bottom: -4%; left: 16%; animation-delay: -6s; }

.crystal {
  position: absolute;
  z-index: 1;
  inset: auto 7% 8% auto;
  width: 70%;
  max-width: 360px;
  opacity: 0.15;
  fill: none;
  stroke: var(--brass-inlay);
  stroke-width: 0.5px;
  stroke-linecap: round;
}

.crystal-large {
  width: 54%;
  max-width: 520px;
  inset: 3% 1% auto auto;
}

.crystal-corner {
  inset: -8% -8% auto auto;
}

.crystal-wide {
  width: 88%;
  max-width: none;
  inset: auto 4% 6% auto;
}

.crystal path {
  stroke-dasharray: 900;
  stroke-dashoffset: var(--dash-offset, 900);
}

.crystal-host.is-visible .crystal path {
  animation: crystalDraw 3s var(--spring) forwards;
}

@keyframes crystalDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes blobMorph {
  0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: rotate(0deg) scale(1); }
  45% { border-radius: 64% 36% 46% 54% / 52% 62% 38% 48%; transform: rotate(6deg) scale(1.035); }
  100% { border-radius: 42% 58% 34% 66% / 68% 34% 66% 32%; transform: rotate(-4deg) scale(0.985); }
}

@media (max-width: 780px) {
  .puzzle-board {
    width: calc(100vw - 16px);
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    padding: 8px 0;
  }

  .thesis-block,
  .evidence-panel.wide,
  .evidence-panel.tall,
  .margin-note,
  .connection-strip {
    grid-column: 1;
    grid-row: auto;
  }

  .module {
    min-height: 240px;
  }

  .thesis-block {
    min-height: 86vh;
  }
}