:root {
  --paper: #F6EFE4;
  --ink: #2B2723;
  --clay: #B9826A;
  --blue: #6F8FA6;
  --blush: #E7C8B3;
  --shadow: #D9D1C3;
  --teal: #123B3A;
  --porcelain: #F9F6EF;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Manrope", sans-serif;
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: .42;
  mix-blend-mode: multiply;
  background:
    radial-gradient(circle at 18% 22%, rgba(43,39,35,.045) 0 1px, transparent 1.7px),
    radial-gradient(circle at 72% 64%, rgba(111,143,166,.05) 0 1px, transparent 1.5px),
    linear-gradient(92deg, rgba(255,255,255,.18), transparent 18%, rgba(217,209,195,.18) 42%, transparent 70%);
  background-size: 21px 23px, 17px 19px, 100% 100%;
}

.encounters { position: relative; z-index: 2; }

.room {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 6vw, 88px);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(10px, 2vw, 28px);
  align-items: center;
  isolation: isolate;
}

.room::before {
  content: "";
  position: absolute;
  inset: 5vh 4vw;
  border: 1px solid rgba(43,39,35,.11);
  clip-path: polygon(1.5% 0, 100% 0, 98.5% 100%, 0 98%);
  pointer-events: none;
  z-index: -1;
}

.room::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 0 38%, rgba(217,209,195,.26) 38.3%, transparent 39.4% 62%, rgba(249,246,239,.45) 62.3%, transparent 64%);
  opacity: .6;
  pointer-events: none;
  z-index: -2;
}

h1, h2 {
  font-family: "Gowun Batang", serif;
  font-weight: 400;
  letter-spacing: -.045em;
  margin: 0;
}

p { line-height: 1.75; font-weight: 400; }

.kr { font-family: "Noto Sans KR", sans-serif; letter-spacing: -.02em; }

.room-tabs {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  gap: 5px;
  padding: 7px;
  background: rgba(249,246,239,.72);
  border: 1px solid rgba(43,39,35,.12);
  box-shadow: 0 18px 50px rgba(43,39,35,.08);
  backdrop-filter: blur(10px);
}

.room-tabs a {
  color: var(--ink);
  text-decoration: none;
  text-transform: lowercase;
  font-size: 11px;
  letter-spacing: .12em;
  padding: 8px 13px;
  border-left: 1px dashed rgba(43,39,35,.16);
  transition: background .4s ease, color .4s ease, transform .4s ease;
}

.room-tabs a:first-child { border-left: 0; }
.room-tabs a.active { background: var(--teal); color: var(--porcelain); transform: translateY(-3px); }

.stitch-map {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 68;
  display: grid;
  gap: 15px;
}

.stitch-map span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clay);
  opacity: .32;
  box-shadow: 0 0 0 7px rgba(185,130,106,.08);
}

.listening-line {
  position: fixed;
  inset: 8vh 0 auto 0;
  width: 100vw;
  height: 62vh;
  z-index: 3;
  pointer-events: none;
  opacity: .55;
}

.listening-line path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 1600;
  stroke-dashoffset: var(--line-offset, 1200);
  filter: drop-shadow(0 0 16px rgba(111,143,166,.18));
}

.threshold { background: radial-gradient(circle at 70% 28%, rgba(231,200,179,.45), transparent 26%), var(--paper); }

.threshold-panel {
  grid-column: 2 / 6;
  min-height: 54vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 7vw, 92px);
  background: rgba(249,246,239,.5);
  border: 1px solid rgba(43,39,35,.12);
  box-shadow: 22px 25px 0 rgba(217,209,195,.42), 0 30px 90px rgba(43,39,35,.08);
  clip-path: polygon(0 2%, 97% 0, 100% 94%, 3% 100%);
}

.artifact {
  color: var(--clay);
  font-size: clamp(18px, 2vw, 30px);
  margin: 0 0 20px 7%;
}

.wordmark {
  font-size: clamp(64px, 13vw, 190px);
  animation: breatheWord 5.8s ease-in-out infinite;
  transform-origin: 18% 50%;
}

.threshold-line { max-width: 360px; margin-left: 42%; color: rgba(43,39,35,.72); }

.threshold-cross, .return-link {
  color: var(--teal);
  text-decoration: none;
  width: max-content;
  border-bottom: 1px solid var(--clay);
  padding-bottom: 5px;
  letter-spacing: .08em;
  font-size: 12px;
  text-transform: lowercase;
}

.threshold-cross { margin: 20px 0 0 14%; }

.cheek-line {
  position: absolute;
  right: 8vw;
  top: 14vh;
  width: min(35vw, 420px);
  height: 70vh;
  opacity: .72;
}

.cheek-line path, .drawn, .mirror-contour path {
  fill: none;
  stroke: var(--clay);
  stroke-width: 2;
  stroke-linecap: round;
}

.paper-caption, .annotation {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(43,39,35,.55);
}

.annotation { transition: transform .35s ease; }
.paper-caption { position: absolute; left: 8vw; bottom: 18vh; }

.portrait-mat {
  position: relative;
  background: rgba(249,246,239,.64);
  border: 1px solid rgba(43,39,35,.13);
  padding: clamp(28px, 4.5vw, 62px);
  box-shadow: 14px 18px 0 rgba(217,209,195,.38);
  backdrop-filter: blur(3px);
}

.portrait-mat::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(185,130,106,.28);
  pointer-events: none;
}

.portrait-mat h2 { font-size: clamp(54px, 9vw, 132px); color: var(--ink); }
.portrait-mat p { max-width: 440px; font-size: clamp(16px, 1.4vw, 21px); }
.room-kicker { color: var(--clay); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; }

.mat-left { grid-column: 1 / 4; transform: rotate(-1.2deg); }
.mat-right { grid-column: 5 / 8; transform: rotate(1.1deg); }
.mat-voice { grid-column: 5 / 8; align-self: end; transform: rotate(-.8deg); }
.mat-memory { grid-column: 1 / 4; align-self: start; transform: rotate(.7deg); }
.mat-mirror { grid-column: 5 / 7; align-self: end; }

.pulse { background: radial-gradient(circle at 66% 48%, rgba(111,143,166,.24), transparent 30%), var(--paper); }

.breath-field {
  grid-column: 4 / 8;
  justify-self: center;
  position: relative;
  width: min(54vw, 620px);
  aspect-ratio: 1;
}

.breath-field span, .breath-field b {
  position: absolute;
  inset: 50%;
  border: 1px solid rgba(111,143,166,.62);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.12);
  animation: breathRing 7s ease-out infinite;
}

.breath-field span:nth-child(2) { animation-delay: 1.1s; border-color: rgba(185,130,106,.48); }
.breath-field span:nth-child(3) { animation-delay: 2.2s; }
.breath-field span:nth-child(4) { animation-delay: 3.3s; border-color: rgba(231,200,179,.72); }
.breath-field b { width: 44px; height: 44px; background: var(--teal); opacity: .9; animation: pulseDot 4.8s ease-in-out infinite; }

.margin-note { grid-column: 2 / 4; align-self: end; max-width: 280px; }

.face { background: linear-gradient(128deg, var(--paper), #F9F6EF 47%, rgba(231,200,179,.38)); }
.face-frame { grid-column: 1 / 5; position: relative; height: min(76vh, 720px); }
.profile-drawing { position: absolute; inset: 0 8% 0 12%; height: 100%; width: 70%; }
.drawn { stroke: var(--teal); stroke-width: 2.4; stroke-dasharray: 900; stroke-dashoffset: var(--draw-offset, 900); transition: stroke-dashoffset 1.2s ease; }
.eyelid-path { stroke: var(--clay); }
.palm-path { stroke: var(--blue); }
.mask-oval { position: absolute; right: 8%; top: 18%; width: 42%; height: 62%; border-radius: 50%; background: rgba(231,200,179,.28); mix-blend-mode: multiply; box-shadow: inset 0 0 0 1px rgba(43,39,35,.1); }

.voice { background: radial-gradient(circle at 34% 40%, rgba(18,59,58,.12), transparent 35%), var(--paper); }
.transcript-cloud { grid-column: 1 / 5; position: relative; height: 70vh; }
.transcript-cloud span {
  position: absolute;
  left: var(--x, 10%);
  top: var(--y, 12%);
  display: block;
  padding: 14px 22px;
  background: rgba(249,246,239,.72);
  border: 1px solid rgba(43,39,35,.12);
  color: rgba(43,39,35,.78);
  box-shadow: 11px 13px 0 rgba(217,209,195,.34);
  transform: translateY(var(--wave, 0px)) rotate(var(--rot, -2deg));
  transition: transform .2s linear;
}
.transcript-cloud span:nth-child(1) { --x: 7%; --y: 12%; --rot: -4deg; }
.transcript-cloud span:nth-child(2) { --x: 31%; --y: 28%; --rot: 2deg; color: var(--teal); }
.transcript-cloud span:nth-child(3) { --x: 15%; --y: 44%; --rot: -1deg; }
.transcript-cloud span:nth-child(4) { --x: 43%; --y: 58%; --rot: 3deg; }
.transcript-cloud span:nth-child(5) { --x: 4%; --y: 73%; --rot: -2deg; }

.memory { background: linear-gradient(100deg, rgba(231,200,179,.4), var(--paper) 36%, rgba(111,143,166,.16)); }
.vellum-stack { grid-column: 4 / 8; position: relative; height: 72vh; }
.vellum {
  position: absolute;
  width: 62%;
  height: 76%;
  left: 16%;
  top: 9%;
  background: rgba(249,246,239,.58);
  border: 1px solid rgba(43,39,35,.11);
  box-shadow: 20px 25px 55px rgba(43,39,35,.09);
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
  clip-path: polygon(1% 0, 100% 3%, 98% 97%, 0 100%);
}
.sheet-one { background: rgba(231,200,179,.42); display: grid; place-items: center; font-size: 46px; color: var(--clay); }
.sheet-two { transform: translate(36px, 28px) rotate(3deg); background: rgba(111,143,166,.18); }
.memory.in-view .sheet-one { transform: translate(-78px, -12px) rotate(-5deg); }
.memory.in-view .sheet-two { transform: translate(98px, 42px) rotate(7deg); }
.clay-notes { position: absolute; inset: 22% 13% 13% 8%; display: grid; align-content: center; gap: 16px; }
.clay-notes span { width: max-content; max-width: 320px; padding: 13px 18px; background: var(--blush); color: var(--ink); border: 1px solid rgba(185,130,106,.32); box-shadow: 8px 10px 0 rgba(185,130,106,.12); }
.clay-notes span:nth-child(even) { margin-left: 22%; background: var(--porcelain); }
.ceramic-token { position: absolute; right: 12vw; bottom: 17vh; width: 112px; height: 112px; border-radius: 50%; background: var(--clay); color: var(--porcelain); display: grid; place-items: center; text-align: center; }

.mirror { background: radial-gradient(circle at 50% 48%, rgba(18,59,58,.2), transparent 38%), var(--paper); }
.mirror-field { grid-column: 2 / 6; position: relative; min-height: 68vh; display: grid; place-items: center; text-align: center; }
.mirror-contour { position: absolute; width: min(62vw, 620px); opacity: .8; }
.mirror-contour path { stroke: var(--blue); stroke-width: 2; }
.mirror-field h2 { font-size: clamp(58px, 12vw, 164px); color: var(--teal); z-index: 1; animation: breatheWord 6.4s ease-in-out infinite; }
.mirror-field p { z-index: 1; align-self: end; max-width: 520px; color: rgba(43,39,35,.68); }

@keyframes breatheWord {
  0%, 100% { transform: scale(1); letter-spacing: -.045em; }
  50% { transform: scale(1.012); letter-spacing: -.032em; }
}

@keyframes breathRing {
  0% { width: 8%; height: 8%; opacity: .78; }
  72% { opacity: .18; }
  100% { width: 94%; height: 94%; opacity: 0; }
}

@keyframes pulseDot {
  0%, 100% { transform: translate(-50%, -50%) scale(.72); box-shadow: 0 0 0 0 rgba(18,59,58,.18); }
  50% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 24px rgba(111,143,166,.12); }
}

@media (max-width: 820px) {
  .room { grid-template-columns: 1fr; padding: 28px 20px 80px; }
  .threshold-panel, .mat-left, .mat-right, .mat-voice, .mat-memory, .mat-mirror, .breath-field, .face-frame, .transcript-cloud, .vellum-stack, .mirror-field { grid-column: 1; }
  .threshold-line { margin-left: 0; }
  .wordmark { font-size: clamp(58px, 18vw, 96px); }
  .room-tabs { width: calc(100vw - 20px); overflow-x: auto; justify-content: flex-start; }
  .stitch-map { display: none; }
  .cheek-line { right: -18vw; opacity: .35; }
  .transcript-cloud span { max-width: 86vw; }
}