@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/artist-floating/dm-sans.woff2') format('woff2'); }
@font-face { font-family: Aukera; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/Aukera-Regular.otf') format('opentype'); }
:root { color-scheme: light dark; --paper: #f9f7f0; --ink: #242824; --subtle: #686f64; --accent: #6c8753; --patreon: #242824; --shadow: #28352529; --body: 'DM Sans', sans-serif; --icon-size: clamp(104px, 29vw, 130px); }
@media (prefers-color-scheme: dark) { :root { --paper: #191c1b; --ink: #f6f4ec; --subtle: #adb5a9; --accent: #b7cd88; --patreon: #f6f4ec; --shadow: #00000055; } }
* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); }
[hidden] { display: none !important; }
.site-v2 { padding-bottom: var(--privacy-space, 0px); }
.links-page { width: min(100%, 432px); min-height: 100vh; min-height: 100svh; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; padding: max(32px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)); }
.heading { text-align: center; }
.eyebrow { margin: 0 0 10px; color: var(--subtle); font-size: .6875rem; font-weight: 500; letter-spacing: 2.2px; line-height: 1.5; text-transform: uppercase; }
h1 { margin: 0; color: #edff63; font-family: Aukera, sans-serif; font-size: clamp(1.75rem, 9.5vw, 2.6875rem); line-height: 1.1; letter-spacing: -.04em; font-weight: 400; text-shadow: 2px 2px #000; }
.invitation { margin: 10px 0 0; color: var(--subtle); font-size: .875rem; line-height: 1.5; }
.destinations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: clamp(24px, 5svh, 40px); margin-top: clamp(30px, 6svh, 45px); }
.destination { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; min-width: 0; min-height: 164px; padding: 5px 4px 8px; border-radius: 22px; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.floating-icon { position: relative; display: grid; place-items: center; width: var(--icon-size); height: var(--icon-size); transition: transform 200ms cubic-bezier(.22,.8,.25,1); }
.floating-icon::after { content: ''; position: absolute; z-index: 0; bottom: -11px; left: 14%; width: 72%; height: 8px; border-radius: 50%; background: var(--shadow); filter: blur(7px); }
.brand-mark { position: relative; z-index: 1; display: block; width: 100%; height: 100%; background: var(--brand); -webkit-mask: var(--brand-logo) no-repeat center / contain; mask: var(--brand-logo) no-repeat center / contain; }
.spotify { --brand: #1dc55e; --brand-logo: url('/assets/artist-floating/spotify.svg'); }
.apple-music { --brand: #fa3c59; --brand-logo: url('/assets/artist-floating/applemusic.svg'); transform: rotate(7deg) scale(.91); }
.youtube { --brand: #ff2222; --brand-logo: url('/assets/artist-floating/youtube.svg'); transform: rotate(-7deg); }
.patreon { --brand: var(--patreon); --brand-logo: url('/assets/artist-floating/patreon.svg'); transform: rotate(7deg) scale(.96); }
.merch { background: transparent url('/assets/artist-floating/merch.svg') no-repeat center / contain; -webkit-mask: none; mask: none; transform: scale(.96); }
.destination--merch { grid-column: 1 / -1; justify-self: center; width: calc((100% - 12px) / 2); }
.platform { font-size: 1rem; font-weight: 600; line-height: 1.4; letter-spacing: -.3px; text-align: center; }
.destination:focus-visible, button:focus-visible, .privacy-panel a:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) { .destination:hover .floating-icon { transform: translateY(-5px) rotate(-2deg); } }
.destination:active .floating-icon { transform: translateY(3px) scale(.93); }
.footer { margin-top: clamp(34px, 7svh, 58px); text-align: center; color: var(--subtle); font-size: .75rem; line-height: 1.5; }
.footer p { margin: 0; }
.okay-emoji { margin-left: 3px; font-size: .9375rem; }
@media (max-width: 350px), (max-height: 640px) and (orientation: portrait) { :root { --icon-size: 100px; } .links-page { padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); } .destinations { row-gap: 24px; margin-top: 28px; } .destination { gap: 18px; min-height: 146px; } .footer { margin-top: 30px; } }
@media (prefers-reduced-motion: reduce) { .floating-icon { transition: none; } .destination:hover .floating-icon, .destination:active .floating-icon { transform: none; } }