/* V8 — a personal signature, a complete index, and media-led project pages. */
.is-case-study .dialog-top>span { min-width:0; line-height:1.6; }
.is-case-study .close-dialog { flex:none; margin-left:18px; }
.greeting-name { white-space:nowrap; letter-spacing:-.065em; font-size:clamp(52px,5.5vw,80px); padding-bottom:18px; }
.name-signature { display:inline-block; position:relative; letter-spacing:-.075em; margin-left:.035em; }
.name-signature .outline-word { font-size:1.16em; font-weight:500; }
.name-chinese { position:absolute; right:1px; bottom:-.85em; color:var(--soft-ink); font-size:14px; letter-spacing:.28em; line-height:1; font-weight:400; -webkit-text-stroke:0; }
.hero-period { font-size:.8em; color:var(--accent); margin-left:.05em; }
.archive-search { display:flex; align-items:center; gap:16px; border-bottom:1px solid var(--accent-line); margin:0 0 29px; padding:0 0 15px; }
.archive-search svg { width:21px; height:21px; flex:none; color:var(--muted); }
.archive-search input { min-width:0; width:100%; border:0; outline:0; padding:9px 0; border-radius:0; background:transparent; color:var(--ink); font:15px var(--font); }
.archive-search input::placeholder { color:var(--muted); opacity:.8; }
.archive-search:focus-within { border-color:var(--ink); }
.archive-search input::-webkit-search-cancel-button { display:none; }
.archive-search button { min-width:40px; min-height:40px; font-size:24px; }
.search-hint { flex:none; font:7px var(--mono); letter-spacing:1.3px; color:var(--muted); }
.archive-empty { min-height:160px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.archive-empty button { border-bottom:1px solid var(--line); padding:10px 0; color:var(--ink); font-size:12px; }
.archive-row { position:relative; }
.archive-row:before { content:''; position:absolute; inset:0 -16px; background:var(--ink); opacity:0; transition:opacity .25s; z-index:-1; }
.archive-row:hover:before { opacity:.025; }
.project-visual[role="button"] { cursor:pointer; }
.project-visual[role="button"]:focus-visible { outline:2px solid var(--accent); outline-offset:7px; }
.project-detail { --detail-accent:#8c9a75; padding-top:28px; }
.detail-gallery { width:min(1280px,89%); margin:auto; }
.detail-slides { min-width:0; }
.detail-slide { position:relative; margin:0; }
.detail-slide[hidden], .gallery-controls[hidden], .detail-media-error[hidden] { display:none; }
.detail-image { display:block; width:100%; height:min(61vw,calc(100svh - 202px)); min-height:280px; max-height:680px; object-fit:contain; background:color-mix(in srgb,var(--detail-accent) 9%,var(--bg)); }
.detail-slide figcaption { font-size:10px; color:var(--muted); line-height:1.8; margin:15px 0 0; padding-right:150px; min-height:25px; }
.gallery-bar { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:42px; margin-top:0; }
.gallery-label { font:7px var(--mono); letter-spacing:1.5px; color:var(--muted); }
.gallery-controls { display:flex; align-items:center; gap:17px; margin-top:-45px; }
.gallery-controls button { width:40px; height:40px; border:1px solid var(--line); border-radius:50%; transition:background .25s,color .25s; }
.gallery-controls button:is(:hover,:focus-visible) { background:var(--ink); color:var(--bg); }
.gallery-count { font:9px var(--mono); color:var(--muted); white-space:nowrap; }
.detail-film { position:relative; background:#090e0b; }
.detail-film video { display:block; width:100%; aspect-ratio:16/9; max-height:calc(100svh - 202px); object-fit:contain; }
.detail-media-error { padding:18px; margin:0; color:var(--ink); font-size:12px; background:var(--surface); }
.detail-audio { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:7%; padding:7%; min-height:480px; background:color-mix(in srgb,var(--detail-accent) 15%,var(--bg)); }
.audio-art { aspect-ratio:1; min-width:0; display:grid; place-items:center; }
.audio-art>img { width:100%; height:100%; object-fit:contain; }
.audio-disc { position:relative; width:100%; aspect-ratio:1; border-radius:50%; background:repeating-radial-gradient(circle at center,#1b211d 0 1px,#2e3430 2px 3px,#151c17 4px 5px); box-shadow:12px 24px 35px #0003; display:grid; place-items:center; }
.audio-disc:after { content:''; position:absolute; width:9px; height:9px; border-radius:50%; background:#252723; }
.audio-disc span { border-radius:50%; width:35%; aspect-ratio:1; background:var(--detail-accent); color:#131713; display:flex; align-items:flex-start; justify-content:center; padding-top:16%; font:8px var(--mono); }
.audio-copy h3 { font-size:clamp(26px,3vw,48px); font-weight:500; line-height:1.4; letter-spacing:-.05em; margin:24px 0 12px; }
.audio-copy>p { color:var(--muted); font-size:12px; margin-bottom:32px; }
.audio-copy audio { width:100%; max-width:400px; }
.detail-intro { width:min(1120px,82%); margin:60px auto 52px; display:grid; grid-template-columns:1fr 1fr; gap:12%; }
.detail-heading h2 { font-size:clamp(32px,3.6vw,54px); line-height:1.25; font-weight:500; letter-spacing:-.055em; margin:0 0 21px; text-wrap:balance; }
.detail-heading h3 { font-size:18px; font-weight:400; line-height:1.8; margin:0; color:var(--soft-ink); text-wrap:balance; }
.detail-skill { display:block; font-size:10px; margin-top:24px; color:var(--muted); }
.detail-description>p:first-child { font-size:14px; color:var(--soft-ink); line-height:2.1; margin:0 0 27px; }
.detail-description .detail-note { font-size:10px; color:var(--muted); line-height:1.9; margin:21px 0 0; }
.detail-links { display:flex; flex-direction:column; gap:12px; }
.detail-links .case-visit { width:100%; max-width:none; border-color:var(--line); font-size:12px; }
.detail-notes { display:grid; grid-template-columns:repeat(3,1fr); width:min(1120px,82%); margin:0 auto; border-top:1px solid var(--line); }
.detail-notes>div { padding:30px 26px 12px 0; }
.detail-notes>div+div { padding-left:26px; border-left:1px solid var(--line); }
.detail-point-number { color:var(--muted); font:8px var(--mono); }
.detail-notes h4 { font-weight:500; font-size:15px; line-height:1.7; margin:14px 0 8px; }
.detail-notes p { font-size:11px; line-height:1.9; color:var(--muted); margin:0; }
.detail-flow { display:flex; align-items:center; gap:36px; width:min(1120px,82%); margin:36px auto 65px; border-top:1px solid var(--line); padding-top:24px; }
.detail-flow>span { color:var(--muted); font:7px var(--mono); letter-spacing:1px; white-space:nowrap; }
.detail-flow ol { display:flex; flex-wrap:wrap; gap:14px; padding:0; margin:0; list-style:none; }
.detail-flow li { font-size:10px; line-height:1.8; color:var(--muted); }
.detail-flow li+li:before { content:'→'; margin-right:14px; opacity:.5; }
.detail-pagination { display:grid; grid-template-columns:1fr 140px 1fr; gap:25px; width:min(1280px,89%); margin:65px auto 0; border-top:1px solid var(--line); padding:28px 0 46px; }
.detail-pagination button { text-align:left; padding:12px 0; min-width:0; }
.detail-pagination button>span { display:block; font-size:9px; color:var(--muted); margin-bottom:13px; }
.detail-pagination button>strong { display:block; font-size:17px; font-weight:400; line-height:1.5; transition:transform .35s,color .25s; }
.detail-pagination button:hover>strong { color:var(--accent); transform:translateY(-3px); }
.detail-pagination .detail-index { text-align:center; border-inline:1px solid var(--line); }
.detail-pagination .detail-index strong { font-size:11px; }
.detail-pagination .detail-index span { font:8px var(--mono); }
.detail-pagination .detail-next { text-align:right; }
.detail-diagram { position:relative; overflow:hidden; min-height:460px; padding:32px 5%; background:color-mix(in srgb,var(--detail-accent) 13%,var(--bg)); }
.diagram-top { position:relative; z-index:1; display:flex; justify-content:space-between; gap:20px; font:7px var(--mono); letter-spacing:1.5px; color:var(--muted); }
.diagram-content { position:relative; z-index:1; padding:55px 0 50px; width:80%; }
.diagram-label { display:block; color:var(--soft-ink); font-size:13px; margin-bottom:23px; }
.diagram-content>strong { display:block; max-width:680px; font-size:clamp(30px,3.6vw,52px); font-weight:450; line-height:1.4; letter-spacing:-.055em; text-wrap:balance; }
.diagram-content ol { list-style:none; padding:0; margin:32px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
.diagram-content li { border:1px solid color-mix(in srgb,var(--ink) 18%,transparent); padding:12px 16px; font-size:11px; backdrop-filter:blur(5px); }
.diagram-content li>span { font:7px var(--mono); opacity:.5; margin-right:12px; }
.diagram-footnote { font-size:9px; color:var(--muted); position:absolute; bottom:23px; }
.diagram-art { position:absolute; right:-12%; top:2%; width:60%; aspect-ratio:1; color:var(--detail-accent); opacity:.7; }
.diagram-art span { border:1px solid currentColor; position:absolute; inset:0; border-radius:50%; transform:rotate(-30deg) scaleX(.65); }
.diagram-art span:nth-child(2) { transform:rotate(30deg) scaleX(.65); }
.diagram-art span:nth-child(3) { transform:rotate(90deg) scaleX(.65); }
.diagram-art i { font-style:normal; font-size:170px; font-weight:200; position:absolute; inset:0; display:grid; place-items:center; opacity:.18; }
.diagram-space .diagram-art span { border-radius:0; transform:rotate(-22deg) scale(.7); }
.diagram-space .diagram-art span:nth-child(2) { transform:rotate(-22deg) scale(.52); }
.diagram-space .diagram-art span:nth-child(3) { transform:rotate(-22deg) scale(.34); }
.diagram-tool .diagram-art span { border-radius:22%; transform:rotate(30deg) scale(.7); }
.diagram-tool .diagram-art span:nth-child(2) { transform:rotate(50deg) scale(.7); }
.diagram-tool .diagram-art span:nth-child(3) { transform:rotate(70deg) scale(.7); }
@media(max-width:1100px) { .greeting-name { font-size:clamp(43px,5.2vw,60px); } .name-chinese { font-size:12px; } .detail-intro { gap:8%; } }
@media(max-width:760px) {
  .greeting-name { font-size:clamp(42px,9vw,67px); padding-bottom:16px; } .name-chinese { bottom:-1em; font-size:12px; }
  .search-hint { display:none; } .archive-search { gap:12px; margin-bottom:22px; } .archive-search input { font-size:13px; }
  .archive-empty { display:block; padding:25px 0; font-size:12px; } .archive-empty button { margin-top:20px; }
  .project-detail { padding-top:14px; } .detail-gallery { width:100%; }
  .detail-image { height:auto; max-height:65svh; min-height:200px; object-fit:contain; }
  .detail-slide figcaption { margin:14px 6% 0; padding-right:0; font-size:9px; min-height:0; }
  .gallery-bar { margin:10px 6% 0; } .gallery-label { font-size:6px; letter-spacing:1px; }
  .gallery-controls { margin-top:0; gap:12px; } .gallery-controls button { width:36px; height:36px; }
  .detail-film video { max-height:none; }
  .detail-audio { grid-template-columns:1fr; padding:9%; gap:36px; min-height:0; }
  .audio-art { width:min(240px,80%); margin:auto; } .audio-copy { text-align:center; } .audio-copy h3 { font-size:29px; margin:16px 0 10px; } .audio-copy>p { margin-bottom:20px; }
  .detail-intro { width:86%; grid-template-columns:1fr; margin:38px auto 34px; gap:27px; }
  .detail-heading h2 { font-size:34px; margin-bottom:15px; } .detail-heading h3 { font-size:16px; } .detail-skill { font-size:9px; margin-top:17px; }
  .detail-description>p:first-child { font-size:12px; margin-bottom:23px; } .detail-description .detail-note { font-size:9px; }
  .detail-notes { width:86%; grid-template-columns:1fr; }
  .detail-notes>div,.detail-notes>div+div { padding:21px 0; border:0; display:grid; grid-template-columns:28px 1fr; gap:0 8px; }
  .detail-notes>div+div { border-top:1px solid var(--line); }
  .detail-point-number { padding-top:5px; } .detail-notes h4 { font-size:14px; margin:0 0 8px; } .detail-notes p { grid-column:2; font-size:11px; }
  .detail-flow { width:86%; display:block; margin:10px auto 38px; padding-top:20px; } .detail-flow ol { margin-top:14px; gap:8px; } .detail-flow li { font-size:9px; } .detail-flow li+li:before { margin-right:8px; }
  .detail-pagination { width:86%; gap:13px; grid-template-columns:1fr 76px 1fr; margin-top:40px; padding:18px 0 30px; }
  .detail-pagination button>strong { font-size:12px; } .detail-pagination button>span { font-size:8px; margin-bottom:9px; } .detail-pagination .detail-index strong { font-size:9px; }
  .detail-diagram { min-height:410px; padding:22px 7%; } .diagram-top { font-size:6px; letter-spacing:.5px; }
  .diagram-content { padding:50px 0 62px; width:100%; } .diagram-label { font-size:11px; margin-bottom:20px; } .diagram-content>strong { font-size:34px; }
  .diagram-content ol { margin-top:25px; gap:8px; } .diagram-content li { font-size:10px; padding:9px 10px; } .diagram-content li>span { font-size:6px; margin-right:7px; }
  .diagram-art { right:-42%; top:12%; width:110%; opacity:.45; } .diagram-footnote { font-size:8px; }
}
@media(prefers-reduced-motion:reduce) { .project-detail *, .detail-pagination *, .archive-row { transition:none!important; } }