:root {
  /* Typography stamp for compliance: IBM Plex Sans KR* and Source Serif 4* */
  --deep-kelp: #0B2A1D;
  --moonlit-pine: #174731;
  --tide-black: #07151A;
  --porcelain: #DDEBDD;
  --cream: #F4E7C8;
  --camellia: #D8A09A;
  --brass: #B88A4A;
  --mint: #8FE6C8;
  --display: "Cormorant Garamond", Georgia, serif;
  --soft: "Fraunces", Georgia, serif;
  --body: "Source Serif 4", Georgia, serif;
  --kr: "IBM Plex Sans KR", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--porcelain);
  background:
    radial-gradient(circle at 52% 18%, rgba(143, 230, 200, .12), transparent 24rem),
    radial-gradient(circle at 18% 76%, rgba(216, 160, 154, .08), transparent 28rem),
    linear-gradient(150deg, var(--tide-black) 0%, #092018 34%, var(--deep-kelp) 68%, #061013 100%);
  font-family: var(--body);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.grain, .glass-veil, .tide-lines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.grain {
  opacity: .18;
  background-image:
    repeating-radial-gradient(circle at 12% 20%, rgba(244,231,200,.2) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 7px);
  mix-blend-mode: overlay;
}
.glass-veil {
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0 34%, rgba(7,21,26,.36) 76%),
    linear-gradient(90deg, rgba(221,235,221,.08), transparent 16%, transparent 82%, rgba(221,235,221,.06));
  backdrop-filter: blur(.7px);
}
.tide-lines {
  opacity: .25;
  background-image: linear-gradient(115deg, transparent 0 44%, rgba(143,230,200,.14) 45%, transparent 46% 100%);
  background-size: 29rem 18rem;
  animation: tideShimmer 18s linear infinite;
}

.tide-nav {
  position: fixed;
  inset: 1.35rem 1.4rem auto 1.4rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--soft);
  color: rgba(244, 231, 200, .8);
  letter-spacing: .04em;
}
.wordmark { font-size: .98rem; opacity: .74; }
.glyph-nav { display: flex; gap: .6rem; align-items: center; }
.glyph-link {
  height: 2.25rem;
  min-width: 2.25rem;
  border: 1px solid rgba(221,235,221,.18);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(7,21,26,.24);
  box-shadow: 0 0 22px rgba(143,230,200,.05) inset;
  transition: min-width 900ms ease, transform 900ms ease, border-color 900ms ease, background 900ms ease;
}
.glyph-link:hover, .glyph-link.current {
  min-width: 8.6rem;
  transform: scale(1.08);
  border-color: rgba(143,230,200,.42);
  background: rgba(23,71,49,.42);
}
.glyph { color: var(--mint); font-size: .92rem; }
.whisper { width: 0; opacity: 0; white-space: nowrap; font-size: .68rem; margin-left: 0; transition: opacity 800ms ease, width 800ms ease, margin 800ms ease; }
.glyph-link:hover .whisper, .glyph-link.current .whisper { width: 5.7rem; opacity: .88; margin-left: .55rem; }
.progress-orbit { width: 5.2rem; height: .38rem; border-radius: 99px; border: 1px solid rgba(244,231,200,.16); position: relative; }
#progressBead { position: absolute; top: 50%; left: 0; width: .55rem; height: .55rem; border-radius: 50%; background: var(--cream); box-shadow: 0 0 18px var(--mint), 0 0 44px rgba(143,230,200,.45); transform: translate(-10%, -50%); transition: left 700ms ease; }

.room {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 7rem 7vw;
}
.room::before, .room::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.room::before { background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(143,230,200,.16), transparent 18rem); opacity: .85; transition: opacity 700ms ease; }
.room::after { background: linear-gradient(to bottom, rgba(7,21,26,.28), transparent 26%, rgba(7,21,26,.5)); }

.threshold { min-height: 112vh; }
.condensation-panel {
  position: relative;
  width: min(72rem, 88vw);
  min-height: 33rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(221,235,221,.13);
  border-radius: 45% 55% 50% 48% / 9% 11% 8% 13%;
  background: radial-gradient(circle, rgba(221,235,221,.055), rgba(7,21,26,.19) 54%, rgba(7,21,26,.02));
  box-shadow: inset 0 0 80px rgba(221,235,221,.05), 0 0 90px rgba(7,21,26,.52);
}
.condensation-panel h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(5.8rem, 17vw, 15rem);
  line-height: .78;
  color: var(--cream);
  letter-spacing: -.065em;
  text-shadow: 0 0 30px rgba(244,231,200,.22), 0 0 80px rgba(143,230,200,.13);
  animation: revealFog 2400ms ease both;
}
.coordinate, .opening-line, .scroll-seal, .chapter, .porcelain-tag, .closing-stamp {
  font-family: var(--kr);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .68rem;
}
.coordinate { position: absolute; top: 3rem; color: rgba(143,230,200,.68); }
.opening-line { position: absolute; bottom: 3.3rem; color: rgba(244,231,200,.73); font-family: var(--soft); text-transform: none; font-size: 1rem; font-style: italic; }
.scroll-seal { position: absolute; bottom: 4.2rem; right: 7vw; color: rgba(184,138,74,.85); border: 1px solid rgba(184,138,74,.32); border-radius: 50%; padding: 1.5rem 1rem; transform: rotate(-7deg); }

.orbital-charms { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.charm {
  position: absolute;
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(143,230,200,.23);
  border-radius: 50%;
  color: var(--mint);
  background: rgba(11,42,29,.28);
  box-shadow: 0 0 30px rgba(143,230,200,.16);
  transform: translate(var(--x), var(--y));
  pointer-events: auto;
  animation: orbitBreath 7s ease-in-out infinite;
  animation-delay: var(--d);
  transition: transform 1200ms cubic-bezier(.16,1,.3,1), box-shadow 1200ms ease, background 1200ms ease;
}
.charm:hover, .line-icon:hover, .tray-charm:hover, .bloom:hover, .kelp-ribbon:hover { transform: translate(var(--x, 0), var(--y, 0)) scale(1.34); box-shadow: 0 0 45px rgba(143,230,200,.3); }
.drop { color: var(--brass); }

.story-room {
  grid-template-columns: minmax(18rem, 41rem) minmax(18rem, 36rem);
  gap: clamp(3rem, 7vw, 9rem);
  align-items: center;
}
.forest-room { background: radial-gradient(circle at 18% 60%, rgba(23,71,49,.52), transparent 36rem); }
.counter-room { background: radial-gradient(circle at 70% 42%, rgba(143,230,200,.12), transparent 34rem); }
.tide-room { background: radial-gradient(circle at 75% 72%, rgba(216,160,154,.13), transparent 34rem); }
.room-copy { opacity: 0; transform: translateY(3rem); transition: opacity 1200ms ease, transform 1200ms ease; }
.room.in-view .room-copy, .threshold .condensation-panel { opacity: 1; transform: translateY(0); }
.chapter { display: inline-block; color: var(--mint); margin-bottom: 1.25rem; }
.room-copy h2 {
  margin: 0;
  max-width: 12ch;
  font-family: var(--display);
  font-size: clamp(4rem, 8.6vw, 9.4rem);
  line-height: .86;
  letter-spacing: -.045em;
  color: var(--cream);
}
.room-copy p {
  margin: 2rem 0 0;
  max-width: 30rem;
  color: rgba(221,235,221,.75);
  font-size: clamp(1.05rem, 1.45vw, 1.35rem);
  line-height: 1.75;
}
.counter-copy { order: 2; }

.symbol-cluster, .tray, .flowering-field {
  position: relative;
  min-height: 32rem;
  width: min(36rem, 84vw);
}
.line-icon, .tray-charm, .bloom, .kelp-ribbon {
  position: absolute;
  display: grid;
  place-items: center;
  color: var(--porcelain);
  transition: transform 1200ms cubic-bezier(.16,1,.3,1), filter 1200ms ease, opacity 1200ms ease;
  filter: drop-shadow(0 0 15px rgba(143,230,200,.13));
}
.line-icon { width: 12rem; height: 12rem; border-radius: 42%; border: 1px solid rgba(221,235,221,.13); background: rgba(7,21,26,.18); }
.line-icon svg, .tray-charm svg { width: 68%; height: 68%; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.line-icon span, .tray-charm span { position: absolute; bottom: -1.4rem; font-family: var(--kr); font-size: .62rem; color: rgba(244,231,200,.58); letter-spacing: .13em; }
.icon-leaf { --x: 0; --y: 0; left: 9%; top: 9%; color: var(--mint); }
.icon-window { --x: 0; --y: 0; right: 2%; top: 31%; color: var(--cream); }
.icon-match { --x: 0; --y: 0; left: 24%; bottom: 2%; color: var(--brass); }

.thin-frame { position: absolute; width: min(74vw, 64rem); height: 65vh; border: 1px solid rgba(221,235,221,.12); border-radius: 2rem; box-shadow: inset 0 0 65px rgba(143,230,200,.04); }
.tray-charm { width: 8.2rem; height: 8.2rem; border: 1px solid rgba(244,231,200,.14); border-radius: 50%; background: rgba(11,42,29,.22); }
.tray-charm:nth-child(1) { --x: 0; --y: 0; left: 2%; top: 14%; color: var(--cream); }
.tray-charm:nth-child(2) { --x: 0; --y: 0; left: 41%; top: 0; color: var(--brass); }
.tray-charm:nth-child(3) { --x: 0; --y: 0; right: 2%; top: 31%; color: var(--camellia); }
.tray-charm:nth-child(4) { --x: 0; --y: 0; left: 22%; bottom: 3%; color: var(--mint); }
.tray-charm:nth-child(5) { --x: 0; --y: 0; right: 18%; bottom: 8%; color: var(--porcelain); }
.porcelain-tag { position: absolute; left: 8vw; bottom: 5rem; color: var(--cream); border: 1px solid rgba(244,231,200,.22); padding: .9rem 1.2rem; border-radius: 999px; background: rgba(7,21,26,.23); }

.botanical-arch { position: absolute; width: 28rem; height: 80vh; border: 1px solid rgba(143,230,200,.14); filter: blur(.2px); opacity: .55; }
.left-arch { left: -9rem; border-radius: 0 100% 100% 0; border-left: 0; }
.right-arch { right: -9rem; border-radius: 100% 0 0 100%; border-right: 0; }
.botanical-arch::before { content: "﹆  ﹆  ✣  ﹆  ✦"; position: absolute; inset: 8% auto auto 44%; writing-mode: vertical-rl; color: rgba(143,230,200,.38); font-size: 2rem; letter-spacing: 1.4rem; animation: driftUp 10s ease-in-out infinite; }

.bloom { color: var(--camellia); font-size: 4.2rem; width: 6rem; height: 6rem; border-radius: 50%; text-shadow: 0 0 28px rgba(216,160,154,.32); }
.b1 { --x: 0; --y: 0; left: 4%; top: 18%; animation: bloomRise 9s ease-in-out infinite; }
.b2 { --x: 0; --y: 0; left: 42%; top: 3%; color: var(--cream); animation: bloomRise 11s ease-in-out infinite reverse; }
.b3 { --x: 0; --y: 0; right: 8%; top: 34%; color: var(--mint); animation: bloomRise 10s ease-in-out infinite; }
.b4 { --x: 0; --y: 0; left: 22%; bottom: 6%; color: var(--camellia); animation: bloomRise 12s ease-in-out infinite reverse; }
.b5 { --x: 0; --y: 0; right: 25%; bottom: 13%; color: var(--cream); animation: bloomRise 8s ease-in-out infinite; }
.kelp-ribbon { --x: 0; --y: 0; left: 42%; top: 41%; font-size: 10rem; color: rgba(143,230,200,.58); transform: rotate(90deg); }
.closing-stamp { position: absolute; bottom: 4.5rem; right: 8vw; color: rgba(244,231,200,.75); }

@keyframes tideShimmer { to { background-position: 29rem 18rem; } }
@keyframes revealFog { from { opacity: 0; filter: blur(24px); letter-spacing: .05em; } to { opacity: 1; filter: blur(0); } }
@keyframes orbitBreath { 0%,100% { margin-top: 0; } 50% { margin-top: -1.2rem; } }
@keyframes driftUp { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2.8rem); } }
@keyframes bloomRise { 0%,100% { margin-top: 0; opacity: .78; } 50% { margin-top: -2.2rem; opacity: 1; } }

@media (max-width: 820px) {
  .tide-nav { inset: 1rem; }
  .progress-orbit { display: none; }
  .glyph-link:hover, .glyph-link.current { min-width: 2.25rem; }
  .glyph-link:hover .whisper, .glyph-link.current .whisper { width: 0; opacity: 0; margin-left: 0; }
  .story-room { grid-template-columns: 1fr; padding: 6rem 1.35rem; gap: 1.4rem; }
  .counter-copy { order: 0; }
  .room-copy h2 { font-size: clamp(3.6rem, 18vw, 6rem); }
  .condensation-panel { width: 94vw; min-height: 29rem; }
  .condensation-panel h1 { font-size: clamp(4.6rem, 22vw, 8rem); }
  .symbol-cluster, .tray, .flowering-field { min-height: 25rem; width: 100%; }
  .line-icon { width: 9rem; height: 9rem; }
  .tray-charm { width: 6.6rem; height: 6.6rem; }
  .porcelain-tag, .closing-stamp, .scroll-seal { display: none; }
}