/* Workbench: actual software surfaces, deliberately composed at their native ratios. */
.work-index { background:#11191a; color:var(--color-paper); overflow:clip; --color-stage-muted:#b7c4bf; --color-focus:var(--color-lime); }
.work-index .index-head { align-items:end; padding-bottom:56px; margin-bottom:0; }
.work-index .index-head h2 { font-family:var(--font-display); font-size:clamp(3.2rem,7.5vw,7.6rem); line-height:.98; letter-spacing:-.045em; }
.work-index .index-head > p { color:#b7c4bf; font-size:17px; max-width:29ch; line-height:1.55; padding-bottom:6px; }
.workbench { border-top:1px solid #41504b; }
.bench-project { display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); align-items:center; gap:36px; min-height:650px; padding-block:56px; border-bottom:1px solid #41504b; }
.bench-copy { position:relative; z-index:2; max-width:36ch; }
.bench-kind { color:#bdd89e; font-size:14px; margin-bottom:28px; }
.bench-copy h3 { font-family:var(--font-display); font-size:clamp(2.6rem,4.5vw,5rem); line-height:1.02; letter-spacing:-.04em; margin-bottom:24px; }
.bench-copy > p:not(.bench-kind) { font-size:16px; line-height:1.6; color:#bac8c1; max-width:34ch; }
.bench-link { display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid #879b8d; padding-block:24px 12px; margin-top:16px; font-size:14px; color:#f5f4ed; }
.bench-link:hover { color:var(--color-lime); }
.device-composition { position:relative; aspect-ratio:1.2; margin:0; perspective:1200px; isolation:isolate; }
.device-composition::before { content:''; position:absolute; inset:6% -4% 5% 1%; border-radius:50%; border:1px solid #50634f; transform:rotate(-18deg); }
.display-capture { position:absolute; width:91%; left:0; top:14%; padding:6px; background:#303d35; border:1px solid #697861; border-radius:5px; box-shadow:0 25px 60px #0005; transform:rotate(-4deg); }
.display-capture img { width:100%; height:auto; border-radius:2px; display:block; }
.controller-capture { position:absolute; z-index:3; width:23%; right:1%; bottom:12%; padding:6px; background:#232923; border:1px solid #8f9d7c; border-radius:20px; box-shadow:0 20px 45px #0007; transform:rotate(9deg); }
.controller-capture img { display:block; width:100%; height:auto; border-radius:14px; }
.device-connection { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.device-connection path { stroke:var(--color-lime); stroke-width:2; stroke-dasharray:4 8; }
.device-connection circle { fill:var(--color-lime); }
.device-composition figcaption { position:absolute; bottom:0; left:0; color:#b7c4bf; font-size:12px; }
.bench-starring { min-height:680px; }
.bench-starring .bench-kind { color:#ff9d8b; }
.poster-composition { position:relative; margin:0; min-width:0; }
.poster-pack { position:relative; height:360px; width:100%; perspective:1200px; }
.pack-poster { position:absolute; width:32%; height:88%; top:6%; object-fit:cover; box-shadow:0 16px 32px #0008; border:1px solid #8d736244; transform-origin:50% 90%; }
.poster-one { left:0; transform:rotate(-13deg) translateY(8%); z-index:1; }
.poster-two { left:22%; transform:rotate(-4deg); z-index:2; }
.poster-three { left:44%; transform:rotate(6deg); z-index:3; }
.poster-four { left:66%; transform:rotate(16deg) translateY(12%); z-index:4; }
.pack-flow { display:flex; align-items:center; gap:12px; font-size:13px; color:#ffd9cd; margin-top:40px; white-space:nowrap; }
.pack-flow i { height:1px; background:#b8897b; flex:1; position:relative; }
.pack-flow i::after { content:''; width:5px; height:5px; background:#ff9d8b; position:absolute; right:0; top:-2px; border-radius:50%; }
.poster-composition figcaption { color:#b7c4bf; font-size:12px; line-height:1.5; margin-top:18px; }
.project-contexts { padding:56px 0; border-bottom:1px solid #41504b; }
.project-contexts > p { font-size:13px; color:#b7c4bf; }
.project-contexts > div { display:flex; flex-wrap:wrap; gap:24px 48px; margin-block:24px; align-items:baseline; }
.project-contexts a { font-family:var(--font-display); font-size:clamp(24px,3vw,40px); letter-spacing:-.03em; }
.project-contexts a:hover { color:var(--color-lime); }
.archive-directory { margin-top:72px; }
.directory-heading { display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:32px; }
.directory-heading h3 { font-size:clamp(28px,3vw,40px); letter-spacing:-.035em; font-weight:500; }
.directory-heading p { font-size:14px; max-width:31ch; color:#b7c4bf; }
.archive-directory .archive-tools { margin-bottom:24px; }
.archive-directory .archive-filters button { border-radius:30px; padding:10px 20px; font-size:13px; }
.archive-directory .archive-rows .work-row summary { grid-template-columns:minmax(0,1fr) minmax(0,.8fr) 24px; min-height:94px; align-items:center; padding-block:20px; }
.archive-directory .archive-rows .work-row summary h3 { font-size:clamp(19px,2vw,27px); letter-spacing:-.025em; }
.archive-directory .archive-rows .work-row summary p { grid-column:2; font-size:13px; }
.archive-directory .archive-rows .work-row summary::after { grid-column:3; grid-row:1; }
.archive-directory .archive-rows .work-row > p { color:#dce4de; font-size:15px; line-height:1.6; }
.archive-directory .work-row[open] { padding-bottom:16px; }
.archive-directory .work-row a { text-decoration:underline; text-underline-offset:5px; }
@media(min-width:1600px) { .poster-pack { height:460px; } }
@media(max-width:900px) { .bench-project { gap:24px; min-height:570px; }.poster-pack { height:300px; }.pack-flow { gap:7px; font-size:12px; }.bench-copy h3 { font-size:40px; } }
@media(max-width:700px) {
 .work-index .index-head { display:block; padding-bottom:32px; }.work-index .index-head h2 { font-size:56px; }.work-index .index-head > p { margin-top:24px; font-size:16px; max-width:34ch; }
 .bench-project { display:flex; flex-direction:column; gap:20px; padding-block:40px; min-height:0; align-items:stretch; }.bench-copy { max-width:none; }.bench-kind { margin-bottom:16px; }.bench-copy h3 { font-size:43px; }.bench-copy > p:not(.bench-kind) { max-width:39ch; }.bench-link { margin-top:4px; }
 .device-composition { width:100%; aspect-ratio:1.17; }.controller-capture { border-radius:14px; padding:4px; }.controller-capture img { border-radius:10px; }.display-capture { padding:4px; }.device-composition figcaption { font-size:12px; max-width:25ch; }
 .poster-pack { height:280px; margin-top:12px; }.pack-poster { width:30%; height:85%; }.poster-two { left:23%; }.poster-three { left:46%; }.poster-four { left:69%; }.pack-flow { margin-top:22px; font-size:12px; }.poster-composition figcaption { font-size:12px; }
 .project-contexts { padding-block:36px; }.project-contexts > div { gap:20px 28px; }.project-contexts a { font-size:29px; }.project-contexts p { line-height:1.6; }
 .archive-directory { margin-top:44px; }.directory-heading { display:block; margin-bottom:24px; }.directory-heading p { margin-top:12px; }
 .archive-directory .archive-tools { flex-wrap:wrap; gap:12px; }.archive-directory .archive-count { max-width:none; }.archive-directory .archive-filters button { padding:8px 13px; }
 .archive-directory .archive-rows .work-row summary { grid-template-columns:minmax(0,1fr) 24px; min-height:94px; row-gap:8px; }.archive-directory .archive-rows .work-row summary p { grid-column:1; grid-row:2; }.archive-directory .archive-rows .work-row summary::after { grid-column:2; grid-row:1/3; }.archive-directory .archive-rows .work-row summary h3 { font-size:22px; }
}
@media(prefers-reduced-motion:reduce) { .display-capture,.controller-capture { transform:none; }.pack-poster { transform:none; }.poster-pack { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; height:auto; padding-block:20px; }.pack-poster { position:static; width:100%; height:auto; aspect-ratio:2/3; }.device-connection path { stroke-dasharray:none; } }
/* A quiet client strip; detailed credits stay with the projects. */
.project-contexts { padding-block:40px 32px; }
.collaboration-heading { display:flex; align-items:baseline; justify-content:space-between; gap:32px; }
.collaboration-heading h3 { font-family:var(--font-display); font-size:24px; letter-spacing:-.035em; line-height:1.1; }
.collaboration-heading p { color:#b7c4bf; font-size:14px; }
.project-contexts .brand-lineup { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin:32px 0 0; align-items:stretch; }
.project-contexts .brand-project { position:relative; display:flex; flex-direction:column; align-items:center; padding:16px 12px 28px; min-width:0; font-family:var(--font-body); letter-spacing:0; font-size:14px; text-align:center; }
.brand-mark { height:145px; width:100%; display:flex; align-items:center; justify-content:center; position:relative; }
.brand-mark img { display:block; width:76%; max-height:96px; object-fit:contain; transition:transform 350ms var(--ease-out); }
.brand-fix .brand-mark::before { content:''; position:absolute; width:110px; height:110px; border-radius:50%; background:#f3d8c1; }
.brand-fix .brand-mark img { position:relative; width:210px; max-width:none; height:145px; max-height:none; }
.brand-imagenation .brand-mark img { width:145px; max-height:100px; }
.brand-dpworld .brand-mark img { width:180px; }
.brand-animenia .brand-mark img { width:182px; }


.brand-project:hover .brand-mark img,.brand-project:focus-visible .brand-mark img { transform:translateY(-5px); }
.project-contexts .collaboration-rule { height:1px; display:block; background:#41504b; margin:0; }
.collaboration-rule span { height:1px; display:block; width:100%; background:#b9cd9b; }

@media(max-width:700px) {
 .project-contexts { padding-block:40px 32px; }.collaboration-heading { display:block; }.collaboration-heading h3 { font-size:24px; }.collaboration-heading p { margin-top:8px; font-size:13px; }
 .project-contexts .brand-lineup { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:20px; gap:8px; }.project-contexts .brand-project { padding:8px 4px 16px; }.brand-mark { height:128px; }.brand-fix .brand-mark img { width:180px; height:128px; }.brand-fix .brand-mark::before { width:96px; height:96px; }.brand-imagenation .brand-mark img { width:123px; }.brand-dpworld .brand-mark img { width:140px; }.brand-animenia .brand-mark img { width:140px; }
}
@media(prefers-reduced-motion:reduce) { .brand-mark img { transition:none; }.brand-project:hover .brand-mark img { transform:none; } }
/* Gameplay takes a broad, quiet frame: the real software carries the scene. */
.bench-puzzles { display:block; min-height:0; padding-block:64px; }
.puzzle-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); align-items:end; gap:64px; margin-bottom:48px; }
.puzzle-intro h3 { font-family:var(--font-display); font-size:clamp(44px,5.5vw,80px); letter-spacing:-.04em; line-height:1.02; }
.puzzle-intro .bench-kind { color:#8de0d7; margin-bottom:24px; }
.puzzle-copy > p { color:#bac8c1; font-size:17px; line-height:1.6; max-width:43ch; }
.puzzle-links { display:flex; gap:20px; flex-wrap:wrap; margin-top:28px; }
.puzzle-links a { font-size:14px; text-decoration:underline; text-underline-offset:6px; min-height:44px; display:inline-flex; align-items:center; }
.puzzle-links a:hover { color:var(--color-lime); }
.puzzle-film { margin:0; transform-origin:50% 60%; }
.puzzle-film .film-player { width:100%; max-width:none; }
.puzzle-film video { width:100%; aspect-ratio:16/9; object-fit:contain; display:block; }
.puzzle-film figcaption { color:#b7c4bf; font-size:12px; margin-top:18px; }
@media(max-width:700px) { .bench-puzzles { padding-block:40px; }.puzzle-intro { display:block; margin-bottom:28px; }.puzzle-intro h3 { font-size:48px; }.puzzle-copy { margin-top:24px; }.puzzle-copy > p { font-size:16px; }.puzzle-links { gap:12px 24px; margin-top:16px; }.puzzle-links a { font-size:13px; }.puzzle-film figcaption { line-height:1.6; } }

/* The wider catalogue is optional, so selected stories carry the first visit. */
.archive-directory > .directory-heading { cursor:pointer; list-style:none; padding:28px 0; margin-bottom:0; border-top:1px solid #41504b; align-items:center; }
.archive-directory > .directory-heading::-webkit-details-marker { display:none; }
.archive-directory > .directory-heading p { max-width:none; margin-top:10px; }
.directory-toggle { font-size:32px; font-weight:300; line-height:1; flex-shrink:0; }
.archive-directory[open] > .directory-heading { margin-bottom:24px; }
.archive-directory[open] > .directory-heading .directory-toggle { transform:rotate(45deg); }
.archive-directory > .directory-heading:focus-visible { outline:2px solid var(--color-lime); outline-offset:8px; }
@media(max-width:700px) { .archive-directory > .directory-heading { display:flex; gap:20px; }.archive-directory > .directory-heading p { font-size:13px; line-height:1.5; } }
.archive-directory > .directory-heading::after { content:none; }

.case-entry { margin:24px auto 32px; width:min(100% - 48px,1200px); font-size:15px; }.site-header nav { flex-wrap:wrap; }
@media(max-width:560px){.site-header nav a:nth-child(4){display:none}.site-header nav{gap:16px;font-size:13px}.header-contact{font-size:13px}}