:root{--ink:#292326;--paper:#faf7f2;--coral:#ec685e;--line:#ded9d3}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Satoshi',sans-serif}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #563b9a;outline-offset:5px}header{height:110px;margin:0 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.logo{font-family:Manrope,sans-serif;font-size:39px;line-height:.83;font-weight:800;letter-spacing:-4px;display:inline-flex;flex-direction:column}.logo span{font-family:'Satoshi',sans-serif;font-size:8px;letter-spacing:1.1px;margin-top:10px;font-weight:700}nav{display:flex;align-items:center;gap:35px;font-size:13px}.text-button{border:0;background:none;color:inherit}.text-button span{margin-left:10px}.button{border:0;background:var(--ink);color:white;padding:19px 25px;display:inline-flex;justify-content:space-between;align-items:center;gap:35px;border-radius:3px;font-size:14px}.button:hover{background:#51404b}.button.small{padding:14px 20px}.intro{padding:57px 5% 45px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;display:flex;align-items:center;gap:9px}.eyebrow>span{height:6px;width:6px;border-radius:100%;background:var(--coral)}.intro-line{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}h1,h2{font-family:Manrope,sans-serif;font-weight:500;letter-spacing:-4px;margin:23px 0 0;line-height:1.06}h1{font-size:clamp(48px,5.4vw,84px)}em{font-style:normal;color:var(--coral)}.intro-aside{padding-bottom:8px;font-size:14px;line-height:1.8}.intro-aside a{display:flex;justify-content:space-between;margin-top:30px;font-size:10px;letter-spacing:1.5px;font-weight:700}.intro-aside a span{font-size:20px}.mosaic-section{margin:0 3%}.mosaic{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;isolation:isolate}.tile{aspect-ratio:1;border:0;position:relative;padding:0;overflow:hidden;background:var(--bg);color:var(--fg);border-radius:2px;transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s;z-index:1}.tile svg{width:100%;height:100%;display:block;transition:opacity .7s,transform .9s}.tile .reveal{position:absolute;inset:0;display:flex;text-align:left;flex-direction:column;justify-content:space-between;padding:16px;opacity:0;transition:opacity .7s}.reveal .tile-tag{font-size:9px;letter-spacing:1.2px}.reveal strong{font-family:Manrope,sans-serif;font-size:clamp(14px,1.6vw,25px);font-weight:600;line-height:1.1;letter-spacing:-.6px}.reveal small{font-size:10px;display:flex;justify-content:space-between;gap:4px}.tile.active,.tile:hover,.tile:focus-visible{transform:scale(1.09) translateY(-4px);box-shadow:0 15px 35px #46302a30;z-index:3}.tile.active svg,.tile:hover svg,.tile:focus-visible svg{opacity:.07;transform:scale(1.1)}.tile.active .reveal,.tile:hover .reveal,.tile:focus-visible .reveal{opacity:1}.mosaic-caption{padding:22px 2.2%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:12px}.mosaic-caption>span:first-child{font-size:9px;letter-spacing:1.5px;display:flex;align-items:center;gap:8px}.mosaic-caption i{width:6px;height:6px;border-radius:50%;background:var(--coral)}.mosaic-caption button{border:0;background:none;font-size:12px}.join{padding:95px 9% 100px;display:grid;grid-template-columns:1fr 1fr;gap:12%}h2{font-size:clamp(40px,4.2vw,64px);letter-spacing:-2.8px}.join-copy{padding-top:12px}.join-copy p{font-size:20px;line-height:1.5;margin:0 0 20px}.join-copy .muted{font-size:14px;color:#787075;line-height:1.8}.note{display:block;font-size:10px;margin-top:16px;color:#787075}footer{border-top:1px solid var(--line);margin:0 5%;padding:30px 0;display:flex;align-items:center;justify-content:space-between;gap:20px}footer .logo{font-size:29px}footer .logo span{font-size:6px}footer p,footer>span{font-size:11px;color:#787075}dialog{border:0;border-radius:8px;background:var(--paper);color:var(--ink);width:min(700px,94vw);max-height:90vh;padding:42px}dialog::backdrop{background:#29232688;backdrop-filter:blur(7px)}.close{position:absolute;right:18px;top:12px;border:0;background:none;font-size:30px}.form-content h2{font-size:45px;margin:20px 0}.form-content>p,.success p{font-size:14px;line-height:1.7;color:#70686d}.preview-note{background:#eee6f4;padding:12px;font-size:12px;margin:20px 0}form{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{display:flex;flex-direction:column;gap:8px;font-size:12px}input,select,textarea{font:inherit;border:1px solid #d5cccf;background:#fffdf9;color:var(--ink);padding:12px;min-width:0;border-radius:3px;width:100%}.wide{grid-column:1/-1}.check{flex-direction:row;align-items:flex-start;line-height:1.5}.check input{width:16px;flex-shrink:0}.success{padding:30px 0}.paused .tile{transition:none}@media(min-width:1600px){.mosaic{grid-template-columns:repeat(10,1fr)}}@media(max-width:900px){nav{gap:18px}.mosaic{grid-template-columns:repeat(6,1fr)}.intro-aside{font-size:12px}.reveal{padding:12px!important}.reveal strong{font-size:20px}.join{gap:8%;padding:70px 6%}.mosaic-caption>span:nth-child(2){display:none}}@media(max-width:600px){header{height:85px}nav>a,nav .text-button{display:none}.logo{font-size:32px}.button.small{font-size:11px;padding:12px}.intro{padding:35px 5% 30px}.eyebrow{font-size:8px;letter-spacing:1.3px}.intro-line{display:block}h1{font-size:45px;letter-spacing:-2.4px}.intro-aside{margin-top:22px}.intro-aside p{font-size:13px}.intro-aside a{margin-top:16px;max-width:240px}.mosaic{grid-template-columns:repeat(4,1fr);gap:4px}.reveal strong{font-size:15px}.reveal .tile-tag{font-size:6px}.reveal small{font-size:8px}.reveal{padding:9px!important}.mosaic-caption{font-size:9px;padding:19px 0}.mosaic-caption>span:first-child{font-size:7px}.join{grid-template-columns:1fr;padding:55px 6%;gap:26px}h2{font-size:43px}.join-copy p{font-size:18px}footer{flex-wrap:wrap}footer p{display:none}footer>span{font-size:9px}dialog{padding:30px 22px}form{grid-template-columns:1fr}form label{grid-column:1/-1}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media(min-width:601px) and (max-width:900px){h1{letter-spacing:-2.3px}.reveal strong{font-size:15px;letter-spacing:-.4px}.reveal .tile-tag{font-size:6px;letter-spacing:.6px}.reveal small{font-size:7px}.reveal{padding:10px!important}}
@media(max-width:600px){.reveal strong{font-size:clamp(11px,3.4vw,19px)}.reveal .tile-tag{font-size:5px;letter-spacing:.3px}.reveal small{font-size:6px}.reveal{padding:7px!important}}
/* Iteration 2: sculptural community wall */
body{background:#eee9e2}header{height:100px;margin:0;padding:0 4%;background:#f8f5f0;position:relative;z-index:5;border-bottom:1px solid #d9d0c7}.nav-message{font-size:11px;line-height:1.7;color:#817770;margin-right:auto;margin-left:35px}.nav-message strong{color:#403831;font-weight:500}nav{gap:22px}.mosaic-section{margin:0;background:radial-gradient(ellipse at 80% 10%,#e7dce9 0,transparent 50%),radial-gradient(ellipse at 10% 70%,#e9c9b7 0,transparent 55%),#e4ded5;padding:45px 4% 0;overflow:hidden}.mosaic{gap:27px 24px;padding:15px 20px 50px;perspective:1600px;isolation:auto;grid-template-columns:repeat(8,minmax(0,1fr))}.tile{overflow:visible;background:none;transform-style:preserve-3d;transform:rotateX(10deg) rotateY(-14deg);transition:transform 2.8s cubic-bezier(.22,.61,.36,1),filter 2.8s;box-shadow:none;filter:drop-shadow(10px 16px 9px #49372e25);border-radius:0}.cube-face{position:absolute;inset:0;background:linear-gradient(135deg,#ffffff50,transparent 60%),var(--bg);overflow:hidden;border:1px solid #ffffff65;border-radius:3px;box-shadow:inset 0 0 20px #ffffff18;transform:translateZ(12px)}.cube-side{position:absolute;right:-13px;top:0;width:14px;height:100%;background:linear-gradient(90deg,#00000025,#00000048),var(--bg);transform-origin:left;transform:skewY(32deg);border-radius:0 2px 2px 0}.cube-bottom{position:absolute;bottom:-9px;left:0;width:100%;height:10px;background:linear-gradient(#00000035,#0000004a),var(--bg);transform:skewX(57deg);transform-origin:top}.tile svg{filter:drop-shadow(2px 5px 2px #00000012);transition:opacity 3s,transform 3.5s}.tile .reveal{color:#332b35;transition:opacity 3s;padding:14px;justify-content:space-between}.tile .reveal strong{font-size:clamp(13px,1.35vw,23px);letter-spacing:-.5px}.tile .reveal .tile-tag{font-size:7px;letter-spacing:.8px}.tile .reveal small{font-size:8px}.tile.active,.tile:hover,.tile:focus-visible{transform:translateY(-15px) translateZ(65px) rotateX(10deg) rotateY(-14deg) scale(1.12);box-shadow:none;filter:drop-shadow(18px 30px 15px #49372e40);z-index:4}.tile.active svg,.tile:hover svg,.tile:focus-visible svg{opacity:0;transform:scale(1.06)}.mosaic-caption{border-top:1px solid #a7998d40;border-bottom:0;padding:23px 0;color:#63564d}.join{background:#faf7f2}.paused .tile{transition:transform 2.8s,filter 2.8s}@media(min-width:1600px){.mosaic{grid-template-columns:repeat(10,minmax(0,1fr))}}@media(max-width:1000px){.mosaic{grid-template-columns:repeat(6,minmax(0,1fr));gap:25px 19px;padding-left:5px;padding-right:16px}.nav-message{margin-left:22px;font-size:9px}nav>a{display:none}.tile .reveal strong{font-size:15px}.tile .reveal .tile-tag{font-size:6px}.tile .reveal small{font-size:7px}}@media(max-width:600px){header{height:85px}.nav-message{font-size:8px;margin-left:20px}.nav-message strong{font-size:9px}nav{gap:0}.mosaic-section{padding:30px 4% 0}.mosaic{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 19px;padding:10px 14px 35px 3px}.tile .reveal strong{font-size:16px}.tile .reveal{padding:10px!important}.tile .reveal small{font-size:7px}.tile .reveal .tile-tag{font-size:6px}.button.small{padding:12px;font-size:10px;gap:12px}.logo{font-size:29px}.logo span{font-size:6px}.tile.active,.tile:hover,.tile:focus-visible{transform:translateY(-10px) translateZ(35px) rotateX(10deg) rotateY(-14deg) scale(1.07)}}
@media(min-width:601px) and (max-width:1000px){.tile .reveal strong{font-size:13px;line-height:1.12}.tile .reveal .tile-tag{font-size:5px;letter-spacing:.4px}.tile .reveal small{font-size:6px}.tile .reveal{padding:8px!important}}
/* Continuous perspective scene */
header{background:#28212c;color:#f8eee6;border-color:#ffffff12}.nav-message{color:#bfb1c3}.nav-message strong{color:#f0ded4}header .button{background:#e5b7a2;color:#2e2531}body{background:#211c29}.mosaic-section{padding:0;background:#211c29}.scene{height:calc(100svh - 100px);min-height:580px;position:relative;overflow:hidden}#cube-canvas{width:100%;height:100%;display:block;touch-action:pan-y}.scene-label{position:absolute;top:30px;left:4%;pointer-events:none;font-size:9px;letter-spacing:2px;color:#ded1da}.scene-label span{display:block;font-family:Manrope,sans-serif;font-size:23px;letter-spacing:-.7px;margin-top:9px}.scene-invite{position:absolute;left:4%;bottom:35px;border:1px solid #ffffff28;background:#29212cd9;backdrop-filter:blur(20px);color:#e1bdac;padding:20px 24px;text-align:left;font-size:8px;letter-spacing:1.5px;box-shadow:0 12px 45px #0004}.scene-invite strong{display:block;font-size:21px;letter-spacing:-.5px;color:#fff1e9;margin-top:10px;font-weight:500}.scene-hint{position:absolute;right:4%;bottom:40px;font-size:8px;letter-spacing:1.5px;color:#e7d6e3;pointer-events:none}.mosaic-caption{padding:23px 4%;color:#d1bfce;border-color:#ffffff12}footer{color:#eadfe5}footer p,footer>span{color:#bfb1c3}@media(max-width:600px){.scene{height:calc(100svh - 85px);min-height:600px}.scene-hint{display:none}.scene-label span{font-size:18px}.scene-invite{bottom:25px}.scene-label{top:24px}}
.page-arrow{position:absolute;z-index:3;top:43%;width:40px;height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#251e2ee8;border:1px solid #c6a8c64d;color:#f6dfd0;font-size:33px;backdrop-filter:blur(15px);border-radius:4px}.page-arrow span{writing-mode:vertical-rl;font-size:8px;letter-spacing:2px}.previous{left:12px}.next{right:12px}.page-arrow:hover{background:#5d455e}.page-status{position:absolute;left:0;right:0;bottom:15px;text-align:center;color:#dfc7d7;font-size:8px;letter-spacing:1.3px;z-index:2;pointer-events:none}#cube-canvas{transition:opacity .3s}.page-changing #cube-canvas{opacity:0}.scene-invite{bottom:45px}.scene-hint{bottom:55px}@media(max-width:600px){.page-arrow{width:30px;height:110px}.previous{left:5px}.next{right:5px}.page-status{font-size:7px}.scene-invite{bottom:40px}}