/* Magpie Creative — shared design system */ :root { --navy: #171D3A; --orchid: #F598FF; --periwinkle: #94ABF9; --periwinkle-deep: #5567C7; --pale: #E5E9FD; --paper: #F1E8D8; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--paper); color: var(--navy); font-family: 'Space Grotesk', sans-serif; /* NOTE: deliberately no overflow-x here. Setting only one of overflow-x/overflow-y forces the other to compute as `auto` (CSS spec quirk), which turns into a scroll container and silently breaks `position: sticky` on descendants. The track's own horizontal overflow is clipped by .pin-inner. */ } ::selection { background: var(--orchid); color: var(--navy); } body::before { content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; background-image: url('images/paper-texture.webp'); background-size: cover; background-position: center; opacity: 0.4; mix-blend-mode: multiply; } /* ── Nav ── */ .topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px clamp(20px, 4vw, 40px); background: rgba(241, 232, 216, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .topnav a { color: var(--navy); text-decoration: none; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; transition: color 0.2s; } .topnav a:hover, .topnav a:focus-visible { color: var(--orchid); } .topnav a.active { color: var(--periwinkle-deep); font-weight: 600; } .topnav .nav-logo { font-weight: 600; } .topnav .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--periwinkle); opacity: 0.6; flex: 0 0 auto; } /* ── Page hero (inner pages) ── */ .page-hero { position: relative; z-index: 2; padding: clamp(120px, 20vh, 190px) clamp(20px, 4vw, 40px) 40px; text-align: center; } .page-hero h1 { font-family: 'Archivo Black', sans-serif; font-size: clamp(48px, 10vw, 128px); line-height: 0.9; letter-spacing: -0.01em; text-transform: uppercase; margin: 0 0 18px; color: var(--navy); } .page-hero p { max-width: 46ch; margin: 0 auto; color: var(--periwinkle-deep); font-size: 16px; } /* ── Footer ── */ footer.site-footer { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 28px clamp(20px, 4vw, 40px) 36px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--periwinkle-deep); margin-top: 60px; } footer.site-footer .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--periwinkle); opacity: 0.6; }