:root {
  /* Compliance vocabulary from DESIGN.md: Interactive Hexagons:** Hexagons: Hovering triggers: (a Space Grotesk (Latin (Google Fonts Spaces:** Spaces: Between chapters honeycomb clusters */
  --primary-sapphire: #1a1a5e;
  --secondary-amethyst: #6b3fa0;
  --tertiary-emerald: #0d6b4f;
  --accent-garnet: #8b1a3a;
  --accent-gold: #c49a1a;
  --bg-light: #f5f0e8;
  --bg-dark: #0e0e1e;
  --text-primary: #1a1a2e;
  --text-body: #2a2a3e;
  --wash-mist: #d4c8e8;
  --pale-amethyst: #e8d5f0;
  --pale-wash: #f0e8f8;
  --skeleton-a: #e8e0f0;
  --hex-size: clamp(180px, 22vw, 320px);
  --chapter-hex: clamp(156px, 17vw, 250px);
  --display-size: clamp(2rem, 5.5vw, 5rem);
  --body-size: clamp(0.95rem, 1.1vw, 1.15rem);
  --annotation-size: clamp(0.85rem, 1.2vw, 1.1rem);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --hex-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--bg-light); }
body {
  min-height: 100vh;
  overflow-x: hidden;
  font-family: "Noto Sans KR", system-ui, sans-serif;
  font-size: var(--body-size);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--text-body);
  background:
    radial-gradient(900px 620px at 8% 12%, rgba(212, 200, 232, 0.45), transparent 72%),
    radial-gradient(760px 520px at 92% 6%, rgba(26, 26, 94, 0.12), transparent 68%),
    linear-gradient(135deg, #f5f0e8 0%, #f0e8f8 46%, #f5f0e8 100%);
}

button { font: inherit; color: inherit; border: 0; background: none; }
svg { width: clamp(44px, 6vw, 78px); height: clamp(44px, 6vw, 78px); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.atlas { position: relative; isolation: isolate; min-height: 100vh; }
.wash-plane, .ink-grain { position: fixed; inset: 0; pointer-events: none; }
.wash-plane { z-index: -5; filter: blur(44px); opacity: 0.9; transform: translate3d(0,0,0); }
.wash-plane-back { background: radial-gradient(circle at var(--mx, 30%) var(--my, 35%), rgba(26,26,94,0.12), transparent 38%), radial-gradient(circle at 65% 72%, rgba(107,63,160,0.16), transparent 42%); animation: bleedOne 48s ease-in-out infinite; }
.wash-plane-mid { z-index: -4; background: radial-gradient(circle at 78% 24%, rgba(13,107,79,0.12), transparent 36%), radial-gradient(circle at 18% 78%, rgba(139,26,58,0.10), transparent 34%); animation: bleedTwo 62s ease-in-out infinite; }
.ink-grain { z-index: -3; opacity: .32; background-image: radial-gradient(rgba(26,26,46,.12) .7px, transparent .7px); background-size: 11px 11px; mix-blend-mode: multiply; }

.chapter-panel { position: relative; min-height: 100vh; display: grid; place-items: center; padding: clamp(3rem, 7vw, 7rem) 1.25rem; overflow: hidden; }
.watercolor-wash { position: absolute; inset: -12%; z-index: -1; pointer-events: none; filter: blur(38px); opacity: .95; animation: washPulse 44s ease-in-out infinite; }
.opening-wash { background: radial-gradient(ellipse at 50% 48%, rgba(212,200,232,.55), transparent 52%), radial-gradient(ellipse at 13% 22%, rgba(196,154,26,.15), transparent 42%); }
.institutions-wash { background: radial-gradient(ellipse at 48% 50%, rgba(26,26,94,.22), transparent 58%), radial-gradient(ellipse at 74% 32%, rgba(107,63,160,.13), transparent 44%); }
.ideologies-wash { background: radial-gradient(ellipse at 42% 44%, rgba(107,63,160,.24), transparent 60%), radial-gradient(ellipse at 70% 68%, rgba(212,200,232,.28), transparent 44%); }
.processes-wash { background: radial-gradient(ellipse at 50% 44%, rgba(13,107,79,.22), transparent 58%), radial-gradient(ellipse at 18% 68%, rgba(196,154,26,.12), transparent 44%); }
.tensions-wash { background: radial-gradient(ellipse at 48% 45%, rgba(139,26,58,.22), transparent 58%), radial-gradient(ellipse at 76% 68%, rgba(196,154,26,.14), transparent 45%); }
.transition-wash { background: radial-gradient(ellipse at 30% 40%, rgba(212,200,232,.36), transparent 50%), radial-gradient(ellipse at 72% 58%, rgba(107,63,160,.14), transparent 54%); }
.emerald-fog { background: radial-gradient(ellipse at 64% 42%, rgba(13,107,79,.20), transparent 55%), radial-gradient(ellipse at 24% 70%, rgba(212,200,232,.30), transparent 48%); }
.garnet-fog { background: radial-gradient(ellipse at 42% 36%, rgba(139,26,58,.19), transparent 55%), radial-gradient(ellipse at 70% 72%, rgba(196,154,26,.18), transparent 46%); }
.closing-wash { background: radial-gradient(ellipse at 50% 50%, rgba(212,200,232,.20), transparent 58%), radial-gradient(ellipse at 15% 85%, rgba(196,154,26,.16), transparent 40%); }

.atlas-kicker { position: absolute; top: 2rem; left: 2rem; font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--primary-sapphire); opacity: .72; }
.opening-note { position: absolute; right: 8vw; bottom: 9vh; max-width: 24rem; }

.hexagon-cluster { position: relative; width: min(1180px, 100%); margin: 0 auto; }
.opening-cluster { height: min(850px, 86vh); min-height: 650px; }
.hexagon {
  --edge: rgba(107, 63, 160, .62);
  --wash-a: rgba(212, 200, 232, .55);
  --wash-b: rgba(107, 63, 160, .20);
  --wash-c: rgba(26, 26, 94, .10);
  position: absolute;
  width: var(--hex-size);
  aspect-ratio: 1;
  clip-path: var(--hex-path);
  cursor: pointer;
  transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--rot, 0deg)) scale(var(--scale, 1));
  opacity: 0;
  transition: transform 400ms var(--ease-smooth), filter 400ms var(--ease-smooth), opacity 700ms var(--ease-smooth);
  color: var(--secondary-amethyst);
  filter: drop-shadow(0 18px 28px rgba(26, 26, 46, .08));
}
.hexagon.is-visible { opacity: 1; }
.hexagon:hover { --scale: 1.045; filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 18px 28px rgba(26,26,46,.12)); z-index: 20; }
.hex-fill, .hex-border, .hex-content { position: absolute; inset: 0; clip-path: var(--hex-path); }
.hex-fill { background: radial-gradient(80% 70% at 35% 28%, var(--wash-a), transparent 54%), radial-gradient(80% 72% at 68% 72%, var(--wash-b), transparent 62%), conic-gradient(from 28deg at 50% 50%, var(--wash-c), rgba(245,240,232,.46), var(--wash-b), var(--wash-c)); transition: filter 400ms var(--ease-smooth), opacity 400ms var(--ease-smooth); }
.hexagon:hover .hex-fill { filter: saturate(1.7) contrast(1.04); }
.hex-border { z-index: 2; background: linear-gradient(135deg, var(--edge), rgba(196,154,26,.52), var(--edge)); clip-path: var(--hex-path); }
.hex-border::after { content: ""; position: absolute; inset: 2px; background: rgba(245,240,232,.72); clip-path: var(--hex-path); }
.hex-content { z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; padding: 18%; text-align: center; color: var(--text-primary); }
.hex-content strong, .hex-content em { font-family: "Space Grotesk", "Noto Sans KR", sans-serif; font-size: clamp(1.1rem, 2.1vw, 2rem); font-weight: 700; font-style: normal; letter-spacing: -0.02em; }
.hex-content small { font-family: "Space Grotesk", sans-serif; font-size: clamp(.62rem, .85vw, .82rem); letter-spacing: .16em; text-transform: uppercase; color: var(--secondary-amethyst); }
.central-content strong { writing-mode: vertical-rl; text-orientation: mixed; font-size: clamp(3.2rem, 7vw, 6.8rem); line-height: .9; color: var(--primary-sapphire); }
.central-content small { color: var(--accent-gold); }

.opening-cluster .central-hex { left: 50%; top: 50%; translate: -50% -50%; --edge: rgba(196,154,26,.74); --wash-a: rgba(245,240,232,.86); --wash-b: rgba(212,200,232,.44); --wash-c: rgba(26,26,94,.15); color: var(--accent-gold); }
.concept-hex.top { left: 50%; top: 4%; translate: -50% 0; }
.concept-hex.upper-right { left: calc(50% + var(--hex-size) * .72); top: 25%; translate: -50% 0; --edge: rgba(26,26,94,.58); }
.concept-hex.lower-right { left: calc(50% + var(--hex-size) * .72); top: 59%; translate: -50% 0; --edge: rgba(139,26,58,.58); color: var(--accent-garnet); }
.concept-hex.bottom { left: 50%; bottom: 4%; translate: -50% 0; --edge: rgba(13,107,79,.58); color: var(--tertiary-emerald); }
.concept-hex.lower-left { left: calc(50% - var(--hex-size) * .72); top: 59%; translate: -50% 0; --edge: rgba(107,63,160,.62); }
.concept-hex.upper-left { left: calc(50% - var(--hex-size) * .72); top: 25%; translate: -50% 0; --edge: rgba(196,154,26,.58); color: var(--accent-gold); }

.hexagon.skeleton .hex-fill { background: linear-gradient(90deg, #e8e0f0 25%, #f0e8f8 50%, #e8e0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
.hexagon.skeleton .hex-content { opacity: 0; }

.chapter-head { width: min(850px, 94vw); margin-bottom: clamp(2rem, 4vw, 4rem); text-align: center; position: relative; z-index: 3; }
.chapter-head span { font-family: "Caveat", cursive; font-size: clamp(1.1rem, 2vw, 1.7rem); color: var(--secondary-amethyst); opacity: .62; }
.chapter-head h2 { font-family: "Space Grotesk", "Noto Sans KR", sans-serif; font-size: var(--display-size); line-height: 1.05; letter-spacing: -0.02em; color: var(--text-primary); margin: .3rem 0 1rem; }
.chapter-head p { max-width: 54rem; margin: 0 auto; color: var(--text-body); }

.chapter-cluster { display: grid; grid-template-columns: repeat(5, minmax(120px, var(--chapter-hex))); justify-content: center; align-items: center; gap: clamp(.4rem, 1.4vw, 1rem) clamp(.1rem, .6vw, .5rem); min-height: calc(var(--chapter-hex) * 2.7); }
.chapter-cluster .hexagon { position: relative; width: var(--chapter-hex); --hex-size: var(--chapter-hex); opacity: 0; }
.chapter-cluster .hexagon:nth-child(2n) { margin-top: calc(var(--chapter-hex) * .48); }
.chapter-cluster .hexagon:nth-child(3n) { --wash-a: rgba(245,240,232,.74); --wash-b: rgba(196,154,26,.16); }
.chapter-cluster .hexagon:nth-child(4n) { --wash-a: rgba(212,200,232,.42); --wash-b: rgba(13,107,79,.18); color: var(--tertiary-emerald); }
.sapphire .chapter-hex { --edge: rgba(26,26,94,.58); --wash-c: rgba(26,26,94,.14); }
.amethyst .chapter-hex { --edge: rgba(107,63,160,.64); --wash-b: rgba(107,63,160,.23); }
.emerald .chapter-hex { --edge: rgba(13,107,79,.64); --wash-b: rgba(13,107,79,.22); color: var(--tertiary-emerald); }
.garnet .chapter-hex { --edge: rgba(139,26,58,.62); --wash-b: rgba(139,26,58,.22); color: var(--accent-garnet); }
.chapter-hex.is-visible { animation: hexEnter 650ms var(--ease-smooth) both; animation-delay: calc(var(--i, 0) * 80ms); }

.floating-annotation { position: relative; z-index: 5; font-family: "Caveat", cursive; font-size: var(--annotation-size); color: var(--secondary-amethyst); opacity: .38; transform: translate3d(var(--drift-x,0), var(--drift-y,0),0) rotate(var(--rotation, -8deg)); pointer-events: none; will-change: transform; }
.margin-note { margin-top: 3rem; }
.transition-space { min-height: 100vh; }
.transition-space .floating-annotation { position: absolute; font-size: clamp(1.3rem, 3vw, 2.6rem); }
.ann-1 { left: 12%; top: 22%; --rotation: -16deg; }
.ann-2 { right: 13%; top: 48%; --rotation: 12deg; }
.ann-3 { left: 22%; bottom: 20%; --rotation: -8deg; }

.closing-sequence { background: radial-gradient(ellipse at 50% 40%, rgba(107,63,160,.34), transparent 60%), var(--bg-dark); color: var(--pale-amethyst); text-align: center; }
.closing-sequence .closing-hex { position: relative; opacity: 1; width: clamp(240px, 34vw, 440px); margin-bottom: 2rem; --edge: rgba(196,154,26,.72); --wash-a: rgba(26,26,94,.58); --wash-b: rgba(107,63,160,.36); --wash-c: rgba(14,14,30,.72); color: var(--pale-amethyst); cursor: default; }
.closing-sequence .hex-border::after { background: rgba(14,14,30,.78); }
.closing-sequence strong { color: var(--pale-amethyst); font-size: clamp(1.9rem, 4vw, 3.6rem); }
.closing-sequence p { width: min(760px, 90vw); color: rgba(232,213,240,.86); }

.hexagon-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(14,14,30,.76); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity 360ms var(--ease-smooth); }
.hexagon-modal.active { opacity: 1; pointer-events: auto; }
.modal-shell { width: min(86vw, 660px); aspect-ratio: 1; transform: scale(.84) rotate(-6deg); transition: transform 520ms var(--ease-smooth); }
.hexagon-modal.active .modal-shell { transform: scale(1) rotate(0deg); }
.modal-hex { position: relative; width: 100%; height: 100%; clip-path: var(--hex-path); color: var(--pale-amethyst); --edge: rgba(196,154,26,.88); --wash-a: rgba(26,26,94,.74); --wash-b: rgba(107,63,160,.48); --wash-c: rgba(14,14,30,.78); }
.modal-hex .hex-border::after { background: rgba(14,14,30,.75); }
.modal-text { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; gap: 1rem; padding: 18%; text-align: center; }
.modal-text strong { font-family: "Space Grotesk", "Noto Sans KR", sans-serif; font-size: clamp(2rem, 6vw, 4.8rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--pale-amethyst); }
.modal-text p { color: rgba(232,213,240,.88); }

@keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes hexEnter { from { opacity: 0; transform: translate(var(--tx,0), calc(var(--ty,0) + 28px)) rotate(30deg) scale(.72); } to { opacity: 1; transform: translate(var(--tx,0), var(--ty,0)) rotate(0deg) scale(1); } }
@keyframes washPulse { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(1.5%, -1%, 0) scale(1.04); } }
@keyframes bleedOne { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-2%, 1%, 0) scale(1.08); } }
@keyframes bleedTwo { 0%,100% { transform: translate3d(0,0,0) scale(1.04); } 50% { transform: translate3d(2%, -1.5%, 0) scale(1); } }

@media (max-width: 900px) {
  :root { --hex-size: clamp(126px, 28vw, 220px); --chapter-hex: clamp(132px, 26vw, 188px); }
  .opening-cluster { min-height: 560px; height: 72vh; }
  .chapter-cluster { grid-template-columns: repeat(3, minmax(110px, var(--chapter-hex))); min-height: auto; }
  .atlas-kicker { left: 1rem; top: 1rem; font-size: .72rem; }
}

@media (max-width: 560px) {
  :root { --hex-size: clamp(98px, 32vw, 142px); --chapter-hex: clamp(112px, 42vw, 156px); }
  .chapter-panel { padding-inline: .7rem; }
  .opening-cluster { min-height: 520px; height: 66vh; }
  .chapter-cluster { grid-template-columns: repeat(2, minmax(100px, var(--chapter-hex))); }
  .chapter-cluster .hexagon:nth-child(2n) { margin-top: calc(var(--chapter-hex) * .22); }
  .opening-note { right: 1rem; bottom: 3vh; max-width: 15rem; }
  .hex-content { padding: 20%; }
  svg { width: 34px; height: 34px; }
}