:root {
  --chalk: #f0ebe3;
  --ink: #2c2c3a;
  --coral: #d4726a;
  --teal: #6a9b9e;
  --olive: #8b9a6b;
  --lavender: #b8a9c9;
  --mustard: #c9a84c;
  --stone: #7a7a85;
  --slide-distance: 40px;
  --slide-duration: 600ms;
}

/* Compliance vocabulary: IntersectionObserver triggers reveal when element enters 15% of viewport. Interstitial Pattern Strips:** Interstitial Strips:** Between major concept sections Source Sans 3 body text explaining it Source Sans 3 weight 400 Source Sans 3's open apertures and clear letterforms make dense civic terminology (gerrymandering Source Sans 3" (Google Fonts Space Mono uppercase identifying the domain ("GOVERNANCE" Space Mono" (Google Fonts */

@keyframes slideRevealVocabulary {
  from { opacity: 0; transform: translateY(var(--slide-distance)); }
  to { opacity: 1; transform: translateY(0); }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--chalk);
  color: var(--ink);
  font-family: "Source Sans 3", sans-serif;
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  line-height: 1.65;
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.15;
  background-image:
    polygon(20% 10%, 28% 4%, 36% 13%, 32% 24%, 19% 22%),
    polygon(72% 16%, 83% 12%, 88% 25%, 78% 31%, 68% 25%),
    polygon(12% 74%, 23% 69%, 29% 82%, 17% 91%),
    polygon(86% 66%, 94% 73%, 87% 84%, 77% 78%);
  background: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.15;
  background-image:
    linear-gradient(35deg, transparent 0 74%, var(--lavender) 75% 78%, transparent 79%),
    linear-gradient(125deg, transparent 0 82%, var(--teal) 83% 86%, transparent 87%),
    radial-gradient(circle at 13% 19%, var(--lavender) 0 5px, transparent 6px),
    radial-gradient(circle at 73% 34%, var(--teal) 0 7px, transparent 8px),
    radial-gradient(circle at 41% 76%, var(--lavender) 0 6px, transparent 7px),
    radial-gradient(circle at 86% 84%, var(--teal) 0 5px, transparent 6px);
  background-size: 210px 210px, 260px 260px, 190px 190px, 230px 230px, 250px 250px, 200px 200px;
}

.pattern-defs { position: absolute; }

h1, h2, .hangul-title, .hangul-block span {
  font-family: "Rubik", sans-serif;
  letter-spacing: -0.02em;
}

h1, h2, p { margin: 0; }

.label {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--stone);
  font-family: "Space Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tutorial-shell { width: 100%; }

.hero {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 8vw;
  background: var(--ink);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 7vw 5vw auto auto;
  width: 33vw;
  height: 33vw;
  border: 3px dashed rgba(240, 235, 227, 0.16);
  border-radius: 50%;
}

.hero-card {
  position: relative;
  z-index: 2;
  width: min(100%, 1080px);
  margin-left: -3vw;
  padding: clamp(2rem, 6vw, 5rem);
  border: 5px solid var(--coral);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(122, 122, 133, 0.18) 1px, transparent 1px),
    linear-gradient(0deg, rgba(122, 122, 133, 0.18) 1px, transparent 1px),
    var(--ink);
  background-size: 16px 16px;
  box-shadow: 18px 18px 0 rgba(212, 114, 106, 0.28);
}

.hero-card h1 {
  color: var(--chalk);
  font-size: clamp(4rem, 12vw, 10rem);
  font-weight: 800;
  line-height: 0.86;
}

.hangul-title {
  margin-top: 0.22em;
  color: var(--coral);
  font-size: clamp(2.4rem, 7.2vw, 6rem);
  font-weight: 800;
  line-height: 1;
}

.hero-subtitle {
  margin-top: 1.1rem;
  color: var(--stone);
  font-size: 1.2rem;
}

.deco-block {
  position: absolute;
  z-index: 3;
  border: 3px solid var(--coral);
  background-color: var(--chalk);
  overflow: hidden;
}

.deco-block span, .deco-block::after { position: absolute; inset: 0; content: ""; }
.deco-left { left: 8vw; bottom: 11vh; width: 80px; height: 80px; border-radius: 16px 0 16px 0; }
.deco-left span { background: url("#confetti"); }
.deco-left::after { background-image: radial-gradient(circle, var(--mustard) 0 4px, transparent 5px), radial-gradient(circle, var(--lavender) 0 5px, transparent 6px), radial-gradient(circle, var(--teal) 0 4px, transparent 5px); background-size: 31px 37px, 47px 41px, 55px 49px; }
.deco-right { right: 9vw; top: 13vh; width: 120px; height: 200px; }
.deco-right span { background: repeating-linear-gradient(45deg, transparent 0 10px, var(--olive) 11px 12.5px); }

.module-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px 18px;
  width: min(1200px, calc(100% - 6vw));
  margin: 72px auto;
  align-items: stretch;
}

.concept, .hangul-block {
  position: relative;
  min-height: 280px;
  padding: clamp(1.35rem, 3vw, 2.4rem);
  border: 3px solid var(--block-accent, var(--coral));
  background-color: var(--block-bg, var(--chalk));
  overflow: hidden;
  transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.concept::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image: radial-gradient(circle, var(--block-accent) 0 3px, transparent 4px);
  background-size: 16px 16px;
  transform: translate(0, 0);
  transition: transform 300ms ease;
}

.concept::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 28px solid var(--block-accent);
  border-left: 28px solid transparent;
}

.concept:hover {
  border-color: color-mix(in srgb, var(--block-accent) 100%, var(--ink));
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--block-accent) 30%, transparent);
}

.concept:hover::before { transform: translate(8px, 8px); }

.concept > * { position: relative; z-index: 1; }

.concept h2, .assembly-intro h2 {
  max-width: 820px;
  color: var(--ink);
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  font-weight: 800;
  line-height: 0.98;
}

.concept p {
  max-width: 660px;
  margin-top: 1.2rem;
  color: var(--ink);
}

.concept.dark { border-radius: 0 28px 0 28px; }
.concept.dark .label, .concept.dark p { color: var(--chalk); }
.concept.dark h2 { color: var(--chalk); }
.concept.dark::before { background-image: radial-gradient(circle, var(--stone) 0 1.5px, transparent 2px); opacity: 0.38; }

.governance { border-radius: 16px; grid-column: span 5; }
.electoral { border-radius: 0; grid-column: span 4; margin-top: 40px; }
.civic { border-radius: 24px 0 24px 0; grid-column: span 6; margin-top: 12px; }
.block-wide { grid-column: span 7; }
.block-tall { min-height: 430px; }

.intro-grid .governance { grid-column: 1 / span 7; }
.intro-grid .hangul-block { grid-column: 9 / span 2; }
.intro-grid .electoral { grid-column: 8 / span 5; }
.intro-grid .civic { grid-column: 2 / span 8; }
.mechanics-grid .governance { grid-column: 1 / span 4; }
.mechanics-grid .electoral { grid-column: 6 / span 4; }
.mechanics-grid .hangul-block { grid-column: 11 / span 2; }
.mechanics-grid .civic { grid-column: 4 / span 8; }
.systems-grid .dark { grid-column: 1 / span 8; }
.systems-grid .hangul-block { grid-column: 10 / span 2; }
.systems-grid .governance { grid-column: 2 / span 5; }
.systems-grid .civic { grid-column: 8 / span 5; }

.hangul-block {
  --block-accent: #d4726a;
  display: grid;
  place-items: center;
  min-height: 140px;
  border-color: var(--teal);
  background:
    radial-gradient(circle at 20% 20%, rgba(184, 169, 201, 0.32) 0 8px, transparent 9px),
    radial-gradient(circle at 70% 64%, rgba(106, 155, 158, 0.28) 0 10px, transparent 11px),
    var(--chalk);
}

.hangul-block span { color: rgba(212, 114, 106, 0.2); font-size: 5rem; font-weight: 800; }
.hangul-block.lavender { border-color: var(--lavender); }
.hangul-block.lavender span { color: rgba(184, 169, 201, 0.3); }
.hangul-block.olive { border-color: var(--olive); }
.hangul-block.olive span { color: rgba(139, 154, 107, 0.25); }

.mini-illustration {
  width: 150px;
  height: 90px;
  margin-top: 28px;
  border: 2px solid var(--block-accent);
  background: var(--chalk);
  overflow: hidden;
}

.dark .mini-illustration { background: var(--ink); }
.pillars, .files { display: flex; align-items: end; gap: 14px; padding: 14px; background-image: repeating-linear-gradient(45deg, transparent 0 10px, rgba(139,154,107,.35) 11px 12px); }
.pillars i, .files i { flex: 1; height: var(--h, 52px); background: var(--block-accent); }
.pillars i:nth-child(2), .files i:nth-child(2) { --h: 36px; background: var(--mustard); }
.pillars i:nth-child(3), .files i:nth-child(3) { --h: 64px; background: var(--teal); }
.ballot { padding: 13px; display: grid; gap: 8px; background-image: radial-gradient(circle, var(--stone) 0 1.5px, transparent 2px); background-size: 16px 16px; }
.ballot i { height: 8px; border: 2px solid var(--teal); }
.ballot i:nth-child(2) { width: 70%; background: var(--teal); }
.shield { display: grid; place-items: center; }
.shield i { width: 54px; height: 64px; background: var(--olive); clip-path: polygon(50% 0, 92% 18%, 82% 76%, 50% 100%, 18% 76%, 8% 18%); }
.balance { position: relative; }
.balance i:nth-child(1) { position: absolute; left: 69px; top: 12px; width: 8px; height: 64px; background: var(--coral); }
.balance i:nth-child(2) { position: absolute; left: 34px; top: 30px; width: 80px; height: 4px; background: var(--ink); transform: rotate(-8deg); }
.balance i:nth-child(3) { position: absolute; left: 26px; top: 50px; width: 96px; height: 26px; border-left: 22px solid var(--mustard); border-right: 22px solid var(--teal); }
.map { position: relative; background: repeating-linear-gradient(45deg, transparent 0 10px, rgba(139,154,107,.42) 10px 12px); }
.map i { position: absolute; border: 3px solid var(--teal); }
.map i:nth-child(1) { inset: 12px 74px 42px 14px; }.map i:nth-child(2) { inset: 34px 36px 12px 52px; }.map i:nth-child(3) { inset: 14px 12px 44px 92px; }
.network, .coalition { position: relative; background-image: radial-gradient(circle, var(--mustard) 0 4px, transparent 5px); background-size: 38px 30px; }
.network i, .coalition i { position: absolute; width: 28px; height: 28px; background: var(--block-accent); border-radius: 50%; }
.network i:nth-child(1) { left: 20px; top: 18px; }.network i:nth-child(2) { left: 78px; top: 30px; }.network i:nth-child(3) { left: 44px; top: 58px; }.network i:nth-child(4) { left: 114px; top: 55px; }
.coalition i { border-radius: 0; }.coalition i:nth-child(1) { left: 22px; top: 22px; background: var(--teal); }.coalition i:nth-child(2) { left: 58px; top: 38px; background: var(--lavender); }.coalition i:nth-child(3) { left: 94px; top: 25px; background: var(--mustard); }
.law { display: grid; place-items: center; position: relative; }
.law i:first-child { width: 84px; height: 12px; background: var(--olive); }.law i:last-child { position: absolute; width: 42px; height: 58px; border: 6px solid var(--olive); border-top: 0; }

.pattern-strip {
  height: 64px;
  width: 100%;
  overflow: hidden;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  background-color: var(--chalk);
  background-size: auto;
  will-change: background-position;
}
.strip-zigzag { background-image: url("data:image/svg+xml,%3Csvg width='48' height='24' viewBox='0 0 48 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 12 L12 0 L24 12 L36 24 L48 12' fill='none' stroke='%23d4726a' stroke-width='2'/%3E%3C/svg%3E"); }
.strip-confetti { background-color: var(--lavender); background-image: radial-gradient(circle at 18px 28px, #c9a84c 0 4px, transparent 5px), radial-gradient(circle at 66px 54px, #6a9b9e 0 7px, transparent 8px), radial-gradient(circle at 126px 20px, #f0ebe3 0 5px, transparent 6px); background-size: 160px 92px; }
.strip-hatch { background-image: repeating-linear-gradient(45deg, transparent 0 10px, var(--olive) 11px 12.5px); }

.assembly-section {
  min-height: 86vh;
  padding: 8vw 5vw;
  background: var(--ink);
  color: var(--chalk);
}
.assembly-intro { width: min(1000px, 100%); margin: 0 auto 42px; }
.assembly-intro h2 { color: var(--chalk); }
.assembly-grid {
  width: min(720px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-auto-rows: 100px;
  gap: 16px 40px;
  justify-content: center;
}
.assembly-block {
  display: grid;
  place-items: center;
  border: 3px solid var(--coral);
  background: var(--chalk);
}
.assembly-block:nth-child(2n) { margin-top: 20px; border-color: var(--teal); border-radius: 16px; }
.assembly-block:nth-child(3n) { margin-left: 14px; border-color: var(--olive); }
.icon { display: block; position: relative; width: 54px; height: 54px; }
.unity { border-radius: 50%; background: var(--mustard); }
.hierarchy { clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--coral); }
.institution { border: 10px solid var(--teal); }
.coalition-icon::before, .coalition-icon::after, .coalition-icon { background: var(--lavender); }
.coalition-icon::before, .coalition-icon::after { content: ""; position: absolute; width: 36px; height: 36px; }
.coalition-icon::before { left: -10px; top: 12px; background: var(--teal); }.coalition-icon::after { right: -10px; bottom: 8px; background: var(--mustard); }
.debate { border-left: 22px solid var(--olive); border-right: 22px solid var(--coral); }
.ballot-icon { background: repeating-linear-gradient(0deg, var(--teal) 0 5px, transparent 6px 14px); border: 4px solid var(--ink); }
.rights-icon { clip-path: polygon(50% 0, 92% 18%, 82% 76%, 50% 100%, 18% 76%, 8% 18%); background: var(--olive); }
.law-icon { border-bottom: 14px solid var(--ink); border-left: 14px solid transparent; border-right: 14px solid transparent; }

.reveal {
  opacity: 0;
  transition: opacity var(--slide-duration) cubic-bezier(0.22, 1, 0.36, 1), transform var(--slide-duration) cubic-bezier(0.22, 1, 0.36, 1);
}
.from-left { transform: translateX(calc(var(--slide-distance) * -1)); }
.from-right { transform: translateX(var(--slide-distance)); }
.from-bottom { transform: translateY(var(--slide-distance)); }
.reveal.is-visible { opacity: 1; transform: translate(0, 0); }
.hero .deco-block { transition-delay: 200ms; }
.assembly-block:nth-child(1) { transition-delay: 0ms; }.assembly-block:nth-child(2) { transition-delay: 50ms; }.assembly-block:nth-child(3) { transition-delay: 100ms; }.assembly-block:nth-child(4) { transition-delay: 150ms; }.assembly-block:nth-child(5) { transition-delay: 200ms; }.assembly-block:nth-child(6) { transition-delay: 250ms; }.assembly-block:nth-child(7) { transition-delay: 300ms; }.assembly-block:nth-child(8) { transition-delay: 350ms; }

@media (max-width: 768px) {
  .hero { padding: 6vw; }
  .hero-card { margin-left: 0; box-shadow: 10px 10px 0 rgba(212, 114, 106, 0.28); }
  .deco-block { display: none; }
  .module-grid { grid-template-columns: 1fr; width: calc(100% - 16px); gap: 8px; margin: 36px auto; }
  .concept, .hangul-block, .intro-grid .governance, .intro-grid .hangul-block, .intro-grid .electoral, .intro-grid .civic, .mechanics-grid .governance, .mechanics-grid .electoral, .mechanics-grid .hangul-block, .mechanics-grid .civic, .systems-grid .dark, .systems-grid .hangul-block, .systems-grid .governance, .systems-grid .civic { grid-column: 1; margin-top: 0; border-width: 2px; }
  .pattern-strip { height: 40px; }
  .assembly-grid { grid-template-columns: repeat(2, 100px); gap: 16px 28px; }
}