:root{--bg:#06051a;--ink:#eef0ff;--soft:#b9bde6;--muted:#9a9fcc;--blue:#5b8cff;--cyan:#22e4ff;--mag:#ff4fbf;--gold:#ffc44d;--violet:#8b5cff;
--glass:rgba(20,18,52,.55);--edge:rgba(150,160,255,.16);--grad:linear-gradient(100deg,var(--cyan),var(--violet) 40%,var(--mag) 70%,var(--gold))}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
html,body{overflow-x:clip}
body{margin:0;min-height:100vh;color:var(--ink);background:var(--bg);font-family:"Space Grotesk",system-ui,sans-serif}
a{color:inherit;text-decoration:none}
::selection{background:rgba(255,79,191,.4);color:#fff}
/* deep-space aurora */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(120% 80% at 50% -10%,#1a1450 0%,#0b0a2a 45%,#05040f 100%)}
.aurora::before{content:"";position:absolute;inset:0;background-image:radial-gradient(1px 1px at 12% 18%,#fff8,transparent),radial-gradient(1px 1px at 72% 12%,#fff9,transparent),radial-gradient(1.5px 1.5px at 38% 66%,#bfe9ff99,transparent),radial-gradient(1px 1px at 86% 54%,#ffd6f299,transparent),radial-gradient(1px 1px at 22% 84%,#fff7,transparent),radial-gradient(1px 1px at 58% 34%,#fff6,transparent),radial-gradient(1.5px 1.5px at 92% 86%,#fff8,transparent),radial-gradient(1px 1px at 5% 50%,#fff6,transparent);opacity:.9}
.aurora span{position:absolute;border-radius:50%;filter:blur(80px);opacity:.42;mix-blend-mode:screen;animation:drift 26s ease-in-out infinite alternate}
.aurora .b1{width:55vw;height:55vw;left:-14vw;top:-20vw;background:radial-gradient(circle,#00c8ff,transparent 65%)}
.aurora .b2{width:50vw;height:50vw;right:-16vw;top:-8vw;background:radial-gradient(circle,#ff3fb4,transparent 65%);animation-duration:32s;animation-delay:-8s}
.aurora .b3{width:45vw;height:45vw;left:28vw;top:46vh;background:radial-gradient(circle,#ffb534,transparent 65%);opacity:.22;animation-duration:38s;animation-delay:-14s}
.aurora .b4{width:44vw;height:44vw;left:-12vw;bottom:-16vw;background:radial-gradient(circle,#7b4dff,transparent 65%);animation-duration:30s}
.aurora .flare{left:0;right:0;top:30vh;height:2px;border-radius:0;filter:blur(1px);opacity:.6;mix-blend-mode:screen;background:linear-gradient(90deg,transparent 10%,rgba(0,212,255,.8) 40%,#fff 50%,rgba(255,63,180,.7) 62%,transparent 90%);box-shadow:0 0 30px 6px rgba(80,180,255,.3);animation:sweep 14s ease-in-out infinite alternate}
.ppage .aurora .flare{top:20vh}.home .aurora .flare{display:none}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vh) scale(1.12)}100%{transform:translate(-4vw,8vh) scale(.95)}}
@keyframes sweep{from{transform:translateX(-12%) scaleX(.9)}to{transform:translateX(12%) scaleX(1.1)}}
@keyframes shimmer{to{background-position:200% 50%}}
/* header */
header.site{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:14px clamp(18px,4vw,48px);
backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);background:rgba(6,5,26,.62);border-bottom:1px solid rgba(140,150,255,.12)}
.brand{display:flex;align-items:center}
.brand img{display:block;height:30px;width:auto;filter:drop-shadow(0 0 10px rgba(34,228,255,.35)) drop-shadow(0 0 18px rgba(255,79,191,.2))}
header nav a{margin-left:clamp(14px,3vw,34px);font-size:12px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--soft);transition:color .3s,text-shadow .3s}
header nav a:hover{color:#fff;text-shadow:0 0 12px var(--cyan)}
main{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
/* hero */
.hero{min-height:min(calc(92vh - 60px),860px);isolation:isolate;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:60px clamp(16px,4vw,40px) 50px;position:relative;overflow-x:clip;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.kicker{font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:var(--soft);margin:0 0 34px;padding:9px 20px;border-radius:99px;background:rgba(20,18,52,.6);border:1px solid var(--edge);backdrop-filter:blur(10px)}
.title{margin:0;line-height:0}
.title img{display:block;width:min(78vw,640px);height:auto;filter:drop-shadow(0 0 18px rgba(34,228,255,.35)) drop-shadow(0 0 40px rgba(139,92,255,.35)) drop-shadow(0 0 70px rgba(255,79,191,.22))}
.tag{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;font-size:clamp(26px,3.6vw,40px);margin:10px 0 6px;color:#f4f1ff;text-shadow:0 0 24px rgba(180,160,255,.35)}
.by{font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);margin:0 0 40px}
.cta{font-family:Syne,sans-serif;font-weight:700;font-size:13px;letter-spacing:.4em;text-transform:uppercase;padding:16px 38px 16px 44px;border-radius:99px;color:#fff;background:linear-gradient(100deg,#2a4dff,#00b8e6 17%,#c42a8f 34%,#d08a1a 50%,#c42a8f 67%,#00b8e6 83%,#2a4dff);background-size:200% 100%;
box-shadow:0 0 30px -4px rgba(34,228,255,.55),0 0 60px -10px rgba(255,79,191,.5),0 0 0 1px rgba(255,255,255,.25) inset;text-shadow:0 1px 6px rgba(0,0,0,.45);animation:shimmer 8s linear infinite;transition:transform .3s}
.cta:hover{transform:translateY(-2px) scale(1.03)}
/* glass */
.glass{background:var(--glass);border:1px solid var(--edge);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 24px 60px -24px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.08) inset}
h2.section{font-family:Syne,sans-serif;font-size:13px;font-weight:700;letter-spacing:.42em;text-transform:uppercase;color:var(--soft);margin:10px 0 26px;display:flex;align-items:center;gap:18px}
h2.section::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(34,228,255,.6),rgba(255,79,191,.4),transparent)}
.grid{list-style:none;margin:0 0 90px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.card{display:flex;flex-direction:column;height:100%;border-radius:22px;overflow:hidden;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .45s}
.card:hover{transform:translateY(-6px);border-color:rgba(34,228,255,.45);box-shadow:0 30px 70px -24px rgba(0,0,0,.8),0 0 40px -6px rgba(34,228,255,.35),0 0 60px -12px rgba(255,79,191,.3)}
.thumb{display:block;aspect-ratio:2.39/1;overflow:hidden;position:relative}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s;filter:saturate(1.1) contrast(1.05) brightness(.9)}
.thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(0,212,255,.22),transparent 40%,transparent 60%,rgba(255,63,180,.22)),linear-gradient(to bottom,transparent 50%,rgba(10,9,36,.85))}
.card:hover .thumb img{transform:scale(1.06)}
.cbody{display:flex;flex-direction:column;gap:8px;padding:18px 22px 22px}
.cmeta{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);display:flex;gap:12px;align-items:center}
.cmeta b{font-family:Syne,sans-serif;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.1em}
.t{font-family:Syne,sans-serif;font-weight:700;font-size:21px;line-height:1.22;letter-spacing:.01em;color:#fff}
.x{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:18px;color:var(--soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* poem page */
.phero{padding:46px 0 0;text-align:center}
.cine{margin:0 auto 34px;max-width:1100px;aspect-ratio:2.39/1;border-radius:20px;overflow:hidden;position:relative;
box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 60px -20px rgba(34,228,255,.35),0 0 0 1px rgba(150,160,255,.18)}
.cine img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.1) brightness(.88);animation:kenburns 30s ease-in-out infinite alternate}
.cine::before,.cine::after{content:"";position:absolute;left:0;right:0;z-index:1}
.cine::before{inset:0;background:linear-gradient(110deg,rgba(0,212,255,.28),transparent 35%,transparent 62%,rgba(255,63,180,.3)),radial-gradient(60% 90% at 85% 10%,rgba(255,196,77,.18),transparent 60%)}
.cine::after{bottom:0;height:30%;background:linear-gradient(to top,rgba(6,5,26,.8),transparent)}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08) translate(-1%,-1%)}}
.meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--soft);margin:0 0 16px}
.no{font-family:Syne,sans-serif;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.chip{padding:5px 14px;border-radius:99px;background:rgba(34,228,255,.08);border:1px solid rgba(34,228,255,.35);color:#9eeeff;font-size:11px}
.phead h1{font-family:Syne,sans-serif;font-weight:800;font-size:clamp(34px,6vw,72px);line-height:1.05;letter-spacing:.02em;margin:0 auto 44px;max-width:900px;
background:linear-gradient(100deg,#ffffff 20%,#9ec9ff 50%,#ff8fd6 80%,#ffd27a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(139,92,255,.35))}
.poem{max-width:720px;margin:0 auto;border-radius:26px;padding:clamp(30px,6vw,64px) clamp(24px,6vw,72px);position:relative}
.poem::before{content:"";position:absolute;left:50%;top:-1px;width:40%;height:2px;transform:translateX(-50%);background:var(--grad);box-shadow:0 0 18px rgba(34,228,255,.8);border-radius:2px}
.verse{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:clamp(20px,2.3vw,23px);line-height:1.6;color:#ecebfb}
.verse p{margin:0 0 .2em}
.verse.prose p{margin:0 0 1em}
.verse em{color:#fff}
.pager{max-width:720px;margin:34px auto 0;display:flex;justify-content:space-between;gap:16px}
.pager a{flex:0 1 48%;border-radius:18px;padding:16px 20px;font-family:Syne,sans-serif;font-weight:700;font-size:15px;color:#fff;transition:transform .3s,border-color .3s}
.pager a:hover{transform:translateY(-3px);border-color:rgba(34,228,255,.45)}
.pager small{display:block;font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.pager .next{text-align:right}
.back{text-align:center;margin:34px 0 80px}.back a{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--cyan)}
footer.site{text-align:center;color:var(--muted);font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:34px 20px 46px;border-top:1px solid rgba(140,150,255,.12);background:rgba(6,5,26,.6);backdrop-filter:blur(10px)}
footer.site p{margin:4px 0}.fbrand{font-family:Syne,sans-serif;font-weight:700;color:var(--soft)}.fbrand span{color:var(--mag)}
/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease var(--d,0ms),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
.hero>*{animation:rise 1.2s cubic-bezier(.2,.7,.2,1) both}.hero .title{animation:rise 1.4s cubic-bezier(.2,.7,.2,1) both,pulse 6s 1.4s ease-in-out infinite alternate}
.hero .tag{animation-delay:.25s}.hero .by{animation-delay:.4s}.hero .cta{animation:rise 1.2s .55s cubic-bezier(.2,.7,.2,1) both,shimmer 8s linear infinite}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes pulse{from{filter:brightness(1)}to{filter:brightness(1.18)}}
/* cinematic hero: eclipse orb, horizon flare, neon grid floor */
.hero::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(72vw,780px);aspect-ratio:1;transform:translate(-50%,-56%);border-radius:50%;
background:radial-gradient(circle at 50% 55%,rgba(6,5,26,.95) 0 30%,rgba(139,92,255,.35) 38%,rgba(255,79,191,.18) 50%,rgba(34,228,255,.1) 62%,transparent 72%);filter:blur(8px);animation:breathe 9s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;z-index:-2;left:-10%;right:-10%;bottom:0;height:240px;
background:repeating-linear-gradient(90deg,rgba(34,228,255,.28) 0 1px,transparent 1px 70px),repeating-linear-gradient(0deg,rgba(255,79,191,.22) 0 1px,transparent 1px 34px);
transform:perspective(380px) rotateX(62deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to top,#000 10%,transparent 90%);mask-image:linear-gradient(to top,#000 10%,transparent 90%)}
.hflare{position:relative;z-index:-1;display:block;align-self:stretch;height:2px;margin:26px -8% 0;background:linear-gradient(90deg,transparent 5%,rgba(0,212,255,.9) 38%,#fff 50%,rgba(255,63,180,.85) 62%,transparent 95%);
box-shadow:0 0 22px 4px rgba(34,200,255,.5),0 0 80px 18px rgba(255,79,191,.22);animation:rise 1.4s .2s both,sweep 12s ease-in-out infinite alternate}
.hflare::after{content:"";position:absolute;left:50%;top:50%;width:140px;height:140px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.85),rgba(160,200,255,.25) 25%,rgba(255,255,255,0) 60%)}
@keyframes breathe{from{opacity:.75;transform:translate(-50%,-56%) scale(.96)}to{opacity:1;transform:translate(-50%,-56%) scale(1.05)}}
@media (max-width:600px){.grid{grid-template-columns:1fr;gap:18px}.brand img{height:24px}.hero{min-height:auto;padding-top:64px;padding-bottom:60px}.kicker{font-size:10px;letter-spacing:.28em}
.title img{width:86vw}.hero::after{height:120px}.aurora span{filter:blur(50px)}.cine{aspect-ratio:16/9;border-radius:14px}.pager{flex-direction:column}.pager a{flex-basis:auto}.pager .next{text-align:left}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
main>.poem:last-child{margin-bottom:90px}

/* name riddle under logo */
.riddle{margin:30px auto 22px;max-width:560px;display:flex;flex-direction:column;align-items:center}
.rverse{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;font-size:clamp(18px,2.1vw,23px);line-height:1.55;color:#e6defc;margin:0;text-shadow:0 0 18px rgba(170,140,255,.45),0 0 2px rgba(255,255,255,.25)}
.rline{display:block;width:120px;height:1px;margin:18px 0 12px;background:linear-gradient(90deg,transparent,rgba(34,228,255,.85),rgba(255,79,191,.8),transparent);box-shadow:0 0 10px rgba(160,120,255,.6)}
.rkey{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--soft);margin:0}
.rkey b{font-weight:600;color:#fff;text-shadow:0 0 10px rgba(34,228,255,.5)}
.rkey i{display:inline-block;width:22px}
.riddle+.tag{margin-top:4px;font-size:clamp(22px,2.8vw,30px)}
.hero .riddle{animation-delay:.2s}
@media (max-width:600px){.riddle{margin:24px auto 16px;max-width:92vw}.rverse{font-size:17px;line-height:1.5}.rkey{font-size:10px;letter-spacing:.22em;line-height:2}.rkey i{display:block;width:0;height:0}}
@media (min-width:601px){.home .hero{padding-top:40px}.home .kicker{margin-bottom:26px}.riddle{margin:22px auto 14px}.rverse{line-height:1.48}.rline{margin:14px 0 10px}.riddle~.by{margin-bottom:28px}}

/* signature under each poem */
.sign{margin:clamp(26px,4vw,40px) 0 0 auto;width:fit-content;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.sign img{display:block;width:clamp(120px,22vw,170px);height:auto;margin-right:-8px;opacity:.95}
.sign figcaption{font-family:"Cormorant Garamond",Georgia,serif;font-variant:small-caps;font-size:17px;letter-spacing:.14em;color:var(--soft);padding-right:4px}
.sign figcaption::before{content:"";display:inline-block;vertical-align:middle;width:26px;height:1px;margin-right:10px;background:linear-gradient(90deg,transparent,rgba(34,228,255,.7))}
@media (max-width:560px){.sign img{width:120px}.sign figcaption{font-size:15px}}
/* stanza poems + gold highlights + original poster */
.verse p.st{margin:0 0 1.1em}
.verse .gold{color:var(--gold);font-weight:600;text-shadow:0 0 14px rgba(255,196,77,.35)}
.poster{margin:clamp(34px,5vw,54px) auto 0;text-align:center}
.poster a{display:inline-block;border-radius:14px;overflow:hidden;border:1px solid var(--edge);box-shadow:0 24px 60px -24px rgba(0,0,0,.8);transition:transform .4s,box-shadow .4s}
.poster a:hover{transform:translateY(-3px);box-shadow:0 30px 70px -24px rgba(0,0,0,.9),0 0 24px rgba(255,196,77,.25)}
.poster img{display:block;width:100%;max-width:560px;max-height:1200px;height:auto}
.poster figcaption{margin-top:12px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

/* inspired by Nur and Samir — closing section above footer */
.inspired{position:relative;z-index:1;padding:clamp(48px,8vw,96px) 20px clamp(40px,6vw,72px);text-align:center}
.inspired figure{margin:0 auto;max-width:420px}
.inspired img{display:block;width:100%;height:auto;border-radius:22px;border:1px solid rgba(255,196,77,.28);box-shadow:0 0 0 6px rgba(255,196,77,.05),0 0 60px -6px rgba(255,180,70,.35),0 30px 70px -30px rgba(0,0,0,.9)}
.inspired figcaption{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(20px,2.6vw,26px);color:var(--soft)}
.inspired figcaption b{font-style:normal;font-weight:600;color:var(--gold);text-shadow:0 0 14px rgba(255,196,77,.35)}
.inspired .iline{flex:0 0 38px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,196,77,.6),transparent)}

.inspired .songlink{display:inline-block;margin-top:16px;font-family:"Space Grotesk",sans-serif;font-size:14px;letter-spacing:.08em;color:var(--gold);text-decoration:none;border:1px solid rgba(255,196,77,.35);border-radius:999px;padding:8px 18px}
.inspired .songlink:hover{background:rgba(255,196,77,.08)}

.player{margin:0 0 28px;padding:16px 18px;border:1px solid rgba(255,196,77,.3);border-radius:16px;background:rgba(255,196,77,.05);text-align:center}
.player .ptitle{margin:0 0 10px;font-family:"Space Grotesk",sans-serif;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.player audio{width:100%;max-width:460px}