/* ===== 排版探索 · 共用底層（8 版共用，各版 about-lab-vN.css 疊加骨架差異）=====
   刻意獨立於 assets/about-v2.css 之外（不 import 它），避免定案版日後改動
   污染實驗版。這裡只放「內容跑得動」需要的基本規則：字級、間距、格線、
   deck 元件的預設外觀。所有顏色只用 site.css :root 既有 token。 */

.lane2{width:100%;max-width:1100px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.sec{padding:clamp(60px,9vh,110px) 0;position:relative}
.sec+.sec{border-top:1px solid var(--line)}

.kk{font-size:.92rem;letter-spacing:.18em;color:var(--teal);font-weight:800;margin-bottom:16px}
.sec h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:900;line-height:1.45;color:var(--cream);margin-bottom:24px}
.sec h3{font-size:clamp(1.1rem,2vw,1.4rem);font-weight:800;line-height:1.6;color:var(--hot);margin:2em 0 .8em}
.sec p{font-size:1.1rem;line-height:1.95;color:#d6e3ea;margin-bottom:1.4em}
.sec p:last-child{margin-bottom:0}
.sec p b{color:var(--cream);font-weight:800}

.sec p.pq{font-size:clamp(1.25rem,2.4vw,1.85rem);line-height:1.6;font-weight:800;color:var(--hot);margin:0 0 30px}
.sec p.pq small{display:block;font-size:1rem;font-weight:600;color:var(--cream-dim);margin-top:16px;line-height:1.75}
.sec p.pq.mid{margin:40px 0}
.sec .cq{margin:34px 0;font-size:clamp(1.1rem,1.8vw,1.35rem);line-height:1.85;font-weight:700;color:var(--cream)}

/* 淺色區塊（沿用「深→淺交替」這個換氣手法，多版共用） */
.sec.light{background:var(--paper);color:var(--dark)}
.sec.light .kk{color:var(--navy)}
.sec.light h2{color:var(--dark)}
.sec.light h3{color:var(--navy)}
.sec.light p{color:#33454f}
.sec.light p b{color:var(--dark)}
.sec.light p.pq{color:var(--navy)}
.sec.light p.pq small{color:var(--dark-dim)}
.sec.light .cq{color:var(--dark)}
.sec.light .facts{border-top-color:var(--line-d)}
.sec.light .facts b{color:var(--navy)}
.sec.light .facts span{color:var(--dark-dim)}
.sec.light .side figcaption,.sec.light .shot2 figcaption,.sec.light .duo figcaption{color:var(--dark-dim)}
.sec.light .side img,.sec.light .shot2 img,.sec.light .duo img{box-shadow:0 14px 34px rgba(28,43,56,.16),0 2px 8px rgba(28,43,56,.10)}
.sec.light .pts .pt{border-bottom-color:var(--line-d)}
.sec.light .pts .pt h3{color:var(--dark)}
.sec.light .pts .pt p{color:var(--dark-dim)}
.sec.light+.sec.light{border-top-color:var(--line-d)}
.sec.light+.sec:not(.light),.sec:not(.light)+.sec.light{border-top:0}
.sec.key.light{background:#fff}
.sec.key.light .cq{color:var(--navy)}

/* 兩欄：文左圖右 / 交錯 */
.cols{display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,24vw,320px);gap:clamp(26px,3.4vw,50px);align-items:start}
.cols.flip{grid-template-columns:clamp(220px,24vw,320px) minmax(0,1fr)}
.cols.flip .main{order:2}
.cols.flip .side{order:1}
.side{margin:0}
.side figure{margin:0}
.side figure+figure{margin-top:20px}
.side img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:14px;
  box-shadow:0 14px 36px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3)}
.side figcaption{margin-top:10px;font-size:.85rem;line-height:1.7;color:var(--cream-dim)}
.side .top img{object-position:center 22%}

.solo{max-width:820px}

.pts{margin-top:6px}
.pts .pt{padding:24px 0;border-bottom:1px solid var(--line)}
.pts .pt:last-child{border-bottom:none}
.pts .pt h3{margin:0 0 .6em;color:var(--cream);font-size:1.18rem}
.pts .pt p{margin:0;color:var(--cream-dim);font-size:1.05rem;line-height:1.9}

.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,30px);
  margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.facts b{display:block;font-size:clamp(1.6rem,3.4vw,2.2rem);font-weight:900;color:var(--hot);
  line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.facts span{display:block;margin-top:8px;font-size:.98rem;line-height:1.6;color:var(--cream-dim)}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:38px}
.duo figure{margin:0}
.duo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;
  box-shadow:0 14px 36px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.28)}
.duo figcaption{margin-top:10px;font-size:.86rem;line-height:1.7;color:var(--cream-dim)}

.shot2{margin:38px 0 0}
.shot2 img{display:block;width:100%;border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3)}
.shot2 figcaption{margin-top:12px;font-size:.9rem;line-height:1.7;color:var(--cream-dim)}

/* Hero */
.ah{padding:clamp(120px,15vh,170px) 0 clamp(56px,8vh,88px);background:linear-gradient(180deg,#081420,#0a1c2a)}
.ah h1{font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:900;line-height:1.45;color:#fbfeff;letter-spacing:-.01em}
.ah h1 em{font-style:normal;color:var(--hot)}
.ah .sub{margin-top:24px;font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.85;color:var(--cream-dim)}
.ah2{display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,28vw,360px);gap:clamp(24px,4vw,50px);align-items:center}
.ah2 .cut{margin:0;width:100%}
.ah2 .cut img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:18px;
  box-shadow:0 22px 50px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.4)}
.idband{padding:clamp(24px,4vh,34px) 0;margin-top:30px;border-top:1px solid var(--line)}
.idband dl{display:grid;grid-template-columns:auto 1fr;gap:8px clamp(12px,2vw,20px);margin:0}
.idband dt{font-size:.85rem;font-weight:800;color:var(--teal);white-space:nowrap;line-height:1.8}
.idband dd{margin:0;font-size:.96rem;line-height:1.8;color:var(--cream-dim)}
.idband dd b{color:var(--cream);font-weight:800}
.idband a{color:var(--cream-dim);text-decoration:underline;text-underline-offset:3px}
.idband a:hover{color:var(--hot)}

/* 結尾 CTA */
.end{padding:clamp(76px,10vh,130px) 0;background:var(--ink-deep)}
.end h2{font-size:clamp(1.5rem,3vw,2.3rem);font-weight:900;color:var(--cream);margin-bottom:22px}
.end p{font-size:1.1rem;line-height:1.95;color:var(--cream-dim);margin-bottom:1.4em}
.end .cta-row{margin-top:28px}
.end .note{margin-top:20px;font-size:.96rem;color:var(--cream-dim)}
.end .note b{color:var(--hot)}
.endgrid{display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,28vw,360px);gap:clamp(26px,4vw,50px);align-items:center}
.endshot{margin:0}
.endshot img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:18px;
  box-shadow:0 22px 50px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.4)}

.sec.beat{padding:clamp(90px,13vh,150px) 0}

@media(max-width:900px){
  .cols,.cols.flip{grid-template-columns:1fr;gap:26px}
  .cols.flip .main{order:1}
  .cols.flip .side{order:2}
  .ah2{grid-template-columns:1fr;gap:20px}
  .ah2 .cut{max-width:220px}
  .endgrid{grid-template-columns:1fr;gap:24px}
  .endshot{max-width:200px}
}
@media(max-width:640px){
  .facts{grid-template-columns:1fr;gap:20px}
  .duo{grid-template-columns:1fr}
  .idband dl{grid-template-columns:1fr;gap:4px}
}

/* 視覺隱藏但保留在 DOM／可被螢幕閱讀器讀到（不是拿來藏文字，是給裝飾用空元素的基礎） */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}