:root {
  --concrete: #e7e9e6;
  --carbon: #121514;
  --graphite: #6f7773;
  --moss: #567460;
  --white: #f6f8f4;
  --line: rgba(18, 21, 20, 0.19);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
html, body { margin: 0; min-height: 100%; overflow-x: clip; }
body {
  background: var(--concrete);
  color: var(--carbon);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

.noise {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .065;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--carbon);
  color: var(--white);
  transition: clip-path 1.15s var(--ease) .2s, visibility 0s 1.4s;
  clip-path: inset(0 0 0 0);
}
.boot.is-finished { clip-path: inset(0 0 100% 0); visibility: hidden; }
.boot-mark {
  position: absolute;
  top: 50%; left: 50%;
  width: 92px; height: 92px;
  border: 1px solid rgba(255,255,255,.38);
  transform: translate(-50%,-70%);
  display: grid; place-items: center;
}
.boot-mark span { font-size: 42px; font-weight: 300; letter-spacing: -.12em; }
.boot-mark i { position: absolute; width: 145%; height: 1px; background: rgba(255,255,255,.25); transform: rotate(-45deg); }
.boot-line { position: absolute; top: calc(50% + 65px); width: 180px; height: 1px; background: rgba(255,255,255,.2); overflow: hidden; }
.boot-line span { display: block; height: 100%; background: var(--white); animation: loading 1.2s var(--ease) forwards; }
.boot p { position: absolute; top: calc(50% + 85px); font: 9px/1.2 SFMono-Regular,Consolas,monospace; letter-spacing: .22em; opacity: .65; }
@keyframes loading { from { transform: translateX(-100%); } to { transform: translateX(0); } }

.nav {
  position: fixed;
  top: 0; left: 0;
  z-index: 80;
  width: 100%;
  height: 78px;
  padding: 16px 3vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: var(--carbon);
  mix-blend-mode: multiply;
}
.brand { display: flex; align-items: center; gap: 10px; justify-self: start; }
.brand svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.1; }
.brand span { font-size: 8px; line-height: 1.05; font-weight: 700; letter-spacing: .08em; }
.nav-center { display: flex; gap: 34px; font: 8px/1 SFMono-Regular,Consolas,monospace; letter-spacing: .15em; }
.nav-target {
  justify-self: end;
  display: flex; align-items: center; gap: 14px;
  font: 8px/1 SFMono-Regular,Consolas,monospace;
  letter-spacing: .13em;
}
.nav-target i {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid currentColor;
  font: normal 15px/1 sans-serif;
  transition: background .35s, color .35s, transform .35s var(--ease);
}
.nav-target:hover i { background: var(--carbon); color: var(--white); transform: rotate(90deg); }

.cursor {
  position: fixed;
  z-index: 150;
  left: 0; top: 0;
  width: 34px; height: 34px;
  border: 1px solid rgba(18,21,20,.55);
  transform: translate(-50%,-50%);
  pointer-events: none;
  transition: width .25s, height .25s, border-color .25s;
}
.cursor::before,.cursor::after { content:""; position:absolute; background: currentColor; opacity:.5; }
.cursor::before { width: 5px; height: 1px; left: 14px; top: 16px; }
.cursor::after { width: 1px; height: 5px; left: 16px; top: 14px; }
.cursor.is-hover { width: 58px; height: 58px; border-color: var(--moss); }

.build-theatre { height: 720vh; position: relative; }
.build-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--concrete);
  isolation: isolate;
  transition: background-color .8s ease, color .8s ease;
}
.build-stage.is-night { background: #171c1a; color: var(--white); }
#architecture { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.grid-overlay { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.grid-overlay::before,.grid-overlay::after,
.grid-overlay i { content:""; position: absolute; background: var(--line); transition: background .7s; }
.is-night .grid-overlay::before,.is-night .grid-overlay::after,.is-night .grid-overlay i { background: rgba(246,248,244,.1); }
.grid-overlay::before { width: 1px; height: 100%; left: 3vw; }
.grid-overlay::after { width: 1px; height: 100%; right: 3vw; }
.grid-overlay i { width: 1px; height: 100%; top: 0; }
.grid-overlay i:nth-child(1){left:19%;}.grid-overlay i:nth-child(2){left:35%;}.grid-overlay i:nth-child(3){left:50%;}.grid-overlay i:nth-child(4){left:65%;}.grid-overlay i:nth-child(5){left:81%;}
.grid-overlay i:nth-child(6){left:0;top:calc(100% - 48px);width:100%;height:1px;}

.hero-lockup {
  position: absolute;
  z-index: 5;
  left: 3vw; top: 25%;
  transition: transform .3s linear, opacity .3s linear;
  pointer-events: none;
}
.chapter-tag,.chapter-kicker,.principles-head span,.contact-kicker {
  margin: 0 0 24px;
  font: 8px/1 SFMono-Regular,Consolas,monospace;
  font-weight: 600;
  letter-spacing: .22em;
}
.hero-lockup h1 {
  margin: 0;
  font-size: clamp(66px, 11.6vw, 188px);
  font-weight: 300;
  letter-spacing: -.075em;
  line-height: .72;
}
.hero-lockup h1 span { color: transparent; -webkit-text-stroke: 1px var(--carbon); }
.is-night .hero-lockup h1 span { -webkit-text-stroke-color: var(--white); }
.hero-lockup > p:last-child { margin: 34px 0 0 2px; max-width: 320px; font-size: 13px; line-height: 1.45; }

.chapter-copy {
  position: absolute;
  z-index: 5;
  left: 5.5vw;
  top: 50%;
  width: min(500px, 38vw);
  opacity: 0;
  transform: translateY(55px);
  transition: color .7s;
  pointer-events: none;
}
.chapter-copy.chapter-right { left: auto; right: 5vw; }
.chapter-copy.chapter-center { left: 50%; top: 18%; width: 70vw; text-align: center; transform: translate(-50%,55px); }
.chapter-index { position: absolute; left: -34px; top: 4px; font: 8px/1 SFMono-Regular,Consolas,monospace; }
.chapter-copy h2 { margin: 0; font-size: clamp(48px, 6.4vw, 108px); font-weight: 300; line-height: .88; letter-spacing: -.065em; }
.chapter-body { margin: 28px 0 0; width: min(310px,100%); font-size: 12px; line-height: 1.5; }
.chapter-right .chapter-body { margin-left: auto; }
.chapter-center .chapter-index { left: calc(50% - 120px); }

.stage-readout {
  position: absolute; z-index: 6;
  bottom: 19px; left: 3vw; right: 3vw;
  display: grid;
  grid-template-columns: 120px 42px 1fr;
  gap: 18px; align-items: center;
  font: 7px/1 SFMono-Regular,Consolas,monospace;
  letter-spacing: .13em;
}
.readout-number { font-size: 10px; color: var(--moss); }
.readout-rail { height: 1px; background: currentColor; opacity: .35; }
.readout-rail i { display:block; width:100%; height:2px; margin-top:-1px; background:var(--moss); transform-origin:left; transform:scaleX(0); }
.side-coordinate { position:absolute; z-index:6; right:2.5vw; top:22%; display:flex; flex-direction:column; align-items:center; gap:10px; font:7px/1 SFMono-Regular,Consolas,monospace; letter-spacing:.12em; writing-mode:vertical-rl; }
.side-coordinate i { width:1px; height:90px; background:currentColor; opacity:.3; }
.scroll-note { position:absolute; z-index:6; right:7vw; bottom:62px; margin:0; font:7px/1 SFMono-Regular,Consolas,monospace; letter-spacing:.14em; }
.scroll-note span { display:inline-block; margin-left:8px; animation:nudge 1.6s var(--ease) infinite; }
@keyframes nudge { 50% { transform:translateY(6px); } }

.register { position: relative; background: var(--carbon); color: var(--white); padding: 150px 3vw 7vw; }
.register-intro { min-height: 76vh; display:grid; grid-template-columns: 1fr 2fr 1fr; align-items:start; border-top:1px solid rgba(255,255,255,.23); padding-top:28px; }
.register-intro > p,.register-intro > span { margin:0; font:8px/1 SFMono-Regular,Consolas,monospace; letter-spacing:.18em; }
.register-intro > span { justify-self:end; }
.register-intro h2 { margin:-8px 0 0; font-size:clamp(65px,9.4vw,150px); font-weight:300; line-height:.83; letter-spacing:-.07em; }
.project { position:relative; margin-bottom:28vh; }
.project-visual { height: min(72vw, 860px); position:relative; overflow:hidden; background:#c7ceca; transform-origin:center; }
.project-meta { display:grid; grid-template-columns:1fr 2fr 1fr 38px; align-items:start; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.25); }
.project-meta span,.project-meta p { margin:0; font:8px/1.4 SFMono-Regular,Consolas,monospace; letter-spacing:.13em; }
.project-meta h3 { margin:0; font-size:clamp(25px,3.2vw,52px); font-weight:300; letter-spacing:-.045em; }
.project-meta i { justify-self:end; width:34px;height:34px;border:1px solid currentColor;display:grid;place-items:center;font-style:normal; }

.project-one .project-visual { background:linear-gradient(180deg,#adb7b3 0 52%,#747d78 52%); }
.project-sun { position:absolute; width:15vw;height:15vw;border-radius:50%;background:#d9dcd5;left:12%;top:12%;filter:blur(2px); }
.mass { position:absolute; bottom:18%; background:#262b29; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.mass-a { width:57%;height:30%;left:10%; clip-path:polygon(0 15%,100% 0,100% 100%,0 100%); }
.mass-b { width:24%;height:48%;left:60%;background:#373d3a;clip-path:polygon(0 10%,100% 0,100% 100%,0 100%); }
.project-glass { position:absolute; width:37%;height:22%;left:27%;bottom:23%;border:1px solid rgba(235,244,239,.7);background:linear-gradient(135deg,rgba(201,221,211,.72),rgba(55,66,61,.45)); }

.project-two .project-visual { background:linear-gradient(180deg,#26302d 0 64%,#121716 64%); }
.project-moon { position:absolute;width:16vw;height:16vw;border-radius:50%;background:#a9b4ae;right:15%;top:12%;box-shadow:0 0 90px rgba(199,210,202,.18); }
.tower { position:absolute;bottom:19%;background:#0b0e0d;border:1px solid rgba(255,255,255,.18); }
.tower-a { width:19%;height:53%;left:24%; }.tower-b { width:30%;height:28%;left:43%; }
.tower::after { content:"";position:absolute;inset:12%;background:repeating-linear-gradient(90deg,rgba(210,224,216,.55) 0 1px,transparent 1px 18%); }
.water-line { position:absolute;left:0;right:0;bottom:17%;height:1px;background:rgba(220,231,225,.4);box-shadow:0 18px 50px rgba(190,212,200,.19); }

.project-three .project-visual { background:#c7cbc7; perspective:1000px; }
.courtyard { position:absolute; border:1px solid #2d3531; background:#919a95; transform:rotateX(64deg) rotateZ(-34deg); transform-origin:center; }
.c-one{width:48%;height:32%;left:12%;top:34%;}.c-two{width:32%;height:28%;left:43%;top:26%;background:#434b47;}.c-three{width:22%;height:20%;left:62%;top:45%;background:#ecede9;}
.tree { position:absolute; width:8vw;height:8vw;border-radius:50%;background:#567460;left:48%;top:40%;box-shadow:0 28px 35px rgba(18,21,20,.3); }
.tree::after { content:"";position:absolute;width:2px;height:80px;background:#343b37;left:50%;top:65%; }

.principles { background:var(--concrete); color:var(--carbon); padding:10vw 3vw 12vw; }
.principles-head { display:grid;grid-template-columns:1fr 3fr;align-items:start;padding-bottom:7vw; }
.principles-head p { margin:0;width:min(560px,100%);font-size:clamp(28px,4vw,64px);line-height:1;letter-spacing:-.05em; }
.principle-list { border-top:1px solid var(--carbon); }
.principle-list article { position:relative;display:grid;grid-template-columns:9% 1.8fr 1fr 40px;align-items:center;min-height:150px;border-bottom:1px solid var(--carbon);overflow:hidden;transition:background .3s,color .3s; }
.principle-list article::before { content:"";position:absolute;inset:0;background:var(--moss);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease);z-index:0; }
.principle-list article:hover::before { transform:scaleY(1); }
.principle-list article > * { position:relative;z-index:1; }
.principle-list article span { font:9px/1 SFMono-Regular,Consolas,monospace; }
.principle-list h3 { margin:0;font-size:clamp(34px,6vw,94px);font-weight:300;letter-spacing:-.065em;white-space:nowrap; }
.principle-list p { margin:0;font-size:12px; }
.principle-list i { width:38px;height:38px;border:1px solid currentColor;display:grid;place-items:center;font-style:normal;transition:transform .45s var(--ease); }
.principle-list article:hover i { transform:rotate(90deg); }

.quote-panel { min-height:100dvh;background:var(--moss);color:var(--white);position:relative;display:flex;flex-direction:column;justify-content:center;padding:10vw 6vw;overflow:hidden; }
.quote-grid { position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);background-size:8vw 8vw;transform:scale(1.2) rotate(-4deg); }
.quote-panel blockquote { position:relative;margin:0;max-width:1200px;font-size:clamp(52px,9vw,150px);font-weight:300;line-height:.88;letter-spacing:-.07em; }
.quote-panel > p { position:relative;margin:48px 0 0;font:8px/1 SFMono-Regular,Consolas,monospace;letter-spacing:.17em; }

.contact { height:115dvh;min-height:760px;background:var(--carbon);color:var(--white);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; }
.contact-door { position:absolute;left:50%;top:50%;width:min(32vw,470px);height:min(62vh,650px);transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.35);perspective:1000px; }
.contact-door::before { content:"";position:absolute;inset:5%;border:1px solid rgba(255,255,255,.13); }
.contact-door i:nth-child(1){position:absolute;left:50%;top:0;width:1px;height:100%;background:rgba(255,255,255,.18);}
.contact-door i:nth-child(2){position:absolute;left:0;top:50%;width:100%;height:1px;background:rgba(255,255,255,.18);}
.contact-door i:nth-child(3){position:absolute;left:50%;top:50%;width:8px;height:8px;background:var(--moss);transform:translate(-50%,-50%);}
.contact-kicker,.contact h2,.contact-link { position:relative;z-index:2; }
.contact-kicker { margin-bottom:34px; }
.contact h2 { margin:0;font-size:clamp(78px,14vw,220px);font-weight:300;line-height:.7;letter-spacing:-.075em; }
.contact-link { margin-top:75px;display:flex;align-items:center;gap:24px;font:9px/1 SFMono-Regular,Consolas,monospace;letter-spacing:.17em; }
.contact-link i { width:54px;height:54px;border:1px solid currentColor;display:grid;place-items:center;font-style:normal;transition:background .35s,color .35s,transform .45s var(--ease); }
.contact-link:hover i { background:var(--white);color:var(--carbon);transform:rotate(90deg); }
.footer-line { position:absolute;left:3vw;right:3vw;bottom:24px;border-top:1px solid rgba(255,255,255,.24);padding-top:18px;display:flex;justify-content:space-between;font:8px/1 SFMono-Regular,Consolas,monospace;letter-spacing:.14em; }

@media (max-width: 780px) {
  .cursor { display:none; }
  .nav { height:64px;padding:11px 18px;grid-template-columns:1fr auto; }
  .nav-center { display:none; }
  .brand svg { width:38px;height:38px; }
  .nav-target span { display:none; }
  .nav-target i { width:38px;height:38px; }
  .build-theatre { height:620vh; }
  .grid-overlay::before { left:18px; }.grid-overlay::after { right:18px; }
  .grid-overlay i:nth-child(1),.grid-overlay i:nth-child(3),.grid-overlay i:nth-child(5){display:none;}
  .grid-overlay i:nth-child(2){left:34%;}.grid-overlay i:nth-child(4){left:67%;}
  .hero-lockup { left:18px;right:18px;top:22%; }
  .hero-lockup h1 { font-size:clamp(58px,22vw,96px);line-height:.78; }
  .hero-lockup > p:last-child { max-width:240px;font-size:12px; }
  .chapter-copy,.chapter-copy.chapter-right { left:18px;right:18px;top:17%;width:auto; }
  .chapter-copy.chapter-center { left:50%;right:auto;width:calc(100% - 36px);top:18%; }
  .chapter-copy h2 { font-size:clamp(48px,15vw,68px); }
  .chapter-body { max-width:250px; }
  .chapter-index { left:auto;right:0; }
  .chapter-center .chapter-index { left:auto;right:0; }
  .stage-readout { left:18px;right:18px;bottom:15px;grid-template-columns:82px 35px 1fr;gap:9px; }
  .side-coordinate { display:none; }
  .scroll-note { right:18px;bottom:45px; }
  .register { padding:110px 18px 80px; }
  .register-intro { min-height:68vh;display:block;position:relative; }
  .register-intro > span { position:absolute;right:0;top:28px; }
  .register-intro h2 { margin-top:15vh;font-size:18vw; }
  .project { margin-bottom:18vh; }
  .project-visual { height:120vw; }
  .project-meta { grid-template-columns:1fr 36px;gap:8px; }
  .project-meta span,.project-meta p { grid-column:1; }
  .project-meta h3 { grid-column:1;font-size:32px; }
  .project-meta i { grid-column:2;grid-row:1/4;align-self:center; }
  .project-sun,.project-moon { width:30vw;height:30vw; }
  .mass-a{width:70%;left:4%;}.mass-b{width:30%;left:66%;}.project-glass{width:50%;left:19%;}
  .tower-a{width:30%;left:15%;}.tower-b{width:42%;left:45%;}
  .tree{width:18vw;height:18vw;}
  .principles { padding:100px 18px; }
  .principles-head { display:block;padding-bottom:70px; }
  .principles-head p { font-size:40px;margin-top:35px; }
  .principle-list article { min-height:125px;grid-template-columns:30px 1fr 34px; }
  .principle-list h3 { font-size:10vw;white-space:normal;line-height:.88; }
  .principle-list p { display:none; }
  .principle-list i { width:32px;height:32px; }
  .quote-panel { min-height:90dvh;padding:90px 18px; }
  .quote-grid { background-size:20vw 20vw; }
  .quote-panel blockquote { font-size:15vw; }
  .contact { min-height:760px;height:105dvh; }
  .contact-door { width:72vw;height:58vh; }
  .contact h2 { font-size:22vw; }
  .contact-link { margin-top:55px; }
  .footer-line { left:18px;right:18px;bottom:20px; }
  .footer-line span:nth-child(2){display:none;}
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .build-theatre { height:100dvh; }
  .chapter-copy,.scroll-note,.stage-readout { display:none; }
  .hero-lockup { opacity:1 !important; transform:none !important; }
}