*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#5B1A2E;color:#F5E6D3;font-family:'Anybody',sans-serif;font-weight:400;font-size:16px;line-height:1.65;overflow-x:hidden;min-height:100vh}

.bokeh-bg{position:fixed;inset:0;z-index:0;pointer-events:none}

.side-nav{position:fixed;left:12px;top:50%;transform:translateY(-50%);z-index:100;display:flex;flex-direction:column;gap:8px}
.nav-sq{width:36px;height:36px;background:rgba(245,230,211,0.12);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.15);border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:#E8A945;transition:width 0.3s cubic-bezier(0.34,1.56,0.64,1);overflow:hidden;white-space:nowrap}
.nav-sq:hover{width:120px;gap:8px;padding:0 12px;justify-content:flex-start}
.nav-label{display:none;font-size:12px;color:#F5E6D3}
.nav-sq:hover .nav-label{display:inline}

.glass-panel{position:relative;z-index:2;background:rgba(245,230,211,0.12);backdrop-filter:blur(40px);border:1px solid rgba(255,255,255,0.15);border-radius:0 18px 0 18px;padding:clamp(24px,4vw,48px);box-shadow:inset 0 0 30px rgba(232,169,69,0.08);transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1)}

.hero-panel{max-width:80%;margin:15vh auto 8vh;transform:rotate(1.5deg);min-height:50vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.site-title{font-family:'Bungee Shade',cursive;font-size:clamp(2rem,6vw,5.5rem);letter-spacing:0.04em;color:#F5E6D3;text-shadow:3px 3px 0 #5B1A2E;line-height:0.95}
.subtitle{font-family:'Anybody',sans-serif;font-size:clamp(1rem,2vw,1.3rem);color:#D4A0A0;margin-top:1em;max-width:40ch}

.section-heading{font-family:'Bungee Shade',cursive;font-size:clamp(1.5rem,4vw,3rem);letter-spacing:0.04em;color:#F5E6D3;text-shadow:2px 2px 0 #5B1A2E;margin-bottom:0.5em}
.section-heading.secondary{color:#D4A0A0}

.status-label{font-family:'Silkscreen',monospace;font-size:12px;letter-spacing:0.15em;text-transform:uppercase;color:#E8A945;display:block;margin-bottom:1em}

.content-area{max-width:1100px;margin:0 auto 6vh;padding:0 clamp(60px,8vw,100px);display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,24px)}
.block-large{grid-column:span 7}
.block-medium{grid-column:span 5}
.block-small{grid-column:span 4;display:flex;align-items:center;justify-content:center}
.block-full{grid-column:span 12}

.glass-panel:nth-child(odd){transform:rotate(-1.5deg)}
.glass-panel:nth-child(even){transform:rotate(2deg)}

.preview-text{color:#A67B8A;font-size:clamp(0.9rem,1.5vw,1.1rem)}

.expanded-content{max-height:0;overflow:hidden;transition:max-height 0.4s cubic-bezier(0.34,1.56,0.64,1);margin-top:0}
.glass-panel.expanded .expanded-content{max-height:500px;margin-top:1em}
.expanded-content p{color:#F5E6D3;margin-bottom:0.8em}

[data-expand]{cursor:pointer}
[data-expand]:hover{transform:rotate(0deg) scale(1.02)}

.footer-panel{text-align:center;position:relative;overflow:hidden;margin-top:4vh}
.crack-line{position:absolute;top:20%;left:10%;width:80%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.5),transparent);transform:rotate(-5deg);box-shadow:0 1px 2px rgba(255,255,255,0.2)}
.footer-text{color:#A67B8A;font-size:0.85rem;margin-top:1em}

@media(max-width:768px){
  .content-area{grid-template-columns:1fr;padding:0 clamp(16px,4vw,40px)}
  .block-large,.block-medium,.block-small,.block-full{grid-column:span 1}
  .hero-panel{max-width:95%;margin:10vh auto 4vh}
  .side-nav{display:none}
}