@font-face {
  font-family: "Pretendard Local";
  src: url("../fonts/pretendard/PretendardVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Expanded";
  src: url("../fonts/archivo/ArchivoExpanded-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
/* 모노 등록부 — 라틴과 한글을 unicode-range로 갈라, 수치·날짜·호수가 한글 파일을 기다리지 않는다.
   서브셋 빌드 = tools/build_mono_subset.py (KS X 1001 완성형 2350 커버, 조용한 폴백 0). */
@font-face {
  font-family: Jetendard;
  src: url("../fonts/jetendard/jetendard-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2070-209F, U+20A0-20BF, U+2100-214F, U+2190-21FF, U+2200-22FF;
}
@font-face {
  font-family: Jetendard;
  src: url("../fonts/jetendard/jetendard-kr.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+1100-11FF, U+3000-303F, U+30FB, U+3130-318F, U+AC00-D7A3, U+FF01-FF60;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces/fraunces-latin-vf.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif KR Head";
  src: url("../fonts/noto-serif-kr/noto-serif-kr-head.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
:root {
  color-scheme: light;
  /* 순백 금지(brand-soul §5 팔레트). 지면은 종이색이지 백지가 아니다.
     보조 표면 --concrete(#e5e4de)는 여전히 이보다 어두우므로 층위는 유지된다. */
  --paper: #edebe6;
  --ivory: #f4f0e8;   /* 표면 아님 — 어두운 구독 막의 글자색으로만 쓴다 */
  --warm: var(--ivory);
  --concrete: #e5e4de;
  --ink: #141820;
  --navy: #1f3a5c;
  --wine: #74232f;
  --ink-soft: #42454b;
  /* 순백(#fff) 위에서 이미 4.30 으로 AA 미달이던 값이다 — 지면을 #edebe6 으로
     내리면서 3.82 까지 떨어져 5곳(등록부 키·근거줄·미점등 판정어·막 전환줄·
     보조 설명)이 한꺼번에 걸렸다. 지면 휘도에서 역산한 하한이 약 #696969 이라
     그보다 어둡게 잡는다. 이 값을 밝히려면 지면부터 다시 재라. */
  --muted: #63666c;
  --line: rgba(23, 25, 30, .17);
  --line-soft: rgba(23, 25, 30, .09);
  --orange: #c6551e;
  --orange-dark: #a94317;
  --error: #a72d24;
  --success: #275f49;
  --sans: "Pretendard Local", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif;
  --wordmark: "Archivo Expanded", "Arial Black", sans-serif;
  --serif: "Fraunces", "Noto Serif KR Head", "Pretendard Local", Georgia, serif;
  --mono: Jetendard, "SFMono-Regular", Consolas, monospace;
  --shell: 1360px;
  --gutter: clamp(24px, 4.8vw, 76px);
  --header: 72px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-material: cubic-bezier(.77, 0, .18, 1);
  --display: clamp(3.35rem, 5.35vw, 4.4rem);
  --heading: clamp(2.35rem, 3.7vw, 3.1rem);
  --lead: clamp(1.08rem, 1.35vw, 1.24rem);
  --body: 1.0625rem;
  --small: .875rem;
  --label: .875rem;
  /* 모노 등록부(THE INSTRUMENT). 규칙 하나 — 모노로 조판된 것은 따라가서 확인할 수 있는 것이다.
     수치·날짜·호수·출처·판정·범위만 이 자리에 오르고, 장식으로는 쓰지 않는다. */
  --reg: .875rem;
  --reg-sm: .8125rem;
  /* 한글 기본 자간 0(캐논 §3). 벌어진 모노 라벨은 이 시대의 복제판이기도 하다 —
     등록부는 자간이 아니라 정렬·색·hairline으로 구분한다. 트래킹은 라틴·숫자에만. */
  --reg-track: 0;
  --stamp-track: .04em;
  /* 계기 축 — 모든 막이 같은 축에 등록된다. 막마다 다른 그리드를 쓰는 건 잡지고,
     같은 축을 끝까지 쥐는 것이 계기판이다. 축을 그리지 않고 정렬로 세운다:
     이미 있는 등록부 hairline들이 같은 x에서 시작하면 그 자체가 계기면이 된다. */
  --axis-read: minmax(0, 1.06fr);
  --axis-inst: minmax(320px, .72fr);
  --axis-gap: clamp(56px, 8vw, 132px);
  --axis-row: clamp(48px, 7vw, 96px);
  --rail: clamp(76px, 8vw, 108px);
  --wire-hairline: rgba(23, 25, 30, .24);
  --wire-live: var(--orange);
  --scene-ink: multiply;
  --scene-opacity: .22;
  --scene-feather: 14%;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-synthesis: none;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.68;
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
  hyphens: manual;
}
p,
li,
blockquote,
dd { text-wrap: pretty; }
[hidden] { display: none !important; }
button,
input { font: inherit; }
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
}
strong,
b {
  font-weight: 600;
}
img,
canvas {
  display: block;
  max-width: 100%;
}
picture { display: block; }
[id] { scroll-margin-top: calc(var(--header) + 24px); }
::selection { background: var(--orange); color: #fff; }
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--orange);
}
.skip-link {
  position: fixed;
  inset: 12px auto auto 12px;
  z-index: 1200;
  min-height: 44px;
  padding: 10px 14px;
  translate: 0 -180%;
  background: var(--ink);
  color: #fff;
  font-size: var(--small);
  text-decoration: none;
  transition: translate .18s ease-out;
}
.skip-link:focus { translate: 0; }
.site-shell {
  width: min(100%, var(--shell));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header);
  padding-inline: var(--gutter);
  background: color-mix(in srgb, var(--paper) 91%, transparent);
  color: var(--ink);
  backdrop-filter: blur(14px) saturate(.82);
}
.site-header::after {
  content: "";
  position: absolute;
  right: var(--gutter);
  bottom: 0;
  left: var(--gutter);
  height: 1px;
  background: var(--line-soft);
}
/* ── 브랜드 워드마크 아웃라인 ─────────────────────────────────
   웹폰트(Archivo Expanded) 로딩 실패 시 --wordmark 폴백이 "Arial Black" 이라
   브랜드 워드마크가 통째로 치환되던 결함을 없앤다. 캐논 §3 "합성 볼드 절대 금지"는
   워드마크에서도 지켜져야 한다 — 이제 아웃라인이라 폰트에 의존하지 않는다.
   높이 = .687em (Archivo Expanded cap/em = 687/1000) → 기존 텍스트 렌더와 같은 크기.
   fill: currentColor 라 forced-colors(고대비)에서도 사라지지 않는다. */
.brand-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wm {
  display: block;
  height: .687em;      /* Archivo Expanded cap/em = 687/1000 → 기존 텍스트와 같은 크기 */
  width: auto;         /* svg 의 width/height 속성이 종횡비를 준다 — 없으면 300x150 기본값으로 떨어진다 */
  fill: currentColor;
}
.colophon__publisher {
  display: inline-flex;
  align-items: center;
}
/* HOLDENVOID 는 모브랜드 자산 — CI 사용가이드 §3 최소 가로 120px 를 지킨다 */
.wm-hv {
  display: block;
  width: 124px;        /* CI 사용가이드 §3 최소 가로 120px */
  height: auto;
  fill: currentColor;
}

.site-header__mark {
  font-family: var(--wordmark);
  font-size: 1.04rem;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
}
.site-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.2vw, 34px);
}
.site-header__nav a {
  font-size: .84rem;
  text-decoration: none;
}
/* Opening sequence */
.preload { display: none; }
.js .preload {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: block;
  min-height: 100dvh;
  overflow: hidden;
  /* Transparent so the assembling wire (or its static fallback) shows through from the
     hero stage below — the preloader IS the wire coming online, not a photo over it.
     The page's own paper is the ground. */
  background: transparent;
  color: var(--ink);
  isolation: isolate;
  animation: preload-failsafe .01s linear 2.85s forwards;
}
/* While the instrument boots, only the wire + boot HUD read. Everything the now-
   transparent preloader would otherwise let show through (hero copy, the header,
   the verify rail) stays down. CSS-guaranteed, not JS-timed — no flash. */
.js body.is-preloading .hero__copy,
.js body.is-preloading .hero__turn,
.js body.is-preloading .site-header,
.js body.is-preloading .verify-line {
  opacity: 0 !important;
}
/* faint instrument bezel — four corner reticles frame the field the wire assembles in */
.preload__field {
  position: absolute;
  inset: clamp(16px, 3vw, 46px);
  z-index: 1;
  border: 1px solid var(--line-soft);
  opacity: .55;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) top left / 26px 26px no-repeat,
    linear-gradient(#000 0 0) top right / 26px 26px no-repeat,
    linear-gradient(#000 0 0) bottom left / 26px 26px no-repeat,
    linear-gradient(#000 0 0) bottom right / 26px 26px no-repeat;
  mask:
    linear-gradient(#000 0 0) top left / 26px 26px no-repeat,
    linear-gradient(#000 0 0) top right / 26px 26px no-repeat,
    linear-gradient(#000 0 0) bottom left / 26px 26px no-repeat,
    linear-gradient(#000 0 0) bottom right / 26px 26px no-repeat;
}
.preload__mark {
  position: fixed;
  z-index: 920;
  top: clamp(24px, 4.8vw, 76px);
  left: var(--gutter);
  font-family: var(--wordmark);
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  line-height: 1;
  letter-spacing: 0;
}
.preload__readout {
  position: fixed;
  z-index: 920;
  left: var(--gutter);
  bottom: clamp(34px, 5vw, 72px);
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 30px);
}
.preload__stat {
  font-family: var(--mono);
  font-size: var(--reg-sm);
  letter-spacing: var(--stamp-track);
  color: var(--ink-soft);
  white-space: nowrap;
  min-width: 6em; /* stages don't shove the axis as the label changes */
}
/* The axis being ruled: ink draws left→right with --boot, an orange reticle rides its
   leading edge (도착 지점). An axis drawn into being, not a fill bar. */
.preload__axis {
  position: relative;
  width: min(300px, 42vw);
  height: 12px;
  background: linear-gradient(var(--ink), var(--ink)) left center / calc(var(--boot, 0) * 100%) 1px no-repeat;
}
.preload__axis::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--line);
  transform: translateY(-50%);
  z-index: -1;
}
.preload__axis::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--boot, 0) * 100%);
  width: 1px;
  height: 12px;
  background: var(--orange);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 7px rgba(198, 85, 30, .55);
}
.preload.is-complete {
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}
@keyframes preload-failsafe {
  to {
    visibility: hidden;
    pointer-events: none;
  }
}
main {
  position: relative;
  z-index: 2;
}
.eyebrow,
.section-label {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: var(--reg-track);
}
.eyebrow {
  color: var(--muted);
}
.section-label {
  color: var(--muted);
}
/* ── 모노 등록부 ──────────────────────────────────────────────────────────────
   활자가 검증을 수행한다. 산세리프는 사람의 문장(주장·설명)을, 모노는 확인 가능한
   것(수치·날짜·호수·출처·판정·범위)을 맡는다. 모노가 붙었는데 따라갈 데가 없으면
   그건 등록부의 거짓말이므로, 수치는 근거를 같은 화면에 데리고 다닌다. */
.reg {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--wire-hairline);
  list-style: none;
  font-family: var(--mono);
  font-size: var(--reg);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--reg-track);
  line-height: 1.5;
}
.reg > div {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 6px 20px;
  align-items: baseline;
  padding: 13px 0 14px;
  border-bottom: 1px solid var(--line-soft);
}
.reg__key {
  color: var(--muted);
}
.reg__val {
  margin: 0;
  color: var(--ink);
}
.reg__basis {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: var(--reg-sm);
}
/* 라틴·숫자 전용 표식(호수·발행일) — 한글에는 쓰지 않는다. */
.stamp {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--stamp-track);
}
.verdict {
  display: inline-flex;
  align-items: baseline;
  gap: .55em;
  font-family: var(--mono);
  font-size: var(--reg);
  white-space: nowrap;
}
.verdict::before {
  content: "";
  align-self: center;
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--orange);
}
/* 아직 내려지지 않은 판정 — 자리는 있고 불은 꺼져 있다. */
.verdict--idle {
  color: var(--muted);
}
.verdict--idle::before {
  background: none;
  box-shadow: inset 0 0 0 1px var(--wire-hairline);
}
/* ── 막간 전환 ────────────────────────────────────────────────────────────────
   막이 끝나는 자리에서 다음 막으로 넘기는 한 줄. 6막이 각자 처음부터 다시
   시작하지 않게, 이야기를 구조로 박아 둔다. 계기 열에 놓여 축에서 시작한다. */
.act-turn {
  position: relative;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: var(--axis-read) var(--axis-inst);
  column-gap: var(--axis-gap);
  margin: clamp(58px, 8vw, 108px) 0 0;
  padding-top: 19px;
  color: var(--muted);
  font-size: var(--small);
  line-height: 1.66;
}
/* 경계선은 그어지는 것이다. 막이 끝나면 축을 따라 한 줄이 그어지고, 그 위에
   다음 막으로 넘기는 문장이 앉는다. JS 없으면 --turn-draw 미정의 = 이미 그어진 상태. */
.act-turn::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--wire-hairline);
  transform: scaleX(var(--turn-draw, 1));
  transform-origin: left center;
}
.act-turn > span { grid-column: 2; }
/* 등록부 값은 ` · `로 끊어 읽는 나열이다. 줄바꿈도 그 마디에서만 일어나야
   "쓰기는 사람 / 승인 뒤"처럼 구절이 두 동강 나지 않는다. */
.reg__val { word-break: keep-all; overflow-wrap: break-word; }
/* 전환선이 막의 마지막 줄이면 그 선이 곧 경계다. 원래의 바닥 여백을 그대로
   두면 선 아래에 200px가 넘는 죽은 공간이 생겨 "넘긴다"가 "끝났다"로 읽힌다. */
main > section:has(.act-turn) { padding-bottom: clamp(76px, 9vw, 128px); }
.verdict-set {
  display: grid;
  gap: 9px;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
}
.verdict-set li {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
/* 판정어는 라벨로 던지지 않는다 — 무엇을 뜻하는지 옆에 붙여야 판정이 된다. */
.verdict-set small {
  color: var(--muted);
  font-size: var(--reg-sm);
}
.hero h1,
.sample h2,
.evidence h2,
.difference h2,
.publisher h2,
.subscribe h2 {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -.03em;
}
.hero h1 {
  max-width: 16ch;
  font-size: clamp(3rem, 7.4vw, 6.9rem);
  line-height: 1.0;
  letter-spacing: -.035em;
  /* No text-wrap: balance — it breaks Korean headlines at the wrong points and the
     line break here is authored with <br>. Wrapping is controlled by keep-all. */
  word-break: keep-all;
}
.sample h2,
.evidence h2,
.publisher h2,
.subscribe h2 {
  max-width: 16em;
  font-size: var(--heading);
  line-height: 1.14;
}
.button,
.subscribe-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background .28s ease, border-color .28s ease, color .28s ease, translate .28s var(--ease);
}
.button--primary,
.subscribe-button {
  background: var(--ink);
  color: #fff;
}
.button:hover,
.subscribe-button:hover:not(:disabled) {
  border-color: var(--orange);
  background: var(--orange);
  color: #fff;
  translate: 0 -2px;
}
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: .93rem;
  text-decoration-color: var(--line);
}
.text-link:hover {
  color: var(--orange-dark);
  text-decoration-color: currentColor;
}
/* Hero — full-bleed paper field; the wire is a foreground ink layer that
   multiplies over the headline (see the chroma override further down). */
.hero {
  position: relative;
  min-height: max(760px, 104svh);
  overflow: clip;
  background: var(--paper);
  isolation: isolate;
}
.hero__layout {
  position: relative;
  z-index: 5;
  display: grid;
  align-items: center;
  min-height: 100svh;
  padding-top: calc(var(--header) + clamp(58px, 7vh, 104px));
  padding-bottom: clamp(92px, 10vh, 136px);
}
.hero__copy {
  display: grid;
  justify-items: start;
  width: 100%;
  max-width: 1120px;
}
.hero__copy .eyebrow {
  margin-bottom: clamp(30px, 4.5vh, 58px);
}
.hero__copy h1 {
  margin-bottom: clamp(28px, 3.4vh, 40px);
}
.hero__lead {
  position: relative;
  z-index: 7;
  max-width: 35rem;
  margin: 0;
  padding-left: 22px;
  border-left: 1px solid var(--wire-hairline);
  color: var(--ink-soft);
  font-size: var(--lead);
  line-height: 1.72;
}
.hero__actions {
  position: relative;
  z-index: 7;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 34px;
}
/* Hero stage — full-bleed generative 3D signal wire behind the headline.
   Resolution-independent (never pixelates); a static poster shows when 3D bails. */
.hero-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.hero-stage__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.hero-stage__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 42%;
  opacity: .92;
}
.hero-3d-on .hero-stage__fallback { display: none; }
.no-hero-3d .hero-stage__canvas { display: none; }
/* Paper halo keeps the left-aligned headline legible over the 3D wire. */
.hero-3d-on .hero__copy { position: relative; }
.hero-3d-on .hero__copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8% -22% -12% -14%;
  background: radial-gradient(120% 88% at 22% 46%, var(--paper) 0%, rgba(255,255,255,.7) 44%, transparent 76%);
  pointer-events: none;
}
/* Scroll-through: the hero becomes a tall track, the canvas sticks to the
   viewport while the wire unspools tangle -> one line, then releases into Process.
   Gated to the 3D path; the static/fallback hero keeps its normal height. */
.hero-3d-on .hero {
  min-height: 200svh;
  overflow: visible;
}
.hero-3d-on .hero-stage {
  position: sticky;
  inset: auto;
  top: 0;
  height: 100svh;
  width: 100%;
  overflow: hidden;
}
.hero-3d-on .hero__layout {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
/* ── 단자(terminal) ────────────────────────────────────────────────────────────
   전선이 물리 오브젝트이길 그만두고 지면의 규칙이 되는 지점. 3D 선의 끝은 여기
   계기 축(§5)에 착지하고, 핀이 켜지면서 hairline이 지면 오른쪽 끝까지 이어진다.
   축이 무너지는 좁은 화면에서는 단자를 두지 않는다 — 꽂을 데가 없으면 전선은
   그냥 화면 밖으로 나간다(가짜 단자를 만들지 않는다). */
.hero-terminal { display: none; }
.hero-3d-on .hero-terminal {
  position: absolute;
  inset-block: 0;
  left: 50%;
  translate: -50% 0;
  display: grid;
  grid-template-columns: var(--axis-read) var(--axis-inst);
  column-gap: var(--axis-gap);
  align-content: center;
  width: min(100%, var(--shell));
  padding-inline: var(--gutter);
  pointer-events: none;
}
.hero-terminal__pin,
.hero-terminal__rule {
  grid-column: 2;
  align-self: center;
}
.hero-terminal__pin {
  justify-self: start;
  width: 7px;
  height: 7px;
  background: var(--line);
  transition: background .32s var(--ease);
}
.hero-terminal__rule {
  justify-self: stretch;
  height: 1px;
  margin-left: 7px;
  background: var(--wire-hairline);
  scale: 0 1;
  transform-origin: left center;
  transition: scale .72s var(--ease);
}
.wire-landed .hero-terminal__pin { background: var(--orange); }
.wire-landed .hero-terminal__rule { scale: 1 1; }
/* 도착 캡션 — 3D 경로에서 죽어 있던 문장을 착지 순간으로 되살린다.
   계기 열에 놓여 단자 바로 아래에 선다. */
.hero-3d-on .hero__turn[data-reveal] {
  /* sticky-bottom은 자연 위치가 이미 위쪽이라 걸리지 않는다 — top으로 고정한다. */
  position: sticky;
  top: calc(100svh - clamp(104px, 14vh, 148px));
  z-index: 6;
  width: min(100%, var(--shell));
  margin-inline: auto;
  padding-inline: var(--gutter);
  grid-template-columns: var(--axis-read) var(--axis-inst);
  column-gap: var(--axis-gap);
  border-top: 0;
  opacity: 0;
  transition: opacity .62s var(--ease);
}
.hero-3d-on .hero__turn strong { justify-self: start; }
.wire-landed .hero__turn[data-reveal] { opacity: 1; }
.hero__turn {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(calc(100% - (2 * var(--gutter))), var(--shell));
  margin: 0 auto;
  padding: 25px 0 28px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .96rem;
}
.hero__turn strong {
  justify-self: end;
  color: var(--ink);
  font-weight: 400;
}
/* Sample */
.sample {
  position: relative;
  padding-block: clamp(120px, 16vw, 220px);
  background: var(--paper);
}
.sample__layout {
  display: grid;
  grid-template-columns: var(--axis-read) var(--axis-inst);
  gap: var(--axis-row) var(--axis-gap);
  align-items: center;
}
.sample__visual { position: relative; margin: 0; }
.sample__visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -10%;
  right: -10%;
  width: 46%;
  aspect-ratio: 1;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
}
.sample__visual picture {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: transparent;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 42%, rgba(0,0,0,.9) 67%, transparent 96%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 42%, rgba(0,0,0,.9) 67%, transparent 96%);
}
.sample__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.88) contrast(.9) brightness(1.05);
  mix-blend-mode: multiply;
  transform: scale(1.06);
  transform-origin: center;
}
.sample__visual figcaption {
  margin: 12px 0 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: var(--reg-track);
}
.sample__brief {
  display: grid;
  justify-items: start;
  gap: 26px;
}
.sample__summary {
  max-width: 35rem;
  margin: 0;
  padding-left: 20px;
  border-left: 1px solid var(--wire-hairline);
  color: var(--ink-soft);
  font-size: var(--lead);
}
.sample__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
/* Sample references — numbered footnote apparatus (document character). */
.sample__refs {
  margin: 7px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: var(--reg);
  font-variant-numeric: tabular-nums;
}
/* 산문은 등록부에 오르지 않는다 — Jetendard 한글은 1.2em 고정폭이라 문장이 벌어진다.
   모노는 토큰·열거·수치까지, 문장은 Pretendard. */
.sample__refs-label {
  margin: 0 0 8px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--small);
}
.sample__refs-list {
  margin: 0;
  padding-left: 1.5em;
  color: var(--ink-soft);
  list-style: decimal;
}
.sample__refs-list li {
  padding-left: .35em;
  line-height: 1.75;
}
.sample__refs-list li::marker { color: var(--wine); }
/* Evidence */
.evidence {
  position: relative;
  padding-block: clamp(124px, 17vw, 232px);
  overflow: clip;
  background: var(--warm);
}
.evidence::before {
  content: "";
  position: absolute;
  top: clamp(280px, 36vw, 430px);
  right: 0;
  left: 0;
  height: 1px;
  background: var(--line);
}
.evidence__intro {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: var(--axis-read) var(--axis-inst);
  gap: var(--axis-row) var(--axis-gap);
  align-items: end;
  margin-bottom: clamp(82px, 12vw, 154px);
}
.evidence__intro p {
  max-width: 32rem;
  margin: 0;
  color: var(--ink-soft);
}
.evidence__body {
  display: grid;
  grid-template-columns: var(--axis-read) var(--axis-inst);
  gap: var(--axis-row) var(--axis-gap);
  align-items: start;
}
.evidence__visual {
  position: sticky;
  top: calc(var(--header) + 36px);
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 95%, transparent);
}
.evidence__visual picture {
  aspect-ratio: 3 / 2;
}
.evidence__visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1) contrast(.87) brightness(1.07);
}
.evidence__list {
  display: grid;
  border-top: 1px solid var(--line);
}
.evidence__list article {
  position: relative;
  padding: 24px 0 25px 22px;
  border-bottom: 1px solid var(--line);
}
.evidence__list article::before {
  content: "";
  position: absolute;
  top: 32px;
  left: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
}

.evidence__list article:nth-child(even) {
  margin-left: 9%;
}
.evidence__list h3,
.evidence__process h3 {
  margin: 0;
  font-size: 1.14rem;
  font-weight: 600;
}
.evidence__list p {
  max-width: 31rem;
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: .98rem;
}
.evidence__process {
  display: grid;
  grid-template-columns: var(--axis-read) var(--axis-inst);
  gap: var(--axis-row) var(--axis-gap);
  margin-top: clamp(88px, 13vw, 170px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.evidence__process p {
  max-width: 42rem;
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--lead);
}
/* Publisher */
.publisher {
  position: relative;
  padding-block: clamp(126px, 17vw, 232px);
  overflow: clip;
  background: var(--paper);
  isolation: isolate;
}
.publisher__backdrop {
  position: absolute;
  z-index: -1;
  top: 8%;
  right: -8%;
  width: min(66vw, 980px);
  height: 84%;
  opacity: .16;
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 88%, transparent);
  mix-blend-mode: multiply;
}
.publisher__backdrop img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1) contrast(.84) brightness(1.12);
}
.publisher__layout {
  display: grid;
  grid-template-columns: var(--axis-read) var(--axis-inst);
  gap: var(--axis-row) var(--axis-gap);
  align-items: start;
}
.publisher__intro {
  display: grid;
  gap: 26px;
}
.publisher__intro > p {
  max-width: 36rem;
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--lead);
}
.publisher__card {
  display: grid;
  gap: 7px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.publisher__card strong {
  font-size: 1.12rem;
}
.publisher__card p {
  max-width: 34rem;
  margin: 0;
  color: var(--ink-soft);
}
.publisher__trust {
  display: grid;
  gap: 42px;
}
.publisher__principles {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.publisher__principles li {
  position: relative;
  padding: 19px 0 20px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.publisher__principles li::before {
  content: "";
  position: absolute;
  top: 29px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line);
}
.publisher__note {
  display: grid;
  gap: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.publisher__note h3 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 600;
}
.publisher__note p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .96rem;
}
/* Subscribe */
.subscribe {
  position: relative;
  padding-block: clamp(126px, 17vw, 228px);
  overflow: clip;
  background: var(--paper);
  isolation: isolate;
}
.subscribe::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -12vw;
  width: min(58vw, 820px);
  aspect-ratio: 1;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  transform: translateY(-50%);
}
.subscribe::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0 12%, var(--line) 12% 78%, transparent 78%);
}
.subscribe__layout {
  display: grid;
  grid-template-columns: var(--axis-read) var(--axis-inst);
  gap: var(--axis-row) var(--axis-gap);
  align-items: center;
}
.subscribe__intro {
  display: grid;
  justify-items: start;
  gap: 24px;
}
.subscribe__intro p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--lead);
}
.subscribe__form-wrap {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 16px;
  padding-block: clamp(28px, 4vw, 54px);
  background: transparent;
}
.subscribe__form-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -34% -18%;
  background: radial-gradient(ellipse at 52% 50%, rgba(255,255,255,.97) 0 34%, rgba(255,255,255,.82) 58%, transparent 86%);
  pointer-events: none;
}
.subscribe-form {
  display: grid;
  gap: 18px;
}
.subscribe-label {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: var(--reg-track);
}
.subscribe-input {
  width: 100%;
  min-height: 64px;
  padding: 12px 0;
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  outline: none;
  transition: border-color .24s ease;
}
.subscribe-input::placeholder {
  color: #999b9f;
  opacity: 1;
}
.subscribe-input:focus {
  border-color: var(--orange);
}
.subscribe-input:focus-visible {
  box-shadow: 0 3px 0 -1px var(--orange);
}
.subscribe__process,
.subscribe__fine {
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--reg-sm);
  line-height: 1.55;
}
.consent {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--ink-soft);
  font-size: .86rem;
  line-height: 1.55;
}
.consent input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--orange);
}
.subscribe-button {
  justify-self: start;
}
.subscribe-button:disabled,
.subscribe-button[aria-disabled="true"] {
  border-color: #a6a7aa;
  background: #a6a7aa;
  cursor: not-allowed;
  opacity: .68;
  translate: none;
}
.turnstile:empty { display: none; }
.form-gate,
.form-error,
.form-success {
  padding: 12px 14px;
  border-left: 2px solid var(--line);
  background: var(--warm);
  color: var(--ink-soft);
  font-size: .86rem;
  line-height: 1.55;
}
.form-gate {
  padding: 0;
  border-left: 0;
  background: transparent;
}
.form-error {
  border-left-color: var(--error);
  color: var(--error);
}
.form-success {
  border-left-color: var(--success);
  color: var(--success);
}
.site-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 40px;
  min-height: 96px;
  padding: 28px var(--gutter);
  border-top: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: var(--reg-track);
}
/* Colophon — the publication register that reads as a circulated document. */
.colophon {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px 26px;
}
.colophon__mark {
  font-family: var(--wordmark);
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--ink);
  font-size: .96rem;
}
.colophon__register {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin: 0;
}
.colophon__register > div {
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.colophon__register dt {
  color: var(--muted);
}
.colophon__register dd {
  margin: 0;
  color: var(--ink-soft);
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 24px;
}
.site-footer a {
  text-decoration-color: var(--line);
}
/* Each act has its own material response. Initial states remain readable if JS stops. */
.motion-ready .evidence__list article {
  opacity: .64;
  transform: translateX(-12px);
  transition: opacity .68s var(--ease), transform .9s var(--ease);
}
.motion-ready .evidence__list article:nth-child(2) { transition-delay: 70ms; }
.motion-ready .evidence__list article:nth-child(3) { transition-delay: 140ms; }
.motion-ready .evidence__list article:nth-child(4) { transition-delay: 210ms; }
.evidence.is-process-verified .evidence__list article {
  opacity: 1;
  transform: translateX(0);
}
.motion-ready .difference__criteria {
  opacity: .72;
  transform: translateY(14px);
  transition: opacity .72s var(--ease), transform 1s var(--ease-material);
}
.difference.is-difference-distilled .difference__criteria {
  opacity: 1;
  transform: translateY(0);
}
.motion-ready .sample__visual {
  opacity: .62;
  transform: scale(.977);
  transition: opacity .82s var(--ease), transform 1.15s var(--ease-material);
}
.motion-ready .sample__brief {
  opacity: .76;
  transform: translateY(15px);
  transition: opacity .72s var(--ease), transform 1s var(--ease);
}
.sample.is-sample-decided .sample__visual,
.sample.is-sample-decided .sample__brief {
  opacity: 1;
  transform: none;
}
.motion-ready .publisher__trust {
  opacity: .72;
  transform: translateY(13px);
  transition: opacity .78s var(--ease), transform 1.05s var(--ease-material);
}
.publisher.is-trust-grounded .publisher__trust {
  opacity: 1;
  transform: translateY(0);
}
.motion-ready .subscribe__form-wrap {
  opacity: .82;
  transform: translateY(10px);
  transition: opacity .66s var(--ease), transform .95s var(--ease);
}
.subscribe.is-subscribe-ready .subscribe__form-wrap {
  opacity: 1;
  transform: translateY(0);
}

/* ── Process act: the four steps become ONE unbroken verified thread that draws
   down on scroll (replaces the repeated cable video). ── */
.evidence__list {
  position: relative;
  padding-left: 34px;
}
.evidence__list::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 5px;
  width: 1.5px;
  background: var(--navy);
  opacity: .55;
  transform: scaleY(0);
  transform-origin: top;
}
.motion-ready .evidence__list::before {
  transition: transform 1.15s var(--ease-material);
}
.evidence.is-process-verified .evidence__list::before {
  transform: scaleY(1);
}
.evidence__list article::before {
  content: "";
  position: absolute;
  left: -33px;
  top: 6px;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--wine);
  border-radius: 50%;
  background: var(--paper);
  transform: scale(0);
}
.motion-ready .evidence__list article::before {
  transition: transform .5s var(--ease-material);
}
.evidence.is-process-verified .evidence__list article::before {
  transform: scale(1);
}
.evidence.is-process-verified .evidence__list article:nth-child(1)::before { transition-delay: .30s; }
.evidence.is-process-verified .evidence__list article:nth-child(2)::before { transition-delay: .52s; }
.evidence.is-process-verified .evidence__list article:nth-child(3)::before { transition-delay: .74s; }
.evidence.is-process-verified .evidence__list article:nth-child(4)::before { transition-delay: .96s; }

/* 극한 v3 — the thread is DRAWN on scroll (SVG scrub) rather than a one-shot
   rail. The old CSS rail is retired; the SVG spine draws proportional to scroll
   and each step node lights as the ink reaches it. Fallback: fully drawn, static. */
.enhanced-scroll .evidence__list::before { display: none; }
.evidence__spine {
  position: absolute;
  top: 8px;
  left: 0;
  width: 10px;
  /* Explicit height: an SVG is a replaced element, so width + viewBox aspect
     would otherwise force a fixed height (10*100/6) and ignore top/bottom. */
  height: calc(100% - 16px);
  overflow: visible;
  pointer-events: none;
}
.evidence__spine line {
  fill: none;
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}
.evidence__spine-track { stroke: var(--line); }
.evidence__spine-draw {
  stroke: var(--orange);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.no-enhanced-scroll .evidence__spine-draw,
:where(html:not(.enhanced-scroll)) .evidence__spine-draw { stroke-dashoffset: 0; }
.enhanced-scroll .evidence__list article::before { transition: none; transform: scale(1); }
.evidence__list article.is-lit::before {
  border-color: var(--orange);
  background: var(--orange);
  box-shadow: 0 0 0 5px rgba(198, 85, 30, .12);
}

.publisher { overflow: clip; }

@media (hover: hover) {
  .sample__visual img,
  .evidence__visual img,
  .publisher__backdrop img {
    transition: filter .7s ease, transform 1.2s var(--ease);
  }
  .sample__visual:hover img,
  .evidence__visual:hover img {
    filter: grayscale(.7) contrast(.9) brightness(1.04);
    transform: scale(1.012);
  }
  .sample__visual:hover img {
    transform: scale(1.075);
  }
}

/*
 * VERIFY LINE
 * A section-level decision trace, never a page progress meter. Each segment is
 * attached to meaning in the document and remains legible without motion.
 */
[data-wire-node] {
  --wire-enter: 1;
  position: relative;
  isolation: isolate;
}
[data-wire-node]::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: -.72rem;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--wire-hairline) 0 78%, var(--wire-live) 78% 100%);
  transform: scaleX(var(--wire-enter));
  transform-origin: left center;
  transition: transform 1.15s var(--ease-material);
  pointer-events: none;
}
.motion-ready [data-wire-node] {
  --wire-enter: 0;
}
.hero.is-definition-shown[data-wire-node],
.hero.is-definition-shown [data-wire-node],
.evidence.is-process-verified[data-wire-node],
.evidence.is-process-verified [data-wire-node],
.difference.is-difference-distilled[data-wire-node],
.difference.is-difference-distilled [data-wire-node],
.sample.is-sample-decided[data-wire-node],
.sample.is-sample-decided [data-wire-node],
.publisher.is-trust-grounded[data-wire-node],
.publisher.is-trust-grounded [data-wire-node],
.subscribe.is-subscribe-ready[data-wire-node],
.subscribe.is-subscribe-ready [data-wire-node] {
  --wire-enter: 1;
}

/* Video is material, not a rectangular module. Overscan and masks remove the frame. */
[data-video-scene] {
  --scene-opacity: .2;
  --scene-scale: 1.08;
  --scene-x: 0%;
  --scene-y: 0%;
  position: absolute;
  z-index: 0;
  inset: -6%;
  overflow: hidden;
  background: transparent;
  opacity: 1;
  pointer-events: none;
  isolation: isolate;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 var(--scene-feather), #000 calc(100% - var(--scene-feather)), transparent 100%),
    linear-gradient(180deg, transparent 0, #000 var(--scene-feather), #000 calc(100% - var(--scene-feather)), transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 var(--scene-feather), #000 calc(100% - var(--scene-feather)), transparent 100%),
    linear-gradient(180deg, transparent 0, #000 var(--scene-feather), #000 calc(100% - var(--scene-feather)), transparent 100%);
  -webkit-mask-composite: source-in;
}
[data-video-scene]::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: radial-gradient(ellipse at 54% 50%, transparent 34%, rgba(255,255,255,.26) 67%, var(--paper) 96%);
  pointer-events: none;
}
[data-video-scene] video,
[data-video-scene] picture,
[data-video-scene] img,
video[data-video-scene] {
  width: 100%;
  height: 100%;
}
[data-video-scene] video,
[data-video-scene] img,
video[data-video-scene] {
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: var(--scene-opacity);
  filter: grayscale(.92) saturate(.28) contrast(.84) brightness(1.12);
  mix-blend-mode: var(--scene-ink);
  transform: translate3d(var(--scene-x), var(--scene-y), 0) scale(var(--scene-scale));
  transform-origin: center;
  transition: opacity 1s var(--ease), filter 1.2s var(--ease), transform 1.8s var(--ease-material);
}
video[data-video-scene] {
  position: absolute;
  z-index: 0;
  inset: -6%;
  width: 112%;
  height: 112%;
  mask-image: radial-gradient(ellipse at 52% 50%, #000 38%, rgba(0,0,0,.92) 55%, transparent 84%);
  -webkit-mask-image: radial-gradient(ellipse at 52% 50%, #000 38%, rgba(0,0,0,.92) 55%, transparent 84%);
}
[data-video-scene] [data-video-poster],
[data-video-scene] .video-scene__poster {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* 01 / Origin: the loader and hero share the same quiet axial material. */
.hero [data-video-scene],
[data-video-scene="hero"],
[data-video-scene="primary"],
[data-video-scene*="pulse-primary"] {
  --scene-feather: 18%;
  --scene-opacity: .26;
  --scene-scale: 1.12;
  top: -4%;
  right: -7%;
  bottom: -5%;
  left: 31%;
  mask-image: radial-gradient(ellipse at 58% 48%, #000 30%, rgba(0,0,0,.94) 54%, transparent 84%);
  -webkit-mask-image: radial-gradient(ellipse at 58% 48%, #000 30%, rgba(0,0,0,.94) 54%, transparent 84%);
}
.hero [data-video-scene]::after,
[data-video-scene="hero"]::after,
[data-video-scene="primary"]::after,
[data-video-scene*="pulse-primary"]::after {
  background:
    linear-gradient(90deg, var(--paper) 0 6%, rgba(255,255,255,.82) 24%, transparent 57%),
    radial-gradient(ellipse at 62% 48%, transparent 35%, rgba(255,255,255,.18) 64%, var(--paper) 96%);
}
.hero [data-video-scene] video,
.hero [data-video-scene] img,
[data-video-scene="hero"] video,
[data-video-scene="primary"] video,
[data-video-scene*="pulse-primary"] video {
  object-position: 58% 50%;
}
.hero.is-definition-shown [data-video-scene] {
  --scene-scale: 1.04;
  --scene-x: -1.5%;
  --scene-opacity: .58;
}
.hero__fallback img {
  animation: hero-material-breathe 14s var(--ease-material) infinite alternate;
}
@keyframes hero-material-breathe {
  from { transform: scale(1.015); }
  to { transform: scale(1.045) translate3d(-1.2%, .4%, 0); }
}

/* 02 / Process: a narrow pulse crosses the editorial plane once. */
.process,
[data-act="process"],
#process {
  position: relative;
  overflow: clip;
  isolation: isolate;
}
.process [data-video-scene],
[data-act="process"] [data-video-scene],
#process [data-video-scene],
[data-video-scene="process"],
[data-video-scene*="pulse-secondary"] {
  --scene-opacity: .14;
  --scene-scale: 1.16;
  inset: 4% -11% 2% 38%;
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 70%, transparent 100%);
}
.process [data-video-scene]::after,
[data-act="process"] [data-video-scene]::after,
#process [data-video-scene]::after {
  background: linear-gradient(90deg, var(--paper), transparent 38% 65%, var(--paper));
}
.evidence.is-process-verified [data-video-scene],
[data-act="process"].is-process-verified [data-video-scene] {
  --scene-opacity: .22;
}

/* 03 / Difference: ink forms the boundary; copy remains above it. */
.difference,
[data-act="difference"],
#difference {
  position: relative;
  overflow: clip;
  isolation: isolate;
}
.difference [data-video-scene],
[data-act="difference"] [data-video-scene],
#difference [data-video-scene],
[data-video-scene="difference"],
[data-video-scene*="ink-boundary"] {
  --scene-opacity: .16;
  --scene-scale: 1.1;
  inset: 0 -8% -2% 22%;
  mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 76%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 76%, transparent 100%);
}
.difference [data-video-scene] video,
.difference [data-video-scene] img,
[data-video-scene*="ink-boundary"] video,
[data-video-scene*="ink-boundary"] img {
  filter: grayscale(1) contrast(.93) brightness(1.08);
}
.difference.is-difference-distilled [data-video-scene] {
  --scene-x: -2%;
  --scene-opacity: .23;
}

/* 04 / Sample: the issue arrives as one complete field, never tiled or extended. */
.sample [data-video-scene],
[data-video-scene="sample"],
[data-video-scene*="pulse-tertiary"] {
  --scene-opacity: .12;
  --scene-scale: 1.08;
  inset: 6% 38% 5% -8%;
  mask-image: radial-gradient(ellipse at 45% 52%, #000 31%, rgba(0,0,0,.9) 58%, transparent 87%);
  -webkit-mask-image: radial-gradient(ellipse at 45% 52%, #000 31%, rgba(0,0,0,.9) 58%, transparent 87%);
}
.sample.is-sample-decided [data-video-scene] {
  --scene-opacity: .19;
}

/* 05 / Trust: concrete is atmosphere; it gains definition at human accountability. */
.trust,
[data-act="trust"],
#trust,
.publisher {
  position: relative;
  isolation: isolate;
}
.trust [data-video-scene],
[data-act="trust"] [data-video-scene],
#trust [data-video-scene],
.publisher [data-video-scene],
[data-video-scene="trust"],
[data-video-scene*="concrete-detail"] {
  --scene-opacity: .11;
  --scene-scale: 1.13;
  inset: -3% -9% -4% 40%;
  mask-image: radial-gradient(ellipse at 60% 45%, #000 28%, rgba(0,0,0,.88) 54%, transparent 86%);
  -webkit-mask-image: radial-gradient(ellipse at 60% 45%, #000 28%, rgba(0,0,0,.88) 54%, transparent 86%);
}
.publisher.is-trust-grounded [data-video-scene],
[data-act="trust"].is-trust-grounded [data-video-scene] {
  --scene-opacity: .18;
}
.publisher__card {
  background: transparent;
}

/* 06 / Consent: the final field recedes; the line resolves into the input underline. */
.subscribe [data-video-scene],
[data-video-scene="subscribe"],
[data-video-scene*="concrete-field"] {
  --scene-opacity: .1;
  --scene-scale: 1.12;
  inset: -8% -9% -8% 34%;
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
}
.subscribe.is-subscribe-ready [data-video-scene] {
  --scene-opacity: .16;
}
.subscribe-input {
  background-image: linear-gradient(90deg, var(--wire-live), var(--wire-live));
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 0 2px;
  transition: border-color .24s ease, background-size .72s var(--ease);
}
.subscribe-input:focus,
.subscribe-input:focus-visible,
.subscribe-input:user-valid {
  border-bottom-color: transparent;
  background-size: 100% 2px;
}
.subscribe-input:user-invalid:not(:placeholder-shown) {
  border-bottom-color: var(--error);
  background-size: 0 2px;
}

:is(.process, .difference, .sample, .evidence, .trust, .publisher, .subscribe) > :not([data-video-scene]):not(.video-field):not(.subscribe__seal),
:is([data-act="process"], [data-act="difference"], [data-act="trust"]) > :not([data-video-scene]):not(.video-field):not(.subscribe__seal) {
  position: relative;
  z-index: 2;
}

/* Current markup adapter: the scene attribute belongs to the video, its field owns the fade. */
.video-field {
  /* Frame-feather: the wrapper clips the video to a rectangle (overflow:hidden).
     A single radial ellipse softens the corners but leaves the four edge-midpoints
     as hard clipped lines — the visible "rectangle border". Intersecting a
     horizontal and a vertical linear-gradient forces EVERY edge (top/bottom/left/
     right) transparent, independent of aspect ratio or where the video sits. */
  --edge-x: 15%;
  --edge-y: 20%;
  position: absolute;
  z-index: 0;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
  isolation: isolate;
  contain: paint;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 var(--edge-x), #000 calc(100% - var(--edge-x)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--edge-y), #000 calc(100% - var(--edge-y)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 var(--edge-x), #000 calc(100% - var(--edge-x)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--edge-y), #000 calc(100% - var(--edge-y)), transparent 100%);
  mask-composite: intersect;
}
.video-field::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: radial-gradient(ellipse at 54% 50%, transparent 31%, rgba(255,255,255,.2) 61%, var(--paper) 96%);
  pointer-events: none;
}
.video-field > video.video-field__media[data-video-scene] {
  position: absolute;
  z-index: 0;
  inset: -8%;
  width: 116%;
  height: 116%;
  mask-image: none;
  -webkit-mask-image: none;
}
video[data-video-scene][data-video-state="playing"] {
  will-change: transform, opacity;
}
video[data-video-scene]:not([data-video-state="playing"]) {
  will-change: auto;
}
/* Heritage duotone (cyanotype/mimeograph): a navy field carries the base ink,
   and the grayscale footage MULTIPLIES onto it — light filaments stay navy, the
   footage's own shadows deepen it. No iridescent invert/hue-rotate; the hero
   reads as a verified archive field, not a soft AI-startup gradient. Using the
   footage's own multiply (not a flat multiply overlay) keeps the glow alive. */
/* Hero chroma-key: the wire footage (ink on a light ground) MULTIPLIES straight
   onto the paper field and the headline — the light ground dissolves, only the
   cable ink crosses over the words. The blend must reach the text, so the field
   wrapper drops its isolation/containment and carries the multiply itself; the
   inner video draws normally, and the white vignette is removed so ink survives. */
.hero .video-field {
  background: transparent;
  isolation: auto;
  contain: none;
  mix-blend-mode: multiply;
  opacity: .82;
}
.hero .video-field::after { content: none; }
.hero .video-field > video.video-field__media[data-video-scene] {
  filter: contrast(1.16) brightness(1.04) saturate(1.12);
  mix-blend-mode: normal;
  opacity: 1;
}
.hero__fallback img {
  filter: contrast(1.16) brightness(1.04) saturate(1.12);
}
/* Word-reveal primitive (hero + later acts): an inner span lifts out of a
   clipped outer span. Default state is fully visible; the enhanced layer sets
   the hidden start state only when it is going to animate. */
.rw { display: inline-block; overflow: hidden; vertical-align: top; }
.rw__i { display: inline-block; will-change: transform; }
:where(.no-enhanced-scroll) .rw,
:where(.no-enhanced-scroll) .rw__i { overflow: visible; }
.evidence__atmosphere {
  inset: 18% -12% 5% 38%;
}
.evidence__atmosphere::after {
  background: linear-gradient(90deg, var(--warm), transparent 31% 65%, var(--warm));
}
.difference__atmosphere {
  inset: 4% -9% 2% 30%;
}
.sample__atmosphere {
  inset: 4% 34% 4% -10%;
}
.publisher .publisher__backdrop.video-field {
  z-index: 0;
  top: 5%;
  right: -7%;
  width: min(68vw, 1020px);
  height: 90%;
  opacity: 1;
}
.subscribe__backdrop {
  inset: 2% -10% 2% 38%;
}

/* New editorial acts keep the same architectural spacing without card grammar. */
.difference {
  position: relative;
  padding-block: clamp(126px, 17vw, 232px);
  overflow: clip;
  background: var(--paper);
  isolation: isolate;
}
.difference__layout {
  display: grid;
  grid-template-columns: var(--axis-read) var(--axis-inst);
  gap: var(--axis-row) var(--axis-gap);
  align-items: end;
}

/* ── 막 사이 3D 인터루드 ──────────────────────────────────────────────────────
   막과 막 사이의 짧은 호흡. 자기만의 풀블리드 무대에서 오브제 하나가 산다 —
   텍스트 뒤가 아니라 텍스트 사이. 스테이지는 뷰포트에 핀되고, 3D가 빠지면
   캡션만 남는 정적 폴백으로 접힌다(콘텐츠 손실 없음). */
/* 막간은 히어로와 같은 무대다 — 어둠. 본문(종이)과 사이에 그라디언트를 두지
   않는다: 중간지대 금지가 곧 이 페이지의 리듬이고, 종이에서 어둠으로 뚝 떨어지는
   그 경계가 막이 바뀌었다는 유일한 신호다. */
.interlude {
  position: relative;
  height: 190svh;
  background: #0A0A0B;
}
.interlude__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
}
/* 플레이트를 무대 바닥에 깐다. 캔버스는 JS가 뒤에 append 하므로 DOM 순서상
   3D가 위에 온다 — 사진은 대기, 3D는 그 안에서 움직이는 물체다. */
.interlude__ember {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}
.interlude__ember img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: .8;
}
/* 선의 종착 플레이트는 세로 원본이라 가로 무대에서 심하게 잘린다. 점화점이 프레임
   아래쪽에 있으므로 그쪽을 잡아 둔다.
   ⚠️ 클래스 이름에 `verdict` 를 쓰지 않는다 — 판정어 폐쇄집합 가드가 마크업에서
   `\bverdict\b` 로 판정 토큰을 걷어 내는데, 텍스트 없는 <picture> 가 빈 판정어로
   잡힌다(실측: test_verdict_tokens_come_from_the_closed_set 실패). 가드를 넓히는
   대신 이름을 바꾼다. */
.interlude__ember--terminus img {
  object-position: 52% 62%;
  opacity: .72;
}
.interlude__stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.interlude__caption {
  position: sticky;
  top: calc(100svh - clamp(120px, 16vh, 168px));
  z-index: 2;
  margin: 0;
  padding: 0 var(--gutter);
  max-width: 34rem;
  color: var(--muted);
  font-size: var(--small);
  line-height: 1.66;
}
.interlude__caption span { color: rgba(237, 235, 230, .72); }
/* 3D가 없으면(WebGL 실패) 무대를 접는 대신 플레이트를 정지화면으로 남긴다.
   전에는 height 0 으로 접었는데, 그때는 무대에 캔버스밖에 없어 접는 것이
   맞았다. 지금은 사진 한 장이 이미 그 막의 명제를 담고 있으므로 막을
   통째로 잃을 이유가 없다. 높이만 줄여 스크롤 부담을 없앤다. */
.no-body-3d .interlude {
  height: auto;
  padding-block: 0 clamp(72px, 10vw, 132px);
}
/* relative, NOT static: the plate is inset:0 absolute, so a static stage hands its
   containing block up to .interlude and the photo floods the whole section — which
   puts the caption on top of the image instead of below it. */
.no-body-3d .interlude__stage {
  position: relative;
  height: clamp(240px, 46svh, 460px);
}
.no-body-3d .interlude__caption {
  position: static;
  top: auto;
  padding-top: clamp(24px, 4vw, 44px);
}
.difference__intro {
  display: grid;
  justify-items: start;
  gap: 26px;
}
.difference__intro h2 {
  max-width: 14em;
  margin: 0;
  color: var(--ink);
  font-size: var(--heading);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0;
}
.difference__intro > p:last-child {
  max-width: 37rem;
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--lead);
}
.difference__criteria {
  display: grid;
  border-top: 1px solid var(--line);
}
.difference__criteria p {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 6px 20px;
  margin: 0;
  padding: 21px 0 22px;
  border-bottom: 1px solid var(--line);
}
.difference__criteria strong {
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--reg);
  font-weight: 400;
}
.difference__criteria span {
  color: var(--ink-soft);
  font-size: .96rem;
}
.sample__context {
  max-width: 35rem;
  margin: 0;
  color: var(--ink-soft);
}
/* 한 호를 계기 판독값으로 읽는 자리 — 호수·주제·원문 수·판정이 한 화면에 선다. */
.sample__register {
  width: 100%;
  max-width: 35rem;
}
.sample__boundary {
  display: grid;
  width: 100%;
  margin: 0;
  padding-block: 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--label);
  line-height: 1.55;
}
.sample__boundary strong {
  color: var(--orange-dark);
  font-weight: 400;
}
.evidence__process {
  grid-template-columns: var(--axis-read) var(--axis-inst);
}


/* No numbered rail: the verification list is text-first, with one quiet decision edge. */
.evidence__list article:nth-child(even) {
  margin-left: 0;
}
.evidence__list article::before {
  display: none;
}

section[data-wire-node]::after {
  right: auto;
  bottom: 0;
  left: var(--gutter);
  width: min(42vw, 660px);
  opacity: .42;
}
section[data-wire-node].is-verify-current::after {
  opacity: 1;
  background: linear-gradient(90deg, var(--wire-hairline) 0 64%, var(--wire-live) 64% 100%);
}
[data-verify-line] [data-verify-step] {
  transition: color .42s ease, border-color .42s ease;
}
[data-verify-line] [data-verify-step].is-current {
  border-bottom-color: var(--orange);
}
[data-verify-line] [data-verify-step].is-current h3 {
  color: var(--orange-dark);
}
.evidence__process[data-wire-node]::after {
  bottom: -28px;
  width: min(100%, 38rem);
}
@media (max-width: 1040px) {
  :root {
    --gutter: clamp(24px, 4.6vw, 52px);
    --display: clamp(3.05rem, 6.3vw, 4.05rem);
    --axis-gap: clamp(48px, 7vw, 88px);
  }
  .hero__signal {
    right: -13%;
    width: 78vw;
  }

}
@media (max-width: 820px) {
  :root {
    --header: 64px;
    --gutter: clamp(20px, 5.4vw, 36px);
    --display: clamp(2.65rem, 9vw, 3.65rem);
    --heading: clamp(2.05rem, 7vw, 2.75rem);
  }
  .hero::before {
    background: linear-gradient(180deg, #fff 0 56%, rgba(255,255,255,.9) 72%, rgba(255,255,255,.3) 100%);
  }
  .hero__layout {
    align-items: start;
    padding-top: calc(var(--header) + 82px);
  }
  .hero__copy {
    width: 100%;
  }
  .hero__copy .eyebrow {
    margin-bottom: 52px;
  }
  .hero__signal {
    top: 38%;
    right: -26%;
    bottom: -3%;
    width: 114vw;
    opacity: .45;
    mask-image: linear-gradient(180deg, transparent, #000 18%, #000 90%, transparent);
  }
  .hero__turn {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .hero__turn strong {
    justify-self: start;
  }
  /* 축이 한 열로 접히면 전환선도 접어야 한다. 두 열을 그대로 두면 문장이
     계기 열(최소 320px)에 갇혀 화면 밖으로 밀려나고 clip에 잘린다. */
  .act-turn {
    grid-template-columns: 1fr;
  }
  .act-turn > span {
    grid-column: 1;
  }
  .sample__layout,
  .difference__layout,
  .evidence__intro,
  .evidence__body,
  .evidence__process,
  .publisher__layout,
  .subscribe__layout {
    grid-template-columns: 1fr;
  }
  .sample,
  .difference,
  .evidence,
  .publisher,
  .subscribe {
    padding-block: clamp(94px, 20vw, 144px);
  }
  .evidence::before {
    display: none;
  }
  .evidence__intro {
    margin-bottom: 72px;
  }
  .evidence__visual {
    position: relative;
    top: auto;
  }
  .evidence__list article:nth-child(even) {
    margin-left: 0;
  }
  .evidence__process {
    margin-top: 82px;
  }
  .publisher__backdrop {
    top: 18%;
    right: -36%;
    width: 130vw;
    opacity: .11;
  }
  .subscribe::before {
    right: -42vw;
    width: 110vw;
  }
  .hero .video-field {
    top: 35%;
    right: -25%;
    bottom: -4%;
    left: 3%;
  }
  .evidence__atmosphere {
    inset: 14% -28% 34% 14%;
  }
  .difference__atmosphere {
    inset: 25% -32% 5% 8%;
  }
  .sample__atmosphere {
    inset: 5% -24% 44% 1%;
  }
  .publisher .publisher__backdrop.video-field {
    top: 25%;
    right: -34%;
    width: 126vw;
    height: 68%;
  }
  .subscribe__backdrop {
    inset: 22% -32% 0 10%;
  }
  :is(.hero, .process, .difference, .sample, .trust, .publisher, .subscribe) [data-video-scene],
  :is([data-act="process"], [data-act="difference"], [data-act="trust"]) [data-video-scene] {
    --scene-opacity: .12;
    --scene-scale: 1.06;
    inset: 18% -24% 7% 18%;
    mask-image: radial-gradient(ellipse at 58% 52%, #000 24%, rgba(0,0,0,.84) 52%, transparent 83%);
    -webkit-mask-image: radial-gradient(ellipse at 58% 52%, #000 24%, rgba(0,0,0,.84) 52%, transparent 83%);
  }
  :is(.hero, .process, .difference, .sample, .trust, .publisher, .subscribe) [data-video-scene]::after,
  :is([data-act="process"], [data-act="difference"], [data-act="trust"]) [data-video-scene]::after {
    background: radial-gradient(ellipse at 58% 52%, transparent 24%, rgba(255,255,255,.2) 58%, var(--paper) 94%);
  }
  .hero [data-video-scene] {
    inset: 34% -28% -5% 4%;
  }
  .sample [data-video-scene] {
    inset: 8% -22% 34% 2%;
  }
  :is(.trust, .publisher) [data-video-scene] {
    inset: 27% -34% 9% 8%;
  }
  .subscribe [data-video-scene] {
    inset: 24% -30% 2% 12%;
  }
  [data-wire-node]::after {
    right: 12%;
  }
}
@media (max-width: 560px) {
  :root {
    --gutter: 20px;
    --display: clamp(2.32rem, 11.6vw, 3.08rem);
    --heading: clamp(1.9rem, 9.6vw, 2.48rem);
    --body: 1rem;
    --lead: 1.04rem;
  }
  body {
    line-height: 1.62;
  }
  .site-header::after {
    right: 20px;
    left: 20px;
  }
  .preload__readout {
    left: var(--gutter);
    right: var(--gutter);
    bottom: 40px;
    gap: 16px;
  }
  .preload__axis {
    width: auto;
    flex: 1;
  }
  .hero {
    min-height: max(700px, 105svh);
  }
  .hero__lead {
    padding-left: 16px;
  }
  .hero__actions,
  .sample__actions {
    align-items: stretch;
    gap: 8px;
  }
  .hero__actions .button,
  .sample__actions .button,
  .subscribe-button {
    width: 100%;
  }
  .hero__actions .text-link,
  .sample__actions .text-link {
    width: 100%;
  }
  .hero__signal {
    top: 43%;
    right: -36%;
    width: 132vw;
  }
  .sample__visual picture,
  .evidence__visual picture {
    aspect-ratio: 4 / 3;
  }
  .subscribe__form-wrap {
    padding-block: 20px;
  }
  .site-footer {
    align-items: flex-start;
    flex-direction: column;
    padding-block: 28px;
  }
  .site-footer__links {
    justify-content: flex-start;
  }
  .difference__criteria p {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  :is(.hero, .process, .difference, .sample, .trust, .publisher, .subscribe) [data-video-scene],
  :is([data-act="process"], [data-act="difference"], [data-act="trust"]) [data-video-scene] {
    --scene-opacity: .09;
    --scene-scale: 1.04;
  }
  [data-video-scene] video,
  [data-video-scene] img,
  video[data-video-scene] {
    filter: grayscale(1) saturate(.15) contrast(.88) brightness(1.14);
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .preload {
    display: none !important;
  }
  .motion-ready .sample__visual,
  .motion-ready .evidence__visual,
  .motion-ready .publisher__backdrop,
  .motion-ready .sample__brief,
  .motion-ready .evidence__list,
  .motion-ready .publisher__trust,
  .motion-ready .subscribe__form-wrap {
    clip-path: none;
    opacity: 1;
    transform: none;
  }
  [data-wire-node],
  .motion-ready [data-wire-node] {
    --wire-enter: 1;
  }
  video[data-video-scene] {
    opacity: .1 !important;
    transform: none !important;
  }
  [data-video-scene] [data-video-poster],
  [data-video-scene] .video-scene__poster {
    display: block !important;
    opacity: .12;
    transform: none;
  }
}
@media (prefers-reduced-data: reduce) {
  video[data-video-scene] {
    opacity: .1 !important;
    transform: none !important;
  }
  [data-video-scene] [data-video-poster],
  [data-video-scene] .video-scene__poster {
    display: block !important;
    opacity: .1;
    transform: none;
  }
}
.is-data-saving video[data-video-scene],
.is-motion-reduced video[data-video-scene],
html[data-save-data="true"] video[data-video-scene] {
  opacity: .1 !important;
  transform: none !important;
}
.is-data-saving [data-video-poster],
.is-motion-reduced [data-video-poster],
html[data-save-data="true"] [data-video-poster] {
  display: block !important;
  opacity: .1;
  transform: none;
}
@media (forced-colors: active) {
  :root {
    --paper: Canvas;
    --warm: Canvas;
    --ink: CanvasText;
    --ink-soft: CanvasText;
    --muted: CanvasText;
    --line: CanvasText;
    --line-soft: CanvasText;
    --orange: Highlight;
    --orange-dark: Highlight;
  }
  .site-header,
  .preload,
  .subscribe__form-wrap {
    background: Canvas;
    backdrop-filter: none;
  }
  .button,
  .subscribe-button {
    border: 1px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
  .hero__signal,
  .publisher__backdrop,
  .sample__visual::before,
  .subscribe::before,
  .subscribe::after {
    display: none;
  }
  [data-video-scene],
  video[data-video-scene] {
    display: none !important;
  }
  [data-wire-node]::after {
    background: CanvasText;
  }
}
@media print {
  .preload,
  .site-header,
  .hero__signal,
  .publisher__backdrop,
  .sample__visual::before,
  .subscribe::before,
  .subscribe::after {
    display: none !important;
  }
  [data-video-scene],
  video[data-video-scene] {
    display: none !important;
  }
  .hero,
  .sample,
  .evidence,
  .publisher,
  .subscribe {
    min-height: auto;
    break-inside: avoid;
    background: #fff !important;
    color: #000 !important;
  }
}

/* ============================================================
   SUBSCRIBE — navy inversion (the dark finale). paper→navy; ink text
   flips to light; the wire footage screens onto the field; a publication
   seal inscribes and turns like a struck coin on scroll. Placed last so
   the colour flip wins the cascade; @media print/forced-colors above keep
   their own !important overrides. ============================ */
.subscribe {
  --navy-deep: #12233a;
  background: radial-gradient(122% 92% at 76% 26%, #274a72 0%, var(--navy-deep) 60%, #0d1b2e 100%);
  color: var(--ivory);
}
.subscribe h2 { color: #fff; }
.subscribe__intro p { color: rgba(244, 240, 232, .82); }
.subscribe .text-link { color: var(--ivory); text-decoration-color: rgba(244, 240, 232, .42); }
.subscribe .text-link:hover { color: #f4b48c; text-decoration-color: currentColor; }
.subscribe-label { color: rgba(244, 240, 232, .68); }
.subscribe-input { border-bottom-color: rgba(244, 240, 232, .48); color: #fff; }
.subscribe-input::placeholder { color: rgba(244, 240, 232, .38); }
.subscribe__process,
.subscribe__fine { color: rgba(244, 240, 232, .56); }
.subscribe .consent { color: rgba(244, 240, 232, .72); }
.subscribe .consent a,
.subscribe__process a,
.subscribe__fine a { color: var(--ivory); }
.subscribe .form-gate { color: rgba(244, 240, 232, .6); }
.subscribe::before { border-color: rgba(244, 240, 232, .16); }
.subscribe::after {
  background: linear-gradient(90deg, transparent 0 12%, rgba(244, 240, 232, .22) 12% 78%, transparent 78%);
}
/* the white form halo would blaze on navy — swap for a soft dark lift */
.subscribe__form-wrap::before {
  background: radial-gradient(ellipse at 52% 50%, rgba(9, 18, 30, .58) 0 40%, rgba(9, 18, 30, .3) 66%, transparent 88%);
}
/* wire footage glows on the dark field: screen drops the darks, keeps filament */
.subscribe .video-field { mix-blend-mode: screen; }
.subscribe [data-video-scene] { --scene-opacity: .28; }
.subscribe.is-subscribe-ready [data-video-scene] { --scene-opacity: .38; }
.subscribe-button:disabled,
.subscribe-button[aria-disabled="true"] {
  border-color: rgba(244, 240, 232, .3);
  background: rgba(244, 240, 232, .14);
  color: rgba(244, 240, 232, .72);
}

/* Publication seal — inscribes on scroll and turns like a struck coin. */
.subscribe__seal {
  position: absolute;
  z-index: 1;
  top: clamp(40px, 7vw, 104px);
  right: clamp(20px, 5vw, 88px);
  width: clamp(148px, 19vw, 272px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: .92;
  mix-blend-mode: screen;
}
.subscribe__seal svg { width: 100%; height: 100%; overflow: visible; }
.seal__ring {
  fill: none;
  stroke: rgba(244, 240, 232, .5);
  stroke-width: 1.1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.seal__ring--in { stroke: rgba(198, 85, 30, .72); }
.seal__legend {
  fill: rgba(244, 240, 232, .66);
  font-family: var(--mono);
  font-size: 8.4px;
  letter-spacing: .22em;
}
.seal__mark {
  fill: #fff;
  font-family: var(--wordmark);
  font-size: 46px;
}
.no-enhanced-scroll .seal__ring,
:where(html:not(.enhanced-scroll)) .seal__ring { stroke-dashoffset: 0; }

/* ============================================================
   막 0 — 어둠 속을 흐르는 불의 선 (void hero)

   HOLDENVOID brand-soul §1-B: void 는 어둠 단독이 아니라 대비의 무대다.
   어둠(ink)과 불(accent)은 대등하게 충돌하며, 유일한 금지는 어중간한 중간지대다.
   그래서 히어로는 완전히 어둡고 불은 완전히 탄다. 본문(#process 이후)은 종이로
   남아 그 자체가 다음 대비항이 된다 — 경계는 그라디언트로 흐리지 않는다.

   WIRE 고유의 얼굴은 '선'이다: 엉킴 → 한 줄 → 판정. 3D 와이어가 이미 그 명제로
   움직이고 있었으므로(progress 0 tangle → 1 line) 기전은 그대로 두고 결만 바꾼다.
   ============================================================ */
#hero {
  --void: #0A0A0B;
  --ember: #EE6C34;
  --void-paper: #EDEBE6;
  /* Lightened from the brand's --dim (#6B6862). Measured: brand dim on brand ink is
     3.56:1 — under AA 4.5 for the eyebrow and the act-turn line, which are body-size
     text carrying real copy. This variant keeps the warm-neutral cast and clears the
     bar (~5.6:1). The brand token itself is untouched; this is a dark-stage variant. */
  --void-dim: #8A857C;
  background: var(--void);
  color: var(--void-paper);
  isolation: isolate;
}
#hero h1 { color: var(--void-paper); }
#hero .eyebrow { color: var(--void-dim); }
#hero .hero__lead {
  color: color-mix(in srgb, var(--void-paper) 84%, transparent);
  border-inline-start-color: color-mix(in srgb, var(--ember) 58%, transparent);
}
/* The fire calls the action. On near-black the ember fill carries ~6.6:1 against
   ink text, so the primary CTA is the one place the accent becomes a surface. */
#hero .button--primary {
  border-color: var(--ember);
  background: var(--ember);
  color: var(--void);
}
#hero .button--primary:hover {
  border-color: var(--void-paper);
  background: var(--void-paper);
  color: var(--void);
}
#hero .text-link { color: var(--void-paper); }
#hero .hero__turn { color: var(--void-dim); }
#hero .hero__turn strong { color: var(--void-paper); }

/* The ember ground: holden's Midjourney plate (A2) — a tangle at one end
   unspooling into one taut line. It is the atmosphere the 3D wire lives in,
   not decoration: same thesis, one layer back. --hero-p (0→1) is published by
   wire-hero-3d.js so the plate drifts as the wire straightens. */
.hero-stage__ember {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}
.hero-stage__ember img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 46%;
  opacity: .88;
  transform: scale(calc(1.14 - var(--hero-p, 0) * 0.08))
             translate3d(calc(var(--hero-p, 0) * -3.2%), 0, 0);
  transform-origin: 62% 52%;
  will-change: transform;
}
/* Legibility: an ink pool under the left-aligned copy so the headline never
   competes with the filament. Inverted twin of the paper halo the light hero used. */
#hero .hero__copy { position: relative; }
#hero .hero__copy::before,
.hero-3d-on #hero .hero__copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -26% -30% -30% -22%;
  pointer-events: none;
  /* The ellipse must reach transparent INSIDE the box. A gradient larger than its own
     box gets clipped at the box edge, and on a near-black field that clip reads as two
     straight horizontal seams across the hero (measured at y=199 / y=762 on 1440x900).
     Vertical radius 40% of a box padded 26/30% keeps the falloff ~70px clear of the cut. */
  background: radial-gradient(58% 40% at 22% 50%,
    var(--void) 0%,
    color-mix(in srgb, var(--void) 72%, transparent) 48%,
    transparent 74%);
}
/* Narrow viewports: the copy runs the full column, so an ink pool anchored at 22%
   leaves the right half of every line sitting on bare filament. Centre it there. */
@media (max-width: 720px) {
  #hero .hero__copy::before,
  .hero-3d-on #hero .hero__copy::before {
    inset: -14% -34% -20% -34%;
    background: radial-gradient(76% 46% at 50% 50%,
      var(--void) 0%,
      color-mix(in srgb, var(--void) 80%, transparent) 52%,
      transparent 76%);
  }
}
/* The plate is the hero when 3D bails (no WebGL / no JS / reduced motion):
   the still frame already carries tangle → line, so the act still reads. */
@media (prefers-reduced-motion: reduce) {
  .hero-stage__ember img { transform: none; }
}
/* Header inversion while the fixed bar overlaps the void hero. `.over-void` is set by
   wire-v3.js (base layer, so it survives reduced-motion); the no-JS branch inverts
   unconditionally because the hero is what loads first and an unreadable wordmark is
   a worse failure than an inverted bar further down. */
html.over-void .site-header,
:where(html:not(.js)) .site-header {
  background: color-mix(in srgb, #0A0A0B 76%, transparent);
  color: #EDEBE6;
}
html.over-void .site-header::after,
:where(html:not(.js)) .site-header::after {
  background: rgba(237, 235, 230, .14);
}
/* Forced colors: drop the art direction entirely and hand the hero back to the
   system palette — the plate is decorative and must not fight a user's contrast. */
@media (forced-colors: active) {
  html.over-void .site-header,
  :where(html:not(.js)) .site-header { background: Canvas; color: CanvasText; }
  #hero { background: Canvas; color: CanvasText; }
  #hero h1,
  #hero .eyebrow,
  #hero .hero__lead,
  #hero .text-link,
  #hero .hero__turn,
  #hero .hero__turn strong { color: CanvasText; }
  #hero .button--primary { border-color: CanvasText; background: Canvas; color: CanvasText; }
  #hero .hero__copy::before { background: none; }
  .hero-stage__ember { display: none; }
}