/* ============================================================
   摄影师个人主页 · 前台样式（全部由模板主题变量驱动）
   ============================================================ */
:root{
  --bg:#faf7f2; --surface:#ffffff; --ink:#22201c; --muted:#8a8578;
  --accent:#e8588a; --accent2:#7ec8b4; --line:#e8e2d6;
  --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.08);
  --font-head:'Noto Serif SC',serif; --font-body:'Noto Sans SC',sans-serif;
  --head-transform:none; --head-weight:700; --pattern:none;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body.site{background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:var(--head-weight);text-transform:var(--head-transform);line-height:1.25}

/* ---------- 底纹层 ---------- */
.theme-bg{position:relative}
.theme-bg::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0}

/* ---------- 顶栏 / 页脚 ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px clamp(16px,4vw,56px);
  background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line)}
.logo{font-family:var(--font-head);font-size:20px;letter-spacing:.14em;font-weight:700;color:var(--accent)}
.mainnav{display:flex;gap:clamp(10px,2vw,26px);flex-wrap:wrap}
.mainnav a{font-size:15px;color:var(--muted);padding:6px 2px;position:relative;transition:.25s}
.mainnav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--accent);transition:.25s}
.mainnav a:hover,.mainnav a.on{color:var(--ink)} .mainnav a:hover::after,.mainnav a.on::after{width:100%}
.footer{text-align:center;padding:34px 16px;color:var(--muted);font-size:13px;border-top:1px solid var(--line);margin-top:40px}

/* ---------- 可视化画布：所有区块绝对定位，按设计稿等比缩放 ---------- */
main{position:relative;z-index:1}
.pb-canvas{container-type:inline-size;position:relative;width:100%;aspect-ratio:1200/var(--pbH,900)}
.pb-canvas>.theme-bg::before{z-index:0}
.pb-block{position:absolute;z-index:2}
.pb-empty{max-width:600px;margin:80px auto;text-align:center;color:var(--muted)}

/* ---------- 区块通用元素（字号用 cqw 随画布等比缩放） ---------- */
.hero{position:relative;height:100%;border-radius:var(--radius);overflow:hidden;background-size:cover;background-position:center;display:flex;align-items:flex-end}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.62))}
.hero-inner{position:relative;z-index:2;padding:clamp(16px,3cqw,44px);width:100%;color:#fff}
.hero h1{font-size:clamp(24px,4.6cqw,64px);text-shadow:0 3px 22px rgba(0,0,0,.45)}
.hero-sub{font-size:clamp(13px,1.5cqw,20px);opacity:.92;margin-top:.6em;letter-spacing:.06em}
.btn{display:inline-block;background:var(--accent);color:#fff;border:none;border-radius:calc(var(--radius) * 10);padding:.72em 1.9em;
  font-family:var(--font-body);font-size:clamp(13px,1.25cqw,17px);cursor:pointer;transition:.28s;font-weight:600;box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 42%,transparent)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-hero{margin-top:1.4em}
.btn-sm{padding:.4em 1.1em;font-size:13px}
.sec-heading{font-size:clamp(19px,2.6cqw,36px);letter-spacing:.08em;position:relative;display:block;width:100%}
.rich-text{white-space:normal;line-height:1.9;color:var(--ink);overflow:hidden}

/* 相册网格 */
.album-grid{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:clamp(8px,1.2cqw,18px);height:100%;align-content:start}
.cols-1{--cols:1}.cols-2{--cols:2}.cols-3{--cols:3}.cols-4{--cols:4}.cols-5{--cols:5}.cols-6{--cols:6}
.album-card{display:block;background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.32s;position:relative}
.album-card:hover{transform:translateY(-5px) scale(1.015)}
.ac-img{display:block;aspect-ratio:4/3;background:#0002;position:relative;overflow:hidden}
.ac-img img{width:100%;height:100%;object-fit:cover;transition:.5s}
.album-card:hover .ac-img img{transform:scale(1.07)}
.ac-badge{display:inline-block;color:var(--muted);font-size:clamp(9px,.82cqw,11px);font-style:normal;font-weight:400;white-space:nowrap}
.ac-title{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:clamp(11px,1.15cqw,15px);font-weight:600}
.ac-title .ac-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.album-grid.standalone .ac-title{font-size:15px}

/* 翻书区块 */
.blk-flipbook{height:100%;display:flex;flex-direction:column;gap:8px}
.fb-head{display:flex;align-items:center;justify-content:space-between}
.fb-title{font-family:var(--font-head);font-size:clamp(14px,1.6cqw,20px);font-weight:700}
.blk-flipbook .flipbook{flex:1;min-height:0}

/* 文章列表 */
.art-list{height:100%}
.art-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,46%),1fr));gap:clamp(8px,1.2cqw,18px);align-content:start}
.art-list.art-magazine{display:flex;flex-direction:column;gap:10px;overflow:auto}
.art-item{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.3s}
.art-item:hover{transform:translateY(-4px)}
.art-cover{aspect-ratio:16/10;background:#0001;overflow:hidden}
.art-cover img{width:100%;height:100%;object-fit:cover}
.art-body{padding:10px 13px;display:flex;flex-direction:column;gap:5px;min-width:0}
.art-body strong{font-size:clamp(12px,1.3cqw,17px);font-family:var(--font-head)}
.art-body small{color:var(--muted);font-size:clamp(10px,.92cqw,12.5px);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.art-body time{color:var(--accent);font-size:clamp(9px,.82cqw,11px);letter-spacing:.08em}
.art-list.big .art-item{flex-direction:row}.art-list.big .art-cover{aspect-ratio:auto;width:min(280px,38%);min-height:130px}
.mod-article-list li{list-style:none;border-bottom:1px dashed var(--line)}
.mod-article-list a{display:flex;justify-content:space-between;gap:14px;padding:8px 4px;font-size:clamp(12px,1.15cqw,14px)}
.mod-article-list time{color:var(--muted);font-size:clamp(10px,.9cqw,12px)}
.mod-article-list a:hover{color:var(--accent)}
.more-link{display:inline-block;margin-top:10px;color:var(--accent);font-size:13px}
.mod-title{font-size:clamp(16px,2cqw,26px);margin-bottom:.6em;letter-spacing:.06em}

/* 图片/分隔线/联系表单 —— 区块内所有元素随画布等比缩放，防止小屏溢出 */
.blk-image{height:100%;display:flex;flex-direction:column;gap:8px}
.blk-image img{width:100%;height:calc(100% - 30px);object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
.blk-image figcaption{font-size:clamp(10px,.9cqw,12px);color:var(--muted);text-align:center}
.blk-divider{border:none;height:2px;width:60%;margin:auto;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.blk-divider.dv-dots{height:6px;background:radial-gradient(circle,var(--accent) 2px,transparent 3px) center/14px 6px repeat-x}
.contact-form{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(12px,2cqw,28px);height:100%;display:flex;flex-direction:column;gap:clamp(6px,.9cqw,12px);overflow:hidden}
.contact-form h3{font-size:clamp(15px,1.9cqw,24px)}
.contact-form input,.contact-form textarea{border:1px solid var(--line);border-radius:10px;padding:.55em 1em;font:inherit;font-size:clamp(11px,1.2cqw,15px);background:var(--bg);color:var(--ink);resize:none;min-height:0}
.contact-form textarea{flex:1}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--accent);border-color:transparent}
.contact-form .btn{font-size:clamp(11px,1.15cqw,15px);padding:.6em 1.6em}
.cf-msg.ok{color:#2e9e63}.cf-msg.err{color:#d64550}
.muted{color:var(--muted);font-size:14px}
.page-wrap{max-width:1160px;margin:0 auto;padding:30px 20px 70px}
.page-wrap>.flipbook{height:min(78vh,740px)}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 26px}
.chip{border:1px solid var(--line);border-radius:999px;padding:6px 18px;font-size:13px;color:var(--muted);background:var(--surface)}
.chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.article-full{max-width:760px;margin:0 auto}
.article-full h1{font-size:clamp(26px,4vw,40px);margin-bottom:12px}
.art-meta{margin-bottom:22px}
.art-hero{border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:26px}
.article-content{font-size:16px;line-height:2}.article-content p{margin:1em 0}
.article-content img{border-radius:var(--radius);margin:1em auto;box-shadow:var(--shadow)}
.back-link{margin-top:36px}.back-link a{color:var(--accent)}

/* 普通相册瀑布流 */
.photo-masonry{columns:3 300px;column-gap:14px;margin-top:20px}
.pm-item{break-inside:avoid;margin:0 0 14px;background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);cursor:zoom-in;position:relative;transition:.3s}
.pm-item:hover{transform:translateY(-3px)}
.pm-item img{width:100%}
.pm-item figcaption{padding:8px 12px;font-size:12px;color:var(--muted)}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(10,8,14,.94);z-index:200;display:none;align-items:center;justify-content:center}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:6px;box-shadow:0 30px 80px #000}
.lb-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);color:#fff;border:none;width:52px;height:52px;border-radius:50%;font-size:22px;cursor:pointer;transition:.2s}
.lb-btn:hover{background:var(--accent)}
.lb-prev{left:18px}.lb-next{right:18px}
.lb-close{top:18px;right:18px;transform:none;width:44px;height:44px}
.lb-count{position:absolute;top:26px;left:26px;color:#fff9;font-size:14px;letter-spacing:.1em}

/* ============================================================
   FlipBook 翻书相册（stPageFlip 引擎）
   ============================================================ */
.flipbook{position:relative;width:100%;height:100%;min-height:320px;display:flex;flex-direction:column}
.fb-root{background:
  radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 60%),
  linear-gradient(180deg,color-mix(in srgb,var(--surface) 88%,#000),var(--surface));
  border-radius:var(--radius);overflow:hidden;user-select:none}
.fb-theme-dark{--fbw:#181820;--fbi:#8f7ae5}
.fb-theme-wood{--fbw:#4b3323;--fbi:#d9b382}
.fb-theme-sakura{--fbw:#7a4658;--fbi:#ffc9d8}
.fb-theme-cyber{--fbw:#101418;--fbi:#00e5ff}
.fb-root:fullscreen{border-radius:0;display:flex;flex-direction:column}
.fb-root:fullscreen .fb-stage{flex:1}
.fb-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:14px;overflow:hidden;z-index:1}
.fb-book-st{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.fb-book-st .stf__parent{margin:0 auto}
.fb-bar{position:relative;z-index:20}
/* 工具条 */
.fb-bar{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;background:rgba(0,0,0,.04);border-top:1px solid var(--line)}
.fb-bar button{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font-size:14px;font-family:inherit;transition:.2s;line-height:1}
.fb-bar button:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.fb-pageinfo{font-size:13px;color:var(--muted);min-width:70px;text-align:center;letter-spacing:.06em}
.fb-sep{width:1px;height:20px;background:var(--line);margin:0 6px}
.fb-thumbs{display:none;gap:8px;padding:10px;overflow-x:auto;border-top:1px dashed var(--line)}
.fb-thumbs.open{display:flex}
.fb-thumb{flex:0 0 56px;height:72px;border-radius:6px;overflow:hidden;position:relative;opacity:.6;transition:.2s;outline:2px solid transparent;cursor:pointer;background:#eee}
.fb-thumb img{width:100%;height:100%;object-fit:cover}
.fb-thumb em{position:absolute;bottom:2px;right:4px;font-size:10px;color:#fff;text-shadow:0 1px 2px #000;font-style:normal}
.fb-thumb.cur{opacity:1;outline-color:var(--accent)}
.fb-mini .fb-bar button{width:28px;height:28px;font-size:12px}

/* 个人简介模块 */
.profile-card{height:100%;display:flex;align-items:center;gap:clamp(14px,3cqw,44px);background:var(--surface);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(14px,2.6cqw,40px);overflow:hidden}
.profile-card.pf-center{flex-direction:column;text-align:center;justify-content:center}
.pf-avatar{flex:none;width:clamp(90px,16cqw,200px);height:clamp(90px,16cqw,200px);border-radius:50%;overflow:hidden;
  border:4px solid var(--accent);box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 35%,transparent);background:var(--bg);display:flex;align-items:center;justify-content:center}
.pf-avatar img{width:100%;height:100%;object-fit:cover}
.pf-avatar i{font-size:clamp(30px,6cqw,72px);font-style:normal}
.pf-info{min-width:0;display:flex;flex-direction:column;gap:clamp(5px,.9cqw,12px)}
.pf-name{font-size:clamp(18px,2.6cqw,36px)}
.pf-tag{color:var(--accent);font-size:clamp(12px,1.3cqw,17px);letter-spacing:.12em;font-weight:600}
.pf-bio{font-size:clamp(12px,1.25cqw,15.5px);line-height:1.9;color:var(--ink);opacity:.88;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.pf-tags{display:flex;gap:8px;flex-wrap:wrap}
.pf-center .pf-tags{justify-content:center}
.pf-tags span{border:1px solid var(--line);background:var(--bg);color:var(--muted);border-radius:999px;
  padding:3px 14px;font-size:clamp(10px,1cqw,13px)}

/* 响应式 */
@media(max-width:720px){
  .topbar{flex-direction:column;gap:8px}
  .photo-masonry{columns:2 160px}
  .album-grid{grid-template-columns:repeat(2,1fr)}  /* 窄屏相册强制两列，避免过小 */
  .contact-form{overflow-y:auto}                    /* 小屏表单内容多时块内滚动 */
}

/* 三端独立布局：桌面/平板/手机各自画布，按屏幕宽度只显示对应一份 */
.pb-page .pb-canvas{display:none}
.pb-page.pb-has-full .pb-dev-full .pb-canvas{display:block}
@media(max-width:1024px){
  .pb-page.pb-has-tab .pb-dev-full .pb-canvas{display:none}
  .pb-page.pb-has-tab .pb-dev-tab .pb-canvas{display:block}
}
@media(max-width:640px){
  .pb-page.pb-has-mob .pb-dev-full .pb-canvas,
  .pb-page.pb-has-mob .pb-dev-tab .pb-canvas{display:none}
  .pb-page.pb-has-mob .pb-dev-mob .pb-canvas{display:block}
}

/* 手机端降级：未设置专属手机布局时，画布从“等比缩放海报”切换为自然流式布局 */
@media(max-width:640px){
  .pb-page:not(.pb-has-mob) .pb-canvas{aspect-ratio:auto !important;display:flex !important;flex-direction:column;gap:18px;padding:6px 14px 18px}
  .pb-page:not(.pb-has-mob) .pb-block{position:static !important;width:100% !important;height:auto !important;min-height:0}
  .pb-page:not(.pb-has-mob) .pb-t-hero{height:340px !important;flex:none}
  .pb-page:not(.pb-has-mob) .hero{border-radius:var(--radius)}
  .pb-page:not(.pb-has-mob) .hero h1{font-size:26px}
  .pb-page:not(.pb-has-mob) .hero-sub{font-size:14px}
  .pb-page:not(.pb-has-mob) .sec-heading{font-size:22px}
  .pb-page:not(.pb-has-mob) .blk-image img{height:auto}
  .pb-page:not(.pb-has-mob) .album-grid{height:auto}
  .pb-page:not(.pb-has-mob) .art-list{height:auto}
  .pb-page:not(.pb-has-mob) .art-card{grid-template-columns:1fr}
  .pb-page:not(.pb-has-mob) .art-list.big .art-item{flex-direction:column}
  .pb-page:not(.pb-has-mob) .art-list.big .art-cover{width:100%;min-height:0;aspect-ratio:16/10}
  .pb-page:not(.pb-has-mob) .blk-flipbook{height:auto}
  .pb-page:not(.pb-has-mob) .blk-flipbook .flipbook{min-height:340px}
  .pb-page:not(.pb-has-mob) .profile-card{flex-direction:column;text-align:center;height:auto}
  .pb-page:not(.pb-has-mob) .pf-bio{-webkit-line-clamp:unset}
  .pb-page:not(.pb-has-mob) .contact-form{height:auto;overflow:visible}
  .pb-page:not(.pb-has-mob) .contact-form textarea{min-height:70px;flex:none}
  .pb-page:not(.pb-has-mob) .blk-html{overflow:auto}
}