:root {
    --bg:#08090c;
    --soft:#111319;
    --line:rgba(255,255,255,.14);
    --text:#f0eee8;
    --muted:#9d9e9e;
    --lime:#d7ff66;
    --serif:Georgia,'Times New Roman',serif;
    --sans:Arial,Helvetica,sans-serif;
    --mono:'Courier New',monospace
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--sans);
    overflow-x:hidden
}

.grain {
    position:fixed;
    z-index:10;
    inset:0;
    pointer-events:none;
    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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")
}

.intro {
    position:fixed;
    z-index:20;
    inset:0;
    background:#08090c;
    display:grid;
    place-items:center;
    overflow:hidden;
    transition:opacity .9s ease,visibility .9s
}

.intro.exit {
    opacity:0;
    visibility:hidden
}

.intro-content {
    text-align:center;
    position:relative;
    z-index:2
}

.eyebrow,.label {
    font:10px var(--mono);
    letter-spacing:.16em;
    color:var(--muted);
    margin:0 0 20px
}

.wordmark {
    font-size:clamp(52px,8vw,120px);
    font-weight:800;
    letter-spacing:-.1em;
    display:flex;
    align-items:center;
    justify-content:center
}

.wordmark i,.mini-logo i {
    display:inline-block;
    width:.35em;
    height:.35em;
    border:2px solid var(--lime);
    border-radius:50%;
    margin:0 .12em;
    position:relative
}

.wordmark i:after,.mini-logo i:after {
    content:'';
    width:40%;
    height:40%;
    border-radius:50%;
    background:var(--lime);
    position:absolute;
    top:20%;
    left:20%
}

.intro-note {
    font:10px var(--mono);
    letter-spacing:.25em;
    color:var(--muted);
    margin:22px 0 42px
}

.enter {
    font:500 12px var(--sans);
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--bg);
    background:var(--lime);
    border:0;
    padding:17px 25px;
    cursor:pointer;
    transition:transform .25s
}

.enter:hover {
    transform:translateY(-4px)
}

.enter b {
    font-size:17px;
    margin-left:17px
}

.intro-orbit {
    position:absolute;
    border:1px solid rgba(215,255,102,.18);
    border-radius:50%;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) rotate(-25deg)
}

.orbit-one {
    width:80vw;
    height:25vw
}

.orbit-two {
    width:60vw;
    height:45vw;
    animation:spin 20s linear infinite
}

@keyframes spin {
    to {
        transform:translate(-50%,-50%) rotate(335deg)
    }

    
}

main {
    opacity:0;
    transition:opacity .8s
}

main.visible {
    opacity:1
}

.topbar {
    height:80px;
    padding:0 5.7vw;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:absolute;
    z-index:5;
    left:0;
    right:0
}

.mini-logo {
    font-size:15px;
    color:var(--text);
    text-decoration:none;
    font-weight:800;
    letter-spacing:-.11em
}

.mini-logo i {
    border-width:1px;
    font-size:inherit
}

.menu-button {
    display:none
}

.topbar nav {
    display:flex;
    gap:25px
}

.topbar nav a {
    font-size:10px;
    letter-spacing:.08em;
    color:#969798;
    text-decoration:none;
    transition:color .2s
}

.topbar nav a:hover,.topbar nav a.active {
    color:var(--lime)
}

.section {
    padding:120px 5.7vw
}

.hero {
    min-height:100vh;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    position:relative
}

.hero h1,.section h2 {
    font-size:clamp(45px,5.8vw,90px);
    line-height:.96;
    letter-spacing:-.065em;
    margin:0;
    font-weight:600
}

.hero h1 em,.section h2 em {
    font-family:var(--serif);
    font-weight:500
}

.hero-text {
    max-width:365px;
    line-height:1.7;
    font-size:14px;
    color:var(--muted);
    margin:28px 0
}

.text-link,.album-card a {
    font:11px var(--mono);
    letter-spacing:.06em;
    color:var(--text);
    text-decoration:none;
    border-bottom:1px solid var(--lime);
    padding-bottom:6px
}

.text-link span {
    color:var(--lime);
    margin-left:9px
}

.hero-art {
    height:min(65vh,540px);
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#202450,#07080e 60%,#b3e763);
    isolation:isolate
}

.hero-art:after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.15),transparent 60%);
    mix-blend-mode:overlay
}

.hero-art p {
    position:absolute;
    right:25px;
    bottom:20px;
    font:10px var(--mono);
    letter-spacing:.16em;
    z-index:2
}

.hero-disc {
    position:absolute;
    width:55%;
    aspect-ratio:1;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.7);
    left:24%;
    top:21%;
    box-shadow:inset 0 0 0 38px rgba(13,14,26,.7),inset 0 0 0 39px rgba(215,255,102,.7);
    z-index:1
}

.halo {
    position:absolute;
    border-radius:50%;
    filter:blur(25px);
    mix-blend-mode:screen
}

.halo-a {
    width:65%;
    height:55%;
    background:#7455ff;
    left:-10%;
    top:5%
}

.halo-b {
    width:52%;
    height:42%;
    background:#c9ff42;
    right:-10%;
    bottom:-5%
}

.scroll-cue {
    position:absolute;
    left:5.7vw;
    bottom:35px;
    font:9px var(--mono);
    letter-spacing:.2em;
    color:var(--muted);
    display:flex;
    gap:10px;
    align-items:center
}

.scroll-cue span {
    width:55px;
    height:1px;
    background:var(--muted)
}

.music-section {
    background:var(--soft)
}

.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:60px
}

.section-heading .eyebrow {
    width:34%
}

.player-shell {
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:30px 0;
    display:grid;
    grid-template-columns:200px 1fr 245px;
    gap:32px;
    align-items:center
}

.cover-art {
    aspect-ratio:1;
    background:linear-gradient(135deg,#c8fc58,#48789a 47%,#181c5c);
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:50px;
    font-weight:800;
    letter-spacing:-.1em
}

.cover-art:before {
    content:'';
    position:absolute;
    inset:20%;
    border:1px solid rgba(255,255,255,.8);
    border-radius:50%;
    box-shadow:0 0 0 24px rgba(6,9,27,.35)
}

.cover-art span,.cover-art small {
    position:relative;
    z-index:1
}

.cover-art small {
    position:absolute;
    bottom:12px;
    right:12px;
    font:9px var(--mono)
}

.now-playing h3 {
    font-size:32px;
    letter-spacing:-.05em;
    margin:4px 0
}

.now-playing p:last-child {
    color:var(--muted);
    font-size:12px;
    margin:0
}

.progress-row {
    display:flex;
    align-items:center;
    gap:12px;
    font:10px var(--mono);
    margin:25px 0
}

input[type=range] {
    accent-color:var(--lime);
    cursor:pointer
}

.progress-row input {
    flex:1
}

.controls {
    display:flex;
    align-items:center;
    gap:13px
}

.controls button,.lyrics-toggle {
    border:0;
    background:transparent;
    color:var(--text);
    font-size:16px;
    cursor:pointer
}

.controls .play {
    width:45px;
    height:45px;
    border-radius:50%;
    background:var(--lime);
    color:#08090c;
    font-size:14px
}

.controls button.active {
    color:var(--lime)
}

#next {
    transform:scaleX(-1)
}

#volume {
    width:70px
}

.track-description {
    border-left:1px solid var(--line);
    padding-left:27px;
    font-size:12px;
    line-height:1.7;
    color:var(--muted)
}

.track-description .label {
    margin-bottom:9px
}

.lyrics-toggle {
    font:10px var(--mono);
    color:var(--text);
    padding:10px 0 0
}

.lyrics-toggle span {
    color:var(--lime);
    font-size:15px
}

.lyrics {
    max-height:0;
    overflow:hidden;
    transition:max-height .4s;
    padding-top:0;
    font-family:var(--serif);
    font-size:14px;
    color:#ddd
}

.lyrics.open {
    max-height:160px;
    padding-top:10px
}

.track-list {
    margin-top:12px
}

.track {
    display:grid;
    grid-template-columns:45px 1fr 1fr 50px;
    gap:12px;
    padding:13px 0;
    border-bottom:1px solid var(--line);
    color:var(--muted);
    font-size:12px;
    cursor:pointer
}

.track:hover,.track.selected {
    color:var(--text)
}

.track.selected .track-num {
    color:var(--lime)
}

.offline-note {
    font-size:10px;
    color:#717277;
    margin-top:20px
}

.offline-note code {
    color:#a2a3a5
}

.albums-section {
    padding-top:150px
}

.album-grid {
    display:grid;
    grid-template-columns:1.35fr 1fr 1fr;
    gap:18px
}

.album-card .album-visual {
    aspect-ratio:1;
    margin-bottom:18px;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
    padding:20px;
    font-size:clamp(18px,2.1vw,31px);
    line-height:.85;
    font-weight:800;
    letter-spacing:-.07em
}

.album-card h3 {
    font-size:17px;
    margin:0 0 10px
}

.album-card .label {
    margin:0 0 7px
}

.album-card a {
    font-size:9px
}

.aurora {
    background:radial-gradient(circle at 70% 30%,#d6ff68,transparent 22%),linear-gradient(130deg,#7661f1,#101330 48%,#09aeb8)
}

.aurora:after {
    content:'';
    position:absolute;
    width:90%;
    height:35%;
    border:1px solid #e2ff8a;
    border-radius:50%;
    top:20%;
    left:-20%;
    transform:rotate(-22deg)
}

.pressure {
    background:linear-gradient(145deg,#0e0f11,#4f5661);
    color:#ff604f
}

.pressure:after {
    content:'';
    position:absolute;
    width:190%;
    height:25%;
    background:#ff604f;
    left:-40%;
    top:37%;
    transform:rotate(-42deg);
    mix-blend-mode:screen
}

.fragments {
    background:linear-gradient(145deg,#e9ded2,#6e849c 55%,#193044);
    color:#10151d
}

.fragments:after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(60deg,transparent 48%,#d4ff6e 49%,transparent 51%),linear-gradient(-45deg,transparent 68%,#1d3551 69%)
}

.video-section {
    padding-top:40px
}

.video-frame {
    min-height:570px;
    position:relative;
    overflow:hidden;
    background:linear-gradient(125deg,#15122c,#1a3033 45%,#061114);
    padding:60px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end
}

.video-frame:after {
    content:'';
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(255,255,255,.025) 5px)
}

.video-frame>* {
    position:relative;
    z-index:1
}

.video-frame h2 {
    max-width:550px
}

.video-frame>p:last-child {
    font-size:12px;
    color:var(--muted)
}

.video-glow {
    position:absolute;
    width:58%;
    aspect-ratio:1;
    border-radius:50%;
    background:#c8fb65;
    filter:blur(75px);
    right:-11%;
    top:-25%;
    opacity:.55
}

.video-play {
    position:absolute;
    right:55px;
    bottom:65px;
    z-index:2;
    width:72px;
    height:72px;
    border-radius:50%;
    border:1px solid var(--text);
    color:var(--text);
    background:transparent;
    cursor:pointer
}

.photo-section {
    padding-bottom:80px
}

.photo-grid {
    display:grid;
    grid-template-columns:1.1fr .8fr 1fr;
    grid-template-rows:230px 190px;
    gap:12px
}

.photo-grid div {
    background:#1c2024;
    position:relative;
    overflow:hidden
}

.photo-grid div:after {
    content:'';
    position:absolute;
    inset:0;
    opacity:.8
}

.photo-grid div:nth-child(1) {
    grid-row:span 2;
    background:linear-gradient(160deg,#ccf864,#152233 68%)
}

.photo-grid div:nth-child(1):after {
    background:radial-gradient(ellipse at 50% 15%,transparent 20%,#071019 21%,transparent 23%),linear-gradient(25deg,transparent 60%,#7652e4)
}

.photo-grid div:nth-child(2) {
    background:linear-gradient(135deg,#4d314d,#111218)
}

.photo-grid div:nth-child(2):after {
    background:linear-gradient(90deg,transparent 45%,#e8c6a4 46% 56%,transparent 57%)
}

.photo-grid div:nth-child(3) {
    grid-row:span 2;
    background:linear-gradient(145deg,#1d3541,#d6ff66)
}

.photo-grid div:nth-child(3):after {
    background:radial-gradient(circle at 50% 40%,#0a0c12 0 18%,transparent 19% 35%,#0a0c12 36% 37%,transparent 38%)
}

.photo-grid div:nth-child(4) {
    background:linear-gradient(45deg,#191b21,#a9bed1)
}

.about-section {
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:35% 1fr
}

.about-text h2 {
    max-width:700px
}

.about-text p {
    max-width:470px;
    color:var(--muted);
    font-size:15px;
    line-height:1.75;
    margin:30px 0
}

.contact {
    min-height:85vh;
    background:var(--lime);
    color:#0b0c0d;
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center
}

.contact .eyebrow {
    color:#263213
}

.contact h2 {
    font-size:clamp(56px,9vw,135px)
}

.contact-mail {
    color:#0b0c0d;
    text-decoration:none;
    font:clamp(16px,2vw,25px) var(--mono);
    border-bottom:1px solid #0b0c0d;
    width:max-content;
    margin-top:38px;
    padding-bottom:9px
}

.contact-mail span {
    margin-left:15px
}

footer {
    position:absolute;
    bottom:25px;
    left:5.7vw;
    right:5.7vw;
    display:flex;
    justify-content:space-between;
    font:9px var(--mono);
    letter-spacing:.14em
}

.reveal {
    opacity:0;
    transform:translateY(22px);
    transition:opacity .7s ease,transform .7s ease
}

.reveal.in-view {
    opacity:1;
    transform:none
}

@media(max-width:800px) {
    .topbar {
        height:65px;
        padding:0 6vw
    }

    .menu-button {
        display:block;
        background:transparent;
        border:0;
        width:30px
    }

    .menu-button span {
        display:block;
        height:1px;
        background:var(--text);
        margin:6px 0
    }

    .topbar nav {
        display:none;
        position:absolute;
        top:65px;
        left:0;
        right:0;
        background:#101217;
        padding:25px 6vw;
        flex-direction:column;
        gap:17px
    }

    .topbar nav.open {
        display:flex
    }

    .hero {
        grid-template-columns:1fr;
        padding-top:120px;
        gap:30px
    }

    .hero-art {
        height:300px
    }

    .section {
        padding:80px 6vw
    }

    .player-shell {
        grid-template-columns:120px 1fr;
        gap:20px
    }

    .track-description {
        grid-column:span 2;
        border-left:0;
        border-top:1px solid var(--line);
        padding:20px 0 0
    }

    .album-grid {
        grid-template-columns:1fr 1fr
    }

    .album-card.large {
        grid-column:span 2
    }

    .video-frame {
        min-height:440px;
        padding:35px
    }

    .about-section {
        grid-template-columns:1fr
    }

    .about-section>.eyebrow {
        margin-bottom:35px
    }

    .photo-grid {
        grid-template-rows:180px 130px
    }

    .video-play {
        right:30px;
        bottom:35px
    }

    .section-heading {
        display:block
    }

    .section-heading .eyebrow {
        width:auto;
        margin-bottom:25px
    }

    
}

@media(max-width:480px) {
    .wordmark {
        font-size:48px
    }

    .player-shell {
        grid-template-columns:1fr
    }

    .cover-art {
        width:160px
    }

    .track-description {
        grid-column:auto
    }

    .controls {
        gap:8px
    }

    .album-grid {
        grid-template-columns:1fr
    }

    .album-card.large {
        grid-column:auto
    }

    .photo-grid {
        grid-template-columns:1fr 1fr
    }

    .photo-grid div:nth-child(3) {
        grid-row:auto
    }

    .contact {
        min-height:70vh
    }

    .section h2,.hero h1 {
        font-size:48px
    }

    
}

/* Concert-uitstraling, gebaseerd op de aangeleverde Auroringo-referentie. */
:root {
    --bg:#09090a;
    --soft:#171111;
    --line:rgba(234,165,114,.22);
    --text:#f6e6d7;
    --muted:#a89082;
    --lime:#e5a16e
}

.intro {
    background:linear-gradient(rgba(6,6,7,.08),rgba(6,6,7,.48)),url('media/images/auroringo-startpagina.png') center/cover
}

.intro-content {
    align-self:end;
    margin-bottom:8vh
}

.intro-note {
    color:#f2c69c;
    text-shadow:0 1px 6px #000
}

.enter {
    box-shadow:0 5px 22px rgba(0,0,0,.45)
}

.hero-art {
    background:linear-gradient(rgba(15,5,3,.17),rgba(5,5,6,.3)),url('media/images/auroringo-startpagina.png') center/cover
}

.cover-art {
    background:linear-gradient(rgba(55,10,3,.2),rgba(12,6,5,.5)),url('media/images/auroringo-startpagina.png') center/cover
}

.aurora {
    background:linear-gradient(rgba(51,8,2,.12),rgba(13,6,4,.4)),url('media/images/auroringo-startpagina.png') center/cover
}

.video-frame {
    background:linear-gradient(rgba(10,4,2,.35),rgba(10,4,2,.7)),url('media/images/auroringo-startpagina.png') center/cover
}

.contact {
    background:linear-gradient(110deg,#bf5b2e,#eab078);
    color:#1a0b06
}

/* De Home-pagina volgt nu dezelfde warme live-concertstijl als de entree. */
.hero {
    display:flex;
    align-items:flex-end;
    min-height:100vh;
    padding:0 5.7vw 11vh;
    background:linear-gradient(90deg,rgba(5,4,4,.88) 0%,rgba(10,5,3,.52) 45%,rgba(10,3,1,.12) 100%),linear-gradient(0deg,rgba(7,4,3,.68),transparent 55%),url('media/images/auroringo-startpagina.png') center/cover
}

.hero-copy {
    position:relative;
    z-index:2;
    max-width:580px
}

.hero .eyebrow {
    color:#e8b082
}

.hero h1 {
    color:#f7e5d4;
    text-shadow:0 3px 18px rgba(0,0,0,.65)
}

.hero-text {
    color:#d8b9a3;
    text-shadow:0 2px 8px #000
}

.hero-art {
    display:none
}

.hero-disc,.halo {
    display:none
}

.hero .text-link {
    color:#f5d5bd;
    border-color:#d77c45
}

.scroll-cue {
    color:#e5b38f
}

.scroll-cue span {
    background:#e5b38f
}

@media(max-width:800px) {
    .hero {
        padding:0 6vw 12vh;
        background:linear-gradient(0deg,rgba(5,4,4,.84),rgba(7,3,2,.22)),url('media/images/auroringo-startpagina.png') center/cover
    }

    
}

.album-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:42px
}

.album-card .album-visual {
    aspect-ratio:1
}

.album-sixty .album-visual {
    background:linear-gradient(rgba(10,3,1,.08),rgba(10,3,1,.28)),url('media/images/album-sixty-years-later.png') center/cover
}

.album-vreugde .album-visual {
    background:linear-gradient(rgba(10,3,1,.08),rgba(10,3,1,.3)),url('media/images/album-vreugde-en-een-traan.png') center/cover
}

.album-card .album-visual span {
    font-size:clamp(21px,3vw,42px);
    line-height:.9;
    text-shadow:0 2px 12px #000
}

@media(max-width:800px) {
    .album-grid {
        grid-template-columns:1fr;
        gap:32px
    }

    
}

.about-long {
    max-width:760px
}

.about-long h2 {
    margin-bottom:36px
}

.about-long p {
    max-width:680px;
    margin:0 0 23px
}

.about-long strong {
    color:#f0c29e
}

.about-long blockquote {
    margin:42px 0 14px;
    padding:20px 0 20px 25px;
    border-left:2px solid var(--lime);
    font:italic 23px/1.35 var(--serif);
    color:#f3d2ba;
    max-width:620px
}

.about-long .welcome {
    font-size:16px;
    color:var(--text);
    font-weight:600
}

.cover-gallery {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px
}

.cover-tile {
    border:0;
    padding:0;
    background:transparent;
    color:var(--text);
    text-align:left;
    cursor:pointer;
    font:600 11px/1.3 var(--sans)
}

.cover-tile img {
    display:block;
    width:100%;
    aspect-ratio:1;
    object-fit:cover;
    margin-bottom:9px;
    transition:transform .25s ease,filter .25s ease;
    filter:saturate(.85)
}

.cover-tile:hover img {
    transform:translateY(-5px);
    filter:saturate(1.1);
    box-shadow:0 12px 24px rgba(0,0,0,.38)
}

@media(max-width:800px) {
    .cover-gallery {
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:12px
    }

    
}

@media(max-width:430px) {
    .cover-gallery {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    
}

.album-switcher {
    display:flex;
    gap:10px;
    border-bottom:1px solid var(--line);
    margin-top:42px
}

.album-choice {
    font:600 13px var(--sans);
    letter-spacing:-.02em;
    color:var(--muted);
    background:transparent;
    border:0;
    border-bottom:2px solid transparent;
    padding:0 0 14px;
    cursor:pointer;
    text-align:left
}

.album-choice+ .album-choice {
    margin-left:25px
}

.album-choice small {
    font:9px var(--mono);
    letter-spacing:.08em;
    margin-left:8px
}

.album-choice.active {
    color:var(--text);
    border-color:var(--lime)
}

@media(max-width:560px) {
    .album-switcher {
        gap:4px
    }

    .album-choice {
        font-size:11px
    }

    .album-choice+ .album-choice {
        margin-left:10px
    }

    .album-choice small {
        display:none
    }

    
}
.cover-art:before {
    display: none;
}

.lyrics-modal{position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:30px;background:rgba(4,3,3,.84);backdrop-filter:blur(11px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}.lyrics-modal.open{opacity:1;visibility:visible}.lyrics-dialog{position:relative;width:min(900px,100%);max-height:min(720px,90vh);overflow:auto;display:grid;grid-template-columns:minmax(230px,38%) 1fr;background:#15100e;border:1px solid rgba(229,161,110,.42);box-shadow:0 30px 80px #000}.lyrics-dialog>img{width:100%;height:100%;min-height:360px;object-fit:cover}.modal-copy{padding:52px 55px}.modal-copy h2{font-size:clamp(32px,4vw,54px);line-height:.95;letter-spacing:-.06em;margin:0 0 8px}.modal-copy>p:not(.label){margin:0;color:var(--muted);font-size:12px}.modal-lyrics{margin-top:38px;font:15px/1.7 var(--serif);color:#eedbc9;white-space:pre-wrap}.lyrics-empty{color:var(--muted);font:15px var(--sans)}.modal-close{position:absolute;right:14px;top:12px;z-index:1;width:36px;height:36px;border:1px solid rgba(255,255,255,.38);border-radius:50%;background:#120b08;color:#fff;font-size:25px;line-height:1;cursor:pointer}.modal-close:hover{background:var(--lime);color:#160b06}@media(max-width:650px){.lyrics-modal{padding:14px}.lyrics-dialog{grid-template-columns:1fr;max-height:93vh}.lyrics-dialog>img{height:230px;min-height:0}.modal-copy{padding:32px 25px}.modal-lyrics{margin-top:22px;font-size:17px}}