:root{--ink:#0c0b0b;--paper:#efeae4;--pink:#ff3b6b;--gold:#b8965a}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ink);color:var(--paper);font-family:'IBM Plex Mono',monospace;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{color:var(--pink)}

@keyframes cut{0%,24.9%{opacity:1}25%,100%{opacity:0}}
@keyframes flick{0%,100%{opacity:0}3%{opacity:.35}5%{opacity:0}47%{opacity:0}49%{opacity:.25}51%{opacity:0}}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes drift{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.1) translate(-1.5%,1%)}}
@keyframes neon{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.4}94%{opacity:1}97%{opacity:.6}98%{opacity:1}}

/* shared pieces */
.hero{position:relative;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;padding:32px 56px 48px}
.reel{position:absolute;inset:0;overflow:hidden}
.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:cut var(--cycle,12s) steps(1,end) infinite var(--d,0s)}
.reel.drift img{animation:cut 12s steps(1,end) infinite var(--d,0s),drift 12s linear infinite var(--d,0s)}
.grain{position:absolute;inset:-10%;pointer-events:none;opacity:.28;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");animation:grain .4s steps(2) infinite}
.nav{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.nav .links{display:flex;gap:28px;flex-wrap:wrap}
.nav a,.nav span{white-space:nowrap}
.wordmark{text-transform:none;display:inline-flex;align-items:baseline;gap:.08em;white-space:nowrap;line-height:1}
.wordmark .s{font-family:'Great Vibes',cursive;line-height:1}
.wordmark .b{font-family:'Cormorant Garamond',serif;font-weight:500;line-height:1;color:var(--gold)}
.btn{flex:none;display:inline-block;padding:18px 34px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;transition:background .2s,color .2s,border-color .2s}
.footer{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.footer .info{display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.5}
.muted{opacity:.55}
.dim{opacity:.75}

/* 1a Fassade */
.fassade{background:#120e0f}
.fassade .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,8,10,.55) 0%,rgba(12,8,10,.15) 40%,rgba(12,8,10,.85) 100%)}
.fassade .flick{position:absolute;inset:0;background:var(--pink);mix-blend-mode:multiply;animation:flick 6s steps(1,end) infinite}
.fassade .nav .pink{color:var(--pink)}
.fassade .mark{position:relative;z-index:2;margin:auto 0 40px -16px;animation:rise 1.1s cubic-bezier(.2,.8,.2,1) both}
.fassade .mark .s{font-size:clamp(110px,20.8vw,300px)}
.fassade .mark .b{font-size:clamp(88px,16.6vw,240px)}
.fassade .btn{background:var(--pink);color:#120e0f}
.fassade .btn:hover{background:var(--paper);color:#120e0f}

/* 1b Arch */
.arch{background:#0d1211;color:#e9e4d9}
.arch .glow{position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 60%,#1c2a26 0%,#0d1211 70%)}
.arch .nav .wordmark .s{font-size:34px}
.arch .nav .wordmark .b{font-size:27px}
.arch .stage{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:300px 1fr 300px;gap:40px;padding-top:78px}
.arch .frame{grid-column:2;justify-self:center;width:min(520px,100%,calc((100svh - 300px) * .72));aspect-ratio:520/720;border-radius:260px 260px 0 0;overflow:hidden;position:relative;box-shadow:0 0 0 3px #f2f7f0,0 0 40px 8px rgba(214,240,230,.65),0 0 120px 30px rgba(120,200,170,.25);animation:neon 7s linear infinite}
.arch .frame .shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(13,18,17,.9))}
.arch .col{padding-top:112px;display:flex;flex-direction:column;gap:18px}
.arch .col.left{grid-column:1;grid-row:1}
.arch .col.right{grid-column:3;grid-row:1;gap:22px;text-align:right;align-items:flex-end}
.arch .col.left{animation:rise 1.1s .2s cubic-bezier(.2,.8,.2,1) both}
.arch .col.right{animation:rise 1.1s .4s cubic-bezier(.2,.8,.2,1) both}
.arch .title{font-family:'Bebas Neue',sans-serif;font-size:96px;line-height:.9}
.arch .title span{color:var(--gold)}
.arch .sub{font-size:14px;line-height:1.6;opacity:.65}
.arch .hours{width:100%;font-size:13px;line-height:1.9;opacity:.8}
.arch .hours div{display:flex;justify-content:space-between}
.arch .btn{padding:16px 28px;font-size:13px;border:1.5px solid var(--gold);color:var(--gold)}
.arch .btn:hover{background:var(--gold);color:#0d1211}
.arch .foot{position:relative;z-index:2;margin-top:40px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.5}

/* 1c Split */
.split .halves{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
.split .halves .reel{position:relative}
.split .halves .out img{filter:saturate(1.2)}
.split .halves .out img.warm{filter:saturate(1.2) hue-rotate(-15deg)}
.split .halves .in img.dark{filter:brightness(.8)}
.split .shade{position:absolute;inset:0;background:rgba(12,11,11,.35)}
.split .grain{opacity:.22}
.split .center{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;margin:40px -56px}
.split .band{overflow:hidden;white-space:nowrap;padding:10px 0;font-family:'Bebas Neue',sans-serif;font-size:44px;letter-spacing:.06em;line-height:1}
.split .band>div{display:inline-flex;animation:marquee 18s linear infinite}
.split .band span{padding-right:40px}
.split .band.pink{background:var(--pink);color:var(--ink)}
.split .band.paper{background:var(--paper);color:var(--ink)}
.split .band.paper>div{animation-duration:24s;animation-direction:reverse}
.split .mark{text-align:center;padding:30px 0;animation:rise 1s cubic-bezier(.2,.8,.2,1) both}
.split .mark .s{font-size:clamp(96px,18vw,260px)}
.split .mark .b{font-size:clamp(77px,14.4vw,208px)}
.split .btn{background:var(--paper);color:var(--ink)}
.split .btn:hover{background:var(--pink);color:var(--ink)}

@media (max-width:900px){
  .hero{padding:24px 24px 32px}
  .nav .links{gap:16px}
  .arch .stage{grid-template-columns:1fr;padding-top:40px;gap:32px}
  .arch .frame{grid-column:1;grid-row:1}
  .arch .col.left,.arch .col.right{grid-column:1;grid-row:auto;padding-top:0}
  .arch .col.right{text-align:left;align-items:flex-start}
  .arch .title{font-size:72px}
  .split .center{margin:32px -24px}
  .split .band{font-size:32px}
  .fassade .mark{margin-left:-8px}
}