:root {
  --evidence-ivory: #F4EAD7;
  --blind-noon: #FFF8E8;
  --moth-ink: #25212B;
  --impossible-violet: #5B3A78;
  --catalog-red: #B63A2E;
  --brass-dust: #C69B4A;
  --blue-silence: #8FA7B8;
  --sealed-wax: #6D1F2A;
  --old-paper: #E9D8BC;
  --sun-angle: 28deg;
  --thread-draw: 0;
  --pointer-x: 50%;
  --pointer-y: 50%;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--moth-ink);
  background: linear-gradient(125deg, var(--blind-noon), var(--evidence-ivory) 44%, var(--old-paper));
  font-family: "Inter", sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255,248,232,.9), transparent 16rem), linear-gradient(var(--sun-angle), transparent 0 55%, rgba(91,58,120,.13));
  mix-blend-mode: multiply;
  z-index: 1;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  z-index: 2;
  background-image: radial-gradient(rgba(37,33,43,.15) .7px, transparent .8px), radial-gradient(rgba(198,155,74,.14) .6px, transparent .8px), linear-gradient(90deg, rgba(255,255,255,.2), rgba(91,58,120,.05));
  background-size: 19px 23px, 31px 29px, 100% 100%;
}

.loupe {
  position: fixed;
  width: 13rem;
  height: 13rem;
  border-radius: 50%;
  left: var(--pointer-x);
  top: var(--pointer-y);
  transform: translate(-50%, -50%) scale(.85);
  pointer-events: none;
  opacity: 0;
  z-index: 20;
  background: radial-gradient(circle, rgba(255,248,232,.65), rgba(143,167,184,.18) 58%, transparent 70%);
  box-shadow: inset 0 0 0 1px rgba(198,155,74,.5), 0 16px 40px rgba(91,58,120,.12);
  transition: opacity .45s ease, transform .45s ease;
}

body.is-pointing .loupe { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.calendar-tabs {
  position: fixed;
  right: 1.35rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  z-index: 30;
}

.tab {
  width: 4.9rem;
  min-height: 3.2rem;
  border: 1px solid rgba(37,33,43,.18);
  background: linear-gradient(145deg, var(--blind-noon), var(--old-paper));
  color: var(--moth-ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  letter-spacing: .08em;
  box-shadow: -7px 10px 0 rgba(91,58,120,.12);
  clip-path: polygon(0 0, 100% 0, 100% 82%, 84% 100%, 0 100%);
  transition: transform .35s ease, background .35s ease, color .35s ease;
}

.tab span, .tab em { display: block; }
.tab em { font-family: "Fraunces", serif; color: var(--catalog-red); font-style: normal; }
.tab.is-active { background: var(--moth-ink); color: var(--blind-noon); transform: translateX(-.6rem) rotate(-1.5deg); }

.dossier { position: relative; z-index: 3; }

.room {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 5vw 7vw;
  overflow: hidden;
  isolation: isolate;
}

.room::after {
  content: "";
  position: absolute;
  width: 48vmax;
  height: 18vmax;
  background: rgba(91,58,120,.16);
  filter: blur(18px);
  transform: rotate(calc(var(--sun-angle) - 80deg));
  bottom: 6%;
  left: -13%;
  z-index: -1;
  transition: transform .8s ease;
}

.room-grid {
  width: min(1160px, 100%);
  height: min(740px, 82vh);
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border: 1px solid rgba(37,33,43,.09);
  background: linear-gradient(115deg, rgba(255,248,232,.38), rgba(244,234,215,.16));
  box-shadow: inset 0 0 0 1px rgba(255,248,232,.58);
}

.coordinate, .annotation {
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(37,33,43,.58);
}

.top-left { grid-column: 1 / 5; grid-row: 1; margin: 1rem; }
.right-code { grid-column: 8 / 13; grid-row: 1; justify-self: end; margin: 1rem; }

.debossed-wordmark {
  grid-column: 2 / 10;
  grid-row: 2 / 4;
  align-self: center;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(4.4rem, 12vw, 11rem);
  letter-spacing: .075em;
  color: rgba(37,33,43,.055);
  text-shadow: 0 -1px 0 rgba(255,248,232,.75), 0 1px 1px rgba(91,58,120,.08);
  font-style: italic;
}

.calendar-specimen {
  grid-column: 3 / 10;
  grid-row: 3 / 7;
  position: relative;
  display: grid;
  place-items: center;
}

.blank-date {
  width: clamp(15rem, 28vw, 25rem);
  height: clamp(18rem, 34vw, 29rem);
  background: linear-gradient(160deg, var(--blind-noon), var(--evidence-ivory) 72%, var(--old-paper));
  border: 1px solid rgba(37,33,43,.17);
  box-shadow: 28px -18px 0 rgba(91,58,120,.26), -12px 18px 26px rgba(37,33,43,.12);
  transform: rotate(-3deg);
  position: relative;
}

.blank-date::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 3.2rem;
  border-top: 1px solid rgba(182,58,46,.32);
}

.blank-date span {
  position: absolute;
  inset: 5.5rem 3rem 3rem;
  border: 1px dashed rgba(37,33,43,.16);
  background: repeating-linear-gradient(0deg, transparent 0 2.1rem, rgba(143,167,184,.15) 2.16rem 2.22rem);
}

.pin { position: absolute; width: .68rem; height: .68rem; border-radius: 50%; background: var(--brass-dust); box-shadow: 0 0 0 .32rem rgba(198,155,74,.16); z-index: 3; }
.pin-a { left: 28%; top: 14%; }
.pin-b { right: 26%; bottom: 18%; }

.catalog-thread { position: absolute; inset: 24% 2% auto; height: 11rem; overflow: visible; z-index: 4; }
.catalog-thread path { fill: none; stroke: var(--catalog-red); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: var(--thread-offset, 900); filter: drop-shadow(0 3px 0 rgba(109,31,42,.15)); transition: stroke-dashoffset .15s linear; }
.wrong-shadow { position: absolute; width: 15rem; height: 6.5rem; background: rgba(91,58,120,.28); transform: rotate(29deg) skewX(-18deg); right: 15%; bottom: 12%; filter: blur(9px); }

.room-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(3.1rem, 7vw, 8.3rem);
  font-weight: 500;
  font-style: italic;
  letter-spacing: .055em;
  line-height: .86;
  margin: 0;
  color: var(--moth-ink);
  text-shadow: .08em .08em 0 rgba(91,58,120,.12);
}

.reveal-title {
  position: absolute;
  left: 47%;
  bottom: 2%;
  width: 45rem;
  opacity: var(--thread-draw);
  transform: translateX(var(--thread-shift, -4rem));
}

.marginalia, .closing-slip {
  font-family: "Fraunces", serif;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  line-height: 1.25;
  background: rgba(255,248,232,.58);
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--catalog-red);
}

.right-slip { grid-column: 9 / 12; grid-row: 5 / 7; transform: rotate(2deg); }
.lower-note { grid-column: 2 / 6; grid-row: 8; align-self: center; }

.title-left { grid-column: 1 / 7; grid-row: 2 / 4; align-self: center; }
.room-grid-light .coordinate { grid-column: 8 / 13; grid-row: 1; justify-self: end; margin: 1rem; }
.glass-table { grid-column: 5 / 11; grid-row: 3 / 8; position: relative; display: grid; place-items: center; }
.day-specimen { background: linear-gradient(140deg, rgba(255,248,232,.97), rgba(198,155,74,.36)); box-shadow: 0 26px 50px rgba(198,155,74,.22), 24px 14px 0 rgba(91,58,120,.13); }
.under-glass { width: 22rem; height: 12rem; transform: rotate(-7deg); }
.glass-disc { position: absolute; width: 19rem; height: 19rem; border-radius: 50%; border: 1px solid rgba(143,167,184,.7); background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.72), rgba(143,167,184,.16) 65%, rgba(91,58,120,.04)); mix-blend-mode: multiply; }
.brass-ruler { position: absolute; left: 10%; bottom: 11%; width: 22rem; height: 1.5rem; background: var(--brass-dust); transform: rotate(8deg); display: flex; justify-content: space-around; opacity: .72; }
.brass-ruler span { width: 1px; height: 100%; background: rgba(37,33,43,.45); }
.vellum-envelope { grid-column: 2 / 6; grid-row: 5 / 8; position: relative; width: 23rem; height: 13rem; background: rgba(255,248,232,.42); border: 1px solid rgba(37,33,43,.18); box-shadow: 20px 16px 0 rgba(91,58,120,.1); mix-blend-mode: multiply; animation: breathe 5.5s ease-in-out infinite; }
.vellum-envelope .flap { position: absolute; inset: 0; clip-path: polygon(0 0, 50% 58%, 100% 0); background: rgba(143,167,184,.15); transform-origin: top; }
.vellum-envelope p { font-family: "IBM Plex Mono", monospace; margin: 6.5rem 1.2rem 0; letter-spacing: .18em; color: rgba(37,33,43,.56); }
.kr-note { grid-column: 8 / 12; grid-row: 8; font-family: "Noto Serif KR", serif; color: rgba(91,58,120,.65); }

.vertical-title { grid-column: 1 / 5; grid-row: 2 / 8; writing-mode: vertical-rl; transform: rotate(180deg); justify-self: center; }
.inventory-board { grid-column: 5 / 11; grid-row: 2 / 7; display: grid; grid-template-columns: 1.2fr .9fr; gap: 1.2rem; align-content: center; }
.tag { min-height: 7.8rem; background: rgba(255,248,232,.64); border: 1px solid rgba(37,33,43,.15); padding: 1rem; transform: rotate(var(--tilt, -2deg)); box-shadow: 10px 16px 0 rgba(91,58,120,.1); }
.tag:nth-child(2) { --tilt: 2.5deg; }
.tag:nth-child(3) { --tilt: -4deg; }
.tag:nth-child(4) { --tilt: 1deg; }
.tag strong { display: block; font-family: "IBM Plex Mono", monospace; font-size: .75rem; letter-spacing: .16em; color: var(--catalog-red); }
.tag span { font-family: "Fraunces", serif; font-size: clamp(2.2rem, 5vw, 5rem); }
.redacted span { color: var(--sealed-wax); letter-spacing: -.15em; }
.sun-stain { grid-column: 8 / 12; grid-row: 6 / 8; width: 22rem; height: 8rem; transform: rotate(13deg); opacity: .75; }
.thread-constellation { grid-column: 3 / 9; grid-row: 7 / 9; position: relative; }
.thread-constellation::before { content: ""; position: absolute; width: 100%; top: 45%; border-top: 2px solid var(--catalog-red); transform: rotate(-6deg); }
.thread-constellation i { position: absolute; width: .5rem; height: .5rem; border-radius: 50%; background: var(--catalog-red); }
.thread-constellation i:nth-child(1){top:29%;left:23%}.thread-constellation i:nth-child(2){top:38%;left:38%}.thread-constellation i:nth-child(3){top:47%;left:53%}.thread-constellation i:nth-child(4){top:56%;left:68%}.thread-constellation i:nth-child(5){top:65%;left:83%}

.shadow-grid .coordinate { grid-column: 1 / 6; grid-row: 1; margin: 1rem; }
.shadow-grid .room-title { grid-column: 5 / 12; grid-row: 2 / 4; }
.sundial { grid-column: 2 / 6; grid-row: 4 / 8; position: relative; width: 24rem; height: 24rem; }
.dial-face { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(37,33,43,.18); background: radial-gradient(circle, rgba(255,248,232,.6), rgba(198,155,74,.16)); }
.dial-face span { position: absolute; font-family: "Fraunces", serif; color: rgba(37,33,43,.62); }
.dial-face span:nth-child(1) { left: 2rem; top: 11rem; }.dial-face span:nth-child(2) { top: 2rem; left: 9rem; }.dial-face span:nth-child(3) { right: 2rem; bottom: 7rem; }
.needle { position: absolute; left: 50%; top: 50%; width: 11rem; height: .35rem; background: var(--brass-dust); transform-origin: left center; transform: rotate(calc(var(--sun-angle) + 46deg)); box-shadow: 0 7px 0 rgba(91,58,120,.2); }
.object-outline { grid-column: 7 / 10; grid-row: 5 / 8; border: 2px dashed rgba(37,33,43,.22); border-radius: 48% 52% 44% 56%; transform: rotate(-12deg); }
.independent-shadow { grid-column: 8 / 12; grid-row: 4 / 7; background: rgba(91,58,120,.27); filter: blur(10px); transform: rotate(calc(var(--sun-angle) - 180deg)); clip-path: polygon(8% 30%, 78% 7%, 100% 56%, 31% 88%); }
.testimony { grid-column: 6 / 12; grid-row: 7 / 9; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 2rem; color: rgba(37,33,43,.74); margin: 0; }

.title-right { grid-column: 6 / 12; grid-row: 2 / 4; text-align: right; }
.paper-door { grid-column: 4 / 8; grid-row: 3 / 8; position: relative; perspective: 900px; }
.door-panel { width: 21rem; height: 30rem; background: linear-gradient(105deg, var(--blind-noon), var(--evidence-ivory) 60%, rgba(198,155,74,.24)); border: 1px solid rgba(37,33,43,.16); box-shadow: 34px 0 0 rgba(91,58,120,.23), 0 0 90px rgba(255,248,232,.8); transform-origin: left center; transition: transform 1.4s cubic-bezier(.2,.8,.1,1), box-shadow 1.4s ease; }
.paper-door.is-open .door-panel { transform: rotateY(-52deg); box-shadow: 120px 0 90px rgba(255,248,232,.95), 34px 0 0 rgba(91,58,120,.08); }
.keyhole { position: absolute; left: 11rem; top: 14rem; width: 2.2rem; height: 5rem; background: linear-gradient(var(--blind-noon), var(--brass-dust)); clip-path: polygon(50% 0, 78% 18%, 72% 42%, 100% 100%, 0 100%, 28% 42%, 22% 18%); }
.wax-seal { position: absolute; left: -2rem; top: 4rem; width: 5rem; height: 5rem; border-radius: 49% 51% 45% 55%; background: var(--sealed-wax); box-shadow: inset 0 0 0 .5rem rgba(182,58,46,.38); }
.closing-slip { grid-column: 8 / 12; grid-row: 6 / 8; align-self: center; }
.afterimage { position: absolute; inset: 8% 0 0 40%; background: radial-gradient(circle, rgba(255,248,232,.92), rgba(198,155,74,.2), transparent 58%); opacity: .68; z-index: -1; }

.clue::after {
  content: attr(data-hidden);
  position: absolute;
  max-width: 18rem;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%) rotate(-1deg);
  background: var(--blind-noon);
  border: 1px solid rgba(182,58,46,.28);
  color: var(--sealed-wax);
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  letter-spacing: .08em;
  line-height: 1.35;
  padding: .7rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 9;
}
.clue.is-exposed::after { opacity: 1; transform: translate(-50%, -135%) rotate(-1deg); }

@keyframes breathe { 0%,100% { transform: scaleX(1) rotate(-2deg); } 50% { transform: scaleX(1.018) rotate(-1.4deg); } }

@media (max-width: 760px) {
  .calendar-tabs { right: .4rem; transform: translateY(-50%) scale(.72); transform-origin: right center; }
  .room { padding: 4rem 1rem; }
  .room-grid { height: 84vh; grid-template-columns: repeat(6, 1fr); }
  .debossed-wordmark, .calendar-specimen, .title-left, .glass-table, .vellum-envelope, .inventory-board, .sundial, .shadow-grid .room-title, .paper-door, .closing-slip, .title-right, .testimony { grid-column: 1 / 7; }
  .reveal-title { left: 8%; width: 90%; }
  .vertical-title { writing-mode: horizontal-tb; transform: none; grid-column: 1 / 7; grid-row: 1 / 2; }
}