:root{--ink:#05060d;--night:#090d1e;--line:rgba(209,220,255,.16);--text:#f4f5ff;--muted:#b9c0d8;--pink:#ff4fa3;--blue:#4eaaff;--violet:#a56bff;--gold:#e8be68;--accent:var(--pink);--accent2:var(--violet)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--text);font:16px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.shell{width:min(1060px,calc(100% - 40px));margin:auto}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}
.brand{color:#fff;text-decoration:none;font-size:.83rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.brand span{color:var(--pink)}
.back{color:#d7dbef;text-decoration:none;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem}.back:hover{color:var(--accent)}
.hero{position:relative;overflow:hidden;min-height:calc(100vh - 76px);display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.9fr);align-items:center;gap:clamp(28px,7vw,96px);padding:42px 0 80px}
.hero:before{content:"";position:absolute;inset:0 -10vw;background:radial-gradient(circle at 76% 35%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 29%),radial-gradient(circle at 23% 63%,color-mix(in srgb,var(--accent2) 15%,transparent),transparent 32%);z-index:-1}
.eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:.19em;font-size:.72rem;font-weight:750}
.hero h1{font-size:clamp(3rem,7vw,6.4rem);line-height:.88;letter-spacing:-.07em;margin:18px 0 20px;max-width:700px}.hero h1 span{display:block;background:linear-gradient(100deg,#fff 10%,color-mix(in srgb,var(--accent) 55%,#fff) 50%,color-mix(in srgb,var(--accent2) 55%,#fff) 91%);color:transparent;background-clip:text}
.hero h1 small{display:block;margin-top:16px;font-size:.25em;line-height:1.1;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.hero .tagline{font:italic clamp(1.25rem,2.2vw,1.75rem)/1.3 Georgia,serif;margin:0 0 17px;color:#f0edf8}
.hero .copy{color:var(--muted);font-size:1.04rem;max-width:580px;margin:0 0 28px}
.spotify{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:15px 25px;border-radius:999px;background:linear-gradient(100deg,var(--accent),var(--accent2));color:#fff;text-decoration:none;font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 0 34px color-mix(in srgb,var(--accent) 28%,transparent);transition:transform .2s,filter .2s}.spotify:hover{transform:translateY(-2px);filter:brightness(1.1)}.spotify:focus-visible,.back:focus-visible,.brand:focus-visible{outline:3px solid #fff;outline-offset:4px}
.art{width:100%;max-width:490px;justify-self:end;aspect-ratio:1;object-fit:contain;background:#05060d;box-shadow:0 32px 80px rgba(0,0,0,.5);border:1px solid var(--line)}
.story{border-top:1px solid var(--line);padding:clamp(64px,10vw,120px) 0;background:linear-gradient(180deg,#070914,#0a0e21)}
.story-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,9vw,120px)}
h2{font-size:clamp(2.25rem,4.7vw,4.5rem);line-height:.96;letter-spacing:-.06em;margin:13px 0 0}.story-copy{color:var(--muted);font-size:1.08rem}.story-copy p{margin:0 0 22px}.connection{margin-top:52px;padding-top:28px;border-top:1px solid var(--line)}.connection h3{font-size:1.1rem;margin:0 0 10px;color:#fff}
.final{padding:clamp(72px,12vw,140px) 0;text-align:center;background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--accent2) 22%,transparent),transparent 52%),#070914}.final h2{max-width:800px;margin:13px auto 18px}.final p{color:var(--muted);margin:0 0 28px}
.footer{padding:34px 0;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}.footer a{color:inherit;text-decoration:none}.footer a:hover{color:var(--accent)}
.amor{--accent:#ff4fa3;--accent2:#a56bff}.wedding{--accent:#ff4fa3;--accent2:#4eaaff}.mom{--accent:#4eaaff;--accent2:#a56bff}.beautiful{--accent:#a56bff;--accent2:#e8be68}
@media(max-width:720px){.shell{width:min(100% - 32px,620px)}.nav{height:66px}.hero{min-height:auto;grid-template-columns:1fr;padding:26px 0 68px;gap:32px}.hero-copy{order:1}.art{order:2;justify-self:start;max-width:430px}.hero h1{font-size:clamp(3rem,15vw,4.65rem);margin-top:13px}.hero .copy{margin-bottom:22px}.story-grid{grid-template-columns:1fr;gap:24px}.story{padding:78px 0}.final{padding:82px 0}.spotify{width:100%;max-width:390px}.back{font-size:.64rem}.nav{gap:16px}.brand{font-size:.72rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.spotify{transition:none}}