@font-face{font-family:Space;src:url('assets/SpaceGrotesk.ttf') format('truetype');font-weight:300 700;font-display:swap}
:root{--black:#000;--white:#fff;--gray:#e5e5e5}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--white);color:var(--black);font-family:Space,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid currentColor;outline-offset:6px}::selection{background:#000;color:#fff}img{display:block;max-width:100%;height:auto}.header{min-height:100px;padding:24px 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #000;gap:30px}.brand{width:200px}.header nav{display:flex;gap:36px;font-size:14px}.header nav a{padding:12px 0}.header nav span{font-size:10px;vertical-align:super}.origin,.eyebrow,.corner-label,.symbol-caption,.project-category,.project-number,.project-footnote,footer>span{font-size:11px;letter-spacing:.07em;font-weight:500}.hero{display:grid;grid-template-columns:1.15fr 1fr;min-height:640px}.hero-copy{padding:36px 5% 45px 7%;display:flex;flex-direction:column;border-right:1px solid #000}.eyebrow{display:flex;justify-content:space-between;gap:16px;line-height:1.5}h1{font-size:clamp(58px,6.4vw,102px);line-height:.98;letter-spacing:-.065em;font-weight:500;margin:76px 0 70px}.outlined{-webkit-text-stroke:1px #000;color:transparent}.hero-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:25px;margin-top:auto}.hero-bottom p{font-size:17px;line-height:1.5;margin:0}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:38px;padding:18px 22px;background:#000;color:#fff;border:1px solid #000;font-size:13px;transition:background .2s,color .2s}.button:hover{background:#fff;color:#000}.button span{font-size:22px;line-height:1}.hero-symbol{position:relative;display:flex;flex-direction:column;justify-content:center;padding:36px 7%}.corner-label{position:absolute;top:38px;left:8%}.hero-symbol>img{width:100%;transform:rotate(-7deg);animation:arrive 1s ease-out both}.symbol-caption{display:flex;justify-content:space-between;position:absolute;bottom:35px;left:8%;right:8%;font-size:9px}.ticker{padding:16px 0;background:#000;color:#fff;overflow:hidden;font-size:14px;letter-spacing:.06em;white-space:nowrap}.ticker>div{width:max-content;animation:ticker 40s linear infinite}.section{padding:90px 4%}.section-heading{display:grid;grid-template-columns:1fr 1.6fr 1fr;align-items:start;gap:30px;margin-bottom:64px}.section-heading h2{font-size:clamp(32px,3.4vw,50px);line-height:1.07;font-weight:500;letter-spacing:-.045em;margin:0}.section-heading p{font-size:14px;line-height:1.6;margin:4px 0 0}.project-list{border-top:1px solid #000}.project{width:100%;display:grid;grid-template-columns:.25fr 1.3fr 1fr .9fr 40px;align-items:center;text-align:left;background:#fff;border:0;border-bottom:1px solid #000;min-height:140px;gap:20px;padding:25px 12px;transition:background .2s,padding .2s}.project:hover{background:var(--gray);padding-left:22px}.project-name{font-size:clamp(34px,3.8vw,58px);letter-spacing:-.05em;font-weight:500}.project-description{font-size:14px;line-height:1.5}.project-category{font-size:9px}.project-arrow{font-size:36px;font-weight:300;transition:transform .2s}.project:hover .project-arrow{transform:translate(4px,-4px)}.project-footnote{display:flex;justify-content:space-between;margin-top:24px;font-size:9px}.manifesto{background:#000;color:#fff;display:grid;grid-template-columns:1fr 1.25fr;gap:12%;padding-top:100px;padding-bottom:100px}.manifesto-left{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}.manifesto-left>img{width:78%;max-width:320px;margin:55px 0}.manifesto-copy h2{font-size:clamp(48px,5.3vw,80px);line-height:1.02;letter-spacing:-.055em;font-weight:400;margin:0 0 38px}.manifesto-copy h2 em{font-style:normal;color:#000;-webkit-text-stroke:1px #fff}.manifesto-copy>p{max-width:420px;font-size:16px;line-height:1.7;color:#ddd}.principles{display:grid;margin-top:40px;border-top:1px solid #555;max-width:420px}.principles span{padding:17px 0;border-bottom:1px solid #555;font-size:13px}.closing{padding-top:110px;padding-bottom:110px}.closing h2{font-size:clamp(44px,6.3vw,94px);font-weight:500;letter-spacing:-.06em;line-height:1.05;margin:35px 0 45px}footer{margin:0 4%;border-top:1px solid #000;padding:28px 0;display:flex;align-items:center;justify-content:space-between;gap:24px}footer>span{font-size:9px}footer>a{font-size:12px}.skip{position:fixed;top:-100px;left:15px;z-index:20;background:#000;color:#fff;padding:15px}.skip:focus{top:15px}dialog{width:min(760px,calc(100% - 32px));max-height:calc(100svh - 40px);overflow:auto;padding:36px;border:1px solid #000;background:#fff;color:#000}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:60px}.close{border:0;border-bottom:1px solid #000;background:transparent;padding:8px 0;font-size:12px}.dialog-top .eyebrow{font-size:9px}dialog h2{font-size:clamp(48px,8vw,80px);font-weight:500;letter-spacing:-.06em;margin:12px 0 24px}#dialog-description{font-size:22px;line-height:1.4;max-width:560px}.dialog-detail{display:grid;grid-template-columns:100px 1fr;border-top:1px solid #000;margin:35px 0;padding-top:24px;gap:20px}.dialog-detail>span{font-size:10px}.dialog-detail p{margin:0;line-height:1.7;font-size:15px}body.modal-open{overflow:hidden}@keyframes ticker{to{transform:translateX(-50%)}}@keyframes arrive{from{transform:translateY(20px) rotate(-10deg)}to{transform:translateY(0) rotate(-7deg)}}
@media(min-width:1600px){body{max-width:1800px;margin:auto;border-left:1px solid;border-right:1px solid}}
@media(max-width:900px){.origin{display:none}.hero{min-height:560px}.hero-copy{padding-left:8%}.hero-copy .eyebrow>span:last-child{display:none}h1{font-size:64px;margin:70px 0 50px}.corner-label{font-size:9px}.symbol-caption{flex-direction:column;gap:5px}.section-heading{grid-template-columns:.8fr 1.5fr}.section-heading p{grid-column:2}.project{grid-template-columns:25px 1.1fr 1fr 30px}.project-category{display:none}.manifesto{gap:8%}.manifesto-copy h2{font-size:58px}}
@media(max-width:600px){.header{min-height:82px;padding:18px 6%;gap:18px}.brand{width:155px}.header nav{gap:18px;font-size:12px}.header nav span{display:none}.hero{grid-template-columns:1fr}.hero-copy{border-right:0;border-bottom:1px solid #000;padding:28px 6% 38px}h1{font-size:clamp(50px,13vw,78px);margin:45px 0 35px}.hero-bottom p{font-size:15px}.hero-symbol{min-height:360px;padding:40px 20% 45px}.hero-symbol>img{max-height:290px}.corner-label{top:24px;left:6%}.symbol-caption{bottom:22px;left:6%;right:6%;flex-direction:row;font-size:8px}.ticker{font-size:11px;padding:14px 0}.section{padding:58px 6%}.section-heading{grid-template-columns:1fr;gap:24px;margin-bottom:36px}.section-heading p{grid-column:1;font-size:13px}.section-heading h2{font-size:38px}.project{grid-template-columns:22px 1fr 24px;gap:12px;min-height:134px;padding:23px 0}.project-name{font-size:39px}.project-arrow{grid-column:3;grid-row:1;font-size:30px}.project-description{grid-column:2;grid-row:2;font-size:12px}.project-number{align-self:center}.project-footnote{flex-direction:column;gap:10px;font-size:8px}.manifesto{grid-template-columns:1fr;gap:45px}.manifesto-left{flex-direction:row;align-items:center}.manifesto-left img{width:105px;margin:0}.manifesto-left>.eyebrow:last-child{display:none}.manifesto-copy h2{font-size:58px}.manifesto-copy>p{font-size:15px}.closing h2{font-size:46px}.closing .button{font-size:12px;gap:20px}footer{margin:0 6%;flex-wrap:wrap;padding:24px 0}footer>span{order:3;width:100%;font-size:8px}footer>img{width:125px}dialog{padding:24px}.dialog-top{margin-bottom:36px}.dialog-detail{grid-template-columns:1fr;gap:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
.skip:not(:focus){clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap}
/* Theme surfaces are independent of the approved black symbol. */
:root{--surface:#fff;--ink:#000;--hover:#e5e5e5;color-scheme:light}
:root[data-theme="dark"]{--surface:#000;--ink:#fff;--hover:#191919;color-scheme:dark}
body{background:var(--surface);color:var(--ink)}
.header,.hero-copy,.project-list,footer{border-color:var(--ink)}
.outlined{-webkit-text-stroke-color:var(--ink)}
.project,dialog{background:var(--surface);color:var(--ink);border-color:var(--ink)}
.project:hover{background:var(--hover)}
.close,.dialog-detail{border-color:var(--ink)}
.button{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.button:hover{background:var(--surface);color:var(--ink)}
.header-tools{display:flex;align-items:center;gap:28px}.theme-picker{display:flex;border:1px solid var(--ink);padding:3px;gap:3px}
.theme-picker button{background:transparent;border:0;padding:10px 13px;font-size:11px;min-height:40px}
.theme-picker button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.theme-picker button:focus-visible{outline-offset:0;outline-width:2px}
.motion-toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 4%;border-top:1px solid var(--ink);font-size:9px;letter-spacing:.07em;gap:20px}
.motion-toolbar button{background:none;border:0;text-decoration:underline;text-underline-offset:4px;font-size:11px;padding:12px 0;min-height:44px}.motion-toolbar button:disabled{opacity:1;text-decoration:none;cursor:default}
:root[data-theme="dark"] .manifesto{border-top:1px solid #555;border-bottom:1px solid #555}
:root[data-theme="dark"] .ticker{background:#fff;color:#000}
::selection{background:var(--ink);color:var(--surface)}
.hero-symbol>img{animation:sato-sway 8s ease-in-out infinite;transform-origin:50% 65%;will-change:transform}
@keyframes sato-sway{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-12px) rotate(-3deg)}}
.reveal{transform:translateY(24px);transition:transform .75s cubic-bezier(.2,.7,.2,1)}
.reveal.in-view{transform:translateY(0)}
.project.reveal{transition:transform .7s cubic-bezier(.2,.7,.2,1),background .2s,padding .2s}
.project-name{display:inline-block;transition:transform .3s}.project:hover .project-name{transform:translateX(6px)}
.button span{transition:transform .25s}.button:hover span{transform:translate(3px,-3px)}
dialog[open]{animation:dialog-enter .3s ease-out}
@keyframes dialog-enter{from{transform:translateY(18px) scale(.98)}to{transform:translateY(0) scale(1)}}
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important;transition:none!important}
.motion-paused .reveal{transform:none}.motion-paused{scroll-behavior:auto}
@media(min-width:601px) and (max-width:1100px){.header{gap:20px}.header-tools{gap:14px}.header-tools .origin{display:none}.header nav{gap:24px}.brand{width:180px}}
@media(max-width:600px){.header{display:grid;grid-template-columns:1fr auto;gap:14px 20px}.brand{width:165px}.header nav{grid-row:2;grid-column:1/-1;justify-content:space-between;border-top:1px solid var(--ink);padding-top:5px}.header nav a{min-height:44px;display:flex;align-items:center}.header-tools{gap:0}.theme-picker button{padding:8px 10px;font-size:10px}.hero-copy{border-color:var(--ink)}.hero-symbol>img{width:100%;height:auto;object-fit:contain}.hero-symbol{padding:40px 16% 45px}.motion-toolbar{padding-left:6%;padding-right:6%;font-size:8px}.project:focus-visible{outline-offset:-3px}.manifesto-copy h2{font-size:clamp(43px,13vw,58px)}.closing h2{font-size:clamp(37px,11.5vw,46px)}.symbol-caption{font-size:7px}.button{max-width:100%}}
@media(max-width:360px){.brand{width:140px}.header{gap:12px}.theme-picker button{padding:8px}.motion-toolbar{gap:10px}.motion-toolbar>span{font-size:7px}}
@media(prefers-reduced-motion:reduce){.reveal{transform:none}.hero-symbol>img{will-change:auto}}

/* Interactive 3D emblem belongs to the main hero. */
.hero-symbol{padding:72px 4% 110px;overflow:hidden}
#hero-3d{position:relative;width:100%;height:420px;min-width:0}
#hero-3d canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab}
#hero-3d canvas:active{cursor:grabbing}
.sato-fallback{width:100%;height:100%;object-fit:contain;animation:none;transform:none}
#hero-3d.ready .sato-fallback{visibility:hidden}
.sato-controls{position:absolute;bottom:62px;left:0;right:0;display:flex;justify-content:center;gap:8px}
.sato-controls button{border:1px solid var(--ink);background:var(--surface);color:var(--ink);font-size:10px;padding:10px 14px;min-width:44px;min-height:44px}
.sato-controls button:hover{background:var(--hover)}
@media(max-width:900px) and (min-width:601px){#hero-3d{height:350px}.hero-symbol{padding:70px 2% 110px}}
@media(max-width:600px){.hero-symbol{min-height:430px;padding:50px 4% 110px}#hero-3d{height:300px}.sato-controls{bottom:59px}}

/* Sliding appearance switch: tap, swipe, or keyboard. */
.theme-picker{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;isolation:isolate;width:138px;min-height:46px;padding:3px;gap:0;border:1px solid var(--ink);border-radius:999px;background:var(--surface);touch-action:pan-y;user-select:none}
.theme-picker>span:not(.theme-thumb){position:relative;z-index:1;font-size:11px;text-align:center;pointer-events:none;transition:color .22s}
.theme-thumb{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--ink);transition:transform .25s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.theme-picker[aria-checked="true"] .theme-thumb{transform:translateX(100%)}
.theme-picker[aria-checked="false"]>span:nth-child(2),.theme-picker[aria-checked="true"]>span:nth-child(3){color:var(--surface)}
.theme-picker[aria-checked="false"]>span:nth-child(3),.theme-picker[aria-checked="true"]>span:nth-child(2){color:var(--ink)}
#hero-3d canvas,#hero-3d canvas:active{cursor:default;pointer-events:none}
.hero-symbol{padding-bottom:72px}
@media(max-width:600px){.theme-picker{width:122px}.hero-symbol{padding-bottom:65px}}
@media(max-width:360px){.theme-picker{width:114px}}
@media(prefers-reduced-motion:reduce){.theme-picker>span{transition:none}}

/* Motion rhythm: quiet entrances, responsive details, smooth theme changes. */
:root{--ease-fluid:cubic-bezier(.16,1,.3,1)}
body,.header,.hero-copy,.project-list,footer,.theme-picker,.theme-thumb,.ticker{transition:background-color .55s ease,color .55s ease,border-color .55s ease}
.outlined{transition:-webkit-text-stroke-color .55s ease}
.theme-thumb{transition:transform .5s var(--ease-fluid),background-color .55s ease}
.reveal{opacity:0;transform:translate3d(0,30px,0);transition:opacity .85s var(--ease-fluid) var(--reveal-delay,0ms),transform 1.1s var(--ease-fluid) var(--reveal-delay,0ms)}
.reveal.in-view{opacity:1;transform:translate3d(0,0,0)}
.hero-copy h1.reveal{transform:translate3d(0,36px,0);transition-duration:1s,1.3s}
.hero-copy h1.in-view{transform:none}
#hero-3d.reveal{transform:translate3d(0,20px,0) scale(.94);transition-duration:1s,1.5s}
#hero-3d.in-view{transform:none}
.project.reveal{transition:opacity .85s var(--ease-fluid) var(--reveal-delay,0ms),transform 1s var(--ease-fluid) var(--reveal-delay,0ms),background-color .45s ease,color .45s ease,border-color .45s ease}
.project{position:relative;isolation:isolate;overflow:hidden}
.project::before{content:'';position:absolute;inset:0;background:var(--hover);transform:scaleX(0);transform-origin:left;transition:transform .65s var(--ease-fluid);z-index:-1}
.project:hover{padding-left:12px;background:var(--surface)}
.project:is(:hover,:focus-visible)::before{transform:scaleX(1)}
.project-name,.project-description,.project-category,.project-number{transition:transform .65s var(--ease-fluid)}
.project-arrow{transition:transform .65s var(--ease-fluid)}
.project:is(:hover,:focus-visible) .project-name{transform:translateX(12px)}
.project:is(:hover,:focus-visible) .project-description{transform:translateX(6px)}
.project:is(:hover,:focus-visible) .project-arrow{transform:translate(5px,-5px) rotate(5deg)}
.button{transition:background-color .4s ease,color .4s ease,translate .5s var(--ease-fluid),box-shadow .5s var(--ease-fluid)}
.button:is(:hover,:focus-visible){translate:0 -3px;box-shadow:0 6px 0 -4px var(--ink)}
.button:active{translate:0 0;box-shadow:none}
.button span{transition:transform .55s var(--ease-fluid)}
.button:is(:hover,:focus-visible) span{transform:translate(4px,-4px)}
.header nav a,footer>a{position:relative}
.header nav a::after,footer>a::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-fluid)}
.header nav a:is(:hover,:focus-visible)::after,footer>a:is(:hover,:focus-visible)::after{transform:scaleX(1);transform-origin:left}
.brand img{transition:transform .65s var(--ease-fluid)}
.brand:hover img{transform:translateY(-2px) rotate(-2deg)}
.principles span{position:relative}
.principles span::after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:1px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease-fluid) var(--reveal-delay,0ms)}
.principles span.in-view::after{transform:scaleX(1)}
dialog[open]{animation:dialog-fluid .5s var(--ease-fluid) both}
dialog[open]::backdrop{animation:backdrop-fluid .4s ease both}
dialog[open]>:not(.dialog-top){animation:dialog-content .65s var(--ease-fluid) .08s both}
@keyframes dialog-fluid{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}
@keyframes backdrop-fluid{from{opacity:0}to{opacity:1}}
@keyframes dialog-content{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@supports(animation-timeline:view()){
  .manifesto-left>img{animation:emblem-drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes emblem-drift{from{translate:0 18px;rotate:-4deg}to{translate:0 -18px;rotate:4deg}}
}
@media(max-width:600px){.project:hover{padding-left:0}.project:is(:hover,:focus-visible) .project-name{transform:translateX(5px)}.reveal{transform:translate3d(0,20px,0)}}
/* Pause reveals in their readable end state, including open dialogs. */
.motion-paused .reveal{opacity:1!important;transform:none!important}
.motion-paused dialog,.motion-paused dialog>*,.motion-paused dialog::backdrop{animation:none!important;opacity:1!important;translate:none!important}
.motion-paused .manifesto-left>img{animation:none!important;translate:none;rotate:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}.manifesto-left>img{translate:none;rotate:none}.button{translate:none!important}}

/* Scroll entrances and exits replay from either edge of the viewport. */
.reveal:not(.in-view){transform:translate3d(0,var(--reveal-y,24px),0);transition-delay:0ms;transition-duration:.45s,.65s}
.hero-copy h1.reveal:not(.in-view){transform:translate3d(0,var(--reveal-y,24px),0)}
#hero-3d.reveal:not(.in-view){transform:translate3d(0,var(--reveal-y,24px),0) scale(.96)}
.reveal:focus-within{opacity:1;transform:none}

/* Liquid motion: continuous progress with a short, frame-rate-independent lag. */
:root{--ease-fluid:cubic-bezier(.22,1,.36,1)}
.reveal.liquid-reveal,.hero-copy h1.reveal.liquid-reveal,#hero-3d.reveal.liquid-reveal{opacity:var(--scroll-opacity,1);transform:translate3d(0,var(--scroll-y,0px),0);transition:background-color .65s ease,color .65s ease,border-color .65s ease;transition-delay:0s}
.button.liquid-reveal{transition:background-color .5s ease,color .5s ease,translate .7s var(--ease-fluid),box-shadow .7s var(--ease-fluid)}
.theme-picker{background:color-mix(in srgb,var(--surface) 76%,transparent);border-color:color-mix(in srgb,var(--ink) 20%,transparent);box-shadow:inset 0 1px 0 #ffffff70,0 3px 12px #00000008;-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
.theme-thumb{box-shadow:inset 0 1px 1px #ffffff35,0 2px 6px #00000020;transition:transform .65s cubic-bezier(.22,1.12,.36,1),background-color .65s ease}
.project::before{transition-duration:.8s}
.project-name,.project-description,.project-arrow{transition-duration:.8s}
.button:is(:hover,:focus-visible){translate:0 -2px;box-shadow:0 7px 16px -12px var(--ink)}
dialog{border-radius:24px;background:color-mix(in srgb,var(--surface) 90%,transparent);border-color:color-mix(in srgb,var(--ink) 18%,transparent);box-shadow:inset 0 1px 0 #ffffff55,0 28px 100px #00000028;-webkit-backdrop-filter:blur(24px) saturate(130%);backdrop-filter:blur(24px) saturate(130%)}
dialog[open]{animation-duration:.65s}
dialog[open]::backdrop{animation-duration:.55s;background:#0006;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
dialog[open]>:not(.dialog-top){animation-duration:.75s;animation-delay:.06s}
@keyframes dialog-fluid{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.liquid-reveal:focus-within{opacity:1!important;transform:none!important}
.motion-paused .liquid-reveal{opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){.liquid-reveal{opacity:1!important;transform:none!important}}