/* lofisongs.com · "The Song Wall" */
@font-face{font-family:"Mona Sans";src:url(/fonts/monasans.woff2) format("woff2");font-weight:200 900;font-stretch:75% 125%;font-display:swap}
@font-face{font-family:"Red Hat Mono";src:url(/fonts/redhatmono.woff2) format("woff2");font-weight:400 500;font-display:swap}
:root{--alu:#D4D4CF;--alu2:#C6C7C1;--paper:#EBEBE7;--ink:#121211;--mute:#4A4A46;--line:rgba(18,18,17,.22);--red:#E0241F;--redt:#B3140F;
--sans:"Mona Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Red Hat Mono",ui-monospace,Menlo,monospace;--pad:clamp(16px,2.4vw,36px);--ease:cubic-bezier(.625,.05,0,1)}
*{box-sizing:border-box}html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--alu);color:var(--ink);font:400 16px/1.55 var(--sans);font-stretch:100%;padding-bottom:84px;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}img{max-width:100%;display:block}button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;z-index:99;background:var(--ink);color:var(--alu);padding:10px 14px;text-decoration:none}.skip:focus{top:8px}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-transform:uppercase}
.wrap{padding:0 var(--pad)}
/* header: hairline columns */
.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--alu) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:grid;grid-template-columns:1.2fr 2fr 1fr;align-items:center;gap:16px;height:52px}
.mark{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:800;font-stretch:118%;letter-spacing:-.02em;font-size:17px}
.mark svg{width:22px;height:22px;flex:none}
.nav{display:flex;gap:clamp(12px,2vw,30px);font-family:var(--mono);font-size:12px;text-transform:uppercase}
.nav a{text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}.nav a:hover{border-color:var(--ink)}
.count{justify-self:end;font-family:var(--mono);font-size:12px;text-transform:uppercase;display:flex;gap:8px;align-items:center}
.dot{width:8px;height:8px;border-radius:50%;background:var(--red);display:inline-block}
.playing .dot{animation:blink 1.2s steps(2) infinite}@keyframes blink{50%{opacity:.25}}
/* hero */
.hero{border-bottom:1px solid var(--line)}
.word{display:flex;justify-content:space-between;margin:0;padding:clamp(18px,3vw,40px) 0 0;font-weight:900;font-stretch:125%;line-height:.78;letter-spacing:-.035em;font-size:min(14.5vw,268px);text-transform:uppercase;user-select:none;overflow:hidden}
.word span{display:inline-block;transition:font-variation-settings .12s linear;font-variation-settings:"wdth" 125,"wght" 900}
.word .o{color:var(--red)}
.hero-g{display:grid;grid-template-columns:repeat(12,1fr);gap:24px var(--pad);padding:clamp(22px,3vw,44px) 0 clamp(28px,4vw,56px);border-top:1px solid var(--line);margin-top:clamp(16px,2vw,28px)}
.state{grid-column:1/9;margin:0;font-size:clamp(26px,3.6vw,58px);line-height:1;text-transform:uppercase;font-weight:300;font-stretch:88%;letter-spacing:-.01em;text-align:justify;text-align-last:left}
.state b{font-weight:800;font-stretch:100%}.state em{font-style:normal;color:var(--redt)}
.hero-side{grid-column:9/13;display:flex;flex-direction:column;gap:18px;justify-content:space-between}
.hero-side p{margin:0;color:var(--mute);max-width:36ch}
.ctas{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--ink);background:transparent;padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:600;font-size:15px;transition:background .25s var(--ease),color .25s var(--ease)}
.btn:hover{background:var(--ink);color:var(--alu)}.btn.main{background:var(--ink);color:var(--alu)}.btn.main:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn svg{width:12px;height:12px;fill:currentColor}.btn.sm{padding:8px 14px;font-size:14px}
.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.facts li{padding:10px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;text-transform:uppercase}.facts b{display:block;font-family:var(--sans);font-size:26px;font-weight:800;font-stretch:115%;letter-spacing:-.02em;text-transform:none}
/* section heads */
.sec{border-bottom:1px solid var(--line);padding:clamp(40px,6vw,96px) 0}
.sec-h{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--pad);align-items:end;margin-bottom:clamp(22px,3vw,40px)}
.sec-h .no{grid-column:1/3;font-family:var(--mono);font-size:12px}
.sec-h h2{grid-column:3/9;margin:0;font-size:clamp(34px,5.6vw,92px);line-height:.88;font-weight:850;font-stretch:112%;letter-spacing:-.035em;text-transform:uppercase}
.sec-h p{grid-column:9/13;margin:0;color:var(--mute)}
/* wall */
.tools{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:12px 0;margin-bottom:24px;position:sticky;top:52px;background:var(--alu);z-index:5}
.search{flex:1 1 260px;display:flex;align-items:center;gap:10px}
.search input{flex:1;min-width:0;border:0;background:transparent;font:500 20px var(--sans);padding:6px 0;color:var(--ink);border-bottom:1px solid transparent}
.search input:focus{outline:none;border-bottom-color:var(--red)}.search input::placeholder{color:var(--mute)}
.seg{display:inline-flex;border:1px solid var(--ink);border-radius:999px;padding:2px}
.seg button{border:0;background:transparent;border-radius:999px;padding:6px 14px;font-family:var(--mono);font-size:12px;text-transform:uppercase}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--alu)}
.matches{font-family:var(--mono);font-size:12px;text-transform:uppercase;color:var(--mute);min-width:9ch}
.wall{margin:0;font-size:clamp(20px,2.7vw,44px);line-height:1.08;text-transform:uppercase;font-weight:350;font-stretch:84%;letter-spacing:-.012em;text-align:justify;hyphens:none}
.wall .wi{white-space:nowrap}
.wall .w{display:inline;white-space:normal;max-width:100%;border:0;background:none;padding:0;margin:0;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:inherit;color:var(--ink);transition:color .15s}
.wall .w:hover{color:var(--red)}
.wall .w.on{color:var(--red);font-weight:800}
.wall .w.dim{color:rgba(18,18,17,.16)}
.wall .s{color:var(--red);font-weight:300;padding:0 .22em;opacity:.8}
.wall .yr{font-family:var(--mono);font-size:.3em;font-weight:500;vertical-align:1.1em;letter-spacing:0;color:var(--mute);padding:0 .5em 0 0;text-decoration:none}.wall .yr:hover{color:var(--redt);text-decoration:underline}
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:22px 16px}
.tiles button{all:unset;cursor:pointer;display:block;width:100%}
.tiles img{width:100%;aspect-ratio:1;height:auto;background:var(--alu2)}
.tiles b{display:block;margin-top:8px;font-weight:700;line-height:1.15}.tiles span{font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--mute)}
.tiles button:focus-visible{outline:2px solid var(--red);outline-offset:3px}.tiles .on b{color:var(--redt)}
.list{width:100%;border-collapse:collapse}
.list th{font-family:var(--mono);font-size:11px;font-weight:500;text-transform:uppercase;text-align:left;color:var(--mute);padding:8px 8px 8px 0;border-bottom:1px solid var(--ink)}
.list td{padding:9px 8px 9px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.list td.n,.list td.t{font-family:var(--mono);font-size:12px;color:var(--mute);white-space:nowrap}
.list button.ti{all:unset;cursor:pointer;font-weight:650}.list button.ti:hover,.list tr.on button.ti{color:var(--redt)}
.list a.dl{font-family:var(--mono);font-size:11px;text-decoration:none;border:1px solid var(--line);padding:3px 7px;border-radius:99px}.list a.dl:hover{border-color:var(--ink)}
.empty{font-size:20px;color:var(--mute)}
/* deck */
.deck-g{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--pad);align-items:center}
.deck{grid-column:2/7;position:relative;aspect-ratio:4/5;max-width:460px;width:100%;justify-self:center}
.card{position:absolute;inset:0;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 18px 40px -26px rgba(0,0,0,.45);transition:transform .7s var(--ease),opacity .7s var(--ease)}
.card img{width:100%;aspect-ratio:1;height:auto;border-radius:6px}
.card b{font-size:clamp(20px,2vw,28px);line-height:1.05;font-weight:800;font-stretch:110%;letter-spacing:-.02em}
.card span{font-family:var(--mono);font-size:12px;text-transform:uppercase;color:var(--mute)}
.card:nth-child(1){transform:rotate(-6deg) translate(-14px,10px)}.card:nth-child(2){transform:rotate(4deg) translate(12px,4px)}.card:nth-child(3){transform:rotate(-2deg)}
.card.top{transform:rotate(0)}.card.gone{transform:translate(120%,-8%) rotate(18deg);opacity:0}
.deck-side{grid-column:8/12}
.deck-side h3{font-size:clamp(28px,3.4vw,52px);line-height:.95;margin:0 0 14px;font-weight:300;font-stretch:88%;text-transform:uppercase}.deck-side h3 b{font-weight:850;font-stretch:105%}
.deck-side p{color:var(--mute);margin:0 0 20px;max-width:44ch}
/* records */
.recs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:28px 18px}
.recs a{text-decoration:none;display:block}.recs img{width:100%;height:auto;aspect-ratio:1;transition:transform .45s var(--ease)}
.recs a:hover img{transform:translateY(-6px)}
.recs b{display:block;margin-top:9px;font-weight:750;line-height:1.1}.recs span{font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--mute)}
/* free */
.free{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.free>div{padding:22px var(--pad) 26px 0;border-right:1px solid var(--line)}.free>div+div{padding-left:var(--pad)}.free>div:last-child{border-right:0}
.free h3{margin:0 0 10px;font-size:22px;font-weight:800;font-stretch:110%;text-transform:uppercase;letter-spacing:-.01em}
.free ul{margin:0;padding-left:18px}.free p{margin:0;color:var(--mute)}.free .no h3{color:var(--redt)}
.credit{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px;padding:16px;border:1px dashed var(--ink);border-radius:12px}
.credit code{font-family:var(--mono);font-size:14px;flex:1 1 300px}
/* guide + faq */
.guide{display:grid;grid-template-columns:repeat(3,1fr);gap:28px var(--pad)}
.guide h3{margin:0 0 8px;font-size:20px;font-weight:800;line-height:1.15}.guide p{margin:0 0 10px;color:var(--mute)}
.faq details{border-top:1px solid var(--line);padding:16px 0}.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-size:clamp(18px,1.8vw,24px);font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";font-weight:300;color:var(--red)}.faq details[open] summary:after{content:"–"}
.faq p{margin:10px 0 0;max-width:72ch;color:var(--mute)}
/* footer */
.foot{padding:48px 0 30px}.foot .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
.foot h4{font-family:var(--mono);font-size:12px;font-weight:500;text-transform:uppercase;margin:0 0 10px;color:var(--mute)}
.foot ul{list-style:none;margin:0;padding:0}.foot li{margin:5px 0}.foot a{text-decoration:none}.foot a:hover{color:var(--redt)}.foot p{color:var(--mute);margin:10px 0 0;max-width:52ch}
.foot .big{grid-column:1/-1;font-weight:900;font-stretch:125%;font-size:min(9.8vw,180px);line-height:.8;letter-spacing:-.04em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px var(--ink);margin-top:20px;user-select:none}
/* player */
.pbar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--ink);color:var(--alu);display:grid;grid-template-columns:minmax(0,1.4fr) auto minmax(0,2fr) auto;gap:18px;align-items:center;padding:10px var(--pad);min-height:72px}
.pb-now{display:flex;gap:12px;align-items:center;min-width:0}.pb-now img{width:50px;height:50px;flex:none}
.pb-now div{min-width:0}.pb-now b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.pb-now span{display:block;font-family:var(--mono);font-size:11px;text-transform:uppercase;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-ctl{display:flex;gap:6px;align-items:center}
.ib{width:38px;height:38px;border-radius:50%;border:1px solid rgba(212,212,207,.3);background:transparent;display:grid;place-items:center;color:var(--alu)}
.ib svg{width:12px;height:12px;fill:currentColor}.ib:hover{border-color:var(--alu)}
.ib.pp{width:46px;height:46px;background:var(--alu);color:var(--ink)}.ib.pp:hover{background:var(--red);color:#fff;border-color:var(--red)}
.ib[aria-pressed=true]{background:var(--red);border-color:var(--red);color:#fff}
.pb-seek{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px}
.pb-seek input{flex:1;accent-color:var(--red);min-width:60px}
.pb-x a{font-family:var(--mono);font-size:11px;text-transform:uppercase;text-decoration:none;border:1px solid rgba(212,212,207,.35);padding:6px 10px;border-radius:99px}.pb-x a:hover{border-color:var(--alu)}
.toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,20px);opacity:0;background:var(--paper);color:var(--ink);padding:10px 16px;border-radius:99px;font-size:14px;z-index:70;transition:.3s var(--ease);pointer-events:none;border:1px solid var(--line)}.toast.show{opacity:1;transform:translate(-50%,0)}
/* album pages */
.crumbs{font-family:var(--mono);font-size:12px;text-transform:uppercase;padding-top:24px;color:var(--mute)}.crumbs a{text-decoration:none}
.alb{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--pad);padding:24px 0 60px}
.alb .cv{grid-column:1/6}.alb .cv img{width:100%;height:auto;aspect-ratio:1}
.alb .tx{grid-column:6/13}
.alb h1{margin:0 0 12px;font-size:clamp(42px,7vw,120px);line-height:.85;font-weight:900;font-stretch:118%;letter-spacing:-.04em;text-transform:uppercase}
.alb .lede{color:var(--mute);max-width:56ch}
.tl{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--ink)}
.tl li{display:grid;grid-template-columns:34px 1fr auto auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.tl .ix,.tl .du{font-family:var(--mono);font-size:12px;color:var(--mute)}.tl b{font-weight:700}
.tl audio{display:block;width:100%;height:34px;margin-top:6px}
.tl a.dl{font-family:var(--mono);font-size:11px;text-decoration:none;border:1px solid var(--line);padding:3px 8px;border-radius:99px}
.more{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
/* responsive */
@media (max-width:1100px){.recs{grid-template-columns:repeat(4,1fr)}.guide{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
.top .wrap{grid-template-columns:1fr auto}.nav{display:none}
.hero-g,.sec-h,.deck-g,.alb{grid-template-columns:1fr}
.state,.hero-side,.sec-h .no,.sec-h h2,.sec-h p,.deck,.deck-side,.alb .cv,.alb .tx{grid-column:1/-1}
.state{text-align:left}
.deck{max-width:340px}
.recs{grid-template-columns:repeat(3,1fr);gap:20px 12px}
.free{grid-template-columns:1fr}.free>div,.free>div+div{padding:20px 0;border-right:0;border-bottom:1px solid var(--line)}
.guide{grid-template-columns:1fr}.foot .wrap{grid-template-columns:1fr 1fr}.foot .wrap>div:first-child{grid-column:1/-1}
.pbar{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:8px 12px;min-height:66px}.pb-seek{grid-column:1/-1;order:3}.pb-x{display:none}
.pbar .pb-seek{position:absolute;left:0;right:0;top:-12px;padding:0 6px}.pbar .pb-seek span{display:none}
.list .al,.list .yr{display:none}
.tiles{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.wall{font-size:clamp(19px,5.6vw,30px);text-align:left}.wall .wi{white-space:normal}
}
@media (max-width:420px){.recs{grid-template-columns:repeat(2,1fr)}.pb-ctl .ib:not(.pp):not(#pb-next){display:none}}

body:not(:has(#pbar)){padding-bottom:0}