.project-page-wrapper{width:100%;max-width:100%;overflow-x:clip}.progress-bar{position:fixed;top:0;left:0;width:100%;height:2px;background:var(--red-mark);transform:scaleX(0);transform-origin:left center;z-index:9999}.detail-hero{position:relative;width:100%;max-width:1200px;margin:0 auto var(--space-lg);height:60vh;min-height:400px;overflow:hidden;border-radius:0}.detail-hero img,.detail-hero video{width:100%;height:100%;object-fit:cover}.hero-gradient{position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(to top,var(--bg-color),transparent);pointer-events:none}.detail-back-link{position:absolute;top:var(--space-md);left:var(--space-md);font-size:var(--font-sm);color:#fff;text-decoration:none;display:flex;align-items:center;gap:6px;padding:8px 16px;min-height:44px;background:var(--overlay-heavy);backdrop-filter:blur(8px);border-radius:0;transition:background-color var(--duration-hover) var(--ease-out),transform var(--duration-hover) var(--ease-out),color var(--duration-fast) var(--ease-out)}.detail-back-link:hover{background:var(--accent);transform:translate(-3px);color:#fff}.detail-back-link:focus-visible{outline:2px solid white;outline-offset:2px}.back-arrow{transition:var(--transition-transform)}.detail-back-link:hover .back-arrow{transform:translate(-1px)}.back-link-inline{font-size:var(--font-sm);color:var(--text-secondary);text-decoration:none;display:inline-flex;align-items:center;gap:6px;margin-bottom:var(--space-md);transition:var(--transition-color)}.back-link-inline:hover{color:var(--accent)}.back-link-inline:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.project-article{width:100%;max-width:800px;min-width:0;margin-left:auto;margin-right:auto;padding:var(--space-lg) var(--space-md) 0;box-sizing:border-box}@media(min-width:1501px){.project-article{padding:var(--space-lg) var(--space-6) 0}}@media(max-width:900px){.project-article{max-width:100%;padding-left:var(--space-md);padding-right:var(--space-md)}}.project-header{position:static;background-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:none;z-index:auto;margin-bottom:0;display:flex;flex-direction:column;gap:0;min-width:0}.project-title{font-family:var(--font-family-heading);font-size:clamp(36px,8vw,64px);font-weight:500;letter-spacing:-.03em;line-height:1.1;color:var(--accent);margin:0 0 var(--space-3) 0;overflow-wrap:break-word}.project-oneliner{font-family:var(--font-family-heading);font-size:clamp(18px,3vw,24px);font-weight:500;line-height:1.4;color:var(--text-secondary);margin:0;max-width:600px;min-width:0;overflow-wrap:break-word}.project-opener{display:grid;gap:var(--space-lg);min-width:0;padding-bottom:var(--space-lg);margin-bottom:var(--space-lg);border-bottom:1px solid rgba(0,0,0,.08)}.meta-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-md);min-width:0;padding-top:var(--space-md);border-top:1px solid rgba(0,0,0,.08)}.meta-item{display:flex;flex-direction:column;gap:4px;min-width:0}.meta-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary)}.meta-value{display:block;font-family:var(--font-family-heading);font-size:var(--font-body);color:var(--text-primary);line-height:1.4;overflow-wrap:break-word}.opener-impact{padding-top:var(--space-md);border-top:1px solid rgba(0,0,0,.08)}.opener-impact p{margin:4px 0 0;font-family:var(--font-family-heading);font-size:var(--font-body-lg);line-height:1.5;color:var(--text-primary);font-weight:500;overflow-wrap:break-word}.meta-separator{color:#00000026}.project-summary{font-family:var(--font-family-heading);font-size:clamp(18px,2.5vw,22px);font-weight:500;line-height:1.6;color:var(--text-primary);max-width:700px;min-width:0;margin:0;white-space:pre-line;overflow-wrap:break-word}.opener-scan{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md);min-width:0;padding-top:var(--space-md);border-top:1px solid rgba(0,0,0,.08)}.opener-scan-item{min-width:0}.opener-scan-item p{font-family:var(--font-family-base);font-size:var(--font-body);line-height:1.65;color:var(--text-primary);margin:0;white-space:pre-line;overflow-wrap:break-word}.project-media{margin-bottom:var(--space-lg);max-width:100%;overflow:hidden}.project-media-item{width:100%;max-width:100%;max-height:620px;object-fit:cover;display:block;background:var(--bg-secondary)}.project-tools{margin-bottom:var(--space-lg);padding-bottom:var(--space-lg);border-bottom:1px solid rgba(0,0,0,.08)}.tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}.tools-column{display:flex;flex-direction:column;gap:var(--space-sm)}.tools-label{font-family:var(--font-family-base);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);margin:0}.tags-list{display:flex;flex-wrap:wrap;gap:var(--space-xs);list-style:none;padding:0;margin:0}.tag-chip{display:inline-flex;padding:6px 14px;background:var(--overlay-light);border:1px solid var(--border-light);border-radius:0;font-family:var(--font-family-base);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--text-primary)}.case-study-section{display:grid;gap:var(--space-lg);margin-bottom:var(--space-lg)}.content-section{margin-bottom:0}.section-label{font-family:var(--font-family-base);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);margin-bottom:var(--space-md)}.section-body{font-family:var(--font-family-heading);font-size:clamp(18px,2.5vw,20px);font-weight:500;line-height:1.7;color:var(--text-primary);max-width:700px;white-space:pre-line}.gallery-section{margin-bottom:var(--space-lg)}.gallery-main{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:0;background:var(--bg-secondary);cursor:pointer}.gallery-main:after{content:"";position:absolute;bottom:12px;right:12px;width:24px;height:24px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E");background-size:contain;opacity:0;transition:var(--transition-opacity);pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}.gallery-main:hover:after{opacity:.8}.gallery-main-image{width:100%;height:100%;object-fit:cover;transition:opacity var(--duration-hover) var(--ease-out),transform var(--duration-normal) var(--ease-out)}.gallery-main:hover .gallery-main-image{transform:none}.gallery-dots{display:flex;gap:12px;justify-content:center;margin-top:var(--space-sm)}.gallery-dot{position:relative;width:44px;height:44px;border-radius:0;background:transparent;border:none;padding:0;cursor:pointer;transition:background-color var(--duration-hover) var(--ease-out),transform var(--duration-hover) var(--ease-out)}.gallery-dot:after{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;background:var(--overlay-medium);transform:translate(-50%,-50%);transition:background-color var(--duration-hover) var(--ease-out),transform var(--duration-hover) var(--ease-out)}.gallery-dot:hover:after{background:#0000004d}.gallery-dot.active:after{background:var(--accent);transform:translate(-50%,-50%) scale(1.18)}.gallery-dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.project-footer{margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:1px solid rgba(0,0,0,.08)}.footer-nav{display:flex;justify-content:space-between;gap:var(--space-md);margin-bottom:var(--space-lg)}.footer-nav-link{display:flex;flex-direction:column;gap:4px;text-decoration:none;transition:var(--transition-transform);max-width:45%}.footer-nav-prev:hover{transform:translate(-3px)}.footer-nav-next{text-align:right;margin-left:auto}.footer-nav-next:hover{transform:translate(3px)}.footer-nav-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.footer-nav-label{font-family:var(--font-family-mono, "JetBrains Mono", monospace);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary)}.footer-nav-title{font-family:var(--font-family-heading);font-size:clamp(18px,3vw,24px);font-weight:500;color:var(--text-primary);transition:var(--transition-color)}.footer-nav-link:hover .footer-nav-title{color:var(--accent)}.footer-all-work{display:block;text-align:center;font-family:var(--font-family-mono, "JetBrains Mono", monospace);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);text-decoration:none;padding-top:var(--space-md);border-top:1px solid rgba(0,0,0,.08);transition:var(--transition-color)}.footer-all-work:hover{color:var(--text-primary)}@media(max-width:768px){.detail-hero{height:50vh;min-height:300px;border-radius:0}.detail-back-link{top:var(--space-sm);left:var(--space-sm)}.project-title{font-size:36px;margin-bottom:var(--space-2)}.project-oneliner{font-size:18px;margin-bottom:var(--space-3)}.meta-row{grid-template-columns:1fr;gap:var(--space-sm)}.opener-scan{grid-template-columns:1fr}.tools-grid{grid-template-columns:1fr;gap:var(--space-md)}.project-summary,.section-body{font-size:18px}.footer-link-text{font-size:24px}}@media(prefers-reduced-motion:reduce){.progress-bar,.gallery-main-image{transition:none}}[data-theme=dark] .opener-impact,[data-theme=dark] .meta-row,[data-theme=dark] .opener-scan{border-top-color:#ffffff14}[data-theme=dark] .meta-separator{color:#ffffff26}[data-theme=dark] .project-opener,[data-theme=dark] .project-tools{border-bottom-color:#ffffff14}[data-theme=dark] .gallery-dot:hover:after{background:#ffffff4d}[data-theme=dark] .project-footer,[data-theme=dark] .footer-all-work{border-top-color:#ffffff14}
