:root {
  /* IntersectionObserver` adding `.visible` class. Journal entries discuss what defines a person: memory. IntersectionObserver` for scroll-triggered class toggling. No frameworks. No libraries. No scroll-jacking. The observer adds `.visible` to elements when they enter 20% of the viewport. */
  --obsidian: #0D0A07;
  --cordovan: #2C1E10;
  --antique-gold: #C9A84C;
  --aged-brass: #8B7355;
  --parchment: #F2E8D9;
  --deep-plum: #2D1B2E;
  --northern-light: #3DAA7E;
  --boreal-violet: #7B4A8E;
  --flame: #E8A634;
  --soft-brass: #B89B6A;
  --shadow: rgba(13, 10, 7, .86);
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --candle-glow: radial-gradient(ellipse at 30% 20%, rgba(201, 168, 76, 0.15), transparent 60%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--obsidian); scroll-behavior: smooth; }
body {
  min-width: 320px;
  overflow-x: hidden;
  background: var(--obsidian);
  color: var(--parchment);
  font-family: "EB Garamond", Garamond, Georgia, "Noto Serif KR", serif;
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.72;
}

.desk-journey { background: var(--obsidian); }
.act { min-height: 100vh; position: relative; display: grid; place-items: center; overflow: hidden; }
.leather-surface {
  background-color: var(--cordovan);
  background-image:
    var(--candle-glow),
    radial-gradient(ellipse at 70% 78%, rgba(13, 10, 7, .42), transparent 54%),
    repeating-conic-gradient(from 17deg, rgba(242, 232, 217, .025) 0 7deg, rgba(13, 10, 7, .12) 7deg 14deg),
    linear-gradient(120deg, #2C1E10, #160E08 62%, #0D0A07);
}
.leather-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(95deg, transparent 0 11px, rgba(242, 232, 217, .018) 12px, transparent 14px);
  mix-blend-mode: screen;
  opacity: .55;
}

.act-hero { background-color: var(--obsidian); }
.candle-flicker {
  position: absolute;
  width: min(72vw, 620px);
  height: min(72vw, 620px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 166, 52, .18), rgba(201, 168, 76, .09) 34%, transparent 69%);
  filter: blur(10px);
  animation: flicker 3s var(--ease) infinite;
}
@keyframes flicker {
  0%, 100% { opacity: .68; transform: scale(.94) translate(-1%, 1%); }
  31% { opacity: .92; transform: scale(1.03) translate(1%, -1%); }
  58% { opacity: .74; transform: scale(.98) translate(-.5%, -.5%); }
  77% { opacity: 1; transform: scale(1.05) translate(.8%, .5%); }
}
.hero-artifact { position: relative; z-index: 1; text-align: center; padding: 7vh 6vw; }

.compass {
  width: clamp(150px, 22vw, 245px);
  height: clamp(150px, 22vw, 245px);
  display: block;
  margin: 0 auto clamp(1.5rem, 4vw, 3.5rem);
  overflow: visible;
}
.compass-opening { opacity: 0; animation: compass-arrive 1.2s var(--ease) .2s forwards; }
@keyframes compass-arrive { to { opacity: 1; transform: rotate(360deg); } }
.compass-ring, .compass-inner, .rose-points path, .needle path, .compass-boss {
  fill: url(#brass);
  stroke: #6B5B3E;
  stroke-width: 1.6;
  filter: drop-shadow(0 5px 10px rgba(13, 10, 7, .75));
}
.compass-ring, .compass-inner { fill: none; }
.rose-points .minor, .needle-shadow { opacity: .62; }
.cardinals text {
  fill: var(--antique-gold);
  font-family: "Spectral", Georgia, serif;
  font-size: 18px;
  letter-spacing: .12em;
  text-anchor: middle;
}
.needle { transform-origin: 110px 110px; animation: needle-turn 1.6s var(--ease) .9s both; }
@keyframes needle-turn { from { transform: rotate(-120deg); } to { transform: rotate(0deg); } }

.embossed {
  color: transparent;
  font-family: "Cormorant Garamond", "Noto Serif KR", serif;
  font-size: clamp(2.8rem, 6vw, 5.6rem);
  font-weight: 600;
  letter-spacing: .02em;
  text-shadow: 0 1px 1px rgba(242, 232, 217, .15), 0 -1px 1px rgba(13, 10, 7, .8), 0 12px 30px rgba(0, 0, 0, .25);
  opacity: 0;
  transform: translateY(12px);
  animation: title-catch 1s var(--ease) 1.15s forwards;
}
@keyframes title-catch { to { opacity: 1; transform: translateY(0); } }
.typed-korean {
  width: 9.5em;
  margin: clamp(.9rem, 2vw, 1.5rem) auto 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--antique-gold);
  font-family: "Cormorant Garamond", "Noto Serif KR", serif;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  text-shadow: 0 0 22px rgba(232, 166, 52, .22);
  clip-path: inset(0 100% 0 0);
  animation: type-reveal 1.8s steps(10, end) 2s forwards;
}
@keyframes type-reveal { to { clip-path: inset(0 0 0 0); } }

.act-journal { padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 5vw, 5rem); }
.act-journal-second { min-height: 105vh; }
.journal-spread {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 5vw, 5rem);
  align-items: start;
  transform: rotate(-.35deg);
}
.lower-spread { transform: rotate(.45deg); }
.journal-page {
  position: relative;
  min-height: 520px;
  padding: clamp(2rem, 5vw, 4.6rem) clamp(1.5rem, 4vw, 3.8rem);
  color: var(--cordovan);
  background:
    linear-gradient(90deg, rgba(200, 80, 80, .26) 0 2px, transparent 2px 100%) 13% 0 / 100% 100%,
    repeating-linear-gradient(180deg, transparent 0 35px, rgba(44, 30, 16, .08) 36px 37px),
    radial-gradient(ellipse at 20% 8%, rgba(255, 255, 255, .65), transparent 38%),
    #F2E8D9;
  clip-path: polygon(1% 2%, 97% 0, 99% 7%, 98% 95%, 94% 100%, 4% 98%, 0 91%, 2% 54%, 0 22%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 8px rgba(44,30,16,.18), 0 18px 45px rgba(13, 10, 7, .68), 0 2px 2px rgba(13, 10, 7, .85);
}
.page-left { margin-top: -2.5vh; transform: rotate(-1.4deg); }
.page-right { margin-top: 4vh; transform: rotate(1.6deg); }
.folio-label, .tray-label, .specimen-card span, .closing-line {
  font-family: "Spectral", Georgia, serif;
  font-size: .75rem;
  font-weight: 300;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.folio-label { color: var(--aged-brass); }
.journal-page h2 {
  margin: .8rem 0 1.4rem;
  color: var(--obsidian);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.8rem, 3.5vw, 3.2rem);
  font-weight: 600;
  letter-spacing: .02em;
}
.journal-page p { color: var(--cordovan); max-width: 34rem; }
.annotation {
  position: absolute;
  right: clamp(-2rem, -3vw, -1rem);
  top: 34%;
  width: 7.8rem;
  color: var(--aged-brass);
  font-family: "EB Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.2;
  transform: rotate(-1.5deg);
}
.paperclip, .bookmark, .abstract-polaroid { position: absolute; box-shadow: 0 12px 22px rgba(13, 10, 7, .38); }
.brass-piece {
  background: linear-gradient(135deg, #C9A84C 0%, #8B7355 30%, #E8A634 50%, #C9A84C 70%, #8B7355 100%);
  border: 1px solid #6B5B3E;
  box-shadow: inset 0 1px 0 rgba(232, 166, 52, .4), inset 0 -1px 0 rgba(45, 30, 16, .6), 0 4px 12px rgba(13, 10, 7, .8);
}
.paperclip { width: 56px; height: 22px; border-radius: 999px; top: 28px; right: 42px; transform: rotate(13deg); }
.bookmark { width: 34px; height: 130px; right: 58px; top: -6px; clip-path: polygon(0 0,100% 0,100% 100%,50% 82%,0 100%); }
.abstract-polaroid {
  width: 112px; height: 132px; right: 34px; bottom: 30px; padding: 9px 9px 26px; background: #F2E8D9; transform: rotate(5deg);
}
.abstract-polaroid::before { content: ""; display: block; height: 100%; background: linear-gradient(135deg, rgba(232,166,52,.86), rgba(45,27,46,.8)); }
.violet-card::before { background: linear-gradient(135deg, rgba(123,74,142,.9), rgba(61,170,126,.55), rgba(13,10,7,.8)); }

.reveal { opacity: 0; transition: opacity .9s var(--ease), transform .9s var(--ease); }
.from-left { transform: translateX(-70px) rotate(-1.4deg); }
.from-right { transform: translateX(70px) rotate(1.6deg); }
.reveal.visible { opacity: 1; }
.from-left.visible { transform: translateX(0) rotate(-1.4deg); }
.from-right.visible { transform: translateX(0) rotate(1.6deg); }

.act-specimens {
  min-height: 112vh;
  padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 5vw, 5rem);
  background:
    radial-gradient(ellipse at 48% 50%, rgba(45, 27, 46, .85), rgba(13, 10, 7, .96) 68%),
    linear-gradient(140deg, #2D1B2E, #0D0A07);
}
.tray-label { align-self: end; margin-bottom: 1.5rem; color: var(--aged-brass); text-align: center; }
.specimen-tray {
  width: min(1060px, 100%);
  height: min(66vh, 620px);
  min-height: 500px;
  position: relative;
  border: 18px solid rgba(44, 30, 16, .95);
  border-radius: 28px;
  background:
    radial-gradient(ellipse at center, rgba(123, 74, 142, .34), transparent 65%),
    repeating-linear-gradient(35deg, rgba(242, 232, 217, .025) 0 6px, transparent 6px 14px),
    var(--deep-plum);
  box-shadow: inset 0 0 45px rgba(13, 10, 7, .75), inset 0 3px 0 rgba(242, 232, 217, .06), 0 30px 70px rgba(13, 10, 7, .88);
}
.specimen-card {
  position: absolute;
  width: clamp(210px, 25vw, 290px);
  min-height: 190px;
  padding: 1.4rem 1.35rem 1.6rem;
  color: var(--cordovan);
  background: linear-gradient(145deg, #FFF4DF, #F2E8D9 58%, #D9C9AB);
  border: 1px solid rgba(201, 168, 76, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .66), inset 0 -2px 4px rgba(45, 30, 16, .22), 0 2px 0 rgba(13, 10, 7, .8), 0 14px 34px rgba(13, 10, 7, .74);
  transform: rotate(var(--card-tilt));
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
}
.specimen-card:nth-child(1) { left: 7%; top: 9%; }
.specimen-card:nth-child(2) { right: 8%; top: 17%; }
.specimen-card:nth-child(3) { left: 22%; bottom: 10%; }
.specimen-card:nth-child(4) { right: 18%; bottom: 7%; }
.specimen-card::before, .specimen-card::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-color: var(--antique-gold); border-style: solid;
}
.specimen-card::before { top: 9px; left: 9px; border-width: 2px 0 0 2px; }
.specimen-card::after { right: 9px; bottom: 9px; border-width: 0 2px 2px 0; }
.specimen-card span { color: var(--aged-brass); }
.specimen-card h2 {
  margin: .45rem 0 .6rem;
  color: var(--obsidian);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
}
.specimen-card p { color: var(--cordovan); line-height: 1.48; }
.specimen-card.held, .specimen-card:hover {
  z-index: 5;
  transform: translateY(-8px) rotate(0deg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 4px rgba(45,30,16,.2), 0 7px 0 rgba(13,10,7,.55), 0 30px 58px rgba(13,10,7,.92);
}
.specimen-card.denied { animation: shake .3s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes shake {
  0%, 100% { transform: translateX(0) rotate(var(--card-tilt)); }
  25% { transform: translateX(-3px) rotate(var(--card-tilt)); }
  75% { transform: translateX(3px) rotate(var(--card-tilt)); }
}

.act-aurora {
  background: linear-gradient(170deg, #0D0A07 0%, #2D1B2E 40%, #3DAA7E 70%, #7B4A8E 90%, #0D0A07 100%);
}
.act-aurora::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(13,10,7,.82), transparent 45%, rgba(13,10,7,.45)); }
.aurora-layer { position: absolute; inset: -15% -20%; filter: blur(16px); }
.aurora-wide { background: linear-gradient(95deg, transparent 8%, rgba(61,170,126,.48), rgba(123,74,142,.42), transparent 82%); animation: aurora-drift 20s ease-in-out infinite alternate; }
.aurora-bright { inset: 24% -20% 8%; background: linear-gradient(90deg, transparent, rgba(61,170,126,.72), transparent 58%, rgba(123,74,142,.45), transparent); opacity: .4; filter: blur(40px); animation: aurora-drift-fast 15s ease-in-out infinite alternate; }
.star-field { inset: 0; filter: none; opacity: .58; background-image: radial-gradient(circle at 12% 18%, #F2E8D9 0 1px, transparent 2px), radial-gradient(circle at 72% 21%, #F2E8D9 0 1px, transparent 2px), radial-gradient(circle at 32% 58%, #F2E8D9 0 1px, transparent 2px), radial-gradient(circle at 86% 64%, #F2E8D9 0 1px, transparent 2px), radial-gradient(circle at 52% 36%, #F2E8D9 0 1px, transparent 2px); }
@keyframes aurora-drift { from { transform: translateX(-7%) skewX(-7deg); } to { transform: translateX(7%) skewX(8deg); } }
@keyframes aurora-drift-fast { from { transform: translateX(-13%) translateY(4%); } to { transform: translateX(14%) translateY(-3%); } }
.aurora-answer {
  position: relative; z-index: 1; padding: 0 1.5rem; color: var(--northern-light); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2.8rem, 6vw, 5.6rem); font-weight: 500; letter-spacing: .02em; text-align: center; text-shadow: 0 0 40px rgba(61, 170, 126, .4);
}
.aurora-answer.reveal { transform: translateY(20px); }
.aurora-answer.visible { transform: translateY(0); }

.act-final { background: radial-gradient(ellipse at center, rgba(201,168,76,.08), transparent 48%), #0D0A07; }
.final-hold { text-align: center; transform: scale(.96); }
.final-hold.visible { transform: scale(1); }
.compass-still { width: clamp(118px, 16vw, 160px); height: clamp(118px, 16vw, 160px); margin-bottom: 2rem; }
.closing-line { color: var(--aged-brass); line-height: 2; }

@media (max-width: 860px) {
  .journal-spread { grid-template-columns: 1fr; transform: none; }
  .page-left, .page-right, .from-left, .from-right, .from-left.visible, .from-right.visible { margin-top: 0; transform: none; }
  .journal-page { min-height: auto; }
  .annotation { position: static; width: auto; margin-top: 1.4rem; transform: rotate(-1.5deg); }
  .abstract-polaroid { display: none; }
  .specimen-tray { height: 780px; }
  .specimen-card:nth-child(1) { left: 5%; top: 5%; }
  .specimen-card:nth-child(2) { right: 5%; top: 27%; }
  .specimen-card:nth-child(3) { left: 7%; bottom: 25%; }
  .specimen-card:nth-child(4) { right: 6%; bottom: 5%; }
}
@media (max-width: 560px) {
  .compass { width: 145px; height: 145px; }
  .journal-page { padding: 2rem 1.25rem; }
  .specimen-tray { min-height: 900px; border-width: 11px; }
  .specimen-card { width: min(82vw, 280px); }
  .specimen-card:nth-child(1), .specimen-card:nth-child(2), .specimen-card:nth-child(3), .specimen-card:nth-child(4) { left: 50%; right: auto; transform: translateX(-50%) rotate(var(--card-tilt)); }
  .specimen-card:nth-child(1) { top: 4%; }
  .specimen-card:nth-child(2) { top: 28%; }
  .specimen-card:nth-child(3) { bottom: 27%; }
  .specimen-card:nth-child(4) { bottom: 4%; }
  .specimen-card.held, .specimen-card:hover { transform: translateX(-50%) translateY(-8px) rotate(0deg); }
}