:root {
  /* Compliance vocabulary: IntersectionObserver IntersectionObserver [0 (Google Fonts — font names are declared locally with standard fallbacks, not fetched. */
  --muk-black: #0a0a0f;
  --ink-stone: #1a1a2e;
  --dusk-slate: #3d3d5c;
  --haze: #6b6b8a;
  --fog-silk: #b0b0c8;
  --hanji-white: #eeeef5;
  --ghost-white: #f8f8ff;
  --deep-indigo: #2d2d6b;
  --display: "Poiret One", "Josefin Sans", "Trebuchet MS", sans-serif;
  --secondary: "Josefin Sans", "Trebuchet MS", sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --space: "Space Grotesk", "Inter", Arial, sans-serif;
  --korean: "Noto Serif KR", "Apple SD Gothic Neo", "Malgun Gothic", serif;
}

* { box-sizing: border-box; }
html { background: var(--muk-black); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--muk-black);
  color: var(--ghost-white);
  overflow-x: hidden;
}

.glyph-nav {
  position: fixed;
  top: 24px;
  right: 28px;
  z-index: 30;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-family: var(--korean);
  font-size: 1.8rem;
  color: var(--ghost-white);
  border: 1px solid rgba(176,176,200,.28);
  background: rgba(10,10,15,.38);
  backdrop-filter: blur(12px);
  border-radius: 48% 52% 45% 55% / 55% 42% 58% 45%;
  animation: glyphBreathe 8s ease-in-out infinite alternate;
}

.site-shell { position: relative; }

.split-stage {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 55fr 45fr;
  isolation: isolate;
  overflow: hidden;
}

.panel {
  position: sticky;
  top: 0;
  min-height: 100vh;
  overflow: hidden;
}

.ink-panel {
  background:
    radial-gradient(circle at 12% 15%, rgba(45,45,107,.10), transparent 33%),
    linear-gradient(135deg, var(--hanji-white), #e7e7f0 58%, var(--fog-silk));
  color: var(--ink-stone);
}

.ink-panel::after {
  content: "";
  position: absolute;
  top: -8%;
  right: -58px;
  width: 116px;
  height: 116%;
  z-index: 5;
  background: linear-gradient(90deg, rgba(238,238,245,0), rgba(45,45,107,.14), rgba(10,10,15,.58));
  filter: blur(12px);
  mask-image: linear-gradient(to right, transparent 0%, black 28%, black 70%, transparent 100%);
  animation: boundaryPulse 9s ease-in-out infinite alternate;
}

.grid-panel {
  background: var(--muk-black);
  color: var(--ghost-white);
}

.grid-field {
  position: absolute;
  inset: 0;
  opacity: .82;
  background-image:
    linear-gradient(rgba(176,176,200,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(176,176,200,.12) 1px, transparent 1px),
    linear-gradient(rgba(107,107,138,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,107,138,.16) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 160px 160px, 160px 160px;
  animation: gridWake 2.4s ease-out both, gridDrift 28s linear infinite;
}

.grid-field.dense { background-size: 32px 32px, 32px 32px, 128px 128px, 128px 128px; }

.panel-inner {
  position: relative;
  z-index: 6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(36px, 7vw, 104px);
}

.ink-text { padding-right: clamp(76px, 11vw, 150px); }
.precision-layer { align-items: flex-start; gap: 24px; }

.kicker {
  margin: 0 0 24px;
  font-family: var(--space);
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: .72rem;
  color: var(--haze);
}

.grid-panel .kicker { color: var(--fog-silk); }

.panel-heading {
  max-width: 760px;
  margin: 0 0 32px;
  font-family: var(--secondary);
  font-size: clamp(1.8rem, 4.6vw, 4.8rem);
  line-height: .98;
  font-weight: 600;
  letter-spacing: .04em;
}

.narrative {
  max-width: 620px;
  margin: 0 0 24px;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.55vw, 1.3rem);
  line-height: 1.85;
  color: var(--dusk-slate);
}

.analysis {
  max-width: 560px;
  margin: 0;
  font-family: var(--space);
  font-size: clamp(.98rem, 1.28vw, 1.14rem);
  line-height: 1.6;
  color: var(--fog-silk);
}

.split-title {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  text-align: center;
  pointer-events: none;
  padding: 28px;
}

.split-title h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4rem, 12vw, 10rem);
  line-height: .92;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .15em;
  transform: translateX(.075em);
}

.soft-half {
  color: var(--ink-stone);
  text-shadow: 0 0 8px rgba(45,45,107,.35), 0 0 34px rgba(45,45,107,.25);
  filter: blur(.45px);
}

.sharp-half {
  color: var(--ghost-white);
  text-shadow: 0 0 1px var(--ghost-white), 0 0 18px rgba(176,176,200,.28);
}

.split-title p {
  position: absolute;
  bottom: 10vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 80vw);
  margin: 0;
  font-family: var(--space);
  font-size: .86rem;
  line-height: 1.8;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fog-silk);
}

.ink-blob {
  position: absolute;
  z-index: 1;
  border-radius: 40% 60% 55% 45% / 60% 40% 50% 55%;
  background: radial-gradient(ellipse, rgba(45,45,107,.18), rgba(45,45,107,.08) 42%, transparent 72%);
  filter: blur(84px);
  animation: morphBlob 22s ease-in-out infinite alternate;
}

.blob-one { width: 46vw; height: 44vw; left: -12vw; top: -8vw; animation-delay: -4s; }
.blob-two { width: 36vw; height: 32vw; right: 2vw; top: 24vh; opacity: .9; animation-duration: 18s; }
.blob-three { width: 34vw; height: 38vw; left: 14vw; bottom: -16vw; animation-duration: 25s; }
.blob-four { width: 24vw; height: 22vw; right: 14vw; bottom: 10vh; opacity: .78; animation-delay: -9s; }
.blob-five { width: 42vw; height: 40vw; left: 4vw; top: 18vh; animation-duration: 20s; }
.blob-six { width: 52vw; height: 46vw; left: -14vw; bottom: -18vw; animation-duration: 26s; }

.boundary {
  position: absolute;
  z-index: 8;
  top: 0;
  left: 55%;
  width: 80px;
  height: 100%;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(90deg, rgba(238,238,245,0), rgba(176,176,200,.18), rgba(10,10,15,0));
  filter: blur(10px);
  animation: boundaryPulse 7s ease-in-out infinite alternate;
}

.focus-item {
  opacity: .26;
  filter: blur(8px);
  transform: translateY(24px) scale(.99);
  transition: opacity .8s ease-out, filter .8s ease-out, transform .8s ease-out;
}

.focus-item.in-focus {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

.convergence {
  min-height: 100vh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 28px;
  padding: clamp(32px, 8vw, 120px);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.convergence::before {
  content: "";
  position: absolute;
  inset: -18%;
  background: radial-gradient(circle at 50% 50%, rgba(45,45,107,.22), transparent 58%);
  filter: blur(80px);
  animation: morphBlob 18s ease-in-out infinite alternate;
}

.convergence-ink { background: var(--hanji-white); color: var(--ink-stone); }
.convergence-grid, .convergence-final { background: var(--muk-black); color: var(--ghost-white); }

.korean-quote {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 1120px;
  font-family: var(--korean);
  font-size: clamp(2.6rem, 7vw, 7.5rem);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: .03em;
}

.convergence p {
  position: relative;
  z-index: 1;
  max-width: 740px;
  margin: 0;
  font-family: var(--space);
  color: var(--haze);
  line-height: 1.7;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.jamo-wall {
  display: grid;
  grid-template-columns: repeat(7, minmax(54px, 1fr));
  width: min(680px, 100%);
  gap: 12px;
}

.jamo-svg {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(176,176,200,.18);
  background: rgba(248,248,255,.018);
}

.jamo-svg path {
  fill: none;
  stroke: var(--fog-silk);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--path-length, 220);
  stroke-dashoffset: var(--path-length, 220);
  transition: stroke-dashoffset 1.2s ease-out, filter .5s ease-out 1.1s;
}

.jamo-svg.drawn path {
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 6px rgba(176,176,200,.3));
}

.organic-divider {
  display: flex;
  gap: 20px;
  margin-top: 42px;
}

.organic-divider span {
  width: 54px;
  height: 42px;
  background: rgba(45,45,107,.16);
  border: 1px solid rgba(61,61,92,.18);
  border-radius: 49% 51% 44% 56% / 54% 42% 58% 46%;
  animation: tinyStone 9s ease-in-out infinite alternate;
}
.organic-divider span:nth-child(2) { animation-delay: -2s; transform: scale(.82); }
.organic-divider span:nth-child(3) { animation-delay: -4s; transform: scale(1.12); }

.diagram-wrap { align-items: center; text-align: center; }
.block-diagram { width: min(520px, 90%); }
.block-diagram rect, .block-diagram line {
  fill: none;
  stroke: var(--haze);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.block-diagram text {
  fill: var(--fog-silk);
  font-family: var(--display);
  font-size: 30px;
  text-anchor: middle;
  dominant-baseline: middle;
  letter-spacing: .12em;
}
.block-diagram text:last-child { font-size: 18px; font-family: var(--space); text-transform: uppercase; }

.final-mark {
  font-family: var(--korean);
  font-size: clamp(4rem, 10vw, 9rem);
  color: var(--ghost-white);
  text-shadow: 0 0 28px rgba(176,176,200,.34);
}

@keyframes morphBlob {
  0% { border-radius: 40% 60% 55% 45% / 60% 40% 50% 55%; transform: scale(1) rotate(0deg); }
  33% { border-radius: 55% 45% 60% 40% / 45% 55% 40% 60%; transform: scale(1.05) rotate(2deg); }
  66% { border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%; transform: scale(.97) rotate(-1deg); }
  100% { border-radius: 60% 40% 45% 55% / 40% 60% 55% 45%; transform: scale(1.02) rotate(1deg); }
}

@keyframes boundaryPulse {
  from { filter: blur(8px); opacity: .55; transform: translateX(-54%) scaleX(.8); }
  to { filter: blur(20px); opacity: .95; transform: translateX(-46%) scaleX(1.35); }
}

@keyframes gridWake { from { opacity: 0; } to { opacity: .82; } }
@keyframes gridDrift { to { background-position: 40px 40px, 40px 40px, 160px 160px, 160px 160px; } }
@keyframes glyphBreathe { to { border-radius: 42% 58% 55% 45% / 45% 58% 42% 55%; transform: rotate(4deg); } }
@keyframes tinyStone { to { border-radius: 62% 38% 50% 50% / 46% 56% 44% 54%; transform: rotate(6deg) scale(1.03); } }

@media (max-width: 768px) {
  .split-stage { display: block; }
  .panel { position: relative; min-height: auto; }
  .ink-panel, .grid-panel { min-height: 100vh; }
  .panel-inner { min-height: 100vh; padding: 84px 28px; }
  .ink-text { padding-right: 28px; }
  .boundary { left: 0; top: 50%; width: 100%; height: 76px; transform: translateY(-50%); background: linear-gradient(180deg, rgba(238,238,245,0), rgba(176,176,200,.18), rgba(10,10,15,0)); }
  .ink-panel::after { right: auto; top: auto; left: 0; bottom: -50px; width: 100%; height: 100px; }
  .split-title { min-height: 100vh; }
  .split-title h1 { font-size: clamp(2.7rem, 13vw, 5rem); letter-spacing: .08em; }
  .soft-half { color: var(--ghost-white); }
  .jamo-wall { grid-template-columns: repeat(4, 1fr); }
  .korean-quote { font-size: clamp(2.2rem, 11vw, 4.6rem); }
  .glyph-nav { top: 14px; right: 14px; }
}