/* polytics.club — Avant-Garde Fashion Lookbook */
:root {
    --bg: #0F0F0F;
    --white: #FFFFFF;
    --red: #E8463A;
    --blue: #3B82F6;
    --silver: #B0B0B0;
    --amber: #F59E0B;
    --muted: #666666;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Barlow', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.65; color: var(--silver); background: var(--bg); overflow-x: hidden; }

#side-nav { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 100; display: flex; flex-direction: column; gap: 24px; padding: 16px 8px; }
.nav-label { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); font-family: 'Barlow Condensed', sans-serif; font-weight: 300; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); cursor: pointer; transition: color 0.2s; }
.nav-label:hover { color: var(--white); }

#hero { height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; }
.hero-word { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 180px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--white); position: absolute; }
.hero-poly { top: 15%; left: 8%; }
.hero-tics { bottom: 15%; right: 8%; }

.diagonal-section { padding: 120px 80px; transform: skewY(-5deg); margin: 40px 0; }
.diagonal-section .section-content { transform: skewY(5deg); max-width: 700px; }
.red-band { background: var(--red); }
.blue-band { background: var(--blue); }
.diagonal-section h2 { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 48px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--white); margin-bottom: 16px; }
.diagonal-section p { font-size: 17px; color: rgba(255,255,255,0.85); line-height: 1.7; }

#voices { padding: 80px 80px; }
.card-collage { display: flex; flex-direction: column; gap: 32px; }
.voice-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); padding: 40px; opacity: 0; transform: translateX(-30px); transition: opacity 0.5s, transform 0.5s; }
.voice-card.visible { opacity: 1; transform: translateX(0); }
.right-card { margin-left: auto; transform: translateX(30px); }
.right-card.visible { transform: translateX(0); }
.w40 { width: 40%; }
.w60 { width: 60%; }
.w80 { width: 80%; }
.voice-card h3 { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 24px; text-transform: uppercase; color: var(--white); margin-bottom: 12px; }
.voice-card p { font-size: 15px; color: var(--silver); margin-bottom: 12px; }
.card-meta { font-family: 'Barlow Condensed', sans-serif; font-weight: 300; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

#footer { padding: 40px 80px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,0.08); }
.footer-brand { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 14px; text-transform: uppercase; color: var(--white); }
.footer-copy { font-family: 'Barlow Condensed', sans-serif; font-weight: 300; font-size: 12px; letter-spacing: 0.1em; color: var(--muted); }

@media (max-width: 768px) {
    .hero-word { font-size: 80px; }
    #side-nav { display: none; }
    .diagonal-section { padding: 80px 32px; }
    #voices { padding: 40px 32px; }
    .w40, .w60, .w80 { width: 100%; }
    .voice-card { margin-left: 0 !important; }
}