.projects-page{background-color:var(--bg-canvas);min-height:100vh;color:var(--text-primary);max-width:1540px;margin:0 auto;padding:4rem 1.5rem 8rem;transition:background-color .25s,color .25s}@media (min-width:768px){.projects-page{padding:5rem 3rem 10rem}}.projects-header{text-align:center;border-bottom:1px solid #00000014;flex-direction:column;align-items:center;gap:1.75rem;margin-bottom:3.5rem;padding-bottom:2.5rem;display:flex}.projects-title-block{text-align:center;flex-direction:column;align-items:center;gap:.5rem;max-width:720px;display:flex}.projects-subheading{text-transform:uppercase;letter-spacing:.14em;color:#00000073;align-items:center;gap:.5rem;font-size:.8rem;font-weight:700;display:inline-flex}.projects-title{font-family:var(--font-heading), "Poppins", sans-serif;letter-spacing:-1.12px;color:#000;margin:0;font-size:clamp(2.5rem,5vw,4rem);font-weight:700;line-height:1.1}.projects-desc{font-family:var(--font-body), "Montserrat", sans-serif;color:#0009;max-width:540px;margin:0 auto;font-size:1.05rem;font-weight:400;line-height:1.5}.projects-title-jp{color:#00000073;letter-spacing:.08em;margin-left:.5rem;font-size:.95rem;font-weight:500}.projects-controls-bar{flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;width:100%;display:flex}.projects-nav-filters{flex-wrap:wrap;justify-content:center;align-items:center;gap:.65rem;display:flex}.projects-view-toggle{background:#fff;border:1px solid #00000026;border-radius:9999px;align-items:center;gap:2px;padding:3px;display:inline-flex}.projects-view-btn{color:#0009;font-family:var(--font-body), "Montserrat", sans-serif;cursor:pointer;background:0 0;border:none;border-radius:9999px;align-items:center;gap:6px;padding:6px 14px;font-size:12px;font-weight:500;transition:all .15s;display:inline-flex}.projects-view-btn:hover{color:#000}.projects-view-btn.active{color:#fff;background:#000;font-weight:600;box-shadow:0 2px 6px #00000026}.filter-btn{font-size:.85rem;font-family:var(--font-body), "Montserrat", sans-serif;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;background:#fff;border:1px solid #000;border-radius:9999px;align-items:center;gap:.45rem;padding:.55rem 1.35rem;font-weight:500;transition:all .15s;display:inline-flex}.filter-btn:hover{color:#000;background:#f4f4f5;transform:translateY(-1px)}.filter-btn.active{color:#fff;background:#000;border-color:#000;font-weight:600}.filter-count{opacity:.75;font-variant-numeric:tabular-nums;font-size:.75rem}.projects-gallery-cta{justify-content:center;align-items:center;margin-top:.5rem;display:flex}.projects-gallery-link-btn{color:#fff;font-family:var(--font-body), "Montserrat", sans-serif;background-color:#000;border:1px solid #000;border-radius:9999px;align-items:center;gap:8px;padding:10px 24px;font-size:14px;font-weight:600;text-decoration:none;transition:transform .15s,background-color .15s;display:inline-flex}.projects-gallery-link-btn:hover{color:#fff;background-color:#222;text-decoration:none;transform:translateY(-1px)}.projects-list{flex-direction:column;gap:5rem;display:flex}@media (min-width:900px){.projects-list{gap:7rem}}.project-row{content-visibility:auto;contain-intrinsic-size:0 450px;flex-direction:column;gap:1.5rem;display:flex;position:relative}@media (min-width:960px){.project-row{flex-direction:row;align-items:flex-start;gap:3.5rem}}.project-meta-col{flex-direction:column;flex-shrink:0;gap:1.25rem;display:flex}@media (min-width:960px){.project-meta-col{width:320px;position:sticky;top:100px}}.project-meta-top{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;padding-bottom:.75rem;display:flex}.project-index{font-family:var(--font-heading);letter-spacing:-.02em;color:var(--brand-primary);font-size:1.25rem;font-weight:700}.project-year-badge{color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:.8rem;font-weight:600}.project-title-group{flex-direction:column;gap:.25rem;display:flex}.project-name{font-family:var(--font-heading);letter-spacing:-.02em;color:var(--text-primary);margin:0;font-size:1.4rem;font-weight:700;line-height:1.2}.project-name-jp{color:var(--text-muted);letter-spacing:.05em;font-size:.82rem}.project-desc{color:var(--text-secondary);margin:0;font-size:.88rem;line-height:1.6}.project-spec-list{color:var(--text-muted);border-top:1px dashed var(--border-subtle);flex-direction:column;gap:.35rem;padding-top:.75rem;font-size:.78rem;display:flex}.project-spec-row{justify-content:space-between;gap:.5rem;display:flex}.project-spec-label{text-transform:uppercase;letter-spacing:.06em;font-size:.7rem}.project-spec-value{color:var(--text-primary);text-align:right;font-weight:500}.project-tag-chips{flex-wrap:wrap;gap:.4rem;margin-top:.25rem;display:flex}.project-tag-chip{color:#000;letter-spacing:.02em;background:#fff;border:1px solid #00000026;border-radius:9999px;padding:.25rem .75rem;font-size:.75rem;font-weight:500}.project-reel-controls{align-items:center;gap:.75rem;margin-top:.5rem;display:flex}.reel-nav-btn{color:#000;cursor:pointer;background:#fff;border:1px solid #000;border-radius:9999px;justify-content:center;align-items:center;width:40px;height:40px;transition:all .15s;display:inline-flex}.reel-nav-btn:hover{color:#fff;background:#000;transform:translateY(-1px)}.reel-nav-btn:disabled{opacity:.3;cursor:not-allowed;transform:none}.reel-counter-text{color:var(--text-muted);font-variant-numeric:tabular-nums;letter-spacing:.05em;text-transform:uppercase;font-size:.75rem}.project-reel-wrap{flex:1;min-width:0;position:relative}.project-reel-track{scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;align-items:stretch;gap:1.25rem;padding:.5rem .25rem 1.5rem;display:flex;overflow-x:auto}.project-reel-track::-webkit-scrollbar{height:6px}.project-reel-track::-webkit-scrollbar-track{background:0 0}.project-reel-track::-webkit-scrollbar-thumb{background-color:var(--border-strong);border-radius:9999px}.project-reel-track::-webkit-scrollbar-thumb:hover{background-color:var(--text-muted)}.project-media-card{scroll-snap-align:start;background-color:var(--bg-surface);border:1px solid var(--border-subtle);cursor:pointer;border-radius:14px;flex-direction:column;flex-shrink:0;height:340px;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s cubic-bezier(.16,1,.3,1),border-color .25s;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 16px #0000000f}@media (min-width:768px){.project-media-card{height:420px}}.project-media-card.aspect-wide{width:840px;max-width:82vw}.project-media-card.aspect-square{width:340px;max-width:75vw}@media (min-width:768px){.project-media-card.aspect-square{width:420px}}.project-media-card.aspect-tall{width:270px;max-width:60vw}@media (min-width:768px){.project-media-card.aspect-tall{width:300px}}.project-media-card:hover{border-color:var(--border-strong);transform:translateY(-4px);box-shadow:0 16px 36px -6px #00000024,0 4px 12px -2px #00000014}.media-image-wrap{background-color:#0b0f19;width:100%;height:100%;position:relative;overflow:hidden}.media-image-wrap img{object-fit:cover;object-position:center;width:100%;height:100%;transition:transform .4s cubic-bezier(.16,1,.3,1);display:block}.project-media-card:hover .media-image-wrap img{transform:scale(1.035)}.media-card-badge{-webkit-backdrop-filter:blur(16px)saturate(180%);color:#fff;opacity:0;transition:opacity .22s var(--ease-spring), transform .22s var(--ease-spring);pointer-events:none;background:#0f172ab8;border:1px solid #ffffff2e;border-radius:8px;justify-content:space-between;align-items:center;padding:8px 12px;display:flex;position:absolute;bottom:12px;left:12px;right:12px;transform:translateY(6px)}.project-media-card:hover .media-card-badge{opacity:1;transform:translateY(0)}.badge-text{letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis;font-size:.78rem;font-weight:600;overflow:hidden}.badge-action{text-transform:uppercase;letter-spacing:.05em;color:#ffffffb3;align-items:center;gap:4px;font-size:.7rem;display:flex}.projects-lightbox-backdrop{z-index:99999;-webkit-backdrop-filter:blur(28px)saturate(190%);background-color:#000000e0;justify-content:center;align-items:center;padding:1.5rem;animation:.25s cubic-bezier(.16,1,.3,1) lightboxFadeIn;display:flex;position:fixed;inset:0}@media (prefers-reduced-motion:reduce){.filter-btn,.reel-nav-btn,.project-media-card,.media-card-badge,.lightbox-close-btn,.lightbox-arrow-btn{transition:none}.projects-lightbox-backdrop{animation:none}}@keyframes lightboxFadeIn{0%{opacity:0}to{opacity:1}}.projects-lightbox-container{flex-direction:column;justify-content:center;align-items:center;gap:1rem;max-width:92vw;max-height:90vh;display:flex;position:relative}.lightbox-image-wrap{background:#000;border:1px solid #ffffff26;border-radius:12px;max-height:75vh;position:relative;overflow:hidden;box-shadow:0 24px 60px #000c}.lightbox-image-wrap img{object-fit:contain;max-width:90vw;max-height:75vh;display:block}.lightbox-info{text-align:center;color:#fff;flex-direction:column;align-items:center;gap:.25rem;display:flex}.lightbox-title{letter-spacing:-.01em;font-size:1rem;font-weight:600}.lightbox-caption{color:#ffffffb3;max-width:600px;font-size:.82rem}.lightbox-close-btn{color:#fff;cursor:pointer;width:36px;height:36px;transition:background-color .2s ease, transform .2s var(--ease-spring);background:#ffffff26;border:1px solid #ffffff40;border-radius:9999px;justify-content:center;align-items:center;display:flex;position:absolute;top:-45px;right:0}.lightbox-close-btn:hover{background:#ffffff4d;transform:scale(1.08)}.lightbox-arrow-btn{color:#fff;cursor:pointer;width:48px;height:48px;transition:background-color .2s ease, transform .2s var(--ease-spring);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff1f;border:1px solid #fff3;border-radius:9999px;justify-content:center;align-items:center;display:flex;position:fixed;top:50%;transform:translateY(-50%)}.lightbox-arrow-btn:hover{background:#ffffff40;transform:translateY(-50%)scale(1.08)}.lightbox-arrow-prev{left:20px}.lightbox-arrow-next{right:20px}.projects-footer{border-top:1px solid var(--border-subtle,#00000014);text-align:center;max-width:1440px;margin:6rem auto 0;padding:4rem 2rem 2rem}.projects-footer .footer-links-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:24px;margin-bottom:2rem;display:flex}.projects-footer .footer-link{color:var(--text-muted,#0009);font-size:13px;font-weight:500;text-decoration:none;transition:color .15s}.projects-footer .footer-link:hover{color:var(--text-primary,#000);text-decoration:underline}.projects-footer .footer-bottom-copy{color:var(--text-muted,#0006);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;font-size:11px;display:flex}.project-grid-row{border-bottom:1px solid var(--border-subtle,#00000014);flex-direction:column;gap:2rem;padding-bottom:4rem;display:flex;position:relative}.project-grid-banner{flex-direction:column;gap:1.5rem;padding-bottom:1rem;display:flex}@media (min-width:960px){.project-grid-banner{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:3.5rem}.project-grid-banner-main{flex:1;max-width:60%}.project-grid-banner-side{flex-direction:column;flex-shrink:0;gap:.75rem;width:320px;display:flex}}.project-category-badge{text-transform:uppercase;letter-spacing:.06em;color:var(--text-primary,#000);background:#0000000d;border-radius:9999px;padding:.2rem .65rem;font-size:.72rem;font-weight:600}.project-cuts-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;width:100%;display:grid}@media (max-width:1200px){.project-cuts-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}}@media (max-width:900px){.project-cuts-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}}@media (max-width:480px){.project-cuts-grid{grid-template-columns:1fr;gap:14px;max-width:440px;margin:0 auto}}.project-grid-card{background:var(--bg-surface);border:1px solid var(--border-subtle);cursor:pointer;transition:transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease, border-color .2s ease, background-color var(--duration-normal) var(--ease-subtle);content-visibility:auto;contain-intrinsic-size:0 320px;border-radius:16px;outline:none;flex-direction:column;display:flex;position:relative;overflow:hidden}.project-grid-card:hover,.project-grid-card:focus-visible{border-color:#0003;transform:translateY(-4px);box-shadow:0 12px 32px #00000014}.project-grid-card .media-image-wrap{aspect-ratio:16/10;background:#111;width:100%;position:relative;overflow:hidden}.project-grid-card.aspect-square .media-image-wrap{aspect-ratio:1}.project-grid-card.aspect-tall .media-image-wrap{aspect-ratio:3/4}.project-grid-card .media-image-wrap img{object-fit:cover;width:100%;height:100%;transition:transform .4s cubic-bezier(.16,1,.3,1);display:block}.project-grid-card:hover .media-image-wrap img{transform:scale(1.05)}.project-grid-card-badge{border-bottom:1px solid var(--border-subtle);background:var(--bg-surface);justify-content:space-between;align-items:center;padding:10px 14px;font-size:.8rem;display:flex}.badge-cut-tag{color:#3b82f6;letter-spacing:.04em;font-size:.72rem;font-weight:700}.badge-cut-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;max-width:65%;font-size:.82rem;font-weight:600;overflow:hidden}.project-grid-card-caption{color:var(--text-muted);background:var(--bg-surface);padding:8px 14px 12px;font-size:.75rem;line-height:1.45}.project-grid-card-caption p{-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;display:-webkit-box;overflow:hidden}:root[data-theme=dark] .projects-page,:root[data-resolved-theme=dark] .projects-page{background-color:var(--bg-canvas);color:var(--text-primary)}:root[data-theme=dark] .projects-header,:root[data-resolved-theme=dark] .projects-header{border-bottom-color:var(--border-subtle)}:root[data-theme=dark] .projects-subheading,:root[data-resolved-theme=dark] .projects-subheading{color:var(--text-muted)}:root[data-theme=dark] .projects-title,:root[data-resolved-theme=dark] .projects-title{color:var(--text-primary)}:root[data-theme=dark] .projects-desc,:root[data-resolved-theme=dark] .projects-desc{color:var(--text-secondary)}:root[data-theme=dark] .filter-btn,:root[data-resolved-theme=dark] .filter-btn{background:var(--bg-surface);color:var(--text-secondary);border-color:var(--border-subtle)}:root[data-theme=dark] .filter-btn:hover,:root[data-resolved-theme=dark] .filter-btn:hover{background:var(--bg-subtle);color:var(--text-primary);border-color:var(--border-strong)}:root[data-theme=dark] .filter-btn.active,:root[data-resolved-theme=dark] .filter-btn.active{background:var(--text-primary);color:var(--bg-canvas);border-color:var(--text-primary)}:root[data-theme=dark] .projects-view-toggle,:root[data-resolved-theme=dark] .projects-view-toggle{background:var(--bg-surface);border-color:var(--border-subtle)}:root[data-theme=dark] .projects-view-btn,:root[data-resolved-theme=dark] .projects-view-btn{color:var(--text-muted)}:root[data-theme=dark] .projects-view-btn:hover,:root[data-resolved-theme=dark] .projects-view-btn:hover{color:var(--text-primary)}:root[data-theme=dark] .projects-view-btn.active,:root[data-resolved-theme=dark] .projects-view-btn.active{background:var(--text-primary);color:var(--bg-canvas)}:root[data-theme=dark] .projects-gallery-link-btn,:root[data-resolved-theme=dark] .projects-gallery-link-btn{background-color:var(--text-primary);color:var(--bg-canvas);border-color:var(--text-primary)}:root[data-theme=dark] .projects-gallery-link-btn:hover,:root[data-resolved-theme=dark] .projects-gallery-link-btn:hover{opacity:.9}:root[data-theme=dark] .project-meta-top,:root[data-resolved-theme=dark] .project-meta-top{border-bottom-color:var(--border-subtle)}:root[data-theme=dark] .project-year-badge,:root[data-resolved-theme=dark] .project-year-badge{color:var(--text-muted)}:root[data-theme=dark] .project-name,:root[data-resolved-theme=dark] .project-name{color:var(--text-primary)}:root[data-theme=dark] .project-name-jp,:root[data-resolved-theme=dark] .project-name-jp{color:var(--text-muted)}:root[data-theme=dark] .project-desc,:root[data-resolved-theme=dark] .project-desc{color:var(--text-secondary)}:root[data-theme=dark] .project-spec-list,:root[data-resolved-theme=dark] .project-spec-list{border-top-color:var(--border-subtle)}:root[data-theme=dark] .project-spec-value,:root[data-resolved-theme=dark] .project-spec-value{color:var(--text-primary)}:root[data-theme=dark] .project-tag-chip,:root[data-resolved-theme=dark] .project-tag-chip{background:var(--bg-surface);border-color:var(--border-subtle);color:var(--text-secondary)}:root[data-theme=dark] .reel-nav-btn,:root[data-resolved-theme=dark] .reel-nav-btn{background:var(--bg-surface);border-color:var(--border-subtle);color:var(--text-primary)}:root[data-theme=dark] .reel-nav-btn:hover,:root[data-resolved-theme=dark] .reel-nav-btn:hover{background:var(--text-primary);color:var(--bg-canvas)}:root[data-theme=dark] .project-grid-row,:root[data-resolved-theme=dark] .project-grid-row{border-bottom-color:var(--border-subtle)}:root[data-theme=dark] .project-grid-card,:root[data-resolved-theme=dark] .project-grid-card{background:var(--bg-surface);border-color:var(--border-subtle);box-shadow:0 4px 20px #0006}:root[data-theme=dark] .project-grid-card-badge,:root[data-resolved-theme=dark] .project-grid-card-badge{background:var(--bg-surface);border-bottom-color:var(--border-subtle)}:root[data-theme=dark] .badge-cut-title,:root[data-resolved-theme=dark] .badge-cut-title{color:var(--text-primary)}:root[data-theme=dark] .project-grid-card-caption,:root[data-resolved-theme=dark] .project-grid-card-caption{background:var(--bg-surface);color:var(--text-muted)}:root[data-theme=dark] .project-grid-banner,:root[data-resolved-theme=dark] .project-grid-banner{border-bottom-color:var(--border-subtle)}:root[data-theme=dark] .project-category-badge,:root[data-resolved-theme=dark] .project-category-badge{background:var(--bg-subtle);color:var(--text-secondary)}:root[data-theme=dark] .projects-footer,:root[data-resolved-theme=dark] .projects-footer{border-top-color:var(--border-subtle)}:root[data-theme=dark] .projects-footer .footer-link,:root[data-resolved-theme=dark] .projects-footer .footer-link{color:var(--text-muted)}:root[data-theme=dark] .projects-footer .footer-link:hover,:root[data-resolved-theme=dark] .projects-footer .footer-link:hover{color:var(--text-primary)}:root[data-theme=dark] .projects-footer .footer-bottom-copy,:root[data-resolved-theme=dark] .projects-footer .footer-bottom-copy{color:var(--text-muted)}
