/* A project is one reading sequence: introduction, evidence, then detail. */
.project-grid { grid-template-columns:minmax(0,1fr); max-width:1080px; margin:0 auto; gap:62px; }
.project-story,.project-story:last-child { display:block; border:1px solid #bccab1; border-radius:21px; background:#fffef9; box-shadow:0 13px 38px #24382309; }
.project-story:hover { transform:none; border-color:#9fb790; box-shadow:0 16px 42px #24382310; }
.project-story[hidden] { display:none; }
.story-intro { padding:32px 36px 0; }
.story-heading { display:flex; align-items:center; gap:18px; }
.story-number { flex:0 0 54px; height:57px; display:flex; align-items:center; justify-content:center; background:#eaf0df; border:1px solid #d8e3c9; border-radius:13px; color:#456d38; font:25px var(--mono); letter-spacing:-1px; }
.story-heading-copy { flex:1; min-width:0; }.story-category { font-size:10px; color:#758b65; letter-spacing:.7px; }
.project-story h3 { font-size:27px; font-weight:600; margin:7px 0 0; line-height:1.45; letter-spacing:-.6px; }
.story-heading>.status { margin-left:auto; flex-shrink:0; font-size:10px; }
.story-lead { max-width:890px; font-size:15px; line-height:1.9; color:#4e6547; margin:20px 0 7px; }
.story-date { font-size:10px; color:#87967b; }
.story-showcase { padding:22px 36px 24px; }
.story-bridge { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:0 0 13px; }.story-bridge p { margin:0; font-size:12px; color:#6b825d; }.story-bridge>span { font-size:9px; color:#8a9a7c; white-space:nowrap; }
.story-stage-tabs { display:flex; gap:20px; margin-bottom:15px; }
.story-stage-tabs button { position:relative; display:flex; align-items:center; justify-content:center; flex:1; gap:11px; padding:12px; background:#f3f6eb; border:1px solid #dce5d1; border-radius:9px; color:#607753; font-size:12px; }
.story-stage-tabs button>span { font:9px var(--mono); color:#8a9e77; }.story-stage-tabs button.active { background:#33553e; border-color:#33553e; color:#f0f6e5; }.story-stage-tabs button.active>span { color:#c5dda6; }
.story-stage-tabs button:not(:last-child):after { content:'→'; position:absolute; right:-16px; color:#afbd9b; font-size:12px; }
.story-media { border:1px solid #d8e2ce; border-radius:12px; overflow:hidden; background:#f3f6ec; }
.story-media-top { display:flex; justify-content:space-between; align-items:center; padding:10px 15px; border-bottom:1px solid #dfe6d7; color:#69855a; font-size:10px; }.story-view-index { font:9px var(--mono); color:#8ba078; }
.story-picture { display:block; position:relative; width:100%; padding:0; border:0; background:#f7f9f2; }
.story-picture img { display:block; width:100%; height:340px; object-fit:cover; object-position:top; }
.story-zoom { position:absolute; right:14px; bottom:13px; padding:8px 12px; border:1px solid #d4dfc8; border-radius:22px; background:#fffef9ee; color:#557643; font-size:10px; box-shadow:0 3px 12px #22372112; }.story-picture:hover .story-zoom { background:#d8ecb4; border-color:#bad493; }
.story-caption { padding:16px 1px 0; }.story-caption strong { font-size:13px; font-weight:600; color:#375b35; }.story-caption p { font-size:12px; color:#647b55; line-height:1.8; margin:5px 0; }.story-caption small { display:block; color:#89997b; font-size:10px; line-height:1.75; }
.story-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; border-top:1px solid #e4eadb; padding:19px 36px 23px; }
.story-footer .tags { margin:0; max-width:68%; gap:6px; }.story-footer .tags span { font-size:9px; color:#7e8e6d; background:#f4f6ef; border:0; padding:5px 8px; }
.project-story .case-link { width:auto; flex-shrink:0; border:0; padding:10px 14px; border-radius:9px; background:#edf3e2; color:#4b6d3c; display:flex; align-items:center; gap:13px; font-size:11px; }.project-story .case-link span { background:transparent; width:auto; height:auto; font-size:18px; }
.case-path { font-size:11px; color:#6e885b; line-height:1.9; background:#eef4e5; padding:12px 15px; border:1px solid #dce7cf; border-radius:9px; margin:19px 0 0; }
.case-gallery { margin-top:24px; }.gallery-context { font-size:12px; line-height:1.85; color:#657e55; margin:12px 0; }
.case-implementation { margin:24px 0 4px; border:1px solid #dce5d1; background:#f5f8ef; border-radius:12px; padding:0 20px; }
.case-implementation>summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:19px 0; font-size:13px; color:#4f703f; }.case-implementation>summary::-webkit-details-marker { display:none; }.case-implementation>summary:after { content:'展开 ＋'; font-size:10px; color:#819767; }.case-implementation[open]>summary:after { content:'收起 −'; }.case-implementation[open]>summary { border-bottom:1px solid #dfe7d5; margin-bottom:20px; }.case-implementation .tags { padding-bottom:15px; }.case-implementation>h3 { margin-top:20px; }
.story-picture:focus-visible,.story-stage-tabs button:focus-visible,.case-implementation>summary:focus-visible { outline:2px solid #739955; outline-offset:4px; }
@media(max-width:1050px) { .project-grid { gap:48px; }.story-intro { padding:28px 30px 0; }.story-showcase { padding:20px 30px 23px; }.story-footer { padding:18px 30px 23px; }.story-picture img { height:320px; } }
@media(max-width:720px) { .project-grid { gap:36px; }.project-story { border-radius:16px; border-color:#bacbad; }.story-intro { padding:23px 20px 0; }.story-heading { gap:12px; flex-wrap:wrap; }.story-number { flex-basis:40px; width:40px; height:45px; font-size:19px; border-radius:10px; }.story-heading-copy { flex-basis:calc(100% - 60px); }.project-story h3 { font-size:21px; margin-top:5px; line-height:1.5; }.story-category { font-size:9px; letter-spacing:0; }.story-heading>.status { margin-left:52px; font-size:9px; }.story-lead { font-size:13px; line-height:1.9; margin:17px 0 6px; }.story-date { font-size:9px; }.story-showcase { padding:19px 20px 20px; }.story-bridge { display:block; margin-bottom:12px; }.story-bridge p { font-size:11px; line-height:1.8; }.story-bridge>span { display:block; font-size:9px; margin-top:5px; }.story-stage-tabs { gap:11px; margin-bottom:12px; }.story-stage-tabs button { flex-direction:column; align-items:flex-start; gap:5px; padding:9px 7px; font-size:10px; line-height:1.5; }.story-stage-tabs button>span { font-size:8px; }.story-stage-tabs button:not(:last-child):after { right:-9px; font-size:10px; }.story-media-top { padding:8px 11px; font-size:9px; }.story-picture img { height:205px; }.story-zoom { bottom:9px; right:9px; padding:6px 10px; font-size:8px; }.story-caption { padding-top:12px; }.story-caption strong { font-size:12px; line-height:1.75; }.story-caption p { font-size:11px; }.story-caption small { font-size:9px; }.story-footer { display:block; padding:16px 20px 20px; }.story-footer .tags { max-width:none; margin-bottom:15px; }.story-footer .tags span { font-size:8px; padding:5px 6px; }.project-story .case-link { width:100%; justify-content:space-between; padding:10px 12px; font-size:11px; }.case-path { font-size:10px; padding:11px; }.gallery-context { font-size:11px; }.case-implementation { padding:0 15px; }.case-implementation>summary { font-size:12px; }.case-implementation>summary:after { font-size:9px; } }
@media print { .project-grid { gap:15px; max-width:none; }.project-story { break-inside:avoid; box-shadow:none; }.story-showcase { display:none; }.story-intro { padding:18px; }.story-footer { padding:10px 18px; }.project-story .case-link { display:none; }.story-footer .tags { max-width:none; }.story-number { font-size:17px; flex-basis:35px; height:35px; }.project-story h3 { font-size:19px; } }

.project-directory { max-width:1080px; margin:0 auto 30px; padding:27px 29px; background:#edf2e5; border:1px solid #d2dfc5; border-radius:17px; scroll-margin-top:24px; }
.directory-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px; }.directory-heading .eyebrow { font-size:9px; letter-spacing:1.2px; color:#7a9465; }.directory-heading h3 { margin:9px 0 0; font-size:21px; font-weight:600; color:#2d5036; }.directory-heading>p { font-size:11px; color:#738865; margin:0 0 3px; }
.project-directory-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.directory-project-link { display:flex; align-items:center; gap:11px; padding:14px 13px; border:1px solid #d9e3cf; background:#fcfdf7; border-radius:9px; transition:border-color .18s,background .18s; }
.directory-project-link:hover { background:#f3f9e9; border-color:#96b77c; }.directory-number { flex:0 0 22px; font:10px var(--mono); color:#849d6b; }.directory-copy { flex:1; min-width:0; }.directory-copy strong { display:block; font-size:12px; font-weight:500; color:#36593b; line-height:1.6; }.directory-copy small { display:block; margin-top:4px; color:#879773; font-size:9px; line-height:1.65; }.directory-arrow { color:#8fac71; font-size:17px; }
.project-story { scroll-margin-top:24px; }.project-story:target { border-color:#6f9157; box-shadow:0 0 0 2px #c9ddb460,0 13px 38px #24382309; }.project-story:focus,.project-directory:focus { outline:none; }
.directory-return { position:fixed; right:25px; bottom:25px; z-index:20; display:flex; align-items:center; gap:9px; padding:12px 17px; border:1px solid #607c48; border-radius:25px; background:#2f513beb; color:#eef6e1; font-size:12px; box-shadow:0 7px 22px #20342120; backdrop-filter:blur(8px); }.directory-return:hover { background:#395f42; }.directory-return-count { color:#c0d79b; font:10px var(--mono); border-left:1px solid #668351; padding-left:9px; }.directory-return[hidden],.modal-open .directory-return { display:none; }
@media(max-width:900px) { .project-directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.directory-heading { display:block; }.directory-heading>p { margin-top:11px; } }
@media(max-width:720px) { .project-directory { padding:20px 15px; border-radius:14px; margin-bottom:24px; }.directory-heading { margin-bottom:16px; }.directory-heading h3 { font-size:19px; }.directory-heading>p { font-size:10px; }.project-directory-grid { gap:8px; }.directory-project-link { align-items:flex-start; gap:7px; padding:11px 9px; }.directory-number { flex-basis:17px; font-size:8px; line-height:2; }.directory-copy strong { font-size:11px; }.directory-copy small { font-size:8px; }.directory-arrow { display:none; }.directory-return { right:15px; bottom:15px; padding:10px 14px; font-size:11px; }.directory-return-count { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.directory-project-link { transition:none; } }
@media print { .project-directory,.directory-return { display:none!important; }.project-story:target { box-shadow:none; } }