/* Inner Peace Recordings — genererad av build.py, redigera inte för hand */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 500;font-display:swap;
  src:url('fonts/cg-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 500;font-display:swap;
  src:url('fonts/cg-latin-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --bg:#121212;
  --ink:#F5EFE8;
  --accent:#C8A882;
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --measure:64ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* ---- Startsidan ---- */
.hero{
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:3rem 1.5rem;text-align:center;gap:0;
}
.hero-logo{width:10rem;height:10rem;object-fit:contain;margin-bottom:2rem}
.hero-title{
  font-weight:300;font-size:clamp(2rem,6vw,3rem);
  letter-spacing:.03em;margin:0 0 .75rem;line-height:1.15;
}
.hero-tagline{font-size:1.125rem;color:rgb(245 239 232 / .6);margin:0 0 3rem}
.btn{
  display:inline-block;
  font-size:1.0625rem;letter-spacing:.25em;text-transform:uppercase;
  border:1px solid rgb(245 239 232 / .3);
  padding:.75rem 2.5rem;
  transition:background-color .25s ease, border-color .25s ease;
}
.btn:hover,.btn:focus-visible{background:rgb(245 239 232 / .1);border-color:rgb(245 239 232 / .55)}

/* ---- Gemensamt ---- */
.topbar{
  display:flex;align-items:center;justify-content:center;position:relative;
  padding:1.75rem 1.5rem 0;
}
.mark img{width:2.75rem;height:2.75rem;object-fit:contain;opacity:.9}
.back{
  position:absolute;left:1.5rem;top:50%;transform:translateY(calc(-50% + .875rem));
  font-size:.9375rem;letter-spacing:.06em;color:rgb(245 239 232 / .65);
  transition:color .2s ease;
}
.back:hover,.back:focus-visible{color:var(--ink)}
.wrap{max-width:76rem;margin:0 auto;padding:2rem 1.5rem 6rem}
.page-title{
  font-weight:300;font-size:clamp(1.75rem,4.5vw,2.25rem);
  text-align:center;letter-spacing:.02em;margin:1rem 0 3rem;
}

/* ---- Kollektivrutnätet ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:1.5rem}
.card{
  position:relative;overflow:hidden;border-radius:.5rem;
  background:#1a1a1a;aspect-ratio:16/9;display:block;
  transition:transform .35s ease;
}
.card:hover,.card:focus-visible{transform:translateY(-3px)}
.card-img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:opacity .35s ease}
.card:hover .card-img{opacity:1}
.card-body{
  position:absolute;inset:auto 0 0 0;padding:1.25rem 1.5rem;
  background:linear-gradient(to top,rgb(18 18 18 / .95) 15%,rgb(18 18 18 / 0));
}
.card-title{font-weight:300;font-size:1.25rem;margin:0;letter-spacing:.02em}
.card-tagline{font-style:italic;font-size:.9375rem;color:var(--accent);margin:.15rem 0 0}

/* ---- Kollektivsidan ---- */
.banner{border-radius:.5rem;overflow:hidden;margin-bottom:2.25rem}
.banner-img{width:100%;aspect-ratio:16/9;object-fit:cover}
.collective-head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.5rem 3rem;margin-bottom:3.5rem;
  padding-bottom:1.75rem;border-bottom:1px solid rgb(245 239 232 / .1);
}
.collective-title{
  font-weight:300;font-size:clamp(1.75rem,4.5vw,2.5rem);
  margin:0;letter-spacing:.02em;
}
.collective-bio{
  font-size:1rem;color:rgb(245 239 232 / .7);
  margin:0;flex:1 1 24rem;max-width:42ch;
  line-height:1.65;
}
.album{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:2.5rem;align-items:start}
.album-cover{width:100%;border-radius:.375rem;aspect-ratio:1;object-fit:cover}
.album-title{font-weight:300;font-size:1.375rem;margin:0;letter-spacing:.02em}
.album-meta{
  font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:.4rem 0 1.5rem;
}
.tracks{list-style:none;margin:0;padding:0}
.track{
  display:flex;gap:1.25rem;align-items:baseline;
  padding:.7rem 0;border-bottom:1px solid rgb(245 239 232 / .08);
}
.track:last-child{border-bottom:0}
.track-num{
  font-size:.8125rem;color:rgb(245 239 232 / .4);
  min-width:1.25rem;font-variant-numeric:tabular-nums;
}
.track-name{font-size:1.0625rem}

.listen{
  display:inline-block;margin-top:1.5rem;
  font-size:.875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);border-bottom:1px solid currentColor;
  padding-bottom:.15rem;opacity:.85;transition:opacity .2s ease;
}
.listen:hover,.listen:focus-visible{opacity:1}
.listen-artist{margin:-2rem 0 3.5rem}

@media (max-width:44rem){
  .listen-artist{margin:-2.5rem 0 3rem}
  .album{grid-template-columns:1fr;gap:1.5rem}
  .album-cover{max-width:15rem}
  .collective-head{flex-direction:column;gap:.75rem}
  .back{position:static;transform:none;display:block;margin-top:.75rem;text-align:center}
  .topbar{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ---- Intro (startsidan) ---- */
.intro{
  max-width:34rem;margin-top:3.5rem;padding-top:2.5rem;
  border-top:1px solid rgb(245 239 232 / .12);
}
.intro p{
  font-size:1.0625rem;color:rgb(245 239 232 / .7);
  margin:0 0 .85rem;line-height:1.65;
}
.intro p:last-child{margin-bottom:0}

/* ---- Sidfot ---- */
.foot{
  max-width:76rem;margin:5rem auto 0;padding:2rem 1.5rem 3rem;
  text-align:center;
}
.foot-mail{
  display:inline-block;font-size:1rem;letter-spacing:.03em;
  color:rgb(245 239 232 / .75);border-bottom:1px solid rgb(245 239 232 / .25);
  padding-bottom:.15rem;transition:color .2s ease,border-color .2s ease;
}
.foot-mail:hover,.foot-mail:focus-visible{color:var(--ink);border-color:rgb(245 239 232 / .6)}
.foot-line{
  font-style:italic;font-size:.9375rem;color:rgb(245 239 232 / .4);
  margin:1.25rem 0 .5rem;
}
.foot-legal{font-size:.8125rem;color:rgb(245 239 232 / .3);margin:0;letter-spacing:.02em}
.hero .foot{margin-top:auto;padding-bottom:2rem}