/* Responsive page layout. The animation controller shares these flow-mode thresholds. */
:root { --page-gutter:clamp(20px,3.2vw,48px); }
html { -webkit-text-size-adjust:100%; }
img,video,svg { max-width:100%; }
button,a { -webkit-tap-highlight-color:transparent; }
button { max-width:100%; }
a:focus-visible,button:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.col { padding-inline:var(--page-gutter); }
.hero-name { display:block; font-size:clamp(34px,6vw,64px); line-height:1.05; }
.hero-inner { min-height:100svh; }
.hero-bio { font-size:clamp(16px,1.2vw,18px); line-height:1.7; }
.nav { gap:20px; }
.nav-links { align-items:center; }
.nav-links a { display:inline-flex; align-items:center; min-height:44px; font-size:13px; }
.wordmark { flex-shrink:0; min-height:44px; display:inline-flex; align-items:center; }
.page > section { scroll-margin-top:80px; }
.ch-open,.ch-open.sm,.project-access { min-height:44px; padding-block:12px; line-height:1.4; }
.project-description { font-size:14px; }
.project-description h3 { overflow-wrap:anywhere; }
.story-sheet .sheet-projects { font-size:16px; }
.sheet-flow .sheet-media > img,.sheet-flow .sheet-study-media :is(img,video) { height:220px; object-fit:contain; }
.websites-inner { min-width:0; }
.web-tiles { min-width:0; }
.web-tile { min-width:0; }
.web-kicker,.wt-name { font-size:13px; }
.wt-desc { font-size:14px; line-height:1.5; }
.web-tile:focus-visible { outline-color:#fff; }
.contact-list { min-width:0; }
.contact-list a { display:inline-block; min-height:44px; font-size:clamp(18px,2.5vw,32px); line-height:1.5; overflow-wrap:anywhere; }
.printing-flow-media { display:grid; gap:20px; margin:0; }
.printing-flow-media figure { margin:0; min-width:0; }
.printing-flow-media :is(img,video) { display:block; width:100%; height:auto; max-height:420px; object-fit:contain; background:#f7f6f2; }
.printing-flow-media figcaption { font-size:14px; line-height:1.5; margin-top:8px; color:var(--label); }

.flow-layout .nav { position:relative; inset:auto; display:flex; flex-wrap:wrap; gap:4px 24px; padding:16px var(--page-gutter); }
.flow-layout .nav-links { justify-content:flex-start; gap:0 16px; }
.flow-layout .nav-links a { padding:8px 0; white-space:normal; }
.flow-layout.in-stripe .nav a { color:var(--ink); }
.flow-layout .page > section { scroll-margin-top:16px; }
.flow-layout #hero { min-height:0; padding:clamp(24px,5vw,64px) 0 64px; }
.flow-layout .hero-inner { position:static; height:auto; min-height:0; display:block; }
.flow-layout .hero-text { max-width:68ch; }
.flow-layout .hero-bio { max-width:68ch; }
.flow-layout #cubes-canvas { display:none; }
.flow-layout #experience .exp2-pin { min-height:0; padding:0; display:block; }
.flow-layout #experience .exp2-col { max-width:none; min-height:0; }
.flow-layout #experience .exp2-top { position:static; max-width:none; padding-inline:var(--page-gutter); }
.flow-layout #experience .exp2-pin > .col .exp2-top { padding-inline:0; }
.flow-layout #slicer .exp2-pin { display:none; }
.flow-layout .am-fallback { display:block; padding:40px 0; }
.flow-layout .slice-hairline { display:none; }
.flow-layout .am-fallback-story { grid-template-columns:minmax(0,1fr); gap:24px; padding:32px 0; }
.flow-layout .am-fallback-story p { font-size:16px; max-width:68ch; }
.flow-layout .prev-band { margin-top:32px; padding:32px 0 48px; }
.flow-layout .prev-band .exp2-prev { max-width:none; gap:32px; }
.flow-layout .prev-band .exp2-row { grid-template-columns:minmax(0,1fr); gap:20px; }
.flow-layout .exp2-rowtext p { font-size:16px; max-width:68ch; }
.flow-layout .prev-band .exp2-row .vct { width:min(100%,320px); margin:0; transform:none; }
.flow-layout .projects2 { min-height:0; padding:36px 0 56px; }
.flow-layout .projects-head { transform:none !important; }
.flow-layout .project-description { display:none; }
.flow-layout .project-mgrid { display:grid !important; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:20px; margin:24px auto 0; padding-inline:var(--page-gutter); max-width:1248px; }
.flow-layout .project-tile { width:100%; min-width:0; min-height:112px; padding:22px; text-align:left; white-space:normal; }
.flow-layout .project-tile strong { display:block; margin-bottom:10px; font-size:20px; line-height:1.3; }
.flow-layout .project-tile span { font-size:16px; line-height:1.6; }
.flow-layout .darkstripe.websites-stripe { min-height:0; padding:56px var(--page-gutter); }
.flow-layout .websites-inner { width:100%; max-width:900px; margin-inline:auto; }
.flow-layout .websites-inner h2 { font-size:clamp(36px,7vw,64px); }
.flow-layout .web-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px; }
.flow-layout .web-tile img,.flow-layout .wt-numera { height:clamp(140px,24vw,240px); }
.flow-layout .ch-contact { min-height:0; padding:56px 0; }
.flow-layout .contact-inner { min-width:0; }
.flow-layout .progress { display:none; }
body:not(.flow-layout) .project-mgrid { display:none !important; }
.no-webgl #particles-canvas,.no-webgl #cubes-canvas { display:none; }
.no-webgl .websites-stripe { background:var(--ink); }

@media (max-width:479px) {
  :root { --page-gutter:20px; }
  .flow-layout .nav { display:block; padding:12px var(--page-gutter) 18px; }
  .flow-layout .wordmark { min-height:40px; }
  .flow-layout .nav-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; width:100%; }
  .flow-layout .nav-links a { min-width:0; min-height:40px; padding:7px 0; font-size:12px; line-height:1.3; }
  .flow-layout .nav-links a:nth-child(2) { grid-column:1 / -1; grid-row:1; }
  .flow-layout #hero { padding-top:20px; }
  .flow-layout .hero-name { max-width:none; font-size:clamp(34px,10.8vw,44px); overflow-wrap:normal; word-break:normal; text-wrap:wrap; }
  .flow-layout .hero-loc { font-size:14px; line-height:1.5; }
  .flow-layout .hero-bio { font-size:16px; line-height:1.65; }
  .flow-layout .web-tiles { grid-template-columns:minmax(0,1fr); }
  .flow-layout .web-tile img,.flow-layout .wt-numera { height:auto; aspect-ratio:16/9; }
  .flow-layout .nav-links { gap:0 14px; }
  .flow-layout .hero-role { font-size:17px; }
}
@media (max-width:359px) {
  :root { --page-gutter:16px; }
  .flow-layout .hero-name { font-size:32px; letter-spacing:-.025em; }
  .flow-layout .nav-links { grid-template-columns:minmax(0,1fr); }
  .flow-layout .nav-links a:nth-child(2) { grid-column:auto; grid-row:auto; }
}
@media (min-width:700px) {
  .flow-layout .printing-flow-media { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; }
  .flow-layout .printing-flow-media :is(img,video) { height:220px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; }
  .web-tile img { transition:none; }
  .web-tile:hover img { transform:none; }
}