/* 內文型頁面的排版系統：完全靠留白、級距與對齊分段，不用任何分隔線。
   每一段都是「編號 / 標題 / 內容」三層，讀者一眼知道自己讀到哪。 */
.editorial-page { --muted: #55707f; }
.editorial-page .ed-block { padding-block: clamp(3.5rem,8vw,7.5rem); }
.editorial-page .ed-block:first-child { padding-top: clamp(2rem,5vw,4rem); }

.ed-index {
  margin: 0 0 1.25rem; color: var(--muted);
  font-size: 1.0625rem; font-weight: 550; letter-spacing: .04em;
}
.ed-title {
  max-width: 24em; margin: 0;
  font-size: clamp(1.85rem,3.6vw,3rem); font-weight: 620;
  line-height: 1.42; letter-spacing: -.03em; color: #021526;
}

/* 重點句：一句一段，靠行距與縮排排隊，不畫線。 */
.ed-statements { list-style: none; margin: clamp(2rem,4vw,3rem) 0 0; padding: 0; counter-reset: st; }
.ed-statements > li {
  display: grid; grid-template-columns: 3rem 1fr; align-items: baseline;
  gap: 1rem; padding-block: .85rem;
  font-size: clamp(1.15rem,1.5vw,1.3125rem); font-weight: 450; line-height: 1.85; color: #21384a;
  max-width: 46em;
  counter-increment: st;
}
.ed-statements > li::before {
  content: counter(st,decimal-leading-zero);
  color: var(--muted); font-size: 1rem; font-weight: 550;
}
/* 適合合作的狀況那種「一句就是一個重點」的清單，維持大字。 */
.ed-statements--lead > li { font-size: clamp(1.3rem,2.1vw,1.75rem); font-weight: 500; line-height: 1.6; color: #021526; }

/* 能力／深度：左欄一句話，右欄實際交付。 */
.ed-rows { margin-top: clamp(2rem,4vw,3rem); display: grid; gap: clamp(2.5rem,5vw,4.5rem); }
.ed-row {
  display: grid; grid-template-columns: 3rem minmax(0,1.15fr) minmax(0,1fr);
  gap: 1rem clamp(2rem,4vw,4.5rem);
}
.ed-row--pair { grid-template-columns: minmax(0,1fr) auto; }
.ed-row__no { margin: 0; color: var(--muted); font-size: 1.0625rem; font-weight: 550; }
.ed-row__lede h3 { margin: 0; font-size: clamp(1.4rem,2.4vw,2rem); font-weight: 620; line-height: 1.45; letter-spacing: -.02em; }
.ed-row__lede p { margin: .9rem 0 0; max-width: 34em; font-size: 1.1875rem; line-height: 1.85; color: #33505f; }
.ed-row__list { list-style: none; margin: 0; padding: 0; align-self: center; }
.ed-row__list > li { padding-block: .45rem; font-size: 1.1875rem; line-height: 1.7; color: #021526; }
.ed-row__tag { margin: 0; align-self: start; color: #03346e; font-size: 1.0625rem; font-weight: 600; white-space: nowrap; }

/* 流程：一支往右的漸層箭頭，跟首頁同一種語彙。 */
.ed-timeline {
  position: relative; list-style: none; margin: clamp(2.5rem,5vw,4rem) 0 0; padding: 3.4rem 0 0;
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); column-gap: clamp(1.5rem,3vw,3rem);
}
.ed-timeline::before {
  content: ""; position: absolute; top: 1rem; left: 0; right: 2.4rem; height: .55rem;
  background: linear-gradient(90deg,#6eacda00,#6eacda 14%,#03346e 62%,#021526);
}
.ed-timeline::after {
  content: ""; position: absolute; top: .1rem; right: 0; width: 2.4rem; height: 2.35rem;
  background: #021526; clip-path: polygon(0 0,100% 50%,0 100%);
}
.ed-timeline > li { position: relative; }
.ed-timeline__no { display: block; margin-bottom: .5rem; color: var(--muted); font-size: 1.0625rem; font-weight: 500; }
.ed-timeline h3 { margin: 0; font-size: clamp(1.3rem,2vw,1.65rem); font-weight: 600; line-height: 1.5; }

.ed-close { padding-block: clamp(3rem,6vw,5.5rem); }
.ed-close__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: clamp(1.75rem,3vw,2.5rem); }

/* ── 製作流程：一段文字配一張插圖，左右交替讀下去 ── */
.stage-list { margin-top: clamp(2rem,4vw,3rem); display: grid; gap: clamp(3rem,6vw,5.5rem); }
.stage {
  display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1fr);
  align-items: center; gap: clamp(2rem,5vw,5rem);
}
.stage:nth-child(even) .stage__art { order: 2; }
.stage__art { margin: 0; }
.stage__art svg { display: block; width: 100%; height: auto; }
.stage__no { margin: 0 0 .75rem; color: var(--muted); font-size: 1.0625rem; font-weight: 550; }
.stage__copy h3 { margin: 0; font-size: clamp(1.6rem,2.8vw,2.4rem); font-weight: 620; line-height: 1.35; letter-spacing: -.025em; }
.stage__lede { margin: 1rem 0 0; font-size: clamp(1.25rem,1.9vw,1.5rem); font-weight: 550; line-height: 1.6; color: #03346e; }
.stage__copy > p:last-child { margin: 1rem 0 0; max-width: 34em; font-size: 1.1875rem; line-height: 1.9; color: #33505f; }

/* ── 插圖動畫：捲進視窗才畫一次 ── */
.stage__art [data-draw] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms cubic-bezier(.22,.61,.36,1), transform 620ms cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i,0) * 90ms);
}
.stage.is-drawn .stage__art [data-draw] { opacity: 1; transform: none; }
.stage__art [data-stroke] {
  stroke-dasharray: var(--len,400); stroke-dashoffset: var(--len,400);
  transition: stroke-dashoffset 900ms cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i,0) * 90ms + 160ms);
}
.stage.is-drawn .stage__art [data-stroke] { stroke-dashoffset: 0; }

@media (max-width: 60rem) {
  .ed-row { grid-template-columns: 3rem minmax(0,1fr); }
  .ed-row__list { grid-column: 2; margin-top: .5rem; }
  .ed-row--pair { grid-template-columns: minmax(0,1fr) auto; }
  .stage { grid-template-columns: 1fr; gap: 1.75rem; }
  .stage:nth-child(even) .stage__art { order: 0; }
  .stage__art svg { max-width: 30rem; }
}
@media (max-width: 44rem) {
  .ed-statements > li { grid-template-columns: 2.25rem 1fr; gap: .75rem; font-size: 1.125rem; }
  .ed-statements--lead > li { font-size: 1.3rem; }
  .ed-row { grid-template-columns: 1fr; gap: .35rem; }
  .ed-row__list { grid-column: 1; margin-top: 1rem; }
  .ed-row--pair { grid-template-columns: 1fr; }
  .ed-row__tag { order: -1; }
  .ed-timeline { grid-template-columns: 1fr; row-gap: 1.5rem; padding: 0 0 0 2.6rem; }
  .ed-timeline::before { top: 0; bottom: 2.4rem; left: .6rem; right: auto; width: .55rem; height: auto; background: linear-gradient(180deg,#6eacda00,#6eacda 14%,#03346e 62%,#021526); }
  .ed-timeline::after { top: auto; bottom: 0; left: .05rem; right: auto; width: 2.35rem; height: 2.4rem; clip-path: polygon(0 0,100% 0,50% 100%); }
  .ed-close__actions { gap: 1rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .stage__art [data-draw],.stage__art [data-stroke] { transition: none; opacity: 1; transform: none; stroke-dashoffset: 0; }
}