/* story.css — twelve chapters, twelve photographs, one road */

/* ---------- cover ---------- */
.story-cover{
  min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center;
  padding:7rem 1.4rem 5rem; position:relative; z-index:10;
  background:radial-gradient(60% 50% at 50% 30%, rgba(201,164,92,.07), transparent);
}
.story-cover .display{ font-size:clamp(3rem,10vw,7.5rem); }
.cover-line{
  margin-top:2rem; font-size:clamp(1.15rem,3vw,1.6rem); color:var(--bone-dim);
}
.cover-note{
  margin-top:3rem; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone-dim); opacity:.85; line-height:2.1;
}
.cover-note a{ border-bottom:1px dotted var(--brass); }
.cover-scroll{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  font-size:.68rem; letter-spacing:.4em; text-transform:uppercase; color:var(--bone-dim);
}
.cover-scroll span{ display:block; text-align:center; color:var(--brass); margin-top:.5rem; animation:bob-d 2s ease-in-out infinite; }
@keyframes bob-d{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

/* language switcher */
.langs{
  display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center;
  margin-top:2.8rem;
}
.lang-btn{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-dim);
  background:none; border:1px solid var(--line-2); border-radius:999px;
  padding:.55rem 1.1rem; cursor:pointer;
  transition:color .25s, border-color .25s, background .25s, transform .25s;
}
.lang-btn:hover{ color:var(--brass-hi); border-color:var(--brass); transform:translateY(-2px); }
.lang-btn.active{
  color:var(--ink); background:var(--brass); border-color:var(--brass);
}

/* ---------- chapters ---------- */
.chapters{ position:relative; }
.chapter{
  position:relative;
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(2.5rem,6vw,6rem);
  align-items:center;
  min-height:100svh;
  padding:clamp(4rem,9vh,7rem) clamp(1.2rem,5vw,4.5rem);
}
.chapter.flip .stage{ order:2; }
.chapter.flip .ch-text{ order:1; }
.chapter.flip .ch-no{ right:auto; left:clamp(1rem,4vw,3rem); }

/* giant numeral behind */
.ch-no{
  position:absolute; right:clamp(1rem,4vw,3rem); top:8%; z-index:0;
  font-family:var(--serif); font-weight:300; line-height:.8;
  font-size:clamp(8rem,20vw,17rem);
  color:transparent; -webkit-text-stroke:1px rgba(201,164,92,.20);
  user-select:none; pointer-events:none;
}

/* photo stage — the 3D print (kept compact) */
.stage{
  position:relative; z-index:1; perspective:1300px;
  width:100%; max-width:min(420px, 38vw);
  margin-inline:auto;
}
.frame{
  transform-style:preserve-3d;
  opacity:1;                      /* no-JS safety: photos always visible */
  will-change:transform,opacity;
}
.frame-hover{ position:relative; transform-style:preserve-3d; transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.frame-mask{
  overflow:hidden; border-radius:3px; aspect-ratio:4/5;
  border:1px solid var(--line-2);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  background:var(--ink-3);
}
.frame-mask img{
  width:100%; height:118%; object-fit:cover; object-position:center 25%;
  filter:saturate(.85) contrast(1.05);
  will-change:transform;
}
/* ghost layer — depth behind the print */
.frame-hover::before{
  content:""; position:absolute; inset:14px -14px -14px 14px;
  border:1px solid rgba(201,164,92,.25); border-radius:3px;
  transform:translateZ(-50px); pointer-events:none;
}
.stage figcaption{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--bone-dim); margin-top:.9rem;
}

/* text */
.ch-text{ position:relative; z-index:1; }
.ch-text h2{
  font-family:var(--serif); font-weight:300; letter-spacing:-.01em;
  font-size:clamp(1.9rem,4.6vw,3.1rem); line-height:1.08; margin-bottom:1.6rem;
}
.ch-text p{ margin-bottom:1.15rem; max-width:32rem; }
.ch-text p.dim{ max-width:30rem; }
.ch-punch{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.25rem,3vw,1.65rem); line-height:1.45; color:var(--brass-hi);
}
.ch-quote{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.9rem,5vw,3rem); line-height:1.2; color:var(--brass-hi);
  text-shadow:0 0 40px rgba(201,164,92,.2); margin:1.6rem 0;
}
.ch-text pre{
  background:var(--ink-3); border:1px solid var(--line); border-radius:3px;
  padding:.9rem 1.1rem; overflow-x:auto; margin:1.2rem 0;
}
.ch-text pre code{ border-bottom:none; font-size:.82rem; }

/* ---------- coda ---------- */
.story-coda{
  min-height:88svh; display:flex; flex-direction:column; justify-content:center;
  align-items:center; text-align:center;
  padding:6rem 1.4rem;
  background:radial-gradient(70% 60% at 50% 55%, rgba(13,12,10,.88), rgba(13,12,10,.5));
}
.story-coda .display-m{ max-width:26ch; margin:.8rem auto; }
.coda-sign{ margin-top:2.6rem; color:var(--brass); font-size:.76rem; letter-spacing:.3em; }
.coda-cta{ display:flex; gap:2.4rem; align-items:center; flex-wrap:wrap; justify-content:center; margin-top:3.2rem; }

/* text-only chapters (no photograph) */
.chapter.textonly{ grid-template-columns:1fr; min-height:78svh; }
.chapter.textonly .ch-text{ max-width:40rem; }
.chapter.textonly.flip .ch-text{ order:0; }

/* ---------- responsive ---------- */
@media (max-width: 1200px){
  .stage{ max-width:min(400px, 42vw); }
  .ch-no{ font-size:clamp(7rem,18vw,13rem); }
}
@media (max-width: 980px){
  .chapter{ grid-template-columns:1fr; gap:2.4rem; align-items:start; padding-top:5rem; }
  .chapter.flip .stage{ order:0; }
  .stage{ max-width:min(420px, 88vw); }
  .ch-no{ font-size:clamp(6.5rem,24vw,10rem); top:1.5%; opacity:.85; }
  .ch-text p{ margin-inline:auto; }
}
@media (max-width: 760px){
  .chapter{ min-height:auto; padding-block:3.6rem; }
  .stage{ max-width:min(360px, 92vw); }
  .chapter.flip .ch-text{ order:0; }
  .ch-text h2{ font-size:clamp(1.7rem,7.5vw,2.4rem); }
  .ch-quote{ font-size:clamp(1.6rem,8vw,2.4rem); }
  .ch-punch{ font-size:clamp(1.15rem,5.5vw,1.5rem); }
  .story-coda{ min-height:auto; padding:5rem 1.2rem; }
  .story-coda .display-m{ font-size:clamp(1.5rem,7vw,2.4rem); }
}
@media (max-width: 420px){
  .stage{ max-width:94vw; }
  .chapter{ padding-inline:1rem; }
}
@media (prefers-reduced-motion: reduce){
  .frame{ opacity:1; }
  .cover-scroll span{ animation:none; }
}