/* ============================================================================
   P · 多页站 —— 在 N 的基础上加「每页顶部一张通栏横屏大图」
   ============================================================================
   与 N 的唯一结构差别：
     N   页面开头 = 纸面文字页头（.p-hero：lab + h1 + lead + meta）
     P   页面开头 = 通栏 16:9 大图（.ph），lab / h1 / meta 压在图上，
                  lead 段落落到图下纸面（.ph-lead），另加一条署名带（.ph-credit）
   图片口径与 N 的 process 页一致：AI 生成的图版一律在页面内明示，不做实拍冒充。
   ========================================================================== */

/* ------------------------------ 通栏大图 ------------------------------ */
.ph{position:relative;background:var(--ink);isolation:isolate;overflow:hidden;
  padding:0}   /* n.css 有 section{padding:64px 0}，通栏图必须压掉，否则上下各留一条黑边 */
.ph-media{position:relative}
.ph-media img{display:block;width:100%;aspect-ratio:16/9;max-height:min(80vh,780px);
  object-fit:cover;object-position:center 55%}
/* 压字用的渐变：顶部轻、底部重，保证白字在任何图上都读得出来 */
.ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(23,19,15,.30) 0%,rgba(23,19,15,.06) 30%,
    rgba(23,19,15,.34) 62%,rgba(23,19,15,.82) 100%)}
.ph-body{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;padding-bottom:clamp(26px,3.4vw,44px)}
.ph-body .lab{color:#E8B27C;margin:0}
.ph-body h1{font-family:var(--serif);font-weight:600;margin:12px 0 0;color:#fff;
  font-size:clamp(27px,3.6vw,50px);line-height:1.1;letter-spacing:-.02em;max-width:26ch;
  text-shadow:0 1px 24px rgba(0,0,0,.35)}
.ph-body .meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px;font-size:12.5px;color:rgba(255,255,255,.82)}
.ph-body .meta .mono{color:rgba(255,255,255,.82)}

/* 图下一行小字署名（AI 生成 / 实拍 都写在这里） */
.ph-credit{background:var(--paper2);border-bottom:1px solid var(--line)}
.ph-credit .wrap{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;padding-top:11px;padding-bottom:11px;
  font-size:12.5px;color:var(--muted);line-height:1.6}
.ph-credit .mono{color:var(--copper);flex:0 0 auto}

/* 图下回到纸面的导语段 */
.ph-lead{font-size:17px;line-height:1.72;color:var(--ink3);max-width:76ch;margin:34px 0 6px}
html[lang^="zh"] .ph-lead{font-size:16.5px;line-height:1.9}

/* ------------------------------ 首页版式 ------------------------------ */
.ph-home .ph-media img{max-height:min(80vh,780px)}
.ph-home .ph-body h1{font-size:clamp(30px,4.4vw,60px);line-height:1.08;max-width:24ch}
.ph-lead-in{color:rgba(255,255,255,.86);font-size:16.5px;max-width:56ch;margin:18px 0 0}
.ph-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn.ghost{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.55);color:#fff;
  backdrop-filter:blur(4px)}
.btn.ghost:hover{background:rgba(255,255,255,.20);border-color:#fff}
html[lang^="zh"] .ph-lead-in{font-size:16px;line-height:1.85}

/* 21:9 通栏实拍横带（首页「在机色样」——真图，用来和上面的 AI 大图对照） */
figure.plate img.band{aspect-ratio:21/9;object-fit:cover;object-position:center 52%}

/* ------------------------------ 响应式 ------------------------------ */
@media (max-width:1060px){
  .ph-media img{max-height:min(64vh,560px)}
  .ph-body h1{max-width:20ch}
}
/* 窄屏不再压字：横屏大图在上，文字落到图下纸面，图仍是 16:9 横构图 */
@media (max-width:660px){
  .ph::after{background:linear-gradient(180deg,rgba(23,19,15,.16) 0%,rgba(23,19,15,.10) 100%)}
  .ph-media img{aspect-ratio:16/9;max-height:none;object-position:center 52%}
  .ph-body{position:static;color:var(--ink);padding:22px 0 0;background:var(--paper)}
  .ph-body .lab{color:var(--copper)}
  .ph-body h1{color:var(--ink);font-size:clamp(25px,7.4vw,34px);max-width:none;text-shadow:none;margin-top:10px}
  .ph-body .meta{color:var(--muted);margin-top:14px}
  .ph-body .meta .mono{color:var(--muted)}
  .ph-home .ph-body h1{font-size:clamp(26px,7.8vw,36px)}
  .ph-lead-in{color:var(--ink3);margin-top:14px}
  .ph-cta{margin-top:20px}
  .btn.ghost{background:transparent;border-color:var(--line2);color:var(--ink)}
  .btn.ghost:hover{background:var(--paper2);border-color:var(--ink)}
  .ph-lead{font-size:16px;margin-top:26px}
}