@font-face {
  font-family: "Anybody";
  src: url("/assets/fonts/anybody-latin-wdth-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-latin-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* A light table: records are held up to it to see the color. */
:root {
  --table: #eef1f5;
  --table-glow: #fafbfd;
  --sleeve: #ffffff;
  --tint: #e3e7ee;
  --ink: #1c1a33;
  --ink-hover: #322e5c;
  --ink-soft: #4d4b66;
  --on-ink: #f3f2f9;
  --on-ink-soft: #cfcde0;
  --rule: #d3d8e1;
  --shop: #cf2e3e;
  --shop-deep: #a91f2f;
  --focus: #2a55e5;

  --display: "Anybody", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --text: "Newsreader", Charter, "Iowan Old Style", Georgia, serif;

  --gutter: clamp(1rem, 4vw, 3rem);
  --max: 74rem;
  --measure: 38rem;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--table);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p {
  margin: 0;
}

cite {
  font-style: normal;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--display);
  font-weight: 700;
  border-radius: 999px;
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

/* Discs ---------------------------------------------------------------- */

.disc {
  --c1: #1d1c22;
  --c2: var(--c1);
  --c3: var(--c2);
  --label: #f4f1e8;
  --hole: 4.5%;
  --vinyl: linear-gradient(var(--c1) 0 0);
  display: block;
  flex: none;
  inline-size: var(--size, 3rem);
  block-size: var(--size, 3rem);
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side, var(--label) 0 29%, rgb(0 0 0 / 0.22) calc(29% + 0.4px) 30.5%, transparent calc(30.5% + 0.4px)),
    radial-gradient(circle closest-side, transparent 0 54%, rgb(0 0 0 / 0.1) 54.5% 55.5%, transparent 56% 79%, rgb(0 0 0 / 0.1) 79.5% 80.5%, transparent 81%),
    repeating-radial-gradient(circle closest-side, transparent 0 2.6%, rgb(0 0 0 / 0.045) 2.6% 3.2%),
    conic-gradient(from 205deg, transparent 0 4%, rgb(255 255 255 / 0.42) 10%, transparent 17% 50%, rgb(255 255 255 / 0.3) 60%, transparent 67%),
    var(--vinyl);
  box-shadow: inset 0 0 0 1px rgb(28 26 51 / 0.2);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 var(--hole), #000 calc(var(--hole) + 0.6px));
  mask: radial-gradient(circle closest-side, transparent 0 var(--hole), #000 calc(var(--hole) + 0.6px));
}

.disc[data-finish="translucent"] {
  --vinyl: linear-gradient(color-mix(in oklab, var(--c1) 64%, transparent) 0 0);
}

.disc[data-finish="marble"] {
  --vinyl:
    radial-gradient(58% 40% at 30% 34%, var(--c2) 0 30%, transparent 72%),
    radial-gradient(42% 60% at 70% 66%, var(--c2) 0 26%, transparent 70%),
    radial-gradient(26% 30% at 66% 24%, color-mix(in oklab, var(--c2) 70%, var(--c1)), transparent 75%),
    radial-gradient(30% 24% at 24% 76%, color-mix(in oklab, var(--c2) 60%, var(--c1)), transparent 75%),
    linear-gradient(var(--c1) 0 0);
}

.disc[data-finish="split"] {
  --vinyl: conic-gradient(from 30deg, var(--c1) 0 50%, var(--c2) 0 100%);
}

.disc[data-finish="picture"] {
  --label: color-mix(in oklab, var(--c1) 45%, white);
  --vinyl: conic-gradient(from 40deg, var(--c1), var(--c2) 22%, var(--c3) 45%, var(--c1) 64%, var(--c2) 82%, var(--c3));
}

.disc[data-finish="galaxy"] {
  --vinyl:
    radial-gradient(circle at 34% 30%, var(--c2) 0 1%, transparent 1.6%),
    radial-gradient(circle at 68% 40%, var(--c2) 0 0.8%, transparent 1.4%),
    radial-gradient(circle at 58% 76%, var(--c2) 0 0.9%, transparent 1.5%),
    radial-gradient(circle at 24% 62%, var(--c2) 0 0.7%, transparent 1.3%),
    radial-gradient(circle at 80% 68%, var(--c2) 0 0.7%, transparent 1.3%),
    radial-gradient(circle at 44% 86%, var(--c2) 0 0.6%, transparent 1.2%),
    radial-gradient(circle closest-side, color-mix(in oklab, var(--c1) 50%, white) 0 30%, var(--c1) 62%, color-mix(in oklab, var(--c1) 62%, black) 100%);
}

.disc[data-finish="etched"] {
  --label: color-mix(in oklab, var(--c1) 82%, white);
  --vinyl: repeating-conic-gradient(var(--c1) 0 3deg, color-mix(in oklab, var(--c1) 72%, white) 3deg 3.7deg);
}

.disc[data-finish="optical"] {
  --label: rgb(255 255 255 / 0.6);
  --hole: 12%;
  --vinyl: conic-gradient(from 120deg, #dfe3ea, #f3d9e8 12%, #d8ecf3 26%, #eef2d6 40%, #e5dbf3 55%, #d5e6ef 70%, #f2dfd5 85%, #dfe3ea);
}

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.7rem 1.4rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  font-stretch: 92%;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.btn--ink {
  background: var(--ink);
  color: var(--on-ink);
}

.btn--ink:hover {
  background: var(--ink-hover);
  border-color: var(--ink-hover);
}

/* Red is reserved for links that leave for colorfulvinyl.com. */
.btn--shop {
  background: var(--shop);
  border-color: var(--shop);
  color: #fff;
}

.btn--shop:hover {
  background: var(--shop-deep);
  border-color: var(--shop-deep);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
}

.btn--ghost:hover {
  background: var(--ink);
  color: var(--on-ink);
}

.btn--small {
  min-height: 2.75rem;
  padding: 0.45rem 1.05rem;
  font-size: 0.92rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Masthead ---------------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--rule);
}

.masthead__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.85rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 760;
  font-stretch: 88%;
  line-height: 1.1;
  text-decoration: none;
}

.brand__name span {
  font-weight: 420;
}

.brand__mark {
  inline-size: 1.85rem;
  block-size: 1.85rem;
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side, var(--table) 0 30%, transparent calc(30% + 0.5px)),
    conic-gradient(#e63946 0 16.66%, #f4a261 0 33.33%, #e9c46a 0 50%, #2a9d8f 0 66.66%, #3a86ff 0 83.33%, #8338ec 0);
  box-shadow: inset 0 0 0 1px rgb(28 26 51 / 0.15);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 9%, #000 calc(9% + 0.5px));
  mask: radial-gradient(circle closest-side, transparent 0 9%, #000 calc(9% + 0.5px));
}

.masthead__nav {
  order: 3;
  flex-basis: 100%;
}

.masthead__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.15rem;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  font-stretch: 88%;
}

.masthead__nav a {
  display: inline-block;
  padding-block: 0.45rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.masthead__nav a:hover,
.masthead__nav a[aria-current="page"] {
  border-bottom-color: currentColor;
}

.masthead__shop {
  margin-left: auto;
  white-space: pre;
}

@media (max-width: 29.99rem) {
  .masthead__shop-domain {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (min-width: 62rem) {
  .masthead__nav {
    order: 0;
    flex-basis: auto;
    margin-left: auto;
  }

  .masthead__shop {
    margin-left: 0;
  }
}

/* Stars ---------------------------------------------------------------- */

.stars {
  inline-size: 6.25rem;
  block-size: auto;
  aspect-ratio: 5;
  color: var(--ink);
  overflow: visible;
}

.stars .on {
  fill: currentColor;
}

.stars .off {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

/* Hero ---------------------------------------------------------------- */

.hero {
  background: radial-gradient(80% 70% at 75% 0%, var(--table-glow), transparent 70%);
  border-bottom: 1px solid var(--rule);
}

.hero__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2.25rem, 6vw, 5rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}

.hero__title {
  font-size: clamp(2.6rem, 8.3vw, 7.5rem);
  font-weight: 850;
  font-stretch: 125%;
  line-height: 0.86;
  letter-spacing: -0.035em;
}

.hero__intro {
  display: grid;
  gap: 1.5rem 3rem;
  align-items: end;
}

.hero__lead {
  max-width: 34rem;
  font-size: clamp(1.1875rem, 2vw, 1.375rem);
  line-height: 1.5;
}

.hero__score {
  display: grid;
  gap: 0.4rem;
  justify-items: start;
}

.hero__intro .actions {
  grid-column: 1 / -1;
}

@media (min-width: 52rem) {
  .hero__intro {
    grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
  }

  .hero__score {
    justify-self: end;
    justify-items: end;
    text-align: right;
  }
}

.score {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
}

.score__value {
  font-family: var(--display);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 800;
  font-stretch: 105%;
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.score__of {
  font-size: 1.125rem;
  color: var(--ink-soft);
}

.score__note {
  max-width: 22rem;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Histogram: one disc per review ---------------------------------------- */

.histogram {
  margin: 0;
  container-type: inline-size;
}

.histogram__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--rule);
}

.histogram__row {
  --label: 4.5rem;
  --count: 2rem;
  --gap: 0.75rem;
  display: grid;
  grid-template-columns: var(--label) minmax(0, 1fr) var(--count);
  align-items: center;
  gap: var(--gap);
  padding-block: 0.55rem;
  border-top: 1px solid var(--rule);
}

.histogram__row .stars {
  inline-size: var(--label);
}

.histogram__discs {
  --size: clamp(1.4rem, calc((100cqi - var(--label) - var(--count) - 2 * var(--gap) - 2px) / var(--discs-per-row)), 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.3rem;
  min-block-size: var(--size);
  padding-inline-start: calc(var(--size) * var(--disc-overlap));
}

.histogram__disc {
  position: relative;
  display: block;
  margin-inline-start: calc(var(--size) * var(--disc-overlap) * -1);
  border-radius: 50%;
}

.histogram__disc:has(.disc[data-finish="translucent"]) {
  mix-blend-mode: multiply;
}

.histogram__empty {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  font-stretch: 92%;
  color: var(--ink-soft);
}

.histogram__count {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 750;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.histogram__caption {
  margin-top: 0.75rem;
  font-size: 0.98rem;
  color: var(--ink-soft);
}

.histogram__tip {
  display: none;
}

@media (min-width: 40rem) {
  .histogram__row {
    --label: 6.25rem;
    --count: 2.5rem;
    --gap: 1.25rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  .histogram__disc .disc {
    transition: translate 0.18s var(--ease-out);
  }

  .histogram__disc:hover {
    z-index: 3;
  }

  .histogram__disc:hover .disc {
    translate: 0 -0.3rem;
  }

  .histogram__disc:hover .histogram__tip {
    position: absolute;
    bottom: calc(100% + 0.65rem);
    left: 50%;
    translate: -50% 0;
    z-index: 4;
    display: grid;
    gap: 0.3rem;
    inline-size: max-content;
    max-inline-size: 17rem;
    padding: 0.75rem 0.9rem;
    background: var(--ink);
    color: var(--on-ink);
    border-radius: 6px;
    font-size: 0.92rem;
    line-height: 1.4;
    pointer-events: none;
  }

  .histogram__disc:nth-last-child(-n + 5):hover .histogram__tip {
    left: auto;
    right: 0;
    translate: 0 0;
  }

  .histogram__disc:nth-child(-n + 5):hover .histogram__tip {
    left: 0;
    right: auto;
    translate: 0 0;
  }
}

.histogram__tip-product,
.histogram__tip-author {
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 700;
  font-stretch: 92%;
  color: var(--on-ink-soft);
}

/* The one orchestrated moment: the records drop onto the table. */
@media (prefers-reduced-motion: no-preference) {
  .hero .histogram__disc {
    animation: drop 560ms cubic-bezier(0.2, 0.9, 0.25, 1.12) both;
    animation-delay: calc(var(--drop-delay, 0ms) + var(--row-delay, 0ms) + 120ms);
  }

  .hero .histogram__row[data-rating="4"] {
    --row-delay: 160ms;
  }

  .hero .histogram__row[data-rating="3"] {
    --row-delay: 260ms;
  }

  .hero .histogram__row[data-rating="1"] {
    --row-delay: 360ms;
  }
}

@keyframes drop {
  from {
    opacity: 0;
    transform: translateY(-1.5rem) rotate(-50deg) scale(1.15);
  }
}

/* Sections ---------------------------------------------------------------- */

.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter);
  overflow-x: clip;
}

.section--tinted {
  background: var(--tint);
  box-shadow: 0 0 0 100vmax var(--tint);
  clip-path: inset(0 -100vmax);
}

.section--flush {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.section__head {
  display: grid;
  gap: 0.85rem;
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section__head h2 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-stretch: 128%;
  line-height: 0.96;
  letter-spacing: -0.02em;
}

.section__head p {
  max-width: var(--measure);
  font-size: 1.1875rem;
  color: var(--ink-soft);
}

.section--closing {
  display: grid;
  gap: 1rem;
  justify-items: start;
  border-top: 1px solid var(--rule);
}

.section--closing h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  font-stretch: 122%;
}

.section--closing p {
  max-width: var(--measure);
  color: var(--ink-soft);
}

.section--closing .actions {
  margin-top: 0.5rem;
}

/* Themes ---------------------------------------------------------------- */

.themes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
  gap: 2.75rem clamp(1.5rem, 3vw, 2.5rem);
}

.theme {
  display: grid;
  gap: 0.9rem;
  align-content: start;
  padding-top: 1.1rem;
  border-top: 3px solid var(--ink);
}

.theme__count {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 620;
  font-stretch: 92%;
  line-height: 1.25;
}

.theme__count strong {
  display: block;
  margin-bottom: 0.35rem;
  font-size: clamp(3.25rem, 6vw, 4.5rem);
  font-weight: 820;
  font-stretch: 135%;
  line-height: 0.88;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.theme__quote {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.5;
}

.theme__quote p::before,
.sleeve__quote p::before,
.pull blockquote p::before {
  content: "\201C";
}

.theme__quote p::after,
.sleeve__quote p::after,
.pull blockquote p::after {
  content: "\201D";
}

.theme__by {
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.theme__link {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 92%;
}

/* Sleeves: each review is a record jacket with the record half out ------ */

.sleeves {
  --peek: clamp(1.6rem, 6vw, 2.75rem);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
  gap: clamp(2rem, 4vw, 3rem) calc(var(--peek) + clamp(1rem, 2vw, 1.75rem));
  padding-inline-end: var(--peek);
}

.sleeve {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  scroll-margin-top: 1.5rem;
}

.sleeve[hidden] {
  display: none;
}

.sleeve__disc {
  --size: 76cqi;
  position: absolute;
  z-index: -1;
  top: 7cqi;
  right: calc(var(--peek) * -1);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sleeve__disc {
    transition: translate 0.45s var(--ease-out), rotate 0.9s var(--ease-out);
  }

  .sleeve:hover .sleeve__disc {
    translate: calc(var(--peek) * 0.3) 0;
    rotate: 40deg;
  }
}

.sleeve__face {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-block-size: 100cqi;
  padding: clamp(1.15rem, 7cqi, 1.6rem);
  background: var(--sleeve);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgb(28 26 51 / 0.07), 0 20px 30px -26px rgb(28 26 51 / 0.55);
}

.sleeve:target .sleeve__face {
  box-shadow: 0 0 0 3px var(--ink), 0 20px 30px -26px rgb(28 26 51 / 0.55);
}

.sleeve__face .stars {
  inline-size: 5.5rem;
}

.sleeve__quote {
  flex: 1;
  margin: 0;
  overflow-wrap: anywhere;
}

.sleeve__quote--title {
  font-family: var(--display);
  font-size: clamp(1.9rem, 12.5cqi, 2.7rem);
  font-weight: 800;
  font-stretch: 122%;
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.sleeve__quote--short {
  font-size: clamp(1.35rem, 8.6cqi, 1.65rem);
  line-height: 1.25;
}

.sleeve__quote--medium {
  font-size: 1.1875rem;
  line-height: 1.45;
}

.sleeve__quote--long {
  font-size: 1.0625rem;
  line-height: 1.5;
}

.sleeve__meta {
  display: grid;
  gap: 0.1rem;
  font-size: 0.95rem;
  line-height: 1.4;
}

.sleeve__author {
  font-size: 1.02rem;
  font-weight: 720;
  font-stretch: 96%;
  line-height: 1.25;
  letter-spacing: 0;
}

.sleeve__date {
  color: var(--ink-soft);
}

.product {
  margin-top: 0.4rem;
}

.product a,
.product cite {
  font-weight: 600;
}

.product__variant {
  display: block;
  color: var(--ink-soft);
}

.sleeve__tags {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 650;
  font-stretch: 92%;
  line-height: 1.2;
}

.sleeve__tags li {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--table);
  color: var(--ink-soft);
}

.sleeve__reply {
  display: grid;
  gap: 0.3rem;
  padding: 0.8rem 0.95rem;
  background: var(--ink);
  color: var(--on-ink);
  border-radius: 3px;
  font-size: 0.98rem;
  line-height: 1.45;
}

.sleeve__reply-head {
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 700;
  font-stretch: 92%;
  color: var(--on-ink-soft);
}

/* Shop band ---------------------------------------------------------------- */

.band {
  background: var(--ink);
  color: var(--on-ink);
  overflow: hidden;
}

.band__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter);
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 52rem) {
  .band__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.band h2 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-stretch: 112%;
  overflow-wrap: break-word;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.band p {
  max-width: 32rem;
  margin: 1.25rem 0 2rem;
  font-size: 1.1875rem;
  color: var(--on-ink-soft);
}

.band__discs {
  --size: clamp(5rem, 13vw, 9.5rem);
  display: flex;
  justify-content: center;
  padding-inline-start: calc(var(--size) * 0.55);
}

.band__disc {
  margin-inline-start: calc(var(--size) * -0.55);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}

.band__disc:nth-child(even) {
  translate: 0 1.25rem;
}

.band .disc[data-finish="translucent"] {
  --vinyl: linear-gradient(color-mix(in oklab, var(--c1) 88%, transparent) 0 0);
}

/* FAQ ---------------------------------------------------------------- */

.faq {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 2.25rem 3rem;
}

.faq__item {
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.faq dt {
  margin-bottom: 0.6rem;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 720;
  line-height: 1.2;
}

.faq dd {
  margin: 0;
  max-width: var(--measure);
}

/* Inner pages ---------------------------------------------------------------- */

.page-head {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter) clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: 1.1rem;
}

.page-head h1 {
  max-width: 15ch;
  font-size: clamp(2.6rem, 7.6vw, 6rem);
  font-weight: 850;
  font-stretch: 140%;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.page-head__lead {
  max-width: 40rem;
  font-size: clamp(1.1875rem, 2vw, 1.375rem);
  line-height: 1.5;
}

.page-head--reviews .histogram {
  margin-top: 1.25rem;
}

.page-head--center {
  min-block-size: 62vh;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.page-head--center h1 {
  max-width: 12ch;
}

.page-head--center .actions {
  justify-content: center;
}

.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 600;
  font-stretch: 90%;
  color: var(--ink-soft);
}

.crumbs li + li::before {
  content: "/";
  margin-right: 0.4rem;
}

.prose {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(3rem, 6vw, 5rem);
}

.prose > * {
  max-width: var(--measure);
}

.prose h2 {
  margin: 2.75rem 0 0.9rem;
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  font-stretch: 118%;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 1.1rem;
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

.prose li {
  margin-bottom: 0.45rem;
}

.prose li::marker {
  color: var(--ink-soft);
}

.facts {
  margin: 0 0 1.5rem;
  border-top: 1px solid var(--rule);
}

.facts > div {
  display: grid;
  gap: 0.15rem 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 40rem) {
  .facts > div {
    grid-template-columns: 11rem minmax(0, 1fr);
  }
}

.facts dt {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 720;
  font-stretch: 95%;
  line-height: 1.55;
}

.facts dd {
  margin: 0;
}

.pull {
  position: relative;
  margin: 1.75rem 0;
  padding: 1.4rem 4.75rem 1.4rem 1.5rem;
  background: var(--sleeve);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgb(28 26 51 / 0.07);
}

.pull__disc {
  --size: 2.75rem;
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
}

.pull blockquote {
  margin: 0 0 0.8rem;
  font-size: 1.25rem;
  line-height: 1.45;
}

.pull figcaption {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.pull figcaption .product {
  margin-top: 0.2rem;
  color: var(--ink);
}

.pull figcaption .product__variant {
  display: inline;
  margin-left: 0.35rem;
}

.pull__reply {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
  font-size: 1rem;
}

.pull__reply span {
  font-family: var(--display);
  font-weight: 720;
  font-stretch: 92%;
}

/* Filters ---------------------------------------------------------------- */

.filters {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.filters[hidden] {
  display: none;
}

.filters__group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.filters__group legend {
  margin-bottom: 0.5rem;
  padding: 0;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 720;
  font-stretch: 92%;
}

.chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--rule);
  border-radius: 999px;
  background: var(--sleeve);
  color: var(--ink);
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 650;
  font-stretch: 92%;
  line-height: 1;
  cursor: pointer;
}

.chip:hover {
  border-color: var(--ink);
}

.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

.chip__count {
  font-weight: 480;
  font-variant-numeric: tabular-nums;
}

.filters__status {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 620;
  font-stretch: 92%;
  color: var(--ink-soft);
}

.filters__empty {
  font-size: 1.1875rem;
}

.filters__empty[hidden] {
  display: none;
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

/* Footer ---------------------------------------------------------------- */

.colophon {
  border-top: 1px solid var(--rule);
  background: var(--sleeve);
}

.colophon__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) 2rem;
  display: grid;
  gap: 2rem 3rem;
}

@media (min-width: 52rem) {
  .colophon__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  }
}

.colophon__title {
  margin-bottom: 0.6rem;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 820;
  font-stretch: 122%;
  line-height: 1.1;
  color: var(--ink);
}

.colophon__about {
  max-width: 30rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.colophon__about p + p {
  margin-top: 0.75rem;
}

.colophon__shop {
  font-family: var(--display);
  font-weight: 720;
  color: var(--ink);
  text-decoration-color: var(--shop);
  text-decoration-thickness: 2px;
}

.colophon__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1.5rem;
}

.colophon__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  align-content: start;
  gap: 0.2rem;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  font-stretch: 92%;
}

.colophon__nav a {
  display: inline-block;
  padding-block: 0.25rem;
  text-decoration: none;
}

.colophon__nav a:hover {
  text-decoration: underline;
}

.colophon__legal {
  grid-column: 1 / -1;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* Social card (npm run og) ---------------------------------------------- */

.og {
  width: 1200px;
  height: 630px;
  overflow: hidden;
  background: radial-gradient(80% 90% at 85% 0%, var(--table-glow), transparent 70%), var(--table);
}

.og__card {
  width: 1200px;
  height: 630px;
  padding: 46px 64px 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr;
  column-gap: 32px;
  row-gap: 14px;
}

.og__site {
  grid-column: 1 / -1;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  font-stretch: 92%;
  color: var(--ink-soft);
}

.og__title {
  font-size: 94px;
  font-weight: 850;
  font-stretch: 125%;
  line-height: 0.86;
  letter-spacing: -0.035em;
}

.og__score {
  align-self: end;
  display: grid;
  justify-items: end;
  gap: 8px;
  text-align: right;
}

.og__score .score {
  justify-content: flex-end;
}

.og__score .score__value {
  font-size: 76px;
}

.og .histogram {
  grid-column: 1 / -1;
  align-self: end;
}

.og .histogram__row {
  --label: 6.25rem;
  --count: 2.5rem;
  --gap: 1.25rem;
  padding-block: 0.3rem;
}
.disc[data-c1="black"] { --c1: #1d1c22; }
.disc[data-c2="black"] { --c2: #1d1c22; }
.disc[data-c3="black"] { --c3: #1d1c22; }
.disc[data-c1="white"] { --c1: #f7f6f2; }
.disc[data-c2="white"] { --c2: #f7f6f2; }
.disc[data-c3="white"] { --c3: #f7f6f2; }
.disc[data-c1="milky"] { --c1: #ebe9e1; }
.disc[data-c2="milky"] { --c2: #ebe9e1; }
.disc[data-c3="milky"] { --c3: #ebe9e1; }
.disc[data-c1="silver"] { --c1: #c2c7ce; }
.disc[data-c2="silver"] { --c2: #c2c7ce; }
.disc[data-c3="silver"] { --c3: #c2c7ce; }
.disc[data-c1="gray"] { --c1: #8b8f98; }
.disc[data-c2="gray"] { --c2: #8b8f98; }
.disc[data-c3="gray"] { --c3: #8b8f98; }
.disc[data-c1="red"] { --c1: #c8102e; }
.disc[data-c2="red"] { --c2: #c8102e; }
.disc[data-c3="red"] { --c3: #c8102e; }
.disc[data-c1="coral"] { --c1: #f47a68; }
.disc[data-c2="coral"] { --c2: #f47a68; }
.disc[data-c3="coral"] { --c3: #f47a68; }
.disc[data-c1="pink"] { --c1: #f3a0bf; }
.disc[data-c2="pink"] { --c2: #f3a0bf; }
.disc[data-c3="pink"] { --c3: #f3a0bf; }
.disc[data-c1="orange"] { --c1: #f27a1a; }
.disc[data-c2="orange"] { --c2: #f27a1a; }
.disc[data-c3="orange"] { --c3: #f27a1a; }
.disc[data-c1="yellow"] { --c1: #f5c42f; }
.disc[data-c2="yellow"] { --c2: #f5c42f; }
.disc[data-c3="yellow"] { --c3: #f5c42f; }
.disc[data-c1="paleyellow"] { --c1: #f2e49c; }
.disc[data-c2="paleyellow"] { --c2: #f2e49c; }
.disc[data-c3="paleyellow"] { --c3: #f2e49c; }
.disc[data-c1="gold"] { --c1: #c79a2c; }
.disc[data-c2="gold"] { --c2: #c79a2c; }
.disc[data-c3="gold"] { --c3: #c79a2c; }
.disc[data-c1="sand"] { --c1: #d9c4a3; }
.disc[data-c2="sand"] { --c2: #d9c4a3; }
.disc[data-c3="sand"] { --c3: #d9c4a3; }
.disc[data-c1="green"] { --c1: #2f8f4f; }
.disc[data-c2="green"] { --c2: #2f8f4f; }
.disc[data-c3="green"] { --c3: #2f8f4f; }
.disc[data-c1="teal"] { --c1: #2a8a7c; }
.disc[data-c2="teal"] { --c2: #2a8a7c; }
.disc[data-c3="teal"] { --c3: #2a8a7c; }
.disc[data-c1="cokebottle"] { --c1: #9fd1b5; }
.disc[data-c2="cokebottle"] { --c2: #9fd1b5; }
.disc[data-c3="cokebottle"] { --c3: #9fd1b5; }
.disc[data-c1="blue"] { --c1: #2461c8; }
.disc[data-c2="blue"] { --c2: #2461c8; }
.disc[data-c3="blue"] { --c3: #2461c8; }
.disc[data-c1="purple"] { --c1: #6c3fa8; }
.disc[data-c2="purple"] { --c2: #6c3fa8; }
.disc[data-c3="purple"] { --c3: #6c3fa8; }
.histogram { --disc-overlap: 0.5; --discs-per-row: 27.00; }
.histogram__discs > :nth-child(1) { --drop-delay: 14ms; }
.histogram__discs > :nth-child(2) { --drop-delay: 28ms; }
.histogram__discs > :nth-child(3) { --drop-delay: 42ms; }
.histogram__discs > :nth-child(4) { --drop-delay: 56ms; }
.histogram__discs > :nth-child(5) { --drop-delay: 70ms; }
.histogram__discs > :nth-child(6) { --drop-delay: 84ms; }
.histogram__discs > :nth-child(7) { --drop-delay: 98ms; }
.histogram__discs > :nth-child(8) { --drop-delay: 112ms; }
.histogram__discs > :nth-child(9) { --drop-delay: 126ms; }
.histogram__discs > :nth-child(10) { --drop-delay: 140ms; }
.histogram__discs > :nth-child(11) { --drop-delay: 154ms; }
.histogram__discs > :nth-child(12) { --drop-delay: 168ms; }
.histogram__discs > :nth-child(13) { --drop-delay: 182ms; }
.histogram__discs > :nth-child(14) { --drop-delay: 196ms; }
.histogram__discs > :nth-child(15) { --drop-delay: 210ms; }
.histogram__discs > :nth-child(16) { --drop-delay: 224ms; }
.histogram__discs > :nth-child(17) { --drop-delay: 238ms; }
.histogram__discs > :nth-child(18) { --drop-delay: 252ms; }
.histogram__discs > :nth-child(19) { --drop-delay: 266ms; }
.histogram__discs > :nth-child(20) { --drop-delay: 280ms; }
.histogram__discs > :nth-child(21) { --drop-delay: 294ms; }
.histogram__discs > :nth-child(22) { --drop-delay: 308ms; }
.histogram__discs > :nth-child(23) { --drop-delay: 322ms; }
.histogram__discs > :nth-child(24) { --drop-delay: 336ms; }
.histogram__discs > :nth-child(25) { --drop-delay: 350ms; }
.histogram__discs > :nth-child(26) { --drop-delay: 364ms; }
.histogram__discs > :nth-child(27) { --drop-delay: 378ms; }
.histogram__discs > :nth-child(28) { --drop-delay: 392ms; }
.histogram__discs > :nth-child(29) { --drop-delay: 406ms; }
.histogram__discs > :nth-child(30) { --drop-delay: 420ms; }
.histogram__discs > :nth-child(31) { --drop-delay: 434ms; }
.histogram__discs > :nth-child(32) { --drop-delay: 448ms; }
.histogram__discs > :nth-child(33) { --drop-delay: 462ms; }
.histogram__discs > :nth-child(34) { --drop-delay: 476ms; }
.histogram__discs > :nth-child(35) { --drop-delay: 490ms; }
.histogram__discs > :nth-child(36) { --drop-delay: 504ms; }
.histogram__discs > :nth-child(37) { --drop-delay: 518ms; }
.histogram__discs > :nth-child(38) { --drop-delay: 532ms; }
.histogram__discs > :nth-child(39) { --drop-delay: 546ms; }
.histogram__discs > :nth-child(40) { --drop-delay: 560ms; }
.histogram__discs > :nth-child(41) { --drop-delay: 574ms; }
.histogram__discs > :nth-child(42) { --drop-delay: 588ms; }
.histogram__discs > :nth-child(43) { --drop-delay: 602ms; }
.histogram__discs > :nth-child(44) { --drop-delay: 616ms; }
.histogram__discs > :nth-child(45) { --drop-delay: 630ms; }
.histogram__discs > :nth-child(46) { --drop-delay: 644ms; }
.histogram__discs > :nth-child(47) { --drop-delay: 658ms; }
.histogram__discs > :nth-child(48) { --drop-delay: 672ms; }
.histogram__discs > :nth-child(49) { --drop-delay: 686ms; }
.histogram__discs > :nth-child(50) { --drop-delay: 700ms; }
.histogram__discs > :nth-child(51) { --drop-delay: 714ms; }
.histogram__discs > :nth-child(52) { --drop-delay: 728ms; }
.histogram__discs > :nth-child(53) { --drop-delay: 742ms; }