@font-face { font-family: Geist; src: url('/assets/fonts/geist-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root { --paper: #f3f1e9; --ink: #242620; --soft: #e9e7de; --sage: #c3cbb0; --secondary: #6b6d63; --dark-soft: #30342c; --dark-secondary: #b6bcac; --dark-line: #aab59a; --signal: #e3ead8; --gutter: clamp(20px, 5.5vw, 96px); --ease: cubic-bezier(.2,.7,.2,1); --nav-color: var(--ink); --heading-tracking: -.015em; --section-title-size: clamp(34px,3.4vw,50px); --caption-width: clamp(224px,19vw,280px); --flow-cycle: 5s; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Geist, sans-serif; font-synthesis: none; line-height: 1.5; }
h1,h2,h3,h4,p,figure { margin: 0; }
h1,h2,h3,h4 { font-weight: 400; }
.section-title { font-size: var(--section-title-size); line-height: 1.1; letter-spacing: var(--heading-tracking); text-align: left; color: #000; }
.engineering-collection .section-title { color: inherit; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button { text-transform: uppercase; }
button,.action-label { width: 4cm; min-width: 4cm; max-width: 4cm; flex-shrink: 0; }
button { display: inline-flex; align-items: center; justify-content: center; }
svg { display: block; }
::selection { color: var(--ink); background: var(--sage); }
:focus-visible { outline: 2px solid #829165; outline-offset: 7px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 20px; top: 15px; padding: 12px 20px; z-index: 100; background: var(--ink); color: var(--paper); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.content-shell { width: min(100%,1600px); margin-inline: auto; padding-inline: var(--gutter); }
.navigation { position: absolute; top: 27px; left: 0; width: 100%; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; z-index: 20; color: var(--nav-color); }
.wordmark { font-size: 30px; line-height: 1; letter-spacing: -.045em; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.navigation nav { display: flex; gap: 20px; }
.navigation nav a { min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; padding-inline: 10px; font-size: 13px; position: relative; }
.navigation nav a::after { content: ''; position: absolute; height: 1px; background: currentColor; left: 10px; right: 10px; bottom: 8px; transform: scaleX(0); transform-origin: left; transition: transform 180ms var(--ease); }
.navigation nav a:hover::after, .navigation nav a:focus-visible::after { transform: scaleX(1); }

/* Default: three ordinary, readable compositions. JavaScript only adds motion. */
.scroll-story { position: relative; }
.story-viewport { position: relative; display: flex; flex-direction: column; }
.surface-strip,.backstage,.union-panel { position: relative; min-height: 100svh; overflow: hidden; }
.surface-strip { background: var(--paper); color: var(--ink); z-index: 3; order: 0; }
.surface-inner { position: relative; height: 100svh; min-height: 540px; }
.surface-headline,.back-headline,.union-headline { position: absolute; top: 28%; left: var(--gutter); right: var(--gutter); }
.the-word { display: block; font-size: clamp(24px,3.3vw,48px); line-height: 1; letter-spacing: var(--heading-tracking); margin-left: .015em; }
.display-word { display: block; width: fit-content; margin-left: -.045em; font-size: clamp(70px,min(28vw,45svh),420px); line-height: 1.04; letter-spacing: -.045em; font-weight: 400; white-space: nowrap; }
.source-letter { display: inline-block; }
.surface-caption,.back-caption { position: absolute; bottom: 0; right: var(--caption-offset,0px); width: var(--caption-width); text-align: left; font-size: clamp(16px,1.65vw,24px); letter-spacing: -.025em; line-height: 1.45; }
.union-caption { position: absolute; bottom: 22%; right: calc(var(--gutter) + var(--caption-offset,0px)); width: var(--caption-width); text-align: left; font-size: clamp(16px,1.65vw,24px); letter-spacing: -.025em; line-height: 1.45; }
.surface-footer { position: absolute; bottom: 36px; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .06em; }
.backstage { background: var(--ink); color: var(--paper); min-height: 100svh; order: 1; }
.back-headline { top: 19%; }
.back-headline .display-word { font-size: clamp(60px,min(18.3vw,26svh),290px); }
.back-headline .invisible-lettering { width: var(--lettering-width,3.07em); }
.invisible-lettering svg { width: 100%; height: 1.04em; overflow: visible; }
.invisible-contour { fill: var(--paper); stroke: none; }
.workflow-note { position: absolute; left: var(--gutter); bottom: 36px; color: #a1a69a; font-size: 10px; }
.logic-map { --map-center: 74%; position: absolute; width: min(1200px,90%,86svh); left: 50%; top: var(--map-center); transform: translate(-50%,-50%); overflow: visible; }
.static-mobile-map { display: none; }
.logic-connections path { fill: none; stroke: var(--sage); stroke-width: 1; vector-effect: non-scaling-stroke; }
.logic-connections .feedback-path { stroke-dasharray: 4 6; opacity: .5; }
.logic-node rect { fill: var(--ink); stroke: #616b54; stroke-width: 1; vector-effect: non-scaling-stroke; }
.logic-node text { fill: var(--paper); text-anchor: middle; font-size: 21px; letter-spacing: -.03em; }
.logic-ports circle { fill: var(--sage); }
.core-orbit { fill: var(--sage); stroke: #737e60; stroke-width: 1; stroke-dasharray: 1 5; vector-effect: non-scaling-stroke; }
.static-core-label text { fill: var(--ink); font-size: 22px; text-anchor: middle; }
.union-panel { background: var(--paper); color: var(--ink); z-index: 4; order: 2; }
.union-headline .display-word { font-size: clamp(50px,16vw,246px); letter-spacing: -.025em; color: #000; }
.travelling-symbol { display: none; }
.story-hint { position: absolute; bottom: 68px; left: var(--gutter); z-index: 8; color: var(--nav-color); min-height: 44px; display: flex; align-items: center; font-size: 11px; }
.hint-intro { display: none; }

/* One pinned scene, three physical strips, one continuous punctuation/node. */
.motion-ready .navigation { position: absolute; }
.motion-ready .outside-story .navigation { position: absolute; }
.outside-story .story-hint { visibility: hidden; }
.motion-ready .scroll-story { height: 390svh; }
.motion-ready .story-viewport { height: 100svh; position: sticky; top: 0; overflow: hidden; background: var(--ink); }
.motion-ready .surface-strip,.motion-ready .backstage,.motion-ready .union-panel { position: absolute; inset: 0; min-height: 0; height: 100%; }
.motion-ready .surface-inner { height: 100%; min-height: 0; }
.motion-ready .surface-strip:nth-of-type(2) { clip-path: inset(0 0 66.666% 0); }
.motion-ready .surface-strip:nth-of-type(3) { clip-path: inset(33.333% 0 33.333% 0); }
.motion-ready .surface-strip:nth-of-type(4) { clip-path: inset(66.666% 0 0 0); }
.motion-ready .surface-letter { color: transparent; }
.motion-ready .union-letter { opacity: var(--union-letter-opacity,0); }
.motion-ready .surface-headline { animation: first-impression 900ms var(--ease) backwards; }
.motion-ready .surface-copy .surface-headline { animation: none; }
.motion-ready .backstage { z-index: 1; }
.motion-ready .back-headline { opacity: var(--back-title-opacity,0); transform: var(--back-title-transform,none); }
.motion-ready .invisible-contour { fill: var(--ink); stroke: #929b84; stroke-width: 2.4px; vector-effect: non-scaling-stroke; paint-order: stroke fill; stroke-linejoin: round; stroke-linecap: round; }
.motion-ready .logic-map { opacity: var(--map-opacity,0); }
.motion-ready .logic-node { opacity: var(--nodes-opacity,0); }
.motion-ready .core-orbit { fill: none; opacity: var(--nodes-opacity,0); }
.motion-ready .static-core-label { display: none; }
.motion-ready .logic-connections path { stroke-dasharray: 1; stroke-dashoffset: var(--draw-offset,1); }
.motion-ready .workflow-note { opacity: var(--map-opacity,0); }
.motion-ready .union-panel { clip-path: circle(var(--union-radius,0%) at var(--reveal-x,50%) var(--reveal-y,68%)); }
.motion-ready .union-headline,.motion-ready .union-caption { opacity: var(--union-opacity,0); }
.motion-ready .travelling-symbol { position: absolute; display: flex; align-items: center; justify-content: center; width: var(--dot-width,32px); height: var(--dot-height,32px); left: var(--dot-x,0px); top: var(--dot-y,0px); z-index: 7; animation: first-impression 900ms var(--ease) backwards; }
.travelling-symbol svg { width: 100%; height: 100%; overflow: visible; fill: var(--dot-color,var(--ink)); opacity: var(--dot-opacity,1); }
.travelling-symbol span { position: absolute; font-size: clamp(10px,1vw,14px); text-align: center; line-height: 1.2; letter-spacing: -.015em; color: var(--ink); opacity: var(--dot-label-opacity,0); }
.motion-ready .hint-intro { display: block; opacity: var(--hint-intro-opacity,1); }
.motion-ready .hint-outro { position: absolute; left: 0; white-space: nowrap; opacity: var(--hint-outro-opacity,0); }
/* Optical overhangs remain visible; the scroll strips supply the only crop. */
@keyframes first-impression { from { opacity: 0; } to { opacity: 1; } }

.selected-work { padding-top: clamp(70px,10vw,160px); }
.eyebrow { font-size: 10px; line-height: 1.5; letter-spacing: .085em; text-transform: uppercase; color: var(--secondary); }
.collection-intro { margin-bottom: 50px; text-align: left; }
.author-heading { display: flex; gap: 26px; align-items: baseline; margin-bottom: 32px; }
.author-heading h3 { font-size: 38px; letter-spacing: var(--heading-tracking); line-height: 1.15; }
.author-heading p { font-size: 11px; color: var(--secondary); }
.design-collection { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 36px; align-items: start; }
.design-feature { grid-column: 1/-1; }
.design-image { position: relative; overflow: hidden; aspect-ratio: .8; background: var(--soft); border-radius: 8px; }
.design-image > img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: width 400ms var(--ease),height 400ms var(--ease),left 400ms var(--ease),top 400ms var(--ease); }
.pending-image { background: color-mix(in srgb,var(--soft) 58%,transparent); }
.design-feature .design-image { aspect-ratio: 1.8; }
.crop { position: absolute; inset: 0; container-type: size; transition: transform 600ms var(--ease); }
.crop img { position: absolute; left: 50%; top: 50%; width: max(var(--crop-inline),var(--crop-block)); max-width: none; height: auto; transform: translate(var(--crop-x),var(--crop-y)); }
.project-caption { text-align: center; padding-top: 24px; }
.project-caption h3,.project-caption h4 { font-size: clamp(22px,2vw,30px); line-height: 1.2; letter-spacing: var(--heading-tracking); }
.project-caption .project-category { font-size: clamp(18px,1.55vw,23px); line-height: 1.3; min-height: 2.6em; text-wrap: balance; }
.project-caption p { font-size: 15px; color: var(--secondary); margin-top: 8px; }
.action-label { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 44px; padding: 12px 22px; font-size: 12px; line-height: 1.3; text-transform: uppercase; background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 8px; transition: background 180ms var(--ease),color 180ms var(--ease); cursor: pointer; }
.project-caption .action-label { margin-top: 24px; }
.pending-label { border-color: transparent; color: var(--secondary); cursor: default; }
a:hover .action-label,a:focus-visible .action-label,a.action-label:hover,a.action-label:focus-visible { color: var(--paper); background: var(--ink); }
/* The same centred 2.5% zoom, painted from source pixels on every frame. */
@media (hover:hover) { .design-project a:hover .design-image > img { width: 102.5%; height: 102.5%; left: -1.25%; top: -1.25%; } }
.engineering-collection { --chapter-gap: 130px; --secondary: var(--dark-secondary); --soft: var(--dark-soft); position: relative; margin-top: var(--chapter-gap); padding-block: clamp(64px,6vw,100px); background: var(--ink); color: var(--paper); }
.engineering-collection::before { content: ''; position: absolute; left: 0; right: 0; height: var(--chapter-gap); top: calc(-1 * var(--chapter-gap)); background: linear-gradient(to bottom,var(--paper),var(--ink)); pointer-events: none; }
.engineering-collection .action-label { background: var(--soft); color: var(--paper); }
.engineering-collection .action-label:hover,.engineering-collection .action-label:focus-visible { background: var(--paper); color: var(--ink); }
.engineering-collection :focus-visible { outline-color: var(--sage); }
.engineering-collection .project-threads path { stroke: var(--dark-line); }
.engineering-collection .map-node rect { stroke: #616b54; stroke-width: 1; vector-effect: non-scaling-stroke; }
.engineering-collection .map-node text { fill: var(--paper); }
.engineering-collection .map-core rect { fill: var(--sage); stroke: none; }
.engineering-collection .map-core text { fill: var(--ink); }
.engineering-project { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10%; align-items: center; padding-block: 48px; }
.engineering-project h3 { font-size: clamp(38px,4.4vw,65px); line-height: 1.12; letter-spacing: var(--heading-tracking); overflow-wrap: normal; }
.project-description { max-width: 380px; margin-top: 23px; color: var(--secondary); font-size: 15px; line-height: 1.6; }
.engineering-project .action-label { margin-top: 25px; }
.project-map { width: 100%; max-height: 310px; overflow: visible; font-family: inherit; }
.project-diagram { position: relative; min-width: 0; }
.native-labels .logic-node text,.native-labels .map-node text { visibility: hidden; }
.native-labels .logic-node > rect,.native-labels .map-node > rect:not(.signal-node) { visibility: hidden; }
.diagram-labels { position: absolute; inset: 0; pointer-events: none; }
.diagram-label { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 400; line-height: 1.06; letter-spacing: -.03em; white-space: nowrap; }
.diagram-label.is-core { color: var(--ink); }
.logic-labels .diagram-label { background: var(--ink); border: 1px solid #616b54; border-radius: 2px; }
.project-labels .diagram-label { background: var(--soft); border: 1px solid var(--page-line,#616b54); }
.project-labels .diagram-label.is-core { background: var(--sage); border: 0; }
.motion-ready .logic-labels { opacity: calc(var(--map-opacity,0) * var(--nodes-opacity,0)); }
@media (max-width:760px) { .labels-static .logic-labels { display: none; } }
.project-threads path { fill: none; stroke: #8f9b80; stroke-width: 1; vector-effect: non-scaling-stroke; }
.project-threads .return-thread { stroke-dasharray: 3 5; opacity: .6; }
.map-node rect { fill: var(--soft); }
.map-core rect { fill: #dee2d3; }
.map-node text { fill: var(--ink); text-anchor: middle; font-size: 23px; letter-spacing: -.03em; }
.studio { --studio-gap: 120px; padding-top: var(--studio-gap); background: linear-gradient(to bottom,var(--ink),var(--paper) var(--studio-gap),var(--paper)); }
.studio-intro { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10%; align-items: end; }
.studio h2 { font-size: clamp(44px,5.2vw,78px); line-height: 1.12; letter-spacing: var(--heading-tracking); }
.studio-intro > p { max-width: 330px; color: var(--secondary); font-size: 17px; line-height: 1.6; }
.people { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; padding-top: 65px; }
.people h3 { font-size: 44px; letter-spacing: var(--heading-tracking); line-height: 1.15; }
.people .person-role { font-size: 12px; margin-top: 12px; color: var(--ink); }
.people p { font-size: 15px; color: var(--secondary); margin-top: 25px; max-width: 340px; }
.people .action-label { margin-top: 25px; }
.contact { padding-top: 150px; padding-bottom: 80px; background: linear-gradient(to bottom,var(--ink),var(--paper) 150px,var(--paper)); }
.contact h2 { font-size: clamp(58px,10.5vw,155px); line-height: 1.1; letter-spacing: var(--heading-tracking); }
.contact-period { color: #939a86; }
.contact > p { margin-top: 45px; color: var(--secondary); font-size: 14px; }
.footer { padding-block: 28px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 25px; font-size: 11px; color: var(--secondary); }
.footer .wordmark { color: var(--ink); font-size: 24px; }
.footer button { text-transform: none; }
.experiment-controls { display: flex; align-items: baseline; flex-wrap: wrap; gap: 25px; margin-left: auto; }
.experiment-controls a,.experiment-controls button { min-height: 44px; display: inline-flex; align-items: center; }
.experiment-controls a:hover { color: var(--ink); }
.experiment-controls button { background: transparent; border: 0; padding: 0; color: inherit; font-size: 11px; cursor: pointer; }
.experiment-controls [hidden] { display: none; }
/* Preserve the 25px entrance and its timing while repainting live text. */
.reveal-ready [data-reveal] { position: relative; opacity: 0; top: 25px; transition: opacity 650ms var(--ease),top 650ms var(--ease); }
.reveal-ready [data-reveal].is-revealed { opacity: 1; top: 0; }

/* One continuous canvas. Colours follow scroll, rather than section edges. */
.tone-ready body { --secondary: var(--page-secondary,#6b6d63); --soft: var(--page-soft,#e9e7de); background: var(--page-background,var(--paper)); color: var(--page-foreground,var(--ink)); }
.tone-ready .engineering-collection { --secondary: var(--page-secondary); --soft: var(--page-soft); background: transparent; color: inherit; }
.tone-ready .engineering-collection::before { display: none; }
.tone-ready .studio { background: transparent; }
.tone-ready .contact { background: transparent; }
.tone-ready .action-label { transition: none; }
.tone-ready .engineering-collection .action-label { color: var(--page-foreground); }
.tone-ready .engineering-collection .action-label:hover,.tone-ready .engineering-collection .action-label:focus-visible { color: var(--ink); background: var(--paper); }
.tone-ready .engineering-collection :focus-visible { outline-color: var(--page-foreground); }
.tone-ready .selected-work :focus-visible,.tone-ready .studio :focus-visible,.tone-ready .contact :focus-visible,.tone-ready .footer :focus-visible { outline-color: var(--page-foreground); }
.tone-ready .engineering-collection .project-threads path { stroke: var(--page-line); }
.tone-ready .engineering-collection .map-node > rect:not(.signal-node) { stroke: var(--page-line); }
.tone-ready .engineering-collection .map-node text { fill: var(--page-foreground); }
.tone-ready .engineering-collection .map-core > rect:not(.signal-node) { stroke: none; }
.tone-ready .engineering-collection .map-core text { fill: var(--ink); }
.tone-ready .engineering-collection .signal-node { stroke: var(--page-line); }
.tone-ready .people .person-role,.tone-ready .footer .wordmark,.tone-ready .experiment-controls a:hover { color: var(--page-foreground); }
.tone-ready .contact-period { color: var(--page-secondary); }
.tone-ready .pulse-point,.tone-ready .pulse-halo { fill: var(--page-signal); }

/* A small luminous point, followed by a quiet node response. */
.author-info { display: flex; align-items: baseline; gap: 26px; min-width: 0; }
.flow-heading { justify-content: space-between; align-items: center; }
.signal-threads { pointer-events: none; }
.thread-signal { offset-distance: 0%; offset-rotate: 0deg; offset-anchor: 0px 0px; opacity: 0; animation: thread-signal var(--flow-cycle) linear infinite; animation-delay: var(--signal-delay,0s); animation-play-state: paused; }
.pulse-point { fill: var(--signal); }
.pulse-halo { fill: #dce6cd; opacity: .16; filter: blur(1.5px); }
.project-map .map-node .signal-node { fill: none; stroke: var(--sage); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: 0; pointer-events: none; animation: node-response var(--flow-cycle) linear infinite; animation-delay: var(--signal-delay,0s); animation-play-state: paused; }
.motion-ready:not(.page-inactive) .project-map.is-live .thread-signal,
.motion-ready:not(.page-inactive) .project-map.is-live .signal-node { animation-play-state: running; }
.motion-off .thread-signal,.motion-off .signal-node { display: none; }
@keyframes thread-signal {
  0% { offset-distance: 0%; opacity: 0; }
  1% { opacity: .75; }
  14% { offset-distance: 100%; opacity: .9; }
  16%,100% { offset-distance: 100%; opacity: 0; }
}
@keyframes node-response {
  0%,100% { opacity: 0; }
  3% { opacity: .38; }
  11%,99% { opacity: 0; }
}
@media (min-width:761px) and (max-width:1100px) {
  .engineering-project { grid-template-columns: 1fr 1.2fr; gap: 7%; }
  .engineering-project h3 { font-size: clamp(32px,4vw,44px); }
}

@media (max-width:760px) {
  .navigation { top: 16px; }
  .navigation nav { gap: 2px; }
  .navigation nav a { font-size: 11px; padding-inline: 8px; }
  .wordmark { font-size: 26px; }
  .motion-ready .scroll-story { height: 320svh; }
  .surface-headline,.union-headline { top: 35%; }
  .display-word { font-size: 30vw; }
  .the-word { font-size: 26px; margin-bottom: 9px; }
  .surface-caption,.back-caption { bottom: calc(100% + 24px); left: 0; right: auto; width: min(100%,var(--caption-width)); font-size: 17px; }
  .union-caption { bottom: 23%; left: var(--gutter); right: auto; width: min(calc(100% - 2 * var(--gutter)),var(--caption-width)); font-size: 17px; }
  .surface-footer { bottom: 78px; display: block; line-height: 1.8; font-size: 9px; }
  .surface-footer > span { display: block; }
  .story-hint { bottom: 20px; font-size: 10px; }
  .back-headline { top: 28%; }
  .back-headline .display-word { font-size: 23.5vw; }
  .logic-map { --map-center: 66%; width: min(94%,45svh); }
  html:not(.motion-ready) .backstage > .logic-map:not(.static-mobile-map) { display: none; }
  html:not(.motion-ready) .static-mobile-map { display: block; }
  .logic-node text { font-size: 27px; }
  .workflow-note { bottom: 77px; font-size: 9px; }
  .union-headline .display-word { font-size: 17vw; }
  .travelling-symbol span { font-size: 10px; }
  .collection-intro { margin-bottom: 55px; }
  .collection-intro h2 { margin-top: 18px; }
  .author-heading { margin-bottom: 25px; gap: 16px; }
  .author-heading h3 { font-size: 34px; }
  .design-collection { grid-template-columns: 1fr; gap: 40px; }
  .design-feature { grid-column: auto; }
  .design-feature .design-image,.design-image { aspect-ratio: .88; }
  .project-caption { padding-top: 17px; }
  .project-caption .project-category { min-height: 0; }
  .project-caption h4 { font-size: 22px; }
  .project-caption p { font-size: 14px; }
  .project-caption .action-label { padding-inline: 12px; font-size: 10px; }
  .engineering-collection { --chapter-gap: 80px; padding-block: 48px; }
  .engineering-collection .author-heading { display: block; }
  .engineering-collection .author-heading p { margin-top: 9px; }
  .engineering-collection .flow-heading { display: flex; gap: 16px; }
  .author-info { display: block; }
  .engineering-project { grid-template-columns: 1fr; gap: 35px; padding-block: 25px; }
  .engineering-project h3 { font-size: 40px; }
  .project-description { font-size: 14px; margin-top: 19px; }
  .project-map { max-width: 500px; }
  .studio { --studio-gap: 75px; }
  .studio-intro { grid-template-columns: 1fr; gap: 27px; }
  .studio h2 { font-size: 41px; }
  .studio-intro > p { font-size: 15px; }
  .people { grid-template-columns: 1fr; gap: 45px; padding-top: 40px; }
  .people h3 { font-size: 36px; }
  .contact { padding-top: 85px; padding-bottom: 45px; }
  .contact h2 { font-size: 12vw; }
  .contact > p { margin-top: 28px; }
  .footer { gap: 15px; }
  .experiment-controls { width: 100%; margin-left: 0; gap: 22px; }
}
@media (max-width:360px) { .navigation nav a { padding-inline: 6px; } .wordmark { font-size: 24px; } .project-caption h4 { font-size: 19px; } .studio h2 { font-size: 35px; } }
@media (max-width:760px) and (max-height:700px) { .back-headline { top: 24%; } .logic-map { --map-center: 69%; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation: none !important; transition: none !important; } }
@media (prefers-reduced-motion:reduce) { .thread-signal,.signal-node { display: none; } }
.motion-off { scroll-behavior: auto; }
.motion-off *, .motion-off *::before, .motion-off *::after { animation: none !important; transition: none !important; }