<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="description" content="Danilo Stern-Sapad is a writer, technologist, entrepreneur, and above all a creator. Explore his fiction, music, business ventures, and more."><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="author" content="Danilo Stern-Sapad"><link rel="icon" type="image/png" href="/favicon.png"><link rel="apple-touch-icon" href="/favicon.png"><link rel="canonical" href="https://danilosapad.com/"><!-- Open Graph --><meta property="og:title" content="Danilo Stern-Sapad - Creator, Author, Writer, Technologist, Entrepreneur"><meta property="og:description" content="Danilo Stern-Sapad is a writer, technologist, entrepreneur, and above all a creator. Explore his fiction, music, business ventures, and more."><meta property="og:url" content="https://danilosapad.com/"><meta property="og:type" content="website"><meta property="og:site_name" content="Danilo Stern-Sapad"><meta property="og:image" content="https://danilosapad.com/images/og-default.png"><meta property="og:image:type" content="image/png"><meta property="og:image:width" content="1024"><meta property="og:image:height" content="1024"><meta property="og:image:alt" content="Danilo Stern-Sapad — Writer, Technologist, Creator"><!-- Twitter Card --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Danilo Stern-Sapad - Creator, Author, Writer, Technologist, Entrepreneur"><meta name="twitter:description" content="Danilo Stern-Sapad is a writer, technologist, entrepreneur, and above all a creator. Explore his fiction, music, business ventures, and more."><meta name="twitter:image" content="https://danilosapad.com/images/og-default.png"><title>Danilo Stern-Sapad - Creator, Author, Writer, Technologist, Entrepreneur</title><!-- Google Fonts: Cinzel + EB Garamond + JetBrains Mono --><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@300;400;500;600&display=swap" rel="stylesheet"><!-- Enable JS-driven animations BEFORE paint (no FOUC) --><script type="module" src="/_astro/Layout.astro_astro_type_script_index_0_lang.BLD-yDR9.js"></script><link rel="stylesheet" href="/_astro/alice-reborn.BkdbOdcz.css">
<style>.rail-item[data-astro-cid-nsulpldk].active,.rail-item[data-astro-cid-nsulpldk]:hover{color:var(--gold)}.rail-item[data-astro-cid-nsulpldk].active .rail-num[data-astro-cid-nsulpldk],.rail-item[data-astro-cid-nsulpldk]:hover .rail-num[data-astro-cid-nsulpldk]{opacity:1}.rail-item[data-astro-cid-nsulpldk].active .rail-line[data-astro-cid-nsulpldk],.rail-item[data-astro-cid-nsulpldk]:hover .rail-line[data-astro-cid-nsulpldk]{width:28px}.rail-item[data-astro-cid-nsulpldk].active .rail-name[data-astro-cid-nsulpldk],.rail-item[data-astro-cid-nsulpldk]:hover .rail-name[data-astro-cid-nsulpldk]{opacity:1}@media (max-width: 767px){#side-rail[data-astro-cid-nsulpldk],#social-corner[data-astro-cid-nsulpldk]{display:none!important}#mobile-menu-btn[data-astro-cid-nsulpldk]{display:flex!important}#hud-corner[data-astro-cid-nsulpldk]{font-size:8px;opacity:.5}}@media (max-width: 767px){#about[data-astro-cid-gyblggbs]>div[data-astro-cid-gyblggbs]{grid-template-columns:1fr!important}}.book-spread-link[data-astro-cid-v5f2mbxy]:hover .book-image-wrap[data-astro-cid-v5f2mbxy]{transform:translateY(-6px)}.book-spread-link[data-astro-cid-v5f2mbxy]:hover .book-cover-img[data-astro-cid-v5f2mbxy]{transform:scale(1.04);filter:saturate(1.1) contrast(1.02)!important}.book-spread-link[data-astro-cid-v5f2mbxy]:hover .book-cta-arrow[data-astro-cid-v5f2mbxy]{transform:translate(6px)}@media (max-width: 900px){.book-spread-link[data-astro-cid-v5f2mbxy]{grid-template-columns:1fr!important;direction:ltr!important}.book-spread-link[data-astro-cid-v5f2mbxy]>div[data-astro-cid-v5f2mbxy]:first-child{max-width:420px;margin:0 auto}}#sc-modal[data-astro-cid-c2fdjekn].open{display:flex!important}@keyframes sc-fade-in{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}#sc-modal[data-astro-cid-c2fdjekn].open #sc-panel[data-astro-cid-c2fdjekn]{animation:sc-fade-in .3s cubic-bezier(.2,.7,.2,1) forwards}@media (max-width: 900px){#music[data-astro-cid-c2fdjekn]>div[data-astro-cid-c2fdjekn]>div[data-astro-cid-c2fdjekn]:last-of-type{grid-template-columns:1fr!important}}@keyframes beacon-pulse{0%{transform:scale(.9);opacity:.6}to{transform:scale(1.1);opacity:0}}@media (max-width: 767px){#contact[data-astro-cid-svshx33u]>div[data-astro-cid-svshx33u]>div[data-astro-cid-svshx33u]:last-of-type{grid-template-columns:1fr!important}#contact[data-astro-cid-svshx33u]>div[data-astro-cid-svshx33u]>div[data-astro-cid-svshx33u]:last-of-type>div[data-astro-cid-svshx33u]:first-child{max-width:280px;margin:0 auto}}
</style></head> <body> <canvas id="starfield" aria-hidden="true"></canvas> <div id="page-content">   <!-- HUD Corner (top-left) --><div id="hud-corner" aria-hidden="true" class="font-mono" style="position:fixed;top:22px;left:28px;z-index:30;font-size:10px;letter-spacing:0.3em;color:var(--gold-deep);display:flex;flex-direction:column;gap:6px;" data-astro-cid-nsulpldk> <div style="display:flex;align-items:center;gap:8px;" data-astro-cid-nsulpldk> <span style="width:6px;height:6px;background:var(--aurora);border-radius:50%;box-shadow:0 0 8px var(--aurora);" data-astro-cid-nsulpldk></span>
SIGNAL · NOMINAL
</div> <div id="hud-time" style="opacity:0.6;" data-astro-cid-nsulpldk>--:--:-- UTC</div> <div style="opacity:0.4;" data-astro-cid-nsulpldk>SECTOR · DS-7 / EARTH</div> </div> <!-- Top-right corner: nav links + social icons (matches inner header style) --> <div id="social-corner" style="position:fixed;top:16px;right:24px;z-index:30;display:flex;align-items:center;gap:20px;" data-astro-cid-nsulpldk> <nav class="font-mono" style="display:flex;gap:20px;font-size:10px;letter-spacing:0.2em;color:var(--parchment-dim);" data-astro-cid-nsulpldk> <a href="#writing" style="text-decoration:none;color:inherit;transition:color 0.3s;" onmouseover="this.style.color='var(--gold)'" onmouseout="this.style.color='var(--parchment-dim)'" data-astro-cid-nsulpldk>CODEX</a> <a href="#music" style="text-decoration:none;color:inherit;transition:color 0.3s;" onmouseover="this.style.color='var(--gold)'" onmouseout="this.style.color='var(--parchment-dim)'" data-astro-cid-nsulpldk>AETHER</a> <a href="/lyrics" style="text-decoration:none;color:inherit;transition:color 0.3s;" onmouseover="this.style.color='var(--gold)'" onmouseout="this.style.color='var(--parchment-dim)'" data-astro-cid-nsulpldk>TRANSMISSIONS</a> <a href="#websites" style="text-decoration:none;color:inherit;transition:color 0.3s;" onmouseover="this.style.color='var(--gold)'" onmouseout="this.style.color='var(--parchment-dim)'" data-astro-cid-nsulpldk>EMPIRES</a> <a href="/quotes" style="text-decoration:none;color:inherit;transition:color 0.3s;" onmouseover="this.style.color='var(--gold)'" onmouseout="this.style.color='var(--parchment-dim)'" data-astro-cid-nsulpldk>SAYINGS</a> <a href="#contact" style="text-decoration:none;color:inherit;transition:color 0.3s;" onmouseover="this.style.color='var(--gold)'" onmouseout="this.style.color='var(--parchment-dim)'" data-astro-cid-nsulpldk>BEACON</a> </nav> <div style="display:flex;align-items:center;gap:12px;color:var(--parchment-dim);" data-astro-cid-nsulpldk> <a href="https://www.linkedin.com/in/danilosapad/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" style="color:inherit;transition:color 0.3s;" onmouseover="this.style.color='var(--gold)'" onmouseout="this.style.color='var(--parchment-dim)'" data-astro-cid-nsulpldk> <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" data-astro-cid-nsulpldk><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" data-astro-cid-nsulpldk></path></svg> </a> <a href="https://x.com/danilosapad" target="_blank" rel="noopener noreferrer" aria-label="X" style="color:inherit;transition:color 0.3s;" onmouseover="this.style.color='var(--gold)'" onmouseout="this.style.color='var(--parchment-dim)'" data-astro-cid-nsulpldk> <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" data-astro-cid-nsulpldk><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" data-astro-cid-nsulpldk></path></svg> </a> <a href="https://instagram.com/danilosapad" target="_blank" rel="noopener noreferrer" aria-label="Instagram" style="color:inherit;transition:color 0.3s;" onmouseover="this.style.color='var(--gold)'" onmouseout="this.style.color='var(--parchment-dim)'" data-astro-cid-nsulpldk> <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" data-astro-cid-nsulpldk><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" data-astro-cid-nsulpldk></path></svg> </a> <a href="https://medium.com/@danilosapad" target="_blank" rel="noopener noreferrer" aria-label="Medium" style="color:inherit;transition:color 0.3s;" onmouseover="this.style.color='var(--gold)'" onmouseout="this.style.color='var(--parchment-dim)'" data-astro-cid-nsulpldk> <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" data-astro-cid-nsulpldk><path d="M13.54 12a6.8 6.8 0 01-6.77 6.82A6.8 6.8 0 010 12a6.8 6.8 0 016.77-6.82A6.8 6.8 0 0113.54 12zM20.96 12c0 3.54-1.51 6.42-3.38 6.42-1.87 0-3.39-2.88-3.39-6.42s1.52-6.42 3.39-6.42 3.38 2.88 3.38 6.42M24 12c0 3.17-.53 5.75-1.19 5.75-.66 0-1.19-2.58-1.19-5.75s.53-5.75 1.19-5.75C23.47 6.25 24 8.83 24 12z" data-astro-cid-nsulpldk></path></svg> </a> </div> </div> <!-- Side Rail (right) — num + line + name --> <nav id="side-rail" aria-label="Section navigation" style="position:fixed;right:24px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;z-index:30;padding:20px 14px;" data-astro-cid-nsulpldk> <button class="rail-item" data-realm="home" onclick="document.getElementById('home')?.scrollIntoView({behavior:'smooth'})" title="Threshold" style="background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;gap:10px;color:var(--parchment-dim);transition:color 0.4s;" data-astro-cid-nsulpldk> <span class="rail-num font-mono" style="font-size:9px;letter-spacing:0.2em;opacity:0.5;width:18px;text-align:right;transition:opacity 0.4s;" data-astro-cid-nsulpldk> 00 </span> <span class="rail-line" style="height:1px;background:currentColor;width:14px;transition:width 0.4s;" data-astro-cid-nsulpldk></span> <span class="rail-name font-display" style="font-size:10px;letter-spacing:0.2em;opacity:0;transition:opacity 0.4s;white-space:nowrap;" data-astro-cid-nsulpldk> THRESHOLD </span> </button><button class="rail-item" data-realm="about" onclick="document.getElementById('about')?.scrollIntoView({behavior:'smooth'})" title="Cartographer" style="background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;gap:10px;color:var(--parchment-dim);transition:color 0.4s;" data-astro-cid-nsulpldk> <span class="rail-num font-mono" style="font-size:9px;letter-spacing:0.2em;opacity:0.5;width:18px;text-align:right;transition:opacity 0.4s;" data-astro-cid-nsulpldk> 01 </span> <span class="rail-line" style="height:1px;background:currentColor;width:14px;transition:width 0.4s;" data-astro-cid-nsulpldk></span> <span class="rail-name font-display" style="font-size:10px;letter-spacing:0.2em;opacity:0;transition:opacity 0.4s;white-space:nowrap;" data-astro-cid-nsulpldk> CARTOGRAPHER </span> </button><button class="rail-item" data-realm="writing" onclick="document.getElementById('writing')?.scrollIntoView({behavior:'smooth'})" title="Codex" style="background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;gap:10px;color:var(--parchment-dim);transition:color 0.4s;" data-astro-cid-nsulpldk> <span class="rail-num font-mono" style="font-size:9px;letter-spacing:0.2em;opacity:0.5;width:18px;text-align:right;transition:opacity 0.4s;" data-astro-cid-nsulpldk> 02 </span> <span class="rail-line" style="height:1px;background:currentColor;width:14px;transition:width 0.4s;" data-astro-cid-nsulpldk></span> <span class="rail-name font-display" style="font-size:10px;letter-spacing:0.2em;opacity:0;transition:opacity 0.4s;white-space:nowrap;" data-astro-cid-nsulpldk> CODEX </span> </button><button class="rail-item" data-realm="music" onclick="document.getElementById('music')?.scrollIntoView({behavior:'smooth'})" title="Aether" style="background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;gap:10px;color:var(--parchment-dim);transition:color 0.4s;" data-astro-cid-nsulpldk> <span class="rail-num font-mono" style="font-size:9px;letter-spacing:0.2em;opacity:0.5;width:18px;text-align:right;transition:opacity 0.4s;" data-astro-cid-nsulpldk> 03 </span> <span class="rail-line" style="height:1px;background:currentColor;width:14px;transition:width 0.4s;" data-astro-cid-nsulpldk></span> <span class="rail-name font-display" style="font-size:10px;letter-spacing:0.2em;opacity:0;transition:opacity 0.4s;white-space:nowrap;" data-astro-cid-nsulpldk> AETHER </span> </button><button class="rail-item" data-realm="websites" onclick="document.getElementById('websites')?.scrollIntoView({behavior:'smooth'})" title="Concord" style="background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;gap:10px;color:var(--parchment-dim);transition:color 0.4s;" data-astro-cid-nsulpldk> <span class="rail-num font-mono" style="font-size:9px;letter-spacing:0.2em;opacity:0.5;width:18px;text-align:right;transition:opacity 0.4s;" data-astro-cid-nsulpldk> 04 </span> <span class="rail-line" style="height:1px;background:currentColor;width:14px;transition:width 0.4s;" data-astro-cid-nsulpldk></span> <span class="rail-name font-display" style="font-size:10px;letter-spacing:0.2em;opacity:0;transition:opacity 0.4s;white-space:nowrap;" data-astro-cid-nsulpldk> CONCORD </span> </button><button class="rail-item" data-realm="quotes" onclick="document.getElementById('quotes')?.scrollIntoView({behavior:'smooth'})" title="Sayings" style="background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;gap:10px;color:var(--parchment-dim);transition:color 0.4s;" data-astro-cid-nsulpldk> <span class="rail-num font-mono" style="font-size:9px;letter-spacing:0.2em;opacity:0.5;width:18px;text-align:right;transition:opacity 0.4s;" data-astro-cid-nsulpldk> 05 </span> <span class="rail-line" style="height:1px;background:currentColor;width:14px;transition:width 0.4s;" data-astro-cid-nsulpldk></span> <span class="rail-name font-display" style="font-size:10px;letter-spacing:0.2em;opacity:0;transition:opacity 0.4s;white-space:nowrap;" data-astro-cid-nsulpldk> SAYINGS </span> </button><button class="rail-item" data-realm="contact" onclick="document.getElementById('contact')?.scrollIntoView({behavior:'smooth'})" title="Beacon" style="background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;gap:10px;color:var(--parchment-dim);transition:color 0.4s;" data-astro-cid-nsulpldk> <span class="rail-num font-mono" style="font-size:9px;letter-spacing:0.2em;opacity:0.5;width:18px;text-align:right;transition:opacity 0.4s;" data-astro-cid-nsulpldk> 06 </span> <span class="rail-line" style="height:1px;background:currentColor;width:14px;transition:width 0.4s;" data-astro-cid-nsulpldk></span> <span class="rail-name font-display" style="font-size:10px;letter-spacing:0.2em;opacity:0;transition:opacity 0.4s;white-space:nowrap;" data-astro-cid-nsulpldk> BEACON </span> </button> </nav> <!-- No-JS fallback nav (hidden when JS is available) --> <noscript> <nav style="position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(6,4,13,0.96);padding:10px 16px;display:flex;justify-content:center;gap:20px;flex-wrap:wrap;border-bottom:1px solid rgba(245,217,138,0.18);" data-astro-cid-nsulpldk> <a href="#writing" style="color:#b8ad95;text-decoration:none;font-size:10px;letter-spacing:0.2em;font-family:'JetBrains Mono',monospace,sans-serif;" data-astro-cid-nsulpldk>CODEX</a> <a href="#music" style="color:#b8ad95;text-decoration:none;font-size:10px;letter-spacing:0.2em;font-family:'JetBrains Mono',monospace,sans-serif;" data-astro-cid-nsulpldk>AETHER</a> <a href="/lyrics" style="color:#b8ad95;text-decoration:none;font-size:10px;letter-spacing:0.2em;font-family:'JetBrains Mono',monospace,sans-serif;" data-astro-cid-nsulpldk>TRANSMISSIONS</a> <a href="#websites" style="color:#b8ad95;text-decoration:none;font-size:10px;letter-spacing:0.2em;font-family:'JetBrains Mono',monospace,sans-serif;" data-astro-cid-nsulpldk>EMPIRES</a> <a href="/quotes" style="color:#b8ad95;text-decoration:none;font-size:10px;letter-spacing:0.2em;font-family:'JetBrains Mono',monospace,sans-serif;" data-astro-cid-nsulpldk>SAYINGS</a> <a href="#contact" style="color:#b8ad95;text-decoration:none;font-size:10px;letter-spacing:0.2em;font-family:'JetBrains Mono',monospace,sans-serif;" data-astro-cid-nsulpldk>BEACON</a> </nav> </noscript> <!-- Mobile hamburger --> <button id="mobile-menu-btn" aria-label="Open navigation" aria-expanded="false" style="display:none;position:fixed;top:16px;right:24px;z-index:101;background:rgba(26,16,48,0.92);border:1px solid var(--line);border-radius:50%;width:48px;height:48px;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(8px);color:var(--gold);font-size:18px;transition:border-color 0.3s;" data-astro-cid-nsulpldk> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" data-astro-cid-nsulpldk> <line x1="3" y1="8" x2="21" y2="8" data-astro-cid-nsulpldk></line><line x1="3" y1="16" x2="21" y2="16" data-astro-cid-nsulpldk></line> </svg> </button> <!-- Mobile full-screen panel --> <div id="mobile-nav-panel" role="dialog" aria-modal="true" aria-label="Navigation" style="position:fixed;inset:0;background:rgba(6,4,13,0.97);backdrop-filter:blur(12px);z-index:102;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;transform:translateX(100%);transition:transform 0.4s cubic-bezier(.2,.7,.2,1);" data-astro-cid-nsulpldk> <button id="mobile-close-btn" aria-label="Close navigation" style="position:absolute;top:16px;right:24px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--parchment-dim);font-size:22px;cursor:pointer;transition:color 0.3s;" data-astro-cid-nsulpldk>✕</button> <a href="#writing" class="mobile-nav-link" data-astro-cid-nsulpldk>CODEX</a> <a href="#music" class="mobile-nav-link" data-astro-cid-nsulpldk>AETHER</a> <a href="/lyrics" class="mobile-nav-link" data-astro-cid-nsulpldk>TRANSMISSIONS</a> <a href="#websites" class="mobile-nav-link" data-astro-cid-nsulpldk>EMPIRES</a> <a href="/quotes" class="mobile-nav-link" data-astro-cid-nsulpldk>SAYINGS</a> <a href="#contact" class="mobile-nav-link" data-astro-cid-nsulpldk>BEACON</a> </div>   <section data-realm="hero" id="home" style="min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:120px 6vw 60px;position:relative;"> <!-- BigSigil behind name --> <div aria-hidden="true" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);width:min(80vw,700px);height:min(80vw,700px);pointer-events:none;opacity:0;transition:opacity 2.5s ease;" id="big-sigil-wrapper"> <svg viewBox="0 0 600 600" style="width:100%;height:100%;"> <defs> <radialGradient id="coreGlow" cx="50%" cy="50%" r="50%"> <stop offset="0%" stop-color="#f5d98a" stop-opacity="0.4"></stop> <stop offset="40%" stop-color="#d97757" stop-opacity="0.1"></stop> <stop offset="100%" stop-color="#0a0816" stop-opacity="0"></stop> </radialGradient> </defs> <!-- Core glow --> <circle cx="300" cy="300" r="200" fill="url(#coreGlow)"></circle> <!-- Rotating outer ring --> <g style="transform-origin:300px 300px;animation:spin-slow 120s linear infinite;"> <circle cx="300" cy="300" r="280" stroke="var(--gold-deep)" stroke-width="0.5" fill="none" opacity="0.7"></circle> <circle cx="300" cy="300" r="280" stroke="var(--gold)" stroke-width="0.4" fill="none" stroke-dasharray="2 18" opacity="0.9"></circle> <line x1="572" y1="300" x2="588" y2="300" stroke="var(--gold)" stroke-width="1" opacity="0.9"></line><line x1="562.7318247506266" y1="370.3987802678856" x2="578.1866379712517" y2="374.53988498952594" stroke="var(--gold)" stroke-width="0.4" opacity="0.4"></line><line x1="535.5589098293674" y1="436" x2="549.4153162899183" y2="444" stroke="var(--gold)" stroke-width="0.4" opacity="0.4"></line><line x1="492.33304448274095" y1="492.3330444827409" x2="503.64675298172574" y2="503.6467529817257" stroke="var(--gold)" stroke-width="0.4" opacity="0.4"></line><line x1="436" y1="535.5589098293673" x2="444" y2="549.4153162899183" stroke="var(--gold)" stroke-width="0.4" opacity="0.4"></line><line x1="370.3987802678856" y1="562.7318247506266" x2="374.53988498952594" y2="578.1866379712517" stroke="var(--gold)" stroke-width="0.4" opacity="0.4"></line><line x1="300" y1="572" x2="300" y2="588" stroke="var(--gold)" stroke-width="1" opacity="0.9"></line><line x1="229.60121973211432" y1="562.7318247506266" x2="225.460115010474" y2="578.1866379712517" stroke="var(--gold)" stroke-width="0.4" opacity="0.4"></line><line x1="164.00000000000006" y1="535.5589098293674" x2="156.00000000000006" y2="549.4153162899183" stroke="var(--gold)" stroke-width="0.4" opacity="0.4"></line><line x1="107.66695551725908" y1="492.33304448274095" x2="96.35324701827432" y2="503.64675298172574" stroke="var(--gold)" stroke-width="0.4" opacity="0.4"></line><line x1="64.44109017063266" y1="436" x2="50.58468371008166" y2="444" stroke="var(--gold)" stroke-width="0.4" opacity="0.4"></line><line x1="37.26817524937343" y1="370.39878026788574" x2="21.813362028748372" y2="374.53988498952606" stroke="var(--gold)" stroke-width="0.4" opacity="0.4"></line><line x1="28" y1="300.00000000000006" x2="12" y2="300.00000000000006" stroke="var(--gold)" stroke-width="1" opacity="0.9"></line><line x1="37.26817524937337" y1="229.60121973211446" x2="21.813362028748315" y2="225.46011501047414" stroke="var(--gold)" stroke-width="0.4" opacity="0.4"></line><line x1="64.44109017063269" y1="163.99999999999997" x2="50.58468371008169" y2="155.99999999999997" stroke="var(--gold)" stroke-width="0.4" opacity="0.4"></line><line x1="107.66695551725903" y1="107.66695551725908" x2="96.35324701827426" y2="96.35324701827432" stroke="var(--gold)" stroke-width="0.4" opacity="0.4"></line><line x1="163.9999999999999" y1="64.44109017063272" x2="155.9999999999999" y2="50.58468371008172" stroke="var(--gold)" stroke-width="0.4" opacity="0.4"></line><line x1="229.60121973211437" y1="37.26817524937343" x2="225.46011501047406" y2="21.813362028748315" stroke="var(--gold)" stroke-width="0.4" opacity="0.4"></line><line x1="299.99999999999994" y1="28" x2="299.99999999999994" y2="12" stroke="var(--gold)" stroke-width="1" opacity="0.9"></line><line x1="370.3987802678855" y1="37.26817524937337" x2="374.53988498952583" y2="21.813362028748315" stroke="var(--gold)" stroke-width="0.4" opacity="0.4"></line><line x1="436" y1="64.44109017063269" x2="444" y2="50.58468371008169" stroke="var(--gold)" stroke-width="0.4" opacity="0.4"></line><line x1="492.3330444827409" y1="107.66695551725903" x2="503.6467529817256" y2="96.35324701827426" stroke="var(--gold)" stroke-width="0.4" opacity="0.4"></line><line x1="535.5589098293672" y1="163.9999999999999" x2="549.4153162899182" y2="155.9999999999999" stroke="var(--gold)" stroke-width="0.4" opacity="0.4"></line><line x1="562.7318247506266" y1="229.60121973211437" x2="578.1866379712517" y2="225.46011501047406" stroke="var(--gold)" stroke-width="0.4" opacity="0.4"></line> <text x="300" y="-5" fill="var(--gold)" font-size="10" font-family="JetBrains Mono, monospace" letter-spacing="3" text-anchor="middle" dominant-baseline="middle" opacity="0.9">ASTRA</text><text x="605" y="300" fill="var(--gold)" font-size="10" font-family="JetBrains Mono, monospace" letter-spacing="3" text-anchor="middle" dominant-baseline="middle" opacity="0.9">LIBRI</text><text x="300" y="605" fill="var(--gold)" font-size="10" font-family="JetBrains Mono, monospace" letter-spacing="3" text-anchor="middle" dominant-baseline="middle" opacity="0.9">AETHER</text><text x="-5" y="300.00000000000006" fill="var(--gold)" font-size="10" font-family="JetBrains Mono, monospace" letter-spacing="3" text-anchor="middle" dominant-baseline="middle" opacity="0.9">CONCORDIA</text> </g> <!-- Middle ring (counter-rotation) --> <g style="transform-origin:300px 300px;animation:spin-rev 90s linear infinite;"> <circle cx="300" cy="300" r="210" stroke="var(--aurora-deep)" stroke-width="0.4" fill="none" opacity="0.6"></circle> <circle cx="300" cy="300" r="210" stroke="var(--aurora)" stroke-width="0.3" fill="none" stroke-dasharray="1 6" opacity="0.7"></circle> </g> <!-- Inner geometric (slow spin) --> <g style="transform-origin:300px 300px;animation:spin-slow 200s linear infinite;" opacity="0.7"> <polygon points="300,140 438,380 162,380" stroke="var(--gold)" stroke-width="0.6" fill="none" opacity="0.5"></polygon> <polygon points="300,460 162,220 438,220" stroke="var(--gold)" stroke-width="0.6" fill="none" opacity="0.5"></polygon> <circle cx="300" cy="300" r="160" stroke="var(--gold-deep)" stroke-width="0.5" fill="none"></circle> <circle cx="300" cy="300" r="120" stroke="var(--gold-deep)" stroke-width="0.4" fill="none" stroke-dasharray="3 6"></circle> </g> <!-- Center sun --> <g opacity="0.8"> <circle cx="300" cy="300" r="40" stroke="var(--gold)" stroke-width="0.8" fill="none"></circle> <circle cx="300" cy="300" r="50" stroke="var(--gold)" stroke-width="0.4" fill="none" stroke-dasharray="1 3"></circle> <line x1="354" y1="300" x2="372" y2="300" stroke="var(--gold)" stroke-width="0.8"></line><line x1="338.1837661840736" y1="338.18376618407353" x2="350.91168824543144" y2="350.91168824543144" stroke="var(--gold)" stroke-width="0.8"></line><line x1="300" y1="354" x2="300" y2="372" stroke="var(--gold)" stroke-width="0.8"></line><line x1="261.81623381592647" y1="338.1837661840736" x2="249.08831175456856" y2="350.91168824543144" stroke="var(--gold)" stroke-width="0.8"></line><line x1="246" y1="300" x2="228" y2="300" stroke="var(--gold)" stroke-width="0.8"></line><line x1="261.8162338159264" y1="261.81623381592647" x2="249.08831175456856" y2="249.08831175456856" stroke="var(--gold)" stroke-width="0.8"></line><line x1="300" y1="246" x2="300" y2="228" stroke="var(--gold)" stroke-width="0.8"></line><line x1="338.18376618407353" y1="261.8162338159264" x2="350.9116882454314" y2="249.08831175456856" stroke="var(--gold)" stroke-width="0.8"></line> </g> </svg> </div> <!-- Latin overline --> <div class="font-display" id="hero-overline" style="font-size:12px;letter-spacing:0.6em;color:var(--gold-deep);opacity:0;transition:opacity 1s ease,transform 1s ease;transform:translateY(-12px);margin-bottom:28px;">
✦&nbsp; CODEX &nbsp;·&nbsp; MMXXVI &nbsp;✦
</div> <!-- Name --> <h1 id="hero-name" style="position:relative;font-family:'Cinzel',serif;font-weight:700;font-size:clamp(44px,9vw,132px);line-height:0.95;letter-spacing:0.04em;color:var(--parchment);text-shadow:0 0 40px rgba(245,217,138,0.25),0 0 80px rgba(127,217,212,0.12);text-align:center;opacity:0;transform:translateY(20px) scale(0.98);transition:opacity 1.6s ease,transform 1.6s ease;"> <span style="display:block;">DANILO</span> <span aria-hidden="true" style="display:flex;align-items:center;justify-content:center;gap:0.7em;margin:0.18em 0;font-size:0.18em;letter-spacing:0.5em;color:var(--gold);opacity:0.85;"> <span style="height:1px;width:1.6em;background:currentColor;"></span> <span>✦</span> <span style="height:1px;width:1.6em;background:currentColor;"></span> </span> <span style="display:block;color:var(--gold);">STERN<span style="color:var(--gold);margin:0 0.04em;">-</span>SAPAD</span> </h1> <!-- Subtitle --> <div id="hero-subtitle" style="margin-top:36px;opacity:0;transform:translateY(12px);transition:opacity 1.4s ease,transform 1.4s ease;text-align:center;max-width:720px;"> <div class="ornament" style="margin-bottom:22px;"> <span style="font-family:'Cinzel',serif;font-size:10px;letter-spacing:0.4em;color:var(--gold);">· ✦ ·</span> </div> <p style="font-family:'EB Garamond',serif;font-style:italic;font-size:clamp(18px,1.8vw,24px);color:var(--parchment-dim);line-height:1.5;">
Creator of worlds. Composer of anthems. Commander of empires.
</p> </div> <!-- CTA --> <button id="hero-cta" onclick="document.getElementById('about')?.scrollIntoView({behavior:'smooth'})" style="margin-top:56px;background:transparent;border:1px solid var(--gold-deep);color:var(--gold);padding:16px 36px;font-family:'Cinzel',serif;font-size:13px;letter-spacing:0.4em;text-transform:uppercase;cursor:pointer;position:relative;opacity:0;transform:translateY(8px);transition:opacity 1.2s ease,transform 1.2s ease,background 0.4s,color 0.4s;" onmouseenter="this.style.background='var(--gold)';this.style.color='var(--void)';" onmouseleave="this.style.background='transparent';this.style.color='var(--gold)';"> <!-- Corner brackets --> <span style="position:absolute;top:-5px;left:-5px;width:8px;height:8px;border-top:1px solid var(--gold);border-left:1px solid var(--gold);pointer-events:none;"></span> <span style="position:absolute;top:-5px;right:-5px;width:8px;height:8px;border-top:1px solid var(--gold);border-right:1px solid var(--gold);pointer-events:none;"></span> <span style="position:absolute;bottom:-5px;left:-5px;width:8px;height:8px;border-bottom:1px solid var(--gold);border-left:1px solid var(--gold);pointer-events:none;"></span> <span style="position:absolute;bottom:-5px;right:-5px;width:8px;height:8px;border-bottom:1px solid var(--gold);border-right:1px solid var(--gold);pointer-events:none;"></span>
Enter the Codex
</button> <!-- Scroll indicator --> <div id="hero-descend" style="position:absolute;bottom:30px;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 1s ease;display:flex;flex-direction:column;align-items:center;gap:8px;"> <span class="font-display" style="font-size:10px;letter-spacing:0.4em;color:var(--parchment-dim);">EXPLORE</span> <span style="width:1px;height:36px;background:linear-gradient(to bottom,var(--gold-deep),transparent);animation:drift 2s ease-in-out infinite;"></span> </div> </section> <script type="module">const o=document.getElementById("big-sigil-wrapper"),e=document.getElementById("hero-overline"),t=document.getElementById("hero-name"),s=document.getElementById("hero-subtitle"),n=document.getElementById("hero-cta"),l=document.getElementById("hero-descend");setTimeout(()=>{o&&(o.style.opacity="1"),e&&(e.style.opacity="1",e.style.transform="translateY(0)"),t&&(t.style.opacity="1",t.style.transform="translateY(0) scale(1)")},200);setTimeout(()=>{s&&(s.style.opacity="1",s.style.transform="translateY(0)")},1400);setTimeout(()=>{n&&(n.style.opacity="1",n.style.transform="translateY(0)"),l&&(l.style.opacity="0.6")},2400);</script> <section data-realm="cartographer" id="about" style="position:relative;padding:60px 6vw 120px;min-height:auto;" data-astro-cid-gyblggbs> <div style="max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(28px,4vw,80px);align-items:center;" data-astro-cid-gyblggbs> <!-- Left: profile image --> <div class="reveal" style="position:relative;" data-astro-cid-gyblggbs> <div style="aspect-ratio:3/4;position:relative;border:1px solid var(--line-strong);padding:10px;overflow:hidden;" data-astro-cid-gyblggbs> <!-- Corner brackets --> <span style="position:absolute;top:-1px;left:-1px;width:18px;height:18px;border-top:1px solid var(--gold);border-left:1px solid var(--gold);pointer-events:none;z-index:2;" data-astro-cid-gyblggbs></span> <span style="position:absolute;top:-1px;right:-1px;width:18px;height:18px;border-top:1px solid var(--gold);border-right:1px solid var(--gold);pointer-events:none;z-index:2;" data-astro-cid-gyblggbs></span> <span style="position:absolute;bottom:-1px;left:-1px;width:18px;height:18px;border-bottom:1px solid var(--gold);border-left:1px solid var(--gold);pointer-events:none;z-index:2;" data-astro-cid-gyblggbs></span> <span style="position:absolute;bottom:-1px;right:-1px;width:18px;height:18px;border-bottom:1px solid var(--gold);border-right:1px solid var(--gold);pointer-events:none;z-index:2;" data-astro-cid-gyblggbs></span> <div style="position:relative;width:100%;height:100%;overflow:hidden;" data-astro-cid-gyblggbs> <img src="/images/danilo-stern-sapad.webp" alt="Danilo Stern-Sapad" style="width:100%;height:100%;object-fit:cover;filter:saturate(0.85) contrast(1.05) brightness(0.95);" data-astro-cid-gyblggbs> <div style="position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(10,8,22,0.6) 100%),linear-gradient(180deg,transparent 60%,rgba(10,8,22,0.5));pointer-events:none;" data-astro-cid-gyblggbs></div> </div> </div> <div class="font-display" style="position:absolute;bottom:-34px;left:0;right:0;font-size:11px;letter-spacing:0.35em;color:var(--gold-deep);text-align:center;" data-astro-cid-gyblggbs>
SUBJECT &nbsp;·&nbsp; D.S.S. &nbsp;·&nbsp; LIVING &nbsp;·&nbsp; CIRCA MMXXVI
</div> </div> <!-- Right: bio text --> <div class="reveal" style="--delay:0.2s;" data-astro-cid-gyblggbs> <div class="font-display" style="font-size:12px;letter-spacing:0.4em;color:var(--gold-deep);margin-bottom:18px;" data-astro-cid-gyblggbs>
ON THE CARTOGRAPHER
</div> <h2 class="font-display" style="font-size:clamp(36px,4.5vw,60px);color:var(--parchment);line-height:1.05;margin-bottom:28px;" data-astro-cid-gyblggbs>
A man of <em style="font-family:'EB Garamond',serif;font-style:italic;color:var(--gold);" data-astro-cid-gyblggbs>many lights</em>.
</h2> <p style="font-size:19px;line-height:1.65;color:var(--parchment);margin-bottom:18px;" data-astro-cid-gyblggbs>
I'm a buidler of worlds. Sometimes on the page, sometimes on the screen, sometimes inside a company. Multiple novels in motion. Songs across different genres. Serial entrepreneur.
</p> <p style="font-size:17px;line-height:1.65;color:var(--parchment-dim);margin-bottom:28px;" data-astro-cid-gyblggbs>
The thread between them is the same: the conviction that imagination is not a luxury, but the only honest way to navigate this universe we all call home. The Codex below is a map of what I've made, and perhaps an invitation to make something with me if you're so inclined.
</p> <!-- Stats row --> <div style="display:flex;gap:36px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:24px;" data-astro-cid-gyblggbs> <div data-astro-cid-gyblggbs> <div class="font-display" style="font-size:clamp(32px,4vw,48px);color:var(--gold);line-height:1;" data-astro-cid-gyblggbs>6</div> <div class="font-mono" style="font-size:10px;letter-spacing:0.3em;color:var(--parchment-dim);margin-top:6px;" data-astro-cid-gyblggbs>GRIMOIRES</div> </div> <div data-astro-cid-gyblggbs> <div class="font-display" style="font-size:clamp(32px,4vw,48px);color:var(--gold);line-height:1;" data-astro-cid-gyblggbs>7</div> <div class="font-mono" style="font-size:10px;letter-spacing:0.3em;color:var(--parchment-dim);margin-top:6px;" data-astro-cid-gyblggbs>SPHERES OF SOUND</div> </div> <div data-astro-cid-gyblggbs> <div class="font-display" style="font-size:clamp(32px,4vw,48px);color:var(--gold);line-height:1;" data-astro-cid-gyblggbs>8</div> <div class="font-mono" style="font-size:10px;letter-spacing:0.3em;color:var(--parchment-dim);margin-top:6px;" data-astro-cid-gyblggbs>SMALL EMPIRES</div> </div> <div data-astro-cid-gyblggbs> <div class="font-display" style="font-size:clamp(32px,4vw,48px);color:var(--gold);line-height:1;" data-astro-cid-gyblggbs>∞</div> <div class="font-mono" style="font-size:10px;letter-spacing:0.3em;color:var(--parchment-dim);margin-top:6px;" data-astro-cid-gyblggbs>STORIES UNWRITTEN</div> </div> </div> </div> </div> </section>  <section data-realm="codex" id="writing" style="position:relative;padding:140px 6vw;min-height:100vh;" data-astro-cid-v5f2mbxy> <div style="max-width:1300px;margin:0 auto;" data-astro-cid-v5f2mbxy> <!-- Realm heading --> <div class="reveal" style="display:flex;flex-direction:column;gap:18px;margin-bottom:56px;" data-astro-cid-v5f2mbxy> <div style="display:flex;align-items:center;gap:20px;" data-astro-cid-v5f2mbxy> <span class="font-mono" style="color:var(--gold-deep);font-size:12px;letter-spacing:0.3em;" data-astro-cid-v5f2mbxy>REALM · 01</span> <span style="flex:1;height:1px;background:linear-gradient(to right,var(--line-strong),transparent);" data-astro-cid-v5f2mbxy></span> <span class="font-mono" style="color:var(--parchment-dim);font-size:11px;letter-spacing:0.3em;" data-astro-cid-v5f2mbxy>LIBER · I</span> </div> <h2 class="font-display" style="font-size:clamp(48px,7vw,96px);font-weight:600;line-height:1;color:var(--parchment);" data-astro-cid-v5f2mbxy>
The Codex<br data-astro-cid-v5f2mbxy> <em style="font-family:'EB Garamond',serif;font-style:italic;font-weight:400;color:var(--gold);" data-astro-cid-v5f2mbxy>of Worlds Unwritten</em> </h2> <p style="font-family:'EB Garamond',serif;font-style:italic;font-size:22px;max-width:720px;color:var(--parchment-dim);" data-astro-cid-v5f2mbxy>
Grimoires. Gravities. Each its own doorway into kingdoms long forgotten, futures yet to come, and the small private hells that make us human.
</p> </div> <!-- Book spreads --> <div style="display:flex;flex-direction:column;gap:clamp(80px,10vw,140px);" data-astro-cid-v5f2mbxy> <div class="reveal book-spread" data-accent="#f3c8d2" data-astro-cid-v5f2mbxy> <a href="/alice-reborn" class="book-spread-link" data-accent="#f3c8d2" style="display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;direction:ltr;text-decoration:none;color:inherit;" data-astro-cid-v5f2mbxy> <!-- Image plate --> <div style="direction:ltr;position:relative;" data-astro-cid-v5f2mbxy> <div class="book-image-wrap" data-accent="#f3c8d2" style="position:relative;aspect-ratio:0.667;overflow:hidden;border:1px solid var(--line);transition:all 0.6s cubic-bezier(.2,.7,.2,1);box-shadow:0 24px 60px -20px rgba(0,0,0,0.6);" data-astro-cid-v5f2mbxy> <img src="/images/alice-reborn-cover.webp" alt="Alice Reborn" class="book-cover-img" style="width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter 0.6s;filter:saturate(0.92) contrast(0.98);" data-astro-cid-v5f2mbxy> <!-- Vignette --> <div style="position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 50%,rgba(6,4,13,0.55) 100%);" data-astro-cid-v5f2mbxy></div> <!-- Corner brackets --> <span style="position:absolute;top:8px;left:8px;width:18px;height:18px;border-top:1px solid #f3c8d2;border-left:1px solid #f3c8d2;pointer-events:none;" data-astro-cid-v5f2mbxy></span> <span style="position:absolute;top:8px;right:8px;width:18px;height:18px;border-top:1px solid #f3c8d2;border-right:1px solid #f3c8d2;pointer-events:none;" data-astro-cid-v5f2mbxy></span> <span style="position:absolute;bottom:8px;left:8px;width:18px;height:18px;border-bottom:1px solid #f3c8d2;border-left:1px solid #f3c8d2;pointer-events:none;" data-astro-cid-v5f2mbxy></span> <span style="position:absolute;bottom:8px;right:8px;width:18px;height:18px;border-bottom:1px solid #f3c8d2;border-right:1px solid #f3c8d2;pointer-events:none;" data-astro-cid-v5f2mbxy></span> <!-- Status pill --> <div class="font-mono" style="position:absolute;top:16px;left:16px;padding:5px 10px;font-size:9px;letter-spacing:0.3em;color:#f3c8d2;background:rgba(6,4,13,0.65);border:1px solid #f3c8d240;backdrop-filter:blur(2px);" data-astro-cid-v5f2mbxy> ◉ INK CURED </div> <!-- Tome number --> <div class="font-mono" style="position:absolute;top:16px;right:16px;font-size:9px;letter-spacing:0.3em;color:var(--parchment);background:rgba(6,4,13,0.65);padding:5px 10px;backdrop-filter:blur(2px);" data-astro-cid-v5f2mbxy>
TOME · 01 </div> </div> </div> <!-- Detail panel --> <div style="direction:ltr;position:relative;padding:0 4px;" data-astro-cid-v5f2mbxy> <div style="display:flex;align-items:center;gap:12px;margin-bottom:18px;opacity:0.95;" data-astro-cid-v5f2mbxy> <!-- Glyph SVG --> <svg width="58" height="58" viewBox="0 0 60 60" fill="none" data-astro-cid-v5f2mbxy> <g stroke="#f3c8d2" stroke-width="0.8" data-astro-cid-v5f2mbxy> <path d="M10 38 L14 16 L22 30 L30 14 L38 30 L46 16 L50 38 Z" fill="#f3c8d2" fill-opacity="0.15" data-astro-cid-v5f2mbxy></path> <line x1="10" y1="44" x2="50" y2="44" data-astro-cid-v5f2mbxy></line> <circle cx="14" cy="16" r="2" fill="#f3c8d2" data-astro-cid-v5f2mbxy></circle> <circle cx="30" cy="14" r="2.4" fill="#f3c8d2" data-astro-cid-v5f2mbxy></circle> <circle cx="46" cy="16" r="2" fill="#f3c8d2" data-astro-cid-v5f2mbxy></circle> </g> </svg>      <div class="font-mono" style="font-size:10px;letter-spacing:0.3em;color:#f3c8d2;opacity:0.9;" data-astro-cid-v5f2mbxy> MYTHIC FANTASY / DREAMPUNK </div> </div> <h3 class="book-title font-display" data-accent="#f3c8d2" style="font-size:clamp(36px,4.5vw,64px);line-height:1.0;color:var(--parchment);margin-bottom:20px;letter-spacing:0.02em;transition:color 0.5s;font-weight:600;" data-astro-cid-v5f2mbxy> Alice Reborn </h3> <p style="font-family:'EB Garamond',serif;font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:var(--parchment);margin-bottom:28px;max-width:560px;" data-astro-cid-v5f2mbxy> A forgotten queen returns to the world she once dreamed into being—only to find her legend reborn as a living god, and the only way to break its hold is to erase herself from the story that made her. </p> <div class="book-cta" data-accent="#f3c8d2" style="display:inline-flex;align-items:center;gap:14px;font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.35em;color:var(--gold-deep);transition:color 0.4s;border-bottom:1px solid var(--line);padding-bottom:8px;" data-astro-cid-v5f2mbxy> <span data-astro-cid-v5f2mbxy>OPEN THE TOME</span> <span class="book-cta-arrow" style="transition:transform 0.4s;" data-astro-cid-v5f2mbxy>→</span> </div> </div> </a> </div><div class="reveal book-spread" data-accent="#7fd9d4" data-astro-cid-v5f2mbxy> <a href="/books/ariadoss-chronicles" class="book-spread-link" data-accent="#7fd9d4" style="display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;direction:rtl;text-decoration:none;color:inherit;" data-astro-cid-v5f2mbxy> <!-- Image plate --> <div style="direction:ltr;position:relative;" data-astro-cid-v5f2mbxy> <div class="book-image-wrap" data-accent="#7fd9d4" style="position:relative;aspect-ratio:1.6;overflow:hidden;border:1px solid var(--line);transition:all 0.6s cubic-bezier(.2,.7,.2,1);box-shadow:0 24px 60px -20px rgba(0,0,0,0.6);" data-astro-cid-v5f2mbxy> <img src="/images/ariadoss-cover.webp" alt="Ariadoss Chronicles: The Advent of Darkness" class="book-cover-img" style="width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter 0.6s;filter:saturate(0.92) contrast(0.98);" data-astro-cid-v5f2mbxy> <!-- Vignette --> <div style="position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 50%,rgba(6,4,13,0.55) 100%);" data-astro-cid-v5f2mbxy></div> <!-- Corner brackets --> <span style="position:absolute;top:8px;left:8px;width:18px;height:18px;border-top:1px solid #7fd9d4;border-left:1px solid #7fd9d4;pointer-events:none;" data-astro-cid-v5f2mbxy></span> <span style="position:absolute;top:8px;right:8px;width:18px;height:18px;border-top:1px solid #7fd9d4;border-right:1px solid #7fd9d4;pointer-events:none;" data-astro-cid-v5f2mbxy></span> <span style="position:absolute;bottom:8px;left:8px;width:18px;height:18px;border-bottom:1px solid #7fd9d4;border-left:1px solid #7fd9d4;pointer-events:none;" data-astro-cid-v5f2mbxy></span> <span style="position:absolute;bottom:8px;right:8px;width:18px;height:18px;border-bottom:1px solid #7fd9d4;border-right:1px solid #7fd9d4;pointer-events:none;" data-astro-cid-v5f2mbxy></span> <!-- Status pill --> <div class="font-mono" style="position:absolute;top:16px;left:16px;padding:5px 10px;font-size:9px;letter-spacing:0.3em;color:#7fd9d4;background:rgba(6,4,13,0.65);border:1px solid #7fd9d440;backdrop-filter:blur(2px);" data-astro-cid-v5f2mbxy> ◌ IN SCRIBING </div> <!-- Tome number --> <div class="font-mono" style="position:absolute;top:16px;right:16px;font-size:9px;letter-spacing:0.3em;color:var(--parchment);background:rgba(6,4,13,0.65);padding:5px 10px;backdrop-filter:blur(2px);" data-astro-cid-v5f2mbxy>
TOME · 02 </div> </div> </div> <!-- Detail panel --> <div style="direction:ltr;position:relative;padding:0 4px;" data-astro-cid-v5f2mbxy> <div style="display:flex;align-items:center;gap:12px;margin-bottom:18px;opacity:0.95;" data-astro-cid-v5f2mbxy> <!-- Glyph SVG -->  <svg width="58" height="58" viewBox="0 0 60 60" data-astro-cid-v5f2mbxy> <g stroke="#7fd9d4" stroke-width="0.8" fill="none" data-astro-cid-v5f2mbxy> <circle cx="30" cy="30" r="24" opacity="0.5" data-astro-cid-v5f2mbxy></circle> <circle cx="30" cy="30" r="18" stroke-dasharray="2 4" opacity="0.6" data-astro-cid-v5f2mbxy></circle> <path d="M30 8 L33 28 L52 30 L33 32 L30 52 L27 32 L8 30 L27 28 Z" fill="#7fd9d4" fill-opacity="0.25" data-astro-cid-v5f2mbxy></path> </g> </svg>     <div class="font-mono" style="font-size:10px;letter-spacing:0.3em;color:#7fd9d4;opacity:0.9;" data-astro-cid-v5f2mbxy> SPACE OPERA / SPACE FANTASY </div> </div> <h3 class="book-title font-display" data-accent="#7fd9d4" style="font-size:clamp(36px,4.5vw,64px);line-height:1.0;color:var(--parchment);margin-bottom:20px;letter-spacing:0.02em;transition:color 0.5s;font-weight:600;" data-astro-cid-v5f2mbxy> Ariadoss Chronicles: The Advent of Darkness </h3> <p style="font-family:'EB Garamond',serif;font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:var(--parchment);margin-bottom:28px;max-width:560px;" data-astro-cid-v5f2mbxy> In a universe where power comes at a terrible price, a young outcast faces the choice to break his sacred vow or lose the last family he has to an unfathomable darkness. </p> <div class="book-cta" data-accent="#7fd9d4" style="display:inline-flex;align-items:center;gap:14px;font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.35em;color:var(--gold-deep);transition:color 0.4s;border-bottom:1px solid var(--line);padding-bottom:8px;" data-astro-cid-v5f2mbxy> <span data-astro-cid-v5f2mbxy>OPEN THE TOME</span> <span class="book-cta-arrow" style="transition:transform 0.4s;" data-astro-cid-v5f2mbxy>→</span> </div> </div> </a> </div><div class="reveal book-spread" data-accent="#f5d98a" data-astro-cid-v5f2mbxy> <a href="/books/comrades-of-the-sword" class="book-spread-link" data-accent="#f5d98a" style="display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;direction:ltr;text-decoration:none;color:inherit;" data-astro-cid-v5f2mbxy> <!-- Image plate --> <div style="direction:ltr;position:relative;" data-astro-cid-v5f2mbxy> <div class="book-image-wrap" data-accent="#f5d98a" style="position:relative;aspect-ratio:1.6;overflow:hidden;border:1px solid var(--line);transition:all 0.6s cubic-bezier(.2,.7,.2,1);box-shadow:0 24px 60px -20px rgba(0,0,0,0.6);" data-astro-cid-v5f2mbxy> <img src="/images/comrades-of-the-sword-cover.webp" alt="The Comrades of the Sword" class="book-cover-img" style="width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter 0.6s;filter:saturate(0.92) contrast(0.98);" data-astro-cid-v5f2mbxy> <!-- Vignette --> <div style="position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 50%,rgba(6,4,13,0.55) 100%);" data-astro-cid-v5f2mbxy></div> <!-- Corner brackets --> <span style="position:absolute;top:8px;left:8px;width:18px;height:18px;border-top:1px solid #f5d98a;border-left:1px solid #f5d98a;pointer-events:none;" data-astro-cid-v5f2mbxy></span> <span style="position:absolute;top:8px;right:8px;width:18px;height:18px;border-top:1px solid #f5d98a;border-right:1px solid #f5d98a;pointer-events:none;" data-astro-cid-v5f2mbxy></span> <span style="position:absolute;bottom:8px;left:8px;width:18px;height:18px;border-bottom:1px solid #f5d98a;border-left:1px solid #f5d98a;pointer-events:none;" data-astro-cid-v5f2mbxy></span> <span style="position:absolute;bottom:8px;right:8px;width:18px;height:18px;border-bottom:1px solid #f5d98a;border-right:1px solid #f5d98a;pointer-events:none;" data-astro-cid-v5f2mbxy></span> <!-- Status pill --> <div class="font-mono" style="position:absolute;top:16px;left:16px;padding:5px 10px;font-size:9px;letter-spacing:0.3em;color:#f5d98a;background:rgba(6,4,13,0.65);border:1px solid #f5d98a40;backdrop-filter:blur(2px);" data-astro-cid-v5f2mbxy> ◌ IN SCRIBING </div> <!-- Tome number --> <div class="font-mono" style="position:absolute;top:16px;right:16px;font-size:9px;letter-spacing:0.3em;color:var(--parchment);background:rgba(6,4,13,0.65);padding:5px 10px;backdrop-filter:blur(2px);" data-astro-cid-v5f2mbxy>
TOME · 03 </div> </div> </div> <!-- Detail panel --> <div style="direction:ltr;position:relative;padding:0 4px;" data-astro-cid-v5f2mbxy> <div style="display:flex;align-items:center;gap:12px;margin-bottom:18px;opacity:0.95;" data-astro-cid-v5f2mbxy> <!-- Glyph SVG -->   <svg width="58" height="58" viewBox="0 0 60 60" data-astro-cid-v5f2mbxy> <g stroke="#f5d98a" stroke-width="0.8" fill="none" data-astro-cid-v5f2mbxy> <path d="M30 6 L34 30 L30 54 L26 30 Z" fill="#f5d98a" fill-opacity="0.2" data-astro-cid-v5f2mbxy></path> <line x1="16" y1="38" x2="44" y2="38" data-astro-cid-v5f2mbxy></line> <circle cx="30" cy="38" r="3" fill="#f5d98a" data-astro-cid-v5f2mbxy></circle> <circle cx="30" cy="30" r="20" opacity="0.3" data-astro-cid-v5f2mbxy></circle> </g> </svg>    <div class="font-mono" style="font-size:10px;letter-spacing:0.3em;color:#f5d98a;opacity:0.9;" data-astro-cid-v5f2mbxy> EPIC FANTASY </div> </div> <h3 class="book-title font-display" data-accent="#f5d98a" style="font-size:clamp(36px,4.5vw,64px);line-height:1.0;color:var(--parchment);margin-bottom:20px;letter-spacing:0.02em;transition:color 0.5s;font-weight:600;" data-astro-cid-v5f2mbxy> The Comrades of the Sword </h3> <p style="font-family:'EB Garamond',serif;font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:var(--parchment);margin-bottom:28px;max-width:560px;" data-astro-cid-v5f2mbxy> When his brother succumbs to a dark power that threatens to engulf the world, a cursed warrior must assemble a fellowship of unlikely allies to face a destiny that threatens to doom them all. </p> <div class="book-cta" data-accent="#f5d98a" style="display:inline-flex;align-items:center;gap:14px;font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.35em;color:var(--gold-deep);transition:color 0.4s;border-bottom:1px solid var(--line);padding-bottom:8px;" data-astro-cid-v5f2mbxy> <span data-astro-cid-v5f2mbxy>OPEN THE TOME</span> <span class="book-cta-arrow" style="transition:transform 0.4s;" data-astro-cid-v5f2mbxy>→</span> </div> </div> </a> </div><div class="reveal book-spread" data-accent="#d97757" data-astro-cid-v5f2mbxy> <a href="/books/oni-demon-inside" class="book-spread-link" data-accent="#d97757" style="display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;direction:rtl;text-decoration:none;color:inherit;" data-astro-cid-v5f2mbxy> <!-- Image plate --> <div style="direction:ltr;position:relative;" data-astro-cid-v5f2mbxy> <div class="book-image-wrap" data-accent="#d97757" style="position:relative;aspect-ratio:1.6;overflow:hidden;border:1px solid var(--line);transition:all 0.6s cubic-bezier(.2,.7,.2,1);box-shadow:0 24px 60px -20px rgba(0,0,0,0.6);" data-astro-cid-v5f2mbxy> <img src="/images/oni-the-demon-inside-us-all-cover.webp" alt="Oni: The Demon Inside Us All" class="book-cover-img" style="width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter 0.6s;filter:saturate(0.92) contrast(0.98);" data-astro-cid-v5f2mbxy> <!-- Vignette --> <div style="position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 50%,rgba(6,4,13,0.55) 100%);" data-astro-cid-v5f2mbxy></div> <!-- Corner brackets --> <span style="position:absolute;top:8px;left:8px;width:18px;height:18px;border-top:1px solid #d97757;border-left:1px solid #d97757;pointer-events:none;" data-astro-cid-v5f2mbxy></span> <span style="position:absolute;top:8px;right:8px;width:18px;height:18px;border-top:1px solid #d97757;border-right:1px solid #d97757;pointer-events:none;" data-astro-cid-v5f2mbxy></span> <span style="position:absolute;bottom:8px;left:8px;width:18px;height:18px;border-bottom:1px solid #d97757;border-left:1px solid #d97757;pointer-events:none;" data-astro-cid-v5f2mbxy></span> <span style="position:absolute;bottom:8px;right:8px;width:18px;height:18px;border-bottom:1px solid #d97757;border-right:1px solid #d97757;pointer-events:none;" data-astro-cid-v5f2mbxy></span> <!-- Status pill --> <div class="font-mono" style="position:absolute;top:16px;left:16px;padding:5px 10px;font-size:9px;letter-spacing:0.3em;color:#d97757;background:rgba(6,4,13,0.65);border:1px solid #d9775740;backdrop-filter:blur(2px);" data-astro-cid-v5f2mbxy> ◌ IN SCRIBING </div> <!-- Tome number --> <div class="font-mono" style="position:absolute;top:16px;right:16px;font-size:9px;letter-spacing:0.3em;color:var(--parchment);background:rgba(6,4,13,0.65);padding:5px 10px;backdrop-filter:blur(2px);" data-astro-cid-v5f2mbxy>
TOME · 04 </div> </div> </div> <!-- Detail panel --> <div style="direction:ltr;position:relative;padding:0 4px;" data-astro-cid-v5f2mbxy> <div style="display:flex;align-items:center;gap:12px;margin-bottom:18px;opacity:0.95;" data-astro-cid-v5f2mbxy> <!-- Glyph SVG -->    <svg width="58" height="58" viewBox="0 0 60 60" data-astro-cid-v5f2mbxy> <g stroke="#d97757" stroke-width="0.8" fill="none" data-astro-cid-v5f2mbxy> <path d="M14 22 L20 12 L30 18 L40 12 L46 22 L42 38 L30 46 L18 38 Z" fill="#d97757" fill-opacity="0.18" data-astro-cid-v5f2mbxy></path> <circle cx="24" cy="28" r="2" fill="#d97757" data-astro-cid-v5f2mbxy></circle> <circle cx="36" cy="28" r="2" fill="#d97757" data-astro-cid-v5f2mbxy></circle> <path d="M24 36 Q30 40 36 36" data-astro-cid-v5f2mbxy></path> </g> </svg>   <div class="font-mono" style="font-size:10px;letter-spacing:0.3em;color:#d97757;opacity:0.9;" data-astro-cid-v5f2mbxy> POSTAPOCALYPTIC MYTHOLOGY / FANTASY </div> </div> <h3 class="book-title font-display" data-accent="#d97757" style="font-size:clamp(36px,4.5vw,64px);line-height:1.0;color:var(--parchment);margin-bottom:20px;letter-spacing:0.02em;transition:color 0.5s;font-weight:600;" data-astro-cid-v5f2mbxy> Oni: The Demon Inside Us All </h3> <p style="font-family:'EB Garamond',serif;font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:var(--parchment);margin-bottom:28px;max-width:560px;" data-astro-cid-v5f2mbxy> In a flooded world where ancient gods walk in the cloak of mortals, a young warrior cursed with the blood of a demon must fight to control the monster within before the wrath of the gods drowns the rest of humanity. </p> <div class="book-cta" data-accent="#d97757" style="display:inline-flex;align-items:center;gap:14px;font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.35em;color:var(--gold-deep);transition:color 0.4s;border-bottom:1px solid var(--line);padding-bottom:8px;" data-astro-cid-v5f2mbxy> <span data-astro-cid-v5f2mbxy>OPEN THE TOME</span> <span class="book-cta-arrow" style="transition:transform 0.4s;" data-astro-cid-v5f2mbxy>→</span> </div> </div> </a> </div><div class="reveal book-spread" data-accent="#ebe2cf" data-astro-cid-v5f2mbxy> <a href="/books/daddy" class="book-spread-link" data-accent="#ebe2cf" style="display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;direction:ltr;text-decoration:none;color:inherit;" data-astro-cid-v5f2mbxy> <!-- Image plate --> <div style="direction:ltr;position:relative;" data-astro-cid-v5f2mbxy> <div class="book-image-wrap" data-accent="#ebe2cf" style="position:relative;aspect-ratio:1.6;overflow:hidden;border:1px solid var(--line);transition:all 0.6s cubic-bezier(.2,.7,.2,1);box-shadow:0 24px 60px -20px rgba(0,0,0,0.6);" data-astro-cid-v5f2mbxy> <img src="/images/daddy-cover.webp" alt="Daddy" class="book-cover-img" style="width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter 0.6s;filter:saturate(0.92) contrast(0.98);" data-astro-cid-v5f2mbxy> <!-- Vignette --> <div style="position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 50%,rgba(6,4,13,0.55) 100%);" data-astro-cid-v5f2mbxy></div> <!-- Corner brackets --> <span style="position:absolute;top:8px;left:8px;width:18px;height:18px;border-top:1px solid #ebe2cf;border-left:1px solid #ebe2cf;pointer-events:none;" data-astro-cid-v5f2mbxy></span> <span style="position:absolute;top:8px;right:8px;width:18px;height:18px;border-top:1px solid #ebe2cf;border-right:1px solid #ebe2cf;pointer-events:none;" data-astro-cid-v5f2mbxy></span> <span style="position:absolute;bottom:8px;left:8px;width:18px;height:18px;border-bottom:1px solid #ebe2cf;border-left:1px solid #ebe2cf;pointer-events:none;" data-astro-cid-v5f2mbxy></span> <span style="position:absolute;bottom:8px;right:8px;width:18px;height:18px;border-bottom:1px solid #ebe2cf;border-right:1px solid #ebe2cf;pointer-events:none;" data-astro-cid-v5f2mbxy></span> <!-- Status pill --> <div class="font-mono" style="position:absolute;top:16px;left:16px;padding:5px 10px;font-size:9px;letter-spacing:0.3em;color:#ebe2cf;background:rgba(6,4,13,0.65);border:1px solid #ebe2cf40;backdrop-filter:blur(2px);" data-astro-cid-v5f2mbxy> ◌ IN SCRIBING </div> <!-- Tome number --> <div class="font-mono" style="position:absolute;top:16px;right:16px;font-size:9px;letter-spacing:0.3em;color:var(--parchment);background:rgba(6,4,13,0.65);padding:5px 10px;backdrop-filter:blur(2px);" data-astro-cid-v5f2mbxy>
TOME · 05 </div> </div> </div> <!-- Detail panel --> <div style="direction:ltr;position:relative;padding:0 4px;" data-astro-cid-v5f2mbxy> <div style="display:flex;align-items:center;gap:12px;margin-bottom:18px;opacity:0.95;" data-astro-cid-v5f2mbxy> <!-- Glyph SVG -->     <svg width="58" height="58" viewBox="0 0 60 60" data-astro-cid-v5f2mbxy> <g stroke="#ebe2cf" stroke-width="0.8" fill="none" data-astro-cid-v5f2mbxy> <path d="M14 50 L46 16" data-astro-cid-v5f2mbxy></path> <path d="M22 42 Q30 30 38 24" data-astro-cid-v5f2mbxy></path> <path d="M18 46 Q26 34 34 28" opacity="0.5" data-astro-cid-v5f2mbxy></path> <circle cx="46" cy="16" r="3" fill="#ebe2cf" fill-opacity="0.5" data-astro-cid-v5f2mbxy></circle> </g> </svg>  <div class="font-mono" style="font-size:10px;letter-spacing:0.3em;color:#ebe2cf;opacity:0.9;" data-astro-cid-v5f2mbxy> POSTMODERNIST </div> </div> <h3 class="book-title font-display" data-accent="#ebe2cf" style="font-size:clamp(36px,4.5vw,64px);line-height:1.0;color:var(--parchment);margin-bottom:20px;letter-spacing:0.02em;transition:color 0.5s;font-weight:600;" data-astro-cid-v5f2mbxy> Daddy </h3> <p style="font-family:'EB Garamond',serif;font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:var(--parchment);margin-bottom:28px;max-width:560px;" data-astro-cid-v5f2mbxy> Trapped in a cycle of abuse and regret, a father fights to be worthy of the only light left in the darkness: his daughter Angel. </p> <div class="book-cta" data-accent="#ebe2cf" style="display:inline-flex;align-items:center;gap:14px;font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.35em;color:var(--gold-deep);transition:color 0.4s;border-bottom:1px solid var(--line);padding-bottom:8px;" data-astro-cid-v5f2mbxy> <span data-astro-cid-v5f2mbxy>OPEN THE TOME</span> <span class="book-cta-arrow" style="transition:transform 0.4s;" data-astro-cid-v5f2mbxy>→</span> </div> </div> </a> </div><div class="reveal book-spread" data-accent="#7fd9d4" data-astro-cid-v5f2mbxy> <a href="/lyrics" class="book-spread-link" data-accent="#7fd9d4" style="display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;direction:rtl;text-decoration:none;color:inherit;" data-astro-cid-v5f2mbxy> <!-- Image plate --> <div style="direction:ltr;position:relative;" data-astro-cid-v5f2mbxy> <div class="book-image-wrap" data-accent="#7fd9d4" style="position:relative;aspect-ratio:1.6;overflow:hidden;border:1px solid var(--line);transition:all 0.6s cubic-bezier(.2,.7,.2,1);box-shadow:0 24px 60px -20px rgba(0,0,0,0.6);" data-astro-cid-v5f2mbxy> <img src="/images/song-lyrics-cover.webp" alt="Song Lyrics" class="book-cover-img" style="width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter 0.6s;filter:saturate(0.92) contrast(0.98);" data-astro-cid-v5f2mbxy> <!-- Vignette --> <div style="position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 50%,rgba(6,4,13,0.55) 100%);" data-astro-cid-v5f2mbxy></div> <!-- Corner brackets --> <span style="position:absolute;top:8px;left:8px;width:18px;height:18px;border-top:1px solid #7fd9d4;border-left:1px solid #7fd9d4;pointer-events:none;" data-astro-cid-v5f2mbxy></span> <span style="position:absolute;top:8px;right:8px;width:18px;height:18px;border-top:1px solid #7fd9d4;border-right:1px solid #7fd9d4;pointer-events:none;" data-astro-cid-v5f2mbxy></span> <span style="position:absolute;bottom:8px;left:8px;width:18px;height:18px;border-bottom:1px solid #7fd9d4;border-left:1px solid #7fd9d4;pointer-events:none;" data-astro-cid-v5f2mbxy></span> <span style="position:absolute;bottom:8px;right:8px;width:18px;height:18px;border-bottom:1px solid #7fd9d4;border-right:1px solid #7fd9d4;pointer-events:none;" data-astro-cid-v5f2mbxy></span> <!-- Status pill --> <div class="font-mono" style="position:absolute;top:16px;left:16px;padding:5px 10px;font-size:9px;letter-spacing:0.3em;color:#7fd9d4;background:rgba(6,4,13,0.65);border:1px solid #7fd9d440;backdrop-filter:blur(2px);" data-astro-cid-v5f2mbxy> ◉ INK CURED </div> <!-- Tome number --> <div class="font-mono" style="position:absolute;top:16px;right:16px;font-size:9px;letter-spacing:0.3em;color:var(--parchment);background:rgba(6,4,13,0.65);padding:5px 10px;backdrop-filter:blur(2px);" data-astro-cid-v5f2mbxy>
TOME · 06 </div> </div> </div> <!-- Detail panel --> <div style="direction:ltr;position:relative;padding:0 4px;" data-astro-cid-v5f2mbxy> <div style="display:flex;align-items:center;gap:12px;margin-bottom:18px;opacity:0.95;" data-astro-cid-v5f2mbxy> <!-- Glyph SVG -->      <svg width="58" height="58" viewBox="0 0 60 60" data-astro-cid-v5f2mbxy> <g stroke="#7fd9d4" stroke-width="0.8" fill="none" data-astro-cid-v5f2mbxy> <path d="M16 12 Q12 30 16 48" data-astro-cid-v5f2mbxy></path> <path d="M44 12 Q48 30 44 48" data-astro-cid-v5f2mbxy></path> <line x1="20" y1="14" x2="40" y2="14" data-astro-cid-v5f2mbxy></line> <line x1="22" y1="20" x2="38" y2="20" opacity="0.7" data-astro-cid-v5f2mbxy></line> <line x1="24" y1="26" x2="36" y2="26" opacity="0.5" data-astro-cid-v5f2mbxy></line> <line x1="26" y1="32" x2="34" y2="32" opacity="0.4" data-astro-cid-v5f2mbxy></line> </g> </svg> <div class="font-mono" style="font-size:10px;letter-spacing:0.3em;color:#7fd9d4;opacity:0.9;" data-astro-cid-v5f2mbxy> MUSIC / POETRY </div> </div> <h3 class="book-title font-display" data-accent="#7fd9d4" style="font-size:clamp(36px,4.5vw,64px);line-height:1.0;color:var(--parchment);margin-bottom:20px;letter-spacing:0.02em;transition:color 0.5s;font-weight:600;" data-astro-cid-v5f2mbxy> Song Lyrics </h3> <p style="font-family:'EB Garamond',serif;font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:var(--parchment);margin-bottom:28px;max-width:560px;" data-astro-cid-v5f2mbxy> Songs written to mean something. Original lyrics spanning pop, rock, hip-hop, symphonic metal, and more — words built to be heard, felt, and read long after the music fades. </p> <div class="book-cta" data-accent="#7fd9d4" style="display:inline-flex;align-items:center;gap:14px;font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.35em;color:var(--gold-deep);transition:color 0.4s;border-bottom:1px solid var(--line);padding-bottom:8px;" data-astro-cid-v5f2mbxy> <span data-astro-cid-v5f2mbxy>OPEN THE TOME</span> <span class="book-cta-arrow" style="transition:transform 0.4s;" data-astro-cid-v5f2mbxy>→</span> </div> </div> </a> </div> </div> </div> </section>  <script type="module">document.querySelectorAll(".book-spread-link").forEach(e=>{const t=e.dataset.accent||"var(--gold)",l=e.querySelector(".book-title"),o=e.querySelector(".book-cta"),r=e.querySelector(".book-image-wrap");e.addEventListener("mouseenter",()=>{l&&(l.style.color=t),o&&(o.style.color=t,o.style.borderBottomColor=t+"60"),r&&(r.style.borderColor=t+"80",r.style.boxShadow=`0 30px 80px -20px rgba(0,0,0,0.7), 0 0 40px -10px ${t}40`)}),e.addEventListener("mouseleave",()=>{l&&(l.style.color="var(--parchment)"),o&&(o.style.color="var(--gold-deep)",o.style.borderBottomColor="var(--line)"),r&&(r.style.borderColor="var(--line)",r.style.boxShadow="0 24px 60px -20px rgba(0,0,0,0.6)")})});</script> <section data-realm="aether" id="music" style="position:relative;padding:140px 6vw;min-height:100vh;" data-astro-cid-c2fdjekn> <div style="max-width:1400px;margin:0 auto;" data-astro-cid-c2fdjekn> <!-- Realm heading --> <div class="reveal" style="display:flex;flex-direction:column;gap:18px;margin-bottom:56px;" data-astro-cid-c2fdjekn> <div style="display:flex;align-items:center;gap:20px;" data-astro-cid-c2fdjekn> <span class="font-mono" style="color:var(--gold-deep);font-size:12px;letter-spacing:0.3em;" data-astro-cid-c2fdjekn>REALM · 02</span> <span style="flex:1;height:1px;background:linear-gradient(to right,var(--line-strong),transparent);" data-astro-cid-c2fdjekn></span> <span class="font-mono" style="color:var(--parchment-dim);font-size:11px;letter-spacing:0.3em;" data-astro-cid-c2fdjekn>LIBER · II</span> </div> <h2 class="font-display" style="font-size:clamp(48px,7vw,96px);font-weight:600;line-height:1;color:var(--parchment);" data-astro-cid-c2fdjekn>
The Aether
</h2> <p style="font-family:'EB Garamond',serif;font-style:italic;font-size:22px;max-width:720px;color:var(--parchment-dim);" data-astro-cid-c2fdjekn>
Seven spheres of sound. Pop, rock, hip-hop, symphonic metal and the original scores for worlds yet to be made. Touch a sonic sphere to tune in.
</p> </div> <div style="display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,80px);align-items:center;" data-astro-cid-c2fdjekn> <!-- Left: Orbit Chart --> <div class="reveal" style="position:relative;width:100%;max-width:520px;aspect-ratio:1/1;margin:0 auto;" data-astro-cid-c2fdjekn> <!-- Background SVG rings + connecting lines --> <svg viewBox="0 0 520 520" id="orbit-svg" style="position:absolute;inset:0;width:100%;height:100%;" data-astro-cid-c2fdjekn> <!-- Outer animated ring --> <g style="transform-origin:260px 260px;animation:spin-slow 200s linear infinite;" data-astro-cid-c2fdjekn> <circle cx="260" cy="260" r="240" stroke="var(--gold-deep)" stroke-width="0.4" fill="none" opacity="0.5" data-astro-cid-c2fdjekn></circle> <circle cx="260" cy="260" r="240" stroke="var(--gold)" stroke-width="0.3" stroke-dasharray="1 16" fill="none" opacity="0.7" data-astro-cid-c2fdjekn></circle> </g> <!-- Static orbit rings --> <circle cx="260" cy="260" r="180" stroke="var(--line)" stroke-width="0.4" fill="none" data-astro-cid-c2fdjekn></circle> <circle cx="260" cy="260" r="120" stroke="var(--line)" stroke-width="0.4" fill="none" data-astro-cid-c2fdjekn></circle> <circle cx="260" cy="260" r="60" stroke="var(--line)" stroke-width="0.4" fill="none" data-astro-cid-c2fdjekn></circle> <!-- Connecting lines (one per genre, updated by JS) --> <line id="orbit-line-pop" x1="260" y1="260" x2="260" y2="80" stroke="var(--line)" stroke-width="0.3" opacity="0.4" stroke-dasharray="2 4" style="transition:all 0.6s;" data-astro-cid-c2fdjekn></line><line id="orbit-line-rock" x1="260" y1="260" x2="415.88457268119896" y2="170" stroke="var(--line)" stroke-width="0.3" opacity="0.4" stroke-dasharray="2 4" style="transition:all 0.6s;" data-astro-cid-c2fdjekn></line><line id="orbit-line-hiphop" x1="260" y1="260" x2="415.88457268119896" y2="350" stroke="var(--line)" stroke-width="0.3" opacity="0.4" stroke-dasharray="2 4" style="transition:all 0.6s;" data-astro-cid-c2fdjekn></line><line id="orbit-line-metal" x1="260" y1="260" x2="260" y2="440" stroke="var(--line)" stroke-width="0.3" opacity="0.4" stroke-dasharray="2 4" style="transition:all 0.6s;" data-astro-cid-c2fdjekn></line><line id="orbit-line-ariadoss" x1="260" y1="260" x2="104.11542731880107" y2="350.00000000000006" stroke="var(--line)" stroke-width="0.3" opacity="0.4" stroke-dasharray="2 4" style="transition:all 0.6s;" data-astro-cid-c2fdjekn></line><line id="orbit-line-comrades" x1="260" y1="260" x2="104.11542731880104" y2="170" stroke="var(--line)" stroke-width="0.3" opacity="0.4" stroke-dasharray="2 4" style="transition:all 0.6s;" data-astro-cid-c2fdjekn></line><line id="orbit-line-bahai" x1="260" y1="260" x2="300.5" y2="189.85194229346047" stroke="var(--line)" stroke-width="0.3" opacity="0.4" stroke-dasharray="2 4" style="transition:all 0.6s;" data-astro-cid-c2fdjekn></line> <!-- Center sigil (counter-rotating) --> <g style="transform-origin:260px 260px;animation:spin-rev 60s linear infinite;" data-astro-cid-c2fdjekn> <polygon points="260,228 286,272 234,272" stroke="var(--gold)" stroke-width="0.6" fill="none" data-astro-cid-c2fdjekn></polygon> <polygon points="260,292 234,248 286,248" stroke="var(--gold)" stroke-width="0.6" fill="none" data-astro-cid-c2fdjekn></polygon> </g> <circle cx="260" cy="260" r="6" fill="var(--gold)" data-astro-cid-c2fdjekn></circle> <circle cx="260" cy="260" r="14" stroke="var(--gold)" stroke-width="0.5" fill="none" opacity="0.6" data-astro-cid-c2fdjekn></circle> </svg> <!-- Genre orbs (absolutely positioned) --> <button class="orbit-orb" data-genre-orb="pop" style="position:absolute;left:50%;top:15.384615384615387%;transform:translate(-50%,-50%);background:transparent;border:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform 0.5s;" data-astro-cid-c2fdjekn> <div class="orb-dot" data-orb-id="pop" style="width:14px;height:14px;border-radius:50%;background:#f3c8d2;box-shadow:0 0 8px #f3c8d2;transition:all 0.5s;position:relative;" data-astro-cid-c2fdjekn> <span class="orb-ring" style="position:absolute;inset:-8px;border:1px solid #f3c8d2;border-radius:50%;opacity:0;transition:opacity 0.4s;" data-astro-cid-c2fdjekn></span> </div> <span class="font-display orb-label" data-orb-id="pop" style="font-size:10px;letter-spacing:0.25em;color:var(--parchment-dim);transition:color 0.4s;white-space:nowrap;" data-astro-cid-c2fdjekn> POP </span> </button><button class="orbit-orb" data-genre-orb="rock" style="position:absolute;left:79.97780243869211%;top:32.69230769230769%;transform:translate(-50%,-50%);background:transparent;border:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform 0.5s;" data-astro-cid-c2fdjekn> <div class="orb-dot" data-orb-id="rock" style="width:14px;height:14px;border-radius:50%;background:#d97757;box-shadow:0 0 8px #d97757;transition:all 0.5s;position:relative;" data-astro-cid-c2fdjekn> <span class="orb-ring" style="position:absolute;inset:-8px;border:1px solid #d97757;border-radius:50%;opacity:0;transition:opacity 0.4s;" data-astro-cid-c2fdjekn></span> </div> <span class="font-display orb-label" data-orb-id="rock" style="font-size:10px;letter-spacing:0.25em;color:var(--parchment-dim);transition:color 0.4s;white-space:nowrap;" data-astro-cid-c2fdjekn> ROCK </span> </button><button class="orbit-orb" data-genre-orb="hiphop" style="position:absolute;left:79.97780243869211%;top:67.3076923076923%;transform:translate(-50%,-50%);background:transparent;border:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform 0.5s;" data-astro-cid-c2fdjekn> <div class="orb-dot" data-orb-id="hiphop" style="width:14px;height:14px;border-radius:50%;background:#f5d98a;box-shadow:0 0 8px #f5d98a;transition:all 0.5s;position:relative;" data-astro-cid-c2fdjekn> <span class="orb-ring" style="position:absolute;inset:-8px;border:1px solid #f5d98a;border-radius:50%;opacity:0;transition:opacity 0.4s;" data-astro-cid-c2fdjekn></span> </div> <span class="font-display orb-label" data-orb-id="hiphop" style="font-size:10px;letter-spacing:0.25em;color:var(--parchment-dim);transition:color 0.4s;white-space:nowrap;" data-astro-cid-c2fdjekn> HIP HOP </span> </button><button class="orbit-orb" data-genre-orb="metal" style="position:absolute;left:50%;top:84.61538461538461%;transform:translate(-50%,-50%);background:transparent;border:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform 0.5s;" data-astro-cid-c2fdjekn> <div class="orb-dot" data-orb-id="metal" style="width:14px;height:14px;border-radius:50%;background:#c46a78;box-shadow:0 0 8px #c46a78;transition:all 0.5s;position:relative;" data-astro-cid-c2fdjekn> <span class="orb-ring" style="position:absolute;inset:-8px;border:1px solid #c46a78;border-radius:50%;opacity:0;transition:opacity 0.4s;" data-astro-cid-c2fdjekn></span> </div> <span class="font-display orb-label" data-orb-id="metal" style="font-size:10px;letter-spacing:0.25em;color:var(--parchment-dim);transition:color 0.4s;white-space:nowrap;" data-astro-cid-c2fdjekn> SYMPHONIC METAL </span> </button><button class="orbit-orb" data-genre-orb="ariadoss" style="position:absolute;left:20.022197561307898%;top:67.30769230769232%;transform:translate(-50%,-50%);background:transparent;border:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform 0.5s;" data-astro-cid-c2fdjekn> <div class="orb-dot" data-orb-id="ariadoss" style="width:14px;height:14px;border-radius:50%;background:#7fd9d4;box-shadow:0 0 8px #7fd9d4;transition:all 0.5s;position:relative;" data-astro-cid-c2fdjekn> <span class="orb-ring" style="position:absolute;inset:-8px;border:1px solid #7fd9d4;border-radius:50%;opacity:0;transition:opacity 0.4s;" data-astro-cid-c2fdjekn></span> </div> <span class="font-display orb-label" data-orb-id="ariadoss" style="font-size:10px;letter-spacing:0.25em;color:var(--parchment-dim);transition:color 0.4s;white-space:nowrap;" data-astro-cid-c2fdjekn> ARIADOSS </span> </button><button class="orbit-orb" data-genre-orb="comrades" style="position:absolute;left:20.02219756130789%;top:32.69230769230769%;transform:translate(-50%,-50%);background:transparent;border:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform 0.5s;" data-astro-cid-c2fdjekn> <div class="orb-dot" data-orb-id="comrades" style="width:14px;height:14px;border-radius:50%;background:#a7b87f;box-shadow:0 0 8px #a7b87f;transition:all 0.5s;position:relative;" data-astro-cid-c2fdjekn> <span class="orb-ring" style="position:absolute;inset:-8px;border:1px solid #a7b87f;border-radius:50%;opacity:0;transition:opacity 0.4s;" data-astro-cid-c2fdjekn></span> </div> <span class="font-display orb-label" data-orb-id="comrades" style="font-size:10px;letter-spacing:0.25em;color:var(--parchment-dim);transition:color 0.4s;white-space:nowrap;" data-astro-cid-c2fdjekn> COMRADES OF THE SWORD </span> </button><button class="orbit-orb" data-genre-orb="bahai" style="position:absolute;left:57.78846153846154%;top:36.50998890258855%;transform:translate(-50%,-50%);background:transparent;border:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform 0.5s;" data-astro-cid-c2fdjekn> <div class="orb-dot" data-orb-id="bahai" style="width:14px;height:14px;border-radius:50%;background:#efc878;box-shadow:0 0 8px #efc878;transition:all 0.5s;position:relative;" data-astro-cid-c2fdjekn> <span class="orb-ring" style="position:absolute;inset:-8px;border:1px solid #efc878;border-radius:50%;opacity:0;transition:opacity 0.4s;" data-astro-cid-c2fdjekn></span> </div> <span class="font-display orb-label" data-orb-id="bahai" style="font-size:10px;letter-spacing:0.25em;color:var(--parchment-dim);transition:color 0.4s;white-space:nowrap;" data-astro-cid-c2fdjekn> BAHÁ&#39;Í </span> </button> </div> <!-- Right: Detail panel --> <div class="reveal" style="--delay:0.2s;" data-astro-cid-c2fdjekn> <div style="position:relative;padding:32px 36px;min-height:380px;" data-astro-cid-c2fdjekn> <!-- Corner brackets --> <span style="position:absolute;top:0;left:0;width:16px;height:16px;border-top:1px solid var(--gold-deep);border-left:1px solid var(--gold-deep);pointer-events:none;" data-astro-cid-c2fdjekn></span> <span style="position:absolute;top:0;right:0;width:16px;height:16px;border-top:1px solid var(--gold-deep);border-right:1px solid var(--gold-deep);pointer-events:none;" data-astro-cid-c2fdjekn></span> <span style="position:absolute;bottom:0;left:0;width:16px;height:16px;border-bottom:1px solid var(--gold-deep);border-left:1px solid var(--gold-deep);pointer-events:none;" data-astro-cid-c2fdjekn></span> <span style="position:absolute;bottom:0;right:0;width:16px;height:16px;border-bottom:1px solid var(--gold-deep);border-right:1px solid var(--gold-deep);pointer-events:none;" data-astro-cid-c2fdjekn></span> <!-- Genre panels (one per genre, toggled by JS) --> <div class="orbit-panel" data-genre-panel="pop" style="display:block;" data-astro-cid-c2fdjekn> <div class="font-display" style="font-size:11px;letter-spacing:0.4em;color:var(--gold-deep);margin-bottom:18px;" data-astro-cid-c2fdjekn> AETHER · I · TRANSMISSION OPEN
</div> <h3 style="font-family:'Cinzel',serif;font-size:clamp(36px,5vw,64px);color:#f3c8d2;margin-bottom:20px;line-height:1;transition:color 0.6s;" data-astro-cid-c2fdjekn> Pop </h3> <p style="font-size:19px;color:var(--parchment);line-height:1.6;margin-bottom:28px;font-style:italic;font-family:'EB Garamond',serif;" data-astro-cid-c2fdjekn>
"Bright, danceable, anthemic. Songs about joy, longing, and the small revelations of being alive."
</p> <!-- Waveform bars --> <div style="display:flex;align-items:center;gap:3px;height:64px;" data-astro-cid-c2fdjekn> <div style="width:3px;height:22.5394827191577%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:46.31953549519216%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.04s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:48.572638774966656%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.08s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:34.96198675009934%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.12s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:49.1759423086222%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.16s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:54.28538644661928%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:48.575486971815316%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.24s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:43.62852270671332%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.28s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:57.691827590140676%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.32s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:79.66569389690454%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.36s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:61.32127200127422%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.4s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:35.173226719835164%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.44s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:72.11925073796571%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.48s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:81.8812138149809%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.52s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:87.91262815087491%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.56s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:53.891115928698575%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.6s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:93.28928360833176%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.64s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:77.13275800959232%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.68s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:65.93110408140454%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.72s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.76s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:62.3461609032427%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.8s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.84s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:85.94017376822546%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.88s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:81.62732587831935%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.92s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:85.30140421018055%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.96s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.04s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:68.95136687044861%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.08s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:64.11320668345158%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.12s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:81.82418735663599%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.16s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:78.16357697870926%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:59.44572375116491%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.24s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:74.77185704787432%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.28s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:50.85155931611879%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.32s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.36s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:55.09308972412816%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.4000000000000001s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:54.16391269804873%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.44s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:71.7694762654689%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.48s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:41.753320453565436%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.52s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:74.21678376949129%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.56s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:39.87871920924824%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.6s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:58.343609533767804%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.6400000000000001s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:41.07301699438765%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.68s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:78.16577661349206%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.72s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:74.1632872994248%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.76s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:86.67628759014099%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.8s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:85.96531926121749%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.84s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:56.90321789880849%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.8800000000000001s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:30.660542454915745%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.92s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:58.106551330374145%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.96s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:62.29932142779023%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:65.05319077334846%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:2.04s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:36.516462678791704%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:2.08s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:25.269594714971433%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:2.12s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:49.542817476564736%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:2.16s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:28.38670267525873%;background:linear-gradient(to top,#f3c8d240,#f3c8d2);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:2.2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div> </div> <!-- Satellite tags --> <div style="margin-top:28px;display:flex;gap:14px;flex-wrap:wrap;" data-astro-cid-c2fdjekn> <div class="font-mono" style="font-size:10px;letter-spacing:0.3em;padding:7px 12px;border:1px solid #f3c8d240;color:#f3c8d2;opacity:0.9;" data-astro-cid-c2fdjekn> ANTHEMS </div><div class="font-mono" style="font-size:10px;letter-spacing:0.3em;padding:7px 12px;border:1px solid #f3c8d240;color:#f3c8d2;opacity:0.9;" data-astro-cid-c2fdjekn> CONFESSIONS </div><div class="font-mono" style="font-size:10px;letter-spacing:0.3em;padding:7px 12px;border:1px solid #f3c8d240;color:#f3c8d2;opacity:0.9;" data-astro-cid-c2fdjekn> CHORUSES </div> </div> <!-- Action links --> <div style="display:flex;align-items:center;gap:28px;margin-top:36px;flex-wrap:wrap;" data-astro-cid-c2fdjekn> <a href="/lyrics" style="color:var(--gold);text-decoration:none;font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.3em;border-bottom:1px solid var(--gold-deep);padding-bottom:4px;" data-astro-cid-c2fdjekn>
READ THE LYRICS →
</a> <button data-play-genre="pop" data-play-track="ill-carry-on" data-play-color="f3c8d2" style="background:none;border:none;padding:0;cursor:pointer;color:#f3c8d2;font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.3em;border-bottom:1px solid #f3c8d260;padding-bottom:4px;transition:color 0.3s,border-color 0.3s;" onmouseover="this.style.borderBottomColor='#f3c8d2'" onmouseout="this.style.borderBottomColor='#f3c8d260'" data-astro-cid-c2fdjekn>
♫ PLAY THE MUSIC
</button> </div> </div><div class="orbit-panel" data-genre-panel="rock" style="display:none;" data-astro-cid-c2fdjekn> <div class="font-display" style="font-size:11px;letter-spacing:0.4em;color:var(--gold-deep);margin-bottom:18px;" data-astro-cid-c2fdjekn> AETHER · II · TRANSMISSION OPEN
</div> <h3 style="font-family:'Cinzel',serif;font-size:clamp(36px,5vw,64px);color:#d97757;margin-bottom:20px;line-height:1;transition:color 0.6s;" data-astro-cid-c2fdjekn> Rock </h3> <p style="font-size:19px;color:var(--parchment);line-height:1.6;margin-bottom:28px;font-style:italic;font-family:'EB Garamond',serif;" data-astro-cid-c2fdjekn>
"Distorted guitars and roaring drums. Music that pushes back against the world."
</p> <!-- Waveform bars --> <div style="display:flex;align-items:center;gap:3px;height:64px;" data-astro-cid-c2fdjekn> <div style="width:3px;height:32.87722590981918%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:33.44059265440599%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.04s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:20.25592611023641%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.08s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:42.33000875115332%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.12s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:54.09351669455146%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.16s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:43.05286770179443%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:36.821973713906594%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.24s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:64.4036864566504%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.28s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:39.275956608126236%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.32s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:71.51134205085205%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.36s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:45.89535698073004%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.4s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:78.5934374269794%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.44s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:81.78028586268805%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.48s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:92.20294054648383%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.52s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:45.489220883260565%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.56s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:79.66179583558606%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.6s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:89.77843255504604%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.64s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:72.47153524660553%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.68s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:56.17032820521247%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.72s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:83.31190995556393%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.76s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:81.63354846142283%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.8s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:69.62037627427627%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.84s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:48.748858945707155%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.88s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:53.454125509793094%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.92s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.96s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:87.47826922318156%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.04s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:49.932286996169815%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.08s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:97.57862211032273%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.12s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.16s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:99.08224893788619%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:76.70889905443468%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.24s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:56.10937710507946%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.28s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:94.0575287071265%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.32s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.36s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:73.81360209645601%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.4000000000000001s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.44s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:96.55862602047763%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.48s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:82.34554209420958%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.52s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:81.31485043275583%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.56s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:58.40469017032886%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.6s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:63.25798006882345%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.6400000000000001s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:84.65020725999581%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.68s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:80.33776007840792%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.72s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:69.1309581562674%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.76s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:87.57576464810441%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.8s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:53.61341677821952%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.84s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:72.68991338128546%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.8800000000000001s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:72.62336530261801%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.92s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:30.029096443013444%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.96s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:65.03861520454613%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:28.89252010246603%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:2.04s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:46.76835504267815%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:2.08s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:43.637948159820574%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:2.12s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:44.365169395479%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:2.16s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:22.58962053417339%;background:linear-gradient(to top,#d9775740,#d97757);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:2.2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div> </div> <!-- Satellite tags --> <div style="margin-top:28px;display:flex;gap:14px;flex-wrap:wrap;" data-astro-cid-c2fdjekn> <div class="font-mono" style="font-size:10px;letter-spacing:0.3em;padding:7px 12px;border:1px solid #d9775740;color:#d97757;opacity:0.9;" data-astro-cid-c2fdjekn> RIFFS </div><div class="font-mono" style="font-size:10px;letter-spacing:0.3em;padding:7px 12px;border:1px solid #d9775740;color:#d97757;opacity:0.9;" data-astro-cid-c2fdjekn> STORMS </div><div class="font-mono" style="font-size:10px;letter-spacing:0.3em;padding:7px 12px;border:1px solid #d9775740;color:#d97757;opacity:0.9;" data-astro-cid-c2fdjekn> DEFIANCE </div> </div> <!-- Action links --> <div style="display:flex;align-items:center;gap:28px;margin-top:36px;flex-wrap:wrap;" data-astro-cid-c2fdjekn> <a href="/lyrics" style="color:var(--gold);text-decoration:none;font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.3em;border-bottom:1px solid var(--gold-deep);padding-bottom:4px;" data-astro-cid-c2fdjekn>
READ THE LYRICS →
</a> <button data-play-genre="rock" data-play-track="believe-in-yourself" data-play-color="d97757" style="background:none;border:none;padding:0;cursor:pointer;color:#d97757;font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.3em;border-bottom:1px solid #d9775760;padding-bottom:4px;transition:color 0.3s,border-color 0.3s;" onmouseover="this.style.borderBottomColor='#d97757'" onmouseout="this.style.borderBottomColor='#d9775760'" data-astro-cid-c2fdjekn>
♫ PLAY THE MUSIC
</button> </div> </div><div class="orbit-panel" data-genre-panel="hiphop" style="display:none;" data-astro-cid-c2fdjekn> <div class="font-display" style="font-size:11px;letter-spacing:0.4em;color:var(--gold-deep);margin-bottom:18px;" data-astro-cid-c2fdjekn> AETHER · III · TRANSMISSION OPEN
</div> <h3 style="font-family:'Cinzel',serif;font-size:clamp(36px,5vw,64px);color:#f5d98a;margin-bottom:20px;line-height:1;transition:color 0.6s;" data-astro-cid-c2fdjekn> Hip Hop </h3> <p style="font-size:19px;color:var(--parchment);line-height:1.6;margin-bottom:28px;font-style:italic;font-family:'EB Garamond',serif;" data-astro-cid-c2fdjekn>
"Verses with bite. Beats that demand attention. Stories told in cadence and pressure."
</p> <!-- Waveform bars --> <div style="display:flex;align-items:center;gap:3px;height:64px;" data-astro-cid-c2fdjekn> <div style="width:3px;height:29.970611123826963%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:22.14929521504732%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.04s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:34.01642849480482%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.08s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:55.81476505152961%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.12s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:28.946613003599133%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.16s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:43.8805202398078%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:56.378095744018395%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.24s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:64.69825098958432%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.28s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:61.84486351233404%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.32s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:49.798556474290585%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.36s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:31.46693911118356%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.4s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:40.45721002970933%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.44s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:65.45854283049377%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.48s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:70.22650431098315%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.52s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:71.15194082398357%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.56s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:93.37954065618315%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.6s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:73.74195495515508%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.64s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.68s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:89.36429009522311%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.72s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.76s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:90.86974596279937%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.8s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.84s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:48.11234731966597%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.88s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.92s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:59.89267354047413%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.96s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:91.92865311081388%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:92.51100925854718%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.04s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:51.716406083311654%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.08s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:99.91338979171435%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.12s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.16s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:77.35247996640652%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:83.43419139066596%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.24s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.28s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.32s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.36s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:52.86976489675532%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.4000000000000001s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:98.42401123576626%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.44s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:79.02287485670179%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.48s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:90.34525029014735%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.52s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:64.68729323241757%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.56s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:80.86505348203808%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.6s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:62.696543000595504%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.6400000000000001s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:81.14211016178528%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.68s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:81.04990155960381%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.72s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:92.74198736823016%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.76s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:41.42601437079642%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.8s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:32.99422375158586%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.84s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:34.240442226464374%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.8800000000000001s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:57.88651317255958%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.92s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:64.56587877972268%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.96s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:30.246710854665594%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:44.544946639233856%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:2.04s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:40.63448471601601%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:2.08s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:38.40014034285752%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:2.12s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:37.44735151230651%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:2.16s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:26.03020619631454%;background:linear-gradient(to top,#f5d98a40,#f5d98a);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:2.2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div> </div> <!-- Satellite tags --> <div style="margin-top:28px;display:flex;gap:14px;flex-wrap:wrap;" data-astro-cid-c2fdjekn> <div class="font-mono" style="font-size:10px;letter-spacing:0.3em;padding:7px 12px;border:1px solid #f5d98a40;color:#f5d98a;opacity:0.9;" data-astro-cid-c2fdjekn> BARS </div><div class="font-mono" style="font-size:10px;letter-spacing:0.3em;padding:7px 12px;border:1px solid #f5d98a40;color:#f5d98a;opacity:0.9;" data-astro-cid-c2fdjekn> WITNESS </div><div class="font-mono" style="font-size:10px;letter-spacing:0.3em;padding:7px 12px;border:1px solid #f5d98a40;color:#f5d98a;opacity:0.9;" data-astro-cid-c2fdjekn> PULSE </div> </div> <!-- Action links --> <div style="display:flex;align-items:center;gap:28px;margin-top:36px;flex-wrap:wrap;" data-astro-cid-c2fdjekn> <a href="/lyrics" style="color:var(--gold);text-decoration:none;font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.3em;border-bottom:1px solid var(--gold-deep);padding-bottom:4px;" data-astro-cid-c2fdjekn>
READ THE LYRICS →
</a> <button data-play-genre="hiphop" data-play-track="angel-in-the-night" data-play-color="f5d98a" style="background:none;border:none;padding:0;cursor:pointer;color:#f5d98a;font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.3em;border-bottom:1px solid #f5d98a60;padding-bottom:4px;transition:color 0.3s,border-color 0.3s;" onmouseover="this.style.borderBottomColor='#f5d98a'" onmouseout="this.style.borderBottomColor='#f5d98a60'" data-astro-cid-c2fdjekn>
♫ PLAY THE MUSIC
</button> </div> </div><div class="orbit-panel" data-genre-panel="metal" style="display:none;" data-astro-cid-c2fdjekn> <div class="font-display" style="font-size:11px;letter-spacing:0.4em;color:var(--gold-deep);margin-bottom:18px;" data-astro-cid-c2fdjekn> AETHER · IV · TRANSMISSION OPEN
</div> <h3 style="font-family:'Cinzel',serif;font-size:clamp(36px,5vw,64px);color:#c46a78;margin-bottom:20px;line-height:1;transition:color 0.6s;" data-astro-cid-c2fdjekn> Symphonic Metal </h3> <p style="font-size:19px;color:var(--parchment);line-height:1.6;margin-bottom:28px;font-style:italic;font-family:'EB Garamond',serif;" data-astro-cid-c2fdjekn>
"Operatic. Cinematic. Where strings meet thunder and choirs ride the storm."
</p> <!-- Waveform bars --> <div style="display:flex;align-items:center;gap:3px;height:64px;" data-astro-cid-c2fdjekn> <div style="width:3px;height:26.4674296177615%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:34.13796532423937%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.04s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:44.174562561173346%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.08s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:38.49419317670196%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.12s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:50.71789359912545%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.16s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:31.92148515264331%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:69.20776012850979%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.24s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:46.507254611287294%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.28s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:47.64358911098538%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.32s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:59.10148849587552%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.36s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:39.48178194848395%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.4s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:48.78803855173633%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.44s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:90.5729757452688%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.48s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:44.551929857342486%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.52s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.56s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:53.42102785329015%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.6s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:53.47217680725893%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.64s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:93.13050813428052%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.68s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:70.88251176211953%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.72s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:91.79932683547871%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.76s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:65.18824542372627%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.8s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:72.19450538839557%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.84s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:96.0839085787434%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.88s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:63.43343806555634%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.92s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:86.6990241590093%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.96s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:68.76049238288665%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:61.33854487221665%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.04s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.08s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:83.53046463721674%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.12s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:46.98386043555064%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.16s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:90.69819274345316%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.24s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.28s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:69.0791528890219%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.32s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:53.8576083330358%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.36s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.4000000000000001s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:47.401552372706426%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.44s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:56.2564272553176%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.48s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:90.84349817195843%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.52s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:63.799492896862645%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.56s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:47.447539500417214%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.6s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.6400000000000001s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:90.64391100647065%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.68s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:91.65706151636337%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.72s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:77.21267880007979%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.76s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:34.632829435999426%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.8s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:45.594322034904664%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.84s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:65.45474990436057%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.8800000000000001s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:61.34083562109137%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.92s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:39.607898662123915%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.96s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:66.57792864053535%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:25.98517452809889%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:2.04s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:23.19852817355712%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:2.08s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:43.859054821840864%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:2.12s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:19.633680518878815%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:2.16s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:37.7659527090887%;background:linear-gradient(to top,#c46a7840,#c46a78);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:2.2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div> </div> <!-- Satellite tags --> <div style="margin-top:28px;display:flex;gap:14px;flex-wrap:wrap;" data-astro-cid-c2fdjekn> <div class="font-mono" style="font-size:10px;letter-spacing:0.3em;padding:7px 12px;border:1px solid #c46a7840;color:#c46a78;opacity:0.9;" data-astro-cid-c2fdjekn> CHOIRS </div><div class="font-mono" style="font-size:10px;letter-spacing:0.3em;padding:7px 12px;border:1px solid #c46a7840;color:#c46a78;opacity:0.9;" data-astro-cid-c2fdjekn> SIEGES </div><div class="font-mono" style="font-size:10px;letter-spacing:0.3em;padding:7px 12px;border:1px solid #c46a7840;color:#c46a78;opacity:0.9;" data-astro-cid-c2fdjekn> CROWNS </div> </div> <!-- Action links --> <div style="display:flex;align-items:center;gap:28px;margin-top:36px;flex-wrap:wrap;" data-astro-cid-c2fdjekn> <a href="/lyrics" style="color:var(--gold);text-decoration:none;font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.3em;border-bottom:1px solid var(--gold-deep);padding-bottom:4px;" data-astro-cid-c2fdjekn>
READ THE LYRICS →
</a> <button data-play-genre="metal" data-play-track="annabel-lee" data-play-color="c46a78" style="background:none;border:none;padding:0;cursor:pointer;color:#c46a78;font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.3em;border-bottom:1px solid #c46a7860;padding-bottom:4px;transition:color 0.3s,border-color 0.3s;" onmouseover="this.style.borderBottomColor='#c46a78'" onmouseout="this.style.borderBottomColor='#c46a7860'" data-astro-cid-c2fdjekn>
♫ PLAY THE MUSIC
</button> </div> </div><div class="orbit-panel" data-genre-panel="ariadoss" style="display:none;" data-astro-cid-c2fdjekn> <div class="font-display" style="font-size:11px;letter-spacing:0.4em;color:var(--gold-deep);margin-bottom:18px;" data-astro-cid-c2fdjekn> OST · I · TRANSMISSION OPEN
</div> <h3 style="font-family:'Cinzel',serif;font-size:clamp(36px,5vw,64px);color:#7fd9d4;margin-bottom:20px;line-height:1;transition:color 0.6s;" data-astro-cid-c2fdjekn> Ariadoss </h3> <p style="font-size:19px;color:var(--parchment);line-height:1.6;margin-bottom:28px;font-style:italic;font-family:'EB Garamond',serif;" data-astro-cid-c2fdjekn>
"The original soundtrack of the Ariadoss universe — voyages, vows, and the silence between stars."
</p> <!-- Waveform bars --> <div style="display:flex;align-items:center;gap:3px;height:64px;" data-astro-cid-c2fdjekn> <div style="width:3px;height:24.757244220645457%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:42.02120894085122%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.04s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:28.644139572338194%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.08s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:53.41779282992666%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.12s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:58.01031111162516%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.16s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:27.336430914600214%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:49.98686635779119%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.24s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:62.017350079968445%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.28s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:43.095025958106916%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.32s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:41.221086172607926%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.36s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:66.87171011258029%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.4s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:87.3811149685649%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.44s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:40.087679604340046%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.48s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:69.31350241201407%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.52s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:90.44199898182173%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.56s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.6s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:55.104025446647164%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.64s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:85.48718680827588%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.68s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:86.77428885658823%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.72s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:81.71527839564405%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.76s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.8s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:70.17298102028822%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.84s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.88s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:91.3381961301097%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.92s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:69.01487818039456%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.96s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:78.37404373000483%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.04s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:73.43944498931405%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.08s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:67.46395056076905%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.12s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:57.69721774982726%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.16s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:98.85947418943884%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:64.42510913828535%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.24s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:94.84775612152814%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.28s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:56.04585770913667%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.32s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:51.479315360220255%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.36s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.4000000000000001s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:81.78477229252898%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.44s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:83.67565639327456%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.48s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:75.7174026776003%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.52s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:77.61947638647165%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.56s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:61.889135905825164%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.6s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:69.96545948540421%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.6400000000000001s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:90.21522094428501%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.68s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:40.51069513611625%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.72s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:77.08770373857753%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.76s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:45.359893282403334%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.8s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:53.18737579556833%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.84s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:34.624653237898656%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.8800000000000001s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:55.53643503537623%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.92s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:43.882357328920584%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.96s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:56.847415307168895%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:34.463332197075694%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:2.04s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:59.56297866592342%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:2.08s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:46.64268869369324%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:2.12s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:36.02838952358668%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:2.16s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:33.1972911513301%;background:linear-gradient(to top,#7fd9d440,#7fd9d4);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:2.2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div> </div> <!-- Satellite tags --> <div style="margin-top:28px;display:flex;gap:14px;flex-wrap:wrap;" data-astro-cid-c2fdjekn> <div class="font-mono" style="font-size:10px;letter-spacing:0.3em;padding:7px 12px;border:1px solid #7fd9d440;color:#7fd9d4;opacity:0.9;" data-astro-cid-c2fdjekn> VOYAGES </div><div class="font-mono" style="font-size:10px;letter-spacing:0.3em;padding:7px 12px;border:1px solid #7fd9d440;color:#7fd9d4;opacity:0.9;" data-astro-cid-c2fdjekn> VOWS </div><div class="font-mono" style="font-size:10px;letter-spacing:0.3em;padding:7px 12px;border:1px solid #7fd9d440;color:#7fd9d4;opacity:0.9;" data-astro-cid-c2fdjekn> VACUUM </div> </div> <!-- Action links --> <div style="display:flex;align-items:center;gap:28px;margin-top:36px;flex-wrap:wrap;" data-astro-cid-c2fdjekn> <a href="/lyrics" style="color:var(--gold);text-decoration:none;font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.3em;border-bottom:1px solid var(--gold-deep);padding-bottom:4px;" data-astro-cid-c2fdjekn>
READ THE LYRICS →
</a> <button data-play-genre="ariadoss" data-play-track="the-advent-of-darkness" data-play-color="7fd9d4" style="background:none;border:none;padding:0;cursor:pointer;color:#7fd9d4;font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.3em;border-bottom:1px solid #7fd9d460;padding-bottom:4px;transition:color 0.3s,border-color 0.3s;" onmouseover="this.style.borderBottomColor='#7fd9d4'" onmouseout="this.style.borderBottomColor='#7fd9d460'" data-astro-cid-c2fdjekn>
♫ PLAY THE MUSIC
</button> </div> </div><div class="orbit-panel" data-genre-panel="comrades" style="display:none;" data-astro-cid-c2fdjekn> <div class="font-display" style="font-size:11px;letter-spacing:0.4em;color:var(--gold-deep);margin-bottom:18px;" data-astro-cid-c2fdjekn> OST · II · TRANSMISSION OPEN
</div> <h3 style="font-family:'Cinzel',serif;font-size:clamp(36px,5vw,64px);color:#a7b87f;margin-bottom:20px;line-height:1;transition:color 0.6s;" data-astro-cid-c2fdjekn> Comrades of the Sword </h3> <p style="font-size:19px;color:var(--parchment);line-height:1.6;margin-bottom:28px;font-style:italic;font-family:'EB Garamond',serif;" data-astro-cid-c2fdjekn>
"Themes from the world of Comrades of the Sword. Fellowship music for cursed roads."
</p> <!-- Waveform bars --> <div style="display:flex;align-items:center;gap:3px;height:64px;" data-astro-cid-c2fdjekn> <div style="width:3px;height:17.699794003204396%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:23.032695022825738%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.04s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:19.80462156869261%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.08s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:50.292598666744446%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.12s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:56.099244068182905%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.16s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:43.23017609547557%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:55.748687583525026%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.24s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:29.18758739460714%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.28s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:61.97414089512606%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.32s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:48.248743280488156%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.36s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:76.50993066621027%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.4s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:37.221936817271654%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.44s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:63.36266476204116%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.48s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:38.00426465978853%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.52s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:40.95465477304173%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.56s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:54.03994293947198%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.6s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:79.59759822814429%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.64s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:40.42508674842439%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.68s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:65.47502417177347%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.72s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:50.7639693625343%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.76s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:80.27715150302795%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.8s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.84s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.88s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:87.38739953083167%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.92s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.96s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.04s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:93.36972201674902%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.08s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:49.65346761272602%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.12s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.16s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:92.29840339035908%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.24s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.28s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:74.88015496456146%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.32s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:55.902773725867185%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.36s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:51.90299990585546%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.4000000000000001s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:62.41657810704021%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.44s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:60.466140701096414%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.48s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:85.91539384429029%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.52s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:39.51235429111396%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.56s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:86.4503063008633%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.6s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:61.78510585875561%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.6400000000000001s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:81.88212270532615%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.68s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:54.91690404721763%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.72s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:49.883872943724086%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.76s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:85.34751466360407%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.8s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:32.429570632862514%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.84s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:50.48430017824291%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.8800000000000001s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:40.87730323663919%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.92s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:43.25249835232607%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.96s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:47.04369906817984%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:57.4545339452304%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:2.04s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:28.465571828801217%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:2.08s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:34.1804132010177%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:2.12s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:26.39820613319174%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:2.16s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:28.761047925754042%;background:linear-gradient(to top,#a7b87f40,#a7b87f);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:2.2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div> </div> <!-- Satellite tags --> <div style="margin-top:28px;display:flex;gap:14px;flex-wrap:wrap;" data-astro-cid-c2fdjekn> <div class="font-mono" style="font-size:10px;letter-spacing:0.3em;padding:7px 12px;border:1px solid #a7b87f40;color:#a7b87f;opacity:0.9;" data-astro-cid-c2fdjekn> HEARTHS </div><div class="font-mono" style="font-size:10px;letter-spacing:0.3em;padding:7px 12px;border:1px solid #a7b87f40;color:#a7b87f;opacity:0.9;" data-astro-cid-c2fdjekn> MARCHES </div><div class="font-mono" style="font-size:10px;letter-spacing:0.3em;padding:7px 12px;border:1px solid #a7b87f40;color:#a7b87f;opacity:0.9;" data-astro-cid-c2fdjekn> OATHS </div> </div> <!-- Action links --> <div style="display:flex;align-items:center;gap:28px;margin-top:36px;flex-wrap:wrap;" data-astro-cid-c2fdjekn> <a href="/lyrics" style="color:var(--gold);text-decoration:none;font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.3em;border-bottom:1px solid var(--gold-deep);padding-bottom:4px;" data-astro-cid-c2fdjekn>
READ THE LYRICS →
</a> <button data-play-genre="comrades" data-play-track="a-flame-reborn" data-play-color="a7b87f" style="background:none;border:none;padding:0;cursor:pointer;color:#a7b87f;font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.3em;border-bottom:1px solid #a7b87f60;padding-bottom:4px;transition:color 0.3s,border-color 0.3s;" onmouseover="this.style.borderBottomColor='#a7b87f'" onmouseout="this.style.borderBottomColor='#a7b87f60'" data-astro-cid-c2fdjekn>
♫ PLAY THE MUSIC
</button> </div> </div><div class="orbit-panel" data-genre-panel="bahai" style="display:none;" data-astro-cid-c2fdjekn> <div class="font-display" style="font-size:11px;letter-spacing:0.4em;color:var(--gold-deep);margin-bottom:18px;" data-astro-cid-c2fdjekn> CANTUS · TRANSMISSION OPEN
</div> <h3 style="font-family:'Cinzel',serif;font-size:clamp(36px,5vw,64px);color:#efc878;margin-bottom:20px;line-height:1;transition:color 0.6s;" data-astro-cid-c2fdjekn> Bahá&#39;í </h3> <p style="font-size:19px;color:var(--parchment);line-height:1.6;margin-bottom:28px;font-style:italic;font-family:'EB Garamond',serif;" data-astro-cid-c2fdjekn>
"Songs of devotion, unity, and a faith I carry quietly through all the rest."
</p> <!-- Waveform bars --> <div style="display:flex;align-items:center;gap:3px;height:64px;" data-astro-cid-c2fdjekn> <div style="width:3px;height:31.30670634012359%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:45.45446348425562%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.04s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:27.934658577978276%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.08s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:21.673586365994797%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.12s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:47.51849350832836%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.16s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:62.58111490188083%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:62.95883171769848%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.24s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:39.83482245045818%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.28s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:43.33588203438013%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.32s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:82.28546180609358%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.36s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:83.11824299391968%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.4s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:83.78054030274484%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.44s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:47.73893059186689%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.48s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:52.01932433627896%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.52s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:60.95389161843987%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.56s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:79.01722091996056%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.6s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:66.01364654453779%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.64s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:50.66568475817702%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.68s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:59.14871866129473%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.72s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:78.75658073563639%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.76s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:42.583168624331755%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:0.8s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:65.46704124055603%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:0.84s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:0.88s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:0.92s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:85.02917215058261%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:0.96s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:90.77165306389261%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.04s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:47.97160802704784%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.08s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:94.84463263904782%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.12s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:56.103240074048635%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.16s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:47.32465931519215%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.24s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:65.78819908114212%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.28s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:73.23218404914049%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.32s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:76.76012945694742%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.36s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:89.22083250968045%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.4000000000000001s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:93.50519639345087%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.44s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:100%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.48s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:69.62856943150368%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.52s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:55.24235510825385%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.56s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:59.11024026166306%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.6s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:82.68144456451961%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.6400000000000001s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:70.64169023952597%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.68s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:55.93081668238854%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.72s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:83.90949061420793%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.76s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:77.26199806647621%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:1.8s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:66.3997485449727%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:1.84s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:66.78570872456118%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:1.8800000000000001s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:39.155913324105086%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:1.92s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:55.243820462157075%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:1.96s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:60.9200965891439%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:37.78994491173576%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.3s ease-in-out infinite;animation-delay:2.04s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:48.271013365933044%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.6s ease-in-out infinite;animation-delay:2.08s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:49.29431858822005%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2.9s ease-in-out infinite;animation-delay:2.12s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:30.195719543656935%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 3.2s ease-in-out infinite;animation-delay:2.16s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div><div style="width:3px;height:32.56544035520643%;background:linear-gradient(to top,#efc87840,#efc878);opacity:0.85;animation:drift 2s ease-in-out infinite;animation-delay:2.2s;transition:background 0.6s;" data-astro-cid-c2fdjekn></div> </div> <!-- Satellite tags --> <div style="margin-top:28px;display:flex;gap:14px;flex-wrap:wrap;" data-astro-cid-c2fdjekn> <div class="font-mono" style="font-size:10px;letter-spacing:0.3em;padding:7px 12px;border:1px solid #efc87840;color:#efc878;opacity:0.9;" data-astro-cid-c2fdjekn> PRAYER </div><div class="font-mono" style="font-size:10px;letter-spacing:0.3em;padding:7px 12px;border:1px solid #efc87840;color:#efc878;opacity:0.9;" data-astro-cid-c2fdjekn> UNITY </div><div class="font-mono" style="font-size:10px;letter-spacing:0.3em;padding:7px 12px;border:1px solid #efc87840;color:#efc878;opacity:0.9;" data-astro-cid-c2fdjekn> LIGHT </div> </div> <!-- Action links --> <div style="display:flex;align-items:center;gap:28px;margin-top:36px;flex-wrap:wrap;" data-astro-cid-c2fdjekn> <a href="/lyrics" style="color:var(--gold);text-decoration:none;font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.3em;border-bottom:1px solid var(--gold-deep);padding-bottom:4px;" data-astro-cid-c2fdjekn>
READ THE LYRICS →
</a> <button data-play-genre="bahai" data-play-track="fire-in-the-night" data-play-color="efc878" style="background:none;border:none;padding:0;cursor:pointer;color:#efc878;font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.3em;border-bottom:1px solid #efc87860;padding-bottom:4px;transition:color 0.3s,border-color 0.3s;" onmouseover="this.style.borderBottomColor='#efc878'" onmouseout="this.style.borderBottomColor='#efc87860'" data-astro-cid-c2fdjekn>
♫ PLAY THE MUSIC
</button> </div> </div> </div> </div> </div> </div> </section> <!-- SoundCloud Player Modal --> <div id="sc-modal" aria-modal="true" role="dialog" aria-label="Music player" style="display:none;position:fixed;inset:0;z-index:200;align-items:center;justify-content:center;padding:24px;" data-astro-cid-c2fdjekn> <!-- Backdrop --> <div id="sc-backdrop" style="position:absolute;inset:0;background:rgba(6,4,13,0.92);backdrop-filter:blur(16px);" data-astro-cid-c2fdjekn></div> <!-- Panel --> <div id="sc-panel" style="position:relative;z-index:1;width:100%;max-width:760px;background:rgba(10,8,22,0.98);border:1px solid var(--line-strong);border-radius:4px;overflow:hidden;box-shadow:0 0 80px rgba(245,217,138,0.08);" data-astro-cid-c2fdjekn> <!-- Header --> <div id="sc-header" style="display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line);" data-astro-cid-c2fdjekn> <div style="display:flex;align-items:center;gap:14px;" data-astro-cid-c2fdjekn> <span class="font-mono" id="sc-genre-label" style="font-size:10px;letter-spacing:0.3em;color:var(--gold-deep);" data-astro-cid-c2fdjekn>AETHER</span> <span class="font-display" id="sc-genre-name" style="font-size:14px;letter-spacing:0.15em;color:var(--parchment);" data-astro-cid-c2fdjekn></span> </div> <button id="sc-close" aria-label="Close player" style="background:none;border:none;cursor:pointer;color:var(--parchment-dim);font-size:20px;line-height:1;padding:4px;transition:color 0.3s;" onmouseover="this.style.color='var(--gold)'" onmouseout="this.style.color='var(--parchment-dim)'" data-astro-cid-c2fdjekn>✕</button> </div> <!-- Embedded SoundCloud iframe + loading overlay --> <div style="position:relative;background:#06040d;height:400px;" data-astro-cid-c2fdjekn> <!-- Loading animation (shown until iframe loads) --> <div id="sc-loader" style="position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;background:#06040d;" data-astro-cid-c2fdjekn> <!-- Pulsing waveform bars --> <div style="display:flex;align-items:center;gap:5px;height:56px;" data-astro-cid-c2fdjekn> <div style="width:4px;height:40%;border-radius:2px;background:linear-gradient(to top,var(--gold-deep),var(--gold));opacity:0.9;animation:drift 1.8s ease-in-out infinite;animation-delay:0s;" data-astro-cid-c2fdjekn></div><div style="width:4px;height:70%;border-radius:2px;background:linear-gradient(to top,var(--gold-deep),var(--gold));opacity:0.9;animation:drift 2.05s ease-in-out infinite;animation-delay:0.08s;" data-astro-cid-c2fdjekn></div><div style="width:4px;height:100%;border-radius:2px;background:linear-gradient(to top,var(--gold-deep),var(--gold));opacity:0.9;animation:drift 2.3s ease-in-out infinite;animation-delay:0.16s;" data-astro-cid-c2fdjekn></div><div style="width:4px;height:85%;border-radius:2px;background:linear-gradient(to top,var(--gold-deep),var(--gold));opacity:0.9;animation:drift 2.55s ease-in-out infinite;animation-delay:0.24s;" data-astro-cid-c2fdjekn></div><div style="width:4px;height:60%;border-radius:2px;background:linear-gradient(to top,var(--gold-deep),var(--gold));opacity:0.9;animation:drift 2.8s ease-in-out infinite;animation-delay:0.32s;" data-astro-cid-c2fdjekn></div><div style="width:4px;height:90%;border-radius:2px;background:linear-gradient(to top,var(--gold-deep),var(--gold));opacity:0.9;animation:drift 1.8s ease-in-out infinite;animation-delay:0.4s;" data-astro-cid-c2fdjekn></div><div style="width:4px;height:50%;border-radius:2px;background:linear-gradient(to top,var(--gold-deep),var(--gold));opacity:0.9;animation:drift 2.05s ease-in-out infinite;animation-delay:0.48s;" data-astro-cid-c2fdjekn></div><div style="width:4px;height:75%;border-radius:2px;background:linear-gradient(to top,var(--gold-deep),var(--gold));opacity:0.9;animation:drift 2.3s ease-in-out infinite;animation-delay:0.56s;" data-astro-cid-c2fdjekn></div><div style="width:4px;height:100%;border-radius:2px;background:linear-gradient(to top,var(--gold-deep),var(--gold));opacity:0.9;animation:drift 2.55s ease-in-out infinite;animation-delay:0.64s;" data-astro-cid-c2fdjekn></div><div style="width:4px;height:65%;border-radius:2px;background:linear-gradient(to top,var(--gold-deep),var(--gold));opacity:0.9;animation:drift 2.8s ease-in-out infinite;animation-delay:0.72s;" data-astro-cid-c2fdjekn></div><div style="width:4px;height:80%;border-radius:2px;background:linear-gradient(to top,var(--gold-deep),var(--gold));opacity:0.9;animation:drift 1.8s ease-in-out infinite;animation-delay:0.8s;" data-astro-cid-c2fdjekn></div><div style="width:4px;height:45%;border-radius:2px;background:linear-gradient(to top,var(--gold-deep),var(--gold));opacity:0.9;animation:drift 2.05s ease-in-out infinite;animation-delay:0.88s;" data-astro-cid-c2fdjekn></div><div style="width:4px;height:95%;border-radius:2px;background:linear-gradient(to top,var(--gold-deep),var(--gold));opacity:0.9;animation:drift 2.3s ease-in-out infinite;animation-delay:0.96s;" data-astro-cid-c2fdjekn></div><div style="width:4px;height:70%;border-radius:2px;background:linear-gradient(to top,var(--gold-deep),var(--gold));opacity:0.9;animation:drift 2.55s ease-in-out infinite;animation-delay:1.04s;" data-astro-cid-c2fdjekn></div><div style="width:4px;height:55.00000000000001%;border-radius:2px;background:linear-gradient(to top,var(--gold-deep),var(--gold));opacity:0.9;animation:drift 2.8s ease-in-out infinite;animation-delay:1.12s;" data-astro-cid-c2fdjekn></div> </div> <!-- Spinning ring --> <div style="position:relative;width:64px;height:64px;" data-astro-cid-c2fdjekn> <div style="position:absolute;inset:0;border:1px solid var(--line);border-radius:50%;" data-astro-cid-c2fdjekn></div> <div style="position:absolute;inset:0;border:1px solid transparent;border-top-color:var(--gold);border-radius:50%;animation:spin-slow 1.4s linear infinite;" data-astro-cid-c2fdjekn></div> <div style="position:absolute;inset:8px;border:1px solid transparent;border-top-color:var(--aurora);border-radius:50%;animation:spin-rev 2s linear infinite;" data-astro-cid-c2fdjekn></div> </div> <span id="sc-loader-label" class="font-mono" style="font-size:10px;letter-spacing:0.35em;color:var(--parchment-dim);opacity:0.7;" data-astro-cid-c2fdjekn>TUNING IN ·</span> </div> <iframe id="sc-iframe" width="100%" height="400" scrolling="no" frameborder="no" allow="autoplay; encrypted-media" style="display:block;position:relative;z-index:1;opacity:0;transition:opacity 0.5s ease;" src="about:blank" data-astro-cid-c2fdjekn></iframe> </div> <!-- Footer hint --> <div style="padding:14px 24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;" data-astro-cid-c2fdjekn> <span class="font-mono" style="font-size:9px;letter-spacing:0.25em;color:var(--parchment-dim);opacity:0.6;" data-astro-cid-c2fdjekn>SOUNDCLOUD · DANILO STERN-SAPAD</span> <a href="https://soundcloud.com/danilosapad" target="_blank" rel="noopener noreferrer" class="font-mono" style="font-size:9px;letter-spacing:0.25em;color:var(--gold-deep);text-decoration:none;transition:color 0.3s;" onmouseover="this.style.color='var(--gold)'" onmouseout="this.style.color='var(--gold-deep)'" data-astro-cid-c2fdjekn>OPEN IN SOUNDCLOUD ↗</a> </div> </div> </div>  <script type="module">const E=document.querySelectorAll("[data-genre-orb]"),g=document.querySelectorAll("[data-genre-panel]");function m(e){E.forEach(o=>{const t=o.querySelector(".orb-dot"),n=o.querySelector(".orb-ring"),i=o.querySelector(".orb-label"),r=o.dataset.genreOrb===e;if(t){t.style.width=r?"22px":"14px",t.style.height=r?"22px":"14px";const u=t.style.background||t.style.backgroundColor||"";t.style.boxShadow=r?`0 0 24px ${u}`:`0 0 8px ${u}`}n&&(n.style.opacity=r?"0.6":"0"),i&&(i.style.color=r?i.closest(".orbit-orb")?.querySelector(".orb-dot")?.style.background||"var(--gold)":"var(--parchment-dim)")}),["pop","rock","hiphop","metal","ariadoss","comrades","bahai"].forEach(o=>{const t=document.getElementById(`orbit-line-${o}`);if(!t)return;if(o===e){const u=document.querySelector(`[data-genre-panel="${o}"]`)?.querySelector("h3")?.style.color||"var(--gold)";t.setAttribute("stroke",u),t.setAttribute("stroke-width","0.8"),t.setAttribute("opacity","0.9"),t.setAttribute("stroke-dasharray","0")}else t.setAttribute("stroke","var(--line)"),t.setAttribute("stroke-width","0.3"),t.setAttribute("opacity","0.4"),t.setAttribute("stroke-dasharray","2 4")}),g.forEach(o=>{o.style.display=o.dataset.genrePanel===e?"block":"none"})}E.forEach(e=>{e.addEventListener("click",()=>m(e.dataset.genreOrb||"")),e.addEventListener("mouseenter",()=>m(e.dataset.genreOrb||""))});m("pop");const y=document.getElementById("sc-modal"),a=document.getElementById("sc-iframe"),I=document.getElementById("sc-close"),k=document.getElementById("sc-backdrop"),f=document.getElementById("sc-genre-name"),h=document.getElementById("sc-genre-label"),c=document.getElementById("sc-loader"),b=document.getElementById("sc-loader-label");let l=null,s=null;function v(){if(!c||!a)return;c.style.display="flex",a.style.opacity="0";let e=0;l=setInterval(()=>{e=(e+1)%4,b&&(b.textContent="TUNING IN "+"·".repeat(e+1))},400)}function A(){l&&(clearInterval(l),l=null),s&&(clearTimeout(s),s=null),c&&(c.style.display="none"),a&&(a.style.opacity="1")}function S(e,d,o,t){if(!y||!a)return;const n=`https://w.soundcloud.com/player/?url=https%3A//soundcloud.com/danilosapad/${e}&color=${t}&auto_play=true&hide_related=true&show_comments=false&show_user=false&show_reposts=false&show_teaser=false&visual=true`;v(),a.src=n,s=setTimeout(A,2e3),f&&(f.textContent=d),h&&(h.textContent=o),y.classList.add("open"),document.body.style.overflow="hidden"}function p(){!y||!a||(s&&(clearTimeout(s),s=null),y.classList.remove("open"),a.src="about:blank",l&&(clearInterval(l),l=null),c&&(c.style.display="flex"),a.style.opacity="0",document.body.style.overflow="")}I?.addEventListener("click",p);k?.addEventListener("click",p);document.addEventListener("keydown",e=>{e.key==="Escape"&&p()});const L={pop:{name:"Pop",latin:"AETHER · I"},rock:{name:"Rock",latin:"AETHER · II"},hiphop:{name:"Hip Hop",latin:"AETHER · III"},metal:{name:"Symphonic Metal",latin:"AETHER · IV"},ariadoss:{name:"Ariadoss",latin:"OST · I"},comrades:{name:"Comrades of the Sword",latin:"OST · II"},bahai:{name:"Bahá'í",latin:"CANTUS"}};document.querySelectorAll("[data-play-genre]").forEach(e=>{e.addEventListener("click",()=>{const d=e.dataset.playGenre||"",o=e.dataset.playTrack||"",t=e.dataset.playColor||"f5d98a",n=L[d]||{name:d,latin:"AETHER"};S(o,n.name,n.latin,t)})});</script> <section data-realm="concord" id="websites" style="position:relative;padding:140px 6vw;min-height:100vh;"> <div style="max-width:1400px;margin:0 auto;"> <!-- Realm heading --> <div class="reveal" style="display:flex;flex-direction:column;gap:18px;margin-bottom:56px;"> <div style="display:flex;align-items:center;gap:20px;"> <span class="font-mono" style="color:var(--gold-deep);font-size:12px;letter-spacing:0.3em;">REALM · 03</span> <span style="flex:1;height:1px;background:linear-gradient(to right,var(--line-strong),transparent);"></span> <span class="font-mono" style="color:var(--parchment-dim);font-size:11px;letter-spacing:0.3em;">LIBER · III</span> </div> <h2 class="font-display" style="font-size:clamp(48px,7vw,96px);font-weight:600;line-height:1;color:var(--parchment);">
The Concord<br> <em style="font-family:'EB Garamond',serif;font-style:italic;font-weight:400;color:var(--gold);">of Empires</em> </h2> <p style="font-family:'EB Garamond',serif;font-style:italic;font-size:22px;max-width:720px;color:var(--parchment-dim);">
My outposts across the vast universe of stars. Companies founded, games conjured, communities seeded. Each one an experiment in making things people want (or at least I want).
</p> </div> <!-- Venture cards grid --> <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(20px,2vw,32px);"> <div class="reveal" style="--delay:0s;"> <a href="https://hyperion360.com/" target="_blank" rel="noopener noreferrer" class="venture-card-new" data-color="#f5d98a" style="position:relative;display:block;text-decoration:none;color:inherit;padding:28px 26px;background:rgba(10,8,22,0.45);border:1px solid var(--line);transition:all 0.5s cubic-bezier(.2,.7,.2,1);backdrop-filter:blur(2px);"> <!-- Corner brackets --> <span class="vc-bracket" style="position:absolute;top:-1px;left:-1px;width:10px;height:10px;border-top:1px solid var(--gold-deep);border-left:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <span class="vc-bracket" style="position:absolute;top:-1px;right:-1px;width:10px;height:10px;border-top:1px solid var(--gold-deep);border-right:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <span class="vc-bracket" style="position:absolute;bottom:-1px;left:-1px;width:10px;height:10px;border-bottom:1px solid var(--gold-deep);border-left:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <span class="vc-bracket" style="position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-bottom:1px solid var(--gold-deep);border-right:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <!-- Header row: logo + tag + outpost num --> <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;gap:14px;"> <div style="position:relative;width:56px;height:56px;flex-shrink:0;overflow:hidden;background:rgba(6,4,13,0.5);border:1px solid var(--line);transition:all 0.4s;display:flex;align-items:center;justify-content:center;"> <img src="/images/hyperion360.webp" alt="" style="width:100%;height:100%;object-fit:cover;transition:transform 0.6s;" class="vc-logo"> </div> <div style="text-align:right;"> <div class="font-mono" style="font-size:9px;letter-spacing:0.3em;color:#f5d98a;opacity:0.85;">TALENT NETWORK</div> <div class="font-mono" style="font-size:9px;letter-spacing:0.3em;color:var(--parchment-dim);margin-top:4px;">OUTPOST · 01</div> </div> </div> <h3 style="font-family:'Cinzel',serif;font-size:26px;color:var(--parchment);margin-bottom:4px;">Hyperion360</h3> <div style="font-family:'EB Garamond',serif;font-style:italic;font-size:14px;color:#f5d98a;margin-bottom:14px;opacity:0.9;">Founder &amp; CEO</div> <p style="font-size:15px;color:var(--parchment-dim);line-height:1.55;">Matches great companies with great talent. A global team of software developers in your time zone — English-speaking, 50% the cost.</p> <!-- Visit link --> <div class="vc-visit" style="margin-top:22px;display:flex;align-items:center;gap:10px;font-family:'Cinzel',serif;font-size:11px;letter-spacing:0.3em;color:var(--gold-deep);transition:color 0.4s;"> <span>VISIT</span> <span class="vc-line" style="height:1px;background:currentColor;width:0;max-width:60px;transition:width 0.5s;"></span> <span>↗</span> </div> </a> </div><div class="reveal" style="--delay:0.06s;"> <a href="https://blixo.com/" target="_blank" rel="noopener noreferrer" class="venture-card-new" data-color="#7fd9d4" style="position:relative;display:block;text-decoration:none;color:inherit;padding:28px 26px;background:rgba(10,8,22,0.45);border:1px solid var(--line);transition:all 0.5s cubic-bezier(.2,.7,.2,1);backdrop-filter:blur(2px);"> <!-- Corner brackets --> <span class="vc-bracket" style="position:absolute;top:-1px;left:-1px;width:10px;height:10px;border-top:1px solid var(--gold-deep);border-left:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <span class="vc-bracket" style="position:absolute;top:-1px;right:-1px;width:10px;height:10px;border-top:1px solid var(--gold-deep);border-right:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <span class="vc-bracket" style="position:absolute;bottom:-1px;left:-1px;width:10px;height:10px;border-bottom:1px solid var(--gold-deep);border-left:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <span class="vc-bracket" style="position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-bottom:1px solid var(--gold-deep);border-right:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <!-- Header row: logo + tag + outpost num --> <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;gap:14px;"> <div style="position:relative;width:56px;height:56px;flex-shrink:0;overflow:hidden;background:rgba(6,4,13,0.5);border:1px solid var(--line);transition:all 0.4s;display:flex;align-items:center;justify-content:center;"> <img src="/images/blixo.webp" alt="" style="width:100%;height:100%;object-fit:cover;transition:transform 0.6s;" class="vc-logo"> </div> <div style="text-align:right;"> <div class="font-mono" style="font-size:9px;letter-spacing:0.3em;color:#7fd9d4;opacity:0.85;">YC-BACKED FINTECH</div> <div class="font-mono" style="font-size:9px;letter-spacing:0.3em;color:var(--parchment-dim);margin-top:4px;">OUTPOST · 02</div> </div> </div> <h3 style="font-family:'Cinzel',serif;font-size:26px;color:var(--parchment);margin-bottom:4px;">Blixo</h3> <div style="font-family:'EB Garamond',serif;font-style:italic;font-size:14px;color:#7fd9d4;margin-bottom:14px;opacity:0.9;">Co-founder</div> <p style="font-size:15px;color:var(--parchment-dim);line-height:1.55;">Makes paying remote workers a breeze. Backed by Y Combinator and trusted by companies tired of clunky, overpriced systems.</p> <!-- Visit link --> <div class="vc-visit" style="margin-top:22px;display:flex;align-items:center;gap:10px;font-family:'Cinzel',serif;font-size:11px;letter-spacing:0.3em;color:var(--gold-deep);transition:color 0.4s;"> <span>VISIT</span> <span class="vc-line" style="height:1px;background:currentColor;width:0;max-width:60px;transition:width 0.5s;"></span> <span>↗</span> </div> </a> </div><div class="reveal" style="--delay:0.12s;"> <a href="https://elementaldeodorant.com/" target="_blank" rel="noopener noreferrer" class="venture-card-new" data-color="#a7b87f" style="position:relative;display:block;text-decoration:none;color:inherit;padding:28px 26px;background:rgba(10,8,22,0.45);border:1px solid var(--line);transition:all 0.5s cubic-bezier(.2,.7,.2,1);backdrop-filter:blur(2px);"> <!-- Corner brackets --> <span class="vc-bracket" style="position:absolute;top:-1px;left:-1px;width:10px;height:10px;border-top:1px solid var(--gold-deep);border-left:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <span class="vc-bracket" style="position:absolute;top:-1px;right:-1px;width:10px;height:10px;border-top:1px solid var(--gold-deep);border-right:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <span class="vc-bracket" style="position:absolute;bottom:-1px;left:-1px;width:10px;height:10px;border-bottom:1px solid var(--gold-deep);border-left:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <span class="vc-bracket" style="position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-bottom:1px solid var(--gold-deep);border-right:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <!-- Header row: logo + tag + outpost num --> <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;gap:14px;"> <div style="position:relative;width:56px;height:56px;flex-shrink:0;overflow:hidden;background:rgba(6,4,13,0.5);border:1px solid var(--line);transition:all 0.4s;display:flex;align-items:center;justify-content:center;"> <img src="/images/elemental.webp" alt="" style="width:100%;height:100%;object-fit:cover;transition:transform 0.6s;" class="vc-logo"> </div> <div style="text-align:right;"> <div class="font-mono" style="font-size:9px;letter-spacing:0.3em;color:#a7b87f;opacity:0.85;">CONSUMER GOODS</div> <div class="font-mono" style="font-size:9px;letter-spacing:0.3em;color:var(--parchment-dim);margin-top:4px;">OUTPOST · 03</div> </div> </div> <h3 style="font-family:'Cinzel',serif;font-size:26px;color:var(--parchment);margin-bottom:4px;">Elemental Deodorant</h3> <div style="font-family:'EB Garamond',serif;font-style:italic;font-size:14px;color:#a7b87f;margin-bottom:14px;opacity:0.9;">Founder</div> <p style="font-size:15px;color:var(--parchment-dim);line-height:1.55;">Organic, all-natural deodorant that actually works. Made in the USA.</p> <!-- Visit link --> <div class="vc-visit" style="margin-top:22px;display:flex;align-items:center;gap:10px;font-family:'Cinzel',serif;font-size:11px;letter-spacing:0.3em;color:var(--gold-deep);transition:color 0.4s;"> <span>VISIT</span> <span class="vc-line" style="height:1px;background:currentColor;width:0;max-width:60px;transition:width 0.5s;"></span> <span>↗</span> </div> </a> </div><div class="reveal" style="--delay:0.18s;"> <a href="https://hogwartslive.com/" target="_blank" rel="noopener noreferrer" class="venture-card-new" data-color="#c46a78" style="position:relative;display:block;text-decoration:none;color:inherit;padding:28px 26px;background:rgba(10,8,22,0.45);border:1px solid var(--line);transition:all 0.5s cubic-bezier(.2,.7,.2,1);backdrop-filter:blur(2px);"> <!-- Corner brackets --> <span class="vc-bracket" style="position:absolute;top:-1px;left:-1px;width:10px;height:10px;border-top:1px solid var(--gold-deep);border-left:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <span class="vc-bracket" style="position:absolute;top:-1px;right:-1px;width:10px;height:10px;border-top:1px solid var(--gold-deep);border-right:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <span class="vc-bracket" style="position:absolute;bottom:-1px;left:-1px;width:10px;height:10px;border-bottom:1px solid var(--gold-deep);border-left:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <span class="vc-bracket" style="position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-bottom:1px solid var(--gold-deep);border-right:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <!-- Header row: logo + tag + outpost num --> <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;gap:14px;"> <div style="position:relative;width:56px;height:56px;flex-shrink:0;overflow:hidden;background:rgba(6,4,13,0.5);border:1px solid var(--line);transition:all 0.4s;display:flex;align-items:center;justify-content:center;"> <img src="/images/hogwarts-live-rpg.webp" alt="" style="width:100%;height:100%;object-fit:cover;transition:transform 0.6s;" class="vc-logo"> </div> <div style="text-align:right;"> <div class="font-mono" style="font-size:9px;letter-spacing:0.3em;color:#c46a78;opacity:0.85;">MMO · PARODY</div> <div class="font-mono" style="font-size:9px;letter-spacing:0.3em;color:var(--parchment-dim);margin-top:4px;">OUTPOST · 04</div> </div> </div> <h3 style="font-family:'Cinzel',serif;font-size:26px;color:var(--parchment);margin-bottom:4px;">Hogwarts Live RPG</h3> <div style="font-family:'EB Garamond',serif;font-style:italic;font-size:14px;color:#c46a78;margin-bottom:14px;opacity:0.9;">Creator</div> <p style="font-size:15px;color:var(--parchment-dim);line-height:1.55;">A multiplayer roleplaying game and parody of the wizarding world. Built for the fans who never wanted to leave the castle.</p> <!-- Visit link --> <div class="vc-visit" style="margin-top:22px;display:flex;align-items:center;gap:10px;font-family:'Cinzel',serif;font-size:11px;letter-spacing:0.3em;color:var(--gold-deep);transition:color 0.4s;"> <span>VISIT</span> <span class="vc-line" style="height:1px;background:currentColor;width:0;max-width:60px;transition:width 0.5s;"></span> <span>↗</span> </div> </a> </div><div class="reveal" style="--delay:0.24s;"> <a href="https://authorwars.com/" target="_blank" rel="noopener noreferrer" class="venture-card-new" data-color="#efc878" style="position:relative;display:block;text-decoration:none;color:inherit;padding:28px 26px;background:rgba(10,8,22,0.45);border:1px solid var(--line);transition:all 0.5s cubic-bezier(.2,.7,.2,1);backdrop-filter:blur(2px);"> <!-- Corner brackets --> <span class="vc-bracket" style="position:absolute;top:-1px;left:-1px;width:10px;height:10px;border-top:1px solid var(--gold-deep);border-left:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <span class="vc-bracket" style="position:absolute;top:-1px;right:-1px;width:10px;height:10px;border-top:1px solid var(--gold-deep);border-right:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <span class="vc-bracket" style="position:absolute;bottom:-1px;left:-1px;width:10px;height:10px;border-bottom:1px solid var(--gold-deep);border-left:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <span class="vc-bracket" style="position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-bottom:1px solid var(--gold-deep);border-right:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <!-- Header row: logo + tag + outpost num --> <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;gap:14px;"> <div style="position:relative;width:56px;height:56px;flex-shrink:0;overflow:hidden;background:rgba(6,4,13,0.5);border:1px solid var(--line);transition:all 0.4s;display:flex;align-items:center;justify-content:center;"> <img src="/images/author-wars.webp" alt="" style="width:100%;height:100%;object-fit:cover;transition:transform 0.6s;" class="vc-logo"> </div> <div style="text-align:right;"> <div class="font-mono" style="font-size:9px;letter-spacing:0.3em;color:#efc878;opacity:0.85;">LIBRARY · COMMUNITY</div> <div class="font-mono" style="font-size:9px;letter-spacing:0.3em;color:var(--parchment-dim);margin-top:4px;">OUTPOST · 05</div> </div> </div> <h3 style="font-family:'Cinzel',serif;font-size:26px;color:var(--parchment);margin-bottom:4px;">Author Wars</h3> <div style="font-family:'EB Garamond',serif;font-style:italic;font-size:14px;color:#efc878;margin-bottom:14px;opacity:0.9;">Creator</div> <p style="font-size:15px;color:var(--parchment-dim);line-height:1.55;">Vote for your favorite speculative fiction authors and explore their bibliographies. A coliseum of imagination.</p> <!-- Visit link --> <div class="vc-visit" style="margin-top:22px;display:flex;align-items:center;gap:10px;font-family:'Cinzel',serif;font-size:11px;letter-spacing:0.3em;color:var(--gold-deep);transition:color 0.4s;"> <span>VISIT</span> <span class="vc-line" style="height:1px;background:currentColor;width:0;max-width:60px;transition:width 0.5s;"></span> <span>↗</span> </div> </a> </div><div class="reveal" style="--delay:0.3s;"> <a href="https://demonslayerlegends.com/" target="_blank" rel="noopener noreferrer" class="venture-card-new" data-color="#d97757" style="position:relative;display:block;text-decoration:none;color:inherit;padding:28px 26px;background:rgba(10,8,22,0.45);border:1px solid var(--line);transition:all 0.5s cubic-bezier(.2,.7,.2,1);backdrop-filter:blur(2px);"> <!-- Corner brackets --> <span class="vc-bracket" style="position:absolute;top:-1px;left:-1px;width:10px;height:10px;border-top:1px solid var(--gold-deep);border-left:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <span class="vc-bracket" style="position:absolute;top:-1px;right:-1px;width:10px;height:10px;border-top:1px solid var(--gold-deep);border-right:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <span class="vc-bracket" style="position:absolute;bottom:-1px;left:-1px;width:10px;height:10px;border-bottom:1px solid var(--gold-deep);border-left:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <span class="vc-bracket" style="position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-bottom:1px solid var(--gold-deep);border-right:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <!-- Header row: logo + tag + outpost num --> <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;gap:14px;"> <div style="position:relative;width:56px;height:56px;flex-shrink:0;overflow:hidden;background:rgba(6,4,13,0.5);border:1px solid var(--line);transition:all 0.4s;display:flex;align-items:center;justify-content:center;"> <img src="/images/demon-slayer-legends.webp" alt="" style="width:100%;height:100%;object-fit:cover;transition:transform 0.6s;" class="vc-logo"> </div> <div style="text-align:right;"> <div class="font-mono" style="font-size:9px;letter-spacing:0.3em;color:#d97757;opacity:0.85;">INTERACTIVE FICTION</div> <div class="font-mono" style="font-size:9px;letter-spacing:0.3em;color:var(--parchment-dim);margin-top:4px;">OUTPOST · 06</div> </div> </div> <h3 style="font-family:'Cinzel',serif;font-size:26px;color:var(--parchment);margin-bottom:4px;">Demon Slayer Legends</h3> <div style="font-family:'EB Garamond',serif;font-style:italic;font-size:14px;color:#d97757;margin-bottom:14px;opacity:0.9;">Creator</div> <p style="font-size:15px;color:var(--parchment-dim);line-height:1.55;">A free online choose-your-own-adventure and visual novel rooted in Filipino folklore.</p> <!-- Visit link --> <div class="vc-visit" style="margin-top:22px;display:flex;align-items:center;gap:10px;font-family:'Cinzel',serif;font-size:11px;letter-spacing:0.3em;color:var(--gold-deep);transition:color 0.4s;"> <span>VISIT</span> <span class="vc-line" style="height:1px;background:currentColor;width:0;max-width:60px;transition:width 0.5s;"></span> <span>↗</span> </div> </a> </div><div class="reveal" style="--delay:0.36s;"> <a href="https://thedawninglight.org/" target="_blank" rel="noopener noreferrer" class="venture-card-new" data-color="#f5d98a" style="position:relative;display:block;text-decoration:none;color:inherit;padding:28px 26px;background:rgba(10,8,22,0.45);border:1px solid var(--line);transition:all 0.5s cubic-bezier(.2,.7,.2,1);backdrop-filter:blur(2px);"> <!-- Corner brackets --> <span class="vc-bracket" style="position:absolute;top:-1px;left:-1px;width:10px;height:10px;border-top:1px solid var(--gold-deep);border-left:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <span class="vc-bracket" style="position:absolute;top:-1px;right:-1px;width:10px;height:10px;border-top:1px solid var(--gold-deep);border-right:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <span class="vc-bracket" style="position:absolute;bottom:-1px;left:-1px;width:10px;height:10px;border-bottom:1px solid var(--gold-deep);border-left:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <span class="vc-bracket" style="position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-bottom:1px solid var(--gold-deep);border-right:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <!-- Header row: logo + tag + outpost num --> <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;gap:14px;"> <div style="position:relative;width:56px;height:56px;flex-shrink:0;overflow:hidden;background:rgba(6,4,13,0.5);border:1px solid var(--line);transition:all 0.4s;display:flex;align-items:center;justify-content:center;"> <img src="/images/the-dawning-light.webp" alt="" style="width:100%;height:100%;object-fit:cover;transition:transform 0.6s;" class="vc-logo"> </div> <div style="text-align:right;"> <div class="font-mono" style="font-size:9px;letter-spacing:0.3em;color:#f5d98a;opacity:0.85;">HISTORY · FAITH</div> <div class="font-mono" style="font-size:9px;letter-spacing:0.3em;color:var(--parchment-dim);margin-top:4px;">OUTPOST · 07</div> </div> </div> <h3 style="font-family:'Cinzel',serif;font-size:26px;color:var(--parchment);margin-bottom:4px;">The Dawning Light</h3> <div style="font-family:'EB Garamond',serif;font-style:italic;font-size:14px;color:#f5d98a;margin-bottom:14px;opacity:0.9;">Creator</div> <p style="font-size:15px;color:var(--parchment-dim);line-height:1.55;">The faith and trials of the early Bahá&#39;ís — a story of devotion written in blood and exile.</p> <!-- Visit link --> <div class="vc-visit" style="margin-top:22px;display:flex;align-items:center;gap:10px;font-family:'Cinzel',serif;font-size:11px;letter-spacing:0.3em;color:var(--gold-deep);transition:color 0.4s;"> <span>VISIT</span> <span class="vc-line" style="height:1px;background:currentColor;width:0;max-width:60px;transition:width 0.5s;"></span> <span>↗</span> </div> </a> </div><div class="reveal" style="--delay:0.42s;"> <a href="https://medium.com/@danilosapad" target="_blank" rel="noopener noreferrer" class="venture-card-new" data-color="#ebe2cf" style="position:relative;display:block;text-decoration:none;color:inherit;padding:28px 26px;background:rgba(10,8,22,0.45);border:1px solid var(--line);transition:all 0.5s cubic-bezier(.2,.7,.2,1);backdrop-filter:blur(2px);"> <!-- Corner brackets --> <span class="vc-bracket" style="position:absolute;top:-1px;left:-1px;width:10px;height:10px;border-top:1px solid var(--gold-deep);border-left:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <span class="vc-bracket" style="position:absolute;top:-1px;right:-1px;width:10px;height:10px;border-top:1px solid var(--gold-deep);border-right:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <span class="vc-bracket" style="position:absolute;bottom:-1px;left:-1px;width:10px;height:10px;border-bottom:1px solid var(--gold-deep);border-left:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <span class="vc-bracket" style="position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-bottom:1px solid var(--gold-deep);border-right:1px solid var(--gold-deep);pointer-events:none;transition:border-color 0.4s;"></span> <!-- Header row: logo + tag + outpost num --> <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;gap:14px;"> <div style="position:relative;width:56px;height:56px;flex-shrink:0;overflow:hidden;background:rgba(6,4,13,0.5);border:1px solid var(--line);transition:all 0.4s;display:flex;align-items:center;justify-content:center;"> <img src="/images/medium-blog.webp" alt="" style="width:100%;height:100%;object-fit:cover;transition:transform 0.6s;" class="vc-logo"> </div> <div style="text-align:right;"> <div class="font-mono" style="font-size:9px;letter-spacing:0.3em;color:#ebe2cf;opacity:0.85;">ESSAYS</div> <div class="font-mono" style="font-size:9px;letter-spacing:0.3em;color:var(--parchment-dim);margin-top:4px;">OUTPOST · 08</div> </div> </div> <h3 style="font-family:'Cinzel',serif;font-size:26px;color:var(--parchment);margin-bottom:4px;">Medium</h3> <div style="font-family:'EB Garamond',serif;font-style:italic;font-size:14px;color:#ebe2cf;margin-bottom:14px;opacity:0.9;">Writer</div> <p style="font-size:15px;color:var(--parchment-dim);line-height:1.55;">Tangential musings about business, spirituality, technology, and the in-between.</p> <!-- Visit link --> <div class="vc-visit" style="margin-top:22px;display:flex;align-items:center;gap:10px;font-family:'Cinzel',serif;font-size:11px;letter-spacing:0.3em;color:var(--gold-deep);transition:color 0.4s;"> <span>VISIT</span> <span class="vc-line" style="height:1px;background:currentColor;width:0;max-width:60px;transition:width 0.5s;"></span> <span>↗</span> </div> </a> </div> </div> </div> </section> <script type="module">document.querySelectorAll(".venture-card-new").forEach(c=>{const e=c,r=e.dataset.color||"var(--gold)",t=e.querySelector(".vc-logo"),o=e.querySelector(".vc-visit"),l=e.querySelector(".vc-line"),a=e.querySelectorAll(".vc-bracket");e.addEventListener("mouseenter",()=>{e.style.background=`linear-gradient(160deg, ${r}12, transparent 70%), rgba(10,8,22,0.7)`,e.style.borderColor=r+"60",e.style.transform="translateY(-4px)",t&&(t.style.transform="scale(1.06)"),o&&(o.style.color=r),l&&(l.style.width="40px"),a.forEach(s=>s.style.borderColor=r)}),e.addEventListener("mouseleave",()=>{e.style.background="rgba(10,8,22,0.45)",e.style.borderColor="var(--line)",e.style.transform="translateY(0)",t&&(t.style.transform="scale(1)"),o&&(o.style.color="var(--gold-deep)"),l&&(l.style.width="0"),a.forEach(s=>s.style.borderColor="var(--gold-deep)")})});</script> <section data-realm="sayings" id="quotes" style="position:relative;padding:140px 6vw;min-height:100vh;"> <div style="max-width:1100px;margin:0 auto;"> <!-- Realm heading --> <div class="reveal" style="display:flex;flex-direction:column;gap:18px;margin-bottom:56px;"> <div style="display:flex;align-items:center;gap:20px;"> <span class="font-mono" style="color:var(--gold-deep);font-size:12px;letter-spacing:0.3em;">REALM · 04</span> <span style="flex:1;height:1px;background:linear-gradient(to right,var(--line-strong),transparent);"></span> <span class="font-mono" style="color:var(--parchment-dim);font-size:11px;letter-spacing:0.3em;">LIBER · IV</span> </div> <h2 class="font-display" style="font-size:clamp(48px,7vw,96px);font-weight:600;line-height:1;color:var(--parchment);">
The Sayings
</h2> <p style="font-family:'EB Garamond',serif;font-style:italic;font-size:22px;max-width:720px;color:var(--parchment-dim);">
Words that have moved, challenged, and shaped the way I see. A turning wheel of saints, scientists, soldiers, and poets.
</p> </div> <!-- Scroll frame container --> <div class="reveal" id="quotes-frame" style="position:relative;min-height:480px;"> <!-- Decorative frame --> <div id="quotes-scroll-frame" style="position:relative;padding:clamp(40px,5vw,80px) clamp(28px,5vw,80px);background:radial-gradient(ellipse at top left,rgba(245,217,138,0.05),transparent 60%),rgba(20,12,36,0.4);border:1px solid var(--line);backdrop-filter:blur(2px);min-height:380px;"> <!-- Corner brackets --> <span style="position:absolute;top:-1px;left:-1px;width:20px;height:20px;border-top:1px solid var(--gold);border-left:1px solid var(--gold);pointer-events:none;"></span> <span style="position:absolute;top:-1px;right:-1px;width:20px;height:20px;border-top:1px solid var(--gold);border-right:1px solid var(--gold);pointer-events:none;"></span> <span style="position:absolute;bottom:-1px;left:-1px;width:20px;height:20px;border-bottom:1px solid var(--gold);border-left:1px solid var(--gold);pointer-events:none;"></span> <span style="position:absolute;bottom:-1px;right:-1px;width:20px;height:20px;border-bottom:1px solid var(--gold);border-right:1px solid var(--gold);pointer-events:none;"></span> <!-- Giant decorative quote mark --> <div aria-hidden="true" style="position:absolute;top:16px;left:28px;font-family:'EB Garamond',serif;font-size:140px;line-height:1;color:var(--gold);opacity:0.2;pointer-events:none;user-select:none;">"</div> <!-- Quote slides --> <div id="quotes-container" style="position:relative;min-height:280px;"> <div class="quote-slide" data-idx="0" style="position:relative;opacity:1;pointer-events:auto; transform:translateY(0);transition:opacity 1.2s ease,transform 1.2s ease;"> <p style="font-family:'EB Garamond',serif;font-style:italic;font-size:clamp(22px,2.6vw,36px);line-height:1.45;color:var(--parchment);margin-bottom:36px;"> Whatever you do, or dream you can, begin it. Boldness has genius and power and magic in it. </p> <div style="display:flex;align-items:center;gap:16px;"> <span style="height:1px;width:50px;background:var(--gold);flex-shrink:0;"></span> <span class="font-display" style="font-size:14px;letter-spacing:0.3em;color:var(--gold);"> JOHANN WOLFGANG VON GOETHE </span> </div> </div><div class="quote-slide" data-idx="1" style="position:absolute;inset:0;opacity:0;pointer-events:none; transform:translateY(12px);transition:opacity 1.2s ease,transform 1.2s ease;"> <p style="font-family:'EB Garamond',serif;font-style:italic;font-size:clamp(22px,2.6vw,36px);line-height:1.45;color:var(--parchment);margin-bottom:36px;"> I am not afraid… I was born to do this. </p> <div style="display:flex;align-items:center;gap:16px;"> <span style="height:1px;width:50px;background:var(--gold);flex-shrink:0;"></span> <span class="font-display" style="font-size:14px;letter-spacing:0.3em;color:var(--gold);"> ST. JOAN OF ARC </span> </div> </div><div class="quote-slide" data-idx="2" style="position:absolute;inset:0;opacity:0;pointer-events:none; transform:translateY(12px);transition:opacity 1.2s ease,transform 1.2s ease;"> <p style="font-family:'EB Garamond',serif;font-style:italic;font-size:clamp(22px,2.6vw,36px);line-height:1.45;color:var(--parchment);margin-bottom:36px;"> The most beloved of all things in My sight is justice. </p> <div style="display:flex;align-items:center;gap:16px;"> <span style="height:1px;width:50px;background:var(--gold);flex-shrink:0;"></span> <span class="font-display" style="font-size:14px;letter-spacing:0.3em;color:var(--gold);"> BAHÁ&#39;U&#39;LLÁH </span> </div> </div><div class="quote-slide" data-idx="3" style="position:absolute;inset:0;opacity:0;pointer-events:none; transform:translateY(12px);transition:opacity 1.2s ease,transform 1.2s ease;"> <p style="font-family:'EB Garamond',serif;font-style:italic;font-size:clamp(22px,2.6vw,36px);line-height:1.45;color:var(--parchment);margin-bottom:36px;"> An eye for an eye will only make the whole world blind. </p> <div style="display:flex;align-items:center;gap:16px;"> <span style="height:1px;width:50px;background:var(--gold);flex-shrink:0;"></span> <span class="font-display" style="font-size:14px;letter-spacing:0.3em;color:var(--gold);"> MAHATMA GANDHI </span> </div> </div><div class="quote-slide" data-idx="4" style="position:absolute;inset:0;opacity:0;pointer-events:none; transform:translateY(12px);transition:opacity 1.2s ease,transform 1.2s ease;"> <p style="font-family:'EB Garamond',serif;font-style:italic;font-size:clamp(22px,2.6vw,36px);line-height:1.45;color:var(--parchment);margin-bottom:36px;"> Live as if you were to die tomorrow. Learn as if you were to live forever. </p> <div style="display:flex;align-items:center;gap:16px;"> <span style="height:1px;width:50px;background:var(--gold);flex-shrink:0;"></span> <span class="font-display" style="font-size:14px;letter-spacing:0.3em;color:var(--gold);"> MAHATMA GANDHI </span> </div> </div><div class="quote-slide" data-idx="5" style="position:absolute;inset:0;opacity:0;pointer-events:none; transform:translateY(12px);transition:opacity 1.2s ease,transform 1.2s ease;"> <p style="font-family:'EB Garamond',serif;font-style:italic;font-size:clamp(22px,2.6vw,36px);line-height:1.45;color:var(--parchment);margin-bottom:36px;"> Imagination is more important than knowledge. For knowledge is limited, whereas imagination embraces the entire world, stimulating progress, giving birth to evolution. </p> <div style="display:flex;align-items:center;gap:16px;"> <span style="height:1px;width:50px;background:var(--gold);flex-shrink:0;"></span> <span class="font-display" style="font-size:14px;letter-spacing:0.3em;color:var(--gold);"> ALBERT EINSTEIN </span> </div> </div><div class="quote-slide" data-idx="6" style="position:absolute;inset:0;opacity:0;pointer-events:none; transform:translateY(12px);transition:opacity 1.2s ease,transform 1.2s ease;"> <p style="font-family:'EB Garamond',serif;font-style:italic;font-size:clamp(22px,2.6vw,36px);line-height:1.45;color:var(--parchment);margin-bottom:36px;"> The world is a dangerous place, not because of those who do evil, but because of those who look on and do nothing. </p> <div style="display:flex;align-items:center;gap:16px;"> <span style="height:1px;width:50px;background:var(--gold);flex-shrink:0;"></span> <span class="font-display" style="font-size:14px;letter-spacing:0.3em;color:var(--gold);"> ALBERT EINSTEIN </span> </div> </div><div class="quote-slide" data-idx="7" style="position:absolute;inset:0;opacity:0;pointer-events:none; transform:translateY(12px);transition:opacity 1.2s ease,transform 1.2s ease;"> <p style="font-family:'EB Garamond',serif;font-style:italic;font-size:clamp(22px,2.6vw,36px);line-height:1.45;color:var(--parchment);margin-bottom:36px;"> The saddest aspect of life right now is that science gathers knowledge faster than society gathers wisdom. </p> <div style="display:flex;align-items:center;gap:16px;"> <span style="height:1px;width:50px;background:var(--gold);flex-shrink:0;"></span> <span class="font-display" style="font-size:14px;letter-spacing:0.3em;color:var(--gold);"> ISAAC ASIMOV </span> </div> </div><div class="quote-slide" data-idx="8" style="position:absolute;inset:0;opacity:0;pointer-events:none; transform:translateY(12px);transition:opacity 1.2s ease,transform 1.2s ease;"> <p style="font-family:'EB Garamond',serif;font-style:italic;font-size:clamp(22px,2.6vw,36px);line-height:1.45;color:var(--parchment);margin-bottom:36px;"> In the end, we will remember not the words of our enemies but the silence of our friends. </p> <div style="display:flex;align-items:center;gap:16px;"> <span style="height:1px;width:50px;background:var(--gold);flex-shrink:0;"></span> <span class="font-display" style="font-size:14px;letter-spacing:0.3em;color:var(--gold);"> DR. MARTIN LUTHER KING, JR. </span> </div> </div><div class="quote-slide" data-idx="9" style="position:absolute;inset:0;opacity:0;pointer-events:none; transform:translateY(12px);transition:opacity 1.2s ease,transform 1.2s ease;"> <p style="font-family:'EB Garamond',serif;font-style:italic;font-size:clamp(22px,2.6vw,36px);line-height:1.45;color:var(--parchment);margin-bottom:36px;"> To the well organized mind, death is but the next great adventure. </p> <div style="display:flex;align-items:center;gap:16px;"> <span style="height:1px;width:50px;background:var(--gold);flex-shrink:0;"></span> <span class="font-display" style="font-size:14px;letter-spacing:0.3em;color:var(--gold);"> ALBUS DUMBLEDORE </span> </div> </div><div class="quote-slide" data-idx="10" style="position:absolute;inset:0;opacity:0;pointer-events:none; transform:translateY(12px);transition:opacity 1.2s ease,transform 1.2s ease;"> <p style="font-family:'EB Garamond',serif;font-style:italic;font-size:clamp(22px,2.6vw,36px);line-height:1.45;color:var(--parchment);margin-bottom:36px;"> I have not failed. I&#39;ve just found 10,000 ways that won&#39;t work. </p> <div style="display:flex;align-items:center;gap:16px;"> <span style="height:1px;width:50px;background:var(--gold);flex-shrink:0;"></span> <span class="font-display" style="font-size:14px;letter-spacing:0.3em;color:var(--gold);"> THOMAS ALVA EDISON </span> </div> </div><div class="quote-slide" data-idx="11" style="position:absolute;inset:0;opacity:0;pointer-events:none; transform:translateY(12px);transition:opacity 1.2s ease,transform 1.2s ease;"> <p style="font-family:'EB Garamond',serif;font-style:italic;font-size:clamp(22px,2.6vw,36px);line-height:1.45;color:var(--parchment);margin-bottom:36px;"> Ever has it been that love knows not its own depth until the hour of separation. </p> <div style="display:flex;align-items:center;gap:16px;"> <span style="height:1px;width:50px;background:var(--gold);flex-shrink:0;"></span> <span class="font-display" style="font-size:14px;letter-spacing:0.3em;color:var(--gold);"> KAHLIL GIBRAN </span> </div> </div><div class="quote-slide" data-idx="12" style="position:absolute;inset:0;opacity:0;pointer-events:none; transform:translateY(12px);transition:opacity 1.2s ease,transform 1.2s ease;"> <p style="font-family:'EB Garamond',serif;font-style:italic;font-size:clamp(22px,2.6vw,36px);line-height:1.45;color:var(--parchment);margin-bottom:36px;"> The future belongs to those who believe in the beauty of their dreams. </p> <div style="display:flex;align-items:center;gap:16px;"> <span style="height:1px;width:50px;background:var(--gold);flex-shrink:0;"></span> <span class="font-display" style="font-size:14px;letter-spacing:0.3em;color:var(--gold);"> ELEANOR ROOSEVELT </span> </div> </div><div class="quote-slide" data-idx="13" style="position:absolute;inset:0;opacity:0;pointer-events:none; transform:translateY(12px);transition:opacity 1.2s ease,transform 1.2s ease;"> <p style="font-family:'EB Garamond',serif;font-style:italic;font-size:clamp(22px,2.6vw,36px);line-height:1.45;color:var(--parchment);margin-bottom:36px;"> The best and most beautiful things in the world cannot be seen or even touched. They must be felt with the heart. </p> <div style="display:flex;align-items:center;gap:16px;"> <span style="height:1px;width:50px;background:var(--gold);flex-shrink:0;"></span> <span class="font-display" style="font-size:14px;letter-spacing:0.3em;color:var(--gold);"> HELEN KELLER </span> </div> </div> </div> </div> <!-- Progress dots --> <div id="quotes-dots" style="display:flex;justify-content:center;gap:8px;margin-top:32px;flex-wrap:wrap;"> <button class="quote-dot" data-dot="0" aria-label="Go to quote 1" style="height:2px;padding:0;border:none;cursor:pointer;transition:all 0.5s;background:var(--gold);width:30px;"></button><button class="quote-dot" data-dot="1" aria-label="Go to quote 2" style="height:2px;padding:0;border:none;cursor:pointer;transition:all 0.5s;background:var(--line-strong);width:8px;"></button><button class="quote-dot" data-dot="2" aria-label="Go to quote 3" style="height:2px;padding:0;border:none;cursor:pointer;transition:all 0.5s;background:var(--line-strong);width:8px;"></button><button class="quote-dot" data-dot="3" aria-label="Go to quote 4" style="height:2px;padding:0;border:none;cursor:pointer;transition:all 0.5s;background:var(--line-strong);width:8px;"></button><button class="quote-dot" data-dot="4" aria-label="Go to quote 5" style="height:2px;padding:0;border:none;cursor:pointer;transition:all 0.5s;background:var(--line-strong);width:8px;"></button><button class="quote-dot" data-dot="5" aria-label="Go to quote 6" style="height:2px;padding:0;border:none;cursor:pointer;transition:all 0.5s;background:var(--line-strong);width:8px;"></button><button class="quote-dot" data-dot="6" aria-label="Go to quote 7" style="height:2px;padding:0;border:none;cursor:pointer;transition:all 0.5s;background:var(--line-strong);width:8px;"></button><button class="quote-dot" data-dot="7" aria-label="Go to quote 8" style="height:2px;padding:0;border:none;cursor:pointer;transition:all 0.5s;background:var(--line-strong);width:8px;"></button><button class="quote-dot" data-dot="8" aria-label="Go to quote 9" style="height:2px;padding:0;border:none;cursor:pointer;transition:all 0.5s;background:var(--line-strong);width:8px;"></button><button class="quote-dot" data-dot="9" aria-label="Go to quote 10" style="height:2px;padding:0;border:none;cursor:pointer;transition:all 0.5s;background:var(--line-strong);width:8px;"></button><button class="quote-dot" data-dot="10" aria-label="Go to quote 11" style="height:2px;padding:0;border:none;cursor:pointer;transition:all 0.5s;background:var(--line-strong);width:8px;"></button><button class="quote-dot" data-dot="11" aria-label="Go to quote 12" style="height:2px;padding:0;border:none;cursor:pointer;transition:all 0.5s;background:var(--line-strong);width:8px;"></button><button class="quote-dot" data-dot="12" aria-label="Go to quote 13" style="height:2px;padding:0;border:none;cursor:pointer;transition:all 0.5s;background:var(--line-strong);width:8px;"></button><button class="quote-dot" data-dot="13" aria-label="Go to quote 14" style="height:2px;padding:0;border:none;cursor:pointer;transition:all 0.5s;background:var(--line-strong);width:8px;"></button> </div> <!-- Counter --> <div class="font-display" id="quotes-counter" style="text-align:center;margin-top:16px;font-size:11px;letter-spacing:0.3em;color:var(--gold-deep);">
01 / 14 · TURNING
</div> <!-- View all link --> <div style="text-align:center;margin-top:36px;"> <a href="/quotes" style="display:inline-flex;align-items:center;gap:12px;font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.35em;color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-deep);padding-bottom:6px;transition:color 0.3s,border-color 0.3s;" onmouseenter="this.style.color='var(--gold-soft)';this.style.borderColor='var(--gold)';" onmouseleave="this.style.color='var(--gold)';this.style.borderColor='var(--gold-deep)';"> <span>VIEW ALL QUOTES</span> <span>→</span> </a> </div> </div> </div> </section> <script type="module">const f=Array.from(document.querySelectorAll(".quote-slide")),S=Array.from(document.querySelectorAll(".quote-dot")),r=document.getElementById("quotes-counter"),s=document.getElementById("quotes-scroll-frame"),a=f.length;let l=0,c=!1,d;function i(e){f.forEach((t,n)=>{const o=n===e;t.style.position=o?"relative":"absolute",t.style.opacity=o?"1":"0",t.style.transform=o?"translateY(0)":"translateY(12px)",t.style.pointerEvents=o?"auto":"none"}),S.forEach((t,n)=>{t.style.width=n===e?"30px":"8px",t.style.background=n===e?"var(--gold)":"var(--line-strong)"}),r&&(r.textContent=`${String(e+1).padStart(2,"0")}  /  ${String(a).padStart(2,"0")}  ·  ${c?"PAUSED":"TURNING"}`),l=e}function u(){clearInterval(d),d=setInterval(()=>i((l+1)%a),6500)}S.forEach((e,t)=>{e.addEventListener("click",()=>{i(t),u()})});s&&(s.addEventListener("mouseenter",()=>{c=!0,clearInterval(d),r&&(r.textContent=`${String(l+1).padStart(2,"0")}  /  ${String(a).padStart(2,"0")}  ·  PAUSED`)}),s.addEventListener("mouseleave",()=>{c=!1,u(),r&&(r.textContent=`${String(l+1).padStart(2,"0")}  /  ${String(a).padStart(2,"0")}  ·  TURNING`)}));i(0);u();</script> <section data-realm="beacon" id="contact" style="position:relative;padding:140px 6vw 200px;" data-astro-cid-svshx33u> <div style="max-width:1200px;margin:0 auto;" data-astro-cid-svshx33u> <!-- Realm heading --> <div class="reveal" style="display:flex;flex-direction:column;gap:18px;margin-bottom:56px;" data-astro-cid-svshx33u> <div style="display:flex;align-items:center;gap:20px;" data-astro-cid-svshx33u> <span class="font-mono" style="color:var(--gold-deep);font-size:12px;letter-spacing:0.3em;" data-astro-cid-svshx33u>REALM · 05</span> <span style="flex:1;height:1px;background:linear-gradient(to right,var(--line-strong),transparent);" data-astro-cid-svshx33u></span> <span class="font-mono" style="color:var(--parchment-dim);font-size:11px;letter-spacing:0.3em;" data-astro-cid-svshx33u>LIBER · V</span> </div> <h2 class="font-display" style="font-size:clamp(48px,7vw,96px);font-weight:600;line-height:1;color:var(--parchment);" data-astro-cid-svshx33u>
The Beacon
</h2> <p style="font-family:'EB Garamond',serif;font-style:italic;font-size:22px;max-width:720px;color:var(--parchment-dim);" data-astro-cid-svshx33u>
A signal across the dark. Send a transmission. About a story, a song, a venture, or a wild idea.
</p> </div> <div style="max-width:980px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(28px,4vw,60px);align-items:start;" data-astro-cid-svshx33u> <!-- Left: BeaconRings SVG --> <div class="reveal" style="position:relative;aspect-ratio:1/1;" data-astro-cid-svshx33u> <svg viewBox="0 0 400 400" id="beacon-svg" style="width:100%;height:100%;" data-astro-cid-svshx33u> <defs data-astro-cid-svshx33u> <radialGradient id="beaconGlow" cx="50%" cy="50%" r="50%" data-astro-cid-svshx33u> <stop offset="0%" stop-color="#f5d98a" stop-opacity="0.5" data-astro-cid-svshx33u></stop> <stop offset="60%" stop-color="#d97757" stop-opacity="0.1" data-astro-cid-svshx33u></stop> <stop offset="100%" stop-color="transparent" stop-opacity="0" data-astro-cid-svshx33u></stop> </radialGradient> </defs> <circle cx="200" cy="200" r="180" fill="url(#beaconGlow)" data-astro-cid-svshx33u></circle> <!-- Pulsing rings --> <circle cx="200" cy="200" r="60" stroke="var(--gold)" stroke-width="0.6" fill="none" opacity="0.45" style="animation:beacon-pulse 4s 0s ease-out infinite;transform-origin:200px 200px;" data-astro-cid-svshx33u></circle><circle cx="200" cy="200" r="100" stroke="var(--gold)" stroke-width="0.6" fill="none" opacity="0.37" style="animation:beacon-pulse 4s 0.5s ease-out infinite;transform-origin:200px 200px;" data-astro-cid-svshx33u></circle><circle cx="200" cy="200" r="140" stroke="var(--gold)" stroke-width="0.6" fill="none" opacity="0.29000000000000004" style="animation:beacon-pulse 4s 1s ease-out infinite;transform-origin:200px 200px;" data-astro-cid-svshx33u></circle><circle cx="200" cy="200" r="180" stroke="var(--gold)" stroke-width="0.6" fill="none" opacity="0.21000000000000002" style="animation:beacon-pulse 4s 1.5s ease-out infinite;transform-origin:200px 200px;" data-astro-cid-svshx33u></circle> <!-- Rotating compass ring --> <g style="transform-origin:200px 200px;animation:spin-slow 60s linear infinite;" data-astro-cid-svshx33u> <circle cx="200" cy="200" r="120" stroke="var(--gold-deep)" stroke-width="0.4" fill="none" stroke-dasharray="2 6" data-astro-cid-svshx33u></circle> <line x1="316" y1="200" x2="324" y2="200" stroke="var(--gold)" stroke-width="1" opacity="0.9" data-astro-cid-svshx33u></line><line x1="312.04739584953194" y1="230.02300923189242" x2="319.77480245984447" y2="232.09356159271258" stroke="var(--gold)" stroke-width="0.4" opacity="0.4" data-astro-cid-svshx33u></line><line x1="300.4589468389949" y1="258" x2="307.38715006927043" y2="262" stroke="var(--gold)" stroke-width="0.4" opacity="0.4" data-astro-cid-svshx33u></line><line x1="282.0243866176395" y1="282.0243866176395" x2="287.6812408671319" y2="287.6812408671319" stroke="var(--gold)" stroke-width="0.4" opacity="0.4" data-astro-cid-svshx33u></line><line x1="258" y1="300.45894683899485" x2="262" y2="307.3871500692704" stroke="var(--gold)" stroke-width="0.4" opacity="0.4" data-astro-cid-svshx33u></line><line x1="230.02300923189242" y1="312.04739584953194" x2="232.09356159271258" y2="319.77480245984447" stroke="var(--gold)" stroke-width="0.4" opacity="0.4" data-astro-cid-svshx33u></line><line x1="200" y1="316" x2="200" y2="324" stroke="var(--gold)" stroke-width="1" opacity="0.9" data-astro-cid-svshx33u></line><line x1="169.97699076810758" y1="312.04739584953194" x2="167.90643840728742" y2="319.77480245984447" stroke="var(--gold)" stroke-width="0.4" opacity="0.4" data-astro-cid-svshx33u></line><line x1="142.00000000000003" y1="300.4589468389949" x2="138.00000000000003" y2="307.38715006927043" stroke="var(--gold)" stroke-width="0.4" opacity="0.4" data-astro-cid-svshx33u></line><line x1="117.97561338236049" y1="282.0243866176395" x2="112.31875913286811" y2="287.6812408671319" stroke="var(--gold)" stroke-width="0.4" opacity="0.4" data-astro-cid-svshx33u></line><line x1="99.54105316100511" y1="258" x2="92.6128499307296" y2="262" stroke="var(--gold)" stroke-width="0.4" opacity="0.4" data-astro-cid-svshx33u></line><line x1="87.95260415046809" y1="230.02300923189244" x2="80.22519754015555" y2="232.0935615927126" stroke="var(--gold)" stroke-width="0.4" opacity="0.4" data-astro-cid-svshx33u></line><line x1="84" y1="200" x2="76" y2="200.00000000000003" stroke="var(--gold)" stroke-width="1" opacity="0.9" data-astro-cid-svshx33u></line><line x1="87.95260415046806" y1="169.97699076810764" x2="80.22519754015552" y2="167.90643840728748" stroke="var(--gold)" stroke-width="0.4" opacity="0.4" data-astro-cid-svshx33u></line><line x1="99.54105316100512" y1="142" x2="92.61284993072961" y2="138" stroke="var(--gold)" stroke-width="0.4" opacity="0.4" data-astro-cid-svshx33u></line><line x1="117.97561338236046" y1="117.97561338236049" x2="112.31875913286808" y2="112.31875913286811" stroke="var(--gold)" stroke-width="0.4" opacity="0.4" data-astro-cid-svshx33u></line><line x1="141.99999999999994" y1="99.54105316100514" x2="137.99999999999994" y2="92.61284993072962" stroke="var(--gold)" stroke-width="0.4" opacity="0.4" data-astro-cid-svshx33u></line><line x1="169.9769907681076" y1="87.95260415046808" x2="167.90643840728745" y2="80.22519754015553" stroke="var(--gold)" stroke-width="0.4" opacity="0.4" data-astro-cid-svshx33u></line><line x1="199.99999999999997" y1="84" x2="199.99999999999997" y2="76" stroke="var(--gold)" stroke-width="1" opacity="0.9" data-astro-cid-svshx33u></line><line x1="230.02300923189236" y1="87.95260415046806" x2="232.09356159271252" y2="80.22519754015552" stroke="var(--gold)" stroke-width="0.4" opacity="0.4" data-astro-cid-svshx33u></line><line x1="258" y1="99.54105316100512" x2="262" y2="92.61284993072961" stroke="var(--gold)" stroke-width="0.4" opacity="0.4" data-astro-cid-svshx33u></line><line x1="282.0243866176395" y1="117.97561338236046" x2="287.68124086713186" y2="112.31875913286808" stroke="var(--gold)" stroke-width="0.4" opacity="0.4" data-astro-cid-svshx33u></line><line x1="300.45894683899485" y1="141.99999999999994" x2="307.3871500692704" y2="137.99999999999994" stroke="var(--gold)" stroke-width="0.4" opacity="0.4" data-astro-cid-svshx33u></line><line x1="312.04739584953194" y1="169.9769907681076" x2="319.77480245984447" y2="167.90643840728742" stroke="var(--gold)" stroke-width="0.4" opacity="0.4" data-astro-cid-svshx33u></line> </g> <!-- Center beacon dot --> <circle cx="200" cy="200" r="14" fill="var(--gold)" opacity="0.9" style="filter:drop-shadow(0 0 20px var(--gold));animation:drift 3s ease-in-out infinite;" data-astro-cid-svshx33u></circle> <circle cx="200" cy="200" r="22" stroke="var(--gold)" stroke-width="0.6" fill="none" opacity="0.7" data-astro-cid-svshx33u></circle> <circle cx="200" cy="200" r="34" stroke="var(--gold)" stroke-width="0.4" fill="none" opacity="0.5" stroke-dasharray="1 3" data-astro-cid-svshx33u></circle> </svg> </div> <!-- Right: Transmission terminal form --> <div class="reveal" style="--delay:0.2s;" data-astro-cid-svshx33u> <div id="contact-content" data-astro-cid-svshx33u> <form id="beacon-form" action="https://formspree.io/f/mvggjywq" method="POST" style="position:relative;padding:32px 32px 36px;background:rgba(10,8,22,0.55);border:1px solid var(--line);backdrop-filter:blur(2px);" data-astro-cid-svshx33u> <!-- Corner brackets --> <span style="position:absolute;top:-1px;left:-1px;width:14px;height:14px;border-top:1px solid var(--gold);border-left:1px solid var(--gold);pointer-events:none;" data-astro-cid-svshx33u></span> <span style="position:absolute;top:-1px;right:-1px;width:14px;height:14px;border-top:1px solid var(--gold);border-right:1px solid var(--gold);pointer-events:none;" data-astro-cid-svshx33u></span> <span style="position:absolute;bottom:-1px;left:-1px;width:14px;height:14px;border-bottom:1px solid var(--gold);border-left:1px solid var(--gold);pointer-events:none;" data-astro-cid-svshx33u></span> <span style="position:absolute;bottom:-1px;right:-1px;width:14px;height:14px;border-bottom:1px solid var(--gold);border-right:1px solid var(--gold);pointer-events:none;" data-astro-cid-svshx33u></span> <!-- Status indicator --> <div class="font-display" id="beacon-status" style="font-size:11px;letter-spacing:0.4em;color:var(--gold-deep);margin-bottom:4px;display:flex;align-items:center;gap:10px;" data-astro-cid-svshx33u> <span id="beacon-dot" style="width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);flex-shrink:0;" data-astro-cid-svshx33u></span> <span id="beacon-status-text" data-astro-cid-svshx33u>TRANSMISSION TERMINAL · READY</span> </div> <div style="font-family:'Cinzel',serif;font-size:22px;color:var(--parchment);margin:14px 0 26px;letter-spacing:0.1em;" data-astro-cid-svshx33u>
Compose your message.
</div> <!-- Name field --> <div style="margin-bottom:20px;" data-astro-cid-svshx33u> <label class="font-mono" for="beacon-name" id="beacon-name-label" style="display:block;font-size:10px;letter-spacing:0.3em;color:var(--gold-deep);margin-bottom:6px;transition:color 0.3s;" data-astro-cid-svshx33u>
‹ NAME ›
</label> <input type="text" name="name" id="beacon-name" required style="width:100%;background:transparent;border:none;border-bottom:1px solid var(--line-strong);color:var(--parchment);font-family:'JetBrains Mono',monospace;font-size:14px;padding:8px 0;outline:none;resize:none;transition:border-color 0.3s;" onfocus="this.style.borderBottomColor='var(--gold)';document.getElementById('beacon-name-label').style.color='var(--gold)';" onblur="this.style.borderBottomColor='var(--line-strong)';document.getElementById('beacon-name-label').style.color='var(--gold-deep)';" data-astro-cid-svshx33u> </div> <!-- Email field --> <div style="margin-bottom:20px;" data-astro-cid-svshx33u> <label class="font-mono" for="beacon-email" id="beacon-email-label" style="display:block;font-size:10px;letter-spacing:0.3em;color:var(--gold-deep);margin-bottom:6px;transition:color 0.3s;" data-astro-cid-svshx33u>
‹ EMAIL ›
</label> <input type="email" name="email" id="beacon-email" required style="width:100%;background:transparent;border:none;border-bottom:1px solid var(--line-strong);color:var(--parchment);font-family:'JetBrains Mono',monospace;font-size:14px;padding:8px 0;outline:none;resize:none;transition:border-color 0.3s;" onfocus="this.style.borderBottomColor='var(--gold)';document.getElementById('beacon-email-label').style.color='var(--gold)';" onblur="this.style.borderBottomColor='var(--line-strong)';document.getElementById('beacon-email-label').style.color='var(--gold-deep)';" data-astro-cid-svshx33u> </div> <!-- Message field --> <div style="margin-bottom:20px;" data-astro-cid-svshx33u> <label class="font-mono" for="beacon-message" id="beacon-message-label" style="display:block;font-size:10px;letter-spacing:0.3em;color:var(--gold-deep);margin-bottom:6px;transition:color 0.3s;" data-astro-cid-svshx33u>
‹ MESSAGE ›
</label> <textarea name="message" id="beacon-message" rows="4" required style="width:100%;background:transparent;border:none;border-bottom:1px solid var(--line-strong);color:var(--parchment);font-family:'EB Garamond',serif;font-size:18px;padding:8px 0;outline:none;resize:none;transition:border-color 0.3s;" onfocus="this.style.borderBottomColor='var(--gold)';document.getElementById('beacon-message-label').style.color='var(--gold)';" onblur="this.style.borderBottomColor='var(--line-strong)';document.getElementById('beacon-message-label').style.color='var(--gold-deep)';" data-astro-cid-svshx33u></textarea> </div> <!-- Submit button --> <button id="beacon-submit" type="submit" style="margin-top:18px;width:100%;background:transparent;border:1px solid var(--gold);color:var(--gold);padding:16px 24px;font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.4em;cursor:pointer;transition:all 0.4s;position:relative;" onmouseenter="if(this.dataset.phase==='idle'){this.style.background='var(--gold)';this.style.color='var(--void)';}" onmouseleave="if(this.dataset.phase==='idle'){this.style.background='transparent';this.style.color='var(--gold)';}" data-phase="idle" data-astro-cid-svshx33u> <span id="beacon-btn-text" data-astro-cid-svshx33u>SEND TRANSMISSION</span> </button> </form> </div> </div> </div> </div> </section>  <script type="module">const s=document.getElementById("beacon-form"),t=document.getElementById("beacon-submit"),n=document.getElementById("beacon-btn-text"),o=document.getElementById("beacon-status-text"),e=document.getElementById("beacon-dot"),l=document.getElementById("contact-content"),r=document.getElementById("beacon-svg");function c(a){t&&(t.dataset.phase=a,a==="sending"?(t.disabled=!0,n&&(n.textContent="BROADCASTING…"),o&&(o.textContent="ENCODING SIGNAL…"),e&&(e.style.background="var(--ember)",e.style.boxShadow="0 0 8px var(--ember)"),r&&(r.style.filter="brightness(1.3)")):a==="sent"&&(n&&(n.textContent="✦  TRANSMISSION SENT  ✦"),o&&(o.textContent="SIGNAL RECEIVED · STAND BY"),e&&(e.style.background="var(--aurora)",e.style.boxShadow="0 0 8px var(--aurora)"),t.style.background="var(--aurora-deep)",t.style.borderColor="var(--aurora)",t.style.color="var(--aurora)",r&&(r.style.filter="brightness(1.15)")))}async function f(a){if(a.preventDefault(),!!s){c("sending");try{const i=await fetch(s.action,{method:"POST",body:new FormData(s),headers:{Accept:"application/json"}});if(i.ok)c("sent"),l&&setTimeout(()=>{l.innerHTML=`
              <div style="text-align:center;padding:clamp(32px,5vw,64px) 0;">
                <div style="font-family:'JetBrains Mono',monospace;font-size:32px;color:var(--aurora);margin-bottom:20px;">◉</div>
                <h3 style="font-family:'Cinzel',serif;font-size:clamp(22px,3vw,32px);color:var(--parchment);margin-bottom:16px;letter-spacing:0.05em;">SIGNAL RECEIVED</h3>
                <p style="font-family:'EB Garamond',serif;font-size:18px;color:var(--parchment-dim);line-height:1.7;max-width:420px;margin:0 auto;">
                  Thank you for your message! I receive a lot of emails, and it may take me some time to reply, but I look forward to reading what you sent!
                </p>
              </div>
            `},1600);else{const d=(await i.json().catch(()=>({})))?.errors?.map(m=>m.message).join(", ")||"Transmission error. Please try again.";t&&(t.disabled=!1,t.dataset.phase="idle"),n&&(n.textContent="SEND TRANSMISSION"),o&&(o.textContent=d),e&&(e.style.background="var(--ember)",e.style.boxShadow="0 0 8px var(--ember)")}}catch{t&&(t.disabled=!1,t.dataset.phase="idle"),n&&(n.textContent="SEND TRANSMISSION"),o&&(o.textContent="Transmission error. Please try again.")}}}s&&s.addEventListener("submit",f);</script> <footer style="margin-top:140px;text-align:center;border-top:1px solid var(--line);padding-top:48px;max-width:1200px;margin:140px auto 0;"> <!-- Logo / name --> <div class="font-display" style="font-size:14px;letter-spacing:0.5em;color:var(--gold);margin-bottom:22px;">
✦ DANILO STERN-SAPAD ✦
</div> <!-- Nav links --> <nav style="display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin-bottom:22px;"> <a href="#home" class="font-display" style="font-size:11px;letter-spacing:0.3em;color:var(--parchment-dim);text-decoration:none;transition:color 0.3s;" onmouseover="this.style.color='var(--gold)'" onmouseout="this.style.color='var(--parchment-dim)'"> HOME </a><a href="#writing" class="font-display" style="font-size:11px;letter-spacing:0.3em;color:var(--parchment-dim);text-decoration:none;transition:color 0.3s;" onmouseover="this.style.color='var(--gold)'" onmouseout="this.style.color='var(--parchment-dim)'"> WRITING </a><a href="#music" class="font-display" style="font-size:11px;letter-spacing:0.3em;color:var(--parchment-dim);text-decoration:none;transition:color 0.3s;" onmouseover="this.style.color='var(--gold)'" onmouseout="this.style.color='var(--parchment-dim)'"> MUSIC </a><a href="/lyrics" class="font-display" style="font-size:11px;letter-spacing:0.3em;color:var(--parchment-dim);text-decoration:none;transition:color 0.3s;" onmouseover="this.style.color='var(--gold)'" onmouseout="this.style.color='var(--parchment-dim)'"> LYRICS </a><a href="#websites" class="font-display" style="font-size:11px;letter-spacing:0.3em;color:var(--parchment-dim);text-decoration:none;transition:color 0.3s;" onmouseover="this.style.color='var(--gold)'" onmouseout="this.style.color='var(--parchment-dim)'"> WEBSITES </a><a href="#quotes" class="font-display" style="font-size:11px;letter-spacing:0.3em;color:var(--parchment-dim);text-decoration:none;transition:color 0.3s;" onmouseover="this.style.color='var(--gold)'" onmouseout="this.style.color='var(--parchment-dim)'"> QUOTES </a><a href="#contact" class="font-display" style="font-size:11px;letter-spacing:0.3em;color:var(--parchment-dim);text-decoration:none;transition:color 0.3s;" onmouseover="this.style.color='var(--gold)'" onmouseout="this.style.color='var(--parchment-dim)'"> CONTACT </a> </nav> <!-- Legal links --> <div style="display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-bottom:22px;"> <a href="/legal/terms-of-use" style="font-family:'EB Garamond',serif;font-style:italic;font-size:13px;color:var(--parchment-dim);text-decoration:none;opacity:0.7;transition:opacity 0.3s,color 0.3s;" onmouseover="this.style.opacity='1';this.style.color='var(--gold)';" onmouseout="this.style.opacity='0.7';this.style.color='var(--parchment-dim)';"> Terms of Use </a><a href="/legal/privacy-policy" style="font-family:'EB Garamond',serif;font-style:italic;font-size:13px;color:var(--parchment-dim);text-decoration:none;opacity:0.7;transition:opacity 0.3s,color 0.3s;" onmouseover="this.style.opacity='1';this.style.color='var(--gold)';" onmouseout="this.style.opacity='0.7';this.style.color='var(--parchment-dim)';"> Privacy Policy </a><a href="/legal/cookie-policy" style="font-family:'EB Garamond',serif;font-style:italic;font-size:13px;color:var(--parchment-dim);text-decoration:none;opacity:0.7;transition:opacity 0.3s,color 0.3s;" onmouseover="this.style.opacity='1';this.style.color='var(--gold)';" onmouseout="this.style.opacity='0.7';this.style.color='var(--parchment-dim)';"> Cookie Policy </a><a href="/legal/disclaimer" style="font-family:'EB Garamond',serif;font-style:italic;font-size:13px;color:var(--parchment-dim);text-decoration:none;opacity:0.7;transition:opacity 0.3s,color 0.3s;" onmouseover="this.style.opacity='1';this.style.color='var(--gold)';" onmouseout="this.style.opacity='0.7';this.style.color='var(--parchment-dim)';"> Disclaimer </a> </div> <!-- Copyright --> <div class="font-display" style="font-size:11px;letter-spacing:0.4em;color:var(--gold-deep);margin-top:18px;padding-bottom:48px;">
©&nbsp; MMXXVI &nbsp;·&nbsp; ALL &nbsp;RIGHTS &nbsp;RESERVED
</div> </footer>  </div> <script type="module">document.documentElement.classList.add("js-enabled");</script></body></html>