/*
Theme Name: 智汇摄影 Zhihui Photo
Theme URI: https://zcstzhihui.icu/
Author: 珠海科技学院智汇摄影协会
Description: 接触印相式摄影社团主题。相纸白、墨黑、普鲁士蓝；作品以 contact sheet 呈现，联系信息默认打码，投稿走前台表单直接落草稿待审。
Version: 2.1.3
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: zhihui
*/

/* ============ 1. tokens ============ */
:root{
  --paper:#e8e6e0;
  --paper-2:#f2f0ea;
  --paper-3:#dcd9d1;
  --ink:#14130f;
  --ink-2:#3a3833;
  --ink-3:#57544e;
  --ink-4:#65625b;
  --line:#c9c5bb;
  --line-2:#ded9cf;
  --blue:#123f8c;
  --blue-2:#1d5bb8;
  --blue-soft:#e3e8f3;
  --red:#b5372a;
  --red-soft:#f0e2df;
  /* 固定反色：不随主题翻转。用于「永远是深色块」的页脚、加入我们、代码块。
     语义色 --paper / --ink 在深色主题里会整体对调，拿它做反色块会在深色下变成白底黑字。 */
  --ink-fixed:#14130f;
  --paper-fixed:#e8e6e0;
  --on-fixed:#ece8df;
  --serif:'Noto Serif SC','Songti SC','SimSun',Georgia,serif;
  --sans:'Helvetica Neue','PingFang SC','Microsoft YaHei',Arial,sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',Consolas,'Liberation Mono',monospace;
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
html[data-theme=dark]{
  --paper:#0b0a08;
  --paper-2:#131210;
  --paper-3:#1c1a16;
  --ink:#ece8df;
  --ink-2:#c9c4b8;
  --ink-3:#a8a294;
  --ink-4:#8a857a;
  --line:#2a2722;
  --line-2:#221f1b;
  --blue:#5d8fd8;
  --blue-2:#8ab2ee;
  --blue-soft:#17233a;
  --red:#d9634f;
  --red-soft:#2e1a16;
}

/* ============ 2. base ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  transition:background .3s var(--ease),color .3s var(--ease);
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme=dark] body::before{opacity:.05;mix-blend-mode:screen}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--blue)}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.25;letter-spacing:-.01em}
p{margin:0 0 1em}
button{font:inherit;color:inherit}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.zh-wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.zh-mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.zh-serif{font-family:var(--serif)}
.zh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ============ 3. admin bar / header ============ */
body.admin-bar .zh-head{top:32px}
@media (max-width:782px){body.admin-bar .zh-head{top:46px}}
.zh-head{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line);
}
.zh-head-in{display:flex;align-items:center;gap:28px;height:66px;max-width:var(--maxw);margin:0 auto;padding:0 32px}
.zh-brand{display:flex;align-items:baseline;gap:10px;font-family:var(--serif);font-size:19px;letter-spacing:.02em;white-space:nowrap}
.zh-brand b{font-weight:600}
.zh-brand span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase}
.zh-nav{display:flex;align-items:center;gap:22px;margin-left:auto}
.zh-nav a{font-size:13.5px;color:var(--ink-2);position:relative;padding:4px 0;transition:color .18s}
.zh-nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.zh-nav a:hover{color:var(--ink)}
.zh-nav a:hover::after,.zh-nav a.is-on::after{transform:scaleX(1)}
.zh-nav a.is-on{color:var(--ink);font-weight:600}
.zh-head-act{display:flex;align-items:center;gap:10px;margin-left:8px}
.zh-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:38px;padding:0 18px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;transition:background .18s,color .18s,border-color .18s;white-space:nowrap;
}
.zh-btn:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.zh-btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.zh-btn.ghost:hover{border-color:var(--ink);background:transparent;color:var(--ink)}
.zh-btn.sm{height:32px;padding:0 12px;font-size:10px}
.zh-icon-btn{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);background:transparent;cursor:pointer;transition:border-color .18s,color .18s}
.zh-icon-btn:hover{border-color:var(--ink);color:var(--blue)}
.zh-burger{display:none}

/* ============ 4. hero ============ */
.zh-hero{padding:76px 0 56px;border-bottom:1px solid var(--line)}
.zh-kicker{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.zh-kicker::before{content:'';width:34px;height:1px;background:var(--blue)}
.zh-h1{font-family:var(--serif);font-size:clamp(38px,5.2vw,66px);line-height:1.12;letter-spacing:-.02em;font-weight:500}
.zh-h1 em{font-style:normal;color:var(--blue);position:relative}
.zh-h1 em::after{content:'';position:absolute;left:0;right:0;bottom:.08em;height:.32em;background:var(--blue-soft);z-index:-1}
.zh-lede{margin-top:26px;max-width:46ch;color:var(--ink-2);font-size:15.5px;line-height:1.85}
.zh-hero-meta{display:flex;gap:34px;margin-top:38px;padding-top:26px;border-top:1px solid var(--line-2)}
.zh-hero-meta div{display:flex;flex-direction:column;gap:4px}
.zh-hero-meta b{font-family:var(--serif);font-size:28px;font-weight:500;line-height:1}
.zh-hero-meta span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* ============ 5. section ============ */
.zh-sec{padding:84px 0;border-bottom:1px solid var(--line)}
.zh-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px;flex-wrap:wrap}
.zh-sec-head h2{font-family:var(--serif);font-size:clamp(26px,3vw,38px);font-weight:500;letter-spacing:-.01em}
.zh-sec-head h2 small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;font-weight:400}
.zh-sec-head .zh-more{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:3px;transition:border-color .18s,color .18s}
.zh-sec-head .zh-more:hover{border-color:var(--blue)}

/* ============ 6. works grid ============ */
.zh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.zh-card{display:flex;flex-direction:column;gap:0;group:card}
.zh-card-fig{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-3);display:block}
.zh-card-fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .5s}
.zh-card:hover .zh-card-fig img{transform:scale(1.035)}
.zh-card-fig .zh-badge{position:absolute;top:10px;left:10px;padding:3px 8px;background:rgba(20,19,15,.78);color:#f2f0ea;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.zh-card-fig .zh-num{position:absolute;right:10px;bottom:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:#f2f0ea;background:rgba(20,19,15,.6);padding:2px 6px}
.zh-card-b{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);display:flex;flex-direction:column;gap:7px}
.zh-card-t{font-family:var(--serif);font-size:18px;font-weight:500;line-height:1.4;transition:color .18s}
.zh-card:hover .zh-card-t{color:var(--blue)}
.zh-card-m{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.zh-card-m i{font-style:normal;color:var(--ink-4)}
.zh-card-x{font-size:13px;color:var(--ink-3);line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ============ 7. stats ============ */
.zh-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.zh-stat{padding:34px 26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.zh-stat b{font-family:var(--serif);font-size:clamp(30px,3.4vw,44px);font-weight:500;line-height:1;letter-spacing:-.02em}
.zh-stat span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* ============ 8. team ============ */
.zh-team{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.zh-person{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--paper-2);transition:border-color .2s}
.zh-person:hover{border-color:var(--ink-3)}
/* 团队照片默认彩色：原来加了 grayscale(1)，只在 hover 才还原，等于默认看不到色彩 */
.zh-person img,.zh-person .ph{aspect-ratio:4/5;width:100%;object-fit:cover;background:var(--paper-3)}
.zh-person:hover img{filter:contrast(1.03)}
.zh-person .ph{display:grid;place-items:center;background:var(--paper-3);font-family:var(--serif);font-size:40px;color:var(--ink-4)}
.zh-person-b{padding:16px 18px 18px;display:flex;flex-direction:column;gap:5px}
.zh-person-b b{font-family:var(--serif);font-size:17px;font-weight:500}
.zh-person-b span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.zh-person-b p{margin:6px 0 0;font-size:13px;color:var(--ink-2);line-height:1.6}

/* ============ 9. single work ============ */
.zh-single{padding:44px 0 84px}
.zh-single-grid{display:grid;grid-template-columns:1fr 340px;gap:52px;align-items:start}
.zh-single-fig{border:1px solid var(--line);background:var(--paper-2);padding:12px}
.zh-single-fig img{width:100%}
.zh-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:8px}
.zh-thumbs img{aspect-ratio:1;object-fit:cover;cursor:pointer;opacity:.6;transition:opacity .2s}
.zh-thumbs img:hover,.zh-thumbs img.on{opacity:1}
.zh-meta-box{border:1px solid var(--line);background:var(--paper-2);padding:24px;position:sticky;top:88px}
.zh-meta-box h3{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px;font-weight:500}
.zh-dl{display:grid;grid-template-columns:88px 1fr;gap:10px 14px;margin:0;font-size:13.5px}
.zh-dl dt{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.zh-dl dd{margin:0;color:var(--ink)}
.zh-contact{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.zh-contact .val{font-family:var(--mono);font-size:15px;letter-spacing:.04em;word-break:break-all}
.zh-contact .masked{color:var(--ink-3);letter-spacing:.12em}
.zh-locked{display:flex;flex-direction:column;gap:10px;font-size:13px;color:var(--ink-3);line-height:1.6}
.zh-params{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.zh-params span{font-family:var(--mono);font-size:10px;letter-spacing:.06em;padding:4px 9px;border:1px solid var(--line);color:var(--ink-2)}

/* ============ 10. form ============ */
.zh-form{display:grid;gap:18px}
.zh-field{display:flex;flex-direction:column;gap:7px}
.zh-field label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.zh-field label i{font-style:normal;color:var(--red)}
.zh-input,.zh-select,.zh-textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);background:var(--paper-2);color:var(--ink);
  font-family:var(--sans);font-size:14px;transition:border-color .18s,background .18s;
}
.zh-input:focus,.zh-select:focus,.zh-textarea:focus{outline:none;border-color:var(--blue);background:var(--paper)}
.zh-textarea{min-height:110px;resize:vertical;line-height:1.7}
.zh-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.zh-drop{
  border:1px dashed var(--line);background:var(--paper-2);padding:28px 20px;text-align:center;
  cursor:pointer;transition:border-color .2s,background .2s;
}
.zh-drop:hover,.zh-drop.on{border-color:var(--blue);background:var(--blue-soft)}
.zh-drop p{margin:6px 0 0;font-size:12.5px;color:var(--ink-3)}
.zh-drop b{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.zh-previews{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}
.zh-previews div{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid var(--line)}
.zh-previews img{width:100%;height:100%;object-fit:cover}
.zh-previews button{position:absolute;top:3px;right:3px;width:20px;height:20px;border:0;background:rgba(20,19,15,.75);color:#fff;cursor:pointer;font-size:11px;line-height:1}

/* ============ 11. notice / status ============ */
.zh-note{padding:14px 16px;border-left:2px solid var(--blue);background:var(--blue-soft);font-size:13.5px;line-height:1.7}
.zh-note.warn{border-color:var(--red);background:var(--red-soft)}
.zh-note.ok{border-color:#2f6b3a;background:#e6efe6}
html[data-theme=dark] .zh-note.ok{background:#14261a;border-color:#4f9a63}
.zh-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line)}
.zh-pill.pending{border-color:#c9973a;color:#8a6410}
.zh-pill.publish{border-color:#2f6b3a;color:#2f6b3a}
.zh-pill.rejected{border-color:var(--red);color:var(--red)}

/* ============ 12. pagination ============ */
.zh-pager{display:flex;align-items:center;justify-content:center;gap:6px;padding:44px 0 0}
.zh-pager .page-numbers{display:grid;place-items:center;min-width:36px;height:36px;padding:0 8px;border:1px solid var(--line);font-family:var(--mono);font-size:11px;transition:border-color .18s,background .18s}
.zh-pager .page-numbers:hover{border-color:var(--ink)}
.zh-pager .page-numbers.current{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ============ 13. footer ============ */
/* 页脚永远是深色块，所以用固定反色而不是语义色 —— 深色主题下 --paper 是黑的，会变成黑底黑字 */
.zh-foot{background:var(--ink-fixed);color:var(--on-fixed);padding:64px 0 34px;margin-top:0}
.zh-foot-brand,.zh-foot-copy,.zh-foot-brand-box small{color:var(--on-fixed)}
html[data-theme=dark] .zh-foot{background:#060505;color:var(--on-fixed);border-top:1px solid var(--line)}
/* 页脚只有一行：品牌 · 六个必要链接 · 版权（对齐 Node 版，导航留在顶部） */
.zh-foot-row{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;flex-wrap:wrap}
.zh-foot-brand-box{min-width:180px}
.zh-foot-brand-box small{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(232,230,224,.66)}
.zh-foot-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:6px}
.zh-foot-links a,.zh-foot-links button{font-size:13px;color:rgba(232,230,224,.72);background:none;border:0;padding:0;cursor:pointer;font-family:inherit;letter-spacing:.01em}
.zh-foot-links a:hover,.zh-foot-links button:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.zh-foot-fb{font-family:inherit}
.zh-foot-copy{text-align:right;padding-top:6px}
.zh-foot-copy small{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;line-height:1.9;color:rgba(232,230,224,.66)}
.zh-foot h4{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(232,230,224,.5);margin-bottom:16px;font-weight:500}
.zh-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.zh-foot a{font-size:13.5px;color:rgba(232,230,224,.78)}
.zh-foot a:hover{color:#fff}
.zh-foot-brand{font-family:var(--serif);font-size:22px;margin-bottom:12px}
.zh-foot p{font-size:13px;color:rgba(232,230,224,.72);line-height:1.8;max-width:34ch}
.zh-foot-bot{display:flex;justify-content:space-between;gap:20px;padding-top:22px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(232,230,224,.66);flex-wrap:wrap}

/* ============ 14. WP defaults ============ */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.alignleft{float:left;margin:0 24px 16px 0}
.alignright{float:right;margin:0 0 16px 24px}
.aligncenter{margin-left:auto;margin-right:auto}
.wp-caption{margin:0 0 1.5em;max-width:100%}
.wp-caption-text{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:8px}
.zh-prose{max-width:70ch;font-size:16px;line-height:1.9}
.zh-prose h2{font-family:var(--serif);font-size:26px;margin:38px 0 16px;font-weight:500}
.zh-prose h3{font-family:var(--serif);font-size:20px;margin:30px 0 12px;font-weight:500}
.zh-prose img{margin:22px 0;border:1px solid var(--line)}
.zh-prose blockquote{margin:24px 0;padding:6px 0 6px 20px;border-left:2px solid var(--blue);font-family:var(--serif);font-size:18px;color:var(--ink-2)}
.zh-prose code{padding:2px 6px;background:var(--paper-2);border:1px solid var(--line-2);font-family:var(--mono);font-size:13px}
.zh-prose pre{padding:16px;background:var(--ink-fixed);color:var(--paper-fixed);overflow:auto;font-family:var(--mono);font-size:13px}
.zh-prose pre code{border:0;background:none;padding:0;color:inherit}
.zh-prose ul,.zh-prose ol{padding-left:22px;line-height:1.9}
.zh-prose table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14px}
.zh-prose th,.zh-prose td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left}
.zh-prose th{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* comments */
.zh-comments{margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}
.zh-comments h3{font-family:var(--serif);font-size:22px;margin-bottom:24px;font-weight:500}
.comment-list{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.comment-list li{padding-bottom:20px;border-bottom:1px solid var(--line-2)}
.comment-author{font-family:var(--serif);font-size:15px;font-weight:500}
.comment-meta{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-3);margin:4px 0 10px}
.comment-content{font-size:14px;line-height:1.8;color:var(--ink-2)}

/* ============ 15. table (develop / events) ============ */
.zh-table{width:100%;border-collapse:collapse;font-size:14px}
.zh-table th{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:12px 14px;border-bottom:1px solid var(--ink)}
.zh-table td{padding:16px 14px;border-bottom:1px solid var(--line-2);vertical-align:top}
.zh-table tr:hover td{background:var(--paper-2)}
.zh-table .price{font-family:var(--mono);font-size:15px;white-space:nowrap}
.zh-table .t{font-family:var(--serif);font-size:16px}

/* ============ 16. empty / 404 ============ */
.zh-empty{padding:110px 0;text-align:center}
.zh-empty .zh-serif{font-size:clamp(30px,4vw,48px);color:var(--ink-3)}
.zh-empty p{margin-top:16px;color:var(--ink-3);font-size:14px}

/* ============ 17. responsive ============ */
@media (max-width:1024px){
  .zh-single-grid{grid-template-columns:1fr}
  .zh-meta-box{position:static}
  .zh-foot-links{gap:16px}
  .zh-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .zh-wrap,.zh-head-in{padding:0 18px}
  .zh-head-in{height:58px;gap:14px}
  .zh-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:6px 0}
  .zh-nav.open{display:flex}
  .zh-nav a{padding:12px 18px;font-size:15px}
  .zh-nav a::after{display:none}
  .zh-burger{display:grid}
  .zh-hero{padding:44px 0 36px}
  .zh-sec{padding:52px 0}
  .zh-grid,.zh-team,.zh-stats{grid-template-columns:1fr 1fr}
  .zh-stats{grid-template-columns:1fr 1fr}
  .zh-row{grid-template-columns:1fr}
  .zh-hero-meta{gap:22px;flex-wrap:wrap}
  .zh-foot-row{flex-direction:column;gap:20px}
  .zh-foot-links{gap:14px 16px;padding-top:0}
  .zh-foot-copy{text-align:left}
  .zh-table{font-size:13px}
  .zh-table th,.zh-table td{padding:10px 8px}
  .zh-dl{grid-template-columns:76px 1fr}
}
@media (max-width:460px){
  .zh-grid,.zh-team{grid-template-columns:1fr}
  .zh-thumbs{grid-template-columns:repeat(4,1fr)}
  .zh-previews{grid-template-columns:repeat(3,1fr)}
}
/* ============ 18. chips / crumbs / list / events / misc ============ */
.zh-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.zh-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--line);background:transparent;color:var(--ink-2);font-size:12.5px;line-height:1;text-decoration:none;transition:border-color .16s,color .16s,background .16s}
.zh-chip i{font-family:var(--mono);font-style:normal;font-size:10px;color:var(--ink-3)}
.zh-chip:hover{border-color:var(--ink);color:var(--ink)}
.zh-chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.zh-chip.on i{color:inherit;opacity:.7}

.zh-crumbs{display:flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.06em;color:var(--ink-3);padding-top:26px}
.zh-crumbs a{color:var(--ink-3);text-decoration:none}
.zh-crumbs a:hover{color:var(--blue)}
.zh-crumbs span{opacity:.5}
.zh-crumbs .on{color:var(--ink-2);opacity:1}

.zh-list{border-top:1px solid var(--line)}
.zh-list-row{display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;padding:18px 0;border-bottom:1px solid var(--line-2)}
.zh-list-thumb{display:block;aspect-ratio:4/3;background:var(--paper-3);overflow:hidden}
.zh-list-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.zh-list-thumb .ph{display:flex;align-items:center;justify-content:center;height:100%;font-family:var(--mono);font-size:9px;color:var(--ink-3)}
.zh-list-b{min-width:0}
.zh-list-t{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--serif);font-size:17px;line-height:1.4}
.zh-list-t a{color:var(--ink);text-decoration:none}
.zh-list-t a:hover{color:var(--blue)}
.zh-list-m{margin-top:7px;font-size:10.5px;letter-spacing:.04em;color:var(--ink-3)}

.zh-pill{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;font-style:normal;padding:3px 7px;border:1px solid currentColor;line-height:1}
.zh-pill.publish{color:#2c6b3e}
.zh-pill.draft,.zh-pill.pending{color:#9a6a1a}
.zh-pill.rejected{color:var(--red)}

.zh-evlist{border-top:1px solid var(--line)}
.zh-ev-row{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:24px;align-items:start;padding:24px 0;border-bottom:1px solid var(--line-2);text-decoration:none;transition:background .16s}
.zh-ev-row:hover{background:var(--paper-2)}
.zh-ev-date{border-right:1px solid var(--line);padding-right:18px;text-align:right}
.zh-ev-date b{display:block;font-family:var(--serif);font-size:40px;line-height:1;font-weight:400;color:var(--ink)}
.zh-ev-date span{display:block;margin-top:6px;font-size:10px;color:var(--ink-3)}
.zh-ev-b{min-width:0}
.zh-ev-t{font-family:var(--serif);font-size:19px;line-height:1.45;color:var(--ink)}
.zh-ev-m{margin-top:6px;font-size:10.5px;letter-spacing:.05em;color:var(--ink-3)}
.zh-ev-x{margin:10px 0 0;font-size:13.5px;line-height:1.75;color:var(--ink-2)}
.zh-ev-go{align-self:center;font-size:10px;letter-spacing:.08em;color:var(--ink-3);white-space:nowrap}
.zh-ev-row:hover .zh-ev-go{color:var(--blue)}

.zh-search{display:flex;gap:0;max-width:420px}
.zh-search input{flex:1;min-width:0;padding:11px 14px;border:1px solid var(--line);border-right:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;outline:none}
.zh-search input:focus{border-color:var(--ink)}
.zh-search button{padding:11px 18px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:.08em;cursor:pointer}

.zh-preview{position:relative;aspect-ratio:1;background:var(--paper-3);overflow:hidden}
.zh-preview img{width:100%;height:100%;object-fit:cover;display:block}
.zh-preview .zh-mono{position:absolute;left:6px;bottom:5px;font-size:9px;color:#fff;background:rgba(20,19,15,.6);padding:1px 4px}
.zh-preview-x{position:absolute;top:4px;right:4px;width:22px;height:22px;border:0;background:rgba(20,19,15,.72);color:#fff;font-size:14px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.zh-preview-x:hover{background:var(--red)}
.zh-drop.hot{border-color:var(--blue);background:rgba(18,63,140,.04)}

.zh-reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.zh-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.zh-reveal{opacity:1;transform:none;transition:none}}

@media (max-width:760px){
  .zh-ev-row{grid-template-columns:64px minmax(0,1fr);gap:14px}
  .zh-ev-date{border-right:0;padding-right:0;text-align:left}
  .zh-ev-date b{font-size:30px}
  .zh-ev-go{display:none}
  .zh-list-row{grid-template-columns:84px minmax(0,1fr);gap:14px}
}
/* ---------- 活动详情 ---------- */
.zh-ev-hero{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;margin:28px 0 30px;padding:26px 28px;background:var(--paper-2);border:1px solid var(--line-2)}
.zh-ev-hero .zh-ev-date b{font-family:var(--serif);font-size:54px;line-height:.95;letter-spacing:-.02em}
.zh-ev-hero .zh-ev-date span{display:block;margin-top:6px}
.zh-ev-info{display:flex;flex-direction:column;gap:9px;padding-top:4px}
.zh-ev-info div{display:flex;gap:14px;font-size:14px;line-height:1.6}
.zh-ev-info i{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink-4);font-style:normal;min-width:52px;padding-top:3px}
.zh-signup-box{margin:34px 0 10px;padding:24px 26px;border:1px solid var(--line);background:var(--paper-2);display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.zh-signup-box .zh-sb-main{flex:1;min-width:220px}
.zh-signup-box .zh-sb-main b{font-family:var(--serif);font-size:19px;font-weight:400;display:block;margin-bottom:6px}
.zh-signup-box .zh-sb-main p{margin:0;font-size:13.5px;color:var(--ink-3);line-height:1.7}
.zh-signup-box .zh-sb-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--ink-4)}
.zh-signup-ok{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--blue)}
.zh-signup-ok::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--blue)}
@media (max-width:640px){
  .zh-ev-hero{grid-template-columns:1fr;gap:14px;padding:20px}
  .zh-ev-hero .zh-ev-date b{font-size:42px}
  .zh-signup-box{padding:18px}
}

/* ---- 法律条款长文（从旧站搬来，保留原 class） ---- */
.zh-doc { max-width: 72ch; font-size: 15.5px; line-height: 1.95; color: var(--ink-2); }
.zh-doc .doc { max-width: none; }
.zh-doc h3 { font-family: var(--serif); font-size: 19px; margin: 38px 0 12px; color: var(--ink); display: flex; gap: 10px; align-items: baseline; }
.zh-doc h3 .n { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--blue); min-width: 26px; }
.zh-doc p { margin: 0 0 14px; }
.zh-doc b { color: var(--ink); }
.zh-doc ol, .zh-doc ul { margin: 0 0 16px; padding-left: 22px; }
.zh-doc li { margin-bottom: 8px; }
.zh-doc a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.zh-doc .doc-lead { border-left: 3px solid var(--blue); padding: 14px 18px; background: var(--paper-2); margin: 0 0 26px; }
.zh-doc .doc-lead b { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--blue); margin-bottom: 8px; }
.zh-doc .doc-lead p { margin: 0; font-size: 14.5px; }
.zh-doc .doc-warn { border: 1px solid var(--line); padding: 16px 18px; margin: 0 0 22px; background: var(--paper-2); }
.zh-doc .doc-warn b { display: block; margin-bottom: 6px; }
.zh-doc .doc-foot { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); }
.zh-doc .mono { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; }
@media (max-width: 640px) { .zh-doc { font-size: 15px; } .zh-doc h3 { font-size: 17px; } }

/* ---- 约拍 ---- */
.zh-dlist{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.zh-drow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:start;padding:18px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:background .15s}
.zh-drow:hover{background:var(--paper-2)}
.zh-dtag{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;padding:4px 8px;border:1px solid var(--line);white-space:nowrap;color:var(--ink-3)}
.zh-dtag.model{border-color:var(--blue);color:var(--blue)}
.zh-dtag.shooter{border-color:var(--red);color:var(--red)}
.zh-db{min-width:0}
.zh-dt{font-family:var(--serif);font-size:17px;line-height:1.45}
.zh-dm{font-size:10px;letter-spacing:.06em;color:var(--ink-4);margin-top:6px}
.zh-dx{font-size:13.5px;color:var(--ink-3);margin-top:8px;line-height:1.75;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.zh-dgo{color:var(--ink-4);font-size:12px;padding-top:3px}
.zh-hero-shot img{border-radius:2px}
@media (max-width:760px){
  .zh-drow{grid-template-columns:auto minmax(0,1fr);gap:12px}
  .zh-dgo{display:none}
}


/* ── 我的账号：标签页 / 通知 / 表单 ───────────────── */
.zh-field>span,.zh-field>label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.zh-field>span i,.zh-field>label i{font-style:normal;color:var(--red)}
.zh-dim{color:var(--ink-3)}
.zh-h2s{font-family:var(--serif);font-size:19px;font-weight:600;margin:0 0 18px}
.zh-acc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.42fr);gap:52px;align-items:start}
.zh-acc-forms{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:44px}
.zh-acc-forms .zh-field{margin-bottom:16px}
.zh-acc-forms .zh-btn{margin-top:4px}
.zh-notiflist{border-top:1px solid var(--line)}
.zh-notifrow{display:flex;flex-direction:column;gap:5px;padding:16px 14px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;transition:background .18s}
.zh-notifrow:hover{background:var(--paper-2)}
.zh-notifrow b{font-family:var(--serif);font-weight:600;font-size:15px}
.zh-notifrow span{font-size:13px;color:var(--ink-2);line-height:1.6}
.zh-notifrow i{font-size:10px;color:var(--ink-3);font-style:normal}
.zh-notifrow.unread{box-shadow:inset 3px 0 0 var(--blue)}
@media (max-width:860px){
  .zh-acc-grid{grid-template-columns:minmax(0,1fr);gap:34px}
}
/* ---------- 更新日志归档 /changelog/ ---------- */
.zh-cl-list{border-top:1px solid var(--line)}
.zh-cl{display:grid;grid-template-columns:158px minmax(0,1fr);gap:32px;padding:30px 0 26px;border-bottom:1px solid var(--line-2)}
.zh-cl-side{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.zh-cl-side b{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--ink);font-weight:400}
.zh-cl-side>span{font-family:var(--mono);font-size:10px;color:var(--ink-4);letter-spacing:.08em}
.zh-cl-tag{font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.12em;padding:3px 7px;border:1px solid var(--line);color:var(--ink-3);margin-top:4px}
.zh-cl-tag.pin{border-color:var(--blue);color:var(--blue)}
.zh-cl-t{font-family:var(--serif);font-size:19px;font-weight:500;line-height:1.5;color:var(--ink)}
.zh-cl-x{margin-top:10px;font-size:14.5px;line-height:1.85;color:var(--ink-2)}
.zh-cl-ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.zh-cl-ul li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.75;color:var(--ink-3)}
.zh-cl-ul li::before{content:'';position:absolute;left:0;top:.78em;width:7px;height:1px;background:var(--blue)}

/* ---------- 贡献者 /credits/ ---------- */
.zh-cred{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.zh-cred-i{background:var(--paper);padding:26px 24px 28px;display:flex;flex-direction:column}
.zh-cred-num{font-size:10px;color:var(--ink-4);letter-spacing:.12em}
.zh-cred-n{font-family:var(--serif);font-size:20px;font-weight:500;margin-top:12px;line-height:1.4}
.zh-cred-r{font-size:10px;letter-spacing:.1em;color:var(--blue);margin-top:8px;line-height:1.6}
.zh-cred-x{margin-top:12px;font-size:13.5px;line-height:1.8;color:var(--ink-2);flex:1}
.zh-cred-l{font-size:10.5px;color:var(--ink-3);text-decoration:none;margin-top:16px;word-break:break-all}
.zh-cred-l:hover{color:var(--blue)}

@media (max-width:860px){
  .zh-cl{grid-template-columns:1fr;gap:10px;padding:24px 0 22px}
  .zh-cl-side{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}
  .zh-cl-tag{margin-top:0}
  .zh-cred{grid-template-columns:1fr}
}

/* ---- 二维码页 ---- */
.zh-qr-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:48px;margin-top:40px;align-items:start}
.zh-qr-form .zh-field{margin-bottom:16px}
.zh-qr-acts{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 18px}
.zh-qr-form .zh-note{margin-bottom:12px}
.zh-qr-card{background:var(--paper-2);border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:14px}
.zh-qr-card canvas{width:100%;height:auto;display:block;background:#fff}
.zh-qr-foot{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.zh-qr-foot-cap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zh-qr-foot-ver{white-space:nowrap;color:var(--blue)}
@media (max-width:860px){.zh-qr-grid{grid-template-columns:1fr;gap:28px}.zh-qr-card{order:-1}}

/* ---------- 每周命题 /theme/ ---------- */
.zh-thm-hero{display:grid;grid-template-columns:minmax(0,1fr) 320px;border:1px solid var(--line);background:var(--paper-2)}
.zh-thm-l{padding:30px 32px 28px;display:flex;flex-direction:column;gap:0}
.zh-thm-m{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;font-size:10px}
.zh-thm-m i{font-style:normal;opacity:.45}
.zh-thm-state{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;border:1px solid var(--line);color:var(--ink-3)}
.zh-thm-state.open{color:var(--blue);border-color:var(--blue)}
.zh-thm-state.closed{color:var(--ink-4);opacity:.75}
.zh-thm-t{font-family:var(--serif);font-size:clamp(24px,3vw,34px);line-height:1.28;margin:16px 0 0;font-weight:600}
.zh-thm-t a{text-decoration:none;color:inherit}
.zh-thm-t a:hover{color:var(--blue)}
.zh-thm-x{margin:12px 0 0;font-size:14px;line-height:1.85;color:var(--ink-2);max-width:56ch}
.zh-thm-f{margin-top:auto;padding-top:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.zh-thm-r{display:grid;grid-template-columns:1fr;border-left:1px solid var(--line)}
.zh-thm-th{display:block;position:relative;overflow:hidden;background:var(--paper-3);aspect-ratio:4/3;border-bottom:1px solid var(--line)}
.zh-thm-th:last-child{border-bottom:0}
.zh-thm-th img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.zh-thm-th:hover img{transform:scale(1.04)}
.zh-thm-th.blank{display:flex;align-items:center;justify-content:center}
.zh-thm-th.blank span{font-size:9.5px;color:var(--ink-4)}
.zh-thm-list{border-top:1px solid var(--line)}
.zh-thm-row{display:grid;grid-template-columns:130px minmax(0,1fr) 62px auto;align-items:center;gap:20px;padding:18px 4px;border-bottom:1px solid var(--line-2);text-decoration:none;color:inherit;transition:background .2s}
.zh-thm-row:hover{background:var(--paper-2)}
.zh-thm-when{font-size:10px;color:var(--ink-3)}
.zh-thm-b{display:flex;flex-direction:column;gap:5px;min-width:0}
.zh-thm-tt{font-family:var(--serif);font-size:17px;font-weight:600}
.zh-thm-xx{font-size:12.5px;color:var(--ink-3);line-height:1.6;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.zh-thm-n{font-size:10px;color:var(--ink-3);text-align:right}
.zh-thm-brief{font-size:15px;line-height:1.9}
.zh-thm-brief p{margin:0 0 14px}
@media(max-width:860px){
  .zh-thm-hero{grid-template-columns:1fr}
  .zh-thm-r{grid-template-columns:repeat(3,1fr);border-left:0;border-top:1px solid var(--line)}
  .zh-thm-th{border-bottom:0;border-right:1px solid var(--line)}
  .zh-thm-th:last-child{border-right:0}
  .zh-thm-l{padding:24px 20px}
  .zh-thm-row{grid-template-columns:1fr auto;gap:6px 14px;padding:16px 2px}
  .zh-thm-when{grid-column:1/-1;order:-1}
  .zh-thm-n{text-align:left}
}


/* ---------- /install/ 装到桌面 ---------- */
.zh-inst-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.zh-inst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.zh-inst-card{background:var(--paper);padding:26px 24px 28px;position:relative;transition:background .25s}
.zh-inst-card.is-on{background:var(--paper-2);box-shadow:inset 0 2px 0 var(--blue)}
.zh-inst-card.flash{animation:zh-inst-flash 1.6s ease}
@keyframes zh-inst-flash{0%,100%{background:var(--paper)}30%{background:var(--blue-soft)}}
.zh-inst-card .zh-mono{font-size:9.5px;color:var(--ink-4)}
.zh-inst-card h4{font-family:var(--serif);font-size:18px;margin:10px 0 18px;font-weight:600}
.zh-inst-card h4 span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:6px;font-weight:400}
.zh-inst-card ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.zh-inst-card li{display:flex;gap:10px;font-size:13px;line-height:1.7;color:var(--ink-2)}
.zh-inst-card li i{font-family:var(--mono);font-style:normal;font-size:9.5px;color:var(--blue);padding-top:3px;flex:0 0 auto}
.zh-inst-faq{margin-top:44px;max-width:74ch}
.zh-inst-q{padding:16px 0;border-top:1px solid var(--line-2)}
.zh-inst-q b{display:block;font-family:var(--serif);font-size:15.5px;margin-bottom:6px}
.zh-inst-q p{margin:0;font-size:13.5px;line-height:1.85;color:var(--ink-3)}
@media(max-width:900px){
  .zh-inst-grid{grid-template-columns:1fr}
}

/* 账号页头像 */
.zh-avrow{display:flex;gap:18px;align-items:flex-start;margin:4px 0 16px}
.zh-avrow .zh-av{width:72px;height:72px;flex:0 0 72px;object-fit:cover;border:1px solid var(--line);background:var(--paper-2);filter:grayscale(.12)}
.zh-avrow > div{flex:1;min-width:0}
@media (max-width:600px){.zh-avrow{gap:12px}.zh-avrow .zh-av{width:60px;height:60px;flex-basis:60px}}
/* 大图灯箱 */
.zh-lb{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(8,8,7,.94);opacity:0;transition:opacity .2s ease}
.zh-lb.on{opacity:1}
.zh-lb img{max-width:min(96vw,1600px);max-height:92vh;width:auto;height:auto;object-fit:contain;box-shadow:0 24px 80px rgba(0,0,0,.6)}
.zh-lb-x{position:absolute;top:14px;right:16px;width:40px;height:40px;border:1px solid rgba(232,230,224,.28);background:rgba(20,19,15,.6);color:#e8e6e0;font-size:22px;line-height:1;cursor:pointer;font-family:var(--sans);transition:background .15s,border-color .15s}
.zh-lb-x:hover{background:rgba(232,230,224,.14);border-color:rgba(232,230,224,.5)}
html.zh-lb-open{overflow:hidden}
.zh-fixform{display:flex;flex-direction:column;gap:10px;max-width:560px}
.zh-fixform .zh-input{font-size:14px}
/* 作者自选封面：缩略图单选，选中的一格描蓝边 */
.zh-coverpick{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.zh-coverpick-i{position:relative;width:76px;height:76px;cursor:pointer;border:1px solid var(--line);overflow:hidden;background:var(--paper-3)}
.zh-coverpick-i img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.15);transition:filter .2s}
.zh-coverpick-i:hover img{filter:none}
.zh-coverpick-i input{position:absolute;opacity:0;width:0;height:0}
.zh-coverpick-i:has(input:checked){border-color:var(--blue);box-shadow:inset 0 0 0 2px var(--blue)}
.zh-coverpick-i:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
@media (max-width:460px){.zh-coverpick-i{width:62px;height:62px}}
/* 取号留言弹层 */
.zh-rv{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(20,19,15,.55)}
.zh-rv-box{width:100%;max-width:420px;padding:22px 22px 18px;background:var(--paper);border:1px solid var(--line);box-shadow:0 18px 50px rgba(20,19,15,.28)}
.zh-rv-h{margin:0 0 6px;font-family:var(--serif);font-size:19px;font-weight:600}
.zh-rv-p{margin:0 0 10px;font-size:13px;line-height:1.6;color:var(--ink-2)}
.zh-rv-box textarea{width:100%;resize:vertical}
.zh-rv-a{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}

.zh-single-fig img{cursor:zoom-in}


/* ============ 18. 暗房 /develop（对齐 Node 版结构） ============ */
.zh-dev-top{display:grid;grid-template-columns:minmax(0,1fr) 328px;gap:48px;align-items:start}
.zh-dev-wx{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:10px 14px;border:1px solid var(--line);background:var(--paper-2);flex-wrap:wrap}
.zh-dev-wx .zh-mono{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.zh-dev-wx b{font-family:var(--mono);font-size:14px;letter-spacing:.02em}
.zh-dev-ticket{border:1px solid var(--line);background:var(--paper-2);padding:18px 18px 12px;align-self:start}
.zh-dev-ticket-h{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.zh-dev-ticket-h .zh-mono{font-size:10px;letter-spacing:.14em;color:var(--ink-3)}
.zh-dev-ticket-h b{font-family:var(--serif);font-size:15px}
.zh-dev-ticket-r{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px dashed var(--line-2);font-size:13.5px}
.zh-dev-ticket-r .zh-mono{color:var(--blue)}
.zh-dev-ticket-f{padding-top:11px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

.zh-dev-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:8px}
.zh-step{background:var(--paper);padding:22px 20px 24px}
.zh-step .zh-mono{font-size:10px;letter-spacing:.18em;color:var(--blue)}
.zh-step b{display:block;font-family:var(--serif);font-size:17px;margin:10px 0 6px;font-weight:500}
.zh-step p{margin:0;font-size:13px;line-height:1.75;color:var(--ink-3)}

.zh-samples{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.zh-sample{margin:0}
.zh-sample-b{display:block;width:100%;padding:0;border:0;background:var(--paper-3);cursor:zoom-in;overflow:hidden;line-height:0}
.zh-sample-b img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s var(--ease),filter .3s}
.zh-sample-b:hover img{transform:scale(1.03)}
.zh-sample figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-top:8px}

.zh-dev-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px;align-items:start}
.zh-dev-notes ul{margin:10px 0 0;padding-left:18px}
.zh-dev-notes li{font-size:13px;line-height:1.85;color:var(--ink-2);margin-bottom:4px}
.zh-dev-card{border:1px solid var(--line);padding:26px 24px 28px;background:var(--paper-2)}
.zh-dev-card .zh-mono{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.zh-dev-card h3{font-family:var(--serif);font-size:21px;font-weight:400;margin:14px 0 8px;line-height:1.4}
.zh-dev-card p{font-size:13px;line-height:1.8;color:var(--ink-2);margin:0 0 18px}
.zh-dev-card-wx{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--line);padding:12px 14px;background:var(--paper)}
.zh-dev-card-wx b{font-family:var(--mono);font-size:15px;margin-right:auto}
.zh-dev-place{margin:16px 0 0!important;font-size:10px!important;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)!important;line-height:1.9}

@media (max-width:1024px){
  .zh-dev-top{grid-template-columns:1fr;gap:28px}
  .zh-dev-ticket{max-width:420px}
  .zh-dev-split{grid-template-columns:1fr}
}
@media (max-width:760px){
  .zh-dev-steps{grid-template-columns:1fr}
  .zh-samples{grid-template-columns:repeat(2,1fr);gap:12px}
  .zh-dev-ticket{max-width:none}
  .zh-dev-card{padding:22px 18px 24px}
  .zh-sample figcaption{font-size:9.5px}
}
@media (max-width:460px){
  .zh-samples{grid-template-columns:1fr}
}
/* ============ 19. 手机端适配（≤760） ============ */
/* 通用两栏：登录 / 注册 / 投稿 / 约拍，在窄屏一律单列。
   原来这些页面把 grid 写在内联 style 上，媒体查询覆盖不掉，手机端左栏被压到 160px 左右。 */
.zh-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:56px;align-items:start}
.zh-split--reg{grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:52px}
.zh-split--form{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:48px}
.zh-split-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:1024px){
  .zh-split,.zh-split--reg,.zh-split--form{grid-template-columns:1fr;gap:34px}
}
@media (max-width:560px){
  .zh-split-2{grid-template-columns:1fr;gap:14px}
  .zh-grid-2{grid-template-columns:1fr!important}
}

/* 触控反馈：手机上没有 hover，按下就要有反应 */
@media (hover:none){
  a,button,.zh-chip,.zh-btn{-webkit-tap-highlight-color:rgba(18,63,140,.12)}
}
.zh-btn:active,.zh-btn.sm:active{transform:translateY(1px)}

@media (max-width:760px){
  html{-webkit-text-size-adjust:100%}
  /* 顶栏五个动作按钮在 390px 下会撑破一行（实测 layout viewport 被撑到 465px），
     小屏只留主按钮：未登录=登录，已登录=投稿 */
  .zh-head-act{gap:8px}
  .zh-head-act .zh-icon-btn{width:36px;height:36px}
  .zh-head-act .zh-btn.sm{padding:0 12px;height:32px;font-size:11px}
  .zh-head-act .zh-head-user{display:none}
  .zh-brand{font-size:15px}
  .zh-brand span{display:none}

  /* 可点区域够手指按：不要低于 36px */
  .zh-foot-links a,.zh-foot-links button{padding:7px 0;font-size:13.5px;min-height:34px;display:inline-flex;align-items:center}
  .zh-nav a{padding:14px 18px}
  .zh-chip,.zh-chips a,.zh-chips button{min-height:34px;display:inline-flex;align-items:center}

  /* iOS 会为 <16px 的输入框自动放大整页，这里统一抬到 16px */
  .zh-input,.zh-doc input,.zh-doc textarea,.zh-doc select{font-size:16px}
  .zh-field>span{font-size:11px}

  .zh-sec{padding:44px 0}
  .zh-h1{font-size:clamp(26px,7.6vw,34px);line-height:1.28}
  .zh-lede{font-size:14.5px;line-height:1.85}
  .zh-card-t{font-size:14.5px}
  .zh-table{font-size:12.5px;display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .zh-table thead,.zh-table tbody,.zh-table tr{display:table;width:100%;table-layout:auto}
  .zh-doc{font-size:15px;line-height:1.95}
  .zh-doc h3{margin-top:28px}
}

@media (max-width:460px){
  .zh-wrap,.zh-head-in{padding:0 14px}
  .zh-hero-meta{gap:18px}
  .zh-hero-meta b{font-size:26px}
  .zh-foot{padding:44px 0 calc(28px + env(safe-area-inset-bottom))}
}
@media (max-width:360px){
  .zh-grid,.zh-team{grid-template-columns:1fr}
  .zh-foot-links{gap:10px 14px}
}
/* 手机端导航条（对齐 Node 版 nav-deck）：横向滑动的小方块，当前页反白 */
.zh-deck-wrap{display:none}
@media (max-width:760px){
  .zh-deck-wrap{display:block;border-top:1px solid var(--line);background:var(--paper)}
  .zh-deck{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:8px 14px;margin:0;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;scroll-padding-left:14px}
  .zh-deck::-webkit-scrollbar{display:none}
  .zh-deck-t{flex:0 0 auto;display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border:1px solid var(--line);font-size:13px;color:var(--ink-2);white-space:nowrap;text-decoration:none;letter-spacing:.01em}
  .zh-deck-t:active{background:var(--paper-2)}
  .zh-deck-t.on{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:500}
}

/* ============ 21. 设计语言：借 Claude 的秩序，用我们自己的色 ============ */
/* 只取「气质」：大留白、克制的描边、软圆角、极轻阴影、收紧张开的字距、安静的动作。
   颜色全部沿用原调色板（相纸白 / 墨黑 / 普鲁士蓝 / 暗房红），不引入外来色。 */
:root{
  --radius:14px;
  --radius-sm:10px;
  --shadow-1:0 1px 2px rgba(20,19,15,.05);
  --shadow-2:0 2px 6px rgba(20,19,15,.05),0 18px 40px -28px rgba(20,19,15,.28);
}
html[data-theme=dark]{
  --shadow-1:0 1px 2px rgba(0,0,0,.35);
  --shadow-2:0 2px 8px rgba(0,0,0,.3),0 20px 44px -30px rgba(0,0,0,.65);
}

/* 纸纹退到背景里：读起来干净，但仍有颗粒质感 */
body::before{opacity:.022}
html[data-theme=dark] body::before{opacity:.04}

/* 字：标题收紧，正文放松；层级靠大小与留白，不靠加粗和颜色 */
body{line-height:1.68}
h1,h2,h3,h4{letter-spacing:-.022em}
h1{letter-spacing:-.03em}
a{transition:color .16s var(--ease),opacity .16s var(--ease)}

/* 按钮：实心用墨黑（正反色自动适配深色主题），描边按钮更轻 */
.zh-btn{
  border-radius:var(--radius-sm);border:1px solid transparent;
  background:var(--ink);color:var(--paper);font-weight:500;letter-spacing:.01em;
  box-shadow:var(--shadow-1);
  transition:background .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease),transform .16s var(--ease),opacity .16s var(--ease);
}
.zh-btn:hover{background:var(--ink);color:var(--paper);opacity:.88;box-shadow:var(--shadow-2)}
.zh-btn:active{transform:translateY(1px)}
.zh-btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}
.zh-btn.ghost:hover{background:var(--paper-2);color:var(--ink);border-color:var(--ink-4);opacity:1;box-shadow:none}
.zh-btn:focus-visible,:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

/* 卡片：细描边 + 软圆角，hover 只抬 2px，不加花哨 */
.zh-card,.zh-dev-card,.zh-dev-ticket,.zh-person,.zh-cred-i,.zh-cl,.zh-doc,.zh-comments,.zh-empty,.zh-split-2{border-radius:var(--radius)}
/* 卡片本体无框：图 + 一行说明。加底色和边框会让文字贴边，看着像错位 */
.zh-card{background:transparent;border:0;box-shadow:none;padding:0}
.zh-card:hover{box-shadow:none;transform:none}
.zh-card-fig,.zh-card-fig img,.zh-thumb,.zh-single-fig img,.zh-sample,.zh-person img,.zh-av,.zh-coverpick-i img{border-radius:var(--radius-sm)}
.zh-card-fig{overflow:hidden}

/* 表单：暖色底 + 聚焦时一圈很淡的普鲁士蓝 */
.zh-input,.zh-textarea,.zh-select,input[type=text],input[type=email],input[type=password],input[type=search],input[type=tel],input[type=url],textarea,select{
  border-radius:var(--radius-sm);border-color:var(--line);background:var(--paper-2);
  transition:border-color .16s var(--ease),background .16s var(--ease),box-shadow .16s var(--ease);
}
.zh-input:focus,.zh-textarea:focus,.zh-select:focus,input:focus,textarea:focus,select:focus{
  border-color:var(--blue);background:var(--paper);box-shadow:0 0 0 3px var(--blue-soft);outline:none;
}

/* chip：药丸形，选中用墨黑反白（和按钮同一套语义） */
.zh-chip{border-radius:999px;border:1px solid var(--line);background:transparent;transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease)}
.zh-chip:hover{background:var(--paper-2);border-color:var(--ink-4)}
.zh-chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.zh-chip.on i{opacity:.6}

/* 顶栏更安静：描边减淡，当前项仍是普鲁士蓝短下划线 */
.zh-head{border-bottom:1px solid var(--line-2)}
.zh-nav a{color:var(--ink-2)}
.zh-nav a:hover,.zh-nav a.is-on{color:var(--ink)}
.zh-icon-btn{border-radius:8px;transition:background .16s var(--ease),border-color .16s var(--ease)}
.zh-icon-btn:hover{background:var(--paper-2);border-color:var(--line)}

/* 页脚与表格：去掉方块感 */
.zh-foot{border-top:1px solid var(--line-2)}
.zh-foot-brand-box{border:1px solid rgba(232,230,224,.16);border-radius:var(--radius-sm);background:rgba(232,230,224,.05);padding:18px 20px}
.zh-table th{border-bottom:1px solid var(--line);font-weight:500;color:var(--ink-3)}
.zh-table td{border-bottom:1px solid var(--line-2)}
.zh-badge{border-radius:6px}

@media (min-width:761px){
  /* 大留白只给桌面；手机端保持紧凑，避免滚动过长 */
  .zh-wrap{padding:0 40px}
  .zh-sec{padding:104px 0}
  .zh-sec-tight{padding:64px 0}
  .zh-hero{padding:96px 0 72px}
  .zh-hero h1{font-size:clamp(40px,4.6vw,64px);line-height:1.14}
  .zh-sec-head h2,.zh-h2{font-size:clamp(28px,2.6vw,36px)}
  .zh-card-b{padding:20px 22px 22px}
  .zh-btn{padding:11px 20px}
  .zh-btn.sm{padding:8px 15px;font-size:13px}
  .zh-foot-row{padding:44px 0 40px}
}
@media (max-width:760px){
  .zh-btn{box-shadow:none}
  .zh-card:hover{transform:none;box-shadow:none}
}

/* ============ 22. 对齐修正 ============ */
/* 顶栏内边距必须和 .zh-wrap 的桌面留白一致，否则品牌与导航比正文左移 */
@media (min-width:761px){
  .zh-head-in{padding:0 40px}
}
/* 竖版人像统一 4:5，焦点上移，避免 cover 裁掉脸 */
.zh-person img{object-position:50% 16%}
.zh-card-m,.zh-cred-num{font-variant-numeric:tabular-nums}

/* ============ 23. 平板区间（761–900）：导航收进汉堡，改用导航条 ============ */
/* 之前 768–900 宽时导航折行，把 66px 的顶栏挤成 53px，看着像错位 */
@media (min-width:761px) and (max-width:900px){
  .zh-nav{display:none}
  .zh-burger{display:grid}
  .zh-head-act .zh-head-user{display:none}
  .zh-deck-wrap{display:block;border-top:1px solid var(--line);background:var(--paper)}
  .zh-deck{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:8px 24px;margin:0;scrollbar-width:none;-ms-overflow-style:none;scroll-padding-left:24px}
  .zh-deck::-webkit-scrollbar{display:none}
  .zh-deck-t{flex:0 0 auto;display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border:1px solid var(--line);font-size:13px;color:var(--ink-2);white-space:nowrap;text-decoration:none}
  .zh-deck-t.on{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:500}
}

/* 24. 反色区（页脚 / 加入我们）
   这两块永远是深底浅字，不吃主题令牌——语义色 --ink/--paper 在深色模式下会整体对调，
   混用就会出现「白底白字」或「黑底黑字」。以下只用固定值。 */
.zh-cta-dark{background:var(--ink-fixed);color:var(--paper-fixed);border-bottom:0}
.zh-cta-dark h1,.zh-cta-dark h2,.zh-cta-dark h3,.zh-cta-dark p{color:var(--paper-fixed)}
.zh-cta-kicker{color:rgba(232,230,224,.5)}
.zh-btn.zh-btn-on-dark{background:var(--paper-fixed);color:var(--ink-fixed);border-color:var(--paper-fixed)}
.zh-btn.zh-btn-on-dark:hover{background:#fff;border-color:#fff;color:var(--ink-fixed);opacity:1}
.zh-btn.zh-btn-ghost-on-dark{color:var(--paper-fixed);border-color:rgba(232,230,224,.32);background:transparent}
.zh-btn.zh-btn-ghost-on-dark:hover{background:rgba(232,230,224,.1);color:#fff;border-color:rgba(232,230,224,.5)}
