@font-face{font-family:"Inria Serif";src:url(/fonts/inria-serif-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Inria Serif";src:url(/fonts/inria-serif-300i.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Albert Sans";src:url(/fonts/albert-sans.woff2) format("woff2");font-weight:300 700;font-display:swap}
:root{--ink:#14161f;--fog:#c9cede;--mist:#8c93aa;--lilac:#b9a3d8;--glass:rgba(232,236,246,.86)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);color:var(--fog);font:400 16px/1.5 "Albert Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* the window */
/* pan-y: a sideways wipe draws on the glass, an up/down swipe still scrolls the page on touch screens */
.pane{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;touch-action:pan-y pinch-zoom;cursor:crosshair;background:#262a3c}
.scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
#fog{position:absolute;inset:0;width:100%;height:100%;display:block}
.pane::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 14px #1a1d29, inset 0 0 0 15px rgba(255,255,255,.08), inset 0 0 120px rgba(10,12,20,.55)}

.deck{position:absolute;left:56px;top:46px;z-index:3;width:300px;color:var(--glass);text-shadow:0 1px 18px rgba(20,22,40,.35)}
.idx{font:300 112px/0.8 "Inria Serif",serif;letter-spacing:-.04em;display:flex;align-items:flex-start;gap:10px}
.idx .of{font:500 12px/1 "Albert Sans";letter-spacing:.24em;text-transform:uppercase;margin-top:12px;opacity:.7}
.track{font:300 italic 30px/1.1 "Inria Serif",serif;margin-top:22px}
.album{font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-top:10px;opacity:.75}
.album em{font-style:normal}
.ctl{display:flex;gap:22px;margin-top:22px;font-size:12px;letter-spacing:.22em;text-transform:uppercase}
.ctl button{padding:4px 0;border-bottom:1px solid transparent;opacity:.75;transition:opacity .2s,border-color .2s}
.ctl button:hover,.ctl .play{opacity:1;border-color:currentColor}

.rail{position:absolute;right:42px;top:46px;bottom:46px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:18px;color:var(--glass);pointer-events:none}
.rail-title{writing-mode:vertical-rl;font:500 12px/1 "Albert Sans";letter-spacing:.34em;text-transform:uppercase;opacity:.85}
.rail-line{flex:1;width:1px;background:rgba(232,236,246,.3);position:relative}
.rail-fill{position:absolute;left:-1px;top:0;width:3px;height:0;background:var(--glass);border-radius:2px;transition:height .4s linear}
.rail-time{font:300 15px/1 "Inria Serif";writing-mode:vertical-rl}

.mark{position:absolute;left:56px;bottom:46px;z-index:3;color:var(--glass);pointer-events:none;text-shadow:0 1px 14px rgba(20,22,40,.4)}
.mark h1{font:300 italic 22px/1.1 "Inria Serif",serif;letter-spacing:.01em;margin-bottom:12px}
.mark h1 span{font:500 10.5px/1 "Albert Sans";font-style:normal;letter-spacing:.28em;text-transform:uppercase;opacity:.75;margin-left:8px}
.spec{display:flex;gap:26px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;opacity:.8}
.down{position:absolute;right:96px;bottom:44px;z-index:3;font:300 italic 20px/1 "Inria Serif";text-decoration:none;color:var(--glass);border-bottom:1px solid rgba(232,236,246,.4);padding-bottom:4px}
.hint{position:absolute;left:50%;bottom:48px;transform:translateX(-50%);z-index:3;font:300 italic 15px/1 "Inria Serif";color:var(--glass);opacity:0;transition:opacity 1.2s;pointer-events:none;white-space:nowrap}
.hint.on{opacity:.8}

/* songs */
.songs{background:linear-gradient(#14161f,#1b1e2b 60%,#14161f);padding:120px 56px 100px}
.songs-in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:40px 90px}
.songs-head{grid-column:1/-1;max-width:780px}
.kicker{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--mist)}
.songs h2{font:300 64px/1.02 "Inria Serif",serif;letter-spacing:-.02em;color:#e9ebf3;margin:18px 0 22px}
.lede{font-size:18px;color:#a7adc2;max-width:600px}
.list{list-style:none;counter-reset:n;border-top:1px solid rgba(201,206,222,.18)}
.list li{border-bottom:1px solid rgba(201,206,222,.12)}
.list button{display:grid;grid-template-columns:44px 1fr auto;align-items:baseline;gap:12px;width:100%;text-align:left;padding:14px 0;transition:color .2s,padding .3s}
.list li .n{font:300 15px/1 "Inria Serif";color:var(--mist)}
.list li .t{font:300 22px/1.2 "Inria Serif"}
.list li .a{display:block;font:500 11px/1.6 "Albert Sans";letter-spacing:.2em;text-transform:uppercase;color:#7d8399;margin-top:2px}
.list li .d{font-size:13px;color:var(--mist);font-variant-numeric:tabular-nums}
.list button:hover{color:#fff;padding-left:8px}
.list li.on .t{font-style:italic;color:var(--lilac)}
.license{align-self:start;position:sticky;top:40px;color:#a7adc2;font-size:16px}
.license p+p{margin-top:18px}
.credit{font:300 italic 21px/1.35 "Inria Serif";color:#e9ebf3}
.covers{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:40px}
.covers img{width:100%;aspect-ratio:1;object-fit:cover;display:block;filter:grayscale(1) brightness(.75) contrast(1.05);transition:filter .5s}
.covers li:hover img{filter:none}
.covers span{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#7d8399;margin-top:8px;line-height:1.3}
.foot{display:flex;justify-content:space-between;gap:20px;padding:28px 56px max(40px,env(safe-area-inset-bottom));font-size:13px;color:#7d8399;border-top:1px solid rgba(201,206,222,.1)}

@media (max-width:700px){
  .pane{height:88svh;min-height:600px}
  .pane::after{box-shadow:inset 0 0 0 8px #1a1d29, inset 0 0 0 9px rgba(255,255,255,.08), inset 0 0 80px rgba(10,12,20,.55)}
  .scene{object-position:50% 50%}
  .deck{left:28px;top:30px;width:auto;right:70px}
  .idx{font-size:76px}
  .track{font-size:24px;margin-top:14px}
  .album{font-size:10px}
  .ctl{gap:18px;margin-top:14px;font-size:11px}
  .rail{right:20px;top:30px;bottom:30px;gap:12px}
  .rail-title{font-size:10px;letter-spacing:.28em}
  .mark{left:28px;bottom:30px;right:110px}
  .mark h1{font-size:18px;margin-bottom:8px}
  .mark h1 span{display:block;margin:6px 0 0}
  .spec{gap:14px;font-size:9.5px;letter-spacing:.22em}
  .spec span:nth-child(2){display:none}
  .down{right:58px;bottom:27px;font-size:17px}
  .hint{display:none}
  .songs{padding:80px 24px 70px}
  .songs-in{grid-template-columns:1fr;gap:36px}
  .songs h2{font-size:40px}
  .lede{font-size:16px}
  .list li .t{font-size:19px}
  .license{position:static}
  .covers{gap:6px}
  .covers span{display:none}
  .foot{flex-direction:column;padding:24px}
}

.start{position:absolute;left:50%;top:calc(50% + 15vh);transform:translateX(-50%);z-index:3;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--glass);opacity:.85;pointer-events:none;transition:opacity .8s;white-space:nowrap}
.start.off{opacity:0}
.copy{margin-top:16px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:3px;color:#e9ebf3}
button:focus-visible,a:focus-visible{outline:1px solid #e9ebf3;outline-offset:4px}
/* persistent player: a thin strip at the top centre once the window scrolls away */
.chip{position:fixed;left:50%;top:max(14px,env(safe-area-inset-top));z-index:20;transform:translateX(-50%);display:flex;align-items:center;gap:18px;padding:9px 18px;max-width:calc(100vw - 28px);
  background:rgba(28,31,44,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(201,206,222,.2);border-radius:2px;color:#e9ebf3;transition:opacity .4s,transform .4s}
.chip[hidden]{display:flex;opacity:0;pointer-events:none;transform:translate(-50%,-14px)}
.chip button{font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.8}
.chip button:hover{opacity:1}
.chip-txt{font:300 15px/1.2 "Inria Serif";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.chip-txt span{font-size:12px;color:var(--mist);margin-right:6px}
.nf{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(80% 60% at 50% 30%,#2a2e44,#14161f)}
.nf main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 24px;gap:16px}
.nf .idx{font:300 110px/1 "Inria Serif";color:rgba(233,235,243,.35)}
.nf h1{font:300 clamp(32px,5vw,54px)/1.05 "Inria Serif";color:#e9ebf3}
.nf main>p:not(.idx){color:#a7adc2}
.nf img{margin-top:24px;filter:grayscale(.6) brightness(.85)}
@media (max-width:700px){.start{top:calc(50% + 10vh);font-size:10px}.chip{gap:12px;padding:8px 12px}}

.status{min-height:1.5em;margin-top:14px;font:300 italic 15px/1.3 "Inria Serif",serif;opacity:.85}
.skip{position:absolute;left:12px;top:-60px;z-index:50;padding:10px 14px;background:#e9ebf3;color:#14161f;font-size:13px}
.skip:focus{top:12px}
.faq{padding:40px 56px 110px}
.faq-in{max-width:1240px;margin:0 auto}
.faq h2{font:300 44px/1.05 "Inria Serif",serif;color:#e9ebf3;margin-bottom:28px}
.faq details{max-width:820px;border-top:1px solid rgba(201,206,222,.14);padding:18px 0}
.faq details:last-child{border-bottom:1px solid rgba(201,206,222,.14)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;font:300 21px/1.3 "Inria Serif",serif;color:#e9ebf3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:"Albert Sans";color:var(--mist);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:10px;color:#a7adc2;max-width:700px}
@media (max-width:700px){.faq{padding:20px 24px 80px}.faq h2{font-size:32px}.faq summary{font-size:18px}.status{font-size:13px}}
@media (max-width:360px){.idx{font-size:64px}.track{font-size:21px}.deck{left:22px;right:56px}.mark{left:22px}}
@media (min-width:1700px){.deck{left:80px;top:64px}.mark{left:80px;bottom:64px}.idx{font-size:132px}.track{font-size:34px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}