.photo-page{background:#fff;color:#111;--ink:#111;--muted:#777;--line:#0002;--dark:#fff;color-scheme:light}
.photo-main{width:min(1080px,calc(100% - 96px));padding:146px 0 0;margin:0 auto}
.photo-title{display:flex;justify-content:space-between;align-items:baseline;gap:30px;margin-bottom:42px}
.photo-title h1{font-size:38px;line-height:1;font-weight:450;letter-spacing:.02em}.photo-title>span{font:9px/1.6 monospace;letter-spacing:.12em;color:#777}
.photo-book{display:grid;grid-template-columns:225px 1fr;gap:52px;border-top:1px solid #0002;padding-top:26px}
.photo-contents{padding-top:4px}.photo-label{font-size:10px;color:#888;margin-bottom:24px}
#photo-series{display:flex;flex-direction:column;align-items:start;gap:9px}
#photo-series button{display:grid;grid-template-columns:22px 1fr;gap:12px;text-align:left;align-items:baseline;color:#888;font-size:12px;line-height:1.65;padding:9px 0}
#photo-series button>span{font:9px monospace;color:#999}
#photo-series button[aria-pressed=true]{color:#111}
#photo-series button[aria-pressed=true]>span{color:#111}
#photo-series button:hover{color:#111}
.photo-mobile-select{display:none}
.folio-top{display:flex;justify-content:space-between;gap:25px;align-items:baseline;margin-bottom:20px}
.folio-top h2{font-size:12px;font-weight:400;line-height:1.6}
.photo-modes{display:flex;gap:12px;font-size:11px;white-space:nowrap;color:#aaa;align-items:center}
.photo-modes button{padding:5px 0;min-height:30px;color:#888;font-size:11px}
.photo-modes button[aria-pressed=true]{color:#111;text-decoration:underline;text-underline-offset:5px}
.photo-modes>span{color:#bbb;font-size:10px}
.folio-stage{height:clamp(360px,calc(100svh - 350px),620px);position:relative;outline-offset:8px}
.folio-image-button{display:block;width:100%;height:100%;padding:0;position:relative}
.folio-image-button img{height:100%;width:100%;object-fit:contain;object-position:center}
.photo-zoom{position:absolute;right:10px;bottom:10px;width:30px;height:30px;display:grid;place-items:center;color:#555;background:#fff;border:1px solid #ddd;border-radius:50%;opacity:0;transition:opacity .2s}
.folio-image-button:hover .photo-zoom,.folio-image-button:focus-visible .photo-zoom{opacity:1}
.folio-bottom{display:flex;justify-content:space-between;align-items:center;margin:22px 0 0;min-height:44px;border-top:1px solid #0001;padding-top:12px}
#folio-count{font:10px monospace;letter-spacing:.07em;color:#777}
.folio-paging{display:flex;gap:18px}.folio-paging button{font-size:22px;font-weight:300;padding:0;width:40px;height:36px}
.contact-sheet{height:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-content:start;overflow:auto;padding:8px 8px 12px}
.contact-sheet button{padding:0;min-width:0;display:block;text-align:left}
.contact-sheet img{width:100%;height:115px;object-fit:contain}
.contact-sheet small{display:block;font:8px monospace;color:#888;text-align:center;margin-top:10px}
.contact-sheet button[aria-current=true] small{color:#111;text-decoration:underline;text-underline-offset:3px}
.photo-rolls{margin-top:62px;margin-left:277px;border-top:1px solid #0002;padding-bottom:28px}
.photo-rolls summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:64px;font-size:12px;color:#555}
.photo-rolls summary::-webkit-details-marker{display:none}.photo-rolls summary span{font-size:18px}.photo-rolls[open] summary span{transform:rotate(45deg)}
.roll-list{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.roll-row{display:flex;gap:16px;align-items:baseline;border-top:1px solid #0001;padding:16px 0;font-size:11px}
.roll-row>span:first-child,.roll-row>span:last-child{font-size:9px;color:#888}.roll-row>span:last-child{margin-left:auto;white-space:nowrap}
.photo-viewer{position:fixed;inset:0;border:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:#080808;color:#fff;margin:0;padding:20px 34px}
.photo-viewer::backdrop{background:#080808}
.viewer-top{height:44px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.viewer-top div{font-size:12px}.viewer-close{width:44px;height:44px;font-size:24px}
.viewer-stage{height:calc(100dvh - 178px);display:grid;grid-template-columns:50px 1fr 50px;gap:15px;align-items:center}
.viewer-stage img{width:100%;height:100%;min-height:0;object-fit:contain;max-height:calc(100dvh - 190px)}
.viewer-arrow{width:44px;height:55px;font-size:22px}
.viewer-bottom{display:flex;justify-content:space-between;font:10px monospace;letter-spacing:.1em;color:#999;margin:12px 0}
.viewer-thumbs{display:flex;justify-content:flex-start;gap:8px;overflow:auto;height:51px;max-width:900px;margin:auto;scrollbar-width:thin}
.viewer-thumbs button{flex:0 0 42px;padding:3px;border:1px solid transparent}.viewer-thumbs button[aria-current=true]{border-color:#ddd}.viewer-thumbs img{width:100%;height:39px;object-fit:cover}
.photo-page .review-return{background:#fff;color:#111;border-color:#ddd}
@media(max-width:1000px){.photo-book{grid-template-columns:170px 1fr;gap:35px}.photo-rolls{margin-left:205px}.contact-sheet{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.photo-main{padding:126px 0 0}.photo-title{margin-bottom:28px}.photo-title h1{font-size:30px}.photo-title>span{font-size:8px}.photo-book{display:block;padding-top:20px}.photo-contents{display:none}.photo-mobile-select{display:flex;align-items:center;gap:20px;padding:0 0 23px;font-size:10px;color:#777}.photo-mobile-select select{background:#fff;color:#111;border:0;border-bottom:1px solid #ddd;border-radius:0;font:12px "PingFang SC",sans-serif;padding:7px 24px 7px 0;min-height:36px;min-width:195px}.folio-top{margin-bottom:18px}.folio-top h2{font-size:11px}.folio-stage{height:46svh;min-height:290px;max-height:480px}.folio-bottom{margin-top:18px}.photo-zoom{opacity:1;width:27px;height:27px;font-size:12px;right:0;bottom:0}.photo-rolls{margin:35px 0 0}.roll-list{grid-template-columns:1fr}.contact-sheet{gap:15px}.contact-sheet img{height:95px}.photo-viewer{padding:15px 14px}.viewer-stage{grid-template-columns:30px 1fr 30px;gap:0}.viewer-arrow{width:30px;font-size:19px}}
/* 视觉对齐：720 以下两侧 24px */
@media(max-width:720px){.photo-main{width:calc(100% - 48px)}}
/* 2026-10-13 摄影作品集制作中：页面只留一句说明与四步进度，照片暂不展示。 */
.photo-pending{min-height:46vh;padding:6px 0 96px;border-top:1px solid var(--line)}
.photo-pending-kicker{margin:26px 0 0;color:#777;font:400 10px/1.6 ui-monospace,Menlo,monospace;letter-spacing:.12em}
.photo-pending-lead{max-width:16em;margin:22px 0 64px;word-break:keep-all;color:#111;font-size:clamp(26px,3vw,36px);font-weight:450;line-height:1.35;letter-spacing:-.01em}
.photo-pending-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.photo-pending-steps li{display:flex;align-items:baseline;gap:12px;padding-top:16px;border-top:1px solid #0000001f;color:#8a8a8a;font-size:15px}
.photo-pending-steps li[data-done]{border-top:2px solid #111;padding-top:15px;color:#111}
.photo-step-no{color:#aaa;font:400 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.1em}
.photo-pending-steps li[data-done] .photo-step-no{color:#555}
.photo-pending-steps small{margin-left:auto;color:#555;font-size:11px}
@media(max-width:700px){.photo-pending{padding-bottom:72px}.photo-pending-lead{margin-bottom:44px}.photo-pending-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}}