@font-face{font-family:Cormorant;src:url('./assets/cormorant-regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Cormorant;src:url('./assets/cormorant-italic.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:Nastaliq;src:url('./assets/nastaliq.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:dark;--paper:#f3e8d2;--wine:#471820;--gold:#c8a57a;--quiet:#decaad;font-family:Cormorant,Georgia,serif;color:var(--paper);background:var(--wine)}
*{box-sizing:border-box}html{min-width:280px;scroll-behavior:smooth}body{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default}[hidden]{display:none!important}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--paper);outline-offset:6px}
.skip-link{position:absolute;left:24px;top:12px;transform:translateY(-180%);z-index:10;background:var(--paper);color:var(--wine);padding:12px 16px;font:14px Arial,sans-serif}.skip-link:focus{transform:translateY(0)}
.room{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;background:#361018}
.rug{position:absolute;inset:0;z-index:-3;background-image:linear-gradient(90deg,#250b1140,#2c0b176b 50%,#250b1140),url('./assets/red-rug.jpg');background-size:cover;background-position:center}
.rug:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 40% 53% at 50% 43%,#290a154d 12%,#260a1452 55%,#18090e88 100%)}
.rug-frame{position:absolute;inset:18px;border:1px solid #e4c59675;pointer-events:none;z-index:-1;box-shadow:inset 0 0 0 5px #2a111c55,inset 0 0 0 6px #e4c59630}
.rug-frame:before,.rug-frame:after{content:'';position:absolute;left:50%;width:5px;height:5px;border:1px solid var(--gold);background:var(--wine);transform:translateX(-50%) rotate(45deg)}.rug-frame:before{top:-3px}.rug-frame:after{bottom:-3px}
.masthead{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:30px 42px 0;font:10px/1.6 Arial,sans-serif;letter-spacing:2px;color:var(--quiet)}
.masthead span:first-child{display:flex;align-items:center;gap:12px}.masthead span:first-child:before{content:'';width:5px;height:5px;display:block;border:1px solid var(--gold);transform:rotate(45deg)}.masthead span:last-child{font-size:10px;letter-spacing:1.7px;text-align:right}
.main{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
.overline{font:10px/1.6 Arial,sans-serif;letter-spacing:2.8px;color:var(--quiet);margin:0}.wordmark{margin:8px 0 0;position:relative;text-shadow:0 3px 35px #240c16b0}
.urdu{font:400 32px/2.1 Nastaliq,serif;display:block;height:62px;color:var(--paper)}
h1{font:400 clamp(125px,12vw,148px)/.82 Cormorant,Georgia,serif;letter-spacing:-5px;margin:0 0 20px;padding-right:5px}
.tagline{font:italic 26px/1.3 Cormorant,Georgia,serif;margin:0;letter-spacing:.1px;color:var(--paper)}
.introduction{font:400 18px/1.35 Cormorant,Georgia,serif;margin:10px 0 0;max-width:290px;color:#e5d2b7;letter-spacing:.15px}
.flourish{display:flex;align-items:center;justify-content:center;gap:13px;margin-top:13px;color:var(--gold)}.flourish span{width:37px;height:1px;background:linear-gradient(90deg,transparent,#c8a57a99)}.flourish span:last-child{transform:rotate(180deg)}.flourish b{font:400 21px/1 Georgia,serif}
.player{margin-top:16px;display:flex;flex-direction:column;align-items:center;max-width:100%}
.disc-wrap{width:154px;height:154px;position:relative;filter:drop-shadow(0 13px 20px #13070c95)}.disc-wrap:before{content:'';position:absolute;inset:-20%;border-radius:50%;background:radial-gradient(ellipse,#d7b67f15,transparent 68%);pointer-events:none}
.disc{width:100%;height:100%;border-radius:50%;position:relative;background:conic-gradient(from 15deg,#e7dfcf 0deg,#9d9f9c 25deg,#dfd8c0 44deg,#f5ecdb 62deg,#c1b7be 78deg,#97a6ad 104deg,#d6d4bf 120deg,#f0e9dc 150deg,#d4c4b9 174deg,#a0a3a2 192deg,#f3eee2 225deg,#cdbbc3 249deg,#d7e0d6 268deg,#cbbb9a 292deg,#eeede4 325deg,#e7dfcf 360deg);border:1px solid #fff2dc90;box-shadow:inset 0 0 0 2px #898b8155,inset 0 0 0 4px #fffff340,0 0 0 1px #ffffff20;animation:revolve 24s linear infinite paused;will-change:transform}
.disc:before{content:'';position:absolute;inset:7px;border:1px solid #f9f6eb66;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 2px,#9b999714 2px 2.6px)}
.disc:after{content:'';position:absolute;inset:4px;border-radius:50%;background:conic-gradient(transparent 0deg 37deg,#c4dcf54b 42deg,#f1ced84b 49deg,#d3dba04d 55deg,transparent 63deg 218deg,#ccaff537 224deg,#a8d2df40 231deg,transparent 240deg);mix-blend-mode:color-burn}
.disc-label{position:absolute;inset:27%;border-radius:50%;background:#dec9a3;color:#5b272a;border:1px solid #bba680;display:flex;flex-direction:column;align-items:center;padding-top:9px;transform:rotate(-18deg)}.disc-label>span{font:italic 27px/1.05 Cormorant,Georgia,serif;letter-spacing:-1px}.disc-label small{font:5px/1.4 Arial,sans-serif;letter-spacing:.8px;text-transform:uppercase;margin-top:4px}
.disc-hole{position:absolute;inset:45%;border-radius:50%;background:#471e23;border:3px solid #bdb9ac;box-shadow:0 0 0 3px #f5edda80;z-index:2}.disc-lettering{position:absolute;top:17%;left:12%;right:12%;text-align:center;font:5px/1.3 Arial,sans-serif;letter-spacing:1px;color:#4a4140;z-index:1}
.is-playing .disc{animation-play-state:running}
.track-caption{margin:21px 0 0;display:flex;align-items:center;gap:14px;font:italic 23px/1.25 Cormorant,Georgia,serif;max-width:100%}.track-caption>span:nth-child(2){max-width:260px;overflow-wrap:anywhere}.track-caption>span:first-child,.track-caption>span:last-child{height:1px;width:22px;flex-shrink:0;background:var(--gold);opacity:.45}
.track-credit{font:11px/1.5 Arial,sans-serif;letter-spacing:.2px;margin:7px 0 0;max-width:300px;color:var(--quiet);overflow-wrap:anywhere}
.playback-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px}
.play-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 23px;min-height:46px;min-width:148px;border:1px solid #f2e3c58c;border-radius:30px;background:#f0e3c9;color:#4b2027;font:12px/1.5 Arial,sans-serif;letter-spacing:.3px;box-shadow:0 3px 20px #19091035;transition:background .2s,box-shadow .2s}.play-button:hover:not(:disabled){background:#fff3d9;box-shadow:0 3px 24px #c9aa7b25}.play-button:disabled{opacity:.65}
.play-icon,.pause-icon{width:16px;height:16px;flex-shrink:0}
.mute-button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;padding:12px;border:1px solid #d7ba8c60;border-radius:50%;background:#300f1a45;color:var(--paper);transition:background .2s}.mute-button:hover{background:#f1e5cf14}.mute-button svg{width:20px;height:20px}
.timeline{display:flex;align-items:center;gap:12px;width:min(270px,100%);margin-top:14px;font:11px/1.5 Arial,sans-serif;font-variant-numeric:tabular-nums;color:var(--quiet)}
.timeline input{--played:0%;appearance:none;-webkit-appearance:none;display:block;width:100%;min-width:40px;height:22px;margin:0;background:transparent;cursor:pointer;outline-offset:3px}
.timeline input::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(to right,#e1c596 0 var(--played),#d0b08b40 var(--played) 100%)}
.timeline input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:7px;height:7px;border-radius:50%;margin-top:-2.5px;border:0;background:#e9d3ac;box-shadow:0 0 0 3px #c8a57a10}
.timeline input::-moz-range-track{height:2px;border-radius:2px;background:#d0b08b40}.timeline input::-moz-range-progress{height:2px;background:#e1c596}.timeline input::-moz-range-thumb{width:7px;height:7px;border-radius:50%;border:0;background:#e9d3ac}.timeline>span{min-width:26px}
.player-status{margin:10px 0 0;max-width:290px;font:11px/1.5 Arial,sans-serif;color:var(--quiet)}.player-status:empty{display:none}
.coming{display:flex;align-items:center;justify-content:center;gap:10px;font:italic 17px/1.4 Cormorant,Georgia,serif;margin:22px 0 0;color:var(--quiet)}.coming>span{width:4px;height:4px;transform:rotate(45deg);border:1px solid var(--gold);display:inline-block;flex-shrink:0}
.footer{display:flex;justify-content:center;align-items:center;padding:0 28px 27px;color:var(--quiet)}
.footer .instagram-link{display:flex;align-items:center;justify-content:center;gap:15px;min-height:70px;width:290px;max-width:100%;padding:12px 10px 8px;border-top:1px solid #c8a57a50;color:var(--paper);text-decoration:none;transition:background .2s}
.instagram-link:hover{background:#f1e5cf08}.instagram-icon{width:22px;height:22px;flex-shrink:0;color:var(--gold)}.instagram-copy{display:flex;flex-direction:column;gap:5px}.instagram-handle{font:400 25px/1.05 Cormorant,Georgia,serif;letter-spacing:.2px}.instagram-caption{font:11px/1.5 Arial,sans-serif;color:var(--quiet);letter-spacing:.2px}.instagram-arrow{font:19px/1 Cormorant,Georgia,serif;margin-left:2px;color:var(--gold)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.preview-tools{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px;background:#f1e5cf;color:#511d23;padding:20px 28px;font:13px/1.5 Arial,sans-serif}.preview-tools>*{min-width:0;max-width:100%;overflow-wrap:anywhere}.preview-tools p{margin:5px 0;font-size:12px;max-width:420px}.file-label{display:flex;align-items:center;gap:10px;border:1px solid #511d2355;padding:12px}.file-label input{max-width:220px;color:inherit;font:12px Arial,sans-serif}.preview-tools input:focus-visible{outline-color:var(--wine)}.noscript{padding:15px;text-align:center;font:13px/1.5 Arial,sans-serif}
@keyframes revolve{to{transform:rotate(360deg)}}
@media(max-height:800px) and (min-width:600px){.masthead{padding-top:32px}.main{padding-top:20px;padding-bottom:20px}.urdu{height:59px;font-size:29px}h1{font-size:128px;margin-bottom:20px}.tagline{font-size:22px}.flourish{margin-top:14px}.player{margin-top:16px}.disc-wrap{width:142px;height:142px}.disc-label>span{font-size:23px}.disc-label{padding-top:6px}.track-caption{margin-top:16px;font-size:21px}.playback-controls{margin-top:15px}.coming{margin-top:23px}.footer{padding-bottom:24px}}
@media(max-width:560px){
.masthead{padding:28px 27px 0;align-items:center;font-size:10px;letter-spacing:1.1px;gap:16px}.masthead span:first-child{gap:8px}.masthead span:last-child{font-size:9px;letter-spacing:1px;white-space:nowrap}.rug-frame{inset:12px}.rug:after{background:radial-gradient(ellipse 70% 58% at 50% 43%,#290a1540 5%,#260a146b 63%,#18090e88 100%)}
.main{padding:18px 20px 14px}.overline{font-size:10px;letter-spacing:2px}.urdu{font-size:32px;height:54px}h1{font-size:118px;letter-spacing:-4px;margin-bottom:20px}.tagline{font-size:24px}.introduction{font-size:17px;margin-top:8px}.flourish{margin-top:8px}.player{margin-top:14px}.disc-wrap{width:140px;height:140px}.disc-label{padding-top:7px}.disc-label>span{font-size:25px}.track-caption{margin-top:16px;font-size:22px}.playback-controls{margin-top:16px}.timeline{width:250px;margin-top:12px}.timeline input{height:32px}.coming{font-size:17px;margin-top:16px}
.footer{padding:0 27px 18px}.footer .instagram-link{width:285px;min-height:74px}.preview-tools{padding:20px;align-items:stretch;flex-direction:column}.file-label{flex-direction:column;align-items:flex-start}.file-label input{width:100%;min-width:0;max-width:100%;font-size:16px}}
@media(max-width:340px){h1{font-size:111px}.masthead{padding-left:23px;padding-right:23px;font-size:9px}.masthead span:last-child{font-size:8px}.main{padding-left:17px;padding-right:17px}.tagline{font-size:21px}.track-caption>span:first-child,.track-caption>span:last-child{width:16px}.timeline{width:235px}.coming{font-size:16px}.instagram-handle{font-size:24px}.instagram-caption{font-size:11px}.footer .instagram-link{gap:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}button{transition:none}}