@font-face{font-family:"Big Shoulders Display";src:url(/assets/fonts/bigshoulders.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Literata";src:url(/assets/fonts/literata.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Literata";src:url(/assets/fonts/literata-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
@font-face{font-family:"Orbitron";src:url(/assets/fonts/orbitron.woff2) format("woff2");font-weight:400 900;font-display:swap}

:root{
  --crate:#03201e;
  --crate-2:#0e2828;
  --mist:#f1ece2;
  --mist-dim:#a9c2bd;
  --rust:#c4492b;
  --display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --text:"Literata",Georgia,serif;
  --gutter:clamp(20px,5vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--text);font-size:1.0625rem;line-height:1.65;background:var(--crate);color:var(--mist);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.icon{width:1.15em;height:1.15em;fill:currentColor;flex:none}

/* header and footer */
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 28px;padding:24px var(--gutter);background:var(--crate);color:var(--mist)}
.wordmark{font-family:"Orbitron",var(--display);font-weight:700;font-size:1.35rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.top nav{display:flex;flex-wrap:wrap;gap:6px 26px;font-size:.98rem}
.top nav a{text-decoration:none;opacity:.85}
.top nav a:hover,.top nav a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:6px}
.socials{display:flex;gap:16px}
.socials a{display:inline-flex;opacity:.8}
.socials a:hover{opacity:1}
footer{background:var(--crate);color:var(--mist-dim);padding:44px var(--gutter);display:grid;gap:18px;font-size:.95rem}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 22px}

/* a release in its own colours */
.release{--bg:#154544;--fg:var(--mist);--acc:#c6bb9d;--on:#0e2828;background:var(--bg);color:var(--fg);padding:clamp(56px,10vh,120px) var(--gutter)}
.light{--fg:#000;--soft:#3a3a3a}
.release .inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(40px,7vw,110px);align-items:center}
.when{font-size:1rem;opacity:.8}
.release h1,.release h2.title{font-family:var(--display);font-weight:900;font-size:clamp(3.2rem,7.2vw,6.4rem);line-height:.88;margin:.16em 0 .28em}
.kind{font-style:italic;font-size:1.15rem;margin-bottom:1em;opacity:.9}
.lede{max-width:44ch;margin-bottom:1.6em}
.release.light .lede,.release.light .kind{color:var(--soft)}

/* the record: sleeve with a vinyl that slides out and turns while the song plays */
.record{position:relative;display:block;width:min(62%,420px);aspect-ratio:1;border:0;background:none;cursor:pointer;padding:0}
.record .sleeve{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;box-shadow:0 24px 50px rgba(0,0,0,.42)}
.release.light .record .sleeve{box-shadow:0 0 0 1px #d6d6d6,0 24px 50px rgba(0,0,0,.12)}
.disc{position:absolute;z-index:1;inset:3%;transform:translateX(12%);transition:transform .9s cubic-bezier(.22,.8,.2,1)}
.vinyl{position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,#141414 0 1.4px,#222 1.4px 2.9px);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.vinyl .label{position:absolute;inset:33%;border-radius:50%;background-size:cover;background-position:center;box-shadow:0 0 0 3px #111}
.vinyl .label::after{content:"";position:absolute;inset:44%;border-radius:50%;background:#0b0b0b}
.sheen{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 210deg,transparent 0 8%,rgba(255,255,255,.09) 14%,transparent 22% 58%,rgba(255,255,255,.06) 64%,transparent 72%);pointer-events:none}
.record:hover .disc{transform:translateX(20%)}
.record.is-playing .disc{transform:translateX(56%)}
.record.is-playing .vinyl{animation:spin 1.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* player controls */
.player{display:flex;align-items:center;gap:16px;margin:0 0 1.6em;max-width:460px}
.play{display:inline-flex;align-items:center;gap:10px;padding:.62em 1.2em .62em .95em;border:2px solid var(--acc);background:var(--acc);color:var(--on);font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:.03em;cursor:pointer}
.play svg{width:1em;height:1em;fill:currentColor}
.play .i-pause{display:none}
.is-playing .play .i-play,.play.is-playing .i-play{display:none}
.is-playing .play .i-pause,.play.is-playing .i-pause{display:inline}
.time{font-size:.9rem;opacity:.8;font-variant-numeric:tabular-nums;white-space:nowrap}
.bar{flex:1;height:4px;background:color-mix(in srgb,var(--fg) 22%,transparent);position:relative;cursor:pointer;min-width:60px}
.bar span{position:absolute;inset:0 auto 0 0;width:0;background:var(--acc)}

/* service buttons in fixed order */
.services{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:.9em}
.svc{display:inline-flex;align-items:center;gap:9px;padding:.55em .95em;border:2px solid color-mix(in srgb,var(--fg) 40%,transparent);text-decoration:none;font-size:.95rem;line-height:1.2}
.svc:hover{border-color:var(--acc)}
.hint{font-size:.92rem;opacity:.75;max-width:44ch}
.presave{display:inline-flex;align-items:center;gap:10px;padding:.7em 1.3em;background:var(--acc);color:var(--on);font-family:var(--display);font-weight:800;font-size:1.2rem;text-decoration:none}

/* song page: story, credits, press, lyrics */
.story{background:var(--bg);color:var(--fg);padding:clamp(56px,10vh,110px) var(--gutter)}
.story .col{max-width:680px;margin:0 auto}
.story h2,.coverage h2,.page h2{font-family:var(--display);font-weight:900;font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:.95;margin:0 0 .5em}
.story p{margin-bottom:1.05em}
.release.light + .story p,.story.light p{color:#2c2c2c}
.credits{margin-top:2em;padding-top:1.2em;border-top:1px solid color-mix(in srgb,var(--fg) 25%,transparent);font-size:.95rem;opacity:.9}
.credits p{margin-bottom:.35em}
.coverage{background:var(--mist);color:#000;padding:clamp(56px,10vh,110px) var(--gutter)}
.coverage .col{max-width:980px;margin:0 auto}
.reviews{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 48px}
.reviews li{border-left:3px solid var(--rust);padding-left:16px}
.reviews .who{font-weight:500}
.reviews .where{font-size:.9rem;opacity:.65}
.reviews q{display:block;font-style:italic;margin:.35em 0 .4em;quotes:"“" "”"}
.reviews a{display:block;width:fit-content;font-size:.95rem;margin-top:.15em}
.lyrics{background:var(--crate-2);color:var(--mist);padding:clamp(48px,8vh,90px) var(--gutter)}
.lyrics .col{max-width:680px;margin:0 auto}
.lyrics h2{font-family:var(--display);font-weight:900;font-size:clamp(2rem,4vw,3rem);line-height:.95;margin-bottom:.2em}
.lyrics summary{font-family:var(--display);font-weight:900;font-size:clamp(2rem,4vw,3rem);cursor:pointer;list-style:none}
.lyrics summary::-webkit-details-marker{display:none}
.lyrics summary::after{content:" +";opacity:.6}
.lyrics details[open] summary::after{content:" −"}
.lyrics .text{white-space:pre-line;margin-top:1em;font-size:1.05rem;line-height:1.75}
.pager{background:var(--crate);display:flex;justify-content:space-between;gap:20px;padding:28px var(--gutter);font-size:.98rem}
.pager a{text-decoration:none}
.pager a span{display:block;font-family:var(--display);font-weight:800;font-size:1.5rem;text-decoration:underline;text-underline-offset:5px}

/* the shelf of all songs */
.shelf{padding:clamp(56px,10vh,110px) var(--gutter);background:var(--crate)}
.shelf .col{max-width:1180px;margin:0 auto}
.shelf h2{font-family:var(--display);font-weight:900;font-size:clamp(2.4rem,5vw,4rem);line-height:.95;margin-bottom:.7em}
.covers{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:34px 26px}
.covers a{text-decoration:none;display:block}
.covers img{aspect-ratio:1;object-fit:cover;width:100%;box-shadow:0 14px 30px rgba(0,0,0,.45)}
.covers .t{display:block;font-family:var(--display);font-weight:800;font-size:1.35rem;line-height:1.05;margin-top:12px}
.covers a:hover .t{text-decoration:underline;text-underline-offset:5px}
.covers .y{font-size:.92rem;color:var(--mist-dim)}

/* newsletter and support */
.together{display:grid;grid-template-columns:1fr 1fr}
.together.one{grid-template-columns:1fr}
.letter,.support{padding:clamp(56px,9vh,100px) var(--gutter)}
.letter{background:var(--rust);color:#fff}
.support{background:var(--mist);color:#000}
.page.paper + .together .support{background:#c6bb9d}
.letter h2,.support h2{font-family:var(--display);font-weight:900;font-size:clamp(2.2rem,4vw,3.2rem);line-height:.95;margin-bottom:.45em}
.letter p,.support p{max-width:40ch;margin-bottom:1.3em}
.letter form{display:flex;flex-wrap:wrap;gap:10px;max-width:460px}
.letter label{flex-basis:100%;font-size:.95rem}
.letter input{flex:1 1 220px;font:inherit;padding:.7em .9em;border:2px solid #fff;background:transparent;color:#fff;min-width:0}
.letter input::placeholder{color:rgba(255,255,255,.75)}
.btn-solid{display:inline-block;font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:.03em;padding:.65em 1.3em;border:2px solid currentColor;text-decoration:none;cursor:pointer}
.letter .btn-solid{background:#fff;color:#7a2414;border-color:#fff}
.letter .error{flex-basis:100%;margin:0}
.letter .sent{font-weight:700}
.support .btn-solid{background:#000;color:#fff;border-color:#000}

/* about and press pages */
.page{padding:clamp(56px,10vh,110px) var(--gutter)}
.page .col{max-width:1100px;margin:0 auto}
.page.paper{background:var(--mist);color:#000}
.page h1{font-family:var(--display);font-weight:900;font-size:clamp(3.4rem,8vw,6.6rem);line-height:.88;margin-bottom:.4em}
.prose{max-width:62ch}
.prose p{margin-bottom:1.05em}
.photos{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin:36px 0 56px}
.photos img{width:100%;height:100%;object-fit:cover}
.photos .wide{grid-column:1 / -1;aspect-ratio:2;object-position:50% 12%}
.members{list-style:none;margin:1.4em 0 0;max-width:520px}
.members li{display:flex;justify-content:space-between;gap:16px;padding:.55em 0;border-bottom:1px solid rgba(241,236,226,.2)}
.marianne{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:28px 0}
.marianne img{aspect-ratio:1;object-fit:cover}
.kit{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:12px 0 48px}
.press-song{margin-top:48px}
.press-song h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}

/* links page for the Instagram bio */
.links{max-width:520px;margin:0 auto;padding:36px 20px 56px}
.links .wordmark{display:block;text-align:center;margin-bottom:28px}
.newest{background:var(--bg);color:var(--fg);padding:22px;display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center;margin-bottom:22px}
.newest img{width:120px;aspect-ratio:1;object-fit:cover}
.newest h2{font-family:var(--display);font-weight:900;font-size:2rem;line-height:.95;margin:.1em 0 .4em}
.newest .presave,.newest .play{font-size:1.05rem}
.links .letter{padding:20px 22px;margin-bottom:22px}
.links .letter h2{font-size:1.7rem;margin-bottom:.3em}
.links .letter p{margin-bottom:.8em}
.links .letter input{flex-basis:140px;padding:.55em .8em}
.links .letter .btn-solid{padding:.5em 1.1em}
.songlist{list-style:none;margin-bottom:30px}
.songlist a{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(241,236,226,.15);text-decoration:none}
.songlist img{width:56px;height:56px;object-fit:cover}
.songlist b{font-family:var(--display);font-weight:800;font-size:1.3rem}
.songlist span{font-size:.9rem;color:var(--mist-dim)}
.profiles{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.profiles a{display:flex;align-items:center;gap:10px;padding:.7em .9em;border:1px solid rgba(241,236,226,.3);text-decoration:none}

@media (max-width:820px){
  .release .inner{grid-template-columns:1fr}
  .record{width:60%}
  .reviews,.together,.photos{grid-template-columns:1fr}
  .marianne{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pager{flex-direction:column}
  .top .socials{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .disc{transition:none}
  .record.is-playing .vinyl{animation:none}
}

.fact{font-size:1.2rem;line-height:1.5;max-width:52ch;margin:0 0 1.6em}
.shelf .fact{color:var(--mist-dim);margin-top:-.4em}
.faq{max-width:62ch}
.faq dt{font-weight:500;margin-top:1.2em}
.faq dd{margin:.25em 0 0}

.photos.duo{grid-template-columns:1.33fr 1fr;align-items:stretch}
.photos.duo img{aspect-ratio:auto;height:100%;object-fit:cover}
.bio-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:start}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover}
.portrait figcaption{font-size:.9rem;color:var(--mist-dim);margin-top:.5em}
@media (max-width:820px){.photos.duo,.bio-row{grid-template-columns:1fr}.portrait{max-width:360px}}

.together.one > div{padding-left:max(var(--gutter),calc((100% - 1180px)/2));padding-right:max(var(--gutter),calc((100% - 1180px)/2))}
.page + .together.one > div{padding-left:max(var(--gutter),calc((100% - 1100px)/2));padding-right:max(var(--gutter),calc((100% - 1100px)/2))}
.own{margin-top:2.6em;padding-top:1.6em;border-top:1px solid color-mix(in srgb,currentColor 25%,transparent)}
.own h3{font-family:var(--display);font-weight:900;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1;margin-bottom:.4em}
.own .btn-solid{background:var(--acc);color:var(--on);border-color:var(--acc)}
.kit .btn-solid{background:#000;color:#fff;border-color:#000}
.top{border-bottom:1px solid rgba(241,236,226,.14)}
footer{border-top:1px solid rgba(241,236,226,.14)}