@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:Manrope,Arial,sans-serif;color:#22211e;background:#13120f;font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #c77442;outline-offset:5px}h1,h2,p{margin:0}.background{position:fixed;inset:0;background:url('/assets/romy-theater-edited.jpg') center 35%/cover no-repeat;overflow:hidden;z-index:-3}.background iframe{position:absolute;left:50%;top:50%;width:100vw;height:56.25vw;min-width:177.78vh;min-height:100vh;transform:translate(-50%,-50%);border:0;pointer-events:none;opacity:0;transition:opacity 1s}.background.playing iframe{opacity:1}.shade{position:fixed;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.15) 40%,rgba(0,0,0,.45));z-index:-2}.landing{min-height:100svh;display:grid;place-items:center;padding:70px 24px}.centerpiece{width:min(100%,580px);margin-top:12svh}.socials{display:flex;justify-content:center;gap:17px;margin-bottom:23px}.socials a{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:rgba(250,248,239,.92);color:#483526;transition:transform .2s,background .2s}.socials a:hover{transform:translateY(-3px);background:#fff}.socials svg{width:25px;height:25px;fill:currentColor}.artist-card{background:rgba(250,248,241,.96);border-radius:9px;padding:25px 32px 24px;box-shadow:0 14px 70px #0003;border:1px solid #fff7}.card-top{display:flex;justify-content:space-between;gap:20px;font-size:.625rem;letter-spacing:.13em;font-weight:700;color:#69675e}.card-top>span:first-child{color:#9d4e2b}.artist-card h1{text-align:center;font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(3.5rem,8vw,5.7rem);font-weight:700;letter-spacing:-.015em;line-height:1;margin:27px 0 20px}.card-menu{display:flex;justify-content:center;gap:23px;flex-wrap:wrap}.card-menu button{color:#26251f;background:none;border:0;padding:6px 0;font-size:.8125rem;font-weight:700;letter-spacing:.02em;border-bottom:1px solid transparent}.card-menu button:hover{border-bottom-color:currentColor}.card-bottom{border-top:1px solid #d0cdc3;margin-top:29px;padding-top:17px;display:flex;justify-content:space-between;align-items:center;gap:14px}.card-bottom>span{font-size:.5625rem;letter-spacing:.08em;color:#777267}.card-bottom>a{font-size:.8125rem;font-weight:600;display:flex;align-items:center;gap:17px}.card-bottom>a>span{font-size:.6rem;color:#9d4e2b}.screen-footer{position:fixed;bottom:max(19px,env(safe-area-inset-bottom));left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;color:#f2eee7;font-size:.625rem;letter-spacing:.08em}.screen-footer button{color:inherit;background:#0005;border:1px solid #fff5;border-radius:25px;padding:9px 13px;font-size:.6875rem;letter-spacing:0}.screen-footer button:hover{background:#0009}dialog{width:min(540px,calc(100% - 32px));max-height:85svh;border:0;border-radius:10px;background:#faf8f1;color:#22211e;padding:40px;box-shadow:0 20px 100px #0006}dialog::backdrop{background:#0009;backdrop-filter:blur(8px)}.close{position:absolute;top:10px;right:13px;width:38px;height:38px;border:0;background:transparent;font-size:1.75rem;color:#565349}.eyebrow{font-size:.6875rem!important;color:#9d4e2b!important;font-weight:700;letter-spacing:.08em}dialog h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:3.2rem;font-weight:600;margin:14px 0 23px;line-height:1}dialog p{font-size:1rem;line-height:1.7;color:#5d5a53;margin-top:14px}.track{display:block;padding:18px 0;border-bottom:1px solid #d8d3c8}.track strong{display:block;font-size:1rem;line-height:1.5;font-weight:600}.track span{display:block;font-size:.8125rem;color:#716c61;margin-top:6px}.track:hover strong,.text-link:hover{color:#a84f28}.text-link{display:inline-block;margin-top:24px;font-size:.875rem;text-decoration:underline;text-underline-offset:4px}.contact-button{display:inline-block;background:#24221e;color:#faf8f1;border-radius:3px;padding:14px 20px;margin-top:25px;font-size:.9375rem}
@media(max-width:600px){.landing{padding:65px 25px}.centerpiece{margin-top:10svh}.artist-card{padding:22px 22px 20px}.artist-card h1{font-size:clamp(3.5rem,13vw,5rem);margin:29px 0 20px}.socials{gap:15px;margin-bottom:20px}.socials a{width:45px;height:45px}.card-menu{gap:18px}.card-menu button{font-size:.75rem}.card-bottom{flex-direction:column;align-items:center;gap:8px;margin-top:24px}.card-bottom>a{font-size:.875rem}.card-top{font-size:.5625rem}.screen-footer{left:20px;right:20px}dialog{padding:35px 25px}}
@media(max-height:520px){.centerpiece{margin-top:0}.landing{padding-top:30px;padding-bottom:60px}.artist-card h1{margin:15px 0}.socials{margin-bottom:14px}.screen-footer{position:static;margin:0 20px 15px}.card-bottom{margin-top:16px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Native playback remains visible even if the external SDK is delayed. */
.background iframe{opacity:1}

.name-design{text-align:center;margin:24px 0 18px}.name-design h1{margin:0 0 15px;font-size:clamp(3.4rem,8vw,5.2rem)}.barcode{display:block;width:min(76%,330px);height:48px;margin:0 auto;fill:#27251f}.barcode-caption{display:block;font-size:.5625rem;letter-spacing:.05em;margin-top:7px;color:#686357}.card-bottom{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:9px}.card-bottom>a{display:inline-flex;justify-content:center;align-items:center;gap:12px;text-align:center;max-width:100%}.card-bottom>span{display:block;text-align:center}.card-bottom>a>span{flex-shrink:0}
@media(max-width:600px){.name-design{margin:25px 0 16px}.name-design h1{font-size:clamp(3.2rem,12vw,4.7rem);margin:0 0 13px}.barcode{height:40px;width:80%}.card-bottom>a{font-size:.8125rem;gap:10px}.barcode-caption{font-size:.5625rem}}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.name-design.barcode-label{margin:27px auto 23px;width:100%;padding:10px 9px 5px;background:#eeece5;border:1px solid #d4d0c5;border-radius:7px;box-shadow:0 2px 3px #25201412}.barcode-integrated{display:block;width:100%;height:auto}.artist-card .barcode-label h1{margin:0}.card-bottom{text-align:center;align-items:center;justify-content:center}.card-bottom>a{justify-content:center}
@media(max-width:600px){.name-design.barcode-label{margin:26px auto 23px;padding:8px 4px 4px}.artist-card{padding-left:20px;padding-right:20px}}

.name-design.original-barcode{margin:25px auto 23px;width:100%;padding:0;background:none;border:0;box-shadow:none;border-radius:10px;overflow:hidden}.original-barcode-image{display:block;width:100%;height:auto;aspect-ratio:1224/420}.artist-card .original-barcode h1{margin:0}

/* Six official platform links stay centered on small screens. */
.socials{gap:clamp(8px,2.4vw,17px);flex-wrap:wrap}.socials a{flex-shrink:0}
@media(max-width:380px){.socials a{width:40px;height:40px}.socials svg{width:23px;height:23px}}

/* Contain intrinsic SVG and video dimensions inside the mobile viewport. */
html{width:100%;overflow-x:hidden}
body{width:100%;min-width:0;overflow-x:hidden;isolation:isolate}
.landing{width:100%;grid-template-columns:minmax(0,1fr)}
.centerpiece{width:100%;max-width:580px;min-width:0;justify-self:center}
.artist-card,.name-design,.original-barcode-image{min-width:0;max-width:100%}
.original-barcode-image{width:100%;overflow:hidden}
.background{width:100%;height:100%;contain:strict}
.background iframe{width:max(100%,177.78vh);height:max(100%,56.25vw);min-width:0;min-height:0}
@supports(height:100dvh){.background iframe{width:max(100%,177.78dvh)}}
.contact-button{max-width:100%;overflow-wrap:anywhere}
@media(max-width:600px){.landing{padding-left:18px;padding-right:18px}.socials{gap:clamp(6px,2vw,12px)}.artist-card{padding-left:18px;padding-right:18px}}

/* Signature opening: original worn barcode, followed by a short upward reveal. */
dialog[open]{animation:panel-surface 700ms both}
.dialog-content{position:relative}
dialog[open] .dialog-content{animation:panel-reveal 360ms 340ms both cubic-bezier(.2,.8,.2,1)}
.dialog-brand{position:absolute;inset:0;display:grid;place-items:center;padding:28px;pointer-events:none}
.dialog-brand svg{width:44%;max-width:150px;height:auto;border-radius:3px;box-shadow:0 3px 12px #0002}
dialog[open] .dialog-brand{animation:brand-swipe 520ms both cubic-bezier(.2,.8,.2,1)}
dialog[open]::backdrop{animation:backdrop-reveal 240ms both}
@keyframes brand-swipe{0%{opacity:0;transform:translateY(16px) scale(.94);clip-path:inset(0 100% 0 0)}30%{opacity:1;transform:translateY(0) scale(1);clip-path:inset(0 0 0 0)}65%{opacity:1;transform:translateY(0) scale(1);clip-path:inset(0 0 0 0)}100%{opacity:0;transform:translateY(-20px) scale(1.02);clip-path:inset(0 0 100% 0)}}
@keyframes panel-reveal{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes panel-surface{0%,42%{background:transparent;box-shadow:none}100%{background:#faf8f1;box-shadow:0 20px 100px #0006}}
@keyframes backdrop-reveal{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){dialog[open],dialog[open] .dialog-content,dialog[open]::backdrop{animation:none}.dialog-brand{display:none}}