/* ============================================================
   Week 6 · 审片台 deck · v2
   舞台 1600×900 等比缩放。每页一句话，内容垂直居中；
   能嵌的站直接嵌进来滚，不能嵌的放录屏；图都能点开放大。
   ============================================================ */

:root{
  --ink:#191512; --ink-2:#221B17;
  --paper:#F1EBE1;
  --red:#D8442F; --red-soft:rgba(216,68,47,.14);
  --mute:#8B8075;
  --line:rgba(241,235,225,.14);
  --line-dark:rgba(25,21,18,.16);
  --sans:"Noto Sans SC","PingFang SC","Hiragino Sans GB",sans-serif;
  --disp:"Archivo","Noto Sans SC","PingFang SC",sans-serif;
  --mono:"Azeret Mono","SF Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0E0C0A;overflow:hidden}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased}

/* ---------- 舞台 ---------- */
#stage-wrap{position:fixed;inset:0;overflow:hidden}
#stage{position:absolute;left:50%;top:50%;width:1600px;height:900px;transform-origin:50% 50%;overflow:hidden;
  background:var(--ink);color:var(--paper);box-shadow:0 4rem 12rem rgba(0,0,0,.6)}

.slide{position:absolute;inset:0;padding:96px 96px 72px;display:flex;flex-direction:column;justify-content:center;gap:28px;
  opacity:0;visibility:hidden;pointer-events:none;background:var(--ink)}
.slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
.slide.light{background:var(--paper);color:var(--ink)}

/* 进场：内容块依次浮起 */
.slide>*{opacity:0;transform:translateY(16px)}
.slide.is-active>*{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.slide.is-active>*:nth-child(2){transition-delay:.08s}
.slide.is-active>*:nth-child(3){transition-delay:.16s}
.slide.is-active>*:nth-child(4){transition-delay:.24s}

/* ---------- 排版 ---------- */
.eyebrow{position:absolute;top:66px;left:96px;right:96px;font-family:var(--mono);font-size:14px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:14px;margin:0;transform:none!important}
.eyebrow b{color:var(--red);font-weight:500}
.light .eyebrow{color:#6F6459}
.eyebrow .rule{flex:0 0 160px;height:1px;background:var(--line)}
.light .eyebrow .rule{background:var(--line-dark)}

h1{font-family:var(--disp);font-weight:800;font-size:112px;line-height:.96;letter-spacing:-.035em;margin:0}
h2{font-family:var(--disp);font-weight:800;font-size:76px;line-height:1.02;letter-spacing:-.03em;margin:0}
h3{font-family:var(--disp);font-weight:700;font-size:46px;line-height:1.12;letter-spacing:-.02em;margin:0;text-wrap:balance}
h4{font-size:26px;font-weight:700;line-height:1.3;margin:0;letter-spacing:-.01em}
p{font-size:23px;line-height:1.55;margin:0;color:rgba(241,235,225,.78);max-width:56ch}
.light p{color:rgba(25,21,18,.76)}
.lead{font-size:30px;line-height:1.45;color:var(--paper);max-width:40ch}
.light .lead{color:var(--ink)}
.cap{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--mute);line-height:1.5;text-transform:uppercase}
em{font-style:normal;color:var(--red)}
strong{font-weight:700;color:var(--paper)}
.light strong{color:var(--ink)}
a{color:inherit}

.row{display:flex;gap:40px;align-items:center}
.col{display:flex;flex-direction:column;gap:20px}
.grow{flex:1;min-height:0}

/* ---------- 封面 / 幕间 / 金句 ---------- */
.cover{justify-content:space-between;padding-top:120px}
.cover h1{font-size:136px}
.cover .sub{font-size:28px;color:rgba(241,235,225,.7);max-width:34ch;line-height:1.45}
.cover .meta{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:22px}

.divider{background:var(--ink-2);gap:0}
.divider .num{font-family:var(--disp);font-weight:800;font-size:240px;line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px rgba(241,235,225,.26);letter-spacing:-.04em}
.divider h2{font-size:96px;margin-top:-36px}
.divider .sub{font-size:26px;color:var(--mute);margin-top:22px;max-width:44ch;line-height:1.5}

.quote h2{font-size:88px;max-width:20ch}
.quote .by{font-size:28px;color:var(--mute);max-width:40ch}

/* ---------- 媒体：截图 / 直播嵌入 / 录屏 ---------- */
figure{margin:0;position:relative;line-height:0}
figure img{display:block;width:100%;height:auto;border-radius:4px}
.shot>img{box-shadow:0 26px 60px rgba(0,0,0,.45);cursor:zoom-in}
.shot figcaption{margin-top:12px}
.tag{position:absolute;top:-16px;left:-16px;width:46px;height:46px;border-radius:50%;background:var(--paper);color:var(--ink);
  display:grid;place-items:center;z-index:3;font-family:var(--disp);font-weight:800;font-size:21px}
.stamp{position:absolute;right:16px;top:16px;z-index:4;font-family:var(--mono);font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--paper);background:var(--red);padding:7px 13px;border-radius:2px}

.media{position:relative;border-radius:6px;overflow:hidden;background:#000;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.media iframe,.media video{display:block;width:100%;height:100%;border:0;background:#000}
.media video{object-fit:cover;object-position:top}
.media .bar{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;background:linear-gradient(transparent,rgba(0,0,0,.72));font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(241,235,225,.85);pointer-events:none;z-index:3;line-height:1.4}
.media .bar a,.media .bar button{pointer-events:auto;color:var(--paper);background:rgba(241,235,225,.14);border:1px solid rgba(241,235,225,.25);
  border-radius:3px;padding:7px 12px;font:inherit;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;margin-left:8px}
.media .bar a:hover,.media .bar button:hover{background:var(--red);border-color:var(--red)}
.media .veil{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:rgba(14,12,10,.28);cursor:pointer;
  font-family:var(--mono);font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper);transition:opacity .4s}
.media .veil span{background:var(--red);padding:12px 20px;border-radius:3px}
.media.is-live .veil{opacity:0;pointer-events:none}
.media.clip{cursor:zoom-in}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:0 -70px}

/* 聚光灯：一次只亮一处 */
.spot{position:relative;border-radius:4px;overflow:hidden}
.spot img{display:block;width:100%;height:auto}
.spot .dim{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.spot .dim rect.hole{transition:x .45s var(--ease),y .45s var(--ease),width .45s var(--ease),height .45s var(--ease)}
.spot .dim .frame{fill:none;stroke:var(--red);stroke-width:3;transition:x .45s var(--ease),y .45s var(--ease),width .45s var(--ease),height .45s var(--ease)}
.spot-list{display:flex;flex-direction:column;gap:6px;margin:0;padding:0}
.spot-list li{list-style:none;display:flex;gap:18px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);
  font-size:26px;font-weight:700;color:rgba(241,235,225,.28);transition:color .35s}
.spot-list li i{font-family:var(--mono);font-style:normal;font-size:13px;letter-spacing:.12em;color:inherit}
.spot-list li small{display:block;font-weight:400;font-size:16px;color:inherit;opacity:.8;margin-top:4px}
.spot-list li.is-on{color:var(--paper)}
.spot-list li.is-on i{color:var(--red)}

/* 对照 */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.vs .label{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.vs .label i{width:9px;height:9px;border-radius:50%;background:var(--red)}
.vs .label.ok i{background:#7FA06A}
.vs .label.mid i{background:#C8922F}

/* 机制图 */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:26px}
.flow .node{border:1px solid var(--line);border-radius:6px;padding:30px;display:flex;flex-direction:column;gap:14px;justify-content:center;min-height:250px}
.flow .node.hot{border-color:var(--red);background:var(--red-soft)}
.flow .arrow{color:var(--red);font-size:28px;font-family:var(--mono);align-self:center}
.flow .t{font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase}
.flow .b{font-size:34px;font-weight:700;line-height:1.3}

/* 表 / 卡 */
.table{width:100%;border-collapse:collapse;font-size:24px}
.table th{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);text-align:left;font-weight:400;padding:0 0 14px;border-bottom:1px solid var(--line)}
.light .table th{border-color:var(--line-dark)}
.table td{padding:21px 0;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.4}
.light .table td{border-color:var(--line-dark)}
.table td:first-child{padding-right:34px;width:38%;color:var(--mute)}
.table td.hi{color:var(--paper);font-weight:500}
.light .table td.hi{color:var(--ink)}
.table .n{font-family:var(--mono);font-size:14px;color:var(--red);width:44px;padding-right:0}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.card{border-top:2px solid var(--red);padding-top:20px;display:flex;flex-direction:column;gap:12px}
.card .k{font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--red);text-transform:uppercase}
.card h4{font-size:34px}
.card p{font-size:22px;line-height:1.5}

.nums{display:flex;justify-content:space-between;align-items:flex-start}
.big-num{font-family:var(--disp);font-weight:800;font-size:112px;line-height:1;letter-spacing:-.03em}
.big-num small{display:block;font-family:var(--mono);font-size:14px;font-weight:400;letter-spacing:.12em;color:var(--mute);margin-top:14px;text-transform:uppercase}

.code{font-family:var(--mono);font-size:19px;background:rgba(241,235,225,.06);border:1px solid var(--line);border-radius:6px;padding:22px 26px;color:var(--paper);line-height:1.75;white-space:pre;margin:0}
.light .code{background:rgba(25,21,18,.05);border-color:var(--line-dark);color:var(--ink)}
.code .c{color:var(--mute)} .code .r{color:var(--red)}

/* 字号样张 */
.specimen{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:end;border-top:1px solid var(--line-dark);padding-top:22px}
.sp-a{font-family:var(--disp);font-weight:800;font-size:96px;line-height:1;letter-spacing:-.03em;display:block}
.sp-b{font-family:var(--disp);font-weight:700;font-size:32px;line-height:1.4;letter-spacing:0;display:block}

/* 清单 / 步骤 */
.checklist{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 32px}
.check{display:flex;flex-direction:column;gap:12px}
.check .hd{display:flex;align-items:baseline;gap:12px}
.check .hd i{font-family:var(--mono);font-style:normal;font-size:13px;color:var(--red);letter-spacing:.1em}
.check h4{font-size:24px}
.check img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;cursor:zoom-in}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.step{border:1px solid var(--line);border-radius:8px;padding:38px 34px;display:flex;flex-direction:column;gap:16px}
.light .step{border-color:var(--line-dark)}
.step.gate{border-color:var(--red);background:var(--red-soft)}
.step .g{font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--red);text-transform:uppercase}
.step h4{font-size:34px}
.step p{font-size:22px;line-height:1.5}

/* 吸附对比：两块能真滚的面板 */
.snapdemo{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.pane{height:520px;overflow-y:auto;border-radius:8px;background:#0C0A09;scrollbar-width:none;cursor:ns-resize}
.pane::-webkit-scrollbar{display:none}
.pane.snap{scroll-snap-type:y mandatory}
.pane .p{height:520px;display:flex;align-items:center;justify-content:center;padding:40px;font-family:var(--disp);font-weight:700;
  font-size:44px;letter-spacing:-.02em;text-align:center;color:var(--paper);text-wrap:balance}
.pane.snap .p{scroll-snap-align:start}
.pane .p:nth-child(1){background:#2C231D}.pane .p:nth-child(2){background:#3A2E27}.pane .p:nth-child(3){background:#4A3A30}.pane .p:nth-child(4){background:#5C463A}

/* ---------- 放大镜 ---------- */
#lightbox{position:fixed;inset:0;z-index:100;background:rgba(10,8,7,.94);display:none;overflow:hidden;cursor:grab}
#lightbox.on{display:block}
#lightbox img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;user-select:none;-webkit-user-drag:none}
#lightbox .lb-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(241,235,225,.6);pointer-events:none}

/* ---------- 底部状态条 ---------- */
#hud{position:absolute;left:0;right:0;bottom:0;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 96px;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase;z-index:20}
#hud .bar{position:absolute;left:0;top:0;height:2px;background:var(--red);width:0;transition:width .5s var(--ease)}
#hud.light{color:#6F6459}
#hud .nav{display:flex;gap:6px}
#hud .nav button{font:inherit;letter-spacing:.14em;text-transform:uppercase;color:inherit;background:none;border:1px solid currentColor;
  border-radius:3px;padding:5px 11px;cursor:pointer;opacity:.7}
#hud .nav button:hover{opacity:1;color:var(--red)}
#hint{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:rgba(241,235,225,.45);text-transform:uppercase;transition:opacity .5s;z-index:30;pointer-events:none}
#hint.hide{opacity:0}

@media print{
  html,body{overflow:visible;background:#fff}
  #stage-wrap{position:static;display:block}
  #stage{position:relative;left:auto;top:auto;transform:none!important;page-break-after:always;box-shadow:none}
  .slide{opacity:1!important;visibility:visible!important;position:relative}
  .slide>*{opacity:1!important;transform:none!important}
}
@media (prefers-reduced-motion:reduce){
  .slide>*{transition:none!important;opacity:1!important;transform:none!important}
}