/* HandForge — 종이와 잉크.
   레이아웃 계약은 higgsfield scroll-scrub-asset-css 를 이식했다:
   sticky 100dvh 스테이지 + inset:0 미디어 + 챕터 레이어 opacity 교차 + --ss-progress. */

:root{
  /* 작품의 매트가 순백이라 페이지도 순백이어야 캔버스 경계가 안 보인다.
     따뜻한 종이색은 글 섹션과 카피 카드에만 쓴다. */
  --paper:#ffffff;
  --tint:#f6f4ef;
  --ink:#14110f;
  --ink-soft:#5c554e;
  --line:#ddd6ca;
  --accent:#c4482a;
  --measure:34rem;
  --ss-progress:0;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
    "Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  font-size:17px;
  line-height:1.72;
  letter-spacing:-.01em;
  overflow-x:hidden;
  word-break:keep-all;
}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
h1,h2{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1.16}
p{margin:0}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:#eae5db;padding:.1em .38em;border-radius:3px}

.wrap{max-width:70rem;margin:0 auto;padding:0 clamp(1.25rem,5vw,4rem)}
.kicker{
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin-bottom:1rem;
}
.lede{color:var(--ink-soft);max-width:var(--measure)}

/* ── 진행 레일 ─────────────────────────────────────── */
.rail{position:fixed;top:0;left:0;right:0;height:2px;z-index:50;background:transparent}
.rail i{
  display:block;height:100%;background:var(--accent);
  transform-origin:0 50%;
  transform:scaleX(var(--ss-progress));
}

/* ── 히어로 ───────────────────────────────────────────
   진행률은 하나(--p), 층은 셋. scrub.js 의 rAF 루프가 --p 만 찍고
   구간 절단은 전부 여기 clamp() 가 한다. 스크롤을 읽기만 하고 바꾸지 않는다.

   animation-timeline: view() 를 쓰지 않은 이유 — Safari 26.0+ 라
   iOS 16~18 사용자가 개선 전 화면을 본다. 진행률 드라이버는 하나여야 한다. */
.hero{
  position:relative; height:100dvh;      /* JS 없으면 정지 히어로 한 장 */
  background:var(--paper);
  --p:0;
  /* 카메라(--cam-*)는 herodraw.js 가 age 맵에서 뽑은 경로로 매 프레임 찍는다 */
  --cam-x:0px; --cam-y:0px; --cam-z:1;
  --dry:  clamp(0, calc((var(--p) - .08) / .50), 1);    /* 0.08–0.58 지면 표백 */
  --rule: clamp(0, calc((var(--p) - .05) / .12), 1);    /* 0.05–0.17 버밀리언 룰 */
  --exit: clamp(0, calc((var(--p) - .14) / .10), 1);    /* 0.14–0.24 제목 카드 퇴장 */
  --hand: clamp(0, calc((var(--p) - .90) / .10), 1);    /* 0.90–1.00 잉크 걷힘 */
}
/* 소개가 순서대로 흐를 자리. 그리기와 카피가 같은 스크롤을 나눠 쓴다. */
.js .hero{height:520vh}

.hero-stage{
  position:sticky;top:0;height:100dvh;
  display:grid;place-items:center;
  overflow:clip;        /* ★ sticky 자신에게만. .hero 나 조상에 걸면
                             히어로와 챕터 3개의 sticky 가 동시에 죽는다 */
  isolation:isolate;    /* ★ multiply 격리. 빼면 아래 챕터 캔버스까지 물든다 */
  background:var(--paper);
}

/* 젖은 종이. 마르면서 순백이 드러난다 — 히어로와 챕터의 지면색이 갈리던 걸
   경계선 대신 서사로 바꾼다 */
.hero-damp{
  grid-area:1/1;position:absolute;inset:0;z-index:0;
  background:var(--tint);opacity:calc(1 - var(--dry));
  pointer-events:none;
}

/* 종이. 카메라가 그림 위를 훑으므로 종이는 지면 그 자체다 — 움직이지 않는다. */
.hero-paper{
  grid-area:1/1;position:absolute;inset:0;z-index:1;
  pointer-events:none;background:var(--paper);
  opacity:calc(1 - var(--hand));
}

/* 타이포는 종이 위(z2), 잉크 아래(z3). 종이와 함께 커지지 않는다 —
   활자는 설계된 크기 그대로 있고 종이가 그 주위로 자란다. */
.hero-type{
  grid-area:1/1;position:relative;z-index:2;
  width:min(48rem,100%);padding:0 clamp(1.25rem,5vw,4rem);text-align:center;
  transform:translate3d(0,calc(var(--exit) * -11vh),0);  /* 스크롤과 같은 방향 */
  opacity:calc(1 - var(--exit));
  pointer-events:none;
  will-change:transform;
}

/* ── 소개 시퀀스 ─────────────────────────────────────
   챕터 카피와 같은 계약(data-from/to → .on)이고 자리·생김새도 같다.
   히어로 그림이 밀도가 높아 그 위에 글을 얹으면 본문이 안 읽힌다 —
   그래서 잉크보다 위(z4)에 종이판을 깔고 얹는다. 아래 챕터로 그대로 이어진다. */
.hero-beats{
  grid-area:1/1;position:relative;z-index:4;
  width:100%;height:100%;pointer-events:none;
}
.hero-beats article{
  position:absolute;
  left:clamp(1.5rem,4vw,3.5rem);
  bottom:clamp(1.5rem,4vw,3.5rem);
  max-width:min(30rem,72vw);
  /* 제자리 페이드가 아니라 지나간다 — 오른쪽에서 들어와 왼쪽으로 빠진다.
     카메라 진행 방향과 같아 하나의 흐름으로 읽힌다. */
  opacity:0;transform:translate3d(64px,0,0);
  transition:opacity .42s ease,transform .52s cubic-bezier(.22,.61,.36,1);
  background:var(--tint);
  padding:1.15rem 1.3rem 1.25rem;
  border-left:2px solid var(--accent);
  box-shadow:0 1px 24px rgba(20,17,15,.07);
}
.hero-beats article.on{opacity:1;transform:none}
.hero-beats article.past{opacity:0;transform:translate3d(-64px,0,0)}
.hero-beats .num{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;letter-spacing:.18em;color:var(--accent);margin-bottom:.45rem;
}
.hero-beats h2{font-size:clamp(1.35rem,3.4vw,2rem);margin-bottom:.5rem}
.hero-beats p:not(.num){font-size:.95rem;color:var(--ink-soft);line-height:1.65}
.hero h1{font-size:clamp(3rem,11vw,7.5rem);margin:.08em 0 .5em}
.hero-rule{
  display:block;width:min(22rem,60%);height:1px;margin:0 auto 1.5rem;
  background:var(--accent);
  transform:scaleX(var(--rule));transform-origin:0 50%;
}
.hero .lede{margin:0 auto;font-size:clamp(1rem,2.2vw,1.2rem)}
.hero .lede span{display:block}
.hero .lede span:nth-child(2){opacity:calc(1 - var(--exit) * 1.6)}

/* 잉크 층. 종이와 정확히 같은 배율로 자란다.
   ★ mix-blend-mode 는 자식(video)이 아니라 이 요소에 건다.
     transform 이 스택 컨텍스트를 만들기 때문에 자식에 걸면 블렌딩이 이 안에
     갇혀 영상이 불투명 흰 사각형이 되고 아래 타이포를 통째로 덮는다.
     이 요소에 걸어야 그룹 전체가 배후(종이+활자)와 곱해진다. */
.hero-ink{
  grid-area:1/1;position:relative;z-index:3;
  width:100%;height:100%;pointer-events:none;
  /* 카메라 무브 — 펜 끝에 붙어 시작해 손을 훑고 전체로 빠진다.
     translate+scale 뿐이라 컴포지터에서만 돈다. */
  transform:translate3d(var(--cam-x),var(--cam-y),0) scale(var(--cam-z));
  /* 제목이 떠 있는 동안은 잉크를 옅게 깐다. 잉크가 활자 **위**에 있어서
     뒤에 스크림을 깔아도 소용없고(활자까지 씻긴다), 위에 깔면 활자가 지워진다.
     농도를 낮추는 게 유일하게 둘 다 사는 길이다 — 제목이 빠지면서 잉크가
     제 농도로 올라온다. 곱셈은 그대로라 활자는 어떤 순간에도 밝아지지 않는다. */
  opacity:calc((1 - var(--hand)) * (1 - .58 * (1 - var(--exit))));
  mix-blend-mode:multiply;
  will-change:transform;
}
.hero-draw canvas{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;
  /* ★ 여기에 filter 를 걸면 WebKit 에서 부모의 multiply 가 무시된다. */
}
/* 종이 위에서는 커서가 펜이다. .hero-ink 는 pointer-events:none 이라
   커서 모양은 무대에 건다(그리기 입력은 window 에서 좌표로 받는다). */
.hero-stage{cursor:crosshair}

/* multiply 미지원이면 잉크가 활자를 덮는 불투명 판이 된다 — 강등시킨다 */
@supports not (mix-blend-mode:multiply){
  .hero-ink{opacity:.4}
}

.hero .scroll-hint{
  grid-area:1/1;position:relative;z-index:6;align-self:end;margin:0 0 3rem;
  opacity:calc(1 - clamp(0, calc(var(--p) / .12), 1));  /* 내리기 시작하면 스스로 사라진다 */
}
.scroll-hint span{
  font-size:.72rem;letter-spacing:.3em;color:var(--ink-soft);
  display:inline-block;animation:nudge 2.4s ease-in-out infinite;
}
.scroll-hint span::after{content:"";display:block;width:1px;height:2.6rem;
  margin:.8rem auto 0;background:linear-gradient(var(--ink-soft),transparent)}
@keyframes nudge{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(6px);opacity:1}}

/* ── 스크럽 챕터 ──────────────────────────────────── */
.chapter{position:relative;height:var(--len,400vh)}
.stage{
  position:sticky;top:0;height:100dvh;overflow:hidden;
  display:grid;place-items:center;
}
.stage .frame{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;
  /* 캔버스는 종이색 위에 얹힌다 — 여백이 페이지와 이어지도록 */
  background:var(--paper);
}

.copy{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(1.5rem,4vw,3.5rem);
  pointer-events:none;
}
.copy article{
  position:absolute;
  left:clamp(1.5rem,4vw,3.5rem);
  bottom:clamp(1.5rem,4vw,3.5rem);
  max-width:min(30rem,72vw);
  opacity:0;transform:translateY(12px);
  transition:opacity .45s ease,transform .45s ease;
  background:var(--tint);
  padding:1.15rem 1.3rem 1.25rem;
  border-left:2px solid var(--accent);
  box-shadow:0 1px 24px rgba(20,17,15,.07);
}
.copy article.on{opacity:1;transform:none}
.copy .num{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;letter-spacing:.18em;color:var(--accent);margin-bottom:.45rem;
}
.copy h2{font-size:clamp(1.35rem,3.4vw,2rem);margin-bottom:.5rem}
.copy p:not(.num){font-size:.95rem;color:var(--ink-soft);line-height:1.65}

/* ── 만드는 법 ────────────────────────────────────── */
.how{background:var(--tint);padding:clamp(5rem,12vh,9rem) 0;border-top:1px solid var(--line)}
.how h2{font-size:clamp(1.9rem,5vw,3.2rem);margin-bottom:1.4rem}
.steps{
  list-style:none;margin:3.5rem 0 0;padding:0;
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
}
.steps li{background:var(--tint);padding:1.6rem 1.5rem 1.8rem}
.steps b{display:block;font-size:1.02rem;margin-bottom:.5rem}
.steps p{font-size:.9rem;color:var(--ink-soft);line-height:1.62}

/* ── 필름 ─────────────────────────────────────────── */
.films{padding:clamp(5rem,12vh,9rem) 0;border-top:1px solid var(--line)}
.films h2{font-size:clamp(1.9rem,5vw,3.2rem);margin-bottom:2.5rem}
.grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.grid video{
  width:100%;aspect-ratio:16/9;display:block;background:var(--tint);
  border:1px solid var(--line);
}
figure{margin:0}
figcaption{display:flex;flex-direction:column;gap:.15rem;padding-top:.7rem}
figcaption b{font-size:.98rem}
figcaption span{font-size:.82rem;color:var(--ink-soft)}

footer{
  background:var(--tint);
  padding:clamp(3.5rem,8vh,6rem) 0 5rem;
  border-top:1px solid var(--line);
  color:var(--ink-soft);font-size:.87rem;
}
footer p+p{margin-top:.5rem}
footer .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.76rem;margin-top:1.6rem;opacity:.6}

/* 모바일 세로. 히어로 시작 크기를 크게 잡지 않으면 손이 우표만 해진다.
   스크롤 길이 상한도 여기서 못 박는다 — 200vh 면 첫 문장까지 세 화면을 긁는다. */
@media (max-width:820px){
  .js .hero{height:400vh}
}
@media (max-width:640px){
  body{font-size:16px}
  .copy article{max-width:none;right:clamp(1.5rem,4vw,3.5rem)}
}

/* 모션 줄이기 — '큰 움직임'만 뺀다.
   순서대로 뜨는 것 자체는 전정계 자극이 아니므로 구조는 그대로 둔다.
   카메라 패닝·줌, 카드 슬라이드, 시차 이동만 세우고 나머지는 유지한다.
   (이전에는 여기서 스테이지를 display:block 으로 바꿔 그리드를 죽였고,
    그 결과 첫 화면이 백지가 되고 소개가 글 무더기로 쌓였다.) */
@media (prefers-reduced-motion:reduce){
  .chapter{height:auto}
  .stage{position:static;height:auto;padding:2rem 0}
  .stage .frame{position:static;height:auto}
  .copy{position:static;padding:1rem 0;display:grid;gap:1rem}
  .copy article{position:static;opacity:1;transform:none;max-width:none}
  .scroll-hint span{animation:none}

  .hero-ink{transform:none}                 /* 카메라 정지 */
  .hero-type{transform:none}                /* 시차 이동 없이 페이드만 */
  .hero-beats article,
  .hero-beats article.past{transform:none}  /* 슬라이드 없이 페이드만 */
}