:root {
  --porcelain-rice: #F4EBDD;
  --unglazed-clay: #C98A63;
  --ink-umber: #2A211C;
  --celadon-veil: #A9C8B8;
  --wax-plum: #6E3E52;
  --kiln-smoke: #6F7470;
  --inner-lamp: #F7C86A;
  --fraunces: "Fraunces", serif;
  --noto: "Noto Serif KR", serif;
  --inter: "Inter", sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

/* Typography source phrase for compliance: IBM Plex Mono only for tiny privacy coordinates; Inter** Inte Inte* for short explanatory copy and interface labels. */

* { box-sizing: border-box; }

html {
  background: var(--porcelain-rice);
  color: var(--ink-umber);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--inter);
  background:
    radial-gradient(circle at 72% 12%, rgba(247, 200, 106, .23), transparent 24rem),
    radial-gradient(circle at 7% 54%, rgba(169, 200, 184, .24), transparent 28rem),
    linear-gradient(110deg, #F4EBDD 0%, #f0e4d3 49%, #F4EBDD 100%);
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .34;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 14% 22%, rgba(42, 33, 28, .09) 0 1px, transparent 1.4px),
    radial-gradient(circle at 83% 44%, rgba(110, 62, 82, .07) 0 1px, transparent 1.5px),
    linear-gradient(87deg, rgba(42, 33, 28, .025) 1px, transparent 1px);
  background-size: 27px 31px, 41px 39px, 11px 100%;
}

.atelier { position: relative; isolation: isolate; }

.privacy-room {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(3rem, 7vw, 7rem);
}

.privacy-room::before {
  content: attr(data-room);
  position: absolute;
  top: clamp(1.25rem, 4vw, 3.5rem);
  left: clamp(1.25rem, 4vw, 4rem);
  font-family: var(--mono);
  color: var(--kiln-smoke);
  letter-spacing: .24em;
  font-size: .72rem;
}

.privacy-room::after {
  content: attr(data-title);
  position: absolute;
  right: clamp(1rem, 4vw, 4rem);
  bottom: clamp(1.25rem, 4vw, 3.5rem);
  font-family: var(--noto);
  color: rgba(110, 62, 82, .45);
  font-size: clamp(.8rem, 1.1vw, 1rem);
  letter-spacing: .18em;
  writing-mode: vertical-rl;
}

.seal-nav {
  position: fixed;
  z-index: 60;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: .85rem;
}

.nav-dot {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 48% 52% 46% 54%;
  background: rgba(201, 138, 99, .36);
  box-shadow: inset 2px 2px 4px rgba(42, 33, 28, .22), 0 5px 14px rgba(42, 33, 28, .08);
  text-decoration: none;
  transition: transform .5s ease, background .5s ease;
}

.nav-dot span {
  opacity: 0;
  transform: translateX(-.4rem);
  color: var(--wax-plum);
  font-family: var(--mono);
  font-size: .58rem;
  transition: opacity .5s ease, transform .5s ease;
}

.nav-dot.is-active {
  transform: scale(1.42) rotate(-8deg);
  background: var(--unglazed-clay);
}

.nav-dot.is-active span { opacity: 1; transform: translateX(-1.55rem); }

.ceramic-shell {
  position: absolute;
  border-radius: 47% 53% 51% 49% / 44% 48% 52% 56%;
  background:
    radial-gradient(circle at 38% 31%, rgba(255,255,255,.45), transparent 14%),
    radial-gradient(circle at 63% 65%, rgba(201, 138, 99, .18), transparent 38%),
    linear-gradient(135deg, rgba(244,235,221,.95), rgba(218,198,180,.82));
  border: 1px solid rgba(42, 33, 28, .08);
  box-shadow: inset 24px 18px 44px rgba(255,255,255,.42), inset -35px -42px 58px rgba(42,33,28,.12), 0 42px 110px rgba(42,33,28,.16);
}

.giant-rim {
  width: min(92vw, 1180px);
  height: min(92vw, 1180px);
  right: -32vw;
  top: -23vw;
  background:
    radial-gradient(ellipse at 43% 45%, transparent 0 49%, rgba(42,33,28,.14) 50%, transparent 54%),
    radial-gradient(ellipse at 43% 45%, rgba(244,235,221,.9) 0 45%, rgba(201,138,99,.23) 57%, rgba(244,235,221,.75) 72%);
}

.hidden-note {
  position: relative;
  z-index: 5;
  max-width: 36rem;
  padding: clamp(1.5rem, 4vw, 3.25rem);
  border-radius: 46% 54% 48% 52% / 12% 18% 14% 20%;
  background: rgba(244, 235, 221, .58);
  box-shadow: 0 30px 70px rgba(42, 33, 28, .09), inset 0 0 30px rgba(255,255,255,.28);
  backdrop-filter: blur(3px);
  transform: translateY(3rem);
  opacity: 0;
  transition: transform 1.25s cubic-bezier(.2,.7,.13,1), opacity 1s ease;
}

.privacy-room.is-visible .hidden-note { transform: translateY(0); opacity: 1; }

.note-exposed { margin-left: -31vw; margin-top: 16vh; }
.note-fold { margin-left: 16vw; margin-top: -12vh; max-width: 34rem; }
.note-cord { margin-right: 24vw; max-width: 32rem; }
.note-shell { margin-left: -10vw; margin-top: -13vh; }
.note-final { text-align: center; max-width: 44rem; background: rgba(244,235,221,.28); }

h1, h2 {
  margin: .35rem 0 1rem;
  font-family: var(--fraunces);
  font-weight: 650;
  line-height: .9;
  letter-spacing: -.055em;
  color: var(--ink-umber);
}

h1 { font-size: clamp(4rem, 12vw, 12rem); font-variation-settings: "SOFT" 70, "WONK" 1; }
h2 { font-size: clamp(3.35rem, 8vw, 8.2rem); font-variation-settings: "SOFT" 70, "WONK" 1; }

p {
  margin: 0;
  color: var(--kiln-smoke);
  font-size: clamp(1rem, 1.45vw, 1.28rem);
  line-height: 1.75;
}

.mono {
  font-family: var(--mono);
  color: var(--wax-plum);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
}

.seal-caption {
  font-family: var(--noto);
  color: var(--wax-plum);
  letter-spacing: .18em;
  font-size: .92rem;
}

.maker-seal {
  position: absolute;
  z-index: 8;
  display: grid;
  place-items: center;
  min-width: 5.2rem;
  min-height: 3.5rem;
  padding: .7rem .9rem;
  border: 2px solid var(--unglazed-clay);
  border-radius: 50%;
  color: var(--unglazed-clay);
  font-family: var(--fraunces);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: .82;
  text-align: center;
  transform: rotate(-9deg) scale(.95);
  opacity: .88;
  box-shadow: inset 0 0 0 1px rgba(201,138,99,.24);
  transition: transform .65s cubic-bezier(.18,.76,.28,1.25), opacity .65s ease;
}

.maker-seal span { font-family: var(--mono); font-size: .48rem; letter-spacing: .16em; }
.privacy-room.is-visible .maker-seal { transform: rotate(-5deg) scale(1); }
.wordmark-seal { right: 7vw; bottom: 7vh; }
.seal-fold { left: 14vw; bottom: 18vh; }
.seal-cord { right: 20vw; top: 18vh; }
.seal-shell { right: 18vw; bottom: 16vh; transform: rotate(7deg); }
.seal-final { left: 50%; bottom: 15vh; transform: translateX(-50%) rotate(-4deg); }

.vellum-membrane {
  position: absolute;
  z-index: 6;
  min-width: 18rem;
  padding: 1.2rem 1.65rem;
  background: rgba(169, 200, 184, .35);
  border: 1px solid rgba(169, 200, 184, .55);
  color: rgba(42, 33, 28, .62);
  font-family: var(--noto);
  letter-spacing: .12em;
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(42,33,28,.09);
  clip-path: polygon(4% 8%, 96% 0, 100% 84%, 92% 100%, 2% 92%, 0 18%);
}

.membrane-one { right: 23vw; top: 43vh; transform: rotate(5deg); }
.membrane-two { left: 10vw; top: 25vh; transform: rotate(-7deg); }
.membrane-three { right: 9vw; bottom: 27vh; transform: rotate(4deg); }
.membrane-four { left: 42vw; top: 50vh; transform: rotate(-2deg); }
.membrane-final { width: 53vw; height: 54vh; border-radius: 50%; background: rgba(169,200,184,.18); }

.paper-screen {
  position: absolute;
  background: linear-gradient(90deg, rgba(244,235,221,.2), rgba(244,235,221,.78), rgba(244,235,221,.34));
  box-shadow: 0 20px 90px rgba(42,33,28,.12), inset 1px 0 0 rgba(42,33,28,.08);
  border: 1px solid rgba(42,33,28,.06);
}

.screen-left { left: -5vw; top: 7vh; width: 28vw; height: 77vh; transform: rotate(2deg); }
.screen-right { right: -2vw; top: 12vh; width: 35vw; height: 75vh; transform: rotate(-3deg); }

.folded-envelope {
  position: absolute;
  width: 63vw;
  height: 65vh;
  left: -8vw;
  top: 20vh;
  clip-path: polygon(0 9%, 85% 0, 100% 72%, 13% 100%);
  background:
    linear-gradient(153deg, transparent 48%, rgba(42,33,28,.08) 49% 50%, transparent 51%),
    linear-gradient(28deg, rgba(255,255,255,.22), rgba(201,138,99,.1)),
    var(--porcelain-rice);
  box-shadow: 22px 32px 100px rgba(42,33,28,.13);
}

.shell-fold { right: -6vw; bottom: -16vh; width: 60vw; height: 52vh; opacity: .78; }
.aperture { position: absolute; z-index: 3; border-radius: 49% 51% 46% 54%; box-shadow: inset 0 0 70px rgba(42,33,28,.16); }
.aperture-fold { width: 28vw; height: 38vh; left: 20vw; bottom: 10vh; background: rgba(110,62,82,.1); }

.cord-boundary { position: absolute; inset: 10vh 8vw; z-index: 4; }
.cord-svg { width: 100%; height: 100%; overflow: visible; }
.cord-path, .cord-shadow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cord-path {
  stroke: var(--wax-plum);
  stroke-width: 5;
  stroke-dasharray: 2100;
  stroke-dashoffset: 2100;
  filter: drop-shadow(0 10px 10px rgba(42,33,28,.16));
  transition: stroke-dashoffset 2.4s cubic-bezier(.2,.7,.12,1);
}
.cord-shadow { stroke: rgba(111,116,112,.38); stroke-width: 2; stroke-dasharray: 10 18; }
.room-cord.is-visible .cord-path { stroke-dashoffset: 0; }

.shell-deep { width: 84vw; height: 82vh; right: 5vw; top: 11vh; background-color: var(--porcelain-rice); }
.shell-inner { width: 45vw; height: 46vh; right: 22vw; top: 27vh; background: radial-gradient(circle at 50% 52%, rgba(110,62,82,.18), transparent 56%), rgba(244,235,221,.52); }
.shell-final { width: 68vw; height: 72vh; background: radial-gradient(circle at 50% 50%, rgba(247,200,106,.3), rgba(244,235,221,.78) 43%, rgba(201,138,99,.22) 72%); }
.kiln-glow { position: absolute; width: 45vw; height: 45vw; border-radius: 50%; background: radial-gradient(circle, rgba(247,200,106,.84), rgba(247,200,106,.26) 42%, transparent 68%); filter: blur(12px); animation: lampBreath 5.5s ease-in-out infinite; }

.crackle {
  position: absolute;
  z-index: 7;
  fill: none;
  stroke: rgba(110, 62, 82, .42);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 650;
  stroke-dashoffset: 650;
  transition: stroke-dashoffset 2.6s ease;
}
.crackle-one { right: 14vw; top: 18vh; width: 24vw; }
.crackle-two { right: 16vw; top: 22vh; width: 32vw; }
.privacy-room.is-visible .crackle path { stroke-dashoffset: 0; }

.room-exposed { background: linear-gradient(180deg, rgba(244,235,221,.98), rgba(244,235,221,.87)); }
.room-fold { background: radial-gradient(circle at 15% 30%, rgba(201,138,99,.12), transparent 28rem), var(--porcelain-rice); }
.room-cord { background: radial-gradient(circle at 72% 66%, rgba(169,200,184,.2), transparent 31rem), #efe4d5; }
.room-shell { background: radial-gradient(circle at 64% 41%, rgba(110,62,82,.1), transparent 30rem), var(--porcelain-rice); }
.room-lamp { background: radial-gradient(circle at 50% 55%, rgba(247,200,106,.18), transparent 36rem), linear-gradient(180deg, #eadbc8, var(--porcelain-rice)); }

.closing-line {
  position: absolute;
  bottom: 5vh;
  font-family: var(--noto);
  color: rgba(110,62,82,.55);
  letter-spacing: .22em;
}

@keyframes lampBreath {
  0%, 100% { transform: scale(.95); opacity: .72; }
  50% { transform: scale(1.08); opacity: .94; }
}

@media (max-width: 760px) {
  .privacy-room { padding: 5rem 1.5rem; place-items: end start; }
  .note-exposed, .note-fold, .note-cord, .note-shell, .note-final { margin: 0; max-width: 100%; }
  h1 { font-size: clamp(3.7rem, 19vw, 7rem); }
  h2 { font-size: clamp(3rem, 16vw, 6rem); }
  .seal-nav { right: .65rem; }
  .vellum-membrane { min-width: 12rem; max-width: 74vw; font-size: .8rem; }
  .membrane-one, .membrane-two, .membrane-three, .membrane-four { right: 8vw; left: auto; top: 18vh; bottom: auto; }
  .giant-rim { right: -64vw; top: -18vh; width: 140vw; height: 140vw; }
  .shell-deep, .shell-final { width: 116vw; height: 70vh; }
}