/* Readability revision requested by Marat after testing the live site, 13 Nov 2026. */
@font-face{font-family:Onest;src:url('assets/Onest.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
:root{--font-ui:Onest,Arial,sans-serif;--text-body:18px;--text-meta:14px;--text-label:14px;--text-muted:#e2e7ff;--line-soft:#ffffff40}
body{font-family:var(--font-ui);font-size:var(--text-body);font-weight:400;line-height:1.6}
button,input{font-family:var(--font-ui)}
.ui-icon{width:22px;height:22px;flex-shrink:0;display:block;pointer-events:none}
button:has(.ui-icon),a:has(>.ui-icon){display:inline-flex;align-items:center;justify-content:center;gap:10px}
.brand{font-size:30px;letter-spacing:-1px}
nav{font-size:16px;gap:28px}
.eyebrow{font-size:12px;letter-spacing:1px;line-height:1.6}
.intro-bottom p{font-size:18px;line-height:1.65}
.intro h1{font-weight:550}
.caption>span{font-size:24px;font-weight:600;letter-spacing:-.5px}
.caption small{font-size:12px;letter-spacing:.8px}
.photo-open{font-size:13px;letter-spacing:.2px}
.catalog-intro{font-size:18px;line-height:1.65;opacity:1}
.album-link{font-size:16px;min-height:48px}
.catalog-tools>label{font-size:14px;letter-spacing:0}
.catalog-tools input{font-size:20px;padding:14px 0}
.filters{gap:12px}
.filters button{font-size:15px;font-weight:500;min-height:48px;padding:12px 20px}
#catalog-count{font-size:14px;opacity:1;color:var(--text-muted);margin-bottom:12px}
.song-list article{display:grid;grid-template-columns:64px 48px minmax(0,1fr) auto;gap:18px;padding:24px 0;align-items:center;transition:background-color .18s}
.song-list article>img{width:64px;height:64px;border-radius:8px;object-fit:cover}
.song-list .list-play{width:48px;height:48px;border-radius:50%;border:1px solid #ffffff88}
.song-list .song-name{font-size:24px;font-weight:550;letter-spacing:-.45px;line-height:1.3;min-width:0;padding:8px 0}
.song-list .song-name small{font-size:14px;font-weight:450;letter-spacing:0;line-height:1.5;margin-top:7px;color:var(--text-muted);opacity:1}
.song-list .text-link{font-size:15px;font-weight:500;line-height:1.2;min-height:46px;padding:11px 16px;background:#ffffff12;border:1px solid var(--line-soft);border-radius:12px;white-space:nowrap}
.song-list .text-link .ui-icon{width:20px;height:20px}
@media(hover:hover){.song-list .text-link:hover{background:var(--paper);color:var(--blue)}}html[data-input-mode="keyboard"] .song-list .text-link:focus-visible{background:var(--paper);color:var(--blue)}
.show-all{font-size:17px;font-weight:500;min-height:56px;border-radius:12px;padding:16px}
.upcoming-mark{font-size:12px;letter-spacing:.7px}
.upcoming-list h3{font-size:30px;letter-spacing:-.6px;line-height:1.25}
.upcoming-list p{font-size:16px;line-height:1.6}
.upcoming-list a,.upcoming-note{font-size:15px;line-height:1.6;opacity:1}
.upcoming-preview-label{font-size:14px;opacity:1}
.upcoming-play{width:52px;height:52px}
.support p:not(.eyebrow),.about-copy{font-size:18px;line-height:1.75}
.support-link{font-size:18px;border-radius:12px;white-space:normal;text-align:left}
.support-link small{font-size:13px;opacity:1}
.social-links a{font-size:24px}
.social-links small{font-size:14px;opacity:1;line-height:1.5}
footer{font-size:13px;align-items:center}
.player{border-radius:16px;gap:14px;padding:14px 18px}
.player-title{width:210px}
.player-title strong{font-size:16px;font-weight:600;line-height:1.35}
.player-title span{font-size:12px;line-height:1.4}
.player .time{font-size:12px}
.player>a{font-size:15px;font-weight:500}
.player .small-control{width:44px;height:44px;padding:10px}
.play-control{width:50px;height:50px}
.volume-label{font-size:13px}
.story-copy #story-body{font-size:18px;line-height:1.8}
.story-copy .eyebrow,.release-note{font-size:14px}
.story-actions button,.story-actions a,.another,#close-story{font-size:16px;min-height:48px}
.story-actions a{justify-content:flex-start}
@media(max-width:1000px){.player-title{width:150px}.player{gap:10px}.song-list .song-name{font-size:23px}}
@media(max-width:600px){
 body{font-size:16px;padding-bottom:140px}
 .brand{font-size:25px}
 nav{font-size:14px;gap:14px}
 .eyebrow{font-size:11px;letter-spacing:.7px}
 .intro h1{font-size:clamp(40px,11vw,52px);line-height:1.08;letter-spacing:-2px}
 .intro-bottom p{font-size:16px;line-height:1.7}
 .caption>span{font-size:18px;line-height:1.2}
 .caption small{font-size:10px;line-height:1.4;letter-spacing:.4px}
 .catalog-intro{font-size:17px}
 .album-link{font-size:15px}
 .catalog-tools input{font-size:19px}
 .filters button{font-size:14px;padding:11px 15px;min-height:46px}
 #catalog-count{font-size:14px}
 .song-list article{grid-template-columns:56px minmax(0,1fr) 48px;gap:10px 13px;padding:22px 0}
 .song-list article>img{grid-column:1;grid-row:1;width:56px;height:56px}
 .song-list .song-name{grid-column:2;grid-row:1;font-size:21px;letter-spacing:-.35px;padding:0;line-height:1.3}
 .song-list .song-name small{font-size:14px;margin-top:6px;line-height:1.5}
 .song-list .list-play{grid-column:3;grid-row:1;width:48px;height:48px}
 .song-list .text-link{grid-column:2 / -1;grid-row:2;justify-self:start;padding:10px 14px;font-size:14px;min-height:44px;border-radius:10px}
 .song-list .text-link .ui-icon{width:19px;height:19px}
 .show-all{font-size:16px}
 .upcoming-list h3{font-size:29px}
 .upcoming-list p{font-size:16px}
 .upcoming-mark{font-size:12px}
 .upcoming-list a,.upcoming-note,.upcoming-preview-label{font-size:14px}
 .support p:not(.eyebrow),.about-copy{font-size:17px;line-height:1.75}
 .support-link{font-size:17px}
 .social-links a{font-size:23px}
 .social-links small{font-size:14px}
 .player{grid-template-columns:40px minmax(0,1fr) 40px 48px 40px;padding:10px;gap:7px;border-radius:14px}
 .player-title{width:auto;overflow:visible}
 .player-title strong{font-size:15px;line-height:1.3}
 .player-title span{font-size:12px;line-height:1.4}
 .player .small-control{width:40px;padding:8px}
 .play-control{width:48px;height:48px}
 #seek{height:28px;min-height:28px}
 .story-copy{padding-inline:22px}
 .story-copy #story-body{font-size:17px;line-height:1.8}
 .story-lead{font-size:23px}
 .story-copy h2{font-size:38px;line-height:1.12;letter-spacing:-1.2px}
 .story-actions{align-items:stretch;gap:14px}
 .story-actions button,.story-actions a{font-size:16px}
 .story-copy #close-story{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.song-list article{transition:none}}

@media(max-width:600px){.player>a{display:none}}
@media(max-width:420px){header{flex-wrap:wrap;gap:8px}header nav{width:100%;justify-content:space-between;gap:12px}header nav a{padding-block:8px}}

.support-link:has(>.ui-icon){display:grid;grid-template-columns:1fr auto;justify-content:start;text-align:left}.support-link small{grid-column:1;grid-row:2}.support-link>.ui-icon{grid-column:2;grid-row:1 / 3}

/* Whole-site usability pass: tap focus, direct listening and unobstructed hero CTA. */
html[data-input-mode="pointer"] :focus{outline:none!important}
html[data-input-mode="keyboard"] :is(button,a,input):focus-visible{outline:3px solid var(--coral);outline-offset:4px}
#story-title:focus{outline:none}
.intro-bottom{display:block;max-width:580px}
.round-link{width:auto;height:auto;min-height:50px;padding:12px 20px;display:inline-flex;gap:10px;margin-top:22px;font-size:16px;line-height:1.4;position:relative;z-index:5}
.song-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.catalog-full{font-size:15px;font-weight:500;line-height:1.3;min-height:46px;padding:11px 14px;border-radius:12px;background:var(--paper);color:var(--blue);border:1px solid var(--paper);white-space:nowrap}
.catalog-full:hover{background:var(--coral);border-color:var(--coral);color:#202435}
.catalog-full .ui-icon{width:19px;height:19px}
.caption small,.archive-stamp,.edition,.photo-open,.eyebrow,.upcoming-mark{font-size:12px}
.story-visual>span{font-size:12px;line-height:1.5}
footer{font-size:14px}
.story-copy{padding-top:76px}
.story-copy #close-story{top:12px;right:14px;border-radius:10px;min-height:48px;padding:10px 14px}
.story-actions{flex-wrap:wrap}
@media(min-width:601px) and (max-width:1100px){
 .song-list article{grid-template-columns:64px 48px minmax(0,1fr)}
 .song-actions{grid-column:3;justify-content:flex-start}
}
@media(max-width:600px){
 .song-actions{grid-column:1/-1;grid-row:2;justify-content:flex-end;gap:10px}
 .song-list .song-actions .text-link,.catalog-full{font-size:14px;min-height:46px;padding:10px 13px}
 .song-list .song-actions .text-link{justify-self:auto}
 .caption small{font-size:12px;letter-spacing:0}
 .eyebrow{font-size:12px}
 .round-link{font-size:16px;margin-top:20px;min-height:48px}
 .story-copy{padding-top:74px}
 .player-title span{font-size:12px}
}
@media(max-width:350px){.song-actions{justify-content:stretch}.song-actions>*{flex:1;padding-inline:8px!important}.song-actions .ui-icon{width:17px;height:17px}}

.paper-note span{font-size:12px;letter-spacing:.5px}
.about-copy a{min-height:48px;align-items:center}
html[data-input-mode="keyboard"] :is(.story-copy,.about,.socials,.player,.upcoming) :is(button,a,input):focus-visible{outline-color:var(--blue)}
#volume{min-height:32px}
dialog{overscroll-behavior:contain;max-height:calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
@media(max-width:600px){.player{grid-template-columns:40px minmax(0,1fr) 44px 48px 44px;gap:5px}.player .small-control{width:44px}#seek{height:40px;min-height:40px}.player{bottom:max(8px,env(safe-area-inset-bottom))}body{padding-bottom:160px}}

.round-link{border-radius:999px}

footer{flex-wrap:wrap;gap:18px}footer a{font-size:14px;min-height:44px;display:inline-flex;align-items:center}
.privacy-page{padding:32px 24px 80px}.privacy-page main{max-width:760px;margin:auto}.privacy-page h1{font-size:clamp(32px,6vw,56px);margin:40px 0 24px}.privacy-page h2{font-size:24px;margin:32px 0 16px}.privacy-page p{font-size:18px;line-height:1.65;margin:16px 0}.privacy-page a{min-height:44px;display:inline-flex;align-items:center;text-decoration:underline}

/* Keep the listening destination visible on phones, beside the artist name. */
@media(max-width:600px){
 header{position:relative;flex-wrap:wrap;gap:12px;padding-block:20px}
 header nav{width:100%;justify-content:flex-start;gap:24px}
 header nav a{min-height:44px;padding-block:8px}
 header nav .nav-platforms{position:absolute;top:20px;right:0;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 12px;border:1px solid #ffffff77;border-radius:999px;font-size:14px;line-height:1.3}
 header nav .nav-platforms .ui-icon{width:18px;height:18px}
}
@media(max-width:360px){header .brand{font-size:22px;gap:8px}header .artist-mark{width:28px;height:28px}header nav .nav-platforms{font-size:13px;padding-inline:10px}}

.hero-listen{display:flex;align-items:center;gap:14px;max-width:430px;margin-top:24px;padding:14px;background:var(--paper);color:#202435;border-radius:16px;position:relative;z-index:5}
.hero-listen>img{width:56px;height:56px;object-fit:cover;border-radius:8px}.hero-listen>div{flex:1;min-width:0}.hero-listen strong{display:block;font-size:19px;line-height:1.3}.hero-listen>div>span{font-size:13px;line-height:1.4;display:block;margin-top:5px;color:#57627a}.hero-play{background:var(--blue);color:white;border-radius:999px;min-height:48px;padding:12px 16px;font-size:15px}
#platforms{max-width:460px;width:92vw;padding:66px 26px 26px;border-radius:20px}#platforms h2{font-size:30px;line-height:1.2;margin:14px 0}#platforms>p:not(.eyebrow){font-size:16px;line-height:1.6}#close-platforms{position:absolute;top:14px;right:16px;background:none;min-height:44px;font-size:15px}#platform-options{display:grid;gap:12px;margin-top:24px}#platform-options>a{display:flex;justify-content:space-between;align-items:center;border:1px solid #b8c4e8;border-radius:12px;min-height:52px;padding:12px 16px;font-size:17px;color:#2348ec}#platform-options>a:hover{background:#e8edff}.platforms-foot{color:#626d80}
@media(max-width:600px){
 .archive{padding-top:24px}.intro h1{font-size:40px;line-height:1.1;letter-spacing:-1.9px;margin:18px 0}.intro-bottom p{font-size:16px;line-height:1.6}.hero-listen{margin-top:18px;padding:12px;gap:10px}.hero-listen strong{font-size:18px}.hero-listen>div>span{font-size:12px}.hero-listen>img{width:48px;height:48px}.hero-play{font-size:14px;padding-inline:12px}.round-link{margin-top:12px;min-height:44px;font-size:14px;padding:8px 14px}
 .archive-space{display:flex;gap:14px;height:auto;margin-top:22px;padding:12px 2px 24px;align-items:flex-start}.archive-space .fragment{position:relative;flex:1;min-width:0;width:0;left:auto;right:auto;top:auto;margin:0;padding:5px 5px 0}.archive-space .trust{transform:rotate(-3deg)}.archive-space .remember{transform:rotate(3deg)}.archive-space .say{transform:rotate(-2deg)}.archive-space .photo{height:135px}.archive-space .caption{padding:10px 2px;gap:7px}.archive-space .caption>span{font-size:16px;line-height:1.3}.archive-space .caption small{font-size:12px;line-height:1.3}.archive-space .note-two{display:none}
 .player>a#full-track{display:inline-flex;grid-column:1/-1;justify-content:center;margin:0;padding:7px 10px;min-height:40px;font-size:14px;border-top:1px solid #d8dce8}.player>a#full-track[hidden]{display:none}body{padding-bottom:200px}.privacy-page{padding-bottom:80px}
}
@media(max-width:360px){.hero-listen>img{display:none}.archive-space .photo{height:115px}.archive-space{gap:10px}.archive-space .caption>span{font-size:15px}}

.hero-play span{color:inherit;font-size:14px;line-height:1.4;margin:0}.player[hidden]{display:none!important}body:not(.has-player){padding-bottom:36px}#platforms :focus-visible{outline:3px solid var(--blue);outline-offset:4px}

@media(max-width:600px){.archive-space .caption small{display:none}}

/* Public footer: visitor information, not operator terminology. */
@media(min-width:601px) and (max-width:900px){.archive-space .archive-stamp,.archive-space .note-two{display:none}}
.privacy-page h1{overflow-wrap:anywhere;hyphens:auto;font-size:clamp(28px,5vw,48px);line-height:1.15}
footer{align-items:center;gap:12px 24px;padding-block:22px;font-size:14px}
footer .footer-links{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px 24px;font-size:14px}
footer .footer-links a{padding:6px 0;min-height:44px;font-size:14px}
footer .footer-top .ui-icon{width:18px;height:18px}
@media(max-width:600px){footer{display:grid;grid-template-columns:1fr;gap:4px;margin-bottom:0;padding-block:18px}footer .footer-links{width:100%;justify-content:space-between;gap:8px 16px}}