/* Stage 1: photographic cover and project directory. */
.site-header{position:fixed;inset:0 0 auto;grid-template-columns:minmax(240px,1fr) auto auto;min-height:112px;padding:28px var(--gutter);gap:28px;background:transparent;color:#fff;border:0;transition:background-color .24s,color .24s,padding .24s}
.site-header .brand{width:clamp(360px,33vw,480px);filter:none;transition:width .24s}
.site-header .brand img{filter:none}
.site-header .nav{color:inherit}
#project-playlogicTriptych .case-gallery>a{aspect-ratio:3/4;background:#c8be9c}
#project-playlogicTriptych .case-gallery img{object-fit:contain}
.site-header .nav{gap:18px;justify-content:flex-end;font-size:12px}.site-header .nav a,.site-header .menu-toggle{color:inherit}
.site-header.is-past-hero,.site-header.menu-open{background:var(--paper);color:var(--ink);padding-block:16px;min-height:76px;border-bottom:1px solid var(--line)}
.site-header.is-past-hero .brand,.site-header.menu-open .brand{width:220px;filter:brightness(0)}
.hero-platform{margin:0;max-width:none;width:100%;height:100svh;min-height:660px;max-height:none;overflow:hidden}
.hero-media img{object-position:50% 52%;animation:cover-arrive .7s ease-out both}
.hero-shade{background:linear-gradient(180deg,rgba(0,0,0,.48),transparent 34%,rgba(0,0,0,.12) 60%,rgba(0,0,0,.6))}
.hero-topline{padding:196px var(--gutter) 0;font-size:12px}.hero-copy{margin-top:auto;padding:0 var(--gutter) 44px;animation:cover-copy .65s .15s both}
.hero-copy h1,:lang(en) .hero-copy h1,:lang(ja) .hero-copy h1{font-size:clamp(32px,3vw,44px);font-weight:400;letter-spacing:-.035em;line-height:1.3;max-width:680px}
.hero-copy h1 span{display:inline}.hero-copy h1 span:last-child,:lang(en) .hero-copy h1 span:last-child,:lang(ja) .hero-copy h1 span:last-child{margin-left:0}
.hero-subtitle{margin-top:14px;font-size:13px}.hero-index{margin:0 var(--gutter) 32px;gap:36px}.hero-index a{padding-top:16px}.hero-index strong{font-size:12px}.hero-index a>span{font-size:12px}
.case-directory{margin-top:44px;border-bottom:1px solid #727c70}.case-entry{border-top:1px solid #727c70;scroll-margin-top:100px}
.case-summary{display:grid;grid-template-columns:52px minmax(0,1fr) auto 24px;gap:20px;align-items:center;cursor:pointer;list-style:none;padding:27px 0;min-height:100px}.case-summary::-webkit-details-marker{display:none}
.case-number,.case-category{font:400 12px/1.5 var(--csw-font);letter-spacing:.06em}.case-number{align-self:center;color:#bac6b8}.case-summary h3{font-size:clamp(26px,3vw,44px);font-weight:400;letter-spacing:-.04em;line-height:1.15;margin:0}.case-category{color:#bac6b8}
.case-toggle{position:relative;width:18px;height:18px}.case-toggle:before,.case-toggle:after{content:'';position:absolute;background:currentColor;top:8px;left:0;width:18px;height:1px}.case-toggle:after{transform:rotate(90deg);transition:transform .25s}.case-entry[open] .case-toggle:after{transform:rotate(0)}
.case-panel{padding-bottom:32px}.case-entry[open] .case-panel{animation:case-reveal .35s ease-out}.case-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.case-gallery>a{position:relative;display:block;overflow:hidden;aspect-ratio:4/3;background:#334033}.case-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.case-gallery>a:hover img{transform:scale(1.025)}.case-photo-label{position:absolute;bottom:12px;left:12px;right:12px;display:flex;justify-content:space-between;color:#fff;font-size:12px;text-shadow:0 1px 5px #000}.case-photo-label b{font-size:20px;font-weight:400;transform:translate(-3px,3px);transition:transform .18s}.case-gallery>a:hover b,.case-gallery>a:focus-visible b{transform:none}
.case-panel .work-copy{max-width:680px;margin:24px 0 0 auto;padding:0}.case-panel .work-copy h4{font-size:18px;font-weight:400;margin:0 0 12px}.case-panel .work-copy p{font-size:14px;line-height:1.9}.case-panel .project-role{font-size:12px;margin-top:18px}.case-panel .text-link{font-size:12px;margin-top:12px}
@keyframes cover-arrive{from{transform:scale(1.02)}to{transform:scale(1)}}@keyframes cover-copy{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes case-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.site-header{grid-template-columns:1fr auto;gap:20px}.site-header .brand{width:340px}.header-tools{grid-column:2}.site-header .nav{grid-column:1/-1;grid-row:2;justify-content:flex-start}.hero-topline{padding-top:224px}.case-category{max-width:130px}}
@media(max-width:760px){.site-header{padding:22px;min-height:88px;gap:12px}.site-header .brand{width:clamp(180px,51vw,210px)}.site-header.is-past-hero .brand,.site-header.menu-open .brand{width:180px}.site-header .nav{grid-column:1/-1}.site-header .menu-toggle{color:inherit}.header-tools{gap:16px}.hero-platform{margin:0;height:100svh;min-height:620px}.hero-topline{padding:124px 22px 0}.hero-topline span{font-size:12px}.hero-copy{padding:0 22px 32px}.hero-copy h1,:lang(en) .hero-copy h1,:lang(ja) .hero-copy h1{font-size:32px;line-height:1.35}.hero-copy h1 span{display:block}.hero-subtitle{font-size:12px;max-width:28em}.hero-index{margin:0 22px 28px;gap:14px;border-top:1px solid #ffffff80}.hero-index a{flex:1;padding:16px 0 0}.hero-index strong{font-size:12px}.hero-index a>span{display:none}.case-directory{margin-top:32px}.case-summary{grid-template-columns:24px minmax(0,1fr) 18px;gap:12px;padding:22px 0;min-height:90px}.case-summary h3{font-size:27px}.case-category{grid-column:2;grid-row:2;max-width:none;font-size:12px}.case-toggle{grid-column:3;grid-row:1/3}.case-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:8px}.case-gallery>a{flex:0 0 84%;scroll-snap-align:start;aspect-ratio:4/3}.case-panel .work-copy{margin-top:20px}.case-panel .work-copy h4{font-size:17px}.case-panel .work-copy p{font-size:14px}}
@media(max-width:374px){.site-header{padding-inline:16px}.site-header .brand,.site-header.is-past-hero .brand,.site-header.menu-open .brand{width:160px}.header-tools{gap:10px}}
@media(prefers-reduced-motion:reduce){.hero-media img,.hero-copy,.case-entry[open] .case-panel{animation:none}.case-gallery>a:hover img{transform:none}.site-header,.site-header .brand,.case-toggle:after,.case-gallery img,.case-photo-label b{transition:none}}