/* =========================================================
   风格皮肤 / STYLE SKINS
   ---------------------------------------------------------
   切换方式：在 <html> 上写 data-style="blueprint | diagonal | editorial | swiss"
   不写 = blueprint（site.css 本身就是这套，无需覆盖）

   本文件只做「覆盖」，结构（网格、灯箱、图组）全部沿用 site.css，
   所以任何皮肤都能用同一份 HTML。
   ========================================================= */

/* =========================================================
   1. BLUEPRINT — 图纸风（基线，不覆盖）
   米白纸 + 蓝图网格 + 等宽标注 + 四角定位标记
   参考：技术图纸 / 施工图签
   ========================================================= */


/* =========================================================
   2. DIAGONAL — 构成派 / 斜切
   纯黑白、超大压缩字、斜线构成、满幅大图无边框
   参考：构成主义海报、ARCH PORTFOLIO 类封面
   ========================================================= */
[data-style="diagonal"]{
  --paper:#ffffff;
  --paper-2:#f0f0f0;
  --ink:#0a0a0a;
  --ink-2:#3d3d3d;
  --ink-3:#8a8a8a;
  --accent:#0a0a0a;
  --line:rgba(10,10,10,.22);
  --line-2:rgba(10,10,10,.10);
  --grid:transparent;
  --grid-2:transparent;
  --pad:clamp(18px,3.4vw,54px);
}
/* 去掉底纹与定位角标 —— 构成派不需要图纸语言 */
[data-style="diagonal"] body::before{display:none}
[data-style="diagonal"] .marks{display:none}

/* 标题：粗、紧、大写感 */
[data-style="diagonal"] h1{
  font-weight:700;letter-spacing:-.02em;line-height:.94;
}
[data-style="diagonal"] h1 .en{
  font-weight:700;letter-spacing:.24em;color:var(--ink);
  font-size:clamp(10px,1vw,12px);line-height:1.6;margin-top:16px;
}
[data-style="diagonal"] .hero-eyebrow{
  border-bottom:2px solid var(--ink);padding-bottom:10px;
}
[data-style="diagonal"] .hero-role,
[data-style="diagonal"] .hero-quote{
  border-left:3px solid var(--ink);padding-left:14px;
}
/* 斜线构成：封面底部的斜纹带 */
[data-style="diagonal"] .hero{overflow:hidden}
[data-style="diagonal"] .hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:30px;
  background:repeating-linear-gradient(-45deg,var(--ink) 0 1px,transparent 1px 8px);
  opacity:.32;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 72%);
          mask-image:linear-gradient(90deg,#000,transparent 72%);
}
[data-style="diagonal"] .hero .wrap{position:relative;z-index:1}

/* 图片：去边框，满幅；整体转黑白（构成派的标志，想去掉就删这两行） */
[data-style="diagonal"] .frame{border:0}
[data-style="diagonal"] .frame::before{background:none}
[data-style="diagonal"] .frame img,
[data-style="diagonal"] .hero-fig img{filter:grayscale(1) contrast(1.05)}

/* 图注：粗体短横 */
[data-style="diagonal"] .cap{
  font-weight:600;letter-spacing:.1em;color:var(--ink);
  padding-left:16px;
}
[data-style="diagonal"] .cap::before{width:10px;height:2px;background:var(--ink);top:.5em}

/* 章节头：粗黑底线 */
[data-style="diagonal"] .sec-head{border-bottom:2px solid var(--ink);padding-bottom:12px}
[data-style="diagonal"] .sec-head h2{font-weight:700;letter-spacing:0}

/* 目录：超大编号（颜色交给基线的 --solid-fg-2，深色区才看得见） */
[data-style="diagonal"] .toc-no{
  font-size:clamp(24px,3vw,40px);font-weight:700;letter-spacing:-.02em;
}
[data-style="diagonal"] .toc-row{border-bottom:1px solid var(--ink)}
[data-style="diagonal"] .toc-cn{font-weight:500;letter-spacing:0}
[data-style="diagonal"] .toc-thumb{aspect-ratio:16/10;filter:grayscale(1) contrast(1.1)}

/* 项目头：编号压成大字 */
[data-style="diagonal"] .p-no{font-weight:700;letter-spacing:-.03em}
[data-style="diagonal"] .p-head{border-bottom:2px solid var(--ink)}
[data-style="diagonal"] .p-titles h2{font-weight:600;letter-spacing:0}

/* 深色带：背景交给 JS 的 --solid-bg（日间会变纯白，这里不能写死） */
[data-style="diagonal"] .titleblock{border-color:rgba(255,255,255,.45)}


/* ---------- 夜间预置色板 ----------
   site.css 里的 html.t-night 写的是深蓝，那是图纸风的夜间色。
   其余三种风格各有自己的夜间色，在这里预置，脚本执行前不会闪一下深蓝。 */
[data-style="diagonal"].t-night{
  --paper:#0a0a0a;--paper-2:#1c1c1c;
  --ink:#ffffff;--ink-2:#c6c6c6;--ink-3:#8c8c8c;
  --line:rgba(255,255,255,.20);--line-2:rgba(255,255,255,.10);
  --grid:transparent;--grid-2:transparent;
  --nav-bg:rgba(10,10,10,.86);--nav-fg:#ffffff;--nav-fg2:#c6c6c6;--nav-fg3:#8c8c8c;
  --nav-line:rgba(255,255,255,.20);
  --mark:rgba(255,255,255,.30);--badge-bg:rgba(255,255,255,.92);--badge-fg:#0a0a0a;
  --glow:.95;
}
[data-style="editorial"].t-night{
  --paper:#1a1a1a;--paper-2:#262626;
  --ink:#f6f6f6;--ink-2:#bcbcbc;--ink-3:#888888;
  --line:rgba(255,255,255,.16);--line-2:rgba(255,255,255,.08);
  --grid:transparent;--grid-2:transparent;
  --nav-bg:rgba(22,22,22,.86);--nav-fg:#f6f6f6;--nav-fg2:#bcbcbc;--nav-fg3:#888888;
  --nav-line:rgba(255,255,255,.16);
  --mark:rgba(255,255,255,.30);--badge-bg:rgba(255,255,255,.92);--badge-fg:#1a1a1a;
  --glow:.95;
}
[data-style="swiss"].t-night{
  --paper:#101010;--paper-2:#1e1e1e;
  --ink:#ffffff;--ink-2:#c8c8c8;--ink-3:#8c8c8c;
  --line:rgba(255,255,255,.18);--line-2:rgba(255,255,255,.09);
  --grid:transparent;--grid-2:transparent;
  --nav-bg:rgba(16,16,16,.88);--nav-fg:#ffffff;--nav-fg2:#c8c8c8;--nav-fg3:#8c8c8c;
  --nav-line:rgba(255,255,255,.18);
  --mark:rgba(255,255,255,.30);--badge-bg:rgba(255,255,255,.92);--badge-fg:#101010;
  --glow:.95;
}


/* =========================================================
   3. EDITORIAL — 杂志极简
   大量留白、名字压在左下、角落小字、无网格无边框
   参考：独立杂志 / 品牌手册
   ========================================================= */
[data-style="editorial"]{
  --paper:#ffffff;
  --paper-2:#f4f4f4;
  --ink:#1a1a1a;
  --ink-2:#55524e;
  --ink-3:#9a9691;
  --accent:#1a1a1a;
  --line:rgba(26,26,26,.14);
  --line-2:rgba(26,26,26,.07);
  --grid:transparent;
  --grid-2:transparent;
  --pad:clamp(28px,7vw,120px);
}
[data-style="editorial"] body::before{display:none}
[data-style="editorial"] .marks{display:none}
[data-style="editorial"] .vtype{display:none}

/* 封面重排：图在上，名字压在左下 */
[data-style="editorial"] .hero-grid{
  grid-template-columns:1fr;
  grid-template-areas:"fig" "txt";
  gap:clamp(24px,3vw,44px);
}
[data-style="editorial"] .hero-fig{grid-area:fig;min-height:clamp(320px,52vh,620px)}
[data-style="editorial"] .hero-txt{grid-area:txt}
[data-style="editorial"] .hero-eyebrow{border-bottom:0;padding-bottom:0;margin-bottom:clamp(10px,1.6vw,16px)}
[data-style="editorial"] h1{
  font-weight:300;letter-spacing:.14em;
  font-size:clamp(44px,7vw,104px);
}
[data-style="editorial"] h1 .en{
  letter-spacing:.5em;color:var(--ink-3);font-size:clamp(9px,.9vw,11px);
}
[data-style="editorial"] .hero-quote{
  border-left:0;padding-left:0;color:var(--ink-3);
  font-size:12px;
}
[data-style="editorial"] .hero-spec{
  border-top:0;gap:0 clamp(20px,4vw,60px);
  grid-template-columns:repeat(4,auto);
  justify-content:start;
}
[data-style="editorial"] .hero-spec>div{border-right:0;padding:6px 0}
[data-style="editorial"] .hero-spec dt{font-size:8px;letter-spacing:.24em}

/* 图注：角落标注，无横线 */
[data-style="editorial"] .cap{
  padding-left:0;letter-spacing:.2em;font-size:8.5px;color:var(--ink-3);
}
[data-style="editorial"] .cap::before{display:none}
[data-style="editorial"] .frame{border:0;background:var(--paper-2)}
[data-style="editorial"] .frame::before{background:none}

/* 章节头：极细线 + 小字 */
[data-style="editorial"] .sec-head{
  border-bottom:1px solid var(--line);padding-bottom:14px;
}
[data-style="editorial"] .sec-head h2{font-weight:300;letter-spacing:.16em;font-size:clamp(20px,2.4vw,30px)}
[data-style="editorial"] .sec-no{font-size:9px;letter-spacing:.3em}

/* 目录：去掉缩略图，行距加大 */
[data-style="editorial"] .toc-thumb{display:none}
[data-style="editorial"] .toc-row{
  grid-template-columns:56px minmax(0,1.6fr) minmax(0,1fr) 110px 24px;
  border-bottom:1px solid var(--line);
  padding:clamp(20px,2.8vw,34px) 0;
}
[data-style="editorial"] .toc-no{font-size:11px;letter-spacing:.24em;color:var(--ink-3)}
[data-style="editorial"] .toc-cn{font-weight:300;letter-spacing:.08em;font-size:clamp(17px,2vw,26px)}
[data-style="editorial"] .toc-cn em{letter-spacing:.2em;font-size:.5em;margin-top:8px}

/* 项目头：编号变小，靠字距撑气口 */
[data-style="editorial"] .p-head{border-bottom:1px solid var(--line);padding-bottom:clamp(18px,2.6vw,30px)}
[data-style="editorial"] .p-no{font-size:clamp(20px,2.4vw,30px);letter-spacing:.1em;color:var(--ink-3)}
[data-style="editorial"] .p-titles h2{font-weight:300;letter-spacing:.1em}
[data-style="editorial"] .pmeta>div{border-bottom:1px solid var(--line-2)}

/* 深色带：背景交给 JS 的 --solid-bg */
[data-style="editorial"] .contact-lead{font-weight:200;letter-spacing:.08em}


/* =========================================================
   4. SWISS — 瑞士几何
   几何色块封面、黑块强调、极细线、小字大字距
   参考：国际主义平面设计 / 建筑事务所作品集
   ========================================================= */
[data-style="swiss"]{
  --paper:#ffffff;
  --paper-2:#f2f2f2;
  --ink:#101010;
  --ink-2:#4a4a48;
  --ink-3:#8f8f8c;
  --accent:#101010;
  --line:rgba(16,16,16,.18);
  --line-2:rgba(16,16,16,.09);
  --grid:transparent;
  --grid-2:transparent;
  --pad:clamp(20px,4.4vw,72px);
}
[data-style="swiss"] body::before{display:none}
[data-style="swiss"] .marks{display:none}

/* 封面：几何折面 + 右下深色块 */
[data-style="swiss"] .hero{overflow:hidden}
[data-style="swiss"] .hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(128deg, #eeeeee 0 38%, #e0e0e0 38% 62%, #ffffff 62% 100%);
}
[data-style="swiss"] .hero .wrap{position:relative;z-index:1}
[data-style="swiss"] .hero-fig{display:none}
[data-style="swiss"] .hero-grid{grid-template-columns:minmax(0,1.1fr) auto}
[data-style="swiss"] h1{
  font-weight:400;letter-spacing:.02em;line-height:1.02;
  font-size:clamp(38px,5.6vw,84px);
}
[data-style="swiss"] h1 .en{
  font-weight:400;letter-spacing:.34em;font-size:clamp(9px,.95vw,11px);
}
/* 标题块：黑底白字，压在封面右下 */
[data-style="swiss"] .hero-txt{position:relative}
[data-style="swiss"] .hero-role{
  display:inline-block;background:var(--ink);color:var(--paper);
  padding:18px 22px;margin-top:clamp(20px,3vw,34px);max-width:30ch;
}
[data-style="swiss"] .hero-role::after{content:none}
[data-style="swiss"] .hero-quote{border-left:1px solid var(--line);color:var(--ink-2)}
[data-style="swiss"] .hero-eyebrow{border-bottom:1px solid var(--line)}
[data-style="swiss"] .hero-spec{border-top:1px solid var(--line)}
[data-style="swiss"] .vtype{font-weight:300;letter-spacing:.5em}

/* 图注：极小、大字距 */
[data-style="swiss"] .cap{font-size:8px;letter-spacing:.22em;color:var(--ink-3);padding-left:9px}
[data-style="swiss"] .cap::before{width:4px}
[data-style="swiss"] .frame{border:0}

/* 章节头：数字做黑块 */
[data-style="swiss"] .sec-head{border-bottom:1px solid var(--ink);align-items:center}
[data-style="swiss"] .sec-no{
  background:var(--ink);color:var(--paper);padding:4px 9px;letter-spacing:.16em;
}
[data-style="swiss"] .sec-head h2{font-weight:300;letter-spacing:.1em;font-size:clamp(19px,2.2vw,28px)}

/* 目录：编号黑块，行线极细 */
[data-style="swiss"] .toc-row{border-bottom:1px solid var(--line-2);padding:clamp(14px,2vw,22px) 0}
[data-style="swiss"] .toc-no{
  background:var(--ink);color:var(--paper);padding:3px 8px;justify-self:start;
  font-size:11px;letter-spacing:.14em;
}
[data-style="swiss"] .toc-cn{font-weight:400;letter-spacing:.06em;font-size:clamp(15px,1.6vw,20px)}
[data-style="swiss"] .toc-thumb{aspect-ratio:1/1;filter:grayscale(1)}

/* 项目头：编号黑块 + 细线 */
[data-style="swiss"] .p-head{border-bottom:1px solid var(--ink);align-items:center}
[data-style="swiss"] .p-no{
  background:var(--ink);color:var(--paper);padding:6px 12px;
  font-size:clamp(16px,2vw,26px);line-height:1;
}
[data-style="swiss"] .p-titles h2{font-weight:400;letter-spacing:.04em}

/* 深色带：背景交给 JS 的 --solid-bg */
[data-style="swiss"] .contact-lead{font-weight:300;letter-spacing:.04em}


/* =========================================================
   公共修正：非图纸风不要深色区的网格底纹
   （图纸语言只属于 blueprint）
   ========================================================= */
[data-style="diagonal"] .dark::before,
[data-style="diagonal"] .contact::before,
[data-style="editorial"] .dark::before,
[data-style="editorial"] .contact::before,
[data-style="swiss"] .dark::before,
[data-style="swiss"] .contact::before{display:none}

/* 中文正文的阅读宽度：ch 对中文太窄，统一用 em */
[data-style="editorial"] .hero-role{max-width:34em}
[data-style="editorial"] .about-lead{max-width:38em}
[data-style="swiss"] .hero-role{max-width:26em}

/* 瑞士风的黑块在深色区里要反相，否则黑底黑块看不见 */
[data-style="swiss"] .dark .sec-no,
[data-style="swiss"] .dark .toc-no,
[data-style="swiss"] .contact .sec-no{
  background:var(--solid-fg);color:var(--solid-bg);
}

/* =========================================================
   版面节奏 / LAYOUT RHYTHM
   ---------------------------------------------------------
   在 <html> 上加 data-layout="standard | contact | stack"
   不写 = standard（按 HTML 里作者排好的分组）

   这一层只改「同一份 HTML 的排布密度」，不动分组与顺序。
   要真正重组图片（谁跟谁一行），得在生成阶段换排版方案，
   见 references/layout-variants.md。
   ========================================================= */

/* --- contact：等比方格图版 ---
   所有图组压成统一方格，去掉图注与说明，像一版 contact sheet。
   适合过程图多、单张不够强、想强调「量」的项目。 */
[data-layout="contact"] .gal{
  columns:auto;display:grid;gap:clamp(6px,1vw,12px);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
[data-layout="contact"] .gal.c2,
[data-layout="contact"] .gal.c3,
[data-layout="contact"] .gal.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
[data-layout="contact"] .gal .item{display:block;margin:0}
[data-layout="contact"] .gal .frame{aspect-ratio:1/1 !important}
[data-layout="contact"] .gal .note,
[data-layout="contact"] .gal .cap{display:none}
/* 图纸条也压成同一套方格，否则和上面的图组不是一回事 */
[data-layout="contact"] .sheet-row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,1vw,12px);
}
[data-layout="contact"] .sheet-row .item{width:auto;flex:none}
[data-layout="contact"] .sheet-row .frame{
  width:100%;height:auto;aspect-ratio:1/1 !important;
}
[data-layout="contact"] .sheet-row .cap,
[data-layout="contact"] .sheet-row .note-item{display:none}

/* --- stack：单列大图 ---
   图组拆成一张一行，正文与图也上下叠。节奏最慢，单张最突出。
   适合图片少而精、或想让每张图都被认真看的作品集。 */
[data-layout="stack"] .gal{columns:auto;display:block}
[data-layout="stack"] .gal .item{display:block;margin:0 0 clamp(26px,4vw,52px)}
[data-layout="stack"] .gal .frame{aspect-ratio:auto !important}
[data-layout="stack"] .gal .frame img{height:auto}
[data-layout="stack"] .gal .note{margin-bottom:clamp(12px,2vw,18px);padding-bottom:0;max-width:38em}
[data-layout="stack"] .p-split{grid-template-columns:1fr}
[data-layout="stack"] .sheet-row .frame{height:clamp(420px,64vh,720px)}

@media (max-width:820px){
  [data-layout="contact"] .gal,
  [data-layout="contact"] .gal.c2,
  [data-layout="contact"] .gal.c3,
  [data-layout="contact"] .gal.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* =========================================================
   移动端：所有皮肤统一收掉装饰，避免挤
   ========================================================= */
@media (max-width:820px){
  [data-style="diagonal"] .hero::after{display:none}
  [data-style="editorial"] .hero-spec{grid-template-columns:repeat(2,1fr)}
  [data-style="editorial"] .hero-grid{grid-template-areas:"fig" "txt"}
  [data-style="swiss"] .hero::before{background:#e9e9e6}
}