@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400&display=swap');
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#0c0b0d;color:#eee9e5;font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #ff6b7b;outline-offset:7px}[hidden]{display:none!important}header{padding:36px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff19}.wordmark{font-size:24px;font-weight:300;letter-spacing:.16em}.back{font-size:13px;color:#c4b8bb}.title{padding:90px 5% 48px;background:radial-gradient(ellipse at 80% 10%,#5d132322,transparent 65%)}.eyebrow{font-size:11px;letter-spacing:.2em;color:#c47882;margin:0 0 32px}h1{font-size:clamp(48px,7.7vw,130px);line-height:1.02;font-weight:400;letter-spacing:-.055em;margin:0;outline:none}h1 em{font-style:normal;color:#e04459}.title-bottom{display:flex;align-items:end;justify-content:space-between;margin-top:48px}.title-bottom p{font-size:20px;line-height:1.45;margin:0;color:#c9bfc1}.title-bottom span{font-size:10px;letter-spacing:.16em;color:#93868b}.project-image{margin:0 3%;position:relative}.project-image img{width:100%;display:block}.project-image figcaption{display:flex;justify-content:space-between;padding:20px 0;border-bottom:1px solid #ffffff26;font-size:11px;letter-spacing:.14em}.about{padding:110px 8%;display:grid;grid-template-columns:1fr 1.4fr;gap:50px}.about .eyebrow{padding-top:14px}h2{font-size:clamp(34px,4vw,64px);line-height:1.08;letter-spacing:-.035em;font-weight:400;margin:0 0 35px}.about div>p{max-width:600px;font-size:17px;line-height:1.8;color:#b5abad}.contact{display:flex;justify-content:space-between;max-width:600px;margin-top:38px;padding:24px 0;border-top:1px solid #89313f;border-bottom:1px solid #89313f;color:#ff8998}.contact:hover{color:white}footer{border-top:1px solid #ffffff20;padding:30px 5%;display:flex;justify-content:space-between;gap:25px;font-size:11px;color:#a69b9e}.replay{background:none;border:0;color:inherit;padding:0}.intro{position:fixed;inset:0;z-index:100;background:#060609;transition:opacity 1s ease;overflow:hidden}.intro.leaving{opacity:0;pointer-events:none}.stars{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,#5b0b223f,transparent 60%)}.stars i{position:absolute;border-radius:50%;background:#f8e8ed;box-shadow:0 0 5px #fff8;animation:twinkle 3s ease-in-out infinite alternate}.logo-stage{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:30px;animation:arrive 1.6s ease both;transition:opacity .9s,transform 1.2s}.logo-stage p,.logo-stage span{font-size:10px;letter-spacing:.35em;color:#af7f8a;text-align:center}.glass-logo{font-size:clamp(32px,9vw,150px);font-weight:300;letter-spacing:.12em;line-height:1.25;padding:0 0 12px .12em;background:linear-gradient(110deg,#4e0013 8%,#b71c36 20%,#ffadba 29%,#f64a66 34%,#810b23 45%,#ee3554 58%,#ffe1e7 65%,#b91834 72%,#520718 90%);background-size:250% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-stroke:.6px #f5647c80;filter:drop-shadow(0 8px 12px #c311344d);animation:shimmer 4s ease-in-out infinite alternate}.intro-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.15s ease;background:#08080a}.intro.playing .intro-film.is-active{opacity:1}.intro.playing .logo-stage{opacity:0;transform:scale(1.05)}.skip{position:absolute;bottom:35px;right:5%;z-index:5;background:#170c14a8;border:1px solid #ffffff4d;color:#fff;border-radius:30px;padding:13px 20px;font-size:12px;backdrop-filter:blur(10px)}@keyframes arrive{from{opacity:0;filter:blur(12px);transform:scale(.96)}to{opacity:1;filter:blur(0);transform:scale(1)}}@keyframes shimmer{to{background-position:100% 50%}}@keyframes twinkle{from{opacity:.18}to{opacity:.8}}@media(max-width:650px){header{padding:25px 5%;gap:18px}.wordmark{font-size:17px}.back{font-size:10px}.title{padding-top:65px}.title-bottom{gap:25px;align-items:start}.title-bottom p{font-size:16px}.title-bottom span{max-width:110px;line-height:1.6}.project-image{margin:0}.project-image img{min-height:300px;object-fit:cover}.project-image figcaption{padding:18px 5%;font-size:9px}.about{grid-template-columns:1fr;padding:65px 6%;gap:0}.about div>p{font-size:16px}footer{flex-wrap:wrap;line-height:1.6}.logo-stage{gap:18px}.logo-stage p,.logo-stage span{font-size:8px;letter-spacing:.22em}.intro-film{object-fit:contain}.skip{bottom:24px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before{animation:none!important;transition:none!important}}

.red-gallery{margin:50px 3% 0;display:grid;gap:40px}.red-gallery figure{margin:0}.red-gallery img{width:100%;height:auto;display:block}.red-gallery figcaption{padding:18px 0;border-bottom:1px solid #ffffff26;font-size:11px;letter-spacing:.14em;color:#b5abad}@media(max-width:650px){.red-gallery{margin:30px 0 0;gap:25px}.red-gallery figcaption{padding:16px 5%;font-size:9px}}

.faceted-logo{width:min(91vw,1300px);height:auto;overflow:visible;filter:drop-shadow(0 7px 5px #680013) drop-shadow(0 0 25px #d00b283a)}
.glass-glint{animation:facet-shine 2.8s linear infinite}
@keyframes facet-shine{from{transform:translateX(-500px)}to{transform:translateX(1800px)}}

@media(prefers-reduced-motion:reduce){.glass-glint{animation:none}}

.smooth-glass-logo{font-family:Manrope,Arial,sans-serif;font-size:clamp(30px,7vw,115px);font-weight:400;letter-spacing:.18em;padding:8px 0 12px .18em;line-height:1.3;background:linear-gradient(115deg,#4f1820 4%,#8d3439 20%,#c66a65 35%,#f7b9ae 45%,#974340 54%,#5e202b 66%,#b96561 80%,#4c1721 96%);background-size:220% auto;background-clip:text;-webkit-background-clip:text;color:transparent;animation:liquid-ruby 5s ease-in-out infinite alternate;filter:drop-shadow(0 0 15px #a3323826)}
.logo-stage{animation:soft-logo-arrive 2.2s ease-out both}
@keyframes soft-logo-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes liquid-ruby{from{background-position:0% 50%}to{background-position:100% 50%}}
.red-trails{position:absolute;inset:0;overflow:hidden;pointer-events:none}.red-trails i{position:absolute;left:-25%;top:var(--top);width:150%;height:1px;transform:rotate(var(--angle));transform-origin:center}.red-trails i:before{content:'';position:absolute;width:35%;height:1px;background:linear-gradient(90deg,transparent,#85212b20 25%,#d7474e88 80%,#ff9a91 99%,transparent);box-shadow:0 0 7px #b5253966;animation:crossing-trail var(--duration) linear infinite;animation-delay:var(--delay)}
@keyframes crossing-trail{0%{transform:translateX(-120%);opacity:0}15%{opacity:.65}65%{opacity:.7}100%{transform:translateX(410%);opacity:0}}
@media(prefers-reduced-motion:reduce){.smooth-glass-logo,.logo-stage,.red-trails i:before{animation:none!important}.red-trails{display:none}}

.sound-toggle{position:fixed;z-index:10000;top:20px;right:24px;padding:11px 17px;border:1px solid #92565780;border-radius:30px;background:rgba(28,10,15,.62);backdrop-filter:blur(12px);color:#e8c8c5;font:12px Arial,sans-serif;cursor:pointer;transition:background .25s,border-color .25s}.sound-toggle:hover,.sound-toggle:focus-visible{background:#55232bd9;border-color:#e7a2a1;outline:2px solid #ae6b6b;outline-offset:3px}body:not(:has(.intro:not([hidden]))) .sound-toggle{top:auto;bottom:22px}@media(max-width:600px){.sound-toggle{top:14px;right:14px;font-size:11px;padding:10px 13px}}

.title h1 em{color:#e61914;background:linear-gradient(110deg,#980c08 0%,#e21b12 20%,#ff3b20 38%,#ff8c53 46%,#ed2416 54%,#aa100b 72%,#fa321c 88%,#980c08 100%);background-size:240% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:headline-red-shimmer 5s ease-in-out infinite alternate}
@keyframes headline-red-shimmer{from{background-position:0% 50%}to{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){.title h1 em{animation:none}}

.living-image{display:block;position:relative;width:100%;padding:0;border:0;background:#0c0b0d;overflow:hidden;cursor:pointer;text-align:initial}
.living-image>img{width:100%;display:block}
.living-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .65s ease}
.living-image.is-playing .living-video{opacity:1}
.living-image:focus-visible{outline:2px solid #ea241b;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.living-video{transition:none}}

/* Large portrait beside the experimental architecture statement. */
.about{padding:110px 5%;grid-template-columns:minmax(110px,.32fr) minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,3vw,60px);align-items:stretch}
.about-portrait{margin:0;position:relative;min-height:490px;overflow:hidden;background:#08090a}
.about-portrait img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center}
.about-copy{min-width:0}.about-copy h2{font-size:clamp(34px,3.1vw,64px)}
@media(max-width:1100px){.about{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}.about>.eyebrow{grid-column:1/-1;padding:0;margin:0}.about-portrait{min-height:490px}}
@media(max-width:650px){.about{grid-template-columns:1fr;padding:65px 6%;gap:30px}.about-portrait{width:100%;height:95.04vw;min-height:300px;aspect-ratio:auto}.about-copy h2{font-size:clamp(34px,8.5vw,48px)}}

.portrait-living{-webkit-appearance:none;appearance:none;position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;overflow:hidden;display:block}
.portrait-living .living-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center;opacity:0;transition:opacity .65s ease;pointer-events:none}
.portrait-living.is-playing .living-video{opacity:1}
.portrait-living:focus-visible{outline:2px solid #e93730;outline-offset:-3px}
@media(prefers-reduced-motion:reduce){.portrait-living .living-video{transition:none}}

/* Two independent crops of the original diptych, excluding its white seam. */
.red-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.red-split-panel{position:relative;overflow:hidden;aspect-ratio:1020 / 1143;min-width:0}
.red-split-panel>img{position:absolute;top:0;width:200.784314%;max-width:none;height:100%;display:block}
.red-split-left>img{left:0}.red-split-right>img{right:0}
/* The film is landscape while the photo crop is portrait. Keep native
   proportions and register the facade over the photo instead of cover-zoom. */
.red-split-right .living-video{inset:auto;left:0;top:32%;width:100%;height:auto;aspect-ratio:1920 / 1262;object-fit:contain;object-position:center;mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 88%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 88%,transparent 100%)}
@media(max-width:650px){.red-split{gap:4px}}

.red-wireframe{margin:55px 3% 0}
.wireframe-toggle{display:block;position:relative;width:100%;padding:0;border:0;background:#000;overflow:hidden;touch-action:manipulation}
.wireframe-toggle img{display:block;width:100%;height:auto}
.wireframe-toggle .wireframe-glow{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 1.6s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.wireframe-toggle.is-lit .wireframe-glow{opacity:1}
.wireframe-toggle:focus-visible{outline:2px solid #ed3027;outline-offset:5px}
@media(max-width:650px){.red-wireframe{margin:30px 0 0}}
@media(prefers-reduced-motion:reduce){.wireframe-toggle .wireframe-glow{transition:none}}
