/* album.css · 2026-10-20 · 影像主题：主题页（album-page）与影像页顶部的主题入口（album-entry）。 */

/* ---------- 主题页 ---------- */
.album{max-width:1040px;margin:0 auto;padding:0 40px 40px}
.album-hero{position:relative;padding:58px 0 40px;border-bottom:1px solid var(--line)}
.album-kicker{display:flex;gap:10px;margin:0 0 12px;font:12px/1.8 var(--font-sans);letter-spacing:.12em;color:var(--muted)}
.album-kicker>*+*::before{content:"·";margin-right:10px}
.album-kicker a{color:var(--moss)}
.album-kicker a:hover{color:var(--cinnabar)}
.album-hero h1{margin:0;font:400 52px/1.45 var(--font-title);letter-spacing:.14em}
.album-hero blockquote{margin:18px 0 0;font:19px/1.9 var(--font-kai);letter-spacing:.12em;color:var(--ink-2)}
.album-hero cite{margin-left:16px;font:normal 12px/1.8 var(--font-sans);letter-spacing:.04em;color:var(--muted)}
.album-hero cite::before{content:"—— "}
.album-lead{max-width:34em;margin:16px 0 0;font-size:15px;line-height:2;color:var(--muted)}
.album-seal{
  position:absolute;right:4px;top:62px;display:grid;place-items:center;width:46px;height:52px;
  background:var(--cinnabar);color:var(--paper);font:28px/1 var(--font-kai);border-radius:3px 5px 3px 4px;transform:rotate(-5deg);opacity:.88;
}

.album-flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:58px 28px;padding:48px 0 12px}
.album-page .album-piece{margin:0}
/* 细长竖幅（9:16）可按章节排三列、四列 */
.album-flow.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 22px}
.album-flow.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 18px}
.album-flow.cols-3 .album-piece figcaption strong,.album-flow.cols-4 .album-piece figcaption strong{font-size:17px}
.album-flow.cols-3 .album-piece .sub,.album-flow.cols-4 .album-piece .sub{font-size:13px;line-height:1.8}
.album-flow.cols-4 .album-piece figcaption{gap:2px 10px}
.album-page .album-piece.is-wide{grid-column:1/-1}
.album-page .album-piece .frame{background:var(--paper-deep);border-radius:2px}
.album-page .album-piece img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.album-page .album-piece .image-open:hover img{transform:scale(1.012)}
.album-page .album-piece figcaption{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:2px 14px;margin:16px 0 0}
.album-idx{grid-row:1/3;font:400 15px/1.6 var(--font-title);letter-spacing:.1em;color:var(--cinnabar)}
.album-piece figcaption strong{font:400 20px/1.6 var(--font-title);letter-spacing:.1em;color:var(--ink)}
.album-page .album-piece .sub{font:14px/1.9 var(--font-kai);letter-spacing:.06em;color:var(--muted)}
.album-chapter{padding-top:52px}
.album-chapter+.album-chapter{margin-top:20px;border-top:1px solid var(--line)}
.album-chapter-head{display:flex;align-items:baseline;gap:16px}
.album-chapter-no{font:400 16px/1.6 var(--font-title);letter-spacing:.1em;color:var(--cinnabar)}
.album-chapter-head h2{margin:0;font:400 30px/1.5 var(--font-title);letter-spacing:.16em}
.album-chapter-note{font:14px/1.8 var(--font-kai);letter-spacing:.1em;color:var(--muted)}
.album-chapter .album-flow{padding-top:28px}
.album-end{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-top:40px;padding:26px 0 8px;border-top:1px solid var(--line)}
.album-end p{margin:0;font:15px/1.9 var(--font-kai);letter-spacing:.08em;color:var(--muted)}
.album-end a{font:12px/1.8 var(--font-sans);color:var(--moss)}
.album-end a:hover{color:var(--cinnabar)}

@media (min-width:761px) and (max-width:900px){
  .album-flow.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .album{padding:0 24px 28px}
  .album-chapter{padding-top:36px}
  .album-chapter-head h2{font-size:25px}
  .album-chapter .album-flow{padding-top:20px}
  .album-hero{padding:38px 0 28px}
  .album-hero h1{font-size:38px}
  .album-hero blockquote{font-size:17px}
  .album-hero cite{display:block;margin:2px 0 0}
  .album-seal{top:40px;width:36px;height:41px;font-size:22px}
  .album-flow{grid-template-columns:1fr;gap:40px;padding-top:32px}
  .album-flow.cols-3,.album-flow.cols-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 14px}
  .album-flow.cols-3 .album-piece figcaption,.album-flow.cols-4 .album-piece figcaption{grid-template-columns:1fr;gap:0}
  .album-flow.cols-3 .album-idx,.album-flow.cols-4 .album-idx{grid-row:auto;font-size:13px}
  .album-end{flex-direction:column;gap:10px}
}

/* ---------- 影像页：主题入口 ---------- */
.album-entry{margin:0 0 46px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.album-entry-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px}
.album-entry-head h2{margin:0;font:400 25px/1.6 var(--font-title);letter-spacing:.1em}
.album-entry-head span{font:12px/1.8 var(--font-sans);color:var(--muted);letter-spacing:.06em}
.album-card{position:relative;display:block;overflow:hidden;border-radius:3px;color:#f4ede3;background:#1f2a22}
.album-card img{display:block;width:100%;height:clamp(240px,34vw,400px);object-fit:cover;object-position:50% 45%;transition:transform .6s ease}
.album-card:hover img{transform:scale(1.02)}
.album-card::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,24,20,.72),rgba(18,24,20,.28) 46%,rgba(18,24,20,0) 75%);pointer-events:none}
.album-card-copy{position:absolute;z-index:1;left:clamp(22px,4vw,44px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;max-width:60%}
.album-card-kicker{font:12px/1.8 var(--font-sans);letter-spacing:.16em;opacity:.85}
.album-card strong{font:400 clamp(30px,4vw,44px)/1.4 var(--font-title);letter-spacing:.14em;font-weight:400;text-shadow:0 1px 12px rgba(0,0,0,.3)}
.album-card em{font:normal 16px/1.9 var(--font-kai);letter-spacing:.1em;opacity:.9}
.album-card-go{margin-top:8px;font:12px/1.8 var(--font-sans);letter-spacing:.08em;color:#ffd9c6}
.album-card:focus-visible{outline:2px solid var(--cinnabar);outline-offset:4px}
.album-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.album-cards .album-card img{height:clamp(260px,24vw,330px)}
.album-cards .album-card-copy{left:20px;max-width:calc(100% - 36px)}
.album-cards .album-card strong{font-size:clamp(26px,2.3vw,32px)}
.album-cards .album-card em{font-size:13px;line-height:1.8}
@media (max-width:999px){.album-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.album-cards{grid-template-columns:1fr}.album-cards .album-card img{height:220px}}
@media (max-width:600px){
  .album-entry{margin-bottom:34px;padding-bottom:30px}
  .album-card img{height:220px}
  .album-card-copy{max-width:80%;gap:3px}
  .album-card em{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.album-card img,.album-page .album-piece img{transition:none}}