/* The small brand mark and the larger interactive object share one model. */
.site-header .brand img{width:34px;height:34px}
.site-footer .brand img{width:28px;height:28px}
.sculpture-stage{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;border-radius:0}
.sculpture-stage:active{cursor:grabbing}
.sculpture-stage:focus{outline:none}
.hero-art:has(.sculpture-stage:focus-visible:not(.is-pointer-focused)) figcaption{text-decoration:underline;text-underline-offset:5px}
.hero-object-controls{display:flex;justify-content:center;gap:18px;min-height:18px;margin-top:14px;font-size:10px;line-height:1.8;color:var(--muted)}
.hero-object-controls>span{opacity:.7}
.hero-reset{padding:0;background:none;font:inherit;text-decoration:underline;text-underline-offset:4px}
.hero-art:not(:has(.webgl-ready)) .hero-object-controls{visibility:hidden}
.hero-art:not(:has(.webgl-ready)) #hero-instructions{display:none}
@media(max-width:800px){.site-header .brand img{width:31px;height:31px}.hero-object-controls{font-size:9px;margin-top:10px}}
@media(max-width:560px){.site-header .brand img{width:29px;height:29px}.hero-art{width:100%;margin-inline:auto}.hero-object-controls{font-size:8px;margin-top:7px}.site-footer .brand img{width:25px;height:25px}}

/* Mobile: the selected Asymmetric Calm composition, with one quiet action. */
@media(max-width:560px){
  html{scroll-padding-top:108px}
  .site-header{border-bottom-color:transparent}
  .site-header .nav-wrap{width:calc(100% - 52px);height:92px}
  .site-header .brand{gap:14px}
  .site-header .brand img{width:33px;height:33px}
  .site-header .brand span{font-size:9px;letter-spacing:.15em}
  .js .site-nav{top:92px;left:-26px;right:-26px}
  .menu-toggle{width:26px;padding-left:0}
  .menu-toggle span{width:26px}
  /* Couple the inset to the stage, including its smaller short-viewport size. */
  .hero{--hero-stage-width:clamp(300px,92.3vw,400px);--hero-stage-offset:calc(var(--hero-stage-width) * .23 - 12px);display:block;width:calc(100% - 56px);min-height:calc(100svh - 92px);padding-block:70px 76px}
  .hero-copy{text-align:left}
  .hero .eyebrow,.hero-tagline,.hero-actions>.text-link,.hero-art figcaption,.hero-bottom{display:none}
  .hero h1{font-size:clamp(52px,17.18vw,80px);line-height:.88;letter-spacing:-.07em;margin-left:0;word-spacing:.025em}
  .hero-description{font-size:18px;line-height:1.2;letter-spacing:-.015em;color:var(--muted);max-width:none;margin:46px 0 0}
  .hero-description-ending{display:block}
  .hero-actions{align-items:flex-start;justify-content:flex-start;gap:0;margin-top:30px}
  .hero-actions>.button{min-height:44px;padding:10px 0;background:none;color:var(--ink);border-radius:0;font-size:14.5px;line-height:1.5;text-decoration:underline;text-decoration-color:#7d7f83;text-underline-offset:9px;text-decoration-thickness:1px}
  .hero-actions>.button:hover{background:none;transform:none;text-decoration-color:var(--ink)}
  .hero-art{width:100%;height:calc(var(--hero-stage-width) * 680 / 740);max-width:none;margin:0;overflow:clip}
  .hero .sculpture-stage{width:var(--hero-stage-width);margin-left:calc(100% - var(--hero-stage-width) + var(--hero-stage-offset))}
  .hero-object-controls{position:absolute;right:calc(var(--hero-stage-width) * .27 + 12px);transform:translateX(50%);bottom:0;min-height:0;margin:0;font-size:11px}
  .hero-object-controls>span{display:none}
  .hero-reset{min-width:80px;min-height:44px}
  .hero-art:has(.sculpture-stage:focus-visible:not(.is-pointer-focused)) .hero-object-controls>span{display:block;text-decoration:underline;text-underline-offset:4px}
}
@media(max-width:560px) and (max-height:760px){
  html{scroll-padding-top:92px}
  .site-header .nav-wrap{height:76px}
  .js .site-nav{top:76px}
  .hero{--hero-stage-width:300px;min-height:calc(100svh - 76px);padding-block:32px 24px}
  .hero-description{margin-top:30px}
  .hero-actions{margin-top:22px}
}

/* Process: one centered circular composition above one centered text column. */
.process-overview .process-art{height:176px;object-position:center;margin:0 auto 25px}
.process-overview .process-text{text-align:center}
.process-overview h3{max-width:none;min-height:1.14em;margin-inline:auto}
.process-overview .process-summary{margin-inline:auto;max-width:27ch}
.process-overview li:last-child .process-art{padding:20px}
@media(max-width:800px){.process-overview .process-art{height:150px;margin-bottom:21px}.process-overview li:last-child .process-art{padding:18px}}
@media(min-width:561px) and (max-width:800px){.process-overview h3{max-width:11ch;min-height:2.28em}}
@media(max-width:560px){.process-overview .process-art{width:98px;height:98px;aspect-ratio:1;margin:0}.process-overview .process-text{text-align:left}.process-overview h3{max-width:none;min-height:0;margin-inline:0}.process-overview .process-summary{max-width:none;margin-inline:0}.process-overview li:last-child .process-art{padding:13px}}
@media(max-width:360px){.process-overview .process-art{width:78px;height:78px}.process-overview li:last-child .process-art{padding:11px}}