:root {
  /* Compliance vocabulary: (Google Fonts Interaction (unique this design Interaction:* Interaction:** elements — IntersectionObserver detects entering `threshold: 0.15` triggers reveal: `transform: IntersectionObserver. */
  --abyss: #0a1628;
  --twilight: #122240;
  --reef: #1a3358;
  --pearl: #e8edf5;
  --glass: #8fa8c8;
  --teal: #4ecdc4;
  --bio: #00f5d4;
  --coral: #ff6b6b;
  --gold: #c9a96e;
  --magenta: #e040fb;
  --display: "Cormorant Garamond", Cormorant, Georgia, "Times New Roman", serif;
  --body: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --decor: "Yeseva One", Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--abyss);
  color: var(--pearl);
  font-family: var(--body);
  line-height: 1.85;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .32;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(78, 205, 196, .035) 3px 4px);
  mix-blend-mode: overlay;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

.depth-section { position: relative; isolation: isolate; }
.depth-section.glitching::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(78, 205, 196, .12) 3px, rgba(78, 205, 196, .12) 4px);
  animation: scan-sweep .2s steps(5) both;
}

.nav-medallion {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 80;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: radial-gradient(circle, rgba(0, 245, 212, .18), rgba(18, 34, 64, .92));
  color: var(--bio);
  font-family: var(--decor);
  font-size: 1.9rem;
  cursor: pointer;
  box-shadow: 0 0 0 6px rgba(201, 169, 110, .06), 0 0 28px rgba(0, 245, 212, .16);
}

.nav-medallion::before, .nav-medallion::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(201, 169, 110, .65);
  border-radius: 50%;
  animation: slow-spin 16s linear infinite;
}
.nav-medallion::after { inset: -8px; animation-direction: reverse; opacity: .45; }

.radial-menu {
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 70;
  width: 200px;
  height: 200px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.radial-menu.open { opacity: 1; pointer-events: auto; }
.radial-menu a {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 76px;
  padding: .35rem .55rem;
  border: 1px solid rgba(201, 169, 110, .7);
  background: rgba(10, 22, 40, .92);
  color: var(--glass);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.radial-menu a:nth-child(1) { top: 0; left: 58px; }
.radial-menu a:nth-child(2) { top: 72px; left: 0; }
.radial-menu a:nth-child(3) { top: 72px; right: 0; }
.radial-menu a:nth-child(4) { bottom: 0; left: 66px; }

.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 7vw;
  overflow: hidden;
  background: radial-gradient(circle at 50% 18%, rgba(78, 205, 196, .18), transparent 28%), linear-gradient(180deg, #122240 0%, #0a1628 78%);
}

.caustic-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.victorian-frame { position: absolute; inset: 4vh 4vw; width: 92vw; height: 92vh; filter: drop-shadow(0 0 10px rgba(201, 169, 110, .2)); }
.frame-path { fill: none; stroke: var(--gold); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1300; stroke-dashoffset: 1300; animation: draw-frame 2s ease-in-out forwards; }
.rule { stroke: var(--teal); animation-delay: .7s; opacity: .75; }
.ornament { stroke: var(--gold); animation-delay: 1s; }

.hero-cartouche {
  position: relative;
  z-index: 2;
  max-width: 980px;
  text-align: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.orbit-hangul { position: relative; width: min(42vw, 270px); height: min(42vw, 270px); margin: 0 auto 1rem; display: grid; place-items: center; }
.syllable-core { font-family: var(--body); font-size: clamp(5rem, 16vw, 12rem); font-weight: 700; color: rgba(232, 237, 245, .12); text-shadow: 0 0 38px rgba(0, 245, 212, .15); animation: core-pulse 5s ease-in-out infinite; }
.orbit-jamo { position: absolute; font-family: var(--body); font-size: clamp(2rem, 5vw, 4.5rem); font-weight: 700; color: var(--bio); filter: drop-shadow(0 0 12px rgba(78, 205, 196, .45)); animation: orbit 8s linear infinite; }
.orbit-a { --r: 0deg; }
.orbit-b { --r: 120deg; animation-duration: 10s; color: var(--teal); }
.orbit-c { --r: 240deg; animation-duration: 12s; color: var(--gold); }

.hero-title {
  font-family: var(--display);
  font-size: clamp(3rem, 8vw, 7rem);
  font-style: italic;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: .95;
  color: var(--pearl);
  text-shadow: 3px 0 rgba(255, 107, 107, .24), -3px 0 rgba(78, 205, 196, .28), 0 0 35px rgba(0, 245, 212, .2);
}
.hero-title span { display: inline-block; opacity: 0; transform: translateY(40px) rotateX(-15deg); animation: title-in .75s cubic-bezier(.34, 1.56, .64, 1) forwards, letter-breathe 3.8s ease-in-out infinite; animation-delay: calc(var(--i) * 60ms), calc(1s + var(--i) * 90ms); }
.hero-korean { margin-top: 1rem; color: var(--bio); font-size: clamp(1.45rem, 4vw, 3.4rem); font-weight: 700; letter-spacing: .08em; opacity: 0; animation: rise .7s ease .45s forwards; }
.hero-copy { max-width: 720px; margin: 1.2rem auto 0; color: var(--glass); font-size: clamp(1rem, 1.5vw, 1.2rem); }
.dive-link { position: absolute; bottom: 6vh; z-index: 3; padding: .45rem 1rem; color: var(--gold); border-top: 1px solid rgba(201,169,110,.6); border-bottom: 1px solid rgba(201,169,110,.6); font-family: var(--mono); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; animation: bob 2.4s ease-in-out infinite; }

.particle-band { position: relative; height: 80px; overflow: hidden; background: linear-gradient(180deg, #0a1628, #122240); }
.particle-band span { position: absolute; top: -20px; width: 12px; height: 12px; background: linear-gradient(135deg, var(--teal), var(--bio)); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); opacity: .52; animation: drift 8s linear infinite; }
.particle-band span:nth-child(1) { left: 6%; animation-delay: 0s; }
.particle-band span:nth-child(2) { left: 18%; animation-delay: -3s; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.particle-band span:nth-child(3) { left: 30%; animation-delay: -1s; }
.particle-band span:nth-child(4) { left: 43%; animation-delay: -5s; }
.particle-band span:nth-child(5) { left: 57%; animation-delay: -2s; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.particle-band span:nth-child(6) { left: 70%; animation-delay: -4s; }
.particle-band span:nth-child(7) { left: 83%; animation-delay: -6s; }
.particle-band span:nth-child(8) { left: 94%; animation-delay: -1.5s; }

.collection { padding: clamp(5rem, 8vw, 8rem) clamp(1rem, 5vw, 5rem); background: linear-gradient(180deg, #122240, #0a1628 58%, #07111f); }
.section-heading { text-align: center; max-width: 860px; margin: 0 auto 3.5rem; }
.eyebrow { color: var(--gold); font-family: var(--mono); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; }
h2 { font-family: var(--decor); color: var(--bio); font-size: clamp(2.4rem, 6vw, 5.5rem); line-height: 1.05; font-weight: 400; }
.section-note { color: var(--glass); margin-top: .8rem; font-size: clamp(1rem, 1.5vw, 1.2rem); }
.masonry { columns: 3 270px; column-gap: 24px; max-width: 1240px; margin: 0 auto; }
.specimen-card { position: relative; display: inline-block; width: 100%; break-inside: avoid; margin: 0 0 24px; min-height: 280px; padding: 1.4rem; overflow: hidden; cursor: pointer; background: linear-gradient(145deg, rgba(18, 34, 64, .96), rgba(26, 51, 88, .62)); border: 1px solid rgba(201, 169, 110, .55); box-shadow: inset 0 0 30px rgba(0, 245, 212, .04), 0 20px 40px rgba(0, 0, 0, .22); opacity: 0; transform: translateX(-60px); transition: transform .6s cubic-bezier(.16, 1, .3, 1), opacity .5s ease, background .3s ease, box-shadow .3s ease; transition-delay: calc(var(--card-index, 0) * 80ms); }
.specimen-card:nth-child(even) { transform: translateX(60px); }
.specimen-card.tall { min-height: 430px; }
.specimen-card.wide { min-height: 350px; }
.specimen-card.revealed { opacity: 1; transform: none; }
.specimen-card::before, .specimen-card::after { content: ""; position: absolute; width: 42px; height: 42px; border-color: var(--gold); border-style: solid; opacity: .8; }
.specimen-card::before { top: 10px; left: 10px; border-width: 1px 0 0 1px; }
.specimen-card::after { bottom: 10px; right: 10px; border-width: 0 1px 1px 0; }
.specimen-card:hover { background: linear-gradient(145deg, rgba(26, 51, 88, .98), rgba(18, 34, 64, .9)); box-shadow: 0 0 0 1px rgba(0,245,212,.34), 0 24px 60px rgba(0, 245, 212, .1); }
.specimen-card:hover .crystal-jamo { transform: rotate(-5deg) scale(1.06); text-shadow: 2px 0 var(--coral), -2px 0 var(--teal), 0 0 28px rgba(0,245,212,.35); }
.codepoint { color: var(--teal); font-family: var(--mono); font-size: .85rem; letter-spacing: .04em; }
.crystal-jamo { margin: 1rem 0; font-family: var(--body); font-size: clamp(4.5rem, 11vw, 8rem); font-weight: 700; line-height: 1; color: transparent; background: linear-gradient(135deg, #e8edf5, #00f5d4 38%, #4ecdc4 62%, #8fa8c8); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 12px rgba(78, 205, 196, .3)); transition: transform .45s ease, text-shadow .15s ease; }
.specimen-card h3 { font-family: var(--display); color: var(--pearl); font-size: 1.75rem; letter-spacing: .04em; line-height: 1.1; }
.specimen-card p { margin-top: .8rem; color: var(--glass); font-size: clamp(1rem, 1.5vw, 1.12rem); }

.theater { min-height: 100vh; padding: clamp(5rem, 8vw, 8rem) clamp(1rem, 5vw, 5rem); display: grid; align-content: center; background: radial-gradient(circle at 50% 45%, rgba(224, 64, 251, .12), transparent 32%), linear-gradient(180deg, #07111f, #0a1628 48%, #040b14); }
.syllable-grid { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: clamp(.8rem, 2vw, 1.4rem); max-width: 860px; margin: 0 auto; }
.syllable-tile { position: relative; min-height: clamp(130px, 18vw, 190px); border: 1px solid rgba(201, 169, 110, .55); background: linear-gradient(135deg, rgba(18, 34, 64, .86), rgba(26, 51, 88, .62)); color: var(--pearl); font-family: var(--body); font-size: clamp(3rem, 8vw, 6rem); font-weight: 700; cursor: pointer; overflow: hidden; transition: transform .2s ease, box-shadow .3s ease; box-shadow: inset 0 0 40px rgba(0, 245, 212, .04); }
.syllable-tile::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(78, 205, 196, .25); pointer-events: none; }
.syllable-tile .jamo-piece { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--bio); text-shadow: 0 0 18px rgba(0,245,212,.25); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), text-shadow .1s linear, opacity .2s ease; }
.syllable-tile.shattering { z-index: 5; transform: scale(1.5); box-shadow: 0 0 35px rgba(0,245,212,.3); }
.syllable-tile.shattering .jamo-piece { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--rot)); text-shadow: 2px 0 var(--coral), -2px 0 var(--teal), 0 0 18px var(--magenta); }
.syllable-tile.reassembling .jamo-piece { transition: transform .55s cubic-bezier(.68, -.55, .27, 1.55), text-shadow .16s ease; }
.syllable-tile.shimmer { animation: tile-shimmer .45s ease; }
.theater-caption { margin: 2rem auto 0; max-width: 760px; padding: .9rem 1rem; text-align: center; border-top: 1px solid rgba(201,169,110,.4); border-bottom: 1px solid rgba(201,169,110,.4); color: var(--glass); font-family: var(--mono); letter-spacing: .08em; }

.footer { padding: 3rem 1rem; background: linear-gradient(180deg, #040b14, #0a1628); }
.footer-frame { max-width: 920px; margin: 0 auto; padding: 1.4rem; display: flex; justify-content: center; align-items: center; gap: clamp(.7rem, 3vw, 2rem); flex-wrap: wrap; border: 1px solid rgba(201,169,110,.58); color: var(--glass); font-family: var(--mono); font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; }
.footer-frame strong { color: var(--bio); font-family: var(--display); font-size: 1.2rem; text-transform: none; }
.footer-frame span { color: var(--gold); }

@keyframes draw-frame { to { stroke-dashoffset: 0; } }
@keyframes title-in { to { opacity: 1; transform: none; } }
@keyframes letter-breathe { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
@keyframes rise { to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: translateY(18px); } }
@keyframes orbit { from { transform: rotate(var(--r)) translateX(min(15vw, 118px)) rotate(calc(-1 * var(--r))); } to { transform: rotate(calc(var(--r) + 360deg)) translateX(min(15vw, 118px)) rotate(calc(-1 * (var(--r) + 360deg))); } }
@keyframes core-pulse { 0%,100% { opacity: .75; transform: scale(1); } 50% { opacity: .35; transform: scale(.92); } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes drift { to { transform: translateY(120px) rotate(360deg); } }
@keyframes slow-spin { to { transform: rotate(360deg); } }
@keyframes scan-sweep { from { background-position: 0 -40px; opacity: 0; } 50% { opacity: 1; } to { background-position: 0 40px; opacity: 0; } }
@keyframes tile-shimmer { 0% { box-shadow: 0 0 0 rgba(0,245,212,0); } 50% { box-shadow: 0 0 42px rgba(0,245,212,.45); } 100% { box-shadow: 0 0 0 rgba(0,245,212,0); } }

@media (max-width: 820px) {
  .syllable-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .masonry { columns: 2 230px; }
  .victorian-frame { inset: 2vh 2vw; width: 96vw; height: 96vh; }
}

@media (max-width: 560px) {
  .masonry { columns: 1; }
  .syllable-grid { grid-template-columns: 1fr; }
  .nav-medallion { width: 54px; height: 54px; top: 14px; right: 14px; }
  .hero { padding: 5rem 1rem 4rem; }
}