@font-face {
  font-family: "Pretendard";
  src: url("./fonts/PretendardVariable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --black: #000000;
  --black-2: #111111;
  --paper: #ffffff;
  --white: #ffffff;
  --grey: rgba(255, 255, 255, .48);
  --deep-grey: rgba(255, 255, 255, .2);
  --purple: #9577ff;
  --lavender: #b69ffe;
  --violet: #7858ff;
  --magenta-purple: #9b6eff;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --edge: clamp(32px, 4vw, 64px);
  --safe-top: clamp(88px, 9vh, 116px);
  --primary: clamp(54px, 7vw, 108px);
  --scene-title: clamp(28px, 3vw, 44px);
  --letter: clamp(18px, 1.6vw, 27px);
  --annotation: clamp(14px, 1vw, 18px);
}

html { background: #000; max-width: 100%; overflow-x: clip; }
body,
button,
input,
textarea,
select {
  font-family: "Pretendard", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { background: #000; color: #fff; max-width: 100%; overflow-x: clip; }
p, h1, h2, h3, span, button { word-break: keep-all; }

/* Navigation — always occupies a separate safe zone. */
.nav {
  top: 0;
  height: var(--safe-top);
  padding: clamp(22px, 2.5vw, 40px) var(--edge) 0;
  align-items: flex-start;
}
.brand img { width: clamp(58px, 4.6vw, 78px); }
.nav nav { gap: clamp(18px, 2.2vw, 38px); }
.nav nav a {
  font-family: "Pretendard", sans-serif;
  font-size: clamp(13px, .86vw, 15px);
  font-weight: 500;
  letter-spacing: .08em;
  opacity: .3;
}
.nav nav a.active { opacity: .92; }
.chapter {
  top: var(--safe-top);
  right: var(--edge);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  color: rgba(255,255,255,.44);
}
.progress {
  right: clamp(14px, 2vw, 30px);
  top: 27vh;
  bottom: 20vh;
  background: rgba(255,255,255,.14);
}

/* Shared hierarchy: label → title → primary narrative. */
.feature-label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 8px;
  width: min(520px, 44vw);
}
.feature-label > span,
.feature-label h2 {
  display: inline;
  margin: 0;
  color: rgba(255,255,255,.58);
  font-family: "Pretendard", sans-serif;
  font-size: clamp(13px, 1vw, 17px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .08em;
}
.feature-label > span::after { content: " —"; }
.feature-label p {
  grid-column: 1 / -1;
  margin: clamp(18px, 2vw, 30px) 0 0;
  color: #fff;
  font-size: var(--scene-title);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.035em;
}
.dark-label > span,
.dark-label h2 { color: rgba(0,0,0,.52); }
.dark-label p { color: #000; }

/* Opening. */
.opening { background: #000; }
.opening-sticky { padding-inline: var(--edge); }
.opening-letter {
  left: max(var(--edge), calc((100vw - 1180px) / 2));
  top: clamp(31vh, 38vh, 42vh);
  max-width: min(760px, 78vw);
  font-size: var(--letter);
  line-height: 1.72;
  letter-spacing: -.02em;
}
.stuck-copy {
  font-size: var(--annotation);
  line-height: 1.55;
  letter-spacing: -.015em;
  color: rgba(255,255,255,.44);
}
.reading { font-size: 14px; letter-spacing: .04em; }
.hero-reveal { padding: clamp(22vh, 25vh, 29vh) var(--edge) 8vh; }
.hero-reveal h1 {
  margin-left: clamp(0px, 6vw, 112px);
  font-size: clamp(68px, 8vw, 138px);
  line-height: .94;
  letter-spacing: -.055em;
  font-weight: 600;
}
.hero-reveal > p,
.scroll-cue { margin-left: clamp(0px, 6.4vw, 120px); }
.scroll-cue { left: var(--edge); font-size: 13px; }

/* MEMORY = REVEAL. */
.memory { background: #000; overflow-x: clip; }
.memory-sticky::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(70vw, 1100px);
  height: min(62vw, 860px);
  right: -12vw;
  top: 23vh;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(149,119,255,.34) 0%, rgba(182,159,254,.13) 34%, rgba(149,119,255,0) 72%);
  filter: blur(54px);
  opacity: 0;
  transform: scale(.72);
  transition: opacity 1.1s var(--ease), transform 1.3s var(--ease);
  pointer-events: none;
}
.memory.active .memory-sticky::before { opacity: .72; transform: scale(1); }
.memory.letter-mode .memory-sticky::before { opacity: .08; }
.memory-sentence {
  left: var(--edge);
  top: clamp(28vh, 33vh, 37vh);
  max-width: min(1100px, 86vw);
}
.memory-sentence p {
  font-size: var(--primary);
  line-height: 1.01;
  letter-spacing: -.042em;
  font-weight: 600;
}
.active-note {
  margin-top: 22px;
  font-family: "Pretendard", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
}
.memory-photo {
  width: min(48vw, 760px);
  top: max(var(--safe-top), 15vh);
}
.memory-photo figcaption {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.012em;
  color: rgba(255,255,255,.48);
}
.memory-label { left: var(--edge); bottom: clamp(48px, 7vh, 80px); }
.memory-letter {
  top: max(var(--safe-top), 10vh);
  left: max(8vw, calc((100vw - 900px) / 2));
  width: min(900px, 84vw);
  min-height: 78vh;
}
.letter-surface {
  background: #fff;
  color: #000;
  border-radius: 14px;
}
.memory-letter p {
  font-size: var(--letter);
  line-height: 1.72;
  letter-spacing: -.02em;
}
.memory-copy mark { color: var(--violet); }
.quiet-action { color: rgba(0,0,0,.58); border-color: rgba(0,0,0,.24); font-size: 14px; }
.embedded-memory span { color: rgba(0,0,0,.42); font-size: 13px; }

/* STORY = EXPAND. */
.story { background: #fff; color: #000; }
.story-sticky::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(72vw, 1180px);
  height: min(34vw, 520px);
  left: 15vw;
  top: 36vh;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(182,159,254,.23) 0%, rgba(155,110,255,.08) 38%, rgba(155,110,255,0) 72%);
  filter: blur(64px);
  opacity: .18;
  transform: scale(.78);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
  pointer-events: none;
}
.story.trace .story-sticky::before,
.story.expanded .story-sticky::before { opacity: .55; transform: scale(1); }
.story.expanded .story-sticky::before { opacity: .14; }
.story-label {
  left: var(--edge);
  top: var(--safe-top);
}
.story-source {
  left: clamp(var(--edge), 11vw, 200px);
  top: clamp(42vh, 47vh, 51vh);
  width: min(1100px, 86vw);
}
.story-source p {
  display: block;
  max-width: min(1100px, 86vw);
  font-size: var(--primary);
  line-height: 1.02;
  letter-spacing: -.042em;
  font-weight: 600;
}
.questions {
  position: absolute;
  left: clamp(var(--edge), 11vw, 200px);
  top: calc(clamp(42vh, 47vh, 51vh) + clamp(86px, 8vw, 132px));
  display: flex;
  gap: clamp(24px, 4vw, 72px);
}
.questions span,
.questions span:nth-child(1),
.questions span:nth-child(2) {
  position: static;
  color: rgba(0,0,0,.42);
  font-size: var(--annotation);
  line-height: 1.5;
  letter-spacing: -.02em;
}
.story.trace .story-source {
  left: var(--edge);
  top: 42vh;
  width: 45vw;
}
.story.trace .story-source p { font-size: clamp(50px, 5vw, 80px); }
.traces {
  left: 55vw;
  top: 35vh;
  width: min(38vw, 620px);
}
.traces > p { font-family: "Pretendard", sans-serif; font-size: 13px; letter-spacing: .1em; color: rgba(0,0,0,.38); }
.traces button {
  border-color: rgba(0,0,0,.14);
  color: rgba(0,0,0,.4);
  font-size: var(--annotation);
  letter-spacing: -.015em;
}
.traces button.selected { color: #000; }
.expanded-story {
  left: max(var(--edge), calc((100vw - 1100px) / 2));
  top: 32vh;
  width: min(1100px, 86vw);
}
.expanded-story p {
  font-size: clamp(46px, 5.1vw, 80px);
  line-height: 1.12;
  letter-spacing: -.042em;
  font-weight: 600;
}
.expanded-story .after { color: #000; }
.expanded-story small { font-family: "Pretendard", sans-serif; font-size: 14px; }

/* Bridge stays one letter sentence, not a new section. */
.bridge { background: #fff; color: #000; }
.bridge > div { margin-left: max(var(--edge), 12vw); }
.bridge p {
  max-width: min(1100px, 86vw);
  font-size: var(--primary);
  line-height: 1.04;
  letter-spacing: -.042em;
  font-weight: 600;
}
.bridge.dark { background: #000; color: rgba(255,255,255,.3); }
.bridge.dark .future-line { color: #fff; }

/* FUTURE = TRANSFORM. */
.future { background: #000; overflow-x: clip; }
.future-intro {
  min-height: 140vh;
  padding: var(--safe-top) var(--edge) 14vh;
  display: grid;
  grid-template-columns: minmax(300px, 5fr) minmax(520px, 7fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(48px, 7vw, 140px);
}
.future-intro::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(92vw, 1500px);
  height: min(72vw, 1000px);
  right: -20vw;
  top: 10vh;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(120,88,255,.62) 0%, rgba(149,119,255,.3) 28%, rgba(155,110,255,.12) 48%, rgba(149,119,255,0) 74%);
  filter: blur(76px);
  opacity: .72;
  pointer-events: none;
}
.future-intro > * { position: relative; z-index: 1; }
.future-intro .feature-label { grid-column: 1; grid-row: 1; width: min(460px, 34vw); }
.future-copy {
  position: relative;
  left: auto;
  top: auto;
  grid-column: 2;
  grid-row: 1;
  padding-top: clamp(110px, 15vh, 178px);
}
.future-copy h3 {
  max-width: min(920px, 56vw);
  font-size: var(--primary);
  line-height: 1.01;
  letter-spacing: -.044em;
  font-weight: 600;
}
.future-copy p {
  margin-top: 30px;
  color: rgba(255,255,255,.58);
  font-size: clamp(22px, 2vw, 34px);
  line-height: 1.35;
  letter-spacing: -.025em;
}
.future-selector {
  position: relative;
  left: auto;
  top: auto;
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  width: min(720px, 52vw);
  margin-top: clamp(70px, 11vh, 130px);
}
.future-selector > p { font-size: var(--annotation); color: rgba(255,255,255,.56); }
.future-selector fieldset { border-color: rgba(255,255,255,.16); }
.future-selector legend,
.future-selector button,
.future-selector .imagine { font-family: "Pretendard", sans-serif; }
.future-selector legend { color: rgba(255,255,255,.42); font-size: 13px; }
.future-selector button { color: rgba(255,255,255,.34); font-size: 14px; }
.future-selector button.active { color: var(--lavender); }
.future-selector .imagine { color: #fff; font-size: 14px; border-color: rgba(255,255,255,.3); }
.mask-word { font-family: "Pretendard", sans-serif; font-weight: 700; }
.word-sticky > span,
.scene-progress,
.keep-scene,
.future-saved { font-family: "Pretendard", sans-serif; }
.future-gallery-sticky { background: #000; }
.future-gallery-sticky::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(120,88,255,.38), rgba(149,119,255,0) 64%);
  opacity: .5;
  transition: opacity .9s var(--ease);
}
.future-gallery.breathe .future-gallery-sticky::before { opacity: 0; }
.future-statement p { font-weight: 600; }

/* Completed letter is the white viewport itself, never a paper card. */
.complete {
  position: relative;
  z-index: 160;
  min-height: 280vh;
  background: #fff;
  color: #000;
  padding: clamp(180px, 22vh, 260px) var(--edge) clamp(180px, 24vh, 300px);
  display: block;
}
.complete-letter {
  width: min(840px, 78vw);
  margin: 0 auto;
  padding: 0;
  background: transparent;
  color: #000;
  border-radius: 0;
}
.complete-letter header {
  margin-bottom: clamp(80px, 12vh, 140px);
  color: rgba(0,0,0,.48);
  font-family: "Pretendard", sans-serif;
  font-size: clamp(14px, 1vw, 17px);
  font-weight: 500;
  letter-spacing: .02em;
}
.complete-letter p {
  margin-bottom: clamp(34px, 4.2vh, 54px);
  font-size: var(--letter);
  line-height: 1.75;
  letter-spacing: -.02em;
  font-weight: 450;
}
.complete-letter img {
  width: 78%;
  margin: clamp(62px, 8vh, 94px) 0 clamp(76px, 10vh, 116px);
  border-radius: 14px;
  box-shadow: none;
}
.complete-future {
  width: 100%;
  aspect-ratio: 16 / 10;
  margin: clamp(72px, 9vh, 108px) 0 clamp(76px, 10vh, 116px);
  border-radius: 14px;
}
.complete-letter .sign { margin-top: clamp(70px, 9vh, 110px); }
.complete-caption {
  position: relative;
  top: auto;
  width: min(840px, 78vw);
  margin: clamp(96px, 14vh, 160px) auto 0;
  text-align: right;
}
.complete-caption small {
  color: rgba(0,0,0,.48);
  font-size: var(--annotation);
  font-weight: 500;
}

/* Brand-only ending. */
.outro { z-index: 160; background: #000; }
.outro-brand { background: #000; }
.outro-brand p { font-weight: 600; }
.outro-brand small { color: rgba(255,255,255,.42); font-size: 14px; }
.outro footer { display: none; }

/* Desktop: keep the composition fluid between 1280 and 1920. */
@media (min-width: 1600px) {
  .memory-photo { width: min(45vw, 820px); }
  .story-source { left: max(var(--edge), calc((100vw - 1440px) / 2)); }
  .questions { left: max(var(--edge), calc((100vw - 1440px) / 2)); }
  .complete-letter, .complete-caption { width: min(880px, 62vw); }
}

@media (max-width: 1279px) {
  :root { --edge: clamp(28px, 4vw, 48px); --safe-top: 92px; }
  .progress { opacity: .55; }
  .feature-label { width: min(520px, 58vw); }
  .memory-photo { width: min(58vw, 680px); }
  .story-label { top: var(--safe-top); }
  .story-source { left: var(--edge); width: calc(100vw - (var(--edge) * 2)); }
  .questions { left: var(--edge); }
  .story.trace .story-source { left: var(--edge); top: 31vh; width: calc(100vw - (var(--edge) * 2)); }
  .traces { left: var(--edge); top: 56vh; width: calc(100vw - (var(--edge) * 2)); }
  .future-intro {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    min-height: 165vh;
    align-content: start;
  }
  .future-intro .feature-label { grid-column: 1; grid-row: 1; width: min(580px, 74vw); }
  .future-copy { grid-column: 1; grid-row: 2; padding-top: clamp(90px, 12vh, 140px); margin-left: clamp(4vw, 10vw, 130px); }
  .future-copy h3 { max-width: 78vw; }
  .future-selector { grid-column: 1; grid-row: 3; width: min(760px, 78vw); margin-left: clamp(4vw, 10vw, 130px); }
  .complete-letter, .complete-caption { width: min(820px, 84vw); }
}

@media (max-width: 767px) {
  :root {
    --edge: 22px;
    --safe-top: 78px;
    --primary: clamp(48px, 14vw, 72px);
    --scene-title: clamp(26px, 8vw, 36px);
    --letter: clamp(18px, 5vw, 22px);
    --annotation: 14px;
  }
  .nav { height: var(--safe-top); padding: 22px var(--edge) 0; }
  .nav nav { gap: 10px; }
  .nav nav a { font-size: 11px; letter-spacing: .05em; }
  .brand img { width: 54px; }
  .progress {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    opacity: .38;
  }
  .progress i { width: var(--progress, 0%); height: 1px; }
  .progress b { display: none; }
  .chapter { top: 63px; font-size: 11px; }
  .feature-label { width: 100%; }
  .feature-label > span, .feature-label h2 { font-size: 13px; }
  .opening { height: 180vh; }
  .opening-letter { left: var(--edge); top: 30vh; max-width: calc(100vw - 44px); }
  .hero-reveal { padding: 30vh var(--edge) 8vh; }
  .hero-reveal h1 { margin-left: 0; font-size: clamp(54px, 16vw, 78px); line-height: .96; }
  .hero-reveal > p { margin-left: 0; max-width: 76vw; font-size: 14px; line-height: 1.5; }
  .scroll-cue { left: var(--edge); margin-left: 0; }
  .memory { height: 270vh; }
  .memory-sentence { left: var(--edge); top: 27vh; max-width: calc(100vw - 44px); }
  .memory-photo { width: 82vw; top: 35vh; }
  .memory-label { left: var(--edge); bottom: 7vh; width: calc(100vw - 44px); }
  .memory-letter { left: 4vw; width: 92vw; top: var(--safe-top); }
  .memory.letter-mode .memory-photo { display: none; }
  .story { height: 270vh; }
  .story-label { left: var(--edge); top: var(--safe-top); width: calc(100vw - 44px); }
  .story-source { left: var(--edge); top: 43vh; width: calc(100vw - 44px); }
  .story-source p { max-width: 100%; }
  .questions { left: var(--edge); right: var(--edge); top: 61vh; gap: 18px; flex-direction: column; }
  .story.trace .story-source { left: var(--edge); top: 30vh; width: calc(100vw - 44px); }
  .story.trace .story-source p { font-size: clamp(42px, 11vw, 60px); }
  .traces { left: var(--edge); top: 52vh; width: calc(100vw - 44px); }
  .expanded-story { left: var(--edge); top: 34vh; width: calc(100vw - 44px); }
  .expanded-story p { font-size: clamp(35px, 9.3vw, 48px); line-height: 1.16; }
  .bridge { height: 150vh; padding-top: 27vh; }
  .bridge > div { margin-left: var(--edge); top: 30vh; }
  .future-intro { min-height: 178vh; padding: var(--safe-top) var(--edge) 12vh; }
  .future-intro .feature-label { width: 100%; }
  .future-copy { margin-left: 0; padding-top: 18vh; }
  .future-copy h3 { max-width: 100%; }
  .future-copy p { font-size: 22px; }
  .future-selector { width: 100%; margin-left: 0; margin-top: 12vh; }
  .future-selector fieldset { grid-template-columns: 66px repeat(4,minmax(42px,1fr)); }
  .future-selector legend { width: 66px; font-size: 11px; }
  .future-selector button { font-size: 11px; }
  .word-transform { height: 190vh; }
  .mask-word { font-size: 29vw; transform: none !important; }
  .future-gallery { height: 260vh; }
  .future-statement { left: var(--edge); bottom: 13vh; }
  .future-statement p { font-size: clamp(44px, 13vw, 64px); }
  .scene-progress { right: var(--edge); }
  .complete { min-height: 230vh; padding: 18vh var(--edge) 22vh; }
  .complete-letter, .complete-caption { width: 100%; }
  .complete-letter header { margin-bottom: 12vh; }
  .complete-letter img { width: 84%; }
  .complete-future { width: 100%; }
  .three-words { font-size: 12vw; }
  .outro-brand p { font-size: 26px; }
}

@media (max-height: 760px) and (min-width: 768px) {
  :root { --safe-top: 76px; --primary: clamp(50px, 6.2vw, 84px); --scene-title: clamp(26px, 2.7vw, 38px); }
  .nav { padding-top: 20px; }
  .story-label, .future-intro { top: auto; }
  .story-source { top: 43vh; }
  .questions { top: 60vh; }
  .story.trace .story-source { top: 34vh; }
  .traces { top: 50vh; }
  .expanded-story { top: 30vh; }
  .future-copy { padding-top: 12vh; }
  .future-selector { margin-top: 7vh; }
  .complete { padding-top: 18vh; }
}

@media (prefers-reduced-motion: reduce) {
  .memory-sticky::before,
  .story-sticky::before,
  .future-intro::before { filter: blur(40px); }
}