:root{
  --paper:#EDEEE9; --paper-deep:#E3E5DF;
  --ink:#16191A; --ink-soft:#575D5C;
  --marine:#24505E; --hairline:#C9CCC5;
  --serif:"Newsreader","Noto Serif SC",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-optical-sizing:auto;
  font-size:17px; line-height:1.65;
  padding:0 1.5rem;
}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1.5rem;top:1rem;background:var(--paper);padding:.5rem 1rem;z-index:9}
.wrap{max-width:46rem;margin:0 auto}

header{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  align-items:baseline;padding:3.5rem 0 0}
.imprint-mark{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft)}
nav{display:flex;gap:.85rem}
nav a{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;color:var(--marine);
  text-decoration:none;border-bottom:1px solid transparent;transition:border-color 120ms}
nav a:hover,nav a:focus-visible{border-bottom-color:var(--marine)}

.statement{font-size:clamp(2rem,6vw,3.25rem);line-height:1.14;font-weight:300;
  letter-spacing:-.015em;margin:4.5rem 0 1.25rem;max-width:16ch}
.statement em{font-style:italic;color:var(--marine)}
.sub{color:var(--ink-soft);max-width:34rem;margin:0 0 1.5rem}
.sub .loc{font-family:var(--mono);font-size:.8rem;display:block;margin-top:.6rem;
  letter-spacing:.04em}

.genre{margin:0 0 3.5rem}
.genre-head{display:flex;align-items:baseline;gap:1rem;background:var(--paper-deep);
  padding:.75rem 1rem;margin:0 -1rem .25rem}
.letter{font-family:var(--mono);font-size:.8rem;font-weight:500;color:var(--marine);
  letter-spacing:.06em}
.genre-head h2{font-size:1.375rem;font-weight:400;margin:0;flex:1;line-height:1.3}
.count{font-family:var(--mono);font-size:.75rem;color:var(--ink-soft)}
.genre-desc{color:var(--ink-soft);font-size:.9375rem;margin:.9rem 0 1.5rem;
  max-width:34rem}

ol{list-style:none;margin:0;padding:0}
li{border-bottom:1px solid var(--hairline)}
li:first-child{border-top:1px solid var(--hairline)}
a.spec{display:grid;grid-template-columns:3.25rem 1fr auto;gap:.9rem;
  align-items:baseline;padding:.85rem .25rem;text-decoration:none;color:inherit;
  transition:background 120ms}
a.spec:hover,a.spec:focus-visible{background:var(--paper-deep)}
.desig{font-family:var(--mono);font-size:.75rem;color:var(--ink-soft);letter-spacing:.04em}
.title{font-size:1.1875rem;line-height:1.3}
.title .cjk{color:var(--ink-soft);margin-left:.35rem}
.subtitle{display:block;font-size:.875rem;color:var(--ink-soft);font-style:italic;
  margin-top:.15rem;line-height:1.45}
.years{font-family:var(--mono);font-size:.75rem;color:var(--ink-soft);white-space:nowrap}

footer{border-top:1px solid var(--hairline);margin:5rem 0 0;padding:1.5rem 0 4rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink-soft);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.75rem}

@media (max-width:520px){
  a.spec{grid-template-columns:2.75rem 1fr;gap:.7rem}
  .years{grid-column:2;font-size:.7rem}
  .statement{margin-top:3rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
:focus-visible{outline:2px solid var(--marine);outline-offset:3px}

a.spec{display:none}
li{display:grid;grid-template-columns:3.25rem 1fr auto;gap:.25rem .9rem;
  align-items:baseline;padding:.9rem .25rem;border-bottom:1px solid var(--hairline)}
li:first-child{border-top:1px solid var(--hairline)}
.title a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hairline);
  transition:border-color 120ms,color 120ms}
.title a:hover,.title a:focus-visible{color:var(--marine);border-bottom-color:var(--marine)}
.out{grid-column:2/4;display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin-top:.35rem}
.buy{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;color:var(--marine);
  text-decoration:none;border-bottom:1px solid transparent;transition:border-color 120ms}
.buy::after{content:" \2197"}
.buy.alt{color:var(--ink-soft)}
.buy:hover,.buy:focus-visible{border-bottom-color:currentColor}
#about{border-top:1px solid var(--hairline);margin-top:4.5rem;padding-top:2.5rem}
#about h2{font-size:1.375rem;font-weight:400;margin:0 0 1.25rem}
#about p{max-width:34rem;margin:0 0 1rem}
@media (max-width:520px){li{grid-template-columns:2.75rem 1fr}.years{grid-column:2}}
.catalogue-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  margin: 0 0 3.5rem;
}

.catalogue-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Leave breathing room when jumping to a section. */
.genre,
#about {
  scroll-margin-top: 1.5rem;
}

a.imprint-mark{text-decoration:none}
a.imprint-mark:hover,a.imprint-mark:focus-visible{color:var(--marine)}
.back{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;color:var(--marine);
  text-decoration:none;border-bottom:1px solid transparent;transition:border-color 120ms}
.back::before{content:"\2190\00a0"}
.back:hover,.back:focus-visible{border-bottom-color:currentColor}

.more{font-family:var(--mono);font-size:.75rem;letter-spacing:.05em}
.more a{color:var(--marine);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color 120ms}
.more a::after{content:"\00a0\2192"}
.more a:hover,.more a:focus-visible{border-bottom-color:currentColor}
#about .more{margin:1.5rem 0 3rem}

.story p{max-width:34rem;margin:0 0 1rem}
.story .lede{font-size:1.125rem;margin-bottom:0}
.chapter{border-top:1px solid var(--hairline);margin-top:3.5rem;padding-top:2.5rem;
  scroll-margin-top:1.5rem}
.chapter h2{font-size:1.375rem;font-weight:400;margin:0 0 1.25rem;line-height:1.3}
.story .aside{font-style:italic;color:var(--marine);padding-left:1.1rem;
  border-left:1px solid var(--hairline);margin:1.5rem 0}
.story .memoir{font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;
  color:var(--ink-soft);margin-top:1.5rem}
.memoir a{color:var(--marine);text-decoration:none;border-bottom:1px solid var(--hairline);
  transition:border-color 120ms}
.memoir a:hover,.memoir a:focus-visible{border-bottom-color:currentColor}
.story .more{margin:3.5rem 0 0}