:root{--bg:#17120f;--cream:#f8f1e8;--muted:#c9bbac;--gold:#d0ad72;--wine:#7a3038;--line:rgba(239,229,214,.15);--ink:#211813}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--cream);font-family:"Cairo",sans-serif;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 70% 15%,rgba(208,173,114,.09),transparent 30%),radial-gradient(circle at 10% 80%,rgba(122,48,56,.14),transparent 34%);z-index:-2}.noise{position:fixed;inset:0;opacity:.035;pointer-events:none;z-index:50;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}.progress{position:fixed;top:0;left:0;width:100%;height:2px;background:rgba(255,255,255,.05);z-index:100}.progress span{display:block;width:0;height:100%;background:var(--gold);box-shadow:0 0 14px var(--gold)}
.screen{min-height:100svh;position:relative;padding:7vw clamp(24px,7vw,110px);display:flex;align-items:center}.eyebrow{font-size:11px;letter-spacing:.06em;color:var(--gold);font-weight:700;margin:0 0 24px}.heart-line{font-family:Amiri,serif;font-size:48px;line-height:1;color:#d4b47c;margin-bottom:15px}h1,h2,h3{font-family:"Noto Kufi Arabic",sans-serif;font-weight:500;line-height:1.55;margin:0}h1{font-size:clamp(42px,6.5vw,86px);max-width:1000px}h2{font-size:clamp(34px,5vw,70px)}h3{font-size:clamp(26px,3.5vw,48px)}h1 em,h2 em{font-style:normal;color:#d8c5ad;font-weight:400}.lead,.body-copy{color:#cdbfb0;line-height:2.05;max-width:690px;font-size:15px}.lead{font-size:17px;margin:28px 0 10px}.hero-whisper{color:#9f9184;font-size:13px;margin:8px 0 28px}.primary{border:1px solid rgba(208,173,114,.6);background:rgba(255,255,255,.02);color:var(--cream);padding:14px 22px;border-radius:999px;font:600 12px Cairo;cursor:pointer;transition:.3s}.primary:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px)}.primary span{margin-right:12px}.dark{color:var(--cream);background:rgba(208,173,114,.08)}.scroll-hint{position:absolute;bottom:30px;left:7vw;color:#8f8174;font-size:10px}.scroll-hint span{color:var(--gold);margin-right:8px}.hero{justify-content:center;text-align:center;overflow:hidden;background:linear-gradient(125deg,#17120f,#231b15 55%,#17120f)}.hero-copy{width:min(880px,100%);position:relative;z-index:2}.hero .lead{margin-left:auto;margin-right:auto}.hero-glow{position:absolute;width:500px;height:500px;border-radius:50%;background:rgba(208,173,114,.07);filter:blur(80px);top:25%;left:50%;transform:translate(-50%,-50%)}
.station{border-top:1px solid var(--line)}.station-content{max-width:760px;z-index:2}.station-number{position:absolute;top:7vw;right:7vw;color:var(--gold);font:500 16px Amiri}.station-marker{position:absolute;right:7vw;bottom:35px;color:#786b5e;font-size:10px}.centered-copy{width:min(880px,100%);margin:auto;text-align:center}.centered-copy .body-copy{margin:28px auto}.memory-card{width:min(340px,76vw);background:#eee2d1;padding:10px;color:var(--ink);margin:34px auto 0;transform:rotate(2deg);box-shadow:0 30px 80px rgba(0,0,0,.38)}.memory-card img{width:100%;height:390px;object-fit:cover;display:block}.card-caption{display:flex;justify-content:space-between;gap:15px;font-size:10px;font-weight:600;padding:12px 5px 4px}
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:8vw}.image-stack{position:relative;min-height:620px;display:flex;align-items:center;justify-content:center}.photo-frame{position:absolute;background:#eee2d1;padding:10px;box-shadow:0 30px 80px rgba(0,0,0,.42)}.photo-frame img{display:block;width:100%;height:100%;object-fit:cover}.main-frame{width:min(34vw,440px);height:520px;transform:rotate(-4deg);right:14%}.small-frame{width:min(23vw,280px);height:310px;left:7%;bottom:7%;transform:rotate(7deg);z-index:3}.tape{position:absolute;right:13%;top:10%;font-size:10px;color:#9f8d7b;transform:rotate(-5deg)}.quote{margin-top:34px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:#c7b6a5;font:400 19px Amiri,serif;line-height:1.9}
.song{display:grid;grid-template-columns:.72fr 1fr .72fr;gap:5vw;background:#1b1511;overflow:hidden}.vinyl-wrap{position:relative;display:flex;align-items:center;justify-content:center}.vinyl{width:min(30vw,390px);aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#0c0b0a 0 2px,#171615 3px 5px);box-shadow:0 35px 90px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;animation:spin 18s linear infinite}.vinyl:after{content:"";position:absolute;width:28%;aspect-ratio:1;border-radius:50%;background:#8a5b45;box-shadow:inset 0 0 0 12px #6e4032}.vinyl-label{position:relative;z-index:2;text-align:center;font:700 22px Amiri;color:#f1ddc1}.vinyl-label small{font:11px Cairo}.needle{position:absolute;width:4px;height:165px;background:#bfae9d;top:18%;right:20%;transform:rotate(25deg);transform-origin:top;box-shadow:0 0 10px rgba(255,255,255,.1)}@keyframes spin{to{transform:rotate(360deg)}}.song-copy{align-self:center}.music-btn,.voice-btn{margin-top:22px;border:1px solid rgba(208,173,114,.55);background:rgba(255,255,255,.03);color:var(--cream);padding:13px 18px;border-radius:999px;cursor:pointer;font:600 12px Cairo}.play-icon{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--ink);margin-left:8px}.micro{font-size:10px;color:#786d62;line-height:1.8;margin-top:12px}.song-photo{display:flex;flex-direction:column;justify-content:center;gap:16px}.song-photo-frame{background:#eee2d1;padding:10px;box-shadow:0 30px 70px rgba(0,0,0,.35);transform:rotate(3deg)}.song-photo img{width:100%;height:500px;object-fit:cover;display:block}.song-photo span{font:400 17px Amiri;color:#a99a8c;transform:rotate(2deg)}
.gallery{display:block;padding-top:8vw}.gallery-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:45px}.gallery-note{color:#817467;font-size:12px;line-height:2;text-align:right}.memory-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:95px;gap:14px}.memory-grid figure{margin:0;position:relative;overflow:hidden;background:#2b221c;cursor:pointer;border-radius:2px}.memory-grid img{width:100%;height:100%;object-fit:cover;transition:transform .7s}.memory-grid figure:hover img{transform:scale(1.04)}.memory-grid figcaption{position:absolute;right:14px;left:14px;bottom:13px;color:#fff;font:400 18px Amiri,serif;line-height:1.5;text-shadow:0 2px 15px #000;z-index:2}.memory-grid figure:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.72))}.m1{grid-column:1/5;grid-row:1/5}.m2{grid-column:5/9;grid-row:1/7}.m3{grid-column:9/13;grid-row:1/4}.m4{grid-column:1/5;grid-row:5/9}.m5{grid-column:9/13;grid-row:4/9}.m6{grid-column:5/9;grid-row:7/10}.center-love{text-align:center;font:400 28px Amiri;color:#d7c5b2;padding:60px 0 20px}
.detour{background:#0e0c0b;justify-content:center;gap:8vw}.detour-map{width:35vw;min-width:300px;height:470px;position:relative;border:1px solid rgba(208,173,114,.12);background:radial-gradient(circle at 50% 50%,rgba(208,173,114,.05),transparent 45%);overflow:hidden}.map-line{position:absolute;width:70%;height:1px;left:15%;top:55%;background:var(--gold);transform:rotate(-17deg);box-shadow:0 0 20px rgba(208,173,114,.5)}.map-line:after{content:"";position:absolute;left:47%;top:-38px;width:90px;height:80px;border-left:1px dashed #7e3339;border-bottom:1px dashed #7e3339;border-radius:0 0 0 70px;transform:rotate(22deg)}.map-point{position:absolute;width:38px;height:38px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;font-size:9px;background:#0e0c0b}.start{left:10%;top:47%}.detour-point{left:47%;top:40%;border-color:#9d4c54;color:#d9999f}.end{right:9%;top:62%}.detour-copy{max-width:700px}.big-apology{font:400 clamp(25px,2.8vw,40px) Amiri;line-height:1.7;color:#e2d1bf;margin:28px 0}.small{max-width:610px}
.final{flex-direction:column;text-align:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at 50% 45%,#3a2720,#17120f 50%)}.final-glow{position:absolute;width:500px;height:500px;border-radius:50%;background:rgba(208,173,114,.08);filter:blur(70px)}.final h2{z-index:1}.final-photo{width:min(340px,62vw);padding:9px;background:#eee2d1;transform:rotate(-2deg);margin:30px 0 22px;z-index:1;box-shadow:0 30px 80px rgba(0,0,0,.45)}.final-photo img{width:100%;height:340px;object-fit:cover;display:block}.final-line{font:400 21px Amiri;color:#b9aa99;z-index:1}.voice-btn{z-index:1}.voice-placeholder{display:none;z-index:1;margin-top:12px;color:#a59585}.voice-placeholder p{margin:0;font-size:12px}.voice-placeholder small{font-size:10px;color:#74685c}.final h3{margin-top:45px;z-index:1}.final h3 span{color:#a24d55}.final-love{margin-top:12px;font-size:clamp(22px,3vw,32px);opacity:.95;z-index:1}.restart{background:none;border:0;color:#76695d;margin-top:20px;cursor:pointer;font:500 10px Cairo;z-index:1}.photo-modal{position:fixed;inset:0;background:rgba(10,8,7,.94);z-index:200;display:none;align-items:center;justify-content:center;flex-direction:column;padding:30px}.photo-modal.open{display:flex}.photo-modal img{max-width:min(90vw,800px);max-height:78vh;object-fit:contain;box-shadow:0 30px 100px #000}.photo-modal p{font:400 22px Amiri;color:#d2c0aa}.modal-close{position:absolute;top:20px;right:25px;background:none;border:0;color:#fff;font-size:35px;cursor:pointer}
@media(max-width:900px){.screen{padding:72px 22px;min-height:100svh}.hero h1{font-size:42px}.lead{font-size:14px}.station{display:block}.station-content{padding-top:25px}.station-marker{right:22px}.memory-card{width:min(86vw,360px);margin-top:30px}.memory-card img{height:390px}.split{display:flex;flex-direction:column;gap:25px}.image-stack{min-height:510px;order:2}.main-frame{width:70vw;height:430px;right:12%}.small-frame{width:43vw;height:240px;left:5%;bottom:2%}.split .station-content{order:1}.song{display:flex;flex-direction:column;gap:28px}.vinyl-wrap{height:285px}.vinyl{width:250px}.needle{right:17%;top:8%;height:120px}.song-photo img{height:420px}.gallery{padding-top:72px}.gallery-head{display:block;margin-bottom:30px}.gallery-note{text-align:right;margin-top:18px}.memory-grid{grid-template-columns:1fr 1fr;grid-auto-rows:155px}.m1,.m2,.m3,.m4,.m5,.m6{grid-column:auto;grid-row:auto}.m2{grid-row:span 2}.m5{grid-row:span 2}.memory-grid figcaption{font-size:16px}.center-love{font-size:25px;padding:40px 0}.detour{display:flex;flex-direction:column;gap:35px}.detour-map{width:100%;min-width:0;height:300px}.detour-copy{width:100%}.final-photo img{height:330px}.final h3{margin-top:35px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}