:root{color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:#111310;color:#f5f5ee;font:15px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100svh;display:grid;place-items:center;padding:48px 24px}main{width:100%;max-width:380px;text-align:center}.mark{width:64px;height:64px;display:grid;place-content:center;grid-auto-flow:column;align-items:center;margin:0 auto 24px;border:1px solid #373c30;border-radius:50%;font-size:24px;font-weight:750;letter-spacing:-2px}.mark span{color:#d9fb68;font-size:14px;letter-spacing:-1px}h1{font-size:30px;font-weight:650;letter-spacing:-1.2px;margin:0}.intro{color:#999e92;margin:9px 0 34px;font-size:14px}nav{display:grid;gap:12px}.music-link{display:flex;align-items:center;justify-content:space-between;text-align:left;width:100%;border:1px solid #373c30;border-radius:10px;padding:19px 21px;background:#191d16;color:inherit;text-decoration:none;font:500 15px system-ui;cursor:pointer;transition:background .15s,border-color .15s}.music-link:hover{background:#242b1d;border-color:#d9fb68}.arrow{color:#d9fb68}.sample{font-size:9px;font-weight:400;color:#999e92;margin-left:8px}button{font:inherit;cursor:pointer;border:1px solid #373c30;background:transparent;color:inherit;border-radius:8px;padding:12px 16px}.quiet{border:0;color:#808675;font-size:11px;padding:12px;margin-top:25px}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #d9fb68;outline-offset:4px}dialog{color:#f5f5ee;background:#191d16;border:1px solid #373c30;border-radius:14px;padding:25px;width:440px;max-width:calc(100vw - 32px)}dialog::backdrop{background:#000b}.heading{display:flex;align-items:center;justify-content:space-between}h2{font-size:20px;margin:0}.heading button{border:0;font-size:24px;padding:0 5px}dialog p{font-size:12px;color:#999e92;line-height:1.6}label{display:block;font-size:12px;margin:19px 0}input{width:100%;display:block;margin-top:8px;padding:12px;color:#f5f5ee;border:1px solid #373c30;background:#111310;border-radius:7px;font:14px system-ui}.save{background:#d9fb68;color:#111310;border-color:#d9fb68;margin-right:6px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);width:max-content;max-width:90vw;background:#d9fb68;color:#111310;padding:14px 20px;border-radius:9px;font-size:13px}#status{margin-bottom:0}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Layered scene: photographic cutout, atmospheric town and readable link layer. */
body{display:block;padding:0 24px;overflow-x:hidden;background:#0a100e;--px:0px;--py:0px}.scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;isolation:isolate}.town{position:absolute;inset:-4%;background:url('assets/bound-brook-evening.png') center/cover no-repeat;transform:translate(calc(var(--px) * -.35),calc(var(--py) * -.35)) scale(1.04);filter:saturate(.8) brightness(.7);will-change:transform}.scene-shade{position:absolute;inset:0;background:linear-gradient(180deg,#07100b15,#07100b05 40%,#07100b99 80%),radial-gradient(ellipse at 50% 32%,transparent 0%,#06100d66 85%)}.portrait-depth{position:absolute;inset:0;transform:translate(var(--px),var(--py));will-change:transform}.portrait{position:absolute;left:50%;top:4svh;height:83svh;width:auto;max-width:none;transform:translateX(-50%);object-fit:contain;filter:drop-shadow(0 0 22px #d4ecbd24) drop-shadow(0 20px 32px #0009);animation:float 7s ease-in-out infinite}.foreground-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,#07100b33 38%,#07100bdd 68%,#07100bf5 100%)}main{position:relative;z-index:1;margin:0 auto;padding:43svh 0 34px;min-height:100svh;max-width:380px}h1{font-size:42px;letter-spacing:-1.8px;text-shadow:0 2px 24px #000}.intro{color:#d0d5c9;font-size:12px;margin:6px 0 24px;letter-spacing:.2px}.music-link{background:#101b15d9;border-color:#c3d9ac38;backdrop-filter:blur(14px);box-shadow:0 6px 25px #0002;padding:17px 21px}.music-link:hover{background:#243322ed}.quiet{color:#bdc8b1}.location{position:absolute;left:0;right:0;text-align:center;top:22px;color:#e0e9d5b0;font-size:9px;letter-spacing:3px;text-shadow:0 2px 10px #000}dialog{z-index:5}#toast{z-index:6}@keyframes float{0%,100%{transform:translate(-50%,0) rotate(-.5deg)}50%{transform:translate(-50%,-15px) rotate(.5deg)}}@media(min-width:800px){.portrait{height:100svh;top:1svh;left:40%}.foreground-shade{background:linear-gradient(90deg,#07100b10,#07100b15 30%,#07100ba8 62%,#07100bcc),linear-gradient(0deg,#07100bd9,transparent 35%)}main{margin-left:57%;padding-top:24svh;max-width:350px}.location{right:auto;left:36px;top:32px}.town{background-position:center 58%}}@media(prefers-reduced-motion:reduce){.portrait{animation:none}.portrait-depth,.town{transform:none;will-change:auto}}@media(max-width:360px){main{padding-top:38svh}h1{font-size:35px}.music-link{padding:14px 18px}.intro{margin-bottom:18px}nav{gap:9px}}
@media(max-width:799px){.town{background-position:8% center;filter:saturate(.85) brightness(.95)}.location{left:18px;right:auto;top:18px;width:115px;text-align:left;font-size:8px;letter-spacing:1.8px;line-height:1.7}.scene-shade{background:linear-gradient(180deg,#07100b15,transparent 40%,#07100b66 80%)}}
/* Vintage artist tee edition */
.portrait{height:76svh;top:3svh;filter:drop-shadow(0 8px 25px #0009);max-width:110vw;object-fit:contain}.town{filter:saturate(.6) brightness(.62)}h1{font-family:Georgia,'Times New Roman',serif;text-transform:uppercase;font-weight:900;letter-spacing:-2px;font-size:44px;color:#eee0bd;text-shadow:0 2px 0 #7b352a,0 4px 24px #000}.intro{color:#d3c7ad}.arrow{color:#d9c99b}.music-link{background:#101813e8;border-color:#a99c7347}.music-link:hover{background:#273022}.location{color:#e0cfad}.scene:after{content:'';position:absolute;inset:0;opacity:.07;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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.6' d='M0 0h180v180H0z'/%3E%3C/svg%3E");pointer-events:none}@media(min-width:800px){.portrait{height:94svh;top:3svh;left:35%;max-width:60vw}main{padding-top:24svh}}@media(max-width:799px){.town{filter:saturate(.65) brightness(.75)}.portrait{width:auto;height:76svh}}@media(prefers-reduced-motion:reduce){.portrait{animation:none}}
.platform-logo{width:25px;height:25px;object-fit:contain;flex-shrink:0}.platform-name{flex:1;min-width:0}.music-link{gap:14px}.sample{white-space:nowrap;font-size:8px}.music-link .arrow{flex-shrink:0}
/* Stable centering independent of animation transforms, including iOS webviews. */
.portrait-depth{display:flex;justify-content:center;align-items:flex-start;padding-top:20px;inset:0 auto 0 0;width:65vw}.portrait{position:relative;left:auto;top:auto;width:min(55vw,620px);height:auto;max-width:100%;max-height:95svh;object-fit:contain;transform:none;animation:float-centered 7s ease-in-out infinite}@keyframes float-centered{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:799px),(pointer:coarse){body{padding-left:20px;padding-right:20px}.portrait-depth{width:100%;inset:0;padding-top:18px;transform:none!important;will-change:auto}.portrait{width:min(96vw,430px);height:auto;max-height:none;max-width:100%;position:relative;left:auto;top:auto;transform:none!important;animation:none!important}.town{transform:none!important;will-change:auto;background-position:8% center}main{margin:0 auto;padding-top:clamp(280px,43svh,390px);padding-bottom:max(24px,env(safe-area-inset-bottom));max-width:380px;min-height:100svh}h1{font-size:clamp(32px,9vw,42px);letter-spacing:-1.5px}.intro{font-size:11px;margin:5px 0 18px}nav{gap:10px}.music-link{min-height:54px;padding:14px 17px;gap:13px;font-size:14px}.platform-logo{width:24px;height:24px}.quiet{margin-top:12px;min-height:44px}.location{top:max(14px,env(safe-area-inset-top));left:16px;right:auto;font-size:7px;width:105px;letter-spacing:1.5px}.foreground-shade{background:linear-gradient(180deg,transparent 15%,#07100b22 35%,#07100bd9 65%,#07100bf5 100%)}dialog{max-height:90svh;overflow:auto}input{font-size:16px}.scene:after{opacity:.045}}
@media(prefers-reduced-motion:reduce){.portrait{animation:none!important;transform:none!important}}
/* Echo de la Calle editorial edition */
body{background:#121912;padding:24px 20px}.scene{display:none}main{display:grid;grid-template-columns:1fr;gap:24px;max-width:430px!important;min-height:0!important;margin:0 auto!important;padding:0 0 24px!important}.editorial-art{display:block;width:100%;height:auto;max-height:58svh;object-fit:contain;object-position:center}.music-panel{min-width:0}h1{font:900 clamp(28px,8vw,40px)/1 system-ui,sans-serif;letter-spacing:-1.3px;color:#eee0bd;text-shadow:none}.intro{text-transform:uppercase;letter-spacing:3px;font-size:10px;margin:10px 0 23px;color:#d2bd98}.music-link{border-radius:3px;border-color:#eee0bd45;background:#1a241a;box-shadow:none;backdrop-filter:none;min-height:54px}.music-link:hover{background:#2b3b2a;border-color:#eee0bd}.arrow{color:#cfb98f}@media(min-width:800px) and (pointer:fine){body{padding:32px}main{max-width:1020px!important;grid-template-columns:1.1fr .9fr;gap:65px;align-items:center;min-height:calc(100svh - 64px)!important}.editorial-art{max-height:88svh;width:100%}.music-panel h1{font-size:48px}.music-panel .intro{margin-bottom:32px}.music-link{padding:20px}}@media(max-height:650px) and (max-width:799px){.editorial-art{max-height:55svh}}
/* Borderless charcoal edition */
body{background:#0b0c0c;padding:0!important;color:#dddcd7}main{max-width:none!important;gap:0;padding:0!important}.editorial-art{display:block;width:100%;height:auto;max-height:none;object-fit:contain;border:0;border-radius:0;filter:grayscale(.72) saturate(.45) brightness(.62) contrast(1.12);mask-image:linear-gradient(#000 0%,#000 75%,transparent 100%);-webkit-mask-image:linear-gradient(#000 0%,#000 75%,transparent 100%)}.music-panel{position:relative;width:100%;max-width:430px;margin:-35px auto 0;padding:0 22px 32px;z-index:1}h1{color:#d5d3ca}.intro{color:#8e9089}.music-link{border:0!important;border-radius:0;background:#171919;box-shadow:none;color:#deded8;min-height:56px}.music-link:hover{background:#232626}.arrow{color:#9da19a}.platform-logo{filter:grayscale(1);opacity:.83}nav{gap:8px}a:focus-visible{outline-color:#babdb4}@media(min-width:800px) and (pointer:fine){main{grid-template-columns:1fr 1fr;gap:0;min-height:100svh!important}.editorial-art{height:100svh;max-height:100svh;object-fit:cover;object-position:center;mask-image:linear-gradient(90deg,#000 70%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,#000 70%,transparent 100%)}.music-panel{margin:0 auto;padding:40px;max-width:470px}}@media(max-width:799px),(pointer:coarse){.editorial-art{max-height:none}.music-panel{margin-top:-35px}}
