/* ppuzzl.org — Brutalist Typography */
:root {
    --bg: #D4CFC7;
    --surface: #C4BFB7;
    --ink: #1A1A1A;
    --secondary: #3D3A36;
    --body: #4A4640;
    --tertiary: #6B6560;
    --hover: #8C857D;
    --slab: #2E2B27;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 13px; line-height: 1.65; color: var(--body); background: var(--bg); overflow-x: hidden; color-scheme: light only; }

.scroll-bar { position: fixed; left: 0; top: 0; width: 4px; height: 100vh; background: var(--bg); z-index: 100; }
.scroll-fill { width: 100%; height: 0%; background: var(--slab); transition: height 0.05s; }

.brand-mark { position: fixed; top: 24px; left: 24px; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink); z-index: 90; }

.section-numbers { position: fixed; left: 24px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 20px; z-index: 90; }
.sec-num { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.2em; color: var(--tertiary); cursor: default; transition: transform 0.15s linear, color 0.15s linear; }
.sec-num.active { color: var(--ink); transform: scale(1.5); }

.sec { min-height: 100vh; display: grid; grid-template-columns: repeat(16, 1fr); align-content: center; padding: 0 24px; position: relative; }

.sec-problem { align-content: center; }
.hero-word { grid-column: 1 / -1; font-family: 'Bebas Neue', sans-serif; font-size: 18vw; letter-spacing: 0.02em; color: var(--ink); line-height: 1; padding-top: 35vh; }
.hero-rule { grid-column: 3 / 15; border: none; height: 2px; background: var(--tertiary); margin: 24px 0; width: 0; transition: width 0.8s cubic-bezier(0.9, 0, 0.1, 1); }
.hero-rule.on { width: 100%; }
.hero-def { grid-column: 3 / 12; font-size: 13px; color: var(--body); opacity: 0; transition: opacity 0.4s ease-out; }
.hero-def.on { opacity: 1; }

.sec-pieces { margin-top: 12vh; padding-bottom: 12vh; align-content: start; gap: 0; }
.stair-block { background: var(--surface); padding: 1.5rem; border-left: 2px solid var(--secondary); opacity: 0; transition: opacity 0.6s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.block-1 { grid-column: 1 / 7; margin-top: 10vh; transform: translateX(-100%); }
.block-2 { grid-column: 5 / 11; margin-top: 4vh; transform: translateY(50%); }
.block-3 { grid-column: 10 / 17; margin-top: 4vh; transform: translateX(100%); }
.stair-block.visible { opacity: 1; transform: translate(0); }
.block-text { font-size: 15px; color: var(--body); }

.sec-assembly { margin-top: 12vh; }
.manifesto { grid-column: 2 / 16; }
.manifesto-line { font-family: 'Bebas Neue', sans-serif; font-size: 6vw; color: var(--ink); line-height: 1.2; letter-spacing: 0.02em; opacity: 0; transform: translateY(-30px); transition: opacity 0.3s, transform 0.3s ease-out; }
.manifesto-line.visible { opacity: 1; transform: translateY(0); }
.w900 { font-weight: 400; }
.w700 { font-weight: 400; opacity: 0.85; }
.w400 { font-weight: 400; opacity: 0.65; }
.w800 { font-weight: 400; opacity: 0.9; }

.sec-gap { margin-top: 12vh; align-content: center; }
.incomplete { grid-column: 11 / 16; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--tertiary); }
.incomplete .cursor { display: inline-block; width: 7px; height: 13px; background: var(--tertiary); margin-left: 2px; animation: blink 1.06s step-end infinite; }
@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

.sec-ground { margin-top: 12vh; align-content: end; padding-bottom: 5vh; }
.footer-content { grid-column: 1 / 9; }
.footer-mark { font-family: 'Bebas Neue', sans-serif; font-size: 4vw; color: var(--ink); letter-spacing: 0.02em; line-height: 1; }
.footer-email { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.2em; color: var(--tertiary); margin-top: 8px; display: inline-block; border-bottom: 2px solid transparent; transition: border-color 0.3s linear; }
.footer-email:hover { border-color: var(--ink); }
.footer-rule { grid-column: 1 / -1; border: none; height: 4px; background: var(--ink); margin-top: 40px; }

@media (max-width: 768px) {
    .sec { grid-template-columns: repeat(8, 1fr); padding: 0 16px; }
    .hero-word { font-size: 24vw; }
    .hero-rule { grid-column: 2 / 8; }
    .hero-def { grid-column: 2 / 8; }
    .block-1, .block-2, .block-3 { grid-column: 1 / -1; }
    .manifesto { grid-column: 1 / -1; }
    .manifesto-line { font-size: 10vw; }
    .incomplete { grid-column: 3 / 8; }
    .footer-content { grid-column: 1 / -1; }
    .section-numbers { display: none; }
}