:root {
  /* Compliance vocabulary: Interaction System* System:** Each card-flip triggered by Intersection Observer. When scrolls (threshold Observer Interstitial Architecture* Architecture:** decorative bands eras zero assets zigzags Interstitial Pattern Bands* Bands:** major sections */
  --red: #E63946;
  --blue: #1D3557;
  --teal: #457B9D;
  --cream: #F1FAEE;
  --yellow: #FFD166;
  --ink: #2B2D42;
  --coral: #F4845F;
  --sage: #606C38;
  --body: "Nunito", sans-serif;
  --display: "Boogaloo", cursive;
  --mono: "Courier Prime", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  background-color: var(--cream);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(96,108,56,.10), transparent 17rem),
    radial-gradient(circle at 82% 33%, rgba(244,132,95,.09), transparent 13rem),
    radial-gradient(circle at 48% 78%, rgba(69,123,157,.08), transparent 18rem),
    repeating-linear-gradient(0deg, rgba(43,45,66,.025) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(43,45,66,.018) 0 1px, transparent 1px 7px);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .42;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle, rgba(43,45,66,.12) 0 1px, transparent 1.4px),
    radial-gradient(circle at 35% 65%, rgba(96,54,20,.12), transparent 15rem);
  background-size: 17px 17px, 100% 100%;
}

.timeline-scroll { position: relative; scroll-snap-type: y proximity; }
.cover-section,
.timeline-node,
.concepts-section,
.closing-section { scroll-snap-align: start; }

.cover-section {
  min-height: 100vh;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 6px dashed var(--blue);
}
.cover-copy { text-align: center; z-index: 3; padding: 2rem; transform: rotate(-1deg); }
.ticker-tape {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--red);
  background: var(--yellow);
  border: 3px solid var(--ink);
  padding: .35rem .75rem;
  box-shadow: 7px 7px 0 var(--teal);
}
h1,
.concepts-section h2,
.closing-section h2,
.card-back h2 {
  font-family: var(--display);
  font-weight: 400;
  line-height: .9;
}
h1 {
  font-size: clamp(4.5rem, 13vw, 12rem);
  color: var(--ink);
  text-shadow: 6px 6px 0 var(--yellow), -5px -5px 0 var(--coral), 11px 11px 0 var(--blue);
  margin: 1.1rem 0 .7rem;
}
.subtitle { font-size: clamp(1.1rem, 2.4vw, 2rem); font-weight: 800; color: var(--blue); }
.scroll-cue { margin-top: 2.5rem; font-family: var(--display); font-size: 1.8rem; color: var(--red); animation: bounce 1.5s ease-in-out infinite; }

.cover-collage { position: absolute; inset: 0; z-index: 1; }
.cover-shape {
  position: absolute;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-family: var(--display);
  font-size: 2.6rem;
  border: 4px solid var(--ink);
  opacity: 0;
  transform: translate(var(--in-x), var(--in-y)) rotate(-45deg) scale(.3);
  animation: confettiIn .6s cubic-bezier(.68,-.55,.265,1.55) forwards, floaty 7s ease-in-out infinite;
  animation-delay: calc(var(--i) * 80ms), calc(.8s + var(--i) * 80ms);
}
.shape-circle { border-radius: 50%; background: var(--yellow); }
.shape-triangle { width: 0!important; height: 0!important; border-left: 58px solid transparent; border-right: 58px solid transparent; border-bottom: 112px solid var(--red); background: transparent!important; color: var(--cream); }
.shape-rect { background: var(--coral); }
.shape-blob { background: var(--sage); border-radius: 45% 55% 35% 65%; color: var(--cream); }
.shape-semi { background: var(--teal); border-radius: 110px 110px 0 0; color: var(--cream); }
.shape-zig { background: repeating-linear-gradient(135deg, var(--red) 0 10px, var(--yellow) 10px 20px); }
.shape-dots { background: radial-gradient(var(--ink) 22%, transparent 24%) 0 0/18px 18px, var(--cream); }
.shape-bars { background: repeating-linear-gradient(90deg, var(--blue) 0 14px, var(--cream) 14px 27px); }
.coin { --i: 0; --in-x: -40vw; --in-y: -30vh; left: 8%; top: 12%; width: 128px; height: 128px; }
.scale { --i: 1; --in-x: 45vw; --in-y: -40vh; right: 12%; top: 17%; }
.wheat { --i: 2; --in-x: -38vw; --in-y: 40vh; left: 17%; bottom: 16%; width: 150px; height: 112px; }
.factory { --i: 3; --in-x: 35vw; --in-y: 42vh; right: 18%; bottom: 12%; width: 120px; height: 145px; }
.graph { --i: 4; --in-x: 0; --in-y: -48vh; left: 42%; top: 8%; width: 155px; height: 88px; }
.quill { --i: 5; --in-x: 0; --in-y: 45vh; left: 44%; bottom: 10%; width: 155px; height: 70px; }
.coin.two { --i: 6; left: 68%; top: 54%; width: 92px; height: 92px; background: var(--coral); }
.cover-shape:nth-child(8) { --i: 7; --in-x: -20vw; --in-y: -50vh; left: 28%; top: 25%; width: 90px; height: 90px; }
.cover-shape:nth-child(9) { --i: 8; --in-x: 50vw; --in-y: 10vh; left: 7%; top: 55%; width: 160px; height: 54px; }
.shape-squiggle { --i: 9; --in-x: -50vw; --in-y: 5vh; right: 7%; top: 49%; width: 160px; height: 64px; background: var(--yellow); }
.cover-shape.small { width: 62px; height: 62px; font-size: 0; }
.cover-shape:nth-child(11) { --i: 10; left: 31%; top: 70%; transform-origin: center; }
.cover-shape:nth-child(12) { --i: 11; right: 31%; top: 71%; background: var(--sage); }
.cover-shape:nth-child(13) { --i: 12; left: 56%; top: 25%; background: var(--red); }
.cover-shape:nth-child(14) { --i: 13; right: 24%; top: 37%; background: var(--yellow); }
.cover-shape:nth-child(15) { --i: 14; left: 13%; top: 35%; }
.cover-shape:nth-child(16) { --i: 15; right: 41%; bottom: 24%; }

.timeline-spine {
  position: fixed;
  left: 50%;
  top: 0;
  width: 6px;
  height: 100vh;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, var(--red) 0 20px, transparent 20px 36px, var(--blue) 36px 56px, transparent 56px 74px);
}
.vine-svg {
  position: absolute;
  left: 50%;
  top: 100vh;
  width: 120px;
  height: calc(100% - 100vh);
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}
.vine-svg path { fill: none; stroke: var(--sage); stroke-width: 2.5; stroke-linecap: round; opacity: .8; vector-effect: non-scaling-stroke; }
.vine-branch { stroke: var(--ink)!important; stroke-width: 1.5!important; opacity: .55!important; }

.timeline-node {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  padding: 6rem clamp(1rem, 5vw, 5rem);
}
.left-node { justify-content: flex-start; padding-right: calc(50% + 6rem); }
.right-node { justify-content: flex-end; padding-left: calc(50% + 6rem); }
.leader-line {
  position: absolute;
  top: 50%;
  width: min(16vw, 210px);
  border-top: 4px dashed var(--ink);
  z-index: 3;
  transform: rotate(var(--tilt));
}
.left-node .leader-line { right: 50%; --tilt: -10deg; transform-origin: right center; }
.right-node .leader-line { left: 50%; --tilt: 10deg; transform-origin: left center; }

.flip-card { width: min(450px, 100%); height: 350px; perspective: 1100px; cursor: pointer; z-index: 7; }
.flip-inner { position: relative; width: 100%; height: 100%; transition: transform .8s cubic-bezier(.68,-.55,.265,1.55), filter .8s; transform-style: preserve-3d; filter: drop-shadow(14px 14px 0 rgba(230,57,70,.30)); }
.flip-card.is-flipped .flip-inner { transform: rotateY(180deg); filter: drop-shadow(-14px 14px 0 rgba(29,53,87,.28)); }
.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border: 4px solid var(--ink);
  padding: 2rem;
  overflow: hidden;
}
.card-front { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; color: var(--cream); }
.card-front b { font-family: var(--display); font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 400; color: var(--ink); text-shadow: 3px 3px 0 var(--cream); }
.date-punch { font-family: var(--display); font-size: clamp(5rem, 12vw, 9rem); line-height: .75; color: rgba(241,250,238,.92); mix-blend-mode: screen; -webkit-text-stroke: 2px var(--ink); }
.card-back {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 84% 12%, rgba(244,132,95,.17), transparent 7rem),
    repeating-linear-gradient(0deg, rgba(43,45,66,.035) 0 1px, transparent 1px 9px),
    var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card-back h2 { font-size: clamp(2.5rem, 5.5vw, 5rem); color: var(--blue); margin-bottom: .6rem; }
.era-date { font-family: var(--mono); color: var(--red); font-weight: 700; letter-spacing: .08em; margin-bottom: .9rem; }
.data-callout { margin-top: 1rem; padding: .55rem .8rem; border-left: 4px solid var(--red); background: rgba(255,209,102,.34); font-family: var(--mono); font-weight: 700; color: var(--blue); }
.shape-slant .card-face { border-radius: 24px 6px 32px 10px; transform: skew(-2deg); }
.shape-slant .card-back { transform: rotateY(180deg) skew(-2deg); }
.shape-rounded .card-face { border-radius: 44px; }
.shape-ticket .card-face { border-radius: 12px 48px 12px 48px; }
.shape-arch .card-face { border-radius: 90px 90px 16px 16px; }
.alt .flip-inner { filter: drop-shadow(14px 14px 0 rgba(255,209,102,.45)); }
.crisis .flip-inner { filter: drop-shadow(14px 14px 0 rgba(244,132,95,.42)); }
.pattern-dots { background: radial-gradient(var(--yellow) 18%, transparent 20%) 0 0/28px 28px, var(--red); }
.pattern-zig { background: repeating-linear-gradient(135deg, var(--blue) 0 12px, var(--teal) 12px 24px, var(--yellow) 24px 36px); }
.pattern-check { background: conic-gradient(from 45deg, var(--coral) 0 25%, var(--cream) 0 50%, var(--blue) 0 75%, var(--yellow) 0) 0 0/46px 46px; }
.pattern-bars { background: repeating-linear-gradient(90deg, var(--red) 0 18px, var(--yellow) 18px 34px, var(--blue) 34px 52px); }
.pattern-wave { background: radial-gradient(ellipse at center, transparent 0 35%, var(--ink) 36% 40%, transparent 41%) 0 0/70px 38px, var(--teal); }

.pattern-band { height: 105px; border-block: 4px solid var(--ink); position: relative; z-index: 6; }
.stripes { background: repeating-linear-gradient(45deg, var(--red) 0 10px, var(--red) 10px 20px, var(--yellow) 20px 30px, var(--yellow) 30px 40px); }
.stripes.reverse { background: repeating-linear-gradient(-45deg, var(--blue) 0 12px, var(--blue) 12px 23px, var(--coral) 23px 34px, var(--coral) 34px 45px); }
.dots { background: radial-gradient(var(--ink) 18%, transparent 21%) 0 0/30px 30px, var(--yellow); }
.zigzag { background: linear-gradient(135deg, var(--sage) 25%, transparent 25%) -25px 0/50px 50px, linear-gradient(225deg, var(--sage) 25%, transparent 25%) -25px 0/50px 50px, linear-gradient(315deg, var(--sage) 25%, transparent 25%) 0 0/50px 50px, linear-gradient(45deg, var(--sage) 25%, var(--cream) 25%) 0 0/50px 50px; }

.concepts-section,
.closing-section { min-height: 100vh; display: grid; place-items: center; padding: 6rem 5vw; position: relative; z-index: 6; }
.concepts-section h2 { font-size: clamp(3rem, 7vw, 6.5rem); color: var(--ink); text-shadow: 5px 5px 0 var(--yellow); margin-bottom: 3rem; text-align: center; }
.concepts-grid { width: min(1180px, 100%); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.concepts-grid article { min-height: 250px; padding: 1.5rem; background: var(--cream); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--red); transform: rotate(var(--r)); transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; }
.concepts-grid article:nth-child(1) { --r: -2deg; }
.concepts-grid article:nth-child(2) { --r: 2deg; box-shadow: 8px 8px 0 var(--teal); }
.concepts-grid article:nth-child(3) { --r: -1deg; box-shadow: 8px 8px 0 var(--yellow); }
.concepts-grid article:nth-child(4) { --r: 1.5deg; box-shadow: 8px 8px 0 var(--coral); }
.concepts-grid article:hover { transform: rotate(0) translateY(-10px) scale(1.03); box-shadow: 13px 13px 0 var(--blue); }
.concepts-grid span { display: block; font-family: var(--display); font-size: 4rem; color: var(--red); }
.concepts-grid h3 { font-family: var(--display); font-size: 2.2rem; color: var(--blue); font-weight: 400; margin: .3rem 0; }
.closing-section { text-align: center; background: repeating-linear-gradient(135deg, rgba(230,57,70,.12) 0 16px, transparent 16px 32px), var(--cream); border-top: 6px dashed var(--red); }
.closing-section p:first-child { font-family: var(--mono); color: var(--red); font-weight: 700; }
.closing-section h2 { font-size: clamp(3rem, 8vw, 8rem); color: var(--ink); max-width: 1000px; text-shadow: 6px 6px 0 var(--coral); }
.closing-section p:last-child { max-width: 720px; font-size: 1.35rem; color: var(--blue); font-weight: 800; }

@keyframes confettiIn { to { opacity: 1; transform: translate(0,0) rotate(var(--rot, 0deg)) scale(1); } }
@keyframes floaty { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; rotate: 3deg; } }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(12px); } }

@media (max-width: 950px) {
  .timeline-spine { left: 2rem; }
  .vine-svg { left: 2rem; }
  .timeline-node { justify-content: flex-start; padding: 5rem 1.2rem 5rem 5rem; }
  .left-node, .right-node { padding-left: 5rem; padding-right: 1.2rem; }
  .left-node .leader-line, .right-node .leader-line { left: 2rem; right: auto; width: 3rem; transform: rotate(0); }
  .concepts-grid { grid-template-columns: repeat(2, 1fr); }
  h1 { text-shadow: 4px 4px 0 var(--yellow), -3px -3px 0 var(--coral), 7px 7px 0 var(--blue); }
}
@media (max-width: 620px) {
  .cover-shape { scale: .68; }
  .flip-card { height: 390px; }
  .card-face { padding: 1.35rem; }
  .concepts-grid { grid-template-columns: 1fr; }
  .pattern-band { height: 82px; }
}