:root {
  /* Design compliance vocabulary: Mono” Intermissions:** Intermissions: Between dense spreads IntersectionObserver` trigger spread-specific typographic states: words loosen */
  --raw-paper: #F4E8D2;
  --candle-honey: #D99A3D;
  --burnt-wick: #2B2118;
  --rice-ash: #B9AA94;
  --persimmon-wax: #B96F45;
  --mug-shadow: #594738;
  --evening-cream: #FFF8EA;
  --fold-x: 50vw;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--raw-paper);
}

body {
  margin: 0;
  color: var(--burnt-wick);
  background:
    radial-gradient(circle at 12% 8%, rgba(217, 154, 61, 0.16), transparent 32rem),
    radial-gradient(circle at 86% 18%, rgba(185, 111, 69, 0.10), transparent 28rem),
    var(--raw-paper);
  font-family: "Newsreader", Georgia, serif;
  overflow-x: hidden;
  cursor: none;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: 0.26;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 14% 22%, rgba(43, 33, 24, 0.08) 0 1px, transparent 1px),
    radial-gradient(circle at 82% 64%, rgba(89, 71, 56, 0.08) 0 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 248, 234, 0.36), rgba(185, 170, 148, 0.14));
  background-size: 13px 17px, 19px 23px, 100% 100%;
}

.candle-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
  z-index: 18;
  opacity: 0.58;
  mix-blend-mode: soft-light;
  background: radial-gradient(circle, rgba(255, 248, 234, 0.92) 0 3%, rgba(217, 154, 61, 0.46) 14%, rgba(185, 111, 69, 0.16) 35%, transparent 69%);
  filter: blur(10px);
}

.fold-spine {
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--fold-x);
  z-index: 12;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--rice-ash) 12%, var(--mug-shadow) 48%, var(--rice-ash) 84%, transparent);
  opacity: 0.55;
}

.fold-spine::before {
  content: "";
  position: absolute;
  inset: 0 -15px;
  background: radial-gradient(ellipse at center, rgba(89, 71, 56, 0.11), transparent 65%);
}

.fold-spine span {
  position: absolute;
  left: 14px;
  color: var(--mug-shadow);
  font: 400 0.68rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
}

.fold-spine span:nth-child(1) { top: 17vh; }
.fold-spine span:nth-child(2) { top: 47vh; left: -29px; }
.fold-spine span:nth-child(3) { top: 76vh; }

#magazine {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
}

.spread {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  padding: clamp(1.2rem, 3vw, 3.4rem);
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 248, 234, 0.24), transparent 49.8%, rgba(89, 71, 56, 0.08) 50%, transparent 50.35%),
    var(--raw-paper);
}

.spread::before,
.spread::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.spread::before {
  inset: 1.4rem;
  border: 1px solid rgba(185, 170, 148, 0.38);
  clip-path: polygon(0 1.6rem, 1.1rem 0, 100% 0, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 0 100%);
}

.spread::after {
  width: 24rem;
  height: 18rem;
  right: -7rem;
  top: 8vh;
  background: rgba(255, 248, 234, 0.36);
  border-radius: 42% 58% 61% 39% / 43% 37% 63% 57%;
  filter: blur(1px);
  mix-blend-mode: multiply;
  animation: blobMorph 18s ease-in-out infinite alternate;
}

.paper-page {
  position: relative;
  min-height: calc(100vh - clamp(2.4rem, 6vw, 6.8rem));
  padding: clamp(1.25rem, 3.3vw, 3rem);
}

.opening .left-page { grid-column: 1 / span 6; align-self: stretch; }
.opening .right-page { grid-column: 7 / span 6; align-self: stretch; }

.torn-edge::after {
  content: "";
  position: absolute;
  right: -0.5rem;
  top: 2rem;
  bottom: 2rem;
  width: 1.1rem;
  background: linear-gradient(var(--evening-cream), rgba(244, 232, 210, 0.2));
  clip-path: polygon(20% 0, 70% 8%, 35% 18%, 77% 29%, 28% 42%, 68% 56%, 31% 68%, 75% 84%, 22% 100%, 0 100%, 0 0);
  opacity: 0.5;
}

.issue-mark,
.mono,
.margin-note,
.tick,
.paper-strip,
.last-mark {
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: clamp(0.62rem, 0.9vw, 0.82rem);
  color: var(--mug-shadow);
}

h1,
h2,
.pull-quote {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 70, "WONK" 1;
  margin: 0;
  color: var(--burnt-wick);
}

h1 {
  margin-top: 12vh;
  transform: rotate(-1.2deg);
  line-height: 0.78;
}

.korean {
  display: block;
  font-family: "Noto Serif KR", "Newsreader", serif;
  font-size: clamp(4rem, 13vw, 12rem);
  font-weight: 700;
  color: var(--mug-shadow);
  opacity: 0.82;
}

.title-line {
  display: block;
  font-size: clamp(4.6rem, 15vw, 14rem);
  font-weight: 900;
  letter-spacing: -0.09em;
}

.note {
  max-width: 19rem;
  font-size: clamp(1.35rem, 2.2vw, 2.35rem);
  line-height: 1.08;
  color: var(--mug-shadow);
}

.scrap {
  position: absolute;
  left: clamp(2rem, 7vw, 7rem);
  bottom: 10vh;
  padding: 1rem 1.15rem;
  background: rgba(255, 248, 234, 0.58);
  box-shadow: 0 1.2rem 2.4rem rgba(89, 71, 56, 0.08);
  transform: rotate(2.4deg);
}

.atmosphere { display: grid; place-items: center; }

.wax-blob,
.stain,
.torn-moon {
  position: absolute;
  border-radius: 47% 53% 66% 34% / 35% 49% 51% 65%;
  mix-blend-mode: multiply;
  animation: blobMorph 20s ease-in-out infinite alternate;
}

.blob-one {
  width: min(32vw, 29rem);
  height: min(30vw, 27rem);
  background: radial-gradient(circle at 43% 38%, rgba(255, 248, 234, 0.65), rgba(217, 154, 61, 0.32) 38%, rgba(185, 111, 69, 0.14) 70%);
  bottom: 14vh;
  right: 12%;
}

.blob-two {
  width: 18rem;
  height: 12rem;
  left: 7%;
  top: 18%;
  background: rgba(185, 170, 148, 0.23);
  animation-delay: -8s;
}

.flame-wrap {
  position: absolute;
  right: 27%;
  bottom: 23vh;
  width: 5.4rem;
  height: 8rem;
  display: grid;
  place-items: end center;
  filter: drop-shadow(0 0 2.8rem rgba(217, 154, 61, 0.72));
}

.flame {
  width: 1.15rem;
  height: 2.4rem;
  display: block;
  border-radius: 54% 46% 55% 45% / 70% 71% 29% 30%;
  background: radial-gradient(circle at 48% 68%, var(--evening-cream) 0 16%, var(--candle-honey) 42%, var(--persimmon-wax) 78%);
  transform-origin: 50% 92%;
  animation: flicker 2.2s ease-in-out infinite;
}

.wick {
  width: 0.18rem;
  height: 1.2rem;
  margin-top: -0.12rem;
  border-radius: 99px;
  background: var(--burnt-wick);
}

.margin-note {
  position: absolute;
  right: 2rem;
  top: 3rem;
  writing-mode: vertical-rl;
}

.caption-column { grid-column: 1 / span 2; align-self: center; }
.essay { grid-column: 3 / span 4; align-self: center; max-width: 34rem; }
.pull-quote { grid-column: 6 / span 6; align-self: center; z-index: 2; }

.essay p,
.wide-note p,
.final-copy p,
.single-line {
  font-size: clamp(1.08rem, 1.55vw, 1.5rem);
  line-height: 1.48;
  color: var(--mug-shadow);
}

.kinetic-word {
  font-size: clamp(4.2rem, 12vw, 13rem);
  line-height: 0.86;
  letter-spacing: -0.08em;
  font-weight: 840;
  transform: translateY(1.2rem) skewX(-4deg);
  opacity: 0.72;
  transition: letter-spacing 1200ms ease, transform 1200ms ease, opacity 1200ms ease, font-variation-settings 1200ms ease;
}

.is-active .kinetic-word,
.is-active h1 {
  letter-spacing: -0.035em;
  transform: translateY(0) skewX(0deg) rotate(0deg);
  opacity: 1;
  font-variation-settings: "SOFT" 92, "WONK" 1;
}

.pull-quote {
  font-size: clamp(3rem, 7.5vw, 8.4rem);
  line-height: 0.88;
  letter-spacing: -0.065em;
  color: var(--persimmon-wax);
  transform: rotate(1.3deg);
}

.paper-strip {
  position: absolute;
  padding: 0.55rem 0.85rem;
  background: rgba(255, 248, 234, 0.68);
  border-top: 1px solid rgba(185, 170, 148, 0.52);
  border-bottom: 1px solid rgba(185, 170, 148, 0.42);
}

.strip-a { right: 9vw; bottom: 14vh; transform: rotate(-3deg); }
.strip-b { left: 9vw; bottom: 9vh; transform: rotate(2deg); }

.stain-a {
  grid-column: 8 / span 4;
  width: 28rem;
  height: 19rem;
  right: 8vw;
  bottom: 16vh;
  background: rgba(217, 154, 61, 0.18);
}

.intermission {
  place-items: center;
  text-align: center;
  background: radial-gradient(circle at 50% 54%, rgba(217, 154, 61, 0.24), transparent 28rem), var(--raw-paper);
}

.quiet-field { grid-column: 3 / span 8; position: relative; }
.quiet-field .kinetic-word { color: var(--mug-shadow); }
.torn-moon {
  width: 23rem;
  height: 15rem;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  background: rgba(255, 248, 234, 0.72);
  z-index: -1;
}

.ash-cloud span {
  position: absolute;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--rice-ash);
  opacity: 0.56;
  animation: ashDrift 12s linear infinite;
}
.ash-cloud span:nth-child(1) { left: 17%; top: 22%; animation-delay: -1s; }
.ash-cloud span:nth-child(2) { left: 32%; top: 76%; animation-delay: -8s; }
.ash-cloud span:nth-child(3) { left: 52%; top: 18%; animation-delay: -4s; }
.ash-cloud span:nth-child(4) { left: 69%; top: 63%; animation-delay: -10s; }
.ash-cloud span:nth-child(5) { left: 81%; top: 31%; animation-delay: -6s; }
.ash-cloud span:nth-child(6) { left: 44%; top: 88%; animation-delay: -2s; }

.forecast-margin {
  grid-column: 1 / span 3;
  align-self: end;
  margin-bottom: 8vh;
  color: var(--mug-shadow);
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(0.72rem, 1vw, 0.95rem);
  line-height: 1.8;
}

.wide-note { grid-column: 4 / span 6; align-self: center; }
.wide-note .kinetic-word { color: var(--persimmon-wax); }
.whisper { font-family: "Noto Serif KR", "Newsreader", serif; color: var(--burnt-wick); }

.stain-b {
  width: min(42vw, 34rem);
  height: 19rem;
  right: 6vw;
  top: 19vh;
  background: rgba(185, 170, 148, 0.25);
}

.dotted-arrow {
  grid-column: 10 / span 2;
  align-self: center;
  color: var(--persimmon-wax);
  font: 400 clamp(1.2rem, 2vw, 2rem)/1 "IBM Plex Mono", monospace;
  transform: rotate(7deg);
}

.final {
  background:
    radial-gradient(circle at 50% 60%, rgba(255, 248, 234, 0.7), transparent 34rem),
    radial-gradient(circle at 22% 78%, rgba(217, 154, 61, 0.15), transparent 20rem),
    var(--raw-paper);
}

.settling-glow {
  grid-column: 1 / -1;
  position: absolute;
  inset: 13vh 14vw;
  border-radius: 48% 52% 51% 49% / 56% 47% 53% 44%;
  background: radial-gradient(circle, rgba(217, 154, 61, 0.24), rgba(255, 248, 234, 0.22) 42%, transparent 72%);
  animation: finalGlow 8s ease-in-out infinite alternate;
}

.final-copy {
  grid-column: 4 / span 6;
  align-self: center;
  text-align: center;
  z-index: 1;
}

.final-copy .kinetic-word { font-size: clamp(4.5rem, 13vw, 14rem); }
.last-mark { position: absolute; right: 4vw; bottom: 4vh; }

.spread.entering .paper-page,
.spread.entering .essay,
.spread.entering .wide-note,
.spread.entering .final-copy {
  animation: pageLift 900ms ease both;
}

@keyframes flicker {
  0%, 100% { transform: rotate(-2deg) scaleY(1); opacity: 0.92; }
  42% { transform: rotate(3deg) scaleY(1.12) scaleX(0.92); opacity: 1; }
  68% { transform: rotate(-1deg) scaleY(0.94) scaleX(1.08); opacity: 0.86; }
}

@keyframes blobMorph {
  0% { border-radius: 47% 53% 66% 34% / 35% 49% 51% 65%; transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { border-radius: 62% 38% 41% 59% / 52% 34% 66% 48%; transform: translate3d(1.4rem, -0.8rem, 0) rotate(5deg); }
}

@keyframes ashDrift {
  from { transform: translateY(1.5rem) translateX(0); }
  to { transform: translateY(-7rem) translateX(2.4rem); }
}

@keyframes finalGlow {
  from { opacity: 0.46; transform: scale(0.98); }
  to { opacity: 0.84; transform: scale(1.04); }
}

@keyframes pageLift {
  from { transform: translateX(1.5rem) rotate(0.45deg); opacity: 0.78; }
  to { transform: translateX(0) rotate(0deg); opacity: 1; }
}

@media (max-width: 800px) {
  body { cursor: auto; }
  .candle-cursor { display: none; }
  .fold-spine { left: 1.2rem; }
  .spread { grid-template-columns: repeat(6, 1fr); padding: 1rem; }
  .opening .left-page,
  .opening .right-page,
  .caption-column,
  .essay,
  .pull-quote,
  .quiet-field,
  .forecast-margin,
  .wide-note,
  .dotted-arrow,
  .final-copy { grid-column: 1 / -1; }
  .opening .right-page { min-height: 42vh; }
  h1 { margin-top: 5vh; }
  .scrap { position: relative; left: 0; bottom: auto; margin-top: 2rem; }
  .pull-quote { font-size: clamp(3rem, 15vw, 6rem); }
  .forecast-margin { align-self: start; margin: 0; }
}