/* Genetic Music – "cassette underground": photocopy paper, toner black, reflex blue, Dymo tape. */
@font-face{font-family:"Anton";src:url(fonts/anton.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(fonts/courierprime-400.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(fonts/courierprime-700.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(fonts/courierprime-400i.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"VT323";src:url(fonts/vt323.woff) format("woff");font-weight:400;font-display:swap}

:root{
  --paper:#ebe6d8; --paper-2:#f1ede2; --paper-3:#e1dbc9;
  --ink:#1a1917; --ink-2:#4f4b43;
  --blue:#23439c; --blue-dk:#1c3680; --blue-deep:#162c6a;
  --tape:#1b1b1b; --tape-text:#f2efe6;
  --display:"Anton","Arial Narrow",Impact,sans-serif;
  --mono:"Courier Prime","Courier New",Courier,monospace;
  --digits:"VT323","Courier New",monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:17px;line-height:1.55}
img{max-width:100%;height:auto}
a{color:var(--blue)}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
.wrap{max-width:1320px;margin:0 auto;padding-left:40px;padding-right:40px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:16px;z-index:10;background:var(--paper-2);padding:10px 14px;border:2px solid var(--ink)}
.digits{font-family:var(--digits);letter-spacing:.06em;line-height:1;background:var(--ink);color:var(--paper);padding:2px 6px;display:inline-block}
.kicker{font-size:13px;letter-spacing:.18em;text-transform:uppercase}
.big-title{font-family:var(--display);font-size:64px;line-height:.92;text-transform:uppercase}
.mid-title{font-family:var(--display);font-size:40px;line-height:1;text-transform:uppercase;margin-bottom:28px}
.ht{background-color:var(--blue);background-image:radial-gradient(rgba(235,230,216,.5) 1.1px,transparent 1.5px);background-size:7px 7px;color:var(--paper-2);padding:0 .16em .05em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Dymo label tape */
.dymo{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:0;border-radius:3px;background:var(--tape);color:var(--tape-text);font-family:var(--mono);font-weight:700;font-size:14px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.45);text-shadow:0 1px 0 rgba(0,0,0,.7);cursor:pointer}
.dymo:hover{background:#000;color:#fff}
.dymo.on,.dymo[aria-pressed="true"],.dymo[aria-current="page"]{background:var(--blue)}
.dymo.on:hover,.dymo[aria-pressed="true"]:hover{background:var(--blue-dk)}

/* Header + footer */
.site-head{border-bottom:2px solid var(--ink)}
.head-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:18px}
.logo{font-family:var(--display);font-size:30px;line-height:1;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.logo:hover{color:var(--blue)}
.nav{display:flex;flex-wrap:wrap;gap:10px}
.site-foot{margin-top:72px;background:var(--ink);color:var(--paper)}
.foot-row{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;padding-top:28px;padding-bottom:28px}
.foot-logo{font-family:var(--display);font-size:22px;letter-spacing:.08em;text-transform:uppercase}
.foot-logo .digits{background:var(--paper);color:var(--ink);font-size:22px;margin-left:10px;vertical-align:2px}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:15px}
.foot-nav a{color:var(--paper);display:inline-block;padding:10px 0}
.foot-nav a:hover{color:#fff}

/* Hero: unfolded cassette J-card */
.hero-wrap{padding-top:48px;padding-bottom:24px}
.jcard{display:flex;flex-wrap:wrap;border:2px solid var(--ink);background:var(--paper-2);box-shadow:10px 10px 0 var(--ink)}
.spine{flex:0 0 64px;display:flex;align-items:center;justify-content:center;padding:20px 0;background:var(--ink);color:var(--paper);border-right:2px dashed var(--ink)}
.spine p{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--display);font-size:20px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.front{flex:999 1 560px;min-width:0;padding:36px 40px 32px;display:flex;flex-direction:column;gap:22px;border-right:2px dashed var(--ink)}
.front-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px 16px;flex-wrap:wrap}
.counters{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.counters .big{font-size:30px;padding:4px 8px}
.counters .big+.big{margin-left:6px}
.front h1{font-family:var(--display);font-size:clamp(76px,12vw,176px);line-height:.88;text-transform:uppercase}
.front h1 .ht{padding:0 18px 6px;display:inline-block;margin-left:-4px}
.tagline{font-size:20px;letter-spacing:.04em}
.flap{flex:1 1 360px;min-width:0;padding:36px 36px 32px;display:flex;flex-direction:column;gap:16px}
.flap h2{font-size:13px;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:8px;font-family:var(--mono)}
.flap h2:not(:first-child){margin-top:8px}
.flap p{font-size:16px}

/* Catalogue */
.section{padding-top:56px}
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;border-bottom:2px solid var(--ink);padding-bottom:18px}
.count{margin-top:10px;font-size:15px}
.search{flex:0 1 420px;min-width:260px;display:flex;flex-direction:column;gap:6px}
.search label{font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.search input{font-family:var(--mono);font-size:18px;color:var(--ink);background:transparent;border:0;border-bottom:2px solid var(--ink);border-radius:0;padding:10px 2px;min-height:44px;-webkit-appearance:none;appearance:none}
.search input::placeholder{color:#6b665b}
.chips{display:flex;flex-wrap:wrap;gap:10px;padding:22px 0 8px}
.empty{padding:28px 0;font-size:18px}
.grid{list-style:none;margin:0;padding:28px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:44px 32px}
.related .grid{padding-top:0}
.card{display:flex;flex-direction:column;gap:10px;color:var(--ink);text-decoration:none}
.card img,.no-photo{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);background:var(--paper-3);transition:transform .12s ease,box-shadow .12s ease}
.card:hover img,.card:focus-visible img{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--blue)}
.card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px;font-size:13px;letter-spacing:.1em}
.card-meta .digits{font-size:22px}
.card-artist{font-family:var(--display);font-size:19px;line-height:1.12;letter-spacing:.03em;text-transform:uppercase}
.card-title{font-size:16px;line-height:1.3;margin-top:-4px}
.card:hover .card-artist{color:var(--blue)}
.artist-card img{filter:grayscale(1) contrast(1.1)}
.artist-card:hover img{filter:none}
.end-note{margin-top:48px;text-align:center;font-size:14px;letter-spacing:.1em}

/* No JavaScript: catalogue stays complete, filters and search are hidden */
html:not(.js) .needs-js{display:none}
.js .nojs-note{display:none}
.nojs-note{padding:12px 28px 0;font-size:14px}

/* Release page */
.page-top{padding-top:22px}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;letter-spacing:.08em;color:var(--ink)}
.rel-hero{display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start;padding-top:24px;padding-bottom:40px}
.rel-cover{margin:0;flex:1 1 420px;max-width:560px}
.rel-cover img{display:block;width:100%;border:2px solid var(--ink);box-shadow:12px 12px 0 var(--ink);background:var(--paper-3)}
.rel-info{flex:999 1 480px;min-width:0;display:flex;flex-direction:column;gap:22px}
.rel-head{display:flex;flex-direction:column;gap:12px}
.rel-cat .digits{font-size:40px;padding:2px 10px}
.rel-artist{font-family:var(--display);font-size:30px;line-height:1.1;letter-spacing:.04em;text-transform:uppercase}
.rel-artist a{color:var(--blue);text-decoration:none}
.rel-artist a:hover{color:var(--ink)}
.rel-title{font-family:var(--display);font-size:clamp(44px,6.4vw,84px);line-height:1.22;text-transform:uppercase;margin-top:6px}
.rel-title .ht{padding:.03em .16em .07em}
.rel-title.long{font-size:clamp(38px,4.6vw,60px)}
.meta{margin:0;display:grid;grid-template-columns:140px 1fr;border-top:1px solid var(--ink);font-size:16px}
.meta dt,.meta dd{margin:0;padding:9px 0;border-bottom:1px solid var(--ink)}
.meta dt{font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding-top:11px}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.buy{display:flex;flex-wrap:wrap;gap:12px}
.prose{max-width:66ch}
.prose p+p,.prose p+ul,.prose ul+p{margin-top:12px}
.prose ul,.prose ol{margin:0;padding-left:1.4em}

/* Tracklist inlay */
.section-tl{padding-bottom:56px}
.inlay{border:2px solid var(--ink);background:var(--paper-2);box-shadow:10px 10px 0 var(--ink)}
.inlay-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 16px;padding:16px 28px;background:var(--ink);color:var(--paper)}
.inlay-head h2{font-family:var(--display);font-size:34px;letter-spacing:.06em;text-transform:uppercase}
.now{display:flex;align-items:center;gap:12px;font-size:15px}
.now .counter{background:var(--paper);color:var(--ink);font-size:26px;padding:0 8px;min-width:3.4em;text-align:center}
.sides{display:flex;flex-wrap:wrap}
.side{flex:1 1 420px;min-width:0;padding:22px 28px 26px}
.side+.side{border-left:2px dashed var(--ink)}
.side h3{font-size:14px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px}
.side ol{list-style:none;margin:0;padding:0}
.trk{display:flex;align-items:center;gap:14px;min-height:52px;padding:4px 0;border-bottom:1px dotted var(--ink)}
.trk .pos{flex:0 0 auto;min-width:40px;background:none;color:var(--ink);font-size:24px;padding:0}
.trk .t{flex:1 1 auto;min-width:0;font-size:17px;line-height:1.3}
.trk .t small{display:block;font-size:14px;color:var(--ink-2)}
.trk.is-error .t::after{content:"snippet not available";display:block;font-size:14px;color:var(--blue)}
.key{width:44px;height:44px;flex:0 0 44px;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--ink);border-radius:2px;background:var(--paper-2);color:var(--ink);box-shadow:inset 0 -3px 0 #c9c2ae;cursor:pointer;padding:0}
.key:hover{background:#fff}
.key .i-pause{display:none}
.key[aria-pressed="true"]{background:var(--blue);color:var(--paper-2);box-shadow:inset 0 3px 0 var(--blue-deep)}
.key[aria-pressed="true"] .i-play{display:none}
.key[aria-pressed="true"] .i-pause{display:block}
.trk.is-playing .t{color:var(--blue);font-weight:700}
.trk.is-error .key{opacity:.35}

/* Artist block + artist page */
.artist-block{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--paper-3)}
.artist-block+.artist-block{border-top:0}
.artist-row,.artist-hero{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start;padding-top:48px;padding-bottom:48px}
.artist-photo{margin:0;flex:0 1 320px}
.artist-photo img{display:block;width:100%;border:2px solid var(--ink);filter:grayscale(1) contrast(1.15)}
.artist-hero .artist-photo{flex:0 1 420px}
.artist-hero .artist-photo img{box-shadow:10px 10px 0 var(--ink)}
.artist-body{flex:999 1 420px;min-width:0;display:flex;flex-direction:column;gap:16px}
.artist-name{font-family:var(--display);font-size:52px;line-height:.98;text-transform:uppercase}
.artist-name a{color:var(--ink);text-decoration:none}
.artist-name a:hover{color:var(--blue)}
.artist-title{font-family:var(--display);font-size:clamp(52px,7vw,96px);line-height:.95;text-transform:uppercase}
.links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.booking{font-size:16px}
.related{padding-top:48px}
.related>div+div{margin-top:56px}

/* Text pages */
.text-page{padding-top:48px}
.text-page .count{margin-top:12px}
.legal{margin-top:32px}
.legal h2{font-family:var(--display);font-size:28px;text-transform:uppercase;margin:36px 0 10px}
.legal h3{font-size:15px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin:24px 0 8px}
.legal p+p{margin-top:10px}

@media (max-width:720px){
  body{font-size:16px}
  .wrap{padding-left:16px;padding-right:16px}
  .logo{font-size:26px}
  .dymo{font-size:13px;padding:0 11px;letter-spacing:.1em}
  .hero-wrap{padding-top:24px}
  .jcard{box-shadow:6px 6px 0 var(--ink)}
  .spine{flex:1 1 100%;padding:8px 12px;border-right:0;border-bottom:2px dashed var(--ink);justify-content:flex-start}
  .spine p{writing-mode:horizontal-tb;transform:none;font-size:15px;letter-spacing:.14em;white-space:normal}
  .front{padding:24px 20px;border-right:0;border-bottom:2px dashed var(--ink)}
  .flap{padding:24px 20px}
  .tagline{font-size:17px}
  .big-title{font-size:48px}
  .mid-title{font-size:32px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 18px}
  .card-artist{font-size:17px}
  .card-title{font-size:15px}
  .card-meta .digits{font-size:19px}
  .rel-hero{gap:32px}
  .rel-cover img{box-shadow:7px 7px 0 var(--ink)}
  .rel-artist{font-size:24px}
  .rel-cat .digits{font-size:32px}
  .meta{grid-template-columns:110px 1fr}
  .inlay{box-shadow:6px 6px 0 var(--ink)}
  .inlay-head{padding:14px 16px}
  .inlay-head h2{font-size:28px}
  .side{padding:16px 16px 20px;flex-basis:100%}
  .side+.side{border-left:0;border-top:2px dashed var(--ink)}
  .artist-row,.artist-hero{gap:24px;padding-top:32px;padding-bottom:32px}
  .artist-name{font-size:40px}
  .nojs-note{padding:12px 16px 0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card img{transition:none}
}
@media print{
  .site-head .nav,.chips,.search,.key,.buy,.site-foot{display:none}
  .jcard,.inlay,.card img,.rel-cover img{box-shadow:none}
}