/* Compact layouts share the same edges, type and category cues as desktop. */
@media (max-width:700px){
 .site-header{grid-template-columns:minmax(0,1fr) auto;column-gap:16px}
 .site-header .brand{grid-column:1;grid-row:1;white-space:nowrap}
 .site-header .main-nav{grid-column:2;grid-row:1;gap:20px}
 .site-header::after{grid-column:1/-1}
 .page{padding-block-start:20px}
 .filter-bar{display:grid;grid-template-columns:repeat(3,max-content);justify-content:space-between;align-items:start;gap:0 12px}
 .filter-bar .category-control{min-block-size:32px}
 .home-controls{display:block;padding-block-end:12px;margin-block-end:20px}
 .home-controls>.filter-bar{margin:0}
 .home-controls>.video-master{display:flex;inline-size:fit-content;margin-block-start:4px;margin-inline-start:auto;min-block-size:28px;align-items:center}
 .projects-grid{row-gap:28px}
 .home-page .project-card figure{padding-block-end:0}
 .card-caption{margin-block-start:8px}
 .index-page>.collection-heading{margin-block-end:12px}
 .index-page>.filter-bar{padding-block-end:12px}
 .index-toggle{grid-template-columns:52px minmax(0,1fr) 24px;column-gap:12px;row-gap:4px;min-block-size:72px;padding-block:16px}
 .index-title{overflow-wrap:anywhere}
 .disclosure-label{justify-content:flex-end;font-size:0;line-height:18px}
 .disclosure-mark{font-size:12px;line-height:18px}
 .index-panel-inner{gap:20px}
 .index-description{max-inline-size:52ch}
 .project-intro,.contact-grid{grid-template-columns:minmax(0,1fr);row-gap:20px}
 .project-intro>.project-hero,.project-intro>.project-copy,.contact-grid>h2,.contact-grid>div{grid-column:1/-1;min-inline-size:0}
 .project-intro>.project-copy{max-inline-size:52ch}
 .project-gallery{margin-block-start:28px}
 .contact-grid>div,.about-contact{overflow-wrap:anywhere}
 .contact-links{margin-block-start:20px}
 .about-page .bio-intro>figure{max-inline-size:none}
 .about-page .biography{max-inline-size:52ch}
 .about-details{padding-block-start:20px}
 .about-record{grid-template-columns:76px minmax(0,1fr);gap:12px}
 .experiments-page>.filter-bar{margin-block-end:24px}
 .experiments-page>.section-intro{margin-block-end:24px}
 .brand-row>h2,.brand-row>div{grid-column:1/-1;min-inline-size:0}
 .project-ending{gap:20px}
}
@media (max-width:360px){
 .site-header{column-gap:12px}
 .site-header .main-nav{gap:16px}
 .filter-bar{column-gap:8px}
 .index-toggle{grid-template-columns:48px minmax(0,1fr) 20px;column-gap:10px}
}