/* Link page template "pastel" (core/linkrender.py builds its markup; the page sets --accent, --btn-radius and --bg-image). */
:root { --accent: #f9a8d4; --btn-radius: 22px; --bg-image: none; --avatar-scale: 1.3; --ink: #2f2a45; --muted: #625b7e; --cream: #fff8f3; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font: 400 16px/1.5 ui-rounded, "SF Pro Rounded", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--cream); }
.bg { position: fixed; inset: 0; overflow: hidden; background: var(--bg-image) center / cover no-repeat; }
.bg::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--cream) 78%, transparent); }
.blob { position: absolute; border-radius: 50%; filter: blur(48px); opacity: 0.75; }
.b1 { width: 320px; height: 320px; top: -80px; left: -90px; background: var(--accent); }
.b2 { width: 280px; height: 280px; top: 220px; right: -120px; background: color-mix(in srgb, var(--accent) 45%, #a5f3fc); }
.b3 { width: 300px; height: 300px; bottom: -120px; left: 10%; background: color-mix(in srgb, var(--accent) 40%, #fde68a); }
main { position: relative; max-width: 460px; margin: 0 auto; padding: 52px 20px 76px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.avatar { width: calc(116px * var(--avatar-scale)); height: calc(116px * var(--avatar-scale)); border-radius: 50%; object-fit: cover; border: 5px solid #fff; box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 55%, transparent); }
h1 { margin: 0; font-size: 28px; font-weight: 800; }
.bio { margin: -10px 0 0; text-align: center; color: var(--muted); max-width: 330px; }
.socials { display: flex; gap: 10px; }
.socials a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 6px 16px rgba(47, 42, 69, 0.08); }
.socials a:hover { background: var(--accent); }
.socials svg { width: 21px; height: 21px; }
.featured { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: min(calc(var(--btn-radius) + 4px), 30px); background: var(--accent); color: var(--ink); text-decoration: none; box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 55%, transparent); }
.featured img { width: 72px; height: 72px; flex: none; border-radius: min(var(--btn-radius), 22px); object-fit: cover; object-position: center 20%; border: 3px solid #fff; }
.featured strong { display: block; font-size: 18px; font-weight: 800; }
.featured small { display: block; font-size: 14px; color: var(--ink); opacity: 0.8; }
.pill { margin-left: auto; flex: none; padding: 4px 10px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 800; }
.links { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.link { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px 10px 10px; border-radius: var(--btn-radius); background: rgba(255, 255, 255, 0.85); color: var(--ink); text-decoration: none; font-weight: 700; box-shadow: 0 8px 22px rgba(47, 42, 69, 0.07); transition: transform 0.15s; }
.link:hover { transform: scale(1.02); }
.link .ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 35%, #fff); }
.link .ico svg { width: 21px; height: 21px; }
.link small { display: block; font-weight: 500; font-size: 13px; color: var(--muted); }
.link .ico img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.link .ico { overflow: hidden; }
.lp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
h1, .link strong, .link span, .featured strong { overflow-wrap: anywhere; hyphens: auto; }
/* 18+ links: a lock on the link, the click asks for the age first */
/* the "Online" badge (core/linkrender.py `Page.badge`): only while the page's schedule says so */
.lp-online { display: inline-flex; align-items: center; gap: 7px; align-self: center; width: fit-content; padding: 4px 12px 4px 10px; border-radius: 999px; font: 600 13px/1.3 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0.01em; text-transform: none; white-space: nowrap; }
.lp-online i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22); }
.lp-online { margin-top: -8px; color: var(--ink); background: #fff; box-shadow: 0 6px 18px rgba(47, 42, 69, 0.08); }
/* the badge's motion (core/linkpages.py ONLINE_ANIMATIONS, chosen per page); none for people who ask for less motion */
.lp-online i { position: relative; }
.lp-online-pulse i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: lp-pulse 2s ease-out infinite; }  /* the ping is its own layer: the dot keeps its look (ring, glow) */
.lp-online-blink i { animation: lp-blink 1.6s ease-in-out infinite; }
.lp-online-glow { animation: lp-glow 2.4s ease-in-out infinite; }
@keyframes lp-pulse { 0% { transform: scale(1); opacity: 0.6; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes lp-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes lp-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(34, 197, 94, 0)); } 50% { filter: drop-shadow(0 0 7px rgba(34, 197, 94, 0.7)); } }
@media (prefers-reduced-motion: reduce) { .lp-online, .lp-online i, .lp-online i::after { animation: none; } .lp-online i::after { display: none; } }