/* The Indie Label Index, direction C2: plain black page, dashed rules,
   Hanken Grotesk for names, IBM Plex Mono for everything else. */

@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/hanken-grotesk-latin-500-normal.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:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/hanken-grotesk-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/hanken-grotesk-latin-600-normal.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:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/hanken-grotesk-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-400-normal.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:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-600-normal.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:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#000000;
  --text:#e0e0e0;
  --muted:#b5b5b5;
  --rule:#8a8a8a;
  --bright:#ffffff;
  --hover:#9a9a9a;
  --accent:#ffffff;
  --mono:"IBM Plex Mono","Courier New",monospace;
  --sans:"Hanken Grotesk",Helvetica,Arial,sans-serif;
  color-scheme:dark;
}

html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--mono);font-size:15px;line-height:1.65;overflow-wrap:break-word}
a{color:var(--bright)}
a:hover{color:var(--hover)}
a:focus-visible,button:focus-visible,input:focus-visible,.chip input:focus-visible + span{outline:2px solid var(--bright);outline-offset:2px}

.page{min-height:100vh;box-sizing:border-box;padding:40px 16px 72px}
.wrap{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:24px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:8px;background:var(--bg);padding:4px 8px}

/* header */
.site-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px}
.site-name{font-family:var(--sans);font-size:30px;line-height:1.2;font-weight:500;color:var(--accent);text-decoration:none}
.site-name:hover{color:var(--hover)}
.tagline{color:var(--muted)}
.site-nav{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:13px;text-transform:uppercase;letter-spacing:.12em}

/* blocks separated by dashed rules */
.block{padding-top:24px;border-top:1px dashed var(--rule)}
.block.lead{padding-top:28px}
.stepbar{box-sizing:border-box;padding:12px 0;border-top:1px dashed var(--rule);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px}
.stepbar .mid{text-align:center;color:var(--muted)}

/* headings */
.label-h{margin:0;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
main .label-h{margin:30px 0 6px}
main .label-h.first{margin-top:0}
aside .label-h{margin:30px 0 8px}
aside .label-h:first-child{margin-top:0}
.block > .label-h{margin:0 0 8px}
.title{margin:0;font-family:var(--sans);font-size:44px;line-height:1.15;font-weight:500;letter-spacing:-.01em;color:var(--accent)}
h1.intro{margin:0 0 22px;font-family:var(--sans);font-size:24px;line-height:1.35;font-weight:500;color:var(--bright)}
.muted{color:var(--muted)}
p{margin:0}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;flex-wrap:wrap;gap:4px 18px}
.row.wide{gap:4px 24px}

/* search form: "search by" buttons, then the parts they switch on */
.find{margin:0;display:flex;flex-direction:column;align-items:stretch;gap:18px}
.find fieldset{margin:0;padding:0;border:0;min-width:0}
.find .field{min-width:0;display:flex;flex-direction:column;gap:6px}
.find .field label,.find legend,.ways-label{padding:0;font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.find legend{margin-bottom:8px}
.find input[type=text]{height:44px;box-sizing:border-box;padding:0 10px;border:1px solid var(--bright);border-radius:0;background:var(--bg);font-family:inherit;font-size:15px;color:var(--bright);width:100%}
.find input[type=text]::placeholder{color:var(--rule)}
.find .go{align-self:flex-start;height:44px;padding:0 20px;border:1px solid var(--bright);border-radius:0;background:var(--bright);color:var(--bg);font-family:inherit;font-size:15px;font-weight:600;cursor:pointer}
.find .go:hover{background:var(--hover);border-color:var(--hover)}
.find.big input[type=text]{height:52px;padding:0 12px;font-size:17px}
.find.big .go{height:52px;padding:0 22px;font-size:17px}
.ways{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.ways-label{margin-right:6px}
.way,.chip span,.more-btn{display:inline-block;padding:5px 12px;border:1px solid var(--rule);border-radius:0;background:var(--bg);color:var(--text);font-family:inherit;font-size:14px;line-height:1.4;cursor:pointer}
.way:hover,.chip:hover span,.more-btn:hover{border-color:var(--bright);color:var(--bright)}
.way[aria-pressed="true"],.chip input:checked + span{background:var(--bright);border-color:var(--bright);color:var(--bg)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips + .chips{margin-top:8px}
.chip{position:relative}
.chip input{position:absolute;width:1px;height:1px;margin:0;opacity:0;overflow:hidden}
.chip input:focus-visible + span{outline-offset:2px}
.more-btn{margin-top:8px;border-style:dashed}

/* lists of labels */
.name{font-family:var(--sans);font-weight:600}
.labels{display:flex;flex-direction:column;gap:16px}
.labels .name{font-size:22px}
.results .name{font-size:24px}
.results{display:flex;flex-direction:column;gap:18px;margin-top:12px}
.genre-list{display:flex;flex-direction:column;gap:8px}
.genre-list a{font-weight:600}

/* label page */
.facts{margin-top:6px;color:var(--muted)}
.genres{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px}
.quiet{margin-top:12px}
.cols{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;padding-top:24px;border-top:1px dashed var(--rule)}
.cols main{flex:999 1 440px;min-width:0}
.cols aside{flex:1 1 220px;min-width:0}
.dash{margin:0;padding:0;list-style:none}
.dash li::before{content:"- "}
.cards{display:flex;flex-direction:column;gap:10px}
.card{display:flex;gap:12px;align-items:center;padding:10px;border:1px solid var(--rule)}
.card .thumb{width:48px;height:48px;flex:none;background-color:#2b2b2b;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.6) 0 2px,transparent 2px 6px)}
.card:nth-child(even) .thumb{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 2px,transparent 2px 6px)}
.card .body{min-width:0}
.card .t{font-family:var(--sans);font-size:17px;font-weight:600;color:var(--bright)}
.card .s{font-size:13px;color:var(--muted)}
.more{margin-top:8px}
.neighbours{display:flex;flex-direction:column;gap:14px;font-size:14px}
.neighbours .name{font-size:17px}
.other-genres{display:flex;flex-direction:column;gap:2px;font-size:14px}

/* a to z */
.letters{display:flex;flex-wrap:wrap;gap:4px 14px}
.az-group h2{font-family:var(--sans);font-size:24px;font-weight:500;color:var(--bright);margin:0 0 8px}
.az-group ul{margin:0;padding:0;list-style:none}

/* prose (about) */
.prose h1{margin:0 0 10px;font-family:var(--sans);font-size:44px;line-height:1.15;font-weight:500;letter-spacing:-.01em;color:var(--accent)}
.prose h2{margin:30px 0 6px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.prose p+p{margin-top:10px}

/* the longer text at the bottom of a genre page: quiet, like the footer */
.genre-about{font-size:13px;color:var(--muted)}

/* footer */
.site-foot{display:flex;flex-wrap:wrap;gap:4px 20px;padding-top:14px;border-top:1px dashed var(--rule);font-size:13px;color:var(--muted)}

[hidden]{display:none !important}

@media (max-width:480px){
  .title,.prose h1{font-size:34px}
  h1.intro{font-size:21px}
}

.mt8{margin-top:8px}.mt10{margin-top:10px}.mt12{margin-top:12px}.mt14{margin-top:14px}.mb14{margin:0 0 14px}

/* guides */
.prose ul{margin:0;padding:0;list-style:none}
.prose ul li::before{content:"- "}
.draft{margin:0 0 18px;padding:8px 10px;border:1px dashed var(--bright);color:var(--bright);font-size:13px}
.todo{margin-top:10px;padding:8px 10px;border:1px dashed var(--rule);color:var(--muted);font-size:13px}