:root{
  --ink:#0a1733;
  --night:#0d1f4a;
  --deep:#060d22;
  --cerulean:#3f7fd6;
  --sky:#8bb6ec;
  --rose:#ff9ec4;
  --blush:#f7c4da;
  --gold:#f6d06b;
  --starlight:#fff4cb;
  --cloud:#d6e6ff;
  --paper:#f1e7d2;
  --paper-edge:#e4d6b6;
  --vermilion:#e8503a;
  --text-soft:#dfe8fb;
  --shadow: 0 30px 70px -30px rgba(3,8,28,.8);
  --maxw: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--deep);
  color:var(--text-soft);
  font-family:"Spectral",Georgia,serif;
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ───────── paper frame + grain (poster homage) ───────── */
.paper-frame{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  border:14px solid var(--paper);
  box-shadow:
    inset 0 0 0 1px var(--paper-edge),
    inset 0 0 36px rgba(8,14,36,.55);
}
.paper-frame::after{
  content:""; position:absolute; inset:14px;
  box-shadow:inset 0 0 120px rgba(4,9,26,.5);
}
@media(max-width:640px){ .paper-frame{border-width:8px} }

.grain{
  position:fixed; inset:0; z-index:59; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ───────── global starfield ───────── */
#stars{ position:fixed; inset:0; z-index:0; pointer-events:none; }

/* ───────── flight progress line ───────── */
.flightline{
  position:fixed; top:0; left:0; width:3px; height:100vh; z-index:55;
  background:linear-gradient(to bottom, rgba(246,208,107,.05), rgba(246,208,107,.12));
}
.flightline span{
  position:absolute; top:0; left:0; width:100%; height:0%;
  background:linear-gradient(to bottom,var(--gold),var(--rose));
  box-shadow:0 0 14px var(--gold);
}

/* ───────── top bar ───────── */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px clamp(28px,5vw,72px);
  mix-blend-mode:screen;
}
.brand{
  font-family:"Fraunces",serif; font-weight:600; font-size:24px;
  letter-spacing:.04em; color:var(--starlight);
  text-shadow:0 2px 18px rgba(0,0,0,.6);
}
.brand-dot{color:var(--vermilion)}
.topbar nav{display:flex; gap:clamp(16px,3vw,40px)}
.topbar nav a{
  font-family:"Fraunces",serif; font-size:13px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cloud);
  opacity:.85; transition:opacity .3s, color .3s;
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}
.topbar nav a:hover{opacity:1; color:var(--gold)}
@media(max-width:640px){ .topbar nav a:not(:last-child){display:none} }

/* ───────── journey plane (scroll-driven thread) ───────── */
#journey-plane{
  position:fixed; top:0; left:0; z-index:40;
  width:clamp(108px,12vw,172px);
  opacity:0; will-change:transform,opacity; pointer-events:none;
  transition:opacity .8s var(--ease);
  filter:drop-shadow(0 18px 22px rgba(4,9,26,.55));
}
#journey-plane img{width:100%}
/* ───────── HERO ───────── */
.hero{
  position:relative; height:100vh; min-height:660px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; isolation:isolate;
}
.hero-bg{
  position:absolute; inset:-4% -2%; z-index:-2;
  background-size:cover; background-position:center 38%;
  will-change:transform;
}
.hero-veil{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 80% at 50% 12%, transparent 40%, rgba(6,13,34,.45) 100%),
    linear-gradient(to bottom, rgba(6,13,34,.30), transparent 30% 62%, rgba(6,13,34,.78));
}
.hero-copy{ text-align:center; padding:0 24px; transform:translateY(-3vh); position:relative; }
.hero-copy::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(900px,92vw); height:130%; z-index:-1;
  background:radial-gradient(60% 58% at 50% 50%, rgba(6,12,32,.55), rgba(6,12,32,.28) 55%, transparent 78%);
  filter:blur(8px);
}
.eyebrow{
  font-family:"Fraunces",serif; font-weight:500; font-style:italic;
  font-size:clamp(14px,1.6vw,19px); letter-spacing:.42em; text-transform:uppercase;
  color:var(--starlight); margin-bottom:.7em; padding-left:.42em;
  text-shadow:0 2px 10px rgba(0,0,0,.85), 0 0 30px rgba(0,0,0,.6);
}
.title{
  font-family:"Fraunces",serif; font-weight:600;
  font-size:clamp(58px,13vw,168px); line-height:.92; letter-spacing:-.01em;
  color:#fff; text-shadow:0 6px 40px rgba(7,12,34,.6);
}
.subtitle{
  font-family:"Fraunces",serif; font-style:italic; font-weight:400;
  font-size:clamp(22px,4vw,46px); color:var(--blush); margin-top:.1em;
  text-shadow:0 3px 26px rgba(0,0,0,.5);
}
.tagline{
  margin-top:1.4em; font-size:clamp(15px,1.7vw,20px); font-style:italic;
  color:var(--cloud); letter-spacing:.02em;
  text-shadow:0 2px 18px rgba(0,0,0,.6);
}

/* hero plane — looping crossing */
.hero-plane{
  position:absolute; top:48%; left:-16%; z-index:1;
  width:clamp(120px,14vw,210px);
  animation:fly-across 19s linear infinite;
  filter:drop-shadow(0 16px 20px rgba(4,9,26,.5));
}
.hero-plane img{ width:100%; animation:bob 4.6s ease-in-out infinite; }
@keyframes fly-across{
  0%{ left:-16%; top:56%; opacity:0 }
  8%{ opacity:1 }
  50%{ top:42% }
  92%{ opacity:1 }
  100%{ left:114%; top:38%; opacity:0 }
}
@keyframes bob{ 0%,100%{transform:translateY(0) rotate(-1.5deg)} 50%{transform:translateY(-10px) rotate(1.5deg)} }

/* scroll hint */
.scroll-hint{
  position:absolute; bottom:6vh; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:"Fraunces",serif; font-style:italic; font-size:13px;
  letter-spacing:.32em; text-transform:uppercase; color:var(--cloud);
  z-index:2; opacity:.9;
}
.chevron{ width:11px; height:11px; border-right:1.5px solid var(--gold);
  border-bottom:1.5px solid var(--gold); transform:rotate(45deg);
  animation:nudge 1.8s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{transform:rotate(45deg) translate(0,0); opacity:.4} 50%{transform:rotate(45deg) translate(4px,4px); opacity:1} }

/* ───────── ACTS ───────── */
.act{ position:relative; z-index:1; padding:clamp(90px,15vh,180px) clamp(28px,5vw,72px); }
.act.dark{ background:linear-gradient(to bottom,var(--deep),var(--ink) 50%,var(--deep)); }
.act.darker{ background:linear-gradient(to bottom,var(--deep),#04081a); }
.act-inner{ max-width:var(--maxw); margin:0 auto; }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,96px); align-items:center; }
.split.reverse .art{ order:2 }
@media(max-width:860px){ .split{grid-template-columns:1fr; gap:40px} .split.reverse .art{order:0} }

.art{ position:relative; border-radius:4px; overflow:hidden;
  box-shadow:var(--shadow), 0 0 0 1px rgba(255,255,255,.06);
  background:#0a1530; }
.art img{ width:100%; transition:transform 1.4s var(--ease); }
.art:hover img{ transform:scale(1.04); }
.art.tall img{ max-height:78vh; object-fit:cover; width:100%; }
.art figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:28px 22px 16px;
  font-family:"Fraunces",serif; font-style:italic; font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cloud);
  background:linear-gradient(transparent,rgba(4,9,26,.82));
}

.chapter{
  font-family:"Fraunces",serif; font-style:italic; font-weight:500;
  font-size:14px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1em;
}
.chapter.light{color:var(--starlight)}
.act-text h2{
  font-family:"Fraunces",serif; font-weight:500;
  font-size:clamp(34px,5.4vw,68px); line-height:1.02; color:#fff;
  letter-spacing:-.01em; margin-bottom:.6em;
}
.lede{ font-size:clamp(16px,1.4vw,20px); color:var(--text-soft); max-width:46ch; margin-bottom:1.8em; }

blockquote{ border-left:2px solid var(--rose); padding-left:24px; max-width:48ch; }
.q-en{ font-family:"Fraunces",serif; font-style:italic; font-weight:400;
  font-size:clamp(18px,1.9vw,25px); line-height:1.45; color:var(--blush); }
.q-kr{ margin-top:.8em; font-size:14px; color:var(--sky); opacity:.75; letter-spacing:.01em; }

/* ───────── RISE / CTA ───────── */
.rise{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; padding:120px 24px; }
.rise-bg{ position:absolute; inset:-4%; z-index:-2; background-size:cover; background-position:center 60%; will-change:transform; }
.rise-veil{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(6,13,34,.55), rgba(6,13,34,.35) 40%, rgba(6,13,34,.85)); }
.rise-copy{ max-width:760px; }
.rise-copy h2{ font-family:"Fraunces",serif; font-weight:600;
  font-size:clamp(40px,8vw,96px); line-height:.98; color:#fff;
  text-shadow:0 6px 40px rgba(7,12,34,.6); margin-bottom:.5em; }
blockquote.big{ border:none; padding:0; margin:0 auto 2.4em; max-width:40ch; }
blockquote.big .q-en{ font-size:clamp(20px,2.6vw,30px); color:var(--starlight); }

.preorder{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:1.2em; }
.preorder input{
  font-family:"Spectral",serif; font-size:16px; padding:15px 20px; width:min(340px,80vw);
  border:1px solid rgba(214,230,255,.3); border-radius:2px;
  background:rgba(6,13,34,.45); color:#fff; backdrop-filter:blur(6px);
}
.preorder input::placeholder{ color:rgba(214,230,255,.55); font-style:italic; }
.preorder input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(246,208,107,.18); }
.preorder button{
  font-family:"Fraunces",serif; font-weight:600; font-size:15px; letter-spacing:.06em;
  padding:15px 30px; border:none; border-radius:2px; cursor:pointer;
  color:#2a0d08; background:linear-gradient(135deg,var(--gold),var(--rose));
  box-shadow:0 12px 30px -10px rgba(246,208,107,.6); transition:transform .25s var(--ease), box-shadow .25s; }
.preorder button:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -12px rgba(246,208,107,.8); }
.fineprint{ font-style:italic; font-size:14px; color:var(--cloud); opacity:.8; }
.form-status{ min-height:1.2em; margin-bottom:1em; font-family:"Fraunces",serif; font-style:italic;
  font-size:clamp(17px,2vw,22px); letter-spacing:.01em; }
.form-status.ok{ color:var(--gold); text-shadow:0 0 24px rgba(246,208,107,.35); }
.form-status.err{ color:#ff9ec4; }

/* ───────── footer ───────── */
footer{ background:#04081a; padding:70px clamp(28px,5vw,72px) 90px; position:relative; z-index:1; }
.foot-inner{ max-width:var(--maxw); margin:0 auto; text-align:center; }
.foot-title{ font-family:"Fraunces",serif; font-weight:600; font-size:30px; color:#fff; }
.foot-title span{ font-style:italic; font-weight:400; color:var(--blush); }
.foot-credit{ margin-top:14px; color:var(--cloud); }
.foot-credit a{ color:var(--gold); border-bottom:1px solid rgba(246,208,107,.4); }
.foot-small{ margin-top:8px; font-size:13px; color:var(--sky); opacity:.6; letter-spacing:.04em; }

/* ───────── reveals ───────── */
.reveal,.reveal-up{ opacity:0; }
.reveal{ transform:translateY(14px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-up{ transform:translateY(38px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in,.reveal-up.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{transition-delay:.12s}
.reveal[data-d="2"]{transition-delay:.26s}
.reveal[data-d="3"]{transition-delay:.42s}
.reveal[data-d="4"]{transition-delay:.6s}

/* ───────── gallery page ───────── */
.gallery-page{ min-height:100vh; }
.gallery-hero{ text-align:center; padding:clamp(120px,18vh,200px) 24px clamp(40px,7vh,80px); position:relative; z-index:1; }
.gallery-hero .eyebrow{ color:var(--gold); }
.gallery-hero h1{ font-family:"Fraunces",serif; font-weight:600; font-size:clamp(46px,9vw,108px); color:#fff; line-height:.96; letter-spacing:-.01em; }
.gallery-hero .lede{ margin:1.2em auto 0; max-width:52ch; font-style:italic; color:var(--cloud); font-size:clamp(16px,1.6vw,20px); }
.gallery-grid{ position:relative; z-index:1; max-width:1300px; margin:0 auto; padding:0 clamp(20px,4vw,56px) 120px;
  column-count:3; column-gap:26px; }
@media(max-width:980px){ .gallery-grid{ column-count:2; } }
@media(max-width:620px){ .gallery-grid{ column-count:1; } }
.g-card{ break-inside:avoid; margin:0 0 26px; border-radius:6px; overflow:hidden; position:relative;
  box-shadow:var(--shadow), 0 0 0 1px rgba(255,255,255,.06); background:#0a1530;
  opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.g-card.in{ opacity:1; transform:none; }
.g-card img{ width:100%; display:block; transition:transform 1.5s var(--ease); }
.g-card:hover img{ transform:scale(1.05); }
.g-cap{ position:absolute; left:0; right:0; bottom:0; padding:42px 22px 18px;
  background:linear-gradient(transparent, rgba(4,9,26,.88)); }
.g-cap h3{ font-family:"Fraunces",serif; font-weight:600; font-size:24px; color:#fff; margin-bottom:.2em; }
.g-cap p{ font-family:"Spectral",serif; font-style:italic; font-size:14px; color:var(--cloud); }
.gallery-back{ display:block; text-align:center; padding:0 0 90px; }
.gallery-back a{ font-family:"Fraunces",serif; font-style:italic; letter-spacing:.16em; text-transform:uppercase;
  font-size:13px; color:var(--gold); border-bottom:1px solid rgba(246,208,107,.4); padding-bottom:3px; }

@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  .reveal,.reveal-up{opacity:1; transform:none}
  #journey-plane{display:none}
}