/* Shared portfolio and case-study presentation. Loaded after the base styles. */
.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 32px;align-items:start}
.project-grid .project-card:nth-child(n){grid-column:auto;padding:0;margin:0;min-width:0}
.project-grid .project-card:nth-child(n) .project-image{aspect-ratio:16/10;background:#171a16}
.project-grid .project-image img{width:100%;height:100%;object-fit:cover}
.project-grid .project-info{margin:0;padding:22px 0 0;border:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px}
.project-grid .project-info h3{font-size:clamp(1.5rem,2.25vw,2.25rem);font-weight:400;line-height:1.2;letter-spacing:-.025em;overflow-wrap:anywhere;text-wrap:balance}
.project-grid .project-info p{font-size:.875rem;line-height:1.65;letter-spacing:.035em;margin:10px 0 0;overflow-wrap:anywhere}
.project-grid .project-info>span{font-size:.875rem;padding-top:5px}
.project-grid .view-project{width:44px;height:44px;right:16px;bottom:16px}
.project-grid .video-badge{top:16px;left:16px;font-size:.75rem;padding:9px 12px}
/* All project pages share the same content width, title hierarchy and facts. */
.project-page{width:100%;max-width:1440px;margin-inline:auto;padding-inline:clamp(20px,5vw,72px)}
.project-page .case-nav{padding-block:22px;align-items:center}
.project-page .case-nav img{width:160px;height:64px;object-fit:contain}
.project-page header.case-title{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;row-gap:16px;padding:56px 0 36px;max-width:none}
.case-title .project-category{grid-column:1/-1;margin:0;font-size:.875rem;letter-spacing:.08em;line-height:1.7;max-width:75ch}
.project-page .case-title h1{margin:0;font-size:clamp(2.5rem,5.5vw,5rem);line-height:1.08;letter-spacing:-.04em;max-width:22ch;text-wrap:balance;overflow-wrap:anywhere}
.case-title .case-index{position:static;align-self:end;margin:0 0 7px;font-size:.875rem;white-space:nowrap}
.project-page .case-cover{margin:0;aspect-ratio:16/9;background:#090b09;display:grid;place-items:center}
.project-page .case-cover img,.project-page .case-cover video{display:block;width:100%;height:100%;max-height:none;object-fit:contain;min-height:0}
.project-page .case-intro{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr);gap:clamp(32px,6vw,88px);padding:48px 0 56px;align-items:start}
.project-page .case-concept{font-size:.875rem;line-height:1.6;letter-spacing:.08em;margin:0 0 18px}
.project-page .case-intro .project-description{font-size:clamp(1.125rem,1.5vw,1.375rem);line-height:1.8;max-width:58ch;white-space:pre-line;overflow-wrap:anywhere;margin:0}
.project-page .case-intro .case-facts{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0;padding:0;border:0}
.project-page .case-facts>div{border-top:1px solid var(--line);padding-top:14px;min-width:0}
.project-page .case-facts dt{font-size:.875rem;line-height:1.5;margin-bottom:8px}
.project-page .case-facts dd{font-size:1rem;line-height:1.6;margin:0}
.project-page .case-heading{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:48px 0 28px;margin:0}
.project-page .case-heading h2{font-size:clamp(2rem,3vw,3rem);line-height:1.15;font-weight:400;letter-spacing:-.03em;margin:0}
.project-page .case-heading>span{font-size:.875rem;line-height:1.6;white-space:nowrap}
.project-page .project-page-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px;align-items:start}
.project-page .project-page-gallery figure:nth-child(n){grid-column:auto;margin:0;min-width:0}
.project-page .project-page-gallery figure.case-photo-wide,.project-page .project-page-gallery figure.case-film{grid-column:1/-1}
.project-page .case-photo-surface{display:grid;place-items:center;aspect-ratio:16/10;background:#171a16;overflow:hidden}
.project-page .case-photo-wide .case-photo-surface{aspect-ratio:16/9}
.project-page .project-page-gallery .case-photo img{width:100%;height:100%;max-height:none;object-fit:contain;display:block}
.project-page .case-photo figcaption{display:flex;justify-content:flex-end;margin-top:10px;font-size:.875rem;line-height:1.6;font-variant-numeric:tabular-nums;color:var(--muted)}
.project-page .case-film video{display:block;width:100%;aspect-ratio:16/9;max-height:80svh;object-fit:contain}
.project-page .case-footer{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:64px;padding:48px 0 64px;margin-top:56px}
.project-page .case-footer p{font-size:clamp(2rem,3.2vw,3rem);line-height:1.18}
.project-page .case-next>img{aspect-ratio:16/9;object-fit:cover}
.project-page .case-next>span{font-size:clamp(1.375rem,2vw,1.875rem);line-height:1.3}
/* Consistent viewing stage for the quick-view gallery. */
#project-dialog{width:min(1240px,96vw);background:#10130f}
#project-dialog .dialog-top{padding:24px 28px;background:#10130f;align-items:start}
#project-dialog .dialog-top h2{font-size:clamp(1.75rem,3vw,2.75rem);line-height:1.15;overflow-wrap:anywhere}
#project-dialog .dialog-top .eyebrow{font-size:.875rem;line-height:1.6}
#project-dialog .gallery-toolbar{padding:12px 28px;font-size:.875rem}
#project-dialog .dialog-image{margin-inline:28px;height:min(55svh,640px);min-height:220px;background:#080a08}
#project-dialog .dialog-bottom{padding:24px 28px;gap:32px}
#project-dialog .dialog-bottom>p{font-size:1rem;line-height:1.8;max-width:68ch;white-space:pre-line;overflow-wrap:anywhere}
#project-dialog .gallery-thumbnails{margin:0 28px 20px;gap:10px}
#project-dialog .gallery-thumbnails button{width:96px;min-width:96px;height:60px}
#project-dialog .project-full-link{margin:12px 28px 24px}
#project-dialog .project-navigation{padding:20px 28px}
@media(max-width:900px){
 .project-page .case-intro{grid-template-columns:1fr;gap:32px}
 .project-page .case-intro .case-facts{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
 .project-page .case-footer{gap:32px}
}
@media(max-width:700px){
 .project-grid{grid-template-columns:1fr;gap:36px}
 .project-grid .project-card:nth-child(n){grid-column:1}
 .project-grid .project-info{padding-top:16px;gap:12px}
 .project-grid .project-info h3{font-size:1.75rem}
 .project-grid .project-info p{font-size:.875rem}
 .project-page{padding-inline:20px}
 .project-page .case-nav{gap:16px;padding-block:16px}
 .project-page .case-nav img{width:124px;height:48px}
 .project-page .case-nav a:last-child{font-size:.875rem;max-width:130px;text-align:right}
 .project-page header.case-title{padding:32px 0 24px;gap:14px}
 .project-page .case-title h1{font-size:clamp(2.25rem,9vw,3.5rem);grid-column:1/-1}
 .case-title .case-index{grid-column:1/-1;margin:0;font-size:.875rem}
 .project-page .case-intro{padding:32px 0;gap:28px}
 .project-page .case-intro .case-facts{grid-template-columns:1fr 1fr;gap:24px 16px}
 .project-page .case-heading{padding:32px 0 22px;flex-wrap:wrap;gap:12px}
 .project-page .project-page-gallery{grid-template-columns:1fr;gap:24px}
 .project-page .project-page-gallery figure:nth-child(n){grid-column:1}
 .project-page .case-photo-surface,.project-page .case-photo-wide .case-photo-surface{aspect-ratio:auto}
 .project-page .project-page-gallery .case-photo img{height:auto}
 .project-page .case-footer{grid-template-columns:1fr;padding:36px 0 48px;margin-top:36px;gap:40px}
 #project-dialog{width:100%;height:100svh;max-height:100svh;border:0;margin:0}
 #project-dialog .dialog-top{padding:20px;gap:12px}
 #project-dialog .dialog-top h2{font-size:1.75rem}
 #project-dialog .gallery-toolbar{padding:12px 20px}
 #project-dialog .dialog-image{margin:0;min-height:0;height:42svh;aspect-ratio:auto}
 #project-dialog .dialog-bottom{padding:20px;flex-direction:column-reverse;gap:20px}
 #project-dialog .gallery-thumbnails{margin:0 20px 20px}
 #project-dialog .project-full-link{margin:12px 20px 24px}
 #project-dialog .project-navigation{padding:20px}
}