:root{--gutter:clamp(22px,4.6vw,88px);--text:#f2f1ed;--accent:#f2f1ed;--muted:#989a97}
.site-header{height:var(--header-height);padding-top:24px;padding-bottom:24px}
.home-navigation{will-change:opacity;gap:30px}
.home-slogan{font-size:clamp(20px,1.7vw,27px);line-height:1.16;letter-spacing:-.035em;font-weight:400}
.personal-links{font-size:18px}.personal-links:empty{display:none}
.edition{font-size:12px;border:0;padding:0;letter-spacing:.06em}

/* The same three links travel from the home dock into the project header. */
.project-rail{position:fixed;inset:0;z-index:31;pointer-events:none;overflow:visible}
.rail-project{position:absolute;top:0;left:0;pointer-events:auto;padding:0;display:flex;align-items:center;gap:15px;white-space:nowrap;transform-origin:0 0;height:44px;text-align:left;color:#dddeda;will-change:transform,font-size}
.rail-project:hover{color:#fff}.rail-project[aria-current=true] .rail-number{color:var(--accent)}
.rail-number{font:12px monospace;color:var(--muted);flex-shrink:0}
.rail-title{font-weight:400;letter-spacing:-.015em;white-space:normal;line-height:1.25}
.rail-meta{position:absolute;left:30px;top:42px;font:10px monospace;letter-spacing:.07em;color:var(--muted)}
.project-navigation{position:absolute;left:var(--gutter);right:var(--gutter);top:0;height:100%;display:flex;align-items:center;gap:38px;pointer-events:none;margin:0;opacity:0}
.nav-target{visibility:hidden;font-size:22px;white-space:nowrap;flex:none;display:flex;gap:15px;align-items:center}
.nav-target.current{font-size:32px;margin-right:auto}.nav-target small{font:12px monospace}
.nav-home{font-size:18px!important;pointer-events:auto;padding:10px 0 10px 25px;border-left:1px solid var(--line);white-space:nowrap}
.projects-section{position:relative;padding-bottom:62px}
.playground-invitation{position:absolute;bottom:19px;left:50%;transform:translateX(-50%);z-index:2;color:var(--muted);font-size:11px;letter-spacing:.07em;white-space:nowrap;display:flex;align-items:center;gap:16px}
.playground-invitation:hover{color:var(--accent)}.playground-invitation span{font-size:18px}
.gallery-arrow:active{background:#f2f1ed}

/* Monochrome outline circles; all motion comes from the physics. */
.playground-section{position:relative;z-index:2;min-height:760px;height:100svh;padding:calc(var(--header-height) + 24px) var(--gutter) 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;scroll-margin-top:0}
.playground-heading{display:flex;align-items:center;justify-content:space-between;gap:30px;font-size:11px;letter-spacing:.06em;color:var(--muted)}
.playground-heading,.physics-box,.playground-footer{width:100%;max-width:1120px}
.physics-box{position:relative;flex:none;height:clamp(340px,54svh,520px);border:1px solid #ffffff30;border-radius:24px;background:transparent;overflow:hidden;isolation:isolate}
.physics-caption{flex:none;display:flex;flex-direction:column;align-items:center;pointer-events:none;text-align:center;padding:8px 0}
.physics-caption p{font-size:11px;letter-spacing:.02em;margin:12px 0 0}
.physics-caption h2{font-size:clamp(28px,3.4vw,48px);font-weight:400;line-height:1.03;letter-spacing:-.055em;margin:0}
.merge-button{position:absolute;right:24px;bottom:20px;z-index:5;display:flex;align-items:center;gap:10px;padding:10px 0;background:transparent;font-size:12px;letter-spacing:.06em;color:#c4c5c1;transition:color .2s}
.merge-button:hover{color:#fff}.merge-button:disabled{opacity:.45;cursor:default}
.merge-button svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1}
.playground-footer{display:flex;justify-content:space-between;gap:24px;align-items:center;font-size:11px;color:var(--muted);letter-spacing:.02em}
.playground-footer button{font-size:11px;padding:7px 0;letter-spacing:.04em}
.physics-ball{position:absolute;left:0;top:0;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;touch-action:none;user-select:none;cursor:grab;will-change:transform;width:var(--diameter);height:var(--diameter);padding:6px;border:1px solid #ffffff42;color:#dbdcd8;background:transparent;box-shadow:none;transition:border-color .2s,color .2s}
.physics-ball:hover{border-color:#ffffffa6;color:#fff}.physics-ball:active{cursor:grabbing}.physics-ball:focus-visible{outline-offset:5px}
.physics-ball>strong{font-size:var(--ball-font);font-weight:400;line-height:1.15;letter-spacing:-.035em;pointer-events:none;white-space:normal;max-width:90%}
.physics-ball>small{display:none!important}
.physics-particle{position:absolute;left:0;top:0;width:2px;height:2px;border-radius:50%;background:#ddd;pointer-events:none;z-index:3}
.physics-burst{position:absolute;border-radius:50%;border:1px solid #ffffff30;pointer-events:none;z-index:1}


/* Fluid foreground and the spatial gallery underneath share the same surface. */
.hero{height:100svh;min-height:730px;padding:calc(var(--header-height) + 12px) var(--gutter) 0;display:flex;flex-direction:column;position:relative;z-index:2}
.hero-reveal{position:relative;flex:1;min-height:0;isolation:isolate;touch-action:pan-y;overflow:hidden}
.spatial-gallery{position:absolute;inset:0;z-index:0;background:#a9aba9;color:#242a29;overflow:hidden}
.space-caption{position:absolute;top:22px;left:25px;right:25px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.1em;z-index:1}
.space-tiles{position:absolute;inset:0;transform:translate3d(var(--space-x,0px),var(--space-y,0px),0);transition:transform 1.2s ease}
.space-tile{position:absolute;left:var(--x);top:var(--y);width:var(--w);padding:0;transform:rotate(var(--tilt));text-align:left;animation:space-drift 18s ease-in-out var(--delay) infinite alternate;transform-origin:center;will-change:transform}
.space-tile img{display:block;width:100%;height:auto;box-shadow:0 13px 30px #25292826;pointer-events:none}
.space-tile>span{display:block;font-size:10px;letter-spacing:.02em;margin-top:9px;line-height:1.4}
.space-tile:hover{z-index:6}.space-tile:hover img{box-shadow:0 18px 38px #25292840}
@keyframes space-drift{from{transform:translate3d(0,-8px,0) rotate(var(--tilt))}to{transform:translate3d(8px,12px,0) rotate(calc(var(--tilt) + 2deg))}}
.fluid-foreground{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;display:none}
.has-fluid .fluid-foreground{display:block}
.type-layer{position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--bg)}
.has-fluid .type-layer{opacity:0;z-index:-1}
.type-sheet{position:absolute;inset:0;display:flex;align-items:center;opacity:0;pointer-events:none}
.type-sheet.is-active{opacity:1}
.type-sheet p{width:100%;margin:0;font-size:clamp(80px,min(11.7vw,20.5svh),260px);font-weight:400;line-height:.9;letter-spacing:-.075em;text-transform:uppercase}
.type-sheet p>span{display:block;white-space:nowrap}
.type-sheet[data-phrase="0"] p{width:64%;font-size:clamp(70px,min(8.5vw,18svh),185px)}
.type-sheet[data-phrase="0"] p>span:nth-child(1){margin-left:12%}.type-sheet[data-phrase="0"] p>span:nth-child(3){margin-left:30%}
.type-sheet[data-phrase="1"] p>span:nth-child(1){margin-left:26%}.type-sheet[data-phrase="1"] p>span:nth-child(2){margin-left:12%}.type-sheet[data-phrase="1"] p>span:nth-child(3){margin-left:19%}
.type-sheet[data-phrase="2"] p{width:55%;margin-left:45%;font-size:clamp(65px,min(7.4vw,17svh),170px)}
.type-sheet[data-phrase="2"] p>span:nth-child(2){margin-left:12%}
.hero-reveal:not(.has-fluid).fallback-reveal .type-layer{mask-image:radial-gradient(circle 160px at var(--reveal-x) var(--reveal-y),transparent 60%,black 100%)}
.hero-reveal:not(.has-fluid).archive-open .type-layer{opacity:0}
.hero-controls{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0 28px;font-size:11px;letter-spacing:.07em;color:var(--muted)}
.hero-controls button{padding:8px 0;font-size:12px;letter-spacing:.04em;color:var(--text)}.hero-controls button span{margin-left:14px;font-size:20px;vertical-align:middle}.mobile-hint{display:none}
.project-dock{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;height:102px;flex:none}.project-dock>span{align-self:start;height:85px}
.hero-footnote{padding:0;height:42px;flex:none;align-items:center;font-size:10px;letter-spacing:.1em}.hero-footnote>span:last-child{display:block}.hero-footnote .motion-toggle{font-size:10px;letter-spacing:.07em}
.home-slogan{font-size:23px;letter-spacing:-.045em}
.rail-meta{font:12px/1.5 Arial,sans-serif;letter-spacing:0;white-space:normal;max-width:calc(100% - 35px);top:44px}
.rail-project{color:var(--text)}.nav-target.current{font-size:28px}.nav-target{font-size:19px}.project-navigation{gap:26px}.nav-home{font-size:14px!important}
.playground-heading{padding-top:24px}.playground-heading>span:last-child{font-size:15px;letter-spacing:-.015em}
.motion-off .space-tile,.motion-off .space-tiles{animation-play-state:paused;transition:none}
@media(min-width:701px) and (max-width:1100px){.nav-target.current{font-size:22px}.nav-target{font-size:16px}.project-navigation{gap:16px}.rail-project{gap:9px}.rail-meta{left:23px;font-size:11px}}
@media(max-width:700px){
 :root{--header-height:126px}
 .hero{min-height:730px;padding-top:var(--header-height)}
 .site-header{padding-top:20px;padding-bottom:20px}.home-slogan{font-size:20px}.home-navigation{gap:18px}
 .type-sheet p,.type-sheet[data-phrase="0"] p,.type-sheet[data-phrase="2"] p{width:100%;margin-left:0;font-size:15.7vw;line-height:.94;letter-spacing:-.075em}
 .type-sheet[data-phrase="0"] p>span:nth-child(1){margin-left:9%}.type-sheet[data-phrase="0"] p>span:nth-child(2){margin-left:0}.type-sheet[data-phrase="0"] p>span:nth-child(3){margin-left:33%}
 .type-sheet[data-phrase="1"] p>span:nth-child(1){margin-left:21%}.type-sheet[data-phrase="1"] p>span:nth-child(2){margin-left:3%}.type-sheet[data-phrase="1"] p>span:nth-child(3){margin-left:0}
 .type-sheet[data-phrase="2"] p>span:nth-child(1){margin-left:7%}.type-sheet[data-phrase="2"] p>span:nth-child(2){margin-left:21%}.type-sheet[data-phrase="2"] p>span:nth-child(3){margin-left:0;font-size:14vw}
 .space-caption{left:12px;right:12px;font-size:8px;gap:10px;top:14px}.space-tile{width:44%;left:calc(var(--x)*.68);top:var(--y)}.space-tile>span{font-size:8px}.space-tile:nth-child(3){top:38%}.space-tile:nth-child(5){top:57%}.space-tile:nth-child(6){top:79%}
 .hero-controls{padding:18px 0 22px;font-size:10px}.reveal-hint{font-size:0}.mobile-hint{display:inline;font-size:10px}.hero-controls button{font-size:10px}.hero-controls button span{font-size:17px;margin-left:8px}
 .project-dock{grid-template-columns:.8fr 1.15fr 1.35fr;gap:10px;height:112px}.rail-project{gap:5px;height:44px;align-items:center}.rail-number{font-size:9px}.rail-title{line-height:1.16}.rail-meta{left:14px;top:49px;font-size:10px;line-height:1.35;max-width:calc(100% - 14px)}.hero-footnote{font-size:9px;height:40px}.hero-footnote .motion-toggle{font-size:9px}
 .project-navigation{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:1fr 1fr;align-items:center;gap:0 12px;padding:15px 0;left:var(--gutter);right:var(--gutter)}
 .nav-target.current{grid-column:1/3;grid-row:1;font-size:20px;gap:5px}.nav-target{font-size:12px;gap:5px;grid-row:2}.nav-target small{font-size:9px}.nav-home{grid-column:3;grid-row:2;font-size:12px!important;border:0;padding:8px 0}.nav-target:nth-child(2){grid-column:1}.nav-target:nth-child(3){grid-column:2}
 .playground-section{min-height:730px;padding-top:calc(var(--header-height) + 20px);gap:16px}.playground-heading{font-size:9px;gap:15px}.playground-heading>span:last-child{font-size:11px}.physics-box{height:clamp(320px,49svh,420px);border-radius:18px}
 .physics-caption p{font-size:9px;margin:12px 0 0}.physics-caption h2{font-size:29px}.merge-button{right:17px;bottom:14px;font-size:10px;gap:7px}.merge-button svg{width:23px;height:23px}.playground-footer{font-size:9px}.playground-footer button{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.space-tile{animation:none}.space-tiles{transition:none}.rail-project{will-change:auto}}